Merge remote-tracking branch 'origin/master'

前端项目开发/front.md

--- "a/\345\211\215\347\253\257\351\241\271\347\233\256\345\274\200\345\217\221/front.md"
+++ /dev/null

前端项目开发/前端环境搭建.md

+### 1.前端环境搭建
+### 1.前端环境搭建
+
+#### 1.Node安装
+
+​		官网：http://nodejs.cn/
+
+
+
+![Node官网](../assets/frontEndImg/Node_download.png)
+
+下载好对应的安装包后，打开安装，点击下一步即可：
+
+![Node官网](../assets/frontEndImg/Node_install_1.png)
+
+![Node官网](../assets/frontEndImg/Node_install_2.png)
+
+选择安装位置：
+
+![Node官网](../assets/frontEndImg/Node_install_3.png)
+
+![Node官网](../assets/frontEndImg/Node_install_4.png)
+
+![Node官网](../assets/frontEndImg/Node_install_5.png)
+
+![Node官网](../assets/frontEndImg/Node_install_6.png)
+
+![Node官网](../assets/frontEndImg/Node_install_7.png)
+
+安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：
+
+![Node官网](../assets/frontEndImg/Node_install_8.png)
+
+接下来设置npm镜像淘宝源：
+
+```shell
+全局设置
+	npm config set registry https://registry.npm.taobao.org
+检验
+	npm config get registry 
+	或
+	npm info express
+```
+
+![Node官网](../assets/frontEndImg/Node_install_9.png)
+
+#### 2.VScode安装
+
+​		官网https://code.visualstudio.com/Download下载最新版
+
+![VSCODE](../assets/frontEndImg/vscode_dev_1.png)
+
+​	注：解压到非系统盘，文件夹最好不要出现中文和空格，解压后直接运行code.exe即可
+
+![VSCODE](../assets/frontEndImg/vscode_dev_2.png)
+
+
+
+#### 3.利用GIT拉取代码
+
+在想要存放代码的文件夹中右键，选择Git Bash Here：
+
+![GIT](../assets/frontEndImg/git_pull_0.png)
+
+拉取代码：
+
+```shell
+git clone http://114.115.138.98:8900/fukai/vue-gjjs
+```
+
+![GIT](../assets/frontEndImg/git_pull_1.png)
+
+#### 4.利用VScode打开项目
+
+打开项目:
+
+![VSCODE](../assets/frontEndImg/vscode_dev_3.png)
+
+![VSCODE](../assets/frontEndImg/vscode_dev_4.png)
+
+***打开项目后切换分支：***
+
+![VSCODE](../assets/frontEndImg/vscode_dev_5.png)
+
+![VSCODE](../assets/frontEndImg/vscode_dev_6.png)
+
+打开终端：
+
+![VSCODE](../assets/frontEndImg/vscode_dev_7.png)
+
+终端执行：
+
+```shell
+npm install
+```
+
+![VSCODE](../assets/frontEndImg/vscode_dev_8.png)
+
+![VSCODE](../assets/frontEndImg/vscode_dev_9.png)
+
+终端执行：
+
+```shell
+npm start
+```
+
+![VSCODE](../assets/frontEndImg/vscode_dev_10.png)
\ No newline at end of file

前端项目开发/静态交易开发.md

