<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">{{$t('objFill.tianjiafenzu')}}
</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>{{$t('advmanager.v_all')}}</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)">{{$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">
<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">{{$t('objFill.v101.traveltrip.tupianmz')}}</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()">{{$t('objFill.v101.traveltrip.xuanding')}}</el-button>
</div>
<!-- 新增分组 -->
<el-dialog :modal="false" :modal-append-to-body='false' :title="$t('objFill.fenzhuguanl')" :visible.sync="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="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">{{$t('pub.cancelBtn')}}</el-button>
<el-button size="small" type="primary" @click="GroupCked()">{{$t('pub.sureBtn')}}</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() {
},
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() {
},
//上传酒店图片
UploadImage(file) {
if(this.commonIndex==-1){
this.Error(this.$t('objFill.v101.traveltrip.qingxuanzfenl'))
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;
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>