schedule使用mock接口，drawer修改（未完成）

src/components/TaskDrawerContent.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="drawer-content">
    <el-row class="entry-row">
+     <div class="node-type">{{type}}</div>
      <h3>{{title}}</h3>
      <div class="edit-icon" @click="editEntry('title')"></div>
+     <i class="el-icon-close"
+        style="margin-left: auto;margin-right: 30px; font-size: 20px;cursor: pointer"
+        @click="closeDrawer"></i>
    </el-row>
     <el-row class="entry-row" v-if="isEditing.title">
       <el-input placeholder="请输入标题" size="mini" style="width: 300px;display: inline;" v-model="editedRequirement.title"/>
@@ -181,23 +185,29 @@
           <span>{{endTime}}</span></div>
       </el-col>
     </el-row>
+    <!-- 相关需求 -->
     <el-row class="entry-row" style="margin-top: 15px">
       <h4>相关需求</h4>
     </el-row>
     <el-row style="margin: 3px 25px;width: 100%">
-      <h5>父需求</h5>
+      <h5>父项</h5>
     </el-row>
     <el-row style="margin: 0px 25px;">
       <el-link type="primary">{{parent}}</el-link>
     </el-row>
     <el-row style="margin: 3px 25px;width: 100%">
-      <h5>子需求</h5>
+      <h5>子项</h5>
     </el-row>
     <el-row style="margin: 0px 25px;" v-for="item in childs" :key="item.id">
         <el-link @click.prevent="changeContent(item.id)" type="primary">{{item.title}}</el-link>
     </el-row>
+    <!-- 相关缺陷 -->
     <el-row class="entry-row" style="margin-top: 15px">
-      <h4>相关缺陷</h4>
+      <h4>相关缺陷（0）</h4>
+    </el-row>
+    <!-- 相关提交 -->
+    <el-row class="entry-row" style="margin-top: 15px">
+      <h4>相关提交（0）</h4>
     </el-row>
   </div>
 </template>
