emis-frontend/src/views/emis/EmisBaseTools/backup/RegionSaPicker.vue

<template>
  <div class="con">
    <el-cascader
      :key="is_cascader"
      v-model="addressArr"
      :props="addressProps"
      :options="province"
      style="width: 300px;"
      placeholder="选择地区"
    ></el-cascader>
  </div>
</template>
<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
// import { provinceAndCityData } from 'element-china-area-data'

import { listEmisRegion } from "@/api/emis/emisRegion";
export default {
  name: "RegionPicker",
  props: {
      value: {
        type: [String, Number],
        required: false
      },
      countryCode: {
        type: String,
        required: false
      },

  },
  data() {
    return {
      province: [{}],//这个数据是组件初始化created异步加载的数据，里面加空对象是为了el-cascader初始化没有数据报错 data=null这个原因
      addressArr: [],//绑定的数据
      is_cascader: Math.random(), //重新渲染标识key
      addressInit: false, //标记组件第一级数据开始加载没有
      addressProps: {
        label: 'area_name',
        value: 'area_id',
        lazy: true,//开启异步加载
        lazyLoad(node, resolve) {
          const { value, level } = node
          getPlace({ pid: value }).then(res => {
            if (res.code === 200) {
              if (level === 2) {//level=2是因为我城市数据只能选到第三级，第二级加载第三级数据
                resolve(
                  res.data.map(item => {
                    item.leaf = 'leaf'//这个必须加，就是让组件识别是不是最后一级
                    return item
                  })
                )
              } else {
                resolve(res.data)
              }
            }
          })
        }
      },

      resetCascader:0,
      svalue: [],
      props: {
        // checkStrictly: true,
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node;
          const nodes = [];
          // level: 层级
          // node 节点数据
          // 一级菜单数据

          // 为1代表第一次请求
          let type = level == 0 ? "1" : node.value;
          this.queryRegion(type)
            .then((res) => {
              if (res.code != 200) {
                this.msgFn("error", res.message);
                return;
              }
              // 节点数组
              res.rows.map((item) => {
                // {value:'',label:'全部'}
                let obj = {
                  value: item.id,
                  label: item.regionName,
                  leaf: node.level >= 2,
                };
                nodes.push(obj);
              });
              // resolve 节点返回
              resolve(nodes);
            })
            .catch((error) => {
              console.log(error);
            });
        },
      },
    };
  },
  watch: {
      value(newVal) {
        this.svalue = newVal;
      },
      svalue(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.$emit("input", this.svalue);
        }
      },
      countryCode(newVal) {
        this.sCountry = newVal;
        // this.provinceFn(1);
        this.resetCascader++
      }
  },
  created() {},
  methods: {
    // 获取省市区
    async queryRegion(id) {
      if(id==1){
        let queryParams = {countryCode:this.sCountry,regionType:1};
        let res=await listEmisRegion(queryParams);
        console.log(res)
        return res;
      }else{
        let queryParams = {parentId:id};
        let res=await listEmisRegion(queryParams);
        console.log(res)
        return res;
      }

    },
    handleChange(value) {
      console.log(value);
    },
    // 弹窗
    msgFn(type, text) {
      this.$message({
        message: text,
        type: type,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.con {
  display: inline-block;
}

.el-radio__inner {
    border-radius: 0;
    border: 0;
    width: 170px;
    height: 34px;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
    top: -18px;
    left: -19px;
}

.el-radio__input.is-checked .el-radio__inner {
    background: transparent;
}

</style>