From 261f2ed00235d47df3754291a4fdca9ba5cb8e7a Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 21 五月 2026 17:16:09 +0800
Subject: [PATCH] fix: 合并财务数据

---
 src/views/financialManagement/payable/paymentApply.vue |  970 +++++++++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 813 insertions(+), 157 deletions(-)

diff --git a/src/views/financialManagement/payable/paymentApply.vue b/src/views/financialManagement/payable/paymentApply.vue
index fb23db3..3937e96 100644
--- a/src/views/financialManagement/payable/paymentApply.vue
+++ b/src/views/financialManagement/payable/paymentApply.vue
@@ -2,23 +2,40 @@
   <div class="app-container">
     <el-form :model="filters" :inline="true">
       <el-form-item label="鐢宠鍗曞彿:">
-        <el-input v-model="filters.applyCode" placeholder="璇疯緭鍏ョ敵璇峰崟鍙�" clearable style="width: 200px;" />
+        <el-input v-model="filters.invoiceApplicationNo" placeholder="璇疯緭鍏ョ敵璇峰崟鍙�" clearable style="width: 200px;" />
       </el-form-item>
       <el-form-item label="渚涘簲鍟�:">
-        <el-select v-model="filters.supplierId" placeholder="璇烽�夋嫨渚涘簲鍟�" clearable style="width: 200px;">
-          <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
+        <el-select v-model="filters.supplierId" placeholder="璇烽�夋嫨渚涘簲鍟�" clearable filterable style="width: 200px;">
+          <el-option
+            v-for="item in supplierList"
+            :key="item.id"
+            :label="item.supplierName"
+            :value="item.id"
+          />
         </el-select>
       </el-form-item>
-      <el-form-item label="鐘舵��:">
+      <el-form-item label="瀹℃牳鐘舵��:">
         <el-select v-model="filters.status" placeholder="璇烽�夋嫨鐘舵��" clearable style="width: 150px;">
-          <el-option label="寰呭鎵�" value="pending" />
-          <el-option label="宸插鎵�" value="approved" />
-          <el-option label="宸查┏鍥�" value="rejected" />
-          <el-option label="宸蹭粯娆�" value="paid" />
+          <el-option label="寰呭鏍�" :value="0" />
+          <el-option label="瀹℃牳閫氳繃" :value="1" />
+          <el-option label="瀹℃牳涓嶉�氳繃" :value="2" />
         </el-select>
+      </el-form-item>
+      <el-form-item label="鐢宠鏃ユ湡:">
+        <el-date-picker
+          v-model="filters.dateRange"
+          type="daterange"
+          value-format="YYYY-MM-DD"
+          format="YYYY-MM-DD"
+          range-separator="鑷�"
+          start-placeholder="寮�濮嬫棩鏈�"
+          end-placeholder="缁撴潫鏃ユ湡"
+          clearable
+          style="width: 240px;"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="getTableData">鎼滅储</el-button>
+        <el-button type="primary" @click="onSearch">鎼滅储</el-button>
         <el-button @click="resetFilters">閲嶇疆</el-button>
       </el-form-item>
     </el-form>
@@ -27,20 +44,19 @@
         <div></div>
         <div>
           <el-button type="primary" @click="add" icon="Plus">鏂板鐢宠</el-button>
-          <el-button @click="handleBatchApply" icon="Document" :disabled="selectedRows.length === 0">鎵归噺鐢宠</el-button>
+          <el-button @click="handleExport" icon="Download">瀵煎嚭</el-button>
         </div>
       </div>
       <PIMTable
         rowKey="id"
-        isSelection
         :column="columns"
         :tableData="dataList"
+        :tableLoading="tableLoading"
         :page="{
           current: pagination.currentPage,
           size: pagination.pageSize,
           total: pagination.total,
         }"
-        @selection-change="handleSelectionChange"
         @pagination="changePage"
       >
         <template #amount="{ row }">
@@ -54,90 +70,291 @@
         </template>
         <template #operation="{ row }">
           <el-button type="primary" link @click="view(row)">鏌ョ湅</el-button>
-          <el-button type="primary" link @click="edit(row)" v-if="row.status === 'pending'">缂栬緫</el-button>
-          <el-button type="success" link @click="handleAudit(row)" v-if="row.status === 'pending'">瀹℃壒</el-button>
+          <el-button type="primary" link @click="edit(row)" v-if="isPendingStatus(row.status)">缂栬緫</el-button>
+          <el-button type="success" link @click="handleAudit(row)" v-if="isPendingStatus(row.status)">瀹℃牳</el-button>
+          <el-button type="warning" link @click="openPaymentDialog(row)" v-if="isApprovedStatus(row.status)">浠樻</el-button>
+          <el-button type="danger" link @click="handleDelete(row)" v-if="isPendingStatus(row.status)">鍒犻櫎</el-button>
         </template>
       </PIMTable>
     </div>
 
-    <FormDialog :title="dialogTitle" v-model="dialogVisible" width="800px" @confirm="submitForm" @cancel="dialogVisible = false">
+    <FormDialog
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="800px"
+      :operation-type="isView ? 'detail' : ''"
+      @confirm="submitForm"
+      @cancel="closeDialog"
+    >
       <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