@@ -206,6 +216,8 @@
 export default {
   name: 'TaskDrawerContent',
   props: {
+    id: Number,
+    type: String,
     title: String,
     description: String,
     state: String,
@@ -228,7 +240,12 @@ export default {
         state: false,
         timeToTake: false,
       },
-      editedRequirement: {},
+      editedRequirement: {
+        title: '',
+        description: '',
+        state: null,
+        timeToTake: null,
+      },
     };
   },
   methods: {
@@ -255,10 +272,13 @@ export default {
       return res;
     },
     editEntry(key) {
-      this.isEditing[key] = true;
+      Object.keys(this.isEditing).forEach((item) => {
+        if (key === item) this.isEditing[item] = true;
+        else this.isEditing[item] = false;
+      });
     },
     submitEdit(key) {
-      console.log('...');
+      console.log('submit edit node');
       this.isEditing[key] = false;
     },
     cancelEdit(key) {
@@ -267,6 +287,9 @@ export default {
     changeContent(id) {
       this.$emit('change', id);
     },
+    closeDrawer() {
+      this.$emit('close-drawer');
+    },
   },
 };
 </script>
@@ -339,6 +362,14 @@ export default {
   flex-direction: row;
   align-items: center;
 }
+.node-type{
+  color: #FFFFFF;
+  border-radius: 3px;
+  font-size: 14px;
+  background-color: #42b983;
+  padding: 0 3px;
+  margin-right: 4px;
+}
 .state-entry{
   border-radius: 5px;
   background-color: cornflowerblue;

src/components/Tree.vue

@@ -32,7 +32,7 @@
 import TreeNode from './TreeNode.vue';
 
 // 容器宽高
-const HEIGHT = 600;
+const HEIGHT = 800;
 const WIDTH = 1100;
 const MARGIN_TOP = 80;
 const MARGIN_LEFT = 100;
@@ -65,6 +65,9 @@ export default {
       for (let i = 0; i < TREE_MAX_HEIGHT; i += 1) {
         colList.push([]);
       }
+      if (this.data.length === 0) {
+        return colList;
+      }
       this.data.forEach((item) => {
         if (item.deep > 0 && item.deep <= TREE_MAX_HEIGHT) {
           colList[item.deep - 1].push(item);
@@ -182,9 +185,13 @@ export default {
 
 <style lang="scss">
 #tree-container {
+  border-radius: 4px;
+  box-shadow: 0 0 3px 0px #BDC3C7;
   position: relative;
   display: flex;
+  overflow-y: auto;
   justify-content:center;
+  background: url("https://devcloud.cn-north-4.huaweicloud.com/projectman/plan_back.05189e7a664e6edc2f8e.png") repeat;
 }
 #node-container {
   position:absolute;

src/element-plus.ts

@@ -32,6 +32,7 @@ import {
   ElInputNumber,
   ElRadio,
   ElRadioGroup,
+  ElTooltip,
 } from 'element-plus';
 
 import ZH_CN from 'element-plus/lib/locale/lang/zh-cn';
@@ -73,6 +74,7 @@ export const Components = [
   ElInputNumber,
   ElRadio,
   ElRadioGroup,
+  ElTooltip,
 ];
 
 export const Plugins = [];

src/views/Project/Schedule.vue

@@ -1,25 +1,23 @@
 <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>
-  <ElDrawer v-model="showRequirementDrawer"   size="650px">
+  <ElDrawer v-model="showRequirementDrawer"  :with-header="false" size="650px">
     <!-- TODO: 供展示和编辑节点详情，可在taskList中复用  -->
     <template #default>
       <TaskDrawerContent
         @change="handleDrawerContentChange"
+        @close-drawer="showRequirementDrawer = false"
         v-bind="requirementInDrawer"
         :state-options="stateOptions"
         :user-options="userOptions"
         :priority-options="priorityOptions">
       </TaskDrawerContent></template>
   </ElDrawer>
-  <ElDrawer v-model="addRequirementDrawer" size="650px">
-    <template #title><h3 style="width: 100%">新建节点</h3></template>
-    <AddDrawerContent
-      @add-success="handleTreeChange"
-      @add-cancel="addRequirementDrawer = false"
-      :parent="parentOfAddingRequirement"
-      :user-options="userOptions"
-      :priority-options="priorityOptions"></AddDrawerContent>
-  </ElDrawer>
 </template>
 
 <script>
@@ -27,150 +25,15 @@ import Tree from '@/components/Tree.vue';
 
 import { RequirementAPI } from '@/api';
 import TaskDrawerContent from '@/components/TaskDrawerContent.vue';
-import AddDrawerContent from '@/components/AddDrawerContent.vue';
 
+const scheduleGuide = '项目规划用于asdsadsadda';
 export default {
   name: 'Schedule',
-  components: { AddDrawerContent, TaskDrawerContent, Tree },
+  components: { TaskDrawerContent, Tree },
   data() {
     return {
-      requirements: [{
-        deep: 1,
-        description: '这里是节点描述啊啊啊。',
-        endTime: '2021/3/17 12:00:01',
-        groupId: 101,
-        id: 1,
-        leaf: false,
-        parent: null,
-        priority: 0,
-        projectId: 101,
-        startTime: '2021/3/17 12:00:01',
-        state: '已创建',
-        timeToTake: 10,
-        title: '这是标题1',
-        type: '需求',
-        userId: 101,
-      },
-      {
-        deep: 2,
-        description: '这里是节点描述啊啊啊。',
-        endTime: '2021/3/17 12:00:01',
-        groupId: 101,
-        id: 2,
-        leaf: false,
-        parent: 1,
-        priority: 0,
-        projectId: 101,
-        startTime: '2021/3/17 12:00:01',
-        state: '已创建',
-        timeToTake: 10,
-        title: '这是标题2',
-        type: '需求',
-        userId: 101,
-      },
-      {
-        deep: 2,
-        description: '这里是节点描述啊啊啊。',
-        endTime: '2021/3/17 12:00:01',
-        groupId: 101,
-        id: 3,
-        leaf: false,
-        parent: 1,
-        priority: 0,
-        projectId: 101,
-        startTime: '2021/3/17 12:00:01',
-        state: '进行中',
-        timeToTake: 10,
-        title: '这是标题3',
-        type: '需求',
-        userId: 101,
-      },
-      {
-        deep: 3,
-        description: '这里是节点描述啊啊啊。',
-        endTime: '2021/3/17 12:00:01',
-        groupId: 101,
-        id: 4,
-        leaf: false,
-        parent: 3,
-        priority: 1,
-        projectId: 101,
-        startTime: '2021/3/17 12:00:01',
-        state: '已完成',
-        timeToTake: 10,
-        title: '这是标题4',
-        type: '需求',
-        userId: 101,
-      },
-      {
-        deep: 3,
-        description: '这里是节点描述啊啊啊。',
-        endTime: '2021/3/17 12:00:01',
-        groupId: 101,
-        id: 5,
-        leaf: false,
-        parent: 3,
-        priority: 2,
-        projectId: 101,
-        startTime: '2021/3/17 12:00:01',
-        state: '已完成',
-        timeToTake: 10,
-        title: '这是标题5',
-        type: '需求',
-        userId: 101,
-      },
-      {
-        deep: 4,
-        description: '这里是节点描述啊啊啊。',
-        endTime: '2021/3/17 12:00:01',
-        groupId: 101,
-        id: 6,
-        leaf: false,
-        parent: 5,
-        priority: 0,
-        projectId: 101,
-        startTime: '2021/3/17 12:00:01',
-        state: '进行中',
-        timeToTake: 10,
-        title: '这是标题6',
-        type: '需求',
-        userId: 101,
-      },
-      {
-        deep: 4,
-        description: '这里是节点描述啊啊啊。',
-        endTime: '2021/3/17 12:00:01',
-        groupId: 101,
-        id: 7,
-        leaf: false,
-        parent: 5,
-        priority: 0,
-        projectId: 101,
-        startTime: '2021/3/17 12:00:01',
-        state: '已完成',
-        timeToTake: 10,
-        title: '这是标题7',
-        type: '需求',
-        userId: 101,
-      },
-      {
-        deep: 4,
-        description: '这里是节点描述啊啊啊。',
-        endTime: '2021/3/17 12:00:01',
-        groupId: 101,
-        id: 8,
-        leaf: false,
-        parent: 5,
-        priority: 0,
-        projectId: 101,
-        startTime: '2021/3/17 12:00:01',
-        state: '已完成',
-        timeToTake: 10,
-        title: '这是标题8',
-        type: '需求',
-        userId: 101,
-      },
-      ],
+      scheduleGuide,
+      requirements: [],
       showRequirementDrawer: false,
       addRequirementDrawer: false,
       parentOfAddingRequirement: null,
@@ -181,15 +44,18 @@ export default {
     };
   },
   async mounted() {
-    // this.requirements = await RequirementAPI.getTreeNodesByProjectId(this.$store.state.workspace.currentProjectId);
+    await this.getTreeData();
+    console.warn('Schedule.vue_mounted');
     // this.$refs.tree.regenerateTree();
-    this.addChild2Node();
   },
   methods: {
-    addChild2Node() {
+    async getTreeData() {
+      this.requirements = this.addChild2Node(await RequirementAPI.getTreeNodesByProjectId(this.$store.state.workspace.currentProjectId));
+    },
+    addChild2Node(array) {
       const nodeMap = new Map();
-      this.requirements.forEach((item) => nodeMap.set(item.id, item));
-      this.requirements.forEach((item) => {
+      array.forEach((item) => nodeMap.set(item.id, item));
+      array.forEach((item) => {
         if (item.parent) {
           const tempParent = nodeMap.get(item.parent);
           if (!tempParent.childs) {
@@ -198,14 +64,13 @@ export default {
           tempParent.childs.push(item);
         }
       });
+      return array;
     },
     async handleTreeChange(msg) {
       const { type, id } = msg;
-      if (type === 'addChild') this.addRequirementDrawer = true;
-      this.parentOfAddingRequirement = id;
       await RequirementAPI[type](id);
-      // this.requirements = await RequirementAPI.getTreeNodesByProjectId(this.$store.state.workspace.currentProjectId);
-      this.$refs.tree.regenerateTree();
+      console.warn('treeNode_event');
+      await this.getTreeData();
     },
     handleNodeClick(id) {
       this.showRequirementDrawer = true;
@@ -213,7 +78,6 @@ export default {
     },
     handleDrawerContentChange(id) {
       this.requirementInDrawer = Array.prototype.find.call(this.requirements, (requirement) => requirement.id === id);
-      this.showRequirementDrawer = true;
     },
   },
 };