Merge branch 'dev1.2' of http://192.168.3.207:10080/group3/qmx_page_admin into dev1.2

src/components/citySelect.vue

@@ -2,7 +2,7 @@
   <div class="citySelect" ref="citySelect">
      <header>
         <ul>
-          <li v-for="item in selectCitys" :key="item.id"><span>{{item.name | shortName}}</span> <i class="el-icon-close"></i></li>
+          <li v-for="(item,i) in selectCitys" :key="item.id"><span>{{item.name}}</span> <i class="el-icon-close" @click="deleteCity(item,i)"></i></li>
         </ul>
      </header>
       <div class="citySelectList">
@@ -13,20 +13,20 @@
             <h4> {{item[0].title}}</h4>
               <div class="proviceList">
                 <div class="proviceItem" :class="{toggle:v.isToggle}" v-for="(v,y) in item[0].list" :key="v.id">
-                    <h5 @click="toggle(v,x,y)">{{v.name | shortName}}</h5>
+                    <h5 @click="toggle(v,x,y)" :class="{active:v.isCurrent}">{{v.name | shortName}}</h5>
                 </div>
               </div>
             </li>
          </ul>
          <div class="cityList" :class="curentCitys.class " >
               <div class="contentlist">
-                <span>全省</span>
+                <span @click="proviceSelect" :class="{active:isProvice}">全省</span>
                 <span v-for="(city,i) in curentCitys.list" :key="i" :class="{active:city.status}" @click="selectCity(city,i)">
                   {{city.name}}
                 </span>
               </div>
               <div class="btns">
-                <button>确定</button>
+                <button @click="confirmBtn">确定</button>
                 <button @click="cancel">取消</button>
               </div>
           </div>
@@ -40,13 +40,17 @@ export default {
     data(){
       return{
           isCountry:false,
+          isProvice:false,
           newArea:{},
           initals:[ 'A','B','C','F','G','H','J','L','N','Q','S','T','X','Y','Z'],
           curentCitys:{
             class:'',
-            list:[]
+            list:[],
+            name:'',id:''
           },
           selectCitys:[],
+          checkedCitys:[],
+          currentDel:[]
       }
     },
     mounted(){
@@ -54,7 +58,7 @@ export default {
     },
     computed:{
         filterArea:function(){
-            let city_arr = JSON.parse(JSON.stringify(this.newArea));
+            let city_arr = this.newArea;
             return city_arr;
         }
     },
@@ -74,65 +78,164 @@ export default {
                     if(!Array.isArray(newArea[x])){
                         newArea[x] = [{title:inital,id:x,list:[]}];
                     }
-                    newArea[x][0].list.push({name:v.name,id:v.ProID,data:v.city,isToggle:false,isSelectAll:false,searchId:`#provice${v.ProID}`})
+                    newArea[x][0].list.push({name:v.name,id:v.ProID,data:v.city,isToggle:false,isCurrent:false,searchId:`#provice${v.ProID}`})
                 }
             })
           })
           this.newArea = newArea;
       },
