feat: search form

apps/web-antd/src/views/monitor/logininfor/data.tsx

@@ -1,13 +1,48 @@
 import type { ColumnsType } from 'ant-design-vue/es/table';
 
+import type { FormSchemaGetter } from '#/adapter';
 import type { DescItem } from '#/components/description';
 
 import { DictEnum } from '@vben/constants';
 
 import { Tooltip } from 'ant-design-vue';
 
+import { getDictOptions } from '#/utils/dict';
 import { renderBrowserIcon, renderDict, renderOsIcon } from '#/utils/render';
 
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'ipaddr',
+    label: 'IP地址',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'userName',
+    label: '用户账号',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_COMMON_STATUS),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '登录状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'dateTime',
+    label: '登录日期',
+  },
+];
+
 export const columns: ColumnsType = [
   {
     align: 'center',

apps/web-antd/src/views/monitor/logininfor/index.vue

@@ -7,12 +7,13 @@ import { onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Space, Table } from 'ant-design-vue';
+import { Card, Space, Table } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter';
 import { loginInfoClean, loginInfoList } from '#/api/monitor/logininfo';
 import { confirmDeleteModal } from '#/utils/modal';
 
-import { columns } from './data';
+import { columns, querySchema } from './data';
 import loginInfoModal from './login-info-modal.vue';
 
 const [LoginInfoModal, modalApi] = useVbenModal({
@@ -39,10 +40,32 @@ function handleClear() {
     },
   });
 }
+
+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 flex-col gap-[6px]">
+    <Card>
+      <QueryForm />
+    </Card>
     <div class="flex justify-end">
       <a-button @click="handleClear">{{ $t('pages.common.clear') }}</a-button>
     </div>

apps/web-antd/src/views/monitor/online/data.ts

@@ -0,0 +1,20 @@
+import type { FormSchemaGetter } from '#/adapter';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'ipaddr',
+    label: 'IP地址',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'userName',
+    label: '用户账号',
+  },
+];

apps/web-antd/src/views/monitor/online/index.vue

@@ -1,9 +1,36 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+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>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <Page>
+    <Card>
+      <QueryForm />
+    </Card>
+  </Page>
 </template>

apps/web-antd/src/views/monitor/operlog/data.ts

@@ -0,0 +1,55 @@
+import type { FormSchemaGetter } from '#/adapter';
+
+import { DictEnum } from '@vben/constants';
+
+import { getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'title',
+    label: '系统模块',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'operName',
+    label: '操作人员',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_OPER_TYPE),
+      placeholder: '请选择',
+    },
+    fieldName: 'businessType',
+    label: '操作类型',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'operIp',
+    label: '操作IP',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_COMMON_STATUS),
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '操作时间',
+  },
+];

apps/web-antd/src/views/monitor/operlog/index.vue

@@ -1,9 +1,36 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+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>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <Page>
+    <Card>
+      <QueryForm />
+    </Card>
+  </Page>
 </template>