前端教案提交

前端项目开发/前端开发组件介绍.md

+# 公共面板
+# 公共面板
+
+    路径：vue-gjjs/src/views/Public
+
+## 1、公共面板
+
+### 1.引入
+
+    部分面板在许多交易中出现，已提为公共页面，路径：vue-gjjs/src/views/public
+    例如：Detopn中的账务、附言、报文及面函、统一授信
+
+![](../assets/frontEndImg/publicPanel.png)
+
+    例如："账务" 可通过以下方式引入
+    1、import Setpan from "~/views/Public/Setpan";
+    2、在components中添加："m-setpan": Setpan
+    3、使用
+        <el-tab-pane label="费用及账务" name="setpan">
+            <c-content>
+            <m-setpan :model="model" :codes="codes" />.
+            </c-content>
+        </el-tab-pane>
+    4、其他公共页面引入方式类似 
+
+### 2、补充额外字段
+
+##### 1、面函
+
+    后端：
+        1)在对应的实体类中，如ditopn.class，找到注释为：//XMLPanel ...的内置block（可能存在多个）
+          的字段，在Vo和前端model中补充相应字段
+        2)Vo中额外补充：
+            @SimpleType(type = SimpleDoceot.class)
+            private List<SimpleDoceot> trnmod_trndoc_doceot;
+    前端：
+        对应面板：docpan
+        在对应的index.js中将trnmod属性改为：trnmod: new Pub().data.Trnmod,
+
+
+##### 2、账务
+
+    后端：
+        1)Vo中额外补充：
+            private String setmod_msgmod_docpth;@SimpleType(type = SimpleSetfol.class)
+            private List<SimpleSetfol> setmod_setfog_setfol;
+            
+            @SimpleType(type = SimpleSetfel.class)
+            private List<SimpleSetfel> setmod_setfeg_setfel;
+            
+            @SimpleType(type = SimpleSetgll.class)
+            private List<SimpleSetgll> setmod_setglg_setgll;
+    前端：
+        对应面板：setpan
+        在对应的index.js中将setmod属性改为：setmod: new Pub().data.Setmod,
+
+##### 3、表外/或有
+
+    后端：
+        1)Vo中额外补充：
+            @SimpleType(type = SimpleLiaccvg.class)
+            private List<SimpleLiaccvg> liaall_liaccv_liaccvg;
+            
+            @SimpleType(type = SimpleLiaallg.class)
+            private List<SimpleLiaallg> liaall_liaallg;
+    
+            @RelPath(value="",dir=DirType.OUT)
+            private IStream liaall_liaccv_stgstm;
+    前端：
+        对应面板：engp
+        在对应的index.js中将liaall属性改为：liaall: new Pub().data.Liaall,
+
+##### 4、分录
+
+    后端：
+        1)Vo中额外补充：
+            @RelPath(value="",dir=DirType.OUT)
+            private IStream setmod_glemod_gleshwstm;
+    前端：
+        对应面板：glepan
+        在对应的index.js中将setmod属性改为：setmod: new Pub().data.Setmod,
+
+##### 5、保证金
+
+    前端：
+        对应面板：ccvpan
+
+##### 6、附言
+
+    后端：
+        1)Vo中额外补充：
+            @RelPath(value="",dir=DirType.BOTH)
+            @JsonDeserialize(using=IStreamDeSerialized.class)
+            private IStream mtabut_coninf_oitinf_oit_inftxt;
+    
+            @RelPath(value="",dir=DirType.BOTH)
+            @JsonDeserialize(using=IStreamDeSerialized.class)
+            private IStream mtabut_coninf_oitset_oit_inftxt;
+    前端：
+        对应面板：coninfp
+        在对应的index.js中将mtabut属性改为：mtabut: new Pub().data.Mtabut,
+
+##### 7、授信额度
+
+    前端：
+        对应面板：limitbody
+        在对应的index.js中将liaall属性改为：liaall: new Pub().data.Liaall,
+
+##### 8、附件
+
+    前端：
+        对应面板：doctre
+        在对应的index.js中将trnmod属性改为：trnmod: new Pub().data.Trnmod,
+
+## 2、面板内模板引用
+
+    仅列举部分，其余可查看vue-gjjs/src/views/Public内的公共模板
+
+### 1、例如detopn/ovwp中的受益人引用了ptap模板
+
+![](../assets/frontEndImg/detopnCommonPtap.png)
+
+    1、此模块已提取为公共模块，导入：import Ptap from "~/views/Public/Ptap";
+    2、在components中添加："c-ptap": Ptap
+    3、使用：
+        <c-col :span="24">
+            <c-ptap
+              :model="model"
+              :argadr="{
+                title: '受益人',
+                grp: 'dedgrp',
+                rol: 'ben',
+              }"
+              :disabled="true"
+              :isAdrblk="false"
+            >
+            </c-ptap>
+        </c-col>
+
+### 2、表格公共模板
+
+请参照*[表格公共模板](../../../../../../assets/images/03-新国结产品开发/pdf/表格公共模板.pdf)
+![](../assets/frontEndImg/docpre.jpg)
+