一、概述

有时候我们需要对列表（树形）等数据进行格式展示，事件操作。
有时候我们需要操作按钮的前后置事件 或者添加自定义按钮，点击自定义按钮时需要将列表中选中行的数据导入打开的其他表单。

二、操作及示例

2.1、通过数据模版属性编写模版脚本

2.2、编写脚本示例

三、数据模版脚本接口API

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

3.1、加载事件

 //模版加载事件
 onLoad:function(template){

  }

3.2、按钮加载事件【v3.2.4+支持】

 // 模版加载按钮事件
  onLoadActions:function(template, action, button, type, row){

  }

需要注意的是该脚本需要执行2次，第一次判断该字段的type（是否进行脚本判断），第二次加载再判断处理方式和数据

if(!type){
 return true
}

参数说明：

例子eg：

  onLoadActions:function(template, action, button, type, row){
    if(action === 'sefStartFlow'){//指定的按钮编码处理
      // 请不要去掉
      if(!type){
          return true
      }
      //row 返回的数据要在Data返回的字段（一般为数据库名），如果没有可以添加隐藏域
      if(type==='hidden' && row.zi_duan_ === 'abc'){
        return true
      }
    }
  },

3.3、按钮的前置事件

 //按钮前置事件【必须回调】
  beforeSubmit:function(template,action,position, selection, data,callback){
    callback(true)
  }

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

3.4、 按钮的后置事件

 //按钮后置事件【必须回调】
  afterSubmit:function(form,action,postValue,callback){
    callback(true)
  }

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

3.5、 自定义格式数据事件 【v3.1.11+】

 // 自定义格式数据事件
  customFormatter:function(template, name, value, rowData, column){

  }

需要注意的是，第一次判断该字段是否使用自定义格式，该rowData值为空，第二次加载再判断格式

if(!rowData){
 return true
}

参数说明：

返回值 支持v-html的数据 和 jsx

eg：

 //自定义格式数据事件
  customFormatter:function(template, name, value, rowData, column){
  //1：库存预警：1代表预警，2代表安全，当数据有1的时候，“库存”增加红色字体标识
    if(name==='ku_cun_' ){
      if(!rowData){
      return true
      }
      if(rowData.stock_waring === '1'){

        return '<span style="color: red">'+(value||'')+'</span>'
      }else{
         return '<span>'+(value||'')+'</span>'
      }
    }
    //2：有效期：1代表快到期，2代表正常，当数据有1的时候，“名称”增加背景显示
    if(name==='cost_name_'){
      if(!rowData){
      return true
      }
      //rowData.validity_warning_  有空格数据
      if(rowData.validity_warning_ === '1'){
        debugger
        return `<div  style="color: #ecf5ff;background: red;">${ value}</div>`
      }else{
      return value
      }
    }
  },

jsx 支持例子：v3.5.8+支持

 ///自定义格式数据事件
  customFormatter:function(template, name, value, rowData, column){
  //1：库存预警：1代表预警，2代表安全，当数据有1的时候，“库存”用el-tag 的danger 标签，否则默认
    if(name==='ku_cun_' ){
      if(!rowData){
      return true
      }
     const h = template.$createElement
      if(rowData.stock_waring === '1'){
           return  h('el-tag', {  
         props: {
            type: 'danger',
           disableTransitions:true //禁用动画
              }}, value)
      }else{
           return  h('el-tag', {  
         props: {
           disableTransitions:true //禁用动画
              }}, value)
      }
    }

    }
  },

3.6、 合并行或列事件 【v3.5.8+】

 // 合并行或列事件
  spanMethod:function(template,{ row, column, rowIndex, columnIndex }){

  }

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

参数说明：

例子1： 合并行：

Object.assign(JTemplate, {
  //合并事件
  spanMethod: function (template, { row, column, rowIndex, columnIndex }) {
     if (rowIndex % 2 === 0) {
      if (columnIndex === 0) {
        return [1, 2];
      } else if (columnIndex === 1) {
        return [0, 0];
      }
    }
  },
});

例子2： 合并列：

