【增加】增加字典接口 增加权限的组件
This commit is contained in:
zhoulingpo
@@ -17,33 +17,37 @@
|
||||
placeholder="请输入报告名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9" :offset="6" >
|
||||
<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-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-col :span="9">
|
||||
<el-form-item label="报告所属部门:" prop="department">
|
||||
<el-input :disabled="formControl" v-model="form.department" placeholder="请选择报告所属部门" maxlength="100" ></el-input>
|
||||
<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-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 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-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 =>{
|
||||
<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
|
||||
@@ -57,10 +61,10 @@
|
||||
tags = newTags.slice(0,-1)
|
||||
}
|
||||
|
||||
}" />
|
||||
}"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9" :offset="6">
|
||||
<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">
|
||||
@@ -70,9 +74,10 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-col :span="9">
|
||||
<el-form-item label="标签:" prop="department">
|
||||
<el-cascader :disabled="formControl" width="100%" v-model="form.labelList" :options="cascaderOptions" filterable
|
||||
<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>
|
||||
@@ -82,18 +87,20 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<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-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="上传报告:" required>
|
||||
<el-upload action="#" :http-request="(params) => uploadFile(params)" :show-file-list="false"
|
||||
:before-upload="beforeUploadFile">
|
||||
<el-button :disabled="formControl" >选择文件</el-button>
|
||||
<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>
|
||||
@@ -101,181 +108,337 @@
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="权限设置:" required>
|
||||
<el-button :disabled="formControl">选择文件</el-button>
|
||||
<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 {fileType} from '@/utils/fileType'
|
||||
import newTranslate from "../../../components/newTranslate";
|
||||
import VueTagsInput from '@johmun/vue-tags-input';
|
||||
export default {
|
||||
components:{
|
||||
VueTagsInput
|
||||
},
|
||||
props:{
|
||||
formControl:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
formControlname:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
processForm:{
|
||||
type:Object
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
confidentialLevelOptions:[],
|
||||
cascaderOptions: [],
|
||||
privacyLevelOptions: [],
|
||||
tags:[],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getFullYear() > new Date().getFullYear() + 1 || time.getFullYear() < new Date().getFullYear() - 10;
|
||||
},
|
||||
},
|
||||
form:{
|
||||
|
||||
},
|
||||
processFormRule:{
|
||||
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'
|
||||
export default {
|
||||
components: {
|
||||
VueTagsInput,
|
||||
newTranslate
|
||||
},
|
||||
props: {
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
}
|
||||
formControl: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
methods:{
|
||||
//用递归方式去除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;
|
||||
})
|
||||
},
|
||||
// 上传文件前
|
||||
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
|
||||
}
|
||||
formControlname: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mounted() {
|
||||
this.updateList()
|
||||
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:[]
|
||||
}
|
||||
},
|
||||
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.id,
|
||||
power: 1
|
||||
}
|
||||
return obj
|
||||
})
|
||||
let list2 = this.listTwo.map(item => {
|
||||
let obj = {
|
||||
userId: item.id,
|
||||
power: 2
|
||||
}
|
||||
return obj
|
||||
})
|
||||
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.USNAME,
|
||||
label: item.USNAME
|
||||
}
|
||||
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;
|
||||
min-height: 40px;
|
||||
line-height: 40px;
|
||||
|
||||
.ti-new-tag-input{
|
||||
.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;
|
||||
color: #C0C4CC;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ti-new-tag-input:-moz-placeholder {
|
||||
color: #C0C4CC;
|
||||
color: #C0C4CC;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
::v-deep .vue-tags-input :focus{
|
||||
|
||||
::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>
|
||||
|
||||
Reference in New Issue
Block a user