ToolTech/tool-tech-front
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、左侧菜单树和按钮样式调整

Browse Source 
2、上传文件夹逻辑调整
3、文档工具详情新增预览
4、所有的预览功能新增遮罩处理
This commit is contained in:
pan 2024-09-07 20:52:35 +08:00
parent 7fe80361f7
commit d60b5adb62
10 changed files with 296 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

315
src/components/FileUpload/optimizeToolUpload.vue
View File

@ -4,7 +4,7 @@
:before-upload="beforeUpload"
:on-change="onChange"
:on-remove="handleRemove"
:multiple="isMultiple"
:multiple="false"
:on-exceed="handleExceed"
:accept="acceptType"
:file-list="fileList"
@ -18,11 +18,7 @@
<!-- 上传-->
<input v-show="false" ref="fileRef" id="fileFolder" type="file" @change="handleFolderUpload" webkitdirectory
multiple="multiple" />
<!-- <input v-show="false" type="file" ref="fileRef" webkitdirectory @change="handleFolderUpload">
<el-button slot="trigger" size="small" type="primary">选取文件夹</el-button>-->
</el-upload>
<!-- <div slot="tip" class="el-upload__tip" >只能上传{{acceptType}}文件</div>-->
<div v-show="progressFlag" class="head-img">
<el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
</div>
@ -34,7 +30,6 @@ import axios from 'axios'
import {
getToken
} from "@/utils/auth";
import JSZip from 'jszip'
export default {
props: {
@ -96,6 +91,8 @@ export default {
uploadedNum: 0,
_shardCount: null, //是否最后一片
isFolder: false,
totalFiles: 0, // 总文件数量
uploadedCount: 0, // 已上传文件数量
};
},
watch: {
@ -196,38 +193,42 @@ export default {
});
})
} else {
self.uploadedNum = 0
file._shardCount = Math.ceil(file.size / this.partSize) //总片数
file.uploaded = 0
let formData = new FormData()
formData.append('fileName', file.name)
//大文件上传初始化,返回uploadId initUpload(formData)
axios({
url: process.env.VUE_APP_BASE_API + "/common/initUpload",
method: 'post',
data: formData,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
}).then(function (res) {
if (res.status == 200) {
//从第0块开始上传
file.uploadId = res.data.uploadId
file.objectKey = res.data
file.chunkId = 0
self.uploadByChunk(file)
} else {
this.progress--
self.$message.error(res.msg)
}
}).catch(error => {
self.progressPercent = 0
self.progressFlag = false;
console.error(error)
})
self.uploadIdSharding(file);
}
},
uploadIdSharding(file){
let self = this
self.uploadedNum = 0
file._shardCount = Math.ceil(file.size / this.partSize) //总片数
file.uploaded = 0
let formData = new FormData()
formData.append('fileName', file.name)
//大文件上传初始化,返回uploadId initUpload(formData)
axios({
url: process.env.VUE_APP_BASE_API + "/common/initUpload",
method: 'post',
data: formData,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
}).then(function (res) {
if (res.status == 200) {
//从第0块开始上传
file.uploadId = res.data.uploadId
file.objectKey = res.data
file.chunkId = 0
self.uploadByChunk(file)
} else {
this.progress--
self.$message.error(res.msg)
}
}).catch(error => {
self.progressPercent = 0
self.progressFlag = false;
console.error(error)
})
},
//分片上传大文件
uploadByChunk(file) {
@ -254,7 +255,6 @@ export default {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
}).then(response => {
if (response.status == 200) {
//判断返回的MD5值是否一致，一致继续传下一块，否则重传本块（这里目前前后端MD5一直不一致，暂时先注释掉，有时间了我再研究一下）
@ -327,6 +327,7 @@ export default {
})
}
},
resetData() {
this.progress = 0;
},
@ -346,7 +347,6 @@ export default {
},
/** 清空文件 **/
clearFile(){
this.progressFlag = false;
if(this.$refs.upload){
this.$refs.upload.clearFiles();
}
@ -357,7 +357,7 @@ export default {
document.getElementById("fileFolder").value = null;
this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
},
async handleFolderUpload(event) {
/* async handleFolderUpload(event) {
let self = this;
self.isFolder = true
const files = event.target.files;
@ -376,17 +376,236 @@ export default {
}
await self.uploadFile(temp);
}
/* console.info("files=========", files)
let fileListTemp = []
for(let item of files){
fileListTemp.push(item);
}, */
/* // 处理文件夹上传
async handleFolderUpload(event) {
const files = event.target.files;
this.isFolder = true;
this.progressFlag = true;
if (files.length === 0) {
this.$message.warning('没有选择文件');
return;
}
let successCount = 0;
let failCount = 0;
for (const file of files) {
try {
await this.uploadFolderFile({ file });
successCount++;
} catch (error) {
failCount++;
}
}
this.$message.success(`上传完成！成功：${successCount}，失败：${failCount}`);
this.progressFlag = false;
this.progressPercent = 0;
}, */
// 单个文件上传
uploadFolderFile({ data, file }) {
let self = this
//初始化参数
if (file.size < this.partSize) {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append("file", file);
this.progressFlag = true;
axios({
url: self.uploadUrl,
method: 'post',
data: formData,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
/* onUploadProgress: progressEvent => {
this.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
} */
}).then(res => {
setTimeout(() => {
if (res.data.code === 200) {
// self.progressFlag = false;
// self.progressPercent = 0;
self.handleResult(res,file);
resolve(); // 上传成功后，调用 resolve
} else {
// self.progressFlag = false;
self.$message.error(file.name + '上传失败！');
reject(); // 上传失败时调用 reject
}
}, 500);
}).catch(error => {
// self.progressFlag = false;
// self.progressPercent = 0;
self.$message.error(file.name + '上传失败！');
reject(error); // 上传失败时调用 reject
});
});
}else{
return new Promise((resolve, reject) => {
self.uploadIdShardingFolder(file)
.then(() => {
resolve(); // 上传成功，继续下一个文件
})
.catch(error => {
reject(error); // 上传失败，触发 reject
});
});
}
self.fileList = fileListTemp; */
/* files.for()
self.onChange(null, files); */
// self.fileList = files;
// this.$refs.fileRef.value = null;
},
async handleFolderUpload(event) {
const files = Array.from(event.target.files);
this.totalFiles = files.length;
this.uploadedCount = 0;
this.progressFlag = true;
let failCount = 0;
for (let i = 0; i < files.length; i++) {
try {
await this.uploadFolderFile(
{
data: null,
file: files[i]
}
);
this.uploadedCount++;
this.updateProgress();
} catch (error) {
failCount++;
}
}
this.$message.success('上传完成！成功：' + this.uploadedCount+'，失败：' + failCount);
this.progressFlag = false;
this.progressPercent = 0;
},
updateProgress() {
if (this.uploadedCount === this.totalFiles) {
this.progressPercent = 100;
} else {
this.progressPercent = Math.min(100, Math.floor((this.uploadedCount / this.totalFiles) * 100));
}
/*
if (this.uploadedCount % 10 === 0 || this.uploadedCount === this.totalFiles) {
this.$message.success(`已上传 ${this.uploadedCount} 个文件`);
} */
},
// 初始化分片上传
uploadIdShardingFolder(file) {
let self = this
return new Promise((resolve, reject) => {
file._shardCount = Math.ceil(file.size / this.partSize); // 总片数
file.uploaded = 0;
const formData = new FormData();
formData.append('fileName', file.name);
// 大文件上传初始化, 返回 uploadId
axios({
url: process.env.VUE_APP_BASE_API + "/common/initUpload",
method: 'post',
data: formData,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
}).then(res => {
if (res.status === 200) {
file.uploadId = res.data.uploadId;
file.chunkId = 0;
this.uploadByChunkFolder(file)
.then(() => resolve()) // 全部分片上传完成，返回 resolve
.catch(error => reject(error)); // 分片上传出错，返回 reject
} else {
reject(new Error('初始化上传失败'));
}
}).catch(error => {
reject(error);
});
});
},
// 分片上传逻辑
uploadByChunkFolder(file) {
let self = this
return new Promise((resolve, reject) => {
const uploadChunk = (chunkId) => {
const _start = chunkId * this.partSize;
const _end = Math.min(file.size, _start + this.partSize);
const fileData = file.slice(_start, _end);
const form1 = new FormData();
form1.append('chunkFile', fileData);
form1.append('uploadId', file.uploadId);
form1.append('chunkId', (chunkId + 1).toString());
form1.append('shardCount', file._shardCount.toString());
axios({
url: process.env.VUE_APP_BASE_API + "/common/uploadChunk",
method: 'post',
data: form1,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
}).then(response => {
if (response.status === 200) {
file.uploadedNum++;
// const percent = Math.floor((file.uploadedNum / file._shardCount) * 100);
// this.percentageSend(file, percent);
if (chunkId + 1 < file._shardCount) {
// 继续上传下一片
uploadChunk(chunkId + 1);
} else {
// 所有分片上传完成，合并文件
this.mergeFileFolder(file).then(() => resolve()).catch(error => reject(error));
}
} else {
reject(new Error('分片上传失败'));
}
}).catch(error => {
reject(error);
});
};
// 从第0块开始上传
uploadChunk(0);
});
},
// 合并文件
mergeFileFolder(file) {
let self = this
return new Promise((resolve, reject) => {
const form2 = new FormData();
form2.append('uploadId', file.uploadId);
form2.append('fileName', file.name);
axios({
url: process.env.VUE_APP_BASE_API + "/common/mergeFile",
method: 'post',
data: form2,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
}).then(res => {
if (res.status === 200) {
self.handleResult(res,file);
resolve(); // 合并成功
} else {
reject(new Error('文件合并失败'));
}
}).catch(error => {
reject(error);
});
});
}
}
};
</script>

