# 表单设计

# 使用方式

在表单设计页面可通过拖拽形式构造审批所需的表单

将左侧组件库内的组件拖拽到中间设计区内，进行设计，点击对应组件可在右侧面板中对该组件进行设置

# 实时预览

表单设计器也支持实时预览，点击工具栏上 预览表单 ，可在弹框内预览该表单在PC端 及移动端效果，还可以直接手机扫码在手机上打开该表单体验效果。

# 表单联动

表单联动功能可实现表单的动态渲染，字段之间相互动作，在表单设计界面，没有选中任何表单组件的情况下，右侧配置面板将会显示表单联动设置项，表单联动有2种模式，普通模式和高级模式

# 普通模式

普通模式可以通过最直观的UI配置界面来配置出所需的联动规则，对普通用户友好直观

配置界面如上，我们可以设置一系列的条件来实现在满足这些条件时让表单动起来，条件判断关系支持且、或。

配置示例：

表单动作支持如下操作：

• 显示表单字段
• 隐藏表单字段
• 允许编辑字段
• 禁止编辑字段
• 设置表单字段值

# 高级模式

当我们简单模式配置的表单规则不能满足联动需求时，就可以使用高级模式来对表单进行控制了，高级模式会执行预设的js代码，达到任意功能。

首先我们需要知道如下重要知识点：

# 默认函数 doChange()

//doChang函数请勿修改函数名
function doChange(formData, formMap){
	//当表单值发生变化时会执行本函数，并传入参数
}

formData为当前整个表单的值对象，结构为：{ 表单字段id ： 表单字段值 }

{
    //普通字段值示例
    field8948948946: 2,
    field4895315153: '我是字段值',
        
    //明细表值示例
    field6604815610: [
        { //明细表的一行数据
            field156415153: '张三', //明细表一行里面的字段列
            field489454646: '23岁',
        }
    ],
}

使用js可直接拿到对应表单字段值以及修改对应值

formMap 为当前表单的json配置，值结构为： 表单字段ID —> 表单字段json配置

//输入框组件json配置示例如下，具体参考前端 src\views\common\form\ComponentsConfigExport.js
{
    title: '单行文本输入',
    name: 'TextInput',
    icon: 'el-icon-edit',
    value: '',
    valueType: ValueType.string,
    props: {
      enableScan: false,
      required: false,
      enablePrint: true
    }
},

wflow的表单是通过json渲染的，json控制了表单的一切行为，修改该json对象即可修改表单字段的所有配置

# 取指定表单字段值

doChange 函数的formData 参数是整个表单的值，通过 formData[字段id]可以取到指定字段值

# 取指定表单字段json配置对象

doChange 函数的formMap 参数是整个表单json配置对象的Map，存储结构为表单字段id与该字段json配置关系映射，通过formMap.get(字段id) 可以取到指定字段json对象配置

# 修改指定表单字段值

通过formData 参数即可直接修改表单字段值 formData[要修改字段的ID] = 要修改的值

# 修改表单字段权限

表单字段json配置对象中有个perm 字段，存储的是表单字段的权限，修改该字段的值即可修改表单字段权限，权限有如下值：R 只读，E 允许编辑，H 隐藏

# 高级模式扩展用法

通过高级模式，我们能够获得极大的自由度，此处列举下可以实现的扩展使用技巧

# 通过http请求设置字段值

我们可以在js中使用 axios 发请求，用法为 this.$axios ，这样就能拿到axios对象，将请求结果设置到表单字段值，给予了极大的灵活度

# 动态插入表单字段

**原理：**表单是由一个个json字段对象的数组组成的，通过这个json数组渲染出表单，那么我们对这个数组进行动态操作也就可以实现任意动态控制表单了

在我们的表单中可能没有设置一些字段，我们可以通过js来直接向表单中动态插入字段（需要熟悉表单字段json结构）

表单部分高级组件使用方法：组件手册

下一步：设计审批流程