From e78e4aaf5a57904e729506a559e019592899822a Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Fri, 26 Jan 2024 01:16:22 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/workflow/workflowUser/index.ts        |  6 +-
 src/components/BpmnDesign/panel/TaskPanel.vue | 90 ++++++++++++++++---
 src/components/RoleSelect/index.vue           |  6 +-
 src/components/UserSelect/index.vue           |  6 +-
 src/types/bpmn/design.d.ts                    |  6 +-
 vite.config.ts                                |  3 +
 6 files changed, 99 insertions(+), 18 deletions(-)

diff --git a/src/api/workflow/workflowUser/index.ts b/src/api/workflow/workflowUser/index.ts
index e9ee6b5..e3ed8d9 100644
--- a/src/api/workflow/workflowUser/index.ts
+++ b/src/api/workflow/workflowUser/index.ts
@@ -1,4 +1,6 @@
 import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { UserVO } from '@/api/system/user/types';
 
 /**
  * 分页查询工作流选择加签人员
@@ -27,10 +29,10 @@ export const getWorkflowDeleteMultiInstanceList = (taskId: string) => {
 
 /**
  * 按照用户id查询用户
- * @param query
+ * @param userIdList
  * @returns {*}
  */
-export const getUserListByIds = (userIdList: Array<any>) => {
+export const getUserListByIds = (userIdList: any[]): AxiosPromise<UserVO[]> => {
   return request({
     url: '/workflow/user/getUserListByIds/' + userIdList,
     method: 'get'
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
index 8a5aa7f..20078e5 100644
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/src/components/BpmnDesign/panel/TaskPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-form ref="formRef" size="small" :model="formData" :rules="formRules" label-width="90px">
-      <el-collapse>
+      <el-collapse v-model="currentCollapseItem">
         <el-collapse-item name="1">
           <template #title>
             <div class="collapse__title">
@@ -42,13 +42,13 @@
               </el-select>
             </el-form-item>
             <el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.USER && showConfig.users" style="">
-              <el-badge :value="formData.users.length" :max="99">
+              <el-badge :value="selectUserLength" :max="99">
                 <el-button type="primary" @click="openUserSelect">选择人员</el-button>
                 <UserSelect ref="userSelectRef" v-model="formData.users"></UserSelect>
               </el-badge>
             </el-form-item>
             <el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.ROLE && showConfig.roles" style="">
-              <el-badge :value="formData.roles.length" :max="99">
+              <el-badge :value="selectRoleLength" :max="99">
                 <el-button type="primary" @click="openUserSelect">选择角色</el-button>
                 <RoleSelect ref="userSelectRef" v-model="formData.roles"></RoleSelect>
               </el-badge>
@@ -131,6 +131,10 @@ import { Element, Modeler } from 'bpmn';
 import { TaskPanel } from 'bpmnDesign';
 import { AuditUserTypeEnum, 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;
 
 interface PropType {
   modeler: Modeler;
@@ -147,8 +151,8 @@ const { parse, formData } = useParseElement<TaskPanel>({
   initData: {
     id: '',
     name: '',
-    users: [],
-    roles: [],
+    // users: [],
+    // roles: [],
     dueDate: '',
     multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
     auditUserType: AuditUserTypeEnum.USER,
@@ -156,6 +160,7 @@ const { parse, formData } = useParseElement<TaskPanel>({
   }
 });
 
+const currentCollapseItem = ref(['1', '2']);
 const userSelectRef = ref<InstanceType<typeof UserSelect>>();
 const dueDateRef = ref<InstanceType<typeof DueDate>>();
 const openUserSelect = () => {
@@ -168,7 +173,20 @@ const openDueDate = () => {
 const syncChange = (newVal) => {
   updateProperties({ 'flowable:async': newVal });
 };
-
+const selectUserLength = computed(() => {
+  if (formData.value.users) {
+    return formData.value.users.length;
+  } else {
+    return 0;
+  }
+});
+const selectRoleLength = computed(() => {
+  if (formData.value.roles) {
+    return formData.value.roles.length;
+  } else {
+    return 0;
+  }
+});
 watch(
   () => formData.value.auditUserType,
   (val, oldVal) => {
@@ -179,7 +197,7 @@ watch(
 watch(
   () => formData.value.roles,
   (newVal: Record<string, any>[]) => {
-    if (newVal.length > 0) {
+    if (newVal?.length > 0) {
       // 获取userId 用逗号,隔开
       const roleIds = newVal.map((item) => item.roleId).join(',');
       updateProperties({ 'flowable:candidateGroups': roleIds });
@@ -191,14 +209,15 @@ watch(
 );
 watch(
   () => formData.value.users,
-  (newVal: Record<string, any>[]) => {
-    if (newVal.length === 1) {
+  (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) {
+    } else if (newVal?.length > 1) {
       // 获取userId 用逗号,隔开
       const userIds = newVal.map((item) => item.userId).join(',');
       updateProperties({ 'flowable:candidateUsers': userIds });
@@ -210,7 +229,56 @@ watch(
   },
   { deep: true }
 );
-
+watch(
+  () => formData.value.async,
+  (newVal: boolean) => {
+    if (newVal) {
+      updateProperties({ 'flowable:async': true });
+    } else {
+      updateProperties({ 'flowable:async': undefined });
+    }
+  }
+);
+watch(
+  () => formData.value.skipExpression,
+  (newVal: string) => {
+    if (newVal) {
+      updateProperties({ 'flowable:skipExpression': newVal });
+    } else {
+      updateProperties({ 'flowable:skipExpression': undefined });
+    }
+  }
+);
+watch(
+  () => formData.value.priority,
+  (newVal: number) => {
+    if (newVal) {
+      updateProperties({ 'flowable:priority': newVal });
+    } else {
+      updateProperties({ 'flowable:priority': undefined });
+    }
+  }
+);
+watch(
+  () => formData.value.dueDate,
+  (newVal: string) => {
+    if (newVal) {
+      updateProperties({ 'flowable:dueDate': newVal });
+    } else {
+      updateProperties({ 'flowable:dueDate': undefined });
+    }
+  }
+);
+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<ElFormRules>({
   id: [{ required: true, message: '请输入', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }]
diff --git a/src/components/RoleSelect/index.vue b/src/components/RoleSelect/index.vue
index 6fc3453..a9a07d3 100644
--- a/src/components/RoleSelect/index.vue
+++ b/src/components/RoleSelect/index.vue
@@ -80,9 +80,11 @@ import { RoleVO, RoleQuery } from '@/api/system/role/types';
 import { VxeTableInstance } from 'vxe-table';
 import useDialog from '@/hooks/useDialog';
 interface PropType {
-  modelValue: RoleVO[];
+  modelValue?: RoleVO[];
 }
-const prop = defineProps<PropType>();
+const prop = withDefaults(defineProps<PropType>(), {
+  modelValue: () => []
+});
 const emit = defineEmits(['update:modelValue']);
 
 const router = useRouter();
diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue
index 54a11d0..cd6be9c 100644
--- a/src/components/UserSelect/index.vue
+++ b/src/components/UserSelect/index.vue
@@ -112,9 +112,11 @@ import { VxeTableInstance } from 'vxe-table';
 import useDialog from '@/hooks/useDialog';
 
 interface PropType {
-  modelValue: UserVO[];
+  modelValue?: UserVO[];
 }
-const prop = defineProps<PropType>();
+const prop = withDefaults(defineProps<PropType>(), {
+  modelValue: () => []
+});
 const emit = defineEmits(['update:modelValue']);
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
diff --git a/src/types/bpmn/design.d.ts b/src/types/bpmn/design.d.ts
index 2aee897..4e99e20 100644
--- a/src/types/bpmn/design.d.ts
+++ b/src/types/bpmn/design.d.ts
@@ -37,7 +37,7 @@ declare module 'bpmnDesign' {
     users?: Record<string, any>[];
     roles?: Record<string, any>[];
     async?: boolean;
-    priority?: string;
+    priority?: number;
     skipExpression?: string;
     isForCompensation?: boolean;
     triggerServiceTask?: boolean;
@@ -47,6 +47,10 @@ declare module 'bpmnDesign' {
     exclude?: boolean;
     class?: string;
     dueDate?: string;
+
+    candidateUsers?: string;
+    assignee?: string;
+    candidateGroups?: string;
   }
 
   export interface StartEndPanel extends BasePanel {}
diff --git a/vite.config.ts b/vite.config.ts
index 68c1bba..99ea8e8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -73,6 +73,9 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         'diagram-js/lib/draw/BaseRenderer',
         'tiny-svg',
 
+        'element-plus/es/components/collapse-item/style/css',
+        'element-plus/es/components/collapse/style/css',
+        'element-plus/es/components/space/style/css',
         'element-plus/es/components/container/style/css',
         'element-plus/es/components/aside/style/css',
         'element-plus/es/components/main/style/css',