update

public/config/app.config.json

@@ -1,3 +1,3 @@
 {
-    "apiUrl": "http://192.168.31.204:8080/cfg?key=test_204"
+    "apiUrl": "http://47.104.141.54:38280/cfg?key=mtp_20"
 }

src/common/components/echarts/echarts-kline/index.vue

@@ -145,7 +145,7 @@ export default defineComponent({
           dataIndex.value = res.length - 1;
           // 日期升序排序
           const data = res.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
-          handleData(data, () => initOptions(updateChartData));
+          handleData(data, () => initOptions());
         } else {
           showEmpty.value = true;
         }
@@ -199,7 +199,7 @@ export default defineComponent({
         lastIndex = source.length - 1, // 历史行情最后索引位置
         cycleMilliseconds = getCycleMilliseconds(),
         newTime = moment(quote.value.lasttime), // 实时行情最新时间
-        { last, opened, highest, lowest } = quote.value; // 实时行情
+        last = quote.value.last; // 实时行情最新价
 
       const oldTime = lastIndex === -1 ? newTime : moment(source[lastIndex].date); // 历史行情最后时间
       const diffTime = newTime.valueOf() - oldTime.valueOf(); // 计算时间差
@@ -215,10 +215,10 @@ export default defineComponent({
           // 新增K线数据
           klineData.source.push({
             date: newDate,
-            open: opened,
+            open: last,
             close: last,
-            lowest: lowest,
-            highest: highest,
+            lowest: last,
+            highest: last,
             ma5: '-',
             ma10: '-',
             ma15: '-',

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

@@ -1,43 +1,44 @@
 <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>
-
-      <!-- 状态 -->
-      <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>
+    <!-- 融资管理-申请单 -->
+    <mtp-table-scroll>
+        <template #default="{ scroll }">
+            <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" :rowKey="(record, index) => index" :data-source="tableList">
+                <!-- 额外的展开行 -->
+                <template v-if="buttons.length" #expandedRowRender="{ record }">
+                    <BtnList :btnList="handleBtnList(buttons, 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>
+                <!-- 结算方式 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>
-  </section>
 </template>
 
 <script lang="ts">
-import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
+import { PropType } from 'vue';
+import { DynamicComponent } from '@/@next/hooks/common/interface';
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
 import { queryWrFinanceBuyApply } from '@/services/go/wrtrade';
 import { WrFinanceBuyApply } 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 { formatTime } from '@/common/methods';
@@ -47,66 +48,79 @@ import { getApplyStatusFinanceName, getFinanceTypeName, getInterestrateModeName,
 import { BtnListType } from '@/common/components/btnList/interface';
 
 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>();
-    function sortTime<T extends object>(arr: T[], key: keyof T, isUp = true) {
-      const result = arr.sort((a, b) => {
-        const time1 = new Date((a[key] as unknown) as string).getTime();
-        const time2 = new Date((b[key] as unknown) as string).getTime();
-        return isUp ? time1 - time2 : time2 - time1;
-      });
-      return result;
-    }
-    // 获取列表数据
-    const queryTableAction = () => {
-      queryTable(queryWrFinanceBuyApply).then((res) => {
-        const arr = res.map((e) => {
-          return { ...e, key: e.financeapplyid };
+    props: {
+        parentComponent: {
+            type: Object as PropType<DynamicComponent>,
+            required: true,
+        },
+    },
+    components: {
+        MtpTableScroll,
+        BtnList,
+        cancel: defineAsyncComponent(() => import('./components/cancel/index.vue')), // 撤销
+    },
+    setup(props) {
+        const { buttons } = props.parentComponent;
+        // 表格列表数据
+        const { loading, tableList, queryTable } = queryTableList<WrFinanceBuyApply>();
+
+        function sortTime<T extends object>(arr: T[], key: keyof T, isUp = true) {
+            const result = arr.sort((a, b) => {
+                const time1 = new Date(a[key] as unknown as string).getTime();
+                const time2 = new Date(b[key] as unknown as string).getTime();
+                return isUp ? time1 - time2 : time2 - time1;
+            });
+            return result;
+        }
+
+        // 获取列表数据
+        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',
+        };
+
+        // 融资摘牌成功，重新加载数据
+        Bus.$on('financing_manager', () => {
+            queryTableAction();
         });
-        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,
-    };
-  },
+
+        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,
+            buttons,
+            formatTime,
+            expandIcon,
+            getFinanceTypeName,
+            getApplyStatusFinanceName,
+            handleBtnList,
+            getInterestrateModeName,
+            getInterestSettleModeName,
+        };
+    },
 });
 </script>

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

@@ -1,36 +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="(record,index)=>index" :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>
+    <!-- 融资管理-合同 -->
+    <mtp-table-scroll>
+        <template #default="{ scroll }">
+            <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" :rowKey="(record, index) => index" :data-source="tableList">
+                <!-- 额外的展开行 -->
+                <template v-if="buttons.length" #expandedRowRender="{ record }">
+                    <BtnList :btnList="handleBtnList(buttons, 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>
-  </section>
 </template>
 
 <script lang="ts">
-import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
+import { PropType } from 'vue';
+import { DynamicComponent } from '@/@next/hooks/common/interface';
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
 import { queryWrScfContract } from '@/services/go/wrtrade';
 import { WrScfContract } 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 { formatTime } from '@/common/methods';
@@ -39,48 +42,59 @@ import { getContractName, getFinanceTypeName, getScfContractTypeName } from '@/c
 import { BtnListType } from '@/common/components/btnList/interface';
 
 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;
-    }
-    return {
-      ...handleComposeOrderTable<WrScfContract>(param),
-      loading,
-      tableList,
-      formatTime,
-      expandIcon,
-      getContractName,
-      getFinanceTypeName,
-      handleBtnList,
-      getScfContractTypeName,
-    };
-  },
+    props: {
+        parentComponent: {
+            type: Object as PropType<DynamicComponent>,
+            required: true,
+        },
+    },
+    components: {
+        MtpTableScroll,
+        BtnList,
+        repurchase_warrant: defineAsyncComponent(() => import('./components/buyback/index.vue')), // 回购仓单
+        pay_arrears: defineAsyncComponent(() => import('./components/pay/index.vue')), // 支付欠款
+    },
+    setup(props) {
+        const { buttons } = props.parentComponent;
+        // 表格列表数据
+        const { loading, tableList, queryTable } = queryTableList<WrScfContract>();
+
+        // 获取列表数据
+        const queryTableAction = () => {
+            queryTable(queryWrScfContract);
+        };
+
+        // 表格通用逻辑
+        const param: ComposeOrderTableParam = {
+            queryFn: queryTableAction,
+            tableName: 'table_pcweb_financing_manage_bottom_contract',
+        };
+
+        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;
+        }
+
+        return {
+            ...handleComposeOrderTable<WrScfContract>(param),
+            loading,
+            tableList,
+            buttons,
+            formatTime,
+            expandIcon,
+            getContractName,
+            getFinanceTypeName,
+            handleBtnList,
+            getScfContractTypeName,
+        };
+    },
 });
 </script>

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

@@ -1,101 +1,115 @@
 <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="(record,index)=>index" :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 #paymenttype="{ record }">
-        <a>{{ getPaymentTypeName(record.paymenttype) }}</a>
-      </template>
-
-      <!-- 履约状态 -->
-      <template #performancestatus="{ record }">
-        <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
-      </template>
-
-      <!-- 当前步骤 -->
-      <template #curstepname="{ record }">
-        <a>{{ record.curstepname }}</a>
-      </template>
-    </a-table>
+    <!-- 履约信息-买履约 -->
+    <mtp-table-scroll>
+        <template #default="{ scroll }">
+            <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" :rowKey="(record, index) => index" :data-source="tableList">
+                <!-- 额外的展开行 -->
+                <template #expandedRowRender="{ record }">
+                    <BtnList :btnList="handleBtn(buttons, 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 #performancestatus="{ record }">
+                    <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
+                </template>
+                <!-- 当前步骤 -->
+                <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>
-  </section>
 </template>
 
 <script lang="ts">
-import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
+import { PropType } from 'vue';
+import { DynamicComponent } from '@/@next/hooks/common/interface';
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
-import { QueryPerformancePlan, queryWrTradeDetail } from '@/services/go/wrtrade';
+import { QueryPerformancePlan } from '@/services/go/wrtrade';
 import { QueryPerformancePlanReq, WrPerformancePlan } 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';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { getPaymentTypeName, getPerformanceStatusName, getPerformanceTypeName } from '@/common/constants/enumsName';
+
 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];
+    props: {
+        parentComponent: {
+            type: Object as PropType<DynamicComponent>,
+            required: true,
+        },
+    },
+    components: {
+        MtpTableScroll,
+        BtnList,
+        pay: defineAsyncComponent(() => import('../components/pay/index.vue')), // 付款
+        extension: defineAsyncComponent(() => import('../components/extension/index.vue')), // 延期
+        breach: defineAsyncComponent(() => import('../components/breach_contract/index.vue')), // 违约
+        detail: defineAsyncComponent(() => import('../components/detail/index.vue')), // 详情
+        settlement: defineAsyncComponent(() => import('../components/settlement/index.vue')), // 交收
+    },
+    setup(props) {
+        const { buttons } = props.parentComponent;
+        // 表格列表数据
+        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',
+        };
+
+        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: string[] = [];
+            if (performancestatus === 1) {
+                result = ['breach', 'settlement'];
+            } else if (performancestatus === 2) {
+                switch (curstepname) {
+                    case '买方支付': {
+                        result = ['pay', 'extension', 'breach', 'detail'];
+                    }
+                    case '货款溢短':
+                    case '卖方发票': {
+                        result = ['extension', 'breach', 'detail'];
+                    }
+                }
+            }
+            return btnList.filter((e) => result.includes(e.code));
         }
