chore: search form

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

@@ -1,3 +1,9 @@
+import type { FormSchemaGetter } from '#/adapter';
+
+import { DictEnum } from '@vben/constants';
+
+import { getDictOptions } from '#/utils/dict';
+
 /**
  * authScopeOptions user也会用到
  */
@@ -8,3 +14,36 @@ export const authScopeOptions = [
   { color: 'cyan', label: '本部门及以下数据权限', value: '4' },
   { color: 'error', label: '仅本人数据权限', value: '5' },
 ];
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'roleName',
+    label: '角色名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'roleKey',
+    label: '权限字符',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+  },
+];

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

@@ -1,28 +1,36 @@
 <script setup lang="ts">
-import { CodeMirror, JsonPreview, Page } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 
-import packageJson from '#/../package.json';
 import { Card } from 'ant-design-vue';
 
-import code from '#/components/tinymce/src/editor.vue?raw';
+import { useVbenForm } from '#/adapter';
+
+import { querySchema } from './data';
+
+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 content-class="flex lg:flex-row flex-col gap-[16px]">
-    <Card class="flex-1" title="json预览">
-      <div class="h-[600px] overflow-y-auto">
-        <JsonPreview :data="packageJson" />
-      </div>
-    </Card>
-    <Card class="flex-1" title="codeMirror预览">
-      <div class="h-[600px] overflow-y-auto">
-        <CodeMirror
-          v-model="code"
-          class="text-[16px]"
-          language="vue"
-          readonly
-        />
-      </div>
+    <Card class="flex-1">
+      <QueryForm />
     </Card>
   </Page>
 </template>

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

@@ -4,7 +4,7 @@ import { ref } from 'vue';
 import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { message } from 'ant-design-vue';
+import { Card, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter';
 import { userExport } from '#/api/system/user';
@@ -69,7 +69,10 @@ const [QueryForm] = useVbenForm({
       @select="handleSelect"
     />
     <div class="flex w-full flex-col gap-[8px]">
+      <Card>
         <QueryForm />
+      </Card>
+      <Card>
         <div class="flex justify-end gap-[8px]">
           <a-button
             v-access:code="['system:user:export']"
@@ -77,7 +80,10 @@ const [QueryForm] = useVbenForm({
           >
             {{ $t('pages.common.export') }}
           </a-button>
-        <a-button v-access:code="['system:user:import']" @click="handleImport">
+          <a-button
+            v-access:code="['system:user:import']"
+            @click="handleImport"
+          >
             {{ $t('pages.common.import') }}
           </a-button>
           <a-button
@@ -88,6 +94,7 @@ const [QueryForm] = useVbenForm({
             {{ $t('pages.common.add') }}
           </a-button>
         </div>
+      </Card>
     </div>
     <UserImpotModal />
     <UserDrawer />