+### 静态交易开发
+### 静态交易开发
+
+#### 1.前端项目
+
+##### 技术框架
+
+- Node
+- Vue2、VueRouter、Vuex
+- Element-UI
+- Webpack
+
+##### 目录详解
+
+> vue-gjjs
+>
+> > public
+> >
+> > src
+> >
+> > > assets 资源文件（图片、公共样式）
+> > >
+> > > components 自定义组件
+> > >
+> > > config 码表
+> > >
+> > > lang 语种资源文件、i18n国际化配置
+> > >
+> > > mixin 混入，每个交易要用到的共同功能
+> > >
+> > > model 交易的数据模型
+> > >
+> > > routers 页面的路由配置
+> > >
+> > > service 对axios的封装，请求工具类、微服务接口
+> > >
+> > > store 状态管理（vuex）
+> > >
+> > > utils 工具类
+> > >
+> > > views
+> > >
+> > > > Business 交易页面
+> > > >
+> > > > > BusRouter.js 交易路由配置
+> > > >
+> > > > Display 用于快照显示
+> > > >
+> > > > Docpan 面函相关的页面
+> > > >
+> > > > Home 首页
+> > > >
+> > > > Layout 页面整体结构布局
+> > > >
+> > > > Login 登陆页面
+> > > >
+> > > > ModelViewer 模型浏览器
+> > > >
+> > > > Public 交易的公共页面
+> > > >
+> > > > Redirect 用于标签页的刷新
+> > > >
+> > > > Review 交易的复核页面
+> > > >
+> > > > TaskList 任务列表页面
+> > >
+> > > widget 小组件
+> > >
+> > > App.vue 项目的根组件
+> > >
+> > > main.js 入口js
+> > >
+> > > permission.js 路由跳转控制
+> > >
+> > > ***前端文件目录描述视频说明***
+> > > http://114.115.138.98:9497/gjjs-book/assets/videos/fore-end-file.mp4
+
+
+
+**系统路由划分**
+
+![router](../assets/frontEndImg/route.png)
+
+**单个交易模块划分**
+
+![router](../assets/frontEndImg/vue-module.png)
+
+**国结交易页面结构组成图**
+![router](../assets/frontEndImg/国结交易页面结构图.png)
+
+#### 2.静态交易
+
+##### 介绍
+
+​		每个静态交易xxx（例：pty），都有5个交易Infxxx（查询）、Dbixxx（详情）、Dbexxx（修改）、Dbdxxx（删除）、Dbaxxx（新增）,其中Infxxx为查询入口，其他四个页面相似。我们将Dbixxx做好后，Dbexxx、Dbdxxx、Dbaxxx复用Dbixxx的页面，用props控制表单的禁用状态。
+
+##### 准备工作
+
+###### 1.json文件存放位置
+
+![router](../assets/frontEndImg/jsonFolder.png)
+
+![router](../assets/frontEndImg/StaticBusiness.png)
+
+
+
+###### 2.获取实体类对应json
+
+![router](../assets/frontEndImg/getJSON.png)
+
+
+
+###### 3.生成json.js
+
+![router](../assets/frontEndImg/jsonJS.png)
+
+
+
+###### 4.生成html表单项
+
+用开发软件打开存放json的文件夹，在终端运行：
+
+```shell
+node index.js
+```
+
+![image-20230223092455001](../assets/frontEndImg/htmlForm.png)
+
+会生成对应的html表单项。
+
+*注：生成的表单项都为input，我们需要对照td上表数据的描述，将其改为对应的checkbox , select , date, currency ,amount,input，numeric。*
+
+
+
+###### 4.修改json文件存放位置中的ddl.js文件
+
+***（其中ddl.js是entity表的ddl语句，可从数据库工具中导出各自对应的表）***
+
+![image-20230223094934152](../assets/frontEndImg/ddlJS.png)
+
+
+
+###### 6.生成表单校验的pattern
+
+在终端运行：
+
+```shell
+node pattern.js
+```
+
+![image-20230223094439745](../assets/frontEndImg/patternJS.png)
+
+生成对应的表单校验对象。
+
+
+
+##### 开始开发
+
+###### 1.接口的定义
+
+参考src/service/test/zmqxrt.js
+
+![image-20230223105754348](../assets/frontEndImg/interface.png)
+
+
+
+###### 2.Infxxx(Ddlxxx)开发---查询页面
+
+*infxxx与dblxxx均是静态交易查询，仅仅知识命名方式不同，其他一致。*
+
+查询条件参考TD。Infsea.vue可直接复制过去修改。
+
+页面参考src/views/Statics/Dblzmq/index.vue、src/views/Statics/Dblzmq/Infsea.vue
+
+![image-20230223110018862](../assets/frontEndImg/infxxx.png)
+
+
+
+
+
+###### 3.Dbixxx开发---详情页面
+
+参考src/views/Statics/Dbizmqxrt/index.vue，可直接复制过去修改。
+
+表单form的model，来自于前面生成的json，校验rules来自前面生成的xx.pattern.js。
+
+注：
+
+1、 表单model的某些字段无需显示，像inr之类的，我们要去掉对应的标签代码；
+
+2、有些表单有多个entity构成，我们需要将对应的xx.pattern.js合到一起，注意
+
+<el-form-item label="xxx " prop="xxx">，prop要与rules中的属性对应；
+
+
+
+
+
+###### 4.Dbexxx开发---编辑页面
+
+页面复用Dbixxx，使用方式参考src/views/Statics/Dbezmq/index.vue。
+
+传入title、type两个props。
+
+![image-20230223134158695](../assets/frontEndImg/zmqEdit.png)
+
+
+
+
+
+
+
+###### 5.Dbaxxx开发---新增页面
+
+页面复用Dbixxx，使用方式参考src/views/Statics/Dbazmq/index.vue。
+
+传入title、type两个props。
+
+![image-20230223134353397](../assets/frontEndImg/zmqAdd.png)
+
+
+
+
+
+###### 6.Dbdxxx开发---删除页面
+
+页面复用Dbixxx，使用方式参考src/views/Statics/Dbdzmq/index.vue。
+
+传入title、type两个props。
+
+![image-20230223134605951](../assets/frontEndImg/zmqDel.png)
+
+
+
+#### 3.路由设置
+
+每一项的name值与对应vue组件的name属性相同。dbixxx、dbexxx、dbdxxx为动态路由。
+
+![image-20230223141147693](../assets/frontEndImg/routerSetting.png)
+

