md

src/views/emis/EmisBaseTools/TransProductCasAdvPicker.vue

@@ -0,0 +1,242 @@
+<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: "TransProductCasAdvPicker",
+  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>