+      //选中全国
       selectCountry(){
-         this.isCountry = true;
-         this.citys = {};
-        this.newArea.forEach(item =>{
-          item[0].list.forEach(val =>{
-                val.isSelectAll = false;
-                val.data.forEach(city=>{
-                  city.status = false;
+          this.isCountry = true;
+          this.delcityArr(this.selectCitys);
+          if(this.selectCitys[0] && this.selectCitys[0].name != '全国' || this.selectCitys.length == 0){
+            this.selectCitys = [];
+             this.selectCitys.push({name:'全国',id:'928'})
+          }
+      },
+      //选择全省
+      proviceSelect(){
+        console.log(this.curentCitys)
+           this.currentDel = this.selectCitys.concat();
+           let isSame = this.currentDel.findIndex( item =>{
+             return item.name == this.curentCitys.name;
+          })
+          if(isSame == -1){
+            this.checkedCitys = [];
+            this.isProvice = true;
+            this.checkedCitys.push({name:this.curentCitys.name,id:this.curentCitys.id});
+          }else{
+            this.isProvice = false;
+            this.checkedCitys = [];
+          }
+          this.curentCitys.list.forEach(city =>{
+            city.status = false;
+            let sameIndex = this.currentDel.findIndex( item =>{
+              return item.name == city.name;
+            })
+            if(sameIndex != -1){
+              this.delcityArr([this.currentDel[sameIndex]])
+              this.currentDel.splice(sameIndex,1);
+            }
+          })
+      },
+      //选中城市删除
+      deleteCity(city,i){
+          this.selectCitys.splice(i,1);
+          this.delcityArr([city])
+      },
+      //所需要删除的城市
+      delcityArr(arr){
+           this.newArea.forEach((item,x) =>{
+              item[0].list.forEach((val,z) =>{
+                arr.forEach(city =>{
+                    let isIndex = val.data.findIndex(n =>{
+                      return n.CityID == city.id
+                    })
+                    if(isIndex != -1 ){
+                      val.data[isIndex].status = false;
+                    }
                 })
+              })
           })
-        })
       },
       //城市弹窗初始化
       cityPop(){
         this.curentCitys.class = "";
         this.$refs.citySelect.style.paddingBottom = "0px";
       },
+      //省名初始化
+      proviceInit(){
+         this.newArea.forEach((item) =>{
+            item[0].list.forEach(city =>{
+                city.isCurrent = false;
+            })
+          })
+      },
       toggle(val,x,y){
-        console.log(val.name )
+        console.log(val,x)
           this.cityPop();
+          this.currentDel = this.selectCitys.concat();
+          this.proviceInit();
+          let reg = /[省,市,壮族,维吾尔,特别行政区,自治区,回族]/g;
+          let proviceName = val.name.replace(reg,'');
+          let sameIndex = this.currentDel.findIndex( item =>{
+              return item.name == proviceName;
+          })
+          if(sameIndex != -1){
+            this.isProvice = true;
+          }
           if(val.data.length>1){
+              val.isCurrent = true;
               this.curentCitys.list = val.data;
-              if(x>0 && x<6){
+              this.curentCitys.name = proviceName;
+              this.curentCitys.id = `provice_${val.id}`;
+              if(x>=0 && x<6){
                 this.curentCitys.class = 'topCity';
-                this.$refs.citySelect.style.paddingBottom = "40px"
-              }else if(x>6 && x<12){
-                this.curentCitys.class = 'centerCity';
                 this.$refs.citySelect.style.paddingBottom = "70px"
+              }else if(x>=6 && x<12){
+                this.curentCitys.class = 'centerCity';
+                this.$refs.citySelect.style.paddingBottom = "120px"
               }else{
                 this.curentCitys.class = 'bottomCity';
-                this.$refs.citySelect.style.paddingBottom = "100px"
+                this.$refs.citySelect.style.paddingBottom = "150px"
               }
           }else{
-              this.selectCitys.push({name:val.name,id:(val.id*1234)})
+              if(this.isCountry){ this.selectCitys = [],this.isCountry = false; }
+              let isSame = this.selectCitys.findIndex( item =>{
+                return item.name == proviceName;
+              })
+              if(isSame == -1){
+                 this.selectCitys.push({name:proviceName,id:(val.id)})
+              }
           }
+         
       },
       //城市选择
       selectCity(val,index){
-        let newArr = [];
-          let isSame = this.selectCitys.findIndex( item =>{
+         if(this.isProvice) {
+           this.checkedCitys = [];
+           this.currentDel = []
+         }else{
+             this.currentDel = this.selectCitys.concat();
+         }
+         
+          let isSame = this.currentDel.findIndex( item =>{
              return item.name == val.name;
           })
-          console.log(isSame,"---isSame---")
+          console.log(this.currentDel,"---this.currentDel--")
+          
           if(isSame == -1){
-              this.selectCitys.push({name:val.name,id:(val.CityID*12)})
+              val.status = true;
+              this.isProvice = false;
+              this.curentCitys.list.splice(index,1,val);
+              this.checkedCitys.push({name:val.name,id:(val.CityID)});
           }else{
-              this.selectCitys.splice(isSame,1)
+            val.status = false;
+            this.curentCitys.list.splice(index,1,val);
+            this.currentDel.splice(isSame,1);
+            this.checkedCitys.splice(isSame,1)
           }
-        console.log(val,this.selectCitys)
+      },
+      //确认
+      confirmBtn(){
+          if(this.isCountry){ 
+            this.currentDel = [];
+            this.isCountry = false; 
+            console.log(this.selectCitys)
+          }
+          
+          this.selectCitys = [...this.currentDel,...this.checkedCitys] ;
+
+          this.currentDel = [];
+          this.checkedCitys = [];
+          this.cityPop();
+          this.proviceInit();
       },
       //取消
       cancel(){
           this.cityPop();
+          this.proviceInit();
       }
     }
 }
@@ -150,7 +253,7 @@ export default {
            float: none;
            padding: 0 16px;
            height: 36px;
-           margin: 0 4px;
+           margin: 0 4px 8px;
           //  line-height: 36px;
            border: 1px solid $light_color;
            border-radius: 4px;
@@ -164,6 +267,7 @@ export default {
              font-size: 18px;
              position: relative;
              top: -1px;
+             cursor: pointer;
            }
          }
        }
@@ -177,6 +281,9 @@ export default {
           display: inline-flex;
           margin: 4px 2px 0;
           align-items: center;
+          >span{
+            cursor: pointer;
+          }
           h4{
             margin: 0 4px;
           }
@@ -188,11 +295,20 @@ export default {
               align-items: center;
               
               h5{
-                padding: 0 4px;
-                margin: 0 3px;
+                padding: 0 6px;
+                // margin: 0 2px;
                 height: 28px;
                 line-height: 28px;
                 cursor: pointer;
+                border: 1px solid #fff;
+                &.active{
+                  background: #F5F5FB;
+                  border: 1px solid #e0e0e0;
+                  border-bottom: none;
+                  border-radius: 2px 2px 0 0;
+                  position: relative;
+                  z-index: 9999;
+                }
               }
             }
           }
@@ -201,28 +317,45 @@ export default {
       .cityList{
           display: none;
           position: absolute;
-          top: 34px;
+          top: 31px;
           width: 100%;
-          height: 100px;
+          min-height: 100px;
           background: #F5F5FB;
           border: 1px solid #e0e0e0;
           flex-direction: column;
-          justify-content: space-around;
           &.topCity{
             display: flex;
           }
           &.centerCity{
             display: flex;
-            top:66px;
+            top:63px;
           }
           &.bottomCity{
             display: flex;
-            top: 100px;
+            top: 95px;
+          }
+          .contentlist{
+            display: flex;
+            justify-items: flex-start;
+            flex-wrap: wrap;
+            margin-top: 10px;
+            span{
+              padding: 6px;
+              margin: 2px 6px;
+              cursor: pointer;
+              border-radius: 4px;
+              &.active{
+                background: $light_color;
+                color: #fff;
+              }
+            }
           }
           .btns{
+            margin-top: 20px;
             display: flex;
             width: 100%;
             justify-content: center;
+            margin-bottom: 10px;
             button{
               margin: 0 10px;
               border-radius: 4px;
@@ -232,6 +365,9 @@ export default {
                 background: $light_color;
                 color: #fff;
               }
+              &:nth-child(2){
+                background: #fff;
+              }
             }
           }
       }