文件同步状态

src/components/UploadFile/src/UploadFile.vue

@@ -25,6 +25,12 @@
         选取文件
       </el-button>
       <template v-if="isShowTip && !disabled" #tip>
+        <div>
+          <el-button type="primary" @click="SyncFiles">
+            <Icon icon="ep:upload-filled" />
+            同步文件
+          </el-button>
+        </div>
         <div style="font-size: 8px">
           大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
         </div>
@@ -74,6 +80,21 @@
           <div class="ml-10px">
             <el-button link type="danger" @click="handleRemove(row.file)"> 删除</el-button>
           </div>
+          <div class="ml-10px" v-if="lod">
+                <el-progress
+                  type="dashboard"
+                  :percentage="row.file.page"
+                  :stroke-width="3"
+                  :width="20"
+                  :color="colors"
+                  :show-text="false"
+                  style="margin-top: -10px;"
+                />
+          </div>
+          <div class="ml-10px" v-if="lod"
+               :style="{ marginLeft: '30px', color: getColor(row.file.page) }">
+            {{row.file.lodTxt}}
+          </div>
         </div>
       </template>
     </el-upload>
@@ -93,18 +114,30 @@ import {integer} from "vue-types";
 import {getConfigKey} from "@/api/infra/config";
 
 defineOptions({ name: 'UploadFile' })
-
+const colors = [
+  { color: '#f56c6c', percentage: 10 },
+  { color: '#df7c71', percentage: 20 },
+  { color: '#c98d76', percentage: 30 },
+  { color: '#b49d7b', percentage: 40 },
+  { color: '#9ead80', percentage: 50 },
+  { color: '#88be84', percentage: 60 },
+  { color: '#72ce89', percentage: 70 },
+  { color: '#5dde8e', percentage: 80 },
+  { color: '#47ef93', percentage: 90 },
+  { color: '#31ff98', percentage: 100 },
+]
 const message = useMessage() // 消息弹窗
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue','update:fileStatus'])
 
 const props = defineProps({
   fileId:propTypes.number,//需要当前数据的id
+  fileStatus: propTypes.arrayOf(Number).def([]),//需要当前数据同步状态
   modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
   fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf', 'wps']), // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileSize: propTypes.number.def(5), // 大小限制(MB)
   limit: propTypes.number.def(5), // 数量限制
   autoUpload: propTypes.bool.def(true), // 自动上传
-  drag: propTypes.bool.def(true), // 拖拽上传
+  drag: propTypes.bool.def(false), // 拖拽上传
   isShowTip: propTypes.bool.def(true), // 是否显示提示
   disabled: propTypes.bool.def(false) // 是否禁用上传组件 ==> 非必传（默认为 false）
 })
@@ -139,9 +172,125 @@ const upload = async (myFile:any) => {
     console.error('Upload failed:', error);
   }
 };
