fix: 隐藏显示添加小窗口;已删除评论按钮不可用

src/views/system/comments/component/SingleComment.vue

@@ -1,114 +1,122 @@
 <template>
-  <div
-    class="single-item"
-    :style="`padding-bottom:${props.problemData.isReplied === REPLY_STATUS.REPLIED ? '16px' : '38px'}`"
-  >
-    <div v-show="props.problemData.isUserDeleted === 1" class="delete-label"></div>
-    <div :style="{ opacity: props.problemData.isUserDeleted === 1 ? 0.6 : 1 }">
-      <div style="display: flex; font-size: 12px">
-        <div style="color: #00000073">评论人：{{ props.problemData.userName }}-{{ props.problemData.staffNo }} </div>
-        <div style="margin-left: 20px; color: #00000073">日期：{{ props.problemData.createdAt }}</div>
-        <!-- <img src="@/assets/icons/phone.png" alt="" /> -->
-        <div class="single-contact">联系方式：{{ props.problemData.mobile }}</div>
-      </div>
-      <div class="buttonBar">
-        <el-button
-          v-show="props.problemData.status === COMMENT_STATUS.PASSED"
-          type="primary"
-          style="width: 74px; margin-left: auto; margin-right: 0"
-          @click="hideComment"
-        >
-          隐藏
-        </el-button>
-        <el-button
-          v-show="props.problemData.status === COMMENT_STATUS.REJECTED"
-          type="primary"
-          style="width: 74px; margin-left: auto; margin-right: 0"
-          @click="displayComment"
-        >
-          显示
-        </el-button>
-        <el-button
-          v-show="
-            props.problemData.isReplied === REPLY_STATUS.UN_REPLIED &&
-            props.problemData.status === COMMENT_STATUS.PASSED
-          "
-          style="width: 74px"
-          type="primary"
-          @click="openReply = true"
-        >
-          回复
-        </el-button>
-        <el-button v-show="props.problemData.isReplied === REPLY_STATUS.REPLIED" style="width: 74px" disabled>
-          已回复
-        </el-button>
-      </div>
-
-      <el-divider />
-      <div class="problem-describe">
-        <div>评论内容：</div>
-        <div class="problem-content">{{ props.problemData.comment }}</div>
-      </div>
-      <div class="problem-picture">
-        <div class="picture-content" v-for="(item, index) in problemImageUrls" :key="index">
-          <el-image
-            style="width: 80px; height: 80px"
-            :src="item"
-            :zoom-rate="1.2"
-            :max-scale="7"
-            :min-scale="0.2"
-            :preview-src-list="problemImageUrls"
-            :initial-index="index"
-            fit="cover"
-          />
+  <div>
+    <div
+      class="single-item"
+      :style="`padding-bottom:${props.problemData.isReplied === REPLY_STATUS.REPLIED ? '16px' : '38px'}`"
+    >
+      <div v-show="props.problemData.isUserDeleted === 1" class="delete-label"></div>
+      <div :style="{ opacity: props.problemData.isUserDeleted === 1 ? 0.6 : 1 }">
+        <div style="display: flex; font-size: 12px">
+          <div style="color: #00000073">评论人：{{ props.problemData.userName }}-{{ props.problemData.staffNo }} </div>
+          <div style="margin-left: 20px; color: #00000073">日期：{{ props.problemData.createdAt }}</div>
+          <!-- <img src="@/assets/icons/phone.png" alt="" /> -->
+          <div class="single-contact">联系方式：{{ props.problemData.mobile }}</div>
         </div>
-      </div>
-
-      <div v-if="openReply === true" style="position: relative">
-        <el-input
-          placeholder="请输入回复(不超过200个字符)"
-          type="textarea"
-          v-model="replyContent"
-          rows="4"
-          maxlength="200"
-        >
-        </el-input>
-        <span
-          v-show="replyContent.length > 185"
-          style="
-            position: absolute;
-            left: 10px;
-            padding-bottom: 5px;
-            bottom: 2px;
-            color: grey;
-            background-color: #fff;
-            line-height: 0;
-            font-size: 12px;
-          "
-        >
-          <span style="line-height: normal" :style="replyContent.length === 200 ? 'color:red' : ''">
-            {{ replyContent.length }}
-          </span>
-          <span style="line-height: normal">/200</span>
-        </span>
-        <div style="position: absolute; height: 32px; right: 10px; padding-bottom: 5px; bottom: 2px">
+        <div class="buttonBar">
+          <el-button
+            v-show="props.problemData.status === COMMENT_STATUS.PASSED"
+            type="primary"
+            class="label-button"
+            style="margin-left: auto; margin-right: 0"
+            @click="showDialogBox('隐藏', '取消展示')"
+            :disabled="props.problemData.isUserDeleted"
+          >
+            隐藏
+          </el-button>
           <el-button
-            style="margin-top: 3px"
+            v-show="props.problemData.status === COMMENT_STATUS.REJECTED"
             type="primary"
-            size="small"
-            @click="submitReply"
-            :disabled="replyContent.length === 0"
+            class="label-button"
+            style="margin-left: auto; margin-right: 0"
+            @click="showDialogBox('显示', '公开展示')"
+            :disabled="props.problemData.isUserDeleted"
           >