Object.assign(JTemplate, {
  //合并事件
  spanMethod: function (template, { row, column, rowIndex, columnIndex }) {
     if (columnIndex === 0) {
       if (rowIndex % 2 === 0) {
         return {
           rowspan: 2,
           colspan: 1
         };
       } else {
         return {
           rowspan: 0,
           colspan: 0
         };
       }
    }
  },
});

例子3： 根据数据合并列：

Object.assign(JTemplate, {
  // 合并事件
  spanMethod: function(template, { row, column, rowIndex, columnIndex }) {
    // 处理第一列（columnIndex为0）
    if (columnIndex === 0) {
      const col1Spans = [] // 存储每组合并的数量
      let currentSpan = 1 // 记录当前连续相同值的数量
      const listData = template.listData || []
      // 需要合并的字段名称（可根据实际需求修改）
      const spanField = 'emphasis_conten'

      // 计算合并配置
      for (let i = 0; i < listData.length; i++) {
        const currentItem = listData[i]
        const nextItem = listData[i + 1]
        // 检查当前项和下一项是否相同
        const shouldMerge =
          nextItem && currentItem[spanField] === nextItem[spanField]
        if (shouldMerge) {
          currentSpan++ // 相同则累加
        } else {
          col1Spans.push(currentSpan) // 不同则记录当前数量
          currentSpan = 1 // 重置计数
        }
      }

      // 合并结果
      let accumulatedIndex = 0
      for (let i = 0; i < col1Spans.length; i++) {
        const spanSize = col1Spans[i]
        const startIndex = accumulatedIndex
        const endIndex = accumulatedIndex + spanSize - 1
        // 如果当前行在合并范围内
        if (rowIndex >= startIndex && rowIndex <= endIndex) {
          // 如果是合并范围的起始行，则显示合并
          if (rowIndex === startIndex) {
            return { rowspan: spanSize, colspan: 1 }
          } else { // 其他行不显示
            return { rowspan: 0, colspan: 0 }
          }
        }

        accumulatedIndex += spanSize
      }
    }
  }
})

四、常用脚本示例

4.1、设置数据列中其中一个栏目信息设置超链接

Object.assign(JTemplate,{
  //加载事件
  onLoad:function(template){
    //设置第一行超链接
    const column =  template.listConfig.columns[0]
    column.link =true
    template.$set(template.listConfig.columns,0,column)

    //绑定事件链接属性，更多属性看下面
   const initInterval = setInterval(() => {
      if (template.$refs.crud === null || template.$refs.crud === undefined){
        return
      }
      try {
    template.$refs.crud.$on('column-link-click',function(column, row){
      //TODO:你要处理事件 其中：column：当前行的数据，row：当前单元格的属性
     //跳转百度
      location.href='http://www.baidu.com'
    })
        clearInterval(initInterval)
      } catch (error) {
        clearInterval(initInterval)
      }
    }, 100)

  }

});

出现查找不到对象的,不能进行绑定事件的问题的解决方案，【定时调用，直到找到对象】

    //出现查找不到对象的,不能进行绑定事件的问题
   const initInterval = setInterval(() => {
      if (template.$refs.crud === null || template.$refs.crud === undefined){
        return
      }
      //TODO:实现具体逻辑
      clearInterval(initInterval)
    }, 100)

4.2、设置列表背景，字体，字体颜色

//设置数据模版背景，字体，字体颜色
  const id =  'templateStyle' //保证唯一建议时间戳
  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.3、设置列表显示字段的字体，背景颜色 【v3.1.11+】

//自定义格式数据事件
  customFormatter:function(template, name, value, rowData, column){
    if(name==='biao_ti_'){
     if(!rowData){ // 判断是否是允许自定义
          return true
      }
       return '<span style="color: #dd5a43; font-size: 20px;">'+value+'</span>'
    }
  }

4.4、【自定义按钮】打开另外个表单页面

打开另外个表单：

 //按钮提交前置事件
  beforeSubmit:function(template, action, position, selection, data, callback){
    if(action ==='queryAdd'){
      //表单顶部按钮 如果不设置就显示为空
      template.editToolbars = []
      //表单key
      template.formKey = 'qdzdylcb'
      //表单是否只读，默认false
      template.readonly = false
      //主键值 如果新增则不写或留空，编辑则要传入值
      template.pkValue = ''
      //表单窗口打开(延迟下，避免数据没赋上)
      setTimeout(() => {
          template.dialogFormVisible = true
      }, 10)
    }else{
       callback(true) 
    }
}

