优化消息订阅

src/App.vue

@@ -75,7 +75,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(

src/common/components/capitalInfo/index.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive } from 'vue';
+import { defineComponent, ref, reactive, onBeforeUnmount } from 'vue';
 import { getAllTaAccount, getCanUseMoney, getFreeze, getSelectedAccount, setSelectedAccount } from '@/services/bus/account';
 import { AccountListItem } from '@/services/dataCenter/interafce/account';
 import Bus from '@/utils/eventBus/index';
@@ -89,15 +89,23 @@ export default defineComponent({
       setSelectedAccount(item);
     }
 
-    // 头寸变化，重新加载数据
-    Bus.$on('posChangedNtf_UI', () => {
-      getHoldsList(loading);
-    })
+    // 消息订阅
+    const notify = [
+      // 资金变化，重新加载数据
+      Bus.$on('moneyChangedNtf', () => {
+        getTaAccount().then(() => {
+          accountChange(selectedAccountId.value);
+        })
+      }),
+      // 头寸变化，重新加载数据
+      Bus.$on('posChangedNtf', () => {
+        getHoldsList(loading);
+      })
+    ]
 
-    // 资金变化，重新加载数据
-    Bus.$on('moneyChangedNtf_UI', () => {
-      getTaAccount().then(() => {
-        accountChange(selectedAccountId.value);
+    onBeforeUnmount(() => {
+      notify.forEach((stop) => {
+        stop();
       })
     })
 

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

@@ -30,7 +30,7 @@ import { AccountListItem } from '@/services/dataCenter/interafce/account';
 import { OperationTabMenu } from '@/services/go/commonService/interface';
 import { getTaAccount } from '@/services/go/TaAccount';
 import Bus from '@/utils/eventBus/index';
-import { defineAsyncComponent, defineComponent, ref } from 'vue';
+import { defineAsyncComponent, defineComponent, ref ,onBeforeUnmount} from 'vue';
 
 export default defineComponent({
   name: 'layout-top',
@@ -56,7 +56,7 @@ export default defineComponent({
       setSelectedAccount(item);
     }
     // 资金变化，重新加载数据
-    Bus.$on('moneyChangedNtf_UI', () => {
+    const stopNotify = Bus.$on('moneyChangedNtf', () => {
       getTaAccount().then(() => {
         accountChange(selectedAccountId.value);
       });
@@ -72,6 +72,11 @@ export default defineComponent({
     function selectMenu(value: OperationTabMenu) {
       componentId.value = value.code as enumOrderComponents;
     }
+    
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       selectMenu,
       componentId,

src/services/bus/system.ts

@@ -2,36 +2,21 @@ 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) => {
         console.warn(msg);
         logout(msg);
     });
     // 注册用户登出应答;
-    eventBus.$onOnly('userLogout', (msg: string) => {
+    eventBus.$on('userLogout', (msg) => {
         console.warn(msg);
         logout(msg);
     });
-    // 注册头寸变化通知; => 请求头寸数据,计算持仓盈亏
-    eventBus.$onOnly('posChangedNtf', (msg: string) => {
-        eventBus.$emit('posChangedNtf_UI', msg);
-        console.warn(msg);
-    });
-    // 注册资金变化通知; => 请求资金账户信息,计算资金账户盈亏,可用,净值等
-    eventBus.$onOnly('moneyChangedNtf', (msg: string) => {
-        eventBus.$emit('moneyChangedNtf_UI', msg);
-        // queryAccountInfo('');
-        console.warn(msg);
-    });
-    // 注册委托单撤单通知; => 刷委托单
-    eventBus.$onOnly('orderCanceledNtf', (msg: string) => {
-        console.warn(msg);
-    });
     // 注册实时行情推送通知; => 实时行情推送
-    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/services/socket/quota/index.ts

@@ -110,7 +110,7 @@ export function removeSubscribeQuotation(uuid: string) {
 }
 
 // 行情链路 重连成功后，重新订阅商品
-Bus.$onOnly('quoteReconnectSucess', () => {
+Bus.$on('quoteReconnectSucess', () => {
     console.log('======== 行情链路 重连成功后，开启重新订阅商品')
     trySubcribe()
 })

src/utils/eventBus/index.ts

@@ -1,78 +1,81 @@
-/** 一个事件能存储多个回调 */
-interface EnentNames {
-    loadComplete: string; //加载状态名
-    spotTrade: string;  // 挂牌成功，通知报价大厅更新数据
-    blocsTrade: string; // 贸易圈 挂牌成功
-    moneyChangedNtf_UI: string; // /接收到资金变化通知 UI 成 使用
-    financing_manager: string; // 融资摘牌
-    changeTheme: string; // 切换主题
-    posChangedNtf_UI: string; //接收到头寸变化通知
-    applyInOrOut: string; // 出入金申请
-}
-
-/** 一个事件只能存储一个回调 */
-interface EnentNamesOnlyOneValue {
-    logout: string; //登出名:确认登出时不能进行其它操作了 暂时1s登出状态
-    loginSuccess: string; // 登录成功
-    loadAddressList: string; //加载地址列表
-    loadMylieList: string; //加载闲置列表
-
-    custOfflineNtf: string; //接收到账户离线通知
-    userLogout: string; //接收到用户登出应答
-    posChangedNtf: string; //接收到头寸变化通知
-    moneyChangedNtf: string; //接收到资金变化通知
-
-    bargain: string; // 议价单
+import { v4 } from 'uuid'
 
+/**
+ * 事件消息
+ */
+interface EventMessage {
+    keys: (keyof typeof EventKey)[];
+    callback: (data: unknown) => void;
+}
 
-    orderCanceledNtf: string; //接收到委托单撤单通知
-    quoteReceiveNtf: string; // 接收实时行情推送
-    quoteReconnectSucess: string; // 行情链路重连成功通知
+/** 事件key */
+enum EventKey {
+    loadComplete, //加载状态名
+    spotTrade,   // 挂牌成功，通知报价大厅更新数据
+    blocsTrade,  // 贸易圈 挂牌成功
+    financing_manager,  // 融资摘牌
+    changeTheme,  // 切换主题
+    applyInOrOut,  // 出入金申请
+    logout,  //登出名:确认登出时不能进行其它操作了 暂时1s登出状态
+    loginSuccess,  // 登录成功
+    loadAddressList,  //加载地址列表
+    loadMylieList,  //加载闲置列表
+    custOfflineNtf,  //接收到账户离线通知
+    userLogout,  //接收到用户登出应答
+    posChangedNtf,  //接收到头寸变化通知
+    moneyChangedNtf,  //接收到资金变化通知
+    bargain,  // 议价单
+    orderCanceledNtf,  //接收到委托单撤单通知
+    quoteReceiveNtf,  // 接收实时行情推送
+    quoteReconnectSucess // 行情链路重连成功通知
 }
-// 事件触发器
-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/account-manager/account-manager-agency/account-manager-agency-sub/index.vue

@@ -62,7 +62,7 @@ import { handlePreviewImg } from '@/common/setup/upload';
 import { QueryAccountInOutApply, queryBankAccountSign } from '@/services/go/ermcp/qhj';
 import { QueryAccountInOutApplyRsp, QueryAccountInOutApplyRsq, QueryBankAccountSignQsp } from '@/services/go/ermcp/qhj/interface';
 import { QueryPermancePlanTmpRsp } from '@/services/go/wrtrade/interface';
-import { ref, watch, watchEffect } from 'vue';
+import { ref, watch, watchEffect, onBeforeUnmount } from 'vue';
 import { getColumns } from './setup';
 import Bus from '@/utils/eventBus/index';
 import { sortTime } from '@/utils/time';
@@ -172,10 +172,16 @@ export default defineComponent({
         changeTab(cacheIndex, tabList.value[cacheIndex]);
       }
     });
+
     // 出入金申请，重新加载数据
-    Bus.$on('applyInOrOut', () => {
+    const stopNotify = Bus.$on('applyInOrOut', () => {
       queryDetail();
     });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       loading,
       tableList,

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

@@ -197,7 +197,7 @@ export default defineComponent({
       'buyAndSellMartet'
     );
     // 单据挂牌成功 通知买大厅刷新数据
-    Bus.$on('spotTrade', queryFn);
+    const stopNotify = Bus.$on('spotTrade', queryFn);
 
     const quote = getQuoteDayInfoByCode(props.selectedRow.goodscode);
     // 切换组件数据
@@ -209,6 +209,10 @@ export default defineComponent({
       }
     };
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       time,
       buyRef,

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

@@ -1,15 +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>
@@ -30,19 +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';
@@ -55,90 +41,95 @@ import Bus from '@/utils/eventBus/index';
 import { filterBtn, handleColumns } from './../setup';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_buy',
-    props: {
-        isWR: {
-            type: Number,
-            default: 1, // 1 => 仓单贸易; 0 => 仓单预售
-        },
-        IsSpecified: {
-            // IsSpecified = 1 为贸易圈；IsSpecified = 2 为指定挂牌
-            type: Number,
-            default: 1,
-        },
+  name: 'warehouse_receipt_trade_blocs_buy',
+  props: {
+    isWR: {
+      type: Number,
+      default: 1, // 1 => 仓单贸易; 0 => 仓单预售
     },
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../designate-delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../designate-delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+    IsSpecified: {
+      // IsSpecified = 1 为贸易圈；IsSpecified = 2 为指定挂牌
+      type: Number,
+      default: 1,
     },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.buy);
+  },
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../designate-delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../designate-delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.buy);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.buy,
-                haswr: 1,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.buy,
+        haswr: 1,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

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

@@ -1,15 +1,7 @@
 <template>
   <!-- 仓单贸易 贸易圈挂牌 买-->
   <div>
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom',  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',  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>
@@ -30,19 +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.sell"
-               @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.sell" @cancel="closeComponent"></component>
   </div>
 </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';
@@ -57,81 +43,85 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_sell',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../designate-delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../designate-delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
+  name: 'warehouse_receipt_trade_blocs_sell',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../designate-delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../designate-delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
 
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.sell);
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.sell);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.sell,
-                haswr: 1,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.sell,
+        haswr: 1,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
 
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/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,101 @@ 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;
+    }
 
-        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({}));
+    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({}));
 
-        const showComponentsId = ref<ComponentType>(ComponentType.chart);
+    const showComponentsId = ref<ComponentType>(ComponentType.chart);
 
-        // 切换组件
-        function changeComponent(type: ComponentType) {
-            showComponentsId.value = type;
-        }
-        // 返回上层组件
-        function cancelAction() {
-            if (showComponentsId.value === ComponentType.chart) {
-                cancel();
-            } else {
-                showComponentsId.value = ComponentType.chart;
-            }
-        }
+    // 切换组件
+    function changeComponent(type: ComponentType) {
+      showComponentsId.value = type;
+    }
+    // 返回上层组件
+    function cancelAction() {
+      if (showComponentsId.value === ComponentType.chart) {
+        cancel();
+      } else {
+        showComponentsId.value = ComponentType.chart;
+      }
+    }
 
-        TimerUtils.setInterval(
-            () => {
-                queryFn();
-            },
-            10 * 1000,
-            'buyAndSellMartet'
-        );
-        // 单据挂牌成功 通知买大厅刷新数据
-        Bus.$on('spotTrade', queryFn);
+    TimerUtils.setInterval(
+      () => {
+        queryFn();
+      },
+      10 * 1000,
+      'buyAndSellMartet'
+    );
+    // 单据挂牌成功 通知买大厅刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryFn);
 
-        return {
-            buyRef,
-            sellRef,
-            cancel,
-            visible,
-            componentId,
-            closeComponent,
-            openComponent,
-            changeComponent,
-            ComponentType,
-            showComponentsId,
-            cancelAction,
-            handleSubcriteOnDemandQuote,
-            handleQuotePriceColor,
-            handleNoneValue,
-            quoteChange,
-            quoteAmplitude,
-            quoteAmplituOfVibration,
-            handleBtnList,
-        };
-    },
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    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/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/buy-sell-market/index.vue

@@ -130,7 +130,11 @@ export default defineComponent({
     }
 
     // 单据挂牌成功 通知买大厅刷新数据
-    Bus.$on('spotTrade', queryFn);
+    const stopNotify = Bus.$on('spotTrade', queryFn);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
 
     return {
       buyRef,

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_blocs/components/buy/index.vue

@@ -1,15 +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>
@@ -30,19 +22,13 @@
       </template>
     </a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="filterBtn(firstBtn)"></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)"></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 { 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';
@@ -57,79 +43,84 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_buy',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.buy);
+  name: 'warehouse_receipt_trade_blocs_buy',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.buy);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.buy,
-                haswr: 0,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.buy,
+        haswr: 0,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_blocs/components/sell/index.vue

@@ -1,15 +1,7 @@
 <template>
   <!-- 仓单贸易 贸易圈挂牌 买-->
   <div>
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom',  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',  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>
@@ -30,19 +22,13 @@
       </template>
     </a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="filterBtn(firstBtn)"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :componentId="componentId"
-               :selectedRow="selectedRow"
-               :buyOrSell="BuyOrSell.sell"
-               @cancel="closeComponent"></component>
+    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="filterBtn(firstBtn)"></contextMenu>
+    <component :is="componentId" v-if="componentId" :componentId="componentId" :selectedRow="selectedRow" :buyOrSell="BuyOrSell.sell" @cancel="closeComponent"></component>
   </div>
 </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';
@@ -57,79 +43,84 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_sell',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.sell);
+  name: 'warehouse_receipt_trade_blocs_sell',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.sell);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.sell,
-                haswr: 0,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.sell,
+        haswr: 0,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/components/buy/index.vue

@@ -1,15 +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>
@@ -30,19 +22,13 @@
       </template>
     </a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="filterBtn(firstBtn)"></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)"></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 { 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';
@@ -57,79 +43,84 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_buy',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.buy);
+  name: 'warehouse_receipt_trade_blocs_buy',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.buy);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.buy,
-                haswr: 0,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.buy,
+        haswr: 0,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_designate/components/sell/index.vue

@@ -1,15 +1,7 @@
 <template>
   <!-- 仓单贸易 贸易圈挂牌 买-->
   <div>
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom',  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',  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>
@@ -30,19 +22,13 @@
       </template>
     </a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="filterBtn(firstBtn)"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :componentId="componentId"
-               :selectedRow="selectedRow"
-               :buyOrSell="BuyOrSell.sell"
-               @cancel="closeComponent"></component>
+    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="filterBtn(firstBtn)"></contextMenu>
+    <component :is="componentId" v-if="componentId" :componentId="componentId" :selectedRow="selectedRow" :buyOrSell="BuyOrSell.sell" @cancel="closeComponent"></component>
   </div>
 </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';
@@ -57,79 +43,84 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_sell',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.sell);
+  name: 'warehouse_receipt_trade_blocs_sell',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.sell);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.sell,
-                haswr: 0,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.sell,
+        haswr: 0,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_floating_price/index.vue

@@ -1,32 +1,16 @@
 <template>
   <!-- 仓单预售 浮动价预售-->
   <div class="topTableHeight">
-    <Filter :enumName="name"
-            @buy="buyOpen"
-            @filterGoods="filterGoods"
-            @search="search" />
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'condSecondTabTable' : 'condSecondTabTableNoBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-             :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 443px)' : 'calc(100vh - 196px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="key"
-             :data-source="tableList"></a-table>
+    <Filter :enumName="name" @buy="buyOpen" @filterGoods="filterGoods" @search="search" />
+    <a-table :columns="columns" :class="['srcollYTable', isBottom ? 'condSecondTabTable' : 'condSecondTabTableNoBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 443px)' : 'calc(100vh - 196px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList"></a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="firstBtn"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :enumName="name"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
+    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu>
+    <component :is="componentId" v-if="componentId" :enumName="name" :selectedRow="selectedRow" @cancel="closeComponent"></component>
   </div>
 </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 { QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -39,100 +23,105 @@ import { getShowBottomValue } from '@/common/config/constrolBottom';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: EnumRouterName.warehouse_pre_sale_floating_price,
-    components: {
-        contextMenu,
-        Filter,
-        warehouse_pre_sale_floating_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
-        warehouse_pre_sale_floating_price_spot_trade_warehouse_post_buying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-        buyAndSell: defineAsyncComponent(() => import('../../components/buy-sell-market/index.vue')),
-        postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        let cacheID: number | null = null;
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
-        const cacheList = ref<WrOrderQuote[]>([]);
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 2,
-                haswr: 0,
-            };
-            queryTable(queryOrderQuote, param).then((res) => {
-                cacheList.value = res;
-            });
-        };
-        Bus.$on('spotTrade', queryTableAction);
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_pre_sale_floating_price,
-            tableName: 'table_pcweb_spot_trade_warehouse_sale_float',
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            registerColumn,
-            updateColumn, // 表头
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-        } = handleComposeTable<WrOrderQuote>(param);
-        function search(value: Object) {
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 2,
-                haswr: 0,
-            };
-            Object.assign(param, value);
-            queryTable(queryOrderQuote, param).then((res) => {
-                cacheList.value = res;
-                if (cacheID) {
-                    filterGoods(cacheID);
-                }
-            });
+  name: EnumRouterName.warehouse_pre_sale_floating_price,
+  components: {
+    contextMenu,
+    Filter,
+    warehouse_pre_sale_floating_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
+    warehouse_pre_sale_floating_price_spot_trade_warehouse_post_buying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
+    buyAndSell: defineAsyncComponent(() => import('../../components/buy-sell-market/index.vue')),
+    postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    let cacheID: number | null = null;
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
+    const cacheList = ref<WrOrderQuote[]>([]);
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteReq = {
+        wrpricetype: 2,
+        haswr: 0,
+      };
+      queryTable(queryOrderQuote, param).then((res) => {
+        cacheList.value = res;
+      });
+    };
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_pre_sale_floating_price,
+      tableName: 'table_pcweb_spot_trade_warehouse_sale_float',
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      registerColumn,
+      updateColumn, // 表头
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+    } = handleComposeTable<WrOrderQuote>(param);
+    function search(value: Object) {
+      const param: QueryOrderQuoteReq = {
+        wrpricetype: 2,
+        haswr: 0,
+      };
+      Object.assign(param, value);
+      queryTable(queryOrderQuote, param).then((res) => {
+        cacheList.value = res;
+        if (cacheID) {
+          filterGoods(cacheID);
         }
-        // 过滤期货合约商品
-        function filterGoods(id: number) {
-            cacheID = id;
-            tableList.value = cacheList.value.filter((el) => el.goodsid === id);
-        }
-        function buyOpen(value: any, goods: Goods) {
-            componentId.value = 'postBuying';
-            value.goodsid = goods.goodsid;
-            value.goodscode = goods.goodscode;
-            selectedRow.value = value;
-        }
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            registerColumn,
-            updateColumn, // 表头
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            name: EnumRouterName.warehouse_pre_sale_floating_price,
-            loading,
-            tableList,
-            search,
-            buyOpen,
-            filterGoods,
-        };
-    },
+      });
+    }
+    // 过滤期货合约商品
+    function filterGoods(id: number) {
+      cacheID = id;
+      tableList.value = cacheList.value.filter((el) => el.goodsid === id);
+    }
+    function buyOpen(value: any, goods: Goods) {
+      componentId.value = 'postBuying';
+      value.goodsid = goods.goodsid;
+      value.goodscode = goods.goodscode;
+      selectedRow.value = value;
+    }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      registerColumn,
+      updateColumn, // 表头
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      name: EnumRouterName.warehouse_pre_sale_floating_price,
+      loading,
+      tableList,
+      search,
+      buyOpen,
+      filterGoods,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_pre_sale/warehouse_pre_sale_price/index.vue

@@ -1,31 +1,16 @@
 <template>
   <!-- 仓单预售 一口价预售-->
   <div class="topTableHeight">
-    <Filter :enumName="name"
-            @search="search"
-            @buy="buyOpen" />
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'condSecondTabTable' : 'condSecondTabTableNoBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-             :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 443px)' : 'calc(100vh - 196px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="key"
-             :data-source="tableList"></a-table>
+    <Filter :enumName="name" @search="search" @buy="buyOpen" />
+    <a-table :columns="columns" :class="['srcollYTable', isBottom ? 'condSecondTabTable' : 'condSecondTabTableNoBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 443px)' : 'calc(100vh - 196px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList"></a-table>
     <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="firstBtn"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :enumName="name"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
+    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu>
+    <component :is="componentId" v-if="componentId" :enumName="name" :selectedRow="selectedRow" @cancel="closeComponent"></component>
   </div>
 </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 { QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
@@ -36,83 +21,88 @@ import { getShowBottomValue } from '@/common/config/constrolBottom';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: EnumRouterName.warehouse_pre_sale_price,
-    components: {
-        contextMenu,
-        Filter,
-        warehouse_pre_sale_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
-        warehouse_pre_sale_price_spot_trade_warehouse_post_buying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-        buyAndSell: defineAsyncComponent(() => import('../../components/buy-sell-market/index.vue')),
-        postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 1,
-                haswr: 0,
-            };
-            queryTable(queryOrderQuote, param);
-        };
-        Bus.$on('spotTrade', queryTableAction);
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_pre_sale_price,
-            tableName: 'table_pcweb_spot_trade_warehouse_sale_price',
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            registerColumn,
-            updateColumn, // 表头
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-        } = handleComposeTable<WrOrderQuote>(param);
-        function search(value: Object) {
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 1,
-                haswr: 0,
-            };
-            Object.assign(param, value);
-            queryTable(queryOrderQuote, param);
-        }
-        function buyOpen(value: any, goods: any) {
-            componentId.value = 'postBuying';
-            selectedRow.value = value;
-        }
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            registerColumn,
-            updateColumn, // 表头
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            name: EnumRouterName.warehouse_pre_sale_price,
-            loading,
-            tableList,
-            search,
-            buyOpen,
-        };
-    },
+  name: EnumRouterName.warehouse_pre_sale_price,
+  components: {
+    contextMenu,
+    Filter,
+    warehouse_pre_sale_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
+    warehouse_pre_sale_price_spot_trade_warehouse_post_buying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
+    buyAndSell: defineAsyncComponent(() => import('../../components/buy-sell-market/index.vue')),
+    postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteReq = {
+        wrpricetype: 1,
+        haswr: 0,
+      };
+      queryTable(queryOrderQuote, param);
+    };
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_pre_sale_price,
+      tableName: 'table_pcweb_spot_trade_warehouse_sale_price',
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      registerColumn,
+      updateColumn, // 表头
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+    } = handleComposeTable<WrOrderQuote>(param);
+    function search(value: Object) {
+      const param: QueryOrderQuoteReq = {
+        wrpricetype: 1,
+        haswr: 0,
+      };
+      Object.assign(param, value);
+      queryTable(queryOrderQuote, param);
+    }
+    function buyOpen(value: any, goods: any) {
+      componentId.value = 'postBuying';
+      selectedRow.value = value;
+    }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      registerColumn,
+      updateColumn, // 表头
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      name: EnumRouterName.warehouse_pre_sale_price,
+      loading,
+      tableList,
+      search,
+      buyOpen,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/buy/index.vue

