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

import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { h } from 'vue';

import { EnumApi, MenuApi } from '#/api';
import { boolOptions, formatterStatus } from '#/api/model';
import { Icon } from '#/components/icon';

export const searchFormOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      fieldName: 'title',
      label: '标题',
    },
    {
      component: 'ApiSelect',
      fieldName: 'type',
      label: '菜单类型',
      componentProps: {
        api: {
          type: 'enum',
          params: EnumApi.EnumType.MenuType,
        },
      },
    },
  ],
};

export const gridOptions: VxeGridProps<MenuApi.RecordItem> = {
  toolbarConfig: {
    refresh: true,
    print: false,
    export: false,
    zoom: true,
    custom: true,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    {
      align: 'left',
      field: 'title',
      title: '菜单名称',
      width: 200,
      treeNode: true,
      showOverflow: true,
      slots: {
        default: ({ row }) => {
          return row.icon
            ? h(
                'span',
                {
                  style: {
                    display: 'flex',
                    alignItems: 'center',
                  },
                },
                [
                  h(Icon, {
                    icon: row.icon,
                  }),
                  h(
                    'span',
                    {
                      style: {
                        paddingLeft: '6px',
                      },
                    },
                    row.title,
                  ),
                ],
              )
            : h('span', {}, row.title);
        },
      },
    },
    { align: 'left', field: 'path', title: '路由地址', width: 180 },
    { align: 'left', field: 'component', title: '组件' },
    {
      align: 'left',
      field: 'permission',
      title: '权限标识',
      width: 120,
      showOverflow: true,
    },
    {
      field: 'status',
      title: '状态',
      width: 60,
      formatter: formatterStatus,
    },
    { field: 'sort', title: '排序', width: 80 },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: 170,
    },
  ],
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: false,
  },
  treeConfig: {
    rowField: 'id',
    childrenField: 'children',
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await MenuApi.getList({
          pageIndex: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};

export const formOptions: VbenFormProps = {
  commonConfig: {
    componentProps: {
      class: 'w-full',
      labelWidth: 110,
    },
  },
  schema: [
    {
      component: 'ApiRadio',
      defaultValue: 0,
      componentProps: {
        api: {
          type: 'enum',
          params: EnumApi.EnumType.MenuType,
        },
        isBtn: true,
      },
      fieldName: 'type',
      label: '菜单类型',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入路由名称',
      },
      fieldName: 'name',
      label: '路由名称',
      rules: 'required',
      dependencies: {
        show(values) {
          return [0, 1].includes(values.type);
        },
        triggerFields: ['type'],
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入路由地址',
      },
      fieldName: 'path',
      label: '路由地址',
      rules: 'required',
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [0, 1].includes(values.type);
        },
      },
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入组件路径',
      },
      dependencies: {
        show(values) {
          return [0, 1].includes(values.type);
        },
        triggerFields: ['type'],
      },
      fieldName: 'component',
      label: '组件路径',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入重定向',
      },
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [0, 1].includes(values.type);
        },
      },
      fieldName: 'redirect',
      label: '重定向',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入菜单名称',
      },
      fieldName: 'title',
      label: '菜单名称',
      rules: 'required',
    },
    {
      component: 'IconPicker',
      componentProps: {
        placeholder: '请输入图标',
      },
      fieldName: 'icon',
      label: '图标',
      rules: 'required',
      dependencies: {
        show(values) {
          return [0, 1].includes(values.type);
        },
        triggerFields: ['type'],
      },
    },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      componentProps: {
        placeholder: '请输入',
        options: boolOptions,
        optionType: 'button',
        buttonStyle: 'solid',
      },
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [1].includes(values.type);
        },
      },
      fieldName: 'keepAlive',
      label: '缓存',
    },
    {
      component: 'RadioGroup',
      defaultValue: 0,
      componentProps: {
        placeholder: '请输入',
        options: boolOptions,
        optionType: 'button',
        buttonStyle: 'solid',
      },
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [0, 1].includes(values.type);
        },
      },
      fieldName: 'hideInTab',
      label: '隐藏',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        placeholder: '请输入',
        api: {
          type: 'enum',
          params: EnumApi.EnumType.PathType,
        },
      },
      dependencies: {
        triggerFields: ['type'],
        show(values) {
          return [0, 1].includes(values.type);
        },
      },
      fieldName: 'pathType',
      label: '路由类型',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'sort',
      label: '排序',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      dependencies: {
        show(values) {
          return [2].includes(values.type);
        },
        triggerFields: ['type'],
      },
      fieldName: 'permission',
      label: '权限标识',
    },
    {
      component: 'ApiRadio',
      defaultValue: 1,
      componentProps: {
        placeholder: '请输入',
        api: {
          type: 'enum',
          params: EnumApi.EnumType.Status,
        },
        isBtn: true,
      },
      fieldName: 'status',
      label: '状态',
    },
  ],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-1',
};