From 4bb43489eec531c72548a0e6d5cd4d3631f1c18f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 15 Aug 2023 16:36:16 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E7=BB=9C=E4=B8=BE=E6=8A=A5=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/diythem.scss          | 10 ++++
 src/components/ImagePreview/index.vue   | 18 ++++---
 src/components/ImageUpload/index.vue    | 62 ++++++++++++++-----------
 src/views/netManage/netReport/index.vue | 33 +++++++++----
 src/views/netManage/qlzx/index.vue      | 22 ++++++++-
 5 files changed, 98 insertions(+), 47 deletions(-)

diff --git a/src/assets/styles/diythem.scss b/src/assets/styles/diythem.scss
index 2e369b9..1be02aa 100644
--- a/src/assets/styles/diythem.scss
+++ b/src/assets/styles/diythem.scss
@@ -162,3 +162,13 @@
 .desLable {
   width: 180px !important;
 }
+
+.image-title {
+  margin: 10px 0;
+  font-size: 13px;
+  font-weight: bold;
+  color: #333;
+}
+.image-view {
+  border: 1px solid #e6ebf5;
+}
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 3c770c7..375af70 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -2,7 +2,7 @@
   <el-image
     :src="`${realSrc}`"
     fit="cover"
-    :style="`width:${realWidth};height:${realHeight};`"
+    :style="`width:${realWidth};height:${realHeight};margin:${margin}`"
     :preview-src-list="realSrcList"
   >
     <div slot="error" class="image-slot">
