#3009、样式调整优化

src/common/components/capitalInfo/index.vue

@@ -1,58 +1,48 @@
 <template>
-    <div class="capital-info">
-        <!-- 资金信息 -->
-        <a-select
-            class="capitalSelect"
-            style="width: 180px"
-            v-if="false"
-            @change="accountChange"
-            v-model:value="selectedAccountId"
-        >
-            <a-select-option
-                v-for="item in getAllTaAccount()"
-                :value="item.accountid"
-                :key="item.accountid"
-            >{{ item.accountid }}</a-select-option>
-        </a-select>
-        <div class="numBlocks">
-            <div class="capitalItem">
-                <div class="firstLine">
-                    <div>资金账号</div>
-                    <div>
-                        <i class="iconfont icon-zhengyan" @click="showAction"></i>
-                    </div>
-                </div>
-                <div class="numBar">{{ showValue(getSelectedAccount().accountid) }}</div>
-            </div>
-            <div class="capitalItem">
-                <div class="firstLine">
-                    <div>余额</div>
-                    <!-- <div>
+  <div class="capital-info">
+    <!-- 资金信息 -->
+    <a-select class="capitalSelect" style="width: 180px" v-if="false" @change="accountChange" v-model:value="selectedAccountId">
+      <a-select-option v-for="item in getAllTaAccount()" :value="item.accountid" :key="item.accountid">{{ item.accountid }}</a-select-option>
+    </a-select>
+    <div class="numBlocks">
+      <div class="capitalItem">
+        <div class="firstLine">
+          <div>资金账号</div>
+          <div>
+            <i class="iconfont icon-zhengyan" @click="showAction"></i>
+          </div>
+        </div>
+        <div class="numBar">{{ showValue(getSelectedAccount().accountid) }}</div>
+      </div>
+      <div class="capitalItem">
+        <div class="firstLine">
+          <div>余额</div>
+          <!-- <div>
                         <i class="iconfont icon-zhengyan" @click="showAction"></i>
                     </div>-->
-                </div>
-                <div class="numBar">{{ showValue(data.currentbalance) }}</div>
-            </div>
-            <!-- <div class="capitalItem">
+        </div>
+        <div class="numBar">{{ showValue(data.currentbalance) }}</div>
+      </div>
+      <!-- <div class="capitalItem">
         <div class="firstLine">
           <div>占用</div>
         </div>
         <div class="numBar green">128,000.00</div>
             </div>-->
-            <div class="capitalItem">
-                <div class="firstLine">
-                    <div>冻结</div>
-                </div>
-                <div class="numBar red">{{ showValue(data.freeze) }}</div>
-            </div>
-            <div class="capitalItem">
-                <div class="firstLine">
-                    <div>可用</div>
-                </div>
-                <div class="numBar blue">{{ showValue(canUseMoney(getSelectedAccount())) }}</div>
-            </div>
+      <div class="capitalItem">
+        <div class="firstLine">
+          <div>冻结</div>
+        </div>
+        <div class="numBar red">{{ showValue(data.freeze) }}</div>
+      </div>
+      <div class="capitalItem">
+        <div class="firstLine">
+          <div>可用</div>
         </div>
