06.逻辑编排、事件、源码编辑
# 逻辑编排操作说明
逻辑编排是为了实现一种可视化配置的逻辑界面，很适合非研发的人员使用，可以通过配置一些逻辑，从而实现各种功能。打开逻辑编排的界面有两个地方，分别是左侧工具栏的的【逻辑】tab中和事件中，界面如下：
- 触发字段：包含：数据加载之前事件、数据加载之后事件、提交前事件值，以及表单字段监控事件(字段监控事件就是监控字段值是否变化，变化就会触发)。
逻辑工具栏说明如下：
- 控件字段：显示表单所有控件的字段变量对象，可以对他进行赋值，计算等等。
- 控件状态：控制控件显示、隐藏、必填、非必填、只读，非只读，点击会在逻辑编辑器中创建块，点击可切换控制控件的显示、隐藏、必填、非必填、只读，非只读的状态，也可右击进行切换控件的状态。
- formData字段：是显示该表单vue源码中的data方法返回对象，可以选择其它属性对象进行赋值，计算等等。
- vue代码函数：是显示该表单vue源码中的所有函数方法，方便快速点击创建调用该函数的代码。
- 环境变量：包含当前登录环境变量、当前主表ID，当前租户ID，当前表单id。
- 常用函数：子表导入函数 子表新增函数 子表导出函数 子表删除函数 子表批量删除行方法 列表查询函数 列表重置函数 列表新增函数 列表修改方法 列表查看方法 列表删除行方法 列表自定义修改方法 列表批量删除方法 获取列表选中行 获取列表选中行的ID 列表批量修改方法 xls控件操作 关闭正在加载中 启动正在加载中 弹出新窗体 表单保存方法 当前层关闭方法 Api请求 子表新增函数：双击可弹出界面，设置新增的子表控件，
- 消息提示：提供了错误消息提示 成功消息提示 警告消息提示 信息消息提示 确定询问提示的函数方法。
- 流程变量：提供了流程平台的一些变量字段，如：流程主题、流程编号、创建人名称 创建人ID 创建人部门 创建人部门ID 流程状态 申请人 申请人ID 申请人部门 申请部门ID 流程申请时间 流程BId 流程模板Id 流程实例Id 流程节点实例Id 流程表单Id 流程节点Id 流程图形ID 流程名称 流程模版编码
- 数组函数：提供了批量修改函数、求和、平均值、最大值、最小值
- 日期函数：提供获取今日 昨天 前天 近一周 近一月 近一年 去年 去年今日 去年当月 前年，它采用的是moment.min.js插件，更多用法请参考 momentjs (opens new window)
- 常用代码：提供常用的逻辑代码。
备注说明：逻辑编排最终都是转成js代码，如果您有开发功底，完全可以转js代码编辑逻辑，可以使用this可获取vue源码中的所有对象。输入debugger;预览后可进行调试。
# 常用函数
- 子表导入函数:
点击会创建图层下面的块状文字，点击弹出如下图
子表控件：选择表单的子表控件的ID 备注描述：描述该方法的作用。
生成代码如下：
this.importListView_sys('listview_9aba');
- 子表新增函数
操作界面是跟子表导入函数一样。
生成代码如下。
this.addListViewRow_sys('listview_9aba');
- 子表导出函数
子表控件：选择表单的子表控件的ID 导出文件名：导出下载时的文件名称 备注描述：描述该方法的作用。
this.exportListView_sys('listview_v004','明细数据');
- 子表删除函数
this.delListViewRow_sys('子表ID',row为删除的行对象);
- 子表批量删除行方法
操作界面是跟子表导入函数一样。 生成代码如下。
this.batchDelListViewRow_sys('listview_v004');
- 列表查询函数
查询控件:选择查询列表的id 备注描述：描述该方法的作用。
this.but_search_click_sys('form_meup');
- 列表重置函数
操作界面是跟列表查询函数一样。 生成代码如下。
this.but_reset_click_sys('form_meup');
- 列表新增函数 操作界面是跟列表查询函数一样。 生成代码如下。
this.addGridlist_sys('form_meup');
- 列表修改方法 操作界面是跟列表查询函数一样。 生成代码如下。
this.updateGridlist_sys('form_meup',row);
注意：修改方法必须放到列表行中，没有传入row对象是修改不了的
- 列表查看方法 操作界面是跟列表查询函数一样。 生成代码如下。
this.viewGridlist_sys('form_meup',row);
注意：查看方法必须放到列表行中，没有传入row对象是查看不了的
- 列表删除行方法 操作界面是跟列表查询函数一样。 生成代码如下。
this.delGridlist_sys('form_meup',row);
注意：删除方法必须放到列表行中，没有传入row对象是删除不了的
- 列表自定义修改方法
查询控件：选择表单设计的的查询列表控件。
添加：是添加修改字段，然后设置字段的赋值方式，如果设置了是表单填写，弹出页面就会将表单控件显示出来，如果列表中没有配置任何表单填写，系统将直接调用ajax修改数据。
删除：删除该字段的修改。
备注描述：描述该方法的作用。
this.updateAjaxGridlist_sys('form_meup','[{"filed":"gridPanel_rqpr.input_b92e","filedName":"模块布局_合同名称","filedtype":"form","filedvalue":""},{"filed":"gridPanel_rqpr.inputnumber_0a9t","filedName":"模块布局_原价总额(含税)/元","filedtype":"form","filedvalue":""},{"filed":"gridPanel_rqpr.inputnumber_9nm5","filedName":"模块布局_整单折扣率%","filedtype":"form","filedvalue":""}]',row);
2
注意：列表自定义修改方法必须放到列表行中，没有传入row对象是列表自定义修改不了的
- 列表批量删除方法 操作界面是跟列表查询函数一样。 生成代码如下。
this.batchDelGridlist_sys('form_meup');
- 获取列表选中行 操作界面是跟列表查询函数一样。 生成代码如下。
this.getGridSelectionRows_sys('form_meup');
- 获取列表选中行的ID 操作界面是跟列表查询函数一样。 生成代码如下。
this.getGridSelectionIds_sys('form_meup');
- 列表批量修改方法 操作界面是跟列表自定义修改方法函数一样。 生成代码如下。
this.updateBatchAjaxGridlist_sys('form_meup','[{"filed":"gridPanel_rqpr.datarelevance_m8u5","filedName":"模块布局_合同客户","filedtype":"form","filedvalue":""},{"filed":"gridPanel_rqpr.textarea_s1wn","filedName":"模块布局_合同备注","filedtype":"form","filedvalue":""},{"filed":"gridPanel_rqpr.inputnumber_9nm5","filedName":"模块布局_整单折扣率%","filedtype":"form","filedvalue":""}]');
- xls控件操作
选择xls组件：选择表单设计的xls组件 操作类型：获取单元格数据、赋值单元数据，设置列的只读，去掉列的只读。 列的行数：设置操作xls的哪一行数据。 列的列数：设置操作xls的那列的数据。 赋值控件：只有操作类型：为赋值单元数据时，才会显示。选择赋值控件，设置后会将控件值赋值到对应单元格中。
this.xlsOperateFun_sys('luckysheet_r03v','getCellValue',1,1,'');
- 关闭正在加载中
this.isloading=false;
- 启动正在加载中
this.isloading=true;
- 弹出新窗体
this.$refs.reffromdialog.init('设计表单ID','业务主键ID');
- 表单保存方法
this.submitData_sys();
- 当前层关闭方法
this.dialogclose();
# Api请求
数据类型：
- json
绑定数据：
等于：根据json设置的映射路径进行等于赋值。
循环数组：是将数据组的属性，循环获取出来成为新的数组，给映射字段赋值。
目标循环等于：以映射字段为目标，进行循环，与结果的数组一一赋值，如果结果数组大于目标的数组，多余部分就会丢掉，如果目标数组小于结果的数组，少的部分都赋值为空。
结果循环等于：与上面目标循环是相反的，以结果字段为目标，进行循环，进行一一赋值，如果数组大于目标的数组，多余部分就会丢掉，如果目标数组小于结果的数组，少的部分不修改。
合计：获取结果数组的字段合计。
平均：获取结果数组的字段平均值。
最大值：获取结果数组的字段最大值。
最小值：获取结果数组的字段最小值。
数据源
选择接口：选择调用具体的DB接口地址。
参数设置： 配置DB接口请求的参数赋值方式。
响应调用： 请求Db接口返回的jSON格式。
备注说明：字段映射赋值方式必须要知道Api请求后的结果JSON格式，这样才能配置字段映射赋值，如果Api接口请求不通，我们可以使用拷贝对应请求结果的json格式到响应调用中。
- Api接口
Api域名： 可以配置vue源码的变量，Api请求的域名就可以全局统一，更改变量值即可以切换不同环境的Api请求。
Api地址：具体请求Ajax的地址。
请求方式：post请求和get请求两种。
请求类型：application/json,x-www-form-urlencoded,form-data 三种不同的请求类型
支持跨域：开启后通过服务器的后端，请求当前的Api接口，再返回数据。
参数设置：配置DB接口请求的参数赋值方式。
响应调用：请求Db接口返回的jSON格式。
备注说明：字段映射赋值方式必须要知道Api请求后的结果JSON格式，这样才能配置字段映射赋值，如果Api接口请求不通，我们可以使用拷贝对应请求结果的json格式到响应调用中。
- 系统接口
选择接口：弹出选择系统swagger 接口地址，选择后会自动带出需要传入那些参数，返回json结果。 参数设置：配置DB接口请求的参数赋值方式。
响应调用：请求Db接口返回的jSON格式。
备注说明：字段映射赋值方式必须要知道Api请求后的结果JSON格式，这样才能配置字段映射赋值，如果Api接口请求不通，我们可以使用拷贝对应请求结果的json格式到响应调用中。
# 事件编排操作说明
事件的编辑跟逻辑编排是一致的，需要注意点：
不同事件有传入事件函数的参数，所以需要注意你定义的参数传入参数也是可以直接在此处直接使用。
在没有切换源码模式时，切换源码的情况下，编辑函数都是会被覆盖。导致编写代码逻辑无效。
# 源码编辑
# Script代码部分如下图
结构代码说明和注意点：
methods的方法有“_sys”结尾的名称方法，是系统生成的代码和方法，在该方法中编辑代码无效，代码会丢失,还有就是事件，如果事件未切换源码模式，在该方法中编辑代码也是会丢失。
methods的方法可以在线添加自定义函数方法，切记函数名称不能以“_sys”结尾，否则对应代码会被删除掉，也可以添加debugger进行在线调试。
Vue的data 不能代码编辑如下图属性，可以新增属性，代码会进行合并。
在编辑大屏源码时，如果要切换到设计界面前，必须保证你当前编辑的代码是完整的，没有js语法错误。
只要Script代码符合vue语法就能正常预览，具体的资料请参考：vue具体的语法请参考 (opens new window)
# Template代码部分如下图
Template代码部分是不能在线编辑的，但是可以根据自定义属性结合。
# Css代码部分如下图
css是具有私有性，只在当前表单中可生效,可以与自定义组件的 class属性结合 编写css，自定义自己的样式。