From acf428c34f30074dbca2d9aad64ff0a1ad7ba155 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Fri, 7 Nov 2025 18:34:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.js          |    8 +
 src/api/flow/pay.js        |    8 +
 src/views/flow/payList.vue | 1759 +++++++++++++++++++++---------------
 3 files changed, 1059 insertions(+), 716 deletions(-)

diff --git a/src/api/common.js b/src/api/common.js
index a261a4d..5231f8e 100644
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -18,6 +18,14 @@ export function userListNoAuth(params) {
   })
 }
 
+export function caigoumingxiConfig(params) {
+  return request({
+    url: '/api/oa/flow/caigoumingxi-config',
+    method: 'get',
+    params,
+    isLoading: false
+  })
+}
 export function downLoadFile(params) {
   return request({
     url: '/api/download-file',
diff --git a/src/api/flow/pay.js b/src/api/flow/pay.js
index 6c5a15a..85b0b82 100644
--- a/src/api/flow/pay.js
+++ b/src/api/flow/pay.js
@@ -22,6 +22,14 @@ export function receiveList(params) {
   })
 }
 
+export function updateList(data) {
+  return request({
+    method: 'post',
+    url: `/api/oa/flow/caigoumingxi-update`,
+    data
+  })
+}
+
 export function confirmList(data) {
   return request({
     method: 'post',
diff --git a/src/views/flow/payList.vue b/src/views/flow/payList.vue
index 9d0057b..60a1bcb 100644
--- a/src/views/flow/payList.vue
+++ b/src/views/flow/payList.vue
@@ -7,8 +7,28 @@
 
       <div>
         <el-tabs v-model="activeTab">
-          <el-tab-pane :label="`待采购${pendingBadgeCount ? '（' + pendingBadgeCount + '）' : ''}`" name="pending">
-            <div style="margin-bottom: 10px; display: flex; justify-content: flex-start; align-items: center; gap: 10px;">
+          <el-tab-pane
+            :label="`待采购${
+              pendingBadgeCount ? '（' + pendingBadgeCount + '）' : ''
+            }`"
+            name="pending"
+          >
+            <div
+              style="
+                margin-bottom: 10px;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                gap: 10px;
+              "
+            >
+            <el-input
+                v-model="pendingQuery.keywords"
+                placeholder="关键词"
+                size="small"
+                clearable
+                style="width: 200px"
+              />
               <el-select
                 v-model="pendingQuery.creator_department_id"
                 placeholder="科室"
@@ -25,7 +45,7 @@
               </el-select>
               <el-select
                 v-model="pendingQuery.created_by"
-                placeholder="采购负责人"
+                placeholder="发起人"
                 size="small"
                 clearable
                 filterable
@@ -38,25 +58,52 @@
                   :value="item.id"
                 />
               </el-select>
-              <el-input
-                v-model="pendingQuery.keywords"
-                placeholder="关键词"
+
+              <el-select
+                v-model="pendingQuery.chengbanren_id"
+                placeholder="采购负责人"
                 size="small"
                 clearable
-                style="width: 200px"
-              />
+                filterable
+                style="width: 150px"
+              >
+                <el-option
+                  v-for="item in purchasers"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+              <el-select
+                v-model="pendingQuery.caigouneirong"
+                placeholder="采购内容"
+                size="small"
+                clearable
+                filterable
+                style="width: 150px"
+              >
+                <el-option
+                  v-for="item in purchaseContents"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
               <el-button
                 type="primary"
                 size="small"
                 icon="el-icon-search"
                 @click="handlePendingQueryChange"
-              >查询</el-button>
+                >查询</el-button
+              >
               <el-button
                 type="primary"
                 size="small"
                 icon="el-icon-edit"
                 @click="handleBatchPay"
-              >批量支付</el-button>
+                >批量支付</el-button
+              >
+              
           </div>
             <el-table
               ref="pendingTable"
@@ -66,7 +113,11 @@
               row-key="id"
               @selection-change="handlePendingSelectionChange"
             >
-              <el-table-column type="selection" width="50" reserve-selection></el-table-column>
+              <el-table-column
+                type="selection"
+                width="50"
+                reserve-selection
+              ></el-table-column>
               <el-table-column label="申请人" width="120" align="center">
                 <template #default="{ row }">
                   {{ row.applicant }}
@@ -79,9 +130,22 @@
               </el-table-column>
               <el-table-column label="流程名称" width="160" align="center">
                 <template #default="{ row }">
-                  {{ row.flowTitle }}
+                  <div @click="showModal(row)" style="cursor: pointer;color: #409EFF;">
+                    {{ row.flowTitle }}
+          </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="采购内容" width="160" align="center" show-overflow-tooltip>
+                <template #default="{ row }">
+                  {{ row.purchaseContent }}
+                </template>
+              </el-table-column>
+              <el-table-column label="采购负责人" width="160" align="center" show-overflow-tooltip>
+                <template #default="{ row }">
+                  {{ row.purchaser }}
                 </template>
               </el-table-column>
+ 
               <el-table-column label="本次报销数量" width="160" align="center">
                 <template #default="{ row }">
                   <el-input-number
@@ -97,7 +161,14 @@
               </el-table-column>
               <el-table-column label="付款金额" width="160" align="center">
                 <template #default="{ row }">
-                  <el-input-number v-model="row.money" :min="0" :precision="2" :controls="false" size="small" style="width: 120px" />
+                  <el-input-number
+                    v-model="row.money"
+                    :min="0"
+                    :precision="2"
+                    :controls="false"
+                    size="small"
+                    style="width: 120px"
+                  />
                 </template>
               </el-table-column>
               <el-table-column label="已报销数量" width="120" align="center">
@@ -110,12 +181,68 @@
                   {{ row.total }}
                 </template>
               </el-table-column>
-              <el-table-column label="品名或服务需求" min-width="220" show-overflow-tooltip>
+              <el-table-column label="是否合同审批" width="140" align="center">
+                <template #default="{ row }">
+                  {{ row.isContractFlow }}
+                </template>
+              </el-table-column>
+              <el-table-column label="清单情况" width="140" align="center">
+                <template #default="{ row }">
+                  <el-select
+                    v-model="row.shifouqingdan"
+                    placeholder="清单情况"
+                    size="small"
+                    @change="val => handlePendingFieldUpdate(row, 'shifouqingdan', val)"
+                    style="width: 100px"
+                  >
+                    <el-option label="清单内" value="清单内" />
+                    <el-option label="清单外" value="清单外" />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="是否比价" width="120" align="center">
+                <template #default="{ row }">
+                  <el-select
+                    v-model="row.shifoubijia"
+                    placeholder="是否比价"
+                    size="small"
+                    @change="val => handlePendingFieldUpdate(row, 'shifoubijia', val)"
+                    style="width: 80px"
+                  >
+                    <el-option label="是" value="是" />
+                    <el-option label="否" value="否" />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="是否发货" width="120" align="center">
+                <template #default="{ row }">
+                  <el-select
+                    v-model="row.shifoufahuo"
+                    placeholder="是否发货"
+                    size="small"
+                    @change="val => handlePendingFieldUpdate(row, 'shifoufahuo', val)"
+                    style="width: 80px"
+                  >
+                    <el-option label="是" value="是" />
+                    <el-option label="否" value="否" />
+                  </el-select>
+                </template>
+              </el-table-column>
+              
+              <el-table-column
+                label="品名或服务需求"
+                min-width="220"
+                show-overflow-tooltip
+              >
                 <template #default="{ row }">
                   {{ row.itemName }}
                 </template>
               </el-table-column>
-              <el-table-column label="型号与规格" width="160" show-overflow-tooltip>
+              <el-table-column
+                label="型号与规格"
+                width="160"
+                show-overflow-tooltip
+              >
                 <template #default="{ row }">
                   {{ row.model }}
                 </template>
@@ -130,7 +257,11 @@
                   {{ row.unit }}
                 </template>
               </el-table-column>
-              <el-table-column label="用途" min-width="240" show-overflow-tooltip>
+              <el-table-column
+                label="用途"
+                min-width="240"
+                show-overflow-tooltip
+              >
                 <template #default="{ row }">
                   {{ row.purpose }}
                 </template>
@@ -148,10 +279,25 @@
             />
           </el-tab-pane>
 
-          <el-tab-pane label="采购中" name="processing">
-            <div style="margin-bottom: 10px; display: flex; justify-content: flex-start; align-items: center; gap: 10px;">
+          <el-tab-pane label="已支付" name="paid">
+            <div
+              style="
+                margin-bottom: 10px;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                gap: 10px;
+              "
+            >
+              <el-input
+                v-model="paidQuery.keywords"
+                placeholder="关键词"
+                size="small"
+                clearable
+                style="width: 200px"
+              />
               <el-select
-                v-model="processingQuery.creator_department_id"
+                v-model="paidQuery.creator_department_id"
                 placeholder="科室"
                 size="small"
                 clearable
@@ -165,8 +311,8 @@
                 />
               </el-select>
               <el-select
-                v-model="processingQuery.created_by"
-                placeholder="采购负责人"
+                v-model="paidQuery.created_by"
+                placeholder="发起人"
                 size="small"
                 clearable
                 filterable
@@ -179,170 +325,50 @@
                   :value="item.id"
                 />
               </el-select>
-              <el-input
-                v-model="processingQuery.keywords"
-                placeholder="关键词"
-                size="small"
-                clearable
-                style="width: 200px"
-              />
-              <el-button
-                type="primary"
-                size="small"
-                icon="el-icon-search"
-                @click="handleProcessingQueryChange"
-              >查询</el-button>
-              <el-button
-                type="primary"
-                size="small"
-                icon="el-icon-check"
-                @click="handleBatchConfirm"
-              >批量确认</el-button>
-        </div>
-            <el-table
-              ref="processingTable"
-              :data="processingRows"
-              border
-              style="width: 100%"
-              row-key="id"
-              @selection-change="handleProcessingSelectionChange"
-            >
-              <el-table-column type="selection" width="50" reserve-selection></el-table-column>
-              <el-table-column label="申请人" width="120" align="center">
-                <template #default="{ row }">
-                  {{ row.applicant }}
-                </template>
-              </el-table-column>
-              <el-table-column label="申请科室" width="140" align="center">
-                <template #default="{ row }">
-                  {{ row.department }}
-                </template>
-              </el-table-column>
-              <el-table-column label="流程名称" width="160" align="center">
-                <template #default="{ row }">
-                  {{ row.flowTitle }}
-                </template>
-              </el-table-column>
-              <el-table-column label="已报销数量" width="120" align="center">
-                <template #default="{ row }">
-                  {{ row.paidNum }}
-                </template>
-              </el-table-column>
-              <el-table-column label="付款金额" width="120" align="center">
-                <template #default="{ row }">
-                  {{ row.money }}
-                </template>
-              </el-table-column>
-              <el-table-column label="数量" width="120" align="center">
-                <template #default="{ row }">
-                  {{ row.total }}
-                </template>
-              </el-table-column>
-              <el-table-column label="品名或服务需求" min-width="220" show-overflow-tooltip>
-                <template #default="{ row }">
-                  {{ row.itemName }}
-                </template>
-              </el-table-column>
-              <el-table-column label="型号与规格" width="160" show-overflow-tooltip>
-                <template #default="{ row }">
-                  {{ row.model }}
-                </template>
-              </el-table-column>
-              <el-table-column label="产地" width="120" align="center">
-                <template #default="{ row }">
-                  {{ row.origin }}
-                </template>
-              </el-table-column>
-              <el-table-column label="单位" width="100" align="center">
-                <template #default="{ row }">
-                  {{ row.unit }}
-                </template>
-              </el-table-column>
-              <el-table-column label="用途" min-width="240" show-overflow-tooltip>
-                <template #default="{ row }">
-                  {{ row.purpose }}
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" width="120" align="center">
-                <template #default="{ row }">
-                  <el-button type="primary" size="mini" @click="confirmReceiveVue(row)">
-                      <i class="el-icon-check icon-space"></i>确认收货
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-pagination
-              style="margin-top: 10px"
-              @size-change="handleProcessingSizeChange"
-              @current-change="handleProcessingPageChange"
-              :current-page="processingPage"
-              :page-sizes="[10, 20, 30, 40, 50, 100]"
-              :page-size="processingPageSize"
-              layout="total, ->, prev, pager, next, sizes, jumper"
-              :total="processingTotal"
-            />
-          </el-tab-pane>
-
-          <el-tab-pane label="已收货" name="received">
-            <div style="margin-bottom: 10px; display: flex; justify-content: flex-start; align-items: center; gap: 10px;">
               <el-select
-                v-model="receivedQuery.creator_department_id"
-                placeholder="科室"
+                v-model="paidQuery.chengbanren_id"
+                placeholder="采购负责人"
                 size="small"
                 clearable
+                filterable
                 style="width: 150px"
               >
                 <el-option
-                  v-for="item in departments"
+                  v-for="item in purchasers"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id"
                 />
               </el-select>
               <el-select
-                v-model="receivedQuery.created_by"
-                placeholder="采购负责人"
+                v-model="paidQuery.caigouneirong"
+                placeholder="采购内容"
                 size="small"
                 clearable
                 filterable
                 style="width: 150px"
               >
                 <el-option
-                  v-for="item in users"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
+                  v-for="item in purchaseContents"
+                  :key="item"
+                  :label="item"
+                  :value="item"
                 />
               </el-select>
-              <el-input
-                v-model="receivedQuery.keywords"
-                placeholder="关键词"
-                size="small"
-                clearable
-                style="width: 200px"
-              />
               <el-button
                 type="primary"
                 size="small"
                 icon="el-icon-search"
-                @click="handleReceivedQueryChange"
-              >查询</el-button>
-              <el-button
-                type="primary"
-                size="small"
-                icon="el-icon-close"
-                @click="handleBatchCancel"
-              >批量取消</el-button>
+                @click="handlePaidQueryChange"
+                >查询</el-button
+              >
           </div>
             <el-table
-              ref="receivedTable"
-              :data="receivedRows"
+              :data="paidRows"
               border
               style="width: 100%"
               row-key="id"
-              @selection-change="handleReceivedSelectionChange"
             >
-              <el-table-column type="selection" width="50" reserve-selection></el-table-column>
               <el-table-column label="申请人" width="120" align="center">
                 <template #default="{ row }">
                   {{ row.applicant }}
@@ -355,9 +381,22 @@
               </el-table-column>
               <el-table-column label="流程名称" width="160" align="center">
                 <template #default="{ row }">
-                  {{ row.flowTitle }}
+                  <div @click="showModal(row)" style="cursor: pointer;color: #409EFF;">
+                    {{ row.flowTitle }}
+          </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="采购内容" width="160" align="center" show-overflow-tooltip>
+                <template #default="{ row }">
+                  {{ row.purchaseContent }}
+                </template>
+              </el-table-column>
+              <el-table-column label="采购负责人" width="160" align="center" show-overflow-tooltip>
+                <template #default="{ row }">
+                  {{ row.purchaser }}
                 </template>
               </el-table-column>
+
               <el-table-column label="已报销数量" width="120" align="center">
                 <template #default="{ row }">
                   {{ row.paidNum }}
@@ -373,12 +412,41 @@
                   {{ row.total }}
                 </template>
               </el-table-column>
-              <el-table-column label="品名或服务需求" min-width="220" show-overflow-tooltip>
+              <el-table-column label="是否合同审批" width="140" align="center">
+                <template #default="{ row }">
+                  {{ row.isContractFlow }}
+                </template>
+              </el-table-column>
+              <el-table-column label="清单情况" width="140" align="center">
+                <template #default="{ row }">
+                  {{ row.shifouqingdan || '' }}
+                </template>
+              </el-table-column>
+              <el-table-column label="是否比价" width="120" align="center">
+                <template #default="{ row }">
+                  {{ row.shifoubijia || '' }}
+                </template>
+              </el-table-column>
+              <el-table-column label="是否发货" width="120" align="center">
+                <template #default="{ row }">
+                  {{ row.shifoufahuo || '' }}
+                </template>
+              </el-table-column>
+              
+              <el-table-column
+                label="品名或服务需求"
+                min-width="220"
+                show-overflow-tooltip
+              >
                 <template #default="{ row }">
                   {{ row.itemName }}
                 </template>
               </el-table-column>
-              <el-table-column label="型号与规格" width="160" show-overflow-tooltip>
+              <el-table-column
+                label="型号与规格"
+                width="160"
+                show-overflow-tooltip
+              >
                 <template #default="{ row }">
                   {{ row.model }}
                 </template>
@@ -393,317 +461,544 @@
                   {{ row.unit }}
                 </template>
               </el-table-column>
-              <el-table-column label="用途" min-width="240" show-overflow-tooltip>
+              <el-table-column
+                label="用途"
+                min-width="240"
+                show-overflow-tooltip
+              >
                 <template #default="{ row }">
                   {{ row.purpose }}
                 </template>
               </el-table-column>
-              <el-table-column label="操作" width="120" align="center">
-                <template #default="{ row }">
-                  <el-button type="primary" size="mini" @click="cancelReceiveVue(row)">
-                    <i class="el-icon-close icon-space"></i>取消收货
-                  </el-button>
-                </template>
-              </el-table-column>
             </el-table>
             <el-pagination
               style="margin-top: 10px"
-              @size-change="handleReceivedSizeChange"
-              @current-change="handleReceivedPageChange"
-              :current-page="receivedPage"
+              @size-change="handlePaidSizeChange"
+              @current-change="handlePaidPageChange"
+              :current-page="paidPage"
               :page-sizes="[10, 20, 30, 40, 50, 100]"
-              :page-size="receivedPageSize"
+              :page-size="paidPageSize"
               layout="total, ->, prev, pager, next, sizes, jumper"
-              :total="receivedTotal"
+              :total="paidTotal"
             />
           </el-tab-pane>
         </el-tabs>
-      </div>
+        </div>
     </el-card>
 
     <payMx ref="payMx" :is-show.sync="isShowPay"></payMx>
+
+        <vxe-modal
+      v-model="isShowModal"
+      :z-index="zIndex"
+      transfer
+      show-zoom
+      resize
+      :fullscreen="true"
+      title="查看流程"
+      :width="defaultModalSize.width"
+      :height="defaultModalSize.height"
+      esc-closable
+      :padding="false"
+    >
+      <iframe
+        :src="modalUrl"
+        style="display: block;width: 100%;height: 100%;border: 0;"
+        frameborder="0"
+      />
+    </vxe-modal>
+
+    <el-dialog
+      title="已选采购明细"
+      :visible.sync="selectedPreviewVisible"
+      width="60%"
+      @close="closeSelectedPreview"
+    >
+      <el-table
+        ref="previewTable"
+        :data="selectedPreviewRows"
+        border
+        height="400"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="handleSelectedPreviewSelectionChange"
+      >
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="申请人" width="120" align="center">
+          <template #default="{ row }">
+            {{ row.applicant }}
+          </template>
+        </el-table-column>
+        <el-table-column label="申请科室" width="140" align="center">
+          <template #default="{ row }">
+            {{ row.department }}
+          </template>
+        </el-table-column>
+        <el-table-column label="流程名称" width="160" align="center">
+          <template #default="{ row }">
+            <div @click="showModal(row)" style="cursor: pointer;color: #409EFF;">
+              {{ row.flowTitle }}
+          </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="采购内容" min-width="160" align="center" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.purchaseContent }}
+          </template>
+        </el-table-column>
+        <el-table-column label="采购负责人" width="140" align="center" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.purchaser }}
+          </template>
+        </el-table-column>
+        <el-table-column label="本次报销数量" width="160" align="center">
+          <template #default="{ row }">
+            <el-input-number
+              v-model="row.applyNum"
+              :min="0"
+              :controls="false"
+              size="small"
+              :class="{ 'error-input': isApplyNumInvalid(row) }"
+              style="width: 120px"
+              @change="validateApplyNum(row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="付款金额" width="160" align="center">
+          <template #default="{ row }">
+            <el-input-number v-model="row.money" :min="0" :precision="2" :controls="false" size="small" style="width: 120px" />
+          </template>
+        </el-table-column>
+        <el-table-column label="已报销数量" width="120" align="center">
+          <template #default="{ row }">
+            {{ row.paidNum }}
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" width="120" align="center">
+          <template #default="{ row }">
+            {{ row.total }}
+          </template>
+        </el-table-column>
+        <el-table-column label="是否合同审批" width="140" align="center">
+                <template #default="{ row }">
+                  {{ row.isContractFlow }}
+                </template>
+              </el-table-column>
+              <el-table-column label="清单情况" width="140" align="center">
+                <template #default="{ row }">
+                  {{ row.shifouqingdan || '' }}
+                </template>
+              </el-table-column>
+              <el-table-column label="是否比价" width="120" align="center">
+                <template #default="{ row }">
+                  {{ row.shifoubijia || '' }}
+                </template>
+              </el-table-column>
+              <el-table-column label="是否发货" width="120" align="center">
+                <template #default="{ row }">
+                  {{ row.shifoufahuo || '' }}
+                </template>
+              </el-table-column>
+        <el-table-column label="品名或服务需求" min-width="160" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.itemName }}
+          </template>
+        </el-table-column>
+        <el-table-column label="型号与规格" width="160" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.model }}
+          </template>
+        </el-table-column>
+        <el-table-column label="产地" width="120" align="center">
+          <template #default="{ row }">
+            {{ row.origin }}
+          </template>
+        </el-table-column>
+        <el-table-column label="单位" width="100" align="center">
+          <template #default="{ row }">
+            {{ row.unit }}
+          </template>
+        </el-table-column>
+        <el-table-column label="用途" min-width="160" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.purpose }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeSelectedPreview">取 消</el-button>
+        <el-button type="primary" @click="confirmSelectedPreview">确认支付</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
-import { waitList, receiveList, confirmList, getFundLog, detailContract } from '@/api/flow/pay'
-import payMx from './components/payMx.vue'
 import {
-  departmentListNoAuth,
-  userListNoAuth
-} from '@/api/common.js'
+  waitList,
+  receiveList,
+  getFundLog,
+  detailContract,
+  updateList
+} from '@/api/flow/pay';
+import payMx from "./components/payMx.vue";
+import { departmentListNoAuth, caigoumingxiConfig,userListNoAuth } from '@/api/common';
+import { PopupManager } from 'element-ui/lib/utils/popup';
+import { defaultModalSize } from '@/settings';
+import { getToken } from '@/utils/auth';
 export default {
-  name: 'PayList',
+  name: "PayList",
   components: {
     payMx,
   },
   data() {
     return {
+      isShowModal:false,
+      modalUrl:'',
+      zIndex: PopupManager.nextZIndex(),
+      defaultModalSize,
       departments: [],
       users: [],
+      purchasers: [], // 采购负责人列表
+      purchaseContents: [], // 采购内容列表
       waitList: [],
-      receiveList: [],
-      confirmList: [],
-      activeTab: 'pending',
+      activeTab: "pending",
       pendingQuery: {
-        creator_department_id: '',
-        created_by: '',
-        keywords: '',
+        creator_department_id: "",
+        created_by: "",
+        keywords: "",
+        chengbanren_id: "",
+        caigouneirong: "",
       },
       pendingRows: [],
       pendingPage: 1,
       pendingPageSize: 40,
       pendingTotal: 0,
       pendingSelectedIds: [],
+      pendingSelectedMap: {},
+      selectedPreviewVisible: false,
+      selectedPreviewRows: [],
+      selectedPreviewSelection: [],
+      syncingPreviewSelection: false,
+      syncingPendingSelection: false,
       isShowPay: false,
-      processingQuery: {
-        creator_department_id: '',
-        created_by: '',
-        keywords: '',
-      },
-      processingRows: [],
-      processingPage: 1,
-      processingPageSize: 40,
-      processingTotal: 0,
-      processingSelectedIds: [],
-      receivedQuery: {
-        creator_department_id: '',
-        created_by: '',
-        keywords: '',
+      paidQuery: {
+        creator_department_id: "",
+        created_by: "",
+        keywords: "",
+        chengbanren_id: "",
+        caigouneirong: "",
       },
-      receivedRows: [],
-      receivedPage: 1,
-      receivedPageSize: 40,
-      receivedTotal: 0,
-      receivedSelectedIds: [],
-    }
+      paidRows: [],
+      paidPage: 1,
+      paidPageSize: 40,
+      paidTotal: 0,
+    };
   },
   computed: {
     pendingBadgeCount() {
-      return this.pendingRows.filter(r => r.checked).length
+      return (this.pendingSelectedIds && this.pendingSelectedIds.length) ? this.pendingSelectedIds.length : 0;
     },
   },
   methods: {
-    async getDepartmentList() {
+    async handlePendingFieldUpdate(row, field, value) {
+      const oldValue = row[field]
+      // v-model 已经写入新值，这里确保使用传入值
       try {
-        const res = await departmentListNoAuth()
-        console.log(res)
-        const arr = res
-        this.departments = arr
-        this.departments.unshift({
-          id: '',
-          name: '全部'
-        })
-      } catch (err) {
-        console.error(err)
+        await updateList({ id: row.id, [field]: value })
+        this.$message.success('已保存')
+      } catch (e) {
+        // 失败回滚
+        this.$message.error('保存失败，请重试')
+        this.$set(row, field, oldValue)
       }
     },
+    showModal(row) {
+      this.modalUrl = `/oa/#/flow/detail?module_id=${row.yibancaigou?.flow?.custom_model_id}&flow_id=${row.yibancaigou?.flow?.id}&auth_token=${window.encodeURIComponent(getToken())}&isSinglePage=1`;
+      this.isShowModal = true;
+    },
+    async getDepartmentList() {
+      const res = await departmentListNoAuth();
+      console.log(res);
+      const arr = res;
+      this.departments = arr;
+      this.departments.unshift({
+        id: "",
+        name: "全部",
+      });
+    },
     async getUserList() {
-      try {
-        const res = await userListNoAuth({
-          page: 1,
-          rows: 9999
-        })
-        console.log(res)
-        const arr = res.data
-        this.users = arr
-      } catch (err) {
-        console.error(err)
-      }
+      const res = await caigoumingxiConfig();
+      const userRes = await userListNoAuth({
+        page: 1,
+        rows: 9999,
+      });
+      console.log(res);
+      const arr = userRes.data;
+      this.users = arr;
+      // 保存采购负责人列表
+      this.purchasers = res.users;
+      // 保存采购内容列表
+      this.purchaseContents = res.customModelFieldStub;
+    },
+    switchTab(tab) {
+      this.activeTab = tab;
     },
-    switchTab(tab) { this.activeTab = tab },
     isApplyNumInvalid(row) {
-      const applyNum = row.applyNum === null || row.applyNum === undefined ? null : Number(row.applyNum)
-      const paidNum = Number(row.paidNum) || 0
-      const total = Number(row.total) || 0
-      
+      const applyNum =
+        row.applyNum === null || row.applyNum === undefined
+          ? null
+          : Number(row.applyNum);
+      const paidNum = Number(row.paidNum) || 0;
+      const total = Number(row.total) || 0;
+
       // 如果未输入，不显示错误
       if (applyNum === null) {
-        return false
+        return false;
       }
-      
+
       // 检查本次报销数量是否为0
       if (applyNum === 0) {
-        return true
+        return true;
       }
-      
+
       // 检查本次报销数量 + 已报销数量是否大于总数量
       if (applyNum + paidNum > total) {
-        return true
+        return true;
       }
-      
-      return false
+
+      return false;
     },
     validateApplyNum(row) {
       if (this.isApplyNumInvalid(row)) {
-        const applyNum = row.applyNum === null || row.applyNum === undefined ? null : Number(row.applyNum)
-        const paidNum = Number(row.paidNum) || 0
-        const total = Number(row.total) || 0
-        
+        const applyNum =
+          row.applyNum === null || row.applyNum === undefined
+            ? null
+            : Number(row.applyNum);
+        const paidNum = Number(row.paidNum) || 0;
+        const total = Number(row.total) || 0;
+
         if (applyNum === 0) {
-          this.$message.warning('本次报销数量不能为0')
+          this.$message.warning("本次报销数量不能为0");
         } else if (applyNum + paidNum > total) {
-          this.$message.warning('本次报销数量大于剩余可报销数量')
+          this.$message.warning("本次报销数量大于剩余可报销数量");
         }
       }
     },
     async handleBatchPay() {
+      // 检查是否选中数据
+      if (this.pendingSelectedIds.length === 0) {
+        this.$message.warning('请先选择需要支付的明细')
+        return
+      }
+      this.openSelectedPreview()
+      return
+      // 以下老逻辑暂时保留（不执行）
+      if (this.pendingSelectedIds.length === 0) {
+        this.$message.warning("请先选择需要支付的明细");
+        return;
+      }
+
+      // 获取当前页选中的行（使用 Element UI 的正确方法）
+      const currentPageSelectedRows = this.pendingRows.filter((row) =>
+        this.pendingSelectedIds.includes(row.id)
+      );
+
       // 检查是否有跨页选中的数据
-      const currentPageIds = this.pendingRows.map(row => row.id)
-      const crossPageSelectedIds = this.pendingSelectedIds.filter(id => !currentPageIds.includes(id))
-      
+      const currentPageIds = this.pendingRows.map((row) => row.id);
+      const crossPageSelectedIds = this.pendingSelectedIds.filter(
+        (id) => !currentPageIds.includes(id)
+      );
+
       if (crossPageSelectedIds.length > 0) {
         // 需要获取跨页选中数据的完整信息来计算页面
         const params = {
           page: 1,
-          page_size: this.pendingTotal || 9999 // 获取所有数据以计算页面
-        }
+          page_size: this.pendingTotal || 9999, // 获取所有数据以计算页面
+        };
         if (this.pendingQuery.creator_department_id) {
-          params.creator_department_id = this.pendingQuery.creator_department_id
+          params.creator_department_id =
+            this.pendingQuery.creator_department_id;
         }
         if (this.pendingQuery.created_by) {
-          params.created_by = this.pendingQuery.created_by
+          params.created_by = this.pendingQuery.created_by;
         }
         if (this.pendingQuery.keywords) {
-          params.keywords = this.pendingQuery.keywords
+          params.keywords = this.pendingQuery.keywords;
         }
-        
-        try {
-          const res = await waitList(params)
-          const allData = res.data || []
-          
-          // 找出跨页选中数据所在的页面
-          const pagesToComplete = new Set()
-          crossPageSelectedIds.forEach(selectedId => {
-            const index = allData.findIndex(item => item.id === selectedId)
-            if (index !== -1) {
-              const page = Math.floor(index / this.pendingPageSize) + 1
-              pagesToComplete.add(page)
-            }
-          })
-          
-          if (pagesToComplete.size > 0) {
-            const pagesArray = Array.from(pagesToComplete).sort((a, b) => a - b)
-            const pagesText = pagesArray.join('、')
-            this.$message.warning(`请完善第${pagesText}页的数据`)
-            return
+        if (this.pendingQuery.chengbanren_id) {
+          params.chengbanren_id = this.pendingQuery.chengbanren_id;
+        }
+        if (this.pendingQuery.caigouneirong) {
+          params.caigouneirong = this.pendingQuery.caigouneirong;
+        }
+
+        const res = await waitList(params);
+        const allData = res.data || [];
+
+        // 找出跨页选中数据所在的页面
+        const pagesToComplete = new Set();
+        crossPageSelectedIds.forEach((selectedId) => {
+          const index = allData.findIndex((item) => item.id === selectedId);
+          if (index !== -1) {
+            const page = Math.floor(index / this.pendingPageSize) + 1;
+            pagesToComplete.add(page);
           }
-        } catch (err) {
-          console.error('获取数据失败:', err)
-          this.$message.warning('请完善其他页面的数据')
-          return
+        });
+
+        if (pagesToComplete.size > 0) {
+          const pagesArray = Array.from(pagesToComplete).sort((a, b) => a - b);
+          const pagesText = pagesArray.join("、");
+          this.$message.warning(`请完善第${pagesText}页的数据`);
+          return;
         }
       }
-      
-      const selectedRows = this.$refs.pendingTable?.getSelectionRows() || []
+
+      // 使用当前页选中的行进行验证
+      const selectedRows = currentPageSelectedRows;
       if (selectedRows.length === 0) {
-        this.$message.warning('请先选择需要支付的明细')
-        return
+        this.$message.warning("请先选择需要支付的明细");
+        return;
       }
-      
+
       // 验证选中的数据
-      const invalidRows = []
-      selectedRows.forEach(row => {
-        const applyNum = Number(row.applyNum) || 0
-        const paidNum = Number(row.paidNum) || 0
-        const total = Number(row.total) || 0
-        
+      const invalidRows = [];
+      selectedRows.forEach((row) => {
+        const applyNum = Number(row.applyNum) || 0;
+        const paidNum = Number(row.paidNum) || 0;
+        const total = Number(row.total) || 0;
+
         // 检查本次报销数量是否为0
         if (applyNum === 0) {
           invalidRows.push({
             row,
-            reason: '本次报销数量不能为0'
-          })
+            reason: "本次报销数量不能为0",
+          });
         }
         // 检查本次报销数量 + 已报销数量是否大于总数量
         else if (applyNum + paidNum > total) {
           invalidRows.push({
             row,
-            reason: '本次报销数量大于剩余可报销数量'
-          })
+            reason: "本次报销数量大于剩余可报销数量",
+          });
         }
-      })
-      
+      });
+
       // 如果有不符合条件的数据，提示并阻止提交
       if (invalidRows.length > 0) {
-        const errorMessages = invalidRows.map(item => {
-          const itemName = item.row.itemName || '未知项目'
-          return `${itemName}：${item.reason}`
-        }).join('；')
-        
-        this.$message.warning(`以下数据不符合条件：${errorMessages}`)
-        
+        const errorMessages = invalidRows
+          .map((item) => {
+            const itemName = item.row.itemName || "未知项目";
+            return `${itemName}：${item.reason}`;
+          })
+          .join("；");
+
+        this.$message.warning(`以下数据不符合条件：${errorMessages}`);
+
         // 确保错误行显示红色边框（通过触发响应式更新）
         this.$nextTick(() => {
           // 强制更新视图，确保红色边框显示
-          this.$forceUpdate()
-        })
-        
-        return
+          this.$forceUpdate();
+        });
+
+        return;
       }
