@ywfe/materials-design/lowcode/_base/table-base-props.ts

YwDesign for lowcode

import { IPublicTypeFieldConfig } from '@alilc/lowcode-types';
import { YwButtonBaseProps } from './index';
import { primaryKeyConfig } from './json-form-base-props';
import { getPropValueWithPath, getPropsByDependence, uuid, getRefConfig } from '../_utils';

const historyProps = [
  {
    display: 'block',
    title: {
      label: '按钮文字',
      tip: 'btnText | 按钮文字',
    },
    name: 'btnText',
    description: '按钮文字',
    supportVariable: false,
    setter: {
      componentName: 'StringSetter',
      initialValue: '按钮',
      props: {
        placeholder: '请输入',
      },
    },
  },
  {
    display: 'block',
    title: {
      label: '按钮类型',
      tip: 'btnType | 按钮类型',
    },
    supportVariable: false,
    name: 'btnType',
    description: '按钮类型',
    defaultValue: 'default',
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          {
            label: '主按钮',
            value: 'primary',
          },
          {
            label: '次按钮',
            value: 'default',
          },
          {
            label: '自定义按钮',
            value: '',
          },
        ],
      },
      initialValue: 'primary',
    },
  },
  {
    display: 'block',
    title: {
      label: '跳转地址',
      tip: '_url | 跳转地址 如 /a/b/c, ',
    },
    name: '_url',
    setter: {
      componentName: 'MixedSetter',
      props: {
        setters: [
          {
            componentName: 'StringSetter',
          },
          {
            componentName: 'VariableSetter',
          },
        ],
      },
    },
    extraProps: {
      getValue: (target, value) => value || '/',
      setValue: (target, v) => {
        const type = getPropValueWithPath(target, '.__optionType');
        const value = v.value || `'${v}'`;
        const func = {
          HistoryPush: `function (){this.props.appHelper.history.push(${value})}`,
          HistoryOpen: `function (){this.props.appHelper.history.open(${value})}`,
        };
        target.parent.setPropValue('onClick', {
          type: 'JSExpression',
          value: func[type],
        });
      },
    },
  },
];

