MTP2.0_WEB/src/views/hedgeditem/trade/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 { Ermcp2HedgedItemRsp, ERMCP2HedgedItemspotRsp } from '@/services/go/ermcp/hedgedItem/interface'
import { queryERMCP2HedgedItemspot } from '@/services/go/ermcp/hedgedItem'
import { getHedgedTypeName } from '@/@next/constants/enum/hedgedType'
import MtpTableScroll from '@/common/components/tableScroll/index.vue';

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

        const queryFn = () => {
            const { hedgeditemid } = props.selectedRow;
            if (hedgeditemid) {
                queryTable(queryERMCP2HedgedItemspot, { hedgeditemid });
            }
        }

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

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

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