feat(FileUpload): 添加文件上传中的 loading 效果

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'" @beforeUpload="beforeUpload" @getFile="getFile"/>
 
     <el-button color="#DED0B2" @click="handleEditTag"
                v-if="activeName!='all'&&activeName!='plus'&&uploadState&&!isDefault"
@@ -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
@@ -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
@@ -306,7 +307,11 @@ const compositeParam = (item) => {
     tag: getTagName(activeName.value) || '项目实施',
   }
 }
+const beforeUpload=()=>{
+  // uploadLoading.value= ElLoading.service({fullscreen: true})
+}
 const getFile = (val) => {
+
   console.log('上传文件', val)
   fileList.value = getLocalList()
   let fileObj = compositeParam(val)
@@ -314,6 +319,9 @@ const getFile = (val) => {
   localStorage.setItem(`implementAllFileList-${route.query.projectId}`, JSON.stringify(fileList.value))
   otherAttachmentList.value.push(fileObj)
   // handleSubmit([fileObj])
+  // nextTick(() => {
+  //   uploadLoading.value.close()
+  // })
 }
 
 const handleSubmit = async () => {
@@ -372,6 +380,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

@@ -19,8 +19,9 @@
 </template>
 
 <script setup>
-import { ElMessageBox, ElNotification} from "element-plus";
+import {ElLoading, ElMessageBox, ElNotification} from "element-plus";
 import {getToken} from '@/utils/auth'
+import {nextTick} from "vue";
 
 const baseURL = import.meta.env.VITE_BASE_URL
 const uploadFileUrl = ref(baseURL + "/workflow/process/file/upload")
@@ -55,7 +56,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(["input", "getFile", "delete"])
+const emit = defineEmits(["input", "beforeUpload","getFile", "delete"])
 const fileList = ref([])
 const _value = computed({
   get() {
@@ -73,11 +74,16 @@ const beforeRemove = (file) => {
   }).then(() => true)
 }
 
+const uploadLoading = ref(false)
 const handleRemove = (file) => {
   emit("delete", file.response.data.id)
 }
 const beforeUpload = () => {
+  console.log("🚀 ~ file:'beforeUpload ")
+
+  uploadLoading.value= ElLoading.service({fullscreen: true})
   loading.value = true
+  // emit("beforeUpload")
   return true
 }
 const handleUploadSuccess = (res) => {
@@ -91,6 +97,10 @@ const handleUploadSuccess = (res) => {
   let data = res.data
   fileList.value.push(data)
   emit("getFile", res.data)
+  nextTick(() => {
+    uploadLoading.value.close()
+    uploadLoading.value=null
+  })
 }
 const uploadError = () => {
   loading.value = false