From 96c8cd16258d26fa9e8bc962eb53fd5337c9f50a Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Fri, 20 Oct 2023 23:54:53 +0800
Subject: [PATCH] chore: handle user picker

---
 .eslintrc.js                                  |  1 +
 src/views/workflow/task/TaskForm.vue          | 94 +++++++++++++------
 .../workflow/task/popups/UserPicker/index.vue | 18 +++-
 3 files changed, 81 insertions(+), 32 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 64e6e39..d6917e9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,5 +116,6 @@ module.exports = defineConfig({
     'vue/no-v-html': 'off',
     'vue/multi-word-component-names': 'off',
     'vue/first-attribute-linebreak': 'off',
+    'vue/v-on-event-hyphenation': 'off',
   }
 });
diff --git a/src/views/workflow/task/TaskForm.vue b/src/views/workflow/task/TaskForm.vue
index b9a7df8..cada2cc 100644
--- a/src/views/workflow/task/TaskForm.vue
+++ b/src/views/workflow/task/TaskForm.vue
@@ -128,7 +128,7 @@
                 />
                 <a-button type="primary"
                           style="width: 48px"
-                          @click="handleCCUserPicker"
+                          @click="handleAssignUserPicker"
                 >
                   <Icon icon="fa6-solid:clipboard-user"/>
                 </a-button>
@@ -142,7 +142,12 @@
       <a-button size="large" type="primary" @click="test">审批</a-button>
       <a-button size="large" type="primary" danger>驳回</a-button>
     </footer>
-    <UserPicker @register="registerModal" @success="handleTransferTask"/>
+    <UserPicker :title="state.userPickerProps.title"
+                :limit="state.userPickerProps.limit"
+                @register="registerModal"
+                @ccEmit="handleCCEmit"
+                @assignEmit="handleAssignEmit"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -189,47 +194,51 @@
     // 外置表单路径
     formPath: string;
     // 外置表单是否只读
-    formReadOnly: boolean,
+    formReadOnly: boolean;
     // 外置表单业务数据绑定ID
-    businessId: string,
+    businessId: string;
     // 动态表单字段配置数据
-    taskFormData: FormProperty[],
+    taskFormData: FormProperty[];
 
     // 设置选择任务选项卡
-    taskSelectedTab: string,
+    taskSelectedTab: string;
     // 流程任务ID
-    taskId: string,
+    taskId: string;
     // 流程任务定义key
-    taskDefKey: string,
+    taskDefKey: string;
 
     // 流程定义ID
-    processDefId: string,
+    processDefId: string;
     // 流程实例ID
-    processInsId: string,
+    processInsId: string;
     // 流程定义Key
-    processDefKey: string,
+    processDefKey: string;
 
     // 当前任务表单操作状态
-    status: string,
+    status: string;
     // 历史流转信息
-    historyFlowChangeList: Workflow[],
+    historyFlowChangeList: Workflow[];
     // 当前操作按钮配置信息
-    buttons: Partial<WorkflowButton>[],
+    buttons: Partial<WorkflowButton>[];
     // 是否抄送
-    isCC: boolean,
+    isCC: boolean;
     // 是否指定代理人
-    isAssign: boolean,
+    isAssign: boolean;
     // 审批表单信息
     auditForm: {
-      message: string,
-      mesCode: string,
-      mesName: string,
+      message: string;
+      mesCode: string;
+      mesName: string;
       // 抄送用户ID
-      userIds: string[],
+      userIds: string[];
       // 任务代理人ID
-      assignee: string,
+      assignee: string;
     },
     rulesRef: Recordable;
+    userPickerProps: {
+      title: string;
+      limit: number;
+    };
   }
 
   /** 通用变量统一声明区域 */
@@ -276,8 +285,12 @@
       assignee: ''
     },
     rulesRef: {
-      assignee: [{ required: true, whitespace: true, message: '用户不能为空', validateTrigger: 'blur' }],
-      userIds: [{ required: true, type: 'array', message: '用户不能为空', validateTrigger: 'blur' }]
+      userIds: [{ required: true, type: 'array', message: '抄送用户不能为空', validateTrigger: 'blur' }],
+      assignee: [{ required: true, whitespace: true, message: '处理用户不能为空', validateTrigger: 'blur' }]
+    },
+    userPickerProps: {
+      title: '任务表单用户选择器',
+      limit: 0,
     }
   });
   const { currentRoute, push } = useRouter();
