zhaoxiaoqiang1
2026-01-04 f1d30d03186c79ca2cbcfe60d6d2ce7d73fba97b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<template>
  <div class="branch">
    <el-dialog :visible.sync="branchVisible" :close-on-click-modal='false' @close="closeDialog" center>
      <el-form ref="form" :model="form" label-width="95px" inline size="small">
        <el-form-item label="银行名称" style="margin-right:30px">
          <el-input v-model="form.bankname" onkeypress="if(event.keyCode == 13) return false;" placeholder="支持模糊检索,点击支行选中"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="handleSearch(form)">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table 
        stripe
        :data="branchData" 
        highlight-current-row
        @current-change="getCurrentRow"
        :header-cell-style="{background:'#f5f5f5',color:'#222222'}"
        empty-text='暂无该支行,请仅使用城市名进行模糊检索如“深圳”,如支行仍不全请就近选择'
      >
        <el-table-column prop="bankno" label="银行代码" width="180"></el-table-column>
        <el-table-column prop="bankname" label="银行名称"></el-table-column>
        <el-table-column prop="banacode" label="总行代码" width="120"></el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="10"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="closeDialog">返回</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  qryBankBranchList
} from "@/api/product";
export default {
  props:['visible','bank'],
  data () {
    return {
      branchData:[],
      bankData:'',
      currentPage:1,
      total:0,
      form:{
        currentPage:1,
        pageSize:10,
        bankcode:this.bank,
        bankname:''
      },
    }
  },
  computed: {
    branchVisible:{
      get(){
        return this.visible
      },
      set(){}
    }
  },
  created () {
    this.getBankBranchList()
  },
  methods: {
    closeDialog(){
      this.$emit('closeBranch',false)
    },
    //设置每页多少条
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getBankBranchList(this.form);
    },
    //查询当前页
    handleCurrentChange(val) {
      this.form.currentPage = val;
      this.getBankBranchList(this.form);
    },
    // 获取当前选中行
    getCurrentRow(row){
      this.bankData = row
    },
    // 搜索
    handleSearch(form){
      form.currentPage = 1
      this.getBankBranchList()
    },
    // 查询银行分支行
    getBankBranchList(){
      qryBankBranchList(this.form).then(res=>{
        this.branchData = res.result.records
        this.total = res.result.total
      })
    },
    // 点击确定将参数回传给父组件并关闭弹窗
    submit(){
      this.$emit('sendBranch',this.bankData)
      this.$emit('closeBranch',false)
    }
  }
}
</script>
<style lang="stylus">
.branch
  .el-dialog
    width auto
    max-width calc(100% - 180px)
    min-width 850px
    max-height 100%
    overflow hidden
    margin 0 !important
    position absolute
    left 50%
    top 50%
    transform translate(-50%,-50%)
    .el-dialog__header
      padding 0
    .el-dialog__body
      padding 20px
    .el-dialog__footer
      padding 0 20px 20px 
      .el-button
        width: 120px
        font-size: 14px
        line-height: 20px
        padding: 5px 0
        &+.el-button
          margin-left 40px
</style>