kd-aiot-frontend/src/views/material/product/oneProduct.vue

<template>
    <div class="ele-body">
      <el-card shadow="never">
        <ele-split-layout width="300px" allow-collapse :right-style="{ overflow: 'hidden' }">
          <div class="ele-border-lighter sys-organization-list">
            <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>
            <div class="ele-border-lighter form-content" v-loading="loading">
              <div class="form-wrapper">
                <el-form size="mini" label-width="100px" class="ele-form-detail">
                  <el-row :gutter="15" v-if="current.parentId == 0">
                    <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
                      <el-form-item label="类型编码:">
                        <div class="ele-text-secondary">
                          {{ current.code }}
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
                      <el-form-item label="类型名称:">
                        <div class="ele-text-secondary">
                          {{ current.name }}
                        </div>
                      </el-form-item>
                    </el-col>
  
                    <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                      <el-form-item label="描述:">
                        <div class="ele-text-secondary">
                          {{ current.remark }}
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="15" v-else>
                    <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
                      <el-form-item label="节点编码:">
                        <div class="ele-text-secondary">
                          {{ current.code }}
                        </div>
                      </el-form-item>
                    </el-col>
  
                    <el-col v-bind="styleResponsive ? { sm: 6 } : { span: 6 }">
                      <el-form-item label="节点名称:">
                        <div class="ele-text-secondary">
                          {{ current.name }}
                        </div>
                      </el-form-item>
                    </el-col>
  
                    <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                      <el-form-item label="层级全览:">
                        <div class="ele-text-secondary">
                          {{ fullName }}
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
  
              <IndexSearch @search="reload" />
  
              <IndexData ref="listData" v-if="current" :current-id="current.id" :data="current" :rootTreeId="rootTreeId" :rootId="rootId" :oneProduct="true">
              </IndexData>
            </div>
          </template>
        </ele-split-layout>
      </el-card>
    </div>
  </template>
  <script>
  import IndexData from './components/index-data.vue';
  import IndexSearch from './components/index-search.vue';
  
  import dictMixins from '@/mixins/dictMixins';
  import { getTreeByPid } from '@/api/classifyManage';
  
  import { getInfoById } from '@/api/classifyManage';
  
  export default {
    components: {
      IndexData,
      IndexSearch
    },
    mixins: [dictMixins],
    data() {
      return {
        loading: false,
        current: {},
        curNode: {},
        treeList: [],
        treeLoading: false,
        formData: {},
         rootTreeId: null,
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
  
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
  
      rootId() {
        return this.$route.query.id;
      },
  
      fullName() {
        let str = '';
        let codeStr = '';
        let node = this.curNode;
        while (node?.data?.name) {
          str = node.data.name + '-' + str;
          codeStr = node.data.code + '-' + codeStr;
          node = node?.parent;
        }
  
        return str.substring(str, str.length - 1);
        // return (
        //   str.substring(str, str.length - 1) +
        //   `(${codeStr.substring(str, str.length - 1)})`
        // );
      }
    },
    created() {
      this.getTreeData();
    },
    methods: {
      async getTreeData() {
        try {
          this.treeLoading = true;
  
          const res = await getTreeByPid(9);
          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;
      },
  
      async getDetail(id) {
        this.loading = true;
        const res = await getInfoById(id);
        this.loading = false;
        if (res.code == '0') {
          this.current = res.data;
          this.$nextTick(() => {
            this.$refs.treeRef.setCurrentKey(this.current.id);
          });
        }
      },
  
      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
        }
  
  
        this.getDetail(data.id);
      },
  
      /* 刷新表格 */
      reload(where) {
        this.$refs.listData.reload(where);
      },
  
      // parents:用于返回的数组，childNode:要查询的节点，treeList：json树形数据
      findParent(parents, childNode, treeList) {
        for (let i = 0; i < treeList.length; i++) {
          // 父节点查询条件
          if (treeList[i].id === childNode.parentId) {
            // 如果找到结果,保存当前节点
            parents.push(treeList[i])
            // 用当前节点再去原数据查找当前节点的父节点
            this.findParent(parents, treeList[i], this.treeList)
            break
          } else {
            if (treeList[i].children instanceof Array) {
              //	没找到，遍历该节点的子节点
              this.findParent(parents, childNode, treeList[i].children)
            }
          }
        }
        return parents
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .sys-organization-list {
    height: calc(100vh - 165px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }
  
  .sys-organization-list :deep(.el-tree-node__content) {
    height: 30px;
  
    &>.el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
  
  .form-content {
    height: 50px;
    border: 1px solid;
    box-sizing: border-box;
  }
  
  .form-wrapper {
    padding: 12px 24px;
  }
  </style>