feat：初步整合两张列表页，新建任务详情组件

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/element-plus.ts

@@ -13,6 +13,8 @@ import {
   ElButton,
   ElSelect,
   ElOption,
+  ElTabs,
+  ElTabPane,
 } from 'element-plus';
 
 export const Components = [
@@ -30,6 +32,8 @@ export const Components = [
   ElButton,
   ElSelect,
   ElOption,
+  ElTabs,
+  ElTabPane,
 ];
 
 export const Plugins = [];

src/views/Project/BugList.vue

@@ -5,7 +5,8 @@
     <List
       :listData="bugData"
       :total="300"
-      :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange"></List>
+      :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange">
+    </List>
     <RightForm ref="rightForm">
     </RightForm>
   </div>

src/views/Project/TaskList.vue

@@ -1,6 +1,6 @@
 <template>
-  project-task-list
   <div class="taskListContainer">
+    <button @click="showMissionDetailsForm">from test</button>
     <div class="taskFunctionBar">
 <!--      后期可以考虑吧 控制台也才抽出来作为组件 -->
       <div class="masterFunctionBar">
@@ -37,7 +37,12 @@
     </div>
 
     <div class="taskTableContainer">
-
+      <List
+        :listData="bugData"
+        :total="300"
+        :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange">
+      </List>
+      <MissionDetailsForm ref="missionDetailsForm"> </MissionDetailsForm>
 <!--     组件，然后 当展示的时候，将筛选的选项传入-->
 <!--      buglist和任务list复用-->
 <!--      点击具体项的时候，任务的抽屉也是一个组件-->
@@ -47,7 +52,11 @@
 </template>
 
 <script>
+import MissionDetailsForm from '../../components/MissionDetailsForm.vue';
+import List from '../../components/List.vue';
+
 export default {
+  components: { MissionDetailsForm, List },
   data() {
     return {
       taskScope: [{
@@ -80,15 +89,80 @@ export default {
         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 scoped>
 .taskListContainer{
-  margin: 30px 30px 0 30px;
+  margin: 70px 30px 0 30px;
 }
 .taskFunctionBar .masterFunctionBar{
   display: flex;
@@ -112,4 +186,9 @@ export default {
 .sortOptionsSelect{
   margin-left: auto;
 }
+
+.taskTableContainer{
+  margin-top: 20px;
+}
+
 </style>