picc / admin-no-ui · Files

<template>
  <div>
    <a-card :title="title" :bordered="false">
      <a-button
        v-if="!disShow"
        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"
          :rowKey="(record, index) => index"
          :dataSource="debtInfoList"
          :pagination="false"
          :loading="loading"
          @change="handleTableChange"
        >
          <!-- 字符串超长截取省略号显示-->
          <span slot="esContent" slot-scope="text">
            <j-ellipsis :value="text" :length="10" />
          </span>

          <span v-if="!disShow" slot="action" slot-scope="text, record">
            <!-- <a @click="handleAddModalEdit(title,record)">修改</a>
            <a-divider type="vertical" /> -->
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
              <a-button
              type="link"
              size="small"
              icon="delete"
              style="font-size: 12px"
            >
              删除</a-button
            >
            </a-popconfirm>
          </span>
        </a-table>
      </div>
      <div class="zongfuzhai">
        <p>总负债:</p>
        <p>
          {{ this.$numMoney(Number(zong)) }}
        </p>
      </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 './common/liabilitiesList'
import { deleteCustomerDebtInfo } from '@/api/configApi'

export default {
  name: 'liabilities',
  mixins: [JeecgListMixin],
  components: {
    commonBankAccountModal, // 联系人信息
  },
  props: {
    userType: {
      type: Number,
      default: null,
    },
    debtInfoList: {
      type: Array,
      default: () => {
        return []
      },
    },
    zong: {
      type: String,
      default: '',
    },
    applyNo: {
      type: String,
      default: '',
    },
    disShow: {
      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: 'creditorName',
        },
        {
          title: '借款金额(元)',
          align: 'center',
          width: '100px',
          dataIndex: 'loanMoney',
          customRender: (t, r, index) => {
            return this.$numMoney(t)
          },
        },
        {
          title: '借款开始日期',
          align: 'center',
          dataIndex: 'loanStartTime',
        },
        {
          title: '借款结束日期',
          align: 'center',
          dataIndex: 'loanEndTime',
        },
        {
          title: '还款方式',
          align: 'center',
          dataIndex: 'paymentType',
        },
        {
          title: '利率(%)',
          align: 'center',
          dataIndex: 'rate',
        },
        {
          title: '担保方式',
          align: 'center',
          dataIndex: 'guaranteeType',
        },
        {
          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
    }
  },
  computed: {},
  methods: {
    handleAddModal(title) {
      this.$refs.commonBankAccountModal.add(this.applyNo)
      this.$refs.commonBankAccountModal.title = title ? title : '新增'
      this.$refs.commonBankAccountModal.disableSubmit = false
    },
    handleAddModalEdit(title, 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 }
      deleteCustomerDebtInfo(_p).then((res) => {
        if (res.status.statusCode == 0) {
          this.$emit('liabeditReload')
          this.$message.success(res.status.statusReason)
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
    },
    commonBankAccountModalOk() {
      this.$emit('liabeditReload')
    },
  },
}
</script>
<style>
.zongfuzhai {
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  margin: 10px 0 30px 0;
}
.zongfuzhai p:nth-child(1) {
  margin-right: 15px;
}
</style>