You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
622 lines
16 KiB
622 lines
16 KiB
<template> |
|
<!-- width="55%" --> |
|
<!-- class="2xl:w-screen xl:w-screen lg:w-full md:w-full h-auto 2xl:left-72" --> |
|
|
|
<!-- 这个是自己封装的提示组件， 用于系统录入中弹出的授权弹框 业务需求是：有些业务需要授权，有些业务不需要授权。 --> |
|
|
|
<el-dialog :visible="visible" append-to-body style="z-index: 6000;" class="apple" :close-on-click-modal="true" |
|
:show-close="false" custom-class="w3w5 bgNone z6000"> |
|
<div class="data-dia23 mx-auto w-9/12 rounded-3xl" :class="{ ['w-full']: flow === 3 }"> |
|
<!-- 2xl:w-3/5 xl:w-4/5 lg:w-full --> |
|
<div slot="title" class="dia-header rounded-3xl"> |
|
<div class="data-title" v-if="flow === 1 || flow === 2">提示</div> |
|
<div class="data-title" v-else-if="flow === 4">提交</div> |
|
<div class="data-title" v-else>{{ successName }}</div> |
|
</div> |
|
<!-- 需要授权时，父组件传进的flow为1 --> |
|
<div class="popBody" v-if="flow === 1"> |
|
<h2 class="text-red-500 text-2xl">本业务需要授权</h2> |
|
</div> |
|
<!-- 不需要授权时，父组件传进的flow为4 --> |
|
<div class="popBody" v-else-if="flow === 4"> |
|
<h2 class="text-red-500 text-2xl">提交后将不可更改，您确定要提交吗？</h2> |
|
</div> |
|
<!-- 上面说的需要授权的flow为1，点击确认后flow变为2，弹出授权柜员的账号和密码 --> |
|
<div class="popBody" v-else-if="flow === 2"> |
|
<el-form ref="form2" :model="disForm" label-width="200px"> |
|
<el-form-item label="授权柜员"> |
|
<el-input disabled v-model.trim="disForm.name"></el-input> |
|
</el-form-item> |
|
<el-form-item label="授权柜员"> |
|
<el-input type="password" disabled v-model.trim="disForm.pass"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
|
|
<!-- 不管授权与否，最后一步都是展示提交的信息。 --> |
|
<div class="popBody w-full" v-else> |
|
<el-row :gutter="20"> |
|
<el-form label-width="200px"> |
|
<el-col :span="12"> |
|
<el-form-item v-for="(val, key) in leftObj" :key="key" :label="key + ':'"> |
|
<div>{{ val }}</div> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item v-for="(val, key) in rightObj" :key="key" :label="key + ':'"> |
|
<div>{{ val }}</div> |
|
</el-form-item> |
|
</el-col> |
|
</el-form> |
|
</el-row> |
|
</div> |
|
<!-- 不是最后的提交信息有取消按钮，只要点击取消就不会发送请求给后端 --> |
|
<div class="popBtns" v-if="flow === 1 || flow === 2 || flow === 4"> |
|
<el-button class="close btn hover:bg-blue-100 " @click="cancelIt">取 消</el-button> |
|
<el-button class="sure btn hover:bg-blue-700 " type="primary" @click="sureIt">确 定</el-button> |
|
</div> |
|
<!-- 展示信息的弹框没有取消按钮，此时已经发送请求给后端了 --> |
|
<div class="myPopBtns" v-else> |
|
<el-button class="sure btn hover:bg-blue-700 " type="primary" @click="sureIt">确 定</el-button> |
|
</div> |
|
</div> |
|
</el-dialog> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
// 这个obj用来识别父组件的业务名字，也就是父组件的moduleName,这样展示提交信息的框中就可以展示父组件的名字。这个组件被下列组件复用着。 |
|
const obj = { |
|
// 'consumerClient': '/counter/list/manage/consumerClient', |
|
// 'currentAccount/openAccount': '/counter/list/manage/currentAccount', |
|
// 'currentAccount/deposit': '/counter/list/manage/currentAccount' |
|
'consumerClient': '个人客户信息建立', |
|
'corporateClient': '公司客户信息建立', |
|
'currentAccount/openAccount': '活期业务开户', |
|
'currentAccount/deposit': '活期业务存款', |
|
'currentAccount/withdrawal': '活期业务取款', |
|
'currentAccount/transferAccounts': '活期业务转账', |
|
'currentAccount/settle': '活期业务结清', |
|
'currentAccount/Cancell': '活期业务销户', |
|
'timeDeposit/openAccount': '整存整取开户', |
|
'timeDeposit/deposit': '整存整取存款', |
|
'timeDeposit/withdrawal': '整存整取取款', |
|
'usefulPhrases/openAccount': '零存整取开户', |
|
'usefulPhrases/continueDeposit': '零存整取续存', |
|
'usefulPhrases/accoumtClosed': '零存整取销户', |
|
'callDeposits/openAccount': '通知存款开户', |
|
'callDeposits/accountClosed': '通知存款销户', |
|
'business/openAccount': '公司业务开户', |
|
'servicesAccount/passwordChange': '密码修改', |
|
'servicesAccount/passwordLost': '密码挂失登记', |
|
'servicesAccount/relieveLost': '挂失解挂登记', |
|
'business/transfer': '转账', |
|
'controlCash/cashTransferInto': '现金上缴', |
|
'business/deposit': '存款', |
|
'business/withdrawal': '取款', |
|
'onlineBank/openAccount': '网上银行开户', |
|
'foreignExchange/puchasing': '外汇业务购汇', |
|
'foreignExchange/settlement': '外汇业务结汇', |
|
'agent/waterRate': '代收水费', |
|
'agent/electricRate': '代收电费', |
|
'agent/telRate': '代收电话费', |
|
'spacial': '提交' |
|
} |
|
|
|
// nameMap对象用来展示表单中的值，因为有些值是数字，比如1代表男，2代表女，要展示给用户看。 |
|
const nameMap = { |
|
sex: { |
|
1: '男', |
|
2: '女' |
|
}, |
|
idType: { |
|
82: '统一社会信用代码证', |
|
83: '身份证' |
|
}, |
|
certificateType: { |
|
83: '身份证', |
|
115: '转账支票', |
|
116: '现金支票' |
|
}, |
|
currency: { |
|
12: 'CNY人民币' |
|
}, |
|
goldLogo: { |
|
13: '钞户', |
|
150: '现汇（参考牌价712.34）', |
|
151: '现钞（参考牌价712.34）', |
|
}, |
|
accountQuality: { |
|
14: '个人结算户', |
|
101: '基本户', |
|
102: '一般户', |
|
103: '专用户', |
|
104: '临时户' |
|
}, |
|
accountQualitysTwo: { |
|
14: '个人结算户', |
|
101: '基本户', |
|
102: '一般户', |
|
103: '专用户', |
|
104: '临时户' |
|
}, |
|
accountQualitysThree: { |
|
14: '个人结算户', |
|
101: '基本户', |
|
102: '一般户', |
|
103: '专用户', |
|
104: '临时户' |
|
}, |
|
voucherType: { |
|
15: 'IC卡', |
|
115: '转账支票', |
|
116: '现金支票', |
|
123: '现金支票', |
|
127: '银行' |
|
}, |
|
accountType: { |
|
16: '一类户', |
|
17: '二类户', |
|
97: '结算户', |
|
98: '结算户', |
|
99: '委托保障金户', |
|
100: '资本临时户' |
|
}, |
|
drawWay: { |
|
18: '密码', |
|
93: '现金', |
|
94: '转账', |
|
114: '印鉴', |
|
125: '部分支取', |
|
126: '全部支取并销户' |
|
}, |
|
drawWayType: { |
|
133: '现金' |
|
}, |
|
accountQualitysTwo: { |
|
14: '个人结算户', |
|
101: '基本户', |
|
102: '一般户', |
|
103: '专用户', |
|
104: '临时户' |
|
}, |
|
voucherTypesTwo: { |
|
15: 'IC卡', |
|
115: '转账支票', |
|
116: '现金支票', |
|
123: '存单', |
|
127: '银行' |
|
}, |
|
voucherTypesThree: { |
|
15: 'IC卡', |
|
115: '转账支票', |
|
116: '现金支票', |
|
123: '存单', |
|
127: '银行' |
|
}, |
|
accountTypesTwo: { |
|
16: '一类户', |
|
17: '二类户', |
|
97: '结算户', |
|
98: '结算户', |
|
99: '委托保障金户', |
|
100: '资本临时户' |
|
}, |
|
accountTypesThree: { |
|
16: '一类户', |
|
17: '二类户', |
|
97: '结算户', |
|
98: '结算户', |
|
99: '委托保障金户', |
|
100: '资本临时户' |
|
}, |
|
|
|
drawWaysTwo: { |
|
18: '密码', |
|
93: '现金', |
|
94: '转账', |
|
114: '印鉴', |
|
125: '部分支取', |
|
126: '全部支取并销户' |
|
}, |
|
drawWaysThree: { |
|
18: '密码', |
|
93: '现金', |
|
94: '转账', |
|
114: '印鉴', |
|
125: '部分支取', |
|
126: '全部支取并销户' |
|
}, |
|
chargeWay: { |
|
13: '密码', |
|
}, |
|
chargeWay: { |
|
13: '密码', |
|
135: '现金', |
|
}, |
|
certificateDeposit: { |
|
92: '现金' |
|
}, |
|
extendPeriod: { |
|
90: '不续存', |
|
91: '续存' |
|
}, |
|
depositTerm: { |
|
84: '3个月', |
|
85: '6个月', |
|
86: '1年', |
|
87: '2年', |
|
88: '3年', |
|
89: '5年' |
|
}, |
|
withdrawWay: { |
|
125: '部分支取', |
|
126: '全部支取并销户' |
|
}, |
|
extendDepositTarget: { |
|
128: '不续存', |
|
129: '续存1年', |
|
130: '续存3年', |
|
131: '续存5年' |
|
}, |
|
noticeType: { |
|
95: '1天', |
|
96: '7天' |
|
}, |
|
depositType: { |
|
92: '现金' |
|
}, |
|
accountManagement: { |
|
105: '工业存款', |
|
106: '商业存款', |
|
107: '外贸存款', |
|
108: '其他存款' |
|
}, |
|
calculateWay: { |
|
109: '季度', |
|
110: '半年', |
|
111: '1年' |
|
}, |
|
outAccountWay: { |
|
112: '按月', |
|
113: '满页' |
|
}, |
|
openOnlineBanking: { |
|
146: '是', |
|
147: '否' |
|
}, |
|
openPhoneBanking: { |
|
148: '是', |
|
149: '否' |
|
}, |
|
buyForeignPurpose: { |
|
187: '因私旅游', |
|
188: '境外留学', |
|
189: '公务及商务出国', |
|
190: '探亲', |
|
191: '境外就医', |
|
192: '海外购物', |
|
193: '非投资类保险', |
|
194: '咨询服务', |
|
195: '境内外汇储蓄存款', |
|
196: '购买境内外汇理财产品', |
|
197: '职工报酬和婚家款', |
|
198: '专有权利使用费和特许费', |
|
199: '投资收益', |
|
200: '运输', |
|
201: '其他服务', |
|
202: '其他经常转移', |
|
}, |
|
} |
|
export default { |
|
props: { |
|
visible: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
showForm: { |
|
type: Object, |
|
default: () => ({}) |
|
}, |
|
formName: { |
|
type: Object, |
|
default: () => ({}) |
|
}, |
|
needAuth: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
depositNumber: { |
|
type: String, |
|
default: '' |
|
}, |
|
moduleName: { |
|
type: String, |
|
default: 'spacial' |
|
} |
|
}, |
|
created () { |
|
// 如果不需要授权，flow就是4，页面展示那个不需要授权的界面。 |
|
if (!this.needAuth) { |
|
this.flow = 4 |
|
} |
|
let num = 0; |
|
// 这个遍历可以让表单左右两边的展示的数量相差不大于1 |
|
for (const key in this.showForm) { |
|
if (!this.showForm[key]) { |
|
continue; |
|
} |
|
if (num % 2 === 0) { |
|
if (nameMap[key]) { |
|
this.leftObj[this.formName[key]] = nameMap[key][this.showForm[key]] |
|
} else { |
|
if (this.formName[key].indexOf('密码') !== -1) { |
|
this.leftObj[this.formName[key]] = '******' |
|
} else { |
|
this.leftObj[this.formName[key]] = this.showForm[key] |
|
} |
|
} |
|
} else { |
|
if (nameMap[key]) { |
|
this.rightObj[this.formName[key]] = nameMap[key][this.showForm[key]] |
|
} else { |
|
if (this.formName[key].indexOf('密码') !== -1) { |
|
this.rightObj[this.formName[key]] = '******' |
|
} else { |
|
this.rightObj[this.formName[key]] = this.showForm[key] |
|
} |
|
} |
|
} |
|
num++; |
|
} |
|
|
|
// 拿到一个随机在流水号 |
|
const tmpFunc2 = () => { |
|
const $chars2 = '1234567890' |
|
const maxPos = $chars2.length; |
|
let str = ''; |
|
for (let i = 0; i < 9; i++) { |
|
str += $chars2.charAt(Math.floor(Math.random() * maxPos)); |
|
} |
|
return str; |
|
} |
|
|
|
|
|
if (num % 2 === 1) { |
|
// 如果左边的项目数量和右边的一样，则每边加多两个 |
|
this.leftObj['流水号'] = tmpFunc2() |
|
this.leftObj['经办机构'] = '国税支行营业部' |
|
this.rightObj['经办柜员'] = '002110' |
|
if (this.depositNumber) { |
|
this.rightObj['定存编号'] = this.depositNumber |
|
} |
|
} else { |
|
// 如果左边的项目数量比右边少，则左边加3个右边加1个 |
|
this.leftObj['流水号'] = tmpFunc2() |
|
this.leftObj['经办机构'] = '国税支行营业部' |
|
this.rightObj['经办柜员'] = '002110' |
|
if (this.depositNumber) { |
|
this.leftObj['定存编号'] = this.depositNumber |
|
} |
|
} |
|
|
|
// 拿到当天日期 |
|
const tmpFunc = () => { |
|
const date = new Date() |
|
var y = date.getFullYear(); |
|
var m = date.getMonth() + 1; |
|
m = m < 10 ? '0' + m : m; |
|
var d = date.getDate(); |
|
d = d < 10 ? ('0' + d) : d; |
|
return y + '-' + m + '-' + d; |
|
} |
|
this.rightObj['会计时间'] = tmpFunc() |
|
if (this.leftObj['支取方式'] == 114) this.leftObj['支取方式'] = '印鉴' |
|
console.log("🚀 ~ file: index.vue ~ line 393 ~ created ~ this.rightObj", this.leftObj, this.rightObj, this.showForm, this.formName) |
|
// 流水号（研发自定义号码生成规则）、经办柜员（002110）、经办机构：国税支行营业部、会计时间：展示操作当日日期 |
|
}, |
|
data () { |
|
return { |
|
flow: 1, // 影响页面展示授权或者不授权页面 |
|
disForm: { // 展示授权柜员号和密码 |
|
name: '002288', |
|
pass: '123456' |
|
}, |
|
leftObj: {}, // 左边展示的项目列表 |
|
rightObj: {} // 右边展示的项目列表 |
|
} |
|
|
|
}, |
|
methods: { |
|
cancel () { |
|
this.visible = false; |
|
}, |
|
sureIt () { |
|
if (this.flow === 1) { |
|
this.flow = 2 |
|
} else if (this.flow === 2) { |
|
// 这时调用父组件的提交逻辑，发送请求给后端。然后flow置3展示提交成功。 |
|
this.$emit('submitIt') |
|
this.flow = 3 |
|
|
|
} else if (this.flow === 4) { |
|
// 这时调用父组件的提交逻辑，发送请求给后端。然后flow置3展示提交成功。 |
|
this.flow = 3 |
|
this.$emit('submitIt') |
|
} else { |
|
// 在父组件将visible改为false,关闭当前弹框。 |
|
this.cancelIt() |
|
} |
|
}, |
|
cancelIt () { |
|
this.$emit('update:visible', false) // 那边写 :visible.sync="visible" |
|
} |
|
}, |
|
computed: { |
|
// 展示表单中的一项，传入键值。 |
|
showItem () { |
|
return (val, key) => { |
|
return key + ': ' + val |
|
} |
|
}, |
|
// 展示父组件名字+成功 |
|
successName () { |
|
return obj[this.moduleName] + '成功' |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
/deep/.w3w5 { |
|
transform: translateY(-100px); |
|
min-width: 1300px; |
|
} |
|
|
|
/deep/.w4w5 { |
|
min-width: 800px; |
|
} |
|
|
|
/deep/.el-dialog { |
|
-webkit-box-shadow: 0; |
|
box-shadow: 0 0 0 0 !important; |
|
border: 0 !important; |
|
// display: none; |
|
} |
|
|
|
/deep/.el-form-item { |
|
label { |
|
font-family: PingFangSC-Regular; |
|
font-size: 18px; |
|
color: #000000; |
|
letter-spacing: 0.21px; |
|
font-weight: 400; |
|
} |
|
|
|
.el-form-item__content { |
|
padding-left: 30px; |
|
text-align: left; |
|
font-family: PingFangSC-Semibold; |
|
font-size: 20px; |
|
color: #000000; |
|
letter-spacing: 0.24px; |
|
font-weight: 600; |
|
} |
|
} |
|
|
|
.test { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 0; |
|
height: 0; |
|
z-index: 9899999; |
|
} |
|
|
|
.masking { |
|
width: 100vw; |
|
height: 100vh; |
|
top: 0; |
|
left: 0; |
|
bottom: 0; |
|
right: 0; |
|
opacity: 0.5; |
|
background-color: rgba(51, 51, 51, 0.9); |
|
} |
|
|
|
.data-dia23 { |
|
// position: absolute; |
|
min-width: 40%; |
|
background-color: white; |
|
z-index: 9999; |
|
|
|
.popBody { |
|
// width: 100%; |
|
min-height: 30vh; |
|
padding-top: 50px; |
|
padding-bottom: 20px; |
|
display: flex; |
|
align-items: center; |
|
|
|
/deep/ .el-form { |
|
height: 100%; |
|
} |
|
} |
|
|
|
.dia-header { |
|
height: 100%; |
|
|
|
// position: relative; |
|
.data-title { |
|
width: 300px; |
|
margin: 0 auto; |
|
line-height: 72px; |
|
text-align: center; |
|
color: #fff; |
|
font-size: 24px; |
|
background: url(../../assets/img/dia-title.png) 0 0 / cover no-repeat; |
|
} |
|
} |
|
} |
|
|
|
/deep/ .el-row { |
|
width: 100%; |
|
padding: 0 50px; |
|
} |
|
|
|
// /deep/.popbody { |
|
// width: 100vw!important; |
|
// height: 100%!important; |
|
// background-color: red!important;; |
|
// } |
|
.popBtns { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
padding-bottom: 20px; |
|
|
|
&>.btn { |
|
width: 180px; |
|
font-size: 18px; |
|
} |
|
} |
|
|
|
.myPopBtns { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
padding-bottom: 20px; |
|
|
|
&>.btn { |
|
width: 180px; |
|
font-size: 18px; |
|
} |
|
} |
|
|
|
// /deep/.el-dialog__header, /deep/.el-dialog__body { |
|
// padding: 0; |
|
// border-radius: 16px; |
|
// } |
|
|
|
// /deep/.el-dialog { |
|
// position: absolute; |
|
// left: 50%; |
|
// transform: translateX(-25%); |
|
// } |
|
/deep/.bgNone { |
|
background-color: transparent; |
|
} |
|
|
|
/deep/.myFull { |
|
width: 90%; |
|
} |
|
|
|
/deep/.el-dialog { |
|
z-index: 9999 !important; |
|
} |
|
|
|
/deep/.el-dialog__wrapper { |
|
z-index: 9999 !important; |
|
} |
|
</style> |