参数说明:

1️⃣、表单工具栏按钮说明：editToolbars
http://doc.ankepower.com:8181/docs/iform-develop/iform-develop-1f94eq8smtnqc

//按钮配置
 template.editToolbars = [{button_type:'save',label:'保存',key:'save'},{button_type:'close',label:'关闭',key:'close'}]

2️⃣、启用表单自定义窗口配置[3.5.5+支持]

    //不启用默认窗口，以下面窗口为准
    template.enableFormDialogSetting = true
    //窗口配置  参考下面说明3️⃣
    template.formDialogSetting = {
        dialogOpenType:'fullscreen',
        zoom:false,//是否缩放
        marginTop:'5',//
        width:80,//宽
        height:80,    //高
    }

3️⃣ 窗口配置参数

4.5、【自定义按钮】打开另外个数据模板管理配置出来的列表

4.5.1、方法一：默认的数据模版

//按钮提交前置事件
  beforeSubmit:function(template, action, position, selection, data, callback){
    if(action ==='queryAdd'){
      //数据模版key
      template.templateDialogKey = 'xxxx'
      //数据模版动态参数 eg:｛'参数字段':'字段值'｝ 参数字段为数据库的字段值（一般包含下划线的）
      //template.templateDialogDynamicParams = {}
      //数据模版窗口打开(延迟下，避免数据没赋上)
      setTimeout(() => {
          template.templateDialogVisible = true
      }, 10)
    }else{
       callback(true) 
    }

如果自定义对话框的窗口，需要按钮的回调方法 [v3.5.3+支持]

dialogActionEvent:function(template, buttonKey,data){
          debugger
          switch (buttonKey) {
            case 'ok':// 确定
              // TODO：根据实际处理data数据
              alert(data)
              template.templateDialogVisible = false
              break
            case 'cancel':// 取消
              template.templateDialogVisible = false
              break
          }
        }

4.5.2、方法二：自己写vue的模版和窗口

//按钮提交前置事件
  beforeSubmit:function(template, action, position, selection, data, callback){
    if(action ==='queryAdd'){
          //自己写vue的模版和窗口，看下面的引用说明
        this.$dialog({
            template:'<xxx>内容</xxx>'
        },[options],[callback])
    }else{
       callback(true) 
    }

具体[查看4.12.3. this.$dialog 【v3.3.0支持】]

4.5.3、方法三：引用自定义对话框

1、【最新版本】有这个代码组件，可以直接引用
2、如果【v3.5.1-】以下的版本没有该代码，需要把src\business\platform\data\templaterender\custom-dialog\dialog.vue 代码复制到src\views\platform\data\custom-dialog\dialog.vue路径下

注意：
①、templateKey请根据实际的自定义对话框的key修改
②、点击确定按钮请根据数据处理data数据

Object.assign(JTemplate, {
  // 加载事件
  onLoad: function(template) {
    //注册自定义对话框
    this.$vue.component('iform-customdialog-dialog', this.$import('/platform/data/custom-dialog/dialog.vue'))
  },
  customDialogTemplate: function(template) {
    return this.$vue.extend({
      data() {
        return {
          visible: true,
          templateKey:'dhklb06'//请根据实际的自定义对话框的key
        }
      },
      methods: {
        handleActionEvent(buttonKey, data) {
          debugger
          switch (buttonKey) {
            case 'ok':// 确定
              // TODO：根据实际处理data数据
              alert(data)
              this.closeDialog()
              break
            case 'cancel':// 取消
              this.closeDialog()
              break
          }
        },
        closeDialog() {
          this.visible = false
        }
      },
      render() {
        var h = arguments[0]
        return h('iform-customdialog-dialog', {
          'attrs': {
            visible: this.visible,
            templateKey: this.templateKey
          },
          on: {
            close: this.closeDialog,
            'action-event': this.handleActionEvent
          }
        })
      }
    })
  },
  // 表单按钮前置事件
  beforeSubmit: function(template, action, position, selection, data, callback) {
    if (action === 'test1') {
      template.dialogTemplate = this.customDialogTemplate(template)
    }
    callback(true)
  }

})

扩展应用，可以弹窗其他弹窗

4.6、 template DOM操作

template可以操作表单vue的方法（methods）、属性、DOM元素和事件

可以操作 element-ui的事件 https://element.eleme.cn/#/zh-CN/component/table

    template.$refs.crud.$refs.elTable.$on("cell-click",function(row, column, cell, event){
      debugger
    })

element-ui的事件：

4.7、组合表单事件处理

如果你想调用列表的脚本可以类似这样写

template.$refs.templateList.beforeScript(action, position, selection, data, callback)

4.8、数据模板传递参数(或数据)到另外表单中

（【v3.5.1+】支持）

如果你想调用列表的脚本可以类似这样写
1.在数据模板脚本写要传递的参数,将参数以对象的形式传进template.formDynamicParams中

 //按钮提交后置事件
  afterSubmit:function(template, action, position, selection, data, callback){
   //表单顶部按钮 如果不设置就显示为空
      template.editToolbars = []
      //表单key
      template.formKey = 'qdzdylcb'
      //表单是否只读，默认false
      template.readonly = false
      //主键值 如果新增则不写或留空，编辑则要传入值
      template.pkValue = ''

      //参数传递
      template.formDynamicParams={test:'xxx'}
     //数据模版窗口打开(延迟下，避免数据没赋上)
      setTimeout(() => {
          template.dialogFormVisible = true
      }, 10)
    callback(true);  
  }

2.在表单脚本中用form.params获取

 Object.assign(JForm,{
  //加载事件
  onLoad:function(form){
  //可以获取传递的参数
    console.log(form.params)
    //这个最后一个`test` 是根据上面写的参数决定的
     console.log(form.params.test)
  }
})

4.9、数据模板传递参数(或数据)到另外个数据模版

1、比如级联参数的传递

2.在数据模版脚本中用template.params获取

 Object.assign(JTemplate,{
  //加载事件
  onLoad:function(template){
  //可以获取传递的参数
    console.log(template.params)
    //这个最后一个`test` 是根据上面设置的参数决定的
     console.log(template.params.test)
  }
})

表单传递参数也类似，只不过换成form.params

4.10 设置查询字段默认值进行查询数据

直接调用会出现查询2次问题，把初始化查询，设置为否，手动调用查询，避免重复查询

如何查找查询条件的key

4.10.1、普通文本脚本范例

Object.assign(JTemplate,{
  //加载事件
  onLoad:function(template){
      setTimeout(() => {
        const searchForm = template.$refs.searchForm
      //'Q^text_^SL  这个参数是文本字段的查询名
        searchForm.$set(searchForm.params,'Q^text_^SL','abc')
        //手动查询
        template.search()
        }, 100)

  }
});

4.10.2、 日期范围查询脚本范例

Object.assign(JTemplate,{
  //加载事件
  onLoad:function(template){
      setTimeout(() => {
        const searchForm = template.$refs.searchForm
        //设置默认值:'daterange-prefix0' 这是日期范围控件第几次出现参数
        searchForm.$set(searchForm.params,'daterange-prefix0',['2022-06-01','2022-06-11'])
        searchForm.$set(searchForm.params,'daterange-prefix1',['2022-06-01 12:23:22','2022-06-11 22:22:11'])
        //手动查询
        template.search()

        }, 100)

  }
});

例：结束时间为当前时间，开始时间和结束时间相差一个月

Object.assign(JTemplate, {
  // 加载事件
  onLoad: function(template) {
    setTimeout(() => {
      const searchForm = template.$refs.searchForm
      const startDate1 = new Date()
      startDate1.setMonth(startDate1.getMonth() - 1)
      const startDate = this.formatDate(startDate1, 'yyyy-MM-dd HH:mm:ss')
      const endDate = this.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')

      // 设置默认值:'daterange-prefix0' 这是日期范围控件第几次出现参数
      searchForm.$set(searchForm.params, 'daterange-prefix0', [startDate, endDate])
      // 手动查询
      template.search()
    }, 100)
  },
  formatDate: function(date, fmt) {
    var o = {
      'M+': date.getMonth() + 1, // 月份
      'd+': date.getDate(), // 日
      'H+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'S': date.getMilliseconds() // 毫秒
    }
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
    return fmt
  }
})

4.10.3、 Groovry脚本范例

//加载事件
  onLoad:function(template){
     this.$request({
        url:'/business/v3/form/def/getScriptValue',
        method: 'post',
        data:  { 
         //比如获取当前公司的ID脚本
         'script': `csScript.getCompanyId('')`
         }
      }).then(response => {
         //处理数据返回的逻辑
       if(response.data){
             const searchForm = template.$refs.searchForm
             //'Q^org^SL  这个参数是字段的查询名
            searchForm.$set(searchForm.params,'Q^org^SL',response.data)
            //记得手动查询
            template.search()
           }else{
             //记得手动查询
         template.search()
         } 
        }).catch(error => {
            console.log(error)
        })

  }

4.11 有个查询条件是否，选择是，就隐藏其中一列，选择否就隐藏另一列

脚本：

Object.assign(JTemplate, {
  // 加载事件
  onLoad: function(template) {
      //备份原来的字段
    const tempColumns = JSON.parse(JSON.stringify(template.listConfig.columns))
    setTimeout(() => {
      const searchForm = template.$refs.searchForm
    //绑定查询条件字段的change searchForm.$children[0].$children[0].$children[0].$children[0].$children[0].$children[1].$on('change', (value) => {
        if (value === 'Y') {
          //删除第2个字段
          template.listConfig.columns.splice(1, 1)
        } else {
         //还原字段
          template.listConfig.columns =  JSON.parse(JSON.stringify(tempColumns))
        }
      })
    }, 500)
  }
})

