Skip to content

V
vue-gjjs
Commit 25384874 by Wuyuqiu
Options

brtudp交易ui美化、公共样式调整

parent f94f92da
Showing with 286 additions and 155 deletions
src/assets/css/common.css
......@@ -408,6 +408,11 @@
padding-left: 3px;
}
.el-collapse {
border-top: 0px solid #fff;
border-bottom: 0px solid #fff;
}
.el-collapse .el-collapse-item__wrap{
/* background-color: var(--bgcolor); */
}
......@@ -548,6 +553,16 @@ margin-left: 120px;
/* 改变折叠面板箭头样式 */
.el-icon-arrow-right:before{
content: "";
display: inline-block;
color: #ecf5ff;
width: 97%;
height: 5px;
border-top: 2px solid;
margin-right: 10px;
}
.el-icon-arrow-right:after{
content: "\e791";
}
......@@ -557,6 +572,12 @@ margin-left: 120px;
}
.el-collapse-item__arrow{
border-bottom: 0px solid #fff;
color: var(--themecolor);
margin: 0 10px 0 10px;
transition: transform .3s;
font-weight: 300;
content: '';
flex: 1;
}
src/views/Business/Brtudp/Cfap.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<c-col :span="12">
<el-form-item label="数据采集标志" prop="cfabrt.cfaflg">
<c-select v-model="model.cfabrt.cfaflg" style="width:100%" placeholder="请选择数据采集标志"
:code="codes.cfaflg"
@change="eventFunction('cfabrt.cfaflg')">
<c-select
v-model="model.cfabrt.cfaflg"
style="width: 100%"
placeholder="请选择数据采集标志"
:code="codes.cfaflg"
@change="eventFunction('cfabrt.cfaflg')"
>
</c-select>
</el-form-item>
</c-col>
<c-col :span="5" :offset="2">
<c-checkbox v-model="model.cfabrt.basflg" disabled>签约信息</c-checkbox>
<c-col :span="6">
<el-form-item label="" prop="cfabrt.basflg" class="checkbox-left" label-width="143px" style="margin-left:">
<c-checkbox v-model="model.cfabrt.basflg" disabled>签约信息</c-checkbox>
</el-form-item>
</c-col>
<c-col :span="5">
<c-checkbox v-model="model.cfabrt.dclflg" disabled>变动信息</c-checkbox>
<c-col :span="6">
<el-form-item label="" prop="cfabrt.dclflg" class="checkbox-left">
<c-checkbox v-model="model.cfabrt.dclflg" disabled>变动信息</c-checkbox>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="地区机构号" prop="cfabrt.ownextkey">
<c-select v-model="model.cfabrt.ownextkey" style="width:100%" placeholder="请选择地区机构号"
:code="codes.ownextkey1" :disabled="model.cfabrt.cfatyp!='A'">
<c-select
v-model="model.cfabrt.ownextkey"
style="width: 100%"
placeholder="请选择地区机构号"
:code="codes.ownextkey1"
:disabled="model.cfabrt.cfatyp != 'A'"
>
</c-select>
</el-form-item>
</c-col>
......@@ -30,39 +42,37 @@
<el-form-item label="不报送原因" prop="cfabrt.cfabrttxt">
<!-- <c-select v-model="model.cfabrt.cfabrttxt" style="width:100%" placeholder="请选择不报送原因">
</c-select> -->
<c-select v-model="model.cfabrt.cfabrttxt"
clearable
filterable
allow-create
style="width:100%"
placeholder=""
:disabled="model.cfabrt.cfaflg!=4"
:code="codes.cfabrttxt">
<c-select
v-model="model.cfabrt.cfabrttxt"
clearable
filterable
allow-create
style="width: 100%"
placeholder=""
:disabled="model.cfabrt.cfaflg != 4"
:code="codes.cfabrttxt"
>
</c-select>
</el-form-item>
</c-col>
</div>
</template>
<script>
import Api from "~/service/Api"
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Brtudp/Event"
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Brtudp/Event";
export default {
inject: ['root'],
inject: ["root"],
props: ["model", "codes"],
mixins: [commonProcess],
data() {
return {
}
return {};
},
methods: { ...Event },
created: function () {
}
}
created: function () {},
};
</script>
<style>
</style>
src/views/Business/Brtudp/Conp.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<!-- ==================================上部的左边-外债编号================================ -->
<c-col :span="24">
<c-col :span="12" style="padding-right: 20px">
......
src/views/Business/Brtudp/Dclpp.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<!-- ==================================左边-外债编号================================ -->
<c-col :span="12" style="padding-right: 20px;">
<c-col :span="24">
......
src/views/Business/Brtudp/Docpre.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<!--=== =================================左边======================================== -->
<c-col :span="12" style="padding-right: 20px;">
......
src/views/Business/Brtudp/Mt750p.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<!-- ====================================不符点通知 左边 ================================= -->
<c-col :span="12">
<!-- 单据金额 -->
......
src/views/Business/Brtudp/Mt754p.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<!-- ==================================== 左边 ================================= -->
<c-col :span="12" style="padding-right: 20px;">
<!--加Mt750p页面的 单据金额 -->
......
src/views/Business/Brtudp/Othadvtypp.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<!-- 此页面内容为加入Mt750p和Mt754p页面的内容 -->
<!-- ====================================左边 ================================= -->
......
src/views/Business/Brtudp/Ovwp.vue
......@@ -4,13 +4,29 @@
<el-collapse-item title="承兑信息" name="payp">
<m-payp :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="反馈 Feedback" name="2">
<div>
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
</div>
<el-collapse-item title="不符点" name="docpre" v-if="model.brdgrp.rec.dscinsflg">
<m-docpre :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="效率 Efficiency" name="3">
<div>简化流程：设计简洁直观的操作流程；</div>
<el-collapse-item title="不符点通知" name="mt750p" v-if="model.brdgrp.rec.advtyp == '750'">
<m-mt750p :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="装运详情" name="shpdet" v-if="model.brdgrp.rec.dscinsflg">
<m-shpdet :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="付款通知" name="mt754p" v-if="model.brdgrp.rec.advtyp == '754'">
<m-mt754p :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="通知详情" name="othadvtypp" v-if="model.brdgrp.rec.advtyp == 'oth'">
<m-othadvtypp :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="外债远期信用证数据采集" name="cfap">
<m-cfap :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="外债远期信用证(含即期单证相符)-签约信息" name="conp" v-if="model.cfabrt.cfaflg == 1">
<m-conp :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="外债远期信用证(含即期单证相符)-变动信息" name="dclpp" v-if="model.cfabrt.cfaflg == 1">
<m-dclpp :model="model" :codes="codes" />
</el-collapse-item>
</el-collapse>
</div>
......@@ -22,16 +38,26 @@ import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Brtudp/Event";
import Payp from "./Payp";
import Ptap1 from "~/views/Public/Ptap1";
import Ptsmsg from "~/views/Public/Ptsmsg";
import Fullbox from "../../../components/Fullbox.vue";
import Docpre from "./Docpre";
import Mt750p from "./Mt750p";
import Shpdet from "./Shpdet";
import Mt754p from "./Mt754p";
import Othadvtypp from "./Othadvtypp";
import Cfap from "./Cfap";
import Conp from "./Conp";
import Dclpp from "./Dclpp";
export default {
components: {
"m-payp": Payp,
"c-ptap1": Ptap1,
// "c-ptap": Ptap,
"c-ptsmsg": Ptsmsg,
"m-docpre": Docpre,
"m-mt750p": Mt750p,
"m-shpdet": Shpdet,
"m-mt754p": Mt754p,
"m-othadvtypp": Othadvtypp,
"m-cfap": Cfap,
"m-conp": Conp,
"m-dclpp": Dclpp,
},
inject: ["root"],
props: ["model", "codes"],
......@@ -43,6 +69,24 @@ export default {
},
methods: {
...Event,
myTabClick(tab) {
this.tabClick(tab);
let name = tab.name;
let rulePath;
if (name === "conp") {
rulePath = "cfabrt.recp.conp";
}
if (name === "dclpp") {
rulePath = "cfabrt.recp.dclp(1).dclpp";
}
if (!!rulePath) {
this.executeRule(rulePath).then((res) => {
if (res.respCode == SUCCESS) {
this.updateModel(res.data);
}
});
}
},
},
created: function () {},
};
......
src/views/Business/Brtudp/Payp.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<c-row>
<!-- ====================================左边 =================================-->
<c-col :span="12" style="padding-right: 20px;">
<c-col :span="12" style="padding-right: 20px">
<!-- 信用证编号 -->
<c-col :span="24">
<c-form-item label="信用证编号" prop="lidgrp.rec.ownref">
<el-form-item
label="信用证编号"
prop="lidgrp.rec.ownref"
style="width: 100%"
>
<c-fullbox>
<c-input
v-model="model.lidgrp.rec.ownref"
maxlength="16"
placeholder=""
style="width: 100%"
maxlength="8"
disabled
placeholder="请输入信用证编号"
></c-input>
<template slot="footer">
<c-button
size="small"
style="margin-left: 10px; padding: 0 12px"
type="primary"
@click="onSeainf"
icon="el-icon-info"
>
</c-button>
</template>
</c-fullbox>
</el-form-item>
</c-col>
<!-- <c-col :span="24">
<c-form-item
label="信用证编号"
prop="lidgrp.rec.ownref"
style="width: 100%"
>
<c-fullbox>
<c-input
v-model="model.lidgrp.rec.ownref"
maxlength="8"
placeholder="请输入客户经理"
disabled
>
</c-input>
<template slot="footer">
......@@ -24,13 +52,11 @@
@click="onSeainf"
icon="el-icon-info"
>
</c-button>
</template>
</c-fullbox>
</c-form-item>
</c-col>
</c-col> -->
<!-- 到期日 -->
<c-col :span="24">
......@@ -48,6 +74,32 @@
<!-- 单据参考号 -->
<c-col :span="24">
<el-form-item
label="单据编号"
prop="brdgrp.rec.ownref"
style="width: 100%"
>
<c-fullbox>
<c-input
v-model="model.brdgrp.rec.ownref"
maxlength="8"
disabled
placeholder="请输入单据编号"
></c-input>
<template slot="footer">
<c-button
size="small"
style="margin-left: 10px; padding: 0 12px"
type="primary"
@click="onSeainf"
icon="el-icon-info"
>
</c-button>
</template>
</c-fullbox>
</el-form-item>
</c-col>
<!-- <c-col :span="24">
<c-form-item label="单据编号" prop="brdgrp.rec.ownref">
<c-fullbox>
<c-input
......@@ -64,13 +116,11 @@
@click="onSeainf"
icon="el-icon-info"
>
</c-button>
</template>
</c-fullbox>
</c-form-item>
</c-col>
</c-col> -->
<!-- 单据金额 -->
<c-col :span="24">
......@@ -177,7 +227,7 @@
</el-form-item>
</c-col>
<!-- 单据类型 -->
<c-col :span="16">
<c-col :span="12">
<el-form-item label="单据类型" prop="brdgrp.rec.docflg">
<c-select
v-model="model.brdgrp.rec.docflg"
......@@ -190,10 +240,9 @@
</el-form-item>
</c-col>
<!-- Tenor -->
<c-col :span="8">
<c-col :span="12">
<c-form-item
label="远期最大期限"
label-width="100px"
prop="brdgrp.rec.tenmaxday"
>
<c-input
......@@ -359,7 +408,6 @@
"
:disabled="model.sftmt == '' ? true : false"
>
</c-button>
</template>
</c-fullbox>
......@@ -368,14 +416,14 @@
</c-col>
<!-- ====================================右边 ======================================-->
<c-col :span="12" style="padding-left: 20px;">
<c-col :span="12" style="padding-left: 20px">
<!-- 信用证余额 -->
<c-col :span="12">
<c-form-item label="信用证余额" prop="lidgrp.cbs.opn1.cur">
<c-input
v-model="model.lidgrp.cbs.opn1.cur"
maxlength="3"
:placeholder="$t('other.please_enter') + 'Currency'"
placeholder="请输入信用证余额"
disabled
></c-input>
</c-form-item>
......@@ -523,7 +571,7 @@ export default {
paysmt: [
{ label: "MT 732 Advise of Discharge", value: "732" },
{ label: "MT x99 Information B by Free Massage", value: "x99" },
],
],
};
},
methods: {
......
src/views/Business/Brtudp/Shpdet.vue
<template>
<div class="eibs-tab">
<div class="eibs">
<!--=== ==========左边=============== -->
<c-col :span="12" style="padding-right: 20px;">
......
src/views/Business/Brtudp/index.vue
......@@ -27,20 +27,72 @@
type="card"
@tab-click="myTabClick"
>
<el-tab-pane label="业务信息" name="ovwp">
<el-tab-pane label="业务信息" name="ovwp">
<c-content>
<m-ovwp :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000032 -->
<!-- <el-tab-pane label="承兑信息" name="payp">
<!--PD000001 -->
<el-tab-pane label="保证金" name="ccvpan">
<c-content>
<m-payp :model="model" :codes="codes" />
<m-ccvpan :model="model" :codes="codes" />
</c-content>
</el-tab-pane> -->
</el-tab-pane>
<!--PD000062 -->
<el-tab-pane
<!--PD000001 -->
<el-tab-pane label="统一授信" name="limitbody">
<c-content>
<m-limitbody :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000027 -->
<el-tab-pane label="费用/账务" name="engp,setpan,glepan">
<c-content>
<div class="eibs-tab">
<el-collapse v-model="activeNames">
<el-collapse-item title="表外记账" name="engp">
<!-- 表外记账 -->
<m-engp :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="结算" name="setpan">
<!-- 结算 -->
<m-setpan :model="model" :codes="codes" />
</el-collapse-item>
<el-collapse-item title="会计分录" name="glepan">
<!-- 会计分录 -->
<m-glepan :model="model" :codes="codes" />
</el-collapse-item>
</el-collapse>
</div>
</c-content>
</el-tab-pane>
<!--PD000000 -->
<el-tab-pane label="附言" name="coninfp">
<c-content>
<div class="eibs-tab">
<m-coninfp :model="model" :codes="codes" />
</div>
</c-content>
</el-tab-pane>
<!--PD000529 -->
<el-tab-pane label="报文/面函" name="docpan">
<c-content>
<m-docpan :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000546 -->
<el-tab-pane label="附件信息" name="doctre">
<c-content>
<m-doctre :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!-- <el-tab-pane
v-if="model.brdgrp.rec.dscinsflg"
label="不符点"
name="docpre"
......@@ -48,9 +100,9 @@
<c-content>
<m-docpre :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
</el-tab-pane> -->
<el-tab-pane
<!-- <el-tab-pane
v-if="model.brdgrp.rec.dscinsflg"
label="装运详情"
name="shpdet"
......@@ -58,11 +110,11 @@
<c-content>
<m-shpdet :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
</el-tab-pane> -->
<!-- ======新增隐藏面板====== -->
<!--PD000139 -->
<el-tab-pane
<!-- <el-tab-pane
label="不符点通知"
name="mt750p"
v-if="model.brdgrp.rec.advtyp == '750'"
......@@ -70,10 +122,10 @@
<c-content>
<m-mt750p :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
</el-tab-pane> -->
<!--PD000147 -->
<el-tab-pane
<!-- <el-tab-pane
label="付款通知"
name="mt754p"
v-if="model.brdgrp.rec.advtyp == '754'"
......@@ -81,10 +133,10 @@
<c-content>
<m-mt754p :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
</el-tab-pane> -->
<!--PD000213 -->
<el-tab-pane
<!-- <el-tab-pane
label="通知详情"
name="othadvtypp"
v-if="model.brdgrp.rec.advtyp == 'oth'"
......@@ -92,80 +144,17 @@
<c-content>
<m-othadvtypp :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000027 -->
<el-tab-pane label="表外记账" name="engp">
<c-content>
<m-engp :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000001 -->
<el-tab-pane label="保证金" name="ccvpan">
<c-content>
<m-ccvpan :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000000 -->
<el-tab-pane label="结算" name="setpan">
<c-content>
<m-setpan :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000001 -->
<el-tab-pane label="会计分录" name="glepan">
<c-content>
<m-glepan :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000000 -->
<el-tab-pane label="提示信息" name="coninfp">
<c-content>
<m-coninfp :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000529 -->
<el-tab-pane label="面函和报文" name="docpan">
<c-content>
<m-docpan :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD000546 -->
<el-tab-pane label="附件" name="doctre">
<c-content>
<m-doctre :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
</el-tab-pane> -->
<!--PD000001 -->
<el-tab-pane label="外债远期信用证数据采集" name="cfap">
<!-- <el-tab-pane label="外债远期信用证数据采集" name="cfap">
<c-content>
<m-cfap :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<!--PD001139 新增隐藏面板-->
<!-- <el-tab-pane label="PD001139" name="shisuan">
<c-content>
<m-shisuan :model="model" :codes="codes"/>
</c-content>
</el-tab-pane> -->
<!--PD000001 -->
<el-tab-pane label="统一授信" name="limitbody">
<c-content>
<m-limitbody :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
</el-tab-pane> -->
<!--PD000001 -->
<el-tab-pane
<!-- <el-tab-pane
label="外债远期信用证(含即期单证相符)-签约信息"
name="conp"
v-if="model.cfabrt.cfaflg == 1"
......@@ -173,10 +162,10 @@
<c-content>
<m-conp :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
</el-tab-pane> -->
<!-- bd工具编不了，需手动写页面dclpp -->
<el-tab-pane
<!-- <el-tab-pane
label="外债远期信用证(含即期单证相符)-变动信息"
name="dclpp"
v-if="model.cfabrt.cfaflg == 1"
......@@ -184,7 +173,23 @@
<c-content>
<m-dclpp :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
</el-tab-pane> -->
<!--PD000032 -->
<!-- <el-tab-pane label="承兑信息" name="payp">
<c-content>
<m-payp :model="model" :codes="codes" />
</c-content>
</el-tab-pane> -->
<!--PD000062 -->
<!--PD001139 新增隐藏面板-->
<!-- <el-tab-pane label="PD001139" name="shisuan">
<c-content>
<m-shisuan :model="model" :codes="codes"/>
</c-content>
</el-tab-pane> -->
</c-tabs>
</el-form>
......@@ -225,6 +230,7 @@ import Mt750p from "./Mt750p";
import Mt754p from "./Mt754p";
import Othadvtypp from "./Othadvtypp";
import Shpdet from "./Shpdet";
import Ovwp from "./Ovwp";
// import Engp from "./Engp";
// import Ccvpan from "./Ccvpan";
......@@ -252,6 +258,7 @@ import Doctre from "~/views/Public/Doctre";
export default {
name: "Brtudp",
components: {
"m-ovwp": Ovwp,
"m-shpdet": Shpdet,
"m-payp": Payp,
"m-docpre": Docpre,
......@@ -279,7 +286,7 @@ export default {
mixins: [commonProcess, commonFuncs], // 里面包含了Default、Check等的公共处理
data() {
return {
tabVal: "payp",
tabVal: "ovwp",
trnName: "brtudp",
model: new Brtudp().data,
checkRules: Check,
......@@ -289,6 +296,7 @@ export default {
codes: {
...CodeTable, //...即返回到views同级，关联码表
},
activeNames: ["engp"],
};
},
methods: {
......
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