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

<template>
  <!--期货-->
  <div class="topTableHeight">
    <a-table :columns="getColumnsList()" :class="['srcollYTable', isBottom ? 'condSecondTabTable' : 'condSecondTabTableNoBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 443px)' : 'calc(100vh - 196px)' }" :pagination="false" :loading="loading" :customRow="Rowclick" rowKey="key" :data-source="tableList">
      <template #totalturnover="{ text }">
        <span>{{changeUnit(text)}}</span>
      </template>
      <!-- 涨跌 -->
      <template #change="{ record }">
        <span>{{quoteChange(record, record.decimalplace)}}</span>
      </template>
      <!-- 幅度 -->
      <template #amplitude="{ record }">
        <span>{{quoteAmplitude(record, record.decimalplace)}}</span>
      </template>
      <!-- 振幅 -->
      <template #vibration="{ record }">
        <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
      </template>
      <template #index="{ index }">
        <span>{{index + 1}}</span>
      </template>
      <!-- 买价 -->
      <template #bid="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
      </template>
      <!-- 卖价 -->
      <template #ask="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
      </template>
      <!-- 最新价 -->
      <template #last="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
      </template>
      <!-- 最低价 -->
      <template #lowest="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
      </template>
      <!-- 最高价 -->
      <template #highest="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
      </template>
    </a-table>
    <ThridMenu :list="tabList" :selectedKey="index" @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 { TabList } from '@/common/components/description/interface';
import ThridMenu from '@/common/components/thirdMenu/index.vue';
import { getShowBottomValue } from '@/common/config/constrolBottom';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { handleQuotePriceColor, handleSubcriteOnDemandQuote, quoteAmplitude, quoteAmplituOfVibration, quoteChange } from '@/common/setup/table/tableQuote';
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
import { ref } from 'vue';
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,
        trade: defineAsyncComponent(() => import('./compoments/futures-trade/index.vue')),
    },
    setup() {
        const isBottom = getShowBottomValue();
        const selectedRow = ref<QueryQuoteDayRsp>();
        const buttons = getTableButton();
        console.log('buttons', buttons);
        const { index, loading, tabList, tableList, hanldeQuoteData } = useExternalexchange();
        // 行情按需订阅
        let stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(tableList);
        function changeTab(index: number, current: TabList) {
            hanldeQuoteData(index);
            console.log(index, current);
            // 停止上次订阅
            stopSubcribe();
            // 重新发起订阅
            stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(tableList);
        }

        // 右键逻辑
        const { contextMenu, closeContext: closeContextAction } = handleContextMenu();
        // 右键回调函数
        const eventsCB: TableEventCB = {
            contextmenuCB: (record: QueryQuoteDayRsp, value: ContextMenuTemp) => {
                // 控制打开右键
                contextMenu.value = value;
            },
        };
        // 表格事件
        const { Rowclick } = getTableEvent<QueryQuoteDayRsp>(eventsCB);
        // 控制异步组件
        const { componentId, closeComponent, openComponent } = handleModalComponent(() => {}, selectedRow);
        // 关闭右键
        function closeContext(value: BtnListType | null) {
            // 打开对应的弹窗组件
            if (value) openComponent(value, selectedRow.value);
            // 关闭右键
            closeContextAction();
        }

        return {
            index,
            loading,
            tabList,
            changeTab,
            tableList,
            isBottom,
            handleQuotePriceColor,
            quoteChange,
            quoteAmplitude,
            quoteAmplituOfVibration,
            getColumnsList,
            buttons,
            contextMenu,
            closeContext,
            Rowclick,
            componentId,
            closeComponent,
            selectedRow,
        };
    },
});
</script>
<style lang="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>