feat: 优化采购对账单详情弹窗，添加应付信息和对账明细展示逻辑

src/views/purchasingManage/purchaseOrder/accountstatement/components/detailDialog.vue

@@ -27,43 +27,32 @@
         </div>
       </div>
     </el-card>
-    <div v-if="activeComp === 'main'">
-      <!--采购表单表单-->
+    <div v-show="activeComp === 'main'">
+      <!--采购对账单信息-->
       <purchase-form
         :dataForm.sync="dataForm"
         :datasource.sync="datasource"
         dialogType="view"
       ></purchase-form>
-      <headerTitle title="对账明细" style="margin-top: 30px">
-        <template v-slot>
-          <el-row style="font-weight: 700; color: red">
-            <span>订单总金额：</span>
-            <span>{{ dataForm.orderTotalAmount || 0 }}</span>
-            <el-divider direction="vertical"></el-divider>
-            <span>已对账金额：</span>
-            <span>{{ dataForm.amountCompletePrice || 0 }}</span>
-            <el-divider direction="vertical"></el-divider>
-            <span>未对账金额：</span>
-            <span>{{ dataForm.amountUnCompletePrice || 0 }}</span>
-            <el-divider direction="vertical"></el-divider>
-            <span>本次对账总金额：</span>
-            <span>{{ dataForm.amountTotalPrice || 0 }}</span>
-          </el-row>
-        </template>
-      </headerTitle>
-      <!-- <recorpayTableList
-        ref="recorpayListRef"
-        :dataForm="dataForm"
-        :recorpayList.sync="recorpayList"
-        dialogType="view"
-      ></recorpayTableList> -->
-      <inventoryTable
-        ref="inventoryTableref"
-        :dataForm="dataForm"
+
+      <headerTitle title="应付信息" style="margin-top: 30px"></headerTitle>
+      <payables-info
+        :dataForm.sync="dataForm"
+        :payablesList="payablesList"
+        :dialogType="dialogType"
+        ref="payablesInfoRef"
+      ></payables-info>
+
+      <headerTitle title="对账明细" style="margin-top: 30px"></headerTitle>
+      <account-detail-table
+        ref="accountDetailTableRef"
         :datasource.sync="datasource"
-        dialogType="view"
-        type="purchase"
-      ></inventoryTable>
+        :dialogType="dialogType"
+        :queryDimension="dataForm.queryDimension"
+        @totalChange="handleTotalChange"
+        @countChange="handleCountChange"
+        @statementAmountChange="handleStatementAmountChange"
+      ></account-detail-table>
     </div>
 
     <bpmDetail
@@ -79,19 +68,18 @@
 
 <script>
   import bpmDetail from '@/views/bpm/processInstance/detail.vue';
-  // import InventoryTable from './inventoryTable.vue';
   import { accountstatementInfoAPI } from '@/api/saleManage/accountstatement';
   import purchaseForm from './purchaseForm.vue';
