说明:
本示例中的代码和截图可能和您现在手中的版本不同,但操作思路一样。

一、概述

对表单界面的字段实现设定其值,读取其值、修改其值,隐藏、显示,必填等操作如:给某个字段设置默认值,获取表单界面某个字段的值,修改表单界面某个字段显示的值。
有时候我们需要操作按钮的前后置事件 或者添加自定义按钮,点击自定义按钮时需要将列表中选中行的数据导入打开的其他表单。

二、操作及示例

2.1、通过表单属性编写表单脚本

2.2、编写脚本示例

三、表单脚本接口API

统一说明以下不再说明
form:是表单的vue实例数据,可以通过这个操作数据、dom,事件等
callback:数据回调,如果通过ajax异步提交需要回调,按钮等操作必须回调,不然操作没反应。返回true 是回调成功,false表示回调失败,阻止继续操作 【v3.1.8+支持】
$request:可以通过this.$request 来ajax请求数据【v3.1.9+支持】

3.1、加载事件

 //表单加载事件
 onLoad:function(form){

  }

3.2、按钮加载事件【v.3.2.4+】

 //表单加载按钮事件
  onLoadActions:function(form,action,button,type){

  }
参数 说明 是否必须 可选值
action 按钮别名,在使用页面传入的根据自己需求定义的值; add、edit等
button 按钮相关数据,包含位置(position)等信息 -
type 处理方式,hidden 隐藏,disabled 禁用 - hidden,disabled

3.3、 表单提交校验

 //表单提交校验
  onValidate:function(form,callback){
    callback(true);
  }

3.4、按钮的前置事件

 //表单按钮前置事件
  beforeSubmit:function(form,action,postValue,callback){
    callback(true);
  }

表单按钮提交前触发,在具体的页面中调用.
参数说明:

参数 说明 是否必须 可选值
action 按钮code,在使用页面传入的根据自己需求定义的值; - close,save等
postValue 提交给后台的数据,表单数据 -
callback funtion【必须】,数据回调,一定要有回调方法,不然没反应 必须 true,false

3.5、按钮的后置事件

 //表单按钮后置事件
  afterSubmit:function(form,action,postValue,callback){
    callback(true); 
  }

表单按钮提交后触发,在具体的页面中调用.
参数说明:

参数 说明 是否必须 可选值
action 按钮code,在使用页面传入的根据自己需求定义的值; - close,save等
postValue 提交给后台的数据,表单数据 -
callback funtion【必须】,数据回调,一定要有回调方法,不然没反应 必须 true,false

3.6、子表按钮的前置事件【v3.1.9+支持】

 //表单子表按钮前置事件
  beforeSubButton:function(tableForm, action, position, params, callback){
    callback(true);
  }

表单子表按钮提交前触发,在具体的页面中调用.
参数说明:

参数 说明 是否必须 可选值
tableForm 是表单子表的vue实例数据,可以通过这个操作数据、dom,事件等 -
action 按钮code,在使用页面传入的根据自己需求定义的值; - add、edit等
position 按钮位置 -
callback funtion【必须】,数据回调,一定要有回调方法,不然没反应,如果通过ajax异步提交需要回调 必须 true,false

3.7、子表按钮的后置事件 【v3.1.9+支持】

 //表单按钮后置事件
  afterSubButton:function(tableForm, action, position, params, callback){
    callback(true);
  }

表单子表按钮提交后触发,在具体的页面中调用.
参数说明:

参数 说明 是否必须 可选值
tableForm 是表单子表的vue实例数据,可以通过这个操作数据、dom,事件等 -
action 按钮code,在使用页面传入的根据自己需求定义的值; - add、edit等
position 按钮位置 -
callback funtion【必须】,数据回调,一定要有回调方法,不然没反应,如果通过ajax异步提交需要回调 必须 true,false

3.8、子表的统计方法 【v3.1.10+支持】

 //子表的统计方法
  summaryMethod:function(tableForm, tableName, params){

  }

在具体的页面中调用.
参数说明:

参数 说明 是否必须 可选值
tableForm 是表单子表的vue实例数据,可以通过这个操作数据、dom,事件等 -
tableName 子表的表名区分多个子表 -
params 字段的参数{ columns, data },其中 columns 是字段的属性,data 是数据 -

四、常用脚本示例

4.1、获取表单所有数据

// 获取表单所有数据
form.getFormData();

4.2、获取表单某个字段值

