From cec4c323a7920ca72c7e8481babac5eac4b217e4 Mon Sep 17 00:00:00 2001
From: b2894lxlx <517289602@qq.com>
Date: Thu, 27 Aug 2026 18:21:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BB=98=E6=AC=BE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/payment/paymentApplication.js         |   6 +
 .../payment/payment-application-form.vue      | 978 ++++++++++++++----
 src/views/payment/payment-application.vue     |  22 +-
 .../components/formal-settlement-editor.vue   | 346 ++++++-
 4 files changed, 1133 insertions(+), 219 deletions(-)

diff --git a/src/api/payment/paymentApplication.js b/src/api/payment/paymentApplication.js
index 3031f6f..bc772d0 100644
--- a/src/api/payment/paymentApplication.js
+++ b/src/api/payment/paymentApplication.js
@@ -4,6 +4,12 @@ const baseUrl = '/blade-transport/payment-application';
 export const getList = (current, size, params) =>
   request({ url: `${baseUrl}/list`, method: 'get', params: { current, size, ...params } });
 export const getDetail = id => request({ url: `${baseUrl}/detail`, method: 'get', params: { id } });
+export const getReferenceAmount = (paymentType, referenceId, excludeId) =>
+  request({
+    url: `${baseUrl}/reference-amount`,
+    method: 'get',
+    params: { paymentType, referenceId, excludeId: excludeId || undefined },
+  });
 export const save = data => request({ url: `${baseUrl}/save`, method: 'post', data });
 export const remove = id => request({ url: `${baseUrl}/remove`, method: 'post', params: { id } });
 export const submit = data => request({ url: `${baseUrl}/submit`, method: 'post', data });
diff --git a/src/views/payment/payment-application-form.vue b/src/views/payment/payment-application-form.vue
index de71c7b..5cf9582 100644
--- a/src/views/payment/payment-application-form.vue
+++ b/src/views/payment/payment-application-form.vue
@@ -55,8 +55,14 @@
               ><el-input v-model="form.contractName" disabled /></el-form-item
           ></el-col>
           <el-col :span="6"
-            ><el-form-item label="结算金额"
-              ><el-input v-model="form.settlementAmount" disabled /></el-form-item
+            ><el-form-item label="结算金额" prop="settlementAmount"
+              ><el-input-number
+                v-model="form.settlementAmount"
+                :disabled="readonly || form.paymentType !== 'project_advance'"
+                :min="0"
+                :precision="2"
+                :controls="false"
+                style="width: 100%" /></el-form-item
           ></el-col>
           <el-col :span="6"
             ><el-form-item label="可付款金额"
@@ -68,15 +74,18 @@
           ></el-col>
           <el-col :span="6"
             ><el-form-item label="付款比例" prop="paymentRatio"
-              ><el-input-number
-                v-model="form.paymentRatio"
-                :disabled="readonly"
-                :min="0"
-                :max="100"
-                :precision="2"
-                :controls="false"
-                style="width: 100%" /></el-form-item
-          ></el-col>
+              ><div class="payment-form-page__percentage-input">
+                <el-input-number
+                  v-model="form.paymentRatio"
+                  :disabled="readonly"
+                  :min="0"
+                  :max="100"
+                  :precision="2"
+                  :controls="false"
+                /><span class="payment-form-page__percentage-append">%</span>
+              </div></el-form-item
+            ></el-col
+          >
           <el-col :span="6"
             ><el-form-item label="申请付款金额" prop="appliedAmount"
               ><el-input-number
@@ -162,7 +171,7 @@
           ></el-col>
         </el-row>
       </section-card>
-      <section-card title="结算信息">
+      <section-card v-if="form.paymentType !== 'project_advance'" title="结算信息">
         <el-table :data="settlementRows" border
           ><el-table-column type="index" label="序号" width="70" /><el-table-column
             prop="settlementNo"
@@ -182,73 +191,38 @@
             min-width="130"
         /></el-table>
       </section-card>
-      <section-card title="发票信息">
-        <div class="payment-form-page__section-actions">
-          <el-button type="primary" plain :disabled="readonly" @click="addInvoice"
-            >新增发票</el-button
-          >
-        </div>
-        <el-table :data="form.invoices" border
-          ><el-table-column type="index" label="序号" width="70" /><el-table-column
-            prop="settlementNo"
-            label="结算单号"
-            min-width="120"
-          /><el-table-column label="发票号" min-width="140"
-            ><template #default="{ row }"
-              ><el-input v-model="row.invoiceNo" :disabled="readonly" /></template></el-table-column
-          ><el-table-column label="开票日期" min-width="150"
-            ><template #default="{ row }"
-              ><el-date-picker
-                v-model="row.invoiceDate"
-                value-format="YYYY-MM-DD"
-                :disabled="readonly" /></template></el-table-column
-          ><el-table-column label="发票类型" min-width="130"
-            ><template #default="{ row }"
-              ><el-input
-                v-model="row.invoiceType"
-                :disabled="readonly" /></template></el-table-column
-          ><el-table-column label="税率" min-width="100"
-            ><template #default="{ row }"
-              ><el-input-number
-                v-model="row.taxRate"
-                :disabled="readonly"
-                :min="0"
-                :max="100"
-                :controls="false" /></template></el-table-column
-          ><el-table-column label="发票金额（含税）" min-width="150"
-            ><template #default="{ row }"
-              ><el-input-number
-                v-model="row.invoiceAmount"
-                :disabled="readonly"
-                :min="0"
-                :precision="2"
-                :controls="false" /></template></el-table-column
-          ><el-table-column label="匹配金额（含税）" min-width="150"
-            ><template #default="{ row }"
-              ><el-input-number
-                v-model="row.matchedAmount"
-                :disabled="readonly"
-                :min="0"
-                :precision="2"
-                :controls="false" /></template></el-table-column
-          ><el-table-column label="操作" width="100"
-            ><template #default="{ $index }"
-              ><el-link v-if="!readonly" type="danger" @click="form.invoices.splice($index, 1)"
-                >删除</el-link
-              ></template
-            ></el-table-column
-          ></el-table
-        >
+      <section-card v-if="form.paymentType !== 'project_advance'" title="发票信息">
+        <el-table :data="form.invoices" border>
+          <el-table-column type="index" label="序号" width="70" />
+          <el-table-column prop="settlementNo" label="结算单号" min-width="120" />
+          <el-table-column prop="invoiceNo" label="发票号" min-width="140" />
+          <el-table-column prop="invoiceDate" label="开票日期" min-width="150" />
+          <el-table-column prop="invoiceType" label="发票类型" min-width="130" />
+          <el-table-column label="税率" min-width="100">
+            <template #default="{ row }">{{ Number(row.taxRate || 0) }}%</template>
+          </el-table-column>
+          <el-table-column label="发票金额（含税）" min-width="150">
+            <template #default="{ row }">{{ formatMoney(row.invoiceAmount) }}</template>
+          </el-table-column>
+          <el-table-column label="匹配金额（含税）" min-width="150">
+            <template #default="{ row }">{{ formatMoney(row.matchedAmount) }}</template>
+          </el-table-column>
+          <el-table-column v-if="!readonly" label="操作" width="100">
+            <template #default="{ $index }">
+              <el-link type="danger" @click="form.invoices.splice($index, 1)">删除</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
       </section-card>
       <section-card title="付款记录">
         <el-table :data="paymentRecords" border
           ><el-table-column type="index" label="序号" width="70" /><el-table-column
-            prop="paidAmount"
             label="付款金额"
-            min-width="160" /><el-table-column
-            prop="paidDate"
-            label="付款日期"
-            min-width="150" /><el-table-column
+            min-width="160"
+            ><template #default="{ row }">{{
+              formatMoney(row.paidAmount)
+            }}</template></el-table-column
+          ><el-table-column prop="paidDate" label="付款日期" min-width="150" /><el-table-column
             prop="paymentNo"
             label="付款单号"
             min-width="160" /><el-table-column
@@ -265,15 +239,15 @@
           </span>
         </template>
         <div v-loading="attachmentRuleLoading" class="payment-form-page__attachment-checklist">
-          <span class="payment-form-page__attachment-checklist-label">材料清单</span>
-          <el-tag
-            v-for="item in requiredAttachmentMaterials"
-            :key="item.key"
-            :type="hasAttachmentMaterial(item) ? 'success' : 'danger'"
-            effect="plain"
+          <el-button
+            class="payment-form-page__attachment-download"
+            type="primary"
+            plain
+            :disabled="!downloadableAttachments.length"
+            @click="handleAttachmentBatchDownload"
           >
-            {{ item.label }}（{{ hasAttachmentMaterial(item) ? '已上传' : '未上传' }}）
-          </el-tag>
+            批量下载
+          </el-button>
         </div>
         <el-table :data="form.attachments" border
           ><el-table-column type="index" label="序号" width="70" /><el-table-column
@@ -290,24 +264,37 @@
                   value="special_approval" /><el-option
                   label="其他"
                   value="other" /></el-select></template></el-table-column
