From fcb48b1105dcf9cceb8c0a733187419c3883fe51 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 4 Feb 2026 16:40:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=8A=A8=E6=80=81=E4=B8=BE=E6=8A=A5?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E9=A1=B5=E9=9D=A2):=20=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E"=E4=B8=BE=E6=8A=A5=E5=9B=BE=E7=89=87"?=
 =?UTF-8?q?=E5=92=8C"=E4=B8=BE=E6=8A=A5=E5=86=85=E5=AE=B9"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dynamic-report-approval/index.vue         | 313 +++++++++++-------
 1 file changed, 193 insertions(+), 120 deletions(-)

diff --git a/src/views/approval/dynamic-report-approval/index.vue b/src/views/approval/dynamic-report-approval/index.vue
index 0956927..7abc375 100644
--- a/src/views/approval/dynamic-report-approval/index.vue
+++ b/src/views/approval/dynamic-report-approval/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="app-container">
+    <!-- 搜索栏 -->
     <div class="filter-container">
+      <!-- 系统 -->
       <el-select
         v-model="listQuery.sysOrigin"
         placeholder="系统"
@@ -15,13 +17,13 @@
           :value="item.value"
         >
           <span style="float: left;">
-            <sys-origin-icon
-              :icon="item.value"
-              :desc="item.value"
-            /></span>
+            <sys-origin-icon :icon="item.value" :desc="item.value"
+          /></span>
           <span style="float: left;margin-left:10px">{{ item.label }}</span>
         </el-option>
       </el-select>
+
+      <!-- 状态 -->
       <el-select
         v-model="listQuery.approvalStatus"
         placeholder="状态"
@@ -36,6 +38,8 @@
           :value="item.value"
         />
       </el-select>
+
+      <!-- 举报类型 -->
       <el-select
         v-model="listQuery.reportType"
         placeholder="举报类型"
@@ -50,6 +54,8 @@
           :value="item.value"
         />
       </el-select>
+
+      <!-- 举报人ID -->
       <el-input
         v-model.trim="listQuery.reportUserId"
         placeholder="举报人ID"
@@ -57,6 +63,8 @@
         class="filter-item"
         @blur="handlerReportUserIdBlur"
       />
+
+      <!-- 被举报人ID -->
       <el-input
         v-model.trim="listQuery.reportedUserId"
         placeholder="被举报人ID"
@@ -64,6 +72,8 @@
         class="filter-item"
         @blur="handlerReportedUserIdBlur"
       />
+
+      <!-- 时间范围 -->
       <div class="filter-item">
         <el-date-picker
           v-model="rangeDate"
@@ -75,6 +85,8 @@
           end-placeholder="结束日期"
         />
       </div>
+
+      <!-- 搜索按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -84,6 +96,8 @@
         搜索
       </el-button>
     </div>
+
+    <!-- 表单 -->
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -92,7 +106,10 @@
       highlight-current-row
       @selection-change="selsUserChange"
     >
+      <!-- (待审核)选中按钮 -->
       <el-table-column v-if="isAllowApproval" type="selection" width="55" />
+
+      <!-- 系统 -->
       <el-table-column prop="sysOrigin" label="系统" align="center">
         <template slot-scope="scope">
           <sys-origin-icon
@@ -101,24 +118,57 @@
           />
         </template>
       </el-table-column>
+
+      <!-- 举报人 -->
       <el-table-column label="举报人" align="center">
         <template slot-scope="scope">
           <el-button
             v-if="scope.row.reportUser"
             type="text"
             @click="queryUserDetails(scope.row.reportUser.id)"
-          >{{ scope.row.reportUser.userNickname }}</el-button>
+            >{{ scope.row.reportUser.userNickname }}</el-button
+          >
         </template>
       </el-table-column>
+
+      <!-- 被举报人 -->
       <el-table-column label="被举报人" align="center">
         <template slot-scope="scope">
           <el-button
             v-if="scope.row.reportedUser"
             type="text"
             @click="queryUserDetails(scope.row.reportedUser.id)"
