kd-aiot-frontend/src/views/classifyManage/itemInformation/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-split-layout
        width="256px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div>
          <!-- 操作按钮 -->
          <ele-toolbar class="ele-toolbar-actions">
            <div style="margin: 5px 0">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="openEdit()"
              >
                新建物品
              </el-button>
            </div>
          </ele-toolbar>
          <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
                    }
                  ];
                }
              "
            />
          </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';

  export default {
    components: { itemList, AssetTree },
    data () {
      return {
        treeData: [],
        current: {}
      };
    },
    created () {},
    methods: {
      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;
        }
        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>