diff --git a/src/components/BpmnDesign/assets/moddle/flowable.ts b/src/components/BpmnDesign/assets/moddle/flowable.ts index 7dc22f6..c74f33c 100644 --- a/src/components/BpmnDesign/assets/moddle/flowable.ts +++ b/src/components/BpmnDesign/assets/moddle/flowable.ts @@ -7,6 +7,33 @@ export default { }, 'associations': [], 'types': [ + { + 'name': 'flowable:property', + 'superClass': ['Element'], + 'properties': [ + { + 'name': 'name', + 'isAttr': true, + 'type': 'String' + }, + { + 'name': 'value', + 'isAttr': true, + 'type': 'String' + } + ] + }, + { + 'name': 'flowable:properties', + 'superClass': ['Element'], + 'properties': [ + { + 'name': 'values', + 'type': 'flowable:property', + 'isMany': true + } + ] + }, { 'name': 'InOutBinding', 'superClass': ['Element'], diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue index aebd2eb..2ee5e8c 100644 --- a/src/components/BpmnDesign/index.vue +++ b/src/components/BpmnDesign/index.vue @@ -386,7 +386,7 @@ const getProcessElement = () => { :deep(.el-dialog .el-dialog__body) { max-height: 100% !important; - height: calc(100vh - 200px); + height: calc(100vh - 50px); } .process-toolbar { diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue index dc04543..0a5eb31 100644 --- a/src/components/BpmnDesign/panel/TaskPanel.vue +++ b/src/components/BpmnDesign/panel/TaskPanel.vue @@ -37,49 +37,60 @@ - + - - + + - + 选择人员 - + 选择组 - 开发中 + + + + + + + + + + + + +
+ + + 选择人员 + + + + + 选择组 + + +
+ + + {{ item.label }} + + +
- - - - - - - - - - - - - 选择角色 - - - - - {{ item.label }} - - {{ item.label }} @@ -140,8 +151,8 @@ - - + + @@ -152,11 +163,10 @@ import usePanel from '@/components/BpmnDesign/hooks/usePanel'; import UserSelect from '@/components/UserSelect'; import RoleSelect from '@/components/RoleSelect'; import DueDate from '@/components/BpmnDesign/panel/property/DueDate.vue'; -import { Element, Modeler } from 'bpmn'; +import { Element, Moddle, Modeler, Modeling } from 'bpmn'; import { TaskPanel } from 'bpmnDesign'; -import { AuditUserTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums'; +import { AllocationTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums'; import { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue'; -import { getUserListByIds } from '@/api/workflow/workflowUser'; import { UserVO } from '@/api/system/user/types'; const { proxy } = getCurrentInstance() as ComponentInternalInstance; @@ -166,7 +176,7 @@ interface PropType { element: Element; } const props = withDefaults(defineProps(), {}); -const { nameChange, idChange, showConfig, updateProperties } = usePanel({ +const { nameChange, idChange, showConfig, updateProperties, createModdleElement } = usePanel({ modeler: props.modeler, element: toRaw(props.element) }); @@ -176,11 +186,9 @@ const { parse, formData } = useParseElement({ initData: { id: '', name: '', - user: {}, - // roles: [], dueDate: '', multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL, - auditUserType: AuditUserTypeEnum.USER, + allocationType: AllocationTypeEnum.USER, specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE } }); @@ -190,6 +198,8 @@ const userSelectRef = ref>(); const singleUserSelectRef = ref>(); const roleSelectRef = ref>(); const dueDateRef = ref>(); + +const isMultiple = ref(true); const openUserSelect = () => { userSelectRef.value.open(); }; @@ -203,12 +213,70 @@ const openDueDate = () => { dueDateRef.value.openDialog(); }; +const singleUserSelectCallBack = (data: UserVO[]) => { + const modeling = props.modeler.get('modeling'); + if (data.length !== 0) { + const user = data[0]; + formData.value.userName = user.userName; + const userId = user.userId; + updateProperties({ 'flowable:assignee': userId }); + let extensionElements = props.element.businessObject.get('extensionElements'); + if (!extensionElements) { + extensionElements = createModdleElement('bpmn:ExtensionElements', {}, props.element.businessObject); + modeling.updateModdleProperties(toRaw(props.element), toRaw(props.element.businessObject), { extensionElements }); + } + let propertiesElements; + if (!extensionElements.values) { + propertiesElements = createModdleElement('flowable:properties', {}, extensionElements); + modeling.updateModdleProperties(toRaw(props.element), extensionElements, { + values: [...extensionElements.get('values'), propertiesElements] + }); + } else { + propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties'); + } + + let userNameProperty; + if (propertiesElements.values) { + userNameProperty = propertiesElements.values.find((item) => { + if (item['name'] === 'userName') { + return true; + } + return false; + }); + userNameProperty['name'] = 'userName'; + userNameProperty['value'] = user.userName; + } else { + userNameProperty = createModdleElement('flowable:property', { name: 'userName', value: user.userName }, propertiesElements); + modeling.updateModdleProperties(toRaw(props.element), propertiesElements, { + values: [...propertiesElements.get('values'), userNameProperty] + }); + } + } else { + updateProperties({ 'flowable:assignee': undefined }); + } +}; +const userSelectCallBack = (data: UserVO[]) => { + if (data?.length !== 0) { + // 获取userId 用逗号,隔开 + const userIds = data.map((item) => item.userId).join(','); + updateProperties({ 'flowable:candidateUsers': userIds }); + formData.value.candidateUsers = userIds; + } else { + updateProperties({ 'flowable:candidateUsers': undefined }); + formData.value.candidateUsers = undefined; + } +}; + +const taskTabClick = (e) => { + formData.value.roles = []; +}; + const syncChange = (newVal) => { updateProperties({ 'flowable:async': newVal }); }; const selectUserLength = computed(() => { - if (formData.value.users) { - return formData.value.users.length; + if (formData.value.candidateUsers) { + return formData.value.candidateUsers.split(',').length; } else { return 0; } @@ -220,13 +288,6 @@ const selectRoleLength = computed(() => { return 0; } }); -watch( - () => formData.value.auditUserType, - (val, oldVal) => { - formData.value.users = []; - formData.value.roles = []; - } -); watch( () => formData.value.roles, (newVal: Record[]) => { @@ -240,28 +301,6 @@ watch( }, { deep: true } ); -watch( - () => formData.value.users, - (newVal: UserVO[]) => { - console.log(newVal); - if (newVal?.length === 1) { - const user = newVal[0]; - const userId = user.userId; - updateProperties({ 'flowable:assignee': userId }); - updateProperties({ 'flowable:candidateUsers': undefined }); - // 删除会签属性 - } else if (newVal?.length > 1) { - // 获取userId 用逗号,隔开 - const userIds = newVal.map((item) => item.userId).join(','); - updateProperties({ 'flowable:candidateUsers': userIds }); - updateProperties({ 'flowable:assignee': undefined }); - } else { - updateProperties({ 'flowable:candidateUsers': undefined }); - updateProperties({ 'flowable:assignee': undefined }); - } - }, - { deep: true } -); watch( () => formData.value.async, (newVal: boolean) => { @@ -302,26 +341,17 @@ watch( } } ); -const initUsers = async () => { - if (formData.value.candidateUsers) { - const userIds = formData.value.candidateUsers.split(','); - const res = await getUserListByIds(userIds); - formData.value.users = res.data; - } -}; -onBeforeMount(() => { - initUsers(); -}); + const formRules = ref({ id: [{ required: true, message: '请输入', trigger: 'blur' }], name: [{ required: true, message: '请输入', trigger: 'blur' }] }); -const AuditUserTypeSelect = [ - { id: 'b9cdf970-dd91-47c0-819f-42a7010ca2a6', label: '指定人员', value: 'user' }, - { id: '3f7ccbcd-c464-4602-bb9d-e96649d10585', label: '角色', value: 'role' }, - { id: 'c49065e0-7f2d-4c09-aedb-ab2d47d9a454', label: '发起人自己', value: 'yourself' }, - { id: '6ef40a03-7e9a-4898-89b2-c88fe9064542', label: '发起人指定', value: 'specify' } +const AllocationTypeSelect = [ + { id: 'b9cdf970-dd91-47c0-819f-42a7010ca2a6', label: '指定人员', value: AllocationTypeEnum.USER }, + { id: '3f7ccbcd-c464-4602-bb9d-e96649d10585', label: '候选人员', value: AllocationTypeEnum.CANDIDATE }, + { id: 'c49065e0-7f2d-4c09-aedb-ab2d47d9a454', label: '发起人自己', value: AllocationTypeEnum.YOURSELF }, + { id: '6ef40a03-7e9a-4898-89b2-c88fe9064542', label: '发起人指定', value: AllocationTypeEnum.SPECIFY } ]; const SpecifyDesc = [ { id: 'fa253b34-4335-458c-b1bc-b039e2a2b7a6', label: '指定一个人', value: 'specifySingle' },