form-create
form-create copied to clipboard
xaboy
【optimize|bug】在表单设计器中，定义一个组件，支持通过配置项来改变组件的title和field
版本号 (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)
- 定义该组件 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: '选择器灰色提示语'}
])
}
}
- 拖拽出该组件到设计器画布中，并将
配置面板中的组件配置-用途选为默认抄送人。 - 查看画布区域，组件字段title展示为了
默认抄送人，但是查看配置面板中的组件配置-字段名称依然显示的是用户选择器；并且字段 ID也依旧是随机生成的id，而不是固定的default_carbon_copy。 - 保存，查看保存的rule中，对应的title是
默认抄送人，field 也是default_carbon_copy。 - 再次打开该rule，组件配置区的展示是
字段名称为默认抄送人，字段ID为default_carbon_copy。
期望的结果 (Desired outcome)
在上述操作步骤中，第3步组件配置（未进行组件激活状态的切换）应该和第4步保存下去的东西一致（就像第5步一样）。