4.12 导入数据demo

1、vue代码编写【以下代码参考】

<template>
  <el-form
    ref="importForm"
    v-loading="dialogLoading"
    :element-loading-text="$t('common.load.loading')"
    :model="importForm"
    :label-suffix="$IFORM.formLabelSuffix"
    :label-position="$IFORM.formLabelPosition"
    :label-width="$IFORM.formLabelWidth"
    class="import-form"
    @submit.native.prevent
  >
    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item :label="'请选择文件'" required>
          <el-upload
            ref="upload"
            :action="fileUploadAction"
            accept=".xml"
            :on-change="handleChange"
            :file-list="importForm.fileList"
            :auto-upload="false"
            :show-file-list="false"
          >
            <el-row :gutter="5">
              <el-col :span="20">
                <el-input v-model="filedName" :placeholder="$t('common.placeholder.select')" readonly class="iform-mr-5">
                  <i v-if="filedName" slot="suffix" class="el-icon-circle-close" @click.stop="clearFiles" />
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-button>请选择文件</el-button>
              </el-col>
            </el-row>
            <div slot="tip" class="el-upload__tip">
              导入说明
            </div>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row style="float: right;">
      <el-col :span="24">
        <iform-toolbar
          :actions="toolbars"
          @action-event="handleActionEvent"
        />
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import setting from '@/setting.js'
import { importData } from '@/api/demo/list'
import ActionUtils from '@/utils/action'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: String
  },
  data() {
    return {
      fileUploadAction: setting.fileUploadAction,
      formName: 'importForm',
      dialogLoading: false,
      importForm: {
        fileList: []
      },
      filedName: '',
      toolbars: [
        { key: 'cancel' },
        { key: 'import', type: 'primary' }
      ]
    }
  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = this.visible
        this.importForm.fileList = []
      },
      immediate: true
    }
  },
  beforeDestroy() {
    this.importForm = null
    this.toolbars = null
  },
  methods: {
    handleActionEvent({ key }) {
      switch (key) {
        case 'import':
          this.handleImport()
          break
        case 'cancel':
          this.closeDialog()
          break
        default:
          break
      }
    },
    // 提交保存数据
    handleImport() {
      const file = this.$refs.upload.uploadFiles[0].raw
      importData(file).then(response => {
        this.$emit('callback', this)
        ActionUtils.saveSuccessMessage(response.message, (rtn) => {
          if (rtn) {
            this.closeDialog()
          }
          this.clearFiles()
        })
      }).catch((err) => {
        console.error(err)
      })
    },
    handleChange(file, fileList) {
      this.filedName = file.name
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    clearFiles() {
      this.$refs.upload.clearFiles()
      this.filedName = ''
    },
    // 关闭当前窗口
    closeDialog() {
      this.$parent.$parent.$parent.onClose(() => {})
      this.$refs[this.formName].resetFields()
      this.clearFiles()
    }
  }

}
</script>

