修改样式，更新逻辑

src/ccccyt/Tree.vue

@@ -1,156 +0,0 @@
-<template>
-  <div class="tree-container">
-    <el-row :gutter="20" >
-        <TreeNode v-for="item in colList[0]" :title="item.title" :position-y="item.positionY" position-x="0" :key="item.id"></TreeNode>
-        <TreeNode v-for="item in colList[1]" :title="item.title" :position-y="item.positionY" :position-x="1" :key="item.id"></TreeNode>
-        <TreeNode v-for="item in colList[2]" :title="item.title" :position-y="item.positionY" :position-x="2" :key="item.id"></TreeNode>
-        <TreeNode v-for="item in colList[3]" :title="item.title" :position-y="item.positionY" :position-x="3" :key="item.id"></TreeNode>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import TreeNode from "@/components/TreeNode";
-export default {
-name: "Tree",
-  components: {TreeNode},
-  data() {
-  return {
-    treeHeight: 4,
-    requirements: [{
-      deep: 1,
-      id: 1,
-      parent: null,
-      title: '这是标题',
-    },
-      {
-        deep: 2,
-        id: 2,
-        parent: 1,
-        title: '这是标题2',
-      },
-      {
-        deep: 2,
-        id: 3,
-        parent: 1,
-        priority: 0,
-        title: '这是标题3',
-      },
-      {
-        deep: 3,
-        id: 4,
-        parent: 3,
-        title: '这是标题4',
-      },
-      {
-        deep:4,
-        id:9,
-        parent: 4,
-        title: '这是标题9'
-      },
-      {
-        deep: 3,
-        id: 5,
-        parent: 3,
-        title: '这是标题5',
-      },
-      {
-        deep: 4,
-        id: 6,
-        parent: 5,
-        title: '这是标题6',
-      },
-      {
-        deep: 4,
-        id: 7,
-        parent: 5,
-        title: '这是标题7',
-      },
-      {
-        deep: 4,
-        id: 8,
-        parent: 5,
-        title: '这是标题8',
-      },
-    ],
-    tree: {},
-    nodeMap: {},
-    colList: [[],[],[],[]]
-  }
-  },
-  mounted() {
-    this.array2tree()
-    this.getList()
-    this.tree.positionY = 0
-    this.calculateContentHeight(this.tree)
-    this.calculateNodePositionY()
-    this.offsetPositionY()
-    console.warn(this.tree)
-  },
-  methods: {
-  array2tree(){
-    let treeMap = new Map()
-    this.requirements.forEach((item)=>{
-      treeMap.set(item.id,item)
-    })
-    this.nodeMap = treeMap
-    this.requirements.forEach((item)=>{
-      if(item.parent){
-        let tempParent = treeMap.get(item.parent)
-        if(!tempParent.childs){
-          tempParent.childs = []
-        }
-        tempParent.childs.push(item)
-      }else{
-        this.tree = item
-      }
-    })
-  },
-  getList(){
-    this.requirements.forEach((item)=>{
-      this.colList[item.deep-1].push(item)
-    })
-  },
-  calculateContentHeight(node){
-    if(!node.childs){
-      node.contentHeight = 1
-      return 1
-    }
-    node.contentHeight = node.childs.reduce((total,current)=>{
-      return total + this.calculateContentHeight(current)
-    },0)
-    return node.contentHeight
-  },
-  calculateNodePositionY() {
-    for(let i=1;i<4;i++){
-      let sum = 0
-      this.colList[i].forEach((item)=>{
-        item.positionY = this.nodeMap.get(item.parent).positionY + sum
-        sum = sum + item.contentHeight
-      })
-    }
-  },
-  offsetPositionY(){
-    for(let i=2;i>=0;i--){
-      this.colList[i].forEach((item)=>{
-        if(item.childs){
-          let length = item.childs.length
-          item.positionY = item.childs.reduce((total,current)=>{
-            return total+current.positionY/length
-          },0)
-        }
-      })
-
-    }
-  }
-  }
-}
-</script>
-
-<style scoped>
-.tree-container{
-  min-height: 300px;
-  width: 100%;
-  background-color: #ffffff;
-}
-</style>

