项目脚本编程-JS
支持用户自定义全局JS 或 指定窗体JS
环境初始化与部署
确保本地开发环境安装node.js 与 npm命令 可用Windows CMD命令行 查看
推荐 安装node 版本 v14 过新版本可能导致最终打包错误
推荐安装一款前端开发工具，像HBuilder、Sublime Text、WebStorm、Visual Studio Code.. 等 便于后续开发
文件目录
工企开发平台提供前端开发目录文件自动生成 项目目录为 /Project/Client/LayerProject
cfgs : 打包配置文件目录
framework :客户端框架包目录
src :开发源文件目录
.babelrc : 配置文件
paakage.json : 项目打包配置文件
package-lock.json:配置文件
webpack.config.js: 配置文件
其中 src 目录下为开发源文件 与后台开发目录相对应 ，层、应用、插件和扩展都有对应自己的文件目录
拿 ent层举例 layer_ent 目录下包含 gongqi目录和index.js文件
与后台java开发文件相对应 客户端开发文件 也是 一个Form 对应一个目录 ，目录下包括 from_xx.js 文件与之相对应的base.js文件 还有 各个数据源datasource.js文件与之相对应的datadouscebase.js文件
拿Form_ParTable.js 为例 这里使用VSCode 打开客户端二次开发项目
对应的 form base 文件结构如下
datasource.js 结构如下
对应 datasourcebase 结构如下
对比后台form的java文件结构，可以看出是大同小异的
项目初始化
开发第一次使用客户端二次开发项目 需要在线下载项目所需要的包文件 可以使用VSCode打开到LayerProject目录下 唤出 终端 输入 npm install 命令（如果提示 npm 不是有效命令 请先确保已安装node环境 且 添加命令到环境变量） 然后按 回车 执行
如下图 会构造出一个node_modules目录 代表已经 初始化完成
客户端二次开发方法详解
客户端框架提供大部分后台form方法，如 form层面的 beforeInit、afterInit、buttonOK_ 等， 写法也与后台java写法类似
| beforeInit(arg) | 初始化后第一次打开画面时，在构造画面前触发此方法 主要用于调整画面结构，如控件的可见性、可编辑性等 |
|---|---|
| afterInit(arg) | 打开画面时，在画面构造后，数据加载前回调，在beforeInit()之后。常用于打开画面时做数据过滤。 |
| formClosing(arg) | 画面关闭时触发此方法。复写了此方法，如果需要关闭此画面，需要写命令doCloseForm关闭画面 |
| formClosed(arg) | 关闭画面后调用 |
| buttonOK_(arg) | 响应按钮单击事件 |
| modifiedEditor_(arg, oldValue, newValue) | 无数据源的Editor的值发生改变时，触发此方法。常用于根据某无数据源的Editor的值发生改变时，改变其他Editor的值。 |
| dataTip_(arg) | 鼠标悬停在无数据源的Editor上时，触发此方法。用于获取鼠标悬停时显示的文本。 |
| ... | ... |
数据源上支持
| activeRecord(arg) | 在画面上切换记录时触发此方法。打开画面时就会第一次触发此方法 |
|---|---|
| modifiedField_(arg, oldValue, newValue, baseRecord, joinRecord, result) | 字段变更值时会触发此方法 |
| ... |
客户端框架提供CommnadResult 对象 可利用 该对象执行命令，命令与后台result 命令相同，也提供部分客户端独有命令
| activeRecord | 主动触发客户端的activeRecord事件 |
|---|---|
| alert | 弹框提示，需要传一个String类型的参数 |
| bindEditorStyle | 设置编辑框的样式条件。 设置时，会先清空原有的样式条件，不叠加条件。 |
| bindRecordConditionTask | 当前记录满足指定条件时执行相应的CommandResult 一般常用于替代LockField描述复杂的控制 |
| bindRowStyle | 设置表格行的样式条件。设置时，会先清空原有的样式条件，不叠加条件 |
| buttonOK | 模拟客户端操作，点击按钮，传按钮控件名称 |
| clearTasks | 清空tasks并设置其为一个新的空列表 |
| clientRecordAdd | 将已存在于数据库的一条记录，添加到客户端（对正式表有效） |
| clientRecordRefresh | 将已存在于数据库的多条记录为准，刷新客户端的记录（对正式表有效） |
| clientRecordRemove | 在客户端数据源中移除对应recId的记录（对正式表有效），可传Group参数 |
| closeForm | 关闭画面，如存在formClosing，将会执行，不可传输参数 |
| doCloseForm | 强制关闭画面，不再执行formClosing |
| contextMap | 改变客户端存储的contextMap 当type==CLEAR，则key、value会被忽略 当type==PUT，则key、 value应按实际传入 当type==REMOVE，则value会被忽略 |
| ds_AllowAdd | 更新数据源的AllowAdd值， 数据源及所在Group是否允许新增操作 |
| ds_AllowAttchment | 更新数据源的AllowAttachment值，数据源及所在Group是否允许添加附件操作 |
| ds_AllowDelete | 更新数据源的AllowDelete值，数据源及所在Group是否允许删除操作 |
| ds_AllowEdit | 更新数据源的AllowEditor值，数据源及所在Group是否允许编辑操作 |
| ds_AllowExport | 更新数据源的AllowExport值，数据源及所在Group是否允许导出操作 |
| ds_AllowQuery | 更新数据源的AllowQuery值，数据源及所在Group是否允许查询操作 |
| ds_AllowSave | 更新数据源的AllowSave值，数据源及所在Group是否允许保存操作 |
| executeQuery | 模拟客户端操作，执行查询，可传Group参数，也可不传，不传默认是当前Group |
| fadeInfo | 以淡入淡出效果显示信息，可传Arg参数 |
| fetchAll | 模拟客户端操作，执行查询全体,可传Group参数,指定查询数据的Group，默认为当前Group |
| formCmd | 执行画面的服务端二次开发方法，需传Arg参数，参数为方法名，参数类型为String。 |
| js | 执行Js语句，需传Arg参数 |
| locateToRecord | 定位到指定的记录，可传指定记录的RecId或者传RecordCursorType定位 |
| openForm | 打开画面 |
| openMainForm | 进入主表 |
| openResource | 打开Server/GongqiERP/resource/帐套名或者Server/GongqiERP/tmp下的文件，需传Arg参数，参数为文件的相对路径，参数类型为String |
| openURL | 在浏览器中新打开一个网页指向该地址 |
| parentCmdResult | 对于普通的画面，执行其父画面的客户端命令集，如果其父画面不存在则不做任何处理 |
| recordRestore | 模拟客户端操作，恢复当前记录，可传Group参数 |
| refreshPlugin | 刷新画面插件 |
| refreshPlugin_Html | 刷新画面Html插件，需传Plugin的名字和HtmlRefreshArg对象 |
| refreshPlugin_Radio | 刷新画面Radio插件，需传Plug的名字和RadioRefreshArg对象 |
| refreshPlugin_Tree | 刷新画面Tree插件，需传Plugin的名字和TreeRefreshArg对象 |
| removeEditorStyle | 移除编辑框的样式条件 |
| removeRowStyle | 移除表格行的样式条件 |
| selectRecords | 选择指定记录 |
| showClipboard | 显示剪贴板 |
| showDialog | 打开对话框，须传参数，参数为Dialog对象 |
| updateControlAllowEdit | 更新画面元素的AllowEditor值，控制控件是否可编辑 |
| updateControlLabel | 更新画面元素的Label值 |
| updateControlVisible | 更新画面元素的Visible值，控制控件是否可见 |
| updateCurrentQuery | 更新客户端的CurrentQuery为指定的QueryTable，需传Arg参数，参数内容为QueryTable对象，还可传Group参数，指定改变的CurrentQuery所属的Group |
| updateFormQuery | 更改客户端的FormQuery为指定的QueryTable，需传Arg参数，参数内容为QueryTable对象，还可传Group参数，指定改变的FormQuery所属的Group |
| updateQuery | 等同于UpdateQueryCurrent、UpdateQueryForm、ExecuteQuery连用，需传Arg参数，参数内容为QueryTable对象 |
| writeEditor | 对于无数据源的编辑框，写入值；并触发modifiedEditor事件 |
| writeField | 对于有数据源的字段，写入值；并触发modifiedField事件 |
| writeImage | 在Image控件上写入图片信息 |
| registerRender | 自定义构造datagrid的某一列 |
| UpdateButtonClass | 更新按钮的class名称 |
| UpdateAllowEditorNotSelectAll | 是否允许编辑框能编辑但是不能选中 |
| ... | ... |
实践与案例
例1：如下是一个简单客户端二次开发例子
在 Form 的afterInit 方法里面 初始化渲染一个 htmlPlugin 以及 一个 Button_Editor 按钮点击触发 result openForm
例2：在初始化DataGird 是时候 把指定的一列 渲染成自己一个组件
打包部署与应用
每个 层 、应用、插件或者扩展都在对应文件目录下有个 index.js 文件 该文件用于指定打包的时候 哪些js文件需要被打包进去
该文件内容可能有很多 这边建议是 先清理掉所有内容 然后 仅保留 import 二次开发过的文件 的 引入 如： 例子中的 Form_ParTable
然后 在终端 执行打包命令 如 需要打包ent层的就输入 命令 npm run dist --ent
相对应的app的就输入命令 npm run dist --app.gongqi.df.sales
相对应的ext 的就输入命令 npm run dist --ext.gongqi.df.sales
相对应的plg 的就输入命令 npm run dist --plg.gongqi.pl.salesPL
打包成功之后 会生成对应 .js 和 map.js 文件到 /Project/Client/GongqiERP/layers 目录下
然后就可以运行项目看实际效果 也可以进行前端调试
打开对应二次开发的画面 然后 打开浏览器的开发工具 切换到Sources选项页面 搜索 二次开发js文件
