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

<template>
  <!--期货-->
  <div class="futures topTableHeight">
    <a-table :columns="getColumnsList()" :class="['srcollYTable', isBottom ? 'futures-table-up' : 'futures-table-down', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: 'auto' }" :pagination="false" :loading="loading" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
      <template #index="{ index }">
        <span>{{index + 1}}</span>
      </template>
    </a-table>
    <ThridMenu :list="tabList" @selectMenu="changeTab" />
    <!-- 右键 -->
    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="buttons"></contextMenu>
    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
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: {
        ThridMenu,
        contextMenu,
        chart: defineAsyncComponent(() => import('../spot_trade/components/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;
    padding-top: 4px;
    height: 34px;
    .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) {
        height: 26px;
        line-height: 26px !important;
        .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>