+        <div class="numBar blue">{{ showValue(canUseMoney(getSelectedAccount())) }}</div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -65,64 +55,64 @@ import { useHazardRates } from '@/views/order/funding_information/components/fun
 import { initData } from '@/common/methods';
 
 export default defineComponent({
-    name: 'capital-info',
-    setup(props, context) {
-        // 当前选中的资金账号
-        const selectedAccount = getSelectedAccount();
-        const selectedAccountId = ref<number>(selectedAccount.accountid);
-        const data = reactive(getMoney(selectedAccount));
-        const show = ref<boolean>(true);
-        function showAction() {
-            show.value = !show.value;
-        }
+  name: 'capital-info',
+  setup(props, context) {
+    // 当前选中的资金账号
+    const selectedAccount = getSelectedAccount();
+    const selectedAccountId = ref<number>(selectedAccount.accountid);
+    const data = reactive(getMoney(selectedAccount));
+    const show = ref<boolean>(true);
+    function showAction() {
+      show.value = !show.value;
+    }
 
-        // 脱敏处理
-        function showValue(value: number | string) {
-            return show.value ? value : '******';
-        }
-        const loading = ref<boolean>(false)
-        const { canUseMoney, getHoldsList, getSwapList } = useHazardRates();
-        initData(() => {
-            // 交割商品
-            getSwapList()
-            // 获取头寸
-            getHoldsList(loading)
-        })
+    // 脱敏处理
+    function showValue(value: number | string) {
+      return show.value ? value : '******';
+    }
+    const loading = ref<boolean>(false)
+    const { canUseMoney, getHoldsList, getSwapList } = useHazardRates();
+    initData(() => {
+      // 交割商品
+      getSwapList()
+      // 获取头寸
+      getHoldsList(loading)
+    })
 
-        function getMoney(value: AccountListItem) {
-            const { currentbalance } = value;
-            return { currentbalance, freeze: getFreeze(value, true), canUse: getCanUseMoney(value) };
-        }
-        function accountChange(id: number) {
-            const item = getAllTaAccount().find((e) => e.accountid === id) as AccountListItem;
-            Object.assign(data, getMoney(item));
-            setSelectedAccount(item);
-        }
-        // 资金变化，重新加载数据
-        Bus.$on('moneyChangedNtf_UI', () => {
-            getTaAccount().then(() => {
-                accountChange(selectedAccountId.value);
-            });
-        });
-        return {
-            getAllTaAccount,
-            selectedAccountId,
-            accountChange,
-            data,
-            show,
-            showValue,
-            showAction,
-            loading,
-            canUseMoney,
-            getSelectedAccount,
-        };
-    },
+    function getMoney(value: AccountListItem) {
+      const { currentbalance } = value;
+      return { currentbalance, freeze: getFreeze(value, true), canUse: getCanUseMoney(value) };
+    }
+    function accountChange(id: number) {
+      const item = getAllTaAccount().find((e) => e.accountid === id) as AccountListItem;
+      Object.assign(data, getMoney(item));
+      setSelectedAccount(item);
+    }
+    // 资金变化，重新加载数据
+    Bus.$on('moneyChangedNtf_UI', () => {
+      getTaAccount().then(() => {
+        accountChange(selectedAccountId.value);
+      });
+    });
+    return {
+      getAllTaAccount,
+      selectedAccountId,
+      accountChange,
+      data,
+      show,
+      showValue,
+      showAction,
+      loading,
+      canUseMoney,
+      getSelectedAccount,
+    };
+  },
 });
 </script>
 
 <style lang="less">
 .capital-info {
-    width: 100%;
+    width: 180px;
     height: 100%;
     background: @m-grey6;
     .ant-select.capitalSelect {

src/common/components/tableScroll/index.less

@@ -0,0 +1,32 @@
+.mtp-table-scroll {
+    flex          : 1;
+    overflow      : hidden;
+    display       : flex;
+    flex-direction: column;
+    height        : 100%;
+
+    &:not(:first-child) {
+        margin-top: 2px;
+    }
+
+    &__container {
+        flex      : 1;
+        overflow-y: auto;
+    }
+
+    .ant-table-wrapper,
+    .ant-table-content,
+    .ant-table-scroll,
+    .ant-table-body {
+        height          : 100%;
+        background-color: transparent !important;
+    }
+
+    .ant-table {
+        background-color: transparent;
+    }
+
+    .ant-table-empty .ant-table-body {
+        display: none;
+    }
+}

src/common/components/tableScroll/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="mtp-table-scroll">
+    <slot name="header"></slot>
+    <div class="mtp-table-scroll__container" ref="scrollElement">
+      <slot :scroll="scroll"></slot>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue';
+import { debounce } from '@/utils/time';
+import { v4 } from 'uuid';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export default defineComponent({
+  emits: ['ready'],
+  props: {
+    // 表头高度
+    top: {
+      type: Number,
+      default: 27,
+    }
+  },
+  setup(props, { emit }) {
+    // 表格滚动区域宽高
+    const scroll = ref({
+      x: '100%',
+      y: 'auto',
+    })
+
+    const uuid = v4();
+    const scrollElement = ref<HTMLDivElement>();
+
+    onMounted(() => {
+      // 监听元素变化
+      const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+        debounce(() => {
+          for (const entry of entries) {
+            const { height } = entry.contentRect;
+            scroll.value.y = (height - props.top) + 'px';
+          }
+        }, 50, uuid);
+      });
+      if (scrollElement.value) {
+        resizeObserver.observe(scrollElement.value);
+      }
+      emit('ready');
+    })
+
+    return {
+      scroll,
+      scrollElement,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/common/components/thirdMenu/index.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="thirdMenu">
-    <a-tabs v-model:activeKey="current"
-            @change="menuClick">
-      <a-tab-pane :key="String(index)"
-                  v-for="(item, index) in list"
-                  :tab="item[value]"></a-tab-pane>
+    <a-tabs v-model:activeKey="current" @change="menuClick">
+      <a-tab-pane :key="String(index)" v-for="(item, index) in list" :tab="item[value]"></a-tab-pane>
     </a-tabs>
     <slot></slot>
   </div>
@@ -14,42 +11,42 @@
 import { defineComponent, ref, PropType, watchEffect } from 'vue';
 
 interface Key {
-    [propName: string]: string;
+  [propName: string]: string;
 }
 
 export default defineComponent({
-    name: 'third-menu',
-    props: {
-        list: {
-            default: [],
-            type: Object as PropType<Key[]>,
-        },
-        value: {
-            // 需要绑定的值得 key
-            default: 'lable',
-            type: String,
-        },
-        selectedKey: {
-            default: '0',
-            type: String,
-        },
+  name: 'third-menu',
+  props: {
+    list: {
+      default: [],
+      type: Object as PropType<Key[]>,
     },
-    components: {},
-    setup(props, context) {
-        const current = ref<string>('1');
-        watchEffect(() => {
-            current.value = props.selectedKey.toString();
-        });
-        function menuClick(value: string) {
-            const index = +value;
-            const item = props.list[index];
-            context.emit('selectMenu', +value, item);
-        }
-        return {
-            current,
-            menuClick,
-        };
+    value: {
+      // 需要绑定的值得 key
+      default: 'lable',
+      type: String,
+    },
+    selectedKey: {
+      default: '0',
+      type: String,
     },
+  },
+  components: {},
+  setup(props, context) {
+    const current = ref<string>('1');
+    watchEffect(() => {
+      current.value = props.selectedKey.toString();
+    });
+    function menuClick(value: string) {
+      const index = +value;
+      const item = props.list[index];
+      context.emit('selectMenu', +value, item);
+    }
+    return {
+      current,
+      menuClick,
+    };
+  },
 });
 </script>
 
@@ -60,7 +57,7 @@ export default defineComponent({
 .thirdMenu {
     width: 100%;
     height: 28px;
-    padding-bottom: 2px;
+    padding-top: 2px;
     background-color: @m-black5;
     z-index: 2;
     .ant-tabs {
@@ -106,11 +103,4 @@ export default defineComponent({
         }
     }
 }
-.layout-bottom {
-    .thirdMenu {
-        .position(absolute, auto, 0, 0, 0);
-        z-index: 2;
-    }
-}
-</style
->;
+</style>

src/layout/components/bottom.vue

@@ -1,32 +1,19 @@
 <template>
-    <section
-        :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']"
-    >
-        <CapitalInfo class="capital-info-container" v-if="isCapitalLeft"></CapitalInfo>
-        <main :class="[isCapitalLeft ? 'main-some' : 'main-all']">
-            <firstMenu :list="orderList" :value="'title'" @selectMenu="selectMenu">
-                <div class="right-menu-content">
-                    <!-- 资金信息 -->
-                    <a-select
-                        class="capitalSelect"
-                        style="width: 180px"
-                        @change="accountChange"
-                        v-model:value="selectedAccountId"
-                    >
-                        <a-select-option
-                            v-for="item in getAllTaAccount()"
-                            :value="item.accountid"
-                            :key="item.accountid"
-                        >{{ item.accountid }}</a-select-option>
-                    </a-select>
-                    <div class="conditionIcon icon iconfont icon-shouqi" @click="handleShowBottom"></div>
-                </div>
-            </firstMenu>
-            <div v-show="isShowBottom">
-                <component :is="componentId" v-if="componentId"></component>
-            </div>
-        </main>
-    </section>
+  <section :class="['layout-bottom', isShowBottom ? 'layout-bottom-all' : 'layout-bottom-hidden']">
+    <CapitalInfo class="capital-info-container" v-if="isCapitalLeft"></CapitalInfo>
+    <main :class="[isCapitalLeft ? 'main-some' : 'main-all']">
+      <firstMenu :list="orderList" :value="'title'" @selectMenu="selectMenu">
+        <div class="right-menu-content">
+          <!-- 资金信息 -->
+          <a-select class="capitalSelect" style="width: 180px" @change="accountChange" v-model:value="selectedAccountId">
+            <a-select-option v-for="item in getAllTaAccount()" :value="item.accountid" :key="item.accountid">{{ item.accountid }}</a-select-option>
+          </a-select>
+          <div class="conditionIcon icon iconfont icon-shouqi" @click="handleShowBottom"></div>
+        </div>
+      </firstMenu>
+      <component class="layout-bottom__container" :is="componentId" v-if="componentId"></component>
+    </main>
+  </section>
 </template>
 <script lang="ts">
 import CapitalInfo from '@/common/components/capitalInfo/index.vue';
@@ -46,116 +33,128 @@ import Bus from '@/utils/eventBus/index';
 import { defineAsyncComponent, defineComponent, ref } from 'vue';
 
 export default defineComponent({
-    name: 'layout-top',
-    components: {
-        CapitalInfo,
-        firstMenu,
-        quoteTable,
-        thirdMenu,
-        [enumOrderComponents.spot_warrant]: defineAsyncComponent(() => import('@/views/order/spot_warran/index.vue')), // 现货仓单
-        [enumOrderComponents.funding_information]: defineAsyncComponent(() => import('@/views/order/funding_information/index.vue')), // 资金信息
-        [enumOrderComponents.performance_information]: defineAsyncComponent(() => import('@/views/order/performance_information/index.vue')), // 履约信息
-        [enumOrderComponents.pre_sale_warehouse_receipt]: defineAsyncComponent(() => import('@/views/order/pre_sale_warehouse_receipt/index.vue')), // 预售仓单
-        [enumOrderComponents.financing_manager]: defineAsyncComponent(() => import('@/views/order/financing_manager/index.vue')), // 融资管理
-        [enumOrderComponents.commodity_contract]: defineAsyncComponent(() => import('@/views/order/commodity_contract/index.vue')), // 商品合约
-        [enumOrderComponents.swap_the_order]: defineAsyncComponent(() => import('@/views/order/swap_the_order/index.vue')), // 掉期订单
-    },
-    setup() {
-        const { orderList, componentId } = handleOrderData();
-        const selectedAccount = getSelectedAccount();
-        const selectedAccountId = ref<number>(selectedAccount.accountid);
-        function accountChange(id: number) {
-            const item = getAllTaAccount().find((e) => e.accountid === id) as AccountListItem;
-            setSelectedAccount(item);
-        }
-        // 资金变化，重新加载数据
-        Bus.$on('moneyChangedNtf_UI', () => {
-            getTaAccount().then(() => {
-                accountChange(selectedAccountId.value);
-            });
-        });
-        // 控制资金面板是否显示在左边
-        const isCapitalLeft = ref<boolean>(true);
-        initData(() => {
-            if (isOemByEnum(OemType.wrspot)) {
-                isCapitalLeft.value = false;
-            }
-        });
-        // 切换组件
-        function selectMenu(value: OperationTabMenu) {
-            componentId.value = value.code as enumOrderComponents;
-        }
-        return {
-            selectMenu,
-            componentId,
-            orderList,
-            isShowBottom: getShowBottomValue(),
-            handleShowBottom,
-            getAllTaAccount,
-            selectedAccountId,
-            accountChange,
-            isCapitalLeft,
-        };
-    },
+  name: 'layout-top',
+  components: {
+    CapitalInfo,
+    firstMenu,
+    quoteTable,
+    thirdMenu,
+    [enumOrderComponents.spot_warrant]: defineAsyncComponent(() => import('@/views/order/spot_warran/index.vue')), // 现货仓单
+    [enumOrderComponents.funding_information]: defineAsyncComponent(() => import('@/views/order/funding_information/index.vue')), // 资金信息
+    [enumOrderComponents.performance_information]: defineAsyncComponent(() => import('@/views/order/performance_information/index.vue')), // 履约信息
+    [enumOrderComponents.pre_sale_warehouse_receipt]: defineAsyncComponent(() => import('@/views/order/pre_sale_warehouse_receipt/index.vue')), // 预售仓单
+    [enumOrderComponents.financing_manager]: defineAsyncComponent(() => import('@/views/order/financing_manager/index.vue')), // 融资管理
+    [enumOrderComponents.commodity_contract]: defineAsyncComponent(() => import('@/views/order/commodity_contract/index.vue')), // 商品合约
+    [enumOrderComponents.swap_the_order]: defineAsyncComponent(() => import('@/views/order/swap_the_order/index.vue')), // 掉期订单
+  },
+  setup() {
+    const { orderList, componentId } = handleOrderData();
+    const selectedAccount = getSelectedAccount();
+    const selectedAccountId = ref<number>(selectedAccount.accountid);
+    function accountChange(id: number) {
+      const item = getAllTaAccount().find((e) => e.accountid === id) as AccountListItem;
+      setSelectedAccount(item);
+    }
+    // 资金变化，重新加载数据
+    Bus.$on('moneyChangedNtf_UI', () => {
+      getTaAccount().then(() => {
+        accountChange(selectedAccountId.value);
+      });
+    });
+    // 控制资金面板是否显示在左边
+    const isCapitalLeft = ref<boolean>(true);
+    initData(() => {
+      if (isOemByEnum(OemType.wrspot)) {
+        isCapitalLeft.value = false;
+      }
+    });
+    // 切换组件
+    function selectMenu(value: OperationTabMenu) {
+      componentId.value = value.code as enumOrderComponents;
+    }
+    return {
+      selectMenu,
+      componentId,
+      orderList,
+      isShowBottom: getShowBottomValue(),
+      handleShowBottom,
+      getAllTaAccount,
+      selectedAccountId,
+      accountChange,
+      isCapitalLeft,
+    };
+  },
 });
 </script>
 <style lang="less">
 .right-menu-content {
     display: flex;
+    align-items: center;
     .capitalSelect {
         margin-top: 2px;
         margin-right: 10px;
         .ant-select-selector {
             background-color: @m-grey6;
             border: none;
-            height: 28px;
+            height: 30px;
         }
         .ant-select-arrow {
             top: 15px;
         }
+        .ant-select-selection-placeholder {
+            color: @m-grey10;
+        }
     }
 }
 .layout-bottom-all {
     height: 280px;
 }
 .layout-bottom-hidden {
-    height: 40px;
+    height: 37px;
+    .conditionIcon {
+        transform: rotate(180deg);
+    }
 }
-
 .layout-bottom {
     display: flex;
     width: 100%;
-    transition: height 0.5s;
+    transition: height 300ms;
     overflow: hidden;
+    .operBtn {
+        margin-right: 8px;
+    }
     .capital-info-container {
-        width: 180px;
         border-right: 1px solid @m-black2;
     }
     main {
-        max-width: 100%;
         flex: 1;
         .flex;
         flex-direction: column;
         background: @m-black36;
         position: relative;
+        overflow: hidden;
         .conditionIcon {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            height: initial;
             font-size: 16px;
             color: @m-grey1;
             width: 16px;
             cursor: pointer;
-            height: 40px;
-            line-height: 40px;
             margin-right: 10px;
             &:hover {
                 color: @m-grey1-hover;
             }
         }
     }
-    .main-some {
-        max-width: calc(100% - 180px);
-    }
-    .main-all {
-        max-width: 100;
+
+    &__container {
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        border-bottom: 2px solid transparent;
     }
 }
 </style>

src/layout/components/main.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="exposure">
     <div class="first-menu">
-      <a-menu class="a-menu_container"
-              theme="dark"
-              v-model:selectedKeys="selectedKey"
-              @click="selectMenu"
-              mode="horizontal">
-        <a-menu-item :key="String(index)"
-                     v-for="(item, index) in list">{{ item.title}}</a-menu-item>
+      <a-menu class="a-menu_container" theme="dark" v-model:selectedKeys="selectedKey" @click="selectMenu" mode="horizontal">
+        <a-menu-item :key="String(index)" v-for="(item, index) in list">{{ item.title}}</a-menu-item>
       </a-menu>
       <div class="menu_right">
         <!-- <slot></slot> -->
@@ -23,26 +18,28 @@ import { useRouter } from 'vue-router';
 import { OperationTabMenu } from '@/services/go/commonService/interface';
 
 export default defineComponent({
-    name: 'MAIN',
-    components: {},
-    setup() {
-        const router = useRouter();
-        const list = inject('thirdMenuList') as Ref<OperationTabMenu[]>;
-        const selectedKey = inject('index');
-        // 切换路由
-        function selectMenu(value: any) {
-            if (((selectedKey as unknown) as any).value[0] !== value.key) {
-                const index = +value.key;
-                router.push({ name: list.value[index].code });
-            }
-        }
-        return { selectMenu, list, selectedKey };
-    },
+  name: 'MAIN',
+  components: {},
+  setup() {
+    const router = useRouter();
+    const list = inject('thirdMenuList') as Ref<OperationTabMenu[]>;
+    const selectedKey = inject('index');
+    // 切换路由
+    function selectMenu(value: any) {
+      if (((selectedKey as unknown) as any).value[0] !== value.key) {
+        const index = +value.key;
+        router.push({ name: list.value[index].code });
+      }
+    }
+    return { selectMenu, list, selectedKey };
+  },
 });
 </script>
 
 <style lang="less">
 .exposure {
+    display: flex;
+    flex-direction: column;
     height: 100%;
     position: relative;
 }

src/utils/time/index.ts

@@ -49,7 +49,7 @@ export function getRangeTime(val1: Time, val2: Time, type = 'YYYYMMDD', unit: un
  * @param wait 毫秒，防抖期限值
  * @returns
  */
-export function debounce(fn: () => void, wait: number, timer: keyof TimeoutTimerNames = 'debounce'): void {
+export function _debounce(fn: () => void, wait: number, timer: keyof TimeoutTimerNames = 'debounce'): void {
     return (function () {
         timerUtil.clearTimeout(timer);
         timerUtil.setTimeout(fn, wait, timer);
@@ -70,4 +70,50 @@ export function sortTime<T extends object>(arr: T[], key: keyof T, isUp = true)
         return isUp ? time1 - time2 : time2 - time1;
     });
     return result;
+}
+
+const debounceMap = new Map<string, number>();
+const throttleMap = new Map<string, number>();
+
+/**
+ * 函数防抖 (等待触发)
+ * @param callback 到期时间执行的回调
+ * @param ms 延迟毫秒数，默认100毫秒
+ * @param timeoutId 防抖ID
+ * @returns 
+ */
+export function debounce(callback: () => void, ms = 100, timeoutId = 'timer') {
+    if (debounceMap.has(timeoutId)) {
+        const t = debounceMap.get(timeoutId);
+        clearTimeout(t);
+    }
+
+    const timer = window.setTimeout(() => {
+        debounceMap.delete(timeoutId);
+        callback();
+    }, ms)
+
+    debounceMap.set(timeoutId, timer);
+}
+
+/**
+ * 函数节流 (间隔触发)
+ * @param callback 到期时间执行的回调
+ * @param ms 间隔毫秒数，默认100毫秒
+ * @param timeoutId 节流ID
+ * @returns 
+ */
+export function throttle(callback: () => void, ms = 100, timeoutId = 'timer') {
+    if (throttleMap.has(timeoutId)) {
+        const t = throttleMap.get(timeoutId);
+        if (t) return;
+    }
+
+    let timer = window.setTimeout(() => {
+        timer = 0;
+        throttleMap.delete(timeoutId);
+        callback();
+    }, ms);
+
+    throttleMap.set(timeoutId, timer);
 }

src/views/account-manager/account-manager-agency/account-manager-agency-sub/index.vue

@@ -1,78 +1,50 @@
 <template>
   <!-- 签约账号管理 -->
-  <section>
-    <a-table :columns="columns"
-             class="srcollYTable expandLeftTable"
-             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             :expandIcon="expandIcon"
-             :expandIconAsCell="false"
-             rowKey="key"
-             :data-source="tableList">
+  <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="key" :data-source="tableList">
 
-      <template #handle="{ record }">
-        <BtnList :btnList="tableBtns"
-                 v-if="record.signstatus === 4"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
-      <!-- 签约状态 -->
-      <template #signstatus="{ text }">
-
-        <span>{{ getSignStatus(text) }}</span>
-      </template>
-    </a-table>
-    <div v-if="tableList.length === 0">
-      <span class="add-bank"
-            @click="componentId = addCode">
-        <svg class="icon svg-icon add-svg"
-             aria-hidden="true">
-          <use xlink:href="#icon-tianjiayinhangka"></use>
-        </svg>
-        添加签约银行
-      </span>
-    </div>
-    <!-- 明细 -->
-    <Description v-if="visible"
-                 @changeTab="changeTab"
-                 @close="closeDrawer"
-                 :tabList="tabList">
-      <a-table :columns="detailColumns"
-               class="topTable"
-               :pagination="false"
-               rowKey="key"
-               :data-source="detailList"
-               :scroll="{ x: '100%', y: 'calc(100% - 36px)' }">
-        <template #updatetime="{ text }">
-          <span>{{ formatTime(text) }}</span>
-        </template>
-        <template #certificatephotourl="{ text, record }">
-          <a @click="previewImg(text)">{{handleUrl(text, record)}}</a>
+        <template #handle="{ record }">
+          <BtnList :btnList="tableBtns" v-if="record.signstatus === 4" :record="record" class="btn-list-sticky" @click="openComponent" />
         </template>
-        <template #applystatus="{ text }">
-          <span>{{ getAccountInOutApplyStatus(text) }}</span>
+        <!-- 签约状态 -->
+        <template #signstatus="{ text }">
+
+          <span>{{ getSignStatus(text) }}</span>
         </template>
       </a-table>
-    </Description>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-    <a-modal :visible="previewVisible"
-             :footer="null"
-             @cancel="cancelImg">
-      <img alt="预览附件"
-           style="width: 100%"
-           :src="previewImage" />
-    </a-modal>
-  </section>
+      <div v-if="tableList.length === 0">
+        <span class="add-bank" @click="componentId = addCode">
+          <svg class="icon svg-icon add-svg" aria-hidden="true">
+            <use xlink:href="#icon-tianjiayinhangka"></use>
+          </svg>
+          添加签约银行
+        </span>
+      </div>
+    </template>
+  </mtp-table-scroll>
+  <!-- 明细 -->
+  <Description v-if="visible" @changeTab="changeTab" @close="closeDrawer" :tabList="tabList">
+    <a-table :columns="detailColumns" class="topTable" :pagination="false" rowKey="key" :data-source="detailList" :scroll="{ x: '100%', y: 'calc(100% - 36px)' }">
+      <template #updatetime="{ text }">
+        <span>{{ formatTime(text) }}</span>
+      </template>
+      <template #certificatephotourl="{ text, record }">
+        <a @click="previewImg(text)">{{handleUrl(text, record)}}</a>
+      </template>
+      <template #applystatus="{ text }">
+        <span>{{ getAccountInOutApplyStatus(text) }}</span>
+      </template>
+    </a-table>
+  </Description>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
+  <a-modal :visible="previewVisible" :footer="null" @cancel="cancelImg">
+    <img alt="预览附件" style="width: 100%" :src="previewImage" />
+  </a-modal>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import Description from '@/common/components/description/index.vue';
 import { TabList } from '@/common/components/description/interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -98,137 +70,138 @@ const updateCode = 'account_manager_agency_sub_modiy';
 const deleteCode = 'account_manager_agency_sub_delete';
 
 const useButton = () => {
-    // 表格操作按钮列表
-    const btnList = getButtonList(EnumRouterName.account_manager_agency_sub, false);
-    // 过滤新增按钮
-    const tableBtns = btnList.filter((e) => e.code !== addCode);
-    return { tableBtns };
+  // 表格操作按钮列表
+  const btnList = getButtonList(EnumRouterName.account_manager_agency_sub, false);
+  // 过滤新增按钮
+  const tableBtns = btnList.filter((e) => e.code !== addCode);
+  return { tableBtns };
 };
 
 export default defineComponent({
-    name: EnumRouterName.account_manager_agency_sub,
-    components: {
-        BtnList,
-        Description,
-        [addCode]: defineAsyncComponent(() => import('./add.vue')),
-        [updateCode]: defineAsyncComponent(() => import('./modiy.vue')),
-        [deleteCode]: defineAsyncComponent(() => import('./delete.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryBankAccountSignQsp>();
-        const flag = ref(false);
-        const loadData = () => {
-            queryTable(queryBankAccountSign).then((res) => {
-                const set = new Set([2, 3, 4]);
-                tableList.value = res.filter((e) => set.has(e.signstatus));
-                if (tableList.value.length) {
-                    flag.value = true;
-                }
-            });
-        };
-        // 预览附件
-        const { previewVisible, previewImage, cancelImg, previewImg } = handlePreviewImg();
-        function handleUrl(value: string, record: QueryBankAccountSignQsp) {
-            let result = '--';
-            if (value && value !== '--') {
-                result = '查看附件';
-            }
-            return result;
-        }
-        // 表头
-        const { columns, applyInColumns, applyOutCloums } = getColumns();
-        const detailList = ref<QueryAccountInOutApplyRsq[]>([]);
-        const allDetailList = ref<QueryAccountInOutApplyRsp[]>([]);
-        const fn = (type: 1 | 2) => allDetailList.value.filter((e) => e.executetype === type);
-        let cacheIndex = 0;
-        // 出入金申请列表
-        function queryDetail() {
-            const { queryTable } = queryTableList<QueryAccountInOutApplyRsp>();
-            queryTable(QueryAccountInOutApply, {}).then((res) => {
-                allDetailList.value = sortTime<QueryAccountInOutApplyRsp>(res, 'updatetime', false);
-                changeTab(cacheIndex, tabList.value[cacheIndex]);
-            });
+  name: EnumRouterName.account_manager_agency_sub,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    Description,
+    [addCode]: defineAsyncComponent(() => import('./add.vue')),
+    [updateCode]: defineAsyncComponent(() => import('./modiy.vue')),
+    [deleteCode]: defineAsyncComponent(() => import('./delete.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryBankAccountSignQsp>();
+    const flag = ref(false);
+    const loadData = () => {
+      queryTable(queryBankAccountSign).then((res) => {
+        const set = new Set([2, 3, 4]);
+        tableList.value = res.filter((e) => set.has(e.signstatus));
+        if (tableList.value.length) {
+          flag.value = true;
         }
+      });
+    };
+    // 预览附件
+    const { previewVisible, previewImage, cancelImg, previewImg } = handlePreviewImg();
+    function handleUrl(value: string, record: QueryBankAccountSignQsp) {
+      let result = '--';
+      if (value && value !== '--') {
+        result = '查看附件';
+      }
+      return result;
+    }
+    // 表头
+    const { columns, applyInColumns, applyOutCloums } = getColumns();
+    const detailList = ref<QueryAccountInOutApplyRsq[]>([]);
+    const allDetailList = ref<QueryAccountInOutApplyRsp[]>([]);
+    const fn = (type: 1 | 2) => allDetailList.value.filter((e) => e.executetype === type);
+    let cacheIndex = 0;
+    // 出入金申请列表
+    function queryDetail() {
+      const { queryTable } = queryTableList<QueryAccountInOutApplyRsp>();
+      queryTable(QueryAccountInOutApply, {}).then((res) => {
+        allDetailList.value = sortTime<QueryAccountInOutApplyRsp>(res, 'updatetime', false);
+        changeTab(cacheIndex, tabList.value[cacheIndex]);
+      });
+    }
 
-        // 明细表头
-        const detailColumns = ref(applyInColumns);
+    // 明细表头
+    const detailColumns = ref(applyInColumns);
 
-        // 切换明细
-        function changeTab(index: number, current: TabList) {
-            if (!current) return;
-            cacheIndex = index;
-            const { code, lable } = current;
-            // executetype: number;//申请类型 - 1:出金 2:入金 3: 单边账调整:入金; 4:单边账调整:出金 5:外部母账户调整:入金 6:外部母账户调整:出金 7:外部子账户:入金 8:外部子账户:出金
-            if (code === 'account_manager_agency_sub_apply_in') {
-                // 充值申请
-                detailColumns.value = applyInColumns;
-                detailList.value = fn(2);
-            } else if (code === 'account_manager_agency_sub_apply_out') {
-                // 提现申请
-                detailColumns.value = applyOutCloums;
-                detailList.value = fn(1);
-            } else {
-                detailList.value = [];
-                console.error(`${lable}没有配置对应的code: ${code},`);
-                return;
-            }
-        }
+    // 切换明细
+    function changeTab(index: number, current: TabList) {
+      if (!current) return;
+      cacheIndex = index;
+      const { code, lable } = current;
+      // executetype: number;//申请类型 - 1:出金 2:入金 3: 单边账调整:入金; 4:单边账调整:出金 5:外部母账户调整:入金 6:外部母账户调整:出金 7:外部子账户:入金 8:外部子账户:出金
+      if (code === 'account_manager_agency_sub_apply_in') {
+        // 充值申请
+        detailColumns.value = applyInColumns;
+        detailList.value = fn(2);
+      } else if (code === 'account_manager_agency_sub_apply_out') {
+        // 提现申请
+        detailColumns.value = applyOutCloums;
+        detailList.value = fn(1);
+      } else {
+        detailList.value = [];
+        console.error(`${lable}没有配置对应的code: ${code},`);
+        return;
+      }
+    }
 
-        const param: ComposeTableDetailParam = {
-            queryFn: loadData, // 查询表格数据
-            tableFilterKey: [], // 表格过滤字段
-            menuType: EnumRouterName.account_manager_agency_sub, // 当前tab页对应的code
-        };
-        const {
-            visible,
-            closeDrawer, // 控制 drawer 组件是否显示
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格事件
-            tabList,
-        } = handleComposeTable_detail<QueryPermancePlanTmpRsp>(param);
-        watch(flag, () => {
-            visible.value = true;
-            queryDetail();
-        });
-        watchEffect(() => {
-            if (visible.value) {
-                changeTab(cacheIndex, tabList.value[cacheIndex]);
-            }
-        });
-        // 出入金申请，重新加载数据
-        Bus.$on('applyInOrOut', () => {
-            queryDetail();
-        });
-        return {
-            loading,
-            tableList,
-            ...useButton(),
-            columns,
-            ...handleModalComponent(loadData, selectedRow),
+    const param: ComposeTableDetailParam = {
+      queryFn: loadData, // 查询表格数据
+      tableFilterKey: [], // 表格过滤字段
+      menuType: EnumRouterName.account_manager_agency_sub, // 当前tab页对应的code
+    };
+    const {
+      visible,
+      closeDrawer, // 控制 drawer 组件是否显示
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格事件
+      tabList,
+    } = handleComposeTable_detail<QueryPermancePlanTmpRsp>(param);
+    watch(flag, () => {
+      visible.value = true;
+      queryDetail();
+    });
+    watchEffect(() => {
+      if (visible.value) {
+        changeTab(cacheIndex, tabList.value[cacheIndex]);
+      }
+    });
+    // 出入金申请，重新加载数据
+    Bus.$on('applyInOrOut', () => {
+      queryDetail();
+    });
+    return {
+      loading,
+      tableList,
+      ...useButton(),
+      columns,
+      ...handleModalComponent(loadData, selectedRow),
 
-            visible,
-            closeDrawer, // 控制 drawer 组件是否显示
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格事件
-            tabList,
-            detailColumns,
-            formatTime,
-            expandIcon,
-            getSignStatus,
-            changeTab,
-            addCode,
-            detailList,
-            getAccountInOutApplyStatus,
-            previewVisible,
-            previewImage,
-            cancelImg,
-            previewImg,
-            handleUrl,
-        };
-    },
+      visible,
+      closeDrawer, // 控制 drawer 组件是否显示
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格事件
+      tabList,
+      detailColumns,
+      formatTime,
+      expandIcon,
+      getSignStatus,
+      changeTab,
+      addCode,
+      detailList,
+      getAccountInOutApplyStatus,
+      previewVisible,
+      previewImage,
+      cancelImg,
+      previewImg,
+      handleUrl,
+    };
+  },
 });
 </script>
 

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

@@ -1,77 +1,82 @@
 <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"
+  <mtp-table-scroll>
+    <template #header>
+      <div class="filterTable">
+        <div class="filter-custom-table">
+          <a-select class="conditionSelect" :style="{ width: '180px' }" @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>
-    </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)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="refgoodscode" ref="tableRef" :data-source="goodsList">
-      <!-- <template #totalturnover="{ text }">
+    </template>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="refgoodscode" ref="tableRef" :data-source="goodsList">
+        <!-- <template #totalturnover="{ text }">
         <span>{{changeUnit(text)}}</span>
       </template>-->
-      <!-- 涨跌 -->
-      <template #change="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteChange_out(record.refgoodscode) }}</span>
-      </template>
-      <!-- 幅度 -->
-      <template #amplitude="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteAmplitude_out(record.refgoodscode) }}</span>
-      </template>
-      <!-- 振幅 -->
-      <template #vibration="{ record }">
-        <span>{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
-      </template>
-      <template #index="{ index }">
-        <span>{{ index + 1 }}</span>
-      </template>
-      <!-- 买价 -->
-      <!-- <template #bid="{ record }">
+        <!-- 涨跌 -->
+        <template #change="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteChange_out(record.refgoodscode) }}</span>
+        </template>
+        <!-- 幅度 -->
+        <template #amplitude="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteAmplitude_out(record.refgoodscode) }}</span>
+        </template>
+        <!-- 振幅 -->
+        <template #vibration="{ record }">
+          <span>{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
+        </template>
+        <template #index="{ index }">
+          <span>{{ index + 1 }}</span>
+        </template>
+        <!-- 买价 -->
+        <!-- <template #bid="{ record }">
         <span :class="handleQuotePriceColor_out(record.refgoodscode, 'bid')">
           {{getQuoteValue_out(record.refgoodscode, 'bid')}}</span>
       </template>-->
-      <!-- 卖价 -->
-      <!-- <template #ask="{  record }">
+        <!-- 卖价 -->
+        <!-- <template #ask="{  record }">
         <span :class="handleQuotePriceColor_out(record.refgoodscode, 'ask')">
           {{getQuoteValue_out(record.refgoodscode, 'ask')}}</span>
       </template>-->
-      <!-- 最新价 -->
-      <template #last="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ getQuoteValue_out(record.refgoodscode, 'last') }}</span>
-      </template>
-      <!-- 开盘 -->
-      <template #opened="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'opened')">{{ getQuoteValue_out(record.refgoodscode, 'opened') }}</span>
-      </template>
-      <!-- 结算 -->
-      <template #settle="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'settle')">{{ getQuoteValue_out(record.refgoodscode, 'settle') }}</span>
-      </template>
-      <!-- 昨结算 -->
-      <template #presettle="{ record }">
-        <span>{{ getQuoteValue_out(record.refgoodscode, 'presettle') }}</span>
-      </template>
-      <!-- 最低价 -->
-      <template #lowest="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')">{{ getQuoteValue_out(record.refgoodscode, 'lowest') }}</span>
-      </template>
-      <!-- 最高价 -->
-      <template #highest="{ record }">
-        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')">{{ getQuoteValue_out(record.refgoodscode, 'highest') }}</span>
-      </template>
-    </a-table>
-    <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
-    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
-  </div>
+        <!-- 最新价 -->
+        <template #last="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ getQuoteValue_out(record.refgoodscode, 'last') }}</span>
+        </template>
+        <!-- 开盘 -->
+        <template #opened="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'opened')">{{ getQuoteValue_out(record.refgoodscode, 'opened') }}</span>
+        </template>
+        <!-- 结算 -->
+        <template #settle="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'settle')">{{ getQuoteValue_out(record.refgoodscode, 'settle') }}</span>
+        </template>
+        <!-- 昨结算 -->
+        <template #presettle="{ record }">
+          <span>{{ getQuoteValue_out(record.refgoodscode, 'presettle') }}</span>
+        </template>
+        <!-- 最低价 -->
+        <template #lowest="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')">{{ getQuoteValue_out(record.refgoodscode, 'lowest') }}</span>
+        </template>
+        <!-- 最高价 -->
+        <template #highest="{ record }">
+          <span :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')">{{ getQuoteValue_out(record.refgoodscode, 'highest') }}</span>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <!-- 右键 -->
+  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
 import { handleTableEventAndData } from '@/common/setup/table/compose';
@@ -84,6 +89,7 @@ import { columnsList, getBtnList, useSwapList } from './setup';
 export default defineComponent({
   name: 'spot_trade_order_transaction_swap',
   components: {
+    MtpTableScroll,
     contextMenu,
     BuyAndSell: defineAsyncComponent(() => import('./components/buy-sell-market/index.vue')),
     PostBuying: defineAsyncComponent(() => import('./components/post_buying/index.vue')),

src/views/market/spot_trade/spot_trade_reference_market/index.vue

@@ -1,92 +1,72 @@
 <template>
   <!--参考行情-->
-  <div class="topTableHeight topTableHeight_379">
-    <a-table
-      :columns="columns"
-      :class="['srcollYTable', isBottom ? '' : 'srcollYTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-      :scroll="{ x: '100%', y: isBottom ? 'calc(100vh - 378px)' : 'calc(100vh - 138px)' }"
-      :pagination="false"
-      :loading="loading"
-      :expandedRowKeys="expandedRowKeys"
-      :customRow="Rowclick"
-      rowKey="goodscode"
-      ref="tableRef"
-      :data-source="goodsList"
-    >
-      <template #totalturnover="{ text }">
-        <span>{{ changeUnit(text) }}</span>
-      </template>
-      <!-- 买量 -->
-      <template #bidvolume="{ text }">
-        <span>{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 卖量 -->
-      <template #askvolume="{ text }">
-        <span>{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 开盘价 -->
-      <template #opened="{ record, text }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 涨跌 -->
-      <template #change="{ record }">
-        <span
-          :class="handleQuotePriceColor(record.last, record.presettle)"
-        >{{ quoteChange(record, record.decimalplace) }}</span>
-      </template>
-      <!-- 幅度 -->
-      <template #amplitude="{ record }">
-        <span
-          :class="handleQuotePriceColor(record.last, record.presettle)"
-        >{{ quoteAmplitude(record, record.decimalplace) }}</span>
-      </template>
-      <!-- 振幅 -->
-      <template #vibration="{ record, text }">
-        <span
-          :class="handleQuotePriceColor(text, record.presettle)"
-        >{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
-      </template>
-      <template #index="{ index }">
-        <span>{{ index + 1 }}</span>
-      </template>
-      <!-- 买价 -->
-      <template #bid="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 卖价 -->
-      <template #ask="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 最新价 -->
-      <template #last="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 最低价 -->
-      <template #lowest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 最高价 -->
-      <template #highest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 昨结价 -->
-      <template #preclose="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
-      </template>
-    </a-table>
-    <!-- 右键 -->
-    <!-- <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu> -->
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :enumName="name"
-      :selectedRow="selectedRow"
-      @cancel="closeComponent"
-    ></component>
-  </div>
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="goodscode" ref="tableRef" :data-source="goodsList">
+        <template #totalturnover="{ text }">
+          <span>{{ changeUnit(text) }}</span>
+        </template>
+        <!-- 买量 -->
+        <template #bidvolume="{ text }">
+          <span>{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 卖量 -->
+        <template #askvolume="{ text }">
+          <span>{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 开盘价 -->
+        <template #opened="{ record, text }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 涨跌 -->
+        <template #change="{ record }">
+          <span :class="handleQuotePriceColor(record.last, record.presettle)">{{ quoteChange(record, record.decimalplace) }}</span>
+        </template>
+        <!-- 幅度 -->
+        <template #amplitude="{ record }">
+          <span :class="handleQuotePriceColor(record.last, record.presettle)">{{ quoteAmplitude(record, record.decimalplace) }}</span>
+        </template>
+        <!-- 振幅 -->
+        <template #vibration="{ record, text }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
+        </template>
+        <template #index="{ index }">
+          <span>{{ index + 1 }}</span>
+        </template>
+        <!-- 买价 -->
+        <template #bid="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 卖价 -->
+        <template #ask="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最新价 -->
+        <template #last="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最低价 -->
+        <template #lowest="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 最高价 -->
+        <template #highest="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 昨结价 -->
+        <template #preclose="{ text, record }">
+          <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <!-- 右键 -->
+  <!-- <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu> -->
+  <component :is="componentId" v-if="componentId" :enumName="name" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -129,6 +109,7 @@ const columnsList = [
 export default defineComponent({
   name: EnumRouterName.spot_trade_reference_market,
   components: {
+    MtpTableScroll,
     contextMenu,
     // [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../../components/detail/index.vue')),
     // [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),

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

@@ -1,31 +1,20 @@
 <template>
-    <!-- 仓单贸易 一口价挂牌-->
-    <div class="topTableHeight_413 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>
-        <!-- 右键 -->
-        <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu>
-        <component
-            :is="componentId"
-            v-if="componentId"
-            :enumName="name"
-            :selectedRow="selectedRow"
-            @cancel="closeComponent"
-        ></component>
-    </div>
+  <!-- 仓单贸易 一口价挂牌-->
+  <mtp-table-scroll>
+    <template #header>
+      <Filter :enumName="name" @search="search" @buy="buyOpen" />
+    </template>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList"></a-table>
+    </template>
+  </mtp-table-scroll>
+  <!-- 右键 -->
+  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu>
+  <component :is="componentId" v-if="componentId" :enumName="name" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { ComposeTableParam, contextMenu, defineAsyncComponent, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -36,84 +25,85 @@ import { handleComposeTable } from '@/views/market/spot_trade/setup';
 import Filter from '../../components/filter/index.vue';
 
 export default defineComponent({
-    name: EnumRouterName.warehouse_receipt_trade_price,
-    components: {
-        contextMenu,
-        Filter,
-        warehouse_receipt_trade_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
-        warehouse_receipt_trade_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: 1,
-            };
-            queryTable(queryOrderQuote, param);
-        };
-        Bus.$on('spotTrade', queryTableAction);
-        // 表格通用逻辑
-        const param: ComposeTableParam = {
-            queryFn: queryTableAction,
-            menuType: EnumRouterName.warehouse_receipt_trade_price,
-            tableName: 'table_pcweb_spot_trade_warehouse_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: 1,
-            };
-            Object.assign(param, value);
-            queryTable(queryOrderQuote, param);
-        }
-        function buyOpen(value: any, goods: any) {
-            componentId.value = 'postBuying';
-            selectedRow.value = value;
-        }
-        console.log('firstBtn', firstBtn);
-        return {
-            isBottom,
-            contextMenu,
-            openContext,
-            closeContext, // 右键
-            columns,
-            registerColumn,
-            updateColumn, // 表头
-            expandedRowKeys,
-            selectedRow,
-            Rowclick, // 表格折腾面板数据与单击、双击事件
-            componentId,
-            closeComponent, // 控制异步组件
-            firstBtn, // 表格按钮
-            name: EnumRouterName.warehouse_receipt_trade_price,
-            loading,
-            tableList,
-            search,
-            buyOpen,
-        };
-    },
+  name: EnumRouterName.warehouse_receipt_trade_price,
+  components: {
+    MtpTableScroll,
+    contextMenu,
+    Filter,
+    warehouse_receipt_trade_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
+    warehouse_receipt_trade_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: 1,
+      };
+      queryTable(queryOrderQuote, param);
+    };
+    Bus.$on('spotTrade', queryTableAction);
+    // 表格通用逻辑
+    const param: ComposeTableParam = {
+      queryFn: queryTableAction,
+      menuType: EnumRouterName.warehouse_receipt_trade_price,
+      tableName: 'table_pcweb_spot_trade_warehouse_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: 1,
+      };
+      Object.assign(param, value);
+      queryTable(queryOrderQuote, param);
+    }
+    function buyOpen(value: any, goods: any) {
+      componentId.value = 'postBuying';
+      selectedRow.value = value;
+    }
+    console.log('firstBtn', firstBtn);
+    return {
+      isBottom,
+      contextMenu,
+      openContext,
+      closeContext, // 右键
+      columns,
+      registerColumn,
+      updateColumn, // 表头
+      expandedRowKeys,
+      selectedRow,
+      Rowclick, // 表格折腾面板数据与单击、双击事件
+      componentId,
+      closeComponent, // 控制异步组件
+      firstBtn, // 表格按钮
+      name: EnumRouterName.warehouse_receipt_trade_price,
+      loading,
+      tableList,
+      search,
+      buyOpen,
+    };
+  },
 });
 </script>
 <style lang="less">

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

@@ -1,46 +1,32 @@
 <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="filterBtnList(btnList, record)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
-      <!-- 类型 -->
-      <template #buildtype="{ record }">
-        <a>{{ getBuyOrSellTypeName(record.buyorsell) }}</a>
-      </template>
-      <!-- 状态 -->
-      <template #orderstatus="{ record }">
-        <a>{{ getOrderStatusName(record.orderstatus) }}</a>
-      </template>
+  <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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="filterBtnList(btnList, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <!-- 类型 -->
+        <template #buildtype="{ record }">
+          <a>{{ getBuyOrSellTypeName(record.buyorsell) }}</a>
+        </template>
+        <!-- 状态 -->
+        <template #orderstatus="{ record }">
+          <a>{{ getOrderStatusName(record.orderstatus) }}</a>
+        </template>
 
-      <template #ordertime="{ text }">
-        <a>{{ formatTime(text) }}</a>
-      </template>
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </section>
+        <template #ordertime="{ text }">
+          <a>{{ formatTime(text) }}</a>
+        </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 { BtnListType } from '@/common/components/btnList/interface';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuyOrSellTypeName, getOrderStatusName } from '@/common/constants/enumsName';
@@ -56,48 +42,49 @@ import { WrPerformancePlan } from '@/services/go/wrtrade/interface';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: enumOrderComponents.commodity_contract_commission,
-    components: {
-        BtnList,
-        commodity_contract_commission_cancel_order: defineAsyncComponent(() => import('./components/cancel/index.vue')),
-    },
-    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,
-        };
-    },
+  name: enumOrderComponents.commodity_contract_commission,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    commodity_contract_commission_cancel_order: defineAsyncComponent(() => import('./components/cancel/index.vue')),
+  },
+  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>
 

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

@@ -1,51 +1,37 @@
 <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>
-      <!-- 类型 -->
-      <template #buyorsell="{ text }">
-        <span>{{ getBuyOrSellTypeName(text) }}</span>
-      </template>
-      <template #tradeprice="{ text, record }">
-        <span>{{ handleType(record, text)}}</span>
-      </template>
-      <template #matchaccountid="{ text, record }">
-        <span>{{ handleType(record, text)}}</span>
-      </template>
-      <!-- 状态 -->
-      <template #orderstatus="{ record }">
-        <a>{{ getOrderStatusName(record.orderstatus) }}</a>
-      </template>
-      <template #createtime="{ record }">
-        <a>{{ formatTime(record.createtime) }}</a>
-      </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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <!-- 类型 -->
+        <template #buyorsell="{ text }">
+          <span>{{ getBuyOrSellTypeName(text) }}</span>
+        </template>
+        <template #tradeprice="{ text, record }">
+          <span>{{ handleType(record, text)}}</span>
+        </template>
+        <template #matchaccountid="{ text, record }">
+          <span>{{ handleType(record, text)}}</span>
+        </template>
+        <!-- 状态 -->
+        <template #orderstatus="{ record }">
+          <a>{{ getOrderStatusName(record.orderstatus) }}</a>
+        </template>
+        <template #createtime="{ record }">
+          <a>{{ formatTime(record.createtime) }}</a>
+        </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 { getBuildTypeName, getBuyOrSellTypeName, getOrderStatusName } from '@/common/constants/enumsName';
 import { BtnList, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -60,47 +46,48 @@ import Bus from '@/utils/eventBus/index';
 import { handleNoneValue } from '@/common/setup/table/tableQuote';
 
 export default defineComponent({
-    name: enumOrderComponents.commodity_contract_make_deal,
-    components: {
-        BtnList,
-    },
-    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(),
-        };
-        // fix: #2063
-        function handleType(record: QueryTradeDetailRsp, value: string | number) {
-            let result: number | string = '--';
-            if (value) {
-                result = record.tradetype === 22 ? '--' : value;
-            }
-            return result;
-        }
-        Bus.$on('spotTrade', () => {
-            queryTableAction();
-        });
-        return {
-            ...handleComposeOrderTable<QueryTradeDetailRsp>(param),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-            getBuildTypeName,
-            getOrderStatusName,
-            getBuyOrSellTypeName,
-            handleNoneValue,
-            handleType,
-        };
-    },
+  name: enumOrderComponents.commodity_contract_make_deal,
+  components: {
+    MtpTableScroll,
+    BtnList,
+  },
+  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(),
+    };
+    // fix: #2063
+    function handleType(record: QueryTradeDetailRsp, value: string | number) {
+      let result: number | string = '--';
+      if (value) {
+        result = record.tradetype === 22 ? '--' : value;
+      }
+      return result;
+    }
+    Bus.$on('spotTrade', () => {
+      queryTableAction();
+    });
+    return {
+      ...handleComposeOrderTable<QueryTradeDetailRsp>(param),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+      getBuildTypeName,
+      getOrderStatusName,
+      getBuyOrSellTypeName,
+      handleNoneValue,
+      handleType,
+    };
+  },
 });
 </script>
 

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

@@ -1,53 +1,39 @@
 <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>
-      <template #createtime="{ record }">
-        <span>{{ formatTime(record.createtime) }}</span>
-      </template>
-      <!-- 点价价格  x+c 交收模式，不显示价格-->
-      <template #pdeliveryprice="{ record }">
-        <span>{{ record.pgoodsid ? record.pdeliveryprice : '--' }}</span>
-      </template>
-      <!-- 点价货款  x+c 交收模式，不显示点价货款-->
-      <template #p1goodsremainamount="{ record }">
-        <span>{{ record.pgoodsid ? record.p1goodsremainamount : '--' }}</span>
-      </template>
-      <!-- 类型 -->
-      <template #buyorsell="{ text }">
-        <span>{{ getBuyOrSellName(text) }}</span>
-      </template>
-      <!-- 状态 -->
-      <template #deliverystatus="{ record }">
-        <a>{{ getDeliveryStatusName(record.deliverystatus) }}</a>
-      </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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <template #createtime="{ record }">
+          <span>{{ formatTime(record.createtime) }}</span>
+        </template>
+        <!-- 点价价格  x+c 交收模式，不显示价格-->
+        <template #pdeliveryprice="{ record }">
+          <span>{{ record.pgoodsid ? record.pdeliveryprice : '--' }}</span>
+        </template>
+        <!-- 点价货款  x+c 交收模式，不显示点价货款-->
+        <template #p1goodsremainamount="{ record }">
+          <span>{{ record.pgoodsid ? record.p1goodsremainamount : '--' }}</span>
+        </template>
+        <!-- 类型 -->
+        <template #buyorsell="{ text }">
+          <span>{{ getBuyOrSellName(text) }}</span>
+        </template>
+        <!-- 状态 -->
+        <template #deliverystatus="{ record }">
+          <a>{{ getDeliveryStatusName(record.deliverystatus) }}</a>
+        </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 { getBuildTypeName, getBuyOrSellName, getDeliveryStatusName } from '@/common/constants/enumsName';
 import { BtnList, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -62,38 +48,39 @@ 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,
-    components: {
-        BtnList,
-    },
-    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,
+  components: {
+    MtpTableScroll,
+    BtnList,
+  },
+  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,
+    };
+  },
 });
 </script>
 

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

@@ -1,57 +1,41 @@
 <template>
   <!-- 商品订单 - 合约汇总 -->
-  <section>
-    <a-table :columns="tabColumns"
-             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>
-      <template #createtime="{ record }">
-        <a>{{ formatTime(record.createtime) }}</a>
-      </template>
-      <!-- 现价 -->
-      <template #lastprice="{ record }">
-        <a>{{ getLastprice(record) }}</a>
-      </template>
-      <!-- 均价 -->
-      <template #averageprice="{ text }">
-        <a>{{ handleNoneValue(text)}}</a>
-      </template>
-      <!-- 持仓盈亏 -->
-      <template #profitloss="{ record }">
-        <span>{{ record.averageprice ? useProfitloss(record) : '--' }}</span>
-      </template>
-      <template #buyorsell="{ record }">
-        <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
-      </template>
-      <template #marketamount="{ record, text }">
-        <span>{{ isDiaoQi(record) ? '--' : text }}</span>
-      </template>
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :tableList="tableList"
-               :swapList="swapList"
-               @cancel="closeComponent"></component>
-  </section>
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table :columns="tabColumns" class="srcollYTable" :scroll="scroll" :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>
+        <template #createtime="{ record }">
+          <a>{{ formatTime(record.createtime) }}</a>
+        </template>
+        <!-- 现价 -->
+        <template #lastprice="{ record }">
+          <a>{{ getLastprice(record) }}</a>
+        </template>
+        <!-- 均价 -->
+        <template #averageprice="{ text }">
+          <a>{{ handleNoneValue(text)}}</a>
+        </template>
+        <!-- 持仓盈亏 -->
+        <template #profitloss="{ record }">
+          <span>{{ record.averageprice ? useProfitloss(record) : '--' }}</span>
+        </template>
+        <template #buyorsell="{ record }">
+          <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
+        </template>
+        <template #marketamount="{ record, text }">
+          <span>{{ isDiaoQi(record) ? '--' : text }}</span>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :tableList="tableList" :swapList="swapList" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -63,13 +47,13 @@ import { expandIcon } from '@/common/setup/table/clolumn';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { handleSubcriteQuote } from '@/common/setup/table/tableQuote';
-import { findGoodsTradeModeById, getQuoteDayInfoByCodeFindPrice, getQutoGoodsByTradeMode } from '@/services/bus/goods';
+import { findGoodsTradeModeById, getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
 import { useHolderprice, useProfitloss } from '@/services/bus/holdPosition';
 import { queryTradePosition } from '@/services/go/ermcp/order';
 import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
-import { getBuyOrSellName, getChannelBuildName } from '@/common/constants/enumsName';
+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 { useIsDiaoQi, findGoodsCode } from './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 { QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
@@ -78,89 +62,90 @@ import { tabColumns, getSwapList } from './setup';
 import { handleNoneValue } from '@/common/setup/table/tableQuote';
 
 export default defineComponent({
-    name: enumOrderComponents.commodity_contract_summary,
-    components: {
-        BtnList,
-        [ModalEnum.commodity_contract_summary_settlement]: defineAsyncComponent(() => import('./components/commodity_contract_summary_settlement/index.vue')),
-        [ModalEnum.commodity_contract_summary_transfer]: defineAsyncComponent(() => import('./components/commodity_contract_summary_transfer/index.vue')),
-        commodity_contract_summary_deal_closed: defineAsyncComponent(() => import('./components/commodity_contract_summary_deal_closed/index.vue')),
-        commodity_contract_summary_order_closed: defineAsyncComponent(() => import('./components/commodity_contract_summary_order_closed/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryTradePositionRsp>();
-        const { subscribeAction } = handleSubcriteQuote();
-        // 交割商品
-        handleDeliveryRelation();
-        const swapList = ref<QueryQuoteGoodsListRsp[]>([]);
-        // 挂牌点选商品
-        //         const { deliverGoods, getQuoteList, goodsList, } = handleDeliveryRelation([1, 3]);
-        //         // 参考行情商品
-        // const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
+  name: enumOrderComponents.commodity_contract_summary,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.commodity_contract_summary_settlement]: defineAsyncComponent(() => import('./components/commodity_contract_summary_settlement/index.vue')),
+    [ModalEnum.commodity_contract_summary_transfer]: defineAsyncComponent(() => import('./components/commodity_contract_summary_transfer/index.vue')),
+    commodity_contract_summary_deal_closed: defineAsyncComponent(() => import('./components/commodity_contract_summary_deal_closed/index.vue')),
+    commodity_contract_summary_order_closed: defineAsyncComponent(() => import('./components/commodity_contract_summary_order_closed/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryTradePositionRsp>();
+    const { subscribeAction } = handleSubcriteQuote();
+    // 交割商品
+    handleDeliveryRelation();
+    const swapList = ref<QueryQuoteGoodsListRsp[]>([]);
+    // 挂牌点选商品
+    //         const { deliverGoods, getQuoteList, goodsList, } = handleDeliveryRelation([1, 3]);
+    //         // 参考行情商品
+    // const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
 
-        // 获取列表数据
-        const queryTableAction = () => {
-            Promise.all([queryTable(queryTradePosition), getSwapList()]).then((res) => {
-                swapList.value = res[1];
-                tableList.value = res[0];
-                const goodsSet = new Set<string>();
-                res[0].forEach((el) => {
-                    // 商品掉期取参考行情最新价，挂牌点选取自己行情的最新价
-                    const goodscode = findGoodsCode(el.goodsid, el.goodscode, swapList.value);
-                    if (goodscode) {
-                        goodsSet.add(goodscode);
-                    }
-                });
-                //  行情订阅
-                subscribeAction([...goodsSet]);
-            });
-        };
-        Bus.$on('spotTrade', queryTableAction);
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_summary',
-            recordList: getRecordItemTab(),
-        };
-        // 现价
-        function getLastprice(record: QueryTradePositionRsp) {
-            let result: number | string = '--';
-            const goodscode = findGoodsCode(record.goodsid, record.goodscode, swapList.value);
-            if (goodscode) {
-                result = getQuoteDayInfoByCodeFindPrice(goodscode);
-            }
-            return result;
-        }
-        function isDiaoQi(record: QueryTradePositionRsp) {
-            return findGoodsTradeModeById(record.goodsid) === TradeMode.DiaoQi;
-        }
-        function handleBtnList(record: QueryTradePositionRsp, btnList: BtnListType[]) {
-            // 挂牌点选
-            const listing = ['commodity_contract_summary_transfer', 'commodity_contract_summary_settlement'];
-            // 贸易圈
-            // 只有机构 才有平仓
-            const diaoqi = isInvestment() ? ['commodity_contract_summary_deal_closed', 'commodity_contract_summary_order_closed'] : ['commodity_contract_summary_deal_closed'];
-            const arr = isDiaoQi(record) ? diaoqi : listing;
-            return btnList.filter((e) => arr.includes(e.code));
-        }
-        return {
-            ...handleComposeOrderTable<QueryTradePositionRsp>(param),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-            getLastprice,
-            useHolderprice,
-            useProfitloss,
-            handleBtnList,
-            tabColumns,
-            getBuyOrSellName,
-            swapList,
-            findGoodsCode,
-            isDiaoQi,
-            handleNoneValue,
-        };
-    },
+    // 获取列表数据
+    const queryTableAction = () => {
+      Promise.all([queryTable(queryTradePosition), getSwapList()]).then((res) => {
+        swapList.value = res[1];
+        tableList.value = res[0];
+        const goodsSet = new Set<string>();
+        res[0].forEach((el) => {
+          // 商品掉期取参考行情最新价，挂牌点选取自己行情的最新价
+          const goodscode = findGoodsCode(el.goodsid, el.goodscode, swapList.value);
+          if (goodscode) {
+            goodsSet.add(goodscode);
+          }
+        });
+        //  行情订阅
+        subscribeAction([...goodsSet]);
+      });
+    };
+    Bus.$on('spotTrade', queryTableAction);
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_commodity_contract_summary',
+      recordList: getRecordItemTab(),
+    };
+    // 现价
+    function getLastprice(record: QueryTradePositionRsp) {
+      let result: number | string = '--';
+      const goodscode = findGoodsCode(record.goodsid, record.goodscode, swapList.value);
+      if (goodscode) {
+        result = getQuoteDayInfoByCodeFindPrice(goodscode);
+      }
+      return result;
+    }
+    function isDiaoQi(record: QueryTradePositionRsp) {
+      return findGoodsTradeModeById(record.goodsid) === TradeMode.DiaoQi;
+    }
+    function handleBtnList(record: QueryTradePositionRsp, btnList: BtnListType[]) {
+      // 挂牌点选
+      const listing = ['commodity_contract_summary_transfer', 'commodity_contract_summary_settlement'];
+      // 贸易圈
+      // 只有机构 才有平仓
+      const diaoqi = isInvestment() ? ['commodity_contract_summary_deal_closed', 'commodity_contract_summary_order_closed'] : ['commodity_contract_summary_deal_closed'];
+      const arr = isDiaoQi(record) ? diaoqi : listing;
+      return btnList.filter((e) => arr.includes(e.code));
+    }
+    return {
+      ...handleComposeOrderTable<QueryTradePositionRsp>(param),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+      getLastprice,
+      useHolderprice,
+      useProfitloss,
+      handleBtnList,
+      tabColumns,
+      getBuyOrSellName,
+      swapList,
+      findGoodsCode,
+      isDiaoQi,
+      handleNoneValue,
+    };
+  },
 });
 </script>
 

src/views/order/commodity_contract/index.vue

@@ -1,22 +1,15 @@
 <template>
   <!-- 商品合约 -->
   <section class="spot_warran">
-    <component :is="componentId"
-               v-if="componentId"></component>
-    <thirdMenu :list="tabList"
-               @selectMenu="changeTab"
-               :value="'title'">
+    <component :is="componentId" v-if="componentId"></component>
+    <thirdMenu :list="tabList" @selectMenu="changeTab" :value="'title'">
       <!-- 议价单 -->
-      <div class="goods-apply"
-           v-if="componentId === BARGIN">
+      <div class="goods-apply" v-if="componentId === BARGIN">
         <!-- <span @click="changeBargain(ApplyType.my)">我的议价</span>
                 <span @click="changeBargain(ApplyType.counterpart)">对方议价</span>-->
-        <a-radio-group class="conditionCommonRadioGroup"
-                       v-model:value="bargainValue">
-          <a-radio @focus="changeBargain(ApplyType.my)"
-                   :value="ApplyType.my">我的申请</a-radio>
-          <a-radio @focus="changeBargain(ApplyType.counterpart)"
-                   :value="ApplyType.counterpart">对方申请</a-radio>
+        <a-radio-group class="conditionCommonRadioGroup" v-model:value="bargainValue">
+          <a-radio @focus="changeBargain(ApplyType.my)" :value="ApplyType.my">我的申请</a-radio>
+          <a-radio @focus="changeBargain(ApplyType.counterpart)" :value="ApplyType.counterpart">对方申请</a-radio>
         </a-radio-group>
       </div>
     </thirdMenu>
@@ -34,30 +27,22 @@ import { ApplyType } from '@/common/constants/enumCommon';
 const BARGIN = 'commodity_contract_bargain'; // 议价单
 
 export default defineComponent({
-    name: enumOrderComponents.commodity_contract,
-    components: {
-        thirdMenu,
-        [enumOrderComponents.commodity_contract_summary]: defineAsyncComponent(() => import('./components/commodity_contract_summary/index.vue')),
-        [enumOrderComponents.commodity_contract_commission]: defineAsyncComponent(() => import('./components/commodity_contract_commission/index.vue')),
-        [enumOrderComponents.commodity_contract_make_deal]: defineAsyncComponent(() => import('./components/commodity_contract_make_deal/index.vue')),
-        [enumOrderComponents.commodity_contract_settlement]: defineAsyncComponent(() => import('./components/commodity_contract_settlement/index.vue')),
-        [BARGIN]: defineAsyncComponent(() => import('./components/commodity_contract_bargain/index.vue')),
-    },
-    setup() {
-        // 切换 我的
-        function changeBargain(value: ApplyType) {
-            Bus.$emit('bargain', value);
-        }
-        const bargainValue = ref<ApplyType>(ApplyType.my);
-        return { ...handleOrderDetailList(enumOrderComponents.commodity_contract), changeBargain, BARGIN, ApplyType, bargainValue };
-    },
+  name: enumOrderComponents.commodity_contract,
+  components: {
+    thirdMenu,
+    [enumOrderComponents.commodity_contract_summary]: defineAsyncComponent(() => import('./components/commodity_contract_summary/index.vue')),
+    [enumOrderComponents.commodity_contract_commission]: defineAsyncComponent(() => import('./components/commodity_contract_commission/index.vue')),
+    [enumOrderComponents.commodity_contract_make_deal]: defineAsyncComponent(() => import('./components/commodity_contract_make_deal/index.vue')),
+    [enumOrderComponents.commodity_contract_settlement]: defineAsyncComponent(() => import('./components/commodity_contract_settlement/index.vue')),
+    [BARGIN]: defineAsyncComponent(() => import('./components/commodity_contract_bargain/index.vue')),
+  },
+  setup() {
+    // 切换 我的
+    function changeBargain(value: ApplyType) {
+      Bus.$emit('bargain', value);
+    }
+    const bargainValue = ref<ApplyType>(ApplyType.my);
+    return { ...handleOrderDetailList(enumOrderComponents.commodity_contract), changeBargain, BARGIN, ApplyType, bargainValue };
+  },
 });
-</script>
-
-<style lang="less">
-.goods-apply {
-    position: absolute;
-    bottom: 2px;
-    right: 20px;
-}
-</style>;
+</script>

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

@@ -1,55 +1,41 @@
 <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="financeapplyid"
-             :data-source="tableList">
-      <!-- 额外的展开行 -->
-      <template v-if="btnList.length"
-                #expandedRowRender="{ record }">
-        <BtnList :btnList="handleBtnList(btnList, record)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
-      <!-- 类型 -->
-      <template #financetype="{ record }">
-        <a>{{ getFinanceTypeName(record.financetype) }}</a>
-      </template>
+  <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="financeapplyid" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="handleBtnList(btnList, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <!-- 类型 -->
+        <template #financetype="{ record }">
+          <a>{{ getFinanceTypeName(record.financetype) }}</a>
+        </template>
 
-      <!-- 状态 -->
-      <template #applystatus="{ text }">
-        <a>{{ getApplyStatusFinanceName(text) }}</a>
-      </template>
-      <template #createtime="{ record }">
-        <a>{{ formatTime(record.createtime) }}</a>
-      </template>
+        <!-- 状态 -->
+        <template #applystatus="{ text }">
+          <a>{{ getApplyStatusFinanceName(text) }}</a>
+        </template>
+        <template #createtime="{ record }">
+          <a>{{ formatTime(record.createtime) }}</a>
+        </template>
 
-      <!-- 结算方式 1:按日结息 3:按月结息-->
-      <template #interestsettlemode="{ text }">
-        <a>{{ getInterestSettleModeName(text) }}</a>
-      </template>
-      <!-- 费用 -->
-      <template #interestsettlevalue="{ record }">
-        <a>{{ getInterestrateModeName(record.interestratemode, record.interestrate, record.enumdicname) }}</a>
-      </template>
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </section>
+        <!-- 结算方式 1:按日结息 3:按月结息-->
+        <template #interestsettlemode="{ text }">
+          <a>{{ getInterestSettleModeName(text) }}</a>
+        </template>
+        <!-- 费用 -->
+        <template #interestsettlevalue="{ record }">
+          <a>{{ getInterestrateModeName(record.interestratemode, record.interestrate, record.enumdicname) }}</a>
+        </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 { queryWrFinanceBuyApply } from '@/services/go/wrtrade';
@@ -65,59 +51,60 @@ import { BtnListType } from '@/common/components/btnList/interface';
 import { sortTime } from '@/utils/time';
 
 export default defineComponent({
-    name: enumOrderComponents.financing_manager_apply_order,
-    components: {
-        BtnList,
-        [ModalEnum.financing_manager_apply_cancel]: defineAsyncComponent(() => import('./components/cancel/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrFinanceBuyApply>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            queryTable(queryWrFinanceBuyApply).then((res) => {
-                const arr = res.map((e) => {
-                    return { ...e, key: e.financeapplyid };
-                });
-                const waiting = arr.filter((e) => e.applystatus === 1);
-                const other = arr.filter((e) => e.applystatus !== 1);
-                // 时间 倒序排序
-                const sortWaiting = sortTime<WrFinanceBuyApply>(waiting, 'applydate', false);
-                const sortOther = sortTime<WrFinanceBuyApply>(other, 'applydate', false);
-                tableList.value = [...sortWaiting, ...sortOther];
-            });
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_financing_manage_bottom_apply_order',
-            recordList: getRecordItemTab(),
-        };
-        // 融资摘牌成功，重新加载数据
-        Bus.$on('financing_manager', () => {
-            queryTableAction();
+  name: enumOrderComponents.financing_manager_apply_order,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.financing_manager_apply_cancel]: defineAsyncComponent(() => import('./components/cancel/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrFinanceBuyApply>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      queryTable(queryWrFinanceBuyApply).then((res) => {
+        const arr = res.map((e) => {
+          return { ...e, key: e.financeapplyid };
         });
-        function handleBtnList(btnList: BtnListType[], item: WrFinanceBuyApply) {
-            const { applystatus } = item;
-            if (applystatus === 1) {
-                return btnList.filter((e) => e.code === ModalEnum.financing_manager_apply_cancel);
-            } else {
-                return [];
-            }
-        }
-        return {
-            ...handleComposeOrderTable<WrFinanceBuyApply>(param),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-            getFinanceTypeName,
-            getApplyStatusFinanceName,
-            handleBtnList,
-            getInterestrateModeName,
-            getInterestSettleModeName,
-        };
-    },
+        const waiting = arr.filter((e) => e.applystatus === 1);
+        const other = arr.filter((e) => e.applystatus !== 1);
+        // 时间 倒序排序
+        const sortWaiting = sortTime<WrFinanceBuyApply>(waiting, 'applydate', false);
+        const sortOther = sortTime<WrFinanceBuyApply>(other, 'applydate', false);
+        tableList.value = [...sortWaiting, ...sortOther];
+      });
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_financing_manage_bottom_apply_order',
+      recordList: getRecordItemTab(),
+    };
+    // 融资摘牌成功，重新加载数据
+    Bus.$on('financing_manager', () => {
+      queryTableAction();
+    });
+    function handleBtnList(btnList: BtnListType[], item: WrFinanceBuyApply) {
+      const { applystatus } = item;
+      if (applystatus === 1) {
+        return btnList.filter((e) => e.code === ModalEnum.financing_manager_apply_cancel);
+      } else {
+        return [];
+      }
+    }
+    return {
+      ...handleComposeOrderTable<WrFinanceBuyApply>(param),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+      getFinanceTypeName,
+      getApplyStatusFinanceName,
+      handleBtnList,
+      getInterestrateModeName,
+      getInterestSettleModeName,
+    };
+  },
 });
 </script>
 

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

@@ -1,48 +1,34 @@
 <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="handleBtnList(btnList, record)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
-      <!-- 类型 -->
-      <template #financetype="{ record }">
-        <a>{{ getFinanceTypeName(record.financetype) }}</a>
-      </template>
-      <!-- 状态 -->
-      <template #scfcontractstatus="{ text }">
-        <a>{{ getContractName(text) }}</a>
-      </template>
-      <template #createtime="{ record }">
-        <a>{{ formatTime(record.createtime) }}</a>
-      </template>
-      <template #scfcontracttype="{ record }">
-        <a>{{ getScfContractTypeName(record.scfcontracttype) }}</a>
-      </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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="handleBtnList(btnList, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <!-- 类型 -->
+        <template #financetype="{ record }">
+          <a>{{ getFinanceTypeName(record.financetype) }}</a>
+        </template>
+        <!-- 状态 -->
+        <template #scfcontractstatus="{ text }">
+          <a>{{ getContractName(text) }}</a>
+        </template>
+        <template #createtime="{ record }">
+          <a>{{ formatTime(record.createtime) }}</a>
+        </template>
+        <template #scfcontracttype="{ record }">
+          <a>{{ getScfContractTypeName(record.scfcontracttype) }}</a>
+        </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 { queryWrScfContract } from '@/services/go/wrtrade';
@@ -57,53 +43,54 @@ import { BtnListType } from '@/common/components/btnList/interface';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: enumOrderComponents.financing_manager_contract,
-    components: {
-        BtnList,
-        [ModalEnum.financing_manager_contract_repurchase_warrant]: defineAsyncComponent(() => import('./components/buyback/index.vue')),
-        [ModalEnum.financing_manager_contract_pay_arrears]: defineAsyncComponent(() => import('./components/pay/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrScfContract>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            queryTable(queryWrScfContract);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_financing_manage_bottom_contract',
-            recordList: getRecordItemTab(),
-        };
-        function handleBtnList(btnList: BtnListType[], item: WrScfContract) {
-            const { remainwrpositionqty, interestdebt } = item;
-            let result: BtnListType[] = btnList;
-            if (interestdebt === 0) {
-                // 费用欠款”不为0时出现“支付欠款”按钮
-                result = btnList.filter((e) => e.code !== ModalEnum.financing_manager_contract_pay_arrears);
-            } else if (remainwrpositionqty === 0) {
-                // “剩余数量”不为0时出现“回购仓单”按钮
-                result = btnList.filter((e) => e.code !== ModalEnum.financing_manager_contract_repurchase_warrant);
-            }
-            return result;
-        }
-        // 资金变化，重新加载数据
-        Bus.$on('moneyChangedNtf_UI', () => {
-            queryTableAction();
-        });
-        return {
-            ...handleComposeOrderTable<WrScfContract>(param),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-            getContractName,
-            getFinanceTypeName,
-            handleBtnList,
-            getScfContractTypeName,
-        };
-    },
+  name: enumOrderComponents.financing_manager_contract,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.financing_manager_contract_repurchase_warrant]: defineAsyncComponent(() => import('./components/buyback/index.vue')),
+    [ModalEnum.financing_manager_contract_pay_arrears]: defineAsyncComponent(() => import('./components/pay/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrScfContract>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      queryTable(queryWrScfContract);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_financing_manage_bottom_contract',
+      recordList: getRecordItemTab(),
+    };
+    function handleBtnList(btnList: BtnListType[], item: WrScfContract) {
+      const { remainwrpositionqty, interestdebt } = item;
+      let result: BtnListType[] = btnList;
+      if (interestdebt === 0) {
+        // 费用欠款”不为0时出现“支付欠款”按钮
+        result = btnList.filter((e) => e.code !== ModalEnum.financing_manager_contract_pay_arrears);
+      } else if (remainwrpositionqty === 0) {
+        // “剩余数量”不为0时出现“回购仓单”按钮
+        result = btnList.filter((e) => e.code !== ModalEnum.financing_manager_contract_repurchase_warrant);
+      }
+      return result;
+    }
+    // 资金变化，重新加载数据
+    Bus.$on('moneyChangedNtf_UI', () => {
+      queryTableAction();
+    });
+    return {
+      ...handleComposeOrderTable<WrScfContract>(param),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+      getContractName,
+      getFinanceTypeName,
+      handleBtnList,
+      getScfContractTypeName,
+    };
+  },
 });
 </script>
 

src/views/order/financing_manager/index.vue

@@ -1,12 +1,9 @@
 <template>
   <!-- 融资管理 -->
   <section class="spot_warran">
-    <component :is="componentId"
-               v-if="componentId">
+    <component :is="componentId" v-if="componentId">
     </component>
-    <thirdMenu :list="tabList"
-               @selectMenu="changeTab"
-               :value="'title'"></thirdMenu>
+    <thirdMenu :list="tabList" @selectMenu="changeTab" :value="'title'"></thirdMenu>
   </section>
 </template>
 
@@ -17,17 +14,14 @@ import thirdMenu from '@/common/components/thirdMenu/index.vue';
 import { handleOrderDetailList } from '@/common/setup/order/orderData';
 
 export default defineComponent({
-    name: enumOrderComponents.financing_manager,
-    components: {
-        thirdMenu,
-        [enumOrderComponents.financing_manager_apply_order]: defineAsyncComponent(() => import('./components/financing_manager_apply_order/index.vue')),
-        [enumOrderComponents.financing_manager_contract]: defineAsyncComponent(() => import('./components/financing_manager_contract/index.vue')),
-    },
-    setup() {
-        return { ...handleOrderDetailList(enumOrderComponents.financing_manager) };
-    },
+  name: enumOrderComponents.financing_manager,
+  components: {
+    thirdMenu,
+    [enumOrderComponents.financing_manager_apply_order]: defineAsyncComponent(() => import('./components/financing_manager_apply_order/index.vue')),
+    [enumOrderComponents.financing_manager_contract]: defineAsyncComponent(() => import('./components/financing_manager_contract/index.vue')),
+  },
+  setup() {
+    return { ...handleOrderDetailList(enumOrderComponents.financing_manager) };
+  },
 });
-</script>
-
-<style lang="less">
-</style>;
+</script>

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

@@ -1,42 +1,23 @@
 <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>
-            <template #createtime="{ record }">
-                <a>{{ formatTime(record.createtime) }}</a>
-            </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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <template #createtime="{ record }">
+          <a>{{ formatTime(record.createtime) }}</a>
+        </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 { BtnList, defineComponent, queryTableList } from '@/common/export/commonTable';
 import { formatTime } from '@/common/methods';
@@ -51,39 +32,40 @@ import { WrPerformancePlan } from '@/services/go/wrtrade/interface';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: enumOrderComponents.funding_information_funding_log,
-    components: {
-        BtnList,
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryAmountLogReq = {
-                accountID: getSelectedAccountId().toString(),
-            };
+  name: enumOrderComponents.funding_information_funding_log,
+  components: {
+    MtpTableScroll,
+    BtnList,
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryAmountLogReq = {
+        accountID: getSelectedAccountId().toString(),
+      };
 
-            queryTable(queryAmountLog, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_funding_info_log',
-            recordList: getRecordItemTab(),
-        };
-        // 资金变化，重新加载数据
-        Bus.$on('moneyChangedNtf_UI', () => {
-            queryTableAction();
-        });
-        return {
-            ...handleComposeOrderTable<WrPerformancePlan>(param),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-        };
-    },
+      queryTable(queryAmountLog, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_funding_info_log',
+      recordList: getRecordItemTab(),
+    };
+    // 资金变化，重新加载数据
+    Bus.$on('moneyChangedNtf_UI', () => {
+      queryTableAction();
+    });
+    return {
+      ...handleComposeOrderTable<WrPerformancePlan>(param),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+    };
+  },
 });
 </script>
 

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

@@ -1,67 +1,45 @@
 <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 v-if="btnList.length" #expandedRowRender="{ record }">
-        <BtnList
-          :btnList="btnList"
-          :record="record"
-          class="btn-list-sticky"
-          @click="openComponentAction"
-        />
-      </template>
-      <template #balance="{ record }">
-        <span>{{ canUseMoney(record) }}</span>
-      </template>
-      <template #freezemargin="{ record }">
-        <span>{{ getFreeze(record, true) }}</span>
-      </template>
-      <!-- 浮动盈亏 -->
-      <template #closepl="{ record }">
-        <span
-          :class="[+handleProfitloss(record) > 0 ? 'up-quote-color' : +handleProfitloss(record) === 0 ? '' : 'down-quote-color']"
-        >{{ handleProfitloss(record) }}</span>
-      </template>
-      <!-- 风险率 -->
-      <template #accountname="{ record }">
-        <span>{{ hazardRates(record) }}</span>
-      </template>
-      <!-- 持仓市值 -->
-      <template #curamount="{ record }">
-        <span>{{ handleHoldPrice(record.accountid) }}</span>
-      </template>
-      <!-- 净值 -->
-      <template #netWorth="{ record }">
-        <span>{{ netWorth(record) }}</span>
-      </template>
-      <template #tradestatus="{ text }">
-        <span>{{ getTaacountStatus(text) }}</span>
-      </template>
-    </a-table>
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :selectedRow="selectedRow"
-      :canUseMoney="canUseMoney(selectedRow)"
-      @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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" :record="record" class="btn-list-sticky" @click="openComponentAction" />
+        </template>
+        <template #balance="{ record }">
+          <span>{{ canUseMoney(record) }}</span>
+        </template>
+        <template #freezemargin="{ record }">
+          <span>{{ getFreeze(record, true) }}</span>
+        </template>
+        <!-- 浮动盈亏 -->
+        <template #closepl="{ record }">
+          <span :class="[+handleProfitloss(record) > 0 ? 'up-quote-color' : +handleProfitloss(record) === 0 ? '' : 'down-quote-color']">{{ handleProfitloss(record) }}</span>
+        </template>
+        <!-- 风险率 -->
+        <template #accountname="{ record }">
+          <span>{{ hazardRates(record) }}</span>
+        </template>
+        <!-- 持仓市值 -->
+        <template #curamount="{ record }">
+          <span>{{ handleHoldPrice(record.accountid) }}</span>
+        </template>
+        <!-- 净值 -->
+        <template #netWorth="{ record }">
+          <span>{{ netWorth(record) }}</span>
+        </template>
+        <template #tradestatus="{ text }">
+          <span>{{ getTaacountStatus(text) }}</span>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :canUseMoney="canUseMoney(selectedRow)" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getTaacountStatus } from '@/common/constants/enumsName';
@@ -84,6 +62,7 @@ import { tableColumns, useHazardRates } from './setup';
 export default defineComponent({
   name: enumOrderComponents.funding_information_funding_summary,
   components: {
+    MtpTableScroll,
     BtnList,
     funding_information_funding_summary_recharge: defineAsyncComponent(() => import('./components/funding_information_funding_summary_recharge/index.vue')),
     funding_information_funding_summary_withdraw: defineAsyncComponent(() => import('./components/funding_information_funding_summary_withdraw/index.vue')),

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

@@ -5,10 +5,12 @@ import { queryTableList } from '@/common/setup/table';
 import { hasSystemParam } from '@/hooks/system';
 import { useHolderprice, useProfitloss } from '@/services/bus/holdPosition';
 import { getMarketIdsByTradeMode, getMarketTradePropertyByGoodsId } from '@/services/bus/market';
-import { getUserAccountType } from '@/services/bus/user';
+import { getUserAccountType, getUsrId } from '@/services/bus/user';
 import { AccountListItem } from '@/services/dataCenter/interafce/account';
 import { queryTradePosition } from '@/services/go/ermcp/order';
 import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
+import { queryTradeHolderDetail } from "@/services/go/order";
+import { QueryTradeHolderDetailReq } from "@/services/go/order/interface";
 import { Taaccount } from '@/services/go/TaAccount/interface';
 import { queryQuoteGoodsList } from '@/services/go/Tjmd';
 import { QueryQuoteGoodsListReq, QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
@@ -138,6 +140,28 @@ export const tableColumns = () => {
     return result
 }
 
+// export function useTradePosition() {
+//     const positionList = ref<QueryTradePositionRsp[]>([]); // 持仓汇总
+//     const positionDetailList = ref<QueryTradeHolderDetailReq[]>([]); // 持仓明细
+
+//     const getPositionList = (loading: Ref<boolean>) => {
+//         // 获取头寸
+//         queryResultLoadingAndInfo(queryTradePosition, loading).then((res) => {
+//             positionList.value = res;
+//         })
+
+//         const param: QueryTradeHolderDetailReq = {
+//             userid: getUsrId(),
+//             accids: accountid.toString(),
+//             trademodes: trademode.toString(),
+//             marketids: marketid.toString(),
+//         }
+//         queryResultLoadingAndInfo(queryTradeHolderDetail, loading, param).then(res => {
+//             positionDetailList.value = res
+//         })
+//     }
+// }
+
 
 export const useHazardRates = () => {
     // 持仓汇总

src/views/order/funding_information/index.vue

@@ -1,12 +1,9 @@
 <template>
   <!-- 资金信息 -->
   <section class="funding_information">
-    <component :is="componentId"
-               v-if="componentId">
+    <component :is="componentId" v-if="componentId">
     </component>
-    <thirdMenu :list="tabList"
-               @selectMenu="changeTab"
-               :value="'title'"></thirdMenu>
+    <thirdMenu :list="tabList" @selectMenu="changeTab" :value="'title'"></thirdMenu>
   </section>
 </template>
 
@@ -16,17 +13,14 @@ import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import thirdMenu from '@/common/components/thirdMenu/index.vue';
 import { handleOrderDetailList } from '@/common/setup/order/orderData';
 export default defineComponent({
-    name: enumOrderComponents.funding_information,
-    components: {
-        thirdMenu,
-        [enumOrderComponents.funding_information_funding_summary]: defineAsyncComponent(() => import('./components/funding_information_funding_summary/index.vue')),
-        [enumOrderComponents.funding_information_funding_log]: defineAsyncComponent(() => import('./components/funding_information_funding_log/index.vue')),
-    },
-    setup() {
-        return { ...handleOrderDetailList(enumOrderComponents.funding_information) };
-    },
+  name: enumOrderComponents.funding_information,
+  components: {
+    thirdMenu,
+    [enumOrderComponents.funding_information_funding_summary]: defineAsyncComponent(() => import('./components/funding_information_funding_summary/index.vue')),
+    [enumOrderComponents.funding_information_funding_log]: defineAsyncComponent(() => import('./components/funding_information_funding_log/index.vue')),
+  },
+  setup() {
+    return { ...handleOrderDetailList(enumOrderComponents.funding_information) };
+  },
 });
-</script>
-
-<style lang="less">
-</style>;
+</script>

src/views/order/performance_information/components/performance_information_buy_performance/index.vue

@@ -1,55 +1,41 @@
 <template>
   <!-- 买履约 -->
-  <section>
-    <a-table :columns="getColums(BuyOrSell.buy)"
-             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="handleBtn(btnList, record)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
-      <!-- 履约类型 -->
-      <template #performancetype="{ record }">
-        <a>{{ getPerformanceTypeName(record.performancetype, record.haswr) }}</a>
-      </template>
-      <template #activatemonth="{ text }">
-        <span>{{ handleNoneValue(text) }}</span>
-      </template>
-      <!-- 付款方式 -->
-      <template #paymenttype="{ record }">
-        <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
-      </template>
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table :columns="getColums(BuyOrSell.buy)" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <BtnList :btnList="handleBtn(btnList, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <!-- 履约类型 -->
+        <template #performancetype="{ record }">
+          <a>{{ getPerformanceTypeName(record.performancetype, record.haswr) }}</a>
+        </template>
+        <template #activatemonth="{ text }">
+          <span>{{ handleNoneValue(text) }}</span>
+        </template>
+        <!-- 付款方式 -->
+        <template #paymenttype="{ record }">
+          <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
+        </template>
 
-      <!-- 履约状态 -->
-      <template #performancestatus="{ record }">
-        <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
-      </template>
+        <!-- 履约状态 -->
+        <template #performancestatus="{ record }">
+          <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
+        </template>
 
-      <!-- 当前步骤 -->
-      <template #curstepname="{ record }">
-        <a>{{ record.curstepname }}</a>
-      </template>
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :buyOrSell="BuyOrSell.buy"
-               @cancel="closeComponent"></component>
-  </section>
+        <!-- 当前步骤 -->
+        <template #curstepname="{ record }">
+          <a>{{ record.curstepname }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :buyOrSell="BuyOrSell.buy" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -65,62 +51,63 @@ import { QueryPerformancePlanReq, WrPerformancePlan } from '@/services/go/wrtrad
 import { getColums } from '../setup';
 
 export default defineComponent({
-    name: enumOrderComponents.performance_information_buy_performance,
-    components: {
-        BtnList,
-        [ModalEnum.performance_information_buy_performance_pay]: defineAsyncComponent(() => import('../components/pay/index.vue')),
-        [ModalEnum.performance_information_buy_performance_extension]: defineAsyncComponent(() => import('../components/extension/index.vue')),
-        [ModalEnum.performance_information_buy_performance_breach_contract]: defineAsyncComponent(() => import('../components/breach_contract/index.vue')),
-        [ModalEnum.performance_information_buy_performance_detail]: defineAsyncComponent(() => import('../components/detail/index.vue')),
-        [ModalEnum.performance_information_buy_performance_settlement]: defineAsyncComponent(() => import('../components/settlement/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryPerformancePlanReq = {
-                buyorsell: 0,
-            };
-            queryTable(QueryPerformancePlan, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_performance_info_buy',
-            recordList: getRecordItemTab(),
-        };
-        function handleBtn(btnList: BtnListType[], record: WrPerformancePlan): BtnListType[] {
-            //  performancestatus: number;//履约状态 - 1:初始化 2:正常 3:处理错误 4:违约待处理 5:违约处理中 6:完成 7.违约已完成 8:释放冻结失败 9:超时待处理 1number;
-            const { curstepname, performancestatus } = record;
-            let result: ModalEnum[] = [];
-            if (performancestatus === 1) {
-                result = [ModalEnum.performance_information_buy_performance_breach_contract, ModalEnum.performance_information_buy_performance_settlement];
-            } else if (performancestatus === 2) {
-                if (curstepname === '买方支付') {
-                    result = [ModalEnum.performance_information_buy_performance_pay, ModalEnum.performance_information_buy_performance_extension, ModalEnum.performance_information_buy_performance_breach_contract, ModalEnum.performance_information_buy_performance_detail];
-                } else if (curstepname === '货款溢短') {
-                    result = [ModalEnum.performance_information_buy_performance_extension, ModalEnum.performance_information_buy_performance_breach_contract, ModalEnum.performance_information_buy_performance_detail];
-                } else if (curstepname === '卖方发票') {
-                    result = [ModalEnum.performance_information_buy_performance_extension, ModalEnum.performance_information_buy_performance_breach_contract, ModalEnum.performance_information_buy_performance_detail];
-                }
-            }
-            return btnList.filter((e) => result.includes(e.code as ModalEnum));
+  name: enumOrderComponents.performance_information_buy_performance,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.performance_information_buy_performance_pay]: defineAsyncComponent(() => import('../components/pay/index.vue')),
+    [ModalEnum.performance_information_buy_performance_extension]: defineAsyncComponent(() => import('../components/extension/index.vue')),
+    [ModalEnum.performance_information_buy_performance_breach_contract]: defineAsyncComponent(() => import('../components/breach_contract/index.vue')),
+    [ModalEnum.performance_information_buy_performance_detail]: defineAsyncComponent(() => import('../components/detail/index.vue')),
+    [ModalEnum.performance_information_buy_performance_settlement]: defineAsyncComponent(() => import('../components/settlement/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryPerformancePlanReq = {
+        buyorsell: 0,
+      };
+      queryTable(QueryPerformancePlan, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_performance_info_buy',
+      recordList: getRecordItemTab(),
+    };
+    function handleBtn(btnList: BtnListType[], record: WrPerformancePlan): BtnListType[] {
+      //  performancestatus: number;//履约状态 - 1:初始化 2:正常 3:处理错误 4:违约待处理 5:违约处理中 6:完成 7.违约已完成 8:释放冻结失败 9:超时待处理 1number;
+      const { curstepname, performancestatus } = record;
+      let result: ModalEnum[] = [];
+      if (performancestatus === 1) {
+        result = [ModalEnum.performance_information_buy_performance_breach_contract, ModalEnum.performance_information_buy_performance_settlement];
+      } else if (performancestatus === 2) {
+        if (curstepname === '买方支付') {
+          result = [ModalEnum.performance_information_buy_performance_pay, ModalEnum.performance_information_buy_performance_extension, ModalEnum.performance_information_buy_performance_breach_contract, ModalEnum.performance_information_buy_performance_detail];
+        } else if (curstepname === '货款溢短') {
+          result = [ModalEnum.performance_information_buy_performance_extension, ModalEnum.performance_information_buy_performance_breach_contract, ModalEnum.performance_information_buy_performance_detail];
+        } else if (curstepname === '卖方发票') {
+          result = [ModalEnum.performance_information_buy_performance_extension, ModalEnum.performance_information_buy_performance_breach_contract, ModalEnum.performance_information_buy_performance_detail];
         }
-        return {
-            ...handleComposeOrderTable<WrPerformancePlan>(param),
-            loading,
-            tableList,
-            getPerformanceTypeName,
-            getPerformanceStatusName,
-            getPaymentTypeName,
-            expandIcon,
-            handleBtn,
-            BuyOrSell,
-            getColums,
-            handleNoneValue,
-        };
-    },
+      }
+      return btnList.filter((e) => result.includes(e.code as ModalEnum));
+    }
+    return {
+      ...handleComposeOrderTable<WrPerformancePlan>(param),
+      loading,
+      tableList,
+      getPerformanceTypeName,
+      getPerformanceStatusName,
+      getPaymentTypeName,
+      expandIcon,
+      handleBtn,
+      BuyOrSell,
+      getColums,
+      handleNoneValue,
+    };
+  },
 });
 </script>
 

src/views/order/performance_information/components/performance_information_sell_performance/index.vue

@@ -1,57 +1,42 @@
 <template>
   <!-- 卖履约 -->
-  <section>
-    <a-table :columns="getColums(BuyOrSell.sell)"
-             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="handleBtn(btnList, record)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
-      <!-- 履约类型 -->
-      <template #performancetype="{ record }">
-        <a>{{ getPerformanceTypeName(record.performancetype, record.haswr)}}</a>
-      </template>
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table :columns="getColums(BuyOrSell.sell)" class="srcollYTable" :scroll="scroll" :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="handleBtn(btnList, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <!-- 履约类型 -->
+        <template #performancetype="{ record }">
+          <a>{{ getPerformanceTypeName(record.performancetype, record.haswr)}}</a>
+        </template>
 
-      <!-- 付款方式 -->
-      <template #paymenttype="{ record }">
-        <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
-      </template>
+        <!-- 付款方式 -->
+        <template #paymenttype="{ record }">
+          <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
+        </template>
 
-      <!-- 履约状态 -->
-      <template #performancestatus="{ record }">
-        <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
-      </template>
-      <template #activatemonth="{ text }">
-        <span>{{ handleNoneValue(text) }}</span>
-      </template>
+        <!-- 履约状态 -->
+        <template #performancestatus="{ record }">
+          <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
+        </template>
+        <template #activatemonth="{ text }">
+          <span>{{ handleNoneValue(text) }}</span>
+        </template>
 
-      <!-- 当前步骤 -->
-      <template #curstepname="{ record }">
-        <a>{{ record.curstepname }}</a>
-      </template>
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :buyOrSell="BuyOrSell.sell"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </section>
+        <!-- 当前步骤 -->
+        <template #curstepname="{ record }">
+          <a>{{ record.curstepname }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :buyOrSell="BuyOrSell.sell" :selectedRow="selectedRow" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -67,63 +52,64 @@ import { QueryPerformancePlanReq, WrPerformancePlan } from '@/services/go/wrtrad
 import { getColums } from '../setup';
 
 export default defineComponent({
-    name: enumOrderComponents.performance_information_sell_performance,
-    components: {
-        BtnList,
-        [ModalEnum.performance_information_sell_performance_pay]: defineAsyncComponent(() => import('../components/pay/index.vue')),
-        [ModalEnum.performance_information_sell_performance_extension]: defineAsyncComponent(() => import('../components/extension/index.vue')),
-        [ModalEnum.performance_information_sell_performance_breach_contract]: defineAsyncComponent(() => import('../components/breach_contract/index.vue')),
-        [ModalEnum.performance_information_sell_performance_detail]: defineAsyncComponent(() => import('../components/detail/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryPerformancePlanReq = {
-                buyorsell: 1,
-            };
-            queryTable(QueryPerformancePlan, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_performance_info_sale',
-            recordList: getRecordItemTab(),
-        };
-        function handleBtn(btnList: BtnListType[], record: WrPerformancePlan): BtnListType[] {
-            //  performancestatus: number;//履约状态 - 1:初始化 2:正常 3:处理错误 4:违约待处理 5:违约处理中 6:完成 7.违约已完成 8:释放冻结失败 9:超时待处理 1number;
-            const { curstepname, performancestatus } = record;
-            let result: ModalEnum[] = [];
-            if (performancestatus === 1) {
-                result = [ModalEnum.performance_information_sell_performance_breach_contract];
-            } else if (performancestatus === 2) {
-                if (curstepname === '卖方发货') {
-                    result = [ModalEnum.performance_information_sell_performance_extension, ModalEnum.performance_information_sell_performance_breach_contract, ModalEnum.performance_information_sell_performance_detail];
-                } else if (curstepname === '买方支付') {
-                    result = [ModalEnum.performance_information_sell_performance_extension, ModalEnum.performance_information_sell_performance_breach_contract, ModalEnum.performance_information_sell_performance_detail];
-                } else if (curstepname === '卖方发票') {
-                    result = [ModalEnum.performance_information_sell_performance_extension, ModalEnum.performance_information_sell_performance_breach_contract, ModalEnum.performance_information_sell_performance_detail];
-                } else if (curstepname === '仓单转移') {
-                    result = [ModalEnum.performance_information_sell_performance_extension, ModalEnum.performance_information_sell_performance_breach_contract, ModalEnum.performance_information_sell_performance_detail];
-                }
-            }
-            return btnList.filter((e) => result.includes(e.code as ModalEnum));
+  name: enumOrderComponents.performance_information_sell_performance,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.performance_information_sell_performance_pay]: defineAsyncComponent(() => import('../components/pay/index.vue')),
+    [ModalEnum.performance_information_sell_performance_extension]: defineAsyncComponent(() => import('../components/extension/index.vue')),
+    [ModalEnum.performance_information_sell_performance_breach_contract]: defineAsyncComponent(() => import('../components/breach_contract/index.vue')),
+    [ModalEnum.performance_information_sell_performance_detail]: defineAsyncComponent(() => import('../components/detail/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryPerformancePlanReq = {
+        buyorsell: 1,
+      };
+      queryTable(QueryPerformancePlan, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_performance_info_sale',
+      recordList: getRecordItemTab(),
+    };
+    function handleBtn(btnList: BtnListType[], record: WrPerformancePlan): BtnListType[] {
+      //  performancestatus: number;//履约状态 - 1:初始化 2:正常 3:处理错误 4:违约待处理 5:违约处理中 6:完成 7.违约已完成 8:释放冻结失败 9:超时待处理 1number;
+      const { curstepname, performancestatus } = record;
+      let result: ModalEnum[] = [];
+      if (performancestatus === 1) {
+        result = [ModalEnum.performance_information_sell_performance_breach_contract];
+      } else if (performancestatus === 2) {
+        if (curstepname === '卖方发货') {
+          result = [ModalEnum.performance_information_sell_performance_extension, ModalEnum.performance_information_sell_performance_breach_contract, ModalEnum.performance_information_sell_performance_detail];
+        } else if (curstepname === '买方支付') {
+          result = [ModalEnum.performance_information_sell_performance_extension, ModalEnum.performance_information_sell_performance_breach_contract, ModalEnum.performance_information_sell_performance_detail];
+        } else if (curstepname === '卖方发票') {
+          result = [ModalEnum.performance_information_sell_performance_extension, ModalEnum.performance_information_sell_performance_breach_contract, ModalEnum.performance_information_sell_performance_detail];
+        } else if (curstepname === '仓单转移') {
+          result = [ModalEnum.performance_information_sell_performance_extension, ModalEnum.performance_information_sell_performance_breach_contract, ModalEnum.performance_information_sell_performance_detail];
         }
-        return {
-            ...handleComposeOrderTable<WrPerformancePlan>(param),
-            loading,
-            tableList,
-            getPerformanceTypeName,
-            getPaymentTypeName,
-            getPerformanceStatusName,
-            expandIcon,
-            handleBtn,
-            BuyOrSell,
-            getColums,
-            handleNoneValue,
-        };
-    },
+      }
+      return btnList.filter((e) => result.includes(e.code as ModalEnum));
+    }
+    return {
+      ...handleComposeOrderTable<WrPerformancePlan>(param),
+      loading,
+      tableList,
+      getPerformanceTypeName,
+      getPaymentTypeName,
+      getPerformanceStatusName,
+      expandIcon,
+      handleBtn,
+      BuyOrSell,
+      getColums,
+      handleNoneValue,
+    };
+  },
 });
 </script>
 

src/views/order/performance_information/index.vue

@@ -1,12 +1,9 @@
 <template>
   <!-- 履约信息 -->
   <section class="performance_information">
-    <component :is="componentId"
-               v-if="componentId">
+    <component :is="componentId" v-if="componentId">
     </component>
-    <thirdMenu :list="tabList"
-               @selectMenu="changeTab"
-               :value="'title'"></thirdMenu>
+    <thirdMenu :list="tabList" @selectMenu="changeTab" :value="'title'"></thirdMenu>
   </section>
 </template>
 
@@ -16,17 +13,14 @@ import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import thirdMenu from '@/common/components/thirdMenu/index.vue';
 import { handleOrderDetailList } from '@/common/setup/order/orderData';
 export default defineComponent({
-    name: enumOrderComponents.performance_information,
-    components: {
-        thirdMenu,
-        [enumOrderComponents.performance_information_buy_performance]: defineAsyncComponent(() => import('./components/performance_information_buy_performance/index.vue')),
-        [enumOrderComponents.performance_information_sell_performance]: defineAsyncComponent(() => import('./components/performance_information_sell_performance/index.vue')),
-    },
-    setup() {
-        return { ...handleOrderDetailList(enumOrderComponents.performance_information) };
-    },
+  name: enumOrderComponents.performance_information,
+  components: {
+    thirdMenu,
+    [enumOrderComponents.performance_information_buy_performance]: defineAsyncComponent(() => import('./components/performance_information_buy_performance/index.vue')),
+    [enumOrderComponents.performance_information_sell_performance]: defineAsyncComponent(() => import('./components/performance_information_sell_performance/index.vue')),
+  },
+  setup() {
+    return { ...handleOrderDetailList(enumOrderComponents.performance_information) };
+  },
 });
-</script>
-
-<style lang="less">
-</style>;
+</script>

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

@@ -1,59 +1,46 @@
 <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 #wrtradeorderstatus="{ record }">
+  <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="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 #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>
-      <template #marginvalue="{ text }">
-        <span>{{ (text * 100).toFixed(2) }}%</span>
-      </template>
-      <!-- 挂牌价格 -->
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </section>
+        <!-- 挂牌类型 -->
+        <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>
+        <template #marginvalue="{ text }">
+          <span>{{ (text * 100).toFixed(2) }}%</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 { getBarmaginApplyStatus, getWrOrderTypeName, getWrTradeOrderStatusName } from '@/common/constants/enumsName';
 import { BtnList, defineAsyncComponent, defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -69,69 +56,70 @@ import Bus from '@/utils/eventBus';
 import { getSpotWarrantBargainColumns } from './setup';
 
 export default defineComponent({
-    name: enumOrderComponents.pre_sale_warehouse_receipt_bargain,
-    components: {
-        BtnList,
-        pre_sale_warehouse_receipt_bargain_detail: defineAsyncComponent(() => import('./components/bargain_detail/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<QueryWrTradeBargainApplyQsp>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrTradeBargainApplyReq = {
-                userid: getUserId(),
-                haswr: 0,
-            };
-            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,
-        };
-    },
+  name: enumOrderComponents.pre_sale_warehouse_receipt_bargain,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    pre_sale_warehouse_receipt_bargain_detail: defineAsyncComponent(() => import('./components/bargain_detail/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<QueryWrTradeBargainApplyQsp>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrTradeBargainApplyReq = {
+        userid: getUserId(),
+        haswr: 0,
+      };
+      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,
+    };
+  },
 });
 </script>
 

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

@@ -1,42 +1,28 @@
 <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="btnList"
-                 class="btn-list-sticky"
-                 :record="record"
-                 @click="openComponent" />
-      </template>
-      <!-- 成交金额 -->
-      <template #amount="{ record }">
-        <a>{{ (record.tradeqty * record.tradeprice).toFixed(2) }}</a>
-      </template>
-      <!-- 挂牌类型 -->
-      <template #wrtradetype="{ record }">
-        <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
-      </template>
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :tableName="tableName"
-               :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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" class="btn-list-sticky" :record="record" @click="openComponent" />
+        </template>
+        <!-- 成交金额 -->
+        <template #amount="{ record }">
+          <a>{{ (record.tradeqty * record.tradeprice).toFixed(2) }}</a>
+        </template>
+        <!-- 挂牌类型 -->
+        <template #wrtradetype="{ record }">
+          <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :tableName="tableName" :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 } from '@/common/export/commonTable';
 import { queryWrTradeDetail } from '@/services/go/wrtrade';
@@ -49,37 +35,38 @@ import { getWrOrderTypeName } from '@/common/constants/enumsName';
 import { TableKey } from '@/common/methods/table/interface';
 
 export default defineComponent({
-    name: enumOrderComponents.pre_sale_warehouse_receipt_deal,
-    components: {
-        BtnList,
-        pre_sale_warehouse_receipt_deal_detail: defineAsyncComponent(() => import('./components/pre_sale_warehouse_receipt_deal_detail/index.vue')),
-    },
-    setup() {
-        const tableName: keyof TableKey = 'table_pcweb_spot_trade_bottom_pre_sale_make_deal';
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrSpecialMatchOrder>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrSpecialMatchOrderReq = {
-                haswr: 0,
-            };
-            queryTable(queryWrTradeDetail, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            tableName,
-            queryFn: queryTableAction,
-            recordList: getRecordItemTab(),
-        };
-        return {
-            ...handleComposeOrderTable<WrSpecialMatchOrder>(param),
-            loading,
-            tableName,
-            tableList,
-            expandIcon,
-            getWrOrderTypeName,
-        };
-    },
+  name: enumOrderComponents.pre_sale_warehouse_receipt_deal,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    pre_sale_warehouse_receipt_deal_detail: defineAsyncComponent(() => import('./components/pre_sale_warehouse_receipt_deal_detail/index.vue')),
+  },
+  setup() {
+    const tableName: keyof TableKey = 'table_pcweb_spot_trade_bottom_pre_sale_make_deal';
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrSpecialMatchOrder>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrSpecialMatchOrderReq = {
+        haswr: 0,
+      };
+      queryTable(queryWrTradeDetail, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      tableName,
+      queryFn: queryTableAction,
+      recordList: getRecordItemTab(),
+    };
+    return {
+      ...handleComposeOrderTable<WrSpecialMatchOrder>(param),
+      loading,
+      tableName,
+      tableList,
+      expandIcon,
+      getWrOrderTypeName,
+    };
+  },
 });
 </script>
 

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

@@ -1,75 +1,57 @@
 <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="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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #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">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
-import { queryTableList, BtnList, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
-import { queryWrSpecialMatchOrder, queryWrTradeDetail } from '@/services/go/wrtrade';
+import { queryTableList, BtnList, defineComponent } from '@/common/export/commonTable';
+import { queryWrTradeDetail } from '@/services/go/wrtrade';
 import { QueryWrSpecialMatchOrderReq, WrSpecialMatchOrder } from '@/services/go/wrtrade/interface';
 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';
 export default defineComponent({
-    name: enumOrderComponents.pre_sale_warehouse_receipt_designated_deal,
-    components: {
-        BtnList,
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrSpecialMatchOrder>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrSpecialMatchOrderReq = {
-                haswr: 0,
-            };
-            queryTable(queryWrTradeDetail, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_pre_sale_make_deal',
-            recordList: getRecordItemTab(),
-        };
-        return {
-            ...handleComposeOrderTable<WrSpecialMatchOrder>(param),
-            loading,
-            tableList,
-            expandIcon,
-        };
-    },
+  name: enumOrderComponents.pre_sale_warehouse_receipt_designated_deal,
+  components: {
+    MtpTableScroll,
+    BtnList,
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrSpecialMatchOrder>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrSpecialMatchOrderReq = {
+        haswr: 0,
+      };
+      queryTable(queryWrTradeDetail, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_pre_sale_make_deal',
+      recordList: getRecordItemTab(),
+    };
+    return {
+      ...handleComposeOrderTable<WrSpecialMatchOrder>(param),
+      loading,
+      tableList,
+      expandIcon,
+    };
+  },
 });
 </script>
 

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

@@ -1,40 +1,20 @@
 <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="btnList"
-                    class="btn-list-sticky"
-                    :record="record"
-                    @click="openComponent"
-                    v-if="record.creditenableqty > 0"
-                />
-            </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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" class="btn-list-sticky" :record="record" @click="openComponent" v-if="record.creditenableqty > 0" />
+        </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 { queryWrPosition } from '@/services/go/wrtrade';
@@ -44,35 +24,36 @@ import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
 export default defineComponent({
-    name: enumOrderComponents.pre_sale_warehouse_receipt_order_summary,
-    components: {
-        BtnList,
-        [ModalEnum.pre_sale_warehouse_receipt_order_summary_listed]: defineAsyncComponent(() => import('./components/listed/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrPosition>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrPositionReq = {
-                haswr: 0,
-                querytype: 2,
-            };
-            queryTable(queryWrPosition, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_pre_sale_order_summary',
-            recordList: getRecordItemTab(),
-        };
-        return {
-            ...handleComposeOrderTable<WrPosition>(param),
-            loading,
-            tableList,
-            expandIcon,
-        };
-    },
+  name: enumOrderComponents.pre_sale_warehouse_receipt_order_summary,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.pre_sale_warehouse_receipt_order_summary_listed]: defineAsyncComponent(() => import('./components/listed/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrPosition>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrPositionReq = {
+        haswr: 0,
+        querytype: 2,
+      };
+      queryTable(queryWrPosition, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_pre_sale_order_summary',
+      recordList: getRecordItemTab(),
+    };
+    return {
+      ...handleComposeOrderTable<WrPosition>(param),
+      loading,
+      tableList,
+      expandIcon,
+    };
+  },
 });
 </script>
 

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

@@ -1,48 +1,36 @@
 <template>
   <!-- 仓单预售 挂单 -->
-  <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)"
-               class="btn-list-sticky"
-               :record="record"
-               @click="openComponent" />
+  <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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <BtnList :btnList="filterBtnList(btnList, record)" class="btn-list-sticky" :record="record" @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>
-    <!--  委托状态-->
-    <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>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :isMy="false" @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 { queryWrOrderDetail } from '@/services/go/wrtrade';
@@ -57,58 +45,59 @@ import Bus from '@/utils/eventBus';
 import { useOrderWarrant } from '@/views/order/setup';
 
 export default defineComponent({
-    name: enumOrderComponents.pre_sale_warehouse_receipt_pending_order,
-    components: {
-        BtnList,
-        [ModalEnum.pre_sale_warehouse_receipt_pending_order_cancel_order]: defineAsyncComponent(() => import('./components/cancle/index.vue')),
-        detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
-        pre_sale_warehouse_receipt_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: 0,
-            };
-            queryTable(queryWrOrderDetail, param);
-        };
-        Bus.$on('blocsTrade', () => {
-            queryTableAction();
-        });
-        const { tableColumns, getWrPriceType, isShowBarginBtn, showPriceOrMove } = useOrderWarrant(0);
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            recordList: getRecordItemTab(),
-            isDetail: true,
-        };
-        function filterBtnList(list: BtnListType[], record: WrOrderDetail) {
-            if (!isShowBarginBtn(record)) {
-                list = list.filter((e) => e.code !== 'pre_sale_warehouse_receipt_pending_order_bargain_order');
-            }
-            //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;
-            const arr = [3, 7];
-            if (!arr.includes(record.wrtradeorderstatus)) {
-                return list.filter((e) => e.code !== ModalEnum.pre_sale_warehouse_receipt_pending_order_cancel_order);
-            } else {
-                return list;
-            }
-        }
-        return {
-            ...handleComposeOrderTable<WrOrderDetail>(param),
-            filterBtnList,
-            loading,
-            tableList,
-            expandIcon,
-            getOrderStatusName,
-            getWrOrderTypeName,
-            tableColumns,
-            getWrPriceType,
-            showPriceOrMove,
-        };
-    },
+  name: enumOrderComponents.pre_sale_warehouse_receipt_pending_order,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.pre_sale_warehouse_receipt_pending_order_cancel_order]: defineAsyncComponent(() => import('./components/cancle/index.vue')),
+    detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
+    pre_sale_warehouse_receipt_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: 0,
+      };
+      queryTable(queryWrOrderDetail, param);
+    };
+    Bus.$on('blocsTrade', () => {
+      queryTableAction();
+    });
+    const { tableColumns, getWrPriceType, isShowBarginBtn, showPriceOrMove } = useOrderWarrant(0);
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      recordList: getRecordItemTab(),
+      isDetail: true,
+    };
+    function filterBtnList(list: BtnListType[], record: WrOrderDetail) {
+      if (!isShowBarginBtn(record)) {
+        list = list.filter((e) => e.code !== 'pre_sale_warehouse_receipt_pending_order_bargain_order');
+      }
+      //委托状态 - 1:委托请求 2:待冻结 3:委托成功 4:委托失败 5:配对成功 6:已撤 7:已成 8:成交失败 9:委托拒绝 1number;
+      const arr = [3, 7];
+      if (!arr.includes(record.wrtradeorderstatus)) {
+        return list.filter((e) => e.code !== ModalEnum.pre_sale_warehouse_receipt_pending_order_cancel_order);
+      } else {
+        return list;
+      }
+    }
+    return {
+      ...handleComposeOrderTable<WrOrderDetail>(param),
+      filterBtnList,
+      loading,
+      tableList,
+      expandIcon,
+      getOrderStatusName,
+      getWrOrderTypeName,
+      tableColumns,
+      getWrPriceType,
+      showPriceOrMove,
+    };
+  },
 });
 </script>
 

src/views/order/pre_sale_warehouse_receipt/index.vue

@@ -29,7 +29,4 @@ export default defineComponent({
         return { ...handleOrderDetailList(enumOrderComponents.pre_sale_warehouse_receipt) };
     },
 });
-</script>
-
-<style lang="less">
-</style>;
+</script>

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

@@ -1,68 +1,54 @@
 <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" :scroll="scroll" :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 #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 { queryTableList, BtnList, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
+import { queryQueryWrTradeBargainApply } from '@/services/go/wrtrade';
+import { QueryWrTradeBargainApplyQsp, QueryWrTradeBargainApplyReq } from '@/services/go/wrtrade/interface';
 import { getRecordItemTab } from '@/common/setup/order/orderData';
 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';
@@ -70,70 +56,71 @@ import { getUserId } from '@/services/bus/account';
 import Bus from '@/utils/eventBus';
 
 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: {
+    MtpTableScroll,
+    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();
+    });
 
-        // 表格通用逻辑
-        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_deal/index.vue

@@ -1,44 +1,30 @@
 <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="btnList"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
+  <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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
 
-      <!-- 成交金额 -->
-      <template #amount="{ record }">
-        <a>{{ (record.tradeqty * record.tradeprice).toFixed(2) }}</a>
-      </template>
+        <!-- 成交金额 -->
+        <template #amount="{ record }">
+          <a>{{ (record.tradeqty * record.tradeprice).toFixed(2) }}</a>
+        </template>
 
-      <!-- 挂牌类型 -->
-      <template #wrtradetype="{ record }">
-        <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
-      </template>
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :tableName="tableName"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </section>
+        <!-- 挂牌类型 -->
+        <template #wrtradetype="{ record }">
+          <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :tableName="tableName" :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 } from '@/common/export/commonTable';
 import { queryWrTradeDetail } from '@/services/go/wrtrade';
@@ -51,56 +37,57 @@ import { getWrOrderTypeName } from '@/common/constants/enumsName';
 import { TableKey } from '@/common/methods/table/interface';
 
 export default defineComponent({
-    name: enumOrderComponents.spot_warrant_deal,
-    components: {
-        BtnList,
-        spot_warrant_deal_detail: defineAsyncComponent(() => import('./components/spot_warrant_deal_detail/index.vue')),
-    },
-    setup() {
-        const tableName: keyof TableKey = 'table_pcweb_spot_trade_bottom_spot_warrant_deal';
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrSpecialMatchOrder>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrSpecialMatchOrderReq = {
-                haswr: 1,
-            };
-            queryTable(queryWrTradeDetail, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            tableName,
-            queryFn: queryTableAction,
-            recordList: getRecordItemTab(),
-        };
-        //仓单贸易类型 - 1:挂牌 2:摘牌 3:提货卖(文化中国) 4:提货买(文化中国)
-        function getType(type: number) {
-            let result = '--';
-            switch (type) {
-                case 1:
-                    result = '挂牌';
-                    break;
-                case 2:
-                    result = '摘牌';
-                    break;
-                case 3:
-                    result = '提货卖';
-                    break;
-                case 4:
-                    result = '提货买';
-                    break;
-            }
-            return result;
-        }
-        return {
-            ...handleComposeOrderTable<WrSpecialMatchOrder>(param),
-            loading,
-            tableName,
-            tableList,
-            expandIcon,
-            getWrOrderTypeName,
-        };
-    },
+  name: enumOrderComponents.spot_warrant_deal,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    spot_warrant_deal_detail: defineAsyncComponent(() => import('./components/spot_warrant_deal_detail/index.vue')),
+  },
+  setup() {
+    const tableName: keyof TableKey = 'table_pcweb_spot_trade_bottom_spot_warrant_deal';
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrSpecialMatchOrder>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrSpecialMatchOrderReq = {
+        haswr: 1,
+      };
+      queryTable(queryWrTradeDetail, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      tableName,
+      queryFn: queryTableAction,
+      recordList: getRecordItemTab(),
+    };
+    //仓单贸易类型 - 1:挂牌 2:摘牌 3:提货卖(文化中国) 4:提货买(文化中国)
+    function getType(type: number) {
+      let result = '--';
+      switch (type) {
+        case 1:
+          result = '挂牌';
+          break;
+        case 2:
+          result = '摘牌';
+          break;
+        case 3:
+          result = '提货卖';
+          break;
+        case 4:
+          result = '提货买';
+          break;
+      }
+      return result;
+    }
+    return {
+      ...handleComposeOrderTable<WrSpecialMatchOrder>(param),
+      loading,
+      tableName,
+      tableList,
+      expandIcon,
+      getWrOrderTypeName,
+    };
+  },
 });
 </script>
 

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

@@ -1,36 +1,23 @@
 <template>
   <!-- 指定成交 -->
-  <section>
-    <a-table :columns="columns"
-             class="srcollYTable"
-             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             :expandIcon="expandIcon"
-             :expandIconAsCell="false"
-             rowKey="key"
-             :data-source="tableList">
-      <!-- 额外的展开行 -->
-      <template #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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #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">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
-import { queryTableList, BtnList, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
-import { queryWrSpecialMatchOrder, queryWrTradeDetail } from '@/services/go/wrtrade';
+import { queryTableList, BtnList, defineComponent } from '@/common/export/commonTable';
+import { queryWrSpecialMatchOrder } from '@/services/go/wrtrade';
 import { QueryWrSpecialMatchOrderReq, WrSpecialMatchOrder } from '@/services/go/wrtrade/interface';
 import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
@@ -38,33 +25,34 @@ import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
 
 export default defineComponent({
-    name: enumOrderComponents.spot_warrant_designated_deal,
-    components: {
-        BtnList,
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrSpecialMatchOrder>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrSpecialMatchOrderReq = {
-                haswr: 1,
-            };
-            queryTable(queryWrSpecialMatchOrder, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_designated_deal',
-            recordList: getRecordItemTab(),
-        };
-        return {
-            ...handleComposeOrderTable<WrSpecialMatchOrder>(param),
-            loading,
-            tableList,
-            expandIcon,
-        };
-    },
+  name: enumOrderComponents.spot_warrant_designated_deal,
+  components: {
+    MtpTableScroll,
+    BtnList,
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrSpecialMatchOrder>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrSpecialMatchOrderReq = {
+        haswr: 1,
+      };
+      queryTable(queryWrSpecialMatchOrder, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_designated_deal',
+      recordList: getRecordItemTab(),
+    };
+    return {
+      ...handleComposeOrderTable<WrSpecialMatchOrder>(param),
+      loading,
+      tableList,
+      expandIcon,
+    };
+  },
 });
 </script>
 

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

@@ -1,46 +1,33 @@
 <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="handleBtnList(btnList, record)"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent" />
-      </template>
+  <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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <BtnList :btnList="handleBtnList(btnList, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
 
-      <!-- applytype 类型-->
-      <template #applytype="{ record }">
-        <span>{{ getPickUpStatusName(record.applytype) }}</span>
-      </template>
-      <template #expresscompany="{ record, text }">
-        <span>{{ (text && text !== '--') ? text +  record.expressnum : '--' }}</span>
-      </template>
+        <!-- applytype 类型-->
+        <template #applytype="{ record }">
+          <span>{{ getPickUpStatusName(record.applytype) }}</span>
+        </template>
+        <template #expresscompany="{ record, text }">
+          <span>{{ (text && text !== '--') ? text +  record.expressnum : '--' }}</span>
+        </template>
 
-      <!-- applystatus 状态 -->
-      <template #applystatus="{ record }">
-        <span>{{ getPickUpTypeName(record.applystatus) }}</span>
-      </template>
-    </a-table>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </section>
+        <!-- applystatus 状态 -->
+        <template #applystatus="{ record }">
+          <span>{{ getPickUpTypeName(record.applystatus) }}</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 { queryWrOutInApply } from '@/services/go/wrtrade';
@@ -53,45 +40,46 @@ import { BtnListType } from '@/common/components/btnList/interface';
 import { getPickUpStatusName, getPickUpTypeName } from '@/common/constants/enumsName';
 
 export default defineComponent({
-    name: enumOrderComponents.spot_warrant_in_and_out_warehouse,
-    components: {
-        BtnList,
-        [ModalEnum.spot_warrant_in_and_out_warehouse_sure_pick_up]: defineAsyncComponent(() => import('./components/pick_up/index.vue')),
-        [ModalEnum.spot_warrant_in_and_out_warehouse_revoke]: defineAsyncComponent(() => import('./components/cancel/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrOutInApply>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            queryTable(queryWrOutInApply);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_pick_up',
-            recordList: getRecordItemTab(),
-        };
-        function handleBtnList(btnList: BtnListType[], item: WrOutInApply) {
-            const { applystatus, applytype } = item;
-            if (applystatus === 0 && applytype === 4) {
-                return btnList.filter((e) => e.code === ModalEnum.spot_warrant_in_and_out_warehouse_sure_pick_up);
-            } else if (applystatus === 1 && applytype === 2) {
-                return btnList.filter((e) => e.code === ModalEnum.spot_warrant_in_and_out_warehouse_revoke);
-            } else {
-                return [];
-            }
-        }
-        return {
-            ...handleComposeOrderTable<WrOutInApply>(param),
-            loading,
-            tableList,
-            expandIcon,
-            handleBtnList,
-            getPickUpStatusName,
-            getPickUpTypeName,
-        };
-    },
+  name: enumOrderComponents.spot_warrant_in_and_out_warehouse,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.spot_warrant_in_and_out_warehouse_sure_pick_up]: defineAsyncComponent(() => import('./components/pick_up/index.vue')),
+    [ModalEnum.spot_warrant_in_and_out_warehouse_revoke]: defineAsyncComponent(() => import('./components/cancel/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrOutInApply>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      queryTable(queryWrOutInApply);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_pick_up',
+      recordList: getRecordItemTab(),
+    };
+    function handleBtnList(btnList: BtnListType[], item: WrOutInApply) {
+      const { applystatus, applytype } = item;
+      if (applystatus === 0 && applytype === 4) {
+        return btnList.filter((e) => e.code === ModalEnum.spot_warrant_in_and_out_warehouse_sure_pick_up);
+      } else if (applystatus === 1 && applytype === 2) {
+        return btnList.filter((e) => e.code === ModalEnum.spot_warrant_in_and_out_warehouse_revoke);
+      } else {
+        return [];
+      }
+    }
+    return {
+      ...handleComposeOrderTable<WrOutInApply>(param),
+      loading,
+      tableList,
+      expandIcon,
+      handleBtnList,
+      getPickUpStatusName,
+      getPickUpTypeName,
+    };
+  },
 });
 </script>
 

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

@@ -1,78 +1,60 @@
 <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="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>
+    </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 } from '@/common/export/commonTable';
+import { queryTableList, BtnList, defineComponent } from '@/common/export/commonTable';
 import { queryWrPosition } from '@/services/go/wrtrade';
-import { QueryWrPositionReq, WrHoldLB, WrPosition } from '@/services/go/wrtrade/interface';
+import { QueryWrPositionReq, WrHoldLB } from '@/services/go/wrtrade/interface';
 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';
 
 export default defineComponent({
-    name: enumOrderComponents.spot_warrant_inventory_summary,
-    components: {
-        BtnList,
-        // [ModalEnum.spot_warrant_inventory_summary_listed]: defineAsyncComponent(() => import('./components/listing/index.vue')),
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrHoldLB>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrPositionReq = {
-                haswr: 1,
-                querytype: 2,
-            };
-            queryTable(queryWrPosition, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_inventory_summary',
-            recordList: getRecordItemTab(),
-        };
-        return {
-            ...handleComposeOrderTable<WrHoldLB>(param),
-            loading,
-            tableList,
-            expandIcon,
-        };
-    },
+  name: enumOrderComponents.spot_warrant_inventory_summary,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    // [ModalEnum.spot_warrant_inventory_summary_listed]: defineAsyncComponent(() => import('./components/listing/index.vue')),
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrHoldLB>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrPositionReq = {
+        haswr: 1,
+        querytype: 2,
+      };
+      queryTable(queryWrPosition, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_inventory_summary',
+      recordList: getRecordItemTab(),
+    };
+    return {
+      ...handleComposeOrderTable<WrHoldLB>(param),
+      loading,
+      tableList,
+      expandIcon,
+    };
+  },
 });
 </script>
 

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

@@ -1,51 +1,37 @@
 <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="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>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :isMy="false" @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 { queryWrOrderDetail } from '@/services/go/wrtrade';
@@ -60,59 +46,60 @@ import Bus from '@/utils/eventBus';
 import { useOrderWarrant } from '@/views/order/setup';
 
 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: {
+    MtpTableScroll,
+    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();
+    });
 
-        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/index.vue

@@ -1,34 +1,20 @@
 <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="btnList"
-                 :record="record"
-                 class="btn-list-sticky"
-                 @click="openComponent"
-                 v-if="record.enableqty > 0" />
-      </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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" :record="record" class="btn-list-sticky" @click="openComponent" v-if="record.enableqty > 0" />
+        </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 { BtnList, defineAsyncComponent, defineComponent, ModalEnum, queryTableList } from '@/common/export/commonTable';
 import { getRecordItemTab } from '@/common/setup/order/orderData';
@@ -38,32 +24,33 @@ import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { queryHoldLB } from '@/services/go/wrtrade';
 import { WrHoldLB } from '@/services/go/wrtrade/interface';
 export default defineComponent({
-    name: enumOrderComponents.spot_warrant_spot_details,
-    components: {
-        BtnList,
-        [ModalEnum.spot_warrant_spot_details_listed]: defineAsyncComponent(() => import('./components/listing/index.vue')), // 挂牌
-        [ModalEnum.spot_warrant_spot_details_pick_up]: defineAsyncComponent(() => import('./components/pick_up/index.vue')), // 摘牌
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrHoldLB>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            queryTable(queryHoldLB);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_spot_detail',
-            recordList: getRecordItemTab(),
-        };
-        return {
-            ...handleComposeOrderTable<WrHoldLB>(param),
-            loading,
-            tableList,
-            expandIcon,
-        };
-    },
+  name: enumOrderComponents.spot_warrant_spot_details,
+  components: {
+    MtpTableScroll,
+    BtnList,
+    [ModalEnum.spot_warrant_spot_details_listed]: defineAsyncComponent(() => import('./components/listing/index.vue')), // 挂牌
+    [ModalEnum.spot_warrant_spot_details_pick_up]: defineAsyncComponent(() => import('./components/pick_up/index.vue')), // 摘牌
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrHoldLB>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      queryTable(queryHoldLB);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_spot_detail',
+      recordList: getRecordItemTab(),
+    };
+    return {
+      ...handleComposeOrderTable<WrHoldLB>(param),
+      loading,
+      tableList,
+      expandIcon,
+    };
+  },
 });
 </script>
 

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

