修改现货仓单

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

@@ -1,139 +1,148 @@
 <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">
-      <!-- 额外的展开行 -->
-      <template #expandedRowRender="{ record }">
-        <BtnList :btnList="handleBtnLsit(record)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
-      <!-- 挂牌有效期 -->
-      <template #validtime="{ text }">
-        <span>{{ formatTime(text, 'd') }}</span>
-      </template>
-      <!-- 挂牌类型 -->
-      <template #buyorsell="{ text }">
-        <span>{{ text ? '买' : '卖' }}</span>
-      </template>
-      <template #marginvalue="{ text }">
-        <span>{{ (text * 100).toFixed(2) }}%</span>
-      </template>
-      <!--  委托状态-->
-      <!-- <template #wrtradeorderstatus="{ record }">
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <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 #expandedRowRender="{ record }">
+          <BtnList
+            :btnList="handleBtnLsit(record)"
+            :record="record"
+            class="btn-list-sticky"
+            @click="openComponent"
+          />
+        </template>
+        <!-- 挂牌有效期 -->
+        <template #validtime="{ text }">
+          <span>{{ formatTime(text, 'd') }}</span>
+        </template>
+        <!-- 挂牌类型 -->
+        <template #buyorsell="{ text }">
+          <span>{{ text ? '买' : '卖' }}</span>
+        </template>
+        <template #marginvalue="{ text }">
+          <span>{{ (text * 100).toFixed(2) }}%</span>
+        </template>
+        <!--  委托状态-->
+        <!-- <template #wrtradeorderstatus="{ record }">
         <a>{{ getWrTradeOrderStatusName(record.wrtradeorderstatus) }}</a>
-      </template> -->
-      <!-- 挂牌类型 -->
-      <template #wrtradetype="{ record }">
-        <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
-      </template>
-      <template #applystatus="{ text }">
-        <span>{{ getBarmaginApplyStatus(text) }}</span>
-      </template>
-      <template #applytime="{ text }">
-        <span>{{ formatTime(text) }}</span>
-      </template>
-      <!-- 挂牌价格 -->
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </section>
+        </template>-->
+        <!-- 挂牌类型 -->
+        <template #wrtradetype="{ record }">
+          <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
+        </template>
+        <template #applystatus="{ text }">
+          <span>{{ getBarmaginApplyStatus(text) }}</span>
+        </template>
+        <template #applytime="{ text }">
+          <span>{{ formatTime(text) }}</span>
+        </template>
+        <!-- 挂牌价格 -->
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component
+    :is="componentId"
+    v-if="componentId"
+    :selectedRow="selectedRow"
+    @cancel="closeComponent"
+  ></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
-import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
-import { queryQueryWrTradeBargainApply, queryWrOrderDetail } from '@/services/go/wrtrade';
-import { QueryWrOrderDetailReq, QueryWrTradeBargainApplyQsp, QueryWrTradeBargainApplyReq, WrOrderDetail } from '@/services/go/wrtrade/interface';
+import { getBarmaginApplyStatus, getWrOrderTypeName, getWrTradeOrderStatusName } from '@/common/constants/enumsName';
+import { BtnList, defineAsyncComponent, defineComponent, queryTableList } from '@/common/export/commonTable';
+import { formatTime } from '@/common/methods';
 import { getRecordItemTab } from '@/common/setup/order/orderData';
+import { expandIcon } from '@/common/setup/table/clolumn';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
-import { getWrOrderTypeName, getWrTradeOrderStatusName, getBarmaginApplyStatus } from '@/common/constants/enumsName';
-import { BtnListType } from '@/common/components/btnList/interface';
-import { expandIcon } from '@/common/setup/table/clolumn';
-import { getSpotWarrantBargainColumns } from './setup';
-import { formatTime } from '@/common/methods';
 import { getUserId } from '@/services/bus/account';
+import { queryQueryWrTradeBargainApply } from '@/services/go/wrtrade';
+import { QueryWrTradeBargainApplyQsp, QueryWrTradeBargainApplyReq } from '@/services/go/wrtrade/interface';
 import Bus from '@/utils/eventBus';