-      
+
       // 构造 baseInfo
-      const titleParts = selectedRows.map(r => `${r.itemName || ''}*${Number(r.applyNum) || 0}`)
-      const zhifutitle = `${titleParts.join(',')}${titleParts.length ? ',' : ''}`
-      const xiangxishuoming = zhifutitle
+      const titleParts = selectedRows.map(
+        (r) => `${r.itemName || ""}*${Number(r.applyNum) || 0}`
+      );
+      const zhifutitle = `${titleParts.join(",")}${
+        titleParts.length ? "," : ""
+      }`;
+      const xiangxishuoming = zhifutitle;
 
       // 合同ID集合（去重）
-      const contractIdSet = Array.from(new Set(
-        selectedRows
-          .map(r => r?.yibancaigou?.flow?.out_contract_id)
-          .filter(id => id)
-      ))
-      const contractIdsStr = contractIdSet.join(',')
+      const contractIdSet = Array.from(
+        new Set(
+          selectedRows
+            .map((r) => r?.yibancaigou?.flow?.out_contract_id)
+            .filter((id) => id)
+        )
+      );
+      const contractIdsStr = contractIdSet.join(",");
 
       // 合同ID字符串（按要求：相同取一个）
-      const contract_id = contractIdsStr
+      const contract_id = contractIdsStr;
 
       // 申请总金额
