修改样式

src/views/custom_manage/contacts/compontents/details.scss

@@ -16,6 +16,38 @@
   }
 }
 
+.department-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 20px 0 10px;
+  .item {
+    cursor: pointer;
+    background: #FFF;
+    border: 1px solid #DCDFE6;
+    font-weight: 500;
+    color: #606266;
+    text-align: center;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    padding: 8px 20px;
+    font-size: 14px;
+  }
+  .item:first-child{
+    border-radius: 4px 0 0 4px;
+
+  }
+  .item:last-child{
+    border-left: none;
+    border-radius: 0 4px 4px 0;
+
+  }
+  .active {
+    background-color: #409eff;
+    color: #fff;
+  }
+}
+
 .tooltip-item {
   margin-left: 20px;
 }

src/views/custom_manage/contacts/mutualList.vue

@@ -2,10 +2,8 @@
   <div class="container-mutualList">
     <el-card>
       <span class="intro">{{ userForm.UserName }}-{{ userForm.Mobile }}-{{ userForm.ComapnyName }}</span>
-      <div style="margin-top: 10px">
-        <el-tabs v-model="activeTypeName" @tab-click="typeHandleClick">
-          <el-tab-pane :label="item.label" :name="item.value" v-for="item in typeList" :key="item.value"></el-tab-pane>
-        </el-tabs>
+      <div class="department-tabs">
+        <span :class="['item', activeTypeName == item.value && 'active']" v-for="item in typeList" :key="item.value" @click="typeHandleClick(item)">{{ item.label }}</span>
       </div>
       <div class="tabs">
         <span :class="['item', activeName == item.Source && 'active']" v-for="item in list" :key="item.Source" @click="handleTabsClick(item)">{{ item.PermissionName }} ({{ item.TotalNum }})</span>
@@ -131,7 +129,9 @@ export default {
   },
   methods: {
     // 类型的点击事件
-    typeHandleClick(e) {
+    typeHandleClick(item) {
+      if (this.activeTypeName == item.value) return;
+      this.activeTypeName = item.value;
       this.activeName = 1;
       this.tableColums = tableColums(this.activeName);
       this.getCygxMutualList();

src/views/custom_manage/contacts/organizationList.vue

@@ -6,10 +6,8 @@
         <span class="attention">注：机构的互动详情，是截止至昨天24点的数据，非当前实时数据</span>
         <span class="organization-details" @click="goWholeDetail">全机构互动详情>></span>
       </div>
-      <div style="margin-top: 10px">
-        <el-tabs v-model="activeTypeName" @tab-click="typeHandleClick">
-          <el-tab-pane :label="item.label" :name="item.value" v-for="item in typeList" :key="item.value"></el-tab-pane>
-        </el-tabs>
+      <div class="department-tabs">
+        <span :class="['item', activeTypeName == item.value && 'active']" v-for="item in typeList" :key="item.value" @click="typeHandleClick(item)">{{ item.label }}</span>
       </div>
       <div class="tabs">
         <span :class="['item', activeName == item.Source && 'active']" v-for="item in list" :key="item.Source" @click="handleTabsClick(item)">{{ item.PermissionName }} ({{ item.TotalNum }})</span>
@@ -138,7 +136,9 @@ export default {
   },
   methods: {
     // 类型的点击事件
-    typeHandleClick(e) {
+    typeHandleClick(item) {
+      if (this.activeTypeName == item.value) return;
+      this.activeTypeName = item.value;
       this.activeName = 1;
       this.tableColums = organizationTableColums(this.activeName);
       this.getCygxMutualList();

src/views/custom_manage/contacts/wholeOrganization.vue

@@ -2,10 +2,8 @@
   <div class="container-whole-organization">
     <el-card>
       <div class="introduce">注：机构的互动详情，是截止至昨天24点的数据，非当前实时数据</div>
-      <div style="margin-top: 10px">
-        <el-tabs v-model="activeTypeName" @tab-click="typeHandleClick">
-          <el-tab-pane :label="item.label" :name="item.value" v-for="item in typeList" :key="item.value"></el-tab-pane>
-        </el-tabs>
+      <div class="department-tabs">
+        <span :class="['item', activeTypeName == item.value && 'active']" v-for="item in typeList" :key="item.value" @click="typeHandleClick(item)">{{ item.label }}</span>
       </div>
       <div class="tabs">
         <span :class="['item', activeName == item.Source && 'active']" v-for="item in list" :key="item.Source" @click="handleTabsClick(item)">{{ item.PermissionName }} ({{ item.TotalNum }})</span>
@@ -153,7 +151,9 @@ export default {
   },
   methods: {
     // 类型的点击事件
-    typeHandleClick(e) {
+    typeHandleClick(item) {
+      if (this.activeTypeName == item.value) return;
+      this.activeTypeName = item.value;
       this.activeName = 1;
       this.tableColums = wholeOrganizationTableColums(this.activeName);
       this.getCygxMutualList();