kd-aiot-frontend/src/views/material/BOMmanage/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-split-layout
        width="260px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter sys-organization-list">
          <div class="radio_box rx-cc">
            <el-radio-group size="small" v-model="treeActive">
              <el-radio-button label="1">PBOM</el-radio-button>
              <el-radio-button label="2">MBOM</el-radio-button>
            </el-radio-group>
          </div>

          <el-input
            size="small"
            placeholder="在结构中查找"
            v-model="filterText"
          >
          </el-input>

          <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>
        <template v-slot:content>
          <el-tabs type="border-card">
            <el-tab-pane label="属性">
                <attribute></attribute>
            </el-tab-pane>
            <el-tab-pane label="文档"></el-tab-pane>
            <el-tab-pane label="工艺"></el-tab-pane>
            <el-tab-pane label="制造资源"></el-tab-pane>
            <el-tab-pane label="材料定额"></el-tab-pane>
            <el-tab-pane label="工作中心分配"></el-tab-pane>
            <el-tab-pane label="质检"></el-tab-pane>
            <el-tab-pane label="质检参数"></el-tab-pane>
          </el-tabs>
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import { getTreeByGroup } from '@/api/classifyManage';
  import attribute from './components/attribute.vue'

  

  export default {
    name: 'BOMmanage',
    components: {
        attribute
    },
    data() {
      return {
        current: {},
        treeList: [],
        treeLoading: false,
        rootTreeId: null,
        defaultProps: {
          children: 'children',
          label: 'name'
        },

        loading: false,

        filterText: null,

        treeActive: 1
      };
    },
    created() {
      this.getTreeData();
    },

    methods: {
      async getTreeData() {
        try {
          this.treeLoading = true;

          const res = await getTreeByGroup({ type: 1 });
          this.treeLoading = false;
          if (res?.code === '0') {
            this.treeList = res.data;

            this.$nextTick(() => {
              // 默认高亮第一级树节点
              if (this.treeList[0]) {
                this.rootTreeId = this.treeList[0].id;
                this.getDetail(this.treeList[0].id);
              }
            });
            return this.treeList;
          }
        } catch (error) {}
        this.treeLoading = false;
      },

      handleNodeClick(data, node) {
        this.curNode = node;
        this.pathList = this.findParent([], data, this.treeList);
        this.rootTreeId = null;
        if (this.pathList.length == 0) {
          this.rootTreeId = data.id;
        } else {
          this.rootTreeId =
            this.pathList[this.pathList.length - 1] &&
            this.pathList[this.pathList.length - 1].id;
        }

        console.log(data.id);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .sys-organization-list {
    height: calc(100vh - 165px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .radio_box {
    margin: 12px 0;
  }

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

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