-      }
-      return btnList.filter((e) => result.includes(e.code as ModalEnum));
-    }
-    return {
-      ...handleComposeOrderTable<WrPerformancePlan>(param),
-      loading,
-      tableList,
-      getPerformanceTypeName,
-      getPerformanceStatusName,
-      getPaymentTypeName,
-      expandIcon,
-      handleBtn,
-      BuyOrSell,
-    };
-  },
+
+        return {
+            ...handleComposeOrderTable<WrPerformancePlan>(param),
+            loading,
+            tableList,
+            buttons,
+            getPerformanceTypeName,
+            getPerformanceStatusName,
+            getPaymentTypeName,
+            expandIcon,
+            handleBtn,
+            BuyOrSell,
+        };
+    },
 });
 </script>

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

@@ -1,41 +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="(record,index)=>index" :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 #performancestatus="{ record }">
-        <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
-      </template>
-
-      <!-- 当前步骤 -->
-      <template #curstepname="{ record }">
-        <a>{{ record.curstepname }}</a>
-      </template>
-    </a-table>
+    <!-- 履约信息-卖履约 -->
+    <mtp-table-scroll>
+        <template #default="{ scroll }">
+            <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :expandIcon="expandIcon" :expandIconAsCell="false" :rowKey="(record, index) => index" :data-source="tableList">
+                <!-- 额外的展开行 -->
+                <template v-if="buttons.length" #expandedRowRender="{ record }">
+                    <BtnList :btnList="handleBtn(buttons, 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 #performancestatus="{ record }">
+                    <a>{{ getPerformanceStatusName(record.performancestatus) }}</a>
+                </template>
+                <!-- 当前步骤 -->
+                <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>
-  </section>
 </template>
 
 <script lang="ts">