-          ><el-table-column prop="originalName" label="文件名" min-width="220" /><el-table-column
-            label="附件描述"
-            min-width="220"
+          ><el-table-column label="文件名" min-width="220"
+            ><template #default="{ row }"
+              ><div
+                class="payment-form-page__attachment-file-name-cell"
+                :title="attachmentFileName(row) || '-'"
+              >
+                <span
+                  class="payment-form-page__attachment-file-name"
+                  :class="{ 'is-disabled': !attachmentFileUrl(row) }"
+                  @click="attachmentFileUrl(row) && previewAttachment(row)"
+                  >{{ attachmentFileName(row) || '-' }}</span
+                >
+              </div></template
+            ></el-table-column
+          ><el-table-column label="附件描述" min-width="220"
             ><template #default="{ row }"
               ><el-input
                 v-model="row.description"
                 :disabled="readonly"
                 maxlength="200" /></template></el-table-column
-          ><el-table-column prop="size" label="文件大小" width="120" /><el-table-column
-            prop="uploadUserName"
-            label="上传人"
-            width="130"
-          /><el-table-column prop="uploadTime" label="上传时间" width="170" /><el-table-column
-            label="操作"
-            width="100"
-            ><template #default="{ row, $index }"
-              ><el-link type="primary" :href="row.url || row.link" target="_blank">查看</el-link
-              ><el-link v-if="!readonly" type="danger" @click="form.attachments.splice($index, 1)"
+          ><el-table-column label="文件大小" width="120"
+            ><template #default="{ row }">{{
+              formatAttachmentSize(row)
+            }}</template></el-table-column
+          ><el-table-column prop="uploadUserName" label="上传人" width="130" /><el-table-column
+            prop="uploadTime"
+            label="上传时间"
+            width="170"
+          /><el-table-column v-if="!readonly" label="操作" width="100"
+            ><template #default="{ $index }"
+              ><el-link type="danger" @click="form.attachments.splice($index, 1)"
                 >删除</el-link
               ></template
             ></el-table-column
@@ -324,12 +311,15 @@
             :show-file-list="false"
             button-text="上传附件"
             @change="normalizeAttachments"
+            @success="handleManualAttachmentUpload"
           />
         </div>
       </section-card>
       <div class="payment-form-page__actions">
         <el-button @click="goBack">取消</el-button>
-        <el-button v-if="!readonly && canSave" type="primary" plain @click="saveDraft(false)">保存</el-button>
+        <el-button v-if="!readonly && canSave" type="primary" plain @click="saveDraft(false)"
+          >保存</el-button
+        >
         <el-button
           v-if="!readonly && canSave && hasPermission('payment_application_submit')"
           type="primary"
@@ -349,33 +339,160 @@
         @row-click="selectContract"
         ><el-table-column prop="projectName" label="所属项目" /><el-table-column
           prop="contractNo"
-          label="合同编号" /><el-table-column
-          prop="contractName"
-          label="合同名称" /><el-table-column prop="deptName" label="所属组织" /></el-table
-      ><el-tabs v-else v-model="referenceTab"
-        ><el-tab-pane label="正式结算单" name="formal"
-          ><el-table :data="formalRows" border @row-click="selectFormal"
-            ><el-table-column prop="formalSettlementNo" label="结算单号" /><el-table-column
-              prop="projectName"
-              label="所属项目" /><el-table-column
-              prop="contractName"
-              label="合同名称" /><el-table-column
-              prop="settlementAmount"
-              label="结算金额" /></el-table></el-tab-pane
-        ><el-tab-pane label="预结算单" name="pre"
-          ><el-table :data="preRows" border @row-click="selectPre"
-            ><el-table-column prop="preSettlementNo" label="结算单号" /><el-table-column
-              prop="projectName"
-              label="所属项目" /><el-table-column
-              prop="contractName"
-              label="合同名称" /><el-table-column
-              prop="settlementAmount"
-              label="结算金额" /></el-table></el-tab-pane></el-tabs
+          label="合同编号"
+        /><el-table-column prop="contractName" label="合同名称" /><el-table-column
+          prop="deptName"
+          label="所属组织"
+        /><el-table-column label="操作" width="100"
+          ><template #default="{ row }"
+            ><el-link type="primary" @click.stop="selectContract(row)">选择</el-link></template
+          ></el-table-column
+        ></el-table
+      >
+      <div v-else>
+        <div class="payment-form-page__reference-search">
+          <el-form
+            :model="referenceQuery"
+            label-position="right"
+            label-width="160px"
+            @submit.prevent
+          >
+            <div class="payment-form-page__reference-search-fields">
+              <el-form-item label="结算单号">
+                <el-input
+                  v-model="referenceQuery.settlementNo"
+                  clearable
+                  placeholder="请输入结算单号"
+                  @keyup.enter="handleReferenceSearch"
+                />
+              </el-form-item>
+              <el-form-item label="项目">
+                <el-input
+                  v-model="referenceQuery.projectName"
+                  clearable
+                  placeholder="请输入项目"
+                  @keyup.enter="handleReferenceSearch"
+                />
+              </el-form-item>
+              <el-form-item label="合同名称">
+                <el-input
+                  v-model="referenceQuery.contractName"
+                  clearable
+                  placeholder="请输入合同名称"
+                  @keyup.enter="handleReferenceSearch"
+                />
+              </el-form-item>
+            </div>
+            <div class="payment-form-page__reference-search-actions">
+              <el-button type="primary" @click="handleReferenceSearch">搜索</el-button>
+              <el-button @click="resetReferenceSearch">清空</el-button>
+            </div>
+          </el-form>
+        </div>
+        <el-tabs v-model="referenceTab" @tab-change="handleReferenceTabChange">
+          <el-tab-pane label="正式结算单" name="formal">
+            <el-table
+              v-loading="formalPage.loading"
+              :data="formalRows"
+              border
+              @row-click="selectFormal"
+            >
+              <el-table-column prop="formalSettlementNo" label="结算单号" />
+              <el-table-column prop="projectName" label="所属项目" />
+              <el-table-column prop="contractName" label="合同名称" />
+              <el-table-column prop="settlementAmount" label="结算金额" />
+              <el-table-column label="操作" width="100">
+                <template #default="{ row }">
+                  <el-link type="primary" @click.stop="selectFormal(row)">选择</el-link>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="payment-form-page__reference-pagination">
+              <el-pagination
+                v-model:current-page="formalPage.current"
+                v-model:page-size="formalPage.size"
+                :total="formalPage.total"
+                :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
+                @current-change="loadFormalReferences"
+                @size-change="handleFormalSizeChange"
+              />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="预结算单" name="pre">
+            <el-table v-loading="prePage.loading" :data="preRows" border @row-click="selectPre">
+              <el-table-column prop="preSettlementNo" label="结算单号" />
+              <el-table-column prop="projectName" label="所属项目" />
+              <el-table-column prop="contractName" label="合同名称" />
+              <el-table-column prop="settlementAmount" label="结算金额" />
+              <el-table-column label="操作" width="100">
+                <template #default="{ row }">
+                  <el-link type="primary" @click.stop="selectPre(row)">选择</el-link>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="payment-form-page__reference-pagination">
+              <el-pagination
+                v-model:current-page="prePage.current"
+                v-model:page-size="prePage.size"
+                :total="prePage.total"
+                :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
+                @current-change="loadPreReferences"
+                @size-change="handlePreSizeChange"
+              />
+            </div>
+          </el-tab-pane>
+        </el-tabs></div
     ></el-dialog>
+    <el-dialog
+      v-model="attachmentDocumentPreviewVisible"
+      :title="attachmentPreviewFile.name || '附件预览'"
+      append-to-body
+      destroy-on-close
+      width="90%"
+      top="4vh"
+    >
+      <pdf-preview
+        v-if="
+          attachmentDocumentPreviewVisible &&
+          attachmentPreviewFile.url &&
+          attachmentPreviewFile.isPdf
+        "
+        :source="attachmentPreviewFile.url"
+        @error="handleAttachmentPreviewError"
+      />
+      <open-file-viewer
+        v-else-if="attachmentDocumentPreviewVisible && attachmentPreviewFile.url"
+        :file="attachmentPreviewFile.url"
+        :file-name="attachmentPreviewFile.name"
+        :mime-type="attachmentPreviewFile.mimeType"
+        width="100%"
+        height="72vh"
+        fit="contain"
+        theme="auto"
+        locale="zh-CN"
+        :toolbar="attachmentViewerToolbar"
+        :plugins="attachmentViewerPlugins"
+        @unsupported="handleAttachmentPreviewUnsupported"
+        @error="handleAttachmentPreviewError"
+      />
+    </el-dialog>
+    <el-image-viewer
+      v-if="attachmentImagePreviewVisible"
+      :url-list="attachmentImagePreviewUrls"
+      :initial-index="attachmentImagePreviewIndex"
+      @close="attachmentImagePreviewVisible = false"
+    />
   </basic-container>
 </template>
 
 <script>
+import { ElImageViewer } from 'element-plus';
+import { OpenFileViewer } from '@open-file-viewer/vue';
+import { fallbackPlugin, imagePlugin, officePlugin, textPlugin } from '@open-file-viewer/core';
+import '@open-file-viewer/core/style.css';
+import pdfWorkerSrc from 'pdfjs-dist/build/pdf.worker.mjs?url';
 import { mapGetters } from 'vuex';
 import * as api from '@/api/payment/paymentApplication';
 import * as billLedgerApi from '@/api/payment/billLedger';
