From 9e393ff9981085390a759bc568ce46d9aca72059 Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Mon, 31 Aug 2026 13:16:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(purchase):=20=E5=BC=B9=E7=AA=97=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=A7=20+=20=E7=A7=BB=E9=99=A4=E5=85=AC=E5=85=B1=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=20+=20=E6=AF=8F=E8=A1=8C=E7=85=A7=E7=89=87=E5=BF=85?=
 =?UTF-8?q?=E5=A1=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 弹窗宽度 1180px → 1350px，缓解表格输入框拥挤
- 移除底部公共「图片凭证」上传区，照片统一在每行上传
- 照片列表头加红星必填标记
- 提交时逐行校验照片必填：某行无照片则阻断并提示该行名称
- 清理废弃的公共图片逻辑（fileList/customUpload/handleRemoveImage/usePasteUpload）
---
 inventory-web/src/views/purchase/index.vue | 93 ++++------------------
 1 file changed, 17 insertions(+), 76 deletions(-)

diff --git a/inventory-web/src/views/purchase/index.vue b/inventory-web/src/views/purchase/index.vue
index 845c9bb..dbd35c7 100644
--- a/inventory-web/src/views/purchase/index.vue
+++ b/inventory-web/src/views/purchase/index.vue
@@ -71,7 +71,7 @@
     />
 
     <!-- ========== 新建/编辑弹窗 ========== -->
-    <el-dialog v-model="formDialogVisible" :title="dialogTitle" width="1180px" top="4vh" destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" class="purchase-dialog">
+    <el-dialog v-model="formDialogVisible" :title="dialogTitle" width="1350px" top="4vh" destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" class="purchase-dialog">
       <el-form ref="formRef" :model="form" label-width="100px">
 
         <!-- ── 物料明细表（动态多行） ── -->
@@ -143,7 +143,11 @@
                 <el-input v-model="row.remark" type="textarea" :rows="1" placeholder="行备注" resize="none" />
               </template>
             </el-table-column>
-            <el-table-column label="照片" width="110" align="center">
+            <el-table-column width="130" align="center">
+              <!-- ★ 表头加红星：照片必填 -->
+              <template #header>
+                <span style="color: #F56C6C; margin-right: 3px;">*</span>照片
+              </template>
               <template #default="{ row }">
                 <el-upload
                     :http-request="(opt: any) => customUploadRow(opt, row)"
@@ -185,32 +189,16 @@
           </el-row>
         </div>
 
-        <!-- ── 备注与图片 ── -->
+        <!-- ── 公共备注 ── -->
         <div class="form-section">
-          <div class="section-title"><span>备注与凭证</span></div>
+          <div class="section-title"><span>公共备注</span></div>
           <el-row :gutter="16">
             <el-col :span="24">
               <el-form-item label="备注">
-                <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息（选填）" />
+                <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="公共备注（未填写行备注时使用）" />
               </el-form-item>
             </el-col>
-            <el-col :span="24">
-              <el-form-item label="公共图片" id="upload-purchase-images">
-                <span style="font-size: 12px; color: #909399; margin-right: 8px;">未上传行内照片时使用此公共凭证</span>
-                <el-upload
-                    v-model:file-list="fileList"
-                    :http-request="customUpload"
-                    :on-remove="handleRemoveImage"
-                    :before-upload="beforeAvatarUpload"
-                    accept="image/jpeg,image/png,image/gif,image/webp"
-                    multiple
-                    list-type="picture-card"
-                >
-                <el-icon><Plus /></el-icon>
-              </el-upload>
-            </el-form-item>
-          </el-col>
-        </el-row>
+          </el-row>
         </div>
 
       </el-form>
@@ -297,7 +285,6 @@ import {
   approvePurchase, getPurchaseApprovers, autoFillPurchase
 } from '@/api/purchase'
 import { uploadFile, deleteFile } from '@/api/common/upload'
-import { usePasteUpload } from '@/hooks/usePasteUpload'
 import type { FormInstance } from 'element-plus'
 
 const userStore = useUserStore()
@@ -311,7 +298,6 @@ const pageSize = ref(20)
 const filterStatus = ref<number | ''>(0)  // 默认筛选待审批
 const submitLoading = ref(false)
 const rejectLoading = ref(false)
-const fileList = ref<any[]>([])
 
 // 驳回
 const rejectDialogVisible = ref(false)
