577 lines
17 KiB
Vue
577 lines
17 KiB
Vue
<template>
|
||
<div>
|
||
<el-form ref="processFormRef" :model="form" label-width="150px"
|
||
:rules="processFormRule" class="label-input-form" size="medium">
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<el-form-item label="报告名称:" prop="name">
|
||
<el-input :disabled="formControl" v-model="form.name"
|
||
placeholder="请输入报告名称"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="10" :offset="4">
|
||
<el-form-item label="报告年份:" prop="year">
|
||
<el-date-picker :disabled="formControl" v-model="form.year" type="year" value-format="yyyy"
|
||
placeholder="请选择报告年份"
|
||
prefix-icon="null" :picker-options="pickerOptions"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<el-form-item label="报告所属部门:" prop="department">
|
||
<el-input readonly :disabled="formControl" v-model="form.departmentName" @click.native="handleClick"
|
||
placeholder="请选择报告所属部门"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="10" :offset="4">
|
||
<el-form-item label="标签:">
|
||
<el-cascader :disabled="formControl" width="100%" v-model="form.labelList" :options="cascaderOptions"
|
||
filterable collapse-tags
|
||
:props="{ checkStrictly: true ,multiple: true }" clearable placeholder="请选择标签">
|
||
<template slot-scope="{ node, data }">
|
||
<span :title="data.label">{{ data.label }}</span>
|
||
</template>
|
||
</el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<el-form-item label="报告涉密等级:" prop="confidentialLevel">
|
||
<el-select :disabled="formControl" v-model="form.confidentialLevel" placeholder="请选择报告涉密等级"
|
||
@change="reportLevel">
|
||
<el-option v-for="item in privacyLevelOptions " :key="item.value" :label="item.value"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="10" :offset="4" v-if="isShowTime">
|
||
<el-form-item label="保密到期日期:" prop="secrecyLast">
|
||
<el-date-picker :disabled="formControl" v-model="form.secrecyLast" type="date" value-format="yyyy-mm-dd"
|
||
placeholder="请选择保密到期日期"
|
||
prefix-icon="null"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
|
||
<el-col :span="10">
|
||
<el-form-item label="报告隐私等级:" prop="privacyLevel">
|
||
<el-select :disabled="formControl" v-model="form.privacyLevel" placeholder="请选择报告隐私等级">
|
||
<el-option v-for="item in confidentialLevelOptions" :key="item.value" :label="item.value"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="10" :offset="4">
|
||
<el-form-item label="关键词:" prop="tags">
|
||
<vue-tags-input :disabled="formControl" :class="{'is-diable':formControl}" placeholder="请输入关键词"
|
||
v-model="form.tags" :tags="tags"
|
||
@before-deleting-tag="delTag"
|
||
@before-adding-tag="addTags"
|
||
:avoid-adding-duplicates="false" @tags-changed="newTags => tags=newTags"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="内容摘要:" prop="mainContent">
|
||
<el-input :disabled="formControl" v-model="form.mainContent" placeholder="请填写内容摘要" type="textarea"
|
||
maxlength="500"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="5">
|
||
<el-form-item label="上传报告:" prop="fileId">
|
||
<el-upload action="#" :http-request="(params) => uploadFile(params)" :show-file-list="false"
|
||
:before-upload="beforeUploadFile" :on-remove="handleRemove"
|
||
:file-list="fileList" :disabled="formControl">
|
||
<el-button class="uploadBtn" :disabled="formControl">选择文件</el-button>
|
||
|
||
</el-upload>
|
||
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="uploadFile" v-if="form.fileName">
|
||
<span :class="{'fontColor':formControl}" :title="form.fileName" class="juli">{{ form.fileName }}</span>
|
||
<svg-icon icon-class="cloud" @click="downFile(form.fileId)" style="font-size: 20px"
|
||
class-name="icon" ></svg-icon>
|
||
<svg-icon icon-class="del" @click="delFile" style="font-size: 20px"
|
||
class-name="icon" ></svg-icon>
|
||
<!-- <i class="el-icon-cloudy iconstyle" ></i>-->
|
||
<!-- <i :class="{'fontColor':formControl}" class="el-icon-delete iconstyle" @click="delFile"></i>-->
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-form>
|
||
<orgTable :visible.sync="visibleOrgTable" title="人员列表" dialog-model :config="{
|
||
value: orgTableVal,
|
||
valueName: orgTableValName
|
||
}" :workNumFlag="true" :isOrg="true" :maxSelected="1" @confirm="isTreeOk"></orgTable>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {fileType} from '@/utils/fileType'
|
||
import newTranslate from "../../../components/newTranslate";
|
||
import VueTagsInput from '@johmun/vue-tags-input';
|
||
import orgTable from '@/components/OrgTable'
|
||
import {privacyLevelOptions, confidentialLevelOptions} from '@/utils/Enum/enum'
|
||
import {downloadFile} from '@/utils/downloadFile'
|
||
|
||
export default {
|
||
dicts: ['classified_level', 'privacy_level'],
|
||
components: {
|
||
VueTagsInput,
|
||
newTranslate,
|
||
orgTable
|
||
},
|
||
props: {
|
||
|
||
formControl: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
formControlname: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
processForm: {
|
||
type: Object
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
privacyLevelOptions,
|
||
confidentialLevelOptions,
|
||
orgTableVal: '',
|
||
orgTableValName: '',
|
||
visibleOrgTable: false,
|
||
isShowTime: false, //是否显示日期
|
||
loadingMore: false,
|
||
listTwo: [], //存储下载预览的
|
||
allUser: [], //存储全部的
|
||
listOne: [1],
|
||
dialogUser: false,
|
||
cascaderOptions: [],
|
||
tags: [],
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getFullYear() > new Date().getFullYear() + 1 || time.getFullYear() < new Date().getFullYear() - 10;
|
||
},
|
||
},
|
||
form: {},
|
||
processFormRule: {
|
||
fileId: [
|
||
{
|
||
required: true,
|
||
message: "上传报告不能为空",
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
prcName: [
|
||
{
|
||
required: true,
|
||
message: "流程名称不能为空",
|
||
trigger: 'change'
|
||
}, {
|
||
max: 100,
|
||
message: "流程名称不能超过100字符",
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
name: [{
|
||
required: true,
|
||
message: "报告名称不能为空",
|
||
trigger: 'change'
|
||
}, {
|
||
max: 100,
|
||
message: "报告名称不能超过100字符",
|
||
trigger: 'change'
|
||
}],
|
||
mainContent: [{
|
||
max: 500,
|
||
message: "内容摘要不能超过500字符",
|
||
trigger: 'change'
|
||
}],
|
||
year: [{
|
||
required: true,
|
||
message: "报告年份不能为空",
|
||
trigger: 'change'
|
||
}],
|
||
reportUserIdList: [
|
||
{
|
||
required: true,
|
||
message: "权限不能为空",
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
fileName: [
|
||
{
|
||
required: true,
|
||
message: "报告文件不能为空", trigger: 'change'
|
||
|
||
}
|
||
],
|
||
privacyLevel: [
|
||
{
|
||
required: true,
|
||
message: "报告隐私等级不能为空", trigger: 'change'
|
||
}
|
||
],
|
||
confidentialLevel: [
|
||
{
|
||
required: true,
|
||
message: "报告涉密等级不能为空", trigger: 'change'
|
||
}
|
||
],
|
||
secrecyLast: [
|
||
{
|
||
required: true,
|
||
message: "保密到期日期不能为空", trigger: 'change'
|
||
}
|
||
]
|
||
|
||
|
||
},
|
||
q: {
|
||
pageNo: 1,
|
||
pageSize: 10
|
||
},
|
||
fileList: []
|
||
}
|
||
},
|
||
watch: {
|
||
processForm: {
|
||
handler(val) {
|
||
this.form = this.processForm
|
||
console.log("变化了", this.form)
|
||
if (this.form.secrecyLast) {
|
||
this.isShowTime = true
|
||
this.form.secrecyLast = new Date(this.form.secrecyLast)
|
||
}
|
||
if (this.processForm.keyContent) {
|
||
this.tags = JSON.parse(this.processForm.keyContent)
|
||
}
|
||
if (this.processForm.labelList && typeof this.processForm.labelList[0] == 'string') {
|
||
this.form.labelList = this.processForm.labelList.map(item => {
|
||
|
||
return JSON.parse(item)
|
||
})
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
delTag(obj) {
|
||
console.log("我我我")
|
||
obj.deleteTag()
|
||
},
|
||
addTags(obj) {
|
||
if (obj.tag.text.length <= 20) {
|
||
if (this.tags.length < 10) {
|
||
obj.addTag();
|
||
} else {
|
||
this.$message({type: 'error', message: '关键词数量不能超过10个'})
|
||
}
|
||
} else {
|
||
this.$message({type: 'error', message: '单个关键词不能超过20个字'})
|
||
}
|
||
|
||
},
|
||
downFile(id) {
|
||
this.$api.report.reportDownload({reportId: null, fileId: id}).then(res => {
|
||
downloadFile(res)
|
||
})
|
||
},
|
||
handleClick() {
|
||
if (this.formControl) return
|
||
if (this.form.departmentName) {
|
||
this.orgTableVal = this.form.department
|
||
this.orgTableValName = this.form.departmentName
|
||
}
|
||
this.visibleOrgTable = true
|
||
},
|
||
isTreeOk(checkedList) {
|
||
|
||
const parts = []
|
||
const partsName = []
|
||
checkedList.map((item, index) => {
|
||
parts.push(item.orgCode)
|
||
partsName.push(item.orgName)
|
||
})
|
||
|
||
this.qcrList = checkedList
|
||
this.form.department = parts.toString()
|
||
this.form.departmentName = partsName.toString()
|
||
|
||
},
|
||
delFile() {
|
||
if (this.formControl) return
|
||
this.fileList = []
|
||
this.form.fileName = '';
|
||
this.form.fileId = '';
|
||
},
|
||
reportLevel(item) {
|
||
let imList = ['普通商密', '核心商密']
|
||
|
||
if (imList.indexOf(this.form.confidentialLevel) > -1) {
|
||
let currentDate = new Date()
|
||
let futureDate
|
||
if (item == '普通商密')
|
||
futureDate = new Date(currentDate.getFullYear() + 5, currentDate.getMonth(), currentDate.getDate());
|
||
else
|
||
futureDate = new Date(currentDate.getFullYear() + 10, currentDate.getMonth(), currentDate.getDate());
|
||
|
||
this.isShowTime = true
|
||
this.form.secrecyLast = futureDate
|
||
} else {
|
||
this.isShowTime = false
|
||
this.form.secrecyLast = ''
|
||
}
|
||
},
|
||
loadMore() {
|
||
this.q.pageNo++
|
||
this.getAllPerson()
|
||
},
|
||
closeD() {
|
||
if (this.$route.query.isBegin || this.$route.query.isDraft) {
|
||
this.listOne = []
|
||
this.listTwo = []
|
||
} else {
|
||
|
||
}
|
||
this.dialogUser = false
|
||
},
|
||
saveCheck() {
|
||
// 可以编辑
|
||
if (!this.formControl) {
|
||
// 第一次发起与草稿还要区分
|
||
if (this.$route.query.isBegin || this.$route.query.isDraft) {
|
||
let list1 = this.listOne.map(item => {
|
||
let obj = {
|
||
userId: item,
|
||
power: 1
|
||
}
|
||
return obj
|
||
})
|
||
let list2 = this.listTwo.map(item => {
|
||
let obj = {
|
||
userId: item,
|
||
power: 2
|
||
}
|
||
return obj
|
||
})
|
||
this.form.powerList = [...list1, ...list2]
|
||
this.dialogUser = false
|
||
} else {
|
||
//如果是发起人编辑节点
|
||
let list1 = this.listOne.map(item => {
|
||
let obj = {
|
||
userId: item.id,
|
||
power: 1
|
||
}
|
||
return obj
|
||
})
|
||
let list2 = this.listTwo.map(item => {
|
||
let obj = {
|
||
userId: item.id,
|
||
power: 2
|
||
}
|
||
return obj
|
||
})
|
||
this.form.powerList = [...list1, ...list2]
|
||
}
|
||
} else {
|
||
}
|
||
|
||
},
|
||
//获取全部人员
|
||
getAllPerson() {
|
||
this.$api.user.sysUserList(this.q).then(({data}) => {
|
||
let newlist = data.records.map(item => {
|
||
let obj = {
|
||
key: item.USID,
|
||
value: item.USID,
|
||
label: item.USID
|
||
}
|
||
return obj
|
||
})
|
||
this.allUser = [...this.allUser, ...newlist]
|
||
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.sysUserList()
|
||
}
|
||
this.loadingMore = false
|
||
})
|
||
},
|
||
handleChange(value, direction, movedKeys) {
|
||
console.log(value, direction, movedKeys);
|
||
},
|
||
openDialog() {
|
||
this.dialogUser = true
|
||
},
|
||
handleRemove(file, fileList) {
|
||
console.log(file, fileList);
|
||
this.form.fileName = '';
|
||
this.form.fileId = '';
|
||
this.fileList = []
|
||
},
|
||
//用递归方式去除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;
|
||
},
|
||
updateList() {
|
||
this.$api.report.labelList().then(res => {
|
||
this.cascaderOptions = this.getTreeData(res.data)
|
||
})
|
||
this.$forceUpdate()
|
||
},
|
||
// 上传文件
|
||
uploadFile(params) {
|
||
let fd = new FormData();
|
||
fd.append('file', params.file);
|
||
this.$api.report.reportUploadFile(fd).then(({data}) => {
|
||
this.form.fileName = data.name;
|
||
this.form.fileId = data.key;
|
||
this.fileList = [data]
|
||
this.$refs.processFormRef.clearValidate(['fileId'])
|
||
})
|
||
},
|
||
// 上传文件前
|
||
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('仅能上传 pdf｜xls｜xlsx｜doc｜docx｜ppt｜pptx 格式文件');
|
||
}
|
||
if (!isSize) {
|
||
this.$message.error('您最大可上传200M文件');
|
||
}
|
||
return isType && isSize;
|
||
},
|
||
submit() {
|
||
let flag
|
||
this.$refs.processFormRef.validate(v => {
|
||
flag = v
|
||
return v
|
||
})
|
||
return flag
|
||
}
|
||
},
|
||
mounted() {
|
||
this.updateList()
|
||
this.getAllPerson()
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::v-deep .ti-input {
|
||
border-radius: 4px;
|
||
border: 1px solid #DCDFE6;
|
||
min-height: 40px;
|
||
line-height: 40px;
|
||
|
||
.ti-new-tag-input {
|
||
padding-left: 5px;
|
||
|
||
}
|
||
|
||
.ti-new-tag-input::placeholder {
|
||
color: #C0C4CC;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.ti-new-tag-input:-ms-input-placeholder {
|
||
color: #C0C4CC;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.ti-new-tag-input:-moz-placeholder {
|
||
color: #C0C4CC;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
::v-deep .vue-tags-input :focus {
|
||
border: 1px solid #1890ff;
|
||
}
|
||
|
||
.user-form {
|
||
padding-top: 26px;
|
||
|
||
.done {
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
|
||
::v-deep .el-button {
|
||
width: 80px;
|
||
height: 36px;
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.uploadBtn {
|
||
vertical-align: super;
|
||
}
|
||
|
||
.uploadFile {
|
||
margin-left: -35px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
display: inline-block;
|
||
|
||
.juli {
|
||
display: inline-block;
|
||
color: #555;
|
||
max-width: 200px;
|
||
font-size: 15px;
|
||
word-break: keep-all;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
svg {
|
||
margin-left: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.svg-icon {
|
||
vertical-align: super;
|
||
}
|
||
|
||
.fontColor {
|
||
color: #ccc !important;
|
||
}
|
||
}
|
||
::v-deep .el-cascader__tags .el-tag{
|
||
max-width: 70%;
|
||
}
|
||
|
||
</style>
|