1. 优化

src/views/tourism/scenicAreaManagement/contentManagement/formBox/attractionInfoManagementForm.vue

@@ -14,8 +14,51 @@
     element-loading-background="rgba(0, 0, 0, 0.8)">
       <el-form :model="form" ref="form" :rules="rules" label-width="120px">
         <div class="form-title"><span>基本信息</span></div>
-        <el-form-item label="景区名称：" prop="name">
-          <el-input style="width: 350px;" v-model="form.name" placeholder="请输入景区名称" maxlength="20" show-word-limit />
+        <el-form-item label="景点名称：" prop="name">
+          <el-input style="width: 350px;" v-model="form.name" placeholder="请输入景点名称" maxlength="20" show-word-limit />
+        </el-form-item>
+        <el-form-item label="景点图片" prop="imgUrl">
+          <div style="display: flex;">
+            <div 
+            v-for="(item,index) in form.imgUrl" 
+            :key="index"
+            style="width: 100px; height: 100px;position: relative;border: 1px solid #999;border-radius: 5px;margin-right: 20px;">
+              <el-image 
+                style="width: 100%; height: 100%"
+                :src="item" 
+                :preview-src-list="form.imgUrl">
+              </el-image>
+              <span @click="handleRemove(index)" style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
+                <i class="el-icon-error"></i>
+              </span>
+            </div>
+            <div 
+            style="width: 100px; height: 100px;" 
+            v-if="!form.imgUrl||form.imgUrl.length<1"
+            v-loading="actionUrlLoading"
+            element-loading-text="上传中..."
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+            >
+              <el-upload
+                class="avatar-uploader"
+                :action="actionUrl"
+                :data="{
+                  bucket: 'tourism'
+                }"
+                :show-file-list="false"
+                :before-upload="beforeAvatarUpload"
+                :on-success="handleAvatarSuccess"
+                :on-progress="handleAvatarProgress"
+                :disabled="actionUrlLoading"
+                :on-error="handleAvatarError"
+                >
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </div>
+            
+          </div>
+          <span>支持jpg、png、gif,支持1MB大小以内的图片上传</span>
         </el-form-item>
         <el-form-item label="开放时间：" prop="openDate">
           <el-time-picker
@@ -38,7 +81,7 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="开/闭园：" prop="openDate">
+        <el-form-item label="开/闭园：" prop="status">
           <el-switch
               style="display: block;margin-top: 5px;"
               v-model="form.status"
@@ -121,8 +164,9 @@ export default {
         id: undefined,
       },
       rules: {
-        name: [{ required: true, message: "请输入景区名称", trigger: ["change","blur"] }],
-        openDate: [{ required: true, message: "请输入景区名称", trigger: ["change","blur"] }],
+        name: [{ required: true, message: "请输入景点名称", trigger: ["change","blur"] }],
+        imgUrl: [{ required: true, message: "选上传图片", trigger: ["change","blur"] }],
+        openDate: [{ required: true, message: "选择开/闭园时间范围", trigger: ["change","blur"] }],
         goodId: [{ required: false, message: "请输入景点产品", trigger: ["change","blur"] }],
         status: [{ required: true, message: "请输入开放状态", trigger: ["change","blur"] }],
         content: [{ required: true, message: "请输入开放状态", trigger: ["change","blur"] }],
@@ -150,6 +194,9 @@ export default {
         },
         placeholder: '请输入正文'
       },
+      //  上传文件
+      actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
+      actionUrlLoading: false,
     };
   },
   methods: {
@@ -158,15 +205,17 @@ export default {
       this.open = true
       this.loadingText = "拼命加载数据中..."
       this.loading = true
+      this.actionUrlLoading = false
       this.model = model
       this.formStatus = 0
       if(model=='ADD') { // 新增
-        this.$set(this,'form',row)
+        this.$set(this,'form',{...row,imgUrl:[]})
         this.formStatus = 1
       }else if(model=='EDIT') { // 新增
         let obj = {
           ...row,
-          openDate: row.openDate?row.openDate.join('~') : null
+          openDate: row.openDate?row.openDate.join('~') : null,
+          imgUrl: row.imgUrl?row.imgUrl.split(','):[]
         }
         this.$set(this,'form',obj)
         this.formStatus = 1
@@ -189,7 +238,8 @@ export default {
         if(res.code == 200) {
           let obj = {
             ...res.data,
-          openDate: res.data.openDate?res.data.openDate.split('~') : null
+            imgUrl: res.data.imgUrl?res.data.imgUrl.split(','):[],
+            openDate: res.data.openDate?res.data.openDate.split('~') : null
         }
           this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
           this.formStatus = 1
@@ -221,6 +271,7 @@ export default {
             addTableApi(
               this.configUrl.edit,{
                 ...this.form,
+                imgUrl: this.form.imgUrl ? this.form.imgUrl.join(','):'',
                 openDate: this.form.openDate.join('~')
               }).then(response => {
               this.$modal.msgSuccess("修改成功");
@@ -234,6 +285,7 @@ export default {
           } else {
             addTableApi(this.configUrl.edit,{
                 ...this.form,
+                imgUrl: this.form.imgUrl ? this.form.imgUrl.join(','):'',
                 openDate: this.form.openDate.join('~')
               }).then(response => {
               this.$modal.msgSuccess("新增成功");
@@ -284,6 +336,37 @@ export default {
       console.log('editor change!', quill, html, text)
       this.form.content = html
     },
+
+    /**  上传图片 单张  */
+    handleAvatarSuccess(response, file, fileList) {
+      console.log("res, file",response, file, fileList)
+      this.actionUrlLoading = false
+      if(response.code == 200) {
+        this.form.imgUrl.push(response.data.url)
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 1;
+      let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
+      let typeList = ['png','jepg','jpg','gif']
+      const isJPG = typeList.includes(testmsg);
+      if (!isJPG) {
+        this.$message.error(`上传头像图片只能是 ${typeList} 格式!`);
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 1MB!');
+      }
+      return isJPG && isLt2M;
+    },
+    handleAvatarProgress(){
+      this.actionUrlLoading = true
+    },
+    handleAvatarError() {
+      this.actionUrlLoading = false
+    },
+    handleRemove(index) {
+      this.form.imgUrl.splice(index,1)
+    },
   },
 };
 </script>
@@ -393,6 +476,29 @@ export default {
     }
   }
 }
+::v-deep .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  ::v-deep .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  ::v-deep .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+  }
+  ::v-deep .avatar {
+    width: 100px;
+    height: 100px;
+    display: block;
+  }
 </style>
 <style>
 .custom-class-box {