+import { getSpotWarrantBargainColumns } from './setup';
 
 export default defineComponent({
-    name: enumOrderComponents.spot_warrant_pending_order,
-    components: {
-        BtnList,
-        spot_warrant_bargain_detail: defineAsyncComponent(() => import('./components/bargain_detail/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryWrTradeBargainApplyQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrTradeBargainApplyReq = {
-                userid: getUserId(),
-                haswr: 1,
-            };
-            queryTable(queryQueryWrTradeBargainApply, param);
-        };
-        Bus.$on('blocsTrade', () => {
-            queryTableAction();
-        });
+  name: enumOrderComponents.spot_warrant_pending_order,
+  components: {
+    BtnList,
+    MtpTableScroll,
+    detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryWrTradeBargainApplyQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrTradeBargainApplyReq = {
+        userid: getUserId(),
+        haswr: 1,
+      };
+      queryTable(queryQueryWrTradeBargainApply, param);
+    };
+    Bus.$on('blocsTrade', () => {
+      queryTableAction();
+    });
 
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            recordList: getRecordItemTab(),
-        };
-        const {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            btnList, // 表格按钮
-        } = handleComposeOrderTable<QueryWrTradeBargainApplyQsp>(param);
-        function handleBtnLsit(record: QueryWrTradeBargainApplyQsp) {
-            // applystatus: number;//申请状态(议价状态) - 1:待确认 2:已确认 3:已拒绝 4:已撤销 5:系统撤销 6:处理失败 7:确认中
-            const arr = [2, 3];
-            return arr.includes(record.applystatus) ? btnList : [];
-        }
-        return {
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent,
-            openComponent, // 控制异步组件
-            btnList, // 表格按钮
-            columns: getSpotWarrantBargainColumns(),
-            loading,
-            tableList,
-            getWrTradeOrderStatusName,
-            getWrOrderTypeName,
-            expandIcon,
-            formatTime,
-            getBarmaginApplyStatus,
-            handleBtnLsit,
-        };
-    },
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      recordList: getRecordItemTab(),
+    };
+    const {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      btnList, // 表格按钮
+    } = handleComposeOrderTable<QueryWrTradeBargainApplyQsp>(param);
+    function handleBtnLsit(record: QueryWrTradeBargainApplyQsp) {
+      // applystatus: number;//申请状态(议价状态) - 1:待确认 2:已确认 3:已拒绝 4:已撤销 5:系统撤销 6:处理失败 7:确认中
+      const arr = [2, 3];
+      return arr.includes(record.applystatus) ? btnList : [];
+    }
+    return {
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent,
+      openComponent, // 控制异步组件
+      btnList, // 表格按钮
+      columns: getSpotWarrantBargainColumns(),
+      loading,
+      tableList,
+      getWrTradeOrderStatusName,
+      getWrOrderTypeName,
+      expandIcon,
+      formatTime,
+      getBarmaginApplyStatus,
+      handleBtnLsit,
+    };
+  },
 });
 </script>
 

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

@@ -1,48 +1,56 @@
 <template>
   <!-- 现货仓单 挂单 -->
