MTP2.0_WEB/src/views/order/spot_warran/index.vue

<template>
  <!-- 现货仓单 -->
  <section class="spot_warran">
    <component :is="componentId" v-if="componentId">
    </component>
    <thirdMenu :list="tabList" @selectMenu="changeTab" :value="'title'"></thirdMenu>
  </section>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, nextTick } from 'vue';
import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
import thirdMenu from '@/common/components/thirdMenu/index.vue';
import { handleOrderDetailList } from '@/common/setup/order/orderData';
import Bus from '@/utils/eventBus/index';

export default defineComponent({
  name: enumOrderComponents.spot_warrant,
  components: {
    thirdMenu,
    [enumOrderComponents.spot_warrant_deal]: defineAsyncComponent(() => import('./components/spot_warrant_deal/index.vue')),
    [enumOrderComponents.spot_warrant_designated_deal]: defineAsyncComponent(() => import('./components/spot_warrant_designated_deal/index.vue')),
    [enumOrderComponents.spot_warrant_in_and_out_warehouse]: defineAsyncComponent(() => import('./components/spot_warrant_in_and_out_warehouse/index.vue')),
    [enumOrderComponents.spot_warrant_inventory_summary]: defineAsyncComponent(() => import('./components/spot_warrant_inventory_summary/index.vue')),
    [enumOrderComponents.spot_warrant_pending_order]: defineAsyncComponent(() => import('./components/spot_warrant_pending_order/index.vue')),
    [enumOrderComponents.spot_warrant_spot_summary]: defineAsyncComponent(() => import('./components/spot_warrant_spot_summary/index.vue')),
    [enumOrderComponents.spot_warrant_spot_details]: defineAsyncComponent(() => import('./components/spot_warrant_spot_details/index.vue')), // 现货明细
    [enumOrderComponents.spot_warrant_bargain]: defineAsyncComponent(() => import('./components/spot_warrant_bargain/index.vue')),
  },
  setup() {
    const { componentId, tabList, changeTab } = handleOrderDetailList(enumOrderComponents.spot_warrant);

    // 组件重新加载
    function componentReload() {
      const code = componentId.value;
      componentId.value = undefined;
      nextTick(() => {
        componentId.value = code;
      });
    }

    // 资金变化，重新加载数据
    Bus.$on('moneyChangedNtf_UI', () => {
      // 重新加载组件
      componentReload();
    });

    return {
      componentId,
      tabList,
      changeTab,
    };
  },
});
</script>