feat: 页面设置

apps/web-baicai/src/api/system/table.ts

@@ -17,6 +17,7 @@ export namespace TableApi {
       search: any[];
     };
     databaseQueryId: number;
+    menuId: number;
   }
 
   export interface RecordItem extends BasicRecordItem {

apps/web-baicai/src/components/table-action/src/table-action.vue

@@ -54,10 +54,25 @@ function isIfDisabled(action: ActionItem): boolean {
   if (action.authDisabled === true && (action.auth || []).length > 0) {
     return !hasAccessByCodes(action.auth || []);
   }
+
+  if (action.dynamicDisabled) {
+    const ifDynamicDisabled = action.dynamicDisabled;
+
+    let isIfDynamicDisabled = false;
+    if (isBoolean(ifDynamicDisabled)) {
+      isIfDynamicDisabled = ifDynamicDisabled;
+    }
+
+    if (isFunction(ifDynamicDisabled)) {
+      isIfDynamicDisabled = ifDynamicDisabled(action);
+    }
+    if (isIfDynamicDisabled === true) {
+      return true;
+    }
+  }
   const ifDisabled = action.disabled;
 
   let isIfDisabled = false;
-
   if (isBoolean(ifDisabled)) {
     isIfDisabled = ifDisabled;
   }

apps/web-baicai/src/components/table-action/src/types.d.ts

@@ -12,11 +12,12 @@ export interface PopConfirm {
 }
 export interface ActionItem extends ButtonProps {
   onClick?: Fn;
-  label?: string;
+  label?: ((row: Record<string, any>) => string) | string;
   color?: 'error' | 'success' | 'warning';
   icon?: string;
   popConfirm?: PopConfirm;
   disabled?: boolean;
+  dynamicDisabled?: ((action: ActionItem) => boolean) | boolean;
   divider?: boolean;
   // 权限编码控制是否显示
   auth?: string[];

apps/web-baicai/src/views/system/design/table/components/page.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { type PropType, reactive, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import { reactive, ref, watch } from 'vue';
 
 import { Fallback } from '@vben/common-ui';
 import { useVbenVxeGrid } from '@vben/plugins/vxe-table';

apps/web-baicai/src/views/system/design/table/components/step/baseConfig.vue

@@ -3,7 +3,7 @@ import { onMounted } from 'vue';
 
 import { Card } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
+import { useVbenForm } from '#/adapter';
 
 const [Form, { validate, setValues, getValues }] = useVbenForm({
   commonConfig: {

apps/web-baicai/src/views/system/design/table/components/step/buttonConfig.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter';
 import type { QueryApi } from '#/api';
 
 import { Card } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
-import { useVbenVxeGrid, type VxeGridListeners } from '#/adapter/vxe-table';
+import { useVbenForm, useVbenVxeGrid } from '#/adapter';
 
 // const columns = inject<QueryApi.Column[]>('page-columns') as QueryApi.Column[];
 

apps/web-baicai/src/views/system/design/table/components/step/columnConfig.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter';
 import type { QueryApi } from '#/api';
 
 import { inject, unref } from 'vue';
 
 import { Card, message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
-import { useVbenVxeGrid, type VxeGridListeners } from '#/adapter/vxe-table';
+import { useVbenForm, useVbenVxeGrid } from '#/adapter';
 
 const columns = inject<QueryApi.Column[]>('page-columns') as QueryApi.Column[];
 

apps/web-baicai/src/views/system/design/table/components/step/searchConfig.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter';
 import type { QueryApi } from '#/api';
 
 import { inject, unref } from 'vue';
 
 import { Card } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
-import { useVbenVxeGrid, type VxeGridListeners } from '#/adapter/vxe-table';
+import { useVbenForm, useVbenVxeGrid } from '#/adapter';
 
 const columns = inject<QueryApi.Column[]>('page-columns') as QueryApi.Column[];
 

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

@@ -1,17 +1,85 @@
-import type { VbenFormProps } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type {
+  OnActionClickFn,
+  VbenFormProps,
+  VbenFormSchema,
+  VxeGridProps,
+  VxeTableGridOptions,
+} from '#/adapter';
 
 import { TableApi } from '#/api';
 
-export const searchFormOptions: VbenFormProps = {
-  showCollapseButton: false,
-  schema: [
+export const useSearchSchema = (): VbenFormSchema[] => {
+  return [
     {
       component: 'Input',
       fieldName: 'name',
       label: '名称',
     },
-  ],
+  ];
+};
+
+export function useColumns(
+  onActionClick?: OnActionClickFn<TableApi.RecordItem>,
+): VxeTableGridOptions<TableApi.RecordItem>['columns'] {
+  return [
+    { title: '序号', type: 'seq', width: 50 },
+    { align: 'left', field: 'tableType', title: '类型', width: 120 },
+    { align: 'left', field: 'name', title: '查询名称', width: 200 },
+    { align: 'left', field: 'code', title: '查询编码', width: 100 },
+    { field: 'sort', title: '排序', width: 50 },
+    { align: 'left', field: 'remark', title: '备注' },
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '查询名称',
+          onClick: onActionClick,
+        },
+        name: 'CellAction',
+        options: [
+          {
+            code: 'edit',
+            auth: ['page:edit'],
+          },
+          {
+            code: 'view',
+            label: '预览',
+            auth: ['page:view'],
+          },
+          {
+            code: 'editMenu',
+            label: (row: TableApi.RecordItem) => {
+              return row.menuId > 0 ? '修改菜单' : '配置菜单';
+            },
+            dynamicDisabled: (row: TableApi.RecordItem) => {
+              return row.tableType !== 'page_list';
+            },
+            auth: ['page:edit'],
+          },
+          {
+            code: 'design',
+            label: '表单设计',
+          },
+          {
+            code: 'delete',
+            auth: ['page:delete'],
+          },
+        ],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: '操作',
+      width: 100,
+    },
+  ];
+}
+
+export const searchFormOptions: VbenFormProps = {
+  showCollapseButton: false,
+  schema: [],
 };
 
 export const gridOptions: VxeGridProps<TableApi.RecordItem> = {
@@ -23,12 +91,6 @@ export const gridOptions: VxeGridProps<TableApi.RecordItem> = {
     custom: true,
   },
   columns: [
-    { title: '序号', type: 'seq', width: 50 },
-    { align: 'left', field: 'tableType', title: '类型', width: 120 },
-    { align: 'left', field: 'name', title: '查询名称', width: 200 },
-    { align: 'left', field: 'code', title: '查询编码', width: 100 },
-    { field: 'sort', title: '排序', width: 50 },
-    { align: 'left', field: 'remark', title: '备注' },
     {
       field: 'action',
       fixed: 'right',

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

@@ -1,25 +1,18 @@
 <script lang="ts" setup>
-import { useAccess } from '@vben/access';
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
+
 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 { TableApi } from '#/api';
-import { TableAction } from '#/components/table-action';
 import FormDesign from '#/views/form/design/form-modal.vue';
 import FormMenuEdit from '#/views/system/menu/components/editMenu.vue';
 
 import FormEdit from './components/edit.vue';
 import FormPreview from './components/preview.vue';
-import { gridOptions, searchFormOptions } from './data.config';
-
-const { hasAccessByCodes } = useAccess();
-
-const [Grid, { reload }] = useVbenVxeGrid({
-  formOptions: searchFormOptions,
-  gridOptions,
-});
+import { useColumns, useSearchSchema } from './data.config';
 
 const [FormEditModal, formEditApi] = useVbenModal({
   connectedComponent: FormEdit,
@@ -37,18 +30,10 @@ const [FormDesignModal, formDesignApi] = useVbenModal({
   connectedComponent: FormDesign,
 });
 
-const handleDelete = (id: number) => {
-  Modal.confirm({
-    iconType: 'info',
-    title: '删除提示',
-    content: `确定要删除选择的记录吗?`,
-    cancelText: `关闭`,
-    onOk: async () => {
-      await TableApi.deleteDetail(id);
-      message.success('数据删除成功');
-      reload();
-    },
-  });
+const handleDelete = async (id: number) => {
+  await TableApi.deleteDetail(id);
+  message.success('数据删除成功');
+  reload();
 };
 
 const handleEdit = (record: any, isUpdate: boolean) => {
@@ -73,26 +58,78 @@ const handelSuccess = () => {
 };
 
 const handleCreateMenu = (record: any) => {
-  formMenuEditApi.setData({
-    isUpdate: record.menuId > 0,
-    baseData: {
-      id: record.menuId,
-      component: `/system/design/template/index`,
-      meta: { query: { code: record.code } },
-    },
-  });
-  formMenuEditApi.open();
+  formMenuEditApi
+    .setData({
+      isUpdate: record.menuId > 0,
+      baseData: {
+        id: record.menuId,
+        component: `/system/design/template/index`,
+        meta: { query: { code: record.code } },
+      },
+    })
+    .open();
 };
 
 const handleDesign = (id: number) => {
-  formDesignApi.setData({
-    isUpdate: false,
-    baseData: {
-      id,
-    },
-  });
-  formDesignApi.open();
+  formDesignApi
+    .setData({
+      isUpdate: false,
+      baseData: {
+        id,
+      },
+    })
+    .open();
+};
+
+const handleActionClick = async ({
+  code,
+  row,
+}: OnActionClickParams<TableApi.RecordItem>) => {
+  switch (code) {
+    case 'delete': {
+      await handleDelete(row.id);
+      break;
+    }
+    case 'design': {
+      handleDesign(row.id);
+      break;
+    }
+    case 'edit': {
+      handleEdit(row, true);
+      break;
+    }
+    case 'editMenu': {
+      handleCreateMenu(row);
+      break;
+    }
+    case 'view': {
+      handlePreview(row);
+      break;
+    }
+  }
 };
+
+const [Grid, { reload }] = useVbenVxeGrid(
+  useTableGridOptions({
+    formOptions: {
+      schema: useSearchSchema(),
+    },
+    gridOptions: {
+      columns: useColumns(handleActionClick),
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            return await TableApi.getPage({
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              ...formValues,
+            });
+          },
+        },
+      },
+    } as VxeTableGridOptions,
+  }),
+);
 </script>
 
 <template>
@@ -112,45 +149,6 @@ const handleDesign = (id: number) => {
           新增页面
         </Button>
       </template>
-      <template #action="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: '编辑',
-              type: 'text',
-              disabled: !hasAccessByCodes(['page:edit']),
-              onClick: handleEdit.bind(null, row, true),
-            },
-            {
-              label: '预览',
-              type: 'text',
-              disabled: !hasAccessByCodes(['page:view']),
-              onClick: handlePreview.bind(null, row),
-            },
-          ]"
-          :drop-down-actions="[
-            {
-              label: row.menuId > 0 ? '修改菜单' : '配置菜单',
-              type: 'text',
-              disabled:
-                row.tableType !== 'page_list'
-                  ? true
-                  : !hasAccessByCodes(['page:edit']),
-              onClick: handleCreateMenu.bind(null, row),
-            },
-            {
-              label: '表单设计',
-              onClick: handleDesign.bind(null, row.id),
-            },
-            {
-              label: '删除',
-              type: 'link',
-              disabled: !hasAccessByCodes(['page:delete']),
-              onClick: handleDelete.bind(null, row.id),
-            },
-          ]"
-        />
-      </template>
     </Grid>
   </Page>
 </template>