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

1399 lines
56 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="20">
<div class="search-box-left">
<label>搜索:</label>
<el-input v-model="q.keyContent" placeholder="请输入搜索内容"></el-input>
<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>
<el-select v-model="q.labelOneId" multiple collapse-tags
:placeholder="'请选择' + tagsForm.tags01.name">
<template v-for="item in tagsForm.tags01.childList">
<el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
</template>
</el-select>
<el-select v-model="q.labelTwoId" multiple collapse-tags
:placeholder="'请选择' + tagsForm.tags02.name">
<template v-for="item in tagsForm.tags02.childList">
<el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
</template>
</el-select>
<el-select v-model="q.labelThreeId" multiple collapse-tags
:placeholder="'请选择' + tagsForm.tags03.name">
<template v-for="item in tagsForm.tags03.childList">
<el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
</template>
</el-select>
</div>
</el-col>
<el-col :span="4" align="right">
<div class="search-box-right">
<el-button type="primary" @click="search">查询</el-button>
<el-button @click="reset">重置</el-button>
</div>
</el-col>
<el-col :span="24">
<div class="operate-box">
<el-button @click="openLog">操作日志</el-button>
<el-button @click="openTags">标签维护</el-button>
<el-button @click="openReportAdd">报告上传</el-button>
</div>
</el-col>
</el-row>
</div>
<div class="table">
<vxe-table :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="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.id)">删除</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-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-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="1100px" :close-on-click-modal="false"
:close-on-press-escape="false" modal-append-to-body append-to-body :before-close="handleTagsClose">
<div class="dialog-tags">
<el-row :gutter="17">
<el-col :span="8">
<div class="tags-item">
<div class="tag-header">
<el-row>
<el-col :span="17">
<el-input v-model="tagsForm.tags01.name" placeholder="请输入标签一名称" maxlength="20" show-word-limit
@change="(val)=> handleSaveTopTag(val, 1)"></el-input>
</el-col>
<el-col :span="7"><img class="icon-modify" src="@/assets/imgs/icon-modify.png"
alt=""></el-col>
</el-row>
</div>
<div class="tags-content">
<el-scrollbar>
<el-row>
<template v-for="(item, index) in tagsForm.tags01.childList">
<el-col :span="17" :key="'input-' + item.id">
<!--:disabled="index === 0"-->
<el-input v-model="item.name" placeholder="请输入标签名称"
maxlength="20" show-word-limit
@change="(val)=> handleSaveTag(val, item, 1)"></el-input>
</el-col>
<el-col :span="7" :key="'btns-' + item.id">
<img @click="addTag(index, 1)" class="icon-add"
src="@/assets/imgs/icon-add.png" alt="">
<!-- v-if="index !== 0"-->
<img @click="delTag(index, 1)" v-if="tagsForm.tags01.childList.length !== 1" class="icon-sub"
src="@/assets/imgs/icon-sub.png" alt="">
<img @click="upTag(item, index, 1)" v-if="index !== 0" class="icon-up"
src="@/assets/imgs/icon-up.png" alt="">
<img @click="downTag(item, index, 1)" v-if="index !== tagsForm.tags01.childList.length - 1" class="icon-down"
src="@/assets/imgs/icon-down.png" alt="">
</el-col>
</template>
</el-row>
</el-scrollbar>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="tags-item">
<div class="tag-header">
<el-row>
<el-col :span="17">
<el-input v-model="tagsForm.tags02.name" placeholder="请输入标签二名称" maxlength="20" show-word-limit
@change="(val)=> handleSaveTopTag(val, 2)"></el-input>
</el-col>
<el-col :span="7"><img class="icon-modify" src="@/assets/imgs/icon-modify.png"
alt=""></el-col>
</el-row>
</div>
<div class="tags-content">
<el-scrollbar>
<el-row>
<template v-for="(item, index) in tagsForm.tags02.childList">
<el-col :span="17" :key="'input-' + item.id">
<!-- :disabled="index === 0"-->
<el-input v-model="item.name" placeholder="请输入标签名称"
maxlength="20" show-word-limit
@change="(val)=> handleSaveTag(val, item, 2)"></el-input>
</el-col>
<el-col :span="7" :key="'btns-' + item.id">
<img @click="addTag(index, 2)" class="icon-add"
src="@/assets/imgs/icon-add.png" alt="">
<!-- v-if="index !== 0"-->
<img @click="delTag(index, 2)" v-if="tagsForm.tags02.childList.length !== 1" class="icon-sub"
src="@/assets/imgs/icon-sub.png" alt="">
<img @click="upTag(item, index, 2)" v-if="index !== 0" class="icon-up"
src="@/assets/imgs/icon-up.png" alt="">
<img @click="downTag(item, index, 2)" v-if="index !== tagsForm.tags02.childList.length - 1" class="icon-down"
src="@/assets/imgs/icon-down.png" alt="">
</el-col>
</template>
</el-row>
</el-scrollbar>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="tags-item">
<div class="tag-header">
<el-row>
<el-col :span="17">
<el-input v-model="tagsForm.tags03.name" placeholder="请输入标签三名称" maxlength="20" show-word-limit
@change="(val)=> handleSaveTopTag(val, 3)"></el-input>
</el-col>
<el-col :span="7"><img class="icon-modify" src="@/assets/imgs/icon-modify.png"
alt=""></el-col>
</el-row>
</div>
<div class="tags-content">
<el-scrollbar>
<el-row>
<template v-for="(item, index) in tagsForm.tags03.childList">
<el-col :span="17" :key="'input-' + item.id">
<!-- :disabled="index === 0"-->
<el-input v-model="item.name" placeholder="请输入标签名称"
maxlength="20" show-word-limit
@change="(val)=> handleSaveTag(val, item, 3)"></el-input>
</el-col>
<el-col :span="7" :key="'btns-' + item.id">
<img @click="addTag(index, 3)" class="icon-add"
src="@/assets/imgs/icon-add.png" alt="">
<!-- v-if="index !== 0"-->
<img @click="delTag(index, 3)" v-if="tagsForm.tags03.childList.length !== 1" class="icon-sub"
src="@/assets/imgs/icon-sub.png" alt="">
<img @click="upTag(item, index, 3)" v-if="index !== 0" class="icon-up"
src="@/assets/imgs/icon-up.png" alt="">
<img @click="downTag(item, index, 3)" v-if="index !== tagsForm.tags03.childList.length - 1" class="icon-down"
src="@/assets/imgs/icon-down.png" alt="">
</el-col>
</template>
</el-row>
</el-scrollbar>
</div>
</div>
</el-col>
<el-col :span="24" align="center">
<el-button class="save-tag-btn" type="primary" @click="saveTags">保存</el-button>
</el-col>
</el-row>
</div>
</el-dialog>
<!--报告上传-->
<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'">
<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="关键词:">
<el-input v-model="reportF.keyContent" placeholder="请填写" maxlength="100" show-word-limit></el-input>
</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="文件上传:" 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-row :gutter="10" type="flex">
<el-col :span="8">
<el-select v-model="labelOne" :placeholder="'请选择' + tagsForm.tags01.name" value-key="id"
@change="(val) => handleSelectTag(val, 1)">
<template v-for="item in tagsForm.tags01.childList">
<el-option :label="item.name" :value="item" :key="item.id"></el-option>
</template>
</el-select>
</el-col>
<el-col :span="8">
<el-select v-model="labelTwo" :placeholder="'请选择' + tagsForm.tags02.name" value-key="id"
@change="(val) => handleSelectTag(val, 2)">
<template v-for="item in tagsForm.tags02.childList">
<el-option :label="item.name" :value="item" :key="item.id"></el-option>
</template>
</el-select>
</el-col>
<el-col :span="8">
<el-select v-model="labelThree" :placeholder="'请选择' + tagsForm.tags03.name"
value-key="id"
@change="(val) => handleSelectTag(val, 3)">
<template v-for="item in tagsForm.tags03.childList">
<el-option :label="item.name" :value="item" :key="item.id"></el-option>
</template>
</el-select>
</el-col>
</el-row>
</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.ACCOUNT" :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'
export default {
name: "ReportManager",
data() {
return {
watermarkText: '', // 水印
fullscreen: false,
/* =============================================== 操作日志 =============================================== */
dialogLog: false, // 操作日志
qLog: {
doName: '', // 操作类型
endDate: '', // 结束时间
pageNo: 1,
pageSize: 10,
reportName: '', // 报告名称
startDate: '', // 开始时间
},
qLogTotal: 0,
qLogDateRange: '', // 开始结束时间
logTableData: [],
doNames: [],
/* =============================================== 标签维护 =============================================== */
dialogTags: false, // 标签维护
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: [], // 权限
},
labelOne: {},
labelTwo: {},
labelThree: {},
mode: '',
userList: [],
pickerOptions: {
disabledDate(time) {
return time.getFullYear() > new Date().getFullYear() + 1 || time.getFullYear() < new Date().getFullYear() - 10;
},
},
/* =============================================== 列表展示 =============================================== */
q: {
keyContent: '',
year: [],
labelOneId: [],
labelTwoId: [],
labelThreeId: [],
pageNo: 1,
pageSize: 10,
},
total: 0,
tableData: [],
yearList: [],
dialogPreview: false,
content: '',
/* 权限全选 */
checked: false,
mulSelecteds: [], // 已选中选项
}
},
methods: {
/* 权限全选 */
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);
},
init() {
this.labelList();
this.reset();
this.reportDateList();
this.sysUserList();
},
/* =============================================== 操作日志 =============================================== */
// 操作日志
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.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();
})
},
// 标签列表
labelList() {
this.$api.report.labelList().then(({data}) => {
if(!data.labelOne.childList.length){
data.labelOne.childList = [{name: '', id: '', parentId: this.tagsForm.tags01.id, type: '1'}]
}
if(!data.labelTwo.childList.length){
data.labelTwo.childList = [{name: '', id: '', parentId: this.tagsForm.tags02.id, type: '2'}]
}
if(!data.labelThree.childList.length){
data.labelThree.childList = [{name: '', id: '', parentId: this.tagsForm.tags03.id, type: '3'}]
}
this.tagsForm.tags01 = data.labelOne;
this.tagsForm.tags02 = data.labelTwo;
this.tagsForm.tags03 = data.labelThree;
})
},
handleTagsClose(){
this.dialogTags = false;
this.labelList();
this.reset();
},
// 保存标签
saveTags() {
let tagsForm = JSON.parse(JSON.stringify(this.tagsForm));
let params = {
labelList: [
tagsForm.tags01,
tagsForm.tags02,
tagsForm.tags03
]
}
let isSave = true;
params.labelList.forEach(item => {
if(!item.name || item.name === '-'){
isSave = false;
return
}
item.childList.forEach(ele => {
if(!ele.name || item.name === '-'){
isSave = false;
return
}
})
})
if(!isSave){
return this.$message.warning('标签名称不能为空');
}
this.$api.report.labelSave(params).then(_ => {
this.$message.success('操作成功');
this.dialogTags = false;
this.labelList();
this.reset();
})
},
/* =============================================== 报告上传 =============================================== */
// 打开报告上传
openReportAdd() {
this.mode = 'add';
this.reportF = {
name: '', // 报告名称
keyContent: '', // 关键词
mainContent: '', // 内容摘要
department: '', // 报告所属部门
fileName: '', // 文件上传
fileId: '',
year: '', // 报告年份
labelOneId: '', // 标签1
labelOneName: '', // 标签1
labelTwoId: '', // 标签2
labelTwoName: '', // 标签2
labelThreeId: '', // 标签3
labelThreeName: '', // 标签3
reportUserIdList: [], // 权限
};
this.labelOne = {};
this.labelTwo = {};
this.labelThree = {};
this.labelList();
this.dialogReport = true;
},
// 选择标签
handleSelectTag(val, type) {
switch (type) {
case 1:
this.reportF.labelOneId = val.id;
this.reportF.labelOneName = val.name;
break;
case 2:
this.reportF.labelTwoId = val.id;
this.reportF.labelTwoName = val.name;
break;
case 3:
this.reportF.labelThreeId = val.id;
this.reportF.labelThreeName = val.name;
break;
}
},
// 必填项
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.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.$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) {
this.mode = mode;
this.labelList();
let rowData = JSON.parse(JSON.stringify(row));
if(rowData.labelOneName !== '-'){
this.labelOne = {id: rowData.labelOneId, rowData: rowData.labelOneName};
}else{
this.labelOne = {};
}
if(rowData.labelTwoName !== '-'){
this.labelTwo = {id: rowData.labelTwoId, name: rowData.labelTwoName};
}else{
this.labelTwo = {};
}
if(rowData.labelThreeName !== '-'){
this.labelThree = {id: rowData.labelThreeId, name: rowData.labelThreeName};
}else{
this.labelThree = {};
}
this.reportF = rowData;
this.dialogReport = true;
},
// 获取所有用户
sysUserList() {
this.$api.user.sysUserList({pageNo: 1, pageSize: 999999}).then(({data}) => {
this.userList = data.records;
})
},
/* =============================================== 列表展示 =============================================== */
// 重置
reset() {
this.q = {
keyContent: '',
year: [],
labelOneId: [],
labelTwoId: [],
labelThreeId: [],
pageNo: 1,
pageSize: 10,
};
this.total = 0;
this.tableData = [];
this.reportList();
this.reportDateList();
},
// 报告删除
reportDelete(ids) {
this.$confirm('此操作将删除所选数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$api.report.reportDelete({ids}).then(_ => {
this.$message.success('操作成功');
this.reportList();
this.reportDateList();
})
})
},
search() {
this.q.pageNo = 1;
this.reportList();
},
// 列表
reportList() {
this.$api.report.reportList(this.q).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();
}
})
},
// 日期列表
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;
})
},
// 下载
downloadRow(row) {
// this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
this.$api.report.reportDownload({fileId: row.fileId}).then(res => {
downloadFile(res);
})
// })
},
},
created() {
this.init();
}
}
</script>
<style lang="scss" scoped>
.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 {
.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;
}
}
.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;
}
}
}
/* 标签维护 */
.dialog-tags {
padding: 11px 33px 0 33px;
.tags-item {
height: 60vh;
border: 1px solid #EBEEF5;
.tag-header {
height: 40px;
background-color: #F2F6FC;
border-bottom: 1px solid #EBEEF5;
padding: 0 11px;
line-height: 40px;
overflow: hidden;
.el-input__inner {
font-weight: 500;
}
.icon-modify {
cursor: pointer;
width: 16px;
height: 16px;
margin-top: 12px;
margin-left: 10px;
}
}
.tags-content {
height: calc(100% - 40px);
padding: 0 0 0 10px;
::v-deep .el-scrollbar {
height: 100%;
.el-scrollbar__view {
padding: 0 !important;
}
.el-scrollbar__wrap {
overflow-x: hidden;
}
}
::v-deep .el-row {
padding-top: 10px;
padding-right: 10px;
}
.el-input {
margin-bottom: 10px;
}
.icon-add,
.icon-add-disabled {
margin-left: 10px;
margin-right: 5px;
}
.icon-sub,
.icon-up{
margin-right: 5px;
}
.icon-add-disabled,
.icon-sub-disabled,
.icon-add,
.icon-sub,
.icon-up,
.icon-down{
cursor: pointer;
width: 16px;
height: 16px;
margin-top: 4px;
}
}
}
.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: 14px;
font-weight: 400;
color: #434343;
}
.el-select {
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;
}
}
}
}
}
</style>