-      const amt = selectedRows.reduce((sum, r) => sum + (Number(r.money) || 0), 0)
+      const amt = selectedRows.reduce(
+        (sum, r) => sum + (Number(r.money) || 0),
+        0
+      );
 
       // 已付金额与次数：getFundLog
-      let yifujine = 0
-      let cishu = 0
-      try {
-        const fundRes = await getFundLog({ contract_id: contractIdsStr, show_type: 1 })
-        const payments = fundRes?.data || []
-        // @payMx.vue (591-592)
-        const actNumsTotal = () => payments.reduce((pre, cur) => pre + (Number(cur?.act_money) ? Number(cur.act_money) : 0), 0)
-        yifujine = actNumsTotal()
-        cishu = Array.isArray(payments) ? payments.length : 0
-      } catch (e) {
-        console.warn('getFundLog failed', e)
-      }
+      let yifujine = 0;
+      let cishu = 0;
+      const fundRes = await getFundLog({
+        contract_id: contractIdsStr,
+        show_type: 1,
+      });
+      const payments = fundRes?.data || [];
+      // @payMx.vue (591-592)
+      const actNumsTotal = () =>
+        payments.reduce(
+          (pre, cur) =>
+            pre + (Number(cur?.act_money) ? Number(cur.act_money) : 0),
+          0
+        );
+      yifujine = actNumsTotal();
+      cishu = Array.isArray(payments) ? payments.length : 0;
 
       // 相关合同信息（详细）
