index.vue

<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row :span="24" type="flex" align="middle" justify="space-between">
          <el-col :span="20">
            <p style="font-size: 18px;">账户管理</p>
          </el-col>
          <el-col :span="4">
            <el-button
              style='float:right'
              :disabled="isAddbank"
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增
            </el-button>
          </el-col>
        </el-row>
      </div>

      <el-table :height="tableHeight" :data="bankcardList"
                @selection-change="handleSelectionChange">
        <el-table-column label="商户ID" align="center" prop="id"/>
        <el-table-column label="开户名" align="center" prop="bank_account_name"/>
        <el-table-column label="银行名称" align="center" prop="bank_name"/>
        <el-table-column label="开户行" align="center" prop="bank_branch_name"/>
        <el-table-column label="账号" align="center" prop="bank_account_sn"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog :visible.sync="bank" :title="banktitle">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" size="small">
          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="银行名称" prop="bankName">
                <el-select v-model="form.bankName" placeholder="请选择银行名称" style="width: 100%">
                  <el-option v-for="item in bankList" :key="item.value" :label="item.value"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="开户行" prop="bank_branch_name">
                <el-input v-model="form.bank_branch_name" placeholder="请输入开户行"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="户名" prop="bankAccountName">
                <el-input v-model="form.bankAccountName" placeholder="请输入户名"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="账号" prop="BankAccountSn">
                <el-input v-model="form.BankAccountSn" placeholder="请输入账号"/>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel" size="small">取 消</el-button>
          <el-button type="primary" @click="submitForm" size="small">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>
<script>
  import {listBankcard, getBankcard, delBankcard, addBankcard, listBankname} from '@/api/module/bankcard'

  export default {
    name: "bankcard",
    data() {
      return {
        fullHeight: 0,
        tableHeight: 0,
        state: [
          // {label: "支付宝", value: 2},
          {label: "银行卡", value: 1},
        ],
        //银行
        bankList: [],
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商户银行卡表格数据
        bankcardList: [],
        // 弹出层标题
        title: "",
        banktitle: "对公账户（数量最多为3个）",
        // 是否显示弹出层
        open: false,
        isAddbank: false,
        bank: false,
        zfb: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          sellerId: 0,
        },
        // 表单参数
        form: {

        },
        // 表单校验
        rules: {
          bankName: [
            {required: true, message: "银行名称不能为空", trigger: "change"}
          ],
          bank_branch_name: [
            {required: true, message: "开户行不能为空", trigger: "blur"}
          ],
          bankAccountName: [
            {required: true, message: "户名不能为空", trigger: "blur"}
          ],
          BankAccountSn: [
            {required: true, message: "账号不能为空", trigger: "blur"}
          ],
        },
      };
    },
    created() {
      this.queryParams.sellerId = this.$store.state.user.sellerid;
      this.getList();
      this.getBankNameList();
      // this.getBankname();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })

    },
    watch: {
      fullHeight(val) {
        this.tableHeight = val
      }
    },
    methods: {
      //获取银行名称列表
      getBankNameList() {
        listBankname().then(res => {
          if(res.data) {
            this.bankList = res.data
          }
        });
      },
      //类型改变
      // selectChanged(v) {
      //   if (v == 1) {
      //     this.bank = true
      //     this.zfb = false
      //   } else if (v == 2) {
      //     this.bank = false
      //     this.zfb = true
      //   } else {
      //     this.bank = false
      //     this.zfb = true
      //   }
      // },
      //根据银行类别判断
      btypa(row) {
        var lx = ""
        if (row.TxType == 1) {
          lx = "银行卡"
        } else if (row.TxType == 2) {
          lx = "支付宝"
        }
        return lx
      },
      /** 查询商户银行卡列表 */
      getList() {
        listBankcard(this.queryParams).then(response => {
          this.bankcardList = response.data.data;
          // debugger
          this.total = response.data.count;
          if (this.total >= 3) {
            this.isAddbank = true;
          }else {
            this.isAddbank = false;
          }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.bank = false;
        this.zfb = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.bank = true;
        this.title = "添加商户银行卡";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getBankcard(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改商户银行卡";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.sellerId = this.queryParams.sellerId;
            addBankcard(this.form).then(response => {
              if (response.code === 1) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.bank = false;
                this.zfb = false;
                this.getList();
              }else {
                this.message({type:'error',message: response.message});
              }
            });

          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id
        this.$confirm('是否确认删除商户银行卡编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async() => {
          this.loading = true;
          let result = await delBankcard(ids);
          if(result.code === 1) {
            this.$message({type:'success',message:'删除成功'});
            this.getList()
          }
          this.loading = false;
        }).catch(()=> {});
      },
    } //methods结束
  };
</script>
<style scoped>

</style>