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

<template>
    <el-cascader
      :size="size"
      :props="props"
      :key="resetCascader"
      v-model="svalue"
      style="width: 100%"
      clearable
      filterable
      @click.native="onClick"
      @clear="onClear"
      @blur="onBlur"
      @change="onChange"
    ></el-cascader>
</template>
<!-- @input.native="searchFilter" -->
<!-- filterable -->
<!-- :before-filter="beforeFilter"
@input.native="searchFilter" -->
<script>

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,
      isInit: true,
      lineCode:null,
      prodCode:null,
      searchVal:null,
      props: {
        // checkStrictly: true,
        lazy: true,
        lazyLoad: (node, resolve) => {
          const nodes = [];
          // level: 层级
          // node 节点数据
          // 一级菜单数据
          let level = node.level;
          //  level==0 ? "1" : node.value;
          let parentCode = node.value;
          this.queryData(level,parentCode)
            .then((res) => {
              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+"("+item.agingDesc+")",
                    leaf: true,
                  };
                  nodes.push(obj);
                }
              });

              // resolve 节点返回
              resolve(nodes);
            })
            .catch((error) => {
              // console.log(error);
            });
        },
      },
    };
  },
  watch: {
      value(newVal) {
        this.svalue = newVal;
        if(this.svalue!=null && this.svalue.length==2 && this.isInit) {
          this.lineCode=this.svalue[0];
          this.prodCode=this.svalue[1];
          this.resetCascader++
        }
      },
      countryCode(newVal) {
        this.resetCascader++
      }
  },
  created() {

  },
  methods: {
    beforeFilter (val) {
      return false;
    },
    searchFilter(el){
      let val = el.target.value;
      this.searchVal = val;
    },
    onClear(){
      this.svalue = null;
      this.$emit("input", this.svalue);
      this.$emit("onChange", this.svalue);
    },
    onBlur(){
      this.$emit("input", this.svalue);
      this.$emit("onChange", this.svalue);
    },
    onClick(){
        this.isInit = false;
        this.lineCode=null;
        this.prodCode=null;
        this.queryData(0,0);
    },
    onChange(value) {
      this.$emit("input", this.svalue);
      this.$emit("onChange", this.svalue);
    },
    async queryData(level,parentCode,val) {
      // 第1级是线路
      if(level == 0){
        let queryParams={
          pageNum:1,
          pageSize:500,
          country:this.countryCode,
          lineCode:this.lineCode,
          lineName:this.searchVal
        };
        let res=await listSimpleEmisTransLine(queryParams);
        return res;
      }
      // 产品
      if(level == 1){
        let queryParams={
          pageNum:1,
          pageSize:500,
          transLineCode:parentCode,
          prodCode:this.prodCode,
          status:1
        };
        let res=await listSimpleEmisTransProduct(queryParams);
        return res;
      }
    },

  },
};
</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>