const tableButtonsProps = {
  title: '数据操作区配置',
  name: 'buttons',
  // display: 'accordion',
  supportVariable: false,
  setter: {
    componentName: 'ArraySetter',
    props: {
      itemSetter: {
        componentName: 'ObjectSetter',
        props: {
          descriptor: 'primaryKey',
          config: {
            items: [
              primaryKeyConfig,
              {
                name: '__optionType',
                display: 'block',
                title: { label: '操作类型', tip: '__optionType | 操作类型' },
                supportVariable: false,
                setter: {
                  componentName: 'SelectSetter',
                  isRequired: true,
                  defaultValue: 'Button',
                  props: {
                    options: [
                      {
                        label: '普通按钮',
                        value: 'Button',
                      },
                      {
                        label: '页面跳转(当前页)',
                        value: 'HistoryPush',
                      },
                      {
                        label: '页面跳转(新开页面)',
                        value: 'HistoryOpen',
                      },
                      {
                        label: '新建数据(弹窗)',
                        value: 'DataAddDialog',
                      },
                      {
                        label: '数据记录(表格弹窗)',
                        value: 'TableDialog',
                      },
                      {
                        label: '批量操作',
                        value: 'Batch',
                      },
                      {
                        label: '导入数据（开发中）',
                        value: 'ConfirmModal',
                      },
                      {
                        label: '导出数据（开发中）',
                        value: 'ConfirmModal',
                      },
                      {
                        label: '导入记录（开发中）',
                        value: 'ConfirmModal',
                      },
                      {
                        label: '自定义操作',
                        value: '',
                      },
                    ],
                  },
                },
                extraProps: {
                  setValue: (target, v) => {
                    switch (v) {
                      case 'HistoryPush':
                        target.parent.setPropValue('btnText', '页面跳转');
                        target.parent.setPropValue('children', null);
                        target.parent.setPropValue('btnType', 'default');
                        target.parent.setPropValue('type', 'action');
                        break;
                      case 'HistoryOpen':
                        target.parent.setPropValue('btnText', '页面跳转');
                        target.parent.setPropValue('children', null);
                        target.parent.setPropValue('btnType', 'default');
                        target.parent.setPropValue('type', 'action');
                        break;
                      case 'Batch':
                        target.parent.setPropValue('btnText', '批量操作');
                        target.parent.setPropValue('children', null);
                        target.parent.setPropValue('btnType', 'default');
                        target.parent.setPropValue('type', 'batch');
                        break;
                      case 'DataAddDialog':
                        target.parent.setPropValue('type', 'action');
                        target.parent.setPropValue('children', {
                          type: 'JSSlot',
                          // params: ['initialValues', 'index', 'reload'],
                          value: [
                            {
                              componentName: 'DataAddDialog',
                              props: {
                                btnText: '新增',
                                btnType: 'primary',
                                title: '新增数据',
                                reload: {
                                  type: 'JSExpression',
                                  value: 'this.reload',
                                },
                                items: [
                                  {
                                    component: 'Input',
                                    title: '表单项',
                                    name: `input_${uuid()}`,
                                  },
                                ],
                              },
                            },
                          ],
                        });
                        break;
                      case 'TableDialog':
                        target.parent.setPropValue('type', 'action');
                        target.parent.setPropValue('children', {
                          type: 'JSSlot',
                          value: [
                            {
                              componentName: 'YwTableDialog',
                              props: {
                                btnText: '查看记录',
                                btnType: 'primary',
                                title: '查看记录',
                                reload: {
                                  type: 'JSExpression',
                                  value: 'this.reload',
                                },
                              },
                            },
                          ],
                        });
                        break;
                      case 'Button':
                        target.parent.setPropValue('type', 'action');
                        target.parent.setPropValue('btnType', 'default');
                        target.parent.setPropValue('btnText', '按钮');
                        target.parent.setPropValue('children', null);
                        break;
                      default:
                        break;
                    }
                  },
                },
              },
              {
                display: 'block',
                name: 'visible',
                title: { label: '是否显示', tip: 'visible | 是否显示' },
                setter: {
                  componentName: 'MixedSetter',
                  props: {
                    setters: ['VariableSetter'],
                  },
                },
              },
              {
                title: '操作类型',
                name: 'type',
                setter: {
                  componentName: 'SelectSetter',
                  props: {
                    options: [
                      {
                        label: '批量类（左侧）',
                        value: 'batch',
                      },
                      {
                        label: '新增类（右侧）',
                        value: 'action',
                      },
                      // {
                      //   label: '过滤条件',
                      //   value: 'filter',
                      // },
                    ],
                  },
                  initialValue: 'action',
                },
                condition: (target: any) => !getPropValueWithPath(target, '.__optionType'),
              },
              ...getPropsByDependence(
                historyProps,
                ['HistoryPush', 'HistoryOpen'],
                '.__optionType',
              ),
              ...getPropsByDependence(YwButtonBaseProps, ['Button'], '.__optionType'),
              // 按钮相关setter
              ...getPropsByDependence(YwButtonBaseProps, ['Batch'], '.__optionType'),
              {
                name: 'onClick', // 新增类事件
                title: '点击事件',
                display: 'block',
                supportVariable: false,
                setter: {
                  componentName: 'SchemaFunctionSetter',
                  props: {
                    title: 'onClick',
                    async: true,
                    properties: {
                      body: {
                        type: 'array',
                        items: [
                          {
                            type: 'Function',
                            properties: {
                              template: 'SetStateFunction',
                              extraProps: {
                                state: 'visible',
                                value: '{{true}}',
                              },
                            },
                          },
                        ],
                      },
                    },
                    required: ['body'],
                  },
                },
                condition: (target: any) => {
                  return (
                    getPropValueWithPath(target, '.btnType') !== '' &&
                    !getPropValueWithPath(target, '.children') &&
                    ['action'].includes(getPropValueWithPath(target, '.type'))
                  );
                },
              },
              {
                name: 'onClick', // 批量操作类事件
                title: '点击事件',
                supportVariable: false,
                setter: (target) => {
                  const ref = getPropValueWithPath(target, '...ref');
                  return {
                    componentName: 'SchemaFunctionSetter',
                    props: {
                      title: 'onBatchClick',
                      async: true,
                      properties: {
                        input: {
                          type: 'object',
                          properties: {
                            keys: {
                              type: 'array',
                            },
                            data: {
                              type: 'array',
                            },
                          },
                          required: ['keys', 'data'],
                        },
                        body: {
                          type: 'array',
                          items: [
                            {
                              type: 'Function',
                              properties: {
                                template: 'RequestFunction',
                                variable: 'requestRes',
                                extraProps: {},
                              },
                            },
                            {
                              type: 'Function',
                              properties: {
                                template: 'DispatchFunction',
                                extraProps: {
                                  path: ref,
                                  type: 'batch',
                                  data: '{{undefined}}',
                                },
                              },
                            },
                          ],
                        },
                      },
                      required: ['input', 'body'],
                    },
                  };
                },

                condition: (target: any) => {
                  return (
                    getPropValueWithPath(target, '.btnType') !== '' &&
                    !getPropValueWithPath(target, '.children') &&
                    ['batch'].includes(getPropValueWithPath(target, '.type'))
                  );
                },
              },
              {
                name: 'children',
                title: {
                  label: '自定义操作',
                  tip: 'children | 自定义操作按钮',
                },
                propType: 'func',
                setter: {
                  componentName: 'SlotSetter',
                  title: '自定义操作按钮',
                  props: {
                    hideParams: true,
                  },
                  initialValue: {
                    type: 'JSSlot',
                    hideParams: true,
                    value: [],
                  },
                },
                condition: (target: any) => !getPropValueWithPath(target, '.__optionType'),
              },
            ],
          },
        },
        initialValue: {
          __optionType: 'Button',
        },
      },
    },
  },
};

