MTP2.0_WEB/src/views/business/search/plan/index.vue

<template>
    <!-- 现货查询: 购销计划-->
    <div class="search-plan" :loading="loading">
        <filterCustomTable @search="updateColumn"></filterCustomTable>
        <a-table :columns="columns" class="srcollYTable" :pagination="false" rowKey="key" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList" :scroll="{ x: 'calc(100% - 160px)', y: 'calc(100vh - 163px)' }">
            <template #index="{ index }">
                <span>{{ index + 1 }}</span>
            </template>
        </a-table>
        <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
    </div>
</template>

<script lang="ts">
import { queryTableList, MtpTableButton, defineComponent, handleComposeTable, ComposeTableParam } from '@/common/export/commonTable';
import filterCustomTable from './components/filter/index.vue';
import { formatTime, formatValue } from '@/common/methods';
import { columns } from './setup';
import { Ermcp3HedgePlan } from '@/services/go/ermcp/plan/interface';
import { QueryHedgePlan } from '@/services/go/ermcp/plan';
import { EnumRouterName } from '@/common/constants/enumRouterName';

export default defineComponent({
    name: 'search-plan',
    components: {
        filterCustomTable,
        MtpTableButton,
    },
    setup() {
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<Ermcp3HedgePlan>();

        // 获取列表数据
        const queryTableAction = () => queryTable(QueryHedgePlan, '2,3');

        // 表格通用逻辑
        const param: ComposeTableParam = {
            queryFn: queryTableAction,
            menuType: EnumRouterName.spot_contract_checkpending,
            tableName: 'table_pcweb_hedging_plan',
            tableFilterKey: ['contracttype', 'hedgeplanno', 'deliverygoodsname'],
            isDetail: true,
        };

        return {
            ...handleComposeTable<Ermcp3HedgePlan>(param),
            loading,
            tableList,
            queryTable,
            formatTime,
            formatValue,
            columns,
        };
    },
});
</script>