web/apps/web-baicai/src/views/shop/goods/params/data.config.ts

import type {
  OnActionClickFn,
  VbenFormSchema,
  VxeTableGridOptions,
} from '#/adapter';
import type { BasicOptionResult } from '#/api/model';
import type { ParamsApi } from '#/api/shop';

import { h } from 'vue';

import { z } from '#/adapter';

export const paramsTypeOptions: BasicOptionResult[] = [
  { label: '文本框', value: 0, color: 'success' },
  { label: '复选框', value: 1, color: 'error' },
  { label: '单选框', value: 2, color: 'warning' },
];

export const useSearchSchema = (): VbenFormSchema[] => {
  return [
    {
      component: 'Input',
      fieldName: 'name',
      label: '名称',
    },
    {
      component: 'Select',
      fieldName: 'paramsType',
      label: '类型',
      componentProps: {
        options: paramsTypeOptions,
      },
    },
  ];
};

export function useColumns(
  onActionClick?: OnActionClickFn<ParamsApi.RecordItem>,
): VxeTableGridOptions<ParamsApi.RecordItem>['columns'] {
  return [
    { title: '序号', type: 'seq', width: 50 },
    {
      align: 'left',
      field: 'name',
      title: '名称',
      width: 82,
    },
    {
      field: 'paramsType',
      title: '类型',
      width: 100,
      cellRender: { name: 'CellTag', options: paramsTypeOptions },
    },
    {
      align: 'left',
      field: 'value',
      title: '参数值',
      slots: { default: 'value' },
    },
    {
      align: 'right',
      cellRender: {
        attrs: {
          nameField: 'name',
          nameTitle: '名称',
          onClick: onActionClick,
        },
        name: 'CellAction',
        options: [
          {
            code: 'edit',
            auth: ['params:edit'],
          },
          {
            code: 'delete',
            auth: ['params:delete'],
          },
        ],
      },
      field: 'operation',
      fixed: 'right',
      headerAlign: 'center',
      showOverflow: false,
      title: '操作',
      width: 100,
    },
  ];
}

export const useSchema = (): VbenFormSchema[] => {
  return [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'name',
      label: '名称',
      rules: 'required',
    },
    {
      component: 'Select',
      componentProps: {
        options: paramsTypeOptions,
      },
      defaultValue: 0,
      fieldName: 'paramsType',
      label: '类型',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'value',
      label: '参数值',
      dependencies: {
        triggerFields: ['paramsType'],
        rules(values) {
          return [1, 2].includes(values.paramsType)
            ? z.string()
            : z.string().optional();
        },
      },
    },
    {
      component: h('div', { class: 'text-sm font-thin' }, [
        h(
          'div',
          null,
          '如果选择的是【单选】或者【复选框】，则多个参数值之间使用小写逗号（,）分隔。',
        ),
      ]),
      formItemClass: 'items-start',
      fieldName: 'remark',
      label: '说明',
    },
  ];
};