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

<template>
  <Tree :data="requirements" @change="handleTreeChange" @nodeClick="handleNodeClick" ref="tree"></Tree>
  <RightForm ref="rightForm"/>
</template>

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

import { RequirementAPI } from '@/api';

export default {
  name: 'Schedule',
  components: { Tree, RightForm },
  data() {
    return {
      requirements: [
        {
          id: 1,
          title: 't1',
          parent: null,
          state: '未开始',
        },
        {
          id: 2,
          title: 't2',
          parent: 1,
          state: '未开始',
        },
        {
          id: 3,
          title: 't3',
          parent: 1,
          state: '未开始',
        },
        {
          id: 4,
          title: 't4',
          parent: 2,
          state: '未开始',
        },
        {
          id: 5,
          title: 't5',
          parent: 2,
          state: '进行中',
        },
        {
          id: 6,
          title: 't6',
          parent: 4,
          state: '已完成',
        },
      ],
    };
  },
  methods: {
    async handleTreeChange(msg) {
      // TODO: 补充API定义
      const { type, id } = msg;
      await RequirementAPI[type](id);
      // this.requirements = await RequirementAPI.getTreeNode(projectId);
      this.$refs.tree.regenerateTree();
    },
    handleNodeClick(id) {
      this.$refs.rightForm.showForm();
    },
  },
};
</script>

<style>

</style>