seecoder-devcloud-frontend/src/views/Project/Schedule.vue

<template>
  <el-row style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">
    <h4>项目规划</h4>
    <el-tooltip class="item" effect="dark" :content="scheduleGuide" placement="right-end">
      <i class="el-icon-question"></i>
    </el-tooltip>
  </el-row>
  <Tree :data="requirements" @change="handleTreeChange" @nodeClick="handleNodeClick" ref="tree"></Tree>
  <RequirementDrawer
    ref="drawer"
    v-bind="requirementInDrawer"
    @change="handleDrawerContentChange"
    @requirement-update="getTreeData"
  ></RequirementDrawer>
</template>

<script>
import Tree from '@/components/Tree.vue';

import { RequirementAPI } from '@/api';
import RequirementDrawer from '@/components/RequirementDrawer.vue';

const scheduleGuide = '项目规划用于asdsadsadda';
export default {
  name: 'Schedule',
  components: { RequirementDrawer, Tree },
  data() {
    return {
      scheduleGuide,
      requirements: [],
      showRequirementDrawer: false,
      addRequirementDrawer: false,
      parentOfAddingRequirement: null,
      requirementInDrawer: {},
    };
  },
  async mounted() {
    await this.getTreeData();
  },
  methods: {
    async getTreeData() {
      try {
        this.requirements = this.addChild2Node(await RequirementAPI.getTreeNodesByProjectId(this.$store.state.workspace.currentProjectId));
      } catch (e) {
        console.error(e);
      }
    },
    addChild2Node(array) {
      const nodeMap = new Map();
      array.forEach((item) => nodeMap.set(item.id, item));
      array.forEach((item) => {
        if (item.parent) {
          const tempParent = nodeMap.get(item.parent);
          if (!tempParent.childs) {
            tempParent.childs = [];
          }
          tempParent.childs.push(item);
        }
      });
      return array;
    },
    async handleTreeChange(msg) {
      const { type, id } = msg;
      await RequirementAPI[type](id);
      await this.getTreeData();
    },
    handleNodeClick(id) {
      this.$refs.drawer.show();
      this.requirementInDrawer = Array.prototype.find.call(this.requirements, (requirement) => requirement.id === id);
    },
    handleDrawerContentChange(id) {
      this.requirementInDrawer = Array.prototype.find.call(this.requirements, (requirement) => requirement.id === id);
    },
  },
};
</script>

<style>

</style>