feat: 初步完成所有功能

src/api/comments/comments.ts

@@ -0,0 +1,81 @@
+import { http } from '@/utils/http/axios';
+
+export enum REPLYSTATUS {
+  replied = 1,
+  unReplied = 0,
+  all = 2,
+}
+
+export enum COMMENTSTATUS {
+  unAuthed = 0,
+  rejected = 1,
+  passed = 2,
+  all = 3,
+}
+
+export interface Records {
+  id: number; //评论id
+  userId: number; //用户id
+  userName: string; //用户名
+  avatar: string; //用户头像
+  comment: string; //评论内容
+  picUrl: string; //评论图片
+  staffNo: string; //员工编号
+  mobile: string; //手机号
+  // problemImage: Array<File>;
+  reply: string | null; //回复内容
+  isReplied: REPLYSTATUS; //是否已回复
+  replyAt: string | null; //回复时间
+  status: COMMENTSTATUS; //审核状态
+  createdAt: string; //创建时间
+  updatedAt: string; //更新时间
+  isUserDeleted: number;
+  tenantId: number; //租户id
+  locationName: string;
+}
+
+export interface ListType {
+  records: Records[];
+  maxPageSize?: number;
+  pageNumber: number;
+  pageSize: number;
+  totalPage: number;
+  totalRow: number;
+  optimizeCountQuery: boolean;
+}
+
+export interface CommentsQuery {
+  pageNumber: number; //评论id
+  pageSize: number; //用户id
+  queryParam?: {
+    isReplied?: number;
+    isApproved?: number;
+  };
+}
+
+//查询留言列表
+export const getCommentsList = (data: CommentsQuery) => {
+  return http.request<ListType>({
+    url: `/admin/comment/queryCommentPageByFilters`,
+    method: 'post',
+    data,
+  });
+};
+
+//更新评论状态
+export const undateCommentStatus = (data: { id: number; status: COMMENTSTATUS }) => {
+  return http.request({
+    url: `/admin/comment/updateCommentStatus`,
+    method: 'PUT',
+    data,
+  });
+};
+
+//回复评论
+export const replyComment = (data: { id: number; reply: string }) => {
+  return http.request({
+    url: `/admin/comment/replyComment`,
+    method: 'post',
+    data,
+  });
+};

src/router/full-routes.ts

