xaboy / form-create

:fire::fire::fire: 强大的低代码动态表单组件,通过JSON数据驱动表单渲染,适配移动端,支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
https://www.form-create.com/
MIT License
6.07k stars 975 forks source link

【bug】在设计器中,当用户修改设置后,被修改了默认值并隐藏起来的 cascaderProps 会被忽略失效 #631

Closed Xuechengqi closed 3 weeks ago

Xuechengqi commented 1 year ago

版本号 (version)

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

UI 框架的版本 (UI version)

"vue": "^3.2.39"

问题描述 (Issue)

现在的需求是,对于设计器中的级联选择器,对于配置选项下的次级菜单的展开方式设置默认值为hover,并隐藏该设置,不让用户在组件配置栏中看见。 对于上述需求,复制原来的 cascader menu rule 作为一个新组件的 rule 放到 fcDesigner中的 component 和 menuItem 中。 拖出这个新的组件,未点击保存表单的情况下,设置该组件的 options , 点击预览,会发现次级菜单的展开方式还是 click 在生效。

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

const label = '级联选择器'
const name = 'cascader'
const fieldKey = 'my-cascader'

export default {
    icon: 'icon-cascader',
    label,
    name: fieldKey,
    rule({t}) {
        const opt = t('props.option');
        return {
            type: name,
            field: uniqueId(),
            title: t('components.cascader.name'),
            info: '',
            effect: {
                fetch: ''
            },
            $required: false,
            props: {
                options: [1, 2].map(value => {
                    return {
                        label: opt + value,
                        value,
                        children: [],
                    }
                }),
                props: {
                    expandTrigger: 'hover',
                    emitPath: true
                },
                showAllLevels: false
            }
        };
    },
    props(_, {t}) {
        return localeProps(t, fieldKey + '.props', [
            makeRequiredRule(),
            makeOptionsRule(t, 'props.options', ['json']),
            {
                type: 'Object',
                field: 'props',
                title: '配置选项',
                props: {
                    rule: localeProps(t, fieldKey + '.propsOpt', [
                        // {
                        //     type: 'select',
                        //     field: 'expandTrigger',
                        //     title: '次级菜单的展开方式',
                        //     options: [{label: 'click', value: 'click'}, {label: 'hover', value: 'hover'}]
                        // },
                        {type: 'switch', field: 'multiple', title: '是否多选'}
                    ])
                }
            }, 
            {type: 'input', field: 'placeholder', title: '级联选择器灰色提示语'},
            {
                type: 'switch',
                field: 'disabled',
                title: '是否禁用'
            },
            {type: 'switch', field: 'clearable', title: '是否支持清空选项', value: true},
           ]);
    }
}

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

  1. 复制原来的cascader menu rule

     const customComponents = [myCascader]`
     const menu = [{
         name: 'override',
         title: '新组件',
         list: [myCascader]
    }]
  2. 在designer 中新增该组件的规则:

    //  template
    <fc-designer
                ref="designerRef"
                :height="800"
                :menu="menu"
                :locale="locale"
            />
    // script
    designerRef.value.addComponent(customComponents)
  3. 在页面中的设计器中,拖拽出这个新的级联选择器,并查看它的组件配置

  4. 修改属性配置中的选项数据

image

  1. 点击预览,查看级联选择器的次级菜单,次级菜单的展开依旧要等鼠标 click。

image

期望的结果 (Desired outcome)

次级菜单的展开方式为 hover,并生效。

更多信息

debug 了一下,发现在修改完 options 之后,还会进入 fcDesigner.vue 文件的 propChange 方法,传入的参数是 propChange(‘props’, {multiple: undefined}),这里会导致,rule.props.props = {multiple: undefined} 而忽略原来的 rule.props.props = {expandTrigger: 'hover', emitPath: true}

xaboy commented 1 year ago

我这边检查一下 @Xuechengqi