DeXun/double-rack
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 流程设计模块更新用户类型

Browse Source
This commit is contained in:
tony
2022-12-13 22:34:34 +08:00
parent e093855bd9
commit e37577f7fb
26 changed files with 2037 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ruoyi-ui/src/components/Process/PropertyPanel.vue
View File

@@ -8,6 +8,7 @@
:modeler="modeler"
:users="users"
:groups="groups"
:exps="exps"
:categorys="categorys"
@dataType="dataType"
/>
@@ -38,6 +39,10 @@ export default {
type: Array,
required: true
},
exps: {
type: Array,
default: () => []
},
modeler: {
type: Object,
required: true

11
ruoyi-ui/src/components/Process/common/parseElement.js
View File

@@ -41,10 +41,19 @@ export function userTaskParse(obj) {
for (const key in obj) {
if (key === 'candidateUsers') {
obj.userType = 'candidateUsers'
obj[key] = obj[key]?.split(',') || []
// if (obj[key].toString().indexOf(",") !== -1) {
//
// }else {
// obj[key] = obj[key].toString()?.split(',') || []
// }
} else if (key === 'candidateGroups') {
obj.userType = 'candidateGroups'
obj[key] = obj[key]?.split(',') || []
// if (obj[key].toString().indexOf(",") !== -1) {
//
// }else {
// obj[key] = obj[key].toString()?.split(',') || []
// }
} else if (key === 'assignee') {
obj.userType = 'assignee'
}

428
ruoyi-ui/src/components/Process/components/nodePanel/task.vue
View File

@@ -16,6 +16,32 @@
<el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
</el-badge>
</template>
<template #checkSingleUser>
<el-input placeholder="请选择人员" class="input-with-select" v-model="checkValues">
<!--指定用户-->
<el-button slot="append" size="mini" icon="el-icon-user" @click="singleUserCheck"></el-button>
<el-divider direction="vertical"></el-divider>
<!--选择表达式-->
<el-button slot="append" size="mini" icon="el-icon-tickets" @click="singleExpCheck('assignee')"></el-button>
</el-input>
</template>
<template #checkMultipleUser>
<el-input placeholder="请选择候选用户" class="input-with-select" v-model="checkValues">
<!--候选用户-->
<el-button slot="append" size="mini" icon="el-icon-user" @click="multipleUserCheck"></el-button>
<el-divider direction="vertical"></el-divider>
<!--选择表达式-->
<el-button slot="append" size="mini" icon="el-icon-tickets" @click="singleExpCheck('candidateUsers')"></el-button>
</el-input>
</template>
<template #checkRole>
<el-input placeholder="请选择候选角色" class="input-with-select" v-model="checkValues">
<!--候选角色-->
<!-- <el-button slot="append" size="mini" icon="el-icon-user" @click="singleRoleCheck"></el-button>-->
<!-- <el-divider direction="vertical"></el-divider>-->
<el-button slot="append" size="mini" icon="el-icon-tickets" @click="multipleRoleCheck"></el-button>
</el-input>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
@@ -35,6 +61,48 @@
:modeler="modeler"
@close="finishMultiInstance"
/>
<!--选择人员-->
<el-dialog
title="选择人员"
:visible.sync="userVisible"
width="60%"
:close-on-press-escape="false"
:show-close="false"
>
<flow-user :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user>
<span slot="footer" class="dialog-footer">
<el-button @click="userVisible = false">取 消</el-button>
<el-button type="primary" @click="checkUserComplete">确 定</el-button>
</span>
</el-dialog>
<!--选择表达式-->
<el-dialog
title="选择表达式"
:visible.sync="expVisible"
width="60%"
:close-on-press-escape="false"
:show-close="false"
>
<flow-exp @handleSingleExpSelect="handleSingleExpSelect"></flow-exp>
<span slot="footer" class="dialog-footer">
<el-button @click="expVisible = false">取 消</el-button>
<el-button type="primary" @click="checkExpComplete">确 定</el-button>
</span>
</el-dialog>
<!--选择角色-->
<el-dialog
title="选择候选角色"
:visible.sync="roleVisible"
width="60%"
:close-on-press-escape="false"
:show-close="false"
>
<flow-role :checkType="checkType" @handleRoleSelect="handleRoleSelect"></flow-role>
<span slot="footer" class="dialog-footer">
<el-button @click="roleVisible = false">取 消</el-button>
<el-button type="primary" @click="checkRoleComplete">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
@@ -44,11 +112,19 @@ import executionListenerDialog from './property/executionListener'
import taskListenerDialog from './property/taskListener'
import multiInstanceDialog from './property/multiInstance'
import { commonParse, userTaskParse } from '../../common/parseElement'
import FlowUser from '@/components/flow/User'
import FlowRole from '@/components/flow/Role'
import FlowExp from '@/components/flow/Expression'
import log from "@/views/monitor/job/log";
export default {
components: {
executionListenerDialog,
taskListenerDialog,
multiInstanceDialog
multiInstanceDialog,
FlowUser,
FlowRole,
FlowExp,
},
mixins: [mixinPanel],
props: {
@@ -59,6 +135,10 @@ export default {
groups: {
type: Array,
required: true
},
exps: {
type: Array,
required: true
}
},
data() {
@@ -66,7 +146,7 @@ export default {
userTypeOption: [
{ label: '指定人员', value: 'assignee' },
{ label: '候选人员', value: 'candidateUsers' },
{ label: '候选组', value: 'candidateGroups' }
{ label: '候选角色', value: 'candidateGroups' }
],
dataTypeOption: [
{ label: '固定', value: 'fixed' },
@@ -76,7 +156,23 @@ export default {
executionListenerLength: 0,
taskListenerLength: 0,
hasMultiInstance: false,
formData: {}
userVisible: false,
roleVisible: false,
expVisible: false,
formData: {},
assignee: null,
candidateUsers: "",
candidateGroups: null,
// 选类型
checkType: 'single',
// 选中的值
checkValues: null,
// 用户列表
userList: this.users,
groupList: this.groups,
expList: this.exps,
// 表达式类型
expType: null,
}
},
computed: {
@@ -116,63 +212,65 @@ export default {
{
xType: 'select',
name: 'userType',
label: '人员类型',
label: '用户类型',
dic: _this.userTypeOption,
show: !!_this.showConfig.userType
},
{
xType: 'radio',
name: 'dataType',
label: '指定方式',
dic: _this.dataTypeOption,
show: !!_this.showConfig.dataType,
rules: [{ required: true, message: '请指定方式' }]
},
// {
// xType: 'input',
// name: 'assigneeFixed',
// label: '指定人(表达式)',
// show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed'
// xType: 'radio',
// name: 'dataType',
// label: '指定方式',
// dic: _this.dataTypeOption,
// show: !!_this.showConfig.dataType,
// rules: [{ required: true, message: '请指定方式' }]
// },
// {
// xType: 'input',
// name: 'candidateUsersFixed',
// label: '候选人(表达式)',
// show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed'
// xType: 'select',
// name: 'assignee',
// label: '指定人员',
// allowCreate: true,
// filterable: true,
// dic: { data: _this.users, label: 'nickName', value: 'userId' },
// show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
// },
// {
// xType: 'input',
// name: 'candidateGroupsFixed',
// label: '候选组(表达式)',
// show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed'
// xType: 'select',
// name: 'candidateUsers',
// label: '候选人员',
// multiple: true,
// allowCreate: true,
// filterable: true,
// dic: { data: _this.users, label: 'nickName', value: 'userId' },
// show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
// },
// {
// xType: 'select',
// name: 'candidateGroups',
// label: '候选组',
// multiple: true,
// allowCreate: true,
// filterable: true,
// dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
// show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
// },
{
xType: 'select',
name: 'assignee',
xType: 'slot',
name: 'checkSingleUser',
label: '指定人员',
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'nickName', value: 'userId' },
// rules: [{ required: true, message: '指定人员不能为空' }],
// dic: { data: _this.users, label: 'nickName', value: 'userId' },
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
},
{
xType: 'select',
name: 'candidateUsers',
xType: 'slot',
name: 'checkMultipleUser',
label: '候选人员',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'nickName', value: 'userId' },
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
},
{
xType: 'select',
name: 'candidateGroups',
label: '候选组',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
xType: 'slot',
name: 'checkRole',
label: '候选角色',
show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
},
{
@@ -280,50 +378,51 @@ export default {
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
this.updateProperties({'flowable:userType': type})
})
}
},
// 动态选择流程执行人
'formData.dataType': function(val) {
const that = this
this.updateProperties({'flowable:dataType': val})
if (val === 'dynamic') {
this.updateProperties({'flowable:userType': that.formData.userType})
}
// 切换时 删除之前选中的值
const types = ['assignee', 'candidateUsers', 'candidateGroups']
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
})
// 传值到父组件
const params = {
dataType: val,
userType: this.formData.userType
}
this.$emit('dataType', params)
},
'formData.assignee': function(val) {
if (this.formData.userType !== 'assignee') {
delete this.element.businessObject.$attrs[`flowable:assignee`]
return
}
this.updateProperties({'flowable:assignee': val})
},
'formData.candidateUsers': function(val) {
if (this.formData.userType !== 'candidateUsers') {
delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
return
}
this.updateProperties({'flowable:candidateUsers': val?.join(',')})
},
'formData.candidateGroups': function(val) {
if (this.formData.userType !== 'candidateGroups') {
delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
return
}
this.updateProperties({'flowable:candidateGroups': val?.join(',')})
},
// // 动态选择流程执行人
// 'formData.dataType': function(val) {
// const that = this
// this.updateProperties({'flowable:dataType': val})
// if (val === 'dynamic') {
// this.updateProperties({'flowable:userType': that.formData.userType})
// }
// // 切换时 删除之前选中的值
// const types = ['assignee', 'candidateUsers', 'candidateGroups']
// types.forEach(type => {
// delete this.element.businessObject.$attrs[`flowable:${type}`]
// delete this.formData[type]
// })
// // 传值到父组件
// const params = {
// dataType: val,
// userType: this.formData.userType
// }
// this.$emit('dataType', params)
// },
// 'formData.assignee': function(val) {
// if (this.formData.userType !== 'assignee') {
// delete this.element.businessObject.$attrs[`flowable:assignee`]
// return
// }
// this.updateProperties({'flowable:assignee': val})
// },
// 'formData.candidateUsers': function(val) {
// if (this.formData.userType !== 'candidateUsers') {
// delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
// return
// }
// this.updateProperties({'flowable:candidateUsers': val?.join(',')})
// },
// 'formData.candidateGroups': function(val) {
// if (this.formData.userType !== 'candidateGroups') {
// delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
// return
// }
// this.updateProperties({'flowable:candidateGroups': val?.join(',')})
// },
'formData.async': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:async': val })
@@ -384,6 +483,7 @@ export default {
this.computedExecutionListenerLength()
this.computedTaskListenerLength()
this.computedHasMultiInstance()
this.getCheckValues()
},
methods: {
computedExecutionListenerLength() {
@@ -401,6 +501,81 @@ export default {
this.hasMultiInstance = false
}
},
// 数据回显
getCheckValues(){
const that = this;
console.log(that.element.businessObject,"this.element.businessObject")
const attrs = that.element.businessObject.$attrs;
const businessObject = that.element.businessObject;
// 指定用户
if (attrs.hasOwnProperty("flowable:assignee")){
const val = attrs["flowable:assignee"];
// 查找是否动态指定人员(选中流程表达式)
if (attrs["flowable:dataType"] === "dynamic"){
this.checkValues = that.expList.find(item => item.id == val).name;
}else {
this.checkValues = that.userList.find(item => item.userId == val).nickName;
}
// 候选用户
} else if (attrs.hasOwnProperty("flowable:candidateUsers")) {
const val = attrs["flowable:candidateUsers"];
if (attrs["flowable:dataType"] === "dynamic") {
this.checkValues = that.expList.find(item => item.id == val).name;
} else {
const array = [];
const vals = val.split(',');
vals.forEach(key => {
const user = that.userList.find(item => item.userId == key)
if (user) {
array.push(user.nickName);
}
})
this.checkValues = array.join(',');
}
// if (val.indexOf(",") !== -1) {
// const vals = val.split(',');
// vals.forEach(key => {
// const user = that.userList.find(item => item.userId == key)
// if (user) {
// array.push(user.nickName);
// }
// })
// this.checkValues = array.join(',');
// }else {
// const user = that.userList.find(item => item.userId == val);
// this.checkValues = user.nickName;
// }
} else if (businessObject.hasOwnProperty("candidateGroups")){
// 候选角色信息
const val = businessObject["candidateGroups"];
if (attrs["flowable:dataType"] === "dynamic") {
this.checkValues = that.expList.find(item => item.id == val).name;
} else {
const array = [];
const vals = val.split(',');
vals.forEach(key => {
const role = that.groupList.find(item => item.roleId == key)
if (role) {
array.push(role.roleName);
}
})
this.checkValues = array.join(',');
}
// if (val.indexOf(",") !== -1) {
// const vals = val.split(',');
// vals.forEach(key => {
// const role = that.groupList.find(item => item.roleId == key)
// if (role) {
// array.push(role.roleName);
// }
// })
// this.checkValues = array.join(',');
// }else {
// const role = that.groupList.find(item => item.roleId == val);
// this.checkValues = role.roleName;
// }
}
},
finishExecutionListener() {
if (this.dialogName === 'executionListenerDialog') {
this.computedExecutionListenerLength()
@@ -418,6 +593,93 @@ export default {
this.computedHasMultiInstance()
}
this.dialogName = ''
},
/*单选人员*/
singleUserCheck(){
this.userVisible = true;
this.checkType = "single";
},
/*多选人员*/
multipleUserCheck(){
this.userVisible = true;
this.checkType = "multiple";
},
/*单选角色*/
singleRoleCheck(){
this.roleVisible = true;
this.checkType = "single";
},
/*多选角色*/
multipleRoleCheck(){
this.roleVisible = true;
this.checkType = "multiple";
},
/*单选表达式*/
singleExpCheck(expType){
this.expVisible = true;
this.expType = expType;
},
// 选中表达式
handleSingleExpSelect(selection){
this.deleteFlowAttar();
console.log(this.element.businessObject,"element.businessObject")
this.updateProperties({'flowable:dataType': 'dynamic'})
if ("assignee" === this.expType){
this.updateProperties({'flowable:assignee': selection.id.toString()});
}else if ("candidateUsers" === this.expType) {
this.updateProperties({'flowable:candidateUsers': selection.id.toString()});
}
this.checkValues = selection.name;
this.expType = null;
},
// 用户选中数据
handleUserSelect(selection) {
console.log(selection,"handleUserSelect")
const that = this;
if (selection) {
that.deleteFlowAttar();
this.updateProperties({'flowable:dataType': 'fixed'})
if (selection instanceof Array){
const userIds = selection.map(item => item.userId);
const nickName = selection.map(item => item.nickName);
that.updateProperties({'flowable:candidateUsers': userIds.join(',')})
that.checkValues = nickName.join(',');
}else {
that.updateProperties({'flowable:assignee': selection.userId})
that.checkValues = selection.nickName;
}
}
},
// 角色选中数据
handleRoleSelect(selection,name) {
const that = this;
if (selection && name) {
that.deleteFlowAttar();
this.updateProperties({'flowable:dataType': 'fixed'})
that.updateProperties({'flowable:candidateGroups': selection});
that.checkValues = name;
}
},
/*用户选中赋值*/
checkUserComplete(){
this.userVisible = false;
this.checkType = "";
},
/*候选角色选中赋值*/
checkRoleComplete(){
this.roleVisible = false;
this.checkType = "";
},
/*表达式选中赋值*/
checkExpComplete(){
this.expVisible = false;
},
// 删除节点
deleteFlowAttar(){
delete this.element.businessObject.$attrs[`flowable:dataType`]
delete this.element.businessObject.$attrs[`flowable:assignee`]
delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
}
}
}

6
ruoyi-ui/src/components/Process/index.vue
View File

@@ -41,7 +41,7 @@
<div ref="canvas" class="canvas" />
</el-main>
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" @dataType="dataType" />
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :exps="exps" :categorys="categorys" @dataType="dataType" />
</el-aside>
</el-container>
</el-container>
@@ -79,6 +79,10 @@ export default {
type: Array,
default: () => []
},
exps: {
type: Array,
default: () => []
},
isView: {
type: Boolean,
default: false