-  <section>
-    <a-table :columns="tableColumns"
-             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 #expandedRowRender="{ record }">
-        <BtnList :btnList="filterBtnList(btnList, record)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
-      <!--  委托状态-->
-      <template #wrtradeorderstatus="{ record }">
-        <a>{{ getOrderStatusName(record.wrtradeorderstatus) }}</a>
-      </template>
-      <!-- 挂牌类型 -->
-      <template #wrtradetype="{ record }">
-        <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
-      </template>
-      <!-- 挂牌方式 -->
-      <template #wrpricetype="{ record }">
-        <span>{{ getWrPriceType(record) }}</span>
-      </template>
-      <!-- 价格/基差 -->
-      <template #futushow="{ record }">
-        <span>{{ showPriceOrMove(record) }}</span>
-      </template>
-      <!-- 挂牌价格 -->
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :isMy="false"
-               @cancel="closeComponent"></component>
-  </section>
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table
+        :columns="tableColumns"
+        class="srcollYTable"
+        :scroll="scroll"
+        :pagination="false"
+        :loading="loading"
+        :expandedRowKeys="expandedRowKeys"
+        :customRow="Rowclick"
+        :expandIcon="expandIcon"
+        :expandIconAsCell="false"
+        :rowKey="(record, index) => index"
+        :data-source="tableList"
+      >
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <BtnList
+            :btnList="filterBtnList(btnList, record)"
+            :record="record"
+            class="btn-list-sticky"
+            @click="openComponent"
+          />
+        </template>
+        <!--  委托状态-->
+        <template #wrtradeorderstatus="{ record }">
+          <a>{{ getOrderStatusName(record.wrtradeorderstatus) }}</a>
+        </template>
+        <!-- 挂牌类型 -->
+        <template #wrtradetype="{ record }">
+          <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
+        </template>
+        <!-- 挂牌方式 -->
+        <template #wrpricetype="{ record }">
+          <span>{{ getWrPriceType(record) }}</span>
+        </template>
+        <!-- 价格/基差 -->
+        <template #futushow="{ record }">
+          <span>{{ showPriceOrMove(record) }}</span>
+        </template>
+        <!-- 挂牌价格 -->
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component
+    :is="componentId"
+    v-if="componentId"
+    :selectedRow="selectedRow"
+    :isMy="false"
+    @cancel="closeComponent"
+  ></component>
 </template>
 
 <script lang="ts">
@@ -58,61 +66,63 @@ import { BtnListType } from '@/common/components/btnList/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
 import Bus from '@/utils/eventBus';
 import { useOrderWarrant } from '@/views/order/setup';
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 
 export default defineComponent({
-    name: enumOrderComponents.spot_warrant_pending_order,
-    components: {
-        BtnList,
-        [ModalEnum.spot_warrant_pending_order_cancel_order]: defineAsyncComponent(() => import('./components/cancle/index.vue')),
-        detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
-        spot_warrant_pending_order_bargain_order: defineAsyncComponent(() => import('@/views/order/spot_warran/components/spot_warrant_bargain/components/bargain_detail/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrOrderDetail>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrOrderDetailReq = {
-                haswr: 1,
-            };
-            queryTable(queryWrOrderDetail, param);
-        };
-        Bus.$on('blocsTrade', () => {
-            queryTableAction();
-        });
+  name: enumOrderComponents.spot_warrant_pending_order,
+  components: {
+    BtnList,
+    MtpTableScroll,
+    cancel: defineAsyncComponent(() => import('./components/cancle/index.vue')),
+    detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
+    bargain: defineAsyncComponent(() => import('@/views/order/spot_warran/components/spot_warrant_bargain/components/bargain_detail/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrOrderDetail>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrOrderDetailReq = {
+        haswr: 1,
+      };
+      queryTable(queryWrOrderDetail, param);
+    };
+    Bus.$on('blocsTrade', () => {
+      queryTableAction();
+    });
 
-        const { tableColumns, getWrPriceType, isShowBarginBtn, showPriceOrMove } = useOrderWarrant(1);
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            recordList: getRecordItemTab(),
-            isDetail: true,
-        };
-        function filterBtnList(list: BtnListType[], record: WrOrderDetail) {
-            //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;
-            const arr = [3, 7];
-            if (!isShowBarginBtn(record)) {
-                list = list.filter((e) => e.code !== 'spot_warrant_pending_order_bargain_order');
-            }
-            if (!arr.includes(record.wrtradeorderstatus)) {
-                return list.filter((e) => e.code !== ModalEnum.spot_warrant_pending_order_cancel_order);
-            } else {
-                return list;
-            }
-        }
-        return {
-            ...handleComposeOrderTable<WrOrderDetail>(param),
-            loading,
-            tableList,
-            getOrderStatusName,
-            getWrOrderTypeName,
-            filterBtnList,
-            expandIcon,
-            tableColumns,
-            getWrPriceType,
-            showPriceOrMove,
-        };
-    },
+    const { tableColumns, getWrPriceType, isShowBarginBtn, showPriceOrMove } = useOrderWarrant(1);
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      recordList: getRecordItemTab(),
+      isDetail: true,
+    };
+    function filterBtnList(list: BtnListType[], record: WrOrderDetail) {
+      //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;
+      const arr = [3, 7];
+      if (!isShowBarginBtn(record)) {
+        list = list.filter((e) => e.code !== 'spot_warrant_pending_order_bargain_order');
+      }
+      if (!arr.includes(record.wrtradeorderstatus)) {
+        return list.filter((e) => e.code !== ModalEnum.spot_warrant_pending_order_cancel_order);
+      } else {
+        return list;
+      }
+    }
+    return {
+      ...handleComposeOrderTable<WrOrderDetail>(param),
+      loading,
+      tableList,
+      getOrderStatusName,
+      getWrOrderTypeName,
+      filterBtnList,
+      expandIcon,
+      tableColumns,
+      getWrPriceType,
+      showPriceOrMove,
+    };
+  },
 });
 </script>
 

