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

import type {
  OnActionClickFn,
  VbenFormSchema,
  VxeTableGridOptions,
} from '#/adapter';

import { RoleApi } from '#/api';

export const useSearchSchema = (): VbenFormSchema[] => {
  return [
    {
      component: 'Input',
      fieldName: 'code',
      label: '编号',
    },
    {
      component: 'Input',
      fieldName: 'name',
      label: '名称',
    },
  ];
};

export function useColumns(
  onActionClick?: OnActionClickFn<RoleApi.RecordItem>,
): VxeTableGridOptions<RoleApi.RecordItem>['columns'] {
  return [
    { title: '序号', type: 'seq', width: 50 },
    {
      align: 'left',
      field: 'code',
      title: '编号',
      width: 150,
    },
    { align: 'left', field: 'name', title: '名称', width: 200 },
    { align: 'left', field: 'sort', title: '排序', width: 70 },
    { align: 'left', field: 'remark', title: '备注' },
    {
      field: 'status',
      title: '状态',
      width: 82,
      cellRender: { name: 'CellTag' },
    },
    {
      align: 'right',
      cellRender: {
        attrs: {
          nameField: 'name',
          nameTitle: '名称',
          onClick: onActionClick,
        },
        name: 'CellAction',
        options: [
          {
            code: 'edit',
            auth: ['role:edit'],
          },
          {
            code: 'grantMenu',
            label: '授权菜单',
            auth: ['role:grantMenu'],
          },
          {
            code: 'grantUser',
            label: '添加成员',
            auth: ['role:grantUser'],
          },
          {
            code: 'setStatus',
            label: (row: RoleApi.RecordItem) => {
              return row.status === 1 ? '禁用' : '启用';
            },
            auth: ['role:setStatus'],
          },
          {
            code: 'delete',
            auth: ['role:delete'],
          },
        ],
      },
      field: 'operation',
      fixed: 'right',
      headerAlign: 'center',
      showOverflow: false,
      title: '操作',
      width: 170,
    },
  ];
}

export const useSchema = (): VbenFormSchema[] => {
  return [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入编号',
      },
      fieldName: 'code',
      label: '编号',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
      fieldName: 'name',
      label: '名称',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入排序',
      },
      fieldName: 'sort',
      label: '排序',
      rules: 'required',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'remark',
      label: '备注',
    },
  ];
};