deteailAccount.vue 6.23 KB
<template>
  <div>
    <a-card :bordered="false">
      <a-row v-if="customerType == 2">
        <a-col :span="8">客户名称:{{ detailData[0].enterpriseName }}</a-col>
        <a-col :span="8">统一社会信用代码:{{ detailData[0].orgCode }}</a-col>
        <a-col :span="8">企业电话:{{ detailData[0].mobilePhoneView }}</a-col>
        <a-col :span="8">账户状态:{{ getStatus() }}</a-col>
      </a-row>
      <a-row v-else>
        <a-col :span="8">客户名称:{{ detailData[0].idCardName }}</a-col>
        <a-col :span="8">身份证号码:{{detailData[0].idCardName}}</a-col>
        <a-col :span="8">手机号:{{ detailData[0].mobilePhoneView }}</a-col>
        <a-col :span="8">账户状态:{{ getStatus() }}</a-col>
      </a-row>
    </a-card>

    <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="{ hideOnSinglePage: true }" :scroll="{ x: 800 }" :defaultExpandAllRows="true">
      <span slot="actionChange" slot-scope="text, record">
        <a-switch size="small" v-show="record.creditLevel == 2" :checked="record.nodeStatus == 1 ? true : false" @change="onChange(record)" />
      </span>
      <span slot="actionOpen" slot-scope="text, record">
        <a style="margin-right: 10px;" v-show="record.creditLevel == 2" @click="detailAccount(record, 'detail')">交易流水</a>
      </span>
    </a-table>
    <liushui ref="modalForm" @queren="queren" @cancel="close"></liushui>
  </div>
</template>

<script>
import liushui from './liushui'
import {
  creditAmountDetail,
  creditAmountModify,
  queryCreditTransEnterprisePage,
  queryCreditTransLegalPersonPage,
  queryCreditTransPersonalPage
} from '@/api/configApi'
export default {
  name: 'deteailModal',
  props: ['detailData', 'dataSource', 'customerType'],
  components: {
    liushui
  },
  data () {
    return {
      title: '额度详情',
      status: '默认',
      // dataSource: [],
      columns: [
        {
          title: '层级',
          // dataIndex: '',
          // key: 'rowIndex',
          width: '150px',
          align: 'center',
          //   fixed: 'left',
          // customRender: function(t, r, index) {
          //   return parseInt(index) + 1
          // }
          dataIndex: 'nodeCode'
        },
        {
          title: '额度名称',
          align: 'center',
          width: 100,
          dataIndex: 'nodeName'
        },

        {
          title: '额度(元)',
          align: 'center',
          //   width: 100,
          dataIndex: 'creditAmount'
        },
        // {
        //   title: '冻结',
        //   align: 'center',
        //   // width: 100,
        //   dataIndex: 'creditFrozen'
        // },
        {
          title: '已用',
          align: 'center',
          // width: 100,
          dataIndex: 'creditAmountUsed'
        },
        {
          title: '可用',
          align: 'center',
          // width: 100,
          dataIndex: 'creditLimit2',
          customRender: function (t, r, index) {
            return r.creditAmount - r.creditAmountUsed - r.creditAmountFloat
          }
        },
        {
          title: '在途',
          align: 'center',
          // width: 100,
          dataIndex: 'creditAmountFloat'
        },
        {
          title: '占比',
          align: 'center',
          // width: 100,
          // scopedSlots: { customRender: 'zhanbi' },
          dataIndex: 'nodeExtendsRatio',
          customRender: function (t, r, index) {
            return !!r.nodeExtendsRatio ? r.nodeExtendsRatio + '%' : '—'
          }
        },
        {
          title: '生效日期',
          align: 'center',
          // width: 100,

          dataIndex: 'creditStartDate'
        },
        {
          title: '失效日期',
          align: 'center',
          // width: 100,

          dataIndex: 'creditEndDate'
        },
        {
          title: '节点状态',
          dataIndex: 'nodeStatus',
          scopedSlots: { customRender: 'actionChange' },
          align: 'center',
          width: 100
          // fixed: 'right'
        },
        {
          title: '操作',
          dataIndex: 'action1',
          scopedSlots: { customRender: 'actionOpen' },
          align: 'center',
          width: 100
          // fixed: 'right'
        }
      ]
    }
  },
  created () {
    console.log('creat')
  },
  mounted () {
    console.log(this.detailData)
    // this.status = this.getStatus()
    // this.getDeteail()
    // this.dataSource = this.detailData;
  },
  methods: {
    getStatus () {
      console.log(this.detailData[0].creditStatus)
      switch (this.detailData[0].creditStatus) {
        case 1:
          return '正常'
          break
        case 2:
          return '过期'
          break
        case 3:
          return '锁定'
          break
      }
    },
    queren () {
      this.$emit('showxiangqing')
    },
    close () {
      this.$emit('cancel')
    },
    detailAccount (record, type) {
      console.log('----1')
      this.$refs.modalForm.title = '交易流水'
      this.$refs.modalForm.edit(record, this.customerType)
    },
    // getDeteail() {
    //   let formData = { customerType: this.customerType, id: this.detailData[0].id }
    //   // let formData = {customerType:this.customerType}
    //   creditAmountDetail(formData)
    //     .then(res => {
    //       console.log(res.result.creditAmountTree)
    //       if (res.status.statusCode == 0) {
    //         // this.$message.success(res.status.statusReason)
    //         this.dataSource.push(res.result.creditAmountTree)
    //       } else {
    //         this.$message.warning(res.status.statusReason)
    //       }
    //     })
    //     .finally(() => {
    //       this.confirmLoading = false
    //       this.close()
    //     })
    // },

    // 更改状态
    onChange: function (v) {
      let _p = {
        nodeStatus: v.nodeStatus == 1 ? 2 : 1,
        customerType: this.customerType,
        id: v.id
      }
      creditAmountModify(_p)
        .then(res => {
          if (res.status.statusCode == 0) {
            this.$emit('getDeteail')
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        .finally(() => {
          // this.$message.warning(res.status.statusReason)
        })
    }
  }
}
</script>