链接控件案例文档

  • 设置链接可通过弹窗、tab、新页面的方式打开一个地址、网页等。
  • 链接展示类型分为两种:链接和按钮
  • 链接:以字段形式直接展示链接名称信息,直接打开一个地址。
  • 按钮:以按钮方式展示链接名称信息,触发一个点击事件,返回确认信息。

    1、文本展示:

    此值将作为默认值显示在该字段的初始化值。默认值类型支持固定值、动态脚本

    1.固定值:

    1、文本框选择固定值,输入显示值

    2、点击预览,链接默认初始值为文本输入值

    2.js脚本:

    2.1、文本ajax请求后台返回给展示的值-脚本
    例:返回的脚本展示
    options.request({
    url:’/business/v3/form/def/getScriptValue’,
    method: ‘post’,
    data: {
    'script': `cscript.testScript("${options.formData.models.NAME}")`,
    'vars': ''
    }
    }).then(response => {
    resolve(response.data)
    }).catch((err) => {
    console.info(err)
    })**
    1、文本选择为js脚本

    2、输入展示的js脚本信息;

3、点击预览查看链接文本展示信息:
3.1、链接展示

3.2、按钮展示。

2.2、文本返回指定表单某个字段给展示的值-脚本

resolve(options.formData.models.字段)
例:设置链接文本显示表单的“天数”字段的值,

1、输入脚本信息

2、在数据模板创建相关的表单,选择列表信息。点击明细

3、链接形式:

4、按钮形式:

2、脚本类型:

1.链接 - 事件脚本类型 - js脚本

1.1打开新页面:

例:设置点击链接新页面打开https://element.eleme.cn,则需要设置脚本为
resolve({openType:’url’,url:https://element.eleme.cn/#/zh-CN/component/dialog})
1、设置js脚本后,点击此链接可跳转到设置的新页面。


2、点击链接打开新页面

1.2打开tab页面

例:设置点击链接打开“流程定义”页bpmnManagement/bpmdef,则脚本需设置为
resolve({openType:’tab’, url:/bpmnManagement/bpmdef})
1、设置js脚本,预览点击链接后可跳转到设置的tab页面

2、点击链接,打开流程定义页面

1.3弹窗:

1、内嵌URL脚本:设置需要显示页面的URL脚本
例:设置弹窗显示https://element.eleme.cn,设置脚本为:
resolve({openType:’dialog’, url:https://element.eleme.cn/#/zh-CN/component/dialog})
1.1、输入js脚本

1.2、预览点击链接,弹窗显示为:

2、自定义弹窗内容:设置自己想要显示的内容的脚本。

resolve({openType:’dialog’, customBody:<h1>${options.formData.models.返回表单字段的值}</h1>})
案例:设置弹窗返回表单字段“开始时间”,点击链接可查看
1、输入js脚本:

2、预览,填写表单信息,点击链接弹窗显示“开始时间”的值:

2.按钮事件-事件脚本类型 - js脚本

  • 按钮事件可设置按钮前置和后置事件代码编写;前置事件“校验某字段是否为空”,后置事件“请求Ajax”。

    1.1、–前置事件

    resolve([{
    event:”beforeSubmit”,
    logic:alert("按钮前置事件")
    }])

    1.2、–后置事件

    resolve([{
    event:”afterSubmit”,
    logic:alert("按钮后置的事件")
    ])

2.1前置条件

例:前置条件点击按钮校验“开始时间”是否有值
1、输入js脚本,

2、数据模板创建相对应的表单,添加数据以便查看链接数据。

3、数据模板选择“开始时间”为空的列表信息点击明细查看时,提示“开始时间值为空”

4、数据模板选择“开始时间”不为空的列表信息点击明细查看时,不会有此提示

2.2后置条件

2.1.1、打开新页面:

例:设置新页面打开https://element.eleme.cn页面,则需要设置脚本为:
resolve([{
event:”afterSubmit”,
logic:resolve({openType:'url',url:"https://element.eleme.cn/#/zh-CN/component/dialog"})
}])
1、设置js脚本

2、点击预览,查看新页面

2.1.2、打开tab页面

例:设置打开“流程定义”页bpmnManagement/bpmdef,则脚本需设置为
resolve([{
event:”afterSubmit”,
logic:resolve({openType:'tab', url:"/bpmnManagement/bpmdef"})
}])
1、设置js脚本信息,预览点击链接按钮可跳转到tab页

2、点击链接打开“流程定义”页面

2.1.3、弹窗
1.1内嵌URL脚本:设置需要页面显示的URL脚本

例:设置弹窗显示https://element.eleme.cn,设置脚本为:
resolve([{
event:”afterSubmit”,
logic:resolve({openType:'dialog',url:"https://element.eleme.cn/#/zh-CN/component/dialog"})
}])

1、输入js脚本,

2、预览点击链接按钮,弹窗显示页面

1.2自定义弹窗内容

例:设置自定义弹窗显示表单字段“天数”
1、输入js脚本

2、预览,填写表单信息;点击链接按钮,弹窗显示“天数”的值

2.3前后置事件

例:设置前置校验“开始时间”是否为空,为空时提示“开始时间值为空”;设置后置事件弹窗内嵌URL页面。
1、填写js脚本信息。

2、数据模板查看开始时间为空的列表信息

3、提示:开始时间值为空

4、查看开始时间不为空的列表信息

5、未提示开始时间值为空

6、点击按钮查看内嵌URL页面

文档更新时间: 2020-05-08 15:51   作者:高艳芳