feat: 完成user-drawer

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 = [], user } = await findUserInfo(id);
+    const { postIds = [], roleIds = [], roles, 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>