src/views/order/spot_warran/components/spot_warrant_spot_details/components/listing/index.vue

@@ -1,6 +1,12 @@
 <template>
   <!-- 现货仓单 现货明细 挂牌 -->
-  <Drawer :title="'挂牌'" :placement="'right'" class="delistingBottom650" :visible="visible" @cancel="cancel">
+  <Drawer
+    :title="'挂牌'"
+    :placement="'right'"
+    class="delistingBottom650"
+    :visible="visible"
+    @cancel="cancel"
+  >
     <div class="listing">
       <div class="condition">
         <a-button class="conditionBtn">{{ selectedRow.deliverygoodsname }}</a-button>
@@ -13,22 +19,43 @@
           <a-row :gutter="24">
             <a-col :span="12">
               <a-form-item label="交易市场" name="marketid">
-                <a-select class="inlineFormSelect" v-model:value="formState.marketid" @change="handleMarket" style="width: 140px" placeholder="请选择交易市场">
+                <a-select
+                  class="inlineFormSelect"
+                  v-model:value="formState.marketid"
+                  @change="handleMarket"
+                  style="width: 140px"
+                  placeholder="请选择交易市场"
+                >
                   <!-- <a-select-option :value="1">一口价</a-select-option>
                   <a-select-option :value="2">浮动价</a-select-option>
                   <a-select-option :value="3">贸易圈</a-select-option>-->
-                  <a-select-option v-for="item in spotMarkets" :key="item.marketid" :value="item.marketid">{{ item.marketname }}</a-select-option>
+                  <a-select-option
+                    v-for="item in spotMarkets"
+                    :key="item.marketid"
+                    :value="item.marketid"
+                  >{{ item.marketname }}</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :span="12" v-if="isFixed()">
-              <a-form-item label="挂牌价" name="FixedPrice">
-                <a-input-number class="dialogInput" :min="0" style="width: 140px" v-model:value="formState.FixedPrice" placeholder="请输入挂牌价" />
+              <a-form-item label="挂牌价格" name="FixedPrice">
+                <a-input-number
+                  class="dialogInput"
+                  :min="0"
+                  style="width: 140px"
+                  v-model:value="formState.FixedPrice"
+                  placeholder="请输入挂牌价"
+                />
               </a-form-item>
             </a-col>
             <a-col :span="12" v-if="isBlocs()">
               <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
-                <a-input-number class="commonInput" style="width: 140px" :min="0" v-model:value="formState.FixedPrice" />
+                <a-input-number
+                  class="commonInput"
+                  style="width: 140px"
+                  :min="0"
+                  v-model:value="formState.FixedPrice"
+                />
                 <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
               </a-form-item>
             </a-col>
@@ -40,11 +67,31 @@
                           style="width: 135px"
                           placeholder="请择交易所">
                 </a-select>-->
