【津贴模块，津贴申请和我的资料增加开户银行支行字段】银行名称值变化，开户银行分行名称清空，开户银行分行编码清空

2025-12-09 05:16:44 +08:00 · 2022-07-14 10:16:09 +08:00
parent 234c6d71de
commit d3e230c401
5 changed files with 202 additions and 14 deletions
--- a/src/api/ebiz/sale/sale.js
+++ b/src/api/ebiz/sale/sale.js
@@ -156,6 +156,15 @@ export function getBankList(data) {
  })
 }

+// 获取开户银行支行的信息
+export function getBranchCodeValue(data) {
+  return request({
+    url: getUrl('/app/code/getBranchCodeValue', 1),
+    method: 'post',
+    data
+  })
+}
+
 // 获取微信人脸token
 export function getToken(data) {
  return request({
--- a/src/components/ebiz/account/SelectBankBranch.vue
+++ b/src/components/ebiz/account/SelectBankBranch.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <!-- 开户银行支行选择 -->
+    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
+      <div v-if="inputShowBranch">
+        <van-field v-model="inputvalue" left-icon="search" placeholder="请输入开户银行支行" />
+      </div>
+      <div class="vanlist">
+        <van-list>
+          <van-cell v-for="item in bankList" :key="item.branchCode" :title="item.bankBranchName" class="text-center" @click="clickList(item)" />
+        </van-list>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Popup, Field, List } from 'vant'
+
+Vue.use(Popup)
+  .use(Field)
+  .use(List)
+import { getBranchCodeValue } from '@/api/ebiz/sale/sale'
+export default {
+  data() {
+    return {
+      inputvalue: '',
+      // 银行列表
+      bankList: [],
+      bankList1: []
+    }
+  },
+  components: {},
+  name: 'SelectBankBranch',
+  props: {
+    bankCode: {
+      type: String
+    },
+    islistShowBranch: {
+      type: Boolean,
+      default: false
+    },
+    inputShowBranch: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  created() {
+    // this.getBankList()
+  },
+  watch: {
+    inputvalue(val) {
+      if (val) {
+        this.bankList = this.bankList.filter(item => {
+          return item.bankName.indexOf(val) != -1
+        })
+      } else {
+        this.bankList = this.bankList1
+      }
+      document.querySelector('.vanlist').scrollTo(0, 0) //重置滚动条
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.islistShowBranch
+      },
+      set(value) {
+        this.$emit('update:islistShowBranch', value)
+      }
+    }
+  },
+  methods: {
+    // 获取银行卡列表
+    getBankList(bankCode) {
+      let data = {
+        code: bankCode
+      }
+      getBranchCodeValue(data).then(res => {
+        if (res.result == '0') {
+          this.bankList = res.content
+          this.bankList1 = res.content
+          this.$emit('getBankList', this.bankList)
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    // 选择银行卡
+    clickList(item) {
+      this.$emit('getBankBranch', item)
+      this.show = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.vanlist {
+  height: 100%;
+  overflow: auto;
+}
+</style>
--- a/src/views/ebiz/allowance/application/AccountInfo.vue
+++ b/src/views/ebiz/allowance/application/AccountInfo.vue
@@ -20,6 +20,12 @@
                   v-validate="'required'" data-vv-name='开户银行' />
      </van-cell-group>

+      <van-cell-group class='pl20 fs14'>
+        <van-field v-model='accountBankInfo.bankBranchName' label='开户银行支行' placeholder='请选择开户银行支行' required
+                   @click='islistShowBranch = true' readonly
+                   v-validate="'required'" data-vv-name='开户银行支行' />
+      </van-cell-group>
+
      <van-cell-group class='pl20 flex align-items-c'>
        <van-field v-model='accountBankInfo.bankCardNo' label='银行卡号' maxlength='19' placeholder='手工录入或点击右侧银行卡扫描'
                   clearable
@@ -58,6 +64,10 @@
    <SelectBankName :inputShow='inputShow' :listShow.sync='islistShow' :operateType="'bank_type'"
                    @getBank='getBank'></SelectBankName>

+    <!--开户银行支行选择-->
+    <SelectBankBranch ref="selectBankBranch" :inputShowBranch='inputShowBranch' :islistShowBranch.sync='islistShowBranch' :bankCode="accountBankInfo.bankCode"
+                    @getBankBranch='getBankBranch'></SelectBankBranch>
+
    <!-- 银行卡扫描 -->
    <BankCardScan :scanShow='isScan' :clear='isClear' @getScanInfo='getBankCardInfo'></BankCardScan>

@@ -87,6 +97,7 @@ import { saveOrUpdateAllowanceUrl, getAllowanceDetail } from '@/api/ebiz/allowan
 import BankCardScan from '@/components/ebiz/sale/BankCardScan'
 import IndexBar from '@/components/ebiz/allowance/application/IndexBar'
 import SelectBankName from '@/components/ebiz/account/SelectBankName'
+import SelectBankBranch from '@/components/ebiz/account/SelectBankBranch'
 import areaList from '@/assets/js/utils/area'
 import { getWhitelist } from '@/api/ebiz/whitelist'

@@ -105,6 +116,7 @@ export default {
    [SwitchCell.name]: SwitchCell,
    BankCardScan,
    SelectBankName,
+    SelectBankBranch,
    [Icon.name]: Icon,
    [IndexBar.name]: IndexBar,
    [Area.name]: Area,
@@ -122,6 +134,8 @@ export default {
        bankAreaCode: '', // 银行所在地区编码
        bankCardNo: '', // 银行卡号
        bankName: '', // 银行名称
+        bankBranchName: '', // 开户银行支行名称
+        bankBranchCode: '', // 开户银行支行编码
        bankCode: '', // 银行编码
        mobile: '', // 手机号码
        isSelf: 0 //  是否是享受人本人银行卡 1:是; 0:不是
@@ -133,6 +147,8 @@ export default {
      isClear: false,  //是否清空
      inputShow: true, //模糊查询功能
      islistShow: false, //控制显示或隐藏选择银行的弹窗的变量
+      inputShowBranch: true, //开户银行支行--模糊查询功能
+      islistShowBranch: false, //开户银行支行--控制显示或隐藏选择银行的弹窗的变量
      isPassedCardCheck: false,
      allowancePageFlag: '2', // 定义顶部导航记录当前展示的是第几个页面或流程的标识
      // 从缓存中获取在父母列表中所选中的人（父亲或母亲）的申请人数据，享受人数据，账户信息数据，影像资料数据的数据对象
@@ -268,6 +284,12 @@ export default {
      this.accountBankInfo.bankName = data.bankName
      // 赋值银行编码
      this.accountBankInfo.bankCode = data.bankCode
+      // 调用子组件的方法，获取开户银行分行列表
+      this.$refs.selectBankBranch.getBankList(data.bankCode)
+      // 赋值开户银行支行名称
+      this.accountBankInfo.bankBranchName = data.bankBranchName
+      // 赋值开户银行支行编码
+      this.accountBankInfo.bankBranchCode = data.bankBranchCode
      // 赋值手机号码
      this.accountBankInfo.mobile = data.mobile
      // 赋值是否是享受人本人银行卡的单选项
@@ -383,8 +405,24 @@ export default {
      this.accountBankInfo.bankName = bank.bankName
      // 获取银行编码，并赋值给变量
      this.accountBankInfo.bankCode = bank.code
+      this.$refs.selectBankBranch.getBankList(bank.code)
+      // 银行名称值变化，开户银行分行名称清空
+      this.accountBankInfo.bankBranchName = ''
+      // 银行名称值变化，开户银行分行编码清空
+      this.accountBankInfo.bankBranchCode = ''
+    },
+    /**
+     * @Description: 确认选择开户银行分行的方法
+     * @author:zhangqi
+     * @Date:2021-09-10
+     */
+    getBankBranch(bank) {
+      console.log(bank,'bank')
+      // 获取开户银行分行名称，并赋值给变量
+      this.accountBankInfo.bankBranchName = bank.bankBranchName
+      // 获取开户银行分行编码，并赋值给变量
+      this.accountBankInfo.bankBranchCode = bank.branchCode
    },
-
    /**
     * @Description: 点击输入银行卡号最右侧‘扫描’按钮时，触发扫描银行卡的方法
     * @author:zhangqi
--- a/src/views/ebiz/allowance/application/List.vue
+++ b/src/views/ebiz/allowance/application/List.vue
@@ -375,16 +375,16 @@ export default {
    //不符合条件时，阻断toast提示，触发按钮包括“津贴申请列表-未审批”【编辑】、“津贴申请列表-审批通过”【再次申请】、【点击申请】
    async isConditionsFunc(type, order) {
      // type 0点击申请 1编辑 2再次申请
-      const res = await allowanceCheck({})
-      if (res.result == '1') {
-        Toast({
-          className: 'textLeft',
-          duration: 3000, // 持续展示 toast
-          forbidClick: true,
-          message: res.resultMessage
-        })
-        return
-      }
+      // const res = await allowanceCheck({})
+      // if (res.result == '1') {
+      //   Toast({
+      //     className: 'textLeft',
+      //     duration: 3000, // 持续展示 toast
+      //     forbidClick: true,
+      //     message: res.resultMessage
+      //   })
+      //   return
+      // }

      if (type == 0) {
        this.applicationFunc()
--- a/src/views/ebiz/allowance/myInfo/AccountInfo.vue
+++ b/src/views/ebiz/allowance/myInfo/AccountInfo.vue
@@ -19,7 +19,11 @@
                   @click='islistShow = true' readonly
                   v-validate="'required'" data-vv-name='开户银行' />
      </van-cell-group>
-
+      <van-cell-group class='pl20 fs14'>
+        <van-field v-model='accountBankInfo.bankBranchName' label='开户银行支行' placeholder='请选择开户银行支行' required
+                   @click='islistShowBranch = true' readonly
+                   v-validate="'required'" data-vv-name='开户银行支行' />
+      </van-cell-group>
      <van-cell-group class='pl20 flex align-items-c'>
        <van-field v-model='accountBankInfo.bankCardNo' label='银行卡号' maxlength='19' placeholder='手工录入或点击右侧银行卡扫描'
                   clearable
@@ -57,6 +61,10 @@
    <!--开户银行选择-->
    <SelectBankName :inputShow='inputShow' :listShow.sync='islistShow' :operateType="'bank_type'"
                    @getBank='getBank'></SelectBankName>
+    
+    <!--开户银行支行选择-->
+    <SelectBankBranch ref="selectBankBranch" :inputShowBranch='inputShowBranch' :islistShowBranch.sync='islistShowBranch' :bankCode="accountBankInfo.bankCode"
+                    @getBankBranch='getBankBranch'></SelectBankBranch>

    <!-- 银行卡扫描 -->
    <BankCardScan :scanShow='isScan' :clear='isClear' @getScanInfo='getBankCardInfo'></BankCardScan>
@@ -87,6 +95,7 @@ import { getAllowanceBaseDetail, saveOrUpdateAllowanceBase } from '@/api/ebiz/al
 import BankCardScan from '@/components/ebiz/sale/BankCardScan'
 import IndexBar from '@/components/ebiz/allowance/myInfo/IndexBar'
 import SelectBankName from '@/components/ebiz/account/SelectBankName'
+import SelectBankBranch from '@/components/ebiz/account/SelectBankBranch'
 import areaList from '@/assets/js/utils/area'
 import { getWhitelist } from '@/api/ebiz/whitelist'

@@ -105,6 +114,7 @@ export default {
    [SwitchCell.name]: SwitchCell,
    BankCardScan,
    SelectBankName,
+    SelectBankBranch,
    [Icon.name]: Icon,
    [IndexBar.name]: IndexBar,
    [Area.name]: Area,
@@ -123,7 +133,9 @@ export default {
        bankCardNo: '', // 银行卡号
        bankName: '', // 银行名称
        bankCode: '', // 银行编码
-        mobile: '', // 手机号码
+        bankBranchName: '', // 开户银行支行名称
+        bankBranchCode: '', // 开户银行支行编码
+        mobile: '', // 开户银行支行编码
        isSelf: 0 //  是否是享受人本人银行卡 1:是; 0:不是
      },
      allowanceUserInfo: {}, // 定义存储申请人信息与享受人信息的数据的对象
@@ -133,6 +145,8 @@ export default {
      isClear: false,  //是否清空
      inputShow: true, //模糊查询功能
      islistShow: false, //控制显示或隐藏选择银行的弹窗的变量
+      inputShowBranch: true, //开户银行支行--模糊查询功能
+      islistShowBranch: false, //开户银行支行--控制显示或隐藏选择银行的弹窗的变量
      isPassedCardCheck: false,
      allowanceMyInfoPageFlag: '2' // 定义顶部导航记录当前展示的是第几个页面或流程的标识
    }
@@ -231,6 +245,12 @@ export default {
      this.accountBankInfo.bankName = data.bankName
      // 赋值银行编码
      this.accountBankInfo.bankCode = data.bankCode
+      // 调用子组件的方法，获取开户银行分行列表
+      this.$refs.selectBankBranch.getBankList(data.bankCode)
+      // 赋值开户银行支行名称
+      this.accountBankInfo.bankBranchName = data.bankBranchName
+      // 赋值开户银行支行编码
+      this.accountBankInfo.bankBranchCode = data.bankBranchCode
      // 赋值手机号码
      this.accountBankInfo.mobile = data.mobile
      // 赋值是否是享受人本人银行卡的单选项
@@ -338,8 +358,25 @@ export default {
      this.accountBankInfo.bankName = bank.bankName
      // 获取银行编码，并赋值给变量
      this.accountBankInfo.bankCode = bank.code
+      // 调用子组件的方法，获取开户银行分行列表
+      this.$refs.selectBankBranch.getBankList(bank.code)
+      // 银行名称值变化，开户银行分行名称清空
+      this.accountBankInfo.bankBranchName = ''
+      // 银行名称值变化，开户银行分行编码清空
+      this.accountBankInfo.bankBranchCode = ''
+    },
+    /**
+     * @Description: 确认选择开户银行分行的方法
+     * @author:zhangqi
+     * @Date:2021-09-10
+     */
+    getBankBranch(bank) {
+      console.log(bank,'bank')
+      // 获取开户银行分行名称，并赋值给变量
+      this.accountBankInfo.bankBranchName = bank.bankBranchName
+      // 获取开户银行分行编码，并赋值给变量
+      this.accountBankInfo.bankBranchCode = bank.branchCode
    },
-
    /**
     * @Description: 点击输入银行卡号最右侧‘扫描’按钮时，触发扫描银行卡的方法
     * @author:zhangqi