查看更多通讯录

src/components/com-contacts.vue

+<!-- 预授信申述 -->
+<template>
+  <el-dialog
+    title='更多联系人'
+    :before-close='handleClose'
+    :visible.sync='visible'
+    append-to-body width='40%'>
+    <!--表格-->
+    <el-table
+      ref='tableSort'
+      border
+      :data='list'
+      :max-height='300'
+      style='width: 100%'
+    >
+      <el-table-column
+        v-for='(item, index) in finallyColumns'
+        :key='index'
+        align='center'
+        :label='item.label'
+        :sortable='item.sortable'
+        :width='item.width'
+        :fixed='!!item.fixed'
+        :show-overflow-tooltip='!!item.overflow'
+      >
+        <template #default='{ row }'>
+          <template v-if='item.label==="号码"'>
+            <span>{{row.linkPhone[0]}}</span>
+          </template>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+  import API from '@/server/api'
+  import { mapGetters } from 'vuex'
+  import _ from 'lodash'
+
+  export default {
+    name: 'Approval',
+    props: {
+      item: {
+        type: Array,
+        require: true
+      },
+      visible: {
+        type: Boolean,
+        require: false
+      }
+    },
+    data() {
+      return {
+        list: [],
+        listLoading: true,
+        checkList: ['姓名', '号码'],
+        columns: [
+          {
+            order: 1,
+            label: '姓名',
+            prop: 'linker'
+          },
+          {
+            order: 2,
+            label: '号码',
+            prop: 'linkPhone'
+          }
+        ]
+      }
+    },
+    computed: {
+      finallyColumns() {
+        let finallyArray = []
+        this.checkList.forEach((checkItem) => {
+          finallyArray.push(
+            this.columns.filter((item) => item.label === checkItem)[0]
+          )
+        })
+        return _.sortBy(finallyArray, (item) => item.order)
+      }
+    },
+    async mounted() {
+      if (this.item !== null) {
+        console.log(this.item, '书')
+        this.list = this.item
+      }
+    },
+    methods: {
+      handleClose() {
+        this.$emit('handleClose')
+      }
+    }
+  }
+</script>
+<style scoped lang='scss'>
+
+  .com-approval {
+    //position: relative;
+    margin-top: 15px;
+  }
+
+</style>

src/components/user-base-info.vue

@@ -3,60 +3,106 @@
   <div class='com'>
     <block-header title='基础信息' />
     <el-descriptions style='margin-bottom: 20px;' border size='small' :column='3'>
