Merge pull request 'master' (#1023) from master into prod

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/1023

src/components/DetailComponent/ProjectAttachment.vue

@@ -30,7 +30,7 @@
   </el-row>
   <div style="margin-top:10px;margin-bottom: 8px;margin-left: 15px;display: flex">
     <!--      <el-button   color="#DED0B2" @click="handleUpload">上传附件</el-button>-->
-    <file-upload v-if="!isLineBtn&&uploadState&&activeName!='plus'&&activeName!='all'" @getFile="getFile"/>
+    <file-upload v-if="!isLineBtn&&uploadState&&activeName!='plus'&&activeName!='all'"  @getFile="getFile"/>
 
     <el-button color="#DED0B2" @click="handleEditTag"
                v-if="activeName!='all'&&activeName!='plus'&&uploadState&&!isDefault"
@@ -138,7 +138,7 @@ const executeTableConfig = reactive({
             <div>
               <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
               {
-                uploadState.value  ?
+                uploadState.value ?
                     <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
                                     onDelete={() => deleteSingleFile(row)}/> : ''
               }
@@ -157,6 +157,7 @@ const filePreviewParam = ref({
   fileType: 'pdf'
 })
 const filePreviewShow = ref(false)
+const uploadLoading = ref(false)
 const isEdit = ref(false)
 const isCloseByList = (index) => {
   // otherAttachmentList.length>0?false:true
@@ -173,24 +174,24 @@ const handleDownload = (row) => {
 }
 const deleteSingleFile = (row) => {
   console.log("🚀 ~ file: ", row)
-    deleteFile(row.fileId).then(res => {
+  deleteFile(row.fileId).then(res => {
-      ElNotification({
+    ElNotification({
-        title: '提示',
+      title: '提示',
-        message: res.msg,
+      message: res.msg,
-        type: res.code === 1000 ? 'success' : 'error'
+      type: res.code === 1000 ? 'success' : 'error'
-      })
+    })
-      if (res.code === 1000) {
+    if (res.code === 1000) {
-        if (row.newFile) {
+      if (row.newFile) {
-          const finalList = getLocalList().filter(item => item.fileId !== row.fileId);
+        const finalList = getLocalList().filter(item => item.fileId !== row.fileId);
-          localStorage.setItem(`implementAllFileList-${route.query.projectId}`, JSON.stringify(finalList))
+        localStorage.setItem(`implementAllFileList-${route.query.projectId}`, JSON.stringify(finalList))
-        }else{
+      } else {
-          otherAttachmentList.value.splice(otherAttachmentList.value.findIndex((item) => item.fileId === row.fileId), 1);
+        otherAttachmentList.value.splice(otherAttachmentList.value.findIndex((item) => item.fileId === row.fileId), 1);
-        }
-
-        getAttachmentList()
-        activeName.value = 'all'
       }
-    });
+
+      getAttachmentList()
+      activeName.value = 'all'
+    }
+  });
 }
 
 const changeTag = async () => {
@@ -266,7 +267,7 @@ const getTagName = (name) => {
   }
   return tagName
 }
-const handleTabClick = (item) => {
+const handleTabClick = (item, e) => {
   const defaultArray = tagsOption.value.filter(item1 => item1.tagId == item.props.name)
   if (defaultArray && defaultArray.length > 0) {
     isDefault.value = defaultArray[0].isDefault == 1
@@ -307,8 +308,9 @@ const compositeParam = (item) => {
   }
 }
 const getFile = (val) => {
+
   console.log('上传文件', val)
-  fileList.value=getLocalList()
+  fileList.value = getLocalList()
   let fileObj = compositeParam(val)
   fileList.value.push(fileObj)
   localStorage.setItem(`implementAllFileList-${route.query.projectId}`, JSON.stringify(fileList.value))
@@ -372,6 +374,8 @@ const changeFileList = (tag, flag) => {
     //   targetId: route.query.projectId,
     //   targetState: "30",
     // }
+
+    otherAttachmentList.value = [...otherAttachmentList.value, ...getLocalList()];
   } else {
     const filw = getLocalList().filter(item1 => item1.tag === tag);
     const filteredAllFiles = allFiles.value.filter(item1 => item1.tag === tag);

src/components/FileUpload.vue

@@ -1,13 +1,14 @@
 <template>
-  <el-upload :file-list="_value"
+  <el-upload :file-list="_value" ref="uploadRef"
-             :action="uploadFileUrl"
+             action="#"
              :headers="headers"
              :limit="maxSize"
              with-credentials
              :multiple="multiple"
-             :data="uploadParams"
+             :data="uploadParams" :on-change="handleChange"
+             :http-request="customUpload"
              :show-file-list="showFileList"
-             :auto-upload="true"
+             :auto-upload="false"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
              :on-error="uploadError"
@@ -19,16 +20,20 @@
 </template>
 
 <script setup>
-import { ElMessageBox, ElNotification} from "element-plus";
+import {ElLoading, ElMessage, ElMessageBox, ElNotification} from "element-plus";
 import {getToken} from '@/utils/auth'
+import {nextTick} from "vue";
+import axios from "axios";
 
 const baseURL = import.meta.env.VITE_BASE_URL
 const uploadFileUrl = ref(baseURL + "/workflow/process/file/upload")
 const headers = reactive({
+  'Content-Type': 'multipart/form-data',
   authorization: getToken()
 })
 const loading = ref(false)
 const showTable = ref(false)
+const uploadIndex = ref(0)
 const uploadParams = ref({})
 const props = defineProps({
   value: {
@@ -54,8 +59,9 @@ const props = defineProps({
     default: true
   }
 })
-
+const uploadRef = ref(null); // el-upload 的 ref
-const emit = defineEmits(["input", "getFile", "delete"])
+const uploadPromises = ref([]); // 跟踪每个文件的上传状态
+const emit = defineEmits(["input", "beforeUpload","getFile", "delete"])
 const fileList = ref([])
 const _value = computed({
   get() {
@@ -73,9 +79,80 @@ const beforeRemove = (file) => {
   }).then(() => true)
 }
 
+const uploadLoading = ref(false)
+const uploadFile = ref([])
 const handleRemove = (file) => {
   emit("delete", file.response.data.id)
 }
+
+// 文件选择变化时触发
+const handleChange = (file, files) => {
+  console.log(file, files,'files')
+  uploadIndex.value++
+  uploadFile.value.push(file)
+};
+watch(() => uploadIndex.value, (newVal) => {
+  console.log('newVal',newVal)
+  startUpload(uploadFile.value); // 自动触发上传
+},{
+  deep: true
+})
+// 自定义上传逻辑
+const customUpload = async (options) => {
+  const formData = new FormData();
+  formData.append('file', options.raw);
+  try {
+    const response = await axios.post(uploadFileUrl.value, formData, {
+      headers: headers,
+    });
+
+    fileList.value.push(response.data.data)
+
+    emit("getFile", response.data.data)
+    return response.data; // 成功时返回响应
+  } catch (error) {
+    throw new Error('上传失败'); // 失败时抛出错误
+  }
+};
+
+// 触发所有文件上传
+const startUpload = (files) => {
+  uploadLoading.value= ElLoading.service({
+    fullscreen: true,
+    text: '文件上传中...',
+  })
+  if (files.length === 0) {
+    return; // 没有文件时直接返回
+  }
+  uploadPromises.value = []; // 重置 Promise 数组
+  files.forEach((file) => {
+    // 触发每个文件的上传
+    const promise = new Promise((resolve, reject) => {
+      customUpload(file).then(resolve)
+          .catch(reject);
+    });
+    uploadPromises.value.push(promise);
+  });
+
+  // 使用 Promise.all 监听所有文件上传完成
+  Promise.all(uploadPromises.value)
+      .then(() => {
+        ElMessage.success('所有文件上传完成！');
+        ElNotification({
+          title: '提示',
+          message: '文件上传成功',
+          type: 'success'
+        })
+        files = []; // 清空文件列表
+        uploadRef.value.clearFiles(); // 清空上传组件
+        nextTick(() => {
+          uploadLoading.value.close()
+          uploadLoading.value=null
+        })
+      })
+
+};
+
 const beforeUpload = () => {
   loading.value = true
   return true