refactor(qualityins/index.vue): 修改：质检报告_增加编辑操作_增加创建人修改人创建时间列_修复新增表单错误提示合理性

src/api/licenses/qualityIns.js

@@ -16,6 +16,14 @@ export const postQualityIns = (data) => {
     data
   })
 }
+// 修改，质检报告
+export const putQualityIns = (data) => {
+  return request({
+    url: '/operation/zzhao/core/proQuality/put',
+    method: 'PUT',
+    data
+  })
+}
 
 // 料号查询品名
 export const getProductNameByCode = (prdCode) => {

src/views/licenses/qualityIns/index.vue

@@ -35,7 +35,7 @@
           <el-button type="primary"
             plain
             icon="Plus"
-            @click="dialogVisible = true">
+            @click="createClick">
             新增
           </el-button>
         </el-col>
@@ -52,16 +52,17 @@
         v-loading="loading">
         <el-table-column prop="prdCode"
           label="料号"
-          width="180" />
+          width="140" />
         <el-table-column prop="prdName"
-          label="产品名称" />
+          label="产品名称"
+          width="240" />
         <el-table-column prop="manufactureBatchNo"
-          label="批号" />
+          label="批号"
+          width="160" />
         <el-table-column prop="manufacturersName"
           label="厂家" />
         <el-table-column prop="qualityUrl"
-          label="质量检测报告"
-          width="180">
+          label="质量检测报告">
           <template #default="{ row }">
             <el-link v-if="row.qualityUrl"
               type="primary"
@@ -72,8 +73,28 @@
           </template>
         </el-table-column>
         <el-table-column prop="shipDate"
-          label="发货时间"
-          width="180" />
+          label="发货时间" />
+        <el-table-column prop="createTime"
+          label="创建时间">
+          <template #default="{ row }">
+            {{ parseTime(row.createTime) }}
+          </template>
+        </el-table-column>
+        <!-- 创建人 -->
+        <el-table-column prop="createBy"
+          label="创建人" />
+        <!-- 修改者 -->
+        <el-table-column prop="updateBy"
+          label="修改人" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button type="primary"
+              text
+              @click="handleEditClick(row)">
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
       <!-- 分页 -->
       <pagination :total="total"
@@ -81,7 +102,7 @@
         v-model:limit="queryParams.pageSize"
         @pagination="getList" />
       <!-- 新增弹窗 -->
-      <el-dialog title="新增"
+      <el-dialog :title="edit ? '编辑' : '新增'"
         v-model="dialogVisible"
         draggable
         overflow>
@@ -126,10 +147,11 @@
               ref="uploadRef"
               class="upload-demo"
               action="#"
-              accept="application/pdf, image/*"
+              accept="application/pdf, .jpg, .jpeg, .png, .webp, .zip, .rar, .7z"
               :http-request="httpRequestFn"
               :limit="1"
-              :on-exceed="handleExceed">
+              :on-exceed="handleExceed"
+              @remove="handleRemove">
               <el-button size="small"
                 type="primary">
                 点击上传
@@ -147,7 +169,6 @@
           </el-button>
         </template>
       </el-dialog>
-
       <!-- 图片预览弹窗 -->
       <el-dialog v-model="imagePreviewVisible"
         title="质量检测报告预览"
@@ -167,26 +188,20 @@
 </template>
 
 <script setup>
-import { getQualityInsPageList, uploadFileToOSSAPI, postQualityIns, getProductNameByCode } from '@/api'
+import { getQualityInsPageList, uploadFileToOSSAPI, postQualityIns, getProductNameByCode, putQualityIns } from '@/api'
 import useUserStore from '@/store/modules/user'
 import { v4 as uuidv4 } from 'uuid'
 import { getFileTypeExt, parseTime } from '@/utils'
 
 const { proxy } = getCurrentInstance()
 
+/*************** 查询列表 ***************/
 const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
 })
-
 const showSearch = ref(true)
 
-// 根据料号获取品名
-const getPrdName = async () => {
-  const { data } = await getProductNameByCode(formData.prdCode)
-  formData.prdName = data?.prdName || ''
-}
-
 const tableList = ref([])
 const total = ref(0)
 const loading = ref(false)
@@ -207,6 +222,17 @@ const getList = async () => {
 }
 getList()
 
