@ywfe/materials-design/lowcode/table-operates/meta.ts

YwDesign for lowcode

import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { YwButtonBaseProps } from '../_base';
import { getPropValueWithPath, getPropsByDependence, uuid } from '../_utils';

const confirmModalProps = [
  {
    name: 'componentProps',
    title: { label: '配置项', tip: 'componentProps | 配置项' },
    setter: {
      componentName: 'ObjectSetter',
      props: {
        config: {
          items: [
            {
              name: 'title',
              title: { label: '提示', tip: 'title | 提示' },
              setter: 'StringSetter',
              supportVariable: false,
              getValue: (_, v) => v || '提示',
            },
            {
              name: '_content',
              title: {
                label: '内容',
                tip: 'content | 提示内容 通过${this.record.xxxxx} 获取动态值',
              },
              isRequired: true,
              setter: {
                componentName: 'MixedSetter',
                props: {
                  setters: [
                    {
                      componentName: 'StringSetter',
                    },
                    {
                      componentName: 'VariableSetter',
                    },
                  ],
                },
              },
              extraProps: {
                getValue: (_, v) => v || '确认删除该数据吗？',
                setValue: (target, v) => {
                  const value = v.value || `'${v}'`;
                  target.parent.setPropValue('content', {
                    type: 'JSExpression',
                    value: `()=>${value}`,
                  });
                },
              },
            },
            {
              name: 'onOk',
              title: { label: '确认事件', tip: 'onOk | 确认事件' },
              setter: {
                componentName: 'MixedSetter',
                props: {
                  setters: [
                    {
                      componentName: 'SchemaFunctionSetter',
                      props: {
                        title: 'onOk',
                        async: true,
                        properties: {
                          input: {
                            type: 'object',
                            properties: {
                              value: {
                                type: 'object',
                              },
                              reload: {
                                type: 'object',
                              },
                            },
                            required: ['value', 'reload'],
                          },
                          body: {
                            type: 'array',
                            items: [
                              {
                                type: 'Function',
                                properties: {
                                  template: 'RequestFunction',
                                  variable: 'requestRes',
                                  extraProps: {
                                    params: {
                                      id: '{{value.id}}',
                                    },
                                    _params: false,
                                    _paramsArr: [
                                      {
                                        name: 'id',
                                        value: '{{value.id}}',
                                      },
                                    ],
                                  },
                                },
                              },
                              {
                                type: 'JSExpression',
                                run: 'if (requestRes) reload()',
                              },
                            ],
                          },
                        },
                      },
                    },
                    {
                      componentName: 'VariableSetter',
                    },
                  ],
                },
              },
            },
          ],
        },
      },
    },
  },
];

const buttonsProps = [
  ...YwButtonBaseProps,
  {
    name: 'disabeld',
    title: { label: '是否禁用', tip: 'disabeld | 是否禁用' },
    //   条件渲染setter 后面补充
    setter: 'BoolSetter',
  },
  {
    name: 'onClick',
    title: { label: '点击回调', tip: '点击按钮时的回调' },
    propType: 'func',
    setter: {
      componentName: 'FunctionSetter',
      props: {
        template: 'function (record,index,reload)=>{}',
      },
    },
  },
];