@@ -472,7 +472,7 @@ const fullRoutes: AppRouteRecordRaw[] = [
         // 权限管理
         path: 'comments',
         name: 'SystemComments',
-        component: '/system/comments/CommentsManage',
+        component: '/system/comments/PageCommentsManage',
         meta: {
           icon: '',
           title: '评论管理',

src/views/system/comments/CommentsManage.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="feedback-page">
-    <div class="feedback-head">
-      <el-radio-group
-        v-model="problemStatus"
-        class="radio-button"
-        text-color="#1677FF"
-        fill="#1890FF26"
-        @change="handleClick"
-      >
-        <el-radio-button v-for="item in tabContent" :value="item.value" :key="item.value">{{
-          item.name
-        }}</el-radio-button>
-      </el-radio-group>
-      <div class="search-input">
-        <el-input v-model="queryDescription" style="width: 294px" placeholder="请输入搜索内容" :prefix-icon="Search" />
-        <el-button type="primary" style="margin-left: 16px" @click="searchFeedback">搜索</el-button></div
-      ></div
-    >
-    <div class="problem-list"
-      ><singleProblem
-        v-for="(item, index) in feedbackList"
-        :key="index"
-        :problem-data="item"
-        :is-handle="item.problemStatus === STATUS.unhandled"
-        style="margin-top: 22px; margin-bottom: 2px"
-    /></div>
-
-    <el-pagination
-      v-model:current-page="pageNumber"
-      v-model:page-size="pageSize"
-      background
-      layout="prev, pager, next,sizes,jumper"
-      :page-sizes="[5, 10, 20, 40]"
-      :total="totalRow"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      class="flex justify-end"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { Search } from '@element-plus/icons-vue';
-  import { tabContent } from './constant.ts';
-  import singleProblem from './component/singleProblem.vue';
-  import useFeedback from './use-feedback.ts';
-  import { STATUS } from '@/api/feedback/feedback';
-
-  const useFeedbackList = useFeedback();
-  const { feedbackList, pageNumber, pageSize, problemStatus, queryDescription, totalRow, getList } = useFeedbackList;
-
-  const handleClick = () => {
-    queryDescription.value = '';
-    getList();
-  };
-
-  const searchFeedback = () => {
-    pageNumber.value = 1;
-    getList();
-  };
-
-  const handleSizeChange = () => {
-    pageNumber.value = 1;
-    getList();
-  };
-  const handleCurrentChange = () => {
-    getList();
-  };
-</script>
-
-<style scoped>
-  .feedback-page {
-    position: relative;
-    height: calc(100vh - 64px - 12px);
-    background-color: #ffffff;
-    padding-top: 20px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  :deep(.el-radio-button .el-radio-button__inner) {
-    width: 188px;
-    background-color: #00000005;
-  }
-
-  .feedback-head {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .search-input {
-    margin-top: 24px;
-  }
-
-  .problem-list {
-    height: calc(100vh - 270px);
-    overflow: auto;
-    margin-bottom: 4px;
-    padding: 0 2px;
-  }
-
-  :deep(.el-pagination .el-select) {
-    width: 92px;
-  }
-</style>

src/views/system/comments/PageCommentsManage.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="feedback-page">
+    <div class="feedback-head">
+      <!-- <el-radio-group
+        v-model="problemStatus"
+        class="radio-button"
+        text-color="#1677FF"
+        fill="#1890FF26"
+        @change="handleClick"
+      >
+        <el-radio-button v-for="item in tabContent" :value="item.value" :key="item.value">{{
+          item.name
+        }}</el-radio-button>
+      </el-radio-group> -->
+      <div class="search-input">
+        <!-- <el-input v-model="queryDescription" style="width: 294px" placeholder="请输入搜索内容" :prefix-icon="Search" />
+        <el-button type="primary" style="margin-left: 16px" @click="searchFeedback">搜索</el-button> -->
+        <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-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-select>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="problem-list"
+      ><SingleComment
+        v-for="(item, index) in commentsList"
+        :key="index"
+        :problem-data="item"
+        :re-fresh-list="getList"
+        style="margin-top: 22px; margin-bottom: 2px"
+    /></div>
+
+    <el-pagination
+      v-model:current-page="pageNumber"
+      v-model:page-size="pageSize"
+      background
+      layout="prev, pager, next,sizes,jumper"
+      :page-sizes="[5, 10, 20, 40]"
+      :total="totalRow"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      class="flex justify-end"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  // import { Search } from '@element-plus/icons-vue';
+  // import { tabContent } from './constant.ts';
+  import SingleComment from './component/SingleComment.vue';
+  import useComments from './use-comments.ts';
+  import { REPLYSTATUS, COMMENTSTATUS } from '@/api/comments/comments';
+
+  const useCommentsList = useComments();
+  const { commentsList, pageNumber, pageSize, totalRow, getList, listFilter } = useCommentsList;
+
+  // const handleClick = () => {
+  //   queryDescription.value = '';
+  //   getList();
+  // };
+
+  // const searchFeedback = () => {
+  //   pageNumber.value = 1;
+  //   getList();
+  // };
+
+  const handleSizeChange = () => {
+    pageNumber.value = 1;
+    getList();
+  };
+  const handleCurrentChange = () => {
+    getList();
+  };
+</script>
+
+<style scoped>
+  .feedback-page {
+    position: relative;
+    height: calc(100vh - 64px - 12px);
+    background-color: #ffffff;
+    padding-top: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  :deep(.el-radio-button .el-radio-button__inner) {
+    width: 188px;
+    background-color: #00000005;
+  }
+
+  .feedback-head {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .search-input {
+    margin-top: 24px;
+  }
+
+  .problem-list {
+    height: calc(100vh - 270px);
+    overflow: auto;
+    margin-bottom: 4px;
+    padding: 0 2px;
+  }
+
+  :deep(.el-pagination .el-select) {
+    width: 92px;
+  }
+  .demo-form-inline .el-select {
+    --el-select-width: 220px;
+  }
+</style>
+./use-comments.ts

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

@@ -0,0 +1,255 @@
+<template>
+  <div
+    class="single-item"
+    :style="`padding-bottom:${props.problemData.isReplied === REPLYSTATUS.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>
+
+    <el-divider />
+    <!-- <div class="problem-type">
+      <div>问题类型：</div>
+      <div class="type-content">{{ problemTypeName[props.problemData.problemType] }}</div>
+    </div> -->
+    <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"
+        />
+      </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>
+    </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>
+
+    <!-- <el-collapse v-if="props.problemData.problemStatus === STATUS.handled" v-model="activeNames">
+      <el-collapse-item name="1">
+        <template #title>
+          <div class="problem-describe">
+            <div>处理人：</div>
+            <div class="problem-content">{{ props.problemData.processorName }}</div>
+          </div>
+        </template>
+        <div class="problem-describe">
+          <div>处理措施：</div>
+          <div class="problem-content">{{ props.problemData.dealMethod }}</div>
+        </div>
+      </el-collapse-item>
+    </el-collapse> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  // import { useRouter } from 'vue-router';
+  import { Records, REPLYSTATUS, COMMENTSTATUS, undateCommentStatus, replyComment } from '@/api/comments/comments';
+  // import useHandleStore from '../useHandleStore';
+  // import { storeToRefs } from 'pinia';
+  // import { problemTypeName } from '../constant';
+
+  // const useSingle = useHandleStore();
+  // const { singleFeedback } = storeToRefs(useSingle);
+
+  // const router = useRouter();
+  const props = defineProps<{
+    problemData: Records;
+    reFreshList: () => unknown;
+  }>();
+
+  // const showComment = ref<boolean>(false);
+  // const replyed = ref<boolean>(false);
+
+  // const activeNames = ref<string>('');
+  const problemImageUrls = computed(() => {
+    const imageUrlString = props.problemData.picUrl;
+    return imageUrlString ? imageUrlString.split(',') : [];
+  });
+
+  // const handleProblem = () => {
+  //   singleFeedback.value = props.problemData;
+  //   router.push('/system/feedback-handle');
+  // };
+  const hideComment = () => {
+    // showComment.value = false;
+    undateCommentStatus({ id: props.problemData.id, status: COMMENTSTATUS.rejected }).then(() => {
+      props.reFreshList();
+      // console.log('隐藏成功');
+    });
+    // console.log('隐藏');
+  };
+  const displayComment = () => {
+    // showComment.value = true;
+    undateCommentStatus({ id: props.problemData.id, status: COMMENTSTATUS.passed }).then(() => {
+      props.reFreshList();
+      // console.log('显示成功');
+    });
+    // console.log('显示');
+  };
+  const submitReply = () => {
+    // replyed.value = true;
+    replyComment({ id: props.problemData.id, reply: replyContent.value }).then(() => {
+      openReply.value = false;
+      props.reFreshList();
+      // console.log('隐藏成功');
+    });
+    // console.log('回复');
+  };
+
+  const openReply = ref(false);
+
+  const replyContent = ref('回复：');
+  // const testContent = ref(
+  //   '回复：3月7日，中共中央政治局委员、外交部长王毅谈中美关系时对美国连发5问，并表示，相互尊重是中美关系的重要前提。',
+  // );
+</script>
+
+<style scoped>
+  .single-item {
+    background: #ffffff;
+    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.09);
+    border-radius: 6px;
+    padding: 16px 12px 0px 12px;
+    position: relative;
+  }
+
+  .single-contact {
+    margin-left: 20px;
+    margin-right: 40px;
+    color: #00000073;
+  }
+  .buttonBar {
+    position: absolute;
+    display: flex;
+    width: 200px;
+    top: 11px;
+    right: 12px;
+  }
+  .single-handle {
+    position: relative;
+    top: 11px;
+    right: 12px;
+  }
+
+  .el-divider--horizontal {
+    margin: 16px 0;
+  }
+
+  .problem-type,
+  .problem-describe {
+    font-size: 14px;
+    white-space: nowrap;
+    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,
+  .problem-content {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .type-content {
+    font-weight: 600;
+  }
+  .problem-picture {
+    display: flex;
+    gap: 20px;
+  }
+
+  :deep(.el-collapse-item__header) {
+    border-bottom: none;
+  }
+
+  :deep(.el-collapse-item__wrap) {
+    border-bottom: none;
+  }
+
+  :deep(.el-collapse-item__content) {
+    padding-bottom: 0px;
+  }
+  :deep(.el-collapse) {
+    border-top: none;
+  }
+</style>

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

@@ -1,146 +0,0 @@
-<template>
-  <div
-    class="single-item"
-    :style="`padding-bottom:${props.problemData.problemStatus === STATUS.handled ? '0px' : '38px'}`"
-  >
-    <div style="display: flex; font-size: 12px">
-      <img src="@/assets/icons/phone.png" alt="" />
-      <div class="single-contact">联系方式：{{ props.problemData.mobile }}</div>
-      <div style="color: #00000073"
-        >人员：{{ props.problemData.submitterUsername }}-{{ props.problemData.submitterNickname }}
-      </div>
-      <div style="margin-left: 20px; color: #00000073">日期：{{ props.problemData.createdAt }}</div>
-    </div>
-    <el-button v-if="props.isHandle" type="primary" class="single-handle" @click="handleProblem"
-      >处理</el-button
-    >
-    <el-divider />
-    <div class="problem-type">
-      <div>问题类型：</div>
-      <div class="type-content">{{ problemTypeName[props.problemData.problemType] }}</div>
-    </div>
-    <div class="problem-describe">
-      <div>问题描述：</div>
-      <div class="problem-content">{{ props.problemData.problemDescription }}</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>
-
-    <el-collapse v-if="props.problemData.problemStatus === STATUS.handled" v-model="activeNames">
-      <el-collapse-item name="1">
-        <template #title>
-          <div class="problem-describe">
-            <div>处理人：</div>
-            <div class="problem-content">{{ props.problemData.processorName }}</div>
-          </div>
-        </template>
-        <div class="problem-describe">
-          <div>处理措施：</div>
-          <div class="problem-content">{{ props.problemData.dealMethod }}</div>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useRouter } from 'vue-router';
-import { Records, STATUS } from '@/api/feedback/feedback';
-import useHandleStore from '../useHandleStore';
-import { storeToRefs } from 'pinia';
-import { problemTypeName } from '../constant';
-
-const useSingle = useHandleStore();
-const { singleFeedback } = storeToRefs(useSingle);
-
-const router = useRouter();
-const props = defineProps<{
-  problemData: Records;
-  isHandle: boolean;
-}>();
-
-const activeNames = ref<string>('');
-const problemImageUrls = computed(() => {
-  const imageUrlString = props.problemData.problemImageUrl;
-  return imageUrlString ? imageUrlString.split(',') : [];
-});
-
-const handleProblem = () => {
-  singleFeedback.value = props.problemData;
-  router.push('/system/feedback-handle');
-};
-</script>
-
-<style scoped>
-.single-item {
-  background: #ffffff;
-  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.09);
-  border-radius: 6px;
-  padding: 16px 12px 0px 12px;
-  position: relative;
-}
-
-.single-contact {
-  margin-left: 10px;
-  margin-right: 40px;
-}
-.single-handle {
-  position: absolute;
-  top: 11px;
-  right: 12px;
-}
-
-.el-divider--horizontal {
-  margin: 16px 0;
-}
-
-.problem-type,
-.problem-describe {
-  font-size: 14px;
-  white-space: nowrap;
-  word-break: break-word;
-  display: flex;
-  margin-bottom: 8px;
-}
-
-.type-content,
-.problem-content {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-.type-content {
-  font-weight: 600;
-}
-.problem-picture{
-  display: flex;
-  gap: 20px;
-}
-
-:deep(.el-collapse-item__header) {
-  border-bottom: none;
-}
-
-:deep(.el-collapse-item__wrap) {
-  border-bottom: none;
-}
-
-:deep(.el-collapse-item__content) {
-  padding-bottom: 0px;
-}
-:deep(.el-collapse) {
-  border-top: none;
-}
-</style>

src/views/system/comments/handleFeedback.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="feedback-page">
-    <el-button :icon="Back" @click="backList">返回</el-button>
-    <div
-      ><singleProblem
-        :problem-data="singleFeedback"
-        :is-handle="false"
-        style="margin-top: 24px; margin-bottom: 40px"
-    /></div>
-    <el-form
-      ref="ruleFormRef"
-      :model="ruleForm"
-      :rules="rules"
-      label-position="left"
-      label-width="90px"
-      class="demo-ruleForm"
-      size="default"
-      status-icon
-    >
-      <el-form-item label="处理人：" prop="name">
-        <el-input v-model="ruleForm.name" placeholder="请输入" style="width: 160px" />
-      </el-form-item>
-      <el-form-item label="处理措施：" prop="solution">
-        <el-input
-          v-model="ruleForm.solution"
-          placeholder="请输入多行文字"
-          :autosize="{ minRows: 7, maxRows: 7 }"
-          type="textarea"
-          style="height: 160px"
-        />
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" @click="subHandle" class="sub-btn" :disabled="!isFormValid"> 提交 </el-button>
-
-    <el-dialog
-      v-model="dialogVisible"
-      title="提交成功"
-      width="500"
-      align-center
-      @close="closeDialog"
-    >
-      <span>提交成功，可以在【已处理】中查看</span>
-      <template #footer>
-        <div class="dialog-footer">
-          <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
-          <el-button type="primary" @click="closeDialog"> 确定 </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, reactive, watch,computed } from 'vue';
-  import { Back } from '@element-plus/icons-vue';
-  import { useRouter } from 'vue-router';
-  import singleProblem from './component/singleProblem.vue';
-  import type { FormInstance, FormRules } from 'element-plus';
-  import useHandleStore from './useHandleStore';
-  import { storeToRefs } from 'pinia';
-  import { STATUS, updateFeedback } from '@/api/feedback/feedback';
-
-  const useSingleStore = useHandleStore();
-  const { singleFeedback } = storeToRefs(useSingleStore);
-
-  const router = useRouter();
-
-  const ruleFormRef = ref<FormInstance>();
-  interface RuleForm {
-    name: string;
-    solution: string;
-  }
-  const ruleForm = reactive<RuleForm>({
-    name: '',
-    solution: '',
-  });
-
-  const rules = reactive<FormRules>({
-    name: [{ required: true, message: '处理人不能为空', trigger: 'blur' }],
-  });
-  const isFormValid = computed(()=>{
-    return Object.keys(rules).every(item => ruleForm[item].length>0)
-  })
-
-  const backList = () => {
-    router.push('/system/feedback');
-  };
-
-  const dialogVisible = ref<boolean>(false);
-
-  const subHandle = () => {
-    if (!ruleFormRef.value) return;
-    ruleFormRef.value.validate((valid) => {
-      if (!valid) {
-        return;
-      }
-
-      const subData = {
-        id: singleFeedback.value.id,
-        problemStatus: STATUS.handled,
-        processorName: ruleForm.name,
-        dealMethod: ruleForm.solution,
-      };
-      updateFeedback(subData).then(() => {
-        dialogVisible.value = true;
-      });
-    });
-  };
-
-  const closeDialog = () => {
-    dialogVisible.value = false;
-    backList();
-  };
-</script>
-
-<style scoped>
-  .feedback-page {
-    position: relative;
-    height: calc(100vh - 64px - 12px);
-    background-color: #ffffff;
-    padding-top: 20px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  .sub-btn {
-    margin-top: 6px;
-    margin-left: 88px;
-  }
-</style>

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

@@ -0,0 +1,59 @@
+// import { STATUS, Records, QueryFeedback, getFeedbackList } from '@/api/feedback/feedback';
+import { REPLYSTATUS, COMMENTSTATUS, Records, CommentsQuery, getCommentsList } from '@/api/comments/comments';
+import { onMounted, ref } from 'vue';
+
+export function useCommentsList() {
+  const commentsList = ref<Records[]>([]);
+  const pageNumber = ref<number>(1);
+  const pageSize = ref<number>(10);
+  // const problemStatus = ref<STATUS>(STATUS.unhandled);
+  // const queryDescription = ref<string>('');
+  const totalPage = ref<number>();
+  const totalRow = ref<number>();
+
+  const listFilter = ref({
+    authStatus: COMMENTSTATUS.all,
+    replyStatus: REPLYSTATUS.all,
+  });
+
+  const getList = () => {
+    const params: CommentsQuery = {
+      pageNumber: pageNumber.value,
+      pageSize: pageSize.value,
+      //problemDescription: queryDescription.value
+      // problemStatus: problemStatus.value,
+    };
+    if (listFilter.value.authStatus !== COMMENTSTATUS.all) {
+      //若传1，则拉取审核通过的；若传0，则拉取审核未通过的和未审核的
+      params.queryParam = {
+        isApproved: listFilter.value.authStatus === COMMENTSTATUS.passed ? 1 : 0,
+      };
+    }
+    if (listFilter.value.replyStatus !== REPLYSTATUS.all) {
+      params.queryParam = {
+        isReplied: listFilter.value.replyStatus,
+      };
+    }
+    getCommentsList(params).then((res) => {
+      commentsList.value = res.records;
+      totalPage.value = res.totalPage;
+      totalRow.value = res.totalRow;
+    });
+  };
+
+  onMounted(() => {
+    getList();
+  });
+
+  return {
+    commentsList,
+    pageNumber,
+    pageSize,
+    totalPage,
+    totalRow,
+    getList,
+    listFilter,
+  };
+}
+
+export default useCommentsList;

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

@@ -1,46 +0,0 @@
-import { STATUS, Records, QueryFeedback, getFeedbackList } from '@/api/feedback/feedback';
-import { onMounted, ref } from 'vue';
-
-export function useFeedbackList() {
-  const feedbackList = ref<Records[]>([]);
-  const pageNumber = ref<number>(1);
-  const pageSize = ref<number>(10);
-  const problemStatus = ref<STATUS>(STATUS.unhandled);
-  const queryDescription = ref<string>('');
-  const totalPage = ref<number>();
-  const totalRow = ref<number>();
-
-  const getList = () => {
-    const params: QueryFeedback = {
-      pageNumber: pageNumber.value,
-      pageSize: pageSize.value,
-      //problemDescription: queryDescription.value
-      problemStatus: problemStatus.value,
-    };
-    if (queryDescription.value) {
-      params.problemDescription = queryDescription.value;
-    }
-    getFeedbackList(params).then((res) => {
-      feedbackList.value = res.records;
-      totalPage.value = res.totalPage;
-      totalRow.value = res.totalRow;
-    });
-  };
-
-  onMounted(() => {
-    getList();
-  });
-
-  return {
-    feedbackList,
-    pageNumber,
-    pageSize,
-    problemStatus,
-    queryDescription,
-    totalPage,
-    totalRow,
-    getList,
-  };
-}
-
-export default useFeedbackList;