修改

src/components/commonPage/comHotelImg.vue

+<template>
+  <div class="ChooseImg">
+    <el-row style="border: 1px solid rgb(227, 227, 227);">
+      <el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);">
+        <el-button @click="addGroup" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组
+        </el-button>
+        <div class="el-scrollbar" style="height: 450px; width: 100%;">
+          <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
+            <div class="el-scrollbar__view">
+              <li class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
+                <i class="el-icon-tickets"></i>
+                <span>全部</span>
+              </li>
+              <li class="el-menu-item" v-for="(item,index) in saveObj" :class="commonIndex==index?'selectActive' : ''" @click="getImgList(index,saveObj)" :key="index"
+                style="padding-left: 10px;padding-right: 10px;">
+                <div flex="dir:left box:last">
+                  <el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;">
+                    <i class="el-icon-tickets"></i>
+                    <span>{{item.label}}</span>
+                  </el-col>
+                  <el-col class="blue" :span="6">
+                    <span @click="editGroup(index)">编辑</span>
+                    | <span @click="delGroup(index)">删除</span>
+                  </el-col>
+                </div>
+              </li>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="18">
+        <div class="basefix app-attachment-list">
+          <div class="app-attachment-item app-attachment-upload">
+            <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
+              :show-file-list="false" :http-request="UploadImage" multiple>
+              <div class="app-upload"
+                style="width: 100px; height: 100px;display:flex;align-items:center;justify-content:center;">
+                <i class="el-icon-upload"></i>
+              </div>
+            </el-upload>
+          </div>
+          <el-tooltip v-for="(item,index) in comImgArr" :key="index" class="item" effect="dark" placement="top-start">
+            <div class="el-tooltip item app-attachment-item">
+              <img :src="item" class="app-attachment-img" style="width: 100px; height: 100px;">
+              <div class="app-attachment-name">图片名字</div>
+            </div>
+          </el-tooltip>
+        </div>
+        <!-- <div style="padding-right:10px">
+          <el-pagination style="text-align:right" background :current-page="currentPage4"
+            @current-change="handleCurrentChange" :page-size="msg.pageSize" layout="prev, pager, next,jumper"
+            :total="total">
+          </el-pagination>
+        </div> -->
+      </el-col>
+    </el-row>
+    <div style="margin-top:20px;text-align:right">
+      <el-button size="small" type="primary" @click="SelectImgId()">选定</el-button>
+    </div>
+    <!-- 新增分组 -->
+    <el-dialog :modal="false" :modal-append-to-body='false' title="分组管理" :visible.sync="addGroupMsgDig" width="400px">
+      <el-form label-width="100px">
+        <el-form-item label="分组名称">
+          <el-input size="small" type="text" placeholder="请输入内容" v-model="GroupName" maxlength="8" show-word-limit>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="addGroupMsgDig = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="GroupCked()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    //是否多选
+    props: {
+      saveObj: {
+        type: Array,
+        default: null
+      }
+    },
+    data() {
+      return {
+        GroupName: '', //分组名称
+        addGroupMsgDig: false,
+        pageMsgDig: false,
+        ImageArr: [], //显示数组
+        isAdd: 0, //添加标志
+        commonIndex:-1,
+        comImgArr:[],
+      }
+    },
+    created() {},
+    computed: {},
+    mounted() {
+      console.log(this.saveObj, 'saveObj');
+    },
+    methods: {
+      //新增分组
+      addGroup() {
+        this.isAdd = 0;
+        this.GroupName='';
+        this.addGroupMsgDig = true;
+      },
+      //确定分组
+      GroupCked() {
+        if (this.isAdd == 0) {
+          let obj = {
+            Id: 0,
+            label: this.GroupName,
+            imgArr: []
+          }
+          this.saveObj.push(obj);
+        }else{
+          this.saveObj[this.commonIndex].label = this.GroupName;
+        }
+        this.addGroupMsgDig = false;
+      },
+      //编辑分组
+      editGroup(index) {
+        this.isAdd = 1;
+        this.commonIndex = index;
+        this.GroupName = this.saveObj[index].label;
+        this.addGroupMsgDig = true;
+      },
+      //删除
+      delGroup(index){
+        this.saveObj.splice(index,1);
+      },
+      //点击获取图片arr
+      getImgList(index,obj){
+        this.commonIndex = index;
+        this.comImgArr =this.saveObj[index].imgArr;
+      },
+      //选定
+      SelectImgId() {
+        console.log('1111');
+        console.log(this.saveObj,'saveObj');
+      },
+      //上传酒店图片
+      UploadImage(file) {
+        if(this.commonIndex==-1){
+            this.Error('请选择分类')
+            return;
+        }
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/DMC/";
+        this.UploadSelfFileT(path, newArr, x => {
+          var obj = this.$DMCUtils.DMCImageObj();
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
+          obj.Path = str;
+          obj.ShowPath = imgUrl;
+          console.log(obj,'obj');
+          this.saveObj[this.commonIndex].imgArr.push(obj.ShowPath);
+        });
+      },
+    },
+  }
+
+</script>
+
+<style>
+  .ChooseImg .el-input.is-active .el-input__inner,
+  .ChooseImg .el-input__inner:focus {
+    border-color: #DCDFE6;
+  }
+
+  .ChooseImg {
+    margin: 10px;
+  }
+
+  .ChooseImg .app-attachment-list .selected {
+    box-shadow: 0 0 0 1px #1ed0ff;
+    background: #daf5ff;
+    border-radius: 5px;
+  }
+
+  .ChooseImg .selectActive .el-icon-tickets {
+    color: #409EFF;
+  }
+
+  .ChooseImg .selectActive {
+    color: #409EFF;
+  }
+
+  .ChooseImg .app-attachment-name {
+    color: #666666;
+    margin-top: 5px;
+    font-size: 13px;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+
+  .ChooseImg .app-attachment-item .app-attachment-img {
+    display: block;
+  }
+
+  .ChooseImg .app-attachment-upload i {
+    font-size: 30px;
+    color: #909399;
+  }
+
+  .ChooseImg .app-attachment-item {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    float: left;
+    width: 120px;
+    height: 140px;
+    margin: 7.5px;
+    text-align: center;
+    padding: 10px 10px 0;
+  }
+
+  .ChooseImg .app-attachment-upload {
+    box-shadow: none;
+    border: 1px dashed #b2b6bd;
+    height: 100px;
+    width: 100px;
+    margin: 17.5px;
+    padding: 0;
+  }
+
+  .ChooseImg .app-attachment-list {
+    padding: 5px;
+    min-height: 475px;
+  }
+
+  .ChooseImg .appendInput .el-input__inner {
+    border-right: none;
+
+  }
+
+  .ChooseImg .appendInput .el-input-group__append {
+    background-color: #fff !important;
+    border-left: none;
+    padding: 0 15px;
+  }
+
+</style>

src/components/commonPage/comImgList.vue

@@ -4,8 +4,8 @@
       <el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);">
         <el-button @click="clearGroupMsg" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组
         </el-button>
