@ywfe/materials-design/lowcode/data-edit-dialog/meta.ts

YwDesign for lowcode

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

const DataEditDialogMeta: IPublicTypeComponentMetadata = {
  componentName: 'DataEditDialog',
  title: '编辑数据',
  docUrl: '',
  screenshot: '',
  group: '页面模块',
  category: '数据操作',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.0.1-beta.6',
    exportName: 'YwFormDialog',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'ref',
        title: {
          label: '组件标识',
          tip: "ref | 通过 this.$('xxx') 获取到组件实例",
        },
        defaultValue: () => {
          return `data_edit_dialog_${uuid()}`;
        },
        setter: 'StringSetter',
      },
      {
        name: 'title',
        title: { label: '弹窗标题', tip: 'title | 标题' },
        setter: 'StringSetter',
      },
      ...YwButtonBaseProps,
      ...FormItemsProps,
      {
        title: {
          label: '表单默认值',
          tip: 'initialValues | 表单默认值',
        },
        display: 'inline',
        name: 'initialValues',
        description: '表单默认值',
        supportVariable: false,
        setter: {
          componentName: 'JsonSetter',
          isRequired: false,
          initialValue: {},
        },
      },
      {
        title: {
          label: '表单初始化',
          tip: 'onFormInit | 表单初始化',
        },
        name: 'onFormInit',
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'SchemaFunctionSetter',
                props: {
                  title: 'getDataSource',
                  async: true,
                  properties: {
                    input: {
                      type: 'object',
                      properties: {
                        form: {
                          type: 'object',
                        },
                      },
                      required: ['form'],
                    },
                    body: {
                      type: 'array',
                      items: [
                        {
                          type: 'Function',
                          properties: {
                            template: 'RequestFunction',
                            variable: 'requestRes',
                            extraProps: {
                              _params: false,
                              _paramsArr: [
                                {
                                  name: 'id',
                                  value: '{{this.initialValues?.id}}',
                                },
                              ],
                              params: {
                                id: '{{this.initialValues?.id}}',
                              },
                            },
                          },
                        },
                        {
                          type: 'JSExpression',
                          run: 'console.log(1,this.record,this.initialValues);form.setInitialValues(requestRes || this.initialValues)',
                        },
                      ],
                    },
                  },
                },
              },
              {
                componentName: 'FunctionSetter',
              },
            ],
          },
        },
      },
      {
        title: {
          label: '确定操作',
          tip: 'onConfirm | 确定操作',
        },
        name: 'onConfirm',
        setter: {
          componentName: 'MixedSetter',
          props: {
            setters: [
              {
                componentName: 'SchemaFunctionSetter',
                props: {
                  title: 'getDataSource',
                  async: true,
                  properties: {
                    input: {
                      type: 'object',
                      properties: {
                        values: {
                          type: 'object',
                        },
                      },
                      required: ['values'],
                    },
                    body: {
                      type: 'array',
                      items: [
                        {
                          type: 'Function',
                          properties: {
                            template: 'RequestFunction',
                            variable: 'requestRes',
                            extraProps: {
                              params: '{{values}}',
                            },
                          },
                        },
                        {
                          type: 'JSExpression',
                          run: 'if (requestRes) this.reload && this.reload()',
                        },
                      ],
                    },
                    output: 'requestRes',
                  },
                },
              },
              {
                componentName: 'FunctionSetter',
              },
            ],
          },
        },
      },
    ],
    supports: {
      events: [
        {
          name: 'onCancel',
          description: '取消事件',
          template: 'function onCancel() {\n  this.setState({\n    isShowDialog: false\n  });\n}',
        },
        {
          name: 'onOpen',
          description: '弹窗打开事件(开发中)',
        },
      ],
      style: true,
      className: true,
      loop: false,
    },
    component: {
      isContainer: false,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '编辑数据',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/dialog',
    schema: {
      componentName: 'DataEditDialog',
      props: {
        btnText: '编辑',
        btnType: 'link',
        title: '编辑数据',
        initialValues: {
          type: 'JSExpression',
          value: 'this.record',
        },
        reload: {
          type: 'JSExpression',
          value: 'this.reload',
        },
        items: [
          {
            component: 'Input',
            title: '表单项',
            name: `input_${uuid()}`,
          },
        ],
        visible: undefined,
      },
    },
  },
];

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