MTP2.0_WEB/src/views/hedgeditem/exposure/list/index.vue

<template>
    <!-- 套期交易-敞口监控 -->
    <mtp-table-scroll>
        <template #header>
            <div class="real-time-header">
                <span class="dialogSpan">每隔</span>
                <a-input-number class="commonInput real-time-select" :min="10" :max="60" :disabled="isStart"
                    v-model:value="second"></a-input-number>
                <span class="dialogSpan">秒刷新一次，倒计时 </span> <span class="red">{{ counter }}</span>
                <a-button class="operBtn ant-btn" @click="setTimerAction">{{ isStart ? '停止监控' : '开始监控' }}</a-button>
            </div>
        </template>
        <template #default="{ scroll }">
            <a-table :columns="columns" class="srcollYTable" :pagination="false" :rowClassName="rowClassName"
                :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record, index) => index"
                :data-source="tableList" :scroll="scroll">
            </a-table>
        </template>
    </mtp-table-scroll>
    <mtp-tab-component class="table-detail" :options="{ selectedRow }" />
    <component :is="componentId" v-if="componentId" v-bind="{ selectedRow }" @cancel="closeComponent"></component>
</template>

<script lang="ts">
import { ref } from 'vue'
import { queryTableList, MtpTableButton, defineComponent, handleComposeTable } from '@/common/export/commonTable'
import { Ermcp2AreaExposureReq, Ermcp2AreaExposureRsp } from '@/services/go/ermcp/hedgedItem/interface'
import { queryErmcp2AreaExposure } from '@/services/go/ermcp/hedgedItem'
import { getUserId } from '@/services/bus/user'
import MtpTableScroll from '@/common/components/tableScroll/index.vue'
import MtpTabComponent from '@/@next/components/base/tab-component/index.vue'

export default defineComponent({
    components: {
        MtpTabComponent,
        MtpTableButton,
        MtpTableScroll,
    },
    setup() {
        const { loading, tableList, queryTable } = queryTableList<Ermcp2AreaExposureRsp>(true, 2); // 表格列表数据
        const timer = ref(0);
        const second = ref(10); // 倒计时秒数
        const counter = ref(0); // 倒计时计数器
        const isStart = ref(false);

        const setTimerAction = () => {
            clearInterval(timer.value)
            isStart.value = !isStart.value;
            counter.value = 0;

            if (isStart.value) {
                counter.value = second.value;
                countdown();
            }
        }

        const countdown = () => {
            timer.value = window.setInterval(() => {
                if (counter.value) {
                    counter.value--;
                } else {
                    counter.value = second.value;
                    queryFn();
                }
            }, 1000);
        }

        const queryFn = () => {
            const param: Ermcp2AreaExposureReq = {
                userid: getUserId()
            }
            queryTable(queryErmcp2AreaExposure, param).then((res) => {
                const selectedRow = composeTable.selectedRow.value;
                composeTable.selectedRow.value = undefined;

                window.setTimeout(() => {
                    composeTable.selectedRow.value = selectedRow;
                    if (!selectedRow && res.length) {
                        composeTable.selectedRow.value = res[0];
                    }
                }, 0)
            })
        }

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

        return {
            ...composeTable,
            loading,
            tableList,
            second,
            counter,
            isStart,
            setTimerAction,
        }
    }
})
</script>

<style lang="less" scoped>
.real-time-header {
    margin-left: auto;
    padding: 6px;
}

.real-time-select {
    margin-left: 5px;
    margin-right: 5px;

    .ant-input-number-input {
        text-align: center;
    }
}
</style>