@@ -355,8 +341,7 @@ const vLoadmore = {
 const form = ref({
   approver_id: undefined as number | undefined,
   supplier_link: '',
-  remark: '',
-  images: [] as string[]
+  remark: ''
 })
 
 // ★ 动态明细行
@@ -473,8 +458,7 @@ const openCreateDialog = (prefill?: { materialId?: number; name?: string; spec?:
   form.value = {
     approver_id: undefined,
     supplier_link: '',
-    remark: '',
-    images: []
+    remark: ''
   }
 
   // ★ 初始化明细行：若有预填物料则第一行带入，否则给一行空行
@@ -493,7 +477,6 @@ const openCreateDialog = (prefill?: { materialId?: number; name?: string; spec?:
   }
   formItems.value = [firstRow]
 
-  fileList.value = []
   formDialogVisible.value = true
 
   // 异步加载默认审批人（取当前用户上一次采购申请的审批人）
@@ -615,40 +598,6 @@ const beforeAvatarUpload = (rawFile: any) => {
   return true
 }
 
-const customUpload = async (options: any) => {
-  const { file, onSuccess, onError } = options
-  const formData = new FormData()
-  formData.append('file', file)
-  isUploading.value = true
-  try {
-    const res: any = await uploadFile(formData)
-    if (res.code === 200) {
-      const newUrl = res.data.url
-      form.value.images!.push(newUrl)
-      // ★ v-model:file-list 已自动管理列表，onSuccess 通知 el-upload 更新状态即可
-      // 传入 { url } 让 el-upload 正确设置文件预览 URL
-      onSuccess({ url: getImageUrl(newUrl) })
-    } else {
-      ElMessage.error(res.msg || '上传失败')
-      onError(new Error(res.msg))
-    }
-  } catch (e) {
-    ElMessage.error('网络错误')
-    onError(e)
-  } finally {
-    isUploading.value = false
-  }
-}
-
-const handleRemoveImage = async (uploadFile: any) => {
-  const urlToRemove = form.value.images!.find(u => getImageUrl(u) === uploadFile.url) || uploadFile.url
-  form.value.images = form.value.images!.filter(u => u !== urlToRemove)
-  const filename = urlToRemove.split('/').pop()
-  if (filename && !urlToRemove.startsWith('http')) {
-    await deleteFile(filename).catch(() => {})
-  }
-}
-
 // ★ 行内照片上传
 const customUploadRow = async (options: any, row: any) => {
   const { file, onSuccess, onError } = options
@@ -697,12 +646,6 @@ const syncRemarkToAll = () => {
   ElMessage.success('已将第一行备注同步到所有行')
 }
 
-// 粘贴上传处理器（PC 端：鼠标悬停 + Ctrl+V 直接粘贴图片）
-const handlePasteLink = (link: string, field: string) => {
-  // 采购单没有独立的外链输入框，暂不支持网页图片链接自动填入
-}
-usePasteUpload(customUpload, 'images', '#upload-purchase-images', handlePasteLink)
-
 // --- 提交（循环逐行调用单条接口） ---
 const submitForm = async () => {
   // 1. 公共信息校验
@@ -719,11 +662,9 @@ const submitForm = async () => {
     if (!row.name.trim()) { ElMessage.warning(`第 ${idx + 1} 行请选择采购物品`); return }
     if (!row.purchase_date) { ElMessage.warning(`第 ${idx + 1} 行请选择采购日期`); return }
     if (!row.quantity || row.quantity <= 0) { ElMessage.warning(`第 ${idx + 1} 行采购数量必须大于 0`); return }
-    // 图片校验：每行必须有行内照片或公共照片
-    const hasRowImg = (row.images && row.images.length > 0)
-    const hasCommonImg = (form.value.images && form.value.images.length > 0)
-    if (!hasRowImg && !hasCommonImg) {
-      ElMessage.warning(`第 ${idx + 1} 行请上传照片（或使用公共图片凭证）`)
+    // ★ 每行照片必填
+    if (!row.images || row.images.length === 0) {
+      ElMessage.warning(`请为第 ${idx + 1} 行【${row.name || '未命名物品'}】上传至少一张照片凭证！`)
       return
     }
   }
@@ -745,8 +686,8 @@ const submitForm = async () => {
         supplier_link: form.value.supplier_link,
         // 行备注优先；若空则用公共备注
         remark: row.remark || form.value.remark,
-        // 行照片优先；若空则用公共图片凭证
-        images: (row.images && row.images.length > 0) ? row.images : form.value.images
+        // ★ 每行必填照片
+        images: row.images || []
       }
       await createPurchase(payload)
       successCount++