update 支持选择组

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -153,7 +153,7 @@
     </el-form>
     <UserSelect ref="userSelectRef" :data="formData.candidateUsers" @confirm-call-back="userSelectCallBack"></UserSelect>
     <UserSelect ref="singleUserSelectRef" :data="formData.assignee" :multiple="false" @confirm-call-back="singleUserSelectCallBack"></UserSelect>
-    <RoleSelect ref="roleSelectRef" v-model="formData.roles"></RoleSelect>
+    <RoleSelect ref="roleSelectRef" :data="formData.candidateGroups" @confirm-call-back="roleSelectCallBack"></RoleSelect>
     <DueDate ref="dueDateRef" v-model="formData.dueDate"></DueDate>
   </div>
 </template>
@@ -168,7 +168,7 @@ import { TaskPanel } from 'bpmnDesign';
 import { AllocationTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
 import { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue';
 import { UserVO } from '@/api/system/user/types';
-import useModelerStore from '@/store/modules/modeler';
+import { RoleVO } from '@/api/system/role/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -176,7 +176,7 @@ interface PropType {
   element: Element;
 }
 const props = withDefaults(defineProps<PropType>(), {});
-const { modeling, showConfig, nameChange, idChange, updateProperties, getExtensionElements, createModdleElement } = usePanel({
+const { showConfig, nameChange, idChange, updateProperties, getExtensionElements, createModdleElement } = usePanel({
   element: toRaw(props.element)
 });
 const { parseData } = useParseElement({
@@ -218,21 +218,25 @@ const openDueDate = () => {
 const singleUserSelectCallBack = (data: UserVO[]) => {
   const user: UserVO = data.length !== 0 ? data[0] : undefined;
   updateProperties({ 'flowable:assignee': user?.userId });
-  assignee.value = user;
+  assignee.value = user ? user : { userName: '' };
-  const extensionElements = getExtensionElements();
+  formData.value.assignee = String(user?.userId);
-  let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
+  let extensionElements = getExtensionElements();
-  if (!extAssigneeElement) {
+  extensionElements.values = extensionElements.get('values').filter((item) => item.$type !== 'flowable:extAssignee');
-    extAssigneeElement = createModdleElement('flowable:extAssignee', { body: '' }, extensionElements);
+  if (user) {
+    const extAssigneeElement = createModdleElement('flowable:extAssignee', { body: '' }, extensionElements);
     extensionElements.get('values').push(extAssigneeElement);
+    extAssigneeElement.body = JSON.stringify({ userName: user.userName, userId: user.userId });
+  }
+  if (extensionElements.values.length === 0) {
+    extensionElements = undefined;
   }
-  extAssigneeElement.body = JSON.stringify({ userName: user.userName, userId: user.userId });
   updateProperties({ extensionElements: extensionElements });
 };
 const userSelectCallBack = (data: UserVO[]) => {
   let extensionElements = getExtensionElements();
   extensionElements.values = extensionElements.values.filter((item) => item.$type !== 'flowable:extCandidateUsers');
   if (data.length === 0) {
-    formData.value.candidateUsers = '';
+    formData.value.candidateUsers = undefined;
     updateProperties({ 'flowable:candidateUsers': undefined });
   } else {
     const userIds = data.map((item) => item.userId).join(',');
@@ -254,8 +258,22 @@ const userSelectCallBack = (data: UserVO[]) => {
   updateProperties({ extensionElements: extensionElements });
 };
 
+const roleSelectCallBack = (data: RoleVO[]) => {
+  if (data.length === 0) {
+    formData.value.candidateGroups = '';
+    updateProperties({ 'flowable:candidateGroups': undefined });
+  } else {
+    const roleIds = data.map((item) => item.roleId).join(',');
+    formData.value.candidateGroups = roleIds;
+    updateProperties({ 'flowable:candidateGroups': roleIds });
+  }
+};
+
 const taskTabClick = (e) => {
-  formData.value.roles = [];
+  formData.value.candidateGroups = '';
+  formData.value.candidateUsers = '';
+  formData.value.assignee = '';
+  assignee.value = {};
 };
 
 const syncChange = (newVal) => {
@@ -269,24 +287,12 @@ const selectUserLength = computed(() => {
   }
 });
 const selectRoleLength = computed(() => {
-  if (formData.value.roles) {
+  if (formData.value.candidateGroups) {
-    return formData.value.roles.length;
+    return formData.value.candidateGroups.split(',').length;
   } else {
     return 0;
   }
 });
-watch(
-  () => formData.value.roles,
-  (newVal: Record<string, any>[]) => {
-    if (newVal?.length > 0) {
-      const roleIds = newVal.map((item) => item.roleId).join(',');
-      updateProperties({ 'flowable:candidateGroups': roleIds });
-    } else {
-      updateProperties({ 'flowable:candidateGroups': undefined });
-    }
-  },
-  { deep: true }
-);
 watch(
   () => formData.value.async,
   (newVal: boolean) => {