MTP2.0_WEB/src/views/hedgeditem/trade/running/index.vue

<template>
    <!-- 套期交易-执行中 -->
    <mtp-table-scroll>
        <template #header>
            <Filter @search="updateColumn">
                <mtp-table-button class="btn-list-sticky" :buttons="headerButtons" @click="openComponent" />
            </Filter>
        </template>
        <template #default="{ scroll }">
            <a-table :columns="columns" class="srcollYTable" :pagination="false" :loading="loading"
                :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record, index) => index"
                :data-source="tableList" :scroll="scroll">
                <template #expandedRowRender="{ record }">
                    <mtp-table-button class="btn-list-sticky" :buttons="tableButtons" :record="record"
                        @click="openComponent" />
                </template>
            </a-table>
        </template>
    </mtp-table-scroll>
    <mtp-tab-component :options="{ selectedRow }" />
    <component :is="componentId" v-if="componentId" v-bind="{ selectedRow }" @cancel="closeComponent"></component>
</template>

<script lang="ts">
import { queryTableList, MtpTableButton, defineAsyncComponent, defineComponent, handleComposeTable } from '@/common/export/commonTable'
import { Ermcp2HedgedItemRsp } from '@/services/go/ermcp/hedgedItem/interface'
import { queryErmcp2HedgedItem } from '@/services/go/ermcp/hedgedItem'
import { useMenu } from '@/@next/hooks/common'
import MtpTableScroll from '@/common/components/tableScroll/index.vue'
import MtpTabComponent from '@/@next/components/base/tab-component/index.vue'
import Filter from '../components/filter/index.vue'

export default defineComponent({
    components: {
        MtpTabComponent,
        MtpTableButton,
        MtpTableScroll,
        Filter,
        add: defineAsyncComponent(() => import('../components/add/index.vue')), // 新增
        trade: defineAsyncComponent(() => import('@/views/market/futures/compoments/futures-trade/index.vue')), // 期货交易
        ending: defineAsyncComponent(() => import('../components/ending/index.vue')), // 完结项目
    },
    setup() {
        const { authFilter } = useMenu();
        const { loading, tableList, queryTable } = queryTableList<Ermcp2HedgedItemRsp>(true, 2); // 表格列表数据

        const headerButtons = authFilter(['add']);
        const tableButtons = authFilter(['add'], true);

        const queryFn = () => queryTable(queryErmcp2HedgedItem, { hedgeditemstatus: 3 }).then((res) => {
            if (res.length) {
                composeTable.selectedRow.value = res[0];
            }
        })

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

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