后端项目开发/后端项目下载运行.md

-## 后端项目下载运行
+## 后端项目下载运行
@@ -6,7 +6,7 @@
 
 #### 项目下载
 
- 使用git命令拉取gitlab上的后端工程
+使用git命令拉取gitlab上的后端工程
 
 后端工程(gjjs-common)地址：http://114.115.138.98:8900/fukai/gjjs-common.git       
 
@@ -141,11 +141,6 @@ mirrors元素中配置如下
 
 ![](../assets/images/backendinstall1.png)
 
-贴张图供大家理解
-
-com.ceb.gjjs.mda包下
-![](../assets/images/hdmljg1.png)
-
 bd模型转换做完再到后端工程，如果都是老交易此时再编译项目可以正常编译通过（如果有新增交易，则需要进行相应报错代码的修改，因为bd模型工具转换成java代码后编译层面有一些无法解决的错误需要开发人员手工去改bd源码，后面开发操作指引文档会做详细说明）
 ![](../assets/images/backendinstall2.png)
 

后端项目开发/后端项目开发文档.md

+## 后端项目开发文档
+## 后端项目开发文档
+
+### 模型转换代码结构介绍(gjjs-business)
+***视频说明***
+http://114.115.138.98:9497/gjjs-book/assets/videos/rear-end-file.mp4
+
+com.brilliance.mda包下
+
+开发人员手写代码，包含了注解、引擎类、核心接口、码表、工具类等内容，对于td函数的翻译位于com.brilliance.mda.runtime.mda.util包下的MdaUtils和MdaUtilsEx两个类。
+
+com.ceb.gjjs.mda包下
+![](../assets/images/hdmljg1.png)
+
+### 配置文件说明
+
+| codeTable        | 码表，select中的可选项                          |
+| ---------------- | ----------------------------------------------- |
+| defaultRule      | 某些情况下数据字段改变触发相关default方法的码表 |
+| i18n             | 提示信息码表                                    |
+| mapper           | 获取数据库码表信息相关的mapper                  |
+| META-INF/orm/mda | Bo实体类对应的mapper                            |
+| moduleInfo       | Bo实体类对应的数据库配置信息                    |
+| template         | 用户面函中相关PDF生成的模板                     |
+| application.yml  | 应用程序配置信息                                |
+
+### Spring/Mybatis运行时开发介绍
+
+#### SpringMVC简介
+SpringMVC就是一个Spring内置的MVC框架。 
+MVC框架，它解决WEB开发中常见的问题(参数接收、文件上传、表单验证、国际化等等)，而且使用简单，与Spring无缝集成。支持 RESTful风格的URL请求。
+MVC是一种软件架构的思想，将软件按照模型、视图、控制器来划分
+
+```
+M：Model，模型层，指工程中的JavaBean，作用是处理数据
+V：View，视图层，指工程中的html或jsp等页面，作用是与用户进行交互，展示数据
+C：Controller，控制层，指工程中的servlet，作用是接收请求和响应浏览器
+```
+
+#### mybatis简介
+
+MyBatis 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射,MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型为数据库中的记录。
+
+#### 项目相关依赖
+
+在gjjs-business模块下的pom.xml文件中引入相关依赖
+
+![dependency](../assets/images/dependency.png)
+
+**注意：**新增依赖需要在gjjs-common项目的pom.xml中指定依赖版本
+
+![dependencyManagement](../assets/images/dependencyManagement.png)
+
+### 模型转换开发步骤
+
+#### 1.使用BD工具生成后端代码
+
+打开bd工具勾选需要转换的交易后，点击Compile & Deploy编译。
+
+**注意：**第一次使用需要参考模型转换工具使用教程对bd工具进行配置。
+
+![compile](../assets/images/compile.png)
+
+2.将生成的VO复制到gjjs-common工程下并覆盖原有的文件。
+
+![vo](../assets/images/vo1.png)
+
+
+
+![vo2](../assets/images/vo2.png)
+
+#### 2.将生成的前端代码复制到vue-gjjs项目中
+
+gjjs-bdproject/build/VueSpring/front/frontProject/views/Business目录下交易名的文件夹
+
+![vue1](../assets/images/vue1.png)
+
+gjjs-bdproject/build/VueSpring/front/frontProject/model目录下交易名的文件夹
+
+![vue2](../assets/images/vue2.png)
+
+复制到vue-gjjs/src/views/Business目录下
+
+![vue3](../assets/images/vue3.png)
+
+复制到vue-gjjs/src/model目录下
+
+![vue4](../assets/images/vue4.png)
+
+修改路由配置文件BusRouter.js，添加新增交易配置。
+
+![busRouter](../assets/images/busRouter.png)
+
+**注意：**后续前端页面开发工作参照前端开发文档资料。
+
+#### 3.修改菜单配置文件
+
+修改gjjs-common/workroot/INI目录下后缀为.dof的配置文件
+
+具体哪一个配置文件需要根据新增交易的入口交易确定
+
+![image-20230223160003227](C:/Users/17617/AppData/Roaming/Typora/typora-user-images/image-20230223160003227.png)
+
+在SUBMENU-FILE-1这一列后面新增交易入口
+
+同时修改本地的rootPath（修改内容同上）
+
+![image-20230223160907200](C:/Users/17617/AppData/Roaming/Typora/typora-user-images/image-20230223160907200.png)
+
+#### 4.进入交易页面
+
+运行Bt2poinnewApplication启动后端
+
+![backendrun0](../assets/images/backendrun0.png)
+
+运行前端vue项目
+
+![front](D:\IdeaProjects\gjjs-course\assets\images\front.png)
+

