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 10:51:49 +08:00
parent c567ca9176
commit 37230039da
9 changed files with 137 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/tool.css
View File

@ -2162,7 +2162,7 @@ body .el-card.lrtt>.el-card__body{
.lrtt .lt{ .lrtt .lt{
display: block; display: block;
padding: 16px; padding: 16px;
width: 310px; width: 250px;
height: 700px; height: 700px;
overflow: auto; overflow: auto;
} }

72
src/components/FileUpload/sgDragSize.vue
View File

@ -5,6 +5,8 @@
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios'
export default { export default {
name: 'sgDragSize', name: 'sgDragSize',
data() { data() {
@ -49,6 +51,76 @@ export default {
this.__removeWindowEvents(); this.__removeWindowEvents();
}, },
methods: { methods: {
uploadFile({ data, file }) {
let self = this
//初始化参数
return new Promise((resolve, reject) => {
//初始化参数
if (file.size < this.partSize) {
let formData = new FormData();
formData.append("file", file);
self.progressFlag = true;
axios({
url: self.uploadUrl,
method: 'post',
data: formData,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
// 更新进度条
self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
}
})
.then(res => {
setTimeout(() => {
if (res.data.code == 200) {
setTimeout(function () {
// 文件夹上传逻辑
if (self.isFolder) {
self.fileList.push(file);
}
self.$message({
message: '上传成功！',
type: 'success',
duration: '2000'
});
self.progressFlag = false;
self.progressPercent = 0;
self.handleResult(res, file);
resolve(res); // 成功后 resolve
}, 500);
} else {
self.progressFlag = false;
self.$message({
message: '上传失败！',
type: 'error',
duration: '2000'
});
reject(new Error('上传失败')); // 失败后 reject
}
}, 1000);
})
.catch(error => {
console.error(error);
self.progressFlag = false;
self.progressPercent = 0;
self.$refs.upload.clearFiles();
self.$message({
message: '上传失败！',
type: 'error',
duration: '2000'
});
reject(error); // 上传异常时 reject
});
} else {
// 大文件分片逻辑
reject(new Error('文件过大，使用分片上传'));
}
});
},
view_innerHeight() { view_innerHeight() {
return innerHeight - this.tbHeight; return innerHeight - this.tbHeight;
}, },

6
src/components/PreviewUtil/previewUtil.vue
View File

@ -147,6 +147,7 @@ export default {
if(row.fileName.endsWith(".jpg") || row.fileName.endsWith(".png")){ if(row.fileName.endsWith(".jpg") || row.fileName.endsWith(".png")){
this.$viewerApi({images: [row.fileUrl]}) this.$viewerApi({images: [row.fileUrl]})
self.previewLoading = false self.previewLoading = false
self.$emit('previewLoadingClose')
return return
} }
if(row.fileName.endsWith(".mp4")){ if(row.fileName.endsWith(".mp4")){
@ -159,6 +160,7 @@ export default {
self.dialogVisible = true self.dialogVisible = true
self.isVideos = true; self.isVideos = true;
self.previewLoading = false self.previewLoading = false
self.$emit('previewLoadingClose')
return return
} }
@ -181,6 +183,7 @@ export default {
self.resultContentObj = data; self.resultContentObj = data;
self.isTxt = true; self.isTxt = true;
self.previewLoading = false; // 确保在数据处理完成后关闭加载状态 self.previewLoading = false; // 确保在数据处理完成后关闭加载状态
self.$emit('previewLoadingClose')
}) })
// self.previewLoading = false // self.previewLoading = false
}else if (row.fileName.endsWith(".docx")) { }else if (row.fileName.endsWith(".docx")) {
@ -191,6 +194,7 @@ export default {
self.docxData = res self.docxData = res
}) })
self.previewLoading = false self.previewLoading = false
self.$emit('previewLoadingClose')
}else if(row.fileName.endsWith(".doc") || row.fileName.endsWith(".pdf")){ }else if(row.fileName.endsWith(".doc") || row.fileName.endsWith(".pdf")){
self.isPdf = true self.isPdf = true
@ -199,10 +203,12 @@ export default {
self.pdfFileData = res self.pdfFileData = res
}) })
self.previewLoading = false self.previewLoading = false
self.$emit('previewLoadingClose')
} }
}).catch(err => { }).catch(err => {
console.info("err===============", err) console.info("err===============", err)
self.previewLoading = false self.previewLoading = false
self.$emit('previewLoadingClose')
}); });
}, },
//初始化预览组件 //初始化预览组件

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

