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>
          <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
            :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,
      
      };
    },
    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.getDetail(this.treeList[0].id);
            }
          });
          return this.treeList;
        }
      } catch (error) {}
      this.treeLoading = false;
    },


      onNodeClick(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>
  .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>