kd-aiot-frontend-wms/src/views/warehouseManagement/stockLedger/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-split-layout
        width="256px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="el-tree_box">
          <div class="ele-border-lighter sys-organization-list">
            <!-- <asset-tree
              @handleNodeClick="onNodeClick"
              ref="commonTree"
              :treeFormate="
                (list) => {
                  return [
                    {
                      children: list,
                      id: '0',
                      level: 0,
                      name: '库存台账',
                      originId: null,
                      originType: {},
                      parentId: null,
                      type: '',
                      weight: 0
                    }
                  ];
                }
              "
            /> -->

            <el-tree
              style="height: 100%"
              :data="treeList"
              :props="defaultProps"
              ref="treeRef"
              :default-expanded-keys="current && current.id ? [current.id] : []"
              :highlight-current="true"
              node-key="id"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
        </div>
        <template v-slot:content>
          <item-list :current="current" />
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import itemList from './components/item-list';
  import AssetTree from '@/components/AssetTree';

  import { getTreeByGroup } from '@/api/classifyManage';

  export default {
    components: { itemList, AssetTree },
    data() {
      return {
        treeData: [],
        current: {},

        defaultProps: {
          children: 'children',
          label: 'name'
        },
        treeList: [],
        treeLoading: false
      };
    },
    async created() {
      this.getTreeData();
    },
    methods: {
      async getTreeData() {
        try {
          this.treeLoading = true;
          const res = await getTreeByGroup({ type: 2 });
          this.treeLoading = false;
          if (res?.code === '0') {
            this.treeList = res.data;
            this.$nextTick(() => {
              // 默认高亮第一级树节点
              if (this.treeList[0]) {
                this.$refs.treeRef.setCurrentKey(this.treeList[0].id);
                this.current = this.treeList[0];
              }
            });
            return this.treeList;
          }
        } catch (error) {}
        this.treeLoading = false;
      },

      handleNodeClick(data, node) {
        this.current = node;
      },
      openEdit() {
        const data = this.$refs.commonTree.getSelectList();

        if (data?.id) {
          let node = this.$refs.commonTree.getInstance().getNode(data.id);
          const urlIdList = [data.id];
          while (node.parent?.data?.id) {
            urlIdList.unshift(node.parent?.data?.id);
            node = node.parent;
          }
          data.urlIdList = urlIdList.filter((i) => i !== '0');
        }
        this.$router.push({
          path: '/classifyManage/itemInformation/add',
          query: {
            pageTitle: '新建物品',
            selectNode: JSON.stringify(data)
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .el-tree_box {
    height: 100%;
    > div {
      height: 100%;
    }
  }

  .ele-body {
    padding: 6px;
  }

  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
</style>