-      let xiangmuzonge = 0
-      let zhifucishu = 0
-      let liezhiqudao = ''
-      let contractno = ''
-      let guanlianliucheng = ''
-      try {
-        // @payMx.vue (579-586)
-        let contracts = []
-        if (contractIdSet.length > 0) {
-          contracts = await Promise.all(
-            contractIdSet.map(id => detailContract({ id }))
-          )
-        }
-        // @payMx.vue (601-606)
-        const sumMoney = (contracts || []).reduce((sum, c) => sum + (Number(c?.money) || 0), 0)
-        const sumPlanLen = (contracts || []).reduce((sum, c) => sum + ((c?.sign_plan?.length) || 0), 0)
-        const plansNames = Array.from(new Set((contracts || []).flatMap(c => (c?.plans || []).map(p => p?.name)).filter(Boolean))).join(',')
-        const contractNos = (contracts || []).map(c => c?.number).filter(Boolean).join(',')
-        const relatedFlows = Array.from(new Set((contracts || []).flatMap(c => (c?.contract_flow_links || []).map(l => l?.flow_id)).filter(Boolean))).join(',')
-
-        xiangmuzonge = sumMoney
-        zhifucishu = sumPlanLen
-        liezhiqudao = plansNames
-        contractno = contractNos
-        guanlianliucheng = relatedFlows
-      } catch (e) {
-        console.warn('detailContract failed', e)
+      let xiangmuzonge = 0;
+      let zhifucishu = 0;
+      let liezhiqudao = "";
+      let contractno = "";
+      let guanlianliucheng = "";
+      // @payMx.vue (579-586)
+      let contracts = [];
+      if (contractIdSet.length > 0) {
+        contracts = await Promise.all(
+          contractIdSet.map((id) => detailContract({ id }))
+        );
       }
+      // @payMx.vue (601-606)
+      const sumMoney = (contracts || []).reduce(
+        (sum, c) => sum + (Number(c?.money) || 0),
+        0
+      );
+      const sumPlanLen = (contracts || []).reduce(
+        (sum, c) => sum + (c?.sign_plan?.length || 0),
+        0
+      );
+      const plansNames = Array.from(
+        new Set(
+          (contracts || [])
+            .flatMap((c) => (c?.plans || []).map((p) => p?.name))
+            .filter(Boolean)
+        )
+      ).join(",");
+      const contractNos = (contracts || [])
+        .map((c) => c?.number)
+        .filter(Boolean)
+        .join(",");
+      const relatedFlows = Array.from(
+        new Set(
+          (contracts || [])
+            .flatMap((c) =>
+              (c?.contract_flow_links || []).map((l) => l?.flow_id)
+            )
+            .filter(Boolean)
+        )
+      ).join(",");
+
+      xiangmuzonge = sumMoney;
+      zhifucishu = sumPlanLen;
+      liezhiqudao = plansNames;
+      contractno = contractNos;
+      guanlianliucheng = relatedFlows;
 
       const baseInfo = {
         zhifutitle,
@@ -717,11 +1012,11 @@ export default {
         liezhiqudao,
         contractno,
         guanlianliucheng,
-        wuzicaigou_items
-      }
+        wuzicaigou_items,
+      };
 
       // 明细项
-      const wuzicaigou_items = selectedRows.map(r => ({
+      const wuzicaigou_items = selectedRows.map((r) => ({
         flow_id: r?.yibancaigou?.flow?.id,
         contract_id: r?.yibancaigou?.flow?.out_contract_id,
         wuzicaigou_id: r?.yibancaigou?.id,
@@ -731,421 +1026,453 @@ export default {
         total: Number(r?.num) || 0,
         apply_money: Number(r?.money) || 0,
         money: Number(r?.money) || 0,
-        is_receive: 0
-      }))
+        is_receive: 0,
+      }));
 
       // 暂存到实例，供后续使用
-      baseInfo.wuzicaigou_items = wuzicaigou_items
-      console.log(baseInfo, 'baseInfo')
-      const url = `/flow/create?&module_name=oa&isSinglePage=1&module_id=75&default_json=${window.encodeURIComponent(JSON.stringify(baseInfo))}`
-      this.$router.push(url)
+      baseInfo.wuzicaigou_items = wuzicaigou_items;
+      console.log(baseInfo, "baseInfo");
+      const url = `/flow/create?&module_name=oa&isSinglePage=1&module_id=75&default_json=${window.encodeURIComponent(
+        JSON.stringify(baseInfo)
+      )}`;
+      this.$router.push(url);
       // this.$message.success('数据已整理完成，可进行后续流程')
     },
-    handleBatchConfirm() {
-      if (this.processingSelectedIds.length === 0) {
-        this.$message.warning('请先选择需要确认收货的数据')
-        return
-      }
-      this.$confirm(`确定要确认收货吗？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
-        .then(() => {
-          const ids = this.processingSelectedIds.join(',')
-          this.confirmReceive(ids)
-        })
-        .catch(() => {})
-    },
-    confirmReceiveVue(row) {
-      this.$confirm(`确定要确认收货吗？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
-        .then(() => {
-          this.confirmReceive(row.id)
-        })
-        .catch(() => {})
-    },
-    async confirmReceive(id) {
-      try {
-        await confirmList({
-          ids: id,
-          is_receive: 1,
-        })
-        this.$message.success('确认收货成功')
-        // 清空选中ID集合
-        const idArray = id.split(',')
-        idArray.forEach(idStr => {
-          const index = this.processingSelectedIds.indexOf(Number(idStr))
-          if (index > -1) {
-            this.processingSelectedIds.splice(index, 1)
-          }
-        })
-        // 刷新数据
-        await this.getProcessingList()
-      } catch (err) {
-        console.error('确认收货失败:', err)
-        this.$message.error('确认收货失败')
-      }
-    },
-    handleBatchCancel() {
-      if (this.receivedSelectedIds.length === 0) {
-        this.$message.warning('请先选择需要取消收货的数据')
-        return
-      }
-      this.$confirm(`确定要取消收货吗？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
-        .then(() => {
-          const ids = this.receivedSelectedIds.join(',')
-          this.cancelReceive(ids)
-        })
-        .catch(() => {})
-    },
-    cancelReceiveVue(row) {
-      this.$confirm('确定要取消收货吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
-        .then(() => {
-          this.cancelReceive(row.id)
-        })
-        .catch(() => {})
-    },
-    async cancelReceive(id) {
-      try {
-        await confirmList({
-          ids: id,
-          is_receive: 0,
-        })
-        this.$message.success('取消收货成功')
-        // 清空选中ID集合
-        const idArray = id.split(',')
-        idArray.forEach(idStr => {
-          const index = this.receivedSelectedIds.indexOf(Number(idStr))
-          if (index > -1) {
-            this.receivedSelectedIds.splice(index, 1)
-          }
-        })
-        // 刷新数据
-        await this.getReceivedList()
-      } catch (err) {
-        console.error('取消收货失败:', err)
-        this.$message.error('取消收货失败')
-      }
-    },
     handlePendingSelectionChange(selection) {
+      if (this.syncingPendingSelection) return;
       // 获取当前页选中的ID
-      const currentPageIds = selection.map(row => row.id)
+      const currentPageIds = selection.map((row) => row.id);
       // 获取当前页所有行的ID
-      const currentPageAllIds = this.pendingRows.map(row => row.id)
-      // 移除当前页中取消选中的ID
-      currentPageAllIds.forEach(id => {
-        if (!currentPageIds.includes(id) && this.pendingSelectedIds.includes(id)) {
-          const index = this.pendingSelectedIds.indexOf(id)
-          if (index > -1) {
-            this.pendingSelectedIds.splice(index, 1)
+      const currentPageAllIds = this.pendingRows.map((row) => row.id);
+      // 更新选中映射
+      currentPageIds.forEach((id) => {
+        const record =
+          selection.find((row) => row.id === id) ||
+          this.pendingRows.find((row) => row.id === id);
+        if (record) {
+          this.$set(this.pendingSelectedMap, id, record);
+        }
+      });
+      currentPageAllIds.forEach((id) => {
+        if (!currentPageIds.includes(id)) {
+          if (this.pendingSelectedIds.includes(id)) {
+            const index = this.pendingSelectedIds.indexOf(id);
+            if (index > -1) {
+              this.pendingSelectedIds.splice(index, 1);
+            }
+          }
+          if (this.pendingSelectedMap[id]) {
+            this.$delete(this.pendingSelectedMap, id);
           }
         }
-      })
-      // 添加当前页中新选中的ID
-      currentPageIds.forEach(id => {
+      });
+      currentPageIds.forEach((id) => {
         if (!this.pendingSelectedIds.includes(id)) {
-          this.pendingSelectedIds.push(id)
+          this.pendingSelectedIds.push(id);
         }
-      })
-    },
-    handleProcessingSelectionChange(selection) {
-      // 获取当前页选中的ID
-      const currentPageIds = selection.map(row => row.id)
-      // 获取当前页所有行的ID
-      const currentPageAllIds = this.processingRows.map(row => row.id)
-      // 移除当前页中取消选中的ID
-      currentPageAllIds.forEach(id => {
-        if (!currentPageIds.includes(id) && this.processingSelectedIds.includes(id)) {
-          const index = this.processingSelectedIds.indexOf(id)
-          if (index > -1) {
-            this.processingSelectedIds.splice(index, 1)
+        if (!this.pendingSelectedMap[id]) {
+          const record = this.pendingRows.find((row) => row.id === id);
+          if (record) {
+            this.$set(this.pendingSelectedMap, id, record);
           }
         }
-      })
-      // 添加当前页中新选中的ID
-      currentPageIds.forEach(id => {
-        if (!this.processingSelectedIds.includes(id)) {
-          this.processingSelectedIds.push(id)
-        }
-      })
+      });
     },
-    handleReceivedSelectionChange(selection) {
-      // 获取当前页选中的ID
-      const currentPageIds = selection.map(row => row.id)
-      // 获取当前页所有行的ID
-      const currentPageAllIds = this.receivedRows.map(row => row.id)
-      // 移除当前页中取消选中的ID
-      currentPageAllIds.forEach(id => {
-        if (!currentPageIds.includes(id) && this.receivedSelectedIds.includes(id)) {
-          const index = this.receivedSelectedIds.indexOf(id)
-          if (index > -1) {
-            this.receivedSelectedIds.splice(index, 1)
-          }
-        }
-      })
-      // 添加当前页中新选中的ID
-      currentPageIds.forEach(id => {
-        if (!this.receivedSelectedIds.includes(id)) {
-          this.receivedSelectedIds.push(id)
+    syncPendingTableSelection() {
+      this.$nextTick(() => {
+        if (this.$refs.pendingTable) {
+          this.syncingPendingSelection = true;
+          this.$refs.pendingTable.clearSelection();
+          this.pendingRows.forEach((row) => {
+            if (this.pendingSelectedIds.includes(row.id)) {
+              this.$refs.pendingTable.toggleRowSelection(row, true);
+            }
+          });
+          this.$nextTick(() => { this.syncingPendingSelection = false; });
         }
-      })
+      });
     },
     handlePendingQueryChange() {
-      this.pendingPage = 1
-      this.getWaitList()
+      this.pendingPage = 1;
+      this.getWaitList();
     },
     handlePendingSizeChange(val) {
-      this.pendingPageSize = val
-      this.pendingPage = 1
-      this.getWaitList()
+      this.pendingPageSize = val;
+      this.pendingPage = 1;
+      this.getWaitList();
     },
     handlePendingPageChange(val) {
-      this.pendingPage = val
-      this.getWaitList()
+      this.pendingPage = val;
+      this.getWaitList();
     },
-    handleProcessingQueryChange() {
-      this.processingPage = 1
-      this.getProcessingList()
+    handlePaidQueryChange() {
+      this.paidPage = 1;
+      this.getPaidList();
     },
-    handleReceivedQueryChange() {
-      this.receivedPage = 1
-      this.getReceivedList()
+    handlePaidSizeChange(val) {
+      this.paidPageSize = val;
+      this.paidPage = 1;
+      this.getPaidList();
     },
-    async getWaitList() {
-      try {
-        const params = {
-          page: this.pendingPage,
-          page_size: this.pendingPageSize,
-        }
-        if (this.pendingQuery.creator_department_id) {
-          params.creator_department_id = this.pendingQuery.creator_department_id
-        }
-        if (this.pendingQuery.created_by) {
-          params.created_by = this.pendingQuery.created_by
-        }
-        if (this.pendingQuery.keywords) {
-          params.keywords = this.pendingQuery.keywords
-        }
-        const res = await waitList(params)
-        this.waitList = res.data || []
-        this.pendingTotal = res.total || 0
-        // 映射数据到表格字段
-        this.pendingRows = (res.data || []).map(item => ({
-          ...item, // 保留原始数据，方便后续使用
-          checked: false,
-          applicant: item.yibancaigou?.flow?.creator?.name || '',
-          department: item.yibancaigou?.flow?.creator_department?.name || '',
-          flowTitle: item.yibancaigou?.flow?.title || '',
-          paidNum: item.fund_log_wuzicaigou_items_sum_num || 0,
-          total: item.num || 0,
-          itemName: item.pinminghuofuwuxuqiu || '',
-          model: item.xinghao || '',
-          origin: item.chandi || '',
-          unit: item.danwei || '',
-          purpose: item.yongtu || '',
-          applyNum: null, // 本次报销数量，由用户输入
-          money: null, // 付款金额，由用户输入
-        }))
-        // 恢复选中状态
-        this.$nextTick(() => {
-          if (this.$refs.pendingTable && this.pendingSelectedIds.length > 0) {
-            this.pendingRows.forEach(row => {
-              if (this.pendingSelectedIds.includes(row.id)) {
-                this.$refs.pendingTable.toggleRowSelection(row, true)
-              }
-            })
-          }
-        })
-      } catch (err) {
-        console.error('获取待采购列表失败:', err)
-        this.$message.error('获取待采购列表失败')
-      }
+    handlePaidPageChange(val) {
+      this.paidPage = val;
+      this.getPaidList();
     },
-    async getProcessingList() {
-      try {
-        const params = {
-          page: this.processingPage,
-          page_size: this.processingPageSize,
-          is_receive: 0,
-        }
-        if (this.processingQuery.creator_department_id) {
-          params.creator_department_id = this.processingQuery.creator_department_id
-        }
-        if (this.processingQuery.created_by) {
-          params.created_by = this.processingQuery.created_by
-        }
-        if (this.processingQuery.keywords) {
-          params.keywords = this.processingQuery.keywords
-        }
-        const res = await receiveList(params)
-        this.processingTotal = res.total || 0
-        // 映射数据到表格字段
-        this.processingRows = (res.data || []).map(item => ({
-          ...item,
-          applicant: item.yibancaigou?.flow?.creator?.name || '',
-          department: item.yibancaigou?.flow?.creator_department?.name || '',
-          flowTitle: item.yibancaigou?.flow?.title || '',
-          paidNum: item.num || 0,
-          money: item.money || 0,
-          total: item.caigoumingxi?.num || 0,
-          itemName: item.caigoumingxi?.pinminghuofuwuxuqiu || '',
-          model: item.caigoumingxi?.xinghao || '',
-          origin: item.caigoumingxi?.chandi || '',
-          unit: item.caigoumingxi?.danwei || '',
-          purpose: item.caigoumingxi?.yongtu || '',
-        }))
-        // 恢复选中状态
-        this.$nextTick(() => {
-          if (this.$refs.processingTable && this.processingSelectedIds.length > 0) {
-            this.processingRows.forEach(row => {
-              if (this.processingSelectedIds.includes(row.id)) {
-                this.$refs.processingTable.toggleRowSelection(row, true)
-              }
-            })
+    openSelectedPreview() {
+      // 记录已存在的编辑值，便于重建时保留
+      const editedMap = {}
+      ;(this.selectedPreviewRows || []).forEach(r => {
+        editedMap[r.id] = { applyNum: r.applyNum, money: r.money }
+      })
+
+      // 按当前已选的待采购集合构建预览（始终以最新选择为准）
+      const rows = this.pendingSelectedIds
+        .map((id) => {
+          if (!this.pendingSelectedMap[id]) {
+            const record = this.pendingRows.find((row) => row.id === id);
+            if (record) {
+              this.$set(this.pendingSelectedMap, id, record);
+            }
+          }
+          const rec = this.pendingSelectedMap[id]
+          if (!rec) return null
+          // 合并保留之前在弹窗中编辑过的值
+          const edited = editedMap[id]
+          if (edited) {
+            if (edited.applyNum !== undefined && edited.applyNum !== null) rec.applyNum = edited.applyNum
+            if (edited.money !== undefined && edited.money !== null) rec.money = edited.money
           }
+          return rec
         })
-      } catch (err) {
-        console.error('获取采购中列表失败:', err)
-        this.$message.error('获取采购中列表失败')
-      }
-    },
-    async getReceivedList() {
-      try {
-        const params = {
-          page: this.receivedPage,
-          page_size: this.receivedPageSize,
-          is_receive: 1,
-        }
-        if (this.receivedQuery.creator_department_id) {
-          params.creator_department_id = this.receivedQuery.creator_department_id
-        }
-        if (this.receivedQuery.created_by) {
-          params.created_by = this.receivedQuery.created_by
+        .filter(Boolean);
+      this.selectedPreviewRows = rows;
+      this.selectedPreviewSelection = rows.map((row) => row.id);
+      this.selectedPreviewVisible = true;
+      this.$nextTick(() => {
+        if (this.$refs.previewTable) {
+          this.syncingPreviewSelection = true;
+          this.$refs.previewTable.clearSelection();
+          this.selectedPreviewRows.forEach((row) => {
+            if (this.selectedPreviewSelection.includes(row.id)) {
+              this.$refs.previewTable.toggleRowSelection(row, true);
+            }
+          });
+          this.$nextTick(() => { this.syncingPreviewSelection = false; });
         }
-        if (this.receivedQuery.keywords) {
-          params.keywords = this.receivedQuery.keywords
+      });
+    },
+    handleSelectedPreviewSelectionChange(selection) {
+      if (this.syncingPreviewSelection) return;
+      this.selectedPreviewSelection = selection.map((row) => row.id);
+    },
+    confirmSelectedPreview() {
+      const selectedRows = this.selectedPreviewRows.filter(row => this.selectedPreviewSelection.includes(row.id))
+      if (selectedRows.length === 0) {
+        this.$message.warning('请至少勾选一条明细')
+        return
+      }
+
+      // 校验数量
+      const invalidRows = []
+      selectedRows.forEach(row => {
+        const applyNum = Number(row.applyNum) || 0
+        const paidNum = Number(row.paidNum) || 0
+        const total = Number(row.total) || 0
+        if (applyNum === 0) {
+          invalidRows.push({ row, reason: '本次报销数量不能为0' })
+        } else if (applyNum + paidNum > total) {
+          invalidRows.push({ row, reason: '本次报销数量大于剩余可报销数量' })
         }
-        const res = await receiveList(params)
-        this.receivedTotal = res.total || 0
-        // 映射数据到表格字段
-        this.receivedRows = (res.data || []).map(item => ({
-          ...item,
-          applicant: item.yibancaigou?.flow?.creator?.name || '',
-          department: item.yibancaigou?.flow?.creator_department?.name || '',
-          flowTitle: item.yibancaigou?.flow?.title || '',
-          paidNum: item.num || 0,
-          money: item.money || 0,
-          total: item.caigoumingxi?.num || 0,
-          itemName: item.caigoumingxi?.pinminghuofuwuxuqiu || '',
-          model: item.caigoumingxi?.xinghao || '',
-          origin: item.caigoumingxi?.chandi || '',
-          unit: item.caigoumingxi?.danwei || '',
-          purpose: item.caigoumingxi?.yongtu || '',
-        }))
-        // 恢复选中状态
-        this.$nextTick(() => {
-          if (this.$refs.receivedTable && this.receivedSelectedIds.length > 0) {
-            this.receivedRows.forEach(row => {
-              if (this.receivedSelectedIds.includes(row.id)) {
-                this.$refs.receivedTable.toggleRowSelection(row, true)
-              }
-            })
+      })
+      if (invalidRows.length > 0) {
+        const errorMessages = invalidRows.map(item => `${item.row.itemName || '未知项目'}：${item.reason}`).join('；')
+        this.$message.warning(`以下数据不符合条件：${errorMessages}`)
+        this.$nextTick(() => { this.$forceUpdate() })
+        return
+      }
+
+      // 同步选择状态
+      const newIds = [...this.selectedPreviewSelection]
+      this.pendingSelectedIds = newIds
+      const newMap = {}
+      newIds.forEach(id => {
+        const record = this.selectedPreviewRows.find(row => row.id === id) || this.pendingSelectedMap[id] || this.pendingRows.find(row => row.id === id)
+        if (record) newMap[id] = record
+      })
+      this.pendingSelectedMap = { ...newMap }
+
+      // 组装并跳转
+      const titleParts = selectedRows.map(r => `${r.itemName || ''}*${Number(r.applyNum) || 0}`)
+      const zhifutitle = `${titleParts.join(',')}${titleParts.length ? ',' : ''}`
+      const xiangxishuoming = zhifutitle
+
+      const contractIdSet = Array.from(new Set(selectedRows.map(r => r?.yibancaigou?.flow?.out_contract_id).filter(Boolean)))
+      const contractIdsStr = contractIdSet.join(',')
+      const contract_id = contractIdsStr
+      const amt = selectedRows.reduce((sum, r) => sum + (Number(r.money) || 0), 0)
+
+      const proceed = async () => {
+        let yifujine = 0
+        let cishu = 0
+        try {
+          const fundRes = await getFundLog({ contract_id: contractIdsStr, show_type: 1 })
+          const payments = fundRes?.data || []
+          const actNumsTotal = () => payments.reduce((pre, cur) => pre + (Number(cur?.act_money) ? Number(cur.act_money) : 0), 0)
+          yifujine = actNumsTotal()
+          cishu = Array.isArray(payments) ? payments.length : 0
+        } catch (e) {}
+
+        let xiangmuzonge = 0
+        let zhifucishu = 0
+        let liezhiqudao = ''
+        let contractno = ''
+        let guanlianliucheng = ''
+        try {
+          let contracts = []
+          if (contractIdSet.length > 0) {
+            contracts = await Promise.all(contractIdSet.map(id => detailContract({ id })))
           }
-        })
-      } catch (err) {
-        console.error('获取已收货列表失败:', err)
-        this.$message.error('获取已收货列表失败')
+          const sumMoney = (contracts || []).reduce((sum, c) => sum + (Number(c?.money) || 0), 0)
+          const sumPlanLen = (contracts || []).reduce((sum, c) => sum + ((c?.sign_plan?.length) || 0), 0)
+          const plansNames = Array.from(new Set((contracts || []).flatMap(c => (c?.plans || []).map(p => p?.name)).filter(Boolean))).join(',')
+          const contractNos = (contracts || []).map(c => c?.number).filter(Boolean).join(',')
+          const relatedFlows = Array.from(new Set((contracts || []).flatMap(c => (c?.contract_flow_links || []).map(l => l?.flow_id)).filter(Boolean))).join(',')
+          xiangmuzonge = sumMoney
+          zhifucishu = sumPlanLen
+          liezhiqudao = plansNames
+          contractno = contractNos
+          guanlianliucheng = relatedFlows
+        } catch (e) {}
+
+        const wuzicaigou_items = selectedRows.map(r => ({
+          flow_id: r?.yibancaigou?.flow?.id,
+          contract_id: r?.yibancaigou?.flow?.out_contract_id,
+          wuzicaigou_id: r?.yibancaigou?.id,
+          wuzicaigou_item_id: r?.id,
+          name: r?.itemName,
+          num: Number(r?.applyNum) || 0,
+          total: Number(r?.num) || 0,
+          apply_money: Number(r?.money) || 0,
+          money: Number(r?.money) || 0,
+          is_receive: 0
+        }))
+
+        const baseInfo = {
+          zhifutitle,
+          contract_id,
+          amt,
+          xiangxishuoming,
+          yifujine,
+          cishu,
+          xiangmuzonge,
+          zhifucishu,
+          liezhiqudao,
+          contractno,
+          guanlianliucheng,
+          wuzicaigou_items
+        }
+
+        this.selectedPreviewVisible = false
+        const url = `/flow/create?&module_name=oa&isSinglePage=1&module_id=75&default_json=${window.encodeURIComponent(JSON.stringify(baseInfo))}`
+        this.$router.push(url)
       }
+
+      proceed()
     },
-    handleProcessingSizeChange(val) {
-      this.processingPageSize = val
-      this.processingPage = 1
-      this.getProcessingList()
-    },
-    handleProcessingPageChange(val) {
-      this.processingPage = val
-      this.getProcessingList()
+    closeSelectedPreview() {
+      // 仅关闭弹窗，不清空勾选与已编辑数据
+      this.selectedPreviewVisible = false;
     },
-    handleReceivedSizeChange(val) {
-      this.receivedPageSize = val
-      this.receivedPage = 1
-      this.getReceivedList()
+    async getWaitList() {
+      const params = {
+        page: this.pendingPage,
+        page_size: this.pendingPageSize,
+      };
+      if (this.pendingQuery.creator_department_id) {
+        params.creator_department_id = this.pendingQuery.creator_department_id;
+      }
+      if (this.pendingQuery.created_by) {
+        params.created_by = this.pendingQuery.created_by;
+      }
+      if (this.pendingQuery.keywords) {
+        params.keywords = this.pendingQuery.keywords;
+      }
+      if (this.pendingQuery.chengbanren_id) {
+        params.chengbanren_id = this.pendingQuery.chengbanren_id;
+      }
+      if (this.pendingQuery.caigouneirong) {
+        params.caigouneirong = this.pendingQuery.caigouneirong;
+      }
+      const res = await waitList(params);
+      this.waitList = res.data || [];
+      this.pendingTotal = res.total || 0;
+      // 映射数据到表格字段
+      this.pendingRows = (res.data || []).map((item) => ({
+        ...item, // 保留原始数据，方便后续使用
+        checked: false,
+        applicant: item.yibancaigou?.flow?.creator?.name || "",
+        department: item.yibancaigou?.flow?.creator_department?.name || "",
+        flowTitle: item.yibancaigou?.flow?.title || "",
+        purchaseContent: item.yibancaigou?.caigouneirong || "",
+        purchaser: (item.yibancaigou?.flow?.logs && item.yibancaigou.flow.logs.length > 0) 
+          ? (item.yibancaigou.flow.logs[0]?.user?.name || "") 
+          : "",
+        isContractFlow: item.yibancaigou?.flow?.contract_flow ? '是' : '否',
+        paidNum: item.fund_log_wuzicaigou_items_sum_num || 0,
+        total: item.num || 0,
+        itemName: item.pinminghuofuwuxuqiu || "",
+        model: item.xinghao || "",
+        origin: item.chandi || "",
+        unit: item.danwei || "",
+        purpose: item.yongtu || "",
+        applyNum: null, // 本次报销数量，由用户输入
+        money: null, // 付款金额，由用户输入
+        shifouqingdan: item.shifouqingdan || "",
+        shifoubijia: item.shifoubijia || "",
+        shifoufahuo: item.shifoufahuo || "",
+      }));
+      this.pendingRows.forEach((row) => {
+        if (this.pendingSelectedIds.includes(row.id)) {
+          this.$set(this.pendingSelectedMap, row.id, row);
+        }
+      });
+      // 不再移除之前选择的项，保持跨查询选择
+      this.syncPendingTableSelection();
     },
-    handleReceivedPageChange(val) {
-      this.receivedPage = val
-      this.getReceivedList()
+    async getPaidList() {
+      const params = {
+        page: this.paidPage,
+        page_size: this.paidPageSize,
+      };
+      if (this.paidQuery.creator_department_id) {
+        params.creator_department_id = this.paidQuery.creator_department_id;
+      }
+      if (this.paidQuery.created_by) {
+        params.created_by = this.paidQuery.created_by;
+      }
+      if (this.paidQuery.keywords) {
+        params.keywords = this.paidQuery.keywords;
+      }
+      if (this.paidQuery.chengbanren_id) {
+        params.chengbanren_id = this.paidQuery.chengbanren_id;
+      }
+      if (this.paidQuery.caigouneirong) {
+        params.caigouneirong = this.paidQuery.caigouneirong;
+      }
+      const res = await receiveList(params);
+      this.paidTotal = res.total || 0;
+      this.paidRows = (res.data || []).map((item) => ({
+        ...item,
+        applicant: item.yibancaigou?.flow?.creator?.name || "",
+        department: item.yibancaigou?.flow?.creator_department?.name || "",
+        flowTitle: item.yibancaigou?.flow?.title || "",
+        purchaseContent: item.yibancaigou?.caigouneirong || "",
+        purchaser: (item.yibancaigou?.flow?.logs && item.yibancaigou.flow.logs.length > 0)
+          ? (item.yibancaigou.flow.logs[0]?.user?.name || "")
+          : "",
+        isContractFlow: item.yibancaigou?.flow?.contract_flow ? '是' : '否',
+        paidNum: item.num || 0,
+        money: item.money || 0,
+        total: item.caigoumingxi?.num || 0,
+        itemName: item.caigoumingxi?.pinminghuofuwuxuqiu || "",
+        model: item.caigoumingxi?.xinghao || "",
+        origin: item.caigoumingxi?.chandi || "",
+        unit: item.caigoumingxi?.danwei || "",
+        purpose: item.caigoumingxi?.yongtu || "",
+        shifouqingdan: item.shifouqingdan || "",
+        shifoubijia: item.shifoubijia || "",
+        shifoufahuo: item.shifoufahuo || "",
+      }));
     },
   },
   watch: {
+    isShowModal(newVal) {
+      if (newVal) {
+      }else{
+        this.modalUrl = '';
+      }
+    },
     activeTab(newTab, oldTab) {
       // 重置分页参数
-      if (newTab === 'pending') {
-        this.pendingPage = 1
-        this.pendingPageSize = 40
-      } else if (newTab === 'processing') {
-        this.processingPage = 1
-        this.processingPageSize = 40
-      } else if (newTab === 'received') {
-        this.receivedPage = 1
-        this.receivedPageSize = 40
+      if (newTab === "pending") {
+        this.pendingPage = 1;
+        this.pendingPageSize = 40;
+      } else if (newTab === "paid") {
+        this.paidPage = 1;
+        this.paidPageSize = 40;
       }
-      
+
       // 重置查询条件
-      if (newTab === 'pending') {
+      if (newTab === "pending") {
         this.pendingQuery = {
-          creator_department_id: '',
-          created_by: '',
-          keywords: '',
-        }
-        this.pendingSelectedIds = []
-      } else if (newTab === 'processing') {
-        this.processingQuery = {
-          creator_department_id: '',
-          created_by: '',
-          keywords: '',
-        }
-        this.processingSelectedIds = []
-      } else if (newTab === 'received') {
-        this.receivedQuery = {
-          creator_department_id: '',
-          created_by: '',
-          keywords: '',
-        }
-        this.receivedSelectedIds = []
+          creator_department_id: "",
+          created_by: "",
+          keywords: "",
+          chengbanren_id: "",
+          caigouneirong: "",
+        };
+        this.pendingSelectedIds = [];
+        this.pendingSelectedMap = {};
+      } else if (newTab === "paid") {
+        this.paidQuery = {
+          creator_department_id: "",
+          created_by: "",
+          keywords: "",
+          chengbanren_id: "",
+          caigouneirong: "",
+        };
       }
-      
+
       // 清空所有表格的选中项（使用双重 nextTick 确保表格已渲染）
       this.$nextTick(() => {
         this.$nextTick(() => {
           if (this.$refs.pendingTable) {
-            this.$refs.pendingTable.clearSelection()
-          }
-          if (this.$refs.processingTable) {
-            this.$refs.processingTable.clearSelection()
-          }
-          if (this.$refs.receivedTable) {
-            this.$refs.receivedTable.clearSelection()
+            this.$refs.pendingTable.clearSelection();
           }
-        })
-      })
-      
+        });
+      });
+
       // 加载对应标签页的数据
-      if (newTab === 'processing') {
-        this.getProcessingList()
-      } else if (newTab === 'received') {
-        this.getReceivedList()
-      } else if (newTab === 'pending') {
+      if (newTab === "paid") {
+        this.getPaidList();
+      } else if (newTab === "pending") {
         // 切换到待采购时也重新加载数据，确保状态正确
-        this.getWaitList()
+        this.getWaitList();
       }
     },
+    // 关闭弹窗不清空已选择的数据
   },
   mounted() {
-    this.getDepartmentList()
-    this.getWaitList()
-    this.getUserList()
+    this.getDepartmentList();
+    this.getWaitList();
+    this.getUserList();
   },
-}
+};
 </script>
 
 <style scoped>
-.icon-space { margin-right: 6px; }
+.icon-space {
+  margin-right: 6px;
+}
+
+.selected-info {
+  margin-left: 12px;
+  color: #666;
+}
+
+.selected-info.is-clickable {
+  cursor: pointer;
+  color: #409eff;
+}
+
+.selected-info.is-clickable:hover {
+  text-decoration: underline;
+}
+
+.selected-count {
+  color: #409eff;
+  margin: 0 2px;
+}
 
 ::v-deep .error-input .el-input__inner {
   border-color: #f56c6c !important;