-                <a-select class="inlineFormSelect ml5" @change="handleGoodsGroups" style="width: 180px" v-model:value="formState.goodsgroupid" placeholder="请选择商品">
-                  <a-select-option v-for="item in goodsGroup" :value="item.goodsgroupid" :key="item.goodsgroupid">{{ item.goodsgroupname }}</a-select-option>
+                <a-select
+                  class="inlineFormSelect ml5"
+                  @change="handleGoodsGroups"
+                  style="width: 180px"
+                  v-model:value="formState.goodsgroupid"
+                  placeholder="请选择商品"
+                >
+                  <a-select-option
+                    v-for="item in goodsGroup"
+                    :value="item.goodsgroupid"
+                    :key="item.goodsgroupid"
+                  >{{ item.goodsgroupname }}</a-select-option>
                 </a-select>
-                <a-select class="inlineFormSelect ml5" style="width: 180px" @change="handleGoodsChange" v-model:value="formState.goodsid" placeholder="请选择合约">
-                  <a-select-option v-for="item in goodsList" :value="item.goodsid" :key="item.goodsid">{{ item.goodsname }}</a-select-option>
+                <a-select
+                  class="inlineFormSelect ml5"
+                  style="width: 180px"
+                  @change="handleGoodsChange"
+                  v-model:value="formState.goodsid"
+                  placeholder="请选择合约"
+                >
+                  <a-select-option
+                    v-for="item in goodsList"
+                    :value="item.goodsid"
+                    :key="item.goodsid"
+                  >{{ item.goodsname }}</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
@@ -52,14 +99,25 @@
           <a-row :gutter="24">
             <a-col :span="12">
               <a-form-item label="挂牌数量" class="inputIconBox" name="OrderQty">
-                <a-input-number class="dialogInput" style="width: 140px !important" :min="0" v-model:value="formState.OrderQty" placeholder="请输入挂牌数量" />
+                <a-input-number
+                  class="dialogInput"
+                  style="width: 140px !important"
+                  :min="0"
+                  v-model:value="formState.OrderQty"
+                  placeholder="请输入挂牌数量"
+                />
                 <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
                 <a-checkbox class="commonCheckbox" v-if="isBlocs()" v-model:checked="numCheck">整单</a-checkbox>
               </a-form-item>
             </a-col>
             <a-col :span="12" v-if="!numCheck">
-              <a-form-item label="起摘数量" class="relative" name="DelistMinQty">
-                <a-input-number class="commonInput" :min="0" v-model:value="formState.DelistMinQty" style="width: 140px !important" />
+              <a-form-item label="起摘数量" class="inputIconBox relative" name="DelistMinQty">
+                <a-input-number
+                  class="commonInput"
+                  :min="0"
+                  v-model:value="formState.DelistMinQty"
+                  style="width: 140px !important"
+                />
                 <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
                 <div class="tip-listing">
                   <span>最小单位：</span>
@@ -71,7 +129,13 @@
           <a-row :gutter="24">
             <a-col :span="12" class="mt-20">
               <a-form-item>
-                <a-slider v-model:value="formState.OrderQty" :min="0" :max="selectedRow.enableqty" class="formSlider" style="width: 140px" />
+                <a-slider
+                  v-model:value="formState.OrderQty"
+                  :min="0"
+                  :max="selectedRow.enableqty"
+                  class="formSlider"
+                  style="width: 140px"
+                />
                 <div class="unit">
                   <span>0</span>
                   <span>{{ selectedRow.enableqty }}{{ selectedRow.enumdicname }}</span>
@@ -81,24 +145,38 @@
             <a-col :span="12">&nbsp;</a-col>
           </a-row>
           <template v-if="isBlocs()">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="履约保证金" name="margin">
