MTP2.0_WEB/src/views/market/futures/index.vue

<template>
  <!--期货-->
  <mtp-table-scroll>
    <template #default="{ scroll }">
      <a-table :columns="getColumnsList()" class="srcollYTable" :rowClassName="rowClassName" :scroll="scroll"
        :pagination="false" :loading="loading" :customRow="Rowclick" :rowKey="(record, index) => index"
        :data-source="tableList">
        <template #index="{ index }">
          <span>{{ index + 1 }}</span>
        </template>
      </a-table>
    </template>
    <template #footer>
      <ThridMenu :list="tabList" @selectMenu="changeTab" />
    </template>
  </mtp-table-scroll>
  <!-- 右键 -->
  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="buttons"></contextMenu>
  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :isShowTrade="true"
    @cancel="closeComponent"></component>
</template>

<script lang="ts">
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
import ThridMenu from '@/common/components/thirdMenu/index.vue';
import { getShowBottomValue } from '@/common/config/constrolBottom';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { GoodsQuote } from '@/services/go/ermcp/goodsInfo/interface';
import { getColumnsList, useExternalexchange } from './setup';
import { getTableButton } from '@/common/setup/table/button';
import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
import { handleContextMenu } from '@/common/components/contextMenu/setup';
import { TableEventCB } from '@/common/setup/table/interface';
import { getTableEvent } from '@/common/export/table';
import { ContextMenuTemp } from '@/common/components/contextMenu/interface';
import { BtnListType } from '@/common/components/btnList/interface';
import Loading from '@/common/components/loading/index.vue'

export default defineComponent({
  name: 'spot_trade_order_transaction_swap',
  components: {
    MtpTableScroll,
    ThridMenu,
    contextMenu,
    chart: defineAsyncComponent({
      loader: () => import('../market-spot/goods-chart/index.vue'),
      loadingComponent: Loading,
      delay: 0
    }),
    trade: defineAsyncComponent(() => import('./compoments/futures-trade/index.vue')),
  },
  setup() {
    const isBottom = getShowBottomValue();
    const buttons = getTableButton();
    const { loading, exchangeId, tabList, tableList, changeTab } = useExternalexchange();

    // 右键逻辑
    const { contextMenu, closeContext: closeContextAction } = handleContextMenu();

    // 右键回调函数
    const eventsCB: TableEventCB = {
      dblclick: () => {
        componentId.value = 'chart';
      },
      contextmenuCB: (record: GoodsQuote, value: ContextMenuTemp) => {
        // 控制打开右键
        contextMenu.value = value;
      },
    };

    // 表格事件
    const { selectedRow, rowClassName, Rowclick } = getTableEvent<GoodsQuote>(eventsCB);

    // 控制异步组件
    const { componentId, closeComponent, openComponent } = handleModalComponent(() => { }, selectedRow);

    // 关闭右键
    function closeContext(value: BtnListType | null) {
      // 打开对应的弹窗组件
      if (value) openComponent(value, selectedRow.value);
      // 关闭右键
      closeContextAction();
    }

    return {
      loading,
      exchangeId,
      tabList,
      changeTab,
      tableList,
      isBottom,
      getColumnsList,
      buttons,
      contextMenu,
      closeContext,
      Rowclick,
      componentId,
      closeComponent,
      selectedRow,
      rowClassName,
    }
  }
})
</script>