From 25bb35e2656d0ce16da99ff0dfece5524ac76480 Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Mon, 31 Aug 2026 13:24:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(purchase):=20=E8=A1=A8=E6=A0=BC=E5=88=97?=
 =?UTF-8?q?=E5=AE=BD=E4=BC=98=E5=8C=96=20+=20=E8=BF=B7=E4=BD=A0=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=A1=86=20+=20=E7=85=A7=E7=89=87=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E6=89=80=E6=9C=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 每列显式指定 min-width/width，输入多的列用 min-width 防挤压
- 照片列固定 90px，上传框缩小到 60x60（::v-deep 覆盖样式）
- 新增「照片同步所有」按钮：深拷贝第一行照片到所有行
- 照片列保持红星必填标记
---
 inventory-web/src/views/purchase/index.vue | 73 ++++++++++++++++++----
 1 file changed, 62 insertions(+), 11 deletions(-)

diff --git a/inventory-web/src/views/purchase/index.vue b/inventory-web/src/views/purchase/index.vue
index 8fc0e14..8361a9c 100644
--- a/inventory-web/src/views/purchase/index.vue
+++ b/inventory-web/src/views/purchase/index.vue
@@ -82,11 +82,14 @@
             <el-tooltip content="把第一行备注复制到所有行" placement="top">
               <el-button type="warning" plain size="small" :icon="CopyDocument" style="margin-left: 8px;" @click="syncRemarkToAll">备注同步所有</el-button>
             </el-tooltip>
+            <el-tooltip content="把第一行照片复制到所有行" placement="top">
+              <el-button type="success" plain size="small" :icon="Picture" style="margin-left: 8px;" @click="syncImagesToAll">照片同步所有</el-button>
+            </el-tooltip>
           </div>
 
           <el-table :data="formItems" border size="small" style="width: 100%;" :max-height="400">
-            <el-table-column type="index" label="#" width="38" align="center" />
-            <el-table-column label="采购物品" min-width="180">
+            <el-table-column type="index" label="#" width="50" align="center" />
+            <el-table-column label="采购物品" min-width="200">
               <template #default="{ row }">
                 <el-select
                     :model-value="row.materialBaseId" filterable remote reserve-keyword="true" clearable
@@ -103,32 +106,32 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column label="规格型号" width="110">
+            <el-table-column label="规格型号" min-width="130">
               <template #default="{ row }">
                 <el-input v-model="row.spec_model" placeholder="自动填充" clearable />
               </template>
             </el-table-column>
-            <el-table-column label="数量" width="80">
+            <el-table-column label="数量" width="90">
               <template #default="{ row }">
                 <el-input-number v-model="row.quantity" :min="1" :controls="false" style="width: 100%;" @change="() => onRowUnitPriceChange(row)" />
               </template>
             </el-table-column>
-            <el-table-column label="采购日期" width="120">
+            <el-table-column label="采购日期" width="130">
               <template #default="{ row }">
                 <el-date-picker v-model="row.purchase_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%;" />
               </template>
             </el-table-column>
-            <el-table-column label="含税单价" width="95">
+            <el-table-column label="含税单价" width="100">
               <template #default="{ row }">
                 <el-input-number v-model="row.unit_price" :min="0" :precision="2" :controls="false" style="width: 100%;" placeholder="¥" @change="() => onRowUnitPriceChange(row)" />
               </template>
             </el-table-column>
-            <el-table-column label="含税总价" width="95">
+            <el-table-column label="含税总价" width="100">
               <template #default="{ row }">
                 <el-input-number v-model="row.total_price" :min="0" :precision="2" :controls="false" style="width: 100%;" placeholder="¥" @change="() => onRowTotalPriceChange(row)" />
               </template>
             </el-table-column>
-            <el-table-column label="税率" width="75">
+            <el-table-column label="税率" width="80">
               <template #default="{ row }">
                 <el-select v-model="row.tax_rate" style="width: 100%;" @change="() => onRowTaxRateChange(row)">
                   <el-option label="0%" :value="0" />
@@ -143,13 +146,14 @@
                 <el-input v-model="row.remark" type="textarea" :rows="1" placeholder="行备注" resize="none" />
               </template>
             </el-table-column>
-            <el-table-column width="130" align="center">
+            <el-table-column width="90" align="center">
               <!-- ★ 表头加红星：照片必填 -->
               <template #header>
                 <span style="color: #F56C6C; margin-right: 3px;">*</span>照片
               </template>
               <template #default="{ row }">
                 <el-upload
+                    class="table-mini-uploader"
                     :http-request="(opt: any) => customUploadRow(opt, row)"
                     :on-remove="(f: any) => handleRemoveRowImage(f, row)"
                     :before-upload="beforeAvatarUpload"
@@ -162,7 +166,7 @@
                 </el-upload>
               </template>
             </el-table-column>
-            <el-table-column label="操作" width="55" align="center">
+            <el-table-column label="操作" width="60" align="center">
               <template #default="{ $index }">
                 <el-button type="danger" link :icon="Delete" @click="removeFormItem($index)" :disabled="formItems.length <= 1" />
               </template>
@@ -276,7 +280,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { Refresh, Plus, Delete, CopyDocument } from '@element-plus/icons-vue'
+import { Refresh, Plus, Delete, CopyDocument, Picture } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useUserStore } from '@/stores/user'
 import { searchMaterialPurchase } from '@/api/purchase'
@@ -646,6 +650,31 @@ const syncRemarkToAll = () => {
   ElMessage.success('已将第一行备注同步到所有行')
 }
 
+// ★ 照片一键同步所有行：取第一行的照片深拷贝到所有行
+const syncImagesToAll = () => {
+  if (formItems.value.length <= 1) {
+    ElMessage.warning('当前只有一行，无需同步')
+    return
+  }
+  const firstRow = formItems.value[0]
+  const firstFiles = firstRow.fileList || []
+  const firstImages = firstRow.images || []
+  if (firstImages.length === 0) {
+    ElMessage.warning('第一行没有上传照片，无法同步')
+    return
+  }
+  // 深拷贝，避免某行删除照片时影响其他行
+  const clonedFiles = JSON.parse(JSON.stringify(firstFiles))
+  const clonedImages = JSON.parse(JSON.stringify(firstImages))
+  formItems.value.forEach((row, idx) => {
+    if (idx > 0) {
+      row.fileList = JSON.parse(JSON.stringify(clonedFiles))
+      row.images = JSON.parse(JSON.stringify(clonedImages))
+    }
+  })
+  ElMessage.success('照片已同步至所有明细行')
+}
+
 // --- 提交（循环逐行调用单条接口） ---
 const submitForm = async () => {
   // 1. 公共信息校验
@@ -808,4 +837,26 @@ onMounted(() => {
   background: #409EFF;
   border-radius: 2px;
 }
+
+/* ★ 表格内迷你上传框：缩小到 60x60，避免撑爆表格 */
+:deep(.table-mini-uploader) .el-upload--picture-card {
+  width: 60px;
+  height: 60px;
+  line-height: 66px;
+}
+:deep(.table-mini-uploader) .el-upload--picture-card .el-icon {
+  font-size: 20px;
+}
+:deep(.table-mini-uploader) .el-upload-list--picture-card .el-upload-list__item {
+  width: 60px;
+  height: 60px;
+}
+:deep(.table-mini-uploader) .el-upload-list--picture-card .el-upload-list__item img {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+}
+:deep(.table-mini-uploader) .el-upload-list--picture-card .el-upload-list__item-actions {
+  font-size: 14px;
+}
 </style>