-import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
+import { PropType } from 'vue';
+import { DynamicComponent } from '@/@next/hooks/common/interface';
+import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, BtnList, defineAsyncComponent, defineComponent, ModalEnum } from '@/common/export/commonTable';
-import { QueryPerformancePlan, queryWrTradeDetail } from '@/services/go/wrtrade';
+import { QueryPerformancePlan } from '@/services/go/wrtrade';
 import { QueryPerformancePlanReq, WrPerformancePlan } from '@/services/go/wrtrade/interface';
-import { getRecordItemTab } from '@/common/setup/order/orderData';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { expandIcon } from '@/common/setup/table/clolumn';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
@@ -44,60 +44,71 @@ import { BuyOrSell } from '@/common/constants/enumCommon';
 import { getPaymentTypeName, getPerformanceStatusName, getPerformanceTypeName } from '@/common/constants/enumsName';
 
 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];
+    props: {
+        parentComponent: {
+            type: Object as PropType<DynamicComponent>,
+            required: true,
+        },
+    },
+    components: {
+        MtpTableScroll,
+        BtnList,
+        pay: defineAsyncComponent(() => import('../components/pay/index.vue')), // 付款
+        extension: defineAsyncComponent(() => import('../components/extension/index.vue')), // 延期
+        breach: defineAsyncComponent(() => import('../components/breach_contract/index.vue')), // 违约
+        detail: defineAsyncComponent(() => import('../components/detail/index.vue')), // 详情
+        settlement: defineAsyncComponent(() => import('../components/settlement/index.vue')), // 交收
+    },
+    setup(props) {
+        const { buttons } = props.parentComponent;
+        // 表格列表数据
+        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',
+        };
+
+        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: string[] = [];
+            if (performancestatus === 1) {
+                result = ['breach'];
+            } else if (performancestatus === 2) {
+                switch (curstepname) {
+                    case '卖方发货':
+                    case '买方支付':
+                    case '卖方发票':
+                    case '仓单转移': {
+                        result = ['extension', 'breach', 'detail'];
+                    }
+                }
+            }
+            return btnList.filter((e) => result.includes(e.code));
         }
-      }
-      return btnList.filter((e) => result.includes(e.code as ModalEnum));
-    }
-    return {
-      ...handleComposeOrderTable<WrPerformancePlan>(param),
-      loading,
-      tableList,
-      getPerformanceTypeName,
-      getPaymentTypeName,
-      getPerformanceStatusName,
-      expandIcon,
-      handleBtn,
-      BuyOrSell,
-    };
-  },
+
+        return {
+            ...handleComposeOrderTable<WrPerformancePlan>(param),
+            loading,
+            tableList,
+            buttons,
+            getPerformanceTypeName,
+            getPaymentTypeName,
+            getPerformanceStatusName,
+            expandIcon,
+            handleBtn,
+            BuyOrSell,
+        };
+    },
 });
 </script>