feat: user search form

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

@@ -4,6 +4,51 @@ import { getPopupContainer } from '@vben/utils';
 import { type FormSchemaGetter, z } from '#/adapter';
 import { getDictOptions } from '#/utils/dict';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'userName',
+    label: '用户账号',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'nickName',
+    label: '用户昵称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'phonenumber',
+    label: '手机号码',
+    rules: z
+      .string()
+      .regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
+      .optional(),
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '用户状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+  },
+];
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

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

@@ -6,9 +6,11 @@ import { $t } from '@vben/locales';
 
 import { message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter';
 import { userExport } from '#/api/system/user';
 import { downloadExcel } from '#/utils/file/download';
 
+import { querySchema } from './data';
 import DeptTree from './dept-tree.vue';
 import userDrawer from './user-drawer.vue';
 import userImportModal from './user-import-modal.vue';
@@ -37,6 +39,25 @@ function handleAdd() {
   userDrawerApi.setData({ update: false });
   userDrawerApi.open();
 }
+
+const [QueryForm] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: querySchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    text: '查询',
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
@@ -47,23 +68,26 @@ function handleAdd() {
       class="w-[260px]"
       @select="handleSelect"
     />
-    <div class="flex gap-[8px]">
+    <div class="flex w-full flex-col gap-[8px]">
-      <a-button
+      <QueryForm />
-        v-access:code="['system:user:export']"
+      <div class="flex justify-end gap-[8px]">
-        @click="downloadExcel(userExport, '用户管理', {})"
+        <a-button
-      >
+          v-access:code="['system:user:export']"
-        {{ $t('pages.common.export') }}
+          @click="downloadExcel(userExport, '用户管理', {})"
-      </a-button>
+        >
-      <a-button v-access:code="['system:user:import']" @click="handleImport">
+          {{ $t('pages.common.export') }}
-        {{ $t('pages.common.import') }}
+        </a-button>
-      </a-button>
+        <a-button v-access:code="['system:user:import']" @click="handleImport">
-      <a-button
+          {{ $t('pages.common.import') }}
-        type="primary"
+        </a-button>
-        v-access:code="['system:user:add']"
+        <a-button
-        @click="handleAdd"
+          type="primary"
-      >
+          v-access:code="['system:user:add']"
-        {{ $t('pages.common.add') }}
+          @click="handleAdd"
-      </a-button>
+        >
+          {{ $t('pages.common.add') }}
+        </a-button>
+      </div>
     </div>
     <UserImpotModal />
     <UserDrawer />