优化消息订阅

src/@next/components/layout/footer-main/index.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType, ref, computed } from 'vue'
+import { defineComponent, nextTick, PropType, ref, computed, onBeforeUnmount } from 'vue'
 import { useDynamicComponent } from '@/@next/hooks/common'
 import { DynamicComponent } from '@/@next/hooks/common/interface'
 import { ApplyType } from '@/common/constants/enumCommon';
@@ -57,10 +57,14 @@ export default defineComponent({
     }
 
     // 注册账户变化事件，待通知调用
-    Bus.$onOnly('taAccountChangedNtf', () => {
+    const stopNotify = Bus.$on('taAccountChangedNtf', () => {
       componentReload();
     })
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       components,
       currentComponent,

src/@next/components/layout/footer/index.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, onBeforeUnmount } from 'vue';
 import { useDynamicComponent } from '@/@next/hooks/common'
 import { useTradeAccount } from '@/hooks/account'
 import { getSelectedAccount } from '@/services/bus/account'
@@ -39,15 +39,10 @@ export default defineComponent({
     const selectedAccountId = ref(selectedAccount.accountid || undefined);
     const isShow = ref(true);
 
-    // 资金变化，重新加载数据----------------------待优化，资金和头寸同时通知会导致多次请求
-    Bus.$on('moneyChangedNtf_UI', () => {
+    // 资金头寸变化，重新加载数据
+    const stopNotify = Bus.$on(['moneyChangedNtf', 'posChangedNtf'], () => {
       getTradeAccountList();
-    });
-
-    // 头寸变化，重新加载数据----------------------待优化，资金和头寸同时通知会导致多次请求
-    Bus.$on('posChangedNtf_UI', () => {
-      getTradeAccountList();
-    });
+    })
 
     // 控制资金面板是否显示在左边
     const isCapitalLeft = ref<boolean>(true);
@@ -58,6 +53,10 @@ export default defineComponent({
       // }
     });
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       getTradeAccountList,
       isShow,

src/App.vue

@@ -60,7 +60,7 @@ export default defineComponent({
     let spinning = ref<boolean>(false);
     const tip = ref<string>('');
     // 登出状态展示
-    eventBus.$onOnly('logout', () => {
+    eventBus.$on('logout', () => {
       tip.value = '跳转中...';
       spinning.value = true;
       TimerUtils.setTimeout(
@@ -74,8 +74,9 @@ export default defineComponent({
     });
 
     // 注册市场状态变更通知
-    eventBus.$onOnly('marketStatusChangeNtf', ({ Status }: { Status: number }) => {
-      if (Status === 1) {
+    eventBus.$on('marketStatusChangeNtf', (res) => {
+      const data = res as { Status: number };
+      if (data.Status === 1) {
         logout();
         Modal.info({
           title: '系统提示:',

src/common/methods/mixin/index.ts

@@ -16,7 +16,7 @@ export const initData = (callback: Function): void => {
         callback && callback();
     }
     onUnmounted(() => {
-        Bus.$off('loadComplete', cb);
+        Bus.$off('loadComplete');
     });
 };
 
@@ -35,7 +35,7 @@ export const cacheInitData = (callback: Function): void => {
         }
     });
     onUnmounted(() => {
-        Bus.$off('loadComplete', cb);
+        Bus.$off('loadComplete');
     });
 };
 

src/layout/components/bottom.vue

@@ -18,7 +18,7 @@
   </section>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, onBeforeUnmount } from 'vue';
 import CapitalInfo from '@/common/components/capitalInfo/index.vue';
 import firstMenu from '@/common/components/firstMenu/index.vue';
 import quoteTable from '@/common/components/quoteTable/index.vue';
@@ -50,19 +50,20 @@ export default defineComponent({
     const { tradeAccountList, getTradeAccountList, tradeAccountChange } = useTradeAccount();
     const selectedAccount = getSelectedAccount();
     const selectedAccountId = ref(selectedAccount.accountid || undefined);
+    const isCapitalLeft = ref<boolean>(true); // 控制资金面板是否显示在左边
 
-    // 资金变化，重新加载数据----------------------待优化，资金和头寸同时通知会导致多次请求
-    Bus.$on('moneyChangedNtf_UI', () => {
-      getTradeAccountList();
-    });
-
-    // 头寸变化，重新加载数据----------------------待优化，资金和头寸同时通知会导致多次请求
-    Bus.$on('posChangedNtf_UI', () => {
-      getTradeAccountList();
-    });
+    // 消息订阅
+    const notify = [
+      // 资金变化，重新加载数据
+      Bus.$on('moneyChangedNtf', () => {
+        getTradeAccountList();
+      }),
+      // 头寸变化，重新加载数据
+      Bus.$on('posChangedNtf', () => {
+        getTradeAccountList();
+      })
+    ]
 
-    // 控制资金面板是否显示在左边
-    const isCapitalLeft = ref<boolean>(true);
     initData(() => {
       getTradeAccountList();
       // if (isOemByEnum(OemType.wrspot) || isOemByEnum(OemType.tian_jing_mai_dun)) {
@@ -70,6 +71,12 @@ export default defineComponent({
       // }
     });
 
+    onBeforeUnmount(() => {
+      notify.forEach((stop) => {
+        stop();
+      })
+    })
+
     return {
       getTradeAccountList,
       tradeAccountList,

src/services/bus/system.ts

@@ -2,31 +2,19 @@ import { parseReceivePush } from '@/services/socket/quota/adapter/index';
 import eventBus from '@/utils/eventBus';
 
 /**
- * 交易通知处理，涉及各个方面
+ * 全局通知事件
  */
 export const notice = (logout: Function) => {
     // 注册账户离线通知;
-    eventBus.$onOnly('custOfflineNtf', (msg: string) => {
+    eventBus.$on('custOfflineNtf', (msg) => {
         logout(msg);
     });
     // 注册用户登出应答;
-    eventBus.$onOnly('userLogout', (msg: string) => {
+    eventBus.$on('userLogout', (msg) => {
         logout(msg);
     });
-    // 注册头寸变化通知; => 请求头寸数据,计算持仓盈亏
-    eventBus.$onOnly('posChangedNtf', (msg: string) => {
-        eventBus.$emit('posChangedNtf_UI', msg);
-    });
-    // 注册资金变化通知; => 请求资金账户信息,计算资金账户盈亏,可用,净值等
-    eventBus.$onOnly('moneyChangedNtf', (msg: string) => {
-        eventBus.$emit('moneyChangedNtf_UI', msg);
-        // queryAccountInfo('');
-    });
-    // 注册委托单撤单通知; => 刷委托单
-    eventBus.$onOnly('orderCanceledNtf', (msg: string) => {
-    });
     // 注册实时行情推送通知; => 实时行情推送
-    eventBus.$onOnly('quoteReceiveNtf', (msg: any) => {
+    eventBus.$on('quoteReceiveNtf', (msg) => {
         if (msg) {
             // console.warn(msg);
             parseReceivePush(msg);

src/services/dataCenter/index.ts

@@ -45,7 +45,7 @@ class DataCenter {
 
     /** 重置所有数据 */
     public reset(): void {
-        eventBus.$offall('moneyChangedNtf_UI'); // 取消资金变动通知
+        eventBus.$off('moneyChangedNtf'); // 取消资金变动通知
         this.data = toRefs<NeedClearSourceDataType>(reactive(Object.assign({}, needClearSourceData)));
     }
 

src/utils/eventBus/index.ts

@@ -1,78 +1,82 @@
-/** 一个事件能存储多个回调 */
-interface EnentNames {
-    loadComplete: string; //加载状态名
-    spotTrade: string;  // 挂牌成功，通知报价大厅更新数据
-    blocsTrade: string; // 贸易圈 挂牌成功
-    moneyChangedNtf_UI: string; // /接收到资金变化通知 UI 成 使用
-    posChangedNtf_UI: string; //接收到头寸变化通知
-    financing_manager: string; // 融资摘牌
-    changeTheme: string; // 切换主题
-}
-
-/** 一个事件只能存储一个回调 */
-interface EnentNamesOnlyOneValue {
-    logout: string; //登出名:确认登出时不能进行其它操作了 暂时1s登出状态
-    loginSuccess: string; // 登录成功
-    loadAddressList: string; //加载地址列表
-    loadMylieList: string; //加载闲置列表
-
-    marketStatusChangeNtf: string; // 市场状态变更通知
+import { v4 } from 'uuid'
 
-    custOfflineNtf: string; //接收到账户离线通知
-    userLogout: string; //接收到用户登出应答
-    posChangedNtf: string; //接收到头寸变化通知
-    moneyChangedNtf: string; //接收到资金变化通知
-    taAccountChangedNtf: string; //接收到资金账户通知
-    bargain: string; // 议价单
+/**
+ * 事件消息
+ */
+interface EventMessage {
+    keys: (keyof typeof EventKey)[];
+    callback: (data: unknown) => void;
+}
 
-    orderCanceledNtf: string; //接收到委托单撤单通知
-    orderDealedNtf: string; //接收到委托单成交通知
-    quoteReceiveNtf: string; // 接收实时行情推送
+/** 事件key */
+enum EventKey {
+    loadComplete, //加载状态名
+    spotTrade,  // 挂牌成功，通知报价大厅更新数据
+    blocsTrade, // 贸易圈 挂牌成功
+    financing_manager, // 融资摘牌
+    changeTheme, // 切换主题
+    logout, //登出名:确认登出时不能进行其它操作了 暂时1s登出状态
+    loginSuccess, // 登录成功
+    loadAddressList, //加载地址列表
+    loadMylieList, //加载闲置列表
+    marketStatusChangeNtf, // 市场状态变更通知
+    custOfflineNtf, //接收到账户离线通知
+    userLogout, //接收到用户登出应答
+    posChangedNtf, //接收到头寸变化通知
+    moneyChangedNtf, //接收到资金变化通知
+    taAccountChangedNtf, //接收到资金账户通知
+    bargain, // 议价单
+    orderCanceledNtf, //接收到委托单撤单通知
+    orderDealedNtf, //接收到委托单成交通知
+    quoteReceiveNtf, // 接收实时行情推送
 }
-// 事件触发器
-export default new (class Bus {
-    // 收集订阅信息,调度中心
-    private subscribe: { [key: string]: Array<Function> } = {};
 
-    /** 注册事件(一个事件可以存储多个回调) */
-    $on(enentType: keyof EnentNames, hander: Function): void {
-        this.subscribe[enentType] = this.subscribe[enentType] || [];
-        this.subscribe[enentType].push(hander);
-    }
+/**
+ * 事件总线
+ */
+export default new (class {
+    private eventMap = new Map<string, EventMessage>();
 
-    /** 注册事件(一个事件只能存储一个回调) */
-    $onOnly(enentType: keyof EnentNamesOnlyOneValue, hander: Function): void {
-        this.subscribe[enentType] = [];
-        this.subscribe[enentType].push(hander);
-    }
+    /** 监听(订阅)事件 */
+    $on(eventKey: keyof typeof EventKey | (keyof typeof EventKey)[], callback: EventMessage['callback']) {
+        const uuid = v4();
+        const keys = Array.isArray(eventKey) ? eventKey : [eventKey];
 
-    /** 发布事件 立即执行*/
-    $emit(enentType: keyof EnentNames | keyof EnentNamesOnlyOneValue, data?: any): void {
-        const sub = this.subscribe[enentType];
-        if (sub) {
-            sub.forEach((hander: Function) => hander(data));
-        }
-    }
+        this.eventMap.set(uuid, {
+            keys,
+            callback
+        })
 
-    // 取消部分订阅
-    $off(enentType: keyof EnentNames | keyof EnentNamesOnlyOneValue, hander: Function): void {
-        const sub = this.subscribe[enentType];
-        if (sub) {
-            const findIndex = sub.findIndex((fn) => fn === hander);
-            this.subscribe[enentType].splice(findIndex, 1);
+        /** 销毁事件，注意离开页面时要手动销毁当前页面的监听事件，防止事件重复触发 */
+        return () => {
+            this.eventMap.delete(uuid);
         }
     }
 
-    // 取消所有订阅
-    $offall(enentType: keyof EnentNames): void {
-        const sub = this.subscribe[enentType];
-        if (sub) {
-            delete this.subscribe[enentType];
+    /** 触发(发布)事件 */
+    $emit(eventKey: keyof typeof EventKey, data?: unknown) {
+        for (const message of this.eventMap.values()) {
+            if (message.keys.includes(eventKey)) {
+                message.callback(data);
+            }
         }
     }
 
-    // 清空所有订阅
-    $clear() {
-        this.subscribe = {};
+    /** 取消事件 */
+    $off(...eventkeys: (keyof typeof EventKey)[]) {
+        if (eventkeys.length) {
+            for (const [uuid, message] of this.eventMap.entries()) {
+                for (let i = message.keys.length - 1; i >= 0; i--) {
+                    if (eventkeys.includes(message.keys[i])) {
+                        message.keys.splice(i, 1);
+                    }
+                }
+                if (!message.keys.length) {
+                    this.eventMap.delete(uuid);
+                }
+            }
+        } else {
+            this.eventMap.clear();
+        }
     }
-})();
+})

src/views/market/market-spot/components/buy-sell-market/index.vue

@@ -22,12 +22,7 @@
       <div class="titleBtn titleBtn3" v-if="getAuctionwrType(AuctionwrType.noWr)">
         <div class="arrowLeftIcon"></div>
         <div class="name">
-          <a-month-picker
-            :allowClear="false"
-            v-model:value="time"
-            @change="timeChange"
-            class="commonDatePicker conditionPicker"
-          />
+          <a-month-picker :allowClear="false" v-model:value="time" @change="timeChange" class="commonDatePicker conditionPicker" />
         </div>
         <DownOutlined />
       </div>
@@ -62,11 +57,7 @@
           </div>
         </div>
       </div>
-      <a-button
-        class="market"
-        v-if="getListingMode(ListingMode.float)"
-        @click="openComponent({ code: 'GoodsChart' })"
-      >
+      <a-button class="market" v-if="getListingMode(ListingMode.float)" @click="openComponent({ code: 'GoodsChart' })">
         <div class="first">{{ selectedRow.goodscode }}</div>
         <div class="last red">{{ getGoodsPrice() }}</div>
         <LineChartOutlined />
@@ -86,15 +77,7 @@
         <Buy :enumName="enumName" ref="buyRef" :time="time" :parantSelectedRow="selectedRow" />
       </a-col>
     </a-row>
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :selectedRow="getSelectedRow()"
-      :goodsPrice="getGoodsPrice()"
-      :enumName="enumName"
-      :time="time"
-      @cancel="closeComponent"
-    ></component>
+    <component :is="componentId" v-if="componentId" :selectedRow="getSelectedRow()" :goodsPrice="getGoodsPrice()" :enumName="enumName" :time="time" @cancel="closeComponent"></component>
   </div>
 </template>
 
@@ -172,11 +155,7 @@ export default defineComponent({
       const arr = [{ exchangeCode: 250, goodsCode: props.selectedRow.goodscode, subState: 0 }];
       addSubscribeQuotation(uuid, arr);
     }
-    onBeforeUnmount(() => {
-      removeSubscribeQuotation(uuid);
-      TimerUtils.clearInterval('buyAndSellMartet');
-      TimerUtils.clearTimeout('debounce');
-    });
+
     const buyRef = ref<null | { queryTableAction: Function }>(null);
     const sellRef = ref<null | { queryTableAction: Function }>(null);
     const queryFn = () => {
@@ -202,7 +181,7 @@ export default defineComponent({
       'buyAndSellMartet'
     );
     // 单据挂牌成功 通知买大厅刷新数据
-    Bus.$on('spotTrade', queryFn);
+    const stopNotify = Bus.$on('spotTrade', queryFn);
 
     const quote = getQuoteDayInfoByCode(props.selectedRow.goodscode);
     // 切换组件数据
@@ -214,6 +193,13 @@ export default defineComponent({
       }
     };
 
+    onBeforeUnmount(() => {
+      stopNotify();
+      removeSubscribeQuotation(uuid);
+      TimerUtils.clearInterval('buyAndSellMartet');
+      TimerUtils.clearTimeout('debounce');
+    });
+
     return {
       time,
       buyRef,
@@ -238,13 +224,13 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .priceBar {
-  .flex;
-  flex-direction: column;
-  height: 32px;
-  .greenBar,
-  .redBar {
-    height: 16px;
-    line-height: 16px;
-  }
+    .flex;
+    flex-direction: column;
+    height: 32px;
+    .greenBar,
+    .redBar {
+        height: 16px;
+        line-height: 16px;
+    }
 }
 </style>

src/views/market/market-spot/components/designate-buy/index.vue

@@ -1,17 +1,7 @@
 <template>
   <!-- 仓单贸易 贸易圈挂牌 卖-->
   <div>
-    <a-table
-      :columns="columns"
-      :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom', 'halfBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-      :scroll="{ x: '100%', y: isBottom ? 'calc((100vh- 443px)/2 - 14px)' : 'calc((100vh - 196px)/2 - 16px)' }"
-      :pagination="false"
-      :loading="loading"
-      :expandedRowKeys="expandedRowKeys"
-      :customRow="Rowclick"
-      rowKey="key"
-      :data-source="tableList"
-    >
+    <a-table :columns="columns" :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom', 'halfBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc((100vh- 443px)/2 - 14px)' : 'calc((100vh - 196px)/2 - 16px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList">
       <template #index="{ index }">
         <span>{{ index + 1 }}</span>
       </template>
@@ -32,23 +22,13 @@
       </template>
     </a-table>
     <!-- 右键 -->
-    <contextMenu
-      :contextMenu="contextMenu"
-      @cancel="closeContext"
-      :list="filterBtn(firstBtn, selectedRow)"
-    ></contextMenu>
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :componentId="componentId"
-      :selectedRow="selectedRow"
-      :buyOrSell="BuyOrSell.Buy"
-      @cancel="closeComponent"
-    ></component>
+    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="filterBtn(firstBtn, selectedRow)"></contextMenu>
+    <component :is="componentId" v-if="componentId" :componentId="componentId" :selectedRow="selectedRow" :buyOrSell="BuyOrSell.Buy" @cancel="closeComponent"></component>
   </div>
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -119,7 +99,12 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/components/designate-sell/index.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -90,7 +91,11 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
 
     return {
       isBottom,

src/views/market/market-spot/spot_trade_order_transaction/components/buy-sell-market/index.vue

@@ -2,8 +2,7 @@
   <!-- 买卖大厅 -->
   <div class="buy-sell-market">
     <div class="buy-sell-market-title">
-      <a class="backIcon"
-         @click="cancelAction">
+      <a class="backIcon" @click="cancelAction">
         <LeftOutlined />
       </a>
       <div class="titleBtn">
@@ -13,16 +12,14 @@
       <div class="inlineBar">
         <div class="valNums bdf1 ml10">
           <!-- 最新价 -->
-          <div
-               :class="['firstNum', 'start', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">
+          <div :class="['firstNum', 'start', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">
             {{ handleNoneValue(selectedRow.last) }}</div>
           <div class="lastNum start">
             <!-- 涨跌值 -->
             <div :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
               {{ quoteChange(selectedRow, selectedRow.decimalplace) }}</div>
             <!-- 涨跌幅 -->
-            <div class="ml20"
-                 :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
+            <div class="ml20" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
               {{ quoteAmplitude(selectedRow, selectedRow.decimalplace) }}</div>
           </div>
         </div>
@@ -31,8 +28,7 @@
             <div class="greenBar green">
               <div class="numBlock ml15">
                 <div class="first">卖价</div>
-                <div class="last"
-                     :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">
+                <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">
                   {{ handleNoneValue(selectedRow.ask) }}</div>
               </div>
               <div class="numBlock">
@@ -45,8 +41,7 @@
             <div class="redBar red1">
               <div class="numBlock">
                 <div class="first">买价</div>
-                <div class="last"
-                     :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">
+                <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">
                   {{ handleNoneValue(selectedRow.bid) }}</div>
               </div>
               <div class="numBlock">
@@ -56,36 +51,24 @@
             </div>
           </div>
         </div>
-        <BtnList :btnList="handleBtnList()"
-                 :record="selectedRow"
-                 @click="openComponent" />
+        <BtnList :btnList="handleBtnList()" :record="selectedRow" @click="openComponent" />
       </div>
     </div>
     <!-- 交易图表 -->
     <!-- <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :deliverGoods="deliverGoods" /> -->
-    <Chart v-if="showComponentsId === ComponentType.chart"
-           @update="changeComponent"
-           :selectedRow="selectedRow" />
+    <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :selectedRow="selectedRow" />
     <!-- 买卖大厅内容 -->
-    <a-row class="buySellHall"
-           v-if="showComponentsId === ComponentType.marketContent">
+    <a-row class="buySellHall" v-if="showComponentsId === ComponentType.marketContent">
       <a-col :span="12">
-        <Sell ref="sellRef"
-              :parantSelectedRow="deliverGoods" />
+        <Sell ref="sellRef" :parantSelectedRow="deliverGoods" />
       </a-col>
       <a-col :span="12">
-        <Buy ref="buyRef"
-             :parantSelectedRow="deliverGoods" />
+        <Buy ref="buyRef" :parantSelectedRow="deliverGoods" />
       </a-col>
     </a-row>
     <!-- 成交明细 -->
-    <StockExchange :deliverGoods="deliverGoods"
-                   v-if="showComponentsId === ComponentType.tradeDetail" />
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :deliverGoods="deliverGoods"
-               @cancel="closeComponent"></component>
+    <StockExchange :deliverGoods="deliverGoods" v-if="showComponentsId === ComponentType.tradeDetail" />
+    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :deliverGoods="deliverGoods" @cancel="closeComponent"></component>
   </div>
 </template>
 
@@ -114,97 +97,100 @@ import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteA
 import { Tradesfer } from '../../spot_trade_order_transaction_listing_transfer/interface';
 
 export default defineComponent({
-    emits: ['cancel', 'update'],
-    name: 'buy-sell-market',
-    props: {
-        selectedRow: {
-            type: Object as PropType<Tradesfer>,
-            default: {},
-        },
-        deliverGoods: {
-            type: Object as PropType<QueryDeliveryRelationRsp>,
-            default: {},
-        },
+  emits: ['cancel', 'update'],
+  name: 'buy-sell-market',
+  props: {
+    selectedRow: {
+      type: Object as PropType<Tradesfer>,
+      default: {},
     },
-    components: {
-        Buy,
-        Sell,
-        BtnList,
-        Chart,
-        LeftOutlined,
-        Listing: defineAsyncComponent(() => import('../listing/index.vue')),
-        Detail: defineAsyncComponent(() => import('../detail/index.vue')),
-        StockExchange,
+    deliverGoods: {
+      type: Object as PropType<QueryDeliveryRelationRsp>,
+      default: {},
     },
-    setup(props, context) {
-        const loading = ref<boolean>(false);
-        const { visible, cancel } = _closeModal(context);
-        function handleBtnList() {
-            const result: BtnListType[] = [{ lable: '挂牌求购', code: 'Listing', className: 'operBtn' }];
-            if (props.selectedRow.deliverytype) {
-                result.push({ lable: '详情', code: 'Detail', className: 'btnDeafault' });
-            }
-            return result;
-        }
+  },
+  components: {
+    Buy,
+    Sell,
+    BtnList,
+    Chart,
+    LeftOutlined,
+    Listing: defineAsyncComponent(() => import('../listing/index.vue')),
+    Detail: defineAsyncComponent(() => import('../detail/index.vue')),
+    StockExchange,
+  },
+  setup(props, context) {
+    const loading = ref<boolean>(false);
+    const { visible, cancel } = _closeModal(context);
+    function handleBtnList() {
+      const result: BtnListType[] = [{ lable: '挂牌求购', code: 'Listing', className: 'operBtn' }];
+      if (props.selectedRow.deliverytype) {
+        result.push({ lable: '详情', code: 'Detail', className: 'btnDeafault' });
+      }
+      return result;
+    }
+
+    const buyRef = ref<null | { queryTableAction: Function }>(null);
+    const sellRef = ref<null | { queryTableAction: Function }>(null);
+    const queryFn = () => {
+      buyRef.value?.queryTableAction();
+      sellRef.value?.queryTableAction();
+    };
+    const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
+
+    const showComponentsId = ref<ComponentType>(ComponentType.chart);
 
-        onBeforeUnmount(() => {
-            TimerUtils.clearInterval('buyAndSellMartet');
-            TimerUtils.clearTimeout('debounce');
-        });
-        const buyRef = ref<null | { queryTableAction: Function }>(null);
-        const sellRef = ref<null | { queryTableAction: Function }>(null);
-        const queryFn = () => {
-            buyRef.value?.queryTableAction();
-            sellRef.value?.queryTableAction();
-        };
-        const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
+    // 切换组件
+    function changeComponent(type: ComponentType) {
+      showComponentsId.value = type;
+    }
+    // 返回上层组件
+    function cancelAction() {
+      if (showComponentsId.value === ComponentType.chart) {
+        cancel();
+      } else {
+        showComponentsId.value = ComponentType.chart;
+      }
+    }
 
-        const showComponentsId = ref<ComponentType>(ComponentType.chart);
+    TimerUtils.setInterval(
+      () => {
+        queryFn();
+      },
+      10 * 1000,
+      'buyAndSellMartet'
+    );
 
-        // 切换组件
-        function changeComponent(type: ComponentType) {
-            showComponentsId.value = type;
-        }
-        // 返回上层组件
-        function cancelAction() {
-            if (showComponentsId.value === ComponentType.chart) {
-                cancel();
-            } else {
-                showComponentsId.value = ComponentType.chart;
-            }
-        }
+    // 单据挂牌成功 通知买大厅刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryFn);
 
-        TimerUtils.setInterval(
-            () => {
-                queryFn();
-            },
-            10 * 1000,
-            'buyAndSellMartet'
-        );
-        // 单据挂牌成功 通知买大厅刷新数据
-        Bus.$on('spotTrade', queryFn);
+    onBeforeUnmount(() => {
+      stopNotify();
+      TimerUtils.clearInterval('buyAndSellMartet');
+      TimerUtils.clearTimeout('debounce');
+    });
 
-        return {
-            buyRef,
-            sellRef,
-            cancel,
-            visible,
-            componentId,
-            closeComponent,
-            openComponent,
-            changeComponent,
-            ComponentType,
-            showComponentsId,
-            cancelAction,
-            handleSubcriteOnDemandQuote,
-            handleQuotePriceColor,
-            handleNoneValue,
-            quoteChange,
-            quoteAmplitude,
-            quoteAmplituOfVibration,
-            handleBtnList,
-        };
-    },
+    return {
+      buyRef,
+      sellRef,
+      cancel,
+      visible,
+      componentId,
+      closeComponent,
+      openComponent,
+      changeComponent,
+      ComponentType,
+      showComponentsId,
+      cancelAction,
+      handleSubcriteOnDemandQuote,
+      handleQuotePriceColor,
+      handleNoneValue,
+      quoteChange,
+      quoteAmplitude,
+      quoteAmplituOfVibration,
+      handleBtnList,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/market-spot/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/buy-sell-market/index.vue

@@ -36,14 +36,7 @@
         <Buy :enumName="enumName" ref="buyRef" :parantSelectedRow="selectedRow" />
       </a-col>
     </a-row>
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :selectedRow="selectedRow"
-      :goodsPrice="getGoodsPrice()"
-      :enumName="enumName"
-      @cancel="closeComponent"
-    ></component>
+    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :goodsPrice="getGoodsPrice()" :enumName="enumName" @cancel="closeComponent"></component>
   </div>
 </template>
 
@@ -113,7 +106,11 @@ export default defineComponent({
     const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
 
     // 单据挂牌成功 通知买大厅刷新数据
-    Bus.$on('spotTrade', queryFn);
+    const stopNotify = Bus.$on('spotTrade', queryFn);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
 
     return {
       buyRef,
@@ -134,14 +131,14 @@ export default defineComponent({
 </script>
 <style lang="less">
 .priceBar {
-  .flex;
-  flex-direction: column;
-  height: 32px;
-  .greenBar,
-  .redBar {
-    height: 16px;
-    line-height: 16px;
-    color: var(--m-grey17);
-  }
+    .flex;
+    flex-direction: column;
+    height: 32px;
+    .greenBar,
+    .redBar {
+        height: 16px;
+        line-height: 16px;
+        color: var(--m-grey17);
+    }
 }
 </style>

src/views/market/market-spot/warehouse_pre_sale/warehouse_pre_sale_blocs/components/buy/index.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -89,7 +90,12 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_pre_sale/warehouse_pre_sale_blocs/components/sell/index.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -89,7 +90,12 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_pre_sale/warehouse_pre_sale_designate/components/buy/index.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -92,7 +93,12 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_pre_sale/warehouse_pre_sale_designate/components/sell/index.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -92,7 +93,12 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_pre_sale/warehouse_pre_sale_floating_price/index.vue

@@ -22,7 +22,7 @@ import { queryOrderQuote } from '@/services/go/wrtrade';
 import { handleComposeTable } from '@/views/market/market-spot/setup';
 import Filter from '../../components/filter/index.vue';
 import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
-import { ref } from 'vue';
+import { ref, onBeforeUnmount } from 'vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import Bus from '@/utils/eventBus/index';
 
@@ -53,7 +53,7 @@ export default defineComponent({
         cacheList.value = res;
       });
     };
-    Bus.$on('spotTrade', queryTableAction);
+
     // 表格通用逻辑
     const param: ComposeTableParam = {
       queryFn: queryTableAction,
@@ -97,6 +97,13 @@ export default defineComponent({
       value.goodscode = goods.goodscode;
       selectedRow.value = value;
     }
+
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_pre_sale/warehouse_pre_sale_price/index.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
@@ -47,7 +48,7 @@ export default defineComponent({
       };
       queryTable(queryOrderQuote, param);
     };
-    Bus.$on('spotTrade', queryTableAction);
+
     // 表格通用逻辑
     const param: ComposeTableParam = {
       queryFn: queryTableAction,
@@ -79,6 +80,13 @@ export default defineComponent({
       componentId.value = 'postBuying';
       selectedRow.value = value;
     }
+
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/buy/index.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -89,7 +90,12 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/sell/index.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -89,7 +90,11 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
 
     return {
       isBottom,

src/views/market/market-spot/warehouse_receipt_trade/warehouse_receipt_trade_designate/components/buy/index.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -92,7 +93,12 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_receipt_trade/warehouse_receipt_trade_designate/components/sell/index.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
 import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -92,7 +93,11 @@ export default defineComponent({
       // queryTable(queryOrderQuote, param);
     }
     // 单据挂牌成功 刷新数据
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
 
     return {
       isBottom,

src/views/market/market-spot/warehouse_receipt_trade/warehouse_receipt_trade_floating_price/index.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -53,7 +54,7 @@ export default defineComponent({
         cacheList.value = res;
       });
     };
-    Bus.$on('spotTrade', queryTableAction);
+
     // 表格通用逻辑
     const param: ComposeTableParam = {
       queryFn: queryTableAction,
@@ -98,6 +99,13 @@ export default defineComponent({
       value.goodscode = goods.goodscode;
       selectedRow.value = value;
     }
+
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/market/market-spot/warehouse_receipt_trade/warehouse_receipt_trade_price/index.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -47,7 +48,7 @@ export default defineComponent({
       };
       queryTable(queryOrderQuote, param);
     };
-    Bus.$on('spotTrade', queryTableAction);
+
     // 表格通用逻辑
     const param: ComposeTableParam = {
       queryFn: queryTableAction,
@@ -80,6 +81,13 @@ export default defineComponent({
       selectedRow.value = value;
     }
     console.log('firstBtn', firstBtn);
+
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

src/views/order/commodity_contract/components/commodity_contract_bargain/index.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import { DynamicComponent } from '@/@next/hooks/common/interface'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
@@ -96,12 +96,6 @@ export default defineComponent({
       queryFn: () => queryTableAction(),
     }
 
-    // 切换 我的申请和对方申请
-    Bus.$onOnly('bargain', (value: ApplyType) => {
-      margainType.value = value;
-      queryTableAction();
-    })
-
     function handleBtnList(record: QueryTjmdTransferApplyRsp, btnList: BtnListType[]) {
       if (record.applystatus === 1) {
         if (margainType.value === ApplyType.my) {
@@ -116,6 +110,16 @@ export default defineComponent({
       }
     }
 
+    // 切换 我的申请和对方申请
+    const stopNotify = Bus.$on('bargain', (value) => {
+      margainType.value = value as ApplyType;
+      queryTableAction();
+    })
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<QueryTradePositionRsp>(param),
       columns,

src/views/order/financing_manager/components/financing_manager_apply_order/index.vue

@@ -1,39 +1,39 @@
 <template>
-    <!-- 融资管理-申请单 -->
-    <mtp-table-scroll>
-        <template #default="{ scroll }">
-            <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" :rowKey="(record, index) => index" :data-source="tableList">
-                <!-- 额外的展开行 -->
-                <template v-if="buttons.length" #expandedRowRender="{ record }">
-                    <BtnList :btnList="handleBtnList(buttons, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
-                </template>
-                <!-- 类型 -->
-                <template #financetype="{ record }">
-                    <a>{{ getFinanceTypeName(record.financetype) }}</a>
-                </template>
-                <!-- 状态 -->
-                <template #applystatus="{ text }">
-                    <a>{{ getApplyStatusFinanceName(text) }}</a>
-                </template>
-                <template #createtime="{ record }">
-                    <a>{{ formatTime(record.createtime) }}</a>
-                </template>
-                <!-- 结算方式 1:按日结息 3:按月结息-->
-                <template #interestsettlemode="{ text }">
-                    <a>{{ getInterestSettleModeName(text) }}</a>
-                </template>
-                <!-- 费用 -->
-                <template #interestsettlevalue="{ record }">
-                    <a>{{ getInterestrateModeName(record.interestratemode, record.interestrate, record.enumdicname) }}</a>
-                </template>
-            </a-table>
+  <!-- 融资管理-申请单 -->
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" :rowKey="(record, index) => index" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="buttons.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="handleBtnList(buttons, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
         </template>
-    </mtp-table-scroll>
-    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
+        <!-- 类型 -->
+        <template #financetype="{ record }">
+          <a>{{ getFinanceTypeName(record.financetype) }}</a>
+        </template>
+        <!-- 状态 -->
+        <template #applystatus="{ text }">
+          <a>{{ getApplyStatusFinanceName(text) }}</a>
+        </template>
+        <template #createtime="{ record }">
+          <a>{{ formatTime(record.createtime) }}</a>
+        </template>
+        <!-- 结算方式 1:按日结息 3:按月结息-->
+        <template #interestsettlemode="{ text }">
+          <a>{{ getInterestSettleModeName(text) }}</a>
+        </template>
+        <!-- 费用 -->
+        <template #interestsettlevalue="{ record }">
+          <a>{{ getInterestrateModeName(record.interestratemode, record.interestrate, record.enumdicname) }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import { DynamicComponent } from '@/@next/hooks/common/interface';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
@@ -48,79 +48,83 @@ import { getApplyStatusFinanceName, getFinanceTypeName, getInterestrateModeName,
 import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
-    props: {
-        parentComponent: {
-            type: Object as PropType<DynamicComponent>,
-            required: true,
-        },
+  props: {
+    parentComponent: {
+      type: Object as PropType<DynamicComponent>,
+      required: true,
     },
-    components: {
-        MtpTableScroll,
-        BtnList,
-        cancel: defineAsyncComponent(() => import('./components/cancel/index.vue')), // 撤销
-    },
-    setup(props) {
-        const { buttons } = props.parentComponent;
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrFinanceBuyApply>();
+  },
+  components: {
+    MtpTableScroll,
+    BtnList,
+    cancel: defineAsyncComponent(() => import('./components/cancel/index.vue')), // 撤销
+  },
+  setup(props) {
+    const { buttons } = props.parentComponent;
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrFinanceBuyApply>();
 
-        function sortTime<T extends object>(arr: T[], key: keyof T, isUp = true) {
-            const result = arr.sort((a, b) => {
-                const time1 = new Date(a[key] as unknown as string).getTime();
-                const time2 = new Date(b[key] as unknown as string).getTime();
-                return isUp ? time1 - time2 : time2 - time1;
-            });
-            return result;
-        }
+    function sortTime<T extends object>(arr: T[], key: keyof T, isUp = true) {
+      const result = arr.sort((a, b) => {
+        const time1 = new Date(a[key] as unknown as string).getTime();
+        const time2 = new Date(b[key] as unknown as string).getTime();
+        return isUp ? time1 - time2 : time2 - time1;
+      });
+      return result;
+    }
 
-        // 获取列表数据
-        const queryTableAction = () => {
-            queryTable(queryWrFinanceBuyApply).then((res) => {
-                const arr = res.map((e) => {
-                    return { ...e, key: e.financeapplyid };
-                });
-                const waiting = arr.filter((e) => e.applystatus === 1);
-                const other = arr.filter((e) => e.applystatus !== 1);
-                // 时间 倒序排序
-                const sortWaiting = sortTime<WrFinanceBuyApply>(waiting, 'applydate', false);
-                const sortOther = sortTime<WrFinanceBuyApply>(other, 'applydate', false);
-                tableList.value = [...sortWaiting, ...sortOther];
-            });
-        };
+    // 获取列表数据
+    const queryTableAction = () => {
+      queryTable(queryWrFinanceBuyApply).then((res) => {
+        const arr = res.map((e) => {
+          return { ...e, key: e.financeapplyid };
+        });
+        const waiting = arr.filter((e) => e.applystatus === 1);
+        const other = arr.filter((e) => e.applystatus !== 1);
+        // 时间 倒序排序
+        const sortWaiting = sortTime<WrFinanceBuyApply>(waiting, 'applydate', false);
+        const sortOther = sortTime<WrFinanceBuyApply>(other, 'applydate', false);
+        tableList.value = [...sortWaiting, ...sortOther];
+      });
+    };
 
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_financing_manage_bottom_apply_order',
-        };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_financing_manage_bottom_apply_order',
+    };
 
-        // 融资摘牌成功，重新加载数据
-        Bus.$on('financing_manager', () => {
-            queryTableAction();
-        });
+    function handleBtnList(btnList: BtnListType[], item: WrFinanceBuyApply) {
+      const { applystatus } = item;
+      if (applystatus === 1) {
+        return btnList.filter((e) => e.code === ModalEnum.financing_manager_apply_cancel);
+      } else {
+        return [];
+      }
+    }
 
-        function handleBtnList(btnList: BtnListType[], item: WrFinanceBuyApply) {
-            const { applystatus } = item;
-            if (applystatus === 1) {
-                return btnList.filter((e) => e.code === ModalEnum.financing_manager_apply_cancel);
-            } else {
-                return [];
-            }
-        }
+    // 融资摘牌成功，重新加载数据
+    const stopNotify = Bus.$on('financing_manager', () => {
+      queryTableAction();
+    });
 
-        return {
-            ...handleComposeOrderTable<WrFinanceBuyApply>(param),
-            loading,
-            tableList,
-            buttons,
-            formatTime,
-            expandIcon,
-            getFinanceTypeName,
-            getApplyStatusFinanceName,
-            handleBtnList,
-            getInterestrateModeName,
-            getInterestSettleModeName,
-        };
-    },
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      ...handleComposeOrderTable<WrFinanceBuyApply>(param),
+      loading,
+      tableList,
+      buttons,
+      formatTime,
+      expandIcon,
+      getFinanceTypeName,
+      getApplyStatusFinanceName,
+      handleBtnList,
+      getInterestrateModeName,
+      getInterestSettleModeName,
+    };
+  },
 });
 </script>

src/views/order/funding_information/components/funding_information_funding_log/index.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { queryTableList, BtnList, defineComponent } from '@/common/export/commonTable';
@@ -64,10 +64,14 @@ export default defineComponent({
     }
 
     // 资金变化，重新加载数据
-    Bus.$on('moneyChangedNtf_UI', () => {
+    const stopNotify = Bus.$on('moneyChangedNtf', () => {
       queryTableAction();
     })
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrPerformancePlan>(param),
       loading,

src/views/order/futures_information/index.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import { defineAsyncComponent, defineComponent, nextTick } from 'vue';
 import thirdMenu from '@/common/components/thirdMenu/index.vue';
 import { handleOrderDetailList } from '@/common/setup/order/orderData';
@@ -34,11 +35,15 @@ export default defineComponent({
     }
 
     // 注册账户变化事件，待通知调用
-    Bus.$onOnly('taAccountChangedNtf', () => {
+    const stopNotify = Bus.$on('taAccountChangedNtf', () => {
       // 重新加载组件
       componentReload();
     });
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       componentId,
       tabList,

src/views/order/pre_sale_warehouse_receipt/components/pre_sale_warehouse_receipt_bargain/index.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
 import { queryQueryWrTradeBargainApply } from '@/services/go/wrtrade';
 import { QueryWrTradeBargainApplyQsp, QueryWrTradeBargainApplyReq } from '@/services/go/wrtrade/interface';
@@ -81,10 +81,6 @@ export default defineComponent({
       queryTable(queryQueryWrTradeBargainApply, param);
     };
 
-    Bus.$on('blocsTrade', () => {
-      queryTableAction();
-    });
-
     // 表格通用逻辑
     const param: ComposeOrderTableParam = {
       queryFn: queryTableAction,
@@ -103,6 +99,14 @@ export default defineComponent({
       openComponent, // 控制异步组件
     } = handleComposeOrderTable<QueryWrTradeBargainApplyQsp>(param);
 
+    const stopNotify = Bus.$on('blocsTrade', () => {
+      queryTableAction();
+    });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       contextMenu,
       openContext,

src/views/order/pre_sale_warehouse_receipt/components/pre_sale_warehouse_receipt_pending_order/index.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
 import { queryWrOrderDetail } from '@/services/go/wrtrade';
 import { QueryWrOrderDetailReq, WrOrderDetail } from '@/services/go/wrtrade/interface';
@@ -71,10 +71,6 @@ export default defineComponent({
       queryTable(queryWrOrderDetail, param);
     }
 
-    Bus.$on('blocsTrade', () => {
-      queryTableAction();
-    })
-
     const { tableColumns, getWrPriceType, isShowBarginBtn, showPriceOrMove } = useOrderWarrant(0);
     // 表格通用逻辑
     const param: ComposeOrderTableParam = {
@@ -94,6 +90,14 @@ export default defineComponent({
       }
     }
 
+    const stopNotify = Bus.$on('blocsTrade', () => {
+      queryTableAction();
+    })
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrOrderDetail>(param),
       filterBtnList,

src/views/order/spot_warran/components/spot_warrant_bargain/index.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { getBarmaginApplyStatus, getWrOrderTypeName, getWrTradeOrderStatusName } from '@/common/constants/enumsName';
 import { BtnList, defineAsyncComponent, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -82,10 +82,6 @@ export default defineComponent({
       queryTable(queryQueryWrTradeBargainApply, param);
     };
 
-    Bus.$on('blocsTrade', () => {
-      queryTableAction();
-    });
-
     // 表格通用逻辑
     const param: ComposeOrderTableParam = {
       queryFn: queryTableAction,
@@ -110,6 +106,14 @@ export default defineComponent({
       return arr.includes(record.applystatus) ? buttons : [];
     }
 
+    const stopNotify = Bus.$on('blocsTrade', () => {
+      queryTableAction();
+    });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       contextMenu,
       openContext,

src/views/order/spot_warran/components/spot_warrant_pending_order/index.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue'
+import { PropType, onBeforeUnmount } from 'vue'
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
 import { queryWrOrderDetail } from '@/services/go/wrtrade';
 import { QueryWrOrderDetailReq, WrOrderDetail } from '@/services/go/wrtrade/interface';
@@ -70,7 +70,8 @@ export default defineComponent({
       };
       queryTable(queryWrOrderDetail, param);
     };
-    Bus.$on('blocsTrade', () => {
+
+    const stopNotify = Bus.$on('blocsTrade', () => {
       queryTableAction();
     });
 
@@ -91,6 +92,11 @@ export default defineComponent({
         return list;
       }
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrOrderDetail>(param),
       buttons,

src/views/order/spot_warran/index.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import { defineAsyncComponent, defineComponent, nextTick } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import thirdMenu from '@/common/components/thirdMenu/index.vue';
@@ -41,11 +42,15 @@ export default defineComponent({
     }
 
     // 资金变化，重新加载数据
-    Bus.$on('moneyChangedNtf_UI', () => {
+    const stopNotify = Bus.$on('moneyChangedNtf', () => {
       // 重新加载组件
       componentReload();
     });
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       componentId,
       tabList,

src/views/order/swap_the_order/components/swap_commodity_contract_bargain/index.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import { DynamicComponent } from '@/@next/hooks/common/interface'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
@@ -97,8 +97,8 @@ export default defineComponent({
     }
 
     // 切换 我的申请和对方申请
-    Bus.$onOnly('bargain', (value: ApplyType) => {
-      margainType.value = value;
+    const stopNotify = Bus.$on('bargain', (value) => {
+      margainType.value = value as ApplyType;
       queryTableAction();
     })
 
@@ -116,6 +116,10 @@ export default defineComponent({
       }
     }
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<QueryTradePositionRsp>(param),
       columns,

src/views/order/swap_the_order/components/swap_commodity_contract_commission/index.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { TradeMode } from '@/common/constants/enumCommon';
@@ -80,10 +80,14 @@ export default defineComponent({
     }
 
     // 挂牌
-    Bus.$on('spotTrade', () => {
+    const stopNotify = Bus.$on('spotTrade', () => {
       queryTableAction();
     })
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrPerformancePlan>(param),
       loading,

src/views/order/swap_the_order/components/swap_commodity_contract_make_deal/index.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import { DynamicComponent } from '@/@next/hooks/common/interface'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { TradeMode } from '@/common/constants/enumCommon';
@@ -86,10 +86,14 @@ export default defineComponent({
       return result;
     }
 
-    Bus.$on('spotTrade', () => {
+    const stopNotify = Bus.$on('spotTrade', () => {
       queryTableAction();
     })
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<QueryTradeDetailRsp>(param),
       loading,

src/views/order/swap_the_order/components/swap_commodity_contract_summary/index.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { TradeMode } from '@/common/constants/enumCommon';
@@ -132,10 +132,14 @@ export default defineComponent({
       closeComponent(value)
     }
 
-    Bus.$on('spotTrade', () => {
+    const stopNotify = Bus.$on('spotTrade', () => {
       queryTableAction()
     })
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       contextMenu, openContext, closeContext, // 右键
       columns, registerColumn, updateColumn,  // 表头

src/views/search/search_capital_flow/search_capital_flow_tab/search_capital_flow_tab_today/index.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue'
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { defineComponent, queryTableList } from '@/common/export/commonTable';
 import { formatTime } from '@/common/methods';
@@ -50,10 +51,14 @@ export default defineComponent({
     }
 
     // 资金变化，重新加载数据
-    Bus.$on('moneyChangedNtf_UI', () => {
+    const stopNotify = Bus.$on('moneyChangedNtf', () => {
       queryTableAction();
     })
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrPerformancePlan>(param),
       loading,