# 表单设计器

# 数据结构

为了考虑后期对不同UI框架的兼容及数据传输的便捷，表单使用json来进行描述，前端通过json再反向渲染该表单

表单数据存储在vuex中，具体对象为 $store.state.process.formItems，是个数组

# 表单组件

表单组件是构成表单的基本元素，一个表单可以有多个组件，在UI中体现为如下图

# 组件值类型

每个组件都有对应的值，我们需要定义值的类型，有如下类型定义

const ValueType = {
  string: 'String',
  object: 'Object',
  array: 'Array',
  number: 'Number',
  date: 'Date', //yyyy-MM-dd xxx类型的字符串日期格式
  user: 'User', //人员
  dept: 'Dept', //部门
  dateRange: 'DateRange'
}

# 组件数据结构

每个组件需要预先定义好数据结构，存在于文件 /src/views/common/form/ComponentsConfigExport.js中，此文件中定义的组件将被展示到表单设计器左侧组件候选区。

结构如下：

  {
    title: '多行文本输入', //组件标题
    name: 'TextareaInput', //组件名，组件是根据组件名来决定渲染哪个组件的
    icon: 'el-icon-more-outline', //组件在设计器候选区的图标
    value: '', //组件的值，该字段暂未使用
    valueType: ValueType.string, //组件值数据类型
    props: { //组件的附加属性
      required: false,  //公共属性，是否必填
      enablePrint: true //公共属性，是否允许打印
      //组件其他设置项，根据组件类型来自定义
    }
  }

# 表单渲染

📢 wflow已经封装好了表单渲染逻辑的通用组件，任何地方只需要引入即可渲染出多端表单，并支持双向数据绑定及校验。

# wflow 表单组件

表单组件位于 src\views\common\form\FormRender.vue，在需要渲染表单的地方引入该组件

<template>
	<FormRender ref="form" v-model="formData" :forms="formConfig" :mode="mode"/>
</template>
<script>
import FormRender from '@/views\common\form\FormRender'
export default {
   components: {FormRender},
   data() {
    return {
      mode: 'PC', //渲染模式： PC 、MOBILE、DESIGN
      formConfig: [], //表单设计器的配置，也就是保存在后端表里面的formItems字段里的json
      formData: {} //表单数据，表单渲染后，如果输入数据，那么将会双向绑定同步到本变量，
    }
  },
}
</script>

# 权限控制

在流程设计器中，发起人、审批、抄送节点可以设置表单字段的【只读、可编辑、隐藏】权限，在表单中体现为由表单字段项的props.perm字段控制分别是三个值

• R 只读 （渲染为只读模式）
• E 可编辑 （渲染为正常表单组件可编辑输入的模式）
• H 隐藏（此时表单字段不可见）

**注意：**接口返回的该字段由后端进行设置，当权限为H时，该表单组件配置将不返回，前端也可以修改该字段为R/H来控制是否可编辑

# 表单校验

表单校验如下，通过ref 调用wflow表单FormRender 的 validate(callback)函数，参数传入回调函数即可获取校验结果

//form为 FormRender 绑定的ref
this.$refs.form.validate(valid => {
	if(valid){
        //校验成功
    }else{
        //校验失败
    }
})

由于存在分栏组件-SpanLayout 及 明细表-TableList，导致很多地方都要特殊处理，需要递归 ，详细实现参见 FormRender.vue 组件