yxk-electronic-archives/src/views/components/DeviceTree.vue

<template>
  <div class="tree-scroll">
    <el-tree ref="deviceTree" :data="deviceTree" :props="defaultProps" node-key="id" :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick">
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span v-if="data.level===1" class="iconStoreHouse">
          {{ data.name }}
        </span>
        <span v-if="data.deviceName" class="iconLevel">
          {{ data.name }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { menu } from '@/api/storeManage/levelManage/level'
const dataArray = [
  {
    'id': 'DDAF09DDD05ED8ACF9928E',
    'supplierId': {
      'id': '3D9732A0F3615E925C634D',
      'name': '金虎',
      'remark': null,
      'phone': null,
      'deviceModel': '设备型号',
      'sequence': 1,
      'create_by': 'system',
      'update_by': 'system',
      'create_time': 1657079102000,
      'update_time': 1657079106000
    },
    'storeroomId': {
      'id': 'D6490DA3D4261E8C26D0E3',
      'name': '5F 档案库',
      'pid': '9BD20FDB985472600B5B35',
      'remark': '5F 档案库',
      'sort': 1,
      'children': null,
      'create_by': 'System',
      'update_by': 'admin',
      'create_time': 1656937675000,
      'update_time': 1687660503000
    },
    'deviceTypeId': {
      'id': 'DD656054BE3D1DF1E2F1FC',
      'name': '密集架',
      'create_by': 'system',
      'update_by': 'system',
      'create_time': 1657499126000,
      'update_time': 1657499131000
    },
    'deviceSpecParamId': null,
    'deviceId': null,
    'deviceName': '5F_档案库_密集架',
    'deviceIp': '192.168.1.110',
    'devicePort': 16000,
    'deviceState': 1,
    'deviceAccount': null,
    'devicePassword': null,
    'rowNo': 6,
    'areaNo': 1,
    'sumColumnNo': 10,
    'firstColumnNo': 1,
    'partNo': 5,
    'storeroomCode': '12345678',
    'columnRowNo': null,
    'cupboardNo': null,
    'videoRoute': null,
    'isNotice': true,
    'sequence': 43,
    'isLinkage': null,
    'isCallback': null,
    'create_by': 'admin',
    'update_by': 'admin',
    'create_time': 1661409034000,
    'update_time': 1687664660000
  }
]
export default {
  name: 'DeviceTree',
  data() {
    return {
      deviceTree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultExpandedKeys: [],
      defaultCheckedKeys: []
    }
  },
  created() {
    this.getDeviceTree()
  },
  methods: {
    getDeviceTree() {
      let defaultCheckedData = {}
      const data = dataArray
      let storeroom = {}
      let devices = []
      this.deviceTree.splice(0, this.deviceTree.length)
      for (let i = 0; i < data.length; i++) {
        if (!storeroom.id) {
          storeroom = data[i].storeroomId
          storeroom.level = 1
          data[i].name = data[i].deviceName
          data[i].isCurrent = true
          devices.push(data[i])
          // 设置第一个区域第一个节点的默认选中
          defaultCheckedData = data[i]
          // 第一个区域默认展开
          this.defaultExpandedKeys.push(data[i].storeroomId.id)
        } else if (storeroom.id !== data[i].storeroomId.id) {
          storeroom.children = devices
          this.deviceTree.push(storeroom)
          devices = []
          data[i].name = data[i].deviceName
          devices.push(data[i])
          storeroom = data[i].storeroomId
        } else {
          data[i].name = data[i].deviceName
          devices.push(data[i])
        }
        if (i === data.length - 1) {
          storeroom.children = devices
          this.deviceTree.push(storeroom)
        }
      }
      console.log(this.deviceTree)
      this.$nextTick(() => {
        // 设置第一个区域第一个节点的默认选中
        this.handleNodeClick(defaultCheckedData)
        this.$refs.deviceTree.setCurrentKey(defaultCheckedData.id)
      })

      menu().then((data) => {
      })
    },
    handleNodeClick(selectedData) {
      if (selectedData.deviceName) {
        this.$emit('nodeClick', selectedData)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tree-scroll{
  font-size: 14px;
}
</style>