fate: 升级流程设计器,表单设计器
This commit is contained in:
zhuyong
424
ruoyi-ui/src/components/Process/panel/taskPanel.vue
Executable file
424
ruoyi-ui/src/components/Process/panel/taskPanel.vue
Executable file
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="80px" size="small">
|
||||
<el-form-item label="异步">
|
||||
<el-switch v-model="bpmnFormData.async" active-text="是" inactive-text="否" @change="updateElementTask('async')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型">
|
||||
<el-select v-model="bpmnFormData.userType" placeholder="选择人员" @change="updateUserType">
|
||||
<el-option
|
||||
v-for="item in userTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="指定人员" v-if="bpmnFormData.userType === 'assignee'">
|
||||
<el-input-tag v-model="bpmnFormData.assignee" :value="bpmnFormData.assignee"/>
|
||||
<el-button-group class="ml-4" style="margin-top: 4px">
|
||||
<!--指定人员-->
|
||||
<el-tooltip class="box-item" effect="dark" content="指定人员" placement="bottom">
|
||||
<el-button size="mini" type="primary" icon="el-icon-user" @click="singleUserCheck"/>
|
||||
</el-tooltip>
|
||||
<!--选择表达式-->
|
||||
<el-tooltip class="box-item" effect="dark" content="选择表达式" placement="bottom">
|
||||
<el-button size="mini" type="warning" icon="el-icon-postcard" @click="singleExpCheck"/>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="候选人员" v-else-if="bpmnFormData.userType === 'candidateUsers'">
|
||||
<el-input-tag v-model="bpmnFormData.candidateUsers" :value="bpmnFormData.candidateUsers"/>
|
||||
<el-button-group class="ml-4" style="margin-top: 4px">
|
||||
<!--候选人员-->
|
||||
<el-tooltip class="box-item" effect="dark" content="候选人员" placement="bottom">
|
||||
<el-button size="mini" type="primary" icon="el-icon-user" @click="multipleUserCheck"/>
|
||||
</el-tooltip>
|
||||
<!--选择表达式-->
|
||||
<el-tooltip class="box-item" effect="dark" content="选择表达式" placement="bottom">
|
||||
<el-button size="mini" type="warning" icon="el-icon-postcard" @click="singleExpCheck"/>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="候选角色" v-else>
|
||||
<el-input-tag v-model="bpmnFormData.candidateGroups" :value="bpmnFormData.candidateGroups"/>
|
||||
<el-button-group class="ml-4" style="margin-top: 4px">
|
||||
<!--候选角色-->
|
||||
<el-tooltip class="box-item" effect="dark" content="候选角色" placement="bottom">
|
||||
<el-button size="mini" type="primary" icon="el-icon-user" @click="multipleRoleCheck"/>
|
||||
</el-tooltip>
|
||||
<!--选择表达式-->
|
||||
<el-tooltip class="box-item" effect="dark" content="选择表达式" placement="bottom">
|
||||
<el-button size="mini" type="warning" icon="el-icon-postcard" @click="singleExpCheck"/>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="优先级">
|
||||
<el-input v-model="bpmnFormData.priority" @change="updateElementTask('priority')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="到期时间">
|
||||
<el-input v-model="bpmnFormData.dueDate" @change="updateElementTask('dueDate')"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!--选择人员-->
|
||||
<el-dialog
|
||||
title="选择人员"
|
||||
:visible.sync="userVisible"
|
||||
width="60%"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<flow-user v-if="userVisible" :checkType="checkType" :selectValues="selectData.assignee || selectData.candidateUsers" @handleUserSelect="userSelect"></flow-user>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="userVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="checkUserComplete">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--选择角色-->
|
||||
<el-dialog
|
||||
title="选择候选角色"
|
||||
:visible.sync="roleVisible"
|
||||
width="60%"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<flow-role v-if="roleVisible" :selectValues="selectData.candidateGroups" @handleRoleSelect="roleSelect"></flow-role>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="roleVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="checkRoleComplete">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--选择表达式-->
|
||||
<el-dialog
|
||||
title="选择表达式"
|
||||
:visible.sync="expVisible"
|
||||
width="60%"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<flow-exp v-if="expVisible" :selectValues="selectData.exp" @handleSingleExpSelect="expSelect"></flow-exp>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="expVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="checkExpComplete">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FlowUser from '@/components/flow/User'
|
||||
import FlowRole from '@/components/flow/Role'
|
||||
import FlowExp from '@/components/flow/Expression'
|
||||
import ElInputTag from '@/components/flow/ElInputTag'
|
||||
import {StrUtil} from '@/utils/StrUtil'
|
||||
|
||||
export default {
|
||||
name: "TaskPanel",
|
||||
components: {
|
||||
FlowUser,
|
||||
FlowRole,
|
||||
FlowExp,
|
||||
ElInputTag
|
||||
},
|
||||
/** 组件传值 */
|
||||
props : {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userVisible: false,
|
||||
roleVisible: false,
|
||||
expVisible: false,
|
||||
isIndeterminate: true,
|
||||
checkType: 'single', // 选类
|
||||
userType: '',
|
||||
userTypeOption: [
|
||||
{label: '指定人员', value: 'assignee'},
|
||||
{label: '候选人员', value: 'candidateUsers'},
|
||||
{label: '候选角色', value: 'candidateGroups'}
|
||||
],
|
||||
checkAll: false,
|
||||
bpmnFormData: {
|
||||
userType: "",
|
||||
assignee: "",
|
||||
candidateUsers: "",
|
||||
candidateGroups: "",
|
||||
dueDate: "",
|
||||
priority: "",
|
||||
dataType: "",
|
||||
expId: "",
|
||||
},
|
||||
// 数据回显
|
||||
selectData: {
|
||||
assignee: null,
|
||||
candidateUsers: null,
|
||||
candidateGroups: null,
|
||||
exp: null,
|
||||
},
|
||||
otherExtensionList:[],
|
||||
}
|
||||
},
|
||||
|
||||
/** 传值监听 */
|
||||
watch: {
|
||||
id: {
|
||||
handler(newVal) {
|
||||
if (StrUtil.isNotBlank(newVal)) {
|
||||
this.resetTaskForm();
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即生效
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 初始化表单
|
||||
resetTaskForm() {
|
||||
// 初始化设为空值
|
||||
this.bpmnFormData = {
|
||||
userType: "",
|
||||
assignee: "",
|
||||
candidateUsers: "",
|
||||
candidateGroups: "",
|
||||
dueDate: "",
|
||||
priority: "",
|
||||
dataType: "",
|
||||
expId: "",
|
||||
}
|
||||
this.selectData = {
|
||||
assignee: null,
|
||||
candidateUsers: null,
|
||||
candidateGroups: null,
|
||||
exp: null,
|
||||
}
|
||||
// 流程节点信息上取值
|
||||
for (let key in this.bpmnFormData) {
|
||||
const value = this.modelerStore.element?.businessObject[key] || this.bpmnFormData[key];
|
||||
this.$set(this.bpmnFormData, key, value);
|
||||
}
|
||||
// 人员信息回显
|
||||
this.checkValuesEcho(this.bpmnFormData);
|
||||
},
|
||||
|
||||
// 更新节点信息
|
||||
updateElementTask(key) {
|
||||
const taskAttr = Object.create(null);
|
||||
taskAttr[key] = this.bpmnFormData[key] || "";
|
||||
this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
|
||||
},
|
||||
|
||||
// 更新自定义流程节点/参数信息
|
||||
updateCustomElement(key, value) {
|
||||
const taskAttr = Object.create(null);
|
||||
taskAttr[key] = value;
|
||||
this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
|
||||
},
|
||||
|
||||
// 更新人员类型
|
||||
updateUserType(val) {
|
||||
// 删除xml中已选择数据类型节点
|
||||
this.deleteFlowAttar();
|
||||
delete this.modelerStore.element.businessObject[`userType`]
|
||||
// 清除已选人员数据
|
||||
this.bpmnFormData[val] = null;
|
||||
this.selectData = {
|
||||
assignee: null,
|
||||
candidateUsers: null,
|
||||
candidateGroups: null,
|
||||
exp: null,
|
||||
}
|
||||
// 写入userType节点信息到xml
|
||||
this.updateCustomElement('userType', val);
|
||||
},
|
||||
|
||||
// 设计器右侧表单数据回显
|
||||
checkValuesEcho(formData) {
|
||||
if (StrUtil.isNotBlank(formData.expId)) {
|
||||
this.getExpList(formData.expId, formData.userType);
|
||||
} else {
|
||||
if ("candidateGroups" === formData.userType) {
|
||||
this.getRoleList(formData[formData.userType], formData.userType);
|
||||
} else {
|
||||
this.getUserList(formData[formData.userType], formData.userType);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 获取表达式信息
|
||||
getExpList(val, key) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
this.bpmnFormData[key] = this.modelerStore.expList?.find(item => item.id.toString() === val).name;
|
||||
this.selectData.exp = this.modelerStore.expList?.find(item => item.id.toString() === val).id;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取人员信息
|
||||
getUserList(val, key) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
const newArr = this.modelerStore.userList?.filter(i => val.split(',').includes(i.userId.toString()))
|
||||
this.bpmnFormData[key] = newArr.map(item => item.nickName).join(',');
|
||||
if ('assignee' === key) {
|
||||
this.selectData[key] = newArr.find(item => item.userId.toString() === val).userId;
|
||||
} else {
|
||||
this.selectData[key] = newArr.map(item => item.userId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 获取角色信息
|
||||
getRoleList(val, key) {
|
||||
if (StrUtil.isNotBlank(val)) {
|
||||
const newArr = this.modelerStore.roleList?.filter(i => val.split(',').includes(i.roleId.toString()))
|
||||
this.bpmnFormData[key] = newArr.map(item => item.roleName).join(',');
|
||||
if ('assignee' === key) {
|
||||
this.selectData[key] = newArr.find(item => item.roleId.toString() === val).roleId;
|
||||
} else {
|
||||
this.selectData[key] = newArr.map(item => item.roleId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// ------ 流程审批人员信息弹出框 start---------
|
||||
|
||||
/*单选人员*/
|
||||
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;
|
||||
},
|
||||
|
||||
/*单选表达式*/
|
||||
singleExpCheck() {
|
||||
this.expVisible = true;
|
||||
},
|
||||
|
||||
// 表达式选中数据
|
||||
expSelect(selection) {
|
||||
if (selection) {
|
||||
this.deleteFlowAttar();
|
||||
this.bpmnFormData[this.bpmnFormData.userType] = selection.name;
|
||||
this.updateCustomElement('dataType', selection.dataType);
|
||||
this.updateCustomElement('expId', selection.id.toString());
|
||||
this.updateCustomElement(this.bpmnFormData.userType, selection.expression);
|
||||
this.handleSelectData("exp", selection.id);
|
||||
}
|
||||
},
|
||||
|
||||
// 用户选中数据 TODO: 后面更改为 点击确认按钮再赋值人员信息
|
||||
userSelect(selection) {
|
||||
if (selection) {
|
||||
this.deleteFlowAttar();
|
||||
this.updateCustomElement('dataType', 'fixed');
|
||||
if (selection instanceof Array) {
|
||||
const userIds = selection.map(item => item.userId);
|
||||
const nickName = selection.map(item => item.nickName);
|
||||
// userType = candidateUsers
|
||||
this.bpmnFormData[this.bpmnFormData.userType] = nickName.join(',');
|
||||
this.updateCustomElement(this.bpmnFormData.userType, userIds.join(','));
|
||||
this.handleSelectData(this.bpmnFormData.userType, userIds);
|
||||
} else {
|
||||
// userType = assignee
|
||||
this.bpmnFormData[this.bpmnFormData.userType] = selection.nickName;
|
||||
this.updateCustomElement(this.bpmnFormData.userType, selection.userId);
|
||||
this.handleSelectData(this.bpmnFormData.userType, selection.userId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 角色选中数据
|
||||
roleSelect(selection, name) {
|
||||
if (selection && name) {
|
||||
this.deleteFlowAttar();
|
||||
this.bpmnFormData[this.bpmnFormData.userType] = name;
|
||||
this.updateCustomElement('dataType', 'fixed');
|
||||
// userType = candidateGroups
|
||||
this.updateCustomElement(this.bpmnFormData.userType, selection);
|
||||
this.handleSelectData(this.bpmnFormData.userType, selection);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理人员回显
|
||||
handleSelectData(key, value) {
|
||||
for (let oldKey in this.selectData) {
|
||||
if (key !== oldKey) {
|
||||
this.$set(this.selectData, oldKey, null);
|
||||
} else {
|
||||
this.$set(this.selectData, oldKey, value);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/*用户选中赋值*/
|
||||
checkUserComplete() {
|
||||
this.userVisible = false;
|
||||
this.checkType = "";
|
||||
},
|
||||
|
||||
/*候选角色选中赋值*/
|
||||
checkRoleComplete() {
|
||||
this.roleVisible = false;
|
||||
},
|
||||
|
||||
/*表达式选中赋值*/
|
||||
checkExpComplete() {
|
||||
this.expVisible = false;
|
||||
},
|
||||
|
||||
// 删除节点
|
||||
deleteFlowAttar() {
|
||||
delete this.modelerStore.element.businessObject[`dataType`]
|
||||
delete this.modelerStore.element.businessObject[`expId`]
|
||||
delete this.modelerStore.element.businessObject[`assignee`]
|
||||
delete this.modelerStore.element.businessObject[`candidateUsers`]
|
||||
delete this.modelerStore.element.businessObject[`candidateGroups`]
|
||||
},
|
||||
|
||||
// 去重数据
|
||||
unique(arr, code) {
|
||||
const res = new Map();
|
||||
return arr.filter((item) => !res.has(item[code]) && res.set(item[code], 1));
|
||||
},
|
||||
|
||||
// 更新扩展属性信息
|
||||
updateElementExtensions(properties) {
|
||||
const extensions = this.modelerStore.moddle.create("bpmn:ExtensionElements", {
|
||||
values: this.otherExtensionList.concat([properties])
|
||||
});
|
||||
|
||||
this.modelerStore.modeling.updateProperties(this.modelerStore.element, {
|
||||
extensionElements: extensions
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user