洲聚零代码平台
洲聚零代码平台简介
环境要求
技术参数
Linux所需相关组件
快速入门
平台角色
搭建过程
表单创建
应用功能设计
分组管理
新建普通业务
新建视图列表
新建树列表
新建文件列表
新建内嵌网页
新建引用功能
新建外部数据源列表
新建自定义页面
表单管理
表单组件
一行两列
一行三列、四列
单行文本
多行文本
日期控件
时长
单选
复选
下拉框控件
级联下拉
关联控件
数字
SAP控件
审核意见
表单域
附件
附件(可查看)
图片
人员
部门
富文本框
HTML
阅读范围
树形控件
隐藏域
多选控件
服务填值控件
自动完成
OCR识别
添加子表
流水号控件
二维码
定位
标签
条形码
Html
链接控件
弹窗
分割线
按钮组件
时间轴
创建人、部门等控件
系统字段
用户字段
自定义组件
基础属性
默认值
隐藏规则
计算规则
禁用规则
校验规则
数据范围
高级范围
区间规则
子表初始化规则
字段描述
表单属性
基础属性-标题
基础属性-消息模板
基础属性-表单校验
基础属性-页签设置
高级属性-启用版本
高级属性-启用锚点
高级属性-表单已读
高级属性-表单加载后调用业务服务
高级属性-保存后调用业务服务
高级属性-字段权限
高级属性-按钮设置
高级属性-脚本设置
列表设置
通用设置
基本设置
列设置
查询条件
左树右列表设置
行颜色设置
移动端设置
移动端列设置
表单字段导入配置手动修改
流程设计
操作介绍
开启、关闭流程
流程设置
流程节点介绍
活动属性
一般设置
显示
参与者
FindUserByCodeAndGroupName
参与者函数说明
权限
操作权限
子表设置
规则
协办
高级
抄阅
规则引擎
可视化界面
服务组件库
基于界面可视化配置
实时预览和验证
流程执行与控制
变量与计算
条件判断
函数/方法调用
内置组件
设置变量
日志
消息提示
自定义节点
条件
遍历
终止节点
设置表单值
禁用复选选项
关闭当前表单页面
新增表单
编辑表单
删除表单
连接器应用
追加新文本
列表聚合成文本
获取列表指定位置项
列表插入一项
连接器应用
数据源连接
鉴权管理
API管理
API日志
实战进阶
基础增删查改应用
创建应用
创建菜单
表单搭建
列表设计
多表间数据关联
创建合同管理
使用关联控件
前台操作
子表管理
子表数据源
子表设置
流程搭建
流程创建
流程设置
高级设计
数据权限
按钮设置
顶部按钮
表单打印按钮说明
列表自定义按钮
表单自定义按钮
按钮显示条件
业务方法
组件入参设置
API网关
后台管理
控制台
组织机构
组织成员
成员管理
已禁用账号
组织类型
组织岗位
组织机构同步-同步第三方数据库
组织机构同步-同步第三方数据库(DB同步)
显示设置
应用管理
应用权限
应用管理
应用基础管理
基本信息修改
启用与禁用
管理员设置
删除应用
企业管理
设置中心
账户设置
数据源管理
自定义规则管理
业务集成
移动端管理
组件管理
界面设置
权限管理
流程监控
日志管理
配置中心
系统
系统管理
工作日历
消息设置
系统管理员设置
系统参数-单点登录
系统参数-文件大小限制调整
系统参数-第三方接口
Vue组件
进度条组件
第三方集成
企业微信集成配置
企业微信js\-sdk配置
企业微信应用配置(单租户)
企业微信服务商代开发应用(多租户)
钉钉集成配置
钉钉应用配置
二次开发
Vue脚本接口
专题文档
列表专题
视图中显示附件并能下载
树列表搭建
表单专题
多级联动下拉框
打印模板为表格时,如何给每条数据自动生成序列号?
流水号自定义模板
视图中显示附件并能下载
下拉框控件使用数据源时设置默认值
函数专题
如何使用ManagerOf函数找上级?
如何根据不同成员寻找各自的上级?
流程专题
如何设置表单查重?
如何设置表单按钮在流程结束以后出现?
流程状态编码
批量审批
如何设置倒计时?
业务集成
子表数据插入其他表示例
数据反写示例
接口补偿操作手册
第三方系统接口调用 -节点调用服务
第三方系统接口调用 - 函数调用服务
第三方系统接口调用 - 示例代码(webapi)
WebAPI配置说明
移动端专题
自定义移动端首页配置
logo专题
更换浏览器标签页Tab显示图标(限8\.7\.4或以上版本)
聊天机器人按钮图片上传
文件专题
部署后无法上传背景图附件、同步工具无法同步组件文件或菜单自定义图标
操作视频
搜索
禁用规则
文本格式
子表创建
流程创建
高级控件使用
合同管理应用
关联表和计算规则
基础控件使用
主表、子表排序设置
异常处理
Icp
常用排查SQL
MongoDB
基本
mysql
mysql服务被系统杀死
MySQL错误\-this is incompatible with sql\_mode\=only\_full\_group\_by
调优
RabbitMQ
rabbitmq坑点与异常处理
企业微信登录提示用户验证失败
本文档使用 MrDoc 发布
-
+
首页
Vue脚本接口
# Vue脚本接口 ## advanceSearchCodes注意点 * 脚本必须使用ES5以下的语法规则编写 ## 表单(适用于主子表表单) ```TypeScript // 使用对象 dataForm // 获取表单信息 getDataFormInfo() // 获取所有子表组件 getAllSubTable() // 获取子表组件,subCode表示子表code getSubTable(subCode) /** * 添加表单字段监听 * code: 表单字段code * callback: 子表字段值改变的回调 */ addFieldListening(code, callback) /** * 添加子表监听 * code: 子表code * callback: 回调 */ addSubTableListening(code, callback) // 获取字段结构,code为表单字段code getDataItem(code) // 获取表单字段的值,code为表单字段code getDataItemValue(code) // 设置表单字段的值,code为表单字段code setDataItemValue(code, value) /** * 获取业务规则结果 * rule: 规则字符串 * 返回值: Promise对象 */ getBusinessRuleResult(rule) /** * 添加按钮前置 * title: 按钮名称 * callback: 回调 */ addButtonBefore(title, callback) /** * 隐藏表单字段或子表列 * 当隐藏表单字段时,code为字段code * 当隐藏子表列时,code为[子表code].[子表列code] */ hideComponentByCode(code, isHidden) // 隐藏显示表单按钮 isHiddenButton(title, isHidden) // 刷新子表,subCode为子表code refreshSubTable(subCode) // 添加表单按钮加载完成的回调 addformBtnLoadedListening(callback) // 关闭表单 closeView() // 设置某个字段的附属属性 setExtendAttributeByCode(code, key, value) /** * 执行按钮动作(仅在铁四院质量分支可用) */ executeFormButtonAction(title) // 效验表单数据(仅在铁四院质量分支可用) validateData() ``` ## 子表 ```JavaScript // 使用对象 subTable // 添加子表加载完成的回调 addLoadedCallback() /** * 显示或隐藏操作按钮 * title: 按钮名称 * isHidden: 是否隐藏 */ isHiddenButton(title, isHidden) /** * 添加按钮前置 * title: 按钮名称 * callback: 回调 */ addButtonBefore(title, callback) /** * 添加按钮后置 * title: 按钮名称 * callback: 回调 */ addButtonAfter(title, callback) /** * 列表数据拷贝 * code: 拷贝的列 * targetCode: 赋值的列 */ columnDataCopy(code, targetCode) ``` ## 主表 ```JavaScript // 使用对象 dataTable /** * 添加按钮前置 * title: 按钮名称 * callback: 回调 */ addButtonBefore(title, callback(datas, resolve)) /** * 添加按钮后置-仅支持'删除'按钮 * title: 按钮名称 * callback: 回调 */ addButtonAfter(title, callback) /** * 获取选中的数据 */ getSelectedItems() /** * 设置列表的高级搜索值 * value,必须为一对象,key为组件code * 如 {f_2b8984cbcd: '男','f_2b8984abcd':'一年级'} * 数字控件:必须为一数字区间,例 :{f_3da0dd965a: [4,7]} * 日期组件,CreatedTime,ModifiedTime,必须为一时间区间,例 : f_61834d2e76: ['2020-09-01 00:00:00','2020-10-01 23:59:59'] * 下拉,多选,单选,必须为一数组 f_8d60829d65 :[{ * name: "选项2", * selectionId: "选项2" * },{ * name: "选项1", * selectionId: "选项1" * }] * 如果下拉关联其它数据源,则为: f_8d60829d65:[{ * name: "湖北", * value: '01', * },{ * name: "湖南", * value: '02', * }], * 如果为状态,则为一数组:'State':[{code: '0', name: '草稿'}] * * isSearchImmediate 是否设置后立即刷新列表 */ setSearchConditionValue(value,isSearchImmediate) ``` ## 公共组件 ```JavaScript // 使用对象 dataForm、subTable、dataTable /** * element提供的公共组件 * 请参考element文档[https://element.eleme.cn/#/zh-CN/component/message-box] */ $message、$alert // message目前支持warning,error,info dataForm.$message({ type: "warning", message: "保存失败", }); dataForm.$alert('保存失败,是否继续', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', showCancelButton: true }).then(function () { // 确定回调 }).catch(function () { // 取消回调 }); // 是否是移动端 dataForm.$isMobile ``` ## 公共接口 ### 网络请求 * **$axios**: 项目中公共的网络请求对象,具体使用参考axios文档\[<https://github.com/axios/axios>],例: ```JavaScript dataForm.$axios.get('http://localhost:8080/user?ID=12345') .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); }); dataForm.$axios.post('http://localhost:8080/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // response结构 { // 接口返回的数据 data: {}, // 来自服务器响应的HTTP状态码 status: 200, } ``` 注意:禁止设置$axios.defaults.baseURL * **$http**: 基于axios的封装,用于平台的接口请求,例: ``` // 用户登录 dataForm.$http.GET('api/Organization/LoginByCode/' + code) .then(function (response) { if (response.Status !== 1) { dataForm.$message({ type: "error", message: response.Message || '登录失败', }); return; } console.log('登录信息', response.Result); }).catch(function (error) { console.log(error); }); // 获取表单信息 dataForm.$http.POST('api/Form/GetFormInfo', parameters) .then(function (response) { if (response.Status !== 1) { dataForm.$message({ type: "error", message: response.Message || '获取表单信息错误', }); return; } console.log('表单信息', response.Result); }).catch(function (error) { console.log(error); }); // response结构 { // 状态,1表示成功 Status: 1, // 数据 Result: {}, // 消息 Message: '', } ``` ### 获取当前登录人信息 ``` var userInfo = dataForm.$getUserInfo(); console.log('当前登录人姓名:', userInfo.Name); console.log('当前登录人UserID:', userInfo.ObjectID); console.log('当前登录人Code:', userInfo.Code); console.log('当前登录人所在部门:', userInfo.ParentName); console.log('当前登录人所在部门ID:', userInfo.ParentID); ``` ## 脚本占位符 脚本里的 \#\#keyName\#\# 形式的字符串会被替换成全局配置字段keyName的内容。 ``` console.log('##RESTfulUrl##'); dataForm.$axios('##RESTfulUrl##/api/getUserInfo').then(function(res) { // do something }); ``` ## 实例 ### 实例一:统计行编辑子表的某个字段为是的数据数量 ``` // 监听子表 dataForm.addSubTableListening(subCode, function() { var formInfo = dataForm.getDataFormInfo(); var subCode = '6457f7126e'; // 统计数据条数 var rule1 = "ExecuteSql(\"select count(*) from i_" + subCode + " where ParentObjectID='" + formInfo.dataId + "'\")"; dataForm.getBusinessRuleResult(rule1).then(function(res) { if (!res.Success) return; // 返回值必须经常两次JSON装换 var count = JSON.parse(JSON.parse(res.Result)); dataForm.setDataItemValue('f_3ce454dfce', count) }); // 统计f_7ab2df8515值为1的数据条数 var rule2 = "ExecuteSql(\"select count(*) from i_" + subCode + " where ParentObjectID='" + formInfo.dataId + "' and f_7ab2df8515='1'\")"; dataForm.getBusinessRuleResult(rule2).then(function(res) { if (!res.Success) return; // 返回值必须经常两次JSON装换 var count = JSON.parse(JSON.parse(res.Result)); dataForm.setDataItemValue('f_3a72b3ba7a', count) }); // 统计f_9c767352a2的合计 var rule3 = "ExecuteSql(\"select sum(f_9c767352a2) from i_" + subCode + " where ParentObjectID='" + formInfo.dataId + "'\")"; dataForm.getBusinessRuleResult(rule3).then(function(res) { if (!res.Success) return; // 返回值必须经常两次JSON装换 var count = JSON.parse(JSON.parse(res.Result)); dataForm.setDataItemValue('f_77f3b062f8', count) }) }); ```  ### 实例二:在特定节点监听选人控件赋值 ``` // 获取表单信息 var formInfo = dataForm.getDataFormInfo(); // 判断当前表单是审批节点且不是查看模式 if (formInfo.formExtensionInfo.CurrentActivityName === '审批' && formInfo.formViewType !== 'view') { // 回调 var callback = function callback() { var rule = 'ExecuteSQLForObject("select name,code from t_user where ObjectID=\'{0}\'",{f_d48c24dac2_Id})'; // 获取业务规则结果 dataForm.getBusinessRuleResult(rule).then(function (res) { if (!res.Success) return; // 业务规则返回的是字符串,需要装换成自己需要的结构,比如字典或者数组 var obj = JSON.parse(res.Result); // 设置表单字段的值 dataForm.setDataItemValue('f_aa4c70edad', obj.name); dataForm.setDataItemValue('f_539d6ad0be', obj.code); }); }; // 获取人员控件是否有值,如果有值手动调用回调 var value = dataForm.getDataItemValue('f_d48c24dac2'); if (typeof value === 'string' && value.length > 0) { callback(); } // 监听人员控件 dataForm.addFieldListening('f_d48c24dac2', callback); } ```  ### 实例三:主表字段控制子表按钮 ``` // 获取子表组件 var table1 = dataForm.getSubTable('8fb1958f70'); var table2 = dataForm.getSubTable('6e22eaa41f'); var table3 = dataForm.getSubTable('195e075ebc'); // 添加主表字段监听 dataForm.addFieldListening('f_2b0901480f', function (val) { // 隐藏子表按钮 table1.isHiddenButton('新建', val === '1'); table2.isHiddenButton('新建', val === '1'); table2.isHiddenButton('插入', val === '1'); table3.isHiddenButton('新建', val === '1'); table1.isHiddenButton('百度', val === '2'); table2.isHiddenButton('谷歌', val === '2'); }); // 添加主表字段监听 dataForm.addFieldListening('f_09607846f4', function (val) { // 隐藏子表按钮 table1.isHiddenButton('查看', val === '1'); table3.isHiddenButton('查看', val === '1'); table1.isHiddenButton('编辑', val === '2'); table3.isHiddenButton('编辑', val === '2'); table1.isHiddenButton('删除', val === '3'); table2.isHiddenButton('删除', val === '3'); table3.isHiddenButton('删除', val === '3'); }); ``` ### 实例四:表单提交效验字段是否填值 ``` // 添加保存按钮前置 dataForm.addButtonBefore('保存', function (resolve) { // 获取表单字段的值 var value = dataForm.getDataItemValue('f_e60d3a48cd'); // 判断值是否为空 if (typeof value !== 'string' || value.length <= 0) { // 弹出提示 目前message的type只支持error,warning,info dataForm.$message({ type: "error", message: "字段a不能为空", }); } else { // 不为空,继续后面的处理 resolve(); } }); ``` ### 实例五:子表删除按钮的前置和后置处理 ``` var subTable1 = dataForm.getSubTable('83be1068e6'); // 添加删除按钮前置处理,同步处理,必须手动调用resolve才能让删除继续 subTable1.addButtonBefore('删除', function (data, resolve) { // data为key-value的格式 console.log('subTable1 delete before: ', data['f_123afsb2']); setTimeout(function () { resolve(); }, 1000); }); // 添加删除按钮后置处理,异步处理,不会等待回调处理 subTable1.addButtonAfter('删除', function (data) { // data为key-value的格式 console.log('subTable1 delete after: ', data['f_123afsb2']); }); ``` ### 实例六:隐藏表单字段和子表列 ``` // 添加字段监听 dataForm.addFieldListening('f_57b8661128', function(val) { // 当监听的字段的值为1和3时隐藏字段`f_33aa1a4410` dataForm.hideComponentByCode('f_33aa1a4410', val === '1' || val === '3'); // 当监听的字段的值为2和3时隐藏字段`f_5968a4e8c7` dataForm.hideComponentByCode('f_5968a4e8c7', val === '2' || val === '3'); // 当监听的字段的值为1和3时隐藏子表`9411739038`的`f_33aa1a4410`列 dataForm.hideComponentByCode('9411739038.f_28cbf99d7e', val === '1' || val === '3'); // 当监听的字段的值为2和3时隐藏子表`9411739038`的`f_5968a4e8c7`列 dataForm.hideComponentByCode('9411739038.f_8b4bb9ea39', val === '2' || val === '3') }); ``` ### 实例七:隐藏表单按钮 ``` var callback = function callback() { // 获取字段 f_81f0821c4e 的值 var value = dataForm.getDataItemValue('f_81f0821c4e'); // 隐藏按钮 dataForm.isHiddenButton('保存', value === '1'); dataForm.isHiddenButton('百度', value === '2'); }; // 添加表单按钮加载完成的回调 dataForm.addformBtnLoadedListening(callback); // 添加字段 f_81f0821c4e 的监听 dataForm.addFieldListening('f_81f0821c4e', callback); ``` ### 实例八:移动端在某个流程节点下只能查看不能审批或编辑 ``` // 获取表单信息 var formInfo = dataForm.getDataFormInfo(); // 获取表单状态,新增、查看、编辑 var formViewType = formInfo.formViewType; // 获取当前流程节点 var activityName = formInfo.formExtensionInfo.CurrentActivityName; // 判断是否是移动端,表单的流程节点是审批且不是查看模式 if (dataForm.$isMobile && activityName == '审批' && formViewType !== 'view') { // 提示 dataForm.$alert('此流程无法在移动端上处理,请使用PC端处理',{ callback:function callback(){ // 关闭表单 dataForm.closeView(); } }); } ``` ### 实例九:根据某个字段的值设置数据范围的组是否显示 ``` // 设置阅读范围控件的属性的方法 var setReadRangeGroup = function setReadRangeGroup(value) { if (value === '是') { // 设置数据范围的组显示 dataForm.setExtendAttributeByCode('ReadRange', 'isReadRangeGroup', true); // 设置扩展的部门范围 dataForm.setExtendAttributeByCode('ReadRange', 'extendScopeUnitIds', ['68901fc4-eaeb-4d60-9944-2f5b2be6e690', '374f3843-e91c-4621-92ab-b915a0014907']); // 设置扩展的组织类型 dataForm.setExtendAttributeByCode('ReadRange', 'extendCategories', ['bu', 'ke']) } else if (value === '否') { // 设置数据范围的组不显示 dataForm.setExtendAttributeByCode('ReadRange', 'isReadRangeGroup', false); // 清空扩展的部门范围 dataForm.setExtendAttributeByCode('ReadRange', 'extendScopeUnitIds', null); // 清空扩展的组织类型 dataForm.setExtendAttributeByCode('ReadRange', 'extendCategories', null) } }; // 获取字段的值 var value = dataForm.getDataItemValue('f_0862164c8e'); // 根据字段的值设置阅读范围的组 setReadRangeGroup(value); // 监听字段的值 dataForm.addFieldListening('f_0862164c8e', setReadRangeGroup); ``` ### 实例十:主列表按钮前置验证及传值 ``` // 控制非完成状态的行数据无法启动 /** * datas:列表选中的行数据 * resolve:回调函数 */ dataTable.addButtonBefore('启动', function (datas,resolve) { // 判断某值是否符合要求 if (datas[0]["f_f585b8afa7"]!=='已完成') { // 弹出提示 目前message的type只支持error,warning,info dataTable.$message({ type: "warning", message: "非完成状态无法启动", }); } else { // 继续后面的处理 resolve(); } }); ``` ### 实例十一:子表行编辑模式保存前置验证及传值 ``` // 验证机构代码是否可用 var subTable1 = dataForm.getSubTable('68dc4a6640'); //行编辑模式:保存前置 subTable1.addButtonBefore('保存', function(data, resolve) { // data为key-value的格式 const bh = data['f_b954f24e4c'] if (bh === '010') { subTable1.$message({ type: "warning", message: "该机构代码不可用!", }); resolve(false); // 验证不通过,返回false } else { resolve(true); // 验证通过,返回true。或写:resolve() } }); ``` ### 实例十二:获取字段权限 ``` var dataItem = dataForm.getDataItem('f_b954f24e4c'); console.log('isView, isMust, isEdit: ', dataItem.isView, ``` ### 实例十三:字段赋值 ``` // 单行文本、多行文本赋值 dataForm.setDataItemValue('f_xxx', 'xxx'); // 选人、选部门、多选控件赋值 dataForm.setDataItemValue('f_xxx', [{ Name: '张三', ObjectID: 'xxxx-xxxx' }]); ``` ### 实例十四:执行表单按钮动作(仅在铁四院质量分支可用) ``` // 执行提交按钮的动作 dataForm.executeFormButtonAction('提交').then(function(resolve) { // 提交成功的回调 ... // 直接调用会完成平台的后续操作 resolve(); }); ``` ### 实例十五:效验表单数据(仅在铁四院质量分支可用) ``` dataForm.validateData().then(function(result) { // result为true时,表示效验通过 }); ``` ### 实例十六:按钮前置打开列表选择数据(目前仅在[release\_honda\_qianjia](http://221.234.36.41:90/icanadmin/s2cloudweb-vue/tree/release_honda_qianjia)分支可用) ``` dataForm.addButtonBefore("openlist", function(resolve) { var modal = dataForm.$showListModal( { AppItemCode: "b33d6585867c50ed", SearchCondition: [] }, { isSelectMode: true, isMultipleSelectMode: true, pagingSize: 20, isAdvanceSearch: true, advanceSearchCodes :["f_aaa","f_bbb"], width: "80%", title: "选择数据" }, function(data) { //单选为选中的数据,多选为选中的数据数组 console.log(data); modal.close(); } ); }); ```
xiaohang
2025年7月9日 09:34
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
PDF文档(打印)
分享
链接
类型
密码
更新密码