xt-front/src/views/sys/sysDict/category/data.ts

import { BasicColumn, FormSchema } from '/@/components/Table';
import { sysDictQueryTree } from '/@/api/sys/sysDictApi';

export const columns: BasicColumn[] = [
  {
    title: '字典名称',
    dataIndex: 'dictName',
  },
  {
    title: '字典编码',
    dataIndex: 'dictCode',
  },
  {
    title: '字典类型',
    dataIndex: 'dictType',
  },
  {
    title: '字体颜色',
    dataIndex: 'fontColor',
    width: 120,
  },
  {
    title: '背景颜色',
    dataIndex: 'bgColor',
    width: 120,
  },
  {
    title: '前缀颜色',
    dataIndex: 'prefixColor',
    width: 120,
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 80,
  },
  {
    title: '备注',
    dataIndex: 'remark',
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'dictName',
    label: '字典名称',
    component: 'Input',
    componentProps: {
      placeholder: '请输入字典名称',
    },
  },
  {
    field: 'dictCode',
    label: '字典编码',
    component: 'Input',
    componentProps: {
      placeholder: '请输入字典编码',
    },
  },
];

export const dataFormSchema: FormSchema[] = [
  {
    field: 'dictType',
    label: '字典类型',
    component: 'Input',
    componentProps: {
      placeholder: '请输入字典类型',
    },
    show: false,
  },
  {
    field: 'parentId',
    label: '上级字典',
    required: true,
    component: 'ApiTreeSelect',
    componentProps: ({ formModel }) => {
      return {
        placeholder: '请选择上级字典',
        api: sysDictQueryTree,
        // params root 是否手动添加根节点
        params: { dictType: formModel.dictType, root: true },
        resultField: 'data',
        fieldNames: {
          label: 'dictName',
          key: 'id',
          value: 'id',
        },
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    field: 'dictName',
    label: '字典名称',
    component: 'Input',
    required: true,
    componentProps: {
      placeholder: '请输入字典名称',
    },
  },
  {
    field: 'dictCode',
    label: '字典编码',
    component: 'Input',
    required: true,
    componentProps: {
      placeholder: '请输入字典编码',
    },
    dynamicRules: () => {
      return [
        {
          required: true,
          validator: async (_, value) => {
            if (!value) {
              return Promise.reject('字典项编码不能为空');
            }
            // if (validateStr(value)) {
            //   return Promise.reject('字典项编码为字母或数字组成');
            // }
            return Promise.resolve();
          },
        },
      ];
    },
  },
  {
    field: 'bgColor',
    label: '背景颜色',
    component: 'FormColorPicker',
    componentProps: ({ formModel }) => {
      return {
        onChange: e => {
          formModel.bgColor = e;
        },
      };
    },
  },
  {
    field: 'fontColor',
    label: '字体颜色',
    component: 'FormColorPicker',
    componentProps: ({ formModel }) => {
      return {
        onChange: e => {
          formModel.fontColor = e;
        },
      };
    },
  },
  {
    field: 'prefixColor',
    label: '前缀颜色',
    component: 'FormColorPicker',
    componentProps: ({ formModel }) => {
      return {
        onChange: e => {
          formModel.prefixColor = e;
        },
      };
    },
  },
  {
    field: 'sort',
    label: '排序',
    component: 'InputNumber',
    defaultValue: 999,
    componentProps: {
      placeholder: '请输入排序',
      min: 1,
      style: { width: '100%' },
    },
  },
  {
    label: '备注',
    field: 'remark',
    component: 'InputTextArea',
    componentProps: {
      placeholder: '请输入备注',
    },
  },
];