-          >{{ scope.row.reportedUser.userNickname }}</el-button>
+            >{{ scope.row.reportedUser.userNickname }}</el-button
+          >
         </template>
       </el-table-column>
+
+      <!-- 举报-图片 -->
+      <el-table-column label="举报-图片" align="center" width="190">
+        <template slot-scope="scope">
+          <div class="cursor-pointer">
+            <div v-if="handleReportedUrls(scope.row).length > 0">
+              <el-image
+                v-for="(item, index) in handleReportedUrls(scope.row)"
+                :key="index"
+                :src="item"
+                :preview-src-list="handleReportedUrls(scope.row)"
+                style="width: 50px; height: 50px; margin: 0px 10px 10px 0px"
+              />
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+
+      <!-- 举报-内容 -->
+      <el-table-column
+        prop="reportedContent"
+        label="举报-内容"
+        align="center"
+        width="300"
+      />
+
+      <!-- 举报类型 -->
       <el-table-column label="举报类型" align="center">
         <template slot-scope="scope">
           <div v-for="item in reportTypes" :key="item.value">
@@ -128,6 +178,8 @@
           </div>
         </template>
       </el-table-column>
+
+      <!-- 动态-图片 -->
       <el-table-column label="动态-图片" align="center">
         <template slot-scope="scope">
           <div class="cursor-pointer">
@@ -143,7 +195,11 @@
           </div>
         </template>
       </el-table-column>
+
+      <!-- 动态-内容 -->
       <el-table-column prop="dynamicContent" label="动态-内容" align="center" />
+
+      <!-- 时间 -->
       <el-table-column label="时间" align="center">
         <template slot-scope="scope">
           <div>创建时间: {{ scope.row.createTime | dateFormat }}</div>
@@ -152,15 +208,18 @@
           </div>
         </template>
       </el-table-column>
+
+      <!-- 审批操作 -->
       <el-table-column fixed="right" label="操作" align="center" width="200">
         <template slot-scope="scope">
-          <el-button
-            type="text"
-            @click="accountHanle(scope.row)"
-          >被举报账号处理</el-button>
+          <el-button type="text" @click="accountHanle(scope.row)"
+            >被举报账号处理</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- （待审核列表）操作按钮 -->
     <div
       v-if="listQuery.approvalStatus === 0"
       style="text-align:center;padding: 20px;"
@@ -198,6 +257,8 @@
         违规
       </el-button>
     </div>
+
+    <!-- 分页组件 -->
     <pagination
       v-show="total > 0"
       :total="total"
@@ -221,37 +282,37 @@
 </template>
 
 <script>
