五级行政区级联单选回显

最新推荐文章于 2024-07-05 16:41:23 发布

人间致远

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量113

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/zengdaoqiang/article/details/132056367

版权

        {
          type: 'cascader',
          size: 'mini',
          clearable: true,
          placeholder: '请选择地区',
          label: '地区',
          value: 'zone',
          disabled: () => this.type === 'edit',
          options:()=>this.zoneList,  // 编辑时可用
          props: {
            checkStrictly: true, // 是否每一级可选
            lazy: true,
            lazyLoad(node, resolve) {
              const {level, value} = node
              // console.log('node',node);
              if (level > 4) {
                resolve()
                return
              }
              const params = level
                ? {
                  regionId: value,
                }
                : {
                }
              const map = {
                0: () => getProvinces(),
                1: () => getCitiesByRegionId(params),
                2: () => getCountiesByRegionId(params),
                3: () => getStreet(params),
                4: () => getVillage(params)
              }
              map[level]().then(res => {
                let nodes = []
                if (res.code === 0) {
                  nodes = res.returnData.map(v => ({
                    value: v.regionId,
                    label: v.regionName,
                    leaf: level >= 4,
                  }))
                }
                resolve(nodes)
              })
            },
          },
        },

 // 根据地区code,获取地区各级options,回显页面
    async getZoneList(arr){
      try {
         // 传入数据长度 
         const len = arr.length
         // 引入变量 
         let res_1 = null,res_2 = null,res_3 = null, res_4 = null
         let num_1 =null, num_2 = null, num_3 =null
         // 获取省级 options
         let res = await getProvinces() 
         // 请求回来的数据进行处理  
         res = await this.fillZoneList(res,0)
         //  赋值
         this.zoneList = [...res]
         //  获取市级 options
         if(len > 1){
          const params = { regionId: arr[0] }
          res_1 = await getCitiesByRegionId(params)
          // 请求回来的数据进行处理
          res_1 =  await this.fillZoneList(res_1,1)  
          for(let i =0 ,len = res.length;i<len;i++){
            if(res[i].value === arr[0]){
              this.$set(this.zoneList[i], 'children', [...res_1])
              num_1 = i
            }
          }
         } 
         //  获取区县级 options
         if(len > 2){
          const params = { regionId: arr[1] }
           res_2 = await getCountiesByRegionId(params)
           // 请求回来的数据进行处理
           res_2 =  await this.fillZoneList(res_2,2)  
          for(let i =0 ,len = res_1.length;i<len;i++){
            if(this.zoneList[num_1].children[i].value === arr[1]){
              this.$set(this.zoneList[num_1].children[i], 'children', [...res_2])
              num_2 = i
            }
          }
         } 
         //  获取街道级 options
         if(len > 3){
          const params = { regionId: arr[2] }
          res_3 = await getStreet(params)
          // 请求回来的数据进行处理
          res_3 =  await this.fillZoneList(res_3,3)
          for(let i =0 ,len = res_2.length;i<len;i++){
            if(this.zoneList[num_1].children[num_2].children[i].value === arr[2]){
              this.$set(this.zoneList[num_1].children[num_2].children[i], 'children', [...res_3])
              num_3 = i
            }
          }
         } 
         //  获取居委会 options
         if(len > 4){
          const params = { regionId: arr[3] }
           res_4 = await getVillage(params)
          // 请求回来的数据进行处理
           res_4 =  await this.fillZoneList(res_4,4)  
          for(let i =0 ,len = res_3.length;i<len;i++){
            if(this.zoneList[num_1].children[num_2].children[num_3].children[i].value === arr[3]){
              this.$set(this.zoneList[num_1].children[num_2].children[num_3].children[i], 'children', [...res_4])
            }
          }
         } 
         // 关闭loading
         setTimeout(()=>{
          this.isLoading = false 
         },200)

      } catch (error) {
        console.error(error,'--catch报错')
        this.isLoading = false 
      }
    },
    // 处理zoneList数据
    fillZoneList(res,level){
      let nodes = res.returnData.map(v => ({
                    value: v.regionId,
                    label: v.regionName,
                    leaf: level >= 4,
                  }))
        return nodes          
    },