huoran
/
FE_bankTeaching
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity
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.
314 Commits
2 Branches
12 Tags
238 MiB
 
 
 
 
 
Tag: Branch: Tree: dfd467e4b5
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'dfd467e4b5'
${ noResults }
FE_bankTeaching/src/components/dialog/index.vue

607 lines
18 KiB
Raw Blame History

<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="w-full bgNone z6000"
>
<div class="data-dia23 mx-auto w-2/5 rounded-3xl" :class="{ ['w-9/12']: 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>
<div class="popBody" v-if="flow === 1">
<h2 class="text-red-500 text-2xl">本业务需要授权</h2>
</div>
<div class="popBody" v-else-if="flow === 4">
<h2 class="text-red-500 text-2xl">提交后将不可更改，您确定要提交吗？</h2>
</div>
<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="disForm.name"></el-input>
</el-form-item>
<el-form-item label="授权柜员">
<el-input type="password" disabled v-model="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>
<!-- <div width="900px" class="data-dia23 max-h-screen 2xl:-mt-20;" ref="dataDia" v-drag>
<div class="dia-header">
<div class="data-title" v-if="flow === 1 || flow === 2">授权</div>
<div class="data-title" v-else>提交成功</div>
</div>
<div class="popBody w-full" v-if="flow === 1">
<h2 class="text-red-500 text-2xl">本业务需要授权</h2>
</div>
<div class="popBody" v-else-if="flow === 4">
<h2 class="text-red-500 text-2xl">提交后将不可更改，您确认提交吗？</h2>
</div>
<div class="popBody" v-else-if="flow === 2">
<el-form ref="form2" :model="disForm" label-width="80px">
<el-form-item label="授权柜员">
<el-input disabled v-model="disForm.name"></el-input>
</el-form-item>
<el-form-item label="授权柜员">
<el-input type="password" disabled v-model="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="100px">
<el-col :span="10" :offset="1">
<el-form-item v-for="(val, key) in leftObj" :key="key" :label="key + ':'">
<div>{{ val }}</div>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<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>
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': '整存整取取款',
'timeDeposit/deposit': '整存整取存款',
'business/openAccount': '公司业务开户',
'servicesAccount/passwordChange': '密码修改',
'servicesAccount/passwordLost': '密码挂失登记',
'servicesAccount/relieveLost': '挂失解挂登记',
'controlCash/cashTransferInto': '现金上缴',
'spacial': '提交'
}
const nameMap = {
sex: {
1: '男',
2: '女'
},
idType: {
82: '统一社会信用代码证',
83: '身份证'
},
certificateType: {
83: '身份证',
115: '转账支票',
116: '现金支票'
},
currency: {
12: 'CNY人民币'
},
goldLogo: {
13: '钞户'
},
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: '满页'
},
}
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() {
if(!this.needAuth) {
this.flow = 4
}
let num = 0;
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 {
this.leftObj[this.formName[key]] = this.showForm[key]
}
}else {
if(nameMap[key]) {
this.rightObj[this.formName[key]] = nameMap[key][this.showForm[key]]
}else {
this.rightObj[this.formName[key]] = this.showForm[key]
}
}
num++;
}
// 客户号：A100000001一个字母跟9位数字随机生成不可重复、证件类型：身份证
// 、证件号码、客户名称、联系电话、通讯地址、流水号：9位数字随机生成不可重
// 复、经办柜员：6位数字固定使用、经办机构：7位数字固定使用、会计日期：默认
// 示当前虚拟日期）点击确定按钮收起成功提示弹窗；
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 {
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()
// 流水号（研发自定义号码生成规则）、经办柜员（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) {
this.$emit('submitIt')
this.flow = 3
}else if(this.flow === 4) {
this.flow = 3
this.$emit('submitIt')
}else {
// 调用父函数
// 然后关掉git
// this.$emit('submitIt')
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 {
min-width: 1400px;
}
/deep/.w4w5 {
min-width: 800px;
}
/deep/.el-dialog {
-webkit-box-shadow:0;
box-shadow: 0 0 0 0!important;
border: 0!important;
}
/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: .5;
background-color: rgba(51,51,51,.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>