init

src/api/modules/api.js

@@ -227,7 +227,7 @@ export function findMyAgent(query) {
     params:query
   })
 }
-//获取用户代理商
+//获取用户公司
 export function findMyOrg(query) {
   return request({
     url: '/autoSR/zkorg/findMyOrg',
@@ -283,3 +283,30 @@ export function getParentAndKidList(query) {
     params:query
   })
 }
+// 获取省市地区
+export function getValueByCondition(query) {
+  return request({
+    url: '/autoSR/zksysarea/getValueByCondition',
+    method:'get',
+    params:query
+  })
+}
+//添加区域
+export function areaAdd(data) {
+  return request({
+    url: '/admin/user/areaAdd',
+    method:'post',
+    data
+  })
+}
+
+
+// 角色管理
+// 获取角色
+export function rolePage(query) {
+  return request({
+    url: '/admin/role/findByPage',
+    method:'get',
+    params:query
+  })
+}

src/views/admin/user/index.vue

@@ -421,11 +421,27 @@
             选择城市
           </div>
           <div class="right">
-            <div v-for="(item,index) in parentAndKidList" :key="index">
-              <el-select v-model="item.str1" clearable :disabled='item.disabled'  placeholder="请选择" style="width:200px;  margin-right: 20px;">
-                         <!-- 省 -->
+            <div v-for="(item,index) in firstList" :key="item.id">
+              <div style="display:flex;">
+                <div>{{item.name}}</div>
+                <el-select v-model="item.cityIds" clearable multiple placeholder="默认为全部" style="width:400px;">
+                        <el-option
+                              v-for="item1 in item.cityAreaList"
+                              :key="item1.id"
+                              :label="item1.name"
+                              :value="item1.id"
+                              >
+                        </el-option>
+              </el-select>
+              <div @click="delArea(index,0)">X</div>
+              </div>
+            </div>
+           <div v-for="(item,index) in thirdList" :key="item.id">
+              <div style="display:flex;">
+                <div>
+                  <el-select v-model="item.areaId" clearable :disabled='item.disabled' @change="areaChange(index,0)" placeholder="请选择" style="width:200px;  margin-right: 20px;">
                           <el-option
-                              v-for="item1 in parentAndKidList"
+                              v-for="item1 in secondList"
                               :key="item1.id"
                               :label="item1.name"
                               :value="item1.id"
@@ -433,10 +449,27 @@
                               >
                         </el-option>
               </el-select>
-              <!-- 市 -->
-              <el-select v-model="item.str2" clearable multiple placeholder="请选择" style="width:400px;">
+                </div>
+                <el-select v-model="item.cityIds" clearable multiple placeholder="默认为全部" style="width:400px;">
                         <el-option
-                              v-for="item1 in parentAndKidList"
+                              v-for="item1 in item.arr"
+                              :key="item1.id"
+                              :label="item1.name"
+                              :value="item1.id"
+                              >
+                        </el-option>
+              </el-select>
+              <div @click="delArea(index,1)">X</div>
+              </div>
+            </div>
+            <!-- 当没有选择区域的时候 -->
+            <div  v-if="managerStr.length==0">
+            <div v-for="(item,index) in fourthList" :key="item.id">
+              <div style="display:flex;">
+                <div>
+                  <el-select v-model="item.areaId" clearable :disabled='item.disabled' @change="areaChange(index,1)" placeholder="请选择" style="width:200px;  margin-right: 20px;">
+                          <el-option
+                              v-for="item1 in allCityList"
                               :key="item1.id"
                               :label="item1.name"
                               :value="item1.id"
@@ -444,7 +477,19 @@
                               >
                         </el-option>
               </el-select>
-              <div>X</div>
+                </div>
+                <el-select v-model="item.cityIds" clearable multiple placeholder="默认为全部" style="width:400px;">
+                        <el-option
+                              v-for="item1 in item.arr"
+                              :key="item1.id"
+                              :label="item1.name"
+                              :value="item1.id"
+                              >
+                        </el-option>
+              </el-select>
+              <div @click="delArea(index,1)">X</div>
+              </div>
+            </div>
             </div>
           <div @click="addArea">+</div>
           </div>
@@ -486,10 +531,16 @@
       };
       return {
         managerStr:[],
-        choseFlag:false,
+        choseFlag:true,
         // 获取的区域列表
         arealist:[],
         parentAndKidList:[],
+        originalData:[],
+        firstList:[],
+        secondList:[],
+        thirdList:[],
+        fourthList:[],
+        allCityList:[],
         managerList:[],
         bindFlag:'0',
         treeClick: '',        　//点击样式
@@ -692,7 +743,16 @@
       // 区域改变
       managerChange(){
         console.log(this.managerStr)
-        this.getParentAndKidList()
+           // 初始化数据
+          this.firstList=[]
+          this.secondList=[]
+          this.thirdList=[]
+          this.fourthList=[]
+          if(this.managerStr.length==0){
+            return
+          }
+          this.getParentAndKidList()
+
       },
       // 通过地区串获取省市
       getParentAndKidList(){
@@ -700,31 +760,134 @@
           areaIds:this.managerStr.join(',')
         })
         .then(res=>{
-          console.log(res)
+          // console.log(res)
+          // 获取区域下的省数据，对数据进行处理，首先将数据分为三个数组，一个是用来存储没有多选框的，一个用来存储有多选的，一个原始数据
+          // 原始数据，用来比对数据和添加使用
+          this.originalData=res.data
+          // 渲染第一个是text的数组
+          // 这里不考虑禁用
           res.data.map(item=>{
-            item.str1=''
-            item.str2=''
-            item.disabled=false
+            item.cityIds=''
           })
-          this.parentAndKidList=res.data
+          this.firstList=res.data
+          // 初始化数据
+          this.secondList=[]
+          this.thirdList=[]
+          this.fourthList=[]
         })
       },
