【optimize|bug】在表单设计器中，定义一个组件，支持通过配置项来改变组件的title和field

[Xuechengqi]

版本号 (version)

"@form-create/designer": "^3.1.1", "@form-create/element-ui": "^3.1.17"

UI 框架的版本 (UI version)

"vue": "^3.2.39"

问题描述 (Issue)

现在的需求是，将组件配置中的字段 ID置为不可编辑，自定义一个配置项，通过该属性配置项能改变组件的字段 ID 取值，并实时反应到组件配置的对应地方。

复现步骤/生成规则 (Duplicate steps/generate rules)

1. 定义该组件 rule，并放到设计器和form-create中注册:

import uniqueId from '@form-create/utils/lib/unique'
import { localeProps, makeRequiredRule } from '../../utils'

const label = '用户'
const fieldKey = 'user-select'

export default {
    icon: 'icon-select',
    label,
    name: fieldKey,
    rule() {
        return {
            field: uniqueId(),
            type: 'select',
    title: '用户选择器',
    info: '',
    effect: {
        fetch: {
            action: '/api/v2/xxx/user_list',
            method: 'GET',
            data: {},
            headers: {},
            parse: function(res) {
                return (res.data || []).map(i => ({
                    ... i,
                    value: i.id,
                    label: i.name
                }))
            },
            to: 'options'
        }
    },
    props: {
        filterable: true,
        reserveKeyword: false,
        usage: 'normal'
    }
        }
    },
    watch: {
        multiple({rule}) {
            rule.key = uniqueId()
        },
        width({ value, rule }) {
            if (value) {
                rule.style = {
                    width: value
                }
            }
        },
        usage({ value, rule }) {
            const idField = document.querySelector('.component-id-input')
            if (idField) {
                idField.setAttribute('readOnly', false)
            }
            switch (value) {
                case 'normal':
                    rule.field = uniqueId()
                    rule.title = '用户选择器'
                    break
                case 'default_carbon_copy':
                    rule.title = '默认抄送人'
                    rule.field = value
                    break
                case 'carbon_copy':
                    rule.title = '抄送人'
                    rule.field = value
                    break
                default:
            }
            rule.key = uniqueId()
            if (idField) {
                idField.setAttribute('readOnly', true)
            }
        }
    },
    props(_, {t}) {
        return localeProps(t, fieldKey + '.props', [
            makeRequiredRule(),
            {
                type: 'select',
                field: 'usage',
                title: '用途',
                options: [
                    {
                        value: 'default_carbon_copy',
                        label: '默认抄送人'
                    },
                    {
                        value: 'carbon_copy',
                        label: '抄送人'
                    },
                    {
                        value: 'normal',
                        label: '其它'
                    }
                ],
                control: [
                    {
                        handle: val => ['default_carbon_copy', 'carbon_copy'].includes(val),
                        rule: [
                            {
                                type: 'switch',
                                field: 'multiple',
                                title: '是否多选',
                                value: true,
                                props: {
                                    disabled: true
                                }
                            }
                        ]
                    },
                    {
                        handle: val => !['default_carbon_copy', 'carbon_copy'].includes(val),
                        rule: [
                            {
                                type: 'switch',
                                field: 'multiple',
                                title: '是否多选',
                                disabled: false
                            }
                        ]
                    }
                ]
            },
            {
                type: 'input',
                field: 'width',
                title: '组件宽度'
            },
            {
                type: 'switch',
                field: 'disabled',
                title: '是否禁用'
            },
            {
                type: 'switch',
                field: 'clearable',
                title: '是否可以清空选项'
            },
            {
                type: 'switch',
                field: 'collapseTags',
                title: '多选时是否将选中值按文字的形式展示'
            },
            {type: 'inputNumber', field: 'multipleLimit', title: '多选时用户最多可以选择的项目数，为 0 则不限制', props: {min: 0}},
            {type: 'input', field: 'placeholder', title: '选择器灰色提示语'}
        ])
    }
} 

2. 拖拽出该组件到设计器画布中，并将配置面板中的组件配置 - 用途选为默认抄送人。
3. 查看画布区域，组件字段title展示为了默认抄送人，但是查看配置面板中的组件配置 - 字段名称依然显示的是用户选择器；并且字段 ID也依旧是随机生成的id，而不是固定的default_carbon_copy。
4. 保存，查看保存的rule中，对应的title是默认抄送人，field 也是default_carbon_copy。
5. 再次打开该rule，组件配置区的展示是 字段名称为默认抄送人，字段ID为default_carbon_copy。

期望的结果 (Desired outcome)

在上述操作步骤中，第3步组件配置（未进行组件激活状态的切换）应该和第4步保存下去的东西一致（就像第5步一样）。

[xaboy]

目前不支持这个操作, 下个版本会支持

[Xuechengqi]

目前不支持这个操作, 下个版本会支持

@xaboy 请问下个版本大概什么时候发布呀

[xaboy]

最新版本已经支持自定义设置表单配置,基础配置,组件配置,验证配置