-                <a-input-number class="commonInput" v-model:value="formState.margin" :min="0" style="width: 140px" />
-                <span class="input-enumdicname">%</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="挂牌有效期" name="vidaliteTime" class="inputIconBox">
-                <a-date-picker style="width: 140px" v-model:value="formState.vidaliteTime" :allowClear="false" class="commonDatePicker dialogDatePicker" />
-              </a-form-item>
-            </a-col>
-          </a-row>
+            <a-row :gutter="24">
+              <a-col :span="12">
+                <a-form-item label="履约保证金" name="margin">
+                  <a-input-number
+                    class="commonInput"
+                    v-model:value="formState.margin"
+                    :min="0"
+                    style="width: 140px"
+                  />
+                  <span class="input-enumdicname">%</span>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="挂牌有效期" name="vidaliteTime" class="inputIconBox">
+                  <a-date-picker
+                    style="width: 140px"
+                    v-model:value="formState.vidaliteTime"
+                    :allowClear="false"
+                    class="commonDatePicker dialogDatePicker"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
           </template>
           <a-row :gutter="24">
             <a-col :span="12">
               <a-form-item label="履约模板" class="inputIconBox">
-                <span :class="['clickBox', formState.permanceTempName ? 'white' : '']" style="width: 140px" @click="handlePermance">{{ formState.permanceTempName ? formState.permanceTempName : '选择履约模板' }}</span>
+                <span
+                  :class="['clickBox', formState.permanceTempName ? 'white' : '']"
+                  style="width: 140px"
+                  @click="handlePermance"
+                >{{ formState.permanceTempName ? formState.permanceTempName : '选择履约模板' }}</span>
                 <svg class="icon svg-icon" aria-hidden="true" @click="handlePermance">
                   <use xlink:href="#icon-moban" />
                 </svg>
@@ -107,11 +185,19 @@
             <template v-if="isBlocs()">
               <a-col :span="12">
                 <a-form-item label="指定朋友" class="inputIconBox">
-                  <span :class="['clickBox', getFriendLength() ? 'white' : '']" style="width: 140px" @click="openFriend">{{ getFriendLength() ? `已选${getFriendLength()}人` : '选择朋友' }}</span>
+                  <span
+                    :class="['clickBox', getFriendLength() ? 'white' : '']"
+                    style="width: 140px"
+                    @click="openFriend"
+                  >{{ getFriendLength() ? `已选${getFriendLength()}人` : '选择朋友' }}</span>
                   <svg class="icon svg-icon" aria-hidden="true" @click="openFriend">
                     <use xlink:href="#icon-pengyou1" />
                   </svg>
-                  <a-checkbox class="commonCheckbox" v-model:checked="friendCheck" @change="limiteFriends">不限</a-checkbox>
+                  <a-checkbox
+                    class="commonCheckbox"
+                    v-model:checked="friendCheck"
+                    @change="limiteFriends"
+                  >不限</a-checkbox>
                 </a-form-item>
               </a-col>
             </template>
@@ -119,7 +205,11 @@
           <a-row :gutter="24" v-if="isFloat()">
             <a-col :span="12">
               <a-form-item label="基差" name="PriceMove">
-                <a-input-number class="commonInput" v-model:value="formState.PriceMove" style="width: 140px" />
+                <a-input-number
+                  class="commonInput"
+                  v-model:value="formState.PriceMove"
+                  style="width: 140px"
+                />
               </a-form-item>
             </a-col>
           </a-row>
@@ -167,7 +257,12 @@
           <a-col :span="24" class="fixedBtns">
             <a-form-item class="btnCenter">
               <a-button class="listedBtn" :loading="loading" :disabled="loading" @click="submit">卖出</a-button>
-              <a-button class="ml10 cancelBtn" :loading="loading" :disabled="loading" @click="cancel">取消</a-button>
+              <a-button
+                class="ml10 cancelBtn"
+                :loading="loading"
+                :disabled="loading"
+                @click="cancel"
+              >取消</a-button>
             </a-form-item>
           </a-col>
         </a-row>
@@ -175,9 +270,21 @@
     </div>
   </Drawer>
   <!-- 选择朋友 -->
