feat: 银行基础信息管理，储蓄卡、信用卡修改。
This commit is contained in:
tianyongbao
272
src/pages/work/base/bankBaseInfo/addEdit.vue
Normal file
272
src/pages/work/base/bankBaseInfo/addEdit.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="银行基础信息管理"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="银行全称" prop="bankName" required>
|
||||
<u--input v-model="form.bankName" placeholder="请填写银行全称"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="银行简称" prop="bankShortName" required>
|
||||
<u--input v-model="form.bankShortName" placeholder="请填写银行简称"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="银行类型" required prop="bankTypeName" @click="handleShowBankType">
|
||||
<u--input v-model="form.bankTypeName" disabled disabledColor="#ffffff" placeholder="请选择银行类型"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-down"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="信用卡多账户合并出账" prop="multiAccountConsolidatedName" required @click="handleShowAccounting">
|
||||
<u--input v-model="form.multiAccountConsolidatedName" disabled disabledColor="#ffffff" placeholder="请选择信用卡多账户合并出账"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-down"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="英文简称" prop="englishShortName">
|
||||
<u--input v-model="form.englishShortName" placeholder="请填写英文简称"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="归属省份" prop="province">
|
||||
<u--input v-model="form.province" placeholder="请填写归属省份"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="归属城市" prop="city">
|
||||
<u--input v-model="form.city" placeholder="请填写归属城市"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="统一社会信用代码" prop="unifiedCreditCode">
|
||||
<u--input v-model="form.unifiedCreditCode" placeholder="请填写统一社会信用代码"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="排序" prop="orderNum">
|
||||
<u--input v-model.number="form.orderNum" type="number" placeholder="请填写排序"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请填写备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="20000" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showBankType" :columns="bankTypeList" keyName="dictLabel" @cancel="handleBankTypeCancel"
|
||||
@confirm="handleBankTypeConfirm"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showAccounting" :columns="accountingList" keyName="dictLabel" @cancel="handleAccountingCancel"
|
||||
@confirm="handleAccountingConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getBankBaseInfo, addBankBaseInfo, updateBankBaseInfo } from '@/api/invest/bankBaseInfo'
|
||||
import { getDicts } from '@/api/system/dict/data.js'
|
||||
const { proxy } = getCurrentInstance()
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { reactive, toRefs, ref, getCurrentInstance } from "vue";
|
||||
|
||||
const showBankType = ref(false)
|
||||
const showAccounting = ref(false)
|
||||
const title = ref("银行基础信息管理")
|
||||
const bankTypeList = ref([])
|
||||
const accountingList = ref([])
|
||||
|
||||
const data = reactive({
|
||||
form: {
|
||||
id: null,
|
||||
bankName: null,
|
||||
bankShortName: null,
|
||||
bankType: null,
|
||||
bankTypeName: null,
|
||||
englishShortName: null,
|
||||
province: null,
|
||||
city: null,
|
||||
unifiedCreditCode: null,
|
||||
multiAccountConsolidated: '0',
|
||||
multiAccountConsolidatedName: null,
|
||||
orderNum: 0,
|
||||
remark: null
|
||||
},
|
||||
rules: {
|
||||
bankName: [{ type: 'string', required: true, message: '银行全称不能为空', trigger: ['change', 'blur'] }],
|
||||
bankShortName: [{ type: 'string', required: true, message: '银行简称不能为空', trigger: ['change', 'blur'] }],
|
||||
bankTypeName: [{ type: 'string', required: true, message: '银行类型不能为空', trigger: ['change', 'blur'] }],
|
||||
multiAccountConsolidatedName: [{ type: 'string', required: true, message: '信用卡多账户合并出账不能为空', trigger: ['change', 'blur'] }]
|
||||
}
|
||||
})
|
||||
|
||||
const { form, rules } = toRefs(data)
|
||||
|
||||
onLoad((option) => {
|
||||
form.value.id = option.id
|
||||
if (form.value.id != null) {
|
||||
title.value = "银行基础信息管理-修改"
|
||||
} else {
|
||||
title.value = "银行基础信息管理-新增"
|
||||
}
|
||||
getDict()
|
||||
})
|
||||
|
||||
function getDict() {
|
||||
// 银行类型
|
||||
getDicts('bank_type').then(res => {
|
||||
bankTypeList.value = [res.data]
|
||||
})
|
||||
// 是否合并出账
|
||||
getDicts('is_accounting').then(res => {
|
||||
accountingList.value = [res.data]
|
||||
})
|
||||
|
||||
if (form.value.id != null) {
|
||||
getBankBaseInfo(form.value.id).then(res => {
|
||||
form.value = res.data
|
||||
|
||||
// 银行类型
|
||||
getDicts('bank_type').then(result => {
|
||||
form.value.bankTypeName = dictStr(form.value.bankType, result.data)
|
||||
})
|
||||
|
||||
// 是否合并出账
|
||||
getDicts('is_accounting').then(result => {
|
||||
form.value.multiAccountConsolidatedName = dictStr(form.value.multiAccountConsolidated, result.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function dictStr(val, arr) {
|
||||
let str = ''
|
||||
arr.map(item => {
|
||||
if (item.dictValue === val) {
|
||||
str = item.dictLabel
|
||||
}
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
function handleShowBankType() {
|
||||
if (bankTypeList.value[0].length === 0) {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '银行类型为空', type: 'warning'
|
||||
})
|
||||
} else {
|
||||
showBankType.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function handleBankTypeConfirm(e) {
|
||||
form.value.bankTypeName = e.value[0].dictLabel
|
||||
form.value.bankType = e.value[0].dictValue
|
||||
showBankType.value = false
|
||||
}
|
||||
|
||||
function handleBankTypeCancel() {
|
||||
showBankType.value = false
|
||||
}
|
||||
|
||||
function handleShowAccounting() {
|
||||
if (accountingList.value[0].length === 0) {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '信用卡多账户合并出账为空', type: 'warning'
|
||||
})
|
||||
} else {
|
||||
showAccounting.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function handleAccountingConfirm(e) {
|
||||
form.value.multiAccountConsolidatedName = e.value[0].dictLabel
|
||||
form.value.multiAccountConsolidated = e.value[0].dictValue
|
||||
showAccounting.value = false
|
||||
}
|
||||
|
||||
function handleAccountingCancel() {
|
||||
showAccounting.value = false
|
||||
}
|
||||
|
||||
function submit() {
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
if (form.value.id != null) {
|
||||
updateBankBaseInfo(form.value).then(res => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
addBankBaseInfo(form.value).then(res => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user