优化平仓推送刷新问题

src/assets/styles/index.less

@@ -6,17 +6,17 @@
 
 // globals
 html {
-    font-family: @font-family;
-    -webkit-text-size-adjust: 100%;
+    font-family                : @font-family;
+    -webkit-text-size-adjust   : 100%;
     -webkit-tap-highlight-color: @m-black;
     // better Font Rendering
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing     : antialiased;
+    -moz-osx-font-smoothing    : grayscale;
 }
 
 body {
-    margin: 0;
-    overflow: hidden;
+    margin          : 0;
+    overflow        : hidden;
     background-color: @body-bg;
 }
 
@@ -37,7 +37,7 @@ body {
     >section {
         header {
             background: @m-white0;
-            padding: 0;
+            padding   : 0;
         }
 
         main {
@@ -57,11 +57,11 @@ body {
         border-bottom: 1px solid @m-white2;
 
         .ant-card-head-title {
-            text-align: left;
-            font-size: 16px;
+            text-align : left;
+            font-size  : 16px;
             font-family: Source Han Sans CN;
             font-weight: 500;
-            color: @m-grey24;
+            color      : @m-grey24;
         }
     }
 }
@@ -77,22 +77,29 @@ body {
 }
 
 .ant-modal-title {
-    font-size: 18px;
+    font-size  : 18px;
     font-family: Source Han Sans CN;
     font-weight: 500;
-    color: @m-green3;
+    color      : @m-green3;
 }
 
 .submit {
-    background: @m-green3;
+    background   : @m-green3;
     border-radius: 3px;
-    color: @m-white0;
+    color        : @m-white0;
 }
 
 .ant-btn-primary {
     background-color: @m-green3;
 }
 
+.ant-btn[disabled] {
+    color: #fff;
+
+    &:hover {
+        color: #fff;
+    }
+}
 
 .ant-btn:hover,
 .ant-btn:focus,
@@ -141,7 +148,7 @@ body {
 }
 
 ::selection {
-    color: @m-white0;
+    color     : @m-white0;
     background: @m-white2;
 }
 
@@ -154,11 +161,11 @@ body {
 }
 
 .icon {
-    width: 1em;
-    height: 1em;
+    width         : 1em;
+    height        : 1em;
     vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
+    fill          : currentColor;
+    overflow      : hidden;
 }
 
 .ant-spin-nested-loading>div>.ant-spin {
@@ -167,12 +174,12 @@ body {
 }
 
 .ant-spin-nested-loading {
-    width: 100%;
+    width : 100%;
     height: 100%;
 
     .ant-spin-container {
-        width: 100%;
-        height: 100%;
+        width  : 100%;
+        height : 100%;
         display: flex;
     }
 }
@@ -186,11 +193,11 @@ body {
 }
 
 .ant-empty {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+    height         : 100%;
+    display        : flex;
+    flex-direction : column;
     justify-content: center;
-    align-items: center;
+    align-items    : center;
 }
 
 .mt15 {
@@ -202,21 +209,21 @@ body {
 }
 
 .ellipsis {
-    font-size: 12px;
-    display: block/inline-block;
-    overflow: hidden;
-    white-space: nowrap;
+    font-size    : 12px;
+    display      : block/inline-block;
+    overflow     : hidden;
+    white-space  : nowrap;
     text-overflow: ellipsis;
-    width: 120px;
-    display: inline-block;
+    width        : 120px;
+    display      : inline-block;
 }
 
 .ellipsis_temp {
-    white-space: nowrap;
-    overflow: hidden;
+    white-space  : nowrap;
+    overflow     : hidden;
     text-overflow: ellipsis;
-    width: 250px;
-    display: inline-block;
+    width        : 250px;
+    display      : inline-block;
 }
 
 
@@ -225,7 +232,7 @@ body {
     background-color: @m-grey18;
 
     .ant-menu-submenu-title {
-        font-size: 16px;
+        font-size : 16px;
         text-align: left;
     }
 
@@ -233,10 +240,10 @@ body {
         background-color: @m-black4;
 
         .ant-menu-item {
-            font-size: 14px;
+            font-size  : 14px;
             font-family: @menu-item-family;
-            color: @menu-item-color;
-            text-align: left;
+            color      : @menu-item-color;
+            text-align : left;
         }
 
         .ant-menu-item-selected {
@@ -258,7 +265,7 @@ body {
 
 .mine_layout .ant-menu .ant-menu-item-selected,
 .mine_layout .ant-menu .ant-menu-item:hover {
-    color: @theme;
+    color        : @theme;
     border-bottom: 2px solid @theme;
 }
 
@@ -269,9 +276,9 @@ body {
 .ant-table-wrapper {
     .ant-table-thead {
         tr th {
-            background: @m-black8;
-            color: @m-grey17;
-            font-size: 14px;
+            background : @m-black8;
+            color      : @m-grey17;
+            font-size  : 14px;
             font-family: Adobe Heiti Std;
         }
 
@@ -292,25 +299,25 @@ body {
 
     .ant-table-body tr td {
         background-color: @m-black2;
-        color: white;
-        cursor: pointer;
+        color           : white;
+        cursor          : pointer;
     }
 
     .ant-table-bordered .ant-table-thead>tr>th,
     .ant-table-bordered .ant-table-tbody>tr>td {
-        padding: 0;
-        height: 34px;
-        line-height: 34px;
+        padding     : 0;
+        height      : 34px;
+        line-height : 34px;
         border-color: @m-black9;
-        font-family: Adobe Heiti Std;
-        font-size: 16px;
+        font-family : Adobe Heiti Std;
+        font-size   : 16px;
     }
 
     .ant-table-fixed {
-        width: max-content !important;
-        color: @m-white1;
-        background: @m-black2;
-        border-top-color: @m-black2  !important;
+        width            : max-content !important;
+        color            : @m-white1;
+        background       : @m-black2;
+        border-top-color : @m-black2  !important;
         border-left-color: @m-black9  !important;
     }
 }
@@ -329,7 +336,7 @@ body {
 
     >iframe {
         border: 0;
-        width: 100%;
+        width : 100%;
         height: 100%;
     }
 }
@@ -349,8 +356,8 @@ body {
 }
 
 .filer-containter {
-    text-align: left;
-    margin-left: 5px;
-    padding-top: 5px;
+    text-align    : left;
+    margin-left   : 5px;
+    padding-top   : 5px;
     padding-bottom: 5px;
 }

src/common/components/btnList/index.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="btn-list">
     <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 :class="item.className" v-for="item in dataList" :key="item.lable" :disabled="item.disabled"
+      @click.stop="onClick(item)">
+      {{ item.lable }}
     </a-button>
     <slot name="after"></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, ref, watch } from 'vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 
 export default defineComponent({
@@ -25,17 +26,28 @@ export default defineComponent({
     },
   },
   setup(props, context) {
+    const dataList = ref<BtnListType[]>(JSON.parse(JSON.stringify(props.btnList)));
+
     function onClick(item: BtnListType) {
       console.log(`${item.lable}:${item.code}`);
       context.emit('click', item, props.record);
     }
-    return { onClick };
-  },
-});
+
+    watch(() => props.btnList, (value) => {
+      // 重新渲染按钮
+      dataList.value = JSON.parse(JSON.stringify(value));
+    })
+
+    return {
+      dataList,
+      onClick
+    }
+  }
+})
 </script>
 
 <style lang="less">
 .btn-list {
-    display: inline-flex;
+  display: inline-flex;
 }
 </style>

src/common/components/btnList/interface.ts

@@ -3,5 +3,6 @@ export interface BtnListType {
     lable: string;  // 按钮名字
     code: string;   //
     callback?: Function;
-    className: BtnClassName    // 按钮 class 名字
+    className: BtnClassName;    // 按钮 class 名字
+    disabled?: boolean;
 }

src/common/setup/asyncComponent/index.ts

@@ -4,16 +4,26 @@ import { Ref, ref } from "vue";
 // 控制异步组件的关闭功能
 export function handleModalComponent<T>(callback: Function, selectedRow: Ref<T>) {
     const componentId = ref<string>('');
+    const selectedButton = ref<BtnListType>();
+
     /**
      * 关闭组件
      * @param isRefresh 是否刷更新数据
      */
-    function closeComponent(isRefresh: boolean) {
+    function closeComponent(isRefresh: boolean, disabled = false) {
+        const button = selectedButton.value;
+        if (button) {
+            button.disabled = disabled;
+        }
+
         componentId.value = '';
+        selectedButton.value = undefined;
+
         if (isRefresh) {
             callback()
         }
     }
+
     /**
      * 打开组件
      * @param item
@@ -25,7 +35,10 @@ export function handleModalComponent<T>(callback: Function, selectedRow: Ref<T>)
         if (record && selectedRow) {
             selectedRow.value = record
         }
+
+        item.disabled = true;
         componentId.value = item.code;
+        selectedButton.value = item;
     }
     return { componentId, closeComponent, openComponent }
 }

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

@@ -361,6 +361,7 @@ export default defineComponent({
       });
     }
     return {
+      loading,
       submit,
       cancel,
       visible,

src/views/order/funding_information/components/funding_information_funding_summary/setup.ts

@@ -198,7 +198,7 @@ export function useHazardRates() {
     }
 
     // 获取持仓明细
-    function getTradeHolderDetail(record: QueryTradePositionRsp) {
+    function getTradeHolderDetail(record: QueryTradePositionRsp): QueryTradeHolderDetailRsp[] {
         const { accountid, trademode, marketid, goodsid, buyorsell } = record;
         return positionDetailList.value.filter((e) => e.accountid === accountid && e.trademode === trademode && e.marketid === marketid && e.goodsid === goodsid && e.buyorsell === buyorsell);
     }

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

@@ -52,7 +52,7 @@
           </a-row>
           <a-form-item class="btnCenter mt10">
             <a-button class="listedBtn" :loading="loading" :disabled="loading" @click="submit">提交</a-button>
-            <a-button class="ml10 cancelBtn" @click="cancel(false)">取消</a-button>
+            <a-button class="ml10 cancelBtn" :loading="loading" :disabled="loading" @click="cancel(false)">取消</a-button>
           </a-form-item>
         </div>
       </a-form>
@@ -103,7 +103,8 @@ export default defineComponent({
 
     const { visible, cancel } = _closeModal(context);
     const { rules, formState, formRef } = handleForm();
-    const loading = ref<boolean>(false);
+    const loading = ref(false);
+
     // 估算金额=估算价*平仓数量*合约单位。
     function getMoney() {
       let result = '--';
@@ -129,8 +130,11 @@ export default defineComponent({
           OperatorID: geLoginID_number()!, // uint64 操作员账号ID
         };
         requestResultLoadingAndInfo(holderClose, param, loading, ['平仓成功', '平仓失败:']).then(() => {
-          cancel(false, true);
-        });
+          loading.value = true;
+          window.setTimeout(() => {
+            cancel(false, true);
+          }, 2000);
+        })
       });
     }
     return {

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

@@ -10,8 +10,8 @@
           <a-table :columns="getDetailColums()" class="expandBottomTable" :pagination="false" :loading="detailLoading"
             :expandedRowKeys="expandedRowKeys" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key"
             :data-source="getTradeHolderDetail(record)">
-            <template #operate="sub">
-              <BtnList :btnList="handleBtnList(record, btnList)" :record="sub.record" class="btn-list-sticky"
+            <template #operate="{ record }">
+              <BtnList :btnList="handleBtnList(record, btnList)" :record="record" class="btn-list-sticky"
                 @click="openComponent" />
             </template>
             <!-- 持仓盈亏 -->
@@ -59,7 +59,7 @@
     </template>
   </mtp-table-scroll>
   <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :tableList="positionList"
-    :swapList="swapList" @cancel="clsoeAction"></component>
+    :swapList="swapList" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
@@ -80,11 +80,11 @@ import { handleNoneValue, handleQuotePriceColor } from '@/common/setup/table/tab
 import { getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
 import { useHolderprice } from '@/services/bus/holdPosition';
 import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
+import { QueryTradeHolderDetailRsp } from "@/services/go/order/interface";
 import Bus from '@/utils/eventBus/index';
 import { isInvestment } from '@/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/setup';
 import { useHazardRates } from '@/views/order/funding_information/components/funding_information_funding_summary/setup'
 import { findGoodsCode, getTableColums, useDetail } from './setup';
-import { message } from 'ant-design-vue'
 
 export default defineComponent({
   name: enumOrderComponents.commodity_contract_summary,
@@ -96,7 +96,6 @@ export default defineComponent({
     detail: defineAsyncComponent(() => import('./components/detail/index.vue')), // 详情
   },
   setup() {
-    let timer = 0; // 推送超时定时器
     const { positionList, swapList, getHoldsList, getSwapList, getTradeHolderDetail, useProfitloss } = useHazardRates();
     // 表格列表数据
     const { loading } = queryTableList<QueryTradePositionRsp>();
@@ -106,7 +105,6 @@ export default defineComponent({
 
     // 获取列表数据
     const queryTableAction = () => {
-      window.clearTimeout(timer);
       getHoldsList(loading, TradeMode.DiaoQi.toString());
     }
 
@@ -130,7 +128,7 @@ export default defineComponent({
       return result;
     }
 
-    function handleBtnList(record: QueryTradePositionRsp, btnList: BtnListType[]) {
+    function handleBtnList(record: QueryTradeHolderDetailRsp, btnList: BtnListType[]) {
       // 贸易圈
       // 只有机构 才有平仓
       const diaoqi = isInvestment() ? ['swap_commodity_contract_summary_deal_closed', 'swap_commodity_contract_summary_order_closed', 'detail'] : ['swap_commodity_contract_summary_deal_closed', 'detail'];
@@ -142,18 +140,7 @@ export default defineComponent({
       expandedRowKeys, selectedRow, Rowclick, // 表格折腾面板数据与单击、双击事件
       componentId, closeComponent, openComponent,  // 控制异步组件
       btnList, // 表格按钮
-    } = handleComposeOrderTable<QueryTradePositionRsp>(param)
-
-    function clsoeAction(value: boolean, showLoading: boolean) {
-      if (showLoading) {
-        loading.value = true;
-        // 5秒内没收到推送手动刷新数据
-        timer = window.setTimeout(() => {
-          queryTableAction();
-        }, 5000)
-      }
-      closeComponent(value)
-    }
+    } = handleComposeOrderTable<QueryTradeHolderDetailRsp>(param)
 
     const stopNotify = Bus.$on(['posChangedNtf', 'spotTrade'], () => {
       queryTableAction()
@@ -185,7 +172,7 @@ export default defineComponent({
       getDetailColums,
       getTradeHolderDetail,
       findGoodsCode,
-      getDetailProfitloss, getDetailMarketAmount, handleQuotePriceColor, clsoeAction
+      getDetailProfitloss, getDetailMarketAmount, handleQuotePriceColor
     };
   },
 });