// 获取主表值(key为字段名)
form.getData('zd1');
// 子表数据(key 为子表的name)
form.getData('zbzd');
// 子表第几行的数据,先获取子表字段数据,然后找到数组的第几行的字段的数据,下面[1] 表示第2行【索引开始是0】,xxx:表示字段名
form.getData('zbzd')[1].xxx;

4.3、修改表单某个字段值或者赋值

// 设置主表字段【key为字段属性,value:为字段值】
form.setData('zd1','广州流辰');
// 设置子表数据 如果是一对多是个`数组`。一对一是个`对象`
form.setData('bdjbzb',[{
"leiXing": "",
"mingCheng": "测试",
"shuLiang": "",
"danJia": "",
"zhuangTai": "",
"xiaoJi": ""}]);

4.4、子表默认添加一行

//子表默认添加一行
form.setData('bdjbzb',[{
"leiXing": "",
"mingCheng": "测试",
"shuLiang": "",
"danJia": "",
"zhuangTai": "",
"xiaoJi": ""}]);

4.5、设置字段隐藏,只读,必填

快捷方式(推荐):

//设置字段隐藏,只读,必填
// 字段名 ,权限(隐藏【h】,编辑【e】,只读【r】,必填【b】)
 form.setFormRights('ziDuan2','h')


 //设置子表权限
     const rights= {
        rights:'r'//整个子表权限
        buttons:{//子表按钮权限
            'add':'s''remove':'h'
        },
        columns:{//子表字段权限
         'id':'h'
        }
    }
    form.setFormRights('zb1',rights)

如果必填需重新加载下验证规则

 setTimeout(()=>{
           form.validate(()=>{})
      },10)

也可以操作dom方式处理:
//TODO:需要编写

4.6、字段事件

//字段事件 目前只支持 change blur focus 事件
// 其中 `formItemziDuan1` 由formItem+字段名组成
form.$refs.dynamicForm.$refs.formItemziDuan1[0].$on('change',(data)=>{
    if(data==='1'){
        form.setFormRights('ziDuan2','h')
    }else{
        form.setFormRights('ziDuan2','e')
    }
})

如果是栅格布局、标签页、步骤条等嵌套布局需要知道布局key

//如下代码
//formItemgrid_19i6jxc 是先找到栅格布局字段,然后找到字段进行操作
form.$refs.dynamicForm.$refs.formItemgrid_19i6jxc[0].$refs.formItemlanguage[0]

具体事件参考文件:
https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0

4.7、设置表单背景,字体,字体颜色

//设置表单背景,字体,字体颜色
  const id =  'formStyle' //保证唯一建议时间戳
  let styleTag = document.getElementById(id)
      if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('type', 'text/css')
        styleTag.setAttribute('id', id)
        document.head.appendChild(styleTag)
      }
  //添加的样式
  const newStyle ='' //这里编写你要添加的样式
  styleTag.innerText = newStyle

4.8、form DOM操作

form可以操作表单vue的方法(methods)、属性、DOM元素和事件

4.9、子表合计自定义方法

 summaryMethod:function(tableForm,tableName,param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = '总价';
        return;
      }
      const values = data.map(item => Number(item[column.property]));
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        sums[index] += ' 元';
      } else {
        sums[index] = 'N/A';
      }
    });

    return sums;
  }

4.10 监听表单的值变化

//表单所有字段,如果需要细节,采用键路径
form.$refs.dynamicForm.$watch('models',function(data){
          console.info(data)
        })
//子表的值改变
form.$refs.dynamicForm.$refs.formItembmsyjemxb[0].$watch('dataModel',function(data){
          console.info(data)
        })

https://cn.vuejs.org/v2/api/#vm-watch

4.11 常用工具类

  1. this.$request :可以通过this.$request 来ajax请求数据

    //例如
    this.$request({
         url:'/form/def/getScriptValue',
         method: 'post',
         data:  { }
       }).then(response => {
           const { state } = response
           if (state === 200) {
             console.log("ok")
           } else {
             const err = new Error(response.message)
             err.state = state
             err.cause = response.cause
             console.log(err)
           }
         }).catch(error => {
             console.log(error)
         })
  2. this._ (注意是下划线): Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。
    一些常用的就不需要我们自己写了
    具体API:https://www.lodashjs.com/

  3. this.$dialog : 简单封装element-ui的弹窗

    //自己写vue的模版和窗口
    this.$dialog('<xxx>xx</xxx>')
    //<xxx></xxx> 这个是组件或html元素
文档更新时间: 2020-07-01 09:15   作者:hugh