fix: 修改参数信息

src/views/production-safety/risk-identification-and-control/labor-products-purchase-apply-manage/components/detail.vue

@@ -83,14 +83,42 @@
           </el-table-column>
           <el-table-column label="样式照片" min-width="420" align="center">
             <template #default="{ row }">
-              <span v-if="isViewMode || isAuditMode">{{ getStylePhotoDisplay(row) }}</span>
-              <UploadFiles
+              <!-- <span v-if="isViewMode || isAuditMode">{{ getStylePhotoDisplay(row) }}</span> -->
+              <!-- <UploadFiles
                 v-else
-                label="选择附件"
+                label="选择附件" 
                 :file-list="getRowFileList(row)"
                 :max-count="1"
                 @uploadSuccess="(list: FileItem[]) => onStylePhotoSuccess(row, list)"
-              />
+              /> -->
+              <el-upload
+                :key="row.id || row.$$uid || $index"
+                :ref="el => setUploadRef(row, el)"
+                v-model:file-list="row.pictureUrl"
+                :auto-upload="false"
+                list-type="picture-card"
+                :limit="1"
+                :disabled="isViewMode"
+                :on-change="(file) => handleApprovalImageChange(row, file)"
+                :on-exceed="handleApprovalImageExceed"
+                :on-remove="() => handleApprovalImageRemove(row)"
+                :class="{'hide': isViewMode}"
+              >
+                <el-icon><Plus /></el-icon>
+                <template #file="{ file }"> 
+                  <div>
+                    <img class="el-upload-list__item-thumbnail" :src="file.fileUrl" alt="" />
+                    <span class="el-upload-list__item-actions">
+                      <span class="el-upload-list__item-preview" v-if="isViewMode" @click="previewOnline(file.fileUrl)">
+                        <el-icon><ZoomIn /></el-icon>
+                      </span>
+                      <span class="el-upload-list__item-delete" v-if="!isViewMode" @click.stop="handleApprovalDeleteClick()">
+                        <el-icon><Delete /></el-icon>
+                      </span>
+                    </span>
+                  </div>
+                </template>
+              </el-upload>
             </template>
           </el-table-column>
           <el-table-column label="物品尺寸/鞋码" min-width="150">
@@ -308,7 +336,7 @@
         <el-button @click="basicDialogRef.closeDialog">取消</el-button>
       </template>
     </BasicDialog>
-
+    <PreviewOnline ref="previewOnlineRef" />
   </main>
   <footer class="safety-platform-container__footer">
     <el-button @click="router.back()">返回</el-button>
@@ -331,10 +359,12 @@
 <script setup lang="ts">
   import { computed, onMounted, ref, reactive } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
-  import { ElMessage } from 'element-plus';
-  import type { FormInstance, FormRules } from 'element-plus';
-  import { Plus, Minus } from '@element-plus/icons-vue';
+  // import { ElMessage } from 'element-plus';
+  // import type { FormInstance, FormRules } from 'element-plus';
+  import { ElMessage , ElIcon, genFileId, FormInstance, FormRules, type UploadProps, type UploadUserFile, type UploadRawFile, type UploadInstance } from 'element-plus';
+  // import { Plus, Minus } from '@element-plus/icons-vue';
   import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
+  import { uploadFileApi, UPLOAD_BIZ_TYPE } from '@/api/minio';
   import type { FileItem } from '@/components/UploadFiles/types';
   import { queryPersonalProtectiveEquipmentList } from '@/api/production-safety/personal-protective-equipment';
   import type { PersonalProtectiveEquipment } from '@/api/production-safety/personal-protective-equipment';
@@ -364,6 +394,18 @@
   import { getApprovalNodeInstanceList } from '@/api/approval/approval';
   import { i } from 'vite/dist/node/types.d-jgA8ss1A';
   import { te } from 'element-plus/es/locale';
+  import { Plus, Delete, ZoomIn } from '@element-plus/icons-vue';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
+  const approvalImageFileList = ref<UploadUserFile[]>([]);
+  const uploadRefs = ref<Record<string, UploadInstance>>({});
+  // 为每行设置独立的upload ref
+  const setUploadRef = (row: PurchaseApplyItem, el: any) => {
+    if (el) {
+      const key = row.id || row.$$uid || 'default';
+      uploadRefs.value[key] = el;
+    }
+  };
+  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
 
   const { approvalList, getApprovalList } =
   useEmergencyHook()