-        <div class="el-scrollbar" style="height: 450px; width: 100%;">
-          <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
+        <div class="el-scrollbar" style="height: 450px; width: 100%;overflow-y:auto;">
+          <div style="margin-bottom: -8px; margin-right: -8px;">
             <div class="el-scrollbar__view">
               <li class="el-menu-item" style="padding-left: 10px;padding-right: 10px;"
                 :class="commonIndex==-1?'selectActive' : ''" @click="getImgList(-1,saveObj)">
@@ -31,7 +31,7 @@
       </el-col>
       <el-col :span="18">
         <div class="basefix app-attachment-list">
-          <div class="app-attachment-item app-attachment-upload">
+          <div class="app-attachment-item app-attachment-upload" style="margin:1px 0 0 8px;">
             <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
               :show-file-list="false" :http-request="UploadImage" multiple>
               <div class="app-upload"
@@ -40,12 +40,9 @@
               </div>
             </el-upload>
           </div>
-          <el-tooltip v-for="(item,index) in comImgArr" :key="index" class="item" effect="dark" placement="top-start">
-            <div class="el-tooltip item app-attachment-item">
+            <div style="display:inline-block;margin-left:9px;" v-for="(item,index) in comImgArr" :key="index">
               <img :src="item.Path" class="app-attachment-img" style="width: 100px; height: 100px;">
-              <div class="app-attachment-name">图片名字</div>
             </div>
-          </el-tooltip>
         </div>
       </el-col>
     </el-row>
@@ -134,6 +131,7 @@
       getImgList(index, obj) {
         this.commonIndex = index;
         if (index == -1) {
+          console.log(this.saveObj,'this.saveObj');
           this.saveObj.forEach(item => {
             this.comImgArr.concat(item.ImgList);
           })
@@ -143,7 +141,7 @@
       },
       //选定
       SelectImgId() {
-
+        this.$emit('getHotelImg',this.saveObj);
       },
       //上传酒店图片
       UploadImage(file) {
@@ -156,13 +154,14 @@
         let fileName = file.file.name;
         var path = "/Upload/DMC/";
         this.UploadSelfFileT(path, newArr, x => {
+          console.log(x,'xxxx');
           ;
           var str = x.data.FilePath;
           var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
           var obj = {
             MappingId: 0,
             PicId: 0,
-            Path: imgUrl,
+            Path: imgUrl
           }
           this.saveObj[this.commonIndex].ImgList.push(obj);
         });