-  import InventoryTable from '@/views/saleManage/saleOrder/accountstatement/components/inventoryTable.vue';
-  // import recorpayTableList from '@/views/saleManage/saleOrder/accountstatement/components/recorpayTableList.vue';
+  import payablesInfo from './payablesInfo.vue';
+  import AccountDetailTable from '@/views/saleManage/saleOrder/accountstatement/components/accountDetailTable.vue';
 
   export default {
     props: ['detailDialogFlag'],
     components: {
       purchaseForm,
-      InventoryTable,
-      bpmDetail,
-      // recorpayTableList
+      payablesInfo,
+      AccountDetailTable,
+      bpmDetail
     },
     data() {
       return {
@@ -104,7 +92,9 @@
         form: {},
         dataForm: {},
         datasource: [],
-        recorpayList:[],
+        payablesList: [],
+        statPayable: null,
+        dialogType: 'view',
         title: '详情',
         fullscreen: false
       };
@@ -115,22 +105,24 @@
         this.dialogType = dialogType;
         this.dataForm.type = type;
         let data = await accountstatementInfoAPI(row.id);
-        data.orderTotalAmount = data.orderList.reduce((pre, cur) => pre + Math.round(+cur.orderAmount * 100), 0) / 100;
-      data.amountTotalPrice = data.orderList.reduce((pre, cur) => pre + Math.round(+cur.statementAmount * 100), 0) / 100;
-      data.amountCompletePrice = data.orderList.reduce((pre, cur) => pre + Math.round(+cur.statementedAmount * 100), 0) / 100;
-      data.amountUnCompletePrice = data.orderList.reduce((pre, cur) => pre + Math.round(+cur.unStatementAmount * 100), 0) / 100;
-        this.datasource = data.orderList||[];
-        this.recorpayList = data.recorpayList || [];
-        this.dataForm = data;
+        this.datasource = data.productList || [];
+        this.payablesList =
+          (data.statPayable && data.statPayable.statPayableDetailList) || [];
+        // 保存查询到的完整 statPayable 对象，提交时回填使用（详情页只读，但保留字段方便编辑场景扩展）
+        this.statPayable = data.statPayable || null;
+        this.dataForm = {
+          ...this.dataForm,
+          ...data
+        };
         switch (this.dataForm.dateType) {
           case 1:
             this.dataForm.year = this.dataForm.dateValue;
             break;
           case 2:
             //2023年-四季度
-            let data = this.dataForm.dateValue.split('年-');
-            this.dataForm.year = data[0];
-            this.dataForm.quarter = data[1];
+            let dateArr = this.dataForm.dateValue.split('年-');
+            this.dataForm.year = dateArr[0];
+            this.dataForm.quarter = dateArr[1];
             break;
           case 3:
             this.dataForm.month = this.dataForm.dateValue;
@@ -143,6 +135,18 @@
             ];
         }
       },
+      handleTotalChange(total) {
+        this.dataForm.amountTotalPrice = total;
+      },
+      handleCountChange(count) {
+        this.dataForm.totalStatementCount = count;
+      },
+      // 对账明细按采购单号汇总本次对账金额，同步到应付信息对应行
+      handleStatementAmountChange(summaryMap) {
+        if (this.$refs.payablesInfoRef) {
+          this.$refs.payablesInfoRef.syncStatementAmount(summaryMap);
+        }
+      },
       cancel() {
         this.$emit('update:detailDialogFlag', false);
       }

src/views/purchasingManage/purchaseOrder/accountstatement/components/payablesInfo.vue

@@ -31,37 +31,47 @@
         class="time-form"
       >
         <template v-slot:fundType="scope">
-          <el-select
-            v-model="scope.row.fundType"
-            placeholder="请选择"
-            class="ele-block"
-            :disabled="isView"
-            @change="(val) => updateRowField(scope.$index, 'fundType', val)"
+          <el-form-item
+            :prop="'payablesList.' + scope.$index + '.fundType'"
+            label-width="0"
           >
-            <el-option
-              v-for="item in paymentTypeOp"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
+            <el-select
+              v-model="scope.row.fundType"
+              placeholder="请选择"
+              class="ele-block"
+              :disabled="isView"
+              @change="(val) => updateRowField(scope.$index, 'fundType', val)"
+            >
+              <el-option
+                v-for="item in paymentTypeOp"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
         </template>
 
         <template v-slot:transactionMode="scope">
-          <el-select
-            v-model="scope.row.transactionMode"
-            placeholder="请选择"
-            class="ele-block"
-            :disabled="isView"
-            @change="(val) => updateRowField(scope.$index, 'transactionMode', val)"
+          <el-form-item
+            :prop="'payablesList.' + scope.$index + '.transactionMode'"
+            label-width="0"
           >
-            <el-option
-              v-for="item in transactionMethodsOp"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
+            <el-select
+              v-model="scope.row.transactionMode"
+              placeholder="请选择"
+              class="ele-block"
+              :disabled="isView"
+              @change="(val) => updateRowField(scope.$index, 'transactionMode', val)"
+            >
+              <el-option
+                v-for="item in transactionMethodsOp"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
         </template>
 
         <template v-slot:paymentConditionName="scope">
@@ -103,6 +113,10 @@
             >删除</el-link
           >
         </template>
+
+        <template v-slot:columnRequired="{ column }">
+          <span class="is-required">{{ column.label }}</span>
+        </template>
       </ele-pro-table>
     </el-form>
     <!-- 付款条件 -->
@@ -177,14 +191,16 @@
             minWidth: 140,
             label: '款项类型',
             align: 'center',