+        <el-row v-if="isView" :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="瀹℃牳鐘舵��">
+              <el-tag :type="getStatusType(form.status)">{{ getStatusLabel(form.status) }}</el-tag>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="鐢宠鍗曞彿" prop="applyCode">
-              <el-input v-model="form.applyCode" placeholder="绯荤粺鑷姩鐢熸垚" disabled />
+            <el-form-item label="鐢宠鍗曞彿" prop="invoiceApplicationNo">
+              <el-input v-model="form.invoiceApplicationNo" placeholder="绯荤粺鑷姩鐢熸垚" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="渚涘簲鍟�" prop="supplierId">
-              <el-select v-model="form.supplierId" placeholder="璇烽�夋嫨渚涘簲鍟�" style="width: 100%;" :disabled="isEdit">
-                <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
+              <el-select
+                v-model="form.supplierId"
+                placeholder="璇烽�夋嫨渚涘簲鍟�"
+                style="width: 100%;"
+                filterable
+                :disabled="isEdit || isView"
+                @change="handleSupplierChange"
+              >
+                <el-option
+                  v-for="item in supplierList"
+                  :key="item.id"
+                  :label="item.supplierName"
+                  :value="item.id"
+                />
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="浠樻閲戦" prop="amount">
-              <el-input-number v-model="form.amount" :min="0" :precision="2" style="width: 100%;" />
+            <el-form-item label="鍏宠仈鍏ュ簱鍗�" prop="stockInRecordIds">
+              <el-input
+                :model-value="inboundBatchDisplayText"
+                placeholder="璇峰厛閫夋嫨渚涘簲鍟�"
+                readonly
+                :disabled="!form.supplierId || isEdit || isView"
+                class="inbound-batch-input"
+                @click="handleInboundInputClick"
+              >
+                <template v-if="!isEdit && !isView" #append>
+                  <el-button
+                    :disabled="!form.supplierId"
+                    :loading="inboundBatchLoading"
+                    @click.stop="openInboundSelectDialog"
+                  >
+                    閫夋嫨
+                  </el-button>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鐢宠鏃ユ湡" prop="applyDate">
+              <el-date-picker
+                v-model="form.applyDate"
+                type="date"
+                placeholder="閫夋嫨鏃ユ湡"
+                value-format="YYYY-MM-DD"
+                style="width: 100%;"
+                :disabled="isView"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="浠樻閲戦" prop="paymentAmount">
+              <el-input-number
+                v-model="form.paymentAmount"
+                :min="0"
+                :precision="2"
+                style="width: 100%;"
+                :disabled="isView"
+                placeholder="鏍规嵁鍏ュ簱鍗曡嚜鍔ㄦ眹鎬伙紝鍙慨鏀�"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="浠樻鏂瑰紡" prop="paymentMethod">
-              <el-select v-model="form.paymentMethod" placeholder="璇烽�夋嫨浠樻鏂瑰紡" style="width: 100%;">
-                <el-option label="閾惰杞处" value="bank_transfer" />
-                <el-option label="鐜伴噾" value="cash" />
-                <el-option label="鏀エ" value="check" />
-                <el-option label="姹囩エ" value="draft" />
+              <el-select
+                v-model="form.paymentMethod"
+                placeholder="璇烽�夋嫨浠樻鏂瑰紡"
+                style="width: 100%;"
+                :disabled="isView"
+              >
+                <el-option
+                  v-for="item in checkout_payment"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="浠樻浜嬬敱" prop="paymentContent">
+          <el-input
+            v-model="form.paymentContent"
+            type="textarea"
+            :rows="3"
+            placeholder="璇疯緭鍏ヤ粯娆句簨鐢�"
+            :disabled="isView"
+          />
+        </el-form-item>
+        <el-form-item label="澶囨敞" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="璇疯緭鍏ュ娉�" :disabled="isView" />
+        </el-form-item>
+      </el-form>
+      <template v-if="!isView" #footer>
+        <el-button type="primary" :loading="submitLoading" @click="submitForm">纭畾</el-button>
+        <el-button @click="closeDialog">鍙栨秷</el-button>
+      </template>
+    </FormDialog>
+
+    <FormDialog
+      title="浠樻"
+      v-model="paymentDialogVisible"
+      width="800px"
+      @confirm="submitPayment"
+      @cancel="paymentDialogVisible = false"
+    >
+      <el-form :model="paymentForm" :rules="paymentRules" ref="paymentFormRef" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="浠樻鍗曞彿" prop="paymentNumber">
+              <el-input v-model="paymentForm.paymentNumber" placeholder="绯荤粺鑷姩鐢熸垚" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鍏宠仈鐢宠鍗�" prop="invoiceApplicationNo">
+              <el-input v-model="paymentForm.invoiceApplicationNo" disabled />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="鐢宠鏃ユ湡" prop="applyDate">
-              <el-date-picker v-model="form.applyDate" type="date" placeholder="閫夋嫨鏃ユ湡" value-format="YYYY-MM-DD" style="width: 100%;" />
+            <el-form-item label="渚涘簲鍟�">
+              <el-input v-model="paymentForm.supplierName" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="鏈熸湜浠樻鏃ユ湡" prop="expectedDate">
-              <el-date-picker v-model="form.expectedDate" type="date" placeholder="閫夋嫨鏃ユ湡" value-format="YYYY-MM-DD" style="width: 100%;" />
+            <el-form-item label="浠樻鏃ユ湡" prop="paymentDate">
+              <el-date-picker
+                v-model="paymentForm.paymentDate"
+                type="date"
+                placeholder="閫夋嫨鏃ユ湡"
+                value-format="YYYY-MM-DD"
+                style="width: 100%;"
+              />
             </el-form-item>
           </el-col>
         </el-row>
