添加进度条和功能优化

ais_search/web/src/views/document/FileUpload.vue

@@ -5,7 +5,14 @@
     :footer="null"
     width="600px"
     :maskClosable="false"
+    :progress="progress"
   >
+    <div class="loading" v-if="loading">
+      <div class="box">
+        <a-spin />
+        <p>文件上传中</p>
+      </div>
+    </div>
     <a-upload-dragger
       style="margin: 20px 0 10px; width: 100%"
       v-model:fileList="fileList"
@@ -43,7 +50,7 @@ const open = ref<boolean>(false);
 const showModal = () => {
   open.value = true;
 };
-
+const loading = ref(false)
 // 文件上传部分
 const fileList = ref<any[]>([]);
 const handleUpload = async (file: any) => {
@@ -61,19 +68,56 @@ const handleUpload = async (file: any) => {
   formData.append("name", file.name); // 用户id
   formData.append("size", file.size);
   formData.append("type", file.type);
+  loading.value = true;
   http.post(urlStr, formData).then((result) => {
+    open.value = false;
+    loading.value = false;
     if (result.data) {
       message.success("文件导入成功！");
       const timer = setTimeout(()=>{
-        open.value = false;
         emits('close')
         clearTimeout(timer)
       }, 1500)
     } else {
       message.error("文件导入失败，请稍后重试！");
     }
+  }).catch((err) => {
+    open.value = false;
+    loading.value = false;
+    message.error("文件导入失败，请稍后重试！");
   });
   return false;
 };
+const progress = {
+  strokeColor: {
+    '0%': '#108ee9',
+    '100%': '#87d068',
+  },
+  strokeWidth: 3,
+  format: percent => `${parseFloat(percent.toFixed(2))}%`,
+  class: 'test',
+};
 defineExpose({ showModal });
 </script>
+
+<style lang="scss" scoped>
+.loading {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  left: 0px;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 9999999;
+  >.box {
+    position: absolute;
+    width: 200px;
+    text-align: center;
+    left: 0px;
+    right: 0px;
+    top: 50%;
+    transform: translateY(-50%);
+    margin: 0px auto;
+  }
+}
+</style>

ais_search/web/src/views/document/index.vue

@@ -110,6 +110,11 @@
                     {{ record.typeName }}
                   </div>
                 </template>
+                <template v-if="column.key === 'size'">
+                  <div>
+                    {{record.size ? (record.size / 1024 / 1024).toFixed(2) : 0}}M
+                  </div>
+                </template>
                 <template v-if="column.key === 'createTime'">
                   <div>
                     {{ record.createTime && dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}