@@ -345,9 +358,11 @@
     state.formReadOnly = query.formReadOnly === 'true';
     state.isCC = false;
     state.isAssign = false;
-    state.auditForm.assignee = '1510539584287346688';
-    state.auditForm.userIds = ['1510539584287346688'];
+    state.auditForm.assignee = '';
+    state.auditForm.userIds = [];
     state.auditForm.message = '';
+    state.userPickerProps.title = '任务表单用户选择器';
+    state.userPickerProps.limit = 0;
   }
 
   /** 流程抄送 */
@@ -421,9 +436,34 @@
     });
   }
 
-  /** 抄送 */
   function handleCCUserPicker() {
-    openModal(true,{ record: { ids: [], emitEventName: 'test' } });
+    state.userPickerProps.title = '抄送用户选择';
+    state.userPickerProps.limit = 0;
+    openModal(true,{
+      record: {
+        ids: state.auditForm.userIds,
+        emitEventName: 'ccEmit'
+      }
+    });
+  }
+
+  function handleCCEmit(rows: KiccUser[]) {
+    state.auditForm.userIds = rows.map(item => item.id);
+  }
+
+  function handleAssignUserPicker() {
+    state.userPickerProps.title = '代理用户选择';
+    state.userPickerProps.limit = 1;
+    openModal(true,{
+      record: {
+        ids: [ state.auditForm.assignee ],
+        emitEventName: 'assignEmit'
+      }
+    });
+  }
+
+  function handleAssignEmit(rows: KiccUser[]) {
+    state.auditForm.assignee = rows[0].id;
   }
 
   /** 转办 */
diff --git a/src/views/workflow/task/popups/UserPicker/index.vue b/src/views/workflow/task/popups/UserPicker/index.vue
index 1672685..cf8f5b8 100644
--- a/src/views/workflow/task/popups/UserPicker/index.vue
+++ b/src/views/workflow/task/popups/UserPicker/index.vue
@@ -5,7 +5,7 @@
    * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
    * author wangxiang4
    */
-  import { reactive, ref, toRaw } from 'vue';
+  import { reactive, ref, toRaw, watch } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import DeptTree from '/@/views/system/user/DeptTree.vue';
   import { listUser } from '/@/api/platform/system/controller/user';
@@ -53,7 +53,7 @@
     // 组件触发的自定义名称
     emitEventName: ''
   });
-  const [registerTable, { reload, clearSelectedRowKeys, getSelectRows, setSelectedRowKeys }] = useTable({
+  const [registerTable, { reload, clearSelectedRowKeys, getSelectRows, setSelectedRowKeys, setProps }] = useTable({
     title: '用户列表',
     api: listUser,
     rowKey: 'id',
@@ -68,7 +68,7 @@
       fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
     },
     maxHeight: 450,
-    rowSelection: { type: props.limit == 1 ? 'radio' : 'checkbox' },
+    rowSelection: { type: 'checkbox' },
     useSearchForm: true,
     showTableSetting: true,
     bordered: true,
@@ -77,6 +77,12 @@
     searchInfo: state.searchInfo,
     handleSearchInfoFn: () => clearSelectedRowKeys()
   });
+  watch(() => props.limit, limit => {
+    const rowSelectType = limit === 1 ? 'radio' : 'checkbox';
+    setProps({
+      rowSelection: { type: rowSelectType },
+    });
+  });
   const modal = ref();
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register'] as Recordable);
@@ -125,8 +131,10 @@
   /** 处理弹出框提交 */
   async function handleSubmit() {
     try {
-      if (props.limit !== 0 && props.limit < getSelectRows().length) {
-        return createMessage.error(`你最多只能选择${props.limit}个用户`);
+      if (getSelectRows().length === 0) {
+        return createMessage.error('请选择一个用户!');
+      } else if (props.limit !== 0 && props.limit < getSelectRows().length) {
+        return createMessage.error(`最多只能选择${props.limit}个用户!`);
       }
       closeModal();
       if (props.emitEventNameClosable) {