chore: userPicker compose

src/views/workflow/task/TaskForm.vue

@@ -85,7 +85,15 @@
                        name="userIds"
                        :rules="[{required: true, message: '用户不能为空', validateTrigger: 'blur'}]"
             >
-              <a-select v-model:value="state.auditForm.userIds" allowClear/>
+              <a-input-group compact>
+                <a-input v-model:value="state.auditForm.userIds" style="width: calc(100% - 48px)"/>
+                <a-button type="primary"
+                          style="width: 48px"
+                          @click="handleCCUserPicker"
+                >
+                  <Icon icon="fa6-solid:users-viewfinder"/>
+                </a-button>
+              </a-input-group>
             </AFormItem>
           </ACol>
           <ACol :span="16">
@@ -109,6 +117,7 @@
       <a-button size="large" type="primary">审批</a-button>
       <a-button size="large" type="primary" danger>驳回</a-button>
     </footer>
+    <UserPicker @register="registerModal" @success="handleTransferTask"/>
   </div>
 </template>
 <script lang="ts" setup>
@@ -140,6 +149,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import UserPicker from './popups/UserPicker/index.vue';
 
   /** 类型规范统一声明定义区域 */
   interface WindowState {
@@ -243,7 +253,7 @@
   const { close } = useTabs();
   const formPreview = ref();
   const workflowChart = ref();
-  const [registerUser , { openModal: openUser }] = useModal();
+  const [registerModal, { openModal }] = useModal();
   const [registerRollBackTask , { openModal: openRollBackTask }] = useModal();
   onActivated(() => {
     handleInit();
@@ -377,14 +387,19 @@
     });
   }
 
+  /** 抄送 */
+  function handleCCUserPicker() {
+    openModal(true,{ _tag: 'transfer' });
+  }
+
   /** 转办 */
-  function transfer() {
+  function handleTransferUserPicker() {
-    openUser(true,{ _tag: 'transfer' });
+    openModal(true,{ _tag: 'transfer' });
   }
 
   /** 委托 */
-  function delegate () {
+  function handleDelegateUserPicker() {
-    openUser(true,{ _tag: 'delegate' });
+    openModal(true,{ _tag: 'delegate' });
   }
 
   /** 终止 */
@@ -533,11 +548,11 @@
         break;
         // 转办
       case '_workflow_activity_transfer':
-        transfer();
+        handleTransferUserPicker();
         break;
         // 外派
       case '_workflow_activity_delegate':
-        delegate();
+        handleDelegateUserPicker();
         break;
         // 终止
       case '_workflow_activity_stop':

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

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { reactive, ref, toRaw } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import DeptTree from '/@/views/system/user/DeptTree.vue';
+  import { listUser } from '/@/api/platform/system/controller/user';
+  import { columns, searchFormSchema } from './userPicker.data';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { PageWrapper } from '/@/components/Page';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  /** 类型规范统一声明定义区域 */
+  interface TableState {
+    ids: string[];
+    single: boolean;
+    multiple: boolean;
+    searchInfo: Recordable;
+    tag: string,
+  }
+
+  /** 通用变量统一声明区域 */
+  const { prefixCls } = useDesign('user-picker');
+  const state = reactive<TableState>({
+    // 选中数组
+    ids: [],
+    // 非单个禁用
+    single: true,
+    // 非多个禁用
+    multiple: true,
+    // 搜索信息
+    searchInfo: {},
+    // 操作标签
+    tag: '',
+  });
+  const [registerTable, { reload, clearSelectedRowKeys, redoHeight }] = useTable({
+    title: '用户列表',
+    api: listUser,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      compact: true,
+      labelWidth: 100,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+      showAdvancedButton: true,
+      autoAdvancedLine: 3,
+      fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
+    },
+    maxHeight: 450,
+    rowSelection: { type: 'checkbox' },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    clickToRowSelect: false,
+    showIndexColumn: false,
+    searchInfo: state.searchInfo,
+    handleSearchInfoFn: () => clearSelectedRowKeys()
+  });
+  const modal = ref();
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  const emit = defineEmits(['success', 'register']);
+  const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    changeLoading(true);
+    // 处理清除脏数据
+
+    // 处理设置数据
+    state.tag = data._tag;
+
+    const regionId = data.record?.id;
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    props.title = '用户选择';
+    // 采用tag标签区分操作
+    switch (state.tag) {
+      case 'add':
+
+        break;
+      case 'edit':
+
+        break;
+    }
+
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+    changeLoading(false);
+  });
+
+  /** 处理多选框选中数据 */
+  function handleSelectionChange(selection?: Recordable) {
+    const rowSelection = toRaw(selection?.keys) || [];
+    state.ids = rowSelection;
+    state.single = rowSelection.length != 1;
+    state.multiple = !rowSelection.length;
+  }
+
+  /** 处理表格刷新 */
+  async function handleRefreshTable() {
+    clearSelectedRowKeys();
+    await reload();
+  }
+
+  /** 处理部门管理点击 */
+  function handleSelect(departId: string) {
+    state.searchInfo.deptId = departId;
+    handleRefreshTable();
+  }
+
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
+    try {
+      // 采用tag标签区分操作
+      switch (state.tag) {
+        case 'add':
+
+          break;
+        case 'edit':
+
+          break;
+      }
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<template>
+  <div ref="modal" :class="prefixCls">
+    <BasicModal
+      v-bind="$attrs"
+      width="1200px"
+      :minHeight="600"
+      :getContainer="modal"
+      @ok="handleSubmit"
+      @register="registerModal"
+    >
+      <PageWrapper
+        contentClass="flex"
+        contentFullHeight
+        dense
+      >
+        <DeptTree class="sidebar w-1/4 xl:w-1/5" @select="handleSelect"/>
+        <BasicTable
+          class="w-3/4 xl:w-4/5"
+          @register="registerTable"
+          @selection-change="handleSelectionChange"
+        />
+      </PageWrapper>
+    </BasicModal>
+  </div>
+</template>
+
+<style scoped lang="less">
+  @prefix-cls: ~'@{namespace}-user-picker';
+
+  .@{prefix-cls} {
+    .sidebar {
+      max-height: 650px;
+    }
+
+    :deep(.ant-modal) {
+      top: 20px;
+    }
+  }
+
+</style>

src/views/workflow/task/popups/UserPicker/userPicker.data.ts

@@ -0,0 +1,61 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+/** 表格列配置 */
+export const columns: BasicColumn[] = [
+  {
+    title: '用户名称',
+    dataIndex: 'username',
+  },
+  {
+    title: '用户昵称',
+    dataIndex: 'nickName',
+  },
+  {
+    title: '机构名称',
+    dataIndex: 'deptName',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    customRender: ({ record }) => {
+      const status = record.status;
+      // 采用二进制~~取反,只要为null或者0等等一些其他的空元素都会转为0
+      // 第一次取反会运算为-1,在后一次取反会运算为0
+      const enable = ~~status === 0;
+      const color = enable ? 'green' : 'warning';
+      const text = enable ? '启用' : '停用';
+      return h(Tag, { color: color }, () => text);
+    }
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+  }
+];
+
+/** 搜索表单配置 */
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'userName',
+    label: '用户名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入用户名称',
+    },
+    colProps: { span: 8 }
+  },
+  {
+    field: 'dateRange',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      style: { width:'100%' },
+      valueFormat: 'YYYY-MM-DD',
+      placeholder: ['开始日期','结束日期']
+    },
+    colProps: { span: 8 }
+  }
+];