diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index fbee6b9..2dc7ce7 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -25,6 +25,12 @@ 选取文件 @@ -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, Array]).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( - () => props.fileId, - (val:number) => { - // console.log("val",val) - fileNid.value=val - }, - { immediate: true, deep: true } -) +// watch( +// () => props.fileId, +// (val:number) => { +// // console.log("valFileId",val) +// // fileNid.value=val +// }, +// { 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("11111MysqlUrl", MysqlUrl.value) + console.log("fileList", fileList.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) }) })