feat: 完成user-drawer

apps/web-antd/src/api/system/post/index.ts

@@ -42,5 +42,5 @@ export function postRemove(postIds: IDS) {
 }
 
 export function postOptionSelect(deptId: ID) {
-  return requestClient.get(Api.postSelect, { params: { deptId } });
+  return requestClient.get<Post[]>(Api.postSelect, { params: { deptId } });
 }

apps/web-antd/src/api/system/user/index.ts

@@ -77,11 +77,12 @@ export function downloadImportTemplate() {
 
 /**
  * 可以不传ID  返回部门和角色options 需要获得原始数据
+ * 不传ID时一定要带最后的/
  * @param userId 用户ID
  * @returns 用户信息
  */
 export function findUserInfo(userId?: ID) {
-  const url = userId ? `${Api.root}/${userId}` : `${Api.root}`;
+  const url = userId ? `${Api.root}/${userId}` : `${Api.root}/`;
   return requestClient.get<UserInfoResponse>(url);
 }
 

apps/web-antd/src/views/system/role/data.tsx

@@ -0,0 +1,10 @@
+/**
+ * authScopeOptions user也会用到
+ */
+export const authScopeOptions = [
+  { color: 'green', label: '全部数据权限', value: '1' },
+  { color: 'default', label: '自定数据权限', value: '2' },
+  { color: 'orange', label: '本部门数据权限', value: '3' },
+  { color: 'cyan', label: '本部门及以下数据权限', value: '4' },
+  { color: 'error', label: '仅本人数据权限', value: '5' },
+];

apps/web-antd/src/views/system/user/data.tsx

@@ -42,11 +42,8 @@ export const drawerSchema: FormSchemaGetter = () => [
   },
   {
     component: 'TreeSelect',
-    componentProps: {
+    // 在drawer里更新 这里不需要默认的componentProps
-      class: 'w-full',
+    defaultValue: undefined,
-      getPopupContainer,
-      placeholder: '请选择',
-    },
     fieldName: 'deptId',
     label: '所属部门',
     rules: 'selectRequired',
@@ -101,9 +98,13 @@ export const drawerSchema: FormSchemaGetter = () => [
     componentProps: {
       class: 'w-full',
       getPopupContainer,
-      placeholder: '请选择',
+      mode: 'multiple',
+      optionFilterProp: 'label',
+      optionLabelProp: 'label',
+      placeholder: '请先选择部门',
     },
     fieldName: 'postIds',
+    help: '选择部门后, 将自动加载该部门下所有的岗位',
     label: '岗位',
   },
   {
@@ -111,6 +112,9 @@ export const drawerSchema: FormSchemaGetter = () => [
     componentProps: {
       class: 'w-full',
       getPopupContainer,
+      mode: 'multiple',
+      optionFilterProp: 'label',
+      optionLabelProp: 'label',
       placeholder: '请选择',
     },
     fieldName: 'roleIds',

apps/web-antd/src/views/system/user/user-drawer.vue

@@ -1,11 +1,23 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import type { Role } from '#/api/system/user/model';
+
+import { computed, h, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
+import { addFullName, getPopupContainer } from '@vben/utils';
+
+import { Tag } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter';
-import { findUserInfo, userAdd, userUpdate } from '#/api/system/user';
+import { postOptionSelect } from '#/api/system/post';
+import {
+  findUserInfo,
+  getDeptTree,
+  userAdd,
+  userUpdate,
+} from '#/api/system/user';
+import { authScopeOptions } from '#/views/system/role/data';
 
 import { drawerSchema } from './data';
 
@@ -28,7 +40,79 @@ const [BasicForm, formApi] = useVbenForm({
 
 interface DrawerProps {
   update: boolean;
-  id: number | string;
+  id?: number | string;
+}
+
+/**
+ * 生成角色的自定义label
+ * 也可以用option插槽来做
+ * renderComponentContent: () => ({
+    option: ({value, label, [disabled, key, title]}) => '',
+  }),
+ */
+function genRoleOptionlabel(role: Role) {
+  const found = authScopeOptions.find((item) => item.value === role.dataScope);
+  if (!found) {
+    return role.roleName;
+  }
+  return h('div', { class: 'flex items-center gap-[6px]' }, [
+    h('span', null, role.roleName),
+    h(Tag, { color: found.color }, found.label),
+  ]);
+}
+
+/**
+ * 初始化部门选择
+ */
+async function setupDeptSelect() {
+  // updateSchema
+  const deptTree = await getDeptTree();
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  addFullName(deptTree, 'label', ' / ');
+  formApi.updateSchema([
+    {
+      componentProps: (formModel) => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          value: 'id',
+          children: 'children',
+        },
+        getPopupContainer,
+        async onSelect(deptId: number | string) {
+          /** 根据部门ID加载岗位 */
+          const postListResp = await postOptionSelect(deptId);
+          const options = postListResp.map((item) => ({
+            label: item.postName,
+            value: item.postId,
+          }));
+          const placeholder =
+            options.length > 0 ? '请选择' : '该部门下暂无岗位';
+          /**
+           * TODO: 可以考虑加上post编码
+           */
+          formApi.updateSchema([
+            {
+              componentProps: { options, placeholder },
+              fieldName: 'postIds',
+            },
+          ]);
+          /** 变化后需要重新选择岗位 */
+          formModel.postIds = [];
+        },
+        placeholder: '请选择',
+        showSearch: true,
+        treeData: deptTree,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'deptId',
+    },
+  ]);
 }
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
@@ -41,16 +125,41 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
     drawerApi.drawerLoading(true);
     const { id, update } = drawerApi.getData() as DrawerProps;
     isUpdate.value = update;
+    /** update时 禁用用户名修改 不显示密码框 */
+    formApi.updateSchema([
+      { componentProps: { disabled: update }, fieldName: 'userName' },
+      {
+        dependencies: { show: () => !update, triggerFields: ['id'] },
+        fieldName: 'password',
+      },
+    ]);
     // 更新 && 赋值
-    if (update && id) {
+    const { postIds = [], roleIds = [], roles, user } = await findUserInfo(id);
-      const { postIds = [], roleIds = [], user } = await findUserInfo(id);
+    formApi.updateSchema([
+      {
+        componentProps: {
+          // title用于选中后回填到输入框 默认为label
+          optionLabelProp: 'title',
+          options: roles.map((item) => ({
+            label: genRoleOptionlabel(item),
+            // title用于选中后回填到输入框 默认为label
+            title: item.roleName,
+            value: item.roleId,
+          })),
+        },
+        fieldName: 'roleIds',
+      },
+    ]);
+    // 部门选择
+    await setupDeptSelect();
+    if (user) {
       for (const key in user) {
         // 添加基础信息
         await formApi.setFieldValue(key, user[key as keyof typeof user]);
-        // 添加角色和岗位
-        await formApi.setFieldValue('postIds', postIds);
-        await formApi.setFieldValue('roleIds', roleIds);
       }
+      // 添加角色和岗位
+      await formApi.setFieldValue('postIds', postIds);
+      await formApi.setFieldValue('roleIds', roleIds);
     }
     drawerApi.drawerLoading(false);
   },
@@ -84,6 +193,5 @@ async function handleCancel() {
 <template>
   <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
     <BasicForm />
-    未完成
   </BasicDrawer>
 </template>