chore: search form

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>