Files
faw-report-library-web/src/views/Report/ReportManager.vue
T

1444 lines
53 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="content-height report-manager">
<div class="title">
<span>报告管理</span>
</div>
<div class="search">
<el-row>
<el-col :span="6">
<div class="tag-item">
<label class="tag-title">报告年份</label>
<el-select v-model="q.year" multiple collapse-tags placeholder="请选择报告年份">
<template v-for="item in yearList">
<el-option :label="item" :value="item" :key="item"></el-option>
</template>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="tag-item">
<label class="tag-title">报告名称:</label>
<el-input v-model="q.name" placeholder="请输入报告名称"></el-input>
</div>
</el-col>
<el-col :span="6" :offset="6" align="right" class="tag-btns">
<el-button type="primary" @click="search">查询</el-button>
<el-button type="default" @click="reset">重置</el-button>
</el-col>
</el-row>
<el-row >
<div class="operate-box">
<el-button @click="openLog">操作日志</el-button>
<el-button v-btn-permission="'9S7NYLJ9UF'" @click="openTags">标签维护</el-button>
<el-button @click="openReportAdd">报告上传</el-button>
</div>
</el-row>
</div>
<div class="table">
<el-row>
<el-col :span="4" class="treeList">
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input>
<div class="lef-tree scroll-myself" >
<el-tree
class="filter-tree"
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
@check="getHalfCheckedNode"
:key="treeKey"
>
<template slot-scope="{node}">
<!-- <span v-if="node.label.length <= 10">{{ // node.label }}</span>-->
<!-- <el-tooltip v-else :content="node.label" placement="top">-->
<div :title="node.label" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;width: 150px">
{{ node.label }}
</div>
<!-- </el-tooltip>-->
</template>
</el-tree>
</div>
</el-col>
<el-col :span="20" style="padding-left: 15px">
<div class="table">
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
</template>
</vxe-column>
<!-- <vxe-column show-overflow show-header-overflow field="labelOneName"
:title="tagsForm.tags01.name"></vxe-column> -->
<vxe-column show-overflow show-header-overflow field="name" title="报告名称"></vxe-column>
<!-- <vxe-column show-overflow show-header-overflow field="labelTwoName"
:title="tagsForm.tags02.name"></vxe-column>
<vxe-column show-overflow show-header-overflow field="labelThreeName"
:title="tagsForm.tags03.name"></vxe-column> -->
<vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
<vxe-column show-overflow show-header-overflow field="confidentialLevel" title="报告涉密等级"></vxe-column>
<vxe-column show-overflow show-header-overflow field="privacyLevel" title="报告隐私等级"></vxe-column>
<vxe-column show-overflow show-header-overflow field="createDate" title="报告上传时间"></vxe-column>
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button type="text" @click="openReportModify('modify', row)">编辑</el-button>
<el-button type="text" class="del-btn" @click="reportDelete(row)">删除</el-button>
<el-button type="text" @click="previewRow(row)">预览</el-button>
<el-button type="text" @click="downloadRow(row)">下载</el-button>
</template>
</vxe-column>
</vxe-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
:page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="total" />
</div>
</el-col>
</el-row>
</div>
<!--操作日志-->
<el-dialog title="操作日志" :visible.sync="dialogLog" width="1100px" :close-on-click-modal="false"
:close-on-press-escape="false" modal-append-to-body append-to-body>
<div class="dialog-log">
<div class="search">
<el-row>
<el-col :span="20">
<div class="search-box-left">
<label>操作类型:</label>
<el-select v-model="doNames" multiple collapse-tags placeholder="请选择操作类型"
@change="handleTyleChange">
<el-option label="新增" value="新增"></el-option>
<el-option label="修改" value="修改"></el-option>
<el-option label="删除" value="删除"></el-option>
<el-option label="预览" value="预览"></el-option>
<el-option label="下载" value="下载"></el-option>
</el-select>
<label>报告名称:</label>
<el-input v-model="qLog.reportName" placeholder="请输入报告名称"></el-input>
<label>操作时间:</label>
<el-date-picker v-model="qLogDateRange" type="daterange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd"
@change="handleLogDate">
</el-date-picker>
</div>
</el-col>
<el-col :span="4" align="right">
<div class="search-box-right">
<el-button type="primary" @click="searchLog">查询</el-button>
<el-button @click="logReset">重置</el-button>
</div>
</el-col>
</el-row>
</div>
<div class="table">
<vxe-table :data="logTableData" :empty-render="{ name: 'NotData' }" align="center" border stripe
height="440">
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
<template #default="{ row, rowIndex }">
{{ rowIndex + (qLog.pageNo - 1) * qLog.pageSize + 1 }}
</template>
</vxe-column>
<vxe-column show-overflow show-header-overflow field="description" title="操作类型"></vxe-column>
<vxe-column show-overflow show-header-overflow field="reportName" title="报告名称"></vxe-column>
<vxe-column show-overflow show-header-overflow field="account" title="用户名"></vxe-column>
<vxe-column show-overflow show-header-overflow field="operateTime" title="操作时间"></vxe-column>
</vxe-table>
<el-pagination @size-change="handleLogSizeChange" @current-change="handleLogCurrentChange"
:current-page="qLog.pageNo" :page-sizes="[5, 10, 20]" :page-size="qLog.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="qLogTotal" />
</div>
</div>
</el-dialog>
<!--标签维护-->
<el-dialog title="标签维护" :visible.sync="dialogTags" width="30%" :close-on-click-modal="false" class="dialog-tags"
:close-on-press-escape="false" modal-append-to-body append-to-body :before-close="handleTagsClose">
<div class="head">
<el-input placeholder="输入关键字进行过滤" v-model="filterText2">
</el-input>
<el-button type="primary" class="btn" @click="add">新增</el-button>
</div>
<el-scrollbar wrap-class="scroll-wrap" view-class="scroll-view">
<div class="tree">
<el-tree class="filter-tree" :data="treeData" default-expand-all :filter-node-method="filterNode" ref="tree2">
<span class="custom-tree-node" slot-scope="{ node,data}">
<!-- <span v-if="node.label.length <= 10">{{ node.label }}</span>-->
<!-- <el-tooltip v-else :content="node.label" placement="top">-->
<span :title="node.label" class="textover" >{{ node.label }}</span>
<!-- </el-tooltip>-->
<span class="btnover">
<!-- <el-button type="text" @click.stop="add">新建</el-button> -->
<el-button type="text" v-if="data.parentId != '0'"
@click.stop="update(node, data)">编辑</el-button>
<el-button type="text" v-if="data.parentId != '0'" class="deleRed"
@click.stop="deleteNode(node, data)">删除</el-button>
</span>
</span>
</el-tree>
</div>
</el-scrollbar>
</el-dialog>
<labelModalVue ref="labelModalVue" @updateList="updateList"></labelModalVue>
<!--报告上传-->
<el-dialog :title="mode === 'modify' ? '报告编辑' : '报告上传'" :visible.sync="dialogReport" width="750px"
:close-on-click-modal="false" :close-on-press-escape="false" modal-append-to-body append-to-body>
<div class="report-upload">
<el-form :model="reportF" label-width="186px" :disabled="mode === 'view'" class="showLimit">
<el-form-item label="报告名称:" required>
<el-input v-model="reportF.name" placeholder="请填写" maxlength="100" show-word-limit></el-input>
</el-form-item>
<el-form-item label="关键词:">
<vue-tags-input placeholder="请输入关键词" v-model="reportF.tags" :tags="tags"
:avoid-adding-duplicates="false" @tags-changed="newTags =>{
if(newTags[newTags.length - 1].text.length <= 20){
if(tags.length < 10){
tags = newTags
}else{
this.$message({type:'error',message:'关键词数量不能超过10个'})
tags = newTags.slice(0,-1)
}
}
// else if(reportF.tags.indexOf(newTags)){
// this.$message({type:'error',message:'关键词数量不能超过10个'})
// }
else{
this.$message({type:'error',message:'单个关键词不能超过20个字'})
tags = newTags.slice(0,-1)
}
}" />
</el-form-item>
<el-form-item label="内容摘要:">
<el-input v-model="reportF.mainContent" placeholder="请填写" type="textarea" maxlength="500"
show-word-limit></el-input>
</el-form-item>
<el-form-item label="报告所属部门:">
<el-input v-model="reportF.department" placeholder="请填写" maxlength="100" show-word-limit></el-input>
</el-form-item>
<el-form-item label="报告涉密等级:">
<el-select v-model="reportF.confidentialLevel" placeholder="请选择报告涉密等级">
<el-option v-for="item in confidentialLevelOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="报告隐私等级:">
<el-select v-model="reportF.privacyLevel" placeholder="请选择报告隐私等级">
<el-option v-for="item in privacyLevelOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上传报告:" required>
<el-row type="flex">
<el-col :span="15">
<el-input v-model="reportF.fileName" disabled placeholder="请上传报告"></el-input>
</el-col>
<el-col :span="5" align="center">
<el-upload action="#" :http-request="(params) => uploadFile(params)" :show-file-list="false"
:before-upload="beforeUploadFile">
<el-button>选择文件</el-button>
</el-upload>
</el-col>
<el-col :span="4" align="right">
<el-button @click="resetUploadFile">重置</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="报告年份:" required>
<el-date-picker v-model="reportF.year" type="year" value-format="yyyy" placeholder="请选择"
prefix-icon="null" :picker-options="pickerOptions" />
</el-form-item>
<el-form-item label="标签:" required>
<el-cascader width="100%" v-model="reportF.labelList" :options="cascaderOptions" filterable
:props="{ checkStrictly: true }" clearable>
<template slot-scope="{ node, data }">
<span :title="data.label">{{ data.label }}</span>
</template>
</el-cascader>
</el-form-item>
<el-form-item label="权限设置:" required>
<el-select v-model="reportF.reportUserIdList" class="icon-auth" multiple collapse-tags
@change="changeSelect" @visible-change="changeSelect" placeholder="请选择">
<el-checkbox class="check-all" v-model="checked" @change="selectAll">全选</el-checkbox>
<template v-for="item in userList">
<el-option :label="item.USNAME" :value="item.USID" :key="item.USID"></el-option>
</template>
</el-select>
</el-form-item>
</el-form>
<div class="done">
<el-button v-if="mode !== 'view'" type="primary" @click="reportAdd">确定</el-button>
</div>
</div>
</el-dialog>
<!--预览-->
<el-dialog title="预览" :visible.sync="dialogPreview" width="1000px" :close-on-click-modal="false"
:close-on-press-escape="false" modal-append-to-body append-to-body :fullscreen="fullscreen">
<div slot="title" class="dialog-title">
<span>预览</span>
<img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt=""
@click="fullscreen = !fullscreen">
<img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen">
</div>
<div class="preview-dialog-body" :class="{ 'active': fullscreen }">
<!-- <img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !fullscreen">
<img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen"> -->
<!-- 这里用v-if是让水印更新 -->
<el-scrollbar v-if="dialogPreview" v-watermark="{ text: watermarkText }">
<div class="preview-content" v-html="content"></div>
</el-scrollbar>
</div>
</el-dialog>
</div>
</template>
<script>
import { fileType } from '@/utils/fileType'
import { downloadFile } from "../../utils/downloadFile";
import { formatDate } from '@/utils/date'
import VueTagsInput from '@johmun/vue-tags-input';
import labelModalVue from './reportManager/labelModal.vue';
export default {
name: "ReportManager",
components: {
labelModalVue,
VueTagsInput
},
data() {
return {
treeKey:'',
watermarkText: '', // 水印
fullscreen: false,
/* =============================================== 操作日志 =============================================== */
dialogLog: false, // 操作日志
qLog: {
doName: '', // 操作类型
endDate: '', // 结束时间
pageNo: 1,
pageSize: 10,
reportName: '', // 报告名称
startDate: '', // 开始时间
},
qLogTotal: 0,
qLogDateRange: '', // 开始结束时间
logTableData: [],
doNames: [],
/* =============================================== 标签维护 =============================================== */
dialogTags: false, // 标签维护
treeData: [
],
filterText:'',
filterText2:'',
checkedKeys:[],
privacyLevelOptions:[
{
value:'外部公开',
label:'外部公开'
},
{
value:'普通商密',
label:'普通商密'
},
{
value:'核心商密',
label:'核心商密'
},
{
value:'内部公开',
label:'内部公开'
},
{
value:'用户信息',
label:'用户信息'
},
{
value:'敏感信息',
label:'敏感信息'
},
],
confidentialLevelOptions:[
{
value:'一般隐私',
label:'一般隐私'
}
],
tagsForm: {
tags01: {
name: '',
parentId: '0',
type: '1',
id: '',
childList: [
// {name: '无', type: '1', id: '', parentId: ''},
]
},
tags02: {
name: '',
parentId: '0',
type: '2',
id: '',
childList: [
// {name: '无', type: '2', id: '', parentId: ''},
]
},
tags03: {
name: '',
parentId: '0',
type: '3',
id: '',
childList: [
// {name: '无', type: '3', id: '', parentId: ''},
]
},
},
/* =============================================== 报告上传 =============================================== */
dialogReport: false, // 报告上传
reportF: {
name: '', // 报告名称
keyContent: '', // 关键词
mainContent: '', // 内容摘要
department: '', // 报告所属部门
fileName: '', // 文件上传
fileId: '',
year: '', // 报告年份
// labelOneId: '', // 标签1
// labelOneName: '', // 标签1
// labelTwoId: '', // 标签2
// labelTwoName: '', // 标签2
// labelThreeId: '', // 标签3
// labelThreeName: '', // 标签3
reportUserIdList: [], // 权限
tag: []
},
tag: '',
tags: [''],
labelOne: {},
labelTwo: {},
labelThree: {},
mode: '',
userList: [],
cascaderOptions: [
],
pickerOptions: {
disabledDate(time) {
return time.getFullYear() > new Date().getFullYear() + 1 || time.getFullYear() < new Date().getFullYear() - 10;
},
},
/* =============================================== 列表展示 =============================================== */
q: {
keyContent: '',
year: [],
name:'',
pageNo: 1,
pageSize: 10,
},
total: 0,
tableData: [],
yearList: [],
dialogPreview: false,
content: '',
/* 权限全选 */
checked: false,
mulSelecteds: [], // 已选中选项
validation: [{
classes: 'min-length',
rule: tag => tag.text.length < 8,
}, {
classes: 'no-numbers',
rule: /^([^0-9]*)$/,
}, {
classes: 'avoid-item',
rule: /^(?!Cannot).*$/,
disableAdd: true,
}, {
classes: 'no-braces',
rule: ({ text }) => text.indexOf('{') !== -1 || text.indexOf('}') !== -1
}]
}
},
//监听标签搜索框
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
filterText2(val) {
this.$refs.tree2.filter(val);
}
},
methods: {
setCheckedNodes(node, checked) {
node.checked = checked;
if (node.children && node.children.length > 0) {
for (let child of node.children) {
this.setCheckedNodes(child, checked);
}
}
},
init() {
this.getTreeLabel()
// this.labelList();
this.reset();
this.reportDateList();
},
getHalfCheckedNode(node,data){
this.checkedKeys=data.checkedKeys
this.reportList()
},
updateList(){
this.filterText=''
this.$api.report.labelList().then(res => {
this.treeData=res.data
this.cascaderOptions=res.data
})
this.$forceUpdate()
},
getTreeLabel(){
this.$api.report.labelList().then(res => {
this.treeData=res.data
this.cascaderOptions=this.getTreeData(res.data)
})
},
//用递归方式去除children
getTreeData(data) {
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
// children若为空数组,则将children设为undefined
data[i].children = undefined;
} else {
// children若不为空数组,则继续 递归调用 本方法
this.getTreeData(data[i].children);
}
}
return data;
},
//标签搜索
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
add() {
this.$refs.labelModalVue.open()
},
update(node, data) {
this.$refs.labelModalVue.open(node, data)
},
deleteNode(node, data) {
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(_ => {
this.$api.report.labelDeleteId(data).then(res=>{
if(res.ok){
this.filterText=''
this.$message({
type:'success',
message:'删除成功'
})
this.getTreeLabel()
}
})
done();
})
.catch(_ => { });
},
/* 权限全选 */
selectAll() {
this.reportF.reportUserIdList = [];
if (this.checked) {
this.userList.forEach((item) => { this.reportF.reportUserIdList.push(item.USID) });
} else {
this.reportF.reportUserIdList = [];
}
// this.$emit('update:updateMultipleSelect',this.reportF.reportUserIdList);
},
changeSelect(val) {
this.checked = (val.length || this.reportF.reportUserIdList.length) === this.userList.length;
// this.$emit('update:updateMultipleSelect',this.reportF.reportUserIdList);
},
/* =============================================== 操作日志 =============================================== */
// 操作日志
openLog() {
this.dialogLog = true;
this.logReset();
},
// 日志重置搜索
logReset() {
this.qLogDateRange = '';
this.qLog = {
doName: '', // 操作类型
endDate: '', // 结束时间
pageNo: 1,
pageSize: 10,
reportName: '', // 报告名称
startDate: '', // 开始时间
};
this.qLogTotal = 0;
this.qLogDateRange = ''; // 开始结束时间
this.logTableData = [];
this.doNames = [];
this.reportLogList();
},
// 搜索
searchLog() {
this.qLog.pageNo = 1;
this.reportLogList();
},
// 报告列表
reportLogList() {
this.$api.report.reportLogList(this.qLog)
.then(({ data }) => {
this.logTableData = data.records;
this.qLogTotal = data.total;
this.qLog.pageNo = data.current;
this.qLog.pageSize = data.size;
if (!data.records.length && this.qLog.pageNo !== 1) {
this.qLog.pageNo = 1;
this.reportLogList();
}
})
},
// 单页数据量
handleLogSizeChange(val) {
this.qLog.pageSize = val;
this.qLog.pageNo = 1;
this.reportLogList();
},
// 第几页
handleLogCurrentChange(val) {
this.qLog.pageNo = val;
this.reportLogList();
},
// 日期
handleLogDate(val) {
if (val) {
this.qLog.startDate = val[0];
this.qLog.endDate = val[1];
} else {
this.qLog.startDate = '';
this.qLog.endDate = '';
}
},
handleTyleChange(val) {
this.qLog.doName = val.join(',');
},
/* =============================================== 标签维护 =============================================== */
// 标签维护 新增
// addTag(index, type) {
// if (this.tagsForm['tags0' + type].childList.length >= 20) {
// return this.$message.warning("最多添加20个标签");
// }
// let itemData = {name: '', id: "", parentId: this.tagsForm['tags0' + type].id, type: String(type)};
// this.tagsForm['tags0' + type].childList.splice(index + 1, 0, itemData);
// },
// 标签维护 删除
delTag(index, type) {
let { id, status } = this.tagsForm['tags0' + type].childList[index];
if (status === '1') {
this.$confirm('此标签已应用于报告, 是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (id) {
this.$api.report.labelDeleteId({ id }).then(_ => {
this.$message.success('操作成功');
this.labelList();
})
} else {
this.tagsForm['tags0' + type].childList.splice(index, 1);
this.$message.success('操作成功');
}
})
} else {
if (id) {
this.$api.report.labelDeleteId({ id }).then(_ => {
this.$message.success('操作成功');
this.labelList();
})
} else {
this.tagsForm['tags0' + type].childList.splice(index, 1);
this.$message.success('操作成功');
}
}
},
// 上移
upTag(item, index, type) {
this.$api.report.labelMove({
id: item.id,
moveType: 'up',
type: String(type)
}).then(_ => {
this.labelList();
})
},
// 下移
downTag(item, index, type) {
this.$api.report.labelMove({
id: item.id,
moveType: 'down',
type: String(type)
}).then(_ => {
this.labelList();
})
},
// 标签维护
openTags() {
this.dialogTags = true;
this.filterText2=''
this.labelList();
},
// 单个标签保存
handleSaveTag(val, item, type) {
if (val === '') {
this.$message.warning('标签名称不能为空');
this.labelList();
return;
}
if (val === '-') {
this.$message.warning('标签名称不能为-');
this.labelList();
return;
}
if (this.tagsForm['tags0' + type].childList.filter(item => item.name === val).length > 1) {
this.$message.warning('标签名称不能重复');
this.labelList();
return;
}
let params = { name: val, parentId: this.tagsForm['tags0' + type].id, type: String(type), id: item.id || '' }
if (item.status === '1') {
this.$confirm('此标签已应用于报告, 是否编辑?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$api.report.labelAdd(params).then(_ => {
this.$message.success('操作成功');
this.labelList();
}).catch(_ => {
this.labelList();
})
}).catch(_ => {
this.labelList();
})
} else {
this.$api.report.labelAdd(params).then(_ => {
this.$message.success('操作成功');
this.labelList();
}).catch(_ => {
this.labelList();
})
}
},
// 单个顶级标签保存
handleSaveTopTag(val, type) {
if (val === '') {
this.$message.warning('标签名称不能为空');
this.labelList();
return;
}
if (val === '-') {
this.$message.warning('标签名称不能为-');
this.labelList();
return;
}
if (type === 1 && (val === this.tagsForm.tags02.name || val === this.tagsForm.tags03.name)) {
this.$message.warning('标签名称不能重复');
this.labelList();
return;
}
if (type === 2 && (val === this.tagsForm.tags01.name || val === this.tagsForm.tags03.name)) {
this.$message.warning('标签名称不能重复');
this.labelList();
return;
}
if (type === 3 && (val === this.tagsForm.tags01.name || val === this.tagsForm.tags02.name)) {
this.$message.warning('标签名称不能重复');
this.labelList();
return;
}
let params = { name: val, id: this.tagsForm['tags0' + type].id, parentId: '0', type: String(type) };
this.$api.report.labelAdd(params).then(_ => {
this.$message.success('操作成功');
this.labelList();
}).catch(_ => {
this.labelList();
})
},
handleTagsClose() {
this.dialogTags = false;
this.labelList();
this.reset();
},
/* =============================================== 报告上传 =============================================== */
// 打开报告上传
openReportAdd() {
// this.mode = 'add';
// this.reportF = {
// name: '', // 报告名称
// mainContent: '', // 内容摘要
// department: '', // 报告所属部门
// fileName: '', // 文件上传
// fileId: '',
// year: '', // 报告年份
// privacyLevel: undefined, //报告隐私等级
// reportUserIdList: [], // 权限
// confidentialLevel:undefined, //涉密等级
// labelList:[] //标签
// };
// this.tags = [] // 关键词
// this.dialogReport = true;
this.$router.push({
path:'/reportprocess/launch',
query:{
id:this.$route.query.id,
}
})
},
// 必填项
checkReportF() {
if (!this.reportF.name) {
return this.$message.warning('请检查报告名称') && false;
}
if (!this.reportF.fileId || !this.reportF.fileName) {
return this.$message.warning('请检查上传文件') && false;
}
if (!this.reportF.year) {
return this.$message.warning('请检查报告年份') && false;
}
if (this.reportF.labelList.length < 1) {
return this.$message.warning('请检查标签') && false;
}
// if (!this.reportF.labelOneId || !this.reportF.labelOneName || this.reportF.labelOneName === '-' ) {
// return this.$message.warning(`请检查${this.tagsForm.tags01.name}`) && false;
// }
// if (!this.reportF.labelTwoId || !this.reportF.labelTwoName || this.reportF.labelTwoName === '-') {
// return this.$message.warning(`请检查${this.tagsForm.tags02.name}`) && false;
// }
// if (!this.reportF.labelThreeId || !this.reportF.labelThreeName || this.reportF.labelThreeName === '-') {
// return this.$message.warning(`请检查${this.tagsForm.tags03.name}`) && false;
// }
if (!this.reportF.reportUserIdList || !this.reportF.reportUserIdList.length) {
return this.$message.warning('请检查权限') && false;
}
return true;
},
// 新增或编辑报告
reportAdd() {
if (!this.checkReportF()) return;
this.reportF.keyContent = JSON.stringify(this.tags)
delete this.reportF.tags
this.$api.report.reportAdd({ ...this.reportF}).then(_ => {
this.$message.success('操作成功');
this.dialogReport = false;
this.reset();
})
},
// 上传文件
uploadFile(params) {
let fd = new FormData();
fd.append('file', params.file);
this.$api.report.reportUploadFile(fd).then(({ data }) => {
this.reportF.fileName = data.name;
this.reportF.fileId = data.key;
})
},
// 上传文件前
beforeUploadFile(file) {
let realFileType = file.name.split('.')[file.name.split('.').length - 1];
const isType = (
file.type === fileType.pdf || file.type === fileType.xls || file.type === fileType.xlsx || file.type === fileType.doc || file.type === fileType.docx || file.type === fileType.ppt || file.type === fileType.pptx
|| realFileType === 'pdf' || realFileType === 'xls' || realFileType === 'xlsx' || realFileType === 'doc' || realFileType === 'docx' || realFileType === 'ppt' || realFileType === 'pptx'
);
const isSize = file.size / 1024 / 1024 < 200;
if (!isType) {
this.$message.error('仅能上传 pdfxlsxlsxdocdocxpptpptx 格式文件');
}
if (!isSize) {
this.$message.error('您最大可上传200M文件');
}
return isType && isSize;
},
// 重置
resetUploadFile() {
this.reportF.fileId = '';
this.reportF.fileName = '';
},
// 打开报告上传
openReportModify(mode, row) {
if( +row.isAct == 0){
this.$message.warning("当前选择的"+row.name+"已经在流程中")
return
}
this.$router.push({
path:'/reportprocess/launch',
query:{
id:this.$route.query.id,
ids:row.id
}
})
},
// 获取所有用户
sysUserList() {
this.$api.user.sysUserList({ pageNo: 1, pageSize: 999999 }).then(({ data }) => {
this.userList = data.records;
})
},
/* =============================================== 列表展示 =============================================== */
// 重置
reset() {
this.q = {
keyContent: '',
year: [],
name:'',
pageNo: 1,
pageSize: 10,
};
this.total = 0;
this.tableData = [];
this.reportList();
this.reportDateList();
},
// 报告删除
reportDelete(row) {
if(+row.isAct == 0){
this.$message.warning("当前选择的"+row.name+"已经在流程中")
return
}
this.$confirm('此操作将删除所选数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$api.report.reportDelete({ ids:row.id }).then(_ => {
this.$message.success('操作成功');
this.reportList();
this.reportDateList();
})
})
},
search() {
this.q.pageNo = 1;
this.reportList();
},
// 列表
reportList() {
this.$api.report.reportListManager({...this.q,labelId:this.checkedKeys}).then(({ data }) => {
this.tableData = data.records;
this.total = data.total;
this.q.pageNo = data.current;
this.q.pageSize = data.size;
if (!data.records.length && this.q.pageNo !== 1) {
this.q.pageNo = 1;
this.reportList();
}
}).catch(err=>{
this.tableData =[]
})
},
// 日期列表
reportDateList() {
this.$api.report.reportDateList().then(({ data }) => {
this.yearList = data.list;
})
},
// 单页数据量
handleSizeChange(val) {
this.q.pageSize = val;
this.q.pageNo = 1;
this.reportList();
},
// 第几页
handleCurrentChange(val) {
this.q.pageNo = val;
this.reportList();
},
// 预览
previewRow(row) {
// this.fullscreen = false;
// // 更新预览水印的时间戳
// this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`;
// this.$api.report.reportGetReportHtmlId({ id: row.id }).then(({ data }) => {
// this.content = data.content;
// this.dialogPreview = true;
// })
window.open('/report/detail?id='+this.$route.query.id+'&reportId='+row.id)
// this.$router.push({path: '/report/detail', query: {id: this.$route.query.id, reportId: row.id}})
this.reportDateList();
},
// 下载
downloadRow(row) {
// this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
this.$api.report.reportDownload({ fileId: row.fileId,repostId:row.id }).then(res => {
downloadFile(res);
})
// })
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
},
created() {
this.init();
}
}
</script>
<style lang="scss" scoped>
.treeList{
padding: 20px 20px 0;
//margin-left: 13px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
.filter-tree{
margin-top: 20px;
height: calc(100vh - 320px);
}
}
.tree{
height: 400px;
margin: 20px 0;
.filter-tree{
}
}
.check-all {
text-align: right;
width: 95%;
}
.report-manager {
.title {
border-bottom: 1px solid #EBEEF5;
height: 42px;
line-height: 42px;
margin: 0 18px 0 22px;
span {
font-size: 16px;
font-weight: 600;
color: #262626;
}
}
.search {
padding-top: 9px;
::v-deep .el-date-picker,
::v-deep .el-input {
width: 240px;
}
.tag-item {
margin-bottom: 15px;
display: flex;
.year {
::v-deep .el-input__inner {
padding: 0 15px !important;
}
}
label.tag-title {
font-size: 14px;
font-weight: normal;
color: #646464;
display: inline-block;
// width: 112px;
height: 19px;
line-height: 19px;
padding-left: 13px;
// border-right: 1px solid #BFBFBF;
margin-right: 10px;
margin-top: 2.5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tag-show {
flex: 1;
margin-right: 28px;
height: 19px;
overflow: hidden;
position: relative;
&.active {
height: auto;
}
::v-deep .check-active{
.el-checkbox__label{
color: #434343;
}
}
::v-deep .el-checkbox {
margin-right: 15px;
color: #434343;
}
::v-deep .el-checkbox__label {
min-width: 80px;
}
::v-deep .el-checkbox-group {
display: inline;
}
.el-icon-arrow-down,
.el-icon-arrow-up {
color: #C0C4CC;
cursor: pointer;
position: absolute;
right: 0;
top: 2px;
}
}
}
.tag-btns {
padding-right: 15px;
}
.operate-box {
padding-left: 13px;
padding-bottom: 11px;
padding-top: 18px;
}
}
.table {
margin: 0 14px 0 13px;
::v-deep .el-pagination {
margin-top: 13px;
padding-left: 20px;
padding-bottom: 10px;
}
}
}
/* 操作日志 */
.dialog-log {
.search {
.search-box-left {
padding-top: 20px;
display: flex;
justify-content: flex-start;
align-items: center;
label {
font-size: 14px;
font-weight: 400;
color: #595959;
margin-right: 5px;
padding-left: 22px;
}
.year {
::v-deep .el-input__inner {
padding: 0 15px !important;
}
}
::v-deep .el-input {
width: 167px;
margin-right: 5px;
}
@media screen and (max-width: 1366px) {
::v-deep .el-input {
width: 135px;
margin-right: 5px;
}
}
::v-deep .el-button {
float: right;
}
}
.search-box-right {
padding-top: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 14px;
}
.operate-box {
padding-left: 13px;
padding-bottom: 11px;
padding-top: 18px;
}
}
.search {
margin-bottom: 11px;
::v-deep .el-date-editor {
width: 260px;
.el-icon-date {
display: none;
}
.el-range-separator {
width: 30px;
}
.el-range-separator,
.el-range__close-icon {
line-height: 17px;
}
}
}
.table {
margin: 0 14px 0 13px;
::v-deep .el-pagination {
margin-top: 13px;
padding-left: 20px;
padding-bottom: 10px;
}
}
}
/* 标签维护 */
.head {
display: flex;
align-items: center;
margin-bottom: 20px;
.btn {
cursor: pointer;
}
}
.tree {
margin-top: 10px;
padding: 0px 50px 50px 50px;
height: 500px;
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
width: calc(100% - 32px);
}
}
.head ::v-deep .el-input__inner {
margin-top: 10px;
height: 40px;
line-height: 40px;
width: 50% !important;
margin-left: 50px;
}
.head ::v-deep .el-button {
margin-top: 10px;
height: 40px;
line-height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-left: -120px;
cursor: pointer;
z-index: 999;
}
.dialog-tags {
::v-deep .el-dialog .el-dialog__body{
padding-bottom: 50px;
}
.save-tag-btn {
margin-top: 10px;
margin-bottom: 13px;
}
}
/* 报告上传 */
.report-upload {
padding-top: 26px;
::v-deep .el-form {
padding-right: 79px;
.el-form-item {
margin-bottom: 10px;
.el-form-item__label {
height: 36px;
line-height: 36px;
font-size: 14px;
font-weight: 500;
color: #262626;
}
.el-input__inner {
min-height: 36px;
}
.el-input__inner,
.el-textarea__inner {
font-size: 15px;
font-weight: 400;
color: #434343;
}
.el-select {
width: 100%;
}
.ti-input {
width: 107.5% !important;
}
.el-cascader {
width: 100%;
}
.el-date-editor {
width: 100%;
.el-input__inner {
padding-left: 15px;
}
.el-input__suffix {
font-size: 16px;
margin-top: 2px;
}
}
.icon-auth {
.el-icon-arrow-up {
margin-top: 2px;
transform: rotateZ(0) !important;
}
.el-icon-arrow-up:before {
content: '';
background: url("../../assets/imgs/icon-user.png") no-repeat center center;
display: inline-block;
width: 12px;
height: 14px;
background-size: 100% 100%;
}
}
.el-button {
width: 80px;
height: 36px;
padding: 0;
text-align: center;
}
}
}
.done {
text-align: center;
padding: 40px 0;
::v-deep .el-button {
width: 80px;
height: 36px;
padding: 0;
}
}
}
.dialog-title {
display: inline-flex;
justify-content: center;
align-items: center;
.full-screen {
cursor: pointer;
width: 24px;
height: 24px;
vertical-align: middle;
margin-left: 10px;
}
}
/* 报告预览 */
.preview-dialog-body {
padding: 9px 25px 17px 22px;
height: 60vh;
position: relative;
&.active {
height: calc(100vh - 52px);
}
.full-screen {
cursor: pointer;
position: absolute;
z-index: 10;
right: 35px;
top: 10px;
width: 24px;
height: 24px;
//&:hover{
// color: #199BFF;
//}
}
::v-deep .el-scrollbar {
height: 100%;
.el-scrollbar__wrap {
overflow-x: auto;
}
.el-scrollbar__view {
padding: 0 !important;
.preview-content {
img {
max-width: 100% !important;
}
table {
margin: 0 auto;
}
}
}
}
}
.deleRed{
color: red !important;
}
.btnover{
display: inline-block;
width: 68px;
}
.textover{
display: inline-block;
width: calc(100% - 120px);
overflow: hidden;
text-overflow: ellipsis;
}
</style>