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

<template>
  <!--期货-->
  <mtp-table-scroll>
    <template #default="{ scroll }">
      <a-table
        :columns="getColumnsList()"
        class="srcollYTable"
        :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';

export default defineComponent({
  name: 'spot_trade_order_transaction_swap',
  components: {
    MtpTableScroll,
    ThridMenu,
    contextMenu,
    chart: defineAsyncComponent(() => import('../market-spot/goods-chart/index.vue')),
    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 = {
      clickCB: (record: GoodsQuote) => {
        componentId.value = 'chart';
      },
      contextmenuCB: (record: GoodsQuote, value: ContextMenuTemp) => {
        // 控制打开右键
        contextMenu.value = value;
      },
    };
    // 表格事件
    const { selectedRow, 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,
    };
  },
});
</script>
<style lang="less">
@import "./index.less";
.noData {
  .position(absolute, 28px, 0, 0, 0);
}
.filter-custom-table {
  display: inline-flex;
  align-items: center;
  padding: 7px 0;
  .conditionSelect:first-child {
    margin-right: 10px;
  }
  .btnDeafault.ant-btn,
  .operBtn.ant-btn {
    height: 26px !important;
    line-height: 26px !important;
  }

  .ant-select-single:not(.ant-select-customize-input)
    + .ant-select-single:not(.ant-select-customize-input),
  .ant-select + .ant-space.ant-space-vertical {
    margin-left: 10px;
  }
  .ant-select-single:not(.ant-select-customize-input) {
    .ant-select-selector {
      height: 26px;
      border-color: @m-grey46 !important;
      background: @m-grey47;
      .rounded-corners(3px);
      .ant-select-selection-item {
        line-height: 26px;
      }
      .ant-select-selection-search {
        height: 26px;
        .ant-select-selection-search-input {
          height: 26px;
          line-height: 27px !important;
        }
      }
      .ant-select-selection-placeholder {
        line-height: 26px;
      }
    }
  }

  .allDatePicker.ant-calendar-picker {
    height: 26px !important;
    border: 1px solid @m-grey46 !important;
    .ant-calendar-picker-input.ant-input {
      height: 26px;
      line-height: 26px;
      &::placeholder {
        color: @m-grey10 !important;
      }
    }
  }
  .conditionSelect + .conditionSelect {
    margin-left: 10px;
  }
}
</style>