@ -18,11 +18,11 @@
</el-form><!--el-form--> </el-form><!--el-form-->
</div><!--el-form-border 表单--> </div><!--el-form-border 表单-->
</el-tab-pane><!--el-tab-pane--> </el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="关联附件" name="second"> <el-tab-pane label="关联附件" name="second" v-loading="previewLoading" element-loading-text="加载中">
<el-table :data="attachmentList" style="width: 100%"> <el-table :data="attachmentList" style="width: 100%">
<el-table-column label="序号" width="60" type="index" align="center"></el-table-column> <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
<el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" /> <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
<!-- <el-table-column label="操作" align="center" width="180" v-if="!detailBoolean"> <el-table-column label="操作" align="center" width="100px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
@ -31,10 +31,10 @@
v-if="previewAuth(scope.row)" v-if="previewAuth(scope.row)"
@click="handlePreview(scope.row)" @click="handlePreview(scope.row)"
>预览</el-button> >预览</el-button>
<el-button type="text" icon="el-icon-download" v-if="isShowOperation(scope.row)" <!-- <el-button type="text" icon="el-icon-download" v-if="isShowOperation(scope.row) && !detailBoolean"
@click="handleDownload(scope.row)" v-loading="loadingDownload">下载</el-button> @click="handleDownload(scope.row)" v-loading="loadingDownload">下载</el-button>-->
</template> </template>
</el-table-column>--> </el-table-column>
</el-table><!--el-table--> </el-table><!--el-table-->
<!-- 分页组件 --> <!-- 分页组件 -->
<pagination <pagination
@ -101,6 +101,9 @@
</div> </div>
</div> </div>
<preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose" @previewLoadingClose="previewLoadingClose"></preview-util>
</div><!--el-form-border 表单--> </div><!--el-form-border 表单-->
</template> </template>
@ -113,10 +116,11 @@
import { listReplies, addReplies} from "@/api/tool/replies.js"; import { listReplies, addReplies} from "@/api/tool/replies.js";
import { listAttachment } from "@/api/attachment/attachment"; import { listAttachment } from "@/api/attachment/attachment";
import { addCount } from "@/api/tool/downloadCount"; import { addCount } from "@/api/tool/downloadCount";
import previewUtil from '@/components/PreviewUtil/previewUtil.vue'
export default { export default {
name: 'editDocument', name: 'editDocument',
components: {}, components: {previewUtil},
dicts:['doc_class','doc_source'], dicts:['doc_class','doc_source'],
props: { props: {
tooId: { tooId: {
@ -205,6 +209,7 @@
pageSize: 10, pageSize: 10,
}, },
total: 0, total: 0,
previewLoading: false,
} }
}, },
computed: { computed: {
@ -473,7 +478,9 @@
}, },
handlePreview(row){ handlePreview(row){
this.isPreviewDisable = true this.isPreviewDisable = true
this.previewLoading = true
this.$nextTick(() => { this.$nextTick(() => {
console.info("this.$refs.previewForm====999999=======", this.$refs.previewForm)
this.$refs.previewForm.frontModulePreview(row) this.$refs.previewForm.frontModulePreview(row)
}) })
}, },
@ -481,6 +488,10 @@
previewClose(){ previewClose(){
this.isPreviewDisable = false this.isPreviewDisable = false
}, },
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
/** /**
* 处理下载 * 处理下载
* **/ * **/

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