4
src/layout/components/Navbar.vue
View File

@ -97,9 +97,9 @@ export default {
})
}).catch(() => {});
},
// 跳转到购物车
// 跳转到消息中心
toMyCartPage() {
this.$router.push({ path: '/message' })
this.$router.push({ path: '/message', query: {'states':'1'} })
},
}
}

3
src/views/document/detail.vue
View File

@ -18,7 +18,7 @@
</el-form><!--el-form-->
</div><!--el-form-border 表单-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="关联附件" name="second" v-loading="previewLoading" element-loading-text="加载中">
<el-tab-pane label="关联附件" name="second" v-loading="previewLoading" >
<el-table :data="attachmentList" style="width: 100%">
<el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
<el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
@ -480,7 +480,6 @@
this.isPreviewDisable = true
this.previewLoading = true
this.$nextTick(() => {
console.info("this.$refs.previewForm====999999=======", this.$refs.previewForm)
this.$refs.previewForm.frontModulePreview(row)
})
},

2
src/views/document/downloadFileDetail.vue
View File

@ -2,7 +2,7 @@
<div class="fbox1">
<div class="fl">
<el-tabs v-model="detailActiveName">
<el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="加载中">
<el-tab-pane label="附件信息" name="first" v-loading="previewLoading" >
<el-table :data="attachmentList" style="width: 100%">
<el-table-column label="序号" width="60" align="center" type="index"></el-table-column>
<el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />

