mashangyoujiu/Public/js/select-bank.js

/**
 * 选择新大陆联行表
 */
Vue.component('select-bank-xdl', {
    template: `<el-select style="width: 100%;"
                    :value="selectInfo.lbnk_nm"
                    filterable
                    clearable
                    remote
                    reserve-keyword
                    value-key="lbnk_nm"
                    :disabled="isDisabled"
                    v-load-more="getMoreWcLBnkNo"
                    placeholder="请输入开户行关键词进行搜索"
                    :remote-method="getWcLBnkNo"
                    @change="chooseWcLBnkNo">
                <el-option v-for="item in WcLbnkList"
                        :key="item.lbnk_no"
                        :label="item.lbnk_nm"
                        :value="item">
                </el-option>
            </el-select>`,
    props: {
        'bankNo': {
            type: String,
            default: '',
        },//银行编号
        'bankName': {
            type: String,
            default: '',
        },//银行名称
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
    },
    data() {
        return {
            WcLbnkList: [],
            wc_lbnk_loading: false,
            bank_page: 0,
            bank_keyword: '',
            lbnk_nm: '',
            lbnk_no: '',
            selectInfo: {},
        };
    },
    methods: {
        //选择银行信息
        chooseWcLBnkNo(item) {
            if (item) {
                this.selectInfo = {...item};
            } else {
                this.selectInfo = {};
                this.getWcLBnkNo('');
            }
            this.$emit('update:bankNo', item.lbnk_no);
            this.$emit('update:bankName', item.lbnk_nm);

            this.$emit('change', {
                bankNo: item.lbnk_no,
                bankName: item.lbnk_nm
            });
        },
        //查询银行信息
        getWcLBnkNo(keyword, bol = false, callback = null) {
            this.bank_keyword = keyword;
            this.bank_page = 0;
            this.getMoreWcLBnkNo(bol, callback);
        },
        //查询
        getMoreWcLBnkNo(precise = false, callback = null) {
            if (this.wc_lbnk_loading) return;
            this.wc_lbnk_loading = true;
            let page = this.bank_page + 1;
            $.ajax({
                url: '/index.php/Retail/Component/getXDLWcLBnkNo',
                type: 'post',
                data: {
                    keyword: this.bank_keyword,
                    page: page,
                    precise: precise ? 1 : 0,
                },
                success: (res) => {
                    if (page == 1) {
                        this.WcLbnkList = res.data;
                    } else {
                        this.WcLbnkList.push.apply(this.WcLbnkList, res.data);
                    }
                    this.bank_page = page;
                    this.$nextTick(() => {
                        this.wc_lbnk_loading = false;
                    });
                    if (precise && typeof callback == "function") callback(this.WcLbnkList[0] ? this.WcLbnkList[0] : {});
                },
                error: res => {
                    this.wc_lbnk_loading = false;
                    this.$message.warning('请求发生错误');
                }
            })
        },
    },
    mounted() {
        if (this.bankName) {
            this.getWcLBnkNo(this.bankName, true, (item) => {
                this.chooseWcLBnkNo(item);
            });
        }
    },
    watch: {
        bankName(n, o) {
            if (this.selectInfo.lbnk_nm != n) {
                if (n) {
                    this.getWcLBnkNo(n, true, (item) => {
                        this.chooseWcLBnkNo(item);
                    });
                } else {
                    this.selectInfo = {};
                }
            }
        },
    }
});


/**
 * 选择系统银行
 */
Vue.component('select-system-bank', {
    template: `<el-select v-model="bank"
                          :placeholder="placeholder"
                          :disabled="isDisabled"
                          :size="size"
                          value-key="id"
                          @change="changeBank"
                          clearable filterable>
                    <el-option v-for="item in dataList"
                            :key="item.id"
                            :label="item.bank_name"
                            :value="item">
                    </el-option>
                </el-select>`,
    props: {
        'bankId': {
            type: String,
            default: '',
        },//选择的银行ID
        'bankName': {
            type: String,
            default: '',
        },//选择的银行名称
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
        'placeholder': {
            type: String,
            default: '选择银行'
        },
        'size': {
            type: String,
            default: 'small',
        }
    },
    data() {
        return {
            bank: {},//已选中银行
            dataList: [],// 数据
        };
    },
    methods: {
        //切换银行
        changeBank(val) {
            this.$emit('update:bankId', this.bank.id);
            this.$emit('update:bankName', this.bank.bank_name);
            this.$emit('change', val);
        },
        //获取银行列表
        getBankList(callback) {
            this.dataList = [];
            $.ajax({
                url: '/index.php/Retail/Component/getSystemBank',
                type: "post",
                success: (res) => {
                    if (res.status == 1) {
                        this.dataList = res.data;
                        typeof callback == "function" && callback();
                    }
                },
            })
        },
        unitBank(id, name) {
            if (!id && !name) {
                return {
                    id: '',
                    name: '',
                }
            }
            if (id && name) {
                return {
                    id: id,
                    bank_name: name,
                }
            }
            for (let i in this.dataList) {
                if (this.dataList[i].id == id || this.dataList[i].bank_name == name) {
                    return {
                        id: this.dataList[i].id,
                        bank_name: this.dataList[i].bank_name,
                    }
                }
            }
            return {
                id: '',
                name: '',
            };
        }
    },
    created() {
        this.getBankList(() => {
            this.bank = this.unitBank(this.bankId, this.bankName);
        });
    },
    watch: {
        bankId(n) {
            if (this.bank.id != n) {
                this.bank = this.unitBank(this.bankId, this.bankName);
            }
        },
        bankName(n) {
            if (this.bank.bank_name != n) {
                this.bank = this.unitBank(this.bankId, this.bankName);
            }
        }
    }
});