使用外部表单
willian fu 2022 ~
使用外部表单
提示
本章节仅提供引导思路，非保姆式教程，大家在理解后根据自己的需求去实现。
在wflow中，表单和流程是一一搭配的，表单可以脱离流程而使用，但是流程的某些功能需要配合wflow的表单来使用
概念
首先我们要理解一些概念知识点，帮助更好的理解这个功能
表单的设计数据
wflow的表单设计器生成的是json，这个json存到了数据库，再通过这个json反向渲染出表单，大家可以看下数据库 wflow_models表的form_items字段，或者vuex里面 design.formItems，里面存的就是表单的json。
表单json是一个数组，数组里面每个元素是表单字段，每个表单字段有一个随机的唯一id，格式如下：
{
id: 'field12784932671', //表单字段ID
title: '多行文本输入', //组件标题
name: 'TextareaInput', //组件名，组件是根据组件名来决定渲染哪个组件的
icon: 'el-icon-more-outline', //组件在设计器候选区的图标
value: '', //组件的值，该字段暂未使用
valueType: ValueType.string, //组件值数据类型
props: { //组件的附加属性
required: false, //公共属性，是否必填
enablePrint: true //公共属性，是否允许打印
//组件其他设置项，根据组件类型来自定义
}
}
表单关联的功能
因此通过json我们就可以在一些需要将表单字段作为设置选项的地方将其展示出来给用户提供选择，例如如下几个地方，需要读取表单字段配置
要替换表单的类型
要替换表单类型可能是：
- 自己用代码写的表单
- 其他表单设计器生成的表单
实际操作
根据以上信息，我们可以知道，如果流程设计里面是携带了一些表单信息的，关联的是表单字段的id，那么我们首先要解决这个表单字段id和现有表单的关系
如果使用自己代码写的表单，那么我们的表单组件可以这么写，这里给个点子
<template>
<el-form>表单项</el-form>
</template>
<script>
export default {
data() {
return {
formData: { //表单绑定的对象值
field9028493231:'',
field1083297843:'',
field1673290189:''
},
//定义表单json，为wflow提供表单配置数据
formConfig: [ //表单的json配置
{
id: 'field9028493231', //字段ID
title: '姓名', //字段名称
requied: false, //是否必填
perm: 'E' //表单权限
}
]
}
},
methods:{
//获取表单json规则，被wflow调用
getJsonSchema(){
return this.formConfig
},
//表单校验，被wflow调用
validate(call){
//这里写自己的表单校验逻辑
call(校验结果true/false)
}
}
}
</script>
待完善。。。