MTP2.0_WEB/src/views/hedgeditem/exposure/components/position/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 #ordertype="{ text }">
                    <span>{{ getOrderTypeName(text) }}</span>
                </template>
            </a-table>
        </template>
    </mtp-table-scroll>
</template>

<script lang="ts">
import { PropType, watch } from 'vue'
import { getOrderTypeName } from '@/@next/constants/enum/orderType'
import { queryTableList, defineComponent, handleComposeTable } from '@/common/export/commonTable'
import { Ermcp2AreaExposureRsp } from '@/services/go/ermcp/hedgedItem/interface'
import { ErmcpExposurePostion } from '@/services/go/ermcp/exposure/interface'
import { QueryAutualExposurePosition } from '@/services/go/ermcp/exposure'
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<ErmcpExposurePostion>(true, 2); // 表格列表数据

        const queryFn = () => {
            const { middlegoodsid } = props.selectedRow;
            if (middlegoodsid) {
                queryTable(QueryAutualExposurePosition, { middlegoodsid });
            }
        }

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

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

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