后端项目开发/后端项目整体介绍.md

+## 后端项目整体介绍
+## 后端项目整体介绍
+
+#### 项目结构介绍
+
+gjjs-business模块文件结构
+
+![backenddev1](../assets/images/backenddev1.png)
+
+
+#### 项目流程介绍
+
+##### 1.请求流程
+
+![image-20210918165941920](../assets/images/gjjs-common2.png)
+
+
+
+
+
+##### 2.Service与Rule如何调用
+
+1）AbstractRouteService是service层最上层抽象类，对一些基本公共方法(init、executeRule、executeDefault等，这些方法基本每个交易都会去调用)做了实现，保证执行流程的统一，通过getEmitter这个抽象方法来实现多态（子类通过实现这个方法来处理不同业务逻辑，不用去关心具体的执行流程）
+
+2）AbstractCommonProcess是service层二级抽象类，对一些非公共方法(某个交易需要的方法，例如ditopn相关的executeDocpan方法、Trnrel交易相关的reJrow方法)做了实现
+
+3）具体交易service通过接口向resource层暴露服务，这里用ICommonService将常用公共接口方法做了封装，具体交易service不再进行业务方法的实现(已在抽象类进行了实现)，只是持有自己交易对应的emitter实例，实现getEmitter方法
+
+4）AbstractRuleEmitter是emitter的抽象父类，对基本公共方法(executeRule、executeDefault等)做了实现，交易emitter实现executeInit方法，并对一系列rule按照执行顺序做了封装，根据rule名字缓存到map里，通过反射去调用对应的方法
+
+5）**在一次请求中可以调用多个交易service所对应的方法**，比如暂存恢复功能，先去执行Sptsel交易的getPendingData方法，然后再去调用ditopn交易的init方法，在去掉ditopn init方法之前，拿到SptselService实例，然后去执行getPendingData方法，如图：
+
+![](../assets/images/hdservicerule1.png)
+
+##### 3.Emitter的方法分类
+
+RuleEmitter大概有4类方法，分别是
+
+executeInit(一个交易加载初始化时调用)
+
+executeRule（event rule）
+
+executeDefault （default rule）
+
+executeCheck (参数、数据校验类rule)
+
+##### 4.消息体格式说明
+
+###### 	请求消息体
+
+请求消息体是一个json格式数据，数据格式形如
+![](../assets/images/qqxxt2.png)
+
+```json
+{
+    "didgrp_rec_ownref": "",
+    "mtabut_coninf_conexedat": "",
+    "pageId": "c39e4675-1cc0-4169-bcf6-e6f8d659e4ff",
+    "params": {}
+}
+```
+
+对应后端VO实体类说明(以com.ceb.gjjs.mda.vo.DitopnVO为例)：	
+
+![请求实体类](../assets/images/请求实体类.png)
+
+###### 	响应消息体
+
+响应消息体是一个json格式数据
+结果成功响应数据格式形如
+![](../assets/images/xyxxt1.png)
+
+```json
+{
+    "respCode": "AAAAAA",
+    "respMsg": "操作成功！",
+    "fieldErrors": {},
+    "data": {
+        "params": {},
+        "pageId": "c39e4675-1cc0-4169-bcf6-e6f8d659e4ff",
+        "didgrp_rec_conno": "",
+        "didgrp_rec_dkflg": "N"
+    }
+}
+```
+ 结果失败响应数据格式形如
+ ![](../assets/images/xyxxt2.png)
+
+```json
+{
+    "respCode": "500",
+    "respMsg": "Rule执行异常",
+    "fieldErrors": null,
+    "data": null
+}
+```
+
+响应结果封装类：com.brilliance.mda.runtime.response.ResponseSet
+
+![响应消息体](../assets/images/响应消息体.png)
+
+
+
+
+##### 5.VO的规范
+
+VO类是前后端数据请求和响应的实体类，VO有一个共同父类VO（BaseVO），字段说明如下：
+
+![](../assets/images/qqxxt4.png)
+
+VO按照交易进行划分，一个交易对应一个VO（比如信用证开证交易对应VO是DitopnVO）,VO类使用了lombok插件，不需要set get方法，字段用RelPath注解区分是请求字段还是响应字段（默认没有注解，代表dir属性值是DirType.BOTH,及请求和响应都需要该字段；如果只是请求字段，dir属性值是DirType.IN；如果是相应字段，dir属性值是DirType.OUT）,如图：
+![](../assets/images/vogf1.png)
+
+##### 6.前后台事件关联方式
+
+###### 调用普通Module下事件
+
+例如：
+
+(1) ditopn交易中点击账务面板时，需要触发账务面板的点击事件，该事件对应（Module）setmod下的setpan事件。可用以下方式调用:
+
+```vue
+let rule = "setmod.setpan";
+let rtnmsg = await this.executeRule(rule)
+if (rtnmsg.respCode == SUCCESS) {
+    //处理响应
+}
+```
+
+(2) 同样的，账务面板中的”细节”按钮,对应（Module）setmod中的det事件。使用··``` await this.executeRule(“setmod.det”)```方式调用。
+
+###### 调用ModuleList选中行事件
+
+例如：账务 Own Commission/Charges 列表，对应模型setmod/setfeg/setfel（ModuleList）。每行数据对应ModuleList中的一个setfel实例。
+
+![](../assets/images/setfel.png)
+
+前后台对应关系：
+
+|                  前台：                   |                      VO                      |        Module        |
+| :---------------------------------------: | :------------------------------------------: | :------------------: |
+| Setpan.Vue:账务Own Commission/Charges列表 | DitopnVO：List<Setfel> setmod_setfeg_setfel; | setmod/setfeg/setfel |
+
+Details按钮在后台对应的事件rule 为”del”，当按钮被点击时，应当通过以下方式触发相应事件：
+
+```js
+const idx = rowno+1; //rowno为选中行
+let rule = "setmod.setfeg.setfel("+idx+").det";
+let rtnmsg = await this.executeRule(rule)
+if (rtnmsg.respCode == SUCCESS) {
+    //处理响应
+}
+```
+
+###### 事件在普通模型下，但实际处理ModuleList选中行
+
+例如：保证金模块中的保证金列表。对应数据模型为：（ModuleList）liaall/liaccv/liaccvg ；但删除操作按钮的对应事件是在（Module）liaall/liaccv模型下的del
+
+![](../assets/images/delete.png)
+
+|   前台：   |                      VO                       |        Module         |
+| :--------: | :-------------------------------------------: | :-------------------: |
+| Ccvpan.vue | DitopnVO：List<Setfel> liaall_liaccv_liaccvg; | liaall/liaccv/liaccvg |
+
+删除按钮事件调用方式：
+
+```js
+const selIds = [rowno+1]; //rowno选中行索引，多行选中时通过数组传递多个索引
+const selDst = "liaall.liaccv.liaccvg" //列表对应后台模型中的ModuleList
+let params = {selDst:selDst,selIds: selIds};
+let rtnmsg = await this.executeRule("liaall.liaccv.del",params)
+if (rtnmsg.respCode == SUCCESS) {
+    //处理响应
+}
+```
+
+###### 事件在普通模型下，但实际处理IStream选中行
+
+此种情况参考"ModuleList选中行"的处理，只需把selDst的值指向IStream即可。
+