From f5f29bdfd70f770cb69eedc2c3f10b82f5c7f006 Mon Sep 17 00:00:00 2001 From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com> Date: Wed, 25 Sep 2024 09:37:08 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UploadFile/src/UploadFile-BK.vue | 383 ------------------ src/components/UploadFile/src/UploadFile.vue | 163 +++++++- src/components/UploadFile/src/useUpload.ts | 4 +- .../bpm/knows/knowledge/KnowledgeForm.vue | 28 +- .../bpm/knows/public/KnowledgePublicForm.vue | 16 +- 5 files changed, 183 insertions(+), 411 deletions(-) delete mode 100644 src/components/UploadFile/src/UploadFile-BK.vue diff --git a/src/components/UploadFile/src/UploadFile-BK.vue b/src/components/UploadFile/src/UploadFile-BK.vue deleted file mode 100644 index 6d724a9..0000000 --- a/src/components/UploadFile/src/UploadFile-BK.vue +++ /dev/null @@ -1,383 +0,0 @@ - - - diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index d77603e..2827a9e 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -41,27 +41,34 @@ @click="handleView(row.file)" target="_blank" type="primary" - >编辑 + >预览
预览 + >编辑 + +
+
+ 原文件下载 -
- 下载 + >编辑后下载
@@ -78,6 +85,11 @@ import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from import { isString } from '@/utils/is' import { useUpload } from '@/components/UploadFile/src/useUpload' import { UploadFile } from 'element-plus/es/components/upload/src/upload' +import {getAccessToken} from "@/utils/auth"; +import {onlyofApi} from "@/api/only/only"; +import axios from "axios"; +import {ref} from "vue"; +import {integer} from "vue-types"; defineOptions({ name: 'UploadFile' }) @@ -85,6 +97,7 @@ const message = useMessage() // 消息弹窗 const emit = defineEmits(['update:modelValue']) const props = defineProps({ + fileId:propTypes.number, modelValue: propTypes.oneOfType([String, Array]).isRequired, fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] fileSize: propTypes.number.def(5), // 大小限制(MB) @@ -103,7 +116,101 @@ const MysqlUrl = ref([]) const uploadNumber = ref(0) const { uploadUrl, httpRequest } = useUpload() +// 上传文件 +const upload = async (myFile:any) => { + //获取当前id + // console.log("id",fileNid.value) + // console.log("myFile",myFile) + // const iid = fileNid.value.toString() + const formData = new FormData(); + const token = getAccessToken(); + //设置配置 + const configs = { + headers: { 'Authorization': `Bearer ${token}`,'Content-Type': 'multipart/form-data' } + } + //拿到的信息来加入form + formData.append('file', myFile); + // formData.append('fileId', iid.toString()); + try { + const response = await axios.post('http://192.168.1.15:48080/admin-api/only/onlyof/update', formData, configs); + console.log(response); + } catch (error) { + console.error('Upload failed:', error); + } +}; +const queryParamsOnly = reactive({ + pageNo: 1, + pageSize: 2, + fileName: '', + fileSize: undefined, + fileType: undefined, + filePath: undefined, + uploadDate: [], + status: undefined, + createTime: [], +}) +/** 查询列表 */ +const GotoFile = ref(false) +/** + * 查询列表看看没有上传过文件这个文件 后端我改为了精准查询 + */ +const getList = async () => { + const data = await onlyofApi.getonlyofPage(queryParamsOnly) + GotoFile.value=false + //查询库中有没有同名文件 + if (data.total<=0){ + message.error('未找到文件请重新上传') + GotoFile.value=false + }else { + GotoFile.value=true + } +} +//定义储存当前数据id +const fileNid = ref(integer) +// 编辑文件 +const edit = async (row) => { + //原本想根据id来指定文件后来想不查看是否有重复文件 + // console.log("id",fileNid.value) + // const iid = fileNid.value.toString() + // let name = fileNid.value+row.file.name.trim() + let name = row.file.name.trim() + // console.log(name) + queryParamsOnly.pageNo = 1 + queryParamsOnly.fileName=name + //设置完查询的值去查询 + await getList() + if (!GotoFile.value){ + return; + } + const token = getAccessToken(); + // window.open(`http://192.168.1.15:48080/admin-api/only/onlyof/edit?name=${name}&userName=admin&userId=1&id=${iid}&token=${token}`); + window.open(`http://192.168.1.15:48080/admin-api/only/onlyof/edit?name=${name}&userName=admin&userId=1&token=${token}`); +}; +// 下载文件 +const download = async (row) => { + // 这些原本都想要用id + // let name = fileNid.value+row.file.name.trim() + let name = row.file.name.trim() + //拿到名字 + // const iid = fileNid.value.toString() + // console.log("name",name) + try { + const token = getAccessToken(); + //拿文件状态 + const response = await axios.get(`http://192.168.1.15:48080/admin-api/only/onlyof/editStatus?name=${name}&token=${token}`); + if (response.data.error === 0) { + alert('文档正在编辑，5秒后开始下载最新版！'); + setTimeout(() => { + window.location.href = `http://192.168.1.15:48080/admin-api/only/onlyof/download?name=v1${name}&token=${token}`; + }, 5000); + } else { + window.location.href = `http://192.168.1.15:48080/admin-api/only/onlyof/download?name=${name}&token=${token}`; + } + } catch (error) { + console.error('Download failed:', error); + } +}; // 文件上传之前判断 const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { if (fileList.value.length >= props.limit) { @@ -127,25 +234,46 @@ const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { message.error(`上传文件大小不能超过${props.fileSize}MB!`) return false } - message.success('正在上传文件，请稍候...') + message.success('正在上传文件，请等待列表刷新') uploadNumber.value++ } // 处理上传的文件发生变化 // const handleFileChange = (uploadFile: UploadFile): void => { // uploadRef.value.data.path = uploadFile.name // } +//定义文件是否重复判断参数 +const fileVerify = ref(false) // 文件上传成功 const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => { - message.success('上传成功') - + //文件上传时获取想要的数据 + // console.log("res0",res[0]) + // console.log("fileList",fileList.value) + const resName = res[0].data[0] + fileVerify.value = false; + //判断是不是有相同名字文件 + for (let i = 0; i item.response?.data === res.data) fileList.value.splice(index, 1) - console.log("res",res) + //在删除自身后根据判断来提示 + if (fileVerify.value){ + message.error("不能上传同名文件") + return; + } + message.success('上传成功') + //正常上传后 上传附件 + upload(res[1]) /** * 拼接更加明显的特殊字符串来便于切割 * */ - uploadList.value.push({ name: (res.data[0]+"&&$#$"+res.data[1])+" ", url: (res.data[0]+"&&$#$"+res.data[1])+" "}) + uploadList.value.push({ name: (res[0].data[0]+"&&$#$"+res[0].data[1])+" ", url: (res[0].data[0]+"&&$#$"+res[0].data[1])+" "}) if (uploadList.value.length == uploadNumber.value) { fileList.value.push(...uploadList.value) MysqlUrl.value.push(...uploadList.value) @@ -199,6 +327,7 @@ const handleView = (file)=> { //文件下载时文件名为原来名字 const downloadFile = async (file)=> { + console.log("file",file) //使用 fetch API 请求文件并返回 Blob 数据 const response = await fetch(file.url); //获取 response blob 属性 @@ -222,7 +351,15 @@ const downloadFile = async (file)=> { 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.modelValue, diff --git a/src/components/UploadFile/src/useUpload.ts b/src/components/UploadFile/src/useUpload.ts index c0465a2..bc87f6a 100644 --- a/src/components/UploadFile/src/useUpload.ts +++ b/src/components/UploadFile/src/useUpload.ts @@ -30,7 +30,7 @@ export const useUpload = () => { } else { // 模式二：后端上传 // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子 - return new Promise((resolve, reject) => { + const fileData = new Promise((resolve, reject) => { FileApi.updateFile({ file: options.file }) .then((res) => { if (res.code === 0) { @@ -43,6 +43,8 @@ export const useUpload = () => { reject(res) }) }) + //返回上传后的文件还有options中的file数据 + return Promise.all([fileData, options.file]); } } diff --git a/src/views/bpm/knows/knowledge/KnowledgeForm.vue b/src/views/bpm/knows/knowledge/KnowledgeForm.vue index 56174bb..5e3343e 100644 --- a/src/views/bpm/knows/knowledge/KnowledgeForm.vue +++ b/src/views/bpm/knows/knowledge/KnowledgeForm.vue @@ -85,7 +85,9 @@ - + @@ -134,7 +136,7 @@ const formData = ref({ userName:'', content: '', status: undefined, - filePath: undefined + filePath: [] as string[] }) const formData_Star2 ={ kowsmId: 0, @@ -189,13 +191,15 @@ const open = async (type: string, id?: number) => { try { formData.value = await KnowledgeApi.getKnowledge(id) //去除掉储存信息中多余的中括号 - formData.value.filePath[0] = formData.value.filePath[0] - .replace("[","") - .replace("]","") - formData.value.filePath[formData.value.filePath.length-1] = formData.value.filePath[formData.value.filePath.length-1] - .replace("[","") - .replace("]","") - console.log(formData.value) + const pathLen = formData.value.filePath.length + if (pathLen === 1){ + formData.value.filePath[0] = formData.value.filePath[0].substring(1) + formData.value.filePath[0] = formData.value.filePath[0].substring(0,formData.value.filePath[0].length-1) + }else if (pathLen >= 2){ + formData.value.filePath[0] = formData.value.filePath[0].substring(1) + formData.value.filePath[pathLen-1] = formData.value.filePath[pathLen-1].substring(0,formData.value.filePath[pathLen-1].length-1) + } + // console.log(formData.value) } finally { formLoading.value = false } @@ -305,11 +309,9 @@ const submitForm = async () => { formLoading.value = true try { const data = formData.value as unknown as KnowledgeVO - if (data.filePath.length!==0){ + if (data.filePath &&data.filePath.length!==0){ //去除多余空格 - for (let i = 0; i < data.filePath.length; i++){ - data.filePath[i] = data.filePath[i].replace(/^\s*/,''); - } + data.filePath = data.filePath.map(path => path.trimStart()); } console.log(data.filePath) // 拼接子表的数据 diff --git a/src/views/bpm/knows/public/KnowledgePublicForm.vue b/src/views/bpm/knows/public/KnowledgePublicForm.vue index 55f2fb1..7201dc9 100644 --- a/src/views/bpm/knows/public/KnowledgePublicForm.vue +++ b/src/views/bpm/knows/public/KnowledgePublicForm.vue @@ -120,7 +120,8 @@ const formData = ref({ knowTitle: undefined, content: undefined, status: undefined, - filePath: undefined, + //更改类型未数组或字符串数组 + filePath: [] as string[], processInstanceId: undefined, userId: undefined, flowStatus: undefined @@ -165,6 +166,15 @@ const open = async (type: string, id?: number) => { formLoading.value = true try { formData.value = await KnowledgePublicApi.getKnowledgePublic(id) + //去除掉储存信息中多余的中括号 + const pathLen = formData.value.filePath.length + if (pathLen === 1){ + formData.value.filePath[0] = formData.value.filePath[0].substring(1) + formData.value.filePath[0] = formData.value.filePath[0].substring(0,formData.value.filePath[0].length-1) + }else if (pathLen >= 2){ + formData.value.filePath[0] = formData.value.filePath[0].substring(1) + formData.value.filePath[pathLen-1] = formData.value.filePath[pathLen-1].substring(0,formData.value.filePath[pathLen-1].length-1) + } } finally { formLoading.value = false } @@ -190,6 +200,10 @@ const submitForm = async () => { formLoading.value = true try { const data = formData.value as unknown as KnowledgePublicVO + if (data.filePath &&data.filePath.length!==0){ + //去除多余空格 + data.filePath = data.filePath.map(path => path.trimStart()); + } // 拼接子表的数据 data.commentPublics = commentPublicFormRef.value.getData() if (formType.value === 'create') {