MTP2.0_WEB/src/views/market/market-spot/index.vue

<template>
  <div class="topTableHeight">
    <FristMenu :list="marketsSetion" :value="'marketsectionname'" @selectMenu="selectSection" />
    <component :is="componentId" v-if="componentId"></component>
    <ThirdMenu :list="markets" :value="'marketname'" @selectMenu="onSelectMarket" />
  </div>
</template>

<script lang="ts">
import FristMenu from '@/common/components/firstMenu/index.vue';
import ThirdMenu from '@/common/components/thirdMenu/index.vue';
import { TradeMode } from '@/common/constants/enumCommon';
import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
import { initData } from '@/common/methods';
import APP from '@/services';
import { TjmdMarketSection, TjmdMarketSectionConfig } from '@/services/go/Tjmd/interface';
import { ref } from 'vue';

export default defineComponent({
  components: {
    FristMenu,
    ThirdMenu,
    contextMenu,
    [TradeMode.WarehouseReceiptTrade]: defineAsyncComponent(() => import('./compoments/warehouse_receipt_trade/index.vue')),
    [TradeMode.quote99]: defineAsyncComponent(() => import('./compoments/spot_trade_reference_market/index.vue')),
    [TradeMode.DiaoQi]: defineAsyncComponent(() => import('./compoments/spot_trade_order_transaction/index.vue')),
  },
  setup() {
    // 市场板块
    const marketsSetion = APP.getRef('marketsSection')
    // 市场
    const markets = ref<TjmdMarketSectionConfig[]>([])
    // 选中的市场
    const selctedMarket = ref<TjmdMarketSectionConfig | null>(null)
    const componentId = ref<string>('')
    initData(() => {
      if (marketsSetion.value.length) {
        selectSection(marketsSetion.value[0])
        // markets.value = marketsSetion.value[0].mlist
      }
    })
    // 切换市场板块
    function selectSection(value: TjmdMarketSection) {
      markets.value = [...value.mlist, ...value.mlist]
      const index = marketsSetion.value.findIndex((el: TjmdMarketSection) => el.marketsectionid === value.marketsectionid)
      if (index !== -1 && value.mlist.length) {
        onSelectMarket(index, value.mlist[0])
      }
    }
    // 切换市场
    function onSelectMarket(index: number, value: TjmdMarketSectionConfig) {
      selctedMarket.value = value
      componentId.value = value.trademode.toString()
    }

    return { marketsSetion, selectSection, markets, onSelectMarket, componentId };
  },
});
</script>

<style lang="less">
.home {
  .withus {
    cursor: pointer;
    margin-top: 35px;
    padding-bottom: 25px;
  }
}
</style>