<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="clearGroupMsg" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">{{$t('objFill.tianjiafenzu')}}
</el-button>
<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" :class="commonIndex==-1?'selectActive' : ''" @click="getImgList(-1)"
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>{{$t('advmanager.v_all')}}</span>
</el-col>
</div>
</li>
<li class="el-menu-item" v-for="(item,index) in saveObj" :class="commonIndex==index?'selectActive' : ''"
@click="getImgList(index)" :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==''?$t('objFill.moren'):item.Label}}</span>
</el-col>
<el-col class="blue" :span="6" v-if="index!=0">
<span @click="editGroup(index)">{{$t('pub.edit')}}</span>
| <span @click="delGroup(index)">{{$t('system.table_delete')}}</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" 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"
style="width: 100px; height: 100px;display:flex;align-items:center;justify-content:center;">
<i class="el-icon-upload"></i>
</div>
</el-upload>
</div>
<div style="display:inline-block;margin-left:9px;position:relative" v-for="(item,index) in comImgArr"
:key="index">
<img :src="getIconLink(item.Path)" class="app-attachment-img"
style="width: 100px; height: 100px;">
<i class="iconfont icon-bumenguanli-shanchu hotel_DelIcon" @click="delHotelImg(item,index)"></i>
</div>
</div>
</el-col>
</el-row>
<div style="margin-top:20px;text-align:right">
<el-button size="small" type="primary" @click="SelectImgId">{{$t('pub.sureBtn')}}</el-button>
</div>
<!-- 新增分组 -->
<el-dialog :modal="false" :modal-append-to-body='false' :title="$t('objFill.fenzhuguanl')" :visible.sync="groupMsg.addGroupMsgDig"
width="400px">
<el-form label-width="100px">
<el-form-item :label="$t('objFill.fenzhumingc')">
<el-input size="small" type="text" :placeholder="$t('fnc.qsrneirong')" v-model="groupMsg.GroupName" maxlength="8"
show-word-limit>
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="groupMsg.addGroupMsgDig = false">{{$t('pub.cancelBtn')}}</el-button>
<el-button size="small" type="primary" @click="SaveGroup()">{{$t('pub.sureBtn')}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
//图片数组
props: {
saveObj: {
type: Array,
default: null
}
},
data() {
return {
groupMsg: {
isAdd: 0, //添加标志
GroupName: '', //分组名称
addGroupMsgDig: false,
},
commonIndex: 0,
comImgArr: [],
}
},
watch: {
},
created() {},
computed: {},
mounted() {
this.getAll();
},
methods: {
getAll() {
this.comImgArr = [];
if (this.saveObj.length > 0) {
this.saveObj.forEach(item => {
this.comImgArr = this.comImgArr.concat(item.ImgList);
})
} else {
let obj = {
Label: '',
ImgList: this.comImgArr
}
this.saveObj.unshift(obj);
}
},
//删除图片
delHotelImg(item, index) {
var that = this
that.Confirm(that.$t('objFill.shangchutpjbnhf'), function () {
if (item.MappingId && item.MappingId > 0) {
let msg = {
Id: item.MappingId,
PicId: item.PicId
}
that.apipost("hotel_post_RemoveHotelImage", msg, res => {
if (res.data.resultCode == 1) {
that.comImgArr.splice(index, 1);
}
});
} else {
that.comImgArr.splice(index, 1);
}
});
},
//清空消息
clearGroupMsg() {
this.groupMsg.isAdd = 0;
this.groupMsg.GroupName = '';
this.groupMsg.addGroupMsgDig = true;
},
//新增修改分组
SaveGroup() {
if (this.groupMsg.isAdd == 0) {
let obj = {
Label: this.groupMsg.GroupName,
ImgList: []
}
this.saveObj.push(obj);
} else {
this.saveObj[this.commonIndex].Label = this.groupMsg.GroupName;
}
this.clearGroupMsg();
this.groupMsg.addGroupMsgDig = false;
},
//编辑分组
editGroup(index) {
this.groupMsg.isAdd = 1;
this.commonIndex = index;
this.groupMsg.GroupName = this.saveObj[index].Label;
this.groupMsg.addGroupMsgDig = true;
},
//删除
delGroup(index) {
var that = this
that.Confirm(that.$t('objFill.shangchutpjbnhf'), function () {
this.saveObj.splice(index, 1);
});
},
//点击获取图片arr
getImgList(index) {
this.commonIndex = index;
if (index == -1) {
this.comImgArr = [];
this.saveObj.forEach(item => {
this.comImgArr = this.comImgArr.concat(item.ImgList);
})
} else {
this.comImgArr = this.saveObj[index].ImgList;
}
},
//选定
SelectImgId() {
this.$emit('getHotelImg', this.saveObj);
},
//上传酒店图片
UploadImage(file) {
let newArr = [];
newArr.push(file.file);
let fileName = file.file.name;
var path = "/Upload/DMC/";
this.UploadSelfFileT(path, newArr, x => {
var str = x.data.FilePath;
var obj = {
MappingId: 0,
PicId: 0,
Path: x.data.FilePath
}
if (this.commonIndex == -1) {
this.saveObj[0].ImgList.push(obj);
this.getImgList(-1)
} else {
this.saveObj[this.commonIndex].ImgList.push(obj);
this.getImgList(this.commonIndex)
}
});
},
},
}
</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;
}
.hotel_DelIcon {
position: absolute;
right: -5px;
top: -7px;
color: red;
cursor: pointer;
}
</style>