新增节点 drawer 初步

src/components/AddDrawer.vue

@@ -1,18 +0,0 @@
-<template>
-  <ElDrawer :value="showDrawer" size="600px">
-    <!-- TODO: 供展示和编辑节点详情，可在taskList中复用  -->
-  </ElDrawer>
-</template>
-
-<script>
-export default {
-  name: 'AddDrawer',
-  props: {
-    showDrawer: Boolean,
-  },
-};
-</script>
-
-<style scoped>
-
-</style>

src/components/AddDrawerContent.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="drawer-content">
+    <el-form
+      ref="form"
+      :rules="rules"
+      :model="param"
+      label-width="80px"
+      style="width: 80%"
+      size="small">
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="param.title"></el-input>
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input type="textarea"
+                  maxlength="120"
+                  show-word-limit v-model="param.description"></el-input>
+      </el-form-item>
+      <el-form-item label="类型" required>
+        <el-radio-group v-model="param.type">
+          <el-radio label="需求"></el-radio>
+          <el-radio label="任务"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="工作量">
+        <el-input-number  v-model="param.timeToTake" :min="0" :max="200"/> h
+      </el-form-item>
+      <el-form-item label="优先级">
+        <el-select placeholder="选择优先级" v-model="param.priority">
+          <el-option
+            v-for="item in  priorityOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="经办人">
+        <el-select placeholder="选择经办人" v-model="param.userId">
+          <el-option
+            v-for="item in  userOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item style="display: flex">
+        <el-button type="primary" @click="submitAdd">创建</el-button>
+        <el-button @click="cancelAdd">取消</el-button>
+      </el-form-item>
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddDrawerContent',
+  props: {
+    parent: Number,
+    priorityOptions: Array,
+    userOptions: Array,
+  },
+  data() {
+    return {
+      param: {
+        title: '',
+        description: '',
+        type: '',
+        timeToTake: null,
+        priority: null,
+        userId: null,
+      },
+      rules: {
+        title: [{
+          required: true, massage: '请输入标题', trigger: 'blur',
+        }],
+        type: [{
+          required: true, massage: '请选择类型', trigger: 'change',
+        }],
+      },
+    };
+  },
+  methods: {
+    submitAdd() {
+      // 调新增接口
+      this.$emit('add-success');
+    },
+    cancelAdd() {
+      this.$emit('add-cancel');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.drawer-content{
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+</style>

src/element-plus.ts

@@ -30,6 +30,8 @@ import {
   ElButtonGroup,
   ElCol,
   ElInputNumber,
+  ElRadio,
+  ElRadioGroup,
 } from 'element-plus';
 
 export const Components = [
@@ -64,6 +66,8 @@ export const Components = [
   ElButtonGroup,
   ElCol,
   ElInputNumber,
+  ElRadio,
+  ElRadioGroup,
 ];
 
 export const Plugins = [];

src/views/Project/Schedule.vue

@@ -11,6 +11,15 @@
         :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>
@@ -18,10 +27,11 @@ import Tree from '@/components/Tree.vue';
 
 import { RequirementAPI } from '@/api';
 import TaskDrawerContent from '@/components/TaskDrawerContent.vue';
+import AddDrawerContent from '@/components/AddDrawerContent.vue';
 
 export default {
   name: 'Schedule',
-  components: { TaskDrawerContent, Tree },
+  components: { AddDrawerContent, TaskDrawerContent, Tree },
   data() {
     return {
       requirements: [{
@@ -162,6 +172,8 @@ export default {
       },
       ],
       showRequirementDrawer: false,
+      addRequirementDrawer: false,
+      parentOfAddingRequirement: null,
       requirementInDrawer: {},
       stateOptions: [{ value: '已完成' }, { value: '进行中' }, { value: '已创建' }],
       priorityOptions: [{ value: 0, label: '高' }, { value: 1, label: '中' }, { value: 2, label: '低' }],
@@ -189,6 +201,8 @@ export default {
     },
     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();