feat: search form

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

@@ -5,6 +5,34 @@ import { getPopupContainer } from '@vben/utils';
 
 import { getDictOptions } from '#/utils/dict';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'clientKey',
+    label: '客户端key',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'clientSecret',
+    label: '客户端密钥',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

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

@@ -2,7 +2,12 @@
 import { Page, useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { Card } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter';
+
 import clientDrawer from './client-drawer.vue';
+import { querySchema } from './data';
 
 const [ClientDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: clientDrawer,
@@ -12,10 +17,32 @@ function handleAdd() {
   drawerApi.setData({ update: false });
   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 lg:grid-cols-3 xl:grid-cols-4',
+});
 </script>
 
 <template>
   <Page>
+    <Card>
+      <QueryForm />
+    </Card>
     <a-button type="primary" @click="handleAdd">
       {{ $t('pages.common.add') }}
     </a-button>