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

<template>
  <el-cascader
    ref="selectRef"
    :key="resetCascader"

    :size="size"

    :options="lineList"

    v-model="svalue"
    style="width: 100%"
    clearable
    filterable


    :props="lazyProps"
    :before-filter="beforeFilter"
    @visible-change="visibleChange"
    @input.native="searchFilter"

    @clear="onClear"
    @blur="onBlur"
    @change="onChange"
  >
</el-cascader>
<!-- :props="props" -->

</template>
<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,

    lineList:[],

    isInit: true,
    lineCode:null,
    prodCode:null,
    searchVal:null,
    lazyProps: {
      // checkStrictly: true,
      // emitPath: true,
      lazy: true,
      lazyLoad: (node, resolve) => {
        const { level } = node;
        if (node.level == 0) {
          let nodes=this.lineList;
          resolve(nodes);
          return ;
        }
        else if(level==1){
            let queryParams={
              pageNum:1,
              pageSize:30,
              transLineCode:node.value,
              prodCode:this.prodCode,
              status:1
            };

            listSimpleEmisTransProduct(queryParams).then(res=>{
              const nodes = res.rows.map((item) => ({
                  ...item,
                  value: item.prodCode,
                  label: item.prodName+"("+item.agingDesc+")",
                  leaf: true,
               }));

              let nodeItem=this.lineList.find(item=>item.value ==node.value);
              if(nodeItem&&nodeItem!=undefined){
                nodeItem.children=nodes;
                console.log("===>nodes 2==>",nodeItem);
              }
              resolve(nodes);
            });

        }
      },
    },
  };
},
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.initData();
        this.resetCascader++
      }else{
        this.$refs.selectRef.handleClear()
        this.lineCode=null;
        this.prodCode=null;
        this.resetCascader++
      }
    },
    countryCode(newVal) {
      this.resetCascader++
    }
},
created() {
  console.log("=======created=>"+this.svalue)
  if(this.svalue!=null && this.svalue.length==2 && this.isInit) {
    this.lineCode=this.svalue[0];
    this.prodCode=this.svalue[1];
    this.initData();
  }
},

methods: {
  beforeFilter (val) {
    return false;
  },
  searchFilter(el){
    if(!el.target.value){
      return false;
    } else{
        clearTimeout(this.timer);
        this.timer = setTimeout(()=>{
        this.$refs.selectRef.$refs.panel.activePath=[];
        this.searchVal = el.target.value;
        this.getLineList();
      },200)
    }
  },
  visibleChange(boolean){
    if(boolean){
      this.$refs.selectRef.$refs.panel.activePath=[];
      this.searchVal = null;
      this.lineCode=null;
      this.prodCode=null;
      this.getLineList();
    }
  },
  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;
  },
  onChange(value) {
    console.log("=======onChange=>"+value)
    this.$emit("input", this.svalue);
    this.$emit("onChange", this.svalue);
    this.resetCascader++
  },
  async initData(){
    if(this.lineCode&&this.prodCode){
      let queryParams={
        pageNum:1,
        pageSize:15,
        country:this.countryCode,
        lineCode:this.lineCode,
        lineName:this.searchVal
      };
      this.lineList=[];
      let res=await listSimpleEmisTransLine(queryParams);
      let rows=res.rows;
      let node={
            value: rows[0].lineCode,
            label: rows[0].lineName,
            children: []
      }
      let queryParamsProd={
              pageNum:1,
              pageSize:30,
              transLineCode:this.lineCode,
              prodCode:this.prodCode,
              status:1
      };
      let resProd=await listSimpleEmisTransProduct(queryParamsProd);
      let rowsProd=resProd.rows;
      let prodList=[];
      let prodItem={
        value: rowsProd[0].prodCode,
        label: rowsProd[0].prodName+"("+rowsProd[0].agingDesc+")",
        leaf: true,
      }
      prodList.push(prodItem);
      node.children=prodList;

      this.lineList.push(node);
    }
  },

  async getLineList(){
    let queryParams={
        pageNum:1,
        pageSize:15,
        country:this.countryCode,
        lineCode:this.lineCode,
        lineName:this.searchVal
      };
      this.lineList=[];
      let res=await listSimpleEmisTransLine(queryParams);
      res.rows.forEach(item => {
        let node={
            value: item.lineCode,
            label: item.lineName,
            children: []
        }
        this.lineList.push(node);
      });
  },

},
};
</script>
<style lang="scss" scoped>
// .con {
//   display: inline-block;
// }

</style>