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{
display: block;
padding: 16px;
width: 310px;
width: 250px;
height: 700px;
overflow: auto;
}

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

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

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

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

15
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">
<el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="加载中">
<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" />
@ -34,14 +34,14 @@
</el-tabs><!--el-tabs-->
</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 左右分栏-->
</template>
<script>
import { listAttachment } from "@/api/attachment/attachment";
import previewUtil from '@/components/PreviewUtil/previewUtil.vue'
import { listAttachment } from "@/api/attachment/attachment";
import { addCount } from "@/api/tool/downloadCount";
export default {
@ -78,10 +78,12 @@
replyContent: [],
isPreviewDisable: false,
attFileType: "zip,rar,7z",
total: 0
total: 0,
previewLoading: false,
}
},
created(){
this.previewLoading = false
this.getAttachmentList()
},
methods:{
@ -98,6 +100,7 @@
},
handlePreview(row){
this.isPreviewDisable = true
this.previewLoading = true
this.$nextTick(() => {
this.$refs.previewForm.frontModulePreview(row)
})
@ -106,6 +109,10 @@
previewClose(){
this.isPreviewDisable = false
},
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
previewAuth(row){
if(row.fileUrl == null || row.fileUrl == '' || row.fileUrl == undefined){
return false

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

@ -114,7 +114,7 @@
>上传文档</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-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>
</div><!--operate 操作按钮-->
@ -153,7 +153,7 @@
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</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">
<!-- <el-button
size="mini"

11
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">
<el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="加载中">
<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" />
@ -35,7 +35,7 @@
</el-tabs><!--el-tabs-->
</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 左右分栏-->
</template>
@ -80,7 +80,8 @@
replyContent: [],
isPreviewDisable: false,
attFileType: "zip,rar,7z",
total: 0
total: 0,
previewLoading:false,
}
},
created(){
@ -108,6 +109,10 @@
previewClose(){
this.isPreviewDisable = false
},
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
previewAuth(row){
if(row.fileUrl == null || row.fileUrl == '' || row.fileUrl == undefined){
return false

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

@ -90,7 +90,7 @@
@click="handleAdd"
>工具发布</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>
</div><!--operate 操作按钮-->
<el-table v-loading="loading" :data="toolList" ref="tableRef" @selection-change="handleSelectionChange">
@ -155,12 +155,12 @@
label="操作"
align="center"
fixed="right"
width="260px"
width="180px"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<!-- && !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-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)">
@ -516,12 +516,16 @@ export default {
},
checkApplyUseBtn(row){
let result = false;
if(row.recordStatus=='done' && !row.downloadStatus){
//有下载权限就不需要了
if(row.downloadStatus){
return false;
}
if(row.recordStatus=='done'){
result = true;
}
if(row.isHasApplyUse){
/* if(row.isHasApplyUse){
result = false;
}
} */
return result;
},
/**=============================申请使用End================================*/

24
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">
<el-tab-pane label="关联附件" name="second" v-loading="previewLoading" element-loading-text="加载中">
<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" >
@ -49,7 +49,7 @@
<span>{{ parseTime(scope.row.createDate) }}</span>
</template>
</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">
<el-button
size="mini"
@ -58,7 +58,7 @@
v-if="previewAuth(scope.row)"
@click="handlePreview(scope.row)"
>预览</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>
</el-table-column>
</el-table><!--el-table-->
@ -128,10 +128,10 @@
<i-frame :src="previewUrl" v-if="viewDialogOpen"/>
</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 左右分栏-->
</template>
@ -140,22 +140,14 @@
import { listDiscussions, addDiscussions } from "@/api/tool/discussions.js";
import { listReplies, addReplies} from "@/api/tool/replies.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 { addCount } from "@/api/tool/downloadCount";
import { listAttachment } from "@/api/attachment/attachment";
import axios from 'axios'
import {
getToken
} from "@/utils/auth";
import previewUtil from '@/components/PreviewUtil/previewUtil.vue'
export default {
name: 'toolDetail',
components: { editDocument, AddDoc, iFrame, previewUtil },
components: { iFrame, previewUtil },
dicts:['sys_normal_disable','tool_type','tool_source','tool_status','doc_class','doc_source'],
props: {
toolDetail: {
@ -260,6 +252,10 @@
previewClose(){
this.isPreviewDisable = false
},
/** 关闭预览遮罩 **/
previewLoadingClose(){
this.previewLoading = false
},
/** 删除按钮操作 */
handleDelete(row) {
const docIds = row.docId || this.ids;