klp-oa/klp-ui/src/components/KLPService/WarehouseTree/index.vue

<template>
  <el-tree v-loading="loading" :data="treeData" :props="treeProps" node-key="warehouseId" highlight-current
    @node-click="handleNodeClick" :expand-on-click-node="false"
    :lazy="this.warehouseType === 'real'" :load="loadChildren" class="stock-tree" />
</template>

<script>
import { listWarehouse } from '@/api/wms/warehouse';
import { listActualWarehouse } from '@/api/wms/actualWarehouse';

export default {
  name: "WarehouseTree",
  props: {
    warehouseType: {
      type: String,
      default: 'real'
    },
  },
  data() {
    return {
      treeData: [],
      loading: true,
      treeProps: {
        children: 'children',
        label: 'warehouseLabel',
        isLeaf: () => false
      }
    };
  },
  watch: {
    warehouseType: {
      handler(newVal, oldVal) {
        this.getWarehouseTree()
      },
      immediate: true
    }
  },
  methods: {
    loadChildren(node, resolve) {
      console.log(node);
      if (node.level === 0) {
        // resolve(this.handleTree(this.treeData, 'warehouseId', 'parentId'));
      } else {
        listActualWarehouse({ parentId: node.data.actualWarehouseId }).then(response => {
          resolve(response.data.map(item => ({
            ...item,
            warehouseLabel: item.actualWarehouseName
          })));
        });
      }
    },
    getWarehouseTree() {
      this.loading = true;
      if (this.warehouseType === 'real') {
        listActualWarehouse({ parentId: 0 }).then(response => {
          this.treeData = response.data.map(item => ({
            ...item,
            warehouseLabel: item.actualWarehouseName
          }))
          this.loading = false;
        });
      } else {
        listWarehouse().then(response => {
          this.treeData = response.data.map(item => ({
            ...item,
            warehouseLabel: item.warehouseName
          }))
          this.loading = false;
        });
      }
    },
    handleTree(data, id, parentId) {
      const cloneData = JSON.parse(JSON.stringify(data));
      return cloneData.filter(father => {
        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
        if (branchArr.length > 0) father.children = branchArr;
        return father[parentId] === 0 || father[parentId] === null;
      });
    },
    handleNodeClick(node) {
      this.$emit('node-click', node);
    }
  }
};
</script>