Merge branch 'zhengzhao_upload' into dev

src/views/licenses/qualityIns/index.vue

@@ -114,12 +114,14 @@
           <!-- 上传 PDF / 图片 -->
           <el-form-item label="上传 PDF / 图片"
             prop="fileList">
-            <el-upload v-model:file-list="formData.fileList"
+            <el-upload :file-list="formData.fileList"
+              ref="uploadRef"
               class="upload-demo"
               action="#"
               accept="application/pdf, image/*"
               :http-request="httpRequestFn"
-              :limit="1">
+              :limit="1"
+              :on-exceed="handleExceed">
               <el-button size="small"
                 type="primary">
                 点击上传
@@ -161,6 +163,8 @@ import { getQualityInsPageList, uploadFileToOSSAPI, postQualityIns, getProductNa
 import useUserStore from '@/store/modules/user'
 import { v4 as uuidv4 } from 'uuid'
 import { getFileTypeExt, parseTime } from '@/utils'
+import { genFileId } from 'element-plus'
+
 const { proxy } = getCurrentInstance()
 
 const queryParams = reactive({
@@ -298,15 +302,27 @@ const submitForm = async () => {
   })
 }
 
+// 上传文件
 const httpRequestFn = async (file) => {
-  console.log('zoulema?')
   const date = new Date()
   const month = date.getMonth() + 1
   const url = await uploadFileToOSSAPI(`licenses/qualityIns/${date.getFullYear()}-${month}/${useUserStore().empInfo.empNo}/${uuidv4()}.${getFileTypeExt(file.file.name)}`, file.file)
-  formData.fileList[0].url = url
+  formData.fileList[0] = {
+    name: file.file.name,
+    url,
+  }
   // 重新校验表单
   proxy.$refs.formRef.validateField('fileList')
 }
+
+// 替换文件
+const uploadRef = ref(null)
+const handleExceed = async (files) => {
+  const file = files[0]
+  uploadRef.value.clearFiles()
+  formData.fileList = []
+  httpRequestFn({ file })
+}
 </script>
 
 <style scoped
@@ -314,4 +330,30 @@ const httpRequestFn = async (file) => {
   .el-table {
     margin-top: 20px;
   }
+
+  ::v-deep(.el-upload-list__item-info) {
+    width: auto !important;
+
+    /* 覆盖el-upload文件名称样式，让宽度由内容撑开 */
+    ::v-deep(.el-upload-list__item-file-name) {
+      text-overflow: initial !important;
+      overflow: visible !important;
+      white-space: normal !important;
+      white-space: nowrap !important;
+      /* 关键：不换行 */
+      max-width: none !important;
+      width: auto !important;
+      display: inline-block !important;
+    }
+  }
+
+  /* 完成提示按钮 */
+  ::v-deep(.el-upload-list__item-status-label) {
+    right: auto !important;
+  }
+
+  /* 清除按钮 */
+  ::v-deep(.el-icon--close) {
+    right: auto !important;
+  }
 </style>
\ No newline at end of file