Skip to content

G
gjjs-course
Commit 6f0054cd by 郭旭
Options

Merge remote-tracking branch 'origin/master'

parents 64228025 87b891e3
Showing with 943 additions and 1 deletions
前端项目开发/前端开发组件介绍.md
# 公共面板
# 公共面板
......@@ -154,3 +154,945 @@
#### ![img](../assets/frontEndImg/trnrelNewPanel.png)2、在 "Review/ReviewRouter.js" 配置相应路由
#### ![img](../assets/frontEndImg/trnrelRouter.png) 3、在对应交易的 "index.vuw" 页面初始化后加入读取快照操作 ![img](../assets/frontEndImg/trnrelDisplay.png)
## 4、开发规范说明
### 1.交易录入
#### 入口文件
每个交易的入口文件都是其文件夹下的 index.vue。src/views/Bussiness/交易代码/index.vue
![img](../assets/frontEndImg/交易录入_入口文件.jpg)
### 2.页面布局排版
#### 大体结构
![img](../assets/frontEndImg/交易录入_页面大体结构.png)
![img](../assets/frontEndImg/交易录入_组件结构.png)
每个标签页tab下的内容，建议都加上 eibs-tab 的class样式，统一间距。若使用折叠面板，则折叠面板内的所有页面使用 eibs 的class样式。
![img](file:///G:/XinChen/gjjs/gjjs-lessons/assets/images/03-%E6%96%B0%E5%9B%BD%E7%BB%93%E4%BA%A7%E5%93%81%E5%BC%80%E5%8F%91/image/%E5%89%8D%E7%AB%AF%E8%A7%84%E8%8C%83/%E4%BA%A4%E6%98%93%E5%BD%95%E5%85%A5_%E6%A0%87%E7%AD%BE%E9%A1%B5%E5%86%85%E5%AE%B9%E5%B8%83%E5%B1%80.png) ![img](../assets/frontEndImg/交易录入_标签页内容布局_1.png)
### 3.内容格式
每个tab页面为左右布局，若一行只有一个，那就全部占满；若一行有多个，则自行控制每个的宽度，但需要保证该行与其他行是右对齐的。 ![img](../assets/frontEndImg/交易录入_标签页内容格式_1.png) ![img](../assets/frontEndImg/交易录入_标签页内容格式.png)
### 4.查询页
#### 查询页整体布局
查询页布局以汇款查询(Infcpd)为例，如下图所示，主入口组件为Infcpd下的index.vue，查询页面为infsea.vue组件，整体布局分为三部分，查询条件、按钮区和查询表格，下面对这三部分进行详细说明。
![img](../assets/frontEndImg/searchpage1.png)
#### 查询条件
查询条件整体为一个form表单，代码如下所示，其他查询条件的表单基本都是采用这个规范，label为右对齐，宽度度110px，表单样式一般写在主入口组件(index.vue)中,主要约束了表单中组件的浮动方式，代码如下所示。
```vue
<el-form
class="m-table-search-form"
ref="paramsForm"
label-position="right"
label-width="110px"
size="small"
>
...
</el-form>
.m-table-search-form {
position: flex;
flex-direction: row;
}
.m-table-search-form .el-form-item__content {
width: calc(100% - 110px);
}
```
表单内为栅格布局，每行分为三列，每列的span值为8，查询条件超过三行时设置收起展开功能，默认为收起状态，不超过三行时不用设置此功能，如下图所示。通过点击展开或收起按钮改变可控展示区v-show的布尔值来实现可控展示区的显示和隐藏，一般把业务编号和查询起止时间这两个最常用的条件放在第一行的前两列，把较为常用放在第三列，在不展开状态下方便查询。
![img](../assets/frontEndImg/fold.png)
![img](../assets/frontEndImg/unfold.png)
点击按钮修改searchToggle的值 ，通过标识位和v-show控制 可控展示区的展示与隐藏
```vue
<el-button type="text" @click="searchToggle = false">
展开
<i class="el-icon-arrow-down"></i>
</el-button>
<el-button type="text" @click="searchToggle = true">
收起
<i class="el-icon-arrow-up"></i>
</el-button>
<c-row v-show="!searchToggle">
...........
</c-row>
```
#### 按钮区
查询条件下面的按钮区布局如下图所示，一般交易入口按钮放置在左侧，操作按钮放置在右侧。
![img](../assets/frontEndImg/searchpagebutton.png)
按钮区的按钮为交易入口按钮，按钮的尺寸比查询条件中的查询按钮尺寸要大一些，和查询列表左侧对齐
```vue
<c-col style="margin-top: 10px">
<c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0"
@click="toCptopn">swift汇入</c-button
>
<c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0"
@click="toCptadv">swift汇出</c-button
>
<c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0"
>境内外币汇入</c-button
>
<c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0"
>境内外币汇出</c-button
>
<c-button class="medium_bcs" size="medium" type="primary" style="float:right;margin-right:10px;"
>导Excel</c-button
>
</c-col>
<style>
.el-dialog__body {
padding: 10px 5px 50px;
}
</style>
```
#### 查询表格
下方的表格显示查询结果的数据，后端查询返回的是IStream类型数据，前端使用全局组件IStreamTable对返回值处理，代码如下所示。其中表头数据从父组件的data里的stmData.columns传入，子组件通过props接收columns，表格数据从父组件的data里的stmData.data传入，子组件通过props接收list，
```vue
<c-istream-table :list="stmData.data" :columns="stmData.columns" :showButtonFlg="true">
...
</c-istream-table>
```
showButtonFlg是控制显示自定义列属性弹窗的齿轮按钮，默认为false不显示，需要此功能时设置为true，可自定义表格中各列。点击齿轮按钮后弹出面板，通过勾选需要显示的列进行自定义列属性
![image20220214151019438](../assets/frontEndImg/20220214151019438.png)
表头数据通过数组传入IStreamTable组件中，代码如下所示。数组中有字符串和对象两种类型数据，
1、一般使用字符串类型，以'12 3 "PYE NO." 100 '为例，3表示表格第三列，"PYE NO."表示列名，100表示列宽，而12表示本列存放的数据在后台返回的IStream的索引，即以/t为分隔从0开始，索引为12的数据存放在本列，数据与列的对应关系参照td。
2、数组中的对象类型是实现对存入的数据进行处理，以'{index: 3,position: 15,width: 100,pattern: "date",label: "Opened",},'为例，pattern为date，是去掉日期的时分秒毫秒保留年月日的处理方法，还有查出的数据在td上对应码表的值，pattern设为"code"，code可对数据进行码表映射。其他常用处理方法也都封装在IStreamTable里，只需设置对应的pattern即可。
```vue
stmData: {
columns: [
'1 1 "Reference" 150 ',
'2 2 "Resp. User" 100 ',
'12 3 "PYE NO." 100 ',
'9 4 "Payee.Party Number" 150',
'10 5 "Payee Customer" 250',
'11 6 "PYE.Customer CN" 130',
'13 7 "Ord.Party Number" 150',
'14 8 "Ord.Customer" 250',
'15 9 "Ord.Customer CN" 130',
'16 10 "1.Party Number" 150',
'17 11 "Ord.Institution" 200',
'12 12 "ORC NO." 150',
'18 13 "2.Party Number" 150',
'19 14 "Paying Bank" 150',
//'3 15 "Opened" 140',
{index: 3,position: 15,width: 100,pattern: "date",label: "Opened",},
//'4 16 "Value" 140',
{index: 4,position: 16,width: 100,pattern: "date",label: "Value",},
//'5 17 "Closed" 140',
{index: 5,position: 17,width: 100,pattern: "date",label: "Closed",},
'20 18 "1.Cur" 80',
'22 19 "2.Cur" 80',
'21 20 "Paym.Amount" 120',
'23 21 "Amount rcvd." 120',
'6 22 "Pyectycod" 100',
'7 23 "Orcctycod" 100',
],
data: [],
},
```
#### 操作按钮
操作按钮的个数根据实际业务设置，以infcpd为例，操作有两个按钮，【详情】和【处理】
点击【详情】按钮后弹出历史信息列表(其中包含另一个【详情】按钮)，非业务按钮，白底
![image20220214162113742](../assets/frontEndImg/20220214162113742.png)
点击【处理】按钮会弹出交易的后续可操作的业务按钮，业务按钮，蓝底 type="primary"
![image20220214162145836](../assets/frontEndImg/20220214162145836.png)
```vue
<c-istream-table :list="stmData.data" :columns="stmData.columns" :showButtonFlg="true">
<el-table-column fixed="right" prop="op" label="操作" width="140px">
<template slot-scope="scope">
<el-popover
placement="top-start"
title="历史信息"
width="800"
trigger="click"
:ref="'popover_' + scope.row.IDX"
>
<div
style="
text-align: right;
margin-top: -30px;
margin-right: 5px;
font-size: 16px;
"
>
<span
class="el-icon-close"
@click="closeTrn('popover_' + scope.row.IDX)"
/>
</div>
<c-istream-table :list="trnData.data" :columns="trnData.columns">
<el-table-column prop="op" label="操作" width="0">
<template slot-scope="scope">
<c-button
style="margin-left: 0"
size="small"
@click="display(scope.$index, scope.row)"
>
详情
</c-button>
</template>
</el-table-column>
</c-istream-table>
<c-button
style="margin-left: 0"
size="small"
@click="getTrnInfo(scope.$index, scope.row)"
slot="reference"
>
详情
</c-button>
</el-popover>
<c-button
style="margin-left: 0"
size="small"
type="primary"
@click="getButtons(scope.row['Reference'])"
>
处理
</c-button>
</template>
</el-table-column>
</c-istream-table>
```
## 5、界面组件规范
```
路径：vue-gjjs/src/components
```
自定义组件里有很大一部分是对Element-UI组件的包装（[组件 | Element](https://element.eleme.cn/#/zh-CN/component/installation)）
### 1.Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。https://element.eleme.cn/#/zh-CN/component/layout
#### c-row
行布局
| 属性 | 说明 | 默认值 |
| ------- | ------------------------------------- | ------ |
| gutter | 栅格间隔 | 0 |
| type | 布局模式，可选 flex，现代浏览器下有效 | |
| justify | flex 布局下的水平排列方式 | start |
| align | flex 布局下的垂直排列方式 | |
```vue
<c-row>
<!-- 摘要 -->
<c-col :span="24">
<el-form-item label="Name" prop="bpdgrp.rec.pntnam">
<c-input
v-model="model.bpdgrp.rec.pntnam"
maxlength="40"
style="width:90%"
placeholder="请输入摘要"
></c-input>
</el-form-item>
</c-col>
</c-row>
```
#### c-col
列布局
| 属性 | 说明 | 默认值 |
| ------ | ------------------------------ | ------ |
| span | 栅格占据的列数，24表示全部占满 | 24 |
| offset | 栅格左侧的间隔格数 | 0 |
| push | 栅格向右移动格数 | 0 |
| pull | 栅格向左移动格数 | 0 |
示例：
```vue
<c-col :span="11" :offset="1">
<el-form-item label="摘要" prop="didgrp.rec.nam">
<c-input
align="middle"
v-model="model.didgrp.rec.nam"
maxlength="40"
disabled
placeholder="请输入Externally Displayed Name to Identify the Contract"
></c-input>
</el-form-item>
</c-col>
```
### 2.表单项：c-form-item
对表单里面的表单项做了一层封装，用于统一处理表单项里的 i18n 转换以及交易在复核页面时表单项点击高亮的操作。
示例：
```vue
<c-form-item label="邮编" prop="didgrp.apl.pts.youzbm">
<c-input
v-model="model.didgrp.apl.pts.youzbm"
maxlength="6"
placeholder="请输入邮编"
></c-input>
</c-form-item>
previewLabel 用于在复核时标注的显示
<c-form-item
previewLabel="信用证金额"
style="text-align: left;"
label-width="5px"
prop="didgrp.cbs.nom1.amt"
>
<c-input-currency
v-model="model.didgrp.cbs.nom1.amt"
placeholder="请输入信用证金额"
@keyup.enter.native="defaultFunction('didgrp.cbs.nom1.amt', model.didgrp.cbs.nom1.amt)"
></c-input-currency>
</c-form-item>
```
### 3.Tabs标签页
分隔内容上有关联但属于不同类别的数据集合。详细配置参见 https://element.eleme.cn/#/zh-CN/component/tabs
示例：
```vue
<c-tabs :value="tabVal" ref="elment" type="card" @tab-click="tabClick">
<el-tab-pane label="其他当事人" name="detp1">
<!--PD000452 -->
<c-content>
<m-detp1 :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<el-tab-pane label="详细信息" name="detp">
<!--PD000077 -->
<m-detp :model="model" :codes="codes" />
</el-tab-pane>
</c-tabs>
```
### 4.滚动条
在页面上添加滚动条，使用 c-content 组件，有个height属性，默认是250
height：指的是页面document的高度与自身dom元素高度的差值。
示例：
```vue
<c-content :height="300">
<m-ovwp :model="model" :codes="codes" />
</c-content>
```
### 5.文本输入框
示例：
```vue
<c-input
v-model="model.cpdgrp.rec.othbch"
maxlength="8"
placeholder="请输入所属行">
</c-input>
```
### 6.文本域框
在c-input 组件添加type="textarea" 属性
示例：
```vue
<c-input
type="textarea"
v-model="model.mtabut.coninf.oitinf.oit.inftxt"
maxlength="60"
show-word-limit
placeholder="请输入Infotext" >
</c-input>
```
### 7.金额输入框
在c-input 组件添加class="m-input-currency" 样式，会限定保留三位小数，靠右显示。 示例：
```vue
<c-input
class="m-input-currency"
v-model="model.cpdgrp.cbs.nom1.amt"
style="text-align: left; width: 100%"
placeholder="请输入汇款金额"
@change="commonExecuteNotify()">
</c-input>
```
常用：1、非负金额输入框：用c-inpu-currency标签，只能输入非负数，会自动限定保留两位小数，靠右显示。 示例：
```vue
<c-col :span="12">
<el-form-item label="" prop="trnmod.swiadd.newamt">
<c-input-currency
v-model="model.trnmod.swiadd.newamt"
placeholder="请输入修改后金额"
></c-input-currency>
</el-form-item>
</c-col>
```
因c-input-currency标签限定了非负及保留两位小数，故在pattern.js中此字段
```html
{type: "string", required: false, message: "必输项"},
{max: 18,message:"整数位不能超过14位"},
{pattern: /(^\d+$)|(^\.\d{1,3}$)|(^\d+\.\d{1,3}$)/, message: "小数位不能超过3位" }`
```
应调为整：
```html
{type: "string", required: false, message: "必输项"},
{max: 17,message:"整数位不能超过14位"}`
```
常用： 2、正负金额输入框：用c-input-currency-min标签，正负及0都可输，会自动限定保留两位小数，靠右显示。 示例：
```vue
<c-col :span="12">
<el-form-item label="" prop="trnmod.swiadd.ameamt">
<c-input-currency-min
v-model="model.trnmod.swiadd.ameamt"
placeholder="请输入增减金额."
></c-input-currency-min>
</el-form-item>
</c-col>
```
### 8.按钮
```vue
<c-button
style="margin: 0 10px 0 10px; padding: 0 12px; height: 32px"
size="small"
type="primary"
@click="onSeainf"
icon="el-icon-search"
>
</c-button>
```
### 9.单选框
示例：
```vue
<c-radio v-model="params.partInoutCrClrFlag" label="2">SWIFT</c-radio>
```
### 10.多选框
示例：
```vue
<c-checkbox v-model="model.bcdgrp.rec.focflg">Free of Payment</c-checkbox>
```
由于TD中的多选框常使用X、Y、C等值来表示勾选状态，对应的""、O等值来表示未勾选状态，而checkbox中默认绑定变量的值会是Boolean，选中为true，未选为false,因此需要通过computed计算属性来实现勾选状态。
```vue
computed:{
colinsflg:{
get(){
return this.model.bodgrp.blk.colinsflg === "X";
},
set(val){
this.model.bodgrp.blk.colinsflg=val ? "X":"";
},
},
}
```
### 11.日期选择框
使用c-date-picker，之前有用el-date-picker需要改成c-date-picker，el-date-picker会造成传到后台日期不准确。
示例：
```vue
<c-date-picker
type="date"
v-model="model.didgrp.rec.opndat"
value-format="yyyy-MM-dd"
placeholder="请选择Date"
style="width:100%">
</c-date-picker>
```
### 12.下拉选择框
#### 使用静态码表
index.vue父组件data里的codes:{...CodeTable}传入，子组件通过props: [ "codes"]接收。
```vue
<c-select
v-model="model.didgrp.rec.guaflg"
style="width: 100%"
placeholder="请选择货押标识"
>
<el-option
v-for="item in codes.guaflg"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</c-select>
```
或者简写成：
常用：
```vue
<c-select
v-model="model.didgrp.rec.guaflg"
style="width: 100%"
placeholder="请选择货押标识"
:code="codes.guaflg">
</c-select>
```
#### 使用动态码表：使用后台setvalues/setCodeValues传送
写成:code="getValues(key,tableName)"形式，（切记，该字段一定要在后端JAVA vo中存在，例如示例中的btdgrp.rec.docprbrolbe1）
key：为后端传来的CodeSet的字段，如btdgrp.rec.docprbrolbe1。
tableName：src下的全局静态码表中的码表名称，如rolall
如后端传来的CodeSet下该字段值为"value+lable"，则不用传参数tableName 如后端传来的CodeSet下该字段值仅有"value"，则需传参数tableName，以便去全局静态码表中找到相应码表，根据value值找到lable值
```vue
<c-col :span="24">
<el-form-item label="收款人" prop="btdgrp.rec.docprbrolbe1">
<c-select
v-model="model.btdgrp.rec.docprbrolbe1"
style="width: 100%"
placeholder="请选择收款人"
:code="getValues('btdgrp.rec.docprbrolbe1', 'rolall')"
@change="selectOrCheckboxRule('btdgrp.rec.docprbrolbe1')"
></c-select>
</el-form-item>
</c-col>
```
### 13.FunctionBtn
通用的方法按钮组，内置交易开证的提交、检核、暂存、退出这4个按钮，还可自行添加其他的事件按钮显示在右边。
示例：
```vue
<c-function-btn
:handleSubmit="handleSubmit"
:handleCheck="handleCheck"
:handleStash="handleStash"
>
</c-function-btn>
```
![img](../assets/frontEndImg/function-button_1.png)
### 14.FullBox
用于表单项的布局排版，将容器内的组件对齐排列。多用于FormItem内部
示例：
```vue
<el-form-item
label="所属客户经理"
prop="ditp.usr.extkey"
style="width: 100%"
>
<c-fullbox>
<c-input
v-model="model.ditp.usr.extkey"
maxlength="8"
placeholder="请输入User ID"
disabled
></c-input>
<template slot="footer">
<c-button
style="margin-left:10px;padding: 0 10px;"
size="small"
icon="el-icon-search"
type="primary"
@click="onExtkey"
></c-button>
</template>
</c-fullbox>
</el-form-item>
```
![FullBox](../assets/frontEndImg/full-box_1.png)
### 15.streamtable
最简单形式：
```vue
<c-istream-table
:list="trnData.data"
:columns="trnData.columns"
>
</c-istream-table>
```
如果列表后有操作项，则添加el-table-column标签
```vue
<c-istream-table
:list="trnData.data"
:columns="trnData.columns"
>
<el-table-column prop="op" label="操作" width="0">
<template slot-scope="scope">
<c-button
style="margin-left: 0"
size="small"
@click="display(scope.$index, scope.row)"
>
详情
</c-button>
</template>
</el-table-column>
</c-istream-table>
```
streamtable目前日期格式化处理和码值展示描述信息，例如:
```vue
trnData: {
columns: [
'1 1 "编号" 200',
'2 2 "交易名称" 120',
{index:3,position:3,width:110,pattern:'date',label:'日期'},
{index:4,position:4,width:100,pattern:'code',label:'状态',code:this.codes.relstaEN},
'5 5 "币种" 80',
'6 6 "金额" 110',
],
data: [],
},
```
上面在定义columns时日期和状态字段
index：表示后台返回数据在stream中的索引 ，以'/t'分隔 ，从0开始
position：在table中展示的列
width： 字段宽度
pattern：转义的类型 date表示转义为日期类型
label：表头
code：pattern为code时，转为对应码表值
### 16.弹出回填组件
可以在文本框输入字符，然后回车弹出选项列表，双击选择某个选项后回填到父页面，例如，选择申请人、收益人、开户行、国家代码等
以信用证开立其他当事人页签选择通知行联行行号为例，输入303100，点击回车，然后双击一条记录，弹出框关闭，页面回填信息 ![img](../assets/frontEndImg/tckht0.png) ![img](../assets/frontEndImg/tckht2.png) ![img](../assets/frontEndImg/tckht3.png)
开发步骤：
1、先在交易index.vue，添加c-grid-ety-prompt-dialog标签 ![img](../assets/frontEndImg/tckht1.png)
```
<c-grid-ety-prompt-dialog ref="etyDialog" :promptData="promptData" v-on:select-ety="selectEty">
</c-grid-ety-prompt-dialog>
```
2、然后在c-input组件里添加@keyup.enter.native="showGridPromptDialog('xxx')"属性，xxx是该input框的model值
```vue
<c-input
v-model="model[argadr.grp][argadr.rol].pts.bankno"
maxlength="20"
:disabled="disabledBankno"
:placeholder="'请输入' + argadr.title + '联行行号'"
@keyup.enter.native="showGridPromptDialog(`${argadr.grp}.${argadr.rol}.pts.bankno`)"
>
</c-input>
```
3、整个过程：先通过c-input中的showGridPromptDialog 模糊查询出匹配的数据，数据在c-grid-ety-prompt-dialog展示，选择对应的数据后，调用selectEty，将选择的数据回填到关联的多个c-input中，如果模糊查询的数据只有一条将不会弹出选择框。
```vue
<c-input
v-model="model[argadr.grp][argadr.rol].pts.bankno"
maxlength="20"
:disabled="disabledBankno"
:placeholder="'请输入' + argadr.title + '联行行号'"
@keyup.enter.native="showGridPromptDialog(`${argadr.grp}.${argadr.rol}.pts.bankno`)"
>
</c-input>
<c-input
type="textarea"
:rows="2"
v-model="model[argadr.grp][argadr.rol].pts.jigomc"
maxlength="35"
show-word-limit
:placeholder="'请输入' + argadr.title + '联行名称'"
:disabled="disabledJigomc"
>
</c-input>
<c-input
type="textarea"
:rows="2"
v-model="model[argadr.grp][argadr.rol].pts.dizhii"
maxlength="35"
show-word-limit
:placeholder="'请输入' + argadr.title + '地址'"
disabled
>
</c-input>
```
### 17.文本回填组件
- ···
- ？
请参照*[文本回填组件](file:///G:/XinChen/gjjs/gjjs-lessons/assets/images/03-新国结产品开发/pdf/文本回填公共模板.pdf) ![img](../assets/frontEndImg/faeea-selectMsg.jpg)
### 18.ListSearch
多条件查询，条件项的收缩与展开。
![ListSearhClose](../assets/frontEndImg/list-search_1.png)
![ListSearhOpen](../assets/frontEndImg/list-search_2.png)
示例：
```vue
<c-list-search @form-reset="handleReset" @form-search="handleSearch">
<template v-slot="searchSlot">
<el-form
class="m-table-search-form"
ref="paramsForm"
:inline="true"
label-position="right"
label-width="110px"
size="small"
>
<el-row>
<c-col :span="24">
<c-col :span="8">
<el-form-item
label="Own Reference"
prop="infcon.seaownref"
style="width: 100%"
>
<c-input
v-model="model.infcon.seaownref"
maxlength="16"
placeholder="请输入Own Reference"
></c-input>
</el-form-item>
</c-col>
</c-col>
</el-row>
</el-form>
</template>
</c-list-search>
```
### 19.BusNavbar
在查询交易infsea.vue中引入，点击业务查询界面的数据列表中的【处理】按钮后，弹出的交易列表
![image20220214172133239](../assets/frontEndImg/20220214172133239.png)
交易按钮组件封装在src/views/Bussiness/查询业务交易代码/BusNavbar.vue中，ref="childs" 用于infsea调用子组件BusNavbar中的方法
```vue
<el-dialog :visible.sync="initdialog" :title="'交易列表'" append-to-body>
<div class="m-list-btns">
<m-busbtn ref="childs" :ownref="ownref" @onChoose="onChoose"
></m-busbtn
>
</div>
</el-dialog>
import BusNavbar from "~/views/Business/Infcpd/BusNavbar";
export default {
components: { "m-busbtn": BusNavbar },
}
```
点击【处理】按钮，调用getButtons方法，触发BusNavbar中方法加载业务按钮
```vue
getButtons(ownref){
this.initdialog = true
this.ownref = ownref
setTimeout(()=>{
//调用子组件中的方法
this.$refs.childs.$emit("childmethods")
},10)
},
```
先置空按钮数据，从后台加载按钮数据，根据业务需要筛选需要的按钮数据，
```vue
mounted(){
//加载交易按钮数据
this.$nextTick(function(){
this.$on('childmethods',async function(){
this.navcode = []
//请求按钮数据
this.model.cpdgrp.rec.ownref = this.ownref
//部分查询交易 ，可能需要执行多个rule才能获取到数据（如infbdd）
let rtnmsg = await this.executeRule("cpdgrp.rec.ownref");//didgrp_rec_ownref
if(rtnmsg.respCode == SUCCESS){
//重置数组
this.navcode = []
this.updateModel(rtnmsg.data)
//this.model.cfgfil.btnstm = rtnmsg.data.cfgfil_btnstm.rows
//给inr赋值,后面弹窗里面的按钮请求会用到
//this.model.didgrp.rec.inr = rtnmsg.data.didgrp_rec_inr
const length = this.model.cfgfil.btnstm.rows.length
let btnStr = this.model.cfgfil.btnstm.rows
//汇入汇款（包含payment）、汇出汇款（包含payment）、境内外币 已经在查询界面做成了入口按钮，这里不需要展示
//根据具体的业务需求 可对按钮进行过滤 、 排序等处理 、添加处理 等---------start
let m = 0;
for(let i=0; i < length; i++){
//获取数组中每行的数据
if(!( btnStr[i].indexOf("payment") >= 0) && !(btnStr[i].indexOf("境内外币") >= 0)){
let arr = btnStr[i].split("\t");
let newList = {
code:arr[0],
label:arr[1],
isDis:arr[2],
title:arr[3]
}
m++;
this.navcode.splice(m,0,newList)
}
}
this.navcode.push({code:"",label:"退汇",isDis:"N",title:""})
//屏蔽cptsel sptcpt
this.navcode.splice(1,2)
//根据具体的业务需求 可对按钮进行过滤 、 排序等处理 、添加处理 等---------end
}else{
this.navcode = []
this.$notify.error({ title: "错误", message: "服务请求失败！" });
}
})
})
},
```
通过codeList将按钮数组转为数组
```vue
computed:{
codeList(){
//将model中的数据映射成数组
return this.navcode.map(item=>{
let entireItem = {...item}
this.navcode = [];
//TODO 根据数据判断当前的code，是否可以继续
// entireItem.enable = item.isDis
return entireItem
})
}
},
```
渲染到界面，并控制 infsea中的initdialog为true，展示交易按钮组件
```vue
<template>
<div class="busnavbar">
<div class="busnavbar-items">
<c-button style="margin-left:7px;" size="medium" type="primary" class="medium_bcs" v-for="(item,index) in codeList" v-bind:key="index" @click.native="onNarBtnClick(item.code,index)" :title="item.title" :disabled="item.isDis==='N'">{{item.label}}</c-button>
</div>
</div>
</template>
```
点击业务按钮时调用onNarBtnClick，调用父组件的方法，进入对应业务的处理
```vue
methods:{
//各入口按钮请求
async onNarBtnClick(code,i){
this.model.cfgfil.subtrn1= code
let rtnmsg = await this.executeRule("cfgfil.hotsub1")
if(rtnmsg.respCode == SUCCESS){
this.navcode = []
//调用父组件的onChoose方法
this.$emit("onChoose",code.toLowerCase());
}else{
this.$notify.error({ title: "错误", message: "服务请求失败！" });
}
},
},
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment