chore: UserPicker make done

src/views/workflow/task/popups/UserPicker/index.vue

@@ -14,6 +14,15 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { ScrollContainer } from '/@/components/Container';
   import { useAppStore } from '/@/store/modules/app';
+  import { isArray } from '/@/utils/is';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { propTypes } from '/@/utils/propTypes';
+
+  const props = defineProps({
+    limit: propTypes.number.def(0),
+    title: propTypes.string.def('用户选择'),
+    emitEventNameClosable: propTypes.bool.def(false)
+  });
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
@@ -21,13 +30,15 @@
     single: boolean;
     multiple: boolean;
     searchInfo: Recordable;
-    tag: string,
+    tag: string;
+    emitEventName: string;
   }
 
   /** 通用变量统一声明区域 */
   const appStore = useAppStore();
   const darkMode = appStore.getDarkMode;
   const { prefixCls } = useDesign('user-picker');
+  const { createMessage } = useMessage();
   const state = reactive<TableState>({
     // 选中数组
     ids: [],
@@ -39,8 +50,10 @@
     searchInfo: {},
     // 操作标签
     tag: '',
+    // 组件触发的自定义名称
+    emitEventName: ''
   });
-  const [registerTable, { reload, clearSelectedRowKeys, redoHeight }] = useTable({
+  const [registerTable, { reload, clearSelectedRowKeys, getSelectRows, setSelectedRowKeys }] = useTable({
     title: '用户列表',
     api: listUser,
     rowKey: 'id',
@@ -66,29 +79,26 @@
   });
   const modal = ref();
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
-  const emit = defineEmits(['success', 'register']);
+  const emit = defineEmits(['success', 'register'] as Recordable);
   const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
     changeLoading(true);
     // 处理清除脏数据
-
+    await handleRefreshTable();
     // 处理设置数据
     state.tag = data._tag;
-
-    const regionId = data.record?.id;
-    const props: Partial<ModalProps> = { confirmLoading: false };
-    props.title = '用户选择';
-    // 采用tag标签区分操作
+    const { ids, emitEventName } = data.record as Recordable;
+    isArray(ids) && setSelectedRowKeys(ids);
+    const modalProps: Partial<ModalProps> = { title: props.title };
+    state.emitEventName = emitEventName || 'success';
+    // 为后续扩展做准备,采用tag标签区分操作(预留)
     switch (state.tag) {
-      case 'add':
-
+      case 'single':
         break;
-      case 'edit':
-
+      case 'multiple':
         break;
     }
-
     // 尾部:设置处理后的最终配置数据
-    setModalProps(props);
+    setModalProps(modalProps);
     changeLoading(false);
   });
 
@@ -115,18 +125,15 @@
   /** 处理弹出框提交 */
   async function handleSubmit() {
     try {
-      // 采用tag标签区分操作
-      switch (state.tag) {
-        case 'add':
-
-          break;
-        case 'edit':
-
-          break;
+      if (props.limit !== 0 && props.limit < getSelectRows().length) {
+        return createMessage.error(`你最多只能选择${props.limit}个用户`);
       }
-      // 处理提交完成之后逻辑
       closeModal();
-      emit('success');
+      if (props.emitEventNameClosable) {
+        emit('success', state.emitEventName ,(getSelectRows()));
+      } else {
+        emit(state.emitEventName, toRaw(getSelectRows()));
+      }
     } finally {
       setModalProps({ confirmLoading: false });
     }
@@ -152,16 +159,12 @@
         </a-layout-content>
         <a-layout-sider :theme="darkMode">
           <ScrollContainer class="pl-2">
-            <div v-loading="true">
-              <a-tag color="pink">pink</a-tag>
-              <a-tag color="pink">pink</a-tag>
-              <a-tag color="pink">pink</a-tag>
-              <a-tag color="pink">pink</a-tag>
-              <a-tag color="pink">pink</a-tag>
-              <a-tag color="pink">pink</a-tag>
-              <a-tag color="pink">pink</a-tag>
-              <a-tag color="pink">pink</a-tag>
-            </div>
+            <a-tag v-for="row in getSelectRows()"
+                   :key="row.id"
+                   color="processing"
+            >
+              {{ row.username }}
+            </a-tag>
           </ScrollContainer>
         </a-layout-sider>
       </a-layout>
@@ -183,6 +186,10 @@
 
     .scroll-container {
       max-height: 720px;
+
+      .ant-tag {
+        margin: 0 0 5px 8px;
+      }
     }
   }