feat: search form

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

@@ -1,5 +1,27 @@
 import type { FormSchemaGetter } from '#/adapter';
 
+import { getPopupContainer } from '@vben/utils';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      placeholder: '请选择',
+    },
+    fieldName: 'dictType',
+    label: '字典类型',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'dictLabel',
+    label: '字典标签',
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/dict/data/index.vue

@@ -2,6 +2,11 @@
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import dictDataDrawer from './dict-data-drawer.vue';
 
 const [DictDataDrawer, drawerApi] = useVbenDrawer({
@@ -12,13 +17,37 @@ function handleAdd() {
   drawerApi.setData({ dictType: 'aa_bb_cc' });
   drawerApi.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',
+});
 </script>
 
 <template>
-  <div>
-    <a-button type="primary" @click="handleAdd">
-      {{ $t('pages.common.add') }}
-    </a-button>
+  <div class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
+    <Card>
+      <a-button type="primary" @click="handleAdd">
+        {{ $t('pages.common.add') }}
+      </a-button>
+    </Card>
     <DictDataDrawer />
   </div>
 </template>

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

@@ -1,19 +1,13 @@
 <script setup lang="ts">
 import { Page } from '@vben/common-ui';
 
-import { Card } from 'ant-design-vue';
-
 import DictDataPanel from './data/index.vue';
 import DictTypePanel from './type/index.vue';
 </script>
 
 <template>
   <Page content-class="flex flex-col gap-[16px] lg:flex-row">
-    <Card class="w-full">
-      <DictTypePanel />
-    </Card>
-    <Card class="w-full">
-      <DictDataPanel />
-    </Card>
+    <DictTypePanel class="flex-1" />
+    <DictDataPanel class="flex-1" />
   </Page>
 </template>

apps/web-antd/src/views/system/dict/type/data.ts

@@ -1,5 +1,24 @@
 import { type FormSchemaGetter, z } from '#/adapter';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'dictName',
+    label: '字典名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'dictType',
+    label: '字典类型',
+  },
+];
+
 export const modalSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/dict/type/index.vue

@@ -2,6 +2,11 @@
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
 import dictTypeModel from './dict-type-model.vue';
 
 defineOptions({ name: 'DictTypePanel' });
@@ -14,13 +19,37 @@ function handleAdd() {
   modalApi.setData({ update: false });
   modalApi.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',
+});
 </script>
 
 <template>
-  <div>
-    <a-button type="primary" @click="handleAdd">
-      {{ $t('pages.common.add') }}
-    </a-button>
+  <div class="flex flex-col gap-4">
+    <Card>
+      <QueryForm />
+    </Card>
+    <Card>
+      <a-button type="primary" @click="handleAdd">
+        {{ $t('pages.common.add') }}
+      </a-button>
+    </Card>
     <DictTypeModal />
   </div>
 </template>