452 lines
14 KiB
Vue
452 lines
14 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="9">
|
||
<el-form-item label="流程名称:" prop="prcName">
|
||
<el-input :disabled="formControl || formControlname" v-model="form.prcName"
|
||
placeholder="请输入流程名称"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="9">
|
||
<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="9" :offset="6">
|
||
<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="9">
|
||
<el-form-item label="报告所属部门:" prop="department">
|
||
<el-input :disabled="formControl" v-model="form.department" placeholder="请选择报告所属部门"
|
||
maxlength="100"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="9" :offset="6">
|
||
<el-form-item label="报告涉密等级:" prop="confidentialLevel">
|
||
<el-select :disabled="formControl" v-model="form.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-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="9">
|
||
<el-form-item label="关键词:" prop="tags">
|
||
<vue-tags-input :disabled="formControl" :class="{'is-diable':formControl}" placeholder="请输入关键词"
|
||
v-model="form.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{
|
||
this.$message({type:'error',message:'单个关键词不能超过20个字'})
|
||
tags = newTags.slice(0,-1)
|
||
}
|
||
|
||
}"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="9" :offset="6">
|
||
<el-form-item label="报告隐私等级:" prop="privacyLevelOptions">
|
||
<el-select :disabled="formControl" v-model="form.privacyLevelOptions" 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-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="9">
|
||
<el-form-item label="标签:" prop="department">
|
||
<el-cascader :disabled="formControl" width="100%" v-model="form.labelList" :options="cascaderOptions"
|
||
filterable
|
||
:props="{ checkStrictly: 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="18">
|
||
<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="9">
|
||
<el-form-item label="上传报告:" prop="fileId">
|
||
<el-upload action="#" :http-request="(params) => uploadFile(params)" :show-file-list="true"
|
||
:before-upload="beforeUploadFile" :on-remove="handleRemove"
|
||
:file-list="fileList">
|
||
<el-button :disabled="formControl">选择文件</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="9">
|
||
<el-form-item label="权限设置:" required>
|
||
<el-button :disabled="formControl" @click="openDialog">权限设置</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-dialog title="权限设置" :visible.sync="dialogUser" width="950px" :close-on-click-modal="false"
|
||
:close-on-press-escape="false" modal-append-to-body append-to-body>
|
||
<div class="user-form">
|
||
<div style="text-align: center">
|
||
<newTranslate
|
||
@loadMore="loadMore"
|
||
style="text-align: left; display: inline-block"
|
||
filterable
|
||
v-model="listOne"
|
||
:titles="['全部人员', '预览权限人员','预览和下载权限人员']"
|
||
:props="{
|
||
key: 'value',
|
||
label: 'desc'
|
||
}"
|
||
:loadingMore="loadingMore"
|
||
:data="allUser"
|
||
:listTwo.sync="listTwo"
|
||
:button-texts="['全部', '预览', '预览与下载']"
|
||
></newTranslate>
|
||
</div>
|
||
<div class="done">
|
||
<el-button type="default" @click="closeD">取消</el-button>
|
||
<el-button type="primary" v-if="!formControl" @click="saveCheck">确定</el-button>
|
||
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {fileType} from '@/utils/fileType'
|
||
import newTranslate from "../../../components/newTranslate";
|
||
import VueTagsInput from '@johmun/vue-tags-input';
|
||
|
||
export default {
|
||
components: {
|
||
VueTagsInput,
|
||
newTranslate
|
||
},
|
||
props: {
|
||
|
||
formControl: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
formControlname: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
processForm: {
|
||
type: Object
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loadingMore:false,
|
||
listTwo: [], //存储下载预览的
|
||
allUser: [], //存储全部的
|
||
listOne: [1],
|
||
dialogUser: false,
|
||
confidentialLevelOptions: [],
|
||
cascaderOptions: [],
|
||
privacyLevelOptions: [],
|
||
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'
|
||
|
||
}
|
||
]
|
||
|
||
},
|
||
q: {
|
||
pageNo: 1,
|
||
pageSize: 10
|
||
},
|
||
fileList:[]
|
||
}
|
||
},
|
||
watch:{
|
||
processForm(val){
|
||
debugger
|
||
this.form=this.processForm
|
||
}
|
||
},
|
||
methods: {
|
||
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]
|
||
})
|
||
},
|
||
// 上传文件前
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|