Appearance
表单设计常用方法
1 表单属性脚本事件
onLoad 表单加载时触发
| 名称 | 参数 | 说明 |
|---|---|---|
formData | - | 表单数据 示例: //从formData对象中读取COUNTRY属性的值，并将其存储到变量a中 let a = formData.COUNTRY |
setFormData (prop,value,rowIndex,isText) | prop:字段属性名(必选) value:要赋给指定字段的值(必选) rowIndex:行索引(可选) isText:是否为显示字段(可选) | 设置表单某个组件数据 示例: //为LONGITUDE赋值1 setFormData("LONGITUDE", 1) |
setShowOrHide (prop,value,type) | prop:字段属性名(必选) value:true显示,false隐藏(必选) type:不传参数默认为组件,button-按钮,column-表格列(可选) | 设置显示或隐藏 示例： //隐藏标识符为 "DETAIL.btn_top_y38i4O2" 的按钮。 setShowOrHide("DETAIL.btn_top_y38i4O2",false,"button"); |
setRequired(prop,value) | prop:字段属性名(必选) value:true必填,false不必填(必选) | 设置必填项 示例： //设置COUNTRY字段必填 setRequired（"COUNTRY"，true） |
setDisabled (prop,value,index,type) | prop:字段属性名,传入"elForm"，设置范围为整个表单(必选) value:true禁用;false不禁用(必选) index:行索引(禁用按钮时需传入空值) type:"button"-按钮(禁用子表中的按钮时才填button),"column"-表格列 | 设置禁用项 示例： //禁用当前整个表单的所有可交互元素 setDisabled("elForm", true) |
request(url,method,data) | url:请求的资源路径(必选) method:如GET,POST(必选) data:请求发送的数据对象(仅非 GET 请求使用),默认null(可选) | 向指定URL发送不同方法请求，并可携带数据 示例： //获取用户列表 request('https://api.example.com/users', 'GET') .then(users => console.log('用户列表:', users)) |
getFieldOptions(prop) | prop:字段属性名(必选) | 获取选项，返回Array<object> 示例： //获取CITY字段的选项数组 getFieldOptions("CITY"); |
setFieldOptions (prop,value) | prop:字段属性名(必选) value:数组(必选) | 设置选项 示例： //将PROVINCE这个字段下拉值设置为北京 setFieldOptions("PROVINCE", [{ enCode: "beijing", fullName: "北京市" }]); |
userState | - | 当前用户信息 //获得用户信息的公司id userState.userInfo.companyID除此之外，还有以下常用字段 companyName(公司名称)organizeId(组织id)organizeName(组织名称)roleIds(角色ID集合)roleName(角色名称)<br>userName(用户名)belongOrganizeId(所属组织id)belongOrganizeName(所属组织名称) |
flowTaskInfo | - | 当前流程信息 //获取当前流程步骤编号 flowTaskInfo.thisStepCode |
beforeSubmit 提交前置触发
与onLoad 表单加载时触发对比，多出一个eventType字段
| 名称 | 参数 | 说明 |
|---|---|---|
eventType | - | 事件类型示例: //判断当前操作类型不是保存操作且项目名称为空 if (eventType != "save" && !formData.PROJECT)//除此之外，还有以下类型 submit(提交)audit(审核)reject(驳回)rejectDirect(退回直送)transfer(转办)addSignApprove(加签批准)addSign(加签)reviewed(已阅) |
2 表单组件脚本事件
| 名称 | 参数 | 说明 |
|---|---|---|
paramData | - | 参数传递的数据对象 示例: //获取当前业务模块的唯一编码并赋值给变量a let a = paramData.enCode |
rowData | - | 表示当前选中行的完整数据，包含当前行所有字段和值的键值对 示例: //获取用户名 const username = rowData.name |
data | - | 当前组件的选中数据,多选框组件等多选为数组,单选为对象 示例： //拿到某行数据的信息后修改name字段 let data = { ...rowData },data.name = "研发中心" |
openWindow<br>(url,title,showHeader,refresh,data) | url:指定要加载的组件路径(views/basic/dynamicModel/list/Form表单页面 views/workFlow/components/FlowBox流程表单页面 views/basic/dynamicModel/list/index列表页面 views/infra/word/wordPBSTemplate/index自定义页面)(必选) title:设置打开的窗口标题(可选) showHeader:控制窗口是否显示标题栏,true显示，false不显示(可选) refresh:控制是否刷新数据,true显示，false不显示(可选) popupType:弹窗类型(可选) openTabsOnBrowser:是否在浏览器新tab页中打开(true:在新tab页打开,false:不在新tab页中打开) width,height:弹窗宽度和高度 isDetail:是否为详情页 data:用于传递给目标界面的数据(必选),包括: TmplCode:打开配置页面必不可缺的参数，它是配置页面的结构数据id,功能设计id flowId:对于打开高开的流程表单使用这个参数，他是流程设计的id(TmplCode和flowId只需要一个) id:打开页面的真实数据ID,通常情况下会根据此id在被打开页面的init方法中使用 formType: 表单类型，是开发模式=1,配置模式=2，如果要打开流程页面时，是必须的 opType:流程状态,待审,已审,抄送,发起等 defVal:自定义数据集，用作生成默认值，或传递数据 id taskId:流程任务id(可选) taskNodeId:流程任务节点id(可选) onDestroy:回调函数(必选),包括confirm:确认后调用(data:弹窗数据-表单数据,selectedData:弹窗数据-选择数据) componentClose:回调关闭后调用(close:关闭弹窗) | 打开新窗口 示例： //打开一个自定义页面 openWindow({<br>url: "views/infra/word/wordPBSTemplate/index",<br>height: "800px",<br>width: "800px",<br>title: "选择数据",<br>showHeader: true,<br>showFooter: true,<br>refresh: true,<br>popupType: "general",<br>isDetail: false,<br>data: {<br>TmplCode: "547062297219039429",<br>id: "585007185948316677",<br>taskNodeId: "585007187017864198",<br>taskId: "585025915570885637",<br>opType: "1",<br>},<br>onDestroy: {<br>confirm: ({ data, selectedData }) => {<br>console.log(data, selectedData, "confirm======data=======");<br>this.close();<br>},<br>componentClose: () => {<br>console.log("componentClose==========");<br>this.close();<br>},<br>},<br>}); |
addSelector(initSearchInfo: SelectorObject) | initSearchInfo：初始化查询条件 SelectorObject:是一个键值对对象 key:其中key的结构为($操作符$字段名),操作符为查询条件操作符,字段名是要查询的数据库字段名称 value:查询条件的匹配值 | 添加查询条件选择器 示例： //添加一个初始查询条件：筛选出合同信息(CONTRACTINFO)为空的数据记录 addSelector(initSearchInfo:{$EQ$CONTRACTINFO:""})$EQ$ = 等于(Equal)操作符 |
rowIndex | - | 表示数据行在表格中的索引位置 示例： //通过索引获取数据 const selectedRow = dataList[rowIndex]; |
downloadFile(url,name) | url:要下载的文件的完整网络地址(必选) name:下载后保存在本地的文件名,加后缀(必选) | 文件的下载操作 示例： //下载该路径下的文件 downloadFile("https://server.com/files/report.pdf","2023年8月销售报告.pdf" ); |
downloadFiles(value) | value:JSON字符串或JSON数组字符串(必选) 例如: [{xxx},{xxx}] | 文件的批量下载操作(当传入单个文件时，直接下载该文件.当传入多个文件时，打包为ZIP文件下载) 示例： //下载名称为客户信息管理的文件 downloadFile([{xxx},{xxx}]); |
downloadWord(code, type, id, name) | code:文档生成模板的唯一标识 type:word或者pdf(要导出文档的格式) id:当前选中行的id name:下载后保存在本地的文件名 | 导出word模板 示例： //导出销售合同 downloadWord("SALES_CONTRACT_T01", "word", "CT20230721001", "销售合同"); |
callback(value) | value:true(表示上传成功)，false(中断上传并通知失败) | 控制文件上传 示例： //用户点击取消按钮 cancelButton.onclick =()=> {callback(false);}; |