@@ -560,6 +602,9 @@
       form.applyNo = mainFromQuery.value.applyCode ?? '';
       const res = await queryPurchaseApplyDetail(currentId.value);
       if (res && Array.isArray(res) && res.length) {
+        res.forEach((d) => {
+          d.pictureUrl =JSON.parse(d.pictureUrl || '[]');
+        });
         form.itemList = res.map((d) => detailToItem(d));
       } else if (res && Array.isArray(res)) {
         form.itemList = [defaultItem()];
@@ -793,6 +838,78 @@
     });
   };
 
+  const handleApprovalImageChange = (row: PurchaseApplyItem, uploadFile: UploadUserFile) => {
+    if (!uploadFile.raw) return;
+
+    uploadFileApi({
+      file: uploadFile.raw,
+      bizType: UPLOAD_BIZ_TYPE['DICTIONARY'],
+      fileName: uploadFile.raw.name,
+    })
+      .then((res) => {
+        // 更新当前行的图片URL
+        row.pictureUrl = [{
+          fileName: uploadFile.name || res.url.split('/').pop() || 'image',
+          fileUrl: res.url,
+          fileId: res.uid
+        }];
+        
+        // 同时更新stylePhoto字段
+        row.stylePhoto = JSON.stringify([{
+          fileUrl: res.url,
+          fileName: uploadFile.name || res.url.split('/').pop() || 'image',
+          fileId: res.uid,
+          fileType: 'image',
+          fileSize: uploadFile.size ? (uploadFile.size / 1024).toFixed(2) + 'KB' : ''
+        }]);
+      })
+      .catch(() => {
+        ElMessage.error('图片上传失败，请重试');
+      });
+  };
+
+  const handleApprovalImageExceed: UploadProps['onExceed'] = (files) => {
+    const uploadInstance = approvalUploadRef.value;
+    if (!uploadInstance) return;
+
+    uploadInstance.clearFiles();
+    const file = files[0] as UploadRawFile;
+    file.uid = genFileId();
+    uploadInstance.handleStart(file);
+  };
+
+  const handleApprovalPictureCardPreview: UploadProps['onPreview'] = (fileUrl) => {
+    
+    // dialogImageUrl.value = uploadFile.url || '';
+    // dialogVisible.value = true;
+  };
+
+  const resetApprovalImageUpload = () => {
+    // 清除所有行的图片数据
+    form.itemList.forEach(row => {
+      row.pictureUrl = [];
+      row.stylePhoto = '';
+    });
+    approvalImageFileList.value = [];
+    form.itemList[approvalUploadKey.value].imageUrl = [];
+  };
+
+  const handleApprovalDeleteClick = () => {
+    resetApprovalImageUpload();
+  };
+
+  const handleApprovalImageRemove = (row: PurchaseApplyItem) => {
+    // 清除当前行的图片数据
+    row.pictureUrl = [];
+    row.stylePhoto = '';
+  };
+
+  const previewOnline = (url: string | undefined) => {
+    if (url) {
+      previewOnlineRef.value?.open(url,'image');
+    }
+  };
+
   onMounted(() => {
     loadPpeOptions();
     getApprovalList();
@@ -845,4 +962,7 @@
   .detail-reject-alert{
     margin-bottom: 20px;
   }
-</style>
+  ::v-deep.hide .el-upload--picture-card {
+    display: none;
+  }
+</style>

src/views/production-safety/risk-identification-and-control/labor-products-purchase-apply-manage/listAdmin.vue

@@ -23,7 +23,7 @@
                   clearable
                 />
               </div>
-              <div class="select-box--item">
+              <!-- <div class="select-box--item">
                 <span>状态：</span>
                 <el-select
                   v-model="tableQuery.queryParam.approvalStatus"
@@ -35,7 +35,7 @@
                   <el-option label="审核通过" :value="2" />
                   <el-option label="审核不通过" :value="3" />
                 </el-select>
-              </div>
+              </div> -->
               <div class="select-box--item">
                 <span>申请部门：</span>
                 <el-input
@@ -131,7 +131,7 @@
     pageSize: pagination.pageSize,
     queryParam: {
       name: '',
-      approvalStatus: undefined,
+      status: 1,
       applyDeptCode: '',
       applyDeptName: '',
     },