2、模版脚本

Object.assign(JTemplate, {
  // 加载事件
  onLoad: function(template) {
      this.$vue.component('import-data', this.$import('/demo/import-data/index'))
      },
  // 按钮提交前置事件
  beforeSubmit: function(template, action, position, selection, data, callback) {
    if (action === 'importData') {
      this.$dialog({
        data() {
          return {
          }
        },
        template: '<import-data  />'
      }, {
        dialog: {
          appendToBody: true,
          width: '50%',
          top: '10vh',
          title: '导入数据',
          'custom-class': 'iform-dialog-70'
        }
      }, (tpl) => {
        template.dialogTemplate = tpl
      }).catch((_this) => {
        _this.visible = false
        template.dialogTemplate = null
      })
    } else {
      callback(true)
    }
  }

})

最新版本（v3.5.4+）支持自定义footer

footer: (_this, h) => {
          return h('iform-toolbar', {
            slot: 'footer',
            props: {
              actions: [
                { key: 'cancel' },
                { key: 'import', type: 'primary' }
              ]
            },
            on: {
              'action-event': (data) => {
                _this.getDialogRef().handleActionEvent(data)
              }
            }
          })
        }

4.12 怎么刷新数据模版的数据

  template.search()

4.13、【自定义按钮】打开流程审批页面