src/ccccyt/TreeNode.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="node-container" :style="nodeStyle">
-  <el-card class="node-card">
-    {{title}}
-  </el-card>
-  </div>
-</template>
-
-<script>
-export default {
-name: "TreeNode",
-props:{
-  title: String,
-  positionY: Number,
-  positionX: Number
-},
-computed:{
-  nodeStyle(){
-    return {
-      top: (this.positionY*120)+'px',
-      left: (300*this.positionX)+'px'
-    }
-  }
-}
-}
-</script>
-
-<style scoped>
-.node-container{
-  width: 300px;
-  height: 120px;
-  box-sizing: border-box;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.node-card{
-  width: 260px;
-  height: 100px;
-  background-color: #42b983;
-}
-
-</style>

src/components/TaskDrawerContent.vue

@@ -68,7 +68,7 @@
             <div class="edit-icon" />
           </div>
           <div v-else>
-          <el-select size="mini" v-model="editedRequirement.state">
+          <el-select style="width: 160px" size="mini" v-model="editedRequirement.state">
             <el-option
               v-for="item in stateOptions"
               :key="item.value"
@@ -94,11 +94,11 @@
         <div class="detail-row">
           <span>优先级：</span>
           <div class="detail-value"  v-if="!isEditing.priority"   @click="editEntry('priority')">
-          <span class="state-entry">{{getPriorityStr(priority)}}</span>
+          <span class="state-entry">{{priority}}</span>
             <div class="edit-icon" />
           </div>
           <div v-else>
-          <el-select size="mini" v-model="editedRequirement.priority">
+          <el-select style="width: 160px" size="mini" v-model="editedRequirement.priority">
             <el-option
               v-for="item in  priorityOptions"
               :key="item.value"
@@ -124,11 +124,11 @@
         <div class="detail-row">
           <span>经办人：</span>
           <div class="detail-value"   v-if="!isEditing.userId"  @click="editEntry('userId')">
-          <span class="state-entry">{{getUserName(userId)}}</span>
+          <span class="state-entry">{{userId}}</span>
             <div class="edit-icon" />
           </div>
           <div v-else>
-          <el-select size="mini" v-model="editedRequirement.userId" >
+          <el-select style="width: 160px" size="mini" v-model="editedRequirement.userId" >
             <el-option
               v-for="item in  userOptions"
               :key="item.value"
@@ -213,6 +213,8 @@
 </template>
 
 <script>
+import { RequirementAPI } from '../api';
+
 export default {
   name: 'TaskDrawerContent',
   props: {
@@ -221,7 +223,7 @@ export default {
     title: String,
     description: String,
     state: String,
-    priority: Number,
+    priority: String,
     userId: Number,
     timeToTake: Number,
     startTime: String,
@@ -239,27 +241,20 @@ export default {
         description: false,
         state: false,
         timeToTake: false,
+        priority: false,
+        userId: false,
       },
       editedRequirement: {
-        title: '',
-        description: '',
+        title: null,
+        description: null,
         state: null,
         timeToTake: null,
+        priority: null,
+        userId: null,
       },
     };
   },
   methods: {
-    getPriorityStr(value) {
-      let res;
-      this.priorityOptions.some((item) => {
-        if (item.value === value) {
-          res = item.label;
-          return true;
-        }
-        return false;
-      });
-      return res;
-    },
     getUserName(value) {
       let res;
       this.userOptions.some((item) => {
@@ -279,10 +274,15 @@ export default {
     },
     submitEdit(key) {
       console.log('submit edit node');
-      this.isEditing[key] = false;
+      const param = { id: this.id, ...this.editedRequirement };
+      RequirementAPI.updateTreeNode(param).then((res) => {
+        this.isEditing[key] = false;
+        this.$emit('requirement-update');
+      });
     },
     cancelEdit(key) {
       this.isEditing[key] = false;
+      this.editedRequirement[key] = null;
     },
     changeContent(id) {
       this.$emit('change', id);
@@ -367,7 +367,7 @@ export default {
   border-radius: 3px;
   font-size: 14px;
   background-color: #42b983;
-  padding: 0 3px;
+  padding: 1px 4px;
   margin-right: 4px;
 }
 .state-entry{

src/typings/project.d.ts

@@ -9,21 +9,21 @@ declare type TreeNodeType = '需求' | '任务';
 declare type TreeNodeState = '已创建' | '进行中' | '已结束';
 
 declare interface TreeNode {
-  deep: number;
-  description: string;
-  endTime: string;
-  groupId: number;
+  deep?: number;
+  description?: string;
+  endTime?: string;
+  groupId?: number;
   id: number;
-  leaf: boolean;
-  parentId: number;
-  priority: number;
-  projectId: number;
-  startTime: string;
-  state: TreeNodeState;
-  timeToTake: number;
-  title: string;
-  type: TreeNodeType;
-  userId: number;
+  leaf?: boolean;
+  parentId?: number;
+  priority?: number;
+  projectId?: number;
+  startTime?: string;
+  state?: TreeNodeState;
+  timeToTake?: number;
+  title?: string;
+  type?: TreeNodeType;
+  userId?: number;
 }
 
 declare type Role = 'TEACHER' | 'STUDENT' | 'ADMIN' | 'GUEST';

src/views/Project/Schedule.vue

@@ -12,6 +12,7 @@
       <TaskDrawerContent
         @change="handleDrawerContentChange"
         @close-drawer="showRequirementDrawer = false"
+        @requirement-update="getTreeData"
         v-bind="requirementInDrawer"
         :state-options="stateOptions"
         :user-options="userOptions"