掉期买卖大厅添加手动刷新

src/common/components/btnList/index.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="btn-list">
-    <a-button :class="item.className"
-              v-for="item in btnList"
-              :key="item.lable"
-              @click.stop="onClick(item)">
+    <slot name="before"></slot>
+    <a-button :class="item.className" v-for="item in btnList" :key="item.lable" @click.stop="onClick(item)">
       {{item.lable}}
     </a-button>
+    <slot name="after"></slot>
   </div>
 </template>
 
@@ -14,24 +13,24 @@ import { defineComponent, PropType } from 'vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
-    props: {
-        btnList: {
-            // 按钮列表数据
-            default: [],
-            type: Array as PropType<BtnListType[]>,
-        },
-        record: {
-            default: {},
-            type: Object,
-        },
+  props: {
+    btnList: {
+      // 按钮列表数据
+      default: [],
+      type: Array as PropType<BtnListType[]>,
     },
-    setup(props, context) {
-        function onClick(item: BtnListType) {
-            console.log(`${item.lable}:${item.code}`);
-            context.emit('click', item, props.record);
-        }
-        return { onClick };
+    record: {
+      default: {},
+      type: Object,
     },
+  },
+  setup(props, context) {
+    function onClick(item: BtnListType) {
+      console.log(`${item.lable}:${item.code}`);
+      context.emit('click', item, props.record);
+    }
+    return { onClick };
+  },
 });
 </script>
 

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

@@ -26,9 +26,13 @@
         历史走势
         <LineChartOutlined />
       </a-button>
-      <BtnList :btnList="firstBtn" :record="selectedRow" @click="openComponent" />
+      <BtnList :btnList="firstBtn" :record="selectedRow" @click="openComponent">
+        <template #before>
+          <a-button class="operBtn ant-btn" @click="refresh">刷新</a-button>
+        </template>
+      </BtnList>
     </div>
-    <a-row class="buySellHall">
+    <a-row class="buySellHall" v-if="showBuySell">
       <a-col :span="12">
         <Sell :enumName="enumName" ref="sellRef" :parantSelectedRow="selectedRow" />
       </a-col>
@@ -87,7 +91,8 @@ export default defineComponent({
     HisChart: defineAsyncComponent(() => import('../history-chart/index.vue')),
   },
   setup(props, context) {
-    const loading = ref<boolean>(false);
+    const loading = ref(false);
+    const showBuySell = ref(true);
     const { visible, cancel } = _closeModal(context);
 
     // const { isWR, isFloat } = handleIs(props.enumName, BuyOrSell.buy);
@@ -115,6 +120,15 @@ export default defineComponent({
       //     return list;
       // }
     }
+
+    // 手动刷新
+    const refresh = () => {
+      showBuySell.value = false;
+      setTimeout(() => {
+        showBuySell.value = true;
+      }, 0);
+    }
+
     // 单据挂牌成功 通知买大厅刷新数据
     Bus.$on('spotTrade', queryFn);
 
@@ -132,6 +146,8 @@ export default defineComponent({
       openComponent,
       enumName: props.enumName,
       handleBtnList,
+      showBuySell,
+      refresh,
     };
   },
 });