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

YwDesign for lowcode

import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { IPublicTypeSnippetMore } from '../_base';

const TableTagsMeta: IPublicTypeComponentMetadata = {
  componentName: 'TableTags',
  title: '标签',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '基础组件',
  category: '表格',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.1.0',
    exportName: 'TableTags',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: '_dataConfig',
        title: { label: '数据配置', tip: '选择需要展示的标签字段' },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                descriptor: 'fieldName',
                config: {
                  items: [
                    {
                      name: 'value',
                      title: { label: '字段', tip: '接口返回字段，用于数据映射' },
                      supportVariable: false,
                      isRequired: true,
                      setter: {
                        componentName: 'MixedSetter',
                        props: {
                          setters: ['VariableSetter'],
                        },
                      },
                    },
                    {
                      name: 'rules',
                      title: { label: '规则配置', tip: 'rule | 数据显示规则配置' },
                      setter: {
                        componentName: 'ArraySetter',
                        props: {
                          itemSetter: {
                            componentName: 'ObjectSetter',
                            props: {
                              descriptor: 'value',
                              config: {
                                items: [
                                  {
                                    name: 'value',
                                    title: { label: '名称', tip: 'value | 标签名称' },
                                    setter: 'StringSetter',
                                    isRequired: true,
                                  },
                                  {
                                    name: 'color',
                                    title: { label: '颜色', tip: 'value | 颜色' },
                                    isRequired: true,
                                    setter: {
                                      componentName: 'SelectSetter',
                                      initialValue: 'info',
                                      props: {
                                        options: [
                                          {
                                            label: '黄色',
                                            value: 'warning',
                                          },
                                          {
                                            label: '绿色',
                                            value: 'success',
                                          },
                                          {
                                            label: '红色',
                                            value: 'error',
                                          },
                                          {
                                            label: '默认',
                                            value: 'info',
                                          },
                                        ],
                                      },
                                    },
                                  },
                                ],
                              },
                            },
                          },
                        },
                      },
                    },
                  ],
                },
              },
            },
          },
        },
        extraProps: {
          // getValue:()=>{},
          setValue: (target, value) => {
            const field = target.parent;
            console.log('set', value);
            if (value) {
              // 标签名数组
              const _value = [];
              //   数据映射
              const dataSource = [];
              value.forEach((v) => {
                _value.push(v.value);
                dataSource.push(...(v.rules || []));
              });
              field.setPropValue('value', _value);
              field.setPropValue('dataSource', dataSource);
            }
          },
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {},
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '标签',
    svgId: 'toolbox-page-label',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/singletag',
    schema: {
      componentName: 'TableTags',
      props: {
        dataSource: [
          {
            value: '',
            color: 'warning',
          },
        ],
        value: [],
        _dataConfig: [{ fieldName: '', rules: [] }],
      },
    },
  },
];

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