添加用户及角色过滤

web/apps/web-antd/src/locales/langs/en-US/system.json

@@ -52,6 +52,7 @@
   },
   "role": {
     "title": "Role Management",
+    "code": "Role Code",
     "list": "Role List",
     "name": "Role",
     "roleName": "Role Name",

web/apps/web-antd/src/locales/langs/zh-CN/system.json

@@ -54,6 +54,7 @@
   },
   "role": {
     "title": "角色管理",
+    "code": "角色标识",
     "list": "角色列表",
     "name": "角色",
     "roleName": "角色名称",

web/apps/web-antd/src/views/system/dept/list.vue

@@ -19,7 +19,7 @@ import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
-  destroyOnClose: true,
+  destroyOnClose: false,
 });
 
 /**
@@ -117,6 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       parentField: 'pid',
       rowField: 'id',
       transform: false,
+      defaultExpandAll: true, // 关键配置
     },
   } as VxeTableGridOptions,
 });
@@ -127,6 +128,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 function refreshGrid() {
   gridApi.query();
 }
+
 </script>
 <template>
   <Page auto-content-height>

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

@@ -13,6 +13,12 @@ export function useFormSchema(): VbenFormSchema[] {
       label: $t('system.role.roleName'),
       rules: 'required',
     },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: $t('system.role.code'),
+      rules: 'required',
+    },
     {
       component: 'RadioGroup',
       componentProps: {
@@ -48,6 +54,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       fieldName: 'name',
       label: $t('system.role.roleName'),
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: $t('system.role.code'),
+      componentProps: {
+        allowClear: true,
+      },
     },
     {
       component: 'Select',
@@ -69,15 +86,17 @@ export function useColumns<T = SystemRoleApi.SystemRole>(
   onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
 ): VxeTableGridOptions['columns'] {
   return [
-    {
-      field: 'name',
-      title: $t('system.role.roleName'),
-      width: 200,
-    },
     {
       field: 'id',
       title: $t('system.role.id'),
-      width: 200,
+    },
+    {
+      field: 'name',
+      title: $t('system.role.roleName'),
+    },
+    {
+      field: 'code',
+      title: $t('system.role.code'),
     },
     {
       cellRender: {
@@ -96,7 +115,7 @@ export function useColumns<T = SystemRoleApi.SystemRole>(
     {
       field: 'create_time',
       title: $t('system.role.createTime'),
-      width: 200,
+      width: 150,
       formatter: ({ cellValue }) => format_datetime(cellValue),
     },
     {

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

@@ -163,7 +163,7 @@ export function useColumns(
     },
     {
       field: 'mobile',
-      title: 'mobile',
+      title: '手机号',
     },
     {
       cellRender: {
@@ -171,12 +171,12 @@ export function useColumns(
       },
       field: 'status',
       title: $t('system.status'),
-      width: 100,
+      width: 80,
     },
     {
       field: 'login_ip',
-      title: 'login ip',
-      width: 150,
+      title: '登录ip',
+      width: 100,
     },
     {
       field: 'last_login',
@@ -228,3 +228,48 @@ export function useColumns(
     },
   ];
 }
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: getDeptList,
+        class: 'w-full',
+        resultField: 'items',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'dept',
+      label: '部门',
+    },
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: '用户名',
+      componentProps: { allowClear: true },
+    },
+    {
+      component: 'Input',
+      fieldName: 'mobile',
+      label: '手机号',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '状态',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+      },
+    },
+  ];
+}

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

@@ -14,7 +14,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { $t } from '#/locales';
 import { SystemUserModel } from '#/models/system/user';
 
-import { useColumns } from './data';
+import { useColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
 const formModel = new SystemUserModel();
@@ -81,6 +81,11 @@ function onActionClick({
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    wrapperClass: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-4',
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
   gridEvents: {},
   gridOptions: {
     columns: useColumns(onActionClick),
@@ -105,6 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       export: false,
       refresh: { code: 'query' },
       zoom: true,
+      search: true,
     },
   } as VxeTableGridOptions,
 });