Merge branch 'dev_schedule_tree' into integration

.eslintrc.js

@@ -17,5 +17,6 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'max-len': ['error', { code: 140, ignoreTrailingComments: true }],
     'no-param-reassign': [2, { props: false }],
+    'linebreak-style': [0, 'error', 'windows'],
   },
 };

src/App.vue

@@ -34,7 +34,6 @@ export default defineComponent({
 }
 html, body {
   width: 100%;
-  height: 100%;
 }
 
 #app {

src/assets/icon/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614581728244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3866" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M595.549 512.5l344.35-344.347c23.211-23.212 23.211-60.84 0-84.053-23.212-23.208-60.841-23.208-84.05 0L511.5 428.45 171.802 88.753c-22.932-22.935-60.116-22.935-83.048 0-22.935 22.933-22.935 60.117 0 83.05L428.45 511.5 84.101 855.849c-23.211 23.21-23.211 60.84 0 84.049 23.212 23.211 60.841 23.211 84.05 0l344.35-344.35 338.822 338.823c22.933 22.935 60.116 22.935 83.048 0 22.935-22.933 22.935-60.117 0-83.048L595.549 512.5z" p-id="3867" fill="#8a8a8a"></path></svg>

src/components/List.vue

@@ -0,0 +1,187 @@
+<template>
+  <div style="width: 100%">
+    <div>
+      <el-button type="primary"  v-if="!isShowCheckbox" size="small" @click="showCheckbox">批量操作</el-button>
+      <span  v-if="isShowCheckbox">
+      <el-button type="info" size="small" @click="isShowCheckbox=false">取消操作</el-button>
+      <el-button type="danger"  size="small" @click="handleMultipleDelete">批量删除</el-button>
+      <el-select
+        @change="handleMultipleStatusChange"
+        v-model="status"
+        size='medium'
+        placeholder="批量修改状态"
+        style="margin-left: 30px">
+        <el-option
+          v-for="item in statusOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select
+        @change="handleMultipleAssignmentChange"
+        v-model="assignment"
+        size='medium'
+        placeholder="批量修改负责人"
+        style="margin-left: 30px">
+        <el-option
+          v-for="item in assignmentOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      </span>
+    </div>
+    <el-table
+      :data="listData"
+      @selection-change="handleSelectionChange"
+      style="width: 100%">
+      <el-table-column
+        v-if="isShowCheckbox"
+        type="selection"
+        width="60">
+      </el-table-column>
+      <el-table-column
+        prop="projectCode"
+        label="编号"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="title"
+        min-width="180"
+        label="标题">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="优先级"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        label="状态"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="计划时间"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="创建时间"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="经办人"
+        width="180">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="display: flex;flex-direction: row;justify-content: center;margin-top: 20px"
+      background
+      @current-change="handleCurrentChange"
+      :page-size="pageSize"
+      layout="prev, pager, next"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'List',
+  props: {
+    listData: Array, // 展示的列表数据
+    total: Number, // 总页数
+    statusOptions: {
+      type: Array,
+      default() {
+        return [
+          {
+            label: '未分配',
+            value: 1,
+          },
+          {
+            label: '未完成',
+            value: 2,
+          },
+          {
+            label: '已完成',
+            value: 3,
+          },
+          {
+            label: '已关闭',
+            value: 4,
+          }];
+      },
+    }, // 状态选项
+    assignmentOptions: {
+      type: Array,
+      default() {
+        return [
+          {
+            label: '组员A',
+            value: 1,
+          },
+          {
+            label: '组员B',
+            value: 2,
+          },
+          {
+            label: '组员C',
+            value: 3,
+          },
+          {
+            label: '组员D',
+            value: 4,
+          }];
+      },
+    }, // 分配人选项
+  },
+  data() {
+    return {
+      isShowCheckbox: false,
+      pageSize: 10,
+      selectedId: [],
+      status: null,
+      assignment: null,
+    };
+  },
+  methods: {
+    showCheckbox() {
+      this.isShowCheckbox = true;
+    },
+    handleSelectionChange(val) {
+      console.warn(val);
+      const tempArray = [];
+      val.forEach((item) => {
+        tempArray.push(item.projectCode);
+      });
+      this.selectedId = tempArray;
+    },
+    // 分页切换事件
+    handleCurrentChange(currentPage) {
+      console.log(currentPage);
+      this.$emit('current-change', currentPage);
+    },
+    // 批量删除事件
+    handleMultipleDelete() {
+      console.warn('deleteMultiply');
+      this.$emit('multiple-delete', this.selectedId);
+    },
+    // 批量修改状态事件
+    handleMultipleStatusChange() {
+      this.$emit('multiple-status-change', this.selectedId);
+    },
+    // 批量修改分配人事件
+    handleMultipleAssignmentChange() {
+      this.$emit('multiple-assignment-change', this.selectedId);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/Menu.vue

@@ -63,6 +63,7 @@ export default {
   flex-direction: row;
   align-items: center;
   justify-content: start;
+  z-index: 100;
 }
 .menu-logo{
   color: #FFFFFF;

src/components/MissionDetailsForm.vue

@@ -0,0 +1,41 @@
+<template>
+<right-form ref="rightForm">
+  <div class="missionDetialscontainer">
+    <div class="missionBaseInfo">任务基础信息展示</div>
+    <el-tabs class="tablePane" v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="描述信息" name="taskdDescriptionInfo">任务描述信息</el-tab-pane>
+      <el-tab-pane label="代码提交记录" name="commitRecord">代码提交记录</el-tab-pane>
+    </el-tabs>
+  </div>
+</right-form>
+</template>
+
+<script>
+import RightForm from './RightForm.vue';
+
+export default {
+  components: { RightForm },
+  name: 'MissionDetailsForm',
+  data() {
+    return {
+      activeName: 'second',
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    showForm() {
+      this.$refs.rightForm.showForm();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.missionDetialscontainer{
+  .el-tabs__nav-scroll{
+    width: 200px;
+  }
+}
+</style>

src/components/ProjectCard.vue

@@ -27,9 +27,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 .project-card {
   display: inline-block;
-  border: 1px solid #ccc;
+  box-shadow: 0 0 1px #BDC3C7;
+  border-radius: 5px;
+  padding: 10px;
   height: 150px;
-  width: 20%;
+  width: 320px;
   margin: 10px auto;
+  transition: all .3s ease;
+}
+.project-card:hover {
+  box-shadow: 0 0 5px #BDC3C7;
 }
 </style>

src/components/RightForm.vue

@@ -0,0 +1,68 @@
+<template>
+  <transition name="translation">
+  <div class="right-bar-container" v-if="isFormShow">
+    <div class="form-util">
+      <div class="close" @click="isFormShow=false"></div>
+    </div>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'RightForm',
+  data() {
+    return {
+      isFormShow: false,
+    };
+  },
+  methods: {
+    // 父组件通过ref的方式调用该方法显示表单
+    showForm() {
+      this.isFormShow = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.right-bar-container{
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  height: 100vh;
+  width: 800px;
+  box-shadow: 0 0 5px #BDC3C7;
+  background: #FFFFFF;
+  z-index: 101;
+}
+.translation-enter-active,.translation-leave-active {
+  transition: all 0.3s ease-out;
+}
+.translation-enter-from,
+.translation-leave-to {
+  transform: translateX(800px);
+}
+.form-util{
+  width: 80px;
+  margin-left: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.form-util .close{
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url("../assets/icon/close.svg");
+}
+
+</style>

src/components/SideBar.vue

@@ -62,6 +62,7 @@ export default {
   justify-content: start;
   align-items: center;
   padding-top: 20px;
+  z-index: 100;
 }
 .icon{
   width: 28px;

src/components/Tree.vue

@@ -8,6 +8,7 @@
       :ref="`treenode-${requirement.id}`"
       @addChild="addChild"
       @deleteNode="deleteNode"
+      @nodeClick="nodeClick"
     />
   </div>
   <canvas id="line-drawer" :height="HEIGHT" :width="WIDTH"></canvas>
@@ -168,6 +169,9 @@ export default {
         id,
       });
     },
+    nodeClick(id) {
+      this.$emit('node-click', id);
+    },
   },
 };
 </script>
@@ -179,7 +183,7 @@ export default {
 }
 #node-container {
   position:absolute;
-  z-index: 101;
+  z-index: 11;
 }
 #line-drawer {
   position: absolute;

src/components/TreeNode.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tree-node-container" ref="node">
-    <div class="tree-node" @click="openDrawer(id)">
+    <div class="tree-node" @click="nodeClick(id)">
       <div class="node-state">{{state}}</div>
       <div class="node-title">{{title}}</div>
     </div>
@@ -42,8 +42,8 @@ export default {
     deleteNode(id) {
       this.$emit('delete-node', id);
     },
-    openDrawer(id) {
-      // TODO: 打开详细信息抽屉
+    nodeClick(id) {
+      this.$emit('node-click', id);
     },
   },
 };

src/element-plus.ts

@@ -2,7 +2,19 @@ import {
   ElCard,
   ElCarousel,
   ElCarouselItem,
-  ElContainer, ElDivider, ElHeader, ElMain, ElRow,
+  ElContainer,
+  ElDivider,
+  ElHeader,
+  ElMain,
+  ElRow,
+  ElTable,
+  ElTableColumn,
+  ElPagination,
+  ElButton,
+  ElSelect,
+  ElOption,
+  ElTabs,
+  ElTabPane,
 } from 'element-plus';
 
 export const Components = [
@@ -14,6 +26,14 @@ export const Components = [
   ElCarouselItem,
   ElDivider,
   ElCard,
+  ElTable,
+  ElTableColumn,
+  ElPagination,
+  ElButton,
+  ElSelect,
+  ElOption,
+  ElTabs,
+  ElTabPane,
 ];
 
 export const Plugins = [];

src/views/Home.vue

@@ -2,6 +2,7 @@
   <div class="home">
     <div class="poster">
     </div>
+    <div style="font-weight: bolder;font-size: 32px;padding: 30px">Hello,username</div>
     <div class="project-list">
       <ProjectCard
         v-for="project in projectList"

src/views/Project/BugList.vue

@@ -1,13 +1,95 @@
 <template>
-  project-bug-list
+  <div class="content">
+    <button @click="showRightForm">from test</button>
+    <div></div>
+    <List
+      :listData="bugData"
+      :total="300"
+      :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange">
+    </List>
+    <RightForm ref="rightForm">
+    </RightForm>
+  </div>
 </template>
 
 <script>
-export default {
+import RightForm from '../../components/RightForm.vue';
+import List from '../../components/List.vue';
 
+export default {
+  components: { RightForm, List },
+  data() {
+    return {
+      bugData: [
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        }],
+      isShowCheckbox: true,
+    };
+  },
+  methods: {
+    /**
+     * @param filterObject 用于数据获取请求的参数对象
+     * @param currentPage  当前页数
+     */
+    getBugData(filterObject, currentPage) {
+      console.log('getBugData');
+    },
+    showRightForm() {
+      console.log(this.$refs.rightForm);
+      this.$refs.rightForm.showForm();
+    },
+    handleCurrentChange(currentPage) {
+      this.getBugData({}, currentPage);
+    },
+  },
 };
 </script>
 
-<style>
-
+<style scoped>
 </style>

src/views/Project/Schedule.vue

@@ -1,15 +1,17 @@
 <template>
-  <Tree :data="requirements" @change="handleTreeChange" ref="tree"></Tree>
+  <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 },
+  components: { Tree, RightForm },
   data() {
     return {
       requirements: [
@@ -60,6 +62,9 @@ export default {
       // this.requirements = await RequirementAPI.getTreeNode(projectId);
       this.$refs.tree.regenerateTree();
     },
+    handleNodeClick(id) {
+      this.$refs.rightForm.showForm();
+    },
   },
 };
 </script>

src/views/Project/TaskList.vue

@@ -1,13 +1,194 @@
 <template>
-  project-task-list
+  <div class="taskListContainer">
+    <button @click="showMissionDetailsForm">from test</button>
+    <div class="taskFunctionBar">
+<!--      后期可以考虑吧 控制台也才抽出来作为组件 -->
+      <div class="masterFunctionBar">
+          <div class="taskList-logo">任务</div>
+          <el-button size="small" type="warning" icon="el-icon-plus" >新建任务</el-button>
+      </div>
+      <div class="filterFunctionBar">
+        <el-select size="small" class="subSelect taskScopeSelect" v-model="value" placeholder="全部">
+          <el-option
+            v-for="item in taskScope"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-select size="small" class="subSelect taskStatusSelect" v-model="value" placeholder="全部类型">
+          <el-option
+            v-for="item in taskStatus"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-select size="small" class="subSelect sortOptionsSelect" v-model="value" placeholder="默认排序">
+          <el-option
+            v-for="item in sortOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+
+      </div>
+    </div>
+
+    <div class="taskTableContainer">
+      <List
+        :listData="bugData"
+        :total="300"
+        :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange">
+      </List>
+      <MissionDetailsForm ref="missionDetailsForm"> </MissionDetailsForm>
+<!--     组件，然后 当展示的时候，将筛选的选项传入-->
+<!--      buglist和任务list复用-->
+<!--      点击具体项的时候，任务的抽屉也是一个组件-->
+    </div>
+  </div>
+
 </template>
 
 <script>
-export default {
+import MissionDetailsForm from '../../components/MissionDetailsForm.vue';
+import List from '../../components/List.vue';
 
+export default {
+  components: { MissionDetailsForm, List },
+  data() {
+    return {
+      taskScope: [{
+        value: 'all',
+        label: '全部',
+      }, {
+        value: 'my',
+        label: '分配到我',
+      }],
+      selectTaskScope: 'all',
+      taskStatus: [{
+        value: 'allStatus',
+        label: '全部类型',
+      }, {
+        value: 'completed',
+        label: '已完成',
+      }, {
+        value: 'ongoing',
+        label: '进行中',
+      }],
+      selectTaskStatus: 'allStatus',
+      sortOptions: [{
+        value: 'default',
+        label: '默认排序',
+      }, {
+        value: 'creationTimeFirst',
+        label: '创建时间',
+      }, {
+        value: 'priority',
+        label: '优先级',
+      }],
+      selectSortOptions: 'allStatus',
+      bugData: [
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        }],
+      isShowCheckbox: true,
+    };
+  },
+  methods: {
+    /**
+     * @param filterObject 用于数据获取请求的参数对象
+     * @param currentPage  当前页数
+     */
+    getBugData(filterObject, currentPage) {
+      console.log('getBugData');
+    },
+    showMissionDetailsForm() {
+      console.log(this.$refs.missionDetailsForm);
+      this.$refs.missionDetailsForm.showForm();
+    },
+    handleCurrentChange(currentPage) {
+      this.getBugData({}, currentPage);
+    },
+  },
 };
 </script>
 
-<style>
+<style scoped>
+.taskListContainer{
+  margin: 70px 30px 0 30px;
+}
+.taskFunctionBar .masterFunctionBar{
+  display: flex;
+  align-items:center;
+  justify-content:space-between;
+}
+.taskFunctionBar .filterFunctionBar{
+  margin-top: 20px;
+  display: flex;
+  align-items:center;
+}
+.subSelect {
+  width: 130px;
+}
+.taskScopeSelect{
+  margin-left: 0px;
+}
+.taskStatusSelect{
+  margin-left: 18px;
+}
+.sortOptionsSelect{
+  margin-left: auto;
+}
+
+.taskTableContainer{
+  margin-top: 20px;
+}
 
 </style>

src/views/ProjectContainer.vue

@@ -25,9 +25,17 @@ export default {
 .container{
   background-color: #FFFFFF;
   width: calc(100% - 42px);
-  margin-left: 42px;
   margin-top: 58px;
-  min-height: 900px;
+  margin-left: 42px;
+  min-height: 60vh;
+}
+.content{
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
 }
-
 </style>