@@ -1,15 +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>
@@ -30,19 +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 { 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';
@@ -57,79 +43,84 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_buy',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.buy);
+  name: 'warehouse_receipt_trade_blocs_buy',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.buy);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.buy,
-                haswr: 1,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.buy,
+        haswr: 1,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/sell/index.vue

@@ -1,15 +1,7 @@
 <template>
   <!-- 仓单贸易 贸易圈挂牌 买-->
   <div>
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom',  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',  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>
@@ -30,19 +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.sell"
-               @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.sell" @cancel="closeComponent"></component>
   </div>
 </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';
@@ -57,80 +43,84 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_sell',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.sell);
+  name: 'warehouse_receipt_trade_blocs_sell',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.sell);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.sell,
-                haswr: 1,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.sell,
+        haswr: 1,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
 
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_designate/components/buy/index.vue

@@ -1,15 +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>
@@ -30,19 +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 { 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';
@@ -57,79 +43,84 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_buy',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.buy);
+  name: 'warehouse_receipt_trade_blocs_buy',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.buy);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.buy,
-                haswr: 1,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.buy,
+        haswr: 1,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_designate/components/sell/index.vue

@@ -1,15 +1,7 @@
 <template>
   <!-- 仓单贸易 贸易圈挂牌 买-->
   <div>
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom',  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',  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>
@@ -30,19 +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.sell"
-               @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.sell" @cancel="closeComponent"></component>
   </div>
 </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';