@@ -387,6 +504,15 @@ import {
   getList as getCustomerArchiveList,
 } from '@/api/vehicle/customer-archive';
 import { readSettlementTransfer, removeSettlementTransfer } from '@/utils/settlement-transfer';
+import { downloadFileByUrl } from '@/utils/util';
+import PdfPreview from '@/components/pdf-preview/main.vue';
+
+const attachmentViewerPlugins = [
+  imagePlugin(),
+  officePlugin({ pdf: { workerSrc: pdfWorkerSrc, useFetchData: true } }),
+  textPlugin(),
+  fallbackPlugin(),
+];
 
 const ATTACHMENT_MATERIALS = {
   weighingSlip: { key: 'weighingSlip', label: '磅单', keywords: ['磅单'] },
@@ -448,6 +574,11 @@ const emptyForm = () => ({
 });
 export default {
   name: 'PaymentApplicationForm',
+  components: {
+    ElImageViewer,
+    OpenFileViewer,
+    PdfPreview,
+  },
   data() {
     return {
       form: emptyForm(),
@@ -457,16 +588,47 @@ export default {
       paymentRecords: [],
       referenceVisible: false,
       referenceTab: 'formal',
+      referenceQuery: {
+        settlementNo: '',
+        projectName: '',
+        contractName: '',
+      },
       formalRows: [],
       preRows: [],
+      formalPage: {
+        current: 1,
+        size: 10,
+        total: 0,
+        loading: false,
+      },
+      prePage: {
+        current: 1,
+        size: 10,
+        total: 0,
+        loading: false,
+      },
       contractRows: [],
       billOptions: [],
       billLoading: false,
       receiptAccountOptions: [],
       receiptAccountLoading: false,
       firstContractPayment: false,
+      contractSignatureFileAvailable: false,
       payeeCustomerLevel: '',
       attachmentRuleLoading: false,
+      attachmentImagePreviewVisible: false,
+      attachmentImagePreviewUrls: [],
+      attachmentImagePreviewIndex: 0,
+      attachmentDocumentPreviewVisible: false,
+      attachmentPreviewFile: {},
+      attachmentViewerPlugins,
+      attachmentViewerToolbar: {
+        download: true,
+        fullscreen: true,
+        print: true,
+        rotate: true,
+        zoom: true,
+      },
       paymentTypeOptions: api.paymentTypeOptions,
       paymentMethodOptions: api.paymentMethodOptions,
       attachmentFileTypes: [
@@ -475,6 +637,8 @@ export default {
         'jpeg',
         'png',
         'jpg',
+        'gif',
+        'webp',
         'doc',
         'docx',
         'ppt',
@@ -492,6 +656,7 @@ export default {
         paymentMethod: [{ required: true, message: '请选择付款方式' }],
         receiptAccountId: [{ required: true, message: '请选择收款账号', trigger: 'change' }],
         billLedgerId: [{ validator: this.validateBillLedger, trigger: 'change' }],
+        settlementAmount: [{ validator: this.validateSettlementAmount, trigger: 'change' }],
         appliedAmount: [{ validator: this.validateAppliedAmount, trigger: 'change' }],
       },
     };
@@ -511,6 +676,13 @@ export default {
     billPayment() {
       return ['bank_draft', 'commercial_draft'].includes(this.form.paymentMethod);
     },
+    paymentAmountBase() {
+      const amount =
+        this.form.paymentType === 'project_advance'
+          ? this.form.payableAmount
+          : this.form.settlementAmount;
+      return Number(amount || 0);
+    },
     referenceLabel() {
       if (this.referenceRows.length) {
         return this.referenceRows
@@ -526,9 +698,10 @@ export default {
           ...item,
           paymentRatio: this.form.paymentRatio,
           appliedAmount: Number(
-            ((Number(item.payableAmount || 0) * Number(this.form.paymentRatio || 0)) / 100).toFixed(
-              2
-            )
+            (
+              (Number(item.settlementAmount || 0) * Number(this.form.paymentRatio || 0)) /
+              100
+            ).toFixed(2)
           ),
         }));
       }
@@ -550,10 +723,10 @@ export default {
       return ['D', 'D级', 'E', 'E级', 'F', 'F级'].includes(level) || level.includes('高风险');
     },
     requiredAttachmentMaterials() {
-      const materials = [ATTACHMENT_MATERIALS.weighingSlip, ATTACHMENT_MATERIALS.settlement];
       if (this.form.paymentType === 'project_advance') {
-        materials.splice(1, 0, ATTACHMENT_MATERIALS.entrustOrder);
+        return [ATTACHMENT_MATERIALS.contract];
       }
+      const materials = [ATTACHMENT_MATERIALS.weighingSlip, ATTACHMENT_MATERIALS.settlement];
       if (this.firstContractPayment) materials.push(ATTACHMENT_MATERIALS.contract);
       if (this.highRiskPayee) materials.push(ATTACHMENT_MATERIALS.specialApproval);
       return materials;
@@ -561,6 +734,9 @@ export default {
     missingAttachmentMaterials() {
       return this.requiredAttachmentMaterials.filter(item => !this.hasAttachmentMaterial(item));
     },
+    downloadableAttachments() {
+      return (this.form.attachments || []).filter(item => this.attachmentFileUrl(item));
+    },
   },
   watch: {
     '$route.query.transferToken': async function (token, oldToken) {
@@ -570,20 +746,36 @@ export default {
       }
     },
     'form.paymentRatio'(value) {
-      if (this.amountSyncing || !Number(this.form.payableAmount)) return;
+      if (this.amountSyncing || !this.paymentAmountBase) return;
       this.amountSyncing = true;
       this.form.appliedAmount = Number(
-        ((Number(this.form.payableAmount) * Number(value || 0)) / 100).toFixed(2)
+        ((this.paymentAmountBase * Number(value || 0)) / 100).toFixed(2)
       );
       this.$nextTick(() => {
         this.amountSyncing = false;
       });
     },
     'form.appliedAmount'(value) {
-      if (this.amountSyncing || !Number(this.form.payableAmount)) return;
+      if (this.amountSyncing || !this.paymentAmountBase) return;
       this.amountSyncing = true;
       this.form.paymentRatio = Number(
-        ((Number(value || 0) / Number(this.form.payableAmount)) * 100).toFixed(2)
+        ((Number(value || 0) / this.paymentAmountBase) * 100).toFixed(2)
+      );
+      this.$nextTick(() => {
+        this.amountSyncing = false;
+      });
+    },
+    'form.settlementAmount'() {
+      if (
+        this.amountSyncing ||
+        this.form.paymentType === 'project_advance' ||
+        !this.paymentAmountBase
+      ) {
+        return;
+      }
+      this.amountSyncing = true;
+      this.form.appliedAmount = Number(
+        ((this.paymentAmountBase * Number(this.form.paymentRatio || 0)) / 100).toFixed(2)
       );
       this.$nextTick(() => {
         this.amountSyncing = false;
@@ -613,6 +805,17 @@ export default {
       }
       callback();
     },
+    refreshReferenceValidation() {
+      this.$nextTick(() => this.$refs.formRef?.validateField('referenceId').catch(() => {}));
+    },
+    validateSettlementAmount(rule, value, callback) {
+      const amount = Number(value);
+      if (!Number.isFinite(amount) || amount < 0) {
+        callback(new Error('结算金额不能小于0'));
+        return;
+      }
+      callback();
+    },
     validateAppliedAmount(rule, value, callback) {
       const amount = Number(value);
       const payableAmount = Number(this.form.payableAmount || 0);
@@ -646,9 +849,17 @@ export default {
       callback();
     },
     validateInvoices() {
-      const appliedAmount = Number(this.form.appliedAmount || 0);
-      let matchedTotal = 0;
+      if (this.form.paymentType === 'project_advance') return;
       for (const invoice of this.form.invoices || []) {
+        if (String(invoice.settlementNo || '').length > 100) {
+          throw new Error('结算单号不能超过100个字符');
+        }
+        if (String(invoice.invoiceNo || '').length > 100) {
+          throw new Error('发票号不能超过100个字符');
+        }
+        if (String(invoice.invoiceType || '').length > 30) {
+          throw new Error('发票类型不能超过30个字符');
+        }
         const invoiceAmount = Number(invoice.invoiceAmount || 0);
         const matchedAmount = Number(invoice.matchedAmount || 0);
         if (invoiceAmount < 0 || matchedAmount < 0) {
@@ -657,10 +868,26 @@ export default {
         if (matchedAmount > invoiceAmount) {
           throw new Error('单张发票匹配金额不能超过发票金额');
         }
-        matchedTotal += matchedAmount;
       }
-      if (matchedTotal > appliedAmount) {
-        throw new Error('发票匹配金额合计不能超过申请付款金额');
+    },
+    validatePaymentRecords() {
+      if (this.form.paymentType === 'project_advance') return;
+      const appliedAmount = Number(this.form.appliedAmount || 0);
+      const paidAmount = (this.paymentRecords || []).reduce((total, record) => {
+        const amount = Number(record.paidAmount || 0);
+        if (!Number.isFinite(amount) || amount < 0) {
+          throw new Error('付款记录金额不能小于0');
+        }
+        if (String(record.paymentNo || '').length > 100) {
+          throw new Error('付款单号不能超过100个字符');
+        }
+        if (String(record.kingdeeBillNo || '').length > 100) {
+          throw new Error('付款凭证不能超过100个字符');
+        }
+        return total + amount;
+      }, 0);
+      if (paidAmount > appliedAmount) {
+        throw new Error('付款记录金额合计不能超过申请付款金额');
       }
     },
     unwrapData(response) {
@@ -689,6 +916,7 @@ export default {
         if (this.billPayment) await this.loadBillOptions('', data.billLedgerId);
       } else {
         this.form = emptyForm();
+        this.form.paymentType = this.initialAddPaymentType();
         this.referenceRows = [];
         this.form.applyDate = this.$dayjs().format('YYYY-MM-DD');
         this.form.applicantName =
@@ -696,6 +924,12 @@ export default {
         await this.loadTransferredPreSettlements();
       }
     },
+    initialAddPaymentType() {
+      const paymentType = String(this.$route.query.paymentType || '');
+      return api.paymentTypeOptions.some(item => item.value === paymentType)
+        ? paymentType
+        : 'project_advance';
+    },
     getTransferredPreSettlementIds() {
       const payloadIds = (this.transferPayload?.sourcePreSettlements || []).map(
         item => item.preSettlementId || item.id
@@ -752,6 +986,41 @@ export default {
             : Number(row.payableAmount || 0),
       };
     },
+    createInvoiceRows(invoices = [], settlementNo = '') {
+      return (invoices || []).map(invoice => ({
+        settlementNo,
+        invoiceNo: invoice.invoiceNo || '',
+        invoiceDate: invoice.invoiceDate || '',
+        invoiceType: invoice.invoiceType || '',
+        taxRate: Number(invoice.taxRate || 0),
+        invoiceAmount: Number(invoice.invoiceAmount || 0),
+        availableInvoiceAmount: Number(invoice.availableInvoiceAmount || 0),
+        matchedAmount: Number(invoice.matchedAmount || 0),
+        attachmentJson: invoice.attachmentJson || '',
+      }));
+    },
+    createMockPaymentRecords(settlementNo, amount = this.form.appliedAmount) {
+      const totalCents = Math.max(0, Math.round(Number(amount || 0) * 100));
+      const paidCents = [Math.round(totalCents * 0.2), Math.round(totalCents * 0.3)];
+      paidCents.push(totalCents - paidCents[0] - paidCents[1]);
+      const normalizedSettlementNo = String(settlementNo || 'SETTLEMENT').slice(0, 60);
+      this.paymentRecords = paidCents.map((value, index) => {
+        const paidDate = this.$dayjs().subtract(index, 'day').format('YYYY-MM-DD');
+        const sequence = String(index + 1).padStart(2, '0');
+        return {
+          paidAmount: Number((value / 100).toFixed(2)),
+          paidDate,
+          paymentNo: `MOCK-${normalizedSettlementNo}-${sequence}`,
+          voucherJson: '',
+          kingdeeBillNo: `MOCK-KD${paidDate.replaceAll('-', '')}${sequence}`,
+        };
+      });
+    },
+    referencePaymentAmount(settlementAmount) {
+      return Number(
+        ((Number(settlementAmount || 0) * Number(this.form.paymentRatio || 0)) / 100).toFixed(2)
+      );
+    },
     applyTransferredPreSettlements(rows = []) {
       if (!rows.length) return;
       const contractIds = new Set(rows.map(item => String(item.contractId || '')));
@@ -760,6 +1029,7 @@ export default {
         return;
       }
       const first = rows[0];
+      this.form.invoices = [];
       this.referenceRows = rows.map(item => this.createReferenceRow(item));
       const settlementAmount = this.referenceRows.reduce(
         (total, item) => total + Number(item.settlementAmount || 0),
@@ -793,8 +1063,9 @@ export default {
         settlementAmount: Number(settlementAmount.toFixed(2)),
         payableAmount: Number(payableAmount.toFixed(2)),
         billType: '预结算单',
-        appliedAmount: Number(((payableAmount * paymentRatio) / 100).toFixed(2)),
+        appliedAmount: Number(((settlementAmount * paymentRatio) / 100).toFixed(2)),
       });
+      this.createMockPaymentRecords(this.form.preSettlementNo, this.form.appliedAmount);
       this.$nextTick(() => {
         this.amountSyncing = false;
         this.$refs.formRef?.clearValidate();
@@ -813,19 +1084,89 @@ export default {
       return String(file?.originalName || file?.name || file?.fileName || '').trim();
     },
     attachmentFileUrl(file) {
-      return file?.url || file?.link || file?.src || file?.domain || '';
+      return (
+        file?.url ||
+        file?.link ||
+        file?.fileUrl ||
+        file?.downloadUrl ||
+        file?.src ||
+        file?.domain ||
+        ''
+      );
+    },
+    attachmentFileExtension(file = {}) {
+      const name = String(this.attachmentFileName(file) || this.attachmentFileUrl(file)).split(
+        '?'
+      )[0];
+      const index = name.lastIndexOf('.');
+      return index > -1 ? name.slice(index + 1).toLowerCase() : '';
+    },
+    attachmentMimeType(file = {}) {
+      return String(file.mimeType || file.contentType || file.type || '').toLowerCase();
+    },
+    isAttachmentImage(file) {
+      return (
+        this.attachmentMimeType(file).startsWith('image/') ||
+        ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(this.attachmentFileExtension(file))
+      );
+    },
+    isAttachmentPdf(file) {
+      return (
+        this.attachmentMimeType(file).includes('application/pdf') ||
+        this.attachmentFileExtension(file) === 'pdf'
+      );
+    },
+    previewAttachment(file) {
+      const url = this.attachmentFileUrl(file);
+      if (!url) {
+        this.$message.warning('附件地址为空，无法预览');
+        return;
+      }
+      if (this.isAttachmentImage(file)) {
+        this.attachmentImagePreviewUrls = (this.form.attachments || [])
+          .filter(item => this.isAttachmentImage(item) && this.attachmentFileUrl(item))
+          .map(item => this.attachmentFileUrl(item));
+        this.attachmentImagePreviewIndex = Math.max(
+          this.attachmentImagePreviewUrls.indexOf(url),
+          0
+        );
+        this.attachmentImagePreviewVisible = true;
+        return;
+      }
+      const isPdf = this.isAttachmentPdf(file);
+      this.attachmentPreviewFile = {
+        name: this.attachmentFileName(file) || '附件',
+        url,
+        mimeType: isPdf ? 'application/pdf' : this.attachmentMimeType(file),
+        isPdf,
+      };
+      this.attachmentDocumentPreviewVisible = true;
+    },
+    handleAttachmentPreviewUnsupported() {
+      this.$message.warning('当前文件暂不支持在线预览');
+    },
+    handleAttachmentPreviewError() {
+      this.$message.error('附件预览失败');
     },
     attachmentMatchesMaterial(file, material) {
       const fileName = this.attachmentFileName(file).toLocaleLowerCase();
       return (
         Boolean(this.attachmentFileUrl(file)) &&
-        material.keywords.some(keyword => fileName.includes(keyword.toLocaleLowerCase()))
+        (file.attachmentType === MATERIAL_TYPE_MAP[material.key] ||
+          material.keywords.some(keyword => fileName.includes(keyword.toLocaleLowerCase())))
       );
     },
     hasAttachmentMaterial(material) {
-      return (this.form.attachments || []).some(file =>
+      const hasUploadedAttachment = (this.form.attachments || []).some(file =>
         this.attachmentMatchesMaterial(file, material)
       );
+      if (
+        this.form.paymentType === 'project_advance' &&
+        material.key === ATTACHMENT_MATERIALS.contract.key
+      ) {
+        return this.contractSignatureFileAvailable || hasUploadedAttachment;
+      }
+      return hasUploadedAttachment;
     },
     resolveAttachmentMaterial(file, materials = Object.values(ATTACHMENT_MATERIALS)) {
       return [...materials]
@@ -835,12 +1176,15 @@ export default {
         )
         .find(material => this.attachmentMatchesMaterial(file, material));
     },
-    mergeAutomaticAttachments(files, materials, sourceName) {
+    mergeAutomaticAttachments(files, materials, sourceName, defaultMaterial = null) {
       const existingUrls = new Set(
         (this.form.attachments || []).map(file => this.attachmentFileUrl(file)).filter(Boolean)
       );
       const imported = (files || [])
-        .map(file => ({ file, material: this.resolveAttachmentMaterial(file, materials) }))
+        .map(file => ({
+          file,
+          material: this.resolveAttachmentMaterial(file, materials) || defaultMaterial,
+        }))
         .filter(item => item.material && !existingUrls.has(this.attachmentFileUrl(item.file)))
         .map(({ file, material }) => {
           existingUrls.add(this.attachmentFileUrl(file));
@@ -858,6 +1202,7 @@ export default {
       if (imported.length) this.form.attachments = [...this.form.attachments, ...imported];
     },
     async loadCurrentSettlementDetails() {
+      if (this.form.paymentType === 'project_advance') return [];
       const requests = [];
       if (this.form.preSettlementId) requests.push(preApi.getDetail(this.form.preSettlementId));
       if (this.form.settlementId) requests.push(formalApi.getDetail(this.form.settlementId));
@@ -868,6 +1213,7 @@ export default {
     async loadAttachmentRuleData(settlementRows = []) {
       this.attachmentRuleLoading = true;
       this.firstContractPayment = false;
+      this.contractSignatureFileAvailable = false;
       try {
         const settlementMaterials = [
           ATTACHMENT_MATERIALS.weighingSlip,
@@ -882,11 +1228,24 @@ export default {
           this.firstContractPayment = false;
           return;
         }
-        const [contractResponse, paymentResponse] = await Promise.all([
-          getContractDetail(this.form.contractId),
-          api.getList(1, 9999, { contractId: this.form.contractId }),
-        ]);
+        const contractResponse = await getContractDetail(this.form.contractId);
         const contract = this.unwrapData(contractResponse) || {};
+        if (this.form.paymentType === 'project_advance') {
+          const contractFiles = this.parse(contract.contractFileJson);
+          this.contractSignatureFileAvailable = contractFiles.some(file =>
+            Boolean(this.attachmentFileUrl(file))
+          );
+          this.mergeAutomaticAttachments(
+            contractFiles,
+            [ATTACHMENT_MATERIALS.contract],
+            '合同',
+            ATTACHMENT_MATERIALS.contract
+          );
+          return;
+        }
+        const paymentResponse = await api.getList(1, 9999, {
+          contractId: this.form.contractId,
+        });
         const payments = this.unwrapData(paymentResponse)?.records || [];
         this.firstContractPayment = !payments.some(
           item =>
@@ -898,7 +1257,8 @@ export default {
           this.mergeAutomaticAttachments(
             this.parse(contract.contractFileJson),
             [ATTACHMENT_MATERIALS.contract],
-            '合同'
+            '合同',
+            ATTACHMENT_MATERIALS.contract
           );
         }
       } catch (error) {
@@ -917,6 +1277,8 @@ export default {
       return false;
     },
     handleTypeChange() {
+      this.form.invoices = [];
+      this.paymentRecords = [];
       if (this.form.paymentType === 'project_advance') {
         this.form.settlementId = null;
         this.form.preSettlementId = null;
@@ -1048,24 +1410,93 @@ export default {
       this.form.billNo = selected?.billNo || '';
       this.$refs.formRef?.validateField('billLedgerId').catch(() => {});
     },
-    async loadReferences() {
-      const [formalResponse, preResponse, contractResponse] = await Promise.all([
-        formalApi.getList(1, 100, { settlementType: 'payable', approvalStatus: 'approved' }),
-        preApi.getList(1, 100, { settlementType: 'payable', approvalStatus: 'approved' }),
-        formalApi.getContractOptions(''),
-      ]);
-      const formal = this.unwrapData(formalResponse);
-      const pre = this.unwrapData(preResponse);
-      this.formalRows = formal.records || [];
-      this.preRows = pre.records || [];
-      this.contractRows = this.unwrapData(contractResponse) || [];
+    referenceParams(type) {
+      const { settlementNo, projectName, contractName } = this.referenceQuery;
+      return {
+        settlementType: 'payable',
+        approvalStatus: 'approved',
+        [type === 'formal' ? 'formalSettlementNo' : 'preSettlementNo']:
+          String(settlementNo || '').trim() || undefined,
+        projectName: String(projectName || '').trim() || undefined,
+        contractName: String(contractName || '').trim() || undefined,
+      };
+    },
+    async loadFormalReferences() {
+      this.formalPage.loading = true;
+      try {
+        const response = await formalApi.getList(
+          this.formalPage.current,
+          this.formalPage.size,
+          this.referenceParams('formal')
+        );
+        const data = this.unwrapData(response) || {};
+        this.formalRows = data.records || [];
+        this.formalPage.total = Number(data.total || 0);
+      } finally {
+        this.formalPage.loading = false;
+      }
+    },
+    async loadPreReferences() {
+      this.prePage.loading = true;
+      try {
+        const response = await preApi.getList(
+          this.prePage.current,
+          this.prePage.size,
+          this.referenceParams('pre')
+        );
+        const data = this.unwrapData(response) || {};
+        this.preRows = data.records || [];
+        this.prePage.total = Number(data.total || 0);
+      } finally {
+        this.prePage.loading = false;
+      }
+    },
+    loadSettlementReferences() {
+      return Promise.all([this.loadFormalReferences(), this.loadPreReferences()]);
+    },
+    handleReferenceSearch() {
+      this.formalPage.current = 1;
+      this.prePage.current = 1;
+      this.loadSettlementReferences();
+    },
+    resetReferenceSearch() {
+      Object.assign(this.referenceQuery, {
+        settlementNo: '',
+        projectName: '',
+        contractName: '',
+      });
+      this.handleReferenceSearch();
+    },
+    handleReferenceTabChange(name) {
+      if (name === 'formal') {
+        this.loadFormalReferences();
+        return;
+      }
+      this.loadPreReferences();
+    },
+    handleFormalSizeChange() {
+      this.formalPage.current = 1;
+      this.loadFormalReferences();
+    },
+    handlePreSizeChange() {
+      this.prePage.current = 1;
+      this.loadPreReferences();
     },
     async openReference() {
-      await this.loadReferences();
       this.referenceVisible = true;
+      if (this.form.paymentType === 'project_advance') {
+        const response = await formalApi.getContractOptions('');
+        this.contractRows = this.unwrapData(response) || [];
+        return;
+      }
+      this.formalPage.current = 1;
+      this.prePage.current = 1;
+      await this.loadSettlementReferences();
     },
     async selectContract(row) {
       this.referenceRows = [];
+      this.form.invoices = [];
+      this.paymentRecords = [];
       this.clearReceiptAccount();
       const settlementType = row.settlementType || 'payable';
       Object.assign(this.form, {
@@ -1080,16 +1511,25 @@ export default {
           row.payerName || (settlementType === 'receivable' ? row.partyB : row.partyA) || '',
         payeeName:
           row.payeeName || (settlementType === 'receivable' ? row.partyA : row.partyB) || '',
-        billType: '项目预付',
+        payableAmount: Number((Number(row.fundDemand || 0) * 10000).toFixed(2)),
+        billType: row.settlementMode ? '项目预付' : '',
       });
       this.referenceVisible = false;
       await Promise.all([this.loadReceiptAccountOptions(), this.loadAttachmentRuleData([])]);
       if (this.billPayment) this.loadBillOptions();
     },
     async selectFormal(row) {
-      this.referenceRows = [this.createReferenceRow(row)];
+      const [amountResponse, detailResponse] = await Promise.all([
+        api.getReferenceAmount('settlement_payment', row.id, this.form.id),
+        formalApi.getDetail(row.id),
+      ]);
+      const amount = this.unwrapData(amountResponse) || {};
+      const settlementAmount = Number(amount.settlementAmount ?? row.settlementAmount ?? 0);
+      const payableAmount = Number(amount.payableAmount ?? 0);
+      this.referenceRows = [this.createReferenceRow({ ...row, settlementAmount, payableAmount })];
       this.clearReceiptAccount();
       Object.assign(this.form, {
+        paymentType: 'settlement_payment',
         settlementId: row.id,
         preSettlementId: null,
         preSettlementIds: [],
@@ -1102,17 +1542,23 @@ export default {
         contractId: row.contractId,
         contractNo: row.contractNo,
         contractName: row.contractName,
-        settlementAmount: row.settlementAmount,
-        payableAmount: Math.max(
-          0,
-          Number(row.settlementAmount || 0) - Number(row.appliedPaymentAmount || 0)
-        ),
+        settlementAmount,
+        payableAmount,
         billType: '正式结算单',
         payerName: row.payerName,
         payeeName: row.payeeName,
       });
       this.referenceVisible = false;
-      const detail = this.unwrapData(await formalApi.getDetail(row.id));
+      this.refreshReferenceValidation();
+      const detail = this.unwrapData(detailResponse);
+      this.form.invoices = this.createInvoiceRows(
+        detail?.invoices,
+        detail?.formalSettlementNo || row.formalSettlementNo
+      );
+      this.createMockPaymentRecords(
+        row.formalSettlementNo,
+        this.referencePaymentAmount(settlementAmount)
+      );
       await Promise.all([
         this.loadReceiptAccountOptions(),
         this.loadAttachmentRuleData(detail?.id ? [detail] : []),
@@ -1120,9 +1566,19 @@ export default {
       if (this.billPayment) this.loadBillOptions();
     },
     async selectPre(row) {
-      this.referenceRows = [this.createReferenceRow(row)];
+      const [amountResponse, detailResponse] = await Promise.all([
+        api.getReferenceAmount('progress_advance', row.id, this.form.id),
+        preApi.getDetail(row.id),
+      ]);
+      const amount = this.unwrapData(amountResponse) || {};
+      const settlementAmount = Number(amount.settlementAmount ?? row.settlementAmount ?? 0);
+      const payableAmount = Number(amount.payableAmount ?? 0);
+      this.referenceRows = [this.createReferenceRow({ ...row, settlementAmount, payableAmount })];
+      this.form.invoices = [];
+      this.paymentRecords = [];
       this.clearReceiptAccount();
       Object.assign(this.form, {
+        paymentType: 'progress_advance',
         preSettlementId: row.id,
         preSettlementIds: [row.id],
         settlementId: null,
@@ -1135,39 +1591,26 @@ export default {
         contractId: row.contractId,
         contractNo: row.contractNo,
         contractName: row.contractName,
-        settlementAmount: row.settlementAmount,
-        payableAmount: Math.max(
-          0,
-          Number(row.settlementAmount || 0) - Number(row.advanceAppliedAmount || 0)
-        ),
+        settlementAmount,
+        payableAmount,
         billType: '预结算单',
         payerName: row.payerName,
         payeeName: row.payeeName,
       });
       this.referenceVisible = false;
-      const detail = this.unwrapData(await preApi.getDetail(row.id));
+      this.refreshReferenceValidation();
+      this.createMockPaymentRecords(
+        row.preSettlementNo,
+        this.referencePaymentAmount(settlementAmount)
+      );
+      const detail = this.unwrapData(detailResponse);
       await Promise.all([
         this.loadReceiptAccountOptions(),
         this.loadAttachmentRuleData(detail?.id ? [detail] : []),
       ]);
       if (this.billPayment) this.loadBillOptions();
     },
-    addInvoice() {
-      this.form.invoices.push({
-        settlementNo: this.referenceLabel,
-        invoiceNo: '',
-        invoiceDate: '',
-        invoiceType: '',
-        taxRate: 3,
-        invoiceAmount: 0,
-        matchedAmount: 0,
-        attachmentJson: '',
-      });
-    },
     normalizeAttachments(files) {
-      const userName =
-        this.$store.getters.userInfo?.realName || this.$store.getters.userInfo?.userName || '';
-      const time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
       this.form.attachments = (files || []).map(file => ({
         ...file,
         attachmentType:
@@ -1175,10 +1618,56 @@ export default {
           MATERIAL_TYPE_MAP[this.resolveAttachmentMaterial(file)?.key] ||
           'other',
         description: file.description || '',
-        uploadUserName: file.uploadUserName || userName,
-        uploadTime: file.uploadTime || time,
       }));
     },
+    handleManualAttachmentUpload(uploadedFile) {
+      const uploadedUrl = this.attachmentFileUrl(uploadedFile);
+      const uploadedUid = uploadedFile?.uid;
+      const userInfo = this.$store.getters.userInfo || {};
+      const uploadUserName = userInfo.realName || userInfo.userName || '';
+      const uploadTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
+      this.form.attachments = (this.form.attachments || []).map(file => {
+        const isUploadedFile =
+          (uploadedUid && file.uid === uploadedUid) ||
+          (uploadedUrl && this.attachmentFileUrl(file) === uploadedUrl);
+        return isUploadedFile
+          ? {
+              ...file,
+              uploadUserName,
+              uploadTime,
+            }
+          : file;
+      });
+    },
+    formatAttachmentSize(file = {}) {
+      const rawSize = file.size ?? file.fileSize ?? file.attachSize;
+      if (rawSize === undefined || rawSize === null || rawSize === '') return '-';
+      const matched = String(rawSize)
+        .trim()
+        .match(/^([\d.]+)\s*(B|K|KB|M|MB|G|GB)?$/i);
+      if (!matched) return '-';
+      const value = Number(matched[1]);
+      if (!Number.isFinite(value)) return '-';
+      const unit = (matched[2] || 'B').toUpperCase();
+      const unitToMb = {
+        B: 1 / 1024 / 1024,
+        K: 1 / 1024,
+        KB: 1 / 1024,
+        M: 1,
+        MB: 1,
+        G: 1024,
+        GB: 1024,
+      };
+      return `${(value * unitToMb[unit]).toFixed(2)} MB`;
+    },
+    handleAttachmentBatchDownload() {
+      this.downloadableAttachments.forEach((file, index) => {
+        window.setTimeout(
+          () => downloadFileByUrl(this.attachmentFileUrl(file), this.attachmentFileName(file)),
+          index * 300
+        );
+      });
+    },
     payload() {
       const {
         id,
@@ -1240,7 +1729,29 @@ export default {
         bankAccount,
         attachmentsJson: JSON.stringify(attachments || []),
         remark,
-        invoices,
+        invoices:
+          paymentType === 'project_advance'
+            ? []
+            : invoices.map(invoice => ({
+                settlementNo: invoice.settlementNo || '',
+                invoiceNo: invoice.invoiceNo || '',
+                invoiceDate: invoice.invoiceDate || null,
+                invoiceType: invoice.invoiceType || '',
+                taxRate: Number(invoice.taxRate || 0),
+                invoiceAmount: Number(invoice.invoiceAmount || 0),
+                matchedAmount: Number(invoice.matchedAmount || 0),
+                attachmentJson: invoice.attachmentJson || '',
+              })),
+        paymentRecords:
+          paymentType === 'project_advance'
+            ? []
+            : this.paymentRecords.map(record => ({
+                paidAmount: Number(record.paidAmount || 0),
+                paidDate: record.paidDate || null,
+                paymentNo: record.paymentNo || '',
+                voucherJson: record.voucherJson || '',
+                kingdeeBillNo: record.kingdeeBillNo || '',
+              })),
       };
     },
     async saveDraft(validateMaterials = false) {
@@ -1252,6 +1763,7 @@ export default {
       if (validateMaterials && !this.validateRequiredAttachments()) return false;
       try {
         this.validateInvoices();
+        this.validatePaymentRecords();
       } catch (error) {
         this.$message.warning(error.message);
         return false;
@@ -1280,6 +1792,33 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.payment-form-page__form {
+  padding-bottom: 72px;
+}
+.payment-form-page__reference-search {
+  padding: 12px 12px 4px;
+  margin-bottom: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+.payment-form-page__reference-search-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px 16px;
+}
+.payment-form-page__reference-search :deep(.el-form-item) {
+  margin-bottom: 8px;
+}
+.payment-form-page__reference-search :deep(.el-form-item__label) {
+  white-space: nowrap;
+}
+.payment-form-page__reference-search-actions,
+.payment-form-page__reference-pagination {
+  display: flex;
+  justify-content: flex-end;
+}
+.payment-form-page__reference-pagination {
+  margin-top: 12px;
+}
 .payment-form-page__actions {
   display: flex;
   justify-content: flex-end;
@@ -1300,11 +1839,6 @@ export default {
 :global(.avue-layout--horizontal .payment-form-page__actions) {
   left: 0;
 }
-.payment-form-page__section-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 8px;
-}
 .payment-form-page__attachment-upload {
   display: flex;
   justify-content: flex-start;
@@ -1323,9 +1857,40 @@ export default {
   gap: 8px;
   margin-bottom: 12px;
 }
-.payment-form-page__attachment-checklist-label {
+.payment-form-page__attachment-download {
+  margin-left: auto;
+}
+.payment-form-page__attachment-file-name-cell {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.payment-form-page__attachment-file-name {
+  display: block;
+  width: 100%;
+  overflow: hidden;
   color: var(--el-text-color-regular);
-  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: #409eff;
+  }
+
+  &.is-disabled {
+    color: var(--el-text-color-regular);
+    cursor: default;
+
+    &:hover {
+      color: var(--el-text-color-regular);
+    }
+  }
 }
 .payment-form-page__attachment-upload .vehicle-attachment-upload {
   width: auto;
@@ -1339,6 +1904,29 @@ export default {
 .payment-form-page :deep(.el-input-number .el-input__inner) {
   text-align: left;
 }
+.payment-form-page__percentage-input {
+  display: flex;
+  width: 100%;
+}
+.payment-form-page__percentage-input :deep(.el-input-number) {
+  flex: 1;
+  width: 0;
+}
+.payment-form-page__percentage-input :deep(.el-input__wrapper) {
+  border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
+}
+.payment-form-page__percentage-append {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  padding: 0 16px;
+  color: var(--el-text-color-regular);
+  background-color: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color);
+  border-left: 0;
+  border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
+}
 .payment-form-page :deep(.el-table) {
   --el-table-border-color: #eff1f7;
 }
diff --git a/src/views/payment/payment-application.vue b/src/views/payment/payment-application.vue
index 331bcda..02eb4b3 100644
--- a/src/views/payment/payment-application.vue
+++ b/src/views/payment/payment-application.vue
@@ -87,7 +87,7 @@
             v-if="hasPermission('payment_application_add')"
             type="primary"
             plain
-            @click="openCreate"
+            @click="openProjectAdvance"
             >预付申请</el-button
           >
           <el-button
@@ -114,9 +114,12 @@
             <el-link v-if="column.link" type="primary" @click="openView(row)">{{
               row[column.prop]
             }}</el-link>
-            <el-tag v-else-if="column.status" :type="statusType(row.approvalStatus)" class="status-text">{{
-              row[column.prop] || '-'
-            }}</el-tag>
+            <el-tag
+              v-else-if="column.status"
+              :type="statusType(row.approvalStatus)"
+              class="status-text"
+              >{{ row[column.prop] || '-' }}</el-tag
+            >
             <span v-else-if="column.money">{{ formatMoney(row[column.prop]) }}</span>
             <span v-else>{{ displayValue(row[column.prop]) }}</span>
           </template>
@@ -307,6 +310,12 @@ export default {
     openCreate() {
       this.$router.push({ path: '/payment/payment-application/form', query: { mode: 'add' } });
     },
+    openProjectAdvance() {
+      this.$router.push({
+        path: '/payment/payment-application/form',
+        query: { mode: 'add', paymentType: 'project_advance' },
+      });
+    },
     openEdit(row) {
       this.$router.push({
         path: '/payment/payment-application/form',
@@ -320,7 +329,10 @@ export default {
       });
     },
     openSettlementPayment() {
-      this.openCreate();
+      this.$router.push({
+        path: '/payment/payment-application/form',
+        query: { mode: 'add', paymentType: 'settlement_payment' },
+      });
     },
     selectedOne(action) {
       if (this.selection.length !== 1) {
diff --git a/src/views/settlement/components/formal-settlement-editor.vue b/src/views/settlement/components/formal-settlement-editor.vue
index b7c123c..6f861d8 100644
--- a/src/views/settlement/components/formal-settlement-editor.vue
+++ b/src/views/settlement/components/formal-settlement-editor.vue
@@ -4,7 +4,11 @@
     v-bind="editorContainerProps"
     @update:model-value="visible = $event"
   >
-    <div v-loading="loading" class="formal-editor">
+    <div
+      v-loading="loading"
+      class="formal-editor"
+      :class="{ 'formal-editor--page': pageMode }"
+    >
       <section-card title="结算基本信息">
         <el-form
           ref="formRef"
@@ -319,26 +323,164 @@
         </div>
       </section-card>
 
-      <section-card v-if="readonly && payments.length" title="付款信息">
-        <el-table :data="payments" border>
+      <section-card title="发票信息">
+        <div v-if="editable" class="formal-editor__invoice-claim">
+          <el-form inline label-position="right" label-width="auto" @submit.prevent>
+            <el-form-item label="发票号码">
+              <el-input
+                v-model="invoiceClaimNo"
+                clearable
+                maxlength="32"
+                placeholder="请输入发票号码"
+                @keyup.enter="claimInvoices"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" :loading="invoiceClaimLoading" @click="claimInvoices">
+                认领查询
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-table :data="invoices" border>
           <el-table-column type="index" label="序号" width="64" align="center" />
+          <el-table-column prop="invoiceNo" label="发票号" min-width="150" align="center" />
+          <el-table-column prop="invoiceDate" label="开票日期" min-width="130" align="center">
+            <template #default="{ row }">{{ displayValue(row.invoiceDate) }}</template>
+          </el-table-column>
+          <el-table-column prop="invoiceType" label="发票类型" min-width="150" align="center">
+            <template #default="{ row }">{{ displayValue(row.invoiceType) }}</template>
+          </el-table-column>
+          <el-table-column prop="taxRate" label="税率" min-width="100" align="center">
+            <template #default="{ row }">
+              {{ row.taxRate === null || row.taxRate === undefined ? '-' : `${row.taxRate}%` }}
+            </template>
+          </el-table-column>
           <el-table-column
-            v-for="column in paymentTableColumns"
-            :key="column.prop"
-            v-bind="column"
+            prop="invoiceAmount"
+            label="发票金额（含税）"
+            min-width="150"
+            align="center"
+          >
+            <template #default="{ row }">{{ formatMoney(row.invoiceAmount) }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="availableInvoiceAmount"
+            label="可匹配发票金额（含税）"
+            min-width="180"
+            align="center"
+          >
+            <template #default="{ row }">{{ formatMoney(row.availableInvoiceAmount) }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="matchedAmount"
+            label="匹配结算单金额（含税）"
+            min-width="190"
             align="center"
           >
             <template #default="{ row }">
-              <span v-if="column.money">{{ formatMoney(row[column.prop]) }}</span>
-              <span v-else-if="column.prop === 'paymentTypeName'">{{
-                row.paymentType === 'final' ? '尾款' : displayValue(row.paymentType)
-              }}</span>
-              <span v-else-if="column.prop === 'billStatusName'">{{
-                row.billStatus === 'reviewing' ? '审批中' : displayValue(row.billStatus)
-              }}</span>
-              <span v-else>{{ displayValue(row[column.prop]) }}</span>
+              <el-input-number
+                v-if="editable"
+                v-model="row.matchedAmount"
+                :min="0"
+                :max="Number(row.availableInvoiceAmount || 0)"
+                :precision="2"
+                :controls="false"
+              />
+              <span v-else>{{ formatMoney(row.matchedAmount) }}</span>
             </template>
           </el-table-column>
+          <el-table-column label="操作" width="220" align="center">
+            <template #default="{ row, $index }">
+              <div class="formal-editor__links">
+                <el-link type="primary" @click="viewInvoiceAttachment(row)">查看</el-link>
+                <el-link type="primary" @click="downloadInvoiceAttachment(row)">下载</el-link>
+                <el-link v-if="editable" type="danger" @click="removeInvoice($index)">
+                  删除
+                </el-link>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </section-card>
+
+      <section-card v-if="readonly" title="付款信息">
+        <el-table :data="paymentApplications" border>
+          <el-table-column type="index" label="序号" width="64" align="center" />
+          <el-table-column prop="paymentTypeName" label="付款类型" min-width="120" align="center">
+            <template #default="{ row }">{{ displayValue(row.paymentTypeName) }}</template>
+          </el-table-column>
+          <el-table-column prop="paymentNo" label="单据号" min-width="160" align="center" />
+          <el-table-column prop="appliedAmount" label="申请付款金额" min-width="145" align="center">
+            <template #default="{ row }">{{ formatMoney(row.appliedAmount) }}</template>
+          </el-table-column>
+          <el-table-column prop="paidAmount" label="已付款金额" min-width="130" align="center">
+            <template #default="{ row }">{{ formatMoney(row.paidAmount) }}</template>
+          </el-table-column>
+          <el-table-column prop="approvalStatusName" label="单据状态" min-width="120" align="center">
+            <template #default="{ row }">{{ displayValue(row.approvalStatusName) }}</template>
+          </el-table-column>
+          <el-table-column prop="kingdeeBillNo" label="金蝶单据号" min-width="150" align="center">
+            <template #default="{ row }">{{ displayValue(row.kingdeeBillNo) }}</template>
+          </el-table-column>
+          <el-table-column prop="createUserName" label="创建人" min-width="120" align="center">
+            <template #default="{ row }">{{ displayValue(row.createUserName) }}</template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" min-width="170" align="center">
+            <template #default="{ row }">{{ displayValue(row.createTime) }}</template>
+          </el-table-column>
+        </el-table>
+      </section-card>
+
+      <section-card v-if="readonly" title="结算调整单">
+        <el-table :data="adjustments" border>
+          <el-table-column type="index" label="序号" width="64" align="center" />
+          <el-table-column prop="adjustmentNo" label="调整单号" min-width="170" align="center" />
+          <el-table-column prop="adjustmentAmount" label="调整金额" min-width="130" align="center">
+            <template #default="{ row }">{{ formatMoney(row.adjustmentAmount) }}</template>
+          </el-table-column>
+          <el-table-column prop="approvalStatusName" label="单据状态" min-width="120" align="center">
+            <template #default="{ row }">{{ displayValue(row.approvalStatusName) }}</template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="220" align="center">
+            <template #default="{ row }">{{ displayValue(row.remark) }}</template>
+          </el-table-column>
+          <el-table-column prop="kingdeeBillNo" label="金蝶单据号" min-width="150" align="center">
+            <template #default="{ row }">{{ displayValue(row.kingdeeBillNo) }}</template>
+          </el-table-column>
+          <el-table-column prop="createUserName" label="创建人" min-width="120" align="center">
+            <template #default="{ row }">{{ displayValue(row.createUserName) }}</template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" min-width="170" align="center">
+            <template #default="{ row }">{{ displayValue(row.createTime) }}</template>
+          </el-table-column>
+        </el-table>
+      </section-card>
+
+      <section-card v-if="readonly" title="变更记录">
+        <el-table :data="changeRecords" border>
+          <el-table-column type="index" label="序号" width="64" align="center" />
+          <el-table-column prop="changeType" label="变更类型" min-width="150" align="center">
+            <template #default="{ row }">{{ displayValue(row.changeType) }}</template>
+          </el-table-column>
+          <el-table-column prop="lineNo" label="行号" min-width="90" align="center">
+            <template #default="{ row }">{{ displayValue(row.lineNo) }}</template>
+          </el-table-column>
+          <el-table-column prop="operationType" label="类型" min-width="110" align="center">
+            <template #default="{ row }">{{ displayValue(row.operationType) }}</template>
+          </el-table-column>
+          <el-table-column prop="changeContent" label="变更内容" min-width="360" align="center">
+            <template #default="{ row }">{{ displayValue(row.changeContent) }}</template>
+          </el-table-column>
+          <el-table-column prop="changeReason" label="变更原因" min-width="220" align="center">
+            <template #default="{ row }">{{ displayValue(row.changeReason) }}</template>
+          </el-table-column>
+          <el-table-column prop="operatorName" label="操作人" min-width="120" align="center">
+            <template #default="{ row }">{{ displayValue(row.operatorName) }}</template>
+          </el-table-column>
+          <el-table-column prop="changeTime" label="变更时间" min-width="170" align="center">
+            <template #default="{ row }">{{ displayValue(row.changeTime) }}</template>
+          </el-table-column>
         </el-table>
       </section-card>
     </div>
@@ -568,12 +710,12 @@ import {
   candidateColumns,
   candidateDetailColumns,
   detailColumns,
-  paymentColumns,
   sourceColumns,
   summaryColumns,
 } from '@/option/settlement/formalSettlementTable';
 import { getDictionary } from '@/api/system/dictbiz';
 import { mapGetters } from 'vuex';
+import { downloadFileByUrl } from '@/utils/util';
 import * as XLSX from 'xlsx';
 
 export default {
@@ -597,8 +739,13 @@ export default {
       sources: [],
       details: [],
       summaryFees: [],
-      payments: [],
+      paymentApplications: [],
+      adjustments: [],
+      changeRecords: [],
       attachments: [],
+      invoices: [],
+      invoiceClaimNo: '',
+      invoiceClaimLoading: false,
       attachmentUploadFiles: [],
       attachmentTypeOptions: [],
       attachmentFileTypes: [
@@ -627,7 +774,6 @@ export default {
       sourceTableColumns: sourceColumns,
       summaryTableColumns: summaryColumns,
       detailTableColumns: detailColumns,
-      paymentTableColumns: paymentColumns,
       candidateTableColumns: candidateColumns,
       candidateDetailTableColumns: candidateDetailColumns,
       rules: {
@@ -750,8 +896,12 @@ export default {
       this.sources = [];
       this.details = [];
       this.summaryFees = [];
-      this.payments = [];
+      this.paymentApplications = [];
+      this.adjustments = [];
+      this.changeRecords = [];
       this.attachments = [];
+      this.invoices = [];
+      this.invoiceClaimNo = '';
       this.attachmentUploadFiles = [];
       this.detailCollapsed = false;
       this.resetDetailQuery(false);
@@ -782,8 +932,11 @@ export default {
         this.sources = data.sources || [];
         this.details = data.details || [];
         this.summaryFees = data.summaryFees || [];
-        this.payments = data.payments || [];
+        this.paymentApplications = data.paymentApplications || [];
+        this.adjustments = data.adjustments || [];
+        this.changeRecords = data.changeRecords || [];
         this.attachments = this.parseAttachments(data.attachmentsJson);
+        this.invoices = data.invoices || [];
         this.sortAttachments();
         this.contracts = this.allContracts.filter(
           item => String(item.projectId) === String(this.form.projectId)
@@ -1279,6 +1432,130 @@ export default {
         this.adjust.saving = false;
       }
     },
+    claimInvoices() {
+      this.invoiceClaimLoading = true;
+      try {
+        const keyword = String(this.invoiceClaimNo || '').trim();
+        const defaultNo = `MOCK${this.$dayjs().format('YYYYMMDD')}`;
+        const baseNo = (keyword || defaultNo).slice(0, 29);
+        const numbers = [baseNo, `${baseNo}-02`, `${baseNo}-03`];
+        const invoiceAmounts = [1000, 2000, 3000];
+        const availableAmounts = [1000, 1000, 3000];
+        const preferredMatchedAmounts = [1000, 1000, 2000];
+        let remainingAmount = Math.max(
+          Number(this.form.settlementAmount || this.summaryTotal || 0) -
+            this.invoices.reduce((total, item) => total + Number(item.matchedAmount || 0), 0),
+          0
+        );
+        const existingNumbers = new Set(this.invoices.map(item => String(item.invoiceNo)));
+        const mockRows = numbers
+          .map((invoiceNo, index) => {
+            const matchedAmount = Math.min(
+              preferredMatchedAmounts[index],
+              availableAmounts[index],
+              remainingAmount
+            );
+            remainingAmount = Number((remainingAmount - matchedAmount).toFixed(2));
+            return {
+              invoiceNo,
+              invoiceDate: this.$dayjs()
+                .subtract(index, 'day')
+                .format('YYYY-MM-DD'),
+              invoiceType: index === 1 ? '增值税普通发票' : '增值税专用发票',
+              taxRate: [3, 6, 9][index],
+              invoiceAmount: invoiceAmounts[index],
+              availableInvoiceAmount: availableAmounts[index],
+              matchedAmount,
+              attachmentJson: '',
+              mockData: true,
+            };
+          })
+          .filter(item => !existingNumbers.has(item.invoiceNo));
+        if (!mockRows.length) {
+          this.$message.warning('当前发票号码的Mock数据已认领');
+          return;
+        }
+        this.invoices = [...this.invoices, ...mockRows];
+        this.$message.success(`已生成${mockRows.length}条Mock发票数据`);
+      } finally {
+        this.invoiceClaimLoading = false;
+      }
+    },
+    validateInvoices() {
+      const invoiceNumbers = new Set();
+      let matchedTotal = 0;
+      for (const row of this.invoices) {
+        const invoiceNo = String(row.invoiceNo || '').trim();
+        const invoiceAmount = Number(row.invoiceAmount || 0);
+        const availableAmount = Number(row.availableInvoiceAmount || 0);
+        const matchedAmount = Number(row.matchedAmount || 0);
+        const taxRate = Number(row.taxRate || 0);
+        if (!invoiceNo) {
+          this.$message.warning('发票号不能为空');
+          return false;
+        }
+        if (invoiceNumbers.has(invoiceNo)) {
+          this.$message.warning(`发票号${invoiceNo}重复`);
+          return false;
+        }
+        invoiceNumbers.add(invoiceNo);
+        if ([invoiceAmount, availableAmount, matchedAmount].some(value => value < 0)) {
+          this.$message.warning(`发票${invoiceNo}的金额不能小于0`);
+          return false;
+        }
+        if (availableAmount > invoiceAmount) {
+          this.$message.warning(`发票${invoiceNo}的可匹配金额不能超过发票金额`);
+          return false;
+        }
+        if (matchedAmount > availableAmount) {
+          this.$message.warning(`发票${invoiceNo}的匹配金额不能超过可匹配金额`);
+          return false;
+        }
+        if (taxRate < 0 || taxRate > 100) {
+          this.$message.warning(`发票${invoiceNo}的税率必须在0-100之间`);
+          return false;
+        }
+        matchedTotal += matchedAmount;
+      }
+      if (matchedTotal > Number(this.form.settlementAmount || 0)) {
+        this.$message.warning('发票匹配结算单金额合计不能超过结算金额');
+        return false;
+      }
+      return true;
+    },
+    removeInvoice(index) {
+      this.invoices.splice(index, 1);
+    },
+    invoiceAttachment(row = {}) {
+      if (!row.attachmentJson) return {};
+      if (typeof row.attachmentJson === 'object') {
+        return Array.isArray(row.attachmentJson) ? row.attachmentJson[0] || {} : row.attachmentJson;
+      }
+      try {
+        const parsed = JSON.parse(row.attachmentJson);
+        return Array.isArray(parsed) ? parsed[0] || {} : parsed || {};
+      } catch {
+        return {};
+      }
+    },
+    invoiceAttachmentUrl(row) {
+      const attachment = this.invoiceAttachment(row);
+      return attachment.url || attachment.link || attachment.fileUrl || '';
+    },
+    invoiceAttachmentName(row) {
+      const attachment = this.invoiceAttachment(row);
+      return attachment.originalName || attachment.name || `${row.invoiceNo || '发票'}.pdf`;
+    },
+    viewInvoiceAttachment(row) {
+      const url = this.invoiceAttachmentUrl(row);
+      if (!url) return this.$message.warning('当前Mock发票暂无可查看附件');
+      window.open(url, '_blank');
+    },
+    downloadInvoiceAttachment(row) {
+      const url = this.invoiceAttachmentUrl(row);
+      if (!url) return this.$message.warning('当前Mock发票暂无可下载附件');
+      downloadFileByUrl(url, this.invoiceAttachmentName(row));
+    },
     async handleSave() {
       await this.$refs.formRef.validate();
       if (!this.form.sourcePreSettlementIds.length && !this.form.sourceDetailIds.length) {
@@ -1292,6 +1569,7 @@ export default {
       if (invalidManualFee) {
         return this.$message.warning('请完善手工费用的费用类型和费用项');
       }
+      if (!this.validateInvoices()) return;
       if (!this.validateAttachments()) return;
       this.saving = true;
       try {
@@ -1320,6 +1598,16 @@ export default {
               manualFlag: row.manualFlag || 0,
             })),
           attachmentsJson: this.stringifyAttachments(this.attachments),
+          invoices: this.invoices.map(row => ({
+            invoiceNo: String(row.invoiceNo || '').trim(),
+            invoiceDate: row.invoiceDate || null,
+            invoiceType: row.invoiceType || '',
+            taxRate: Number(row.taxRate || 0),
+            invoiceAmount: Number(row.invoiceAmount || 0),
+            availableInvoiceAmount: Number(row.availableInvoiceAmount || 0),
+            matchedAmount: Number(row.matchedAmount || 0),
+            attachmentJson: row.attachmentJson || '',
+          })),
           remark: this.form.remark,
         });
         this.$message.success('保存成功');
@@ -1525,6 +1813,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.formal-editor--page {
+  padding-bottom: 72px;
+}
 .formal-editor__actions {
   display: flex;
   align-items: center;
@@ -1598,6 +1889,23 @@ export default {
 .formal-editor__attachment-upload {
   margin-top: 12px;
 }
+.formal-editor__invoice-claim {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.formal-editor__invoice-claim-hint {
+  color: var(--el-color-danger);
+  font-size: 13px;
+}
+.formal-editor__invoice-claim :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+.formal-editor__invoice-claim :deep(.el-input) {
+  width: 360px;
+}
 .formal-editor__negative-amount {
   color: var(--el-color-danger);
 }