+const lod = ref(true)
+//根据不同值拿到不同字体颜色
+const getColor = (per:number) => {
+  const colorObj = colors.find(c => per == c.percentage);
+  return colorObj ? colorObj.color : '#f56c6c';
+}
+//根据文件名字获取不同的路径
+const getPage = async (fileName:string) => {
+  queryParamsOnly.pageSize = 1;
+  queryParamsOnly.fileName = fileName;
+  const data = await onlyofApi.getonlyofPage(queryParamsOnly);
+  return data.list[0]?.filePath
+}
+//实现文件上传
+const SyncFiles = async () => {
+  lod.value=true
+  // console.log("fileList.value",fileList.value)
+  //判断是上传列表是否为空
+  if (fileList.value.length==0){
+    message.error("同步文件为空! ")
+  }
+  for (const Name of fileList.value) {
+    const fName = Name as UploadUserFile & {page?: number,lodTxt?: String};
+    fName.lodTxt="10%"
+    if (fName.page==100){
+      fName.lodTxt="完成"
+      continue
+    }
+    //判断是否全部上传
+    await delay(100);
+    fName.page = 20;
+    fName.lodTxt="20%"
+    //获取文件名
+    const fileName = fName.name.trim();
+    //设置要获取的数据
+    try {
+      const path = await  getPage(fileName)
+      fName.page = 30;
+      fName.lodTxt="30%"
+      let filePath
+      if (path){
+        filePath = path +fileName;
+        fName.page = 40;
+        fName.lodTxt="40%"
+      }else {
+        message.error("文件路径获取失败!")
+        continue;
+      }
+      //替换所有路径\为/
+      filePath = filePath.replace(/\\/g, "/");
+      await delay(100);
+      fName.page = 50;
+      fName.lodTxt="50%"
+      //获取文件后缀名
+      const fileExt = getFileExtension(fileName) || '';
+      fName.page = 60;
+      // console.log(fileExt)
+      fName.lodTxt="60%"
+      //更具对应后缀名获取对应接口
+      const addMap = {
+        docx: 'add_docs',
+        xlsx: 'add_excel',
+        pptx: 'add_pppt',
+        pdf: 'add_pdfs',
+        md: 'add_mds',
+        txt: 'add_texts',
+        html: 'add_html',
+      };
+      await delay(100);
+      fName.page = 70;
+      fName.lodTxt="70%"
+      const add = addMap[fileExt] || ''; // 默认值为空字符串对应路径获取对应接口
+      fName.page = 90;
+      fName.lodTxt="90%"
+      // console.log(`http://192.168.1.15:8000/${add}?path=${filePath}`)
+      const response = await axios.post(`http://192.168.1.15:8000/${add}?path=${filePath}`);
+      console.log("response",response)
+      await delay(100);
+      fName.page = 100;
+      fName.lodTxt="完成"
+    } catch (error) {
+      await delay(200);
+      fName.page = 10;
+      message.error("同步错误!")
+      fName.lodTxt="错误 "
+      console.error("同 步 错 误 :", error);
+    }
+  }
+  console.log("fileList.value完成",fileList.value)
+  message.success("同步完成! ")
+  emitUpdatePage()
+}
+const emitUpdatePage = () => {
+  console.log("emitUpdatePage",fileList.value)
+  let result:number[] = [];
+  for (const pe of fileList.value){
+    const pa = pe as UploadUserFile & {page?: number};
+    if (pa.page != null) {
+      result.push(pa.page)
+    }
+    console.log(result)
+  }
+  emit('update:fileStatus', result)
+}
+//设置延迟
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+//获取文件后缀名
+const getFileExtension = (fileName: string) => {
+  let fileLast: string | undefined;
+  const parts = fileName.split('.');
+  if (parts.length > 1) {
+    return fileLast = parts.pop()?.toLowerCase()||''; // 获取最后一个部分作为后缀
+  } else {
+    message.error("获取文件后缀名失败,请重试! ")
+  }
+};
 const queryParamsOnly = reactive({
   pageNo: 1,
-  pageSize: 2,
+  pageSize: 1,
   fileName: '',
   fileSize: undefined,
   fileType: undefined,
@@ -352,14 +501,14 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
   console.log(uploadFile)
 }
 //watch 传过来的id又没有改动 有的话重新赋值给filenid
-watch(
+// watch(
-  () => props.fileId,
+//   () => props.fileId,
-  (val:number) => {
+//   (val:number) => {
-    // console.log("val",val)
+//     // console.log("valFileId",val)
-    fileNid.value=val
+//     // fileNid.value=val
-  },
+//   },
-  { immediate: true, deep: true }
+//   { immediate: true, deep: true }
-)
+// )
 // 监听模型绑定值变动
 watch(
   () => props.modelValue,
@@ -379,7 +528,7 @@ watch(
     }
     // 情况2：数组  利用拼接的特殊字符串来切割
     fileList.value.push(
-      ...(val as string[]).map((url) => ({ name: url.substring(0,url.indexOf("&&$#")),url:url.substring(url.indexOf("&&$#")+5,url.length) }))
+      ...(val as string[]).map((url) => ({ name: url.substring(0,url.indexOf("&&$#")),url:url.substring(url.indexOf("&&$#")+5,url.length) ,page:0,lodTxt:"准备.."}))
     )
     //val数据为空时 文件列表为空
     if (val[0]==""){
@@ -391,12 +540,47 @@ watch(
           ...(val as string[]).map((url) => ({ name: url,url: url}))
         );
     }
-    // console.log("11111fileList", fileList.value)
+    console.log("fileList", fileList.value)
-    // console.log("11111MysqlUrl", MysqlUrl.value)
+    console.log("props.fileStatus", props.fileStatus)
+    // console.log("MysqlUrl", MysqlUrl.value)
+
+    if (!props.fileStatus) {
+      lod.value=false;
+      console.log("为空", val);
+      return; // 如果 val 为空或者不是数组，直接返回
+    }
+    // props.fileStatus.forEach((item, index) => {
+    //   fileList.value[index].page = item
+    //   if (item == 10 ){
+    //     fileList.value[index].lodTxt = "错误"
+    //   }else{
+    //     fileList.value[index].lodTxt = "完成"
+    //   }
+    // });
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => props.fileStatus,
+  (val:number[]) => {
+    if (!val) {
+      lod.value=false;
+      console.log("为空", val);
+      return; // 如果 val 为空或者不是数组，直接返回
+    }
+    console.log("ileList.value",fileList.value)
+    val.forEach((item, index) => {
+      fileList.value[index].page = item
+      if (item == 10 ){
+        fileList.value[index].lodTxt = "错误"
+      }else{
+        fileList.value[index].lodTxt = "完成"
+      }
+    });
+    console.log("ileList.value",fileList.value)
   },
   { immediate: true, deep: true }
 )
-
 // 发送文件链接列表更新用于上传文件后
 const emitUpdateModelValue = () => {
   // 情况1：数组结果
@@ -429,7 +613,6 @@ onMounted( () => {
       return
     }
     dataT.value = res;
-    console.log("data",dataT.value)
   })
 })
 </script>