-        <el-form-item label="鍏宠仈鍏ュ簱鍗�" prop="relatedDocs">
-          <el-select v-model="form.relatedDocs" multiple placeholder="璇烽�夋嫨鍏宠仈鍏ュ簱鍗�" style="width: 100%;">
-            <el-option v-for="item in inList" :key="item.inCode" :label="item.inCode" :value="item.inCode" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="浠樻浜嬬敱" prop="reason">
-          <el-input v-model="form.reason" type="textarea" :rows="3" placeholder="璇疯緭鍏ヤ粯娆句簨鐢�" />
-        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="浠樻閲戦" prop="paymentAmount">
+              <el-input-number
+                v-model="paymentForm.paymentAmount"
+                :min="0"
+                :precision="2"
+                style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="浠樻鏂瑰紡" prop="paymentMethod">
+              <el-select v-model="paymentForm.paymentMethod" placeholder="璇烽�夋嫨浠樻鏂瑰紡" style="width: 100%;">
+                <el-option
+                  v-for="item in checkout_payment"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="isBankTransferPayment(paymentForm.paymentMethod)" :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="閾惰璐﹀彿" prop="bankAccount">
+              <el-input v-model="paymentForm.bankAccount" placeholder="閾惰璐﹀彿" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="寮�鎴疯" prop="bankName">
+              <el-input v-model="paymentForm.bankName" placeholder="寮�鎴疯" />
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="澶囨敞" prop="remark">
-          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="璇疯緭鍏ュ娉�" />
+          <el-input v-model="paymentForm.remark" type="textarea" :rows="3" placeholder="璇疯緭鍏ュ娉�" />
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button type="primary" @click="submitForm">纭畾</el-button>
-        <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+        <el-button type="primary" :loading="paymentSubmitLoading" @click="submitPayment">纭畾</el-button>
+        <el-button @click="paymentDialogVisible = false">鍙栨秷</el-button>
       </template>
     </FormDialog>
+
+    <el-dialog
+      v-model="inboundSelectVisible"
+      title="閫夋嫨鍏ュ簱鍗曞彿"
+      width="1100px"
+      append-to-body
+      destroy-on-close
+      :close-on-click-modal="false"
+      @closed="handleInboundDialogClosed"
+    >
+      <el-table
+        ref="inboundTableRef"
+        v-loading="inboundBatchLoading"
+        :data="inboundBatchList"
+        row-key="id"
+        border
+        stripe
+        max-height="480"
+        @selection-change="handleInboundDialogSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="inboundBatches" label="鍏ュ簱鍗曞彿" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="supplierName" label="渚涘簲鍟�" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="productName" label="浜у搧鍚嶇О" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="specificationModel" label="瑙勬牸鍨嬪彿" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="purchaseContractNumber" label="閲囪喘璁㈠崟鍙�" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="inboundDate" label="鍏ュ簱鏃ユ湡" width="110" align="center" />
+        <el-table-column prop="inboundAmount" label="鍏ュ簱閲戦(鍚◣)" width="120" align="right">
+          <template #default="{ row }">楼{{ formatMoney(getInboundRowTaxInclusiveAmount(row)) }}</template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <el-button type="primary" @click="confirmInboundSelection">纭畾</el-button>
+        <el-button @click="inboundSelectVisible = false">鍙栨秷</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, nextTick, getCurrentInstance } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import FormDialog from "@/components/Dialog/FormDialog.vue";
+import { getOptions } from "@/api/procurementManagement/procurementLedger.js";
+import {
+  getInboundBatchesBySupplier,
+  addAccountPaymentApplication,
+  listPageAccountPaymentApplication,
+  updateAccountPaymentApplication,
+  auditAccountPaymentApplication,
+  deleteAccountPaymentApplication,
+} from "@/api/financialManagement/accountPaymentApplication.js";
+import { addAccountPurchasePayment } from "@/api/financialManagement/accountPurchasePayment.js";
 
 defineOptions({
   name: "浠樻鐢宠",
 });
 