-            slot: 'fundType'
+            slot: 'fundType',
+            headerSlot: 'columnRequired'
           },
           {
             prop: 'transactionMode',
             minWidth: 140,
             label: '交易方式',
             align: 'center',
-            slot: 'transactionMode'
+            slot: 'transactionMode',
+            headerSlot: 'columnRequired'
           },
           {
             prop: 'paymentConditionName',
@@ -225,6 +241,20 @@
           //   align: 'center',
           //   // slot: 'statementAdvanceConfirmAmount'
           // },
+          {
+            minWidth: 190,
+            headerSlot: 'columnRequired',
+            prop: 'statementAdvanceConfirmAmount',
+            label: '本次对账预付款确收金额',
+            align: 'center',
+            slot: 'statementAdvanceConfirmAmount'
+          },
+          {
+            minWidth: 160,
+            prop: 'lastPayableAmt',
+            label: '上期累计应付金额',
+            align: 'center'
+          },
           {
             minWidth: 120,
             prop: 'statementAmount',
@@ -238,6 +268,13 @@
             label: '本次应付金额',
             align: 'center',
             showOverflowTooltip: true
+          },
+          {
+            minWidth: 160,
+            prop: 'payableAmt',
+            label: '累计应付金额',
+            align: 'center',
+            showOverflowTooltip: true
           }
         ]
       };
@@ -293,11 +330,12 @@
         this.updateRowField(targetIndex, 'collectionConditionName', row.name);
       },
       // 行内字段修改：仅更新本地副本
+      // 注意：必须用 $set 直接修改原对象属性，保持引用不变，
+      // 否则 ele-pro-table 内部缓存的 tableData 仍引用旧对象，导致表格不更新
       updateRowField(index, key, val) {
         const item = this.localList[index];
         if (!item) return;
-        this.localList[index] = { ...item, [key]: val };
-        this.recalcRow(item);
+        this.$set(item, key, val);
       },
       // 新增一行空白预付
       addRow() {
@@ -311,8 +349,10 @@
           paymentConditionName: '',
           unreconciledAdvanceConfirmAmount: 0,
           statementAdvanceConfirmAmount: 0,
+          lastPayableAmt: 0,
           statementAmount: 0,
-          payablePrice: 0
+          payablePrice: 0,
+          payableAmt: 0
         });
       },
       // 由父组件预付款选择器回调调用：追加一行已映射好的应付明细（本地维护）
@@ -343,18 +383,32 @@
         }
         this.recalcRow(row);
       },
-      // 根据本次对账金额重算单行：确收金额 = min(未对账预付款确收金额, 本次对账金额)；应付金额 = 本次对账金额 - 确收金额
+      // 根据本次对账金额重算单行：
+      // 确收金额 = min(未对账预付款确收金额, 本次对账金额)
+      // 本次应付金额 = 本次对账金额 - 确收金额
+      // 累计应付金额 = 本次对账金额 - 累计预付确付金额 + 上期累计应付金额
       recalcRow(row) {
         const statementAmount = +row.statementAmount || 0;
         let val = +row.statementAdvanceConfirmAmount || 0;
         const max = this.getMaxConfirmAmount(row);
         if (val > max) val = max;
         this.$set(row, 'statementAdvanceConfirmAmount', val);
+        // 本次应付金额 = 本次对账金额 - 确收金额
         this.$set(
           row,
           'payablePrice',
           Math.round((statementAmount - val) * 100) / 100
         );
+        // 累计应付金额=本次对账金额-累计预付确付金额+上期累计应付金额
+        const totalPayableAmount =
+          statementAmount -
+          (+row.confirmedPrepayAmt || 0) +
+          (+row.lastPayableAmt || 0);
+        this.$set(
+          row,
+          'payableAmt',
+          Math.round(totalPayableAmount * 100) / 100
+        );
       },
       // 明细表按采购单号汇总本次对账金额后，同步到对应采购单号的应付行
       syncStatementAmount(summaryMap) {
@@ -413,5 +467,13 @@
       justify-content: flex-end;
       margin-bottom: 10px;
     }
+    .el-form-item {
+      margin-bottom: 0 !important;
+    }
+  }
+  ::v-deep .is-required::before {
+    content: '*';
+    color: #f56c6c;
+    margin-right: 4px;
   }
 </style>