+      // 删除区域
+      delArea(idx,flag){
+        // 第一个删除
+        if(flag==0){
+          // 先获取删除数组的内容，将其内容放到第三个数组里面
+          let obj=this.firstList[idx]
+          // obj.areaId=''
+          // // 这里需要有禁用选项
+          // obj.disabled=false
+          // // 给定一个空数组，当他的选择时将数组内容改变
+          // obj.children=[]
+          this.secondList.push(obj)
+          console.log(this.secondList)
+          // 删除数组的指定项
+          this.firstList.splice(idx,1)
+        }else{
+           let obj=this.thirdList[idx]
+           this.secondList.push(obj)
+           // 删除数组的指定项
+          this.thirdList.splice(idx,1)
+        }
+      },
       // 点击添加时的操作
       addArea(){
-        // 先判断最后一项是否选择如果没选择则返回
-        if(this.agentList[this.agentList.length-1].str1=''){
-          this.$message.waring('请选择最后一项在说')
+        // 这是第一种情况
+        if(this.managerStr.length>0){
+                  // 先判断第二个数组里面是否有数据,有的时候就可以添加没的时候提示
+        if(this.secondList.length==0){
+          this.$message.warning('没有更多啦！')
+          return
+        }
+        let num=0
+        this.secondList.map(item=>{
+          if(item.disabled){
+            num++
+          }
+        })
+        if(num==this.secondList.length){
+          this.$message.warning('不能选择更多啦')
           return
         }
-        this.agentList.map(item=>{
+        // 在判断最后一项是否选择如果没选择则返回
+        if(this.thirdList.length>0&&this.thirdList[this.thirdList.length-1].areaId==''){
+          this.$message.warning('请选择最后一项在说')
+          return
+        }
+        // 然后将所有的都变为禁用
+        // this.secondList.map(item=>{
+        //   item.disabled=true
+        // })
+        this.thirdList.map(item=>{
           item.disabled=true
         })
         // 在数组里面放入一个对象
         let obj={
-          str1:'',
-          str2:[],
+          cityIds:'',
+          areaId:'',
+          arr:[],
+          disabled:false
+        }
+        this.thirdList.push(obj)
+        }else{
+
+        if(this.fourthList.length>0&&this.fourthList[this.fourthList.length-1].areaId==''){
+          this.$message.warning('请选择最后一项在说')
+          return
+        }
+        this.fourthList.map(item=>{
+          item.disabled=true
+        })
+          // 第二种情况，当没选择的时候
+          let obj={
+          cityIds:'',
+          areaId:'',
+          arr:[],
+          disabled:false
+        }
+        this.fourthList.push(obj)
         }
-        this.agentList.push(obj)
+
+      },
+      // 选择的区域地区改变时给数组的arr赋值
+      async areaChange(idx,flag){
+        console.log(idx)
+        // 第一种情况
+        if(flag==0){
+        // this.thirdList[idx].areaId
+        // 循环数组获取到当前区域id下的数据给定第三个数组
+        let num= this.secondList.findIndex(item=>item.id==this.thirdList[idx].areaId)
+        if(num!=-1){
+          this.thirdList[idx].arr=this.secondList[num].cityAreaList
+          // this.secondList.splice(num,1)
+          this.secondList[num].disabled=true
+        }
+        }else{
+          // 获取选中的id并且赋值
+          let num= this.allCityList.findIndex(item=>item.id==this.fourthList[idx].areaId)
+          if(num!=-1){
+            this.fourthList[idx].arr=await this.getValueByCondition(this.fourthList[idx].areaId)
+            // this.secondList.splice(num,1)
+            this.allCityList[num].disabled=true
+          }
+
+        }
+      },
+      // 获取所有省
+      async getValueByCondition(e){
+        let res=await this.$api.api.getValueByCondition(
+          {pid:e}
+        )
+          // console.log(res)
+          return res.data
       },
       // 下一步
       nextshow(){
@@ -800,6 +963,10 @@
       // 绑定方式改变
       radioChange(e){
         console.log(e)
+          this.firstList=[]
+          this.secondList=[]
+          this.thirdList=[]
+          this.fourthList=[]
       },
       // 查询楼盘
       searchHouse(){
@@ -820,7 +987,57 @@
          .then(res=>{
            console.log(res)
          })
+        }else{
+          // 省市json串
+          let areaJsonString=[]
+          // 地区id拼成串
+          let areaIds=this.managerStr.join(',')
+          // 区域选择
+          // 两种情况
+          if(areaIds){
+            // 当选择的是区域的时候
+            this.firstList.map(item=>{
+              let obj={
+                // 省
+                provinceList:item.id,
+                // 市
+                cityList:item.cityIds.join(','),
+              }
+              areaJsonString.push(obj)
+            })
+          this.thirdList.map(item=>{
+              let obj={
+                // 省
+                provinceList:item.areaId,
+                // 市
+                cityList:item.cityIds.join(','),
+              }
+              areaJsonString.push(obj)
+            })
+          }else{
+            this.fourthList.map(item=>{
+              let obj={
+                // 省
+                provinceList:item.areaId,
+                // 市
+                cityList:item.cityIds.join(','),
+              }
+              areaJsonString.push(obj)
+            })
+          }
+          // console.log(areaJsonString,areaIds,'数据')
+          // return
+          this.$api.api.areaAdd({
+            accountId:this.accountId,
+            areaJsonString:JSON.stringify(areaJsonString),
+            areaIds
+          })
+          .then(res=>{
+            console.log(res)
+          })
         }
+        this.houseVisible=true
+        this.roleList()
       },
       // 楼盘绑定解绑
       // bindhouse(e){
@@ -869,13 +1086,17 @@
         })
       },
       // 去楼盘管理
-      gochosehouse(row){
+      async gochosehouse(row){
         console.log(row)
         this.accountId=row.accountId
         this.houseVisible=true
         this.gethouseList()
         // 获取区域列表
         this.areamanagerList()
+        // 获取所有省列表
+      // console.log(await this.getValueByCondition(0))
+       this.allCityList=await this.getValueByCondition(0)
+
       },
       // 获取区域
       areamanagerList(){
@@ -1409,7 +1630,7 @@
   .province{
       display: flex;
       .right{
-        display: flex;
+        // display: flex;
       }
   }
 </style>