-            发布
+            显示
+          </el-button>
+          <el-button
+            v-show="
+              props.problemData.isReplied === REPLY_STATUS.UN_REPLIED &&
+              props.problemData.status === COMMENT_STATUS.PASSED
+            "
+            class="label-button"
+            type="primary"
+            @click="openReply = true"
+            :disabled="props.problemData.isUserDeleted"
+          >
+            回复
+          </el-button>
+          <el-button v-show="props.problemData.isReplied === REPLY_STATUS.REPLIED" class="label-button" disabled>
+            已回复
           </el-button>
-          <el-button style="margin-top: 3px" size="small" @click="openReply = false">取消</el-button>
         </div>
-      </div>
 
-      <div v-if="props.problemData.isReplied === REPLY_STATUS.REPLIED" style="position: relative">
-        <el-input type="textarea" v-model="props.problemData.reply" rows="3" disabled> </el-input>
+        <el-divider />
+        <div class="problem-describe">
+          <div>评论内容：</div>
+          <div class="problem-content">{{ props.problemData.comment }}</div>
+        </div>
+        <div class="problem-picture">
+          <div class="picture-content" v-for="(item, index) in problemImageUrls" :key="index">
+            <el-image
+              style="width: 80px; height: 80px"
+              :src="item"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+              :preview-src-list="problemImageUrls"
+              :initial-index="index"
+              fit="cover"
+            />
+          </div>
+        </div>
+
+        <div v-if="openReply === true" style="position: relative">
+          <el-input
+            placeholder="请输入回复(不超过200个字符)"
+            type="textarea"
+            v-model="replyContent"
+            rows="4"
+            maxlength="200"
+          >
+          </el-input>
+          <span v-show="replyContent.length > 185" class="word-count">
+            <span style="line-height: normal" :style="replyContent.length === 200 ? 'color:red' : ''">
+              {{ replyContent.length }}
+            </span>
+            <span style="line-height: normal">/200</span>
+          </span>
+          <div class="reply-button-area">
+            <el-button
+              style="margin-top: 3px"
+              type="primary"
+              size="small"
+              @click="submitReply"
+              :disabled="replyContent.length === 0"
+            >
+              发布
+            </el-button>
+            <el-button style="margin-top: 3px" size="small" @click="openReply = false">取消</el-button>
+          </div>
+        </div>
+
+        <div v-if="props.problemData.isReplied === REPLY_STATUS.REPLIED" style="position: relative">
+          <el-input type="textarea" v-model="props.problemData.reply" rows="3" disabled> </el-input>
+        </div>
       </div>
     </div>
+    <el-dialog v-model="showDialog" width="424px" top="20%" class="dialog">
+      <template #header="">
+        <div class="dialogHeader">
+          <img src="@/assets/icons/deleteTip.png" class="deleteTip" />
+          <span class="titleSpan">请确认是否{{ title }}</span>
+        </div>
+      </template>
+      <span style="margin-left: 37px">{{ title }}后，该评论将在前台{{ result }}</span>
+      <div class="dialogBottom">
+        <el-button class="dialogBtn" type="primary" @click="submit">确定</el-button>
+        <el-button class="dialogBtn" @click="showDialog = false">取消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -128,13 +136,33 @@
     return imageUrlString ? imageUrlString.split(',') : [];
   });
 
+  const showDialog = ref(false);
+  const title = ref('显示'); //该值为显示或隐藏
+  const result = ref('公开展示'); //该值为公开展示或取消展示
+
+  const showDialogBox = (setTitle: string, setResult: string) => {
+    title.value = setTitle;
+    result.value = setResult;
+    showDialog.value = true;
+  };
+
+  const submit = () => {
+    if (title.value === '显示') {
+      displayComment();
+    } else {
+      hideComment();
+    }
+  };
+
   const hideComment = () => {
     undateCommentStatus({ id: props.problemData.id, status: COMMENT_STATUS.REJECTED }).then(() => {
+      showDialog.value = false;
       emit('reFreshList');
     });
   };
   const displayComment = () => {
     undateCommentStatus({ id: props.problemData.id, status: COMMENT_STATUS.PASSED }).then(() => {
+      showDialog.value = false;
       emit('reFreshList');
     });
   };
@@ -157,6 +185,8 @@
     border-radius: 6px;
     padding: 16px 12px 0px 12px;
     position: relative;
+    margin-top: 22px;
+    margin-bottom: 2px;
   }
 
   .delete-label {
@@ -170,6 +200,10 @@
     z-index: 99;
   }
 
+  .label-button {
+    width: 74px;
+  }
+
   .single-contact {
     margin-left: 20px;
     margin-right: 40px;
@@ -214,6 +248,48 @@
     gap: 20px;
   }
 
+  .word-count {
+    position: absolute;
+    left: 10px;
+    padding-bottom: 5px;
+    bottom: 2px;
+    color: grey;
+    background-color: #fff;
+    line-height: 0;
+    font-size: 12px;
+  }
+
+  .reply-button-area {
+    position: absolute;
+    height: 32px;
+    right: 10px;
+    padding-bottom: 5px;
+    bottom: 2px;
+  }
+
+  .dialog {
+    .dialogHeader {
+      display: flex;
+      .deleteTip {
+        height: 24px;
+        width: 24px;
+      }
+      .titleSpan {
+        height: 24px;
+        font-size: 16px;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 24px;
+        text-align: center;
+        margin-left: 12px;
+      }
+    }
+    .dialogBottom {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 12px;
+    }
+  }
+
   :deep(.el-collapse-item__header) {
     border-bottom: none;
   }