备注显示

src/views/crm/externalContact/index.vue

@@ -346,7 +346,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"/>
@@ -804,11 +808,12 @@ import {listTag, searchTags,} from "@/api/qw/tag";
 import { allListTagGroup} from "@/api/qw/tagGroup";
 
 import PaginationMore from "../../../components/PaginationMore/index.vue";
+import ExternalContactNameCell from '@/views/qw/externalContact/ExternalContactNameCell.vue';
 
 export default {
   name: "ExternalContact",
   /*components:{PaginationMore, mycustomer,customerDetails,SopDialog,selectUser,info,userDetails},*/
-  components:{PaginationMore},
+  components:{PaginationMore, ExternalContactNameCell},
   data() {
     return {
       notesOpen: {

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/index.vue

@@ -68,7 +68,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="销售企微昵称" align="center" prop="qwUserName" width="120px"/>
     <el-table-column label="企微部门" align="center" prop="departmentName" width="120px"/>
     <el-table-column label="用户类别" align="center" prop="type">
@@ -127,12 +131,6 @@
         <dict-tag :options="transferStatusOptions" :value="scope.row.transferStatus"/>
       </template>
     </el-table-column>
-    <el-table-column label="是否被拉黑" align="center" prop="manageStatusName" width="130px">
-      <template slot-scope="scope">
-        {{ scope.row.manageStatusName || (scope.row.manageStatus === 2 ? '是' : scope.row.manageStatus === 1 ? '否' : '-') }}
-      </template>
-    </el-table-column>
-    <el-table-column label="拉黑原因" align="center" prop="manageRemark" show-overflow-tooltip />
     <el-table-column label="企业id" align="center" prop="corpId" />
     <el-table-column label="重粉看课历史" width="140px" align="center" fixed="right">
       <template slot-scope="scope">
@@ -198,13 +196,14 @@
 </template>
 
 <script>
-import { listExternalContact, getExternalContact, updateExternalContact } from "@/api/qw/externalContact";
+import { listExternalContact, updateExternalContact } from "@/api/qw/externalContact";
 import PaginationMore from '@/components/PaginationMore/index.vue'
 import RepeatCourseHistoryDrawer from './RepeatCourseHistoryDrawer.vue'
+import ExternalContactNameCell from './ExternalContactNameCell.vue'
 
 export default {
   name: "ExternalContact",
-  components: { PaginationMore, RepeatCourseHistoryDrawer },
+  components: { PaginationMore, RepeatCourseHistoryDrawer, ExternalContactNameCell },
   data() {
     return {
       loading: false,
@@ -322,24 +321,39 @@ export default {
       this.resetForm("form");
     },
     handleUpdate(row) {
+      if (!row.fsUserId) {
+        this.$message.warning("未绑定小程序会员，无法修改拉黑状态");
+        return;
+      }
       this.reset();
-      const id = row.id;
-      getExternalContact(id).then(response => {
-        this.form = response.data;
-        this.form.manageStatus = this.form.manageStatus != null ? Number(this.form.manageStatus) : 1;
-        this.open = true;
-        this.title = "修改企微客户";
-      });
+      this.form = {
+        id: row.id,
+        fsUserId: row.fsUserId,
+        manageStatus: row.manageStatus != null ? Number(row.manageStatus) : 1,
+        manageRemark: row.manageRemark || null
+      };
+      this.open = true;
+      this.title = "修改企微客户";
     },
     submitForm() {
       this.$refs["form"].validate(valid => {
-        if (valid && this.form.id != null) {
-          updateExternalContact(this.form).then(() => {
-            this.msgSuccess("修改成功");
-            this.open = false;
-            this.getList();
-          });
+        if (!valid || this.form.id == null) {
+          return;
+        }
+        if (!this.form.fsUserId) {
+          this.$message.warning("未绑定小程序会员，无法修改拉黑状态");
+          return;
         }
+        const payload = {
+          id: this.form.id,
+          manageStatus: this.form.manageStatus,
+          manageRemark: this.form.manageRemark
+        };
+        updateExternalContact(payload).then(() => {
+          this.msgSuccess("修改成功");
+          this.open = false;
+          this.getList();
+        });
       });
     },
   }