-import { reportTable, report } from '@/api/dynamic'
-import Pagination from '@/components/Pagination'
-import { validPositiveNumber } from '@/utils/validate'
-import { pickerOptions } from '@/constant/el-const'
-import { copyText } from '@/utils'
-import { sysOriginPlatforms } from '@/constant/origin'
-import AccountHanle from '@/components/data/AccountHanle'
-import { mapGetters } from 'vuex'
+import { reportTable, report } from "@/api/dynamic";
+import Pagination from "@/components/Pagination";
+import { validPositiveNumber } from "@/utils/validate";
+import { pickerOptions } from "@/constant/el-const";
+import { copyText } from "@/utils";
+import { sysOriginPlatforms } from "@/constant/origin";
+import AccountHanle from "@/components/data/AccountHanle";
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'DynamicReport',
+  name: "DynamicReport",
   components: { Pagination, AccountHanle },
   data() {
     return {
       sysOriginPlatforms,
       pickerOptions,
       reportStatus: [
-        { value: 0, name: '待审核' },
-        { value: 1, name: '违规' },
-        { value: 2, name: '正常' }
+        { value: 0, name: "待审核" },
+        { value: 1, name: "违规" },
+        { value: 2, name: "正常" }
       ],
-      thatSelectedUserId: '',
+      thatSelectedUserId: "",
       userDeatilsDrawer: false,
       accountHandleVisible: false,
       reportTypes: [
-        { value: 0, name: '非法信息' },
-        { value: 1, name: '人身攻击' },
-        { value: 2, name: '不适当的内容' },
-        { value: 3, name: '发送垃圾邮件' },
-        { value: 4, name: '诈骗' },
-        { value: 5, name: '涉及色情' }
+        { value: 0, name: "非法信息" },
+        { value: 1, name: "人身攻击" },
+        { value: 2, name: "不适当的内容" },
+        { value: 3, name: "发送垃圾邮件" },
+        { value: 4, name: "诈骗" },
+        { value: 5, name: "涉及色情" }
       ],
       list: [],
       checkList: [],
@@ -259,23 +320,23 @@ export default {
       listQuery: {
         cursor: 1,
         limit: 20,
-        sysOrigin: '',
-        reportType: '',
-        reportUserId: '',
-        reportedUserId: '',
+        sysOrigin: "",
+        reportType: "",
+        reportUserId: "",
+        reportedUserId: "",
         approvalStatus: 0,
-        startTime: '',
-        endTime: ''
+        startTime: "",
+        endTime: ""
       },
-      rangeDate: '',
+      rangeDate: "",
       listLoading: true
-    }
+    };
   },
   computed: {
     isAllowApproval() {
-      return this.listQuery.approvalStatus === 0
+      return this.listQuery.approvalStatus === 0;
     },
-    ...mapGetters(['permissionsSysOriginPlatforms'])
+    ...mapGetters(["permissionsSysOriginPlatforms"])
   },
   watch: {
     rangeDate: {
@@ -283,173 +344,185 @@ export default {
       deep: true,
       handler(newVal) {
         if (newVal && newVal.length > 0) {
-          this.listQuery.startTime = newVal[0]
-          this.listQuery.endTime = newVal[1]
-          return
+          this.listQuery.startTime = newVal[0];
+          this.listQuery.endTime = newVal[1];
+          return;
         }
-        this.listQuery.startTime = ''
-        this.listQuery.endTime = ''
+        this.listQuery.startTime = "";
+        this.listQuery.endTime = "";
       }
     }
   },
   created() {
-    const that = this
-    const querySystem = this.permissionsSysOriginPlatforms[0]
+    const that = this;
+    const querySystem = this.permissionsSysOriginPlatforms[0];
     if (!querySystem) {
-      return
+      return;
     }
-    that.listQuery.sysOrigin = querySystem.value
-    that.renderData()
+    that.listQuery.sysOrigin = querySystem.value;
+    that.renderData();
   },
   methods: {
     renderData(isClean) {
-      const that = this
-      that.checkList = []
+      const that = this;
+      that.checkList = [];
       if (isClean === true) {
-        that.list = []
-        that.listQuery.cursor = 1
+        that.list = [];
+        that.listQuery.cursor = 1;
       }
-      that.listLoading = true
+      that.listLoading = true;
       reportTable(that.listQuery).then(res => {
-        const { body } = res
-        that.total = body.total || 0
-        that.list = body.records
-        that.listLoading = false
-      })
+        const { body } = res;
+        that.total = body.total || 0;
+        that.list = body.records;
+        that.listLoading = false;
+      });
     },
     handleSearch() {
-      this.renderData(true)
+      this.renderData(true);
     },
     accountHanle(row) {
-      this.accountHandleVisible = true
-      this.thatSelectedUserId = row.reportedUser.id
+      this.accountHandleVisible = true;
+      this.thatSelectedUserId = row.reportedUser.id;
     },
     renderDataSuccess() {
       this.$message({
-        message: 'Successful',
-        type: 'success'
-      })
-      this.renderData()
+        message: "Successful",
+        type: "success"
+      });
+      this.renderData();
     },
     selsUserChange(checkList) {
-      this.checkList = checkList
+      this.checkList = checkList;
     },
     queryUserDetails(userId) {
-      this.userDeatilsDrawer = true
-      this.thatSelectedUserId = userId
+      this.userDeatilsDrawer = true;
+      this.thatSelectedUserId = userId;
     },
     pass() {
-      const that = this
+      const that = this;
       if (that.checkList.length === 0) {
-        that.$opsMessage.warn('请勾选审批项')
-        return
+        that.$opsMessage.warn("请勾选审批项");
+        return;
       }
       that
-        .$confirm('确认审核选中记录吗？', '提示', {
-          type: 'warning'
+        .$confirm("确认审核选中记录吗？", "提示", {
+          type: "warning"
         })
         .then(() => {
-          that.listLoading = true
+          that.listLoading = true;
           const paramsData = {
             contentIds: that.getApprovalParams(),
             approvalStatus: 2
-          }
+          };
           report(paramsData)
             .then(res => {
-              that.listLoading = false
-              that.$opsMessage.success()
-              that.renderData(true)
+              that.listLoading = false;
+              that.$opsMessage.success();
+              that.renderData(true);
             })
             .catch(() => {
-              that.listLoading = false
-            })
+              that.listLoading = false;
+            });
         })