@@ -1,41 +1,22 @@
 <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="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>
+    </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 } from '@/common/export/commonTable';
+import { queryTableList, BtnList, defineComponent } from '@/common/export/commonTable';
 import { queryWrPosition } from '@/services/go/wrtrade';
 import { QueryWrPositionReq, WrPosition } from '@/services/go/wrtrade/interface';
 import { getRecordItemTab } from '@/common/setup/order/orderData';
@@ -43,34 +24,35 @@ import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
 import { expandIcon } from '@/common/setup/table/clolumn';
 export default defineComponent({
-    name: enumOrderComponents.spot_warrant_spot_summary,
-    components: {
-        BtnList,
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrPosition>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryWrPositionReq = {
-                haswr: 1,
-                querytype: 1,
-            };
-            queryTable(queryWrPosition, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_spot_summary',
-            recordList: getRecordItemTab(),
-        };
-        return {
-            ...handleComposeOrderTable<WrPosition>(param),
-            loading,
-            tableList,
-            expandIcon,
-        };
-    },
+  name: enumOrderComponents.spot_warrant_spot_summary,
+  components: {
+    MtpTableScroll,
+    BtnList,
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrPosition>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryWrPositionReq = {
+        haswr: 1,
+        querytype: 1,
+      };
+      queryTable(queryWrPosition, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_spot_warrant_spot_summary',
+      recordList: getRecordItemTab(),
+    };
+    return {
+      ...handleComposeOrderTable<WrPosition>(param),
+      loading,
+      tableList,
+      expandIcon,
+    };
+  },
 });
 </script>
 

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