Object.assign(JTemplate,{
  //加载事件
  onLoad:function(template){
     // 先注入流程组件
     const templateForm = this.$import('/platform/bpmn/form/dialog.vue')
     this.$vue.component('template-form', templateForm)
  },
 //按钮提交前置事件
  beforeSubmit:function(template, action, position, selection, data, callback){
   //custom为自定义按钮key
   if ('custom' === action) {
     let taskId ='1087332136203059200'
      //获取列表的流程任务id,需要修改任务id的列表字段，修改taskId=data.taskId的值。注意：该例子是行内的按钮，顶部按钮是数组
       if(data){
        taskId=data.taskId
       }
      this.$dialog({
        data() {
          return {
            taskId:taskId  //流程任务id
          }
        },
        methods: {
           closeDialog(){
             this.$parent.$parent.visible=false
             template.search()
           }
         },
        template: '<template-form  :task-id="taskId"  @close="closeDialog"/>'
      }, {
        dialog: {
         fullscreen:true,
         'custom-class':"bpmn-formrenderer-dialog"
        }
      }, (tpl) => {
        template.dialogTemplate = tpl
      }).catch((_this) => {
        _this.visible = false
         template.search()
        template.dialogTemplate = null
      })
    }
    callback(true)
  }
});

4.14、【数据模板组合链接】动态传参

Object.assign(JComposeTemplate,{
    //加载事件
    onLoad:function(template){
      let msgTime = 10
      const time = setInterval(()=>{
         msgTime = msgTime - 1
        if(template.$refs&&template.$refs.iformLayoutIframe){
           const params = {data:'param'}
           template.$refs.iformLayoutIframe.setUrlParams(params)
           clearInterval(time)
         }
        if(msgTime===0){
           clearInterval(time)
         }
      },1000)
    }
});

4.15、【数据模板组合链接】双击左边列表行触发事件调用执行右边地图里的方法