@@ -57,80 +43,84 @@ import { formatTime } from '@/common/methods';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: 'warehouse_receipt_trade_blocs_sell',
-    components: {
-        contextMenu,
-        warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
-        warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        // 表头
-        const { getBuyOrSellColumns } = handleColumns();
-        const columns = getBuyOrSellColumns(BuyOrSell.sell);
+  name: 'warehouse_receipt_trade_blocs_sell',
+  components: {
+    contextMenu,
+    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
+    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/spot_trade/components/detail/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    // 表头
+    const { getBuyOrSellColumns } = handleColumns();
+    const columns = getBuyOrSellColumns(BuyOrSell.sell);
 
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteMyqReq = {
-                buyorsell: BuyOrSell.sell,
-                haswr: 1,
-            };
-            queryTable(queryQueryOrderQuoteMyq, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_blocs,
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            firstBtn,
-            secondBtn, // 表格按钮
-        } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
-        function search(value: Object) {
-            // const param: QueryOrderQuoteReq = {
-            //     wrpricetype: 2,
-            //     haswr: 1,
-            // };
-            // Object.assign(param, value);
-            // queryTable(queryOrderQuote, param);
-        }
-        // 单据挂牌成功 刷新数据
-        Bus.$on('spotTrade', queryTableAction);
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteMyqReq = {
+        buyorsell: BuyOrSell.sell,
+        haswr: 1,
+      };
+      queryTable(queryQueryOrderQuoteMyq, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_blocs,
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      firstBtn,
+      secondBtn, // 表格按钮
+    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
+    function search(value: Object) {
+      // const param: QueryOrderQuoteReq = {
+      //     wrpricetype: 2,
+      //     haswr: 1,
+      // };
+      // Object.assign(param, value);
+      // queryTable(queryOrderQuote, param);
+    }
+    // 单据挂牌成功 刷新数据
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
 
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            loading,
-            tableList,
-            search,
-            formatTime,
-            filterBtn,
-            BuyOrSell,
-        };
-    },
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      loading,
+      tableList,
+      search,
+      formatTime,
+      filterBtn,
+      BuyOrSell,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_floating_price/index.vue

@@ -1,31 +1,16 @@
 <template>
-    <!-- 仓单贸易 浮动价挂牌-->
-    <div class="topTableHeight topTableHeight_413">
-        <Filter :enumName="name" @search="search" @filterGoods="filterGoods" @buy="buyOpen" />
-        <a-table
-            :columns="columns"
-            :class="['srcollYTable', isBottom ? 'condSecondTabTable' : 'condSecondTabTableNoBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-            :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 443px)' : 'calc(100vh - 196px)' }"
-            :pagination="false"
-            :loading="loading"
-            :expandedRowKeys="expandedRowKeys"
-            :customRow="Rowclick"
-            rowKey="key"
-            :data-source="tableList"
-        ></a-table>
-        <!-- 右键 -->
-        <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu>
-        <component
-            :is="componentId"
-            v-if="componentId"
-            :enumName="name"
-            :selectedRow="selectedRow"
-            @cancel="closeComponent"
-        ></component>
-    </div>
+  <!-- 仓单贸易 浮动价挂牌-->
+  <div class="topTableHeight topTableHeight_413">
+    <Filter :enumName="name" @search="search" @filterGoods="filterGoods" @buy="buyOpen" />
+    <a-table :columns="columns" :class="['srcollYTable', isBottom ? 'condSecondTabTable' : 'condSecondTabTableNoBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 443px)' : 'calc(100vh - 196px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList"></a-table>
+    <!-- 右键 -->
+    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu>
+    <component :is="componentId" v-if="componentId" :enumName="name" :selectedRow="selectedRow" @cancel="closeComponent"></component>
+  </div>
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { ComposeTableParam, contextMenu, defineAsyncComponent, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -38,101 +23,106 @@ import { ref } from 'vue';
 import Filter from '../../components/filter/index.vue';
 
 export default defineComponent({
-    name: EnumRouterName.warehouse_receipt_trade_floating_price,
-    components: {
-        contextMenu,
-        Filter,
-        warehouse_receipt_trade_floating_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
-        warehouse_receipt_trade_floating_price_spot_trade_warehouse_post_buying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-        buyAndSell: defineAsyncComponent(() => import('../../components/buy-sell-market/index.vue')),
-        postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-    },
-    setup() {
-        const isBottom = getShowBottomValue();
-        let cacheID: number | null = null;
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
-        const cacheList = ref<WrOrderQuote[]>([]);
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 2,
-                haswr: 1,
-            };
-            queryTable(queryOrderQuote, param).then((res) => {
-                cacheList.value = res;
-            });
-        };
-        Bus.$on('spotTrade', queryTableAction);
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_floating_price,
-            tableName: 'table_pcweb_spot_trade_warehouse_float',
-            tableFilterKey: [],
-            isDetail: false,
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            registerColumn,
-            updateColumn, // 表头
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-        } = handleComposeTable<WrOrderQuote>(param);
-        function search(value: Object) {
-            console.log('value', value);
-            const param: QueryOrderQuoteReq = {
-                wrpricetype: 2,
-                haswr: 1,
-            };
-            Object.assign(param, value);
-            queryTable(queryOrderQuote, param).then((res) => {
-                cacheList.value = res;
-                if (cacheID) {
-                    filterGoods(cacheID);
-                }
-            });
+  name: EnumRouterName.warehouse_receipt_trade_floating_price,
+  components: {
+    contextMenu,
+    Filter,
+    warehouse_receipt_trade_floating_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
+    warehouse_receipt_trade_floating_price_spot_trade_warehouse_post_buying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
+    buyAndSell: defineAsyncComponent(() => import('../../components/buy-sell-market/index.vue')),
+    postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
+  },
+  setup() {
+    const isBottom = getShowBottomValue();
+    let cacheID: number | null = null;
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
+    const cacheList = ref<WrOrderQuote[]>([]);
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryOrderQuoteReq = {
+        wrpricetype: 2,
+        haswr: 1,
+      };
+      queryTable(queryOrderQuote, param).then((res) => {
+        cacheList.value = res;
+      });
+    };
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_floating_price,
+      tableName: 'table_pcweb_spot_trade_warehouse_float',
+      tableFilterKey: [],
+      isDetail: false,
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      registerColumn,
+      updateColumn, // 表头
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+    } = handleComposeTable<WrOrderQuote>(param);
+    function search(value: Object) {
+      console.log('value', value);
+      const param: QueryOrderQuoteReq = {
+        wrpricetype: 2,
+        haswr: 1,
+      };
+      Object.assign(param, value);
+      queryTable(queryOrderQuote, param).then((res) => {
+        cacheList.value = res;
+        if (cacheID) {
+          filterGoods(cacheID);
         }
-        // 过滤期货合约商品
-        function filterGoods(id: number) {
-            cacheID = id;
-            tableList.value = cacheList.value.filter((el) => el.goodsid === id);
-        }
-        function buyOpen(value: any, goods: Goods) {
-            componentId.value = 'postBuying';
-            value.goodsid = goods.goodsid;
-            value.goodscode = goods.goodscode;
-            selectedRow.value = value;
-        }
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            registerColumn,
-            updateColumn, // 表头
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            name: EnumRouterName.warehouse_receipt_trade_floating_price,
-            loading,
-            tableList,
-            search,
-            buyOpen,
-            filterGoods,
-        };
-    },
+      });
+    }
+    // 过滤期货合约商品
+    function filterGoods(id: number) {
+      cacheID = id;
+      tableList.value = cacheList.value.filter((el) => el.goodsid === id);
+    }
+    function buyOpen(value: any, goods: Goods) {
+      componentId.value = 'postBuying';
+      value.goodsid = goods.goodsid;
+      value.goodscode = goods.goodscode;
+      selectedRow.value = value;
+    }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      registerColumn,
+      updateColumn, // 表头
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      name: EnumRouterName.warehouse_receipt_trade_floating_price,
+      loading,
+      tableList,
+      search,
+      buyOpen,
+      filterGoods,
+    };
+  },
 });
 </script>
 <style lang="less">

