feat：换电脑临时提交
This commit is contained in:
wangwenrui
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="location" >
|
||||
<div @click="toggleDropdown">
|
||||
<el-input :placeholder="$t('overall.select')" size="small" style="position: relative" >
|
||||
<i slot="suffix" class="el-select__caret el-input__icon el-icon-arrow-down" style="font-size: 14px" :class="{'reverse':dropDownVisible == true}"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="dropdown" :class="{'dropdown-active':dropDownVisible == true}">
|
||||
<div class="container">
|
||||
<div class="container-item">
|
||||
<el-scrollbar style="height: 100%;">
|
||||
<ul v-if="idcInfos&& idcInfos.length>0">
|
||||
<li v-for="(item,index) in idcInfos" :key="item.id+'-'+index" @click="loadCabinetInfos(item)">
|
||||
<div class="container-item-content"><div class="container-item-content_label" :class="{'selected':selectedData.idc&&selectedData.idc.id == item.id}">{{item.name}}</div><div><i class="el-icon-arrow-right"></i></div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="container-item" v-show="isShowCabinet">
|
||||
<el-scrollbar style="height: 100%;">
|
||||
<ul v-if="showCabinetInfos&& showCabinetInfos.length>0">
|
||||
<li v-for="(item,index) in showCabinetInfos" :key="item.id+'-'+index" @click="loadCabinetUInfos(item)">
|
||||
<div class="container-item-content"><div class="container-item-content_label" :class="{'selected':selectedData.cabinet&&selectedData.cabinet.id == item.id}">{{item.name}}</div><div><i class="el-icon-arrow-right"></i></div></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="container-item" v-show="isShowCabinetU" style="border-right: unset">
|
||||
<el-scrollbar style="height: 100%">
|
||||
<el-checkbox-group v-model="uChecked" v-if="refresh" @change="uChange">
|
||||
<el-checkbox v-for="(item,index) in showUInfos " :label="item.label" :value="item.value" :disabled="item.occupy==true" :checked="item.occupy==true||item.checked==true" :ref="'u-'+selectedData.idc.id+'-'+selectedData.cabinet.id+'-'+item.value" style="width: 50%"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-arrow"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "locationCascader",
|
||||
components:{
|
||||
|
||||
},
|
||||
props:{
|
||||
defaultModelUSize:{default:1}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
dropDownVisible:false,
|
||||
idcInfos:[],
|
||||
cabinetInfos:new Map(),
|
||||
showCabinetInfos:[],
|
||||
uInfos:new Map(),
|
||||
showUInfos:[],
|
||||
selectedData:{
|
||||
idc:null,
|
||||
cabinet:null,
|
||||
u:null
|
||||
},
|
||||
isShowCabinet:false,
|
||||
isShowCabinetU:false,
|
||||
occupyU:[],
|
||||
uCheckedInfos:new Map(),
|
||||
uChecked:[],
|
||||
refresh:true,
|
||||
oldUChecked:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.queryIdcInfos();
|
||||
},
|
||||
methods:{
|
||||
toggleDropdown:function(){
|
||||
this.dropDownVisible = !this.dropDownVisible;
|
||||
},
|
||||
queryIdcInfos:function(){
|
||||
this.idcInfos=[];
|
||||
this.$get('idc?pageSize=-1').then(response=>{
|
||||
if(response.code == 200){
|
||||
this.idcInfos=response.data.list;
|
||||
}else{
|
||||
console.error(response.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
loadCabinetInfos:function(idc){
|
||||
this.selectedData.idc=idc;
|
||||
let cabinetKey='idc-'+idc.name+'-'+idc.id;
|
||||
this.showCabinetInfos=[];
|
||||
if(this.cabinetInfos.has(cabinetKey)&&this.cabinetInfos.get(cabinetKey)&&this.cabinetInfos.get(cabinetKey).length>0){
|
||||
this.showCabinetInfos=this.cabinetInfos.get(cabinetKey);
|
||||
}else{
|
||||
this.$get('cabinet?pageSize=-1&idcId='+idc.id).then(response=>{
|
||||
if(response.code == 200){
|
||||
this.cabinetInfos.set(cabinetKey,response.data.list);
|
||||
this.showCabinetInfos=response.data.list;
|
||||
}else{
|
||||
console.error(response.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
this.isShowCabinet=true;
|
||||
this.isShowCabinetU=false;
|
||||
this.showUInfos=[];
|
||||
},
|
||||
loadCabinetUInfos:function(cabinet){
|
||||
this.selectedData.cabinet=cabinet;
|
||||
let cabinetUKey='cabinet-'+this.selectedData.idc.id+'-'+cabinet.id
|
||||
this.showUInfos=[];
|
||||
this.uChecked=[];
|
||||
if(this.uInfos.has(cabinetUKey)&&this.uInfos.get(cabinetUKey)&&this.uInfos.get(cabinetUKey).length>0){
|
||||
this.showUInfos=this.uInfos.get(cabinetUKey);
|
||||
}else{
|
||||
let us=[];
|
||||
this.$get('cabinet/u?id='+cabinet.id).then(response=>{
|
||||
if(response.code == 200){
|
||||
for(let i=1;i<=response.data.total;i++){
|
||||
let u={
|
||||
label:i,
|
||||
value:i,
|
||||
occupy:false,
|
||||
checked:false,
|
||||
}
|
||||
this.occupyU=response.data.occupy;
|
||||
if(response.data.occupy.find((item)=>{return u.value == item})){
|
||||
u.occupy=true;
|
||||
}
|
||||
us.push(u)
|
||||
}
|
||||
this.showUInfos=us;
|
||||
this.uInfos.set(cabinetUKey,us);
|
||||
}else{
|
||||
console.error(response.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
this.isShowCabinetU=true;
|
||||
this.refreshCheckBox();
|
||||
},
|
||||
uChange:function(data){
|
||||
if(data.length < this.oldUChecked.length){ //取消选择操作
|
||||
//1.判断是否仅剩下defualtModelusize 的u位选中
|
||||
let checkedValue=this.findUnoccupyU(this.oldUChecked);
|
||||
if(checkedValue.length <= this.defaultModelUSize){ // 刚好满足或小于默认usize
|
||||
this.uChecked=[];
|
||||
this.uChecked.push(this.occupyU);
|
||||
}else{
|
||||
let unCheckValue=this.oldUChecked.filter((item)=>{//取消选择的那个元素
|
||||
return this.oldUChecked.includes(item)&&!data.includes(item);
|
||||
})
|
||||
//2.判断是否连续，如果不是连续取消
|
||||
}
|
||||
}else{
|
||||
let checkValues=this.findUnoccupyU(data);
|
||||
let checkValue=data[data.length-1]; //当前选中的u
|
||||
if(checkValues.length < this.defaultModelUSize){ //如果小于model 规定的大小，需要自动选择
|
||||
let suitU=this.findSuitableU(checkValue);
|
||||
if(suitU.length>0){ //有合适的u位
|
||||
while(this.uChecked.length - this.occupyU.length < this.defaultModelUSize){
|
||||
let popU=suitU.splice(0,1)[0]
|
||||
this.uChecked.push(popU.value);
|
||||
}
|
||||
}else{
|
||||
this.uChecked.splice(this.uChecked.length-1,1);
|
||||
}
|
||||
}else{//至少已经选择了defaultCabinetUsize 个u ，这里需要处理不连续选择的情况
|
||||
//1.判断是否连续
|
||||
let oldUCheckCopy=Object.assign([],this.oldUChecked);
|
||||
oldUCheckCopy=this.findUnoccupyU(oldUCheckCopy)
|
||||
oldUCheckCopy.sort((a,b)=>{return a-b});
|
||||
let min=oldUCheckCopy[0];
|
||||
let max=oldUCheckCopy[oldUCheckCopy.length-1];
|
||||
if(checkValue - max > 1 ){ //不连续
|
||||
//2.不连续需要判断中间数值是否有被占用的，有占用的不可选
|
||||
let occupyFlag=false;
|
||||
for(let i=max+1;i<checkValue;i++){
|
||||
if(this.occupyU.find((item)=>{return i == item})){
|
||||
occupyFlag=true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(!occupyFlag){//没有占用，需要将中间未选中的选中
|
||||
for(let i=max+1;i<checkValue;i++){
|
||||
this.uChecked.push(i);
|
||||
}
|
||||
}else{//占用，取消当前选中
|
||||
this.uChecked.splice(this.uChecked.length-1,1);
|
||||
}
|
||||
}else if(min - checkValue >1){//不连续
|
||||
let occupyFlag=false;
|
||||
for(let i=checkValue;i<min;i++){
|
||||
if(this.occupyU.find((item)=>{return i==item})){
|
||||
occupyFlag=true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(!occupyFlag == true){
|
||||
for(let i=checkValue;i<min;i++){
|
||||
this.uChecked.push(i);
|
||||
}
|
||||
}else{
|
||||
this.uChecked.splice(this.uChecked.length-1,1);
|
||||
}
|
||||
}else{//连续
|
||||
//doNothing
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
this.oldUChecked=this.uChecked;
|
||||
},
|
||||
findUnoccupyU:function(arr){
|
||||
return arr.filter((item,index)=>{
|
||||
return !this.occupyU.includes(item);
|
||||
})
|
||||
},
|
||||
findSuitableU:function(checkValue){
|
||||
//将u位数组分为左右两部分，先查找右边的是否符合
|
||||
let left=this.showUInfos.filter((item,index)=>{return item.value < checkValue});
|
||||
left=left.reverse();//自下而上查找
|
||||
let right=this.showUInfos.filter((item,index)=>{return item.value > checkValue});
|
||||
let leftCount=[]; //存放左侧合适的u位
|
||||
let rightCount=[];//存放右侧合适的u位
|
||||
for(let i=0;i<left.length;i++){
|
||||
let item=left[i];
|
||||
if(item.occupy == false){
|
||||
leftCount.push(item);
|
||||
}else{
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
for(let i=0;i<right.length;i++){
|
||||
let item=right[i];
|
||||
if(item.occupy == false){
|
||||
rightCount.push(item);
|
||||
}else{
|
||||
break;
|
||||
}
|
||||
}
|
||||
let result=rightCount.concat(leftCount);
|
||||
if(result.length < this.defaultModelUSize - 1){
|
||||
result=[];
|
||||
}
|
||||
return result;
|
||||
},
|
||||
refreshCheckBox:function(){
|
||||
this.refresh = false
|
||||
this.$nextTick(() => {
|
||||
this.refresh = true
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.location{
|
||||
position: relative;
|
||||
}
|
||||
.reverse{
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.dropdown{
|
||||
position: absolute;
|
||||
min-width: 200px;
|
||||
padding:5px;
|
||||
background-color: #fff;
|
||||
display: none;
|
||||
z-index: 2020;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
margin: 10px 0;
|
||||
}
|
||||
.dropdown:before{
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid #fff;
|
||||
border-left: 5px solid transparent;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top:0%;
|
||||
margin-top:-5px
|
||||
}
|
||||
.dropdown:after{
|
||||
|
||||
}
|
||||
.dropdown-active{
|
||||
display: block !important;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
.container{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.container .container-item{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
border-right: 1px solid #E4E7ED;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.container-item-content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:5px;
|
||||
}
|
||||
.container-item-content .container-item-content_label{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.container-item-content .selected{
|
||||
font-weight: 700;
|
||||
color:#ee9d3f;
|
||||
}
|
||||
.container-item-content .container-item-content_label:hover{
|
||||
color:#ee9d3f;
|
||||
}
|
||||
|
||||
.dropdown-empty{
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user