feat: 新增掉期商品订阅和过滤功能

src/common/setup/table/tableQuote.ts

@@ -18,9 +18,9 @@ export function handleSubcriteOnDemandQuote<T extends object>(tableList: Ref<T[]
         listenSrcoll(document.querySelector(selector)!)
     });
     onBeforeUnmount(() => {
-        removeSubscribeQuotation(uuid);
-        TimerUtils.clearTimeout('subscribeQuote')
+        stopSubcribe()
     })
+
     // 第一次自动订阅当前可视区域的数据
     const stop = watchEffect(() => {
         const len = tableList.value.length
@@ -29,6 +29,12 @@ export function handleSubcriteOnDemandQuote<T extends object>(tableList: Ref<T[]
             subscribeAction(0, end)
         }
     })
+    // 停止订阅
+    function stopSubcribe() {
+        removeSubscribeQuotation(uuid);
+        TimerUtils.clearTimeout('subscribeQuote')
+        stop()
+    }
     function listenSrcoll(ele: Element) {
         ele.addEventListener('scroll', (event: any) => {
             stop && stop()
@@ -86,6 +92,7 @@ export function handleSubcriteOnDemandQuote<T extends object>(tableList: Ref<T[]
         console.log('开始订阅', result)
         addSubscribeQuotation(uuid, result);
     }
+    return stopSubcribe
 }
 
 // 处理行情订阅，注意这里不是按需订阅

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/index.vue

@@ -1,6 +1,22 @@
 <template>
   <!--订单交易 挂牌转让-->
   <div class="topTableHeight">
+    <div class="filterTable">
+      <div class="filter-custom-table">
+        <a-select class="conditionSelect"
+                  :style="{width: '180px', maxHeight: '400px', overflow: 'auto' }"
+                  @change="goodsChange"
+                  placeholder="全部标的合约">
+          <a-select-option v-for="item in getRefGoodsList()"
+                           :value="item"
+                           :key="item">{{item}}
+          </a-select-option>
+        </a-select>
+        <!-- <a-button class="btnDeafault"
+                @click="search(true)"
+                style="width: 80px">筛选</a-button> -->
+      </div>
+    </div>
     <a-table :columns="columns"
              :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
              :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
@@ -73,7 +89,7 @@ import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 import { handleTableEventAndData } from '@/common/setup/table/compose';
 import { TableParam } from '@/common/setup/table/interface';
 import { BtnListType } from '@/common/components/btnList/interface';
-import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
+import { RefGoodsList } from './interface';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { ref } from 'vue';
 import { useQueryData } from '@/common/setup/request';
@@ -91,9 +107,8 @@ export default defineComponent({
     },
     setup() {
         const isBottom = getShowBottomValue();
-        const { loading, goodsList } = useSwapList();
+        const { loading, goodsList, getRefGoodsList, filterGoodsList } = useSwapList();
 
-        // const loading = ref<boolean>(false);
         const param: TableParam = {
             columnsList,
             queryFn: () => {},
@@ -104,20 +119,28 @@ export default defineComponent({
             { lable: '详情', code: 'Detail', className: 'btnDeafault' },
             { lable: '买卖大厅', code: 'BuyAndSell', className: 'btnDeafault' },
         ];
-        // const { deliverGoods, getQuoteList, goodsList, findDeilverGoodsByGoodsCode } = handleDeliveryRelation([1, 3]);
         // 行情按需订阅
-        handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(goodsList);
-
+        let stopSubcribe = handleSubcriteOnDemandQuote<RefGoodsList>(goodsList);
+        // 过滤标的合约
+        function goodsChange(value: string) {
+            const goodsList = filterGoodsList(value);
+            // 停止上次订阅
+            stopSubcribe();
+            // 重新发起订阅
+            stopSubcribe = handleSubcriteOnDemandQuote<RefGoodsList>(goodsList);
+        }
         return {
             isBottom,
-            ...handleTableEventAndData<QueryQuoteDayRsp>(param),
+            ...handleTableEventAndData<RefGoodsList>(param),
             btnList,
             handleQuotePriceColor,
             quoteChange,
             quoteAmplitude,
             quoteAmplituOfVibration,
+            getRefGoodsList,
             goodsList,
             loading,
+            goodsChange,
         };
     },
 });

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/interface.ts

@@ -0,0 +1,6 @@
+import { QueryQuoteDayRsp } from "@/services/go/quote/interface";
+
+export interface RefGoodsList extends QueryQuoteDayRsp {
+    refgoodsname: string
+    goodsname: string
+}

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/setup.ts

@@ -4,16 +4,16 @@ import { queryTableList } from "@/common/setup/table"
 import { getQuoteDayInfoByCode } from "@/services/bus/goods"
 import { getMarketIdsByTradeMode } from "@/services/bus/market"
 import { getUserAccountType } from "@/services/bus/user"
-import { QueryQuoteDayRsp } from "@/services/go/quote/interface"
 import { queryQuoteGoodsList } from "@/services/go/Tjmd"
 import { QueryQuoteGoodsListReq, QueryQuoteGoodsListRsp } from "@/services/go/Tjmd/interface"
 import { ref } from "vue"
+import { RefGoodsList } from './interface'
 
 // 获取 商品掉期 商品列表
 export const useSwapList = () => {
     const { loading, tableList, queryTable } = queryTableList<QueryQuoteGoodsListRsp>();
     // 行情商品
-    const goodsList = ref<QueryQuoteDayRsp[]>([])
+    const goodsList = ref<RefGoodsList[]>([])
     initData(() => {
         // 组装 参数
         const marketids = getMarketIdsByTradeMode(TradeMode.ListingAndSelection)
@@ -30,13 +30,34 @@ export const useSwapList = () => {
                 // 找到盘面数据
                 const quote = getQuoteDayInfoByCode(el.goodscode);
                 if (quote) {
-                    Object.assign(quote, { goodsname: el.goodsname, refgoodsname: el.refgoodsname })
-                    goodsList.value.push(quote)
+                    const result: RefGoodsList = {
+                        ...quote,
+                        goodsname: el.goodsname, refgoodsname: el.refgoodsname
+                    }
+                    goodsList.value.push(result)
                 }
             })
         })
     })
-    return { loading, goodsList }
+    // 获取标记商品列表
+    function getRefGoodsList(): string[] {
+        const result = new Set<string>(['全部标的合约'])
+        tableList.value.forEach(el => {
+            result.add(el.refgoodsname)
+        })
+        return [...result]
+    }
+    // 过滤标的合约
+    function filterGoodsList(value: string) {
+        const result = ref<RefGoodsList[]>([])
+        if (value === '全部标的合约') {
+            result.value = goodsList.value
+        } else {
+            result.value = goodsList.value.filter(goods => goods.refgoodsname === value)
+        }
+        return result
+    }
+    return { loading, goodsList, getRefGoodsList, filterGoodsList }
 }
 
 export const columnsList = [