feat: added system management sample page

src/views/demo/system/account/AccountModal.vue

@@ -8,13 +8,16 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { accountFormSchema } from './account.data';
+  import { getDeptList } from '/@/api/demo/system';
+
   export default defineComponent({
     name: 'AccountModal',
     components: { BasicModal, BasicForm },
-    setup() {
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
       const isUpdate = ref(true);
 
-      const [registerForm, { setFieldsValue, validate }] = useForm({
+      const [registerForm, { setFieldsValue, updateSchema, validate }] = useForm({
         labelWidth: 100,
         schemas: accountFormSchema,
         showActionButtonGroup: false,
@@ -23,7 +26,7 @@
         },
       });
 
-      const [registerModal, { setModalProps }] = useModalInner((data) => {
+      const [registerModal, { setModalProps }] = useModalInner(async (data) => {
         setModalProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
 
@@ -32,6 +35,18 @@
             ...data.record,
           });
         }
+
+        const treeData = await getDeptList();
+        updateSchema([
+          {
+            field: 'pwd',
+            show: !unref(isUpdate),
+          },
+          {
+            field: 'dept',
+            componentProps: { treeData },
+          },
+        ]);
       });
 
       const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'));
@@ -42,6 +57,7 @@
           setModalProps({ confirmLoading: true });
           // TODO custom api
           console.log(values);
+          emit('success');
         } finally {
           setModalProps({ confirmLoading: false });
         }

src/views/demo/system/account/account.data.ts

@@ -1,3 +1,4 @@
+import { getAllRoleList } from '/@/api/demo/system';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 
@@ -55,25 +56,52 @@ export const accountFormSchema: FormSchema[] = [
     component: 'Input',
     required: true,
   },
+  {
+    field: 'pwd',
+    label: '密码',
+    component: 'InputPassword',
+    required: true,
+    show: true,
+  },
+  {
+    label: '角色',
+    field: 'role',
+    component: 'ApiSelect',
+    componentProps: {
+      api: getAllRoleList,
+      labelField: 'roleName',
+      valueField: 'roleValue',
+    },
+    required: true,
+  },
+  {
+    field: 'dept',
+    label: '所属部门',
+    component: 'TreeSelect',
+    componentProps: {
+      replaceFields: {
+        title: 'deptName',
+        key: 'id',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
   {
     field: 'nickname',
     label: '昵称',
     component: 'Input',
     required: true,
   },
+
   {
     label: '邮箱',
     field: 'email',
     component: 'Input',
     required: true,
   },
-  // TODO
-  {
-    label: '角色',
-    field: 'role',
-    component: 'Input',
-    required: true,
-  },
+
   {
     label: '备注',
     field: 'remark',

src/views/demo/system/account/index.vue

@@ -2,7 +2,7 @@
   <div :class="[prefixCls]">
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreateAccount"> 新增账号 </a-button>
+        <a-button type="primary" @click="handleCreate"> 新增账号 </a-button>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -23,7 +23,7 @@
         />
       </template>
     </BasicTable>
-    <AccountModal @register="registerModal" />
+    <AccountModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
@@ -45,7 +45,7 @@
       const { prefixCls } = useDesign('account-management');
 
       const [registerModal, { openModal }] = useModal();
-      const [registerTable] = useTable({
+      const [registerTable, { reload }] = useTable({
         title: '账号列表',
         api: getAccountList,
         columns,
@@ -64,7 +64,7 @@
         },
       });
 
-      function handleCreateAccount() {
+      function handleCreate() {
         openModal(true, {
           isUpdate: false,
         });
@@ -81,13 +81,18 @@
         console.log(record);
       }
 
+      function handleSuccess() {
+        reload();
+      }
+
       return {
         prefixCls,
         registerTable,
         registerModal,
-        handleCreateAccount,
+        handleCreate,
         handleEdit,
         handleDelete,
+        handleSuccess,
       };
     },
   });

src/views/demo/system/role/RoleDrawer.vue

@@ -7,7 +7,18 @@
     width="500px"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #menu="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="treeData"
+          :replaceFields="{ title: 'menuName', key: 'id' }"
+          checkable
+          toolbar
+          title="菜单分配"
+        />
+      </template>
+    </BasicForm>
   </BasicDrawer>
 </template>
 <script lang="ts">
@@ -15,17 +26,19 @@
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './role.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
 
   import { getMenuList } from '/@/api/demo/system';
 
   export default defineComponent({
     name: 'RoleDrawer',
-    components: { BasicDrawer, BasicForm },
+    components: { BasicDrawer, BasicForm, BasicTree },
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);
+      const treeData = ref<TreeItem[]>([]);
 
-      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 90,
         schemas: formSchema,
         showActionButtonGroup: false,
@@ -41,11 +54,7 @@
             ...data.record,
           });
         }
-        const treeData = await getMenuList();
-        updateSchema({
-          field: 'parentMenu',
-          componentProps: { treeData },
-        });
+        treeData.value = ((await getMenuList()) as any) as TreeItem[];
       });
 
       const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
@@ -63,7 +72,13 @@
         }
       }
 
-      return { registerDrawer, registerForm, getTitle, handleSubmit };
+      return {
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+        treeData,
+      };
     },
   });
 </script>

src/views/demo/system/role/index.vue

@@ -30,7 +30,7 @@
   import { defineComponent } from 'vue';
 
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { getRoleList } from '/@/api/demo/system';
+  import { getRoleListByPage } from '/@/api/demo/system';
 
   import { useDrawer } from '/@/components/Drawer';
   import RoleDrawer from './RoleDrawer.vue';
@@ -44,7 +44,7 @@
       const [registerDrawer, { openDrawer }] = useDrawer();
       const [registerTable, { reload }] = useTable({
         title: '角色列表',
-        api: getRoleList,
+        api: getRoleListByPage,
         columns,
         formConfig: {
           labelWidth: 120,

src/views/demo/system/role/role.data.ts

@@ -2,7 +2,6 @@ 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: '角色名称',
@@ -94,9 +93,9 @@ export const formSchema: FormSchema[] = [
     component: 'InputTextArea',
   },
   {
-    label: '菜单分配',
+    label: ' ',
     field: 'menu',
     slot: 'menu',
-    component: 'Render',
+    component: 'Input',
   },
 ];