-      <el-descriptions-item label-class-name='labelCls' label='申请时间'>{{baseInfo.applyDate}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='授信类型'>{{baseInfo.creditTypeStr}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='授信状态'>{{baseInfo.creditStatusStr}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='客户姓名'>{{baseInfo.realName}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='手机号码'>{{baseInfo.mobile}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='身份证号'>{{baseInfo.idCard}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='申请时间'>{{ baseInfo.applyDate }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='授信类型'>{{ baseInfo.creditTypeStr }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='授信状态'>{{ baseInfo.creditStatusStr }}
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='客户姓名'>{{ baseInfo.realName }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='手机号码'>{{ baseInfo.mobile }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='身份证号'>{{ baseInfo.idCard }}</el-descriptions-item>
 
 
-      <el-descriptions-item label-class-name='labelCls' label='学历'>{{baseInfo.educationCodeStr}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='婚姻状况'>{{baseInfo.marriageStr}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='年龄(周岁)'>{{baseInfo.age}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='工作行业'>{{baseInfo.workIndustryStr}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='工作城市'>{{baseInfo.companyAddress}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='公司全称'>{{baseInfo.companyName}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='居住城市'>{{baseInfo.liveAddress}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='居住地址'>{{baseInfo.liveDetailAddress}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='QQ/微信'>{{baseInfo.qqWechar}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='户籍地址'>{{baseInfo.address}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='BD经理'>{{baseInfo.bdName}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='商户区域'>{{baseInfo.regionName}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='学历'>{{ baseInfo.educationCodeStr }}
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='婚姻状况'>{{ baseInfo.marriageStr }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='年龄(周岁)'>{{ baseInfo.age }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='工作行业'>{{ baseInfo.workIndustryStr }}
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='工作城市'>{{ baseInfo.companyAddress }}
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='公司全称'>{{ baseInfo.companyName }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='居住城市'>{{ baseInfo.liveAddress }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='居住地址'>{{ baseInfo.liveDetailAddress }}
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='QQ/微信'>{{ baseInfo.qqWechar }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='户籍地址'>{{ baseInfo.address }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='BD经理'>{{ baseInfo.bdName }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='商户区域'>{{ baseInfo.regionName }}</el-descriptions-item>
 
-      <el-descriptions-item label-class-name='labelCls' label='紧急联系人姓名'>{{baseInfo.firstName}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='紧急联系人关系'>{{baseInfo.firstRelationStr}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='紧急联系人电话'>{{baseInfo.firstPhone}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='紧急联系人姓名'>
+        <span>{{ baseInfo.firstName }}</span>
+        <el-button size='mini' @click='handleContact' style='margin-left: 10px' type='text'>查看更多</el-button>
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='紧急联系人关系'>{{ baseInfo.firstRelationStr }}
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='紧急联系人电话'>{{ baseInfo.firstPhone }}</el-descriptions-item>
 
-      <el-descriptions-item label-class-name='labelCls' label='工作地址'>{{baseInfo.companyAddress}}{{baseInfo.companyAddressDetail}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='合同展示地址'>{{baseInfo.address}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='月收入'>{{baseInfo.selfMonthIncomeStr}}元</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='客户GPS'>{{baseInfo.lat}},{{baseInfo.lng}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='工作地址'>
+        {{ baseInfo.companyAddress }}{{ baseInfo.companyAddressDetail }}
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='合同展示地址'>{{ baseInfo.address }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='月收入'>{{ baseInfo.selfMonthIncomeStr }}元
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='客户GPS'>{{ baseInfo.lat }},{{ baseInfo.lng }}
+      </el-descriptions-item>
 
       <!--<el-descriptions-item label-class-name='labelCls' label='首次授信'>{{baseInfo.isFirstCredit}}</el-descriptions-item>-->
-      <el-descriptions-item label-class-name='labelCls' label='BD用户名'>{{baseInfo.loginName}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='办单模式'>{{baseInfo.orderProcessingMode}}</el-descriptions-item>
-      <el-descriptions-item label-class-name='labelCls' label='收款主体'>{{baseInfo.collectionMain}}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='BD用户名'>{{ baseInfo.loginName }}</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='办单模式'>{{ baseInfo.orderProcessingMode }}
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='收款主体'>{{ baseInfo.collectionMain }}
+      </el-descriptions-item>
     </el-descriptions>
+
+
+    <!-- 更多联系人的弹框 -->
+    <template v-if='visible'>
+      <com-contacts
+        @handleClose='visible = false'
+        :visible='visible'
+        :item='linkers' />
+    </template>
+
   </div>
 </template>
 
 <script>
+  import ComContacts from '@/components/com-contacts'
+
   export default {
-    name: "UserBaseInfo",
-    props:{
-      baseInfo:{
-        type:Object,
-        require:true
+    name: 'UserBaseInfo',
+    components: {
+      ComContacts
+    },
+    props: {
+      baseInfo: {
+        type: Object,
+        require: true
       },
-      isLoan:{
-        type:Boolean,
-        require:false
+      contacts: {
+        type: Array,
+        require: false
+      },
+      isLoan: {
+        type: Boolean,
+        require: false
+      }
+    },
+    data() {
+      return {
+        visible: false,
+        linkers: []
+      }
+    },
+    methods: {
+      handleContact() {
+        this.linkers = this.contacts
+        this.visible = true
       }
     }
-  };
+  }
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
   .page-fence {
     ::v-deep {
       i {
@@ -68,7 +114,7 @@
     padding: 20px;
   }
 </style>
-<style lang="scss">
+<style lang='scss'>
   .custom-table-checkbox {
     .el-checkbox {
       display: block !important;

src/views/credit/approval-detail.vue

@@ -3,7 +3,9 @@
 
     <!--用户基础信息-->
     <template v-if='detail.clientDetail!==null'>
-      <user-base-info :base-info='detail.clientDetail' />
+      <user-base-info
+        :contacts='detail.linkPhoneList'
+        :base-info='detail.clientDetail' />
     </template>
 
     <!--用户项目信息-->

src/views/credit/detail.vue

@@ -3,7 +3,9 @@
 
     <!--用户基础信息-->
     <template v-if='detail.clientDetail!==null'>
-      <user-base-info :base-info='detail.clientDetail' />
+      <user-base-info
+        :contacts='detail.linkPhoneList'
+        :base-info='detail.clientDetail' />
     </template>
 
     <!--用户项目信息-->