Object.assign(JComposeTemplate,{
    //加载事件
    onLoad:function(template){
      let msgTime = 10
      const time = setInterval(()=>{
         msgTime = msgTime - 1
        if(template.$refs.template.$refs&&template.$refs.template.$refs.crud){
           template.$refs.template.$refs.crud.$on("cell-dblclick",function(row, column, cell, event){
                template.$refs.iformLayoutIframe.postMessage('message')
           })
           clearInterval(time)
         }
        if(msgTime===0){
           clearInterval(time)
         }
      },1000)
    }
});

4.13、【自定义按钮】打开组织人员选择器

Object.assign(JForm, {
  // 加载事件
  onLoad: function(template) {
    //注册自定义对话框
    this.$vue.component('iform-org-selector', this.$import2('/platform/org/employee/dialog.vue'))
  },
   customDialogTemplate: function(template) {
    return this.$vue.extend({
      data() {
        return {
          visible: true,
          value:{}//值
        }
      },
      methods: {
        handleActionEvent(buttonKey, data) {
          debugger
          switch (buttonKey) {
            case 'ok':// 确定
              // TODO：根据实际处理data数据
              alert(data)
              this.closeDialog()
              break
            case 'cancel':// 取消
              this.closeDialog()
              break
          }
        },
        closeDialog() {
          this.visible = false
        }
      },
      render() {
        var h = arguments[0]
        return h('iform-org-selector', {
          'attrs': {
            visible: this.visible,
            value: this.value
          },
          on: {
            close: this.closeDialog,
            'action-event': this.handleActionEvent
          }
        })
      }
    })
  },
 //按钮提交前置事件
  beforeSubmit:function(template, action, position, selection, data, callback){
   //custom为自定义按钮key
   if ('custom' === action) {
    template.dialogTemplate = this.customDialogTemplate(template)
    }
   callback(true)
  }

});

4.14、【导出按钮】根据菜单权限控制显示下拉的导出按钮

Object.assign(JTemplate,{
  //加载事件
  onLoad:function(template){
    const buttons = template.listConfig.toolbars
    const listIdentity = template.listIdentity
    buttons.forEach(b=>{
      ////判断是否为导出按钮
      if(b.code==='export'){
        //过滤掉没有权限的按钮
        b.menus=b.menus.filter(e=>hasPermission(listIdentity+'_'+key))
      }
    })
    //判断是否有菜单权限
    function hasPermission(permissionKey) {
      // 是否是超级用户
      const isSuper = template.$store.getters && template.$store.getters.isSuper
      if (!permissionKey || isSuper) {
        return true
      }
      let hasRights = false
      const permissions = template.$store.getters && template.$store.getters.permissions
      if (permissionKey && permissionKey.length > 0 && (permissionKey instanceof Array || Object.prototype.toString.call(permissionKey) === '[object String]')) {
        if (permissionKey instanceof Array) {
          hasRights = permissionKey.some(v => {
            return permissions[v]
          })
        } else {
          hasRights = permissions[permissionKey]
        }
      }
      return hasRights
    }
  }
});

4.15、数据模板合并单元格例子

Object.assign(JTemplate,{
  //加载事件
  onLoad:function(template){
    //调用elementUI表格的spanMethod方法
    template.spanMethod =objectSpanMethod;
    //调用后刷新防止没有更新上去
    template.search();
    //elementUI表格的spanMethod方法(属性请看elementUI文档)
    function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 1) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
    }
  }
});

4.16 有个查询条件是否，选择是，就隐藏其中一个查询条件，选择否就显示隐藏的查询条件

脚本：

Object.assign(JTemplate, {
  // 加载事件
  onLoad: function(template) {
     //备份原来的查询条件
    const tempSearchForm = JSON.parse(JSON.stringify(template.listConfig.searchForm.forms))
    setTimeout(() => {
     const searchForm = template.$refs.searchForm
    //绑定查询条件字段的change
    searchForm.$children[0].$children[0].$children[0].$children[0].$children[0].$children[1].$on('change', (value) => {
            //值为Y
        if (value === 'Y') {
          //删除第2个查询条件字段
          template.listConfig.searchForm.forms.splice(1, 1)
        } else {
         //还原字段
          template.listConfig.searchForm.forms =  JSON.parse(JSON.stringify(tempSearchForm))
        }
      })
    }, 500)
  }
})