src/views/market/spot_trade/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 stopNotify = Bus.$on('spotTrade', queryTableAction);
     // 表格通用逻辑
     const param: ComposeTableParam = {
       queryFn: queryTableAction,
@@ -82,7 +83,11 @@ export default defineComponent({
       componentId.value = 'postBuying';
       selectedRow.value = value;
     }
-    console.log('firstBtn', firstBtn);
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       isBottom,
       contextMenu,

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

@@ -1,24 +1,10 @@
 <template>
   <!-- 商品订单 - 议价单 -->
   <section>
-    <a-table :columns="columns"
-             class="srcollYTable expandLeftTable"
-             :scroll="{ x: '100%', y: '190px' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             :expandIcon="expandIcon"
-             :expandIconAsCell="false"
-             rowKey="key"
-             :data-source="tableList">
+    <a-table :columns="columns" class="srcollYTable expandLeftTable" :scroll="{ x: '100%', y: '190px' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="tableList">
       <!-- 额外的展开行 -->
-      <template v-if="btnList.length"
-                #expandedRowRender="{ record }">
-        <BtnList :btnList="handleBtnList(record, btnList)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
+      <template v-if="btnList.length" #expandedRowRender="{ record }">
+        <BtnList :btnList="handleBtnList(record, btnList)" :record="record" class="btn-list-sticky" @click="openComponent" />
       </template>
       <template #applytime="{ text }">
         <span>{{ formatTime(text) }}</span>
@@ -26,16 +12,12 @@
       <template #transferamount="{ record , text}">
         <div>
           <!-- 审核拒绝 -->
-          <a-tooltip placement="bottom"
-                     v-if="record.applystatus === 4"
-                     overlayClassName="toolTipTableColumn">
+          <a-tooltip placement="bottom" v-if="record.applystatus === 4" overlayClassName="toolTipTableColumn">
             <template #title>
               <span>{{ getScfContractStatusName(text) }}</span>
             </template>
-            <span
-                  :class="record.applystatus === 4 ? 'red' : 'white'">{{ record.transferamount }}</span>
-            <ExclamationCircleOutlined class="ml10 red"
-                                       v-if="record.applystatus === 4" />
+            <span :class="record.applystatus === 4 ? 'red' : 'white'">{{ record.transferamount }}</span>
+            <ExclamationCircleOutlined class="ml10 red" v-if="record.applystatus === 4" />
           </a-tooltip>
           <span v-else>{{ record.transferamount }}</span>
         </div>
@@ -47,15 +29,12 @@
         <span>{{ getScfContractStatusName(text) }}</span>
       </template>
     </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :tableList="tableList"
-               @cancel="closeComponent"></component>
+    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :tableList="tableList" @cancel="closeComponent"></component>
   </section>
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { ApplyType } from '@/common/constants/enumCommon';
 import { getBuyOrSellName, getScfContractStatusName } from '@/common/constants/enumsName';
@@ -76,64 +55,69 @@ import { ref } from 'vue';
 import { columns } from './setup';
 
 export default defineComponent({
-    name: 'commodity_contract_bargain',
-    components: {
-        ExclamationCircleOutlined,
-        BtnList,
-        commodity_contract_bargain_submit_order: defineAsyncComponent(() => import('./components/commodity_contract_bargain_submit_order/index.vue')),
-        commodity_contract_bargain_cancel_order: defineAsyncComponent(() => import('./components/commodity_contract_bargain_cancel_order/index.vue')),
-        commodity_contract_bargain_refuse_order: defineAsyncComponent(() => import('./components/commodity_contract_bargain_refuse_order/index.vue')),
-    },
-    setup() {
-        // 类型 1-我的申请 2-对方申请
-        const margainType = ref<ApplyType>(ApplyType.my);
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryTjmdTransferApplyRsp>();
-        // 交割商品
-        handleDeliveryRelation();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryTjmdTransferApplyReq = {
-                applytype: margainType.value,
-                accountids: getAccoutIdList(),
-            };
-            queryTable(queryTjmdTransferApply, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: () => queryTableAction(),
-            recordList: getRecordItemTab(),
-        };
-        // 切换 我的申请和对方申请
-        Bus.$onOnly('bargain', (value: ApplyType) => {
-            margainType.value = value;
-            queryTableAction();
-        });
-        function handleBtnList(record: QueryTjmdTransferApplyRsp, btnList: BtnListType[]) {
-            if (record.applystatus === 1) {
-                if (margainType.value === ApplyType.my) {
-                    // 我的申请
-                    return btnList.filter((e) => e.code === 'commodity_contract_bargain_cancel_order');
-                } else {
-                    // 对方的申请
-                    return btnList.filter((e) => e.code !== 'commodity_contract_bargain_cancel_order');
-                }
-            } else {
-                return [];
-            }
+  name: 'commodity_contract_bargain',
+  components: {
+    ExclamationCircleOutlined,
+    BtnList,
+    commodity_contract_bargain_submit_order: defineAsyncComponent(() => import('./components/commodity_contract_bargain_submit_order/index.vue')),
+    commodity_contract_bargain_cancel_order: defineAsyncComponent(() => import('./components/commodity_contract_bargain_cancel_order/index.vue')),
+    commodity_contract_bargain_refuse_order: defineAsyncComponent(() => import('./components/commodity_contract_bargain_refuse_order/index.vue')),
+  },
+  setup() {
+    // 类型 1-我的申请 2-对方申请
+    const margainType = ref<ApplyType>(ApplyType.my);
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryTjmdTransferApplyRsp>();
+    // 交割商品
+    handleDeliveryRelation();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryTjmdTransferApplyReq = {
+        applytype: margainType.value,
+        accountids: getAccoutIdList(),
+      };
+      queryTable(queryTjmdTransferApply, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: () => queryTableAction(),
+      recordList: getRecordItemTab(),
+    };
+    // 切换 我的申请和对方申请
+    const stopNotify = Bus.$on('bargain', (value) => {
+      margainType.value = value as ApplyType;
+      queryTableAction();
+    });
+    function handleBtnList(record: QueryTjmdTransferApplyRsp, btnList: BtnListType[]) {
+      if (record.applystatus === 1) {
+        if (margainType.value === ApplyType.my) {
+          // 我的申请
+          return btnList.filter((e) => e.code === 'commodity_contract_bargain_cancel_order');
+        } else {
+          // 对方的申请
+          return btnList.filter((e) => e.code !== 'commodity_contract_bargain_cancel_order');
         }
-        return {
-            ...handleComposeOrderTable<QueryTradePositionRsp>(param),
-            columns,
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-            handleBtnList,
-            getBuyOrSellName,
-            getScfContractStatusName,
-        };
-    },
+      } else {
+        return [];
+      }
+    }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      ...handleComposeOrderTable<QueryTradePositionRsp>(param),
+      columns,
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+      handleBtnList,
+      getBuyOrSellName,
+      getScfContractStatusName,
+    };
+  },
 });
 </script>
 

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

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

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

@@ -31,6 +31,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuildTypeName, getBuyOrSellTypeName, getOrderStatusName } from '@/common/constants/enumsName';
@@ -72,9 +73,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/commodity_contract/components/commodity_contract_settlement/index.vue

@@ -33,6 +33,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuildTypeName, getBuyOrSellName, getDeliveryStatusName } from '@/common/constants/enumsName';
@@ -66,9 +67,14 @@ export default defineComponent({
       // tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_settlement',
       recordList: getRecordItemTab(),
     };
-    Bus.$on('spotTrade', () => {
+    const stopNotify = Bus.$on('spotTrade', () => {
       queryTableAction();
     });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrDeliveryDetail>(param),
       ...useColumns(),

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

@@ -55,7 +55,7 @@ import { getBuyOrSellName } from '@/common/constants/enumsName';
 import { isInvestment } from '@/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/setup';
 import { findGoodsCode } from './setup';
 // import { getSwapList } from '@/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/setup';
-import { ref } from 'vue';
+import { ref, onBeforeUnmount } from 'vue';
 import { QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
 import Bus from '@/utils/eventBus/index';
 import { tabColumns, getSwapList } from './setup';
@@ -100,7 +100,7 @@ export default defineComponent({
         subscribeAction([...goodsSet]);
       });
     };
-    Bus.$on('spotTrade', queryTableAction);
+    const stopNotify = Bus.$on('spotTrade', queryTableAction);
     // 表格通用逻辑
     const param: ComposeOrderTableParam = {
       queryFn: queryTableAction,
@@ -128,6 +128,11 @@ export default defineComponent({
       const arr = isDiaoQi(record) ? diaoqi : listing;
       return btnList.filter((e) => arr.includes(e.code));
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<QueryTradePositionRsp>(param),
       loading,

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

@@ -35,6 +35,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
@@ -81,7 +82,7 @@ export default defineComponent({
       recordList: getRecordItemTab(),
     };
     // 融资摘牌成功，重新加载数据
-    Bus.$on('financing_manager', () => {
+    const stopNotify = Bus.$on('financing_manager', () => {
       queryTableAction();
     });
     function handleBtnList(btnList: BtnListType[], item: WrFinanceBuyApply) {
@@ -92,6 +93,11 @@ export default defineComponent({
         return [];
       }
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrFinanceBuyApply>(param),
       loading,

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

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

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

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

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

@@ -39,6 +39,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -83,7 +84,7 @@ export default defineComponent({
     };
 
     // 资金变化，重新加载数据
-    Bus.$on('moneyChangedNtf_UI', () => {
+    const stopNotify = Bus.$on('moneyChangedNtf', () => {
       queryTableAction();
     });
     // 表格通用逻辑
@@ -117,6 +118,11 @@ export default defineComponent({
         message.error('请先签约银行！');
       }
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       loading,
       tableList,

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

@@ -40,6 +40,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBarmaginApplyStatus, getWrOrderTypeName, getWrTradeOrderStatusName } from '@/common/constants/enumsName';
@@ -73,7 +74,7 @@ export default defineComponent({
       };
       queryTable(queryQueryWrTradeBargainApply, param);
     };
-    Bus.$on('blocsTrade', () => {
+    const stopNotify = Bus.$on('blocsTrade', () => {
       queryTableAction();
     });
     // 表格通用逻辑
@@ -98,6 +99,11 @@ export default defineComponent({
       const arr = [2, 3];
       return arr.includes(record.applystatus) ? btnList : [];
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       contextMenu,
       openContext,

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

@@ -30,6 +30,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
@@ -63,7 +64,7 @@ export default defineComponent({
       };
       queryTable(queryWrOrderDetail, param);
     };
-    Bus.$on('blocsTrade', () => {
+    const stopNotify = Bus.$on('blocsTrade', () => {
       queryTableAction();
     });
     const { tableColumns, getWrPriceType, isShowBarginBtn, showPriceOrMove } = useOrderWarrant(0);
@@ -85,6 +86,11 @@ export default defineComponent({
         return list;
       }
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrOrderDetail>(param),
       filterBtnList,

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

@@ -40,6 +40,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
@@ -73,7 +74,7 @@ export default defineComponent({
       };
       queryTable(queryQueryWrTradeBargainApply, param);
     };
-    Bus.$on('blocsTrade', () => {
+    const stopNotify = Bus.$on('blocsTrade', () => {
       queryTableAction();
     });
 
@@ -99,6 +100,11 @@ export default defineComponent({
       const arr = [2, 3];
       return arr.includes(record.applystatus) ? btnList : [];
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       contextMenu,
       openContext,

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

@@ -31,6 +31,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
@@ -64,7 +65,7 @@ export default defineComponent({
       };
       queryTable(queryWrOrderDetail, param);
     };
-    Bus.$on('blocsTrade', () => {
+    const stopNotify = Bus.$on('blocsTrade', () => {
       queryTableAction();
     });
 
@@ -87,6 +88,11 @@ export default defineComponent({
         return list;
       }
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrOrderDetail>(param),
       loading,

src/views/order/spot_warran/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent, nextTick } from 'vue';
+import { defineAsyncComponent, defineComponent, nextTick, onBeforeUnmount } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import thirdMenu from '@/common/components/thirdMenu/index.vue';
 import { handleOrderDetailList } from '@/common/setup/order/orderData';
@@ -40,11 +40,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

@@ -53,7 +53,7 @@ import { queryTjmdTransferApply } from '@/services/go/Tjmd';
 import { QueryTjmdTransferApplyReq, QueryTjmdTransferApplyRsp } from '@/services/go/Tjmd/interface';
 import Bus from '@/utils/eventBus/index';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { ref } from 'vue';
+import { ref, onBeforeUnmount } from 'vue';
 import { columns } from './setup';
 
 export default defineComponent({
@@ -87,8 +87,8 @@ export default defineComponent({
       recordList: getRecordItemTab(),
     };
     // 切换 我的申请和对方申请
-    Bus.$onOnly('bargain', (value: ApplyType) => {
-      margainType.value = value;
+    const stopNotify = Bus.$on('bargain', (value) => {
+      margainType.value = value as ApplyType;
       queryTableAction();
     });
     function handleBtnList(record: QueryTjmdTransferApplyRsp, btnList: BtnListType[]) {
@@ -104,6 +104,11 @@ export default defineComponent({
         return [];
       }
     }
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<QueryTradePositionRsp>(param),
       columns,

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

@@ -26,6 +26,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { TradeMode } from '@/common/constants/enumCommon';
@@ -72,9 +73,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,6 +35,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -77,9 +78,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,6 +50,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { TradeMode } from '@/common/constants/enumCommon';
@@ -130,9 +131,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/order/swap_the_order/index.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent, ref, nextTick } from 'vue';
+import { defineAsyncComponent, defineComponent, ref, nextTick, onBeforeUnmount } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import thirdMenu from '@/common/components/thirdMenu/index.vue';
 import { handleOrderDetailList } from '@/common/setup/order/orderData';
@@ -52,10 +52,14 @@ export default defineComponent({
     }
 
     // 头寸变化，重新加载数据
-    Bus.$on('posChangedNtf_UI', () => {
+    const stopNotify = Bus.$on('posChangedNtf', () => {
       componentReload();
     })
 
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...state,
       changeBargain,

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 { EnumRouterName } from '@/common/constants/enumRouterName';
 import { BtnList, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -50,9 +51,14 @@ export default defineComponent({
       recordList: getRecordItemTab(),
     };
     // 资金变化，重新加载数据
-    Bus.$on('moneyChangedNtf_UI', () => {
+    const stopNotify = Bus.$on('moneyChangedNtf', () => {
       queryTableAction();
     });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrPerformancePlan>(param),
       loading,

src/views/search/search_document_records/search_commodity_contract/search_document_records_commission_record/index.vue

@@ -1,15 +1,7 @@
 <template>
   <!-- 商品订单 - 委托 -->
   <div class="topTableHeight">
-    <a-table :columns="columns"
-             class="srcollYTable"
-             :scroll="{ x: '100%', y: 'calc(100vh - 405px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="key"
-             :data-source="tableList">
+    <a-table :columns="columns" class="srcollYTable" :scroll="{ x: '100%', y: 'calc(100vh - 405px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList">
       <!-- 类型 -->
       <template #buildtype="{ record }">
         <a>{{ getBuyOrSellTypeName(record.buyorsell) }}</a>
@@ -27,6 +19,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuyOrSellTypeName, getOrderStatusName } from '@/common/constants/enumsName';
@@ -42,46 +35,48 @@ import { WrPerformancePlan } from '@/services/go/wrtrade/interface';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: enumOrderComponents.commodity_contract_commission,
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryTradeOrderDetailRsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            queryTable(queryTradeOrderDetail, {});
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_commission',
-            recordList: getRecordItemTab(),
-        };
-        function filterBtnList(list: BtnListType[], record: QueryTradeOrderDetailRsp) {
-            //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;
-            const arr = [3, 7];
-            if (!arr.includes(record.orderstatus)) {
-                return list.filter((e) => e.code !== 'commodity_contract_commission_cancel_order');
-            } else {
-                return list;
-            }
-        }
-        // 挂牌
-        Bus.$on('spotTrade', () => {
-            queryTableAction();
-        });
-        return {
-            ...handleComposeOrderTable<WrPerformancePlan>(param),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-            getBuyOrSellTypeName,
-            getOrderStatusName,
-            filterBtnList,
-        };
-    },
-});
-</script>
+  name: enumOrderComponents.commodity_contract_commission,
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryTradeOrderDetailRsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      queryTable(queryTradeOrderDetail, {});
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_commission',
+      recordList: getRecordItemTab(),
+    };
+    function filterBtnList(list: BtnListType[], record: QueryTradeOrderDetailRsp) {
+      //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;
+      const arr = [3, 7];
+      if (!arr.includes(record.orderstatus)) {
+        return list.filter((e) => e.code !== 'commodity_contract_commission_cancel_order');
+      } else {
+        return list;
+      }
+    }
+    // 挂牌
+    const stopNotify = Bus.$on('spotTrade', () => {
+      queryTableAction();
+    });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
 
-<style lang="less">
-</style>;
+    return {
+      ...handleComposeOrderTable<WrPerformancePlan>(param),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+      getBuyOrSellTypeName,
+      getOrderStatusName,
+      filterBtnList,
+    };
+  },
+});
+</script>

src/views/search/search_document_records/search_commodity_contract/search_document_records_delivery_record/index.vue

@@ -1,15 +1,7 @@
 <template>
   <!-- 商品订单 - 交收 -->
   <div class="topTableHeight">
-    <a-table :columns="columns"
-             class="srcollYTable"
-             :scroll="{ x: '100%', y: 'calc(100vh - 405px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="key"
-             :data-source="tableList">
+    <a-table :columns="columns" class="srcollYTable" :scroll="{ x: '100%', y: 'calc(100vh - 405px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList">
       <template #createtime="{ record }">
         <span>{{ formatTime(record.createtime) }}</span>
       </template>
@@ -34,6 +26,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuildTypeName, getBuyOrSellName, getDeliveryStatusName } from '@/common/constants/enumsName';
 import { BtnList, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -48,35 +41,40 @@ import Bus from '@/utils/eventBus/index';
 import { useColumns } from '@/views/order/commodity_contract/components/commodity_contract_settlement/setup';
 
 export default defineComponent({
-    name: enumOrderComponents.commodity_contract_settlement,
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrDeliveryDetail>(true);
-        // 获取列表数据
-        const queryTableAction = () => {
-            queryTable(queryWrDeliveryDetail);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            // tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_settlement',
-            recordList: getRecordItemTab(),
-        };
-        Bus.$on('spotTrade', () => {
-            queryTableAction();
-        });
-        return {
-            ...handleComposeOrderTable<WrDeliveryDetail>(param),
-            ...useColumns(),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-            getBuildTypeName,
-            getDeliveryStatusName,
-            getBuyOrSellName,
-        };
-    },
+  name: enumOrderComponents.commodity_contract_settlement,
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrDeliveryDetail>(true);
+    // 获取列表数据
+    const queryTableAction = () => {
+      queryTable(queryWrDeliveryDetail);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      // tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_settlement',
+      recordList: getRecordItemTab(),
+    };
+    const stopNotify = Bus.$on('spotTrade', () => {
+      queryTableAction();
+    });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      ...handleComposeOrderTable<WrDeliveryDetail>(param),
+      ...useColumns(),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+      getBuildTypeName,
+      getDeliveryStatusName,
+      getBuyOrSellName,
+    };
+  },
 });
 </script>
 

src/views/search/search_document_records/search_commodity_contract/search_document_records_transaction_record/index.vue

@@ -1,15 +1,7 @@
 <template>
   <!-- 商品订单 - 成交 -->
   <div class="topTableHeight">
-    <a-table :columns="columns"
-             class="srcollYTable"
-             :scroll="{ x: '100%', y: 'calc(100vh - 405px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="key"
-             :data-source="tableList">
+    <a-table :columns="columns" class="srcollYTable" :scroll="{ x: '100%', y: 'calc(100vh - 405px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList">
       <!-- 类型 -->
       <template #buyorsell="{ text }">
         <span>{{ getBuyOrSellTypeName(text) }}</span>
@@ -22,14 +14,12 @@
         <a>{{ formatTime(record.createtime) }}</a>
       </template>
     </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
+    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
   </div>
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuildTypeName, getBuyOrSellTypeName, getOrderStatusName } from '@/common/constants/enumsName';
 import { BtnList, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -43,34 +33,39 @@ import { QueryTradeDetailRsp } from '@/services/go/ermcp/order/interface';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: enumOrderComponents.commodity_contract_make_deal,
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryTradeDetailRsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            queryTable(queryTradeDetail, {});
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_make_deal',
-            recordList: getRecordItemTab(),
-        };
-        Bus.$on('spotTrade', () => {
-            queryTableAction();
-        });
-        return {
-            ...handleComposeOrderTable<QueryTradeDetailRsp>(param),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-            getBuildTypeName,
-            getOrderStatusName,
-            getBuyOrSellTypeName,
-        };
-    },
+  name: enumOrderComponents.commodity_contract_make_deal,
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryTradeDetailRsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      queryTable(queryTradeDetail, {});
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_make_deal',
+      recordList: getRecordItemTab(),
+    };
+    const stopNotify = Bus.$on('spotTrade', () => {
+      queryTableAction();
+    });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
+    return {
+      ...handleComposeOrderTable<QueryTradeDetailRsp>(param),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+      getBuildTypeName,
+      getOrderStatusName,
+      getBuyOrSellTypeName,
+    };
+  },
 });
 </script>
 

src/views/search/search_document_records_commission_record_sub/search_document_records_commodity_contract/search_document_records_done_commodity_contract_today/index.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -55,9 +56,14 @@ export default defineComponent({
       recordList: getRecordItemTab(),
     };
     // 挂牌
-    Bus.$on('spotTrade', () => {
+    const stopNotify = Bus.$on('spotTrade', () => {
       queryTableAction();
     });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrPerformancePlan>(param),
       loading,

src/views/search/search_document_records_commission_record_sub/search_document_records_spot_warrant/search_document_records_spot_warrant_today/index.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getOrderStatusName, getWrOrderTypeName } from '@/common/constants/enumsName';
@@ -54,7 +55,7 @@ export default defineComponent({
       };
       queryTable(queryWrOrderDetail, param);
     };
-    Bus.$on('blocsTrade', () => {
+    const stopNotify = Bus.$on('blocsTrade', () => {
       queryTableAction();
     });
 
@@ -65,6 +66,11 @@ export default defineComponent({
       recordList: getRecordItemTab(),
       isDetail: true,
     };
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<WrOrderDetail>(param),
       loading,

src/views/search/search_document_records_done/search_document_records_done_commodity_contract/search_document_records_done_commodity_contract_today/index.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script lang="ts">
+import { onBeforeUnmount } from 'vue';
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -71,9 +72,14 @@ export default defineComponent({
       }
       return result;
     }
-    Bus.$on('spotTrade', () => {
+    const stopNotify = Bus.$on('spotTrade', () => {
       queryTableAction();
     });
+
+    onBeforeUnmount(() => {
+      stopNotify();
+    })
+
     return {
       ...handleComposeOrderTable<QueryTradeDetailRsp>(param),
       loading,