<template>
|
<el-dialog v-dialogDrag
|
:close-on-click-modal="false"
|
:visible.sync="visible"
|
:width="width"
|
append-to-body="true"
|
class="avue-dialog"
|
title="启动流程"
|
@close="dialogClose">
|
|
<el-divider content-position="left">流程信息</el-divider>
|
|
<el-form ref="nodeForm" :model="saveParam" :rules="rules" class="demo-form-inline" label-position="left"
|
label-width="auto">
|
<el-form-item label="流程模板">
|
<el-select v-model="saveParam.processTemplate" filterable style="width: 100%;" @change="proTemSelect($event)">
|
<el-option v-for="(item, key) in processTemplateList" :key="key" :label="item.value"
|
:value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="流程名称" prop="processName">
|
<el-input v-model="saveParam.processName" placeholder="流程名称">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="流程描述">
|
<el-input v-model="saveParam.processDesc" :rows="4" placeholder="流程描述" type="textarea">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
|
<el-divider content-position="left">流程节点</el-divider>
|
|
|
<el-form :key="formKey" v-loading="nodeLoading" :model="collectParam" :rules="nodeRules" class="demo-form-inline"
|
label-position="left"
|
label-width="auto">
|
<el-form-item v-for="(item, index) in initFrom" :key="index" :label="item.name" prop="node">
|
<div @click="nodeChange(item)">
|
<el-input v-model="collectParam[item.name+'name']" readonly="true" suffix-icon="el-icon-zoom-in"></el-input>
|
</div>
|
</el-form-item>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" @click="handleCancel">取 消</el-button>
|
<el-button size="small" type="primary" @click="handleConfirm">确 定</el-button>
|
</div>
|
<transfer ref="transfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
|
:title="`为【${this.nodeName}】选取值`" :transferTitle="transferTitle" :bottomValue="bottomValue"
|
@transferSend="roleSendHandler"></transfer>
|
</el-dialog>
|
|
</template>
|
|
<script>
|
import {validatenull} from "@/util/validate";
|
import {getTemplateByType, getAllProcessNode, startProcess} from "@/api/base/startWork/index"
|
|
export default {
|
name: "startWorkFlow",
|
props: {
|
paramVOS: {
|
type: Object,
|
default: {}
|
},
|
sourceData: {
|
//所属区域的上一区域选中数据
|
type: Object,
|
default: {}
|
},
|
dataStore: {
|
//弹窗时按钮所属区域选中数据
|
type: Array,
|
default: []
|
},
|
},
|
data() {
|
return {
|
visible: false,
|
saveParam: {
|
processName: ''
|
}, // 对象包含 {processTemplate流程模板(由接口返回当前流程模板) , processName流程名称（为当前用户+'启动流程'+当前分类） , processDesc流程描述 }
|
processTemplateList: [], // 流程模板下拉数组
|
initFrom: [], // 当前流程节点循环数组
|
collectParam: {}, // 流程节点下拉框双向绑定属性
|
typeName: [], // 流程节点option循环选项
|
nodeLoading: false,
|
rules: {
|
processName: [
|
{required: true, message: '流程名称不能为空', trigger: 'blur'},
|
{min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
|
]
|
},
|
nodeRules: {
|
node: [
|
{required: true, message: '选择内容不能为空', trigger: 'change'},
|
]
|
},
|
bottomValue:'',
|
leftRoleData: [],
|
rightRoleData: [],
|
transferTitle: [],
|
nodeName: '', // 当前节点名称
|
userVo: [
|
{
|
"children": [],
|
"id": "zkjs",
|
"leaf": true,
|
"name": "总会计师",
|
"oid": "1241AC3B-26AF-9B86-7870-53DA8D78A742",
|
"secret": -1,
|
"secretText": "",
|
"type": "user"
|
},
|
{
|
"children": [],
|
"id": "1",
|
"leaf": true,
|
"name": "测试",
|
"oid": "921D71F8-C2BB-3BCE-B744-AD0C3812F41A",
|
"secret": -1,
|
"secretText": "",
|
"type": "user"
|
},
|
{
|
"children": [],
|
"id": "5",
|
"leaf": true,
|
"name": "总会计师",
|
"oid": "34ddb5a8-ab95-4070-b72f-abaaa48cf8b1",
|
"secret": -1,
|
"secretText": "",
|
"type": "user"
|
}
|
],
|
formKey: 0,
|
|
}
|
},
|
watch: {},
|
computed: {
|
fullscreen() {
|
if (this.paramVOS.width || this.paramVOS.height) {
|
return false;
|
} else if (this.paramVOS.form) {
|
return false;
|
}
|
return true;
|
},
|
width() {
|
if (!validatenull(this.paramVOS.width)) {
|
if (this.paramVOS.width.includes("px") || this.paramVOS.width.includes("%")) {
|
return this.paramVOS.width;
|
} else {
|
return this.paramVOS.width + "px";
|
}
|
} else {
|
return "40%";
|
}
|
},
|
},
|
created() {
|
// this.modelNameChange();
|
|
},
|
mounted() {
|
this.getWorkByType();
|
},
|
methods: {
|
// 获取流程模板信息
|
getWorkByType() {
|
console.log('this.paramVOS',this.paramVOS)
|
let params = {
|
type: this.paramVOS.templatetype,
|
filterTemplate: this.paramVOS.filterTemplate || ""
|
}
|
getTemplateByType(params).then(res => {
|
const data = res.data.data;
|
const userInfo = JSON.parse(localStorage.getItem('saber-userInfo'));
|
|
this.processTemplateList = data;
|
this.saveParam.processTemplate = data[0].value;
|
this.saveParam.processName = this.paramVOS.processname || userInfo.content.userName + '-' + data[0].value; // 对流程模板 流程名称赋默认值
|
|
this.getProcessNode(data[0].attributes.oid); // 首次进入调用第一个模板的所有节点
|
}).catch(err => {
|
})
|
},
|
|
// 请求流程节点
|
getProcessNode(oid) {
|
let params = {
|
processOid: oid,
|
maxSecret: this.paramVOS.maxSecret || -1
|
}
|
getAllProcessNode(params).then(res => {
|
const nodes = res.data.data;
|
this.initFrom = nodes;
|
nodes.forEach(item => {
|
// let name = item.processUserVO[0].children.map(name => name.name).join(',');
|
// let ids = item.processUserVO[0].children.map(id => id.id).join(',');
|
let name = this.userVo.map(name => name.name).join(',');
|
let ids = this.userVo.map(id => id.id).join(',');
|
this.bottomValue = name;
|
this.collectParam[item.name + 'name'] = name;
|
this.collectParam[item.name] = ids;
|
})
|
this.nodeLoading = false;
|
}).catch(err => {
|
})
|
},
|
|
// 关闭弹窗
|
dialogClose() {
|
this.visible = false;
|
},
|
|
|
handleCancel() {
|
this.dialogClose();
|
},
|
|
handleConfirm() {
|
const oids = this.dataStore.map(item => item.oid).join(',');
|
let params = {
|
deployid:this.processTemplateList[0].attributes.deploymentId,
|
title:this.saveParam.processName,
|
description:this.saveParam.processDesc,
|
btmType:this.processTemplateList[0].attributes.taskType,
|
uiType:this.processTemplateList[0].attributes.taskType,
|
oids:oids, // 当前数据oid，多个用,分隔
|
detailInfoUrl:this.paramVOS.detailInfoUrl || '', // 用户配置属性
|
resetStatus:'Editing',
|
nodeUsers:{
|
...this.collectParam
|
}
|
}
|
startProcess(params).then(res => {
|
if(res.data.obj.status === 200){
|
this.dialogClose();
|
this.$message.success('启动流程成功');
|
}else {
|
this.$message.error(res.data.obj.error);
|
}
|
}).catch(err => {
|
})
|
},
|
|
// 切换流程模板
|
proTemSelect(event) {
|
this.nodeLoading = true;
|
this.getProcessNode(event);
|
this.$refs.nodeForm.clearValidate();
|
},
|
|
// 节点点击事件
|
nodeChange(item) {
|
this.nodeName = item.name;
|
this.transferTitle = [`[${item.name}]未选用户`, `[${item.name}]已选用户`]
|
this.leftRoleData = [
|
{
|
"children": [],
|
"id": "zkjs",
|
"leaf": true,
|
"name": "总会计师",
|
"oid": "1241AC3B-26AF-9B86-7870-53DA8D78A742",
|
"secret": -1,
|
"secretText": "",
|
"type": "user"
|
},
|
{
|
"children": [],
|
"id": "1",
|
"leaf": true,
|
"name": "测试",
|
"oid": "921D71F8-C2BB-3BCE-B744-AD0C3812F41A",
|
"secret": -1,
|
"secretText": "",
|
"type": "user"
|
},
|
{
|
"children": [],
|
"id": "5",
|
"leaf": true,
|
"name": "总会计师",
|
"oid": "34ddb5a8-ab95-4070-b72f-abaaa48cf8b1",
|
"secret": -1,
|
"secretText": "",
|
"type": "user"
|
}
|
];
|
this.rightRoleData = this.userVo.map(item => item.oid);
|
this.$refs.transfer.visible = true;
|
},
|
|
// 穿梭框回填
|
roleSendHandler(data) {
|
let filterData;
|
filterData = this.userVo.filter(item => {
|
return data.includes(item.oid);
|
});
|
const filterName = filterData.map(item => item.name).join(',');
|
this.$set(this.collectParam, this.nodeName + 'name', filterName);
|
this.formKey += 1; // 刷新表单 因为双向绑定的this.collectParam[this.nodeName + 'name']是动态值 vue无法检测到值的更新
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-form-item {
|
margin-bottom: 25px;
|
}
|
|
.el-divider--horizontal {
|
margin-bottom: 20px !important;
|
}
|
|
.el-divider__text.is-left {
|
color: #8b8989 !important;
|
}
|
</style>
|
