备注显示

src/views/qw/externalContact/ExternalContactNameCell.vue

@@ -0,0 +1,68 @@
+<template>
+  <span class="external-contact-name-cell">
+    <span class="external-contact-name-text" v-if="isBlacklisted" style="color: red">{{ row.name || '-' }}</span>
+    <span class="external-contact-name-text" v-else>{{ row.name || '-' }}</span>
+    <el-tooltip
+      v-if="isBlacklisted"
+      placement="top"
+      :disabled="!tooltipContent"
+    >
+      <div slot="content" class="external-contact-blacklist-tooltip">
+        <div v-if="row.manageRemark" class="external-contact-blacklist-remark">{{ row.manageRemark }}</div>
+      </div>
+      <i class="el-icon-warning external-contact-blacklist-icon" />
+    </el-tooltip>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'ExternalContactNameCell',
+  props: {
+    row: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    isBlacklisted() {
+      return this.row && Number(this.row.manageStatus) === 2
+    },
+    tooltipContent() {
+      return this.isBlacklisted
+    }
+  }
+}
+</script>
+
+<style scoped>
+.external-contact-name-cell {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.external-contact-name-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.external-contact-blacklist-icon {
+  color: #f56c6c;
+  margin-left: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.external-contact-blacklist-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.external-contact-blacklist-remark {
+  line-height: 1.5;
+  word-break: break-all;
+}
+</style>

src/views/qw/externalContact/deptIndex.vue

@@ -332,7 +332,11 @@
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="企微客户名称"  prop="name" width="110px"/>
+      <el-table-column label="企微客户名称" prop="name" width="130px" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <external-contact-name-cell :row="scope.row" />
+        </template>
+      </el-table-column>
       <el-table-column label="客户称呼"  prop="stageStatus" width="110px"/>
       <el-table-column label="销售企微昵称" align="center" prop="qwUserName" width="120px"/>
       <el-table-column label="企微部门" align="center" prop="departmentName" width="120px"/>
@@ -830,10 +834,11 @@ import {editTalk} from "@/api/qw/externalContactInfo";
 import healthRecordDetails from '@/views/store/components/healthRecordDetails.vue'
 import userDetails from '@/views/store/components/userDetails.vue';
 import PaginationMore from "../../../components/PaginationMore/index.vue";
+import ExternalContactNameCell from './ExternalContactNameCell.vue';
 
 export default {
   name: "deptExternalContact",
-  components:{PaginationMore, mycustomer,customerDetails,SopDialog,selectUser,info,healthRecordDetails,userDetails},
+  components:{PaginationMore, mycustomer,customerDetails,SopDialog,selectUser,info,healthRecordDetails,userDetails,ExternalContactNameCell},
   data() {
     return {
 

src/views/qw/externalContact/index.vue

@@ -410,7 +410,11 @@
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="企微客户名称"  prop="name" width="110px"/>
+      <el-table-column label="企微客户名称" prop="name" width="130px" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <external-contact-name-cell :row="scope.row" />
+        </template>
+      </el-table-column>
       <el-table-column label="客户称呼"  prop="stageStatus" width="110px"/>
       <el-table-column label="销售企微昵称" align="center" prop="qwUserName" width="120px"/>
       <el-table-column label="企微部门" align="center" prop="departmentName" width="120px"/>
@@ -477,8 +481,6 @@
           <dict-tag :options="statusOptions" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="管理状态" align="center" prop="manageStatusName" width="120px" />
-      <el-table-column label="管理备注" align="center" prop="manageRemark" min-width="150px" show-overflow-tooltip />
       <el-table-column label="客户等级" align="center" prop="level" width="120px" >
         <template slot-scope="scope">
           <dict-tag :options="ratingType" :value="scope.row.level"/>
@@ -1018,9 +1020,10 @@ import userDetails from '@/views/store/components/userDetails.vue';
 import {courseList, videoList} from "@/api/course/courseRedPacketLog";
 import Collection from './collection.vue';
 import RepeatCourseHistoryDrawer from './RepeatCourseHistoryDrawer.vue';
+import ExternalContactNameCell from './ExternalContactNameCell.vue';
 export default {
   name: "ExternalContact",
-  components:{PaginationMore, mycustomer,customerDetails,SopDialog,selectUser,info,userDetails,collection,RepeatCourseHistoryDrawer},
+  components:{PaginationMore, mycustomer,customerDetails,SopDialog,selectUser,info,userDetails,collection,RepeatCourseHistoryDrawer,ExternalContactNameCell},
   data() {
     return {
       projectOptions: [],

src/views/qw/externalContact/myExternalContact.vue

@@ -392,7 +392,11 @@
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="企微客户名称"  prop="name" width="110px"/>
+      <el-table-column label="企微客户名称" prop="name" width="130px" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <external-contact-name-cell :row="scope.row" />
+        </template>
+      </el-table-column>
       <el-table-column label="客户称呼"  prop="stageStatus" width="110px"/>
       <el-table-column label="销售企微昵称" align="center" prop="qwUserName" width="120px"/>
       <el-table-column label="企微部门" align="center" prop="departmentName" width="120px"/>
@@ -436,8 +440,6 @@
           <dict-tag :options="statusOptions" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="管理状态" align="center" prop="manageStatusName" width="120px" />
-      <el-table-column label="管理备注" align="center" prop="manageRemark" min-width="150px" show-overflow-tooltip />
       <el-table-column label="客户等级" align="center" prop="level" width="120px" >
         <template slot-scope="scope">
           <dict-tag :options="ratingType" :value="scope.row.level"/>
@@ -1079,12 +1081,13 @@ import {docList} from "@/api/doctor/doctor";
 import PaginationMore from "../../../components/PaginationMore/index.vue";
 import Collection from './collection.vue';
 import RepeatCourseHistoryDrawer from './RepeatCourseHistoryDrawer.vue';
+import ExternalContactNameCell from './ExternalContactNameCell.vue';
 import {courseList, videoList} from "@/api/course/courseRedPacketLog";
 import userDetails from '@/views/store/components/userDetails.vue';
 import { updateFsUserRedStatus } from '@/api/user/fsUser'
 export default {
   name: "ExternalContact",
-  components:{PaginationMore, mycustomer,customerDetails,SopDialog,selectUser,info,Collection,userDetails,RepeatCourseHistoryDrawer},
+  components:{PaginationMore, mycustomer,customerDetails,SopDialog,selectUser,info,Collection,userDetails,RepeatCourseHistoryDrawer,ExternalContactNameCell},
   data() {
     return {
       member:{