@ -2,7 +2,7 @@
<div class="fbox1"> <div class="fbox1">
<div class="fl"> <div class="fl">
<el-tabs v-model="detailActiveName"> <el-tabs v-model="detailActiveName">
<el-tab-pane label="附件信息" name="first"> <el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="加载中">
<el-table :data="attachmentList" style="width: 100%"> <el-table :data="attachmentList" style="width: 100%">
<el-table-column label="序号" width="60" align="center" type="index"></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" /> <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
@ -34,14 +34,14 @@
</el-tabs><!--el-tabs--> </el-tabs><!--el-tabs-->
</div><!--fl 左侧页签--> </div><!--fl 左侧页签-->
<preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose"></preview-util> <preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose" @previewLoadingClose="previewLoadingClose"></preview-util>
</div><!--fbox1 左右分栏--> </div><!--fbox1 左右分栏-->
</template> </template>
<script> <script>
import { listAttachment } from "@/api/attachment/attachment";
import previewUtil from '@/components/PreviewUtil/previewUtil.vue' import previewUtil from '@/components/PreviewUtil/previewUtil.vue'
import { listAttachment } from "@/api/attachment/attachment";
import { addCount } from "@/api/tool/downloadCount"; import { addCount } from "@/api/tool/downloadCount";
export default { export default {
@ -78,10 +78,12 @@
replyContent: [], replyContent: [],
isPreviewDisable: false, isPreviewDisable: false,
attFileType: "zip,rar,7z", attFileType: "zip,rar,7z",
total: 0 total: 0,
previewLoading: false,
} }
}, },
created(){ created(){
this.previewLoading = false
this.getAttachmentList() this.getAttachmentList()
}, },
methods:{ methods:{
@ -98,6 +100,7 @@
}, },
handlePreview(row){ handlePreview(row){
this.isPreviewDisable = true this.isPreviewDisable = true
this.previewLoading = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.previewForm.frontModulePreview(row) this.$refs.previewForm.frontModulePreview(row)
}) })
@ -106,6 +109,10 @@
previewClose(){ previewClose(){
this.isPreviewDisable = false this.isPreviewDisable = false
}, },
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
previewAuth(row){ previewAuth(row){
if(row.fileUrl == null || row.fileUrl == '' || row.fileUrl == undefined){ if(row.fileUrl == null || row.fileUrl == '' || row.fileUrl == undefined){
return false return false

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

@ -114,7 +114,7 @@
>上传文档</el-button> >上传文档</el-button>
<el-button type="primary" icon="el-icon-position" @click="handlePush" v-hasPermi="['document:push']">发布</el-button> <el-button type="primary" icon="el-icon-position" @click="handlePush" v-hasPermi="['document:push']">发布</el-button>
<el-button icon="el-icon-delete" @click="handleDelete" v-hasPermi="['document:batch:remove']">批量删除</el-button> <el-button icon="el-icon-delete" @click="handleDelete" v-hasPermi="['document:batch:remove']">批量删除</el-button>
<el-button icon="el-icon-download" @click="handleOpenExport()" v-hasPermi="['document:export']">导出</el-button> <el-button icon="el-icon-download" @click="handleOpenExport()" v-hasPermi="['document:export']">全量导出</el-button>
<el-button icon="el-icon-download" @click="handleOpenBatchExport()" v-hasPermi="['document:batch:export']">批量导出</el-button> <el-button icon="el-icon-download" @click="handleOpenBatchExport()" v-hasPermi="['document:batch:export']">批量导出</el-button>
</div><!--operate 操作按钮--> </div><!--operate 操作按钮-->
@ -153,7 +153,7 @@
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="180" fixed="right"> <el-table-column label="操作" align="center" width="160px" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-button <!-- <el-button
size="mini" size="mini"

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

@ -2,7 +2,7 @@
<div class="fbox1"> <div class="fbox1">
<div class="fl"> <div class="fl">
<el-tabs v-model="detailActiveName"> <el-tabs v-model="detailActiveName">
<el-tab-pane label="附件信息" name="first"> <el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="加载中">
<el-table :data="attachmentList" style="width: 100%"> <el-table :data="attachmentList" style="width: 100%">
<el-table-column label="序号" width="60" align="center" type="index"></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" /> <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
@ -35,7 +35,7 @@
</el-tabs><!--el-tabs--> </el-tabs><!--el-tabs-->
</div><!--fl 左侧页签--> </div><!--fl 左侧页签-->
<preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose"></preview-util> <preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose" @previewLoadingClose="previewLoadingClose"></preview-util>
</div><!--fbox1 左右分栏--> </div><!--fbox1 左右分栏-->
</template> </template>
@ -80,7 +80,8 @@
replyContent: [], replyContent: [],
isPreviewDisable: false, isPreviewDisable: false,
attFileType: "zip,rar,7z", attFileType: "zip,rar,7z",
total: 0 total: 0,
previewLoading:false,
} }
}, },
created(){ created(){
@ -108,6 +109,10 @@
previewClose(){ previewClose(){
this.isPreviewDisable = false this.isPreviewDisable = false
}, },
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
previewAuth(row){ previewAuth(row){
if(row.fileUrl == null || row.fileUrl == '' || row.fileUrl == undefined){ if(row.fileUrl == null || row.fileUrl == '' || row.fileUrl == undefined){
return false return false

16
src/views/tool/index.vue
View File

@ -90,7 +90,7 @@
@click="handleAdd" @click="handleAdd"
>工具发布</el-button> >工具发布</el-button>
<el-button icon="el-icon-delete" @click="handleDelete(selection)" v-hasPermi="['tool:batch:remove']">批量删除</el-button> <el-button icon="el-icon-delete" @click="handleDelete(selection)" v-hasPermi="['tool:batch:remove']">批量删除</el-button>
<el-button icon="el-icon-download" @click="handleOpenExport()" v-hasPermi="['tool:export']">导出</el-button> <el-button icon="el-icon-download" @click="handleOpenExport()" v-hasPermi="['tool:export']">全量导出</el-button>
<el-button icon="el-icon-download" @click="handleOpenBatchExport()" v-hasPermi="['tool:batch:export']">批量导出</el-button> <el-button icon="el-icon-download" @click="handleOpenBatchExport()" v-hasPermi="['tool:batch:export']">批量导出</el-button>
</div><!--operate 操作按钮--> </div><!--operate 操作按钮-->
<el-table v-loading="loading" :data="toolList" ref="tableRef" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="toolList" ref="tableRef" @selection-change="handleSelectionChange">
@ -155,12 +155,12 @@
label="操作" label="操作"
align="center" align="center"
fixed="right" fixed="right"
width="260px" width="180px"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<!-- && !scope.row.downloadStatus v-if="checkApplyUseBtn(scope.row)"--> <!-- && !scope.row.downloadStatus v-if="checkApplyUseBtn(scope.row)"-->
<el-button type="text" icon="el-icon-info" @click="applyUse(scope.row)">申请使用</el-button> <el-button type="text" icon="el-icon-info" @click="applyUse(scope.row)" v-if="checkApplyUseBtn(scope.row)">申请使用</el-button>
<el-button type="text" icon="el-icon-info" @click="handleDetail(scope.row)">详情</el-button> <el-button type="text" icon="el-icon-info" @click="handleDetail(scope.row)">详情</el-button>
<el-button type="text" icon="el-icon-download" v-if="scope.row.downloadStatus" @click="handleFileDownload(scope.row)">下载</el-button> <el-button type="text" icon="el-icon-download" v-if="scope.row.downloadStatus" @click="handleFileDownload(scope.row)">下载</el-button>
<el-dropdown size="mini" v-if="selectable(scope.row)" @command="(command) => handleCommand(command, scope.row)"> <el-dropdown size="mini" v-if="selectable(scope.row)" @command="(command) => handleCommand(command, scope.row)">
@ -516,12 +516,16 @@ export default {
}, },
checkApplyUseBtn(row){ checkApplyUseBtn(row){
let result = false; let result = false;
if(row.recordStatus=='done' && !row.downloadStatus){ //有下载权限就不需要了
if(row.downloadStatus){
return false;
}
if(row.recordStatus=='done'){
result = true; result = true;
} }
if(row.isHasApplyUse){ /* if(row.isHasApplyUse){
result = false; result = false;
} } */
return result; return result;
}, },
/**=============================申请使用End================================*/ /**=============================申请使用End================================*/

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

@ -29,7 +29,7 @@
</el-form><!--el-form--> </el-form><!--el-form-->
</div><!--el-form-border 表单--> </div><!--el-form-border 表单-->
</el-tab-pane><!--el-tab-pane--> </el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="关联附件" name="second"> <el-tab-pane label="关联附件" name="second" v-loading="previewLoading" element-loading-text="加载中">
<el-table :data="attachmentList" style="width: 100%"> <el-table :data="attachmentList" style="width: 100%">
<el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" /> <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
<!-- <el-table-column label="类别" prop="docType" :show-overflow-tooltip="true" width="80" > <!-- <el-table-column label="类别" prop="docType" :show-overflow-tooltip="true" width="80" >
@ -49,7 +49,7 @@
<span>{{ parseTime(scope.row.createDate) }}</span> <span>{{ parseTime(scope.row.createDate) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="180" v-if="detailData.downloadStatus"> <el-table-column label="操作" align="center" width="100px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
@ -58,7 +58,7 @@
v-if="previewAuth(scope.row)" v-if="previewAuth(scope.row)"
@click="handlePreview(scope.row)" @click="handlePreview(scope.row)"
>预览</el-button> >预览</el-button>
<el-button type="text" icon="el-icon-download" v-if="isDownload" @click="handleDownload(scope.row)" v-loading="loadingDownload">下载</el-button> <!-- <e-button type="text" icon="el-icon-download" v-if="isDownload && detailData.downloadStatus" @click="handleDownload(scope.row)" v-loading="loadingDownload">下载</e-button>-->
</template> </template>
</el-table-column> </el-table-column>
</el-table><!--el-table--> </el-table><!--el-table-->
@ -128,10 +128,10 @@
<i-frame :src="previewUrl" v-if="viewDialogOpen"/> <i-frame :src="previewUrl" v-if="viewDialogOpen"/>
</el-dialog> </el-dialog>
<preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose"></preview-util> <preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose" @previewLoadingClose="previewLoadingClose"></preview-util>
<!-- 上传 --> <!-- 上传 -->
<AddDoc :show.sync="open" :toolId="detailData.toolId" @callback="getAttachmentList"/> <!-- <AddDoc :show.sync="open" :toolId="detailData.toolId" @callback="getAttachmentList"/>-->
</div><!--fbox1 左右分栏--> </div><!--fbox1 左右分栏-->
</template> </template>
@ -140,22 +140,14 @@
import { listDiscussions, addDiscussions } from "@/api/tool/discussions.js"; import { listDiscussions, addDiscussions } from "@/api/tool/discussions.js";
import { listReplies, addReplies} from "@/api/tool/replies.js"; import { listReplies, addReplies} from "@/api/tool/replies.js";
import { getTool } from "@/api/tool/tool.js"; import { getTool } from "@/api/tool/tool.js";
import AddDoc from './AddDoc'
import editDocument from "../document/editDocument";
import { Base64 } from 'js-base64';
import iFrame from "@/components/iFrame/index" import iFrame from "@/components/iFrame/index"
import { addCount } from "@/api/tool/downloadCount"; import { addCount } from "@/api/tool/downloadCount";
import { listAttachment } from "@/api/attachment/attachment"; import { listAttachment } from "@/api/attachment/attachment";
import axios from 'axios'
import {
getToken
} from "@/utils/auth";
import previewUtil from '@/components/PreviewUtil/previewUtil.vue' import previewUtil from '@/components/PreviewUtil/previewUtil.vue'
export default { export default {
name: 'toolDetail', name: 'toolDetail',
components: { editDocument, AddDoc, iFrame, previewUtil }, components: { iFrame, previewUtil },
dicts:['sys_normal_disable','tool_type','tool_source','tool_status','doc_class','doc_source'], dicts:['sys_normal_disable','tool_type','tool_source','tool_status','doc_class','doc_source'],
props: { props: {
toolDetail: { toolDetail: {
@ -260,6 +252,10 @@
previewClose(){ previewClose(){
this.isPreviewDisable = false this.isPreviewDisable = false
}, },
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const docIds = row.docId || this.ids; const docIds = row.docId || this.ids;