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

<template>
    <el-cascader
      :size="size"
      :props="props"
      :key="resetCascader"
      @change="handleChange"
      v-model="svalue"
      style="width: 100%"
      clearable
      filterable
    ></el-cascader>
</template>
<script>

// import { listSimpleEmisCountry} from "@/api/emis/emisCountry";
import { listSimpleEmisTransLine } from "@/api/emis/emisTransLine";
import { listSimpleEmisTransProduct } from "@/api/emis/emisTransProduct";

export default {
  name: "TransProductCasPicker",
  props: {
      value: {
        type: [String, Number,Array],
        required: false
      },
      countryCode: {
        type: String,
        required: false
      },
      size:{
        type: String,
        required: false
      }
  },
  data() {
    return {
      resetCascader:0,
      svalue: this.value,
      props: {
        // checkStrictly: true,
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node;
          const nodes = [];
          // level: 层级
          // node 节点数据
          // 一级菜单数据

          // 为1代表第一次请求
          // let type = level == 0 ? "1" : node.value;
          let parentCode = node.value;
          this.queryData(level,parentCode)
            .then((res) => {

              console.log(res);

              if (res.code != 200) {
                return;
              }

              res.rows.map((item) => {

               if(level==0){
                  let obj = {
                    value: item.lineCode,
                    label: item.lineName,
                    leaf: false,
                  };
                  nodes.push(obj);
                }
                else if(level==1){
                  let obj = {
                    value: item.prodCode,
                    label: item.prodName,
                    leaf: true,
                  };
                  nodes.push(obj);
                }

              });

              // resolve 节点返回
              resolve(nodes);
            })
            .catch((error) => {
              console.log(error);
            });
        },
      },
    };
  },
  watch: {
      value(newVal) {
        this.svalue = newVal;
      },
      svalue(newVal, oldVal) {
        if (newVal !== oldVal) {

        }
      },
      countryCode(newVal) {
        this.queryData(0,0);
        this.resetCascader++
      }
  },
  created() {
    this.queryData(0,0);
  },
  methods: {
    async queryData(level,parentCode) {
      // console.log(level)
      // 第一级国家
      // if(level == 0){
      //   let queryParams={};
      //   let res=await listSimpleEmisCountry(queryParams);
      //   console.log("xxxx1")
      //   console.log(res)
      //   return res;
      // }

      // 第二级是线路
      if(level == 0){
        let queryParams={
          country:this.countryCode
        };
        let res=await listSimpleEmisTransLine(queryParams);
        return res;
      }

      // 产品
      if(level == 1){
        let queryParams={
          transLineCode:parentCode,
          status:1
        };
        let res=await listSimpleEmisTransProduct(queryParams);
        return res;
      }


    },
    handleChange(value) {
      console.log(value);
      this.$emit("input", this.svalue);
      this.$emit("onChange", this.svalue);
    },
  },
};
</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>