PersonalUseCreditDetailModal.vue 10.9 KB
<template>
  <a-modal 
    :title="title"
    :width="1080"
    :centered='true'
    :maskClosable="false"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText
    class="scoped-person">
    <div style="text-align: right;float: right;padding-top: 5px;padding-right: 30px;"><a-button type="primary" v-show="showApprovalBtn" @click="handleApproval">审批</a-button></div>
    <a-tabs
      defaultActiveKey="1" 
      v-model="defaultTabKey" 
      @change="handleTabsChange"
      :animated="false">

      <a-tab-pane tab="借款详情" key="1">
        <a-spin :spinning="confirmLoading">
          <a-form :form="form">
            <a-card title="个人基本信息" v-if="customerType === 1" :bordered="false">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="客户名称" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.idCardName}}</div>
                  </a-form-item>
                </a-col>
                  <a-col :span="12">
                  <a-form-item label="身份证号" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                      <div class="ant-input">{{model.idCardNoView}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="手机号" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.mobilePhoneView}}</div>
                  </a-form-item>
                </a-col>
                
              </a-row>
            </a-card>
            <a-card title="企业基本信息" v-if="customerType === 2" :bordered="false">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="企业名称" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.enterpriseName}}</div>
                  </a-form-item>
                </a-col>
                  <a-col :span="12">
                  <a-form-item label="统一社会信用代码" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                      <div class="ant-input">{{model.orgCode}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="经办人名称" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.contactsName}}</div>
                  </a-form-item>
                </a-col>
                 <a-col :span="12">
                  <a-form-item label="经办人手机号" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.contactsPhone}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <a-card title="用信申请信息" :bordered="false">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="借款订单号" :labelCol="{span:6}" :wrapperCol="{span:18}">
                    <div class="ant-input">{{model.orderNo}}</div>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="申请时间" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input"> {{model.applyDate}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="申请金额(元):" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.applyMoney}}</div>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="借款审批状态:" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.status}}
                      <!-- <span v-for="(item,index) in loanApplyStatusCode" :key="index">
                          <span v-if="item.name == model.status">{{item.title}}</span>
                      </span> -->
                    </div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="产品编号:" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.productNo}}</div>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="申请产品名称:" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.productName}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
              
                <a-col :span="12">
                  <a-form-item label="账单期限:" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input"> {{model.term}}{{model.termType}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="还款方式:" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.repaymentType}}</div>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="还款日:" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.repaymentDay}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="产品利率(%):" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.interestRate}}</div>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="产品逾期利率(%):" :labelCol="{span:8}" :wrapperCol="{span:16}" >
                    <div class="ant-input">{{model.penaltyRate}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="服务费用合计(元):" :labelCol="{span:8}" :wrapperCol="{span:16}" >
                    <div class="ant-input"> {{model.chargeSumMoney}}</div>
                  </a-form-item>
                </a-col>
               
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="资金方编号:" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.fundNo}}</div>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="资金方名称:" :labelCol="{span:6}" :wrapperCol="{span:18}" >
                    <div class="ant-input">{{model.fundName}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            
        
          </a-form>
        </a-spin>
      </a-tab-pane>

      <a-tab-pane tab="审批记录" key="2" forceRender>
        <common-approval-record :strategyType="2" ref="approval" :showTask.sync="showApprovalBtn"></common-approval-record>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
import Vue from 'vue'
import pick from 'lodash.pick'
import commonApprovalRecord from './commonApprovalRecord' // tab切换 审批记录
import { personalDetailLoanApply, enterpriseDetailLoanApply } from '@/api/insys'
import { creditAmountDetail } from '@/api/configApi'
import { JeecgListMixin } from '@/mixins/CoreListMixin'
import moment from 'moment'
import * as params from '@/data/params'
export default {
  name: 'PersonalInformationListModal',
  mixins: [JeecgListMixin],
  components: {
    commonApprovalRecord,//审批记录
  },
  props:{
    showApprovalBtn:{
      type: Boolean,
      default: null,
    }
  },
  data () {
    return {
      customerType: null,
      visible: false,
      confirmLoading: false,
      confirmDirty: false,
      formItemLayout: '',
      title: '',
      model: {},
      modelRecord:{},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      dataSourceQuota:[],
      disableMixinCreated: true,
      loanApplyStatusCode:Vue.ls.get('LOAN_APPLY_STATUS_CODE'),
      defaultTabKey:"1"
    }
  },
  methods: {
    show (record) {
      let that = this
      this.customerType = record.customerType;
      this.defaultTabKey = '1'
      this.modelRecord = record;
      let _p = {orderNo: record.applyNo}, api;
      if (record.customerType == 1) {
        that.title = '个人借款详细';
        api = personalDetailLoanApply(_p);
      } else if (record.customerType == 2) {
        that.title = '企业借款详细';
        api = enterpriseDetailLoanApply(_p);
      }
      api.then(res => {
        if (res.status.statusCode == 0) {
          let formData = Object.assign(res.result)
          that.model = formData;
          that.visible = true
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
    },

    close () {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
      this.$emit('getModle','getModle')
    },
    handleSubmit () {
      this.close()
    },
    handleCancel () {
      this.close()
    },
    // tabs 回调
    handleTabsChange (activeKey) {
      let that = this
      if(activeKey == '2'){
        this.$refs.approval.loadData(that.modelRecord)
      }
    },
    handleApproval(){
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
      this.$emit('handleApproval',  this.modelRecord)
    },
  }
}
</script>
<style>
.scoped-person .ant-modal-body {
  padding: 0 24px !important;
}
.scoped-person .ant-modal-body {
  overflow-y: scroll;
  min-height: 600px;
  max-height: 600px !important;
}
.scoped-person .ant-tabs-bar {
  margin-bottom: 0;
}
.scoped-person .ant-card-body {
  padding: 10px 24px;
}
.scoped-person .ant-layout-sider {
  flex: 0 0 300px;
  max-width: 300px !important;
  min-width: 300px !important;
  width: 300px !important;
}
.scoped-person .ant-modal-footer {
  display: none;
}
.scoped-person .scoped-img img {
  width: 200px;
}
.scoped-person .scoped-approval .ant-card-head {
  border-bottom: 0;
}
</style>