@@ -19,16 +19,20 @@ export default {
   props: {
     src: {
       type: String,
-      default: ""
+      default: "",
     },
     width: {
       type: [Number, String],
-      default: ""
+      default: "",
+    },
+    margin: {
+      type: [Number, String],
+      default: "",
     },
     height: {
       type: [Number, String],
-      default: ""
-    }
+      default: "",
+    },
   },
   computed: {
     realSrc() {
@@ -47,7 +51,7 @@ export default {
       }
       let real_src_list = this.src.split(",");
       let srcList = [];
-      real_src_list.forEach(item => {
+      real_src_list.forEach((item) => {
         if (isExternal(item)) {
           return srcList.push(item);
         }
@@ -60,7 +64,7 @@ export default {
     },
     realHeight() {
       return typeof this.height == "string" ? this.height : `${this.height}px`;
-    }
+    },
   },
 };
 </script>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index b57a15e..05cbf00 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -15,16 +15,20 @@
       :headers="headers"
       :file-list="fileList"
       :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
+      :class="{ hide: this.fileList.length >= this.limit }"
     >
       <i class="el-icon-plus"></i>
     </el-upload>
-    
+
     <!-- 上传提示 -->
     <div class="el-upload__tip" slot="tip" v-if="showTip">
       请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      <template v-if="fileSize">
+        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+      </template>
       的文件
     </div>
 
@@ -55,7 +59,7 @@ export default {
     },
     // 大小限制(MB)
     fileSize: {
-       type: Number,
+      type: Number,
       default: 5,
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
@@ -66,8 +70,8 @@ export default {
     // 是否显示提示
     isShowTip: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
@@ -77,11 +81,11 @@ export default {
       dialogVisible: false,
       hideUpload: false,
       baseUrl: process.env.VUE_APP_BASE_API,
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/zongzhi/common/upload", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },
-      fileList: []
+      fileList: [],
     };
   },
   watch: {
@@ -89,14 +93,14 @@ export default {
       handler(val) {
         if (val) {
           // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
+          const list = Array.isArray(val) ? val : this.value.split(",");
           // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
+          this.fileList = list.map((item) => {
             if (typeof item === "string") {
               if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: this.baseUrl + item, url: this.baseUrl + item };
+                item = { name: this.baseUrl + item, url: this.baseUrl + item };
               } else {
-                  item = { name: item, url: item };
+                item = { name: item, url: item };
               }
             }
             return item;
@@ -107,8 +111,8 @@ export default {
         }
       },
       deep: true,
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   computed: {
     // 是否显示提示
@@ -125,7 +129,7 @@ export default {
         if (file.name.lastIndexOf(".") > -1) {
           fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
         }
-        isImg = this.fileType.some(type => {
+        isImg = this.fileType.some((type) => {
           if (file.type.indexOf(type) > -1) return true;
           if (fileExtension && fileExtension.indexOf(type) > -1) return true;
           return false;
@@ -135,7 +139,9 @@ export default {
       }
 
       if (!isImg) {
-        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+        this.$modal.msgError(
+          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
+        );
         return false;
       }
       if (this.fileSize) {
@@ -167,8 +173,8 @@ export default {
     },
     // 删除图片
     handleDelete(file) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
+      const findex = this.fileList.map((f) => f.name).indexOf(file.name);
+      if (findex > -1) {
         this.fileList.splice(findex, 1);
         this.$emit("input", this.listToString(this.fileList));
       }
@@ -202,25 +208,25 @@ export default {
           strs += list[i].url.replace(this.baseUrl, "") + separator;
         }
       }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
-    }
-  }
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
 ::v-deep.hide .el-upload--picture-card {
-    display: none;
+  display: none;
 }
 // 去掉动画效果
 ::v-deep .el-list-enter-active,
 ::v-deep .el-list-leave-active {
-    transition: all 0s;
+  transition: all 0s;
 }
 
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
+::v-deep .el-list-enter,
+.el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
 }
 </style>
-
diff --git a/src/views/netManage/netReport/index.vue b/src/views/netManage/netReport/index.vue
index e992de6..444a82b 100644
--- a/src/views/netManage/netReport/index.vue
+++ b/src/views/netManage/netReport/index.vue
@@ -112,7 +112,6 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="${comment}" align="center" prop="id" />
       <el-table-column label="举报人" align="center" prop="jbMan" />
       <el-table-column label="被举报对象" align="center" prop="jbdx" />
       <el-table-column label="苏州编号" align="center" prop="jbbh" />
@@ -201,7 +200,14 @@
         class="dialog-from"
       >
         <el-form-item label="区域" prop="areaId">
-          <el-input v-model="form.areaId" placeholder="请输入区域" />
+          <el-select v-model="form.areaId" placeholder="请选择区域" filterable>
+            <el-option
+              v-for="dict in townList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="举报人" prop="jbMan">
           <el-input v-model="form.jbMan" placeholder="请输入举报人" />
@@ -233,7 +239,11 @@
           <el-input v-model="form.address" placeholder="请输入地址" />
         </el-form-item>
         <el-form-item label="举报内容">
-          <editor v-model="form.content" :min-height="192" />
+          <el-input
+            v-model="form.content"
+            type="textarea"
+            placeholder="请输入举报内容"
+          />
         </el-form-item>
         <el-form-item label="状态" prop="state">
           <el-select v-model="form.state" placeholder="请选择状态">
@@ -279,7 +289,7 @@
         labelClassName="desLable"
       >
         <el-descriptions-item label="区域">{{
-          form.areaId
+          $filterTown(form.areaId)
         }}</el-descriptions-item>
 
         <el-descriptions-item label="举报人">{{
@@ -314,13 +324,16 @@
           form.content
         }}</el-descriptions-item>
 
-        <el-descriptions-item label="状态">{{
-          form.state
-        }}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <dict-tag :options="dict.type.tc_steam_state" :value="form.state" />
+        </el-descriptions-item>
 
-        <el-descriptions-item label="来源">{{
-          form.source
-        }}</el-descriptions-item>
+        <el-descriptions-item label="来源">
+          <dict-tag
+            :options="dict.type.tc_net_jb_source"
+            :value="form.source"
+          />
+        </el-descriptions-item>
       </el-descriptions>
     </el-dialog>
   </div>
diff --git a/src/views/netManage/qlzx/index.vue b/src/views/netManage/qlzx/index.vue
index e1d7b81..d934d4d 100644
--- a/src/views/netManage/qlzx/index.vue
+++ b/src/views/netManage/qlzx/index.vue
@@ -264,9 +264,9 @@
           form.zhuanxiangContent
         }}</el-descriptions-item>
 
-        <el-descriptions-item label="专项图片">{{
+        <!-- <el-descriptions-item label="专项图片">{{
           form.zhuanxiangImg
-        }}</el-descriptions-item>
+        }}</el-descriptions-item> -->
 
         <el-descriptions-item label="处理类型">
           <dict-tag
@@ -275,6 +275,17 @@
           />
         </el-descriptions-item>
       </el-descriptions>
+      <div class="image-title">专项图片</div>
+      <div class="image-view">
+        <ImagePreview
+          v-for="(item, index) in imageList"
+          :key="'image' + index"
+          :src="item"
+          margin="10px"
+          width="60px"
+          height="60px"
+        />
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -298,6 +309,7 @@ export default {
   dicts: ["tc_chuli_type"],
   data() {
     return {
+      imageList: [],
       tableHeigth: 0,
       //查看详情
       infoOpen: false,
@@ -396,6 +408,7 @@ export default {
 
         remark: null,
       };
+      this.imageList = [];
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -419,6 +432,11 @@ export default {
       this.reset();
       const id = row.id || this.ids;
       getZhuanxiang(id).then((response) => {
+        if (response.data.zhuanxiangImg) {
+          this.imageList = response.data.zhuanxiangImg.split(",");
+        } else {
+          this.imageList = [];
+        }
         this.form = response.data;
         this.infoOpen = true;
         this.infoTitle = "查看清朗专项详情";