商品标签

src/views/qw/externalContact/ExternalContactNameCell.vue

@@ -1,16 +1,15 @@
 <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>
+    <span class="external-contact-name-text" :style="nameStyle">{{ row.name || '-' }}</span>
     <el-tooltip
-      v-if="isBlacklisted"
+      v-if="hasManageIndicator"
       placement="top"
-      :disabled="!tooltipContent"
+      :disabled="!row.manageRemark"
     >
-      <div slot="content" class="external-contact-blacklist-tooltip">
-        <div v-if="row.manageRemark" class="external-contact-blacklist-remark">{{ row.manageRemark }}</div>
+      <div slot="content" class="external-contact-manage-tooltip">
+        <div v-if="row.manageRemark" class="external-contact-manage-remark">{{ row.manageRemark }}</div>
       </div>
-      <i class="el-icon-warning external-contact-blacklist-icon" />
+      <i :class="iconClass" />
     </el-tooltip>
   </span>
 </template>
@@ -25,11 +24,39 @@ export default {
     }
   },
   computed: {
+    manageStatus() {
+      return this.row && this.row.manageStatus != null ? Number(this.row.manageStatus) : null
+    },
     isBlacklisted() {
-      return this.row && Number(this.row.manageStatus) === 2
+      return this.manageStatus === 2
+    },
+    hasManageRemark() {
+      const remark = this.row && this.row.manageRemark
+      return remark != null && String(remark).trim() !== ''
+    },
+    isManaged() {
+      return this.manageStatus === 1 && this.hasManageRemark
+    },
+    hasManageIndicator() {
+      return this.isBlacklisted || this.isManaged
+    },
+    nameStyle() {
+      if (this.isBlacklisted) {
+        return { color: '#f56c6c' }
+      }
+      if (this.isManaged) {
+        return { color: '#67c23a' }
+      }
+      return {}
     },
-    tooltipContent() {
-      return this.isBlacklisted
+    iconClass() {
+      if (this.isBlacklisted) {
+        return 'el-icon-warning external-contact-manage-icon external-contact-manage-icon--danger'
+      }
+      if (this.isManaged) {
+        return 'el-icon-warning external-contact-manage-icon external-contact-manage-icon--success'
+      }
+      return ''
     }
   }
 }
@@ -48,20 +75,22 @@ export default {
   white-space: nowrap;
 }
 
-.external-contact-blacklist-icon {
-  color: #f56c6c;
+.external-contact-manage-icon {
   margin-left: 4px;
   font-size: 14px;
   cursor: pointer;
   flex-shrink: 0;
 }
 
-.external-contact-blacklist-title {
-  font-weight: 600;
-  margin-bottom: 4px;
+.external-contact-manage-icon--danger {
+  color: #f56c6c;
+}
+
+.external-contact-manage-icon--success {
+  color: #67c23a;
 }
 
-.external-contact-blacklist-remark {
+.external-contact-manage-remark {
   line-height: 1.5;
   word-break: break-all;
 }

src/views/qw/externalContact/index.vue

@@ -231,15 +231,15 @@
     <repeat-course-history-drawer ref="repeatCourseHistoryDrawer" />
 
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="是否拉黑" prop="manageStatus">
-          <el-select v-model="form.manageStatus" placeholder="请选择管理状态" clearable size="small">
+          <el-select v-model="form.manageStatus" placeholder="请选择管理状态" clearable size="small" @change="handleManageStatusChange">
             <el-option label="否" :value="1" />
             <el-option label="是" :value="2" />
           </el-select>
         </el-form-item>
-        <el-form-item label="拉黑原因" prop="manageRemark">
-          <el-input v-model="form.manageRemark" placeholder="请输入拉黑原因" type="textarea"/>
+        <el-form-item :label="manageRemarkLabel" prop="manageRemark" :required="form.manageStatus === 2">
+          <el-input v-model="form.manageRemark" :placeholder="manageRemarkPlaceholder" type="textarea"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -291,8 +291,30 @@ export default {
       open: false,
       title: "",
       form: {},
+      rules: {
+        manageRemark: [
+          {
+            validator: (rule, value, callback) => {
+              if (Number(this.form.manageStatus) === 2 && !value) {
+                callback(new Error("请输入拉黑原因"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          }
+        ]
+      },
     };
   },
+  computed: {
+    manageRemarkLabel() {
+      return Number(this.form.manageStatus) === 2 ? "拉黑原因" : "提示";
+    },
+    manageRemarkPlaceholder() {
+      return Number(this.form.manageStatus) === 2 ? "请输入拉黑原因" : "请输入原因";
+    }
+  },
   created() {
     //用户类别
     this.getDicts("sys_qw_externalContact_type").then(response => {
@@ -404,6 +426,18 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
+    handleManageStatusChange() {
+      this.$nextTick(() => {
+        if (!this.$refs.form) {
+          return;
+        }
+        if (Number(this.form.manageStatus) === 2) {
+          this.$refs.form.validateField("manageRemark");
+        } else {
+          this.$refs.form.clearValidate("manageRemark");
+        }
+      });
+    },
     cancel() {
       this.open = false;
       this.reset();