145 lines
3.6 KiB
Vue
145 lines
3.6 KiB
Vue
<template>
|
|
<div class="select_bank">
|
|
<!-- 银行 -->
|
|
<el-select v-model="bankInstId" placeholder="请选择银行，可搜索" style="width: 200px;" filterable remote
|
|
:remote-method="remoteGetBank" :loading="loading" remote-show-suffix @change="bankChange" :disabled="!province">
|
|
<el-option v-for="item in bankList" :key="item.bankAliasCode" :label="item.bankAlias" :value="item.bankCode" />
|
|
</el-select>
|
|
<!-- 支行 -->
|
|
<el-select v-model="bankBranchCode" placeholder="请选择支行" style="width: 200px;" :disabled="!bankInstId"
|
|
@change="bankBranchChange">
|
|
<el-option v-for="item in bankBranchList" :key="item.bank_branch_id" :label="item.bank_branch_name"
|
|
:value="item.bank_branch_id"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { getBankInfo, getBankBranchList } from "@/api/common";
|
|
|
|
const loading = ref(false)
|
|
const bankNameValue = ref('')
|
|
|
|
const props = defineProps({
|
|
province: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
city: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
cityCode: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
watch(() => props.cityCode, async (newValue, oldValue) => {
|
|
try {
|
|
// console.log('watch.props.cityCode===', `newValue=${newValue},oldValue=${oldValue}`);
|
|
await getBankInfoAjax()
|
|
if (newValue && newValue !== undefined) {
|
|
// 监听银行code变化
|
|
watch(bankInstId, (n, o) => {
|
|
if (n !== undefined && n) {
|
|
bankChange(n)
|
|
}
|
|
}, {
|
|
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
})
|
|
|
|
const bankList = ref<Array<{ id: string; bankAlias: string, bankCode: string, bankAliasCode: string, accountBank: string }>>([]);
|
|
|
|
const bankInstId = defineModel('bankInstId', {
|
|
type: String,
|
|
default: "",
|
|
});
|
|
|
|
const bankName = defineModel('bankName', {
|
|
type: String,
|
|
default: "",
|
|
})
|
|
|
|
// 选择银行
|
|
function bankChange(e: any) {
|
|
let obj = bankList.value.find(item => item.bankCode == e)
|
|
if (obj && obj.id) {
|
|
bankName.value = obj.accountBank
|
|
bankInstId.value = obj.bankCode
|
|
getBankBranchListAjax(obj.bankAliasCode)
|
|
}
|
|
}
|
|
|
|
// 支行开户行编号 bankCode
|
|
const bankBranchCode = defineModel('bankBranchCode', {
|
|
type: String,
|
|
default: "",
|
|
})
|
|
|
|
// 支行开户行行别名称 branchName
|
|
const bankBranchName = defineModel('bankBranchName', {
|
|
type: String,
|
|
default: "",
|
|
})
|
|
|
|
// 选择支行
|
|
function bankBranchChange(e: string) {
|
|
let obj = bankBranchList.value.find(item => item.bank_branch_id == e)
|
|
if (obj && obj.bank_branch_id) {
|
|
bankBranchName.value = obj.bank_branch_name
|
|
}
|
|
}
|
|
|
|
// 支行列表
|
|
const bankBranchList = ref<Array<{ bank_branch_id: string; bank_branch_name: string }>>([]);
|
|
async function getBankBranchListAjax(bankAliasCode: string) {
|
|
try {
|
|
const res: any = await getBankBranchList({
|
|
bankAliceCode: bankAliasCode,
|
|
cityCode: props.cityCode
|
|
})
|
|
bankBranchList.value = res.data
|
|
} catch (error) {
|
|
console.log('', error);
|
|
}
|
|
}
|
|
|
|
// 远程搜索
|
|
function remoteGetBank(query: string) {
|
|
if (query) {
|
|
bankNameValue.value = query
|
|
getBankInfoAjax()
|
|
}
|
|
}
|
|
|
|
// 获取银行列表
|
|
async function getBankInfoAjax() {
|
|
try {
|
|
loading.value = true
|
|
const res: any = await getBankInfo({
|
|
page: 1,
|
|
size: 100,
|
|
bankName: bankNameValue.value
|
|
});
|
|
bankList.value = res.records || [];
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
loading.value = false
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select_bank {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
</style> |