emis-frontend/src/views/emis/EmisBaseTools/RegionPcdTreePicker.vue

<template>
  <!-- <treeselect
    ref="tree"
    v-model="svalue"
    :options="treeOptions"
    :normalizer="normalizer"
    :default-expand-level="1"
    :show-count="true"
    placeholder="请选择"
    :class="[{ 'vueTreeSelectMini': size=='mini', 'vueTreeSelectSmall': size=='small' }, '']"
    no-data-text=""
    :disable-branch-nodes="true"
  /> -->
  <SelectTree
      :props="props"
      :options="treeOptions"
      :value="svalue"
      :clearable="isClearable"
      :accordion="isAccordion"
      @onNodeClick="onChange($event)"
      style="width:100%"
    />


</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listEmisRegion } from "@/api/emis/emisRegion";
import SelectTree from "@/components/SelectTree/index.vue";


export default {
    name: "RegionPcdTreePicker",
    components: { Treeselect,SelectTree},
    props: {
      value: {
        type: String,
        required: false
      },
      size:{
        type: String,
        required: false
      },
      countryCode: {
        type: String,
        required: false
      },
      regionType:{
        type: Number,
        required: false
      }
    },
    data() {
      return {
        svalue: this.value,
        treeOptions:[],
        isClearable: true, // 可清空（可选）
        isAccordion: true, // 可收起（可选）
        provinceMap:new Map(),
        provinceHasAddMap:new Map(),
        queryParams:{
          countryCode:this.countryCode
        },
        props: {
          // 配置项（必选）
          value: "regionCode",
          label: "regionName",
          children: "children"
          // disabled:true
        },

      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
      },
      svalue(newVal) {
        this.$emit("input", this.svalue);
      },
      countryCode(newVal) {
        this.queryParams.countryCode = newVal;
        this.initTree();
      },
      regionType(newVal) {
        this.initTree();
      },
      isInitiated:{
        type: [Boolean,String],
        required: false,
        default:false
      }
    },
    computed: {
      classType: function () {
        return {
          active: this.isActive,
          sort:this.isSort
        }
      }
    },
    created() {
      if(this.isInitiated || this.svalue!=null){
        this.initTree();
      }
    },
    methods: {
      filterNode(value,data){
        if (!value) return true
        return data.label.includes(value)
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.regionCode,
          label: node.regionName,
          children: node.children,
        };
      },
      onChange() {
        this.$emit("onChange");
      },
      async initTree(){

        this.treeOptions =[];
        this.svalue = null;

        if(this.regionType == 1 || this.countryCode==null){
          return;
        }


        // 只查询pcd
        if(this.regionType == 2){
          this.initProvinceTree();
          return;
        }

        if(this.regionType == 3){
          this.initProvinceAndCityTree();
          return;
        }

        if(this.regionType == 4){
          this.initPCDTree();
          return;
        }

      },
      async initProvinceTree(){
        this.queryParams.regionType = 1;
          listEmisRegion(this.queryParams).then(response => {
            if(response.rows!=null && response.rows.length>0){
              this.treeOptions = this.handleTree(response.rows, "regionCode","parentCode");
            }
        });
      },
      async initProvinceAndCityTree(){
        let rows = [];
        this.queryParams.regionType = 1;
        let pvRes=await listEmisRegion(this.queryParams)
        if(pvRes.rows!=null ){
          pvRes.rows.forEach(item=>{
              this.provinceMap[item.regionCode]=item;
          })
        }

        this.queryParams.regionType = 2;
        let cityRes=await listEmisRegion(this.queryParams)
        if(cityRes.rows!=null ){
          rows = [...cityRes.rows];
          // 组合数据
          cityRes.rows.forEach(item=>{
              let provItem=this.provinceMap[item.parentCode];
              if(!(item.parentCode in this.provinceHasAddMap)){
                rows.push(provItem);
                this.provinceHasAddMap[item.parentCode]=1
              }
          })
        }

        if(rows!=null && rows.length>0){
            this.treeOptions = this.handleTree(rows, "regionCode","parentCode");
        }
      },
      async initPCDTree(){
        let rows = [];
        this.queryParams.regionType = 1;
        let pvRes=await listEmisRegion(this.queryParams)
        if(pvRes.rows!=null ){
          pvRes.rows.forEach(item=>{
              this.provinceMap[item.regionCode]=item;
          })
        }

        this.queryParams.regionType = 2;
        let cityRes=await listEmisRegion(this.queryParams)
        if(cityRes.rows!=null ){
          rows = [...cityRes.rows];
          // 组合数据
          cityRes.rows.forEach(item=>{
              let provItem=this.provinceMap[item.parentCode];
              if(!(item.parentCode in this.provinceHasAddMap)){
                rows.push(provItem);
                this.provinceHasAddMap[item.parentCode]=1
              }
          })
        }

        if(rows!=null && rows.length>0){
            this.treeOptions = this.handleTree(rows, "regionCode","parentCode");
        }
      }

    }
  };
</script>
<style scoped>

.vue-treeselect__menu-container{
  z-index: index 9999 !important;
}

/* mini */
.vueTreeSelectMini .vue-treeselect__control {
  height: 26px !important;
}
.vueTreeSelectMini .vue-treeselect__control .vue-treeselect__value-container {
  height: 26px !important;
  display: block !important;
}
.vueTreeSelectMini
  .vue-treeselect__control
  .vue-treeselect__value-container
  .vue-treeselect__placeholder {
  line-height: 26px !important;
  font-size: 12px !important;
}
.vueTreeSelectMini
  .vue-treeselect__control
  .vue-treeselect__value-container
  .vue-treeselect__single-value {
  line-height: 26px !important;
  font-size: 12px !important;
}

/* small */
.vueTreeSelectSmall {
  height: 36px;
  display: flex;
  align-items: center;
}
.vueTreeSelectSmall .vue-treeselect__control {
  height: 30px !important;
}
.vueTreeSelectSmall .vue-treeselect__control .vue-treeselect__value-container {
  height: 30px !important;
  display: block !important;
}
.vueTreeSelectSmall
  .vue-treeselect__control
  .vue-treeselect__value-container
  .vue-treeselect__placeholder {
  line-height: 30px !important;
  font-size: 14px !important;
}
.vueTreeSelectSmall
  .vue-treeselect__control
  .vue-treeselect__value-container
  .vue-treeselect__single-value {
  line-height: 30px !important;
  font-size: 14px !important;
}
</style>