const TableBaseProps: IPublicTypeFieldConfig[] = [
  getRefConfig('table', [
    {
      type: 'reload',
    },
  ]),
  {
    name: 'columns',
    title: { label: '表格列', tip: '表格列的配置描述，具体项见下表' },
    supportVariable: false,
    display: 'accordion',
    setter: {
      componentName: 'ArraySetter',
      props: {
        itemSetter: {
          componentName: 'ObjectSetter',
          props: {
            descriptor: 'title',
            config: {
              items: [
                {
                  display: 'block',
                  name: 'title',
                  title: { label: '标题', tip: 'title | 列头显示文字' },
                  supportVariable: false,
                  propType: { type: 'oneOfType', value: ['string', 'func'] },
                  isRequired: true,
                  setter: {
                    componentName: 'StringSetter',
                    props: {
                      placeholder: '请输入列头名称',
                    },
                  },
                },
                {
                  display: 'block',
                  name: 'dataIndex',
                  title: {
                    label: '字段',
                    tip: 'dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径',
                  },
                  propType: 'string',
                  // isRequired: true,
                  supportVariable: false,
                  defaultValue: 'id',
                  setter: 'StringSetter',
                  extraProps: {
                    setValue: (target, value) => {
                      if (value) {
                        target.parent.parent
                          .getProps()
                          .setPropValue(`columns.${target.parent.name}.key`, value);
                        target.parent.parent
                          .getProps()
                          .setPropValue(`columns.${target.parent.name}.dataIndex`, value);
                      }
                    },
                  },
                },

                {
                  display: 'block',
                  name: 'width',
                  supportVariable: false,
                  title: { label: '宽度', tip: 'width | 列的宽度，建议区间 80 ~ 150' },
                  propType: {
                    type: 'oneOfType',
                    value: ['number', 'string'],
                  },
                  setter: 'NumberSetter',
                },
                {
                  display: 'block',
                  name: 'component',
                  title: {
                    label: '渲染组件',
                    tip: 'component | 提供简单类型的内容渲染模板，复杂类型请自定义',
                  },
                  supportVariable: false,
                  propType: 'string',
                  setter: {
                    componentName: 'SelectSetter',
                    isRequired: false,
                    props: {
                      options: [
                        {
                          label: '序号 | IndexCol',
                          value: 'IndexCol',
                        },
                        {
                          label: '缺省占位 | EmptyCol',
                          value: 'EmptyCol',
                        },
                        {
                          label: '价格 | Price',
                          value: 'Price',
                        },
                        {
                          label: '可复制 | CopyCol',
                          value: 'CopyCol',
                        },
                        {
                          label: '时间 | Time',
                          value: 'Time',
                        },
                        // {
                        //   label: '表单项 | YwJsonForm', // todo 渲染有问题 暂时不透出
                        //   value: 'YwJsonForm',
                        // },
                        {
                          label: '自定义渲染',
                          value: '',
                        },
                      ],
                    },
                    initialValue: 'EmptyCol',
                  },
                  // condition: (target) => !!getPropValue(target, '.dataIndex'),
                  // condition: {
                  //   type: 'JSFunction',
                  //   value:
                  //     'target => !!target.parent.parent.getProps().getPropValue(`columns.${target.parent.name}.dataIndex`)',
                  // },
                },
                // {
                //   title: { label: '组件配置项', tip: 'componentProps | 组件配置项' },
                //   name: 'componentProps',
                //   display: 'accordion',
                //   setter: {
                //     componentName: 'ObjectSetter',
                //     props: {
                //       config: {
                //         items: tableFormItemProps,
                //       },
                //     },
                //   },
                //   condition: (target: any) =>
                //     ['YwJsonForm'].includes(getPropValueWithPath(target, '.component')),
                // },
                {
                  display: 'block',
                  name: '_render',
                  title: {
                    label: '自定义组件',
                    tip: 'render | 选择组件库-基础组件-表格子元素内的模块',
                  },
                  propType: 'func',
                  supportVariable: false,
                  setter: {
                    componentName: 'SlotSetter',
                    title: '表格内容插槽',
                    hideParams: true,
                    initialValue: {
                      type: 'JSSlot',
                      params: ['text', 'record', 'index', 'tableRef'],
                      value: [],
                    },
                  },
                  condition: {
                    type: 'JSFunction',
                    value:
                      'target => !target.parent.parent.getProps().getPropValue(`columns.${target.parent.name}.component`)',
                  },
                },
                {
                  display: 'block',
                  name: 'fixed',
                  supportVariable: false,
                  title: { label: '列是否固定', tip: 'fixed | 列是否固定' },
                  description: '（IE 下无效）列是否固定，可选 true (等效于 left) left right',
                  defaultValue: '',
                  propType: {
                    type: 'oneOf',
                    value: ['', 'left', 'right'],
                  },
                  setter: {
                    componentName: 'RadioGroupSetter',
                    props: {
                      options: [
                        {
                          title: '不固定',
                          value: '',
                        },
                        {
                          title: '固定在左侧',
                          value: 'left',
                        },
                        {
                          title: '固定在右侧',
                          value: 'right',
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
          initialValue: { title: '表头名称', dataIndex: uuid(), component: 'EmptyCol' }, // component改为IndexCol，解决初始化切换数据字段setter时找不到dataIndex和key的报错
        },
      },
    },
  },
  {
    name: 'tableDataSource',
    title: '数据源',
    type: 'group',
    display: 'entry',
    items: [
      {
        display: 'block',
        name: 'rowKey',
        supportVariable: false,
        title: { label: '主键', tip: 'rowKey | 数据唯一标识' },
        setter: {
          componentName: 'StringSetter',
          props: {
            placeholder: '请输入',
          },
          isRequired: true,
          initialValue: 'id',
        },
      },
      {
        display: 'block',
        name: 'getTableData',
        title: '数据请求',
        supportVariable: false,
        setter: {
          componentName: 'SchemaFunctionSetter',
          props: {
            title: 'getTableData',
            async: true,
            properties: {
              input: {
                type: 'object',
                properties: {
                  values: {
                    type: 'object',
                  },
                },
                required: ['values'],
              },
              body: {
                type: 'array',
                items: [
                  {
                    type: 'Function',
                    properties: {
                      template: 'RequestFunction',
                      variable: 'result',
                      extraProps: {
                        // apiId: 'API_344_77522_323217f643c3e3f1fe7532e72ac01bb0748c97be',
                        params: '{{values}}',
                        apiType: 5,
                      },
                    },
                  },
                ],
              },
              output: 'result',
            },
            required: ['input', 'body', 'output'],
          },
        },
      },
      {
        display: 'block',
        name: 'dataSource',
        title: { label: '静态数据源', tip: 'dataSource | 静态数据源' },
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: ['VariableSetter'],
          },
        },
      },
      {
        display: 'block',
        name: 'filterProps',
        title: '查询参数',
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: ['VariableSetter'],
          },
        },
        defaultValue: {
          type: 'JSExpression',
          value: 'this.state.filterProps',
        },
      },
    ],
  },
  tableButtonsProps,
  {
    name: 'rowSelectConfig',
    title: '行选择器配置',
    display: 'entry',
    type: 'group',
    items: [
      {
        display: 'block',
        name: 'rowSelection',
        title: { label: '行选择', tip: 'rowSelection | 行选择' },
        setter: 'BoolSetter',
        defaultValue: false,
        extraProps: {
          setValue: (target, value) => {
            if (value) {
              target.parent.setPropValue('rowSelection', {
                type: 'checkbox',
              });
            }
          },
        },
      },
      {
        display: 'block',
        name: 'rowSelection.type',
        title: { label: '行选择类型', tip: 'rowSelection.type | 多选/单选' },
        propType: {
          type: 'oneOf',
          value: ['checkbox', 'radio'],
        },
        supportVariable: false,
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '多选',
                value: 'checkbox',
              },
              {
                title: '单选',
                value: 'radio',
              },
            ],
          },
          initialValue: 'checkbox',
        },
        condition: {
          type: 'JSFunction',
          value: 'target => !!target.getProps().getPropValue("rowSelection")',
        },
      },
      {
        display: 'block',
        name: 'rowSelection.getCheckboxProps',
        title: {
          label: '其他属性配置',
          tip: 'rowSelection.getCheckboxProps | 选择框的其他属性配置',
        },
        propType: 'func',
        setter: [
          {
            componentName: 'FunctionSetter',
            props: {
              template:
                'getCheckboxProps(record,${extParams}){\n// 选择框的默认属性配置\nreturn { disabled: false };\n}',
            },
          },
          // 'VariableSetter',
        ],
        condition: {
          type: 'JSFunction',
          value: 'target => !!target.getProps().getPropValue("rowSelection")',
        },
      },
      {
        display: 'block',
        title: {
          label: '隐藏所选总数',
          tip: 'rowSelection.hideSelectTotal | 隐藏所选总数',
        },
        name: 'rowSelection.hideSelectTotal',
        setter: {
          componentName: 'BoolSetter',
        },
        supportVariable: false,
        condition: {
          type: 'JSFunction',
          value: 'target => !!target.getProps().getPropValue("rowSelection")',
        },
      },
    ],
  },
  {
    name: 'scroll',
    title: '滚动条',
    display: 'entry',
    type: 'group',
    items: [
      {
        name: 'scroll.x',
        display: 'block',
        title: {
          label: '横向滚动',
          tip: 'scroll.x | 一般为1500 ~ 2000，开启后建议固定头尾列',
        },
        supportVariable: false,
        setter: {
          componentName: 'NumberSetter',
          props: {
            placeholder: '横向滚动距离，单位px',
          },
        },
        extraProps: {
          setValue: (target, value) => {
            target.parent.setPropValue('sticky', !!value);
          },
        },
      },
      {
        name: 'scroll.y',
        display: 'block',
        title: {
          label: '纵向滚动',
          tip: 'scroll.y | 一般不建议开启',
        },
        supportVariable: false,
        setter: {
          componentName: 'NumberSetter',
          props: {
            placeholder: '纵向滚动距离，单位px',
          },
        },
      },
    ],
  },
  {
    name: 'otherConfig',
    title: '其它属性',
    display: 'entry',
    type: 'group',
    items: [
      // {
      //   display: 'block',
      //   name: 'ref',
      //   title: {
      //     label: '组件标识',
      //     tip: "ref | 通过 this.$('xxx') 获取到组件实例",
      //   },
      //   setter: {
      //     initialValue: `table_${uuid()}`,
      //     componentName: 'StringSetter',
      //     props: {
      //       placeholder: '请输入',
      //     },
      //   },
      //   supportVariable: false,
      //   extraProps: {
      //     setValue: (target, value) => {
      //       registerActions(target, [
      //         {
      //           path: value,
      //           type: 'reload',
      //         },
      //       ]);
      //     },
      //   },
      // },
      {
        display: 'block',
        title: { label: '总条数', tip: 'showTotal | 是否显示总条数' },
        supportVariable: false,
        setter: {
          componentName: 'BoolSetter',
          initialValue: true,
        },
      },
      {
        display: 'block',
        title: { label: '行对齐', tip: 'rowAlign | 行对齐方式' },
        supportVariable: false,
        name: 'rowAlign',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '顶部对齐',
                value: 'top',
              },
              {
                label: '居中对齐',
                value: 'middle',
              },
            ],
          },
          initialValue: 'top',
        },
      },
      {
        display: 'block',
        title: {
          label: '表格类型',
          tip: 'rowSelection.tableType | 表格类型',
        },
        supportVariable: false,
        name: 'tableType',
        description: '类型',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '默认表格',
                value: 'default',
              },
              {
                label: '分组表格',
                value: 'group',
              },
            ],
          },
          initialValue: 'default',
        },
      },
      {
        display: 'block',
        title: { label: '虚拟列表', tip: 'useVirtual | 是否开启虚拟列表' },
        name: 'useVirtual',
        description: '开启虚拟列表',
        supportVariable: false,
        setter: {
          componentName: 'BoolSetter',
          isRequired: false,
          initialValue: false,
        },
      },
      {
        display: 'block',
        title: { label: '分页器', tip: '是否展示分页器' },
        name: 'pagination',
        description: '是否展示分页器',
        supportVariable: false,
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'ObjectSetter',
                props: {
                  config: {
                    items: [
                      {
                        name: 'pageSize',
                        title: { label: '每页条数', tip: 'pageSize | 每页条数' },
                        setter: 'NumberSetter',
                        supportVariable: false,
                      },
                      {
                        name: 'showQuickJumper',
                        title: {
                          label: '是否可以快速跳转至某页',
                          tip: 'showQuickJumper | 是否可以快速跳转至某页',
                        },
                        setter: 'BoolSetter',
                        supportVariable: false,
                      },
                    ],
                  },
                },
              },
              {
                componentName: 'BoolSetter',
                initialValue: true,
              },
            ],
          },
          isRequired: false,
          initialValue: false,
        },
      },
      {
        display: 'block',
        title: { label: '表格合计', tip: 'summary | 表格合计' },
        name: 'summary',
        description: '表格合计',
        supportVariable: false,
        setter: {
          componentName: 'SlotSetter',
          title: '表格合计',
          initialValue: {
            type: 'JSSlot',
            params: ['pageData'],
            value: [],
          },
        },
      },
    ],
  },
];

export default TableBaseProps;