-  <Friend v-if="showFriend" :friends="formState.friends" :position="'bottom'" @cancel="chooseFriend" @update="chooseFriend" />
+  <Friend
+    v-if="showFriend"
+    :friends="formState.friends"
+    :position="'bottom'"
+    @cancel="chooseFriend"
+    @update="chooseFriend"
+  />
   <!-- 选择履约模板 -->
-  <Permance v-if="showPermance" :position="'bottom'" :marketid="formState.marketid" @cancel="choosePermance" @update="choosePermance" />
+  <Permance
+    v-if="showPermance"
+    :position="'bottom'"
+    :marketid="formState.marketid"
+    @cancel="choosePermance"
+    @update="choosePermance"
+  />
 </template>
 
 <script lang="ts">
@@ -192,7 +299,7 @@ import { _closeModal } from '@/common/setup/modal/modal';
 import { useBlocksAccount, useBlocksFriends, useBlocksMoney, useBlocksNumber, useBlocksPermaceTemp, useBlocksPrice } from '@/common/setup/warehouse_receipt_trade/listing';
 import { getCanUseMoney, getInTaAccount, getUserId } from '@/services/bus/account';
 import { getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
-import { getAllMarkets, getMarketRunByTradeMode } from '@/services/bus/market';
+import { getMarketRunByTradeMode } from '@/services/bus/market';
 import { WrHoldLB } from '@/services/go/wrtrade/interface';
 import { hdWROrder } from '@/services/proto/warehousetrade';
 import { WRGoodsInfo } from '@/services/proto/warehousetrade/interface';
@@ -449,113 +556,118 @@ export default defineComponent({
 
 <style lang="less" scoped>
 .inputIconBox .input-enumdicname {
-    right: 100px;
+  right: 82px;
+  top: 5px;
 }
 .ant-form.inlineForm .relative.ant-form-item .tip {
-    top: -5px;
-    left: calc(100% + 5px);
-    white-space: normal;
-    span {
-        display: block;
-        line-height: 15px;
-    }
+  top: -5px;
+  left: calc(100% + 5px);
+  white-space: normal;
+  span {
+    display: block;
+    line-height: 15px;
+  }
 }
 .listing {
-    width: 100%;
-    height: 100%;
-    .flex;
-    flex-direction: column;
-    overflow: hidden;
-    .condition {
-        width: calc(100% - 32px);
-        height: 48px;
-        margin: 0 16px;
-        padding: 10px 0;
-        border-bottom: 1px solid @m-black6;
-        .inlineflex;
-        .conditionBtn {
-            align-self: center;
-            align-items: center;
-            border: 0;
-            min-width: 80px;
-            height: 28px;
-            line-height: 28px;
-            background: @m-black7;
-            .rounded-corners(3px);
-            font-size: 14px;
-            color: @m-blue0;
-            &:hover {
-                background: @m-black7-hover;
-                color: @m-blue0-hover;
-            }
-        }
-        .conditionBtn + .conditionBtn {
-            margin-left: 10px;
-        }
+  width: 100%;
+  height: 100%;
+  .flex;
+  flex-direction: column;
+  overflow: hidden;
+  .condition {
+    width: calc(100% - 32px);
+    height: 48px;
+    margin: 0 16px;
+    padding: 10px 0;
+    border-bottom: 1px solid @m-black6;
+    .inlineflex;
+    .conditionBtn {
+      align-self: center;
+      align-items: center;
+      border: 0;
+      min-width: 80px;
+      height: 28px;
+      line-height: 28px;
+      background: @m-black7;
+      .rounded-corners(3px);
+      font-size: 14px;
+      color: @m-blue0;
+      &:hover {
+        background: @m-black7-hover;
+        color: @m-blue0-hover;
+      }
     }
-    /deep/.ant-form {
-        .formBar {
-            height: calc(100% - 98px);
-            .clickBox {
-                height: 30px;
-            }
-            .ant-row.inputIconBox.ant-form-item {
-                .ant-col.ant-form-item-control-wrapper {
-                    .ant-form-item-control {
-                        .ant-form-item-children {
-                            width: 232px;
-                            .ant-checkbox-wrapper.commonCheckbox {
-                                left: 140px;
-                                .ant-checkbox {
-                                    margin-right: 0;
-                                }
-                            }
-                        }
-                    }
+    .conditionBtn + .conditionBtn {
+      margin-left: 10px;
+    }
+  }
+  /deep/.ant-form {
+    .ant-form-item-control-input-content {
+      position: absolute;
+      width: 100%;
+    }
+    .formBar {
+      height: calc(100% - 98px);
+      .clickBox {
+        height: 30px;
+      }
+      .ant-row.inputIconBox.ant-form-item {
+        .ant-col.ant-form-item-control-wrapper {
+          .ant-form-item-control {
+            .ant-form-item-children {
+              width: 232px;
+              .ant-checkbox-wrapper.commonCheckbox {
+                left: 140px;
+                .ant-checkbox {
+                  margin-right: 0;
                 }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 .mt-20 {
-    margin-top: -20px;
+  margin-top: -20px;
 }
 .unit {
-    margin-left: 70px;
-    width: 140px;
-    .flex;
-    justify-content: space-between;
-    font-size: 14px;
-    color: @m-grey41;
-    height: 14px;
-    line-height: 14px;
+  margin-left: 70px;
+  width: 140px;
+  .flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: @m-grey41;
+  height: 14px;
+  line-height: 14px;
 }
 .listedBtn {
-    width: 120px;
-    height: 30px;
-    line-height: 30px;
-    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
-    border-radius: 3px;
-    color: @m-white0;
-    font-size: 14px;
-    text-align: center;
-    border: 0;
-    &:hover {
-        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
-        color: @m-white0-hover;
-    }
+  width: 120px;
+  height: 30px;
+  line-height: 30px;
+  background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+  border-radius: 3px;
+  color: @m-white0;
+  font-size: 14px;
+  text-align: center;
+  border: 0;
+  &:hover {
+    background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+    color: @m-white0-hover;
+  }
 }
 .cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
-    &:hover {
-        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
-        color: @m-white0-hover;
-    }
+  background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+  &:hover {
+    background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+    color: @m-white0-hover;
+  }
 }
 .ml10 {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 .ml5 {
-    margin-left: 5px;
+  margin-left: 5px;
 }
 </style>;

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

@@ -1,36 +1,38 @@
 <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"
-        >
-            <!-- 额外的展开行 -->
-            <template v-if="btnList.length" #expandedRowRender="{ record }">
-                <BtnList
-                    :btnList="btnList"
-                    :record="record"
-                    class="btn-list-sticky"
-                    @click="openComponent"
-                />
-            </template>
-        </a-table>
-        <component
-            :is="componentId"
-            v-if="componentId"
-            :selectedRow="selectedRow"
-            @cancel="closeComponent"
-        ></component>
-    </section>
+    <mtp-table-scroll>
+        <template #default="{ scroll }">
+            <a-table
+                :columns="columns"
+                class="srcollYTable"
+                :scroll="scroll"
+                :pagination="false"
+                :loading="loading"
+                :expandedRowKeys="expandedRowKeys"
+                :customRow="Rowclick"
+                :expandIcon="expandIcon"
+                :expandIconAsCell="false"
+                :rowKey="(record, index) => index"
+                :data-source="tableList"
+            >
+                <!-- 额外的展开行 -->
+                <template v-if="btnList.length" #expandedRowRender="{ record }">
+                    <BtnList
+                        :btnList="btnList"
+                        :record="record"
+                        class="btn-list-sticky"
+                        @click="openComponent"
+                    />
+                </template>
+            </a-table>
+        </template>
+    </mtp-table-scroll>
+    <component
+        :is="componentId"
+        v-if="componentId"
+        :selectedRow="selectedRow"
+        @cancel="closeComponent"
+    ></component>
 </template>
 
 <script lang="ts">
@@ -42,11 +44,13 @@ import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 
 export default defineComponent({
     name: enumOrderComponents.spot_warrant_spot_summary,
     components: {
         BtnList,
+        MtpTableScroll,
     },
     setup() {
         // 表格列表数据