表单字段之间的交互抽离成可配置方案

// 现有功能
 
1. 监听值变化
getFormObject(key).typeSet.eventChange
2. 监听其他事件
getFormObject(key).typeSet.eventBlur, eventFocus, eventAdd, evnetInsert等
3. 获取值
getItemValue(key)
4. 设置值
changeItemValue(key, value)
5. 获取其他属性
getFormObject(key).hidden disabled等
6. 设置其他属性
getFormObject(key).hidden = some
7. 获取验证规则
formRules[key]
8. 设置验证规则
formRules[key] = [validator]

需要实现的联动类型
1.单个表单项值变化
2.单个表单项事件触发
3.多个表单值变化
4.单个表单项验证

原逻辑实现

// 单个表单项值变化
this.$refs.form.getFormObject(key).eventChange = fn
// 单个表单项事件触发
this.$refs.form.getFormObject(key)[event]= fn
 
 
// 多个表单值变化
this.$refs.form.getFormObject(key1).eventChange = fn
this.$refs.form.getFormObject(key2).eventChange = fn
 
// 单个表单项验证
this.$refs.form.formRules[key] = [validaor]

使用配置描述

[
    { // 单个表单项值变化
        type: 'event',
        eventName: 'eventChange',
        target: '', // formItemKey
        action: 'function string'
    },
    { // 单个表单项事件触发
        type: 'event',
        eventName: 'eventBlur',
        target: '', // formItemKey
        action: 'function string'
    },
    { // 多个表单值变化
        type: 'effect',
        targets: [], // formItemKey
        action: 'function string'
    },
    { // 单个表单项验证
        type: 'validate',
        required: true,
        trigger: ['change', 'blur'],
        target: '', // formItemKey
        action: 'function string'
    },
]

配置实现, 导出effectsConfig

action例子

// event. effect类型
 
$('商品明细.商品名').value = 1
 
 
$('企业名').disabled = true;
 
 
$('企业名').value = edit ? $(企业别名).value : '未知'
// edit是自定义变量
 
 
if ($('企业名字').disable && arg[2]) {
// 参数: args 包含事件回调的参数, 不同事件回调不同, 如eventChange的args = [key, value, $event]
    $nextTick(() => {
        $router.push({ name: xxx })
    })
    $success('跳转成功')
}
 
// 全局函数包括: $nextTick, $success, $error, $warning, $router, $route
 
// validator
// validator的args为 [rule, value, callback]
let [rule, value, callback] = args
if (value !== '1') {
    callback('xxx')
}

编辑器需要实现的功能:
字段补全
语法验证

使用

 // 设置全局
        EffectProcess.globalStore = {
          $route: this.$route,
          $router: this.$router,
          $success: this.handlerMessage.success,
          $error: this.handlerMessage.error,
          $warning: this.handlerMessage.warning,
          $nextTick: this.$nextTick,
        };

        let effectInstance = new EffectProcess({
          form: this.$refs.hdFormEngineering,
          keyPrefixConfig: {
            default: '',
            [elsePrefix]: ''
          },
          store: { edit: this.state === 'edit' }
        })
        effectInstance.initEffects(effects);

实现
核心是实现下列功能
1.实现一个getFromItem方法, 通过proxy实现
将原本 通过getFormObject, getItemValue等功能, 封装成统一方式去读取与赋值

getFromItem(key).value 
.hidden
.disable
.eventChange
.rules等

2.实现action函数执行, 通过new Function实现
将action字符串转为函数, 并且传入所需要的参数
所需要的参数包括:

getFormItem
args
store  //  { ...globalStore, ...store } 全局与当前混合