表单字段之间的交互抽离成可配置方案
// 现有功能
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 } 全局与当前混合