<style>
.saleDepartmetTable{width: 100%; font-size:14px; color: #333; }
.saleDepartmetTable tr{border-bottom: 2px solid #333;}
.saleDepartmetTable tr th{background: #E6E6E6;height:30px; font-size: 12px; text-align: left; text-indent: 25px;}
.saleDepartmetTable tr{background: #fff;text-align: left;}
.saleDepartmetTable tr td{height: 60px; padding-left:25px; border-bottom:1px solid #f5f5f5; font-size: 14px; color: #333;}
.saleDepartmetTable tr td>img{width: 32px; height: 32px; border-radius: 16px; float: left; margin-right: 5px;}
.saleDepartmetbottomLayer{overflow: auto; position:absolute;height:320px;
z-index:50;bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#FFFFFF;padding: 20px 20px 0;width: 100%;}
.saleDepartmetbottomLayer>p{border-left: 3px solid #E95252; text-indent: 15px; height: 14px; font-size: 14px; margin-bottom:20px; line-height: 14px; color: #000;}
.saleDepartmetbottomLayer .layerFlex{width: 100%; display: flex; min-height:200px; overflow: hidden;}
.saleDepartmetbottomLayer .layerFlex .fleft{flex:0 1 700px; padding: 0 18px;}
.saleDepartmetbottomLayer .layerFlex .fleft li{font-size: 12px; height: 30px; line-height: 30px; color: #666; margin-top: 10px; padding: 0 10px; width: 200px;}
.saleDepartmetbottomLayer .layerFlex .fleft li>i{float: right; cursor: pointer; color: #E95252; display: none; font-size: 16px; margin-top: 7px;}
.saleDepartmetbottomLayer .layerFlex .fleft li:hover{background: #eee;}
.saleDepartmetbottomLayer .layerFlex .fleft li:hover i{ display:inline-block;}
.saleDepartmetbottomLayer .layerFlex .fright{flex:auto;}
</style>
<template>
<div class="saleDepartmet">
<div class="saleDepartmetbottomLayer ownScrollbarStyle" v-show="showLayer">
<p>{{$t('pub.edit')}}</p>
<div class="layerFlex">
<div class="fleft">
<p class="fz12 color333">{{$t('salesModule.ManagementArea')}}</p>
<ul style="max-height: 160px;overflow-y: auto;" class="ownScrollbarStyle">
<li v-show="sellAreaList.length==0">{{$t('active.cl_zanwu')}}</li>
<li v-for="(item,index) in sellAreaList">
{{item.AreaName}}
<i class="el-icon-error" @click="deleteItem(index)"></i>
</li>
</ul>
<p class="fz12 color666 mt20">
{{$t('salesModule.NewArea')}}：
<el-select class='w150' filterable v-model='provinceId' @change='getCity'>
<el-option v-for='item in provinceList'
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
<el-select class='w150' filterable v-model='cityId' @change='getRegion'>
<el-option v-for='item in cityList'
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
<el-select class='w150' filterable v-model='regionId'>
<el-option v-for='item in regionList'
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
<input type="button" class="hollowFixedBtn" :value="$t('pub.sureBtn')" @click="addItem"/>
</p>
</div>
<div class="fright">
<p class="fz12 color333">{{$t('salesModule.SpecialLine')}}</p>
<p class="fz12 color666 mt20">
{{$t('salesModule.SpecialLine')}}：
<el-select class='w300 multiple_input' v-model='addMsg.SellLineList' multiple>
<el-option v-for='item in lineList'
:label='item.LineName'
:value='item.LineID'
:key='item.LineID'>
</el-option>
</el-select>
</p>
</div>
</div>
<p style="border: none; text-align: right;">
<input type="button" :value="$t('pub.cancelBtn')" class="cancelBtn" @click="showLayer=false"/>
<input type="button" :value="$t('pub.saveBtn')" class="normalBtn" @click="saveData"/>
</p>
</div>
<input type="button" class="normalBtn fr mt10" style="margin-bottom: 10px;" :value="$t('salesModule.AllArea')" @click="goUrl('saleDepartmentMap',-1)"/>
<table class="saleDepartmetTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
<tr>
<th width="20%">{{$t('admin.admin_department')}}</th>
<th width="20%">{{$t('admin.admin_leader')}}</th>
<th width="20%">{{$t('salesModule.AreaManage')}}</th>
<th width="20%">{{$t('salesModule.SpecialLine')}}</th>
<th width="20%">{{$t('system.table_operation')}}</th>
</tr>
<tr v-for='item in list'>
<td>{{item.departmentName}}</td>
<td>
<img v-if='!item.EmPhoto' src="../../assets/img/litheader.png"/>
<img v-if='item.EmPhoto' :onerror="defaultImg" :src='item.EmPhoto'/>
<span style="float: left; margin-top: 5px;">{{item.departmentManager}}</span>
</td>
<td>
<i class="iconfont icon-tubiao" ></i>
<el-popover width="200" trigger="click" >
<div>
<p class="fz14 fbold mt10" style="margin-bottom: 20px;">{{$t('salesModule.ManagementArea')}}:{{item.sellAreaCount}}个</p>
<p v-for="i in item.sellAreaList" class="fz12 color666 mt5">
{{i.areaName}}
</p>
</div>
<span slot="reference" style="color:#1BC594; font-weight: bold; cursor: pointer;">{{item.sellAreaCount}}</span>
</el-popover>
</td>
<td>
<i class="iconfont icon-line"></i>
<!--{{item.sellLine==''?'无':item.sellLine}}-->
<el-popover trigger="click" >
<div>
<p class="fz14 fbold mt10" style="margin-bottom: 20px;">{{$t('salesModule.SpecialLine')}}</p>
<p class="fz12 mt10" v-for="i in item.sellLineList">{{i.lineName}}</p>
<p class="fz12 mt10" v-if="item.sellLineList.length==0">{{$t('fnc.no')}}</p>
</div>
<span slot="reference" class="cursorpointer">{{item.sellLine}}<em class="fnormal" style="color:#1BC594;"> ({{item.sellLineList.length}})</em></span>
</el-popover>
</td>
<td>
<el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start" popper-class="max-w250">
<i @click="getDetail(item)" class="iconfont icon-bianji-smal" style="background: #2C6ED5; color: #fff; padding: 0 5px; border-radius: 14px; cursor: pointer;"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('salesModule.MapDetails')" placement="top-start" popper-class="max-w250">
<i @click="goUrl('saleDepartmentMap',item.departmentID,item.departmentName)" class="iconfont icon-ditu" style="background: #E95252; color: #fff; padding: 0 5px; border-radius: 14px; cursor: pointer;"></i>
</el-tooltip>
</td>
</tr>
</table>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total=total>
</el-pagination>
</div>
</template>
<script>
export default {
data (){
return{
showLayer:false,
loading:false,
currentPage:1,
total:0,
provinceId:'',
cityId:'',
regionId:'',
defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
//请求
msg:{
pageIndex:1,
pageSize:10
},
addMsg:{
DepartmentId:0,
SellLineList:[],
SellAreaList:[],
},
//返回
list:[],
lineList:[],
provinceList:[],
cityList:[],
regionList:[],
sellAreaList:[]
}
},
methods:{
goUrl(path,id,name){
this.$router.push({name: path,query:{"id":id,'name':name}});
},
addItem(){
let sheng=''
let shi=''
let qu=''
if(this.regionId=='')
{
this.regionId=0
}
if(this.cityId=='')
{
this.cityId=0
}
this.provinceList.forEach(item=>{
if(this.provinceId==item.ID)
{
sheng=item.Name
}
})
this.cityList.forEach(item=>{
if(this.cityId==item.ID)
{
shi='-'+item.Name
}
})
this.regionList.forEach(item=>{
if(this.regionId==item.ID)
{
qu='-'+item.Name
}
})
let AreaName=sheng+shi+qu
let obj={ID:0,Country:'2',Province:this.provinceId,City:this.cityId,District:this.regionId,AreaName:AreaName}
this.sellAreaList.push(obj)
this.provinceId=''
this.cityId=''
this.regionId=''
},
deleteItem(index){
this.sellAreaList.splice(index,1)
},
getDetail(obj){
this.showLayer=true
this.addMsg.DepartmentId=obj.departmentID
this.apipost('app_customer_GetAllLineList',{DepartmentId:obj.departmentID},res=>{
if(res.data.resultCode==1){
this.lineList=res.data.data
}
},err=>{})
this.apipost('app_customer_GetSellAreaDetails',{id:obj.departmentID},res=>{
if(res.data.resultCode==1){
this.sellAreaList=res.data.data.SellAreaList
this.addMsg.SellLineList=res.data.data.SellLineList
}
},err=>{})
},
getProvince(){
this.apipost('dict_post_Destination_GetChildList',{Id:2},res=>{
if(res.data.resultCode==1){
this.provinceList=res.data.data
}
},err=>{})
},
saveData(){
this.addMsg.SellAreaList=this.sellAreaList
this.apipost('app_customer_AddSellAreaAndLine',this.addMsg,res=>{
if(res.data.resultCode==1){
this.$message.success(res.data.message)
this.getList()
this.showLayer=false
this.provinceId=''
this.cityId=''
this.regionId=''
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getCity(){
this.apipost('dict_post_Destination_GetChildList',{Id:this.provinceId},res=>{
if(res.data.resultCode==1){
this.cityList=res.data.data
this.cityId=''
this.regionId=''
}
},err=>{})
},
getRegion(){
this.apipost('dict_post_Destination_GetChildList',{Id:this.cityId},res=>{
if(res.data.resultCode==1){
this.regionList=res.data.data
this.regionId=''
}
},err=>{})
},
getLine(){
this.apipost('line_post_GetAllList',{},res=>{
if(res.data.resultCode==1){
this.lineList=res.data.data
}
},err=>{})
},
getList(){
this.loading=true
this.apipost('app_customer_GetPageSellAreaList',this.msg,res=>{
if(res.data.resultCode==1){
this.list=res.data.data.pageData
this.total=res.data.data.count
this.loading=false
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList()
},
resetPageIndex() {
this.msg.pageIndex = 1;
this.currentPage = 1
},
},
mounted(){
this.getList()
// this.getLine()
this.getProvince()
}
}
</script>