+/*************** 新增/编辑 ***************/
+const dialogVisible = ref(false)
+const formData = reactive({
+  fileList: [],
+})
+// 根据料号获取品名
+const getPrdName = async () => {
+  const { data } = await getProductNameByCode(formData.prdCode)
+  formData.prdName = data?.prdName || ''
+  proxy.$refs.formRef.validateField('prdName')
+}
 const rules = reactive({
   prdCode: [
     { required: true, message: '请输入料号', trigger: 'blur' },
@@ -222,64 +248,8 @@ const rules = reactive({
   ],
   fileList: [
     { required: true, message: '请上传质量检测报告', trigger: 'change' },
-  ],
-})
-
-const dialogVisible = ref(false)
-const formData = reactive({
-  fileList: [],
+  ]
 })
-// 图片预览相关状态
-const imagePreviewVisible = ref(false)
-const previewImageUrl = ref('')
-
-// 判断文件类型
-const isImageFile = (url) => {
-  if (!url) return false
-  const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp', '.svg']
-  return imageExtensions.some(ext => url.toLowerCase().includes(ext))
-}
-
-const isPdfFile = (url) => {
-  if (!url) return false
-  return url.toLowerCase().includes('.pdf')
-}
-
-// 获取链接文本
-const getReportLinkText = (url) => {
-  if (isImageFile(url)) {
-    return '预览图片'
-  } else if (isPdfFile(url)) {
-    return '查看报告'
-  } else {
-    return '查看报告'
-  }
-}
-
-// 处理报告点击事件
-const handleReportClick = (url) => {
-  if (isImageFile(url)) {
-    // 图片文件：预览
-    previewImage(url)
-  } else if (isPdfFile(url)) {
-    // PDF文件：打开新链接
-    // 把 url 的域名替换掉，改成自己的然后拼接原来的资源路径
-    const originDomain = import.meta.env.VITE_APP_OSS_ORIGIN_DOMAIN
-    const customDomain = import.meta.env.VITE_APP_OSS_CUSTOM_DOMAIN
-    url = url.replace(originDomain, customDomain)
-    window.open(url, '_blank')
-  } else {
-    // 其他文件类型：默认打开新链接
-    window.open(url, '_blank')
-  }
-}
-
-// 预览图片方法
-const previewImage = (url) => {
-  previewImageUrl.value = url
-  imagePreviewVisible.value = true
-}
-
 // 取消
 const cancelForm = () => {
   dialogVisible.value = false
@@ -287,6 +257,26 @@ const cancelForm = () => {
   formData.fileList = []
   proxy.$refs.formRef.resetFields()
 }
+// 重置表单
+const resetForm = () => {
+  formData.fileList = []
+  edit.value = false
+  formData.zpqId = ''
+  formData.prdCode = ''
+  formData.prdName = ''
+  formData.manufactureBatchNo = ''
+  formData.shipDate = ''
+}
+// 新增-按钮
+const createClick = () => {
+  resetForm()
+  edit.value = false
+  dialogVisible.value = true
+  nextTick(() => {
+    // 清除校验信息
+    proxy.$refs.formRef.clearValidate()
+  })
+}
 // 提交
 const submitForm = async () => {
   proxy.$refs.formRef.validate(async (valid) => {
@@ -297,16 +287,21 @@ const submitForm = async () => {
         ...formData,
         qualityUrl: formData.fileList[0]?.url,
       }
+      // 编辑
+      if (edit.value) {
+        await putQualityIns(formDataToSubmit)
+      } else {
         await postQualityIns(formDataToSubmit)
+      }
       proxy.$message({
-        message: '新增成功',
+        message: edit.value ? '修改成功' : '新增成功',
         type: 'success',
       })
       getList()
       // 清空表单
       formData.fileList = []
       proxy.$refs.formRef.resetFields()
-    } else {
+      edit.value = false
     }
   })
 }
@@ -332,6 +327,86 @@ const handleExceed = async (files) => {
   formData.fileList = []
   httpRequestFn({ file })
 }
+
+// 编辑状态
+const edit = ref(false)
+// 编辑-点击
+const handleEditClick = (row) => {
+  edit.value = true
+  formData.zpqId = row.zpqId
+  formData.prdCode = row.prdCode
+  formData.prdName = row.prdName
+  formData.manufactureBatchNo = row.manufactureBatchNo
+  formData.shipDate = row.shipDate
+  formData.fileList = [{
+    name: row.qualityUrl.split('/').pop(),
+    url: row.qualityUrl
+  }]
+
+  dialogVisible.value = true
+  nextTick(() => {
+    proxy.$refs.formRef.validateField('fileList')
+  })
+}
+
+// 删除文件
+const handleRemove = (file, fileList) => {
+  formData.fileList = fileList
+}
+
+/*************** 附件类型/预览 ***************/
+// 图片预览相关状态
+const imagePreviewVisible = ref(false)
+const previewImageUrl = ref('')
+// 判断文件类型
+const isImageFile = (url) => {
+  if (!url) return false
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp']
+  return imageExtensions.some(ext => url.toLowerCase().includes(ext))
+}
+const isPdfFile = (url) => {
+  if (!url) return false
+  return url.toLowerCase().includes('.pdf')
+}
+const isZipFile = (url) => {
+  if (!url) return false
+  const zipExtensions = ['.zip', '.rar', '.7z']
+  return zipExtensions.some(ext => url.toLowerCase().includes(ext))
+}
+// 获取链接文本
+const getReportLinkText = (url) => {
+  if (isImageFile(url)) {
+    return '预览图片'
+  } else if (isPdfFile(url)) {
+    return '查看报告'
+  } else if (isZipFile(url)) {
+    return '下载压缩包'
+  } else {
+    return '查看文件'
+  }
+}
+// 处理报告点击事件
+const handleReportClick = (url) => {
+  if (isImageFile(url)) {
+    // 图片文件：预览
+    previewImage(url)
+  } else if (isPdfFile(url)) {
+    // PDF文件：打开新链接
+    // 把 url 的域名替换掉，改成自己的然后拼接原来的资源路径
+    const originDomain = import.meta.env.VITE_APP_OSS_ORIGIN_DOMAIN
+    const customDomain = import.meta.env.VITE_APP_OSS_CUSTOM_DOMAIN
+    url = url.replace(originDomain, customDomain)
+    window.open(url, '_blank')
+  } else {
+    // 其他文件类型：默认打开新链接
+    window.open(url, '_blank')
+  }
+}
+// 预览图片方法
+const previewImage = (url) => {
+  previewImageUrl.value = url
+  imagePreviewVisible.value = true
+}
 </script>
 
 <style scoped