@@ -1,66 +1,42 @@
 <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="handleBtnList(record, btnList)"
-          :record="record"
-          class="btn-list-sticky"
-          @click="openComponent"
-        />
-      </template>
-      <template #applytime="{ text }">
-        <span>{{ formatTime(text) }}</span>
-      </template>
-      <template #transferamount="{ record, text }">
-        <div>
-          <!-- 审核拒绝 -->
-          <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" />
-          </a-tooltip>
-          <span v-else>{{ record.transferamount }}</span>
-        </div>
-      </template>
-      <template #buyorsell="{ text }">
-        <span>{{ getBuyOrSellName(text) }}</span>
-      </template>
-      <template #applystatus="{ text }">
-        <span>{{ getScfContractStatusName(text) }}</span>
-      </template>
-    </a-table>
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :selectedRow="selectedRow"
-      :tableList="tableList"
-      @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="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>
+        <template #applytime="{ text }">
+          <span>{{ formatTime(text) }}</span>
+        </template>
+        <template #transferamount="{ record, text }">
+          <div>
+            <!-- 审核拒绝 -->
+            <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" />
+            </a-tooltip>
+            <span v-else>{{ record.transferamount }}</span>
+          </div>
+        </template>
+        <template #buyorsell="{ text }">
+          <span>{{ getBuyOrSellName(text) }}</span>
+        </template>
+        <template #applystatus="{ text }">
+          <span>{{ getScfContractStatusName(text) }}</span>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :tableList="tableList" @cancel="closeComponent"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { ApplyType } from '@/common/constants/enumCommon';
 import { getBuyOrSellName, getScfContractStatusName } from '@/common/constants/enumsName';
