commonBankAccountTable.vue 4.93 KB
<template>
  <div>
    <a-card :title="title" :bordered="false">
      <!-- <a-button v-if="!disableSubmit" style="margin-bottom:10px;float:right;position:relative;z-index:10;" @click="handleAddModal(titleModal)" type="primary" icon="plus">增加银行卡</a-button> -->
      <div>
        <a-table
          ref="table"
          size="middle"
          bordered
          :columns="bankData"
          :dataSource="collCusBankAccountList"
          :pagination="false"
          :loading="loading"
          :rowKey="(record, index) => index"
          @change="handleTableChange"
        >
          <!-- 字符串超长截取省略号显示-->
          <span slot="esContent" slot-scope="text">
            <j-ellipsis :value="text" :length="10" />
          </span>

          <span v-if="!disableSubmit" slot="action" slot-scope="text, record">
            <a-button
              type="link"
              size="small"
              @click="handleAddModalEdit(title, record)"
              icon="edit"
              style="font-size: 12px"
            >
              修改</a-button
            >
            <!-- <a-divider type="vertical" /> -->
            <!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
              <a>删除</a>
            </a-popconfirm> -->
          </span>
        </a-table>
      </div>
    </a-card>
    <common-bank-account-modal
      ref="commonBankAccountModal"
      @commonBankAccountModalOk="commonBankAccountModalOk"
    ></common-bank-account-modal>
  </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/CoreListMixin'
import commonBankAccountModal from './commonBankAccountModal'
import { deleteCusBankAccount } from '@/api/configApi'

export default {
  name: 'commonBankAccountTable',
  mixins: [JeecgListMixin],
  components: {
    commonBankAccountModal, // 联系人信息
  },
  props: {
    userType: {
      type: Number,
      default: '',
    },
    collCusBankAccountList: {
      type: Array,
      default: () => {
        return []
      },
    },
    customerNo: {
      type: String,
      default: '',
    },
    disableSubmit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: '',
      titleModal: '',
      bankData: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          width: 60,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '开户行名称',
          align: 'center',
          width: '100px',
          dataIndex: 'bankName',
        },
        {
          title: '账户名',
          align: 'center',
          dataIndex: 'bankCardName',
        },
        {
          title: '银行卡号',
          align: 'center',
          dataIndex: 'bankCardNoView',
        },
        {
          title: '银行预留手机号',
          align: 'center',
          dataIndex: 'bankCardPhoneView',
        },
        // {
        //   title: '银行卡类别',
        //   align: 'center',
        //   dataIndex: 'bankCardType',
        //   customRender: function (t, r, index) {
        //     return t == 1 ? '借记卡' : ''
        //   }
        // },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 120,
          fixed: 'right',
        },
      ],
      disableMixinCreated: true,
    }
  },
  created() {
    console.log(this.userType)
    switch (this.userType) {
      case 1:
        this.titleModal = '个人银行账户信息'
        this.title = '个人银行账户信息'
        break
      case 2:
        this.titleModal = '企业银行账户信息'
        this.title = '法定代表人银行账户信息'
        break
      case 3:
        this.titleModal = '企业法人银行账户信息'
        this.title = '法定代表人银行账户信息'
        break
    }
  },
  methods: {
    handleAddModal(title) {
      this.$refs.commonBankAccountModal.add(this.customerNo)
      this.$refs.commonBankAccountModal.title = title ? title : '新增'
      this.$refs.commonBankAccountModal.disableSubmit = false
    },
    handleAddModalEdit(title, record) {
      // console.log('1111111111',record)
      this.$refs.commonBankAccountModal.edit(record)
      this.$refs.commonBankAccountModal.title = title ? title : '修改'
      this.$refs.commonBankAccountModal.disableSubmit = false
    },
    handleDelete(record) {
      console.log(record)
      let _p = { id: record.id }
      deleteCusBankAccount(_p).then((res) => {
        if (res.status.statusCode == 0) {
          this.$emit('editReload')
          this.$message.success(res.status.statusReason)
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
    },
    commonBankAccountModalOk() {
      this.$emit('editReload')
    },
  },
}
</script>
<style>
</style>