11
src/views/document/editDocument.vue
View File

@ -128,7 +128,7 @@
<div class="tboper">
<div class="tit">关联附件</div>
</div>
<div class="el-form-border">
<div class="el-form-border" v-loading="previewLoading" >
<div class="operate">
<template v-if="editStatus && !detailBoolean">
<uploadVue
@ -236,7 +236,7 @@
</div>
</div>
<preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose"></preview-util>
<preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose" @previewLoadingClose="previewLoadingClose"></preview-util>
<tool-selector ref="toolSelect" @selectHandle="selectHandle"></tool-selector>
<bl-user-selector ref="peopleSelect" :type="'single'" :isCheck="true" :open="toolPrincipalsChoose" :deptFilter="true" @cancel="toolPrincipalsChoose=false" @submit="submitPeople"></bl-user-selector>
@ -387,7 +387,7 @@
},
currentPage: 1, // 当前页
pageSize: 10, // 每页显示数量
previewLoading: false,
}
},
computed: {
@ -789,6 +789,7 @@
},
handlePreview(row){
this.isPreviewDisable = true
this.previewLoading = true
this.$nextTick(() => {
this.$refs.previewForm.frontModulePreview(row)
})
@ -797,6 +798,10 @@
previewClose(){
this.isPreviewDisable = false
},
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
/**
* 处理下载
* **/

1
src/views/filestatistic/index.vue
View File

@ -285,7 +285,6 @@ export default {
let self = this
this.downLoading = true
listDocCount(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
console.info("res.total=============", res.total)
self.downTotal = res.total
self.toolDownStatList = res?.rows || []
self.downLoading = false

4
src/views/message/index.vue
View File

@ -196,8 +196,12 @@ export default {
};
},
created() {
if(this.$route.query.states){
this.queryParams.states = this.$route.query.states
}
this.getList();
this.getDeptTree();
},
methods: {
/** 查询部门下拉树结构 */

3
src/views/tool/downloadFileDetail.vue
View File

@ -2,7 +2,7 @@
<div class="fbox1">
<div class="fl">
<el-tabs v-model="detailActiveName">
<el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="加载中">
<el-tab-pane label="附件信息" name="first" v-loading="previewLoading" >
<el-table :data="attachmentList" style="width: 100%">
<el-table-column label="序号" width="60" align="center" type="index"></el-table-column>
<el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
@ -101,6 +101,7 @@
},
handlePreview(row){
this.isPreviewDisable = true
this.previewLoading = true
this.$nextTick(() => {
this.$refs.previewForm.frontModulePreview(row)
})

2
src/views/tool/toolDetail.vue
View File

@ -29,7 +29,7 @@
</el-form><!--el-form-->
</div><!--el-form-border 表单-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="关联附件" name="second" v-loading="previewLoading" element-loading-text="加载中">
<el-tab-pane label="关联附件" name="second" v-loading="previewLoading" >
<el-table :data="attachmentList" style="width: 100%">
<el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
<!-- <el-table-column label="类别" prop="docType" :show-overflow-tooltip="true" width="80" >

15
src/views/workflowList/addWorkflow/tool_release.vue
View File

@ -225,7 +225,6 @@
<div class="el-form-border">
<div class="operate">
<!-- <el-form-item label="文件" required>
</el-form-item>
<el-button type="primary" icon="el-icon-upload2" v-if="editStatus" @click="handleDocAdd">上传</el-button>-->
<template v-if="editStatus">
@ -244,7 +243,7 @@
</template>
<!-- <el-button icon="el-icon-delete">删除</el-button>-->
</div><!--operate 操作按钮-->
<el-table :data="paginatedData" style="width: 100%">
<el-table :data="paginatedData" style="width: 100%" v-loading="previewLoading" >
<!-- <el-table-column type="selection" width="50" align="center"> </el-table-column>-->
<el-table-column label="序号" width="60" align="center" type="index"></el-table-column>
<el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
@ -311,7 +310,7 @@
<tool-selector ref="toolSelect" @selectHandle="selectHandle"></tool-selector>
<bl-user-selector ref="peopleSelect" :type="'single'" :isCheck="true" :open="toolPrincipalsChoose" :deptFilter="true" @cancel="toolPrincipalsChoose=false" @submit="submitPeople"></bl-user-selector>
<preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose"></preview-util>
<preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose" @previewLoadingClose="previewLoadingClose"></preview-util>
<el-dialog :title="viewDialogTitle" :visible.sync="viewDialogOpen" fullscreen width="500px" append-to-body :before-close="handleBeforeClose">
<i-frame :src="previewUrl" v-if="viewDialogOpen"/>
@ -339,7 +338,6 @@ import ToolSelector from '@/components/tool-selector/index.vue'
import uploadVue from '@/components/FileUpload/optimizeToolUpload.vue'
import { addCount } from "@/api/tool/downloadCount";
import previewUtil from '@/components/PreviewUtil/previewUtil.vue'
import store from "@/store";
// PDF本地文件预览
export default {
@ -400,7 +398,8 @@ export default {
viewShow: false,
monitorDrawerVisible:false,
form: {
toolRespDept: this.$store.getters.userInfo.deptId
toolRespDept: this.$store.getters.userInfo.deptId,
status: "zy"
},
rules: {
toolCode: [
@ -474,6 +473,7 @@ export default {
title: '工具发布',
currentPage: 1, // 当前页
pageSize: 10, // 每页显示数量
previewLoading: false,
};
},
computed: {
@ -970,6 +970,7 @@ export default {
},
handlePreview(row){
this.isPreviewDisable = true
this.previewLoading = true
this.$nextTick(() => {
this.$refs.previewForm.frontModulePreview(row)
})
@ -978,6 +979,10 @@ export default {
previewClose(){
this.isPreviewDisable = false
},
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
/**
* 处理下载
* **/