-        .catch(() => {})
+        .catch(() => {});
     },
     notpass() {
-      const that = this
+      const that = this;
       if (that.checkList.length === 0) {
-        that.$opsMessage.warn('请勾选审批项')
-        return
+        that.$opsMessage.warn("请勾选审批项");
+        return;
       }
       that
-        .$confirm('确认审核选中记录吗？', '提示', {
-          type: 'warning'
+        .$confirm("确认审核选中记录吗？", "提示", {
+          type: "warning"
         })
         .then(() => {
-          that.listLoading = true
+          that.listLoading = true;
           const paramsData = {
             contentIds: that.getApprovalParams(),
             approvalStatus: 1
-          }
+          };
           report(paramsData)
             .then(res => {
-              that.listLoading = false
-              that.$opsMessage.success()
-              that.renderData(true)
+              that.listLoading = false;
+              that.$opsMessage.success();
+              that.renderData(true);
             })
             .catch(() => {
-              that.listLoading = false
-            })
+              that.listLoading = false;
+            });
         })
-        .catch(() => {})
+        .catch(() => {});
     },
     getApprovalParams() {
-      const that = this
-      const approvalParams = []
+      const that = this;
+      const approvalParams = [];
       that.checkList.forEach(item => {
-        approvalParams.push(item.dynamicContentId)
-      })
-      return approvalParams
+        approvalParams.push(item.dynamicContentId);
+      });
+      return approvalParams;
     },
+
+    // 举报图片处理
+    handleReportedUrls(row) {
+      var pictures = [];
+      if (!row.reportedUrls) {
+        return [];
+      }
+      pictures = row.reportedUrls.split(",");
+      return pictures;
+    },
+
+    // 动态图片处理
     handleImageUrls(row) {
-      var pictures = []
+      var pictures = [];
       if (!row.dynamicPictures) {
-        return []
+        return [];
       }
       row.dynamicPictures.forEach((item, index) => {
-        pictures.push(item.resourceUrl)
-      })
-      return pictures
+        pictures.push(item.resourceUrl);
+      });
+      return pictures;
     },
     handlerReportUserIdBlur(event) {
       if (!validPositiveNumber(this.listQuery.reportUserId)) {
-        this.listQuery.reportUserId = ''
+        this.listQuery.reportUserId = "";
       }
     },
     handlerReportedUserIdBlur(event) {
       if (!validPositiveNumber(this.listQuery.reportedUserId)) {
-        this.listQuery.reportedUserId = ''
+        this.listQuery.reportedUserId = "";
       }
     },
     handleVideoClick(imageUrls) {
       if (!imageUrls) {
-        return
+        return;
       }
-      window.open(imageUrls)
+      window.open(imageUrls);
     },
     handleVideoOpenClick(url) {
       if (!url) {
-        return
+        return;
       }
-      window.open(url)
+      window.open(url);
     },
     copyTextContent(text) {
-      const that = this
+      const that = this;
       copyText(text)
         .then(() => {
           that.$message({
-            message: '复制成功',
-            type: 'success'
-          })
+            message: "复制成功",
+            type: "success"
+          });
         })
         .catch(() => {
           that.$message({
-            message: '复制失败',
-            type: 'error'
-          })
-        })
+            message: "复制失败",
+            type: "error"
+          });
+        });
     }
   }
-}
+};
 </script>