273 lines
8.8 KiB
Vue
273 lines
8.8 KiB
Vue
<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="180rpx"
|
|
:labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
|
|
<u-form-item label="银行全称" prop="bankName" required>
|
|
<u--input v-model="form.bankName" placeholder="请填写银行全称"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="银行简称" prop="bankShortName" required>
|
|
<u--input v-model="form.bankShortName" placeholder="请填写银行简称"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="银行类型" required prop="bankTypeName" @click="handleShowBankType">
|
|
<view class="input-with-arrow">
|
|
<u--input v-model="form.bankTypeName" readonly disabledColor="#ffffff" placeholder="请选择银行类型"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
<text class="arrow-icon">▼</text>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="信用卡多账户合并出账" prop="multiAccountConsolidatedName" required @click="handleShowAccounting">
|
|
<view class="input-with-arrow">
|
|
<u--input v-model="form.multiAccountConsolidatedName" readonly disabledColor="#ffffff" placeholder="请选择信用卡多账户合并出账"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
<text class="arrow-icon">▼</text>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="英文简称" prop="englishShortName">
|
|
<u--input v-model="form.englishShortName" placeholder="请填写英文简称"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="归属省份" prop="province">
|
|
<u--input v-model="form.province" placeholder="请填写归属省份"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="归属城市" prop="city">
|
|
<u--input v-model="form.city" placeholder="请填写归属城市"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="统一社会信用代码" prop="unifiedCreditCode">
|
|
<u--input v-model="form.unifiedCreditCode" placeholder="请填写统一社会信用代码"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="排序" prop="orderNum">
|
|
<u--input v-model.number="form.orderNum" type="number" placeholder="请填写排序"
|
|
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="备注" prop="remark" labelPosition="top">
|
|
<u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="left" count
|
|
maxlength="20000" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></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 inputBaseStyle = {
|
|
background: '#ffffff',
|
|
border: '2rpx solid #dcdfe6',
|
|
borderRadius: '8rpx',
|
|
padding: '0 24rpx',
|
|
height: '68rpx',
|
|
width: '100%',
|
|
boxSizing: 'border-box'
|
|
}
|
|
|
|
|
|
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>
|
|
|
|
|