列表添加更多联系人弹窗

src/views/ecw/customer/components/contacts.vue

+<template>
+<div style="display: inline-block">
+   <span @click="visible = true"> <slot></slot></span>
+  <el-dialog title="更多联系人" :visible.sync="visible">
+    <div v-if="info">
+      <div style="text-align: center;margin-bottom: 20px;" v-for="(item, index) in info" :key="index">
+        联系人{{index + 1}}：{{$l('name', item)}}联系方式{{index + 1}}：+{{item.areaCode}} {{item.phoneNew}}<br/>
+        邮箱：{{item.email}}
+      </div>
+
+    </div>
+    <div v-else>
+      暂无数据
+    </div>
+  </el-dialog>
+</div>
+</template>
+
+<script>
+import {getCustomerContacts, getCustomerContactsListByCustomer} from "@/api/ecw/customerContacts";
+
+export default {
+  name: "contacts",
+  props:{
+    id:[Number]
+  },
+   data(){
+    return {
+      visible:false,
+      info:null,
+    }
+   },
+   methods:{
+     getCustomerContactsFn() {
+       getCustomerContactsListByCustomer({customerId: this.id}).then(r => {
+         console.log(r,'rrr')
+         this.info = r.data
+       })
+     }
+   },
+   watch:{
+     visible(val){
+       if(val){
+         this.getCustomerContactsFn()
+       }
+     }
+   }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ecw/customer/index.vue

@@ -125,7 +125,10 @@
       <el-table-column :label="$t('主联系人')" prop="defaultContactName"></el-table-column>
       <el-table-column :label="$t('主联系方式')" prop="defaultContactPhone">
         <template v-slot="{row}">
-          +{{row.defaultContactPhone}}
+          +{{row.defaultContactPhone}} <br/>
+          <contacts :id="row.id" >
+            <el-button type="text">更多</el-button>
+          </contacts>
         </template>
       </el-table-column>
       <el-table-column :label="$t('创建时间')" align="center" prop="createTime" width="180">
@@ -514,6 +517,7 @@
     <customer-complaints :customer-id="customerId" ref="customerComplaints"></customer-complaints>
     <transfer-customer :show.sync="transferShow" :customer-ids.sync="selectCustomerList"></transfer-customer>
     <add-potential-custom ref="potentialCustom"  @change="getList" ></add-potential-custom>
+
   </div>
 </template>
 
@@ -536,10 +540,12 @@ import {getCreditPage} from "@/api/customer/credit";
 import transferCustomer from "@/views/ecw/customer/transferCustomer";
 import Template from "@/views/cms/template/index.vue";
 import AddPotentialCustom from "@/views/ecw/customer/addPotentialCustom.vue";
+import Contacts from "@/views/ecw/customer/components/contacts.vue";
 
 export default {
   name: "EcwCustomerIndex",
   components: {
+    Contacts,
     AddPotentialCustom,
     Template,
     upload,