<template>
|
<div class="bank-selector-main">
|
<div class="selector-condtion">
|
<el-input
|
class="cond-input"
|
placeholder="请输入内容"
|
v-model="bankName"
|
clearable
|
size="small"
|
>
|
</el-input>
|
<el-button size="small" type="primary" @click="getSelectSubBranch"
|
>查询</el-button
|
>
|
</div>
|
<ProTable
|
:pageInfo="pageInfo"
|
@doAction="doAction"
|
@handleRowCurrentChange="handleRowCurrentChange"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
:isRadio="true"
|
:isAutoIndex="false"
|
:list="bankList"
|
:header="tableHeader"
|
:loading="loading"
|
/>
|
<div class="selector-button">
|
<el-button size="small" @click="$emit('handleSelectorCancel')"
|
>取消</el-button
|
>
|
<el-button size="small" type="primary" @click="handleSelectorSubmit"
|
>确定</el-button
|
>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { selectSubBranch } from '../../../../api/productManage.api';
|
import ProTable from '../../../../components/ProTable.vue';
|
export default {
|
props: {
|
defBankList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
branchName: {
|
type: String,
|
default: ''
|
},
|
bankCode: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
bankName: this.branchName,
|
bankList: [],
|
loading: false,
|
tableHeader: [
|
{
|
prop: 'checked',
|
type: 'radio',
|
label: '',
|
width: '50px'
|
},
|
{
|
prop: 'value',
|
label: '银行代码',
|
width: '150px'
|
},
|
{
|
prop: 'label',
|
label: '银行名称',
|
width: 'auto'
|
},
|
{
|
prop: 'bankCode',
|
label: '总行代码',
|
width: '150'
|
}
|
],
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
checkedBank: ''
|
}
|
},
|
computed: {},
|
created() {},
|
mounted() {
|
this.getSelectSubBranch()
|
},
|
watch: {},
|
methods: {
|
doAction() {
|
console.log('sss')
|
},
|
handleSelectorSubmit() {
|
const { checkedBank } = this
|
if (checkedBank && checkedBank.value) {
|
this.$emit('handleSelectorSubmit', checkedBank)
|
} else {
|
this.$message.info('请选择支行！')
|
}
|
},
|
handleRowCurrentChange(selRow) {
|
if (!selRow) {
|
return
|
}
|
const { bankList } = this
|
console.log('selRow====', selRow)
|
const newList = bankList.map(item => {
|
const newItem = { ...item }
|
newItem.checked = newItem.value === selRow.value
|
return newItem
|
})
|
this.checkedBank = selRow
|
this.$set(this, 'bankList', newList)
|
},
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val
|
this.getSelectSubBranch()
|
},
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val
|
this.getSelectSubBranch()
|
},
|
// 获取支行options
|
async getSelectSubBranch() {
|
const { bankCode, bankName } = this
|
const { currentPage, pageSize } = this.pageInfo
|
const params = {
|
bankcode: bankCode,
|
bankname: bankName,
|
subBranchCode: '',
|
currentPage,
|
pageSize
|
}
|
const subBranchRes = await selectSubBranch(params)
|
if (!subBranchRes || subBranchRes.code !== '00') {
|
return '';
|
}
|
const records = subBranchRes.result.records
|
this.bankList = records.map(rec => {
|
const newRec = { ...rec }
|
newRec.checked = false
|
newRec.bankCode = this.bankCode
|
return newRec
|
})
|
this.pageInfo.total = subBranchRes.result.total
|
}
|
},
|
components: {
|
ProTable
|
}
|
}
|
</script>
|
|
<style scoped lang="postcss">
|
.bank-selector-main {
|
& .pro_create_table {
|
padding-bottom: 0px;
|
}
|
& .selector-condtion {
|
display: flex;
|
justify-content: left;
|
padding-bottom: 30px;
|
& .el-button--small {
|
height: 30px;
|
padding: 5px 15px;
|
}
|
& .cond-input {
|
width: 350px;
|
margin-right: 20px;
|
}
|
}
|
& .selector-button {
|
display: flex;
|
justify-content: center;
|
& .el-button--small {
|
height: 32px;
|
line-height: 10px;
|
padding: 10px 15px;
|
}
|
}
|
}
|
</style>
|
