Merge branch 'all-v4-lkh' into 'all-v4'

fix: 添加已删除标签并整体置灰;修改回复功能，最多200字，且有字才能发送

See merge request skyeye/skyeye_frontend/skyeye-admin!379

src/api/comments/comments.ts

@@ -1,5 +1,5 @@
 import { http } from '@/utils/http/axios';
-import { COMMENTSTATUS } from '@/types/comments/constant';
+import { COMMENT_STATUS } from '@/types/comments/constant';
 import { CommentsQuery, ListType } from '@/types/comments/type';
 
 //查询留言列表
@@ -12,7 +12,7 @@ export const getCommentsList = (data: CommentsQuery) => {
 };
 
 //更新评论状态
-export const undateCommentStatus = (data: { id: number; status: COMMENTSTATUS }) => {
+export const undateCommentStatus = (data: { id: number; status: COMMENT_STATUS }) => {
   return http.request({
     url: `/admin/comment/updateCommentStatus`,
     method: 'PUT',

src/types/comments/constant.ts

@@ -1,12 +1,12 @@
-export enum REPLYSTATUS {
-  replied = 1,
-  unReplied = 0,
-  all = 2,
+export enum REPLY_STATUS {
+  REPLIED = 1,
+  UN_REPLIED = 0,
+  ALL = 2,
 }
 
-export enum COMMENTSTATUS {
-  unAuthed = 0,
-  rejected = 1,
-  passed = 2,
-  all = 3,
+export enum COMMENT_STATUS {
+  UN_AUTHED = 0,
+  REJECTED = 1,
+  PASSED = 2,
+  ALL = 3,
 }

src/types/comments/type.ts

@@ -1,4 +1,4 @@
-import { REPLYSTATUS, COMMENTSTATUS } from '@/types/comments/constant';
+import { REPLY_STATUS, COMMENT_STATUS } from '@/types/comments/constant';
 
 export interface Records {
   id: number; //评论id
@@ -11,9 +11,9 @@ export interface Records {
   mobile: string; //手机号
   // problemImage: Array<File>;
   reply: string | null; //回复内容
-  isReplied: REPLYSTATUS; //是否已回复
+  isReplied: REPLY_STATUS; //是否已回复
   replyAt: string | null; //回复时间
-  status: COMMENTSTATUS; //审核状态
+  status: COMMENT_STATUS; //审核状态
   createdAt: string; //创建时间
   updatedAt: string; //更新时间
   isUserDeleted: number;

src/views/system/comments/PageCommentsManage.vue

@@ -5,29 +5,30 @@
         <el-form :inline="true" :model="listFilter" class="demo-form-inline">
           <el-form-item label="审核状态:">
             <el-select v-model="listFilter.authStatus" placeholder="请选择审核状态" @change="getList">
-              <el-option label="全部" :value="COMMENTSTATUS.all" />
-              <el-option label="已通过" :value="COMMENTSTATUS.passed" />
-              <el-option label="未通过" :value="COMMENTSTATUS.rejected" />
+              <el-option label="全部" :value="COMMENT_STATUS.ALL" />
+              <el-option label="已通过" :value="COMMENT_STATUS.PASSED" />
+              <el-option label="未通过" :value="COMMENT_STATUS.REJECTED" />
             </el-select>
           </el-form-item>
           <el-form-item label="回复状态:">
             <el-select v-model="listFilter.replyStatus" placeholder="请选择审核状态" @change="getList">
-              <el-option label="全部" :value="REPLYSTATUS.all" />
-              <el-option label="已回复" :value="REPLYSTATUS.replied" />
-              <el-option label="未回复" :value="REPLYSTATUS.unReplied" />
+              <el-option label="全部" :value="REPLY_STATUS.ALL" />
+              <el-option label="已回复" :value="REPLY_STATUS.REPLIED" />
+              <el-option label="未回复" :value="REPLY_STATUS.UN_REPLIED" />
             </el-select>
           </el-form-item>
         </el-form>
       </div>
     </div>
-    <div class="problem-list"
-      ><SingleComment
+    <div class="problem-list">
+      <SingleComment
         v-for="(item, index) in commentsList"
         :key="index"
         :problem-data="item"
         @reFreshList="getList"
         style="margin-top: 22px; margin-bottom: 2px"
-    /></div>
+      />
+    </div>
 
     <el-pagination
       v-model:current-page="pageNumber"
@@ -46,7 +47,7 @@
 <script setup lang="ts">
   import SingleComment from './component/SingleComment.vue';
   import useComments from './use-comments.ts';
-  import { REPLYSTATUS, COMMENTSTATUS } from '@/types/comments/constant.ts';
+  import { REPLY_STATUS, COMMENT_STATUS } from '@/types/comments/constant.ts';
 
   const useCommentsList = useComments();
   const { commentsList, pageNumber, pageSize, totalRow, getList, listFilter } = useCommentsList;

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

@@ -1,91 +1,113 @@
 <template>
   <div
     class="single-item"
-    :style="`padding-bottom:${props.problemData.isReplied === REPLYSTATUS.replied ? '16px' : '38px'}`"
+    :style="`padding-bottom:${props.problemData.isReplied === REPLY_STATUS.REPLIED ? '16px' : '38px'}`"
   >
-    <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 === COMMENTSTATUS.passed"
-        type="primary"
-        style="width: 74px; margin-left: auto; margin-right: 0"
-        @click="hideComment"
-        >隐藏</el-button
-      >
-      <el-button
-        v-show="props.problemData.status === COMMENTSTATUS.rejected"
-        type="primary"
-        style="width: 74px; margin-left: auto; margin-right: 0"
-        @click="displayComment"
-        >显示</el-button
-      >
-      <el-button
-        v-show="
-          props.problemData.isReplied === REPLYSTATUS.unReplied && props.problemData.status === COMMENTSTATUS.passed
-        "
-        style="width: 74px"
-        type="primary"
-        @click="openReply = true"
-        >回复</el-button
-      >
-      <el-button v-show="props.problemData.isReplied === REPLYSTATUS.replied" style="width: 74px" disabled
-        >已回复</el-button
-      >
-    </div>
+    <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 v-show="props.problemData.isUserDeleted === 1" class="delete-label"></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"
-        />
+      <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>
 
-    <div v-if="openReply === true" style="position: relative">
-      <el-input placeholder="请输入回复(不超过30个字符)" type="textarea" v-model="replyContent" rows="4"> </el-input>
-      <span
-        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 > 203 ? 'color:red' : ''">{{
-          replyContent.length - 3
-        }}</span>
-        <span style="line-height: normal">/200</span>
-      </span>
-      <div style="position: absolute; height: 32px; right: 10px; padding-bottom: 5px; bottom: 2px">
-        <el-button style="margin-top: 3px" type="primary" size="small" @click="submitReply">发布</el-button>
-        <el-button style="margin-top: 3px" size="small" @click="openReply = false">取消</el-button>
+      <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">
+          <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>
 
-    <div v-if="props.problemData.isReplied === REPLYSTATUS.replied" style="position: relative">
-      <el-input type="textarea" v-model="props.problemData.reply" rows="3" disabled> </el-input>
+      <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>
 </template>
@@ -93,7 +115,7 @@
 <script setup lang="ts">
   import { ref, computed } from 'vue';
   import { undateCommentStatus, replyComment } from '@/api/comments/comments';
-  import { REPLYSTATUS, COMMENTSTATUS } from '@/types/comments/constant';
+  import { REPLY_STATUS, COMMENT_STATUS } from '@/types/comments/constant';
   import { Records } from '@/types/comments/type';
   const props = defineProps<{
     problemData: Records;
@@ -107,17 +129,17 @@
   });
 
   const hideComment = () => {
-    undateCommentStatus({ id: props.problemData.id, status: COMMENTSTATUS.rejected }).then(() => {
+    undateCommentStatus({ id: props.problemData.id, status: COMMENT_STATUS.REJECTED }).then(() => {
       emit('reFreshList');
     });
   };
   const displayComment = () => {
-    undateCommentStatus({ id: props.problemData.id, status: COMMENTSTATUS.passed }).then(() => {
+    undateCommentStatus({ id: props.problemData.id, status: COMMENT_STATUS.PASSED }).then(() => {
       emit('reFreshList');
     });
   };
   const submitReply = () => {
-    replyComment({ id: props.problemData.id, reply: replyContent.value }).then(() => {
+    replyComment({ id: props.problemData.id, reply: '回复: ' + replyContent.value }).then(() => {
       openReply.value = false;
       emit('reFreshList');
     });
@@ -125,7 +147,7 @@
 
   const openReply = ref(false);
 
-  const replyContent = ref('回复：');
+  const replyContent = ref('');
 </script>
 
 <style scoped>
@@ -137,6 +159,17 @@
     position: relative;
   }
 
+  .delete-label {
+    width: 80px;
+    height: 70px;
+    position: absolute;
+    right: 40px;
+    top: 50px;
+    background-image: url('@/assets/icons/deleted.png');
+    background-size: 100% 100%;
+    z-index: 99;
+  }
+
   .single-contact {
     margin-left: 20px;
     margin-right: 40px;
@@ -166,18 +199,6 @@
     word-break: break-word;
     display: flex;
     margin-bottom: 8px;
-    .delete-label {
-      width: 100px;
-      height: 60px;
-      position: absolute;
-      right: 80px;
-      top: 60px;
-      background-image: url('@/assets/icons/config-fail.png');
-      background-size: 100% 100%;
-      cursor: pointer;
-
-      background-size: 100% 100%;
-    }
   }
 
   .type-content,

src/views/system/comments/use-comments.ts

@@ -1,5 +1,5 @@
 import { getCommentsList } from '@/api/comments/comments';
-import { REPLYSTATUS, COMMENTSTATUS } from '@/types/comments/constant';
+import { REPLY_STATUS, COMMENT_STATUS } from '@/types/comments/constant';
 import { Records, CommentsQuery } from '@/types/comments/type';
 import { onMounted, ref } from 'vue';
 
@@ -11,8 +11,8 @@ export function useCommentsList() {
   const totalRow = ref<number>();
 
   const listFilter = ref({
-    authStatus: COMMENTSTATUS.all,
-    replyStatus: REPLYSTATUS.all,
+    authStatus: COMMENT_STATUS.ALL,
+    replyStatus: REPLY_STATUS.ALL,
   });
 
   const getList = () => {
@@ -20,13 +20,13 @@ export function useCommentsList() {
       pageNumber: pageNumber.value,
       pageSize: pageSize.value,
     };
-    if (listFilter.value.authStatus !== COMMENTSTATUS.all) {
+    if (listFilter.value.authStatus !== COMMENT_STATUS.ALL) {
       //若传1，则拉取审核通过的；若传0，则拉取审核未通过的和未审核的
       params.queryParam = {
-        isApproved: listFilter.value.authStatus === COMMENTSTATUS.passed ? 1 : 0,
+        isApproved: listFilter.value.authStatus === COMMENT_STATUS.PASSED ? 1 : 0,
       };
     }
-    if (listFilter.value.replyStatus !== REPLYSTATUS.all) {
+    if (listFilter.value.replyStatus !== REPLY_STATUS.ALL) {
       params.queryParam = {
         isReplied: listFilter.value.replyStatus,
       };