<template>
|
<el-dialog :title="title" :visible.sync="dialogVisible" append-to-body="true" width="30%">
|
<el-tag v-for="tag in tags" :key="tag" closable disable-transitions effect="Plain" size="medium"
|
@click="handleClickTag(tag)" @close="handleCloseTag(tag)">
|
<span> {{ tag.name }}</span>
|
</el-tag>
|
<el-divider v-if="tags.length !== 0"></el-divider>
|
<el-form :model="saveParam" class="demo-form-inline" label-position="left" label-width="auto" :rules="rules">
|
<el-form-item label="流程模板">
|
<el-input placeholder="流程模板" v-model="saveParam.modelName" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="流程名称" prop="processName">
|
<el-input placeholder="流程名称" v-model="saveParam.template">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="流程描述">
|
<el-input placeholder="流程描述" type="textarea" :rows="4" v-model="saveParam.processDesc">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-divider></el-divider>
|
<div class="btns-icon">
|
<el-button icon="el-icon-star-off" circle @click="handleCollect"></el-button>
|
</div>
|
<el-form :model="collectParam" class="demo-form-inline" label-position="left" label-width="auto">
|
<el-form-item :label="item.taskName" v-for="(item, index) in initFrom" :key="index">
|
<el-select style="width: 80%;" filterable v-model="collectParam.flowTaskUsers[index]['userId']"
|
:placeholder="item.taskName" @change="handleSelect($event, index)">
|
<el-option :label="key.userNames" :value="key.userId" v-for="(key, keyi) in typeName"
|
:key="keyi"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleCancel">取 消</el-button>
|
<el-button type="primary" @click="handleConfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
<script>
|
import { personnelInit, personnelCollect, cancelCollect, personnelSave, personnelDict } from '@/api/template/setPersonnel.js'
|
export default {
|
name: 'SetPersonnel',
|
props: {
|
// 是否打开
|
visible: {
|
typeof: Boolean,
|
default: false
|
},
|
// 标题
|
title: {
|
typeof: String,
|
default: '流程审批'
|
},
|
// 参数：选择的id，多个以数组方式传递：['id','id']，模板id，模板用途，流程名字，流程模板,
|
// flowTemplate：
|
// vars：object格式，名字为vars，里面key键值，自己随意
|
parameter: {
|
typeof: Object,
|
default: () => { }
|
},
|
parameterKeys: {
|
typeof: Object,
|
default: () => {
|
return {
|
ids: 'ids',
|
flowTemplate: 'flowTemplate',
|
code: 'code',
|
type: 'type'
|
}
|
}
|
}
|
|
},
|
watch: {
|
visible(n) {
|
this.dialogVisible = n;
|
if (n) {
|
this.apiInit()
|
this.apiDict()
|
}
|
},
|
dialogVisible(n) {
|
this.$emit('update:visible', n)
|
},
|
users:{
|
handler(val){
|
this.collectParam.flowTaskUsers = val
|
},
|
deep:true,
|
immediate:true
|
},
|
parameter:{
|
handler(newval,oldval){
|
this.saveParam=newval;
|
},
|
deep:true,
|
immediate:true
|
}
|
},
|
data() {
|
return {
|
dialogVisible: this.visible,
|
isCollent: false,
|
initFrom: [],
|
tags: [],
|
typeName: [],
|
collectParam: {},
|
saveParam: {},
|
users: [],
|
rules: {
|
processName: [
|
{ required: true, message: '模板名称不能为空', trigger: 'blur' },
|
{ min: 1, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
|
mounted() {
|
},
|
created() {
|
},
|
methods: {
|
setSaveParam() {
|
return {
|
processName: this.parameter[this.parameterKeys.flowTemplate],
|
topName: this.title,
|
ids: this.parameter[this.parameterKeys.ids],
|
vars:this.parameter['vars']
|
}
|
},
|
userIndex(arr1) {
|
return this.initFrom.findIndex(i => i.taskId === arr1)
|
},
|
async apiInit() {
|
const response = await personnelInit({ type: this.parameter[this.parameterKeys.type], templateId: this.parameter[this.parameterKeys.code]})
|
if (response.status === 200) {
|
this.initFrom = response.data.data.user
|
this.tags = response.data.data.collect
|
const { modelKey, templateId, modelName } = response.data.data.flow
|
let flowTaskUsers = response.data.data.user
|
this.collectParam = { modelKey, templateId, flowTaskUsers: flowTaskUsers }
|
this.users = response.data.data.user
|
console.log(this.collectParam)
|
console.log('this.saveParam.before',this.saveParam)
|
this.saveParam = { ...this.saveParam, modelKey, templateId, modelName }
|
console.log('this.saveParam',this.saveParam)
|
if (this.tags.length !== 0) this.handleClickTag(this.tags[0])
|
}
|
},
|
async apiDict() {
|
const response = await personnelDict()
|
console.log(response)
|
if (response.status === 200) {
|
console.log(response)
|
const data = response.data.data
|
this.typeName = data.map(item => {
|
const { account, deptName, id, realName } = item
|
let userNames = `${deptName} - ${realName} - ${account}`
|
return { userId: id, userName: realName, userNames: userNames }
|
})
|
}
|
},
|
|
handleCollect() {
|
this.$prompt('请输入一个名字', '操作', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
}).then(async ({ value }) => {
|
console.log(this.users)
|
this.collectParam.flowTaskUsers = this.users
|
this.collectParam = { ...this.collectParam, name: value }
|
console.log(this.collectParam)
|
const response = await personnelCollect(this.collectParam)
|
console.log(response)
|
if (response.status === 200) {
|
this.$nextTick(() => {
|
this.apiInit()
|
})
|
}
|
}).catch(() => {
|
|
});
|
},
|
async canCollect(name) {
|
const response = await cancelCollect({ name: name })
|
if (response.status === 200) {
|
console.log(response)
|
this.apiInit()
|
this.isCollent = true
|
this.$message({
|
type: 'success',
|
message: response.data.msg
|
});
|
}
|
},
|
async apiSave() {
|
try {
|
const len = this.collectParam.flowTaskUsers.length
|
console.log(this.collectParam.flowTaskUsers)
|
console.log(len == 0)
|
console.log(len != this.initFrom.length)
|
console.log('saveParam',this.saveParam)
|
if (len == 0 && len != this.initFrom.length) {
|
this.$message({
|
type: "error",
|
message: "请选择节点！"
|
});
|
} else {
|
const {modelKey,modelName,processDesc,processName,templateId,topName,vars,ids} = this.saveParam
|
const vals= {modelKey,modelName,processDesc,processName,templateId,topName,ids,...vars}
|
console.log('vals',vals);
|
const response = await personnelSave({ variables:vals, flowTaskUsers: this.collectParam.flowTaskUsers, })
|
if (response.status === 200) {
|
console.log(response)
|
this.$message({
|
type: 'success',
|
message: response.data.msg
|
});
|
this.$emit('onLoad')
|
this.done()
|
}
|
}
|
|
} catch {
|
console.error('接口调用失败')
|
}
|
},
|
handleClickTag(event) {
|
console.log(event.flowTaskUsers)
|
|
console.log(this.collectParam.flowTaskUsers)
|
let flowTaskUsers = this.collectParam.flowTaskUsers
|
this.collectParam.flowTaskUsers = flowTaskUsers.map((item, index) => {
|
for (let i = 0; i < event.flowTaskUsers.length; i++) {
|
if (item.taskId == event.flowTaskUsers[i].taskId) {
|
item['userName'] = event.flowTaskUsers[i]['userName']
|
item['userId'] = event.flowTaskUsers[i]['userId']
|
}
|
}
|
return item
|
})
|
this.users = this.collectParam.flowTaskUsers
|
// const flowTaskUsers = event.flowTaskUsers//collet.flowTaskUsers
|
// let tasks = this.collectParam.flowTaskUsers;//user
|
// for (let i = 0; i < tasks.length; i++) {
|
// let thisFlowTaskUsers = tasks[i];
|
// for (let j = 0; j < flowTaskUsers.length; j++) {
|
// let thisFflowTaskUsers = flowTaskUsers[j];
|
// if (thisFlowTaskUsers.taskId == thisFflowTaskUsers.taskId) {
|
// thisFlowTaskUsers['userName'] = thisFflowTaskUsers.userName;
|
// thisFlowTaskUsers['userId'] = thisFflowTaskUsers.userId;
|
// }
|
// }
|
// }
|
// this.collectParam.flowTaskUsers = {...this.collectParam.flowTaskUsers,userId,userName}
|
},
|
handleCloseTag(event) {
|
console.log(event)
|
this.canCollect(event.name)
|
},
|
handleSelect(event, index) {
|
const res = this.typeName.find(item => item.userId === event)
|
const { userName } = res
|
console.log(this.users)
|
this.$set(this.users, index, { ... this.collectParam.flowTaskUsers[index], userName })
|
// this.users[index] = { ... this.collectParam.flowTaskUsers[index], userName }
|
console.log(this.users)
|
},
|
done() {
|
this.dialogVisible = false
|
},
|
handleCancel() {
|
this.done()
|
},
|
handleConfirm() {
|
console.log(this.saveParam)
|
this.apiSave()
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.el-tag+.el-tag {
|
margin-left: 10px;
|
margin-top: 10px;
|
}
|
|
.button-new-tag {
|
margin-left: 10px;
|
height: 32px;
|
line-height: 30px;
|
padding-top: 0;
|
padding-bottom: 0;
|
}
|
|
.input-new-tag {
|
width: 90px;
|
margin-left: 10px;
|
vertical-align: bottom;
|
}
|
|
.btns-icon {
|
display: flex;
|
justify-content: end;
|
padding-bottom: 10px;
|
}
|
</style>
|
