feat: 数据库

apps/web-baicai/src/views/system/design/database/components/edit.vue

@@ -1,17 +1,21 @@
 <script lang="ts" setup>
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
+
 import { ref, unref } from 'vue';
 
-import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  useFormOptions,
+  useTableGridOptions,
+  useVbenForm,
+  useVbenVxeGrid,
+} from '#/adapter';
 import { DatabaseApi } from '#/api';
-import { TableAction } from '#/components/table-action';
 
-import { formOptions, gridColumnOptions } from '../data.config';
+import { useColumnColumns, useSchema } from '../data.config';
 import FormEdit from './editColumn.vue';
 
 defineOptions({
@@ -19,18 +23,14 @@ defineOptions({
 });
 const emit = defineEmits(['success']);
 
-const { hasAccessByCodes } = useAccess();
 const modelRef = ref<Record<string, any>>({});
 const isUpdate = ref(true);
 
-const [Form, { validate, setValues, getValues, updateSchema }] = useVbenForm({
-  showDefaultActions: false,
-  ...formOptions,
-});
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: gridColumnOptions,
-});
+const [Form, { validate, setValues, getValues, updateSchema }] = useVbenForm(
+  useFormOptions({
+    schema: useSchema(),
+  }),
+);
 
 const [FormEditModal, formEditApi] = useVbenModal({
   connectedComponent: FormEdit,
@@ -110,14 +110,15 @@ const handleDelete = (record: any) => {
 };
 
 const handleEdit = (record: any, isUpdate: boolean) => {
-  formEditApi.setData({
-    isUpdate,
-    baseData: record,
-  });
   if (isUpdate) {
     gridApi.grid.setEditRow(record);
   }
-  formEditApi.open();
+  formEditApi
+    .setData({
+      isUpdate,
+      baseData: record,
+    })
+    .open();
 };
 
 const handelSuccess = (record: any) => {
@@ -135,15 +136,60 @@ const handelSuccess = (record: any) => {
   // }
   gridApi.grid.insert(record.data);
 };
+
+const handleActionClick = async ({
+  code,
+  row,
+}: OnActionClickParams<DatabaseApi.BasicColumnRecord>) => {
+  switch (code) {
+    case 'delete': {
+      await handleDelete(row);
+      break;
+    }
+    case 'edit': {
+      handleEdit(row, true);
+      break;
+    }
+  }
+};
+
+const [Grid, gridApi] = useVbenVxeGrid(
+  useTableGridOptions({
+    gridOptions: {
+      rowConfig: {
+        isCurrent: true,
+        isHover: true,
+        keyField: 'columnName',
+        drag: true,
+        useKey: true,
+      },
+      columnConfig: {
+        useKey: true,
+      },
+      editConfig: {
+        mode: 'row',
+        trigger: 'click',
+        // showStatus: true,
+      },
+      pagerConfig: {
+        enabled: false,
+      },
+      rowDragConfig: {
+        rowIcon: 'vxe-icon-sort',
+      },
+      columns: useColumnColumns(handleActionClick),
+    } as VxeTableGridOptions,
+  }),
+);
 </script>
 <template>
   <Modal class="h-[800px] w-[1000px]">
     <FormEditModal :close-on-click-modal="false" @success="handelSuccess" />
     <div class="h-full">
-      <div class="h-[168px]">
+      <div class="h-[178px]">
         <Form />
       </div>
-      <div class="h-full" style="height: calc(100% - 168px)">
+      <div class="h-[calc(100% - 178px)] h-full">
         <Grid>
           <template #toolbar-tools>
             <Button
@@ -155,25 +201,6 @@ const handelSuccess = (record: any) => {
               新增列
             </Button>
           </template>
-
-          <template #action="{ row }">
-            <TableAction
-              :actions="[
-                {
-                  label: '编辑',
-                  type: 'text',
-                  disabled: !hasAccessByCodes(['table:edit']),
-                  onClick: handleEdit.bind(null, row, true),
-                },
-                {
-                  label: '删除',
-                  type: 'text',
-                  disabled: !hasAccessByCodes(['table:delete']),
-                  onClick: handleDelete.bind(null, row),
-                },
-              ]"
-            />
-          </template>
         </Grid>
       </div>
     </div>

apps/web-baicai/src/views/system/design/database/components/editColumn.vue

@@ -5,9 +5,9 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
+import { useFormOptions, useVbenForm } from '#/adapter';
 
-import { formColumnOptions } from '../data.config';
+import { useColumnSchema } from '../data.config';
 
 defineOptions({
   name: 'TableColumnEdit',
@@ -16,10 +16,11 @@ const emit = defineEmits(['success']);
 const modelRef = ref<Record<string, any>>({});
 const isUpdate = ref(true);
 
-const [Form, { validate, setValues, getValues }] = useVbenForm({
-  showDefaultActions: false,
-  ...formColumnOptions,
-});
+const [Form, { validate, setValues, getValues }] = useVbenForm(
+  useFormOptions({
+    schema: useColumnSchema(),
+  }),
+);
 
 const [Modal, { close, setState, getData }] = useVbenModal({
   fullscreenButton: false,

apps/web-baicai/src/views/system/design/database/data.config.ts

@@ -1,12 +1,16 @@
-import type { VbenFormProps } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type {
+  OnActionClickFn,
+  VbenFormProps,
+  VbenFormSchema,
+  VxeGridProps,
+  VxeTableGridOptions,
+} from '#/adapter';
 
 import { DatabaseApi, TenantApi } from '#/api';
 import { dataTypeOptions } from '#/api/model';
 
-export const searchFormOptions: VbenFormProps = {
-  showCollapseButton: false,
-  schema: [
+export const useSearchSchema = (): VbenFormSchema[] => {
+  return [
     {
       component: 'Input',
       fieldName: 'name',
@@ -17,18 +21,13 @@ export const searchFormOptions: VbenFormProps = {
       fieldName: 'description',
       label: '说明',
     },
-  ],
+  ];
 };
 
-export const gridOptions: VxeGridProps<DatabaseApi.RecordItem> = {
-  toolbarConfig: {
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    custom: true,
-  },
-  columns: [
+export function useColumns(
+  onActionClick?: OnActionClickFn<DatabaseApi.RecordItem>,
+): VxeTableGridOptions<DatabaseApi.RecordItem>['columns'] {
+  return [
     { title: '序号', type: 'seq', width: 50 },
     {
       align: 'left',
@@ -38,35 +37,46 @@ export const gridOptions: VxeGridProps<DatabaseApi.RecordItem> = {
     },
     { align: 'left', field: 'description', title: '备注' },
     {
-      field: 'action',
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '表名',
+          onClick: onActionClick,
+        },
+        name: 'CellAction',
+        options: [
+          {
+            code: 'edit',
+            auth: ['table:edit'],
+          },
+          {
+            code: 'create',
+            label: '创建表',
+            auth: ['table:create'],
+            confirm: {
+              title: '提示',
+              content: `创建表如果表存在会先删除原表，确定要创建表吗?`,
+            },
+          },
+          {
+            code: 'delete',
+            auth: ['table:delete'],
+          },
+        ],
+      },
+      field: 'operation',
       fixed: 'right',
-      slots: { default: 'action' },
+      headerAlign: 'center',
+      showOverflow: false,
       title: '操作',
-      width: 170,
+      width: 100,
     },
-  ],
-  height: 'auto',
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        return await DatabaseApi.getPage({
-          pageIndex: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
-      },
-    },
-  },
-};
+  ];
+}
 
-export const formOptions: VbenFormProps = {
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: [
+export const useSchema = (): VbenFormSchema[] => {
+  return [
     {
       component: 'ApiSelect',
       componentProps: {
@@ -99,22 +109,13 @@ export const formOptions: VbenFormProps = {
       label: '说明',
       rules: 'required',
     },
-  ],
-  wrapperClass: 'grid-cols-1',
+  ];
 };
 
-export const gridColumnOptions: VxeGridProps<DatabaseApi.BasicColumnRecord> = {
-  rowConfig: {
-    isCurrent: true,
-    isHover: true,
-    keyField: 'columnName',
-    drag: true,
-    useKey: true,
-  },
-  columnConfig: {
-    useKey: true,
-  },
-  columns: [
+export function useColumnColumns(
+  onActionClick?: OnActionClickFn<DatabaseApi.BasicColumnRecord>,
+): VxeTableGridOptions<DatabaseApi.BasicColumnRecord>['columns'] {
+  return [
     { title: '序号', type: 'seq', width: 50 },
     {
       align: 'left',
@@ -126,35 +127,37 @@ export const gridColumnOptions: VxeGridProps<DatabaseApi.BasicColumnRecord> = {
     { align: 'left', field: 'dataType', title: '类型', width: 100 },
     { align: 'left', field: 'description', title: '说明' },
     {
-      field: 'action',
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'columnName',
+          nameTitle: '列名',
+          onClick: onActionClick,
+        },
+        name: 'CellAction',
+        options: [
+          {
+            code: 'edit',
+            auth: ['table:edit'],
+          },
+          {
+            code: 'delete',
+            auth: ['table:delete'],
+          },
+        ],
+      },
+      field: 'operation',
       fixed: 'right',
-      slots: { default: 'action' },
+      headerAlign: 'center',
+      showOverflow: false,
       title: '操作',
-      width: 110,
+      width: 100,
     },
-  ],
-  editConfig: {
-    mode: 'row',
-    trigger: 'click',
-    // showStatus: true,
-  },
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {
-    enabled: false,
-  },
-  dragConfig: {
-    rowIcon: 'vxe-icon-sort',
-  },
-};
+  ];
+}
 
-export const formColumnOptions: VbenFormProps = {
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: [
+export const useColumnSchema = (): VbenFormSchema[] => {
+  return [
     {
       component: 'Input',
       componentProps: {
@@ -253,6 +256,35 @@ export const formColumnOptions: VbenFormProps = {
         triggerFields: ['dataType'],
       },
     },
+  ];
+};
+export const gridColumnOptions: VxeGridProps<DatabaseApi.BasicColumnRecord> = {
+  columns: [
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: '操作',
+      width: 110,
+    },
   ],
+
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  dragConfig: {
+    rowIcon: 'vxe-icon-sort',
+  },
+};
+
+export const formColumnOptions: VbenFormProps = {
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: [],
   wrapperClass: 'grid-cols-1',
 };

apps/web-baicai/src/views/system/design/database/index.vue

@@ -1,67 +1,90 @@
 <script lang="ts" setup>
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
+
 import { useAccess } from '@vben/access';
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Button, message, Modal } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
 import { DatabaseApi } from '#/api';
 import { TableAction } from '#/components/table-action';
 
 import FormEdit from './components/edit.vue';
-import { gridOptions, searchFormOptions } from './data.config';
+import { useColumns, useSearchSchema } from './data.config';
 
 const { hasAccessByCodes } = useAccess();
 
-const [Grid, { reload }] = useVbenVxeGrid({
-  formOptions: searchFormOptions,
-  gridOptions,
-});
-
 const [FormEditModal, formEditApi] = useVbenModal({
   connectedComponent: FormEdit,
 });
 
-const handleDelete = (id: number) => {
-  Modal.confirm({
-    iconType: 'info',
-    title: '删除提示',
-    content: `确定要删除选择的记录吗?`,
-    cancelText: `关闭`,
-    onOk: async () => {
-      await DatabaseApi.deleteDetail(id);
-      message.success('数据删除成功');
-      reload();
-    },
-  });
+const handleDelete = async (id: number) => {
+  await DatabaseApi.deleteDetail(id);
+  message.success('数据删除成功');
+  reload();
 };
 
-const handelCreate = (id: number) => {
-  Modal.confirm({
-    iconType: 'info',
-    title: '提示',
-    content: `创建表如果表存在会先删除原表，确定要创建表吗?`,
-    cancelText: `关闭`,
-    onOk: async () => {
-      await DatabaseApi.getCreate(id);
-      message.success('创建表成功');
-      reload();
-    },
-  });
+const handelCreate = async (id: number) => {
+  await DatabaseApi.getCreate(id);
+  message.success('创建表成功');
+  reload();
 };
 
 const handleEdit = (record: any, isUpdate: boolean) => {
-  formEditApi.setData({
-    isUpdate,
-    baseData: { id: record.id },
-  });
-
-  formEditApi.open();
+  formEditApi
+    .setData({
+      isUpdate,
+      baseData: { id: record.id },
+    })
+    .open();
 };
 
 const handelSuccess = () => {
   reload();
 };
+
+const handleActionClick = async ({
+  code,
+  row,
+}: OnActionClickParams<DatabaseApi.RecordItem>) => {
+  switch (code) {
+    case 'create': {
+      handelCreate(row.id);
+      break;
+    }
+    case 'delete': {
+      await handleDelete(row.id);
+      break;
+    }
+    case 'edit': {
+      handleEdit(row, true);
+      break;
+    }
+  }
+};
+
+const [Grid, { reload }] = useVbenVxeGrid(
+  useTableGridOptions({
+    formOptions: {
+      schema: useSearchSchema(),
+    },
+    gridOptions: {
+      columns: useColumns(handleActionClick),
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            return await DatabaseApi.getPage({
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              ...formValues,
+            });
+          },
+        },
+      },
+    } as VxeTableGridOptions,
+  }),
+);
 </script>
 
 <template>

apps/web-baicai/src/views/system/tenant/index.vue

@@ -68,10 +68,6 @@ const [Grid, { reload }] = useVbenVxeGrid(
       schema: useSearchSchema(),
     },
     gridOptions: {
-      checkboxConfig: {
-        highlight: true,
-        labelField: 'name',
-      },
       columns: useColumns(handleActionClick),
       proxyConfig: {
         ajax: {