1

src/views/news/addNcomplaint.vue

@@ -46,15 +46,16 @@
           </el-form-item>
 
           <el-form-item label="附件：" class="custom-align-right" prop="">
+            <div v-if="file && (fileType == 'pdf' || fileType == 'word' || fileType == 'zip')" class="chooseImgDiv1">
+
+              <div> {{ file }}
+                <div></div>
+              </div>
+            </div>
             <div class="uploaderBox" @mouseenter="hovering = true" mouseleave="hovering = false">
               <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
                 <!-- 预览图片 -->
                 <img v-if="file && (fileType == 'jpeg' || fileType == 'png')" :src="file" class="avatar">
-                <div v-if="file && (fileType == 'pdf' || fileType == 'word')" class="chooseImgDiv1">
-                  <div>
-                    <div>{{ file }}</div>
-                  </div>
-                </div>
                 <div v-else class="chooseImgDiv">
                   <div>
                     <img src="@/assets/public/upload/noImage.png">
@@ -62,9 +63,9 @@
                   </div>
                 </div>
               </el-upload>
-              <input type="hidden" v-model="form.imgurl">
-              <span class="photo_tips">支持文件形式pdf,word,jpg,文件最大2M。</span>
-              <div v-if="hovering && imgUrl" class="delete-button" @click="handleDelete">
+              <input type="hidden" v-model="form.file">
+              <span class="photo_tips">支持文件形式pdf,word,jpg,zip文件最大2M。</span>
+              <div v-if="hovering && form.file" class="delete-button" @click="handleDelete">
                 <i class="el-icon-delete"></i>
               </div>
             </div>
@@ -398,15 +399,10 @@ export default {
       //word  pdf
       const isWord = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.type === 'application/vnd.ms-word' || file.type === 'doc';
       const isPdf = file.type === 'application/pdf' || file.type === 'application/x-pdf' || file.type === 'application/acrobat' || file.type === 'pdf' || file.type === 'text/x-pdf' || file.type === 'application/x-download' || file.type === 'application/octet-stream';
+      const isZip = file.type === 'application/zip' || file.type === 'application/x-zip-compressed' || file.type === 'application/x-zip' || file.type === 'application/x-compress' || file.type === 'application/x-compressed' || file.type === 'multipart/x-zip' || file.type === 'multipart/x-zip-compressed' || file.type === 'zip';
       const isLt2M = file.size / 1024 / 1024 < 2;
-      console.log(this.imgurl.length, '-0--------------------------------')
-      if (this.imgurl.length > 4) {
-        this.$message.warning('只能上传5张图片');
-        return false;
-      }
-
-      if (!isJPG && !isPNG && !isWord && !isPdf) {
-        this.$message.error('上传文件只能是 JPG、PNG、WORD、PDF 格式!');
+      if (!isJPG && !isPNG && !isWord && !isPdf && !isZip) {
+        this.$message.error('上传文件只能是 JPG、PNG、WORD、PDF 、ZIP 格式!');
         return false;
       }
       if (!isLt2M) {
@@ -414,15 +410,23 @@ export default {
         return false;
       }
 
+
       const formData = new FormData();
       formData.append('file', file);
 
       this.$store.dispatch('pool/uploadFile', formData).then(res => {
+        if (res.code != 200) {
+          this.$message.error("上传失败，请稍后再试！");
+          return false;
+        }
+        this.$message({
+          type: 'success',
+          message: '上传成功！文件类型' + res.data.fileType
+        });
         this.file = res.data.imgUrl;//提供表单地址
+        this.form.file = res.data.imgUrl;
         this.fileType = res.data.fileType;
         this.oldFileName = res.data.oldFileName;
-        this.form.file.push(res.data.imgUrl);//提供表单地址
-        console.log(res.data.imgUrl, '00000')
       })
       // 阻止默认的上传行为
       return false;
@@ -455,6 +459,11 @@ export default {
             this.form.department_arr_id = JSON.stringify(this.form.department_arr_id);
           }
 
+          //re_user_ids
+          if (typeof this.form.re_user_ids == 'object') {
+            this.form.re_user_ids = JSON.stringify(this.form.re_user_ids);
+          }
+
           delete this.form.cat_arr_id;
           delete this.form.catid;
           this.form.file = this.file;
@@ -479,6 +488,7 @@ export default {
                 type: 'error',
                 message: "投诉举报发布失败，请稍后再试！"
               });
+              this.cleatForm();
             }
           })
         }
@@ -497,6 +507,25 @@ export default {
     },
     //1.3 清理表单
     cleatForm() {
+      this.form = {
+        title: '',
+        type: 1,
+        level: 1,
+        city_arr_id: [],
+        city_id: '',
+        content: "",
+        file: "",
+        department_arr_id: [],
+        department_id: '',
+        want: "",
+        type: 1,
+        start: '',
+        re_user_ids: [],
+      };
+      this.file = '';
+      this.imgurl = [];
+      this.re_user_ids = [];
+      this.parentKey += 1; // 触发级联选择器重新加载
     },
     //提交表单 end ------------------------------------------------------------>
 
@@ -601,6 +630,10 @@ export default {
             this.form.department_id = this.form.department_arr_id.at(-1) || 0;
             this.form.department_arr_id = JSON.stringify(this.form.department_arr_id);
           }
+          //re_user_ids
+          if (typeof this.form.re_user_ids == 'object') {
+            this.form.re_user_ids = JSON.stringify(this.form.re_user_ids);
+          }
 
           delete this.form.cat_arr_id;
           delete this.form.time;
@@ -636,6 +669,11 @@ export default {
         }
       })
     },
+    handleDelete() {
+      // 删除图片
+      this.file = ''; // 清空图片 URL
+      this.form.file = ''; // 清空表单中的图片 URL
+    },
     //跳转操作 end ------------------------------------------------------------>
     //4.富文本编辑器 start ------------------------------------------------------------>
     //4.1 编辑器点击上传图片

src/views/news/addNotice.vue

@@ -39,7 +39,7 @@
               end-placeholder="结束日期" :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
-
+          <!-- {{ hovering }}{{ file }} -->
           <el-form-item label="附件：" class="custom-align-right" prop="">
             <div v-if="file && (fileType == 'pdf' || fileType == 'word' || fileType == 'zip')" class="chooseImgDiv1">
 
@@ -363,6 +363,7 @@ export default {
           message: '上传成功！文件类型' + res.data.fileType
         });
         this.file = res.data.imgUrl;//提供表单地址
+        this.form.file = res.data.imgUrl;
         this.fileType = res.data.fileType;
         this.oldFileName = res.data.oldFileName;
       })