const historyProps = [
  {
    title: {
      label: '按钮文字',
      tip: 'btnText | 按钮文字',
    },
    name: 'btnText',
    description: '按钮文字',
    supportVariable: false,
    setter: {
      componentName: 'StringSetter',
      initialValue: '按钮',
    },
  },
  {
    title: {
      label: '跳转地址',
      tip: '_url | 跳转地址 如 /a/b/c, 查询参数用${record.xx}表示',
    },
    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 (_,record){this.props.appHelper.history.push(${value})}`,
          HistoryOpen: `function(_,record){this.props.appHelper.history.open(${value})}`,
        };
        target.parent.setPropValue('onClick', {
          type: 'JSExpression',
          value: func[type],
        });
      },
    },
  },
];
const TableMultipleMeta: IPublicTypeComponentMetadata = {
  componentName: 'TableOperates',
  title: '操作列',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '基础组件',
  category: '表格子元素',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.1.0',
    exportName: 'TableOperates',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'value',
        title: { label: '操作按钮配置', tip: '操作按钮配置' },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                descriptor: 'key',
                config: {
                  items: [
                    {
                      name: '__optionType',
                      title: { label: '操作类型', tip: '__optionType | 操作类型' },
                      setter: {
                        componentName: 'SelectSetter',
                        isRequired: true,
                        props: {
                          options: [
                            {
                              label: '普通按钮',
                              value: 'Button',
                            },
                            {
                              label: '页面跳转(当前页)',
                              value: 'HistoryPush',
                            },
                            {
                              label: '页面跳转(新开页面)',
                              value: 'HistoryOpen',
                            },
                            {
                              label: '查看数据(弹窗)',
                              value: 'DataDetailDialog',
                            },
                            {
                              label: '编辑数据(弹窗)',
                              value: 'DataEditDialog',
                            },
                            {
                              label: '删除数据',
                              value: 'ConfirmModal',
                            },
                            {
                              label: '自定义操作',
                              value: '',
                            },
                          ],
                        },
                      },
                      extraProps: {
                        setValue: (target, v) => {
                          switch (v) {
                            case 'ConfirmModal':
                              target.parent.setPropValue('type', 'danger');
                              target.parent.setPropValue('btnText', '删除');
                              target.parent.setPropValue('render', null);
                              target.parent.setPropValue('btnType', 'link');
                              target.parent.setPropValue('component', 'ConfirmModal');
                              break;
                            case 'HistoryPush':
                              target.parent.setPropValue('btnText', '查看详情');
                              target.parent.setPropValue('render', null);
                              target.parent.setPropValue('btnType', 'link');
                              break;
                            case 'HistoryOpen':
                              target.parent.setPropValue('btnText', '查看详情');
                              target.parent.setPropValue('render', null);
                              target.parent.setPropValue('btnType', 'link');
                              break;
                            case 'DataEditDialog':
                              target.parent.setPropValue('render', {
                                type: 'JSSlot',
                                params: ['initialValues', 'index', 'reload'],
                                value: [
                                  {
                                    componentName: 'DataEditDialog',
                                    id: `node_${uuid()}`,
                                    props: {
                                      btnText: '编辑',
                                      btnType: 'link',
                                      title: '编辑数据',
                                      reload: {
                                        type: 'JSExpression',
                                        value: 'this.reload',
                                      },
                                      initialValues: {
                                        type: 'JSExpression',
                                        value: 'this.initialValues',
                                      },
                                      items: [
                                        {
                                          component: 'Input',
                                          title: '表单项',
                                          name: `input_${uuid()}`,
                                        },
                                      ],
                                    },
                                  },
                                ],
                                id: `node_${uuid()}`,
                              });
                              break;
                            case 'DataDetailDialog':
                              target.parent.setPropValue('render', {
                                type: 'JSSlot',
                                params: ['initialValues', 'index', 'reload'],
                                value: [
                                  {
                                    componentName: 'DataEditDialog',
                                    id: `node_${uuid()}`,
                                    props: {
                                      btnText: '编辑',
                                      btnType: 'link',
                                      title: '编辑数据',
                                      reload: {
                                        type: 'JSExpression',
                                        value: 'this.reload',
                                      },
                                      initialValues: {
                                        type: 'JSExpression',
                                        value: 'this.initialValues',
                                      },
                                      items: [
                                        {
                                          component: 'Input',
                                          title: '表单项',
                                          name: `input_${uuid()}`,
                                        },
                                      ],
                                    },
                                  },
                                ],
                                id: `node_${uuid()}`,
                              });
                              break;
                            default:
                              break;
                          }
                        },
                      },
                    },
                    {
                      name: 'visible',
                      title: { label: '是否显示', tip: 'visible | 是否显示' },
                      setter: 'BoolSetter',
                    },
                    ...getPropsByDependence(confirmModalProps, ['ConfirmModal'], '.__optionType'),
                    ...getPropsByDependence(
                      historyProps,
                      ['HistoryPush', 'HistoryOpen'],
                      '.__optionType',
                    ),
                    ...getPropsByDependence(buttonsProps, ['Button'], '.__optionType'),
                    {
                      name: 'render',
                      title: {
                        label: '自定义操作',
                        tip: 'render | 自定义操作按钮',
                      },
                      propType: 'func',
                      setter: {
                        componentName: 'SlotSetter',
                        title: '自定义操作按钮',
                        props: {
                          hideParams: false,
                        },
                        initialValue: {
                          type: 'JSSlot',
                          hideParams: false,
                          supportParams: true,
                          params: ['initialValues', 'index', 'reload'],
                          value: [],
                        },
                      },
                      condition: (target: any) => !getPropValueWithPath(target, '.__optionType'),
                    },
                  ],
                },
              },
              initialValue: {
                render: {
                  type: 'JSSlot',
                  hideParams: false,
                  supportParams: true,
                  params: ['initialValues', 'index', 'reload'],
                  value: [],
                },
              },
            },
          },
        },
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'handeBatchClick', // 批量操作事件
          template: 'handeBatchClick(keys,data,reload){ console.log(keys);reload()}',
        },
        {
          name: 'handeActionClick', // 批量操作事件
          template: 'handeBatchClick(reload){ reload() }',
        },
      ],
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '操作列',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/tableOpration',
    schema: {
      componentName: 'TableOperates',
      props: {
        record: {
          type: 'JSExpression',
          value: 'this.record',
        },
        index: {
          type: 'JSExpression',
          value: 'this.index',
        },
        tableRef: {
          type: 'JSExpression',
          value: 'this.tableRef',
        },
        reload: {
          type: 'JSExpression',
          value: 'this.tableRef.current.reload',
        },
        refresh: {
          type: 'JSExpression',
          value: 'this.tableRef.current.refresh',
        },
        value: [
          {
            render: {
              type: 'JSSlot',
              hideParams: false,
              supportParams: true,
              params: ['_', 'record', 'reload'],
              value: [],
            },
          },
        ],
      },
    },
  },
];

export default {
  ...TableMultipleMeta,
  snippets,
};