+const { proxy } = getCurrentInstance();
+const { checkout_payment } = proxy.useDict("checkout_payment");
+
 const filters = reactive({
-  applyCode: "",
+  invoiceApplicationNo: "",
   supplierId: "",
   status: "",
+  dateRange: [],
 });
 
 const pagination = reactive({
@@ -149,199 +366,634 @@
 const columns = [
   { label: "鐢宠鍗曞彿", prop: "applyCode", width: "150" },
   { label: "渚涘簲鍟�", prop: "supplierName", width: "180" },
-  { label: "浠樻閲戦", prop: "amount", slot: "amount" },
-  { label: "浠樻鏂瑰紡", prop: "paymentMethod", slot: "paymentMethod" },
+  { label: "浠樻閲戦", prop: "amount", dataType: "slot", slot: "amount" },
+  { label: "浠樻鏂瑰紡", prop: "paymentMethod", dataType: "slot", slot: "paymentMethod", width: "120" },
   { label: "鐢宠鏃ユ湡", prop: "applyDate", width: "120" },
-  { label: "鏈熸湜浠樻鏃�", prop: "expectedDate", width: "120" },
-  { label: "鐘舵��", prop: "status", slot: "status" },
-  { label: "鎿嶄綔", prop: "operation", slot: "operation", width: "200", fixed: "right" },
+  { label: "鐘舵��", prop: "status", dataType: "slot", slot: "status", width: "100" },
+  { label: "鎿嶄綔", prop: "operation", dataType: "slot", slot: "operation", width: "260", fixed: "right" },
 ];
 
 const dataList = ref([]);
-const selectedRows = ref([]);
+const tableLoading = ref(false);
 const dialogVisible = ref(false);
 const dialogTitle = ref("");
 const formRef = ref(null);
 const isEdit = ref(false);
+const isView = ref(false);
+const submitLoading = ref(false);
 const currentId = ref(null);
+const supplierList = ref([]);
 
-const supplierList = [
-  { id: 1, name: "鍖椾含鍘熸潗鏂欎緵搴斿晢" },
-  { id: 2, name: "涓婃捣鐢靛瓙鍏冨櫒浠跺叕鍙�" },
-  { id: 3, name: "骞垮窞鍖呰鏉愭枡鍘�" },
-  { id: 4, name: "娣卞湷浜旈噾閰嶄欢鍏徃" },
-];
+const inboundBatchList = ref([]);
+const inboundBatchOptions = ref([]);
+const inboundBatchLoading = ref(false);
+const inboundSelectVisible = ref(false);
+const inboundTableRef = ref(null);
+const dialogInboundSelection = ref([]);
 
-const inList = [
-  { inCode: "RK2024001", supplierId: 1 },
-  { inCode: "RK2024002", supplierId: 2 },
-  { inCode: "RK2024003", supplierId: 3 },
-];
+const paymentDialogVisible = ref(false);
+const paymentFormRef = ref(null);
+const paymentSubmitLoading = ref(false);
+
+const paymentForm = reactive({
+  paymentNumber: "",
+  invoiceApplicationNo: "",
+  supplierName: "",
+  supplierId: "",
+  accountPaymentApplicationId: null,
+  paymentDate: "",
+  paymentAmount: 0,
+  paymentMethod: "",
+  bankAccount: "",
+  bankName: "",
+  remark: "",
+});
+
+const paymentRules = {
+  paymentDate: [{ required: true, message: "璇烽�夋嫨浠樻鏃ユ湡", trigger: "change" }],
+  paymentAmount: [{ required: true, message: "璇疯緭鍏ヤ粯娆鹃噾棰�", trigger: "blur" }],
+  paymentMethod: [{ required: true, message: "璇烽�夋嫨浠樻鏂瑰紡", trigger: "change" }],
+};
+
+const STATUS_LABEL_MAP = { 0: "寰呭鏍�", 1: "瀹℃牳閫氳繃", 2: "瀹℃牳涓嶉�氳繃" };
+const STATUS_TYPE_MAP = { 0: "warning", 1: "success", 2: "danger" };
 
 const form = reactive({
-  applyCode: "",
+  invoiceApplicationNo: "",
   supplierId: "",
-  amount: 0,
-  paymentMethod: "bank_transfer",
+  paymentAmount: 0,
+  paymentMethod: "",
   applyDate: "",
-  expectedDate: "",
-  relatedDocs: [],
-  reason: "",
+  paymentContent: "",
   remark: "",
+  stockInRecordIds: [],
+  inboundBatches: "",
+  status: 0,
 });
 
 const rules = {
   supplierId: [{ required: true, message: "璇烽�夋嫨渚涘簲鍟�", trigger: "change" }],
-  amount: [{ required: true, message: "璇疯緭鍏ヤ粯娆鹃噾棰�", trigger: "blur" }],
+  stockInRecordIds: [{ required: true, type: "array", min: 1, message: "璇烽�夋嫨鍏宠仈鍏ュ簱鍗�", trigger: "change" }],
+  paymentAmount: [{ required: true, message: "璇疯緭鍏ヤ粯娆鹃噾棰�", trigger: "blur" }],
   paymentMethod: [{ required: true, message: "璇烽�夋嫨浠樻鏂瑰紡", trigger: "change" }],
   applyDate: [{ required: true, message: "璇烽�夋嫨鐢宠鏃ユ湡", trigger: "change" }],
-  expectedDate: [{ required: true, message: "璇烽�夋嫨鏈熸湜浠樻鏃ユ湡", trigger: "change" }],
 };
-
-const mockData = [
-  { id: 1, applyCode: "FK2024001", supplierId: 1, supplierName: "鍖椾含鍘熸潗鏂欎緵搴斿晢", amount: 5000, paymentMethod: "bank_transfer", applyDate: "2024-01-12", expectedDate: "2024-01-15", status: "pending", relatedDocs: ["RK2024001"], reason: "鏀粯鍘熸潗鏂欒揣娆�", remark: "" },
-  { id: 2, applyCode: "FK2024002", supplierId: 2, supplierName: "涓婃捣鐢靛瓙鍏冨櫒浠跺叕鍙�", amount: 8000, paymentMethod: "bank_transfer", applyDate: "2024-01-14", expectedDate: "2024-01-18", status: "approved", relatedDocs: ["RK2024002"], reason: "鏀粯鐢靛瓙鍏冨櫒浠惰揣娆�", remark: "" },
-  { id: 3, applyCode: "FK2024003", supplierId: 3, supplierName: "骞垮窞鍖呰鏉愭枡鍘�", amount: 3000, paymentMethod: "cash", applyDate: "2024-01-16", expectedDate: "2024-01-20", status: "paid", relatedDocs: ["RK2024003"], reason: "鏀粯鍖呰鏉愭枡璐ф", remark: "" },
-];
 
 const formatMoney = (value) => {
   if (value === undefined || value === null) return "0.00";
   return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
 
-const getPaymentMethodLabel = (method) => {
-  const map = {
-    bank_transfer: "閾惰杞处",
-    cash: "鐜伴噾",
-    check: "鏀エ",
-    draft: "姹囩エ",
+const normalizeStatus = (status) => {
+  if (status === undefined || status === null || status === "") return 0;
+  const num = Number(status);
+  return Number.isNaN(num) ? 0 : num;
+};
+
+const isPendingStatus = (status) => normalizeStatus(status) === 0;
+
+const isApprovedStatus = (status) => normalizeStatus(status) === 1;
+
+const isBankTransferPayment = (method) => {
+  if (method === undefined || method === null || method === "") return false;
+  const item = checkout_payment.value?.find((m) => String(m.value) === String(method));
+  if (item?.label?.includes("閾惰")) return true;
+  return String(method) === "bank_transfer" || String(method).toLowerCase().includes("bank");
+};
+
+const getStatusLabel = (status) => STATUS_LABEL_MAP[normalizeStatus(status)] ?? "寰呭鏍�";
+
+const getStatusType = (status) => STATUS_TYPE_MAP[normalizeStatus(status)] ?? "warning";
+
+const getPaymentMethodLabel = (value) => {
+  if (value === undefined || value === null || value === "") return "-";
+  const item = checkout_payment.value?.find((m) => String(m.value) === String(value));
+  return item?.label ?? value;
+};
+
+const getDefaultPaymentMethod = () => checkout_payment.value?.[0]?.value ?? "";
+
+const parseStockInRecordIds = (value) => {
+  if (!value) return [];
+  if (Array.isArray(value)) return value;
+  return String(value)
+    .split(/[,锛宂/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => (/^\d+$/.test(s) ? Number(s) : s));
+};
+
+const formatInboundBatches = (value) => {
+  if (value === undefined || value === null || value === "") return "";
+  if (Array.isArray(value)) return value.filter(Boolean).join("銆�");
+  return String(value)
+    .split(/[,锛宂/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .join("銆�");
+};
+
+const isSameInboundId = (a, b) => String(a) === String(b);
+
+const getInboundRowId = (row) => row?.id ?? row?.stockInRecordId;
+
+const getInboundRowTaxInclusiveAmount = (row) =>
+  Number(row?.inboundAmount ?? row?.taxInclusivePrice ?? row?.totalAmount ?? row?.amount ?? 0);
+
+const normalizeInboundBatchOptions = (data) => {
+  const list = Array.isArray(data) ? data : [];
+  return list.map((item, index) => {
+    const label =
+      item.inboundBatches ?? item.batchNo ?? item.inboundNo ?? `鍏ュ簱鍗�${index + 1}`;
+    const value = item.id ?? item.stockInRecordId ?? label;
+    return {
+      label: String(label),
+      value,
+      inboundAmount: getInboundRowTaxInclusiveAmount(item),
+    };
+  });
+};
+
+const syncPaymentAmount = () => {
+  const selected = form.stockInRecordIds || [];
+  let sum = inboundBatchOptions.value
+    .filter((opt) => selected.some((id) => isSameInboundId(id, opt.value)))
+    .reduce((acc, opt) => acc + (Number(opt.inboundAmount) || 0), 0);
+
+  if (sum <= 0 && selected.length) {
+    sum = inboundBatchList.value
+      .filter((row) => selected.some((id) => isSameInboundId(id, getInboundRowId(row))))
+      .reduce((acc, row) => acc + getInboundRowTaxInclusiveAmount(row), 0);
+  }
+
+  form.paymentAmount = sum > 0 ? Number(sum.toFixed(2)) : 0;
+};
+
+const inboundBatchDisplayText = computed(() => {
+  if (form.inboundBatches) return form.inboundBatches;
+  const ids = form.stockInRecordIds || [];
+  if (!ids.length) return "";
+  const labels = inboundBatchOptions.value
+    .filter((opt) => ids.some((id) => isSameInboundId(id, opt.value)))
+    .map((opt) => opt.label);
+  if (labels.length) return labels.join("銆�");
+  return ids.join("銆�");
+});
+
+const normalizeTableRow = (row) => ({
+  ...row,
+  applyCode: row.invoiceApplicationNo ?? row.applyCode,
+  amount: row.paymentAmount ?? row.amount,
+  reason: row.paymentContent ?? row.reason,
+  status: normalizeStatus(row.status),
+  stockInRecordIds: row.stockInRecordIds ?? "",
+  inboundBatches: formatInboundBatches(row.inboundBatches),
+});
+
+const fillFormFromRow = (row) => {
+  const stockInRecordIds = parseStockInRecordIds(row.stockInRecordIds);
+  Object.assign(form, {
+    invoiceApplicationNo: row.invoiceApplicationNo ?? row.applyCode ?? "",
+    supplierId: row.supplierId,
+    paymentAmount: Number(row.paymentAmount ?? row.amount ?? 0),
+    paymentMethod: row.paymentMethod ?? getDefaultPaymentMethod(),
+    applyDate: row.applyDate ?? "",
+    paymentContent: row.paymentContent ?? row.reason ?? "",
+    remark: row.remark ?? "",
+    stockInRecordIds,
+    inboundBatches: formatInboundBatches(row.inboundBatches),
+    status: normalizeStatus(row.status),
+  });
+};
+
+const buildPayloadFromRow = (row, statusOverride) => ({
+  id: row.id,
+  supplierId: row.supplierId,
+  stockInRecordIds:
+    typeof row.stockInRecordIds === "string"
+      ? row.stockInRecordIds
+      : (row.stockInRecordIds || []).join(","),
+  invoiceApplicationNo: row.invoiceApplicationNo ?? row.applyCode ?? "",
+  paymentMethod: row.paymentMethod,
+  paymentContent: row.paymentContent ?? row.reason ?? "",
+  applyDate: row.applyDate,
+  remark: row.remark ?? "",
+  status: statusOverride !== undefined ? statusOverride : normalizeStatus(row.status),
+  paymentAmount: Number(row.paymentAmount ?? row.amount ?? 0),
+});
+
+const buildSubmitPayload = (forUpdate = false) => {
+  const payload = {
+    supplierId: form.supplierId,
+    stockInRecordIds: (form.stockInRecordIds || []).join(","),
+    invoiceApplicationNo: form.invoiceApplicationNo || "",
+    paymentMethod: form.paymentMethod,
+    paymentContent: form.paymentContent || "",
+    applyDate: form.applyDate,
+    remark: form.remark || "",
+    status: 0,
+    paymentAmount: form.paymentAmount,
   };
-  return map[method] || method;
+  if (forUpdate) {
+    payload.id = currentId.value;
+  }
+  return payload;
 };
 
-const getStatusLabel = (status) => {
-  const map = { pending: "寰呭鎵�", approved: "宸插鎵�", rejected: "宸查┏鍥�", paid: "宸蹭粯娆�" };
-  return map[status] || status;
+const getSupplierList = () => {
+  getOptions().then((res) => {
+    if (res.code === 200) {
+      supplierList.value = res.data ?? [];
+    }
+  });
 };
 
-const getStatusType = (status) => {
-  const map = { pending: "warning", approved: "success", rejected: "danger", paid: "primary" };
-  return map[status] || "";
+const appendFilterParams = (params) => {
+  if (filters.invoiceApplicationNo) {
+    params.invoiceApplicationNo = filters.invoiceApplicationNo;
+  }
+  if (filters.supplierId) {
+    params.supplierId = filters.supplierId;
+  }
+  if (filters.status !== "" && filters.status != null) {
+    params.status = filters.status;
+  }
+  if (filters.dateRange?.length === 2) {
+    params.startDate = filters.dateRange[0];
+    params.endDate = filters.dateRange[1];
+  }
+  return params;
+};
+
+const buildListParams = () =>
+  appendFilterParams({
+    current: pagination.currentPage,
+    size: pagination.pageSize,
+  });
+
+const buildExportParams = () => appendFilterParams({});
+
+const handleExport = () => {
+  proxy.download(
+    "/accountPaymentApplication/exportAccountPaymentApplication",
+    buildExportParams(),
+    `浠樻鐢宠_${Date.now()}.xlsx`
+  );
 };
 
 const getTableData = () => {
-  let result = [...mockData];
-  if (filters.applyCode) {
-    result = result.filter(item => item.applyCode.includes(filters.applyCode));
-  }
-  if (filters.supplierId) {
-    result = result.filter(item => item.supplierId === filters.supplierId);
-  }
-  if (filters.status) {
-    result = result.filter(item => item.status === filters.status);
-  }
-  pagination.total = result.length;
-  dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
+  tableLoading.value = true;
+  listPageAccountPaymentApplication(buildListParams())
+    .then((res) => {
+      if (res.code === 200) {
+        dataList.value = (res.data?.records ?? []).map(normalizeTableRow);
+        pagination.total = res.data?.total ?? 0;
+      } else {
+        dataList.value = [];
+        pagination.total = 0;
+        ElMessage.error(res.msg || "鏌ヨ澶辫触");
+      }
+    })
+    .catch(() => {
+      dataList.value = [];
+      pagination.total = 0;
+      ElMessage.error("鏌ヨ澶辫触");
+    })
+    .finally(() => {
+      tableLoading.value = false;
+    });
 };
 
-const resetFilters = () => {
-  filters.applyCode = "";
-  filters.supplierId = "";
-  filters.status = "";
+const onSearch = () => {
   pagination.currentPage = 1;
   getTableData();
 };
 
-const changePage = ({ current, size }) => {
-  pagination.currentPage = current;
-  pagination.pageSize = size;
+const resetFilters = () => {
+  filters.invoiceApplicationNo = "";
+  filters.supplierId = "";
+  filters.status = "";
+  filters.dateRange = [];
+  pagination.currentPage = 1;
   getTableData();
 };
 
-const handleSelectionChange = (selection) => {
-  selectedRows.value = selection;
+const changePage = ({ page, limit }) => {
+  pagination.currentPage = page;
+  pagination.pageSize = limit;
+  getTableData();
+};
+
+const closeDialog = () => {
+  dialogVisible.value = false;
+  isView.value = false;
+  isEdit.value = false;
+  inboundSelectVisible.value = false;
+};
+
+const resetForm = () => {
+  Object.assign(form, {
+    invoiceApplicationNo: "",
+    supplierId: "",
+    paymentAmount: 0,
+    paymentMethod: getDefaultPaymentMethod(),
+    applyDate: new Date().toISOString().split("T")[0],
+    paymentContent: "",
+    remark: "",
+    stockInRecordIds: [],
+    inboundBatches: "",
+    status: 0,
+  });
+  inboundBatchList.value = [];
+  inboundBatchOptions.value = [];
 };
 
 const add = () => {
   isEdit.value = false;
+  isView.value = false;
   dialogTitle.value = "鏂板浠樻鐢宠";
-  Object.assign(form, {
-    applyCode: "FK" + Date.now().toString().slice(-8),
-    supplierId: "",
-    amount: 0,
-    paymentMethod: "bank_transfer",
-    applyDate: new Date().toISOString().split('T')[0],
-    expectedDate: "",
-    relatedDocs: [],
-    reason: "",
-    remark: "",
-  });
+  resetForm();
   dialogVisible.value = true;
 };
 
 const edit = (row) => {
   isEdit.value = true;
+  isView.value = false;
   currentId.value = row.id;
   dialogTitle.value = "缂栬緫浠樻鐢宠";
-  Object.assign(form, row);
+  fillFormFromRow(row);
   dialogVisible.value = true;
 };
 
 const view = (row) => {
-  ElMessage.info(`鏌ョ湅鐢宠鍗�: ${row.applyCode}`);
+  isView.value = true;
+  isEdit.value = false;
+  dialogTitle.value = "鏌ョ湅浠樻鐢宠";
+  fillFormFromRow(row);
+  if (row.supplierId) {
+    loadInboundBatches(row.supplierId, true, false);
+  }
+  dialogVisible.value = true;
+};
+
+const submitAudit = (row, status) => {
+  auditAccountPaymentApplication(buildPayloadFromRow(row, status))
+    .then((res) => {
+      if (res.code === 200) {
+        ElMessage.success(status === 1 ? "瀹℃牳閫氳繃" : "瀹℃牳涓嶉�氳繃");
+        getTableData();
+      } else {
+        ElMessage.error(res.msg || "瀹℃牳澶辫触");
+      }
+    })
+    .catch(() => {
+      ElMessage.error("瀹℃牳澶辫触");
+    });
 };
 
 const handleAudit = (row) => {
-  ElMessageBox.confirm("纭瀹℃壒閫氳繃璇ヤ粯娆剧敵璇峰悧锛�", "鎻愮ず", {
-    confirmButtonText: "閫氳繃",
-    cancelButtonText: "椹冲洖",
+  ElMessageBox.confirm("璇烽�夋嫨瀹℃牳缁撴灉", "浠樻鐢宠瀹℃牳", {
+    confirmButtonText: "瀹℃牳閫氳繃",
+    cancelButtonText: "瀹℃牳涓嶉�氳繃",
     distinguishCancelAndClose: true,
     type: "warning",
-  }).then(() => {
-    const index = mockData.findIndex(item => item.id === row.id);
-    if (index !== -1) {
-      mockData[index].status = "approved";
-    }
-    ElMessage.success("瀹℃壒閫氳繃");
-    getTableData();
-  }).catch((action) => {
-    if (action === "cancel") {
-      const index = mockData.findIndex(item => item.id === row.id);
-      if (index !== -1) {
-        mockData[index].status = "rejected";
+  })
+    .then(() => {
+      submitAudit(row, 1);
+    })
+    .catch((action) => {
+      if (action === "cancel") {
+        submitAudit(row, 2);
       }
-      ElMessage.warning("宸查┏鍥�");
-      getTableData();
-    }
+    });
+};
+
+const openPaymentDialog = (row) => {
+  Object.assign(paymentForm, {
+    paymentNumber: "",
+    invoiceApplicationNo: row.invoiceApplicationNo ?? row.applyCode ?? "",
+    supplierName: row.supplierName ?? "",
+    supplierId: row.supplierId,
+    accountPaymentApplicationId: row.id,
+    paymentDate: new Date().toISOString().split("T")[0],
+    paymentAmount: Number(row.paymentAmount ?? row.amount ?? 0),
+    paymentMethod: row.paymentMethod ?? getDefaultPaymentMethod(),
+    bankAccount: row.bankAccountNum ?? row.bankAccount ?? "",
+    bankName: row.bankAccountName ?? row.bankName ?? "",
+    remark: "",
+  });
+  paymentDialogVisible.value = true;
+  nextTick(() => {
+    paymentFormRef.value?.clearValidate();
   });
 };
 
-const handleBatchApply = () => {
-  ElMessage.success(`鎵归噺鐢宠 ${selectedRows.value.length} 鏉¤褰昤);
+const submitPayment = () => {
+  paymentFormRef.value?.validate((valid) => {
+    if (!valid) return;
+    paymentSubmitLoading.value = true;
+    addAccountPurchasePayment({
+      accountPaymentApplicationId: paymentForm.accountPaymentApplicationId,
+      supplierId: paymentForm.supplierId,
+      paymentDate: paymentForm.paymentDate,
+      paymentMethod: paymentForm.paymentMethod,
+      paymentAmount: paymentForm.paymentAmount,
+      paymentNumber: paymentForm.paymentNumber || "",
+      remark: paymentForm.remark || "",
+    })
+      .then((res) => {
+        if (res.code === 200) {
+          ElMessage.success("浠樻鎴愬姛");
+          paymentDialogVisible.value = false;
+          getTableData();
+        } else {
+          ElMessage.error(res.msg || "浠樻澶辫触");
+        }
+      })
+      .catch(() => {
+        ElMessage.error("浠樻澶辫触");
+      })
+      .finally(() => {
+        paymentSubmitLoading.value = false;
+      });
+  });
+};
+
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`纭鍒犻櫎鐢宠鍗曘��${row.applyCode ?? row.invoiceApplicationNo}銆嶅悧锛焋, "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  }).then(() => {
+    deleteAccountPaymentApplication([row.id])
+      .then((res) => {
+        if (res.code === 200) {
+          ElMessage.success("鍒犻櫎鎴愬姛");
+          getTableData();
+        } else {
+          ElMessage.error(res.msg || "鍒犻櫎澶辫触");
+        }
+      })
+      .catch(() => {
+        ElMessage.error("鍒犻櫎澶辫触");
+      });
+  });
 };
 
 const submitForm = () => {
-  formRef.value.validate((valid) => {
-    if (valid) {
-      const supplier = supplierList.find(item => item.id === form.supplierId);
-      if (isEdit.value) {
-        const index = mockData.findIndex(item => item.id === currentId.value);
-        if (index !== -1) {
-          mockData[index] = { ...mockData[index], ...form, supplierName: supplier?.name };
+  formRef.value?.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    const request = isEdit.value
+      ? updateAccountPaymentApplication(buildSubmitPayload(true))
+      : addAccountPaymentApplication(buildSubmitPayload(false));
+
+    request
+      .then((res) => {
+        if (res.code === 200) {
+          ElMessage.success(isEdit.value ? "缂栬緫鎴愬姛" : "鏂板鎴愬姛");
+          closeDialog();
+          pagination.currentPage = 1;
+          getTableData();
+        } else {
+          ElMessage.error(res.msg || "淇濆瓨澶辫触");
         }
-        ElMessage.success("缂栬緫鎴愬姛");
-      } else {
-        const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1;
-        mockData.push({ id: newId, ...form, supplierName: supplier?.name, status: "pending" });
-        ElMessage.success("鏂板鎴愬姛");
-      }
-      dialogVisible.value = false;
-      getTableData();
-    }
+      })
+      .catch(() => {
+        ElMessage.error("淇濆瓨澶辫触");
+      })
+      .finally(() => {
+        submitLoading.value = false;
+      });
   });
 };
 
+const ensureInboundOptionsForSelected = () => {
+  const ids = form.stockInRecordIds || [];
+  ids.forEach((id) => {
+    const exists = inboundBatchOptions.value.some((opt) => isSameInboundId(opt.value, id));
+    if (exists) return;
+    const fromList = inboundBatchList.value.find((row) => isSameInboundId(getInboundRowId(row), id));
+    if (fromList) {
+      const [option] = normalizeInboundBatchOptions([fromList]);
+      if (option) inboundBatchOptions.value.push(option);
+      return;
+    }
+    inboundBatchOptions.value.push({
+      label: String(id),
+      value: id,
+      inboundAmount: 0,
+    });
+  });
+};
+
+const restoreInboundTableSelection = () => {
+  nextTick(() => {
+    const table = inboundTableRef.value;
+    if (!table) return;
+    table.clearSelection();
+    const selectedIds = new Set((form.stockInRecordIds || []).map((id) => String(id)));
+    inboundBatchList.value.forEach((row) => {
+      const rowId = getInboundRowId(row);
+      if (rowId !== undefined && rowId !== null && selectedIds.has(String(rowId))) {
+        table.toggleRowSelection(row, true);
+      }
+    });
+  });
+};
+
+const loadInboundBatches = (supplierId, keepSelected = false, syncAmount = true) => {
+  if (!supplierId) {
+    inboundBatchList.value = [];
+    inboundBatchOptions.value = [];
+    if (!keepSelected) {
+      form.stockInRecordIds = [];
+      form.inboundBatches = "";
+      form.paymentAmount = 0;
+    }
+    return Promise.resolve();
+  }
+  inboundBatchLoading.value = true;
+  return getInboundBatchesBySupplier({ supplierId })
+    .then((res) => {
+      if (res.code === 200) {
+        const list = res.data?.records ?? res.data ?? [];
+        inboundBatchList.value = Array.isArray(list) ? list : [];
+        inboundBatchOptions.value = normalizeInboundBatchOptions(list);
+      } else {
+        inboundBatchList.value = [];
+        inboundBatchOptions.value = [];
+      }
+    })
+    .catch(() => {
+      inboundBatchList.value = [];
+      inboundBatchOptions.value = [];
+    })
+    .finally(() => {
+      inboundBatchLoading.value = false;
+      if (keepSelected) {
+        ensureInboundOptionsForSelected();
+        restoreInboundTableSelection();
+        if (syncAmount && !isView.value) {
+          syncPaymentAmount();
+        }
+      }
+    });
+};
+
+const handleSupplierChange = (supplierId) => {
+  form.stockInRecordIds = [];
+  form.inboundBatches = "";
+  form.paymentAmount = 0;
+  loadInboundBatches(supplierId);
+};
+
+const handleInboundInputClick = () => {
+  if (isEdit.value || isView.value) return;
+  openInboundSelectDialog();
+};
+
+const openInboundSelectDialog = () => {
+  if (!form.supplierId || isEdit.value || isView.value) return;
+  inboundSelectVisible.value = true;
+  loadInboundBatches(form.supplierId, true, false).then(() => {
+    restoreInboundTableSelection();
+  });
+};
+
+const handleInboundDialogSelectionChange = (selection) => {
+  dialogInboundSelection.value = selection;
+};
+
+const confirmInboundSelection = () => {
+  if (dialogInboundSelection.value.length === 0) {
+    ElMessage.warning("璇疯嚦灏戦�夋嫨涓�鏉″叆搴撳崟");
+    return;
+  }
+  form.stockInRecordIds = dialogInboundSelection.value
+    .map((row) => getInboundRowId(row))
+    .filter((id) => id !== undefined && id !== null);
+  form.inboundBatches = dialogInboundSelection.value
+    .map((row) => row.inboundBatches ?? row.batchNo ?? "")
+    .filter(Boolean)
+    .join("銆�");
+  dialogInboundSelection.value.forEach((row) => {
+    const [option] = normalizeInboundBatchOptions([row]);
+    if (option && !inboundBatchOptions.value.some((opt) => isSameInboundId(opt.value, option.value))) {
+      inboundBatchOptions.value.push(option);
+    }
+  });
+  inboundSelectVisible.value = false;
+  syncPaymentAmount();
+  formRef.value?.validateField("stockInRecordIds");
+};
+
+const handleInboundDialogClosed = () => {
+  dialogInboundSelection.value = [];
+};
+
 onMounted(() => {
+  getSupplierList();
   getTableData();
 });
 </script>
@@ -357,4 +1009,8 @@
   color: #f56c6c;
   font-weight: bold;
 }
+
+.inbound-batch-input :deep(.el-input__wrapper) {
+  cursor: pointer;
+}
 </style>

--
Gitblit v1.9.3