@@ -84,6 +60,7 @@ export default defineComponent({
   name: 'commodity_contract_bargain',
   components: {
     ExclamationCircleOutlined,
+    MtpTableScroll,
     BtnList,
     swap_commodity_contract_bargain_submit_order: defineAsyncComponent(() => import('./components/commodity_contract_bargain_submit_order/index.vue')),
     swap_commodity_contract_bargain_cancel_order: defineAsyncComponent(() => import('./components/commodity_contract_bargain_cancel_order/index.vue')),

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

@@ -1,51 +1,32 @@
 <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="filterBtnList(btnList, record)"
-          :record="record"
-          class="btn-list-sticky"
-          @click="openComponent"
-        />
-      </template>
-      <!-- 类型 -->
-      <template #buildtype="{ record }">
-        <a>{{ getBuyOrSellTypeName(record.buyorsell) }}</a>
-      </template>
-      <!-- 状态 -->
-      <template #orderstatus="{ record }">
-        <a>{{ getOrderStatusName(record.orderstatus) }}</a>
-      </template>
+  <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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="filterBtnList(btnList, record)" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <!-- 类型 -->
+        <template #buildtype="{ record }">
+          <a>{{ getBuyOrSellTypeName(record.buyorsell) }}</a>
+        </template>
+        <!-- 状态 -->
+        <template #orderstatus="{ record }">
+          <a>{{ getOrderStatusName(record.orderstatus) }}</a>
+        </template>
 
-      <template #ordertime="{ text }">
-        <a>{{ formatTime(text) }}</a>
-      </template>
-    </a-table>
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :selectedRow="selectedRow"
-      @cancel="closeComponent"
-    ></component>
-  </section>
+        <template #ordertime="{ text }">
+          <a>{{ formatTime(text) }}</a>
+        </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 { BtnListType } from '@/common/components/btnList/interface';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -64,6 +45,7 @@ import Bus from '@/utils/eventBus/index';
 export default defineComponent({
   name: enumOrderComponents.commodity_contract_commission,
   components: {
+    MtpTableScroll,
     BtnList,
     swap_commodity_contract_commission_cancel_order: defineAsyncComponent(() => import('./components/cancel/index.vue')),
   },

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

@@ -1,56 +1,37 @@
 <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>
-      <!-- 类型 -->
-      <template #buyorsell="{ text }">
-        <span>{{ getBuyOrSellTypeName(text) }}</span>
-      </template>
-      <template #tradeprice="{ text, record }">
-        <span>{{ handleType(record, text) }}</span>
-      </template>
-      <template #matchaccountid="{ text, record }">
-        <span>{{ handleType(record, text) }}</span>
-      </template>
-      <!-- 状态 -->
-      <template #orderstatus="{ record }">
-        <a>{{ getOrderStatusName(record.orderstatus) }}</a>
-      </template>
-      <template #tradetime="{ text }">
-        <a>{{ formatTime(text) }}</a>
-      </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="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template v-if="btnList.length" #expandedRowRender="{ record }">
+          <BtnList :btnList="btnList" :record="record" class="btn-list-sticky" @click="openComponent" />
+        </template>
+        <!-- 类型 -->
+        <template #buyorsell="{ text }">
+          <span>{{ getBuyOrSellTypeName(text) }}</span>
+        </template>
+        <template #tradeprice="{ text, record }">
+          <span>{{ handleType(record, text) }}</span>
+        </template>
+        <template #matchaccountid="{ text, record }">
+          <span>{{ handleType(record, text) }}</span>
+        </template>
+        <!-- 状态 -->
+        <template #orderstatus="{ record }">
+          <a>{{ getOrderStatusName(record.orderstatus) }}</a>
+        </template>
+        <template #tradetime="{ text }">
+          <a>{{ formatTime(text) }}</a>
+        </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 { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuildTypeName, getBuyOrSellTypeName, getOrderStatusName } from '@/common/constants/enumsName';
@@ -68,6 +49,7 @@ import Bus from '@/utils/eventBus/index';
 export default defineComponent({
   name: enumOrderComponents.commodity_contract_make_deal,
   components: {
+    MtpTableScroll,
     BtnList,
   },
   setup() {

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

@@ -1,91 +1,56 @@
 <template>
   <!-- 商品订单 - 合约汇总 -->
-  <section>
-    <a-table
-      :columns="getTableColums()"
-      class="srcollYTableExpendBgColor 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 }">
-        <a-table
-          :columns="getDetailColums()"
-          class="expandBottomTable"
-          :pagination="false"
-          :loading="detailLoading"
-          :expandedRowKeys="expandedRowKeys"
-          :expandIcon="expandIcon"
-          :expandIconAsCell="false"
-          rowKey="key"
-          :data-source="detailTableList"
-        >
-          <template #operate="sub">
-            <BtnList
-              :btnList="handleBtnList(record, btnList)"
-              :record="sub.record"
-              class="btn-list-sticky"
-              @click="openComponent"
-            />
-          </template>
-          <!-- 持仓盈亏 -->
-          <template #profitloss="{ record }">
-            <span
-              :class="[+getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) > 0 ? 'up-quote-color' : +getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) < 0 ? 'down-quote-color' : '']"
-            >{{ getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) }}</span>
-          </template>
-          <!-- 市值 -->
-          <template #marketamount="{ record }">
-            <span>{{ getDetailMarketAmount(record) }}</span>
-          </template>
-          <template #expiredate="{ text }">
-            <span>{{ handleNoneValue(text) }}</span>
-          </template>
-        </a-table>
-      </template>
-      <template #createtime="{ record }">
-        <a>{{ formatTime(record.createtime) }}</a>
-      </template>
-      <!-- 现价 -->
-      <template #lastprice="{ record }">
-        <a>{{ getLastprice(record) }}</a>
-      </template>
-      <!-- 均价 -->
-      <template #averageprice="{ text }">
-        <a>{{ handleNoneValue(text) }}</a>
-      </template>
-      <!-- 持仓盈亏 -->
-      <template #profitloss="{ record }">
-        <span
-          :class="[+useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) > 0 ? 'up-quote-color' : +useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) < 0 ? 'down-quote-color' : '']"
-        >{{ record.averageprice ? useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) : '--' }}</span>
-      </template>
-      <template #buyorsell="{ record }">
-        <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
-      </template>
-      <!-- <template #marketamount="{ record, text }">
+  <mtp-table-scroll>
+    <template #default="{ scroll }">
+      <a-table :columns="getTableColums()" class="srcollYTableExpendBgColor srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="tableList">
+        <!-- 额外的展开行 -->
+        <template #expandedRowRender="{ record }">
+          <a-table :columns="getDetailColums()" class="expandBottomTable" :pagination="false" :loading="detailLoading" :expandedRowKeys="expandedRowKeys" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="detailTableList">
+            <template #operate="sub">
+              <BtnList :btnList="handleBtnList(record, btnList)" :record="sub.record" class="btn-list-sticky" @click="openComponent" />
+            </template>
+            <!-- 持仓盈亏 -->
+            <template #profitloss="{ record }">
+              <span :class="[+getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) > 0 ? 'up-quote-color' : +getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) < 0 ? 'down-quote-color' : '']">{{ getDetailProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) }}</span>
+            </template>
+            <!-- 市值 -->
+            <template #marketamount="{ record }">
+              <span>{{ getDetailMarketAmount(record) }}</span>
+            </template>
+            <template #expiredate="{ text }">
+              <span>{{ handleNoneValue(text) }}</span>
+            </template>
+          </a-table>
+        </template>
+        <template #createtime="{ record }">
+          <a>{{ formatTime(record.createtime) }}</a>
+        </template>
+        <!-- 现价 -->
+        <template #lastprice="{ record }">
+          <a>{{ getLastprice(record) }}</a>
+        </template>
+        <!-- 均价 -->
+        <template #averageprice="{ text }">
+          <a>{{ handleNoneValue(text) }}</a>
+        </template>
+        <!-- 持仓盈亏 -->
+        <template #profitloss="{ record }">
+          <span :class="[+useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) > 0 ? 'up-quote-color' : +useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) < 0 ? 'down-quote-color' : '']">{{ record.averageprice ? useProfitloss(record, findGoodsCode(record.goodsid, record.goodscode, swapList)) : '--' }}</span>
+        </template>
+        <template #buyorsell="{ record }">
+          <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
+        </template>
+        <!-- <template #marketamount="{ record, text }">
         <span>{{ isDiaoQi(record) ? '--' : text }}</span>
       </template>-->
-    </a-table>
-    <component
-      :is="componentId"
-      v-if="componentId"
-      :selectedRow="selectedRow"
-      :tableList="tableList"
-      :swapList="swapList"
-      @cancel="clsoeAction"
-    ></component>
-  </section>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
+  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :tableList="tableList" :swapList="swapList" @cancel="clsoeAction"></component>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
@@ -112,6 +77,7 @@ import { findGoodsCode, getSwapList, getTableColums, useDetail } from './setup';
 export default defineComponent({
   name: enumOrderComponents.commodity_contract_summary,
   components: {
+    MtpTableScroll,
     BtnList,
     swap_commodity_contract_summary_deal_closed: defineAsyncComponent(() => import('./components/swap_commodity_contract_summary_deal_closed/index.vue')), // 协议平仓
     swap_commodity_contract_summary_order_closed: defineAsyncComponent(() => import('./components/swap_commodity_contract_summary_order_closed/index.vue')), // 平仓

src/views/order/swap_the_order/index.vue

@@ -1,20 +1,13 @@
 <template>
   <!-- 掉期订单 -->
   <section class="spot_warran">
-    <component :is="componentId"
-               v-if="componentId"></component>
-    <thirdMenu :list="tabList"
-               @selectMenu="changeTab"
-               :value="'title'">
+    <component :is="componentId" v-if="componentId"></component>
+    <thirdMenu :list="tabList" @selectMenu="changeTab" :value="'title'">
       <!-- 议价单 -->
-      <div class="goods-apply"
-           v-if="componentId === BARGIN">
-        <a-radio-group class="conditionCommonRadioGroup"
-                       v-model:value="bargainValue">
-          <a-radio @focus="changeBargain(ApplyType.my)"
-                   :value="ApplyType.my">我的申请</a-radio>
-          <a-radio @focus="changeBargain(ApplyType.counterpart)"
-                   :value="ApplyType.counterpart">对方申请</a-radio>
+      <div class="goods-apply" v-if="componentId === BARGIN">
+        <a-radio-group class="conditionCommonRadioGroup" v-model:value="bargainValue">
+          <a-radio @focus="changeBargain(ApplyType.my)" :value="ApplyType.my">我的申请</a-radio>
+          <a-radio @focus="changeBargain(ApplyType.counterpart)" :value="ApplyType.counterpart">对方申请</a-radio>
         </a-radio-group>
       </div>
     </thirdMenu>
@@ -32,29 +25,21 @@ import { ApplyType } from '@/common/constants/enumCommon';
 const BARGIN = 'swap_commodity_contract_bargain';
 
 export default defineComponent({
-    name: enumOrderComponents.swap_the_order,
-    components: {
-        thirdMenu,
-        swap_commodity_contract_summary: defineAsyncComponent(() => import('./components/swap_commodity_contract_summary/index.vue')), // 合约汇总
-        swap_commodity_contract_commission: defineAsyncComponent(() => import('./components/swap_commodity_contract_commission/index.vue')), // 委托
-        swap_commodity_contract_make_deal: defineAsyncComponent(() => import('./components/swap_commodity_contract_make_deal/index.vue')), // 成交
-        [BARGIN]: defineAsyncComponent(() => import('./components/swap_commodity_contract_bargain/index.vue')), // 议价单
-    },
-    setup() {
-        // 切换 我的
-        function changeBargain(value: ApplyType) {
-            Bus.$emit('bargain', value);
-        }
-        const bargainValue = ref<ApplyType>(ApplyType.my);
-        return { ...handleOrderDetailList(enumOrderComponents.swap_the_order), changeBargain, BARGIN, ApplyType, bargainValue };
-    },
+  name: enumOrderComponents.swap_the_order,
+  components: {
+    thirdMenu,
+    swap_commodity_contract_summary: defineAsyncComponent(() => import('./components/swap_commodity_contract_summary/index.vue')), // 合约汇总
+    swap_commodity_contract_commission: defineAsyncComponent(() => import('./components/swap_commodity_contract_commission/index.vue')), // 委托
+    swap_commodity_contract_make_deal: defineAsyncComponent(() => import('./components/swap_commodity_contract_make_deal/index.vue')), // 成交
+    [BARGIN]: defineAsyncComponent(() => import('./components/swap_commodity_contract_bargain/index.vue')), // 议价单
+  },
+  setup() {
+    // 切换 我的
+    function changeBargain(value: ApplyType) {
+      Bus.$emit('bargain', value);
+    }
+    const bargainValue = ref<ApplyType>(ApplyType.my);
+    return { ...handleOrderDetailList(enumOrderComponents.swap_the_order), changeBargain, BARGIN, ApplyType, bargainValue };
+  },
 });
 </script>
-
-<style lang="less">
-.goods-apply {
-    position: absolute;
-    bottom: 2px;
-    right: 20px;
-}
-</style>;

src/views/search/search_capital_flow/search_capital_flow_tab/search_capital_flow_tab_today/index.vue

@@ -1,27 +1,18 @@
 <template>
-    <!-- 资金流水 -->
-    <section class="topTableHeight">
-        <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 #createtime="{ record }">
-                <a>{{ formatTime(record.createtime) }}</a>
-            </template>
-        </a-table>
-    </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="key" :data-source="tableList">
+        <template #createtime="{ record }">
+          <a>{{ formatTime(record.createtime) }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { BtnList, defineComponent, queryTableList } from '@/common/export/commonTable';
 import { formatTime } from '@/common/methods';
@@ -36,39 +27,40 @@ import { WrPerformancePlan } from '@/services/go/wrtrade/interface';
 import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
-    name: EnumRouterName.search_capital_flow_tab,
-    components: {
-        BtnList,
-    },
-    setup() {
-        // 表格列表数据
-        const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
-        // 获取列表数据
-        const queryTableAction = () => {
-            const param: QueryAmountLogReq = {
-                accountID: getSelectedAccountId().toString(),
-            };
+  name: EnumRouterName.search_capital_flow_tab,
+  components: {
+    MtpTableScroll,
+    BtnList,
+  },
+  setup() {
+    // 表格列表数据
+    const { loading, tableList, queryTable } = queryTableList<WrPerformancePlan>();
+    // 获取列表数据
+    const queryTableAction = () => {
+      const param: QueryAmountLogReq = {
+        accountID: getSelectedAccountId().toString(),
+      };
 
-            queryTable(queryAmountLog, param);
-        };
-        // 表格通用逻辑
-        const param: ComposeOrderTableParam = {
-            queryFn: queryTableAction,
-            tableName: 'table_pcweb_spot_trade_bottom_funding_info_log',
-            recordList: getRecordItemTab(),
-        };
-        // 资金变化，重新加载数据
-        Bus.$on('moneyChangedNtf_UI', () => {
-            queryTableAction();
-        });
-        return {
-            ...handleComposeOrderTable<WrPerformancePlan>(param),
-            loading,
-            tableList,
-            formatTime,
-            expandIcon,
-        };
-    },
+      queryTable(queryAmountLog, param);
+    };
+    // 表格通用逻辑
+    const param: ComposeOrderTableParam = {
+      queryFn: queryTableAction,
+      tableName: 'table_pcweb_spot_trade_bottom_funding_info_log',
+      recordList: getRecordItemTab(),
+    };
+    // 资金变化，重新加载数据
+    Bus.$on('moneyChangedNtf_UI', () => {
+      queryTableAction();
+    });
+    return {
+      ...handleComposeOrderTable<WrPerformancePlan>(param),
+      loading,
+      tableList,
+      formatTime,
+      expandIcon,
+    };
+  },
 });
 </script>
 

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

@@ -1,36 +1,27 @@
 <template>
   <!-- 委托单 -商品合约 - 当前记录 -->
-  <section class="topTableHeight">
-    <a-table
-      :columns="columns"
-      class="srcollYTable"
-      :scroll="{ x: '100%', y: '190px' }"
-      :pagination="false"
-      :loading="loading"
-      :expandedRowKeys="expandedRowKeys"
-      :customRow="Rowclick"
-      :expandIcon="expandIcon"
-      :expandIconAsCell="false"
-      rowKey="key"
-      :data-source="tableList"
-    >
-      <!-- 类型 -->
-      <template #buildtype="{ record }">
-        <a>{{ getBuyOrSellTypeName(record.buyorsell) }}</a>
-      </template>
-      <!-- 状态 -->
-      <template #orderstatus="{ record }">
-        <a>{{ getOrderStatusName(record.orderstatus) }}</a>
-      </template>
+  <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="key" :data-source="tableList">
+        <!-- 类型 -->
+        <template #buildtype="{ record }">
+          <a>{{ getBuyOrSellTypeName(record.buyorsell) }}</a>
+        </template>
+        <!-- 状态 -->
+        <template #orderstatus="{ record }">
+          <a>{{ getOrderStatusName(record.orderstatus) }}</a>
+        </template>
 
-      <template #ordertime="{ text }">
-        <a>{{ formatTime(text) }}</a>
-      </template>
-    </a-table>
-  </section>
+        <template #ordertime="{ text }">
+          <a>{{ formatTime(text) }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuyOrSellTypeName, getOrderStatusName } from '@/common/constants/enumsName';
@@ -47,6 +38,9 @@ import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
   name: enumOrderComponents.commodity_contract_commission,
+  components: {
+    MtpTableScroll
+  },
   setup() {
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<QueryTradeOrderDetailRsp>();

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

@@ -1,41 +1,32 @@
 <template>
   <!-- 委托记录 - 现货仓单 - 当前记录  -->
-  <section class="topTableHeight">
-    <a-table
-      :columns="tableColumns"
-      class="srcollYTable"
-      :scroll="{ x: '100%', y: '190px' }"
-      :pagination="false"
-      :loading="loading"
-      :expandedRowKeys="expandedRowKeys"
-      :customRow="Rowclick"
-      :expandIcon="expandIcon"
-      :expandIconAsCell="false"
-      rowKey="key"
-      :data-source="tableList"
-    >
-      <!--  委托状态-->
-      <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>
-  </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="key" :data-source="tableList">
+        <!--  委托状态-->
+        <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>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getOrderStatusName, getWrOrderTypeName } from '@/common/constants/enumsName';
 import { defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -50,6 +41,9 @@ import { useOrderWarrant } from '@/views/order/setup';
 
 export default defineComponent({
   name: enumOrderComponents.spot_warrant_pending_order,
+  components: {
+    MtpTableScroll
+  },
   setup() {
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<WrOrderDetail>();

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

@@ -1,41 +1,32 @@
 <template>
   <!-- 成交记录 - 商品合约 - 当前记录-->
-  <section class="topTableHeight">
-    <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 #buyorsell="{ text }">
-        <span>{{ getBuyOrSellTypeName(text) }}</span>
-      </template>
-      <template #tradeprice="{ text, record }">
-        <span>{{ handleType(record, text) }}</span>
-      </template>
-      <template #matchaccountid="{ text, record }">
-        <span>{{ handleType(record, text) }}</span>
-      </template>
-      <!-- 状态 -->
-      <template #orderstatus="{ record }">
-        <a>{{ getOrderStatusName(record.orderstatus) }}</a>
-      </template>
-      <template #tradetime="{ text }">
-        <a>{{ formatTime(text) }}</a>
-      </template>
-    </a-table>
-  </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="key" :data-source="tableList">
+        <!-- 类型 -->
+        <template #buyorsell="{ text }">
+          <span>{{ getBuyOrSellTypeName(text) }}</span>
+        </template>
+        <template #tradeprice="{ text, record }">
+          <span>{{ handleType(record, text) }}</span>
+        </template>
+        <template #matchaccountid="{ text, record }">
+          <span>{{ handleType(record, text) }}</span>
+        </template>
+        <!-- 状态 -->
+        <template #orderstatus="{ record }">
+          <a>{{ getOrderStatusName(record.orderstatus) }}</a>
+        </template>
+        <template #tradetime="{ text }">
+          <a>{{ formatTime(text) }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { TradeMode } from '@/common/constants/enumCommon';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getBuildTypeName, getBuyOrSellTypeName, getOrderStatusName } from '@/common/constants/enumsName';
@@ -52,6 +43,9 @@ import Bus from '@/utils/eventBus/index';
 
 export default defineComponent({
   name: enumOrderComponents.commodity_contract_make_deal,
+  components: {
+    MtpTableScroll
+  },
   setup() {
     // 表格列表数据
     const { loading, tableList, queryTable } = queryTableList<QueryTradeDetailRsp>();

src/views/search/search_document_records_done/search_document_records_done_search_spot_warrant/search_document_records_done_search_spot_warrant_today/index.vue

@@ -1,33 +1,24 @@
 <template>
   <!-- 成交记录 - 现货仓单 - 当前记录-->
-  <section class="topTableHeight">
-    <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 #amount="{ record }">
-        <a>{{ (record.tradeqty * record.tradeprice).toFixed(2) }}</a>
-      </template>
+  <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="key" :data-source="tableList">
+        <!-- 成交金额 -->
+        <template #amount="{ record }">
+          <a>{{ (record.tradeqty * record.tradeprice).toFixed(2) }}</a>
+        </template>
 
-      <!-- 挂牌类型 -->
-      <template #wrtradetype="{ record }">
-        <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
-      </template>
-    </a-table>
-  </section>
+        <!-- 挂牌类型 -->
+        <template #wrtradetype="{ record }">
+          <a>{{ getWrOrderTypeName(record.buyorsell, record.wrtradetype) }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import { getWrOrderTypeName } from '@/common/constants/enumsName';
 import { defineComponent, queryTableList } from '@/common/export/commonTable';
@@ -41,7 +32,9 @@ import { QueryWrTradeDetailReq, WrSpecialMatchOrder } from '@/services/go/wrtrad
 
 export default defineComponent({
   name: enumOrderComponents.spot_warrant_deal,
-
+  components: {
+    MtpTableScroll,
+  },
   setup() {
     const tableName: keyof TableKey = 'table_pcweb_spot_trade_bottom_spot_warrant_deal';
     // 表格列表数据

src/views/search/search_performance_query/search_performance_query_buy_performance/search_performance_query_buy_performance_done/index.vue

@@ -1,46 +1,37 @@
 <template>
   <!-- 履约查询 买履约 -->
-  <section
-    :class="[isShowBottom ? 'topTableHeight_441' : 'topTableHeight_441_no_bottom', 'topTableHeight']"
-  >
-    <Filter @search="search" :subtract="0" />
-    <a-table
-      :columns="columns"
-      class="srcollYTable expandLeftTable"
-      :scroll="{ x: '100%', }"
-      :pagination="false"
-      :loading="loading"
-      :expandedRowKeys="expandedRowKeys"
-      :customRow="Rowclick"
-      :expandIcon="expandIcon"
-      :expandIconAsCell="false"
-      rowKey="key"
-      :data-source="tableList"
-    >
-      <!-- 履约类型 -->
-      <template #performancetype="{ record }">
-        <a>{{ getPerformanceTypeName(record.performancetype, 1) }}</a>
-      </template>
+  <mtp-table-scroll>
+    <template #header>
+      <Filter @search="search" :subtract="0" />
+    </template>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="tableList">
+        <!-- 履约类型 -->
+        <template #performancetype="{ record }">
+          <a>{{ getPerformanceTypeName(record.performancetype, 1) }}</a>
+        </template>
 
-      <!-- 付款方式 -->
-      <template #paymenttype="{ record }">
-        <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
-      </template>
+        <!-- 付款方式 -->
+        <template #paymenttype="{ record }">
+          <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
+        </template>
 
-      <!-- 履约状态 -->
-      <template #performancestatus="{ record }">
-        <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
-      </template>
+        <!-- 履约状态 -->
+        <template #performancestatus="{ record }">
+          <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
+        </template>
 
-      <!-- 当前步骤 -->
-      <template #curstepname="{ record }">
-        <a>{{ record.curstepname }}</a>
-      </template>
-    </a-table>
-  </section>
+        <!-- 当前步骤 -->
+        <template #curstepname="{ record }">
+          <a>{{ record.curstepname }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { isShowBottom } from '@/common/config/constrolBottom';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -59,6 +50,7 @@ export default defineComponent({
   name: EnumRouterName.search_performance_query_buy_performance,
   components: {
     Filter,
+    MtpTableScroll,
   },
   setup() {
     // 表格列表数据

src/views/search/search_performance_query/search_performance_query_sell_performance/search_performance_query_sell_performance_done/index.vue

@@ -1,46 +1,37 @@
 <template>
   <!-- 履约查询 卖履约 -->
-  <section
-    :class="[isShowBottom ? 'topTableHeight_441' : 'topTableHeight_441_no_bottom', 'topTableHeight']"
-  >
-    <Filter @search="search" :subtract="0" />
-    <a-table
-      :columns="columns"
-      class="srcollYTable"
-      :scroll="{ x: '100%', y: 'calc(100vh - 441px)' }"
-      :pagination="false"
-      :loading="loading"
-      :expandedRowKeys="expandedRowKeys"
-      :customRow="Rowclick"
-      :expandIcon="expandIcon"
-      :expandIconAsCell="false"
-      rowKey="key"
-      :data-source="tableList"
-    >
-      <!-- 履约类型 -->
-      <template #performancetype="{ record }">
-        <a>{{ getPerformanceTypeName(record.performancetype, 1) }}</a>
-      </template>
+  <mtp-table-scroll>
+    <template #header>
+      <Filter @search="search" :subtract="0" />
+    </template>
+    <template #default="{ scroll }">
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" rowKey="key" :data-source="tableList">
+        <!-- 履约类型 -->
+        <template #performancetype="{ record }">
+          <a>{{ getPerformanceTypeName(record.performancetype, 1) }}</a>
+        </template>
 
-      <!-- 付款方式 -->
-      <template #paymenttype="{ record }">
-        <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
-      </template>
+        <!-- 付款方式 -->
+        <template #paymenttype="{ record }">
+          <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
+        </template>
 
-      <!-- 履约状态 -->
-      <template #performancestatus="{ record }">
-        <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
-      </template>
+        <!-- 履约状态 -->
+        <template #performancestatus="{ record }">
+          <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
+        </template>
 
-      <!-- 当前步骤 -->
-      <template #curstepname="{ record }">
-        <a>{{ record.curstepname }}</a>
-      </template>
-    </a-table>
-  </section>
+        <!-- 当前步骤 -->
+        <template #curstepname="{ record }">
+          <a>{{ record.curstepname }}</a>
+        </template>
+      </a-table>
+    </template>
+  </mtp-table-scroll>
 </template>
 
 <script lang="ts">
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { isShowBottom } from '@/common/config/constrolBottom';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -58,6 +49,7 @@ import moment, { Moment } from 'moment';
 export default defineComponent({
   name: EnumRouterName.search_performance_query_sell_performance,
   components: {
+    MtpTableScroll,
     Filter,
   },
   setup() {