MTP2.0_WEB/src/views/hedgeditem/exposure/components/plan/index.vue

<template>
    <!-- 套期交易-计划变动明细 -->
    <mtp-table-scroll>
        <template #default="{ scroll }">
            <a-table :columns="columns" class="srcollYTable" :pagination="false" :rowKey="(record, index) => index"
                :data-source="tableList" :scroll="scroll">
                <!-- 计划类型 -->
                <template #hedgedtype="{ text }">
                    <span>{{ getHedgedTypeName(text) }}</span>
                </template>
            </a-table>
        </template>
    </mtp-table-scroll>
</template>

<script lang="ts">
import { PropType, watch } from 'vue'
import { queryTableList, defineComponent, handleComposeTable } from '@/common/export/commonTable';
import { getHedgedTypeName } from '@/@next/constants/enum/hedgedType'
import { Ermcp2AreaExposureRsp, Ermcp2HedgedItemsDetailReq, Ermcp2HedgedItemsDetailRsp } from '@/services/go/ermcp/hedgedItem/interface'
import { queryErmcp2HedgedItemsDetail } from '@/services/go/ermcp/hedgedItem'
import { getUserId } from '@/services/bus/user'
import MtpTableScroll from '@/common/components/tableScroll/index.vue'

export default defineComponent({
    components: {
        MtpTableScroll,
    },
    props: {
        name: String,
        selectedRow: {
            type: Object as PropType<Ermcp2AreaExposureRsp>,
            default: () => ({}),
        },
    },
    setup(props) {
        const { loading, tableList, queryTable } = queryTableList<Ermcp2HedgedItemsDetailRsp>(true, 2); // 表格列表数据

        const queryFn = () => {
            const { middlegoodsid } = props.selectedRow;
            if (middlegoodsid) {
                const param: Ermcp2HedgedItemsDetailReq = {
                    userid: getUserId(),
                    middlegoodsid
                }
                queryTable(queryErmcp2HedgedItemsDetail, param);
            } else {
                tableList.value = []
            }
        }

        // 表格通用逻辑
        const composeTable = handleComposeTable<Ermcp2HedgedItemsDetailRsp>({
            queryFn,
            tableName: 'table_pcweb_hedgeditem_exposure_plan_details',
        })

        watch(() => props.selectedRow, () => queryFn());

        return {
            ...composeTable,
            loading,
            tableList,
            getHedgedTypeName,
        }
    }
})
</script>