feat: 完成taskList表格部分

mock/routers/buglist.js

@@ -33,33 +33,11 @@ router.get('/list', (req, res) => {
           },
         ],
         description: 'bug description',
-        endTime: {
-          date: 0,
-          day: 0,
-          hours: 0,
-          minutes: 0,
-          month: 0,
-          nanos: 0,
-          seconds: 0,
-          time: 0,
-          timezoneOffset: 0,
-          year: 0,
-        },
+        endTime: Random.datetime(),
         expectedTimeCost: 140,
         'id|+5': 1001,
         priority: ['紧急', '一般', '宽松'],
-        startTime: {
-          date: 0,
-          day: 0,
-          hours: 0,
-          minutes: 0,
-          month: 0,
-          nanos: 0,
-          seconds: 0,
-          time: 0,
-          timezoneOffset: 0,
-          year: 0,
-        },
+        startTime: Random.datetime(),
         'state|1': ['CREATED', 'PROCESSING', 'FINISHED'],
         title: 'bug titleeee',
       },

mock/routers/deployment.js

@@ -24,18 +24,7 @@ router.get('/list', (req, res) => {
           status: '正常',
           'id|+5': 101,
           pipelineId: 100,
-          deployedTime: {
-            date: 0,
-            day: 1,
-            'hours|+1': 12,
-            'minutes|+1': 30,
-            month: 3,
-            nanos: 0,
-            'seconds|+1': 15,
-            time: 0,
-            timezoneOffset: 0,
-            year: 2021,
-          },
+          deployedTime: Random.datetime(),
         }],
       },
     ).data,

mock/routers/pipeline.js

@@ -55,18 +55,7 @@ router.get('/history/list', (req, res) => {
           'id|+5': 101,
           pipelineId: 100,
           'result|1': ['成功', '失败', '执行中'],
-          startTime: {
-            date: 0,
-            day: 1,
-            'hours|+1': 12,
-            'minutes|+1': 30,
-            month: 3,
-            nanos: 0,
-            'seconds|+1': 15,
-            time: 0,
-            timezoneOffset: 0,
-            year: 2021,
-          },
+          startTime: Random.datetime(),
           username: 'hkshu12',
         }],
       },
@@ -92,18 +81,7 @@ router.get('/list', (req, res) => {
           'id|+1': 100,
           name: Random.cname(),
           'result|1': ['成功', '失败', '执行中'],
-          startTime: {
-            date: 0,
-            day: 1,
-            'hours|+1': 12,
-            'minutes|+1': 30,
-            month: 3,
-            nanos: 0,
-            'seconds|+1': 15,
-            time: 0,
-            timezoneOffset: 0,
-            year: 2021,
-          },
+          startTime: Random.datetime(),
           username: 'hkshu12',
         }],
       },

mock/routers/tree.js

@@ -14,6 +14,40 @@ router.put('/node', (req, res) => {
   res.json(wrapper('success'));
 });
 
+router.get('/node/type/task/:projectId', (req, res) => {
+  res.json(wrapper(
+    Mock.mock({
+      'data|5-20': [{
+        'commits|3-5': [
+          {
+            gitlabUsername: Random.name(),
+            id: 'string',
+            message: 'string',
+            timestamp: Random.datetime(),
+            title: 'string',
+          },
+        ],
+        deep: 1,
+        description: Random.csentence(10, 40),
+        endTime: Random.datetime(),
+        'id|+1': 1,
+        leaf: false,
+        parent: null,
+        'priority|1': ['紧急', '一般', '宽松'],
+        processorId: 101,
+        projectId: 101,
+        startTime: Random.datetime(),
+        'state|1': ['已创建', '进行中', '已完成'],
+        timeToTake: 10,
+        title: Random.cname(),
+        'type|1': ['需求', '任务'],
+        userId: 101,
+        username: Random.cname(),
+      }],
+    }).data,
+  ));
+});
+
 router.delete('/node/:nodeId', (req, res) => {
   res.json(wrapper('success'));
 });
@@ -28,11 +62,11 @@ router.get('/:projectId', (req, res) => {
       deep: 1,
       description: Random.csentence(10, 40),
       endTime: Random.datetime(),
-      groupId: 101,
       id: 1,
       leaf: false,
       parent: null,
-      priority: 0,
+      'priority|1': ['紧急', '一般', '宽松'],
+      processorId: 101,
       projectId: 101,
       startTime: Random.datetime(),
       'state|1': ['已创建', '进行中', '已完成'],
@@ -40,16 +74,17 @@ router.get('/:projectId', (req, res) => {
       title: Random.cname(),
       'type|1': ['需求', '任务'],
       userId: 101,
+      username: Random.cname(),
     },
     {
       deep: 2,
       description: Random.csentence(10, 40),
       endTime: Random.datetime(),
-      groupId: 101,
       id: 2,
       leaf: false,
       parent: 1,
-      priority: 0,
+      'priority|1': ['紧急', '一般', '宽松'],
+      processorId: 101,
       projectId: 101,
       startTime: Random.datetime(),
       'state|1': ['已创建', '进行中', '已完成'],
@@ -57,16 +92,17 @@ router.get('/:projectId', (req, res) => {
       title: Random.cname(),
       'type|1': ['需求', '任务'],
       userId: 101,
+      username: Random.cname(),
     },
     {
       deep: 2,
       description: Random.csentence(10, 40),
       endTime: Random.datetime(),
-      groupId: 101,
       id: 3,
       leaf: false,
       parent: 1,
-      priority: 0,
+      'priority|1': ['紧急', '一般', '宽松'],
+      processorId: 101,
       projectId: 101,
       startTime: Random.datetime(),
       'state|1': ['已创建', '进行中', '已完成'],
@@ -74,16 +110,17 @@ router.get('/:projectId', (req, res) => {
       title: Random.cname(),
       'type|1': ['需求', '任务'],
       userId: 101,
+      username: Random.cname(),
     },
     {
       deep: 3,
       description: Random.csentence(10, 40),
       endTime: Random.datetime(),
-      groupId: 101,
       id: 4,
       leaf: false,
       parent: 3,
-      priority: 1,
+      'priority|1': ['紧急', '一般', '宽松'],
+      processorId: 101,
       projectId: 101,
       startTime: Random.datetime(),
       'state|1': ['已创建', '进行中', '已完成'],
@@ -91,16 +128,17 @@ router.get('/:projectId', (req, res) => {
       title: Random.cname(),
       'type|1': ['需求', '任务'],
       userId: 101,
+      username: Random.cname(),
     },
     {
       deep: 3,
       description: Random.csentence(10, 40),
       endTime: Random.datetime(),
-      groupId: 101,
       id: 5,
       leaf: false,
       parent: 3,
-      priority: 2,
+      'priority|1': ['紧急', '一般', '宽松'],
+      processorId: 101,
       projectId: 101,
       startTime: Random.datetime(),
       'state|1': ['已创建', '进行中', '已完成'],
@@ -108,16 +146,17 @@ router.get('/:projectId', (req, res) => {
       title: Random.cname(),
       'type|1': ['需求', '任务'],
       userId: 101,
+      username: Random.cname(),
     },
     {
       deep: 4,
       description: Random.csentence(10, 40),
       endTime: Random.datetime(),
-      groupId: 101,
       id: 6,
       leaf: false,
       parent: 5,
-      priority: 0,
+      'priority|1': ['紧急', '一般', '宽松'],
+      processorId: 101,
       projectId: 101,
       startTime: Random.datetime(),
       'state|1': ['已创建', '进行中', '已完成'],
@@ -125,16 +164,17 @@ router.get('/:projectId', (req, res) => {
       title: Random.cname(),
       'type|1': ['需求', '任务'],
       userId: 101,
+      username: Random.cname(),
     },
     {
       deep: 4,
       description: Random.csentence(10, 40),
       endTime: Random.datetime(),
-      groupId: 101,
       id: 7,
       leaf: false,
       parent: 5,
-      priority: 0,
+      'priority|1': ['紧急', '一般', '宽松'],
+      processorId: 101,
       projectId: 101,
       startTime: Random.datetime(),
       'state|1': ['已创建', '进行中', '已完成'],
@@ -142,16 +182,17 @@ router.get('/:projectId', (req, res) => {
       title: Random.cname(),
       'type|1': ['需求', '任务'],
       userId: 101,
+      username: Random.cname(),
     },
     {
       deep: 4,
       description: Random.csentence(10, 40),
       endTime: Random.datetime(),
-      groupId: 101,
       id: 8,
       leaf: false,
       parent: 5,
-      priority: 0,
+      'priority|1': ['紧急', '一般', '宽松'],
+      processorId: 101,
       projectId: 101,
       startTime: Random.datetime(),
       'state|1': ['已创建', '进行中', '已完成'],
@@ -159,6 +200,7 @@ router.get('/:projectId', (req, res) => {
       title: Random.cname(),
       'type|1': ['需求', '任务'],
       userId: 101,
+      username: Random.cname(),
     },
     ]),
   ));

src/api/devcloud/tree.ts

@@ -2,12 +2,12 @@ import axios from '@/utils/axios';
 
 import { TREE_PREFIX } from './prefix';
 
-export const getAllTreeNodes = () => axios.get(`${TREE_PREFIX}/all`);
-
 export const insertTreeNode = (treenode: TreeNode) => axios.post(`${TREE_PREFIX}/node`, treenode);
 
 export const updateTreeNode = (treenode: TreeNode) => axios.put(`${TREE_PREFIX}/node`, treenode);
 
+export const getTasksByProjectId = (projectId: number) => axios.get(`${TREE_PREFIX}/node/type/task/${projectId}`);
+
 export const deleteTreeNode = (nodeId: number) => axios.delete(`${TREE_PREFIX}/node/${nodeId}`);
 
 export const addChildNode = (parentId: number) => axios.post(`${TREE_PREFIX}/subNode/${parentId}`);

src/views/Project/TaskList.vue

@@ -1,160 +1,120 @@
 <template>
-  <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>
-
+<div class="table-container">
+  <ElTable
+    :data="taskList"
+    :default-sort="{prop: 'id', order: 'descending'}"
+    @row-click="openDrawer"
+  >
+    <ElTableColumn
+      prop="id"
+      label="ID"
+      align="center"
+      width="60"
+    ></ElTableColumn>
+    <ElTableColumn
+      label="优先级"
+      align="center"
+      width="80"
+      :filters="[{ text: '紧急', value: '紧急' }, { text: '一般', value: '一般' }, { text: '宽松', value: '宽松' }]"
+      :filter-method="(value, row) => {
+        return row.priority === value;
+      }"
+      filter-placement="bottom-end"
+    >
+      <template #default="scope">
+        <template v-if="scope.row.priority === '紧急'">
+          <ElTag type="warning">{{scope.row.priority}}</ElTag>
+        </template>
+        <template v-else-if="scope.row.priority === '一般'">
+          <ElTag>{{scope.row.priority}}</ElTag>
+        </template>
+        <template v-else-if="scope.row.priority === '宽松'">
+          <ElTag type="success">{{scope.row.priority}}</ElTag>
+        </template>
+      </template>
+    </ElTableColumn>
+    <ElTableColumn
+      prop="title"
+      label="名称"
+      align="center"
+      width="180"
+    ></ElTableColumn>
+    <ElTableColumn
+      prop="processorName"
+      label="处理人"
+      align="center"
+      width="100"
+    ></ElTableColumn>
+    <ElTableColumn
+      prop="timeToTake"
+      label="预期耗时"
+      align="center"
+      width="100"
+    ></ElTableColumn>
+    <ElTableColumn
+      prop="startTime"
+      label="开始时间"
+      align="center"
+      width="180"
+    ></ElTableColumn>
+    <ElTableColumn
+      prop="endTime"
+      label="结束时间"
+      align="center"
+      width="180"
+    ></ElTableColumn>
+    <ElTableColumn
+      prop="state"
+      label="执行状态"
+      align="center"
+      width="100"
+    >
+      <template #default="scope">
+        <template v-if="scope.row.state === 'CREATED'||scope.row.state === '已创建'">
+          <ElTag type="primary">已创建</ElTag>
+        </template>
+        <template v-if="scope.row.state === 'PROCESSING'||scope.row.state === '进行中'">
+          <ElTag type="success">进行中</ElTag>
+        </template>
+        <template v-if="scope.row.state === 'FINISHED'||scope.row.state === '已完成'">
+          <ElTag type="info">已完成</ElTag>
+        </template>
+      </template>
+    </ElTableColumn>
+    <ElTableColumn
+      label="详情"
+      align="center"
+    >
+      <template #default="scope">
+        <ElButton
+          type="text"
+          size="small"
+          @click="openDrawer(scope.row)"
+        >编辑</ElButton>
+      </template>
+    </ElTableColumn>
+  </ElTable>
+</div>
 </template>
 
 <script>
-import MissionDetailsForm from '../../components/MissionDetailsForm.vue';
-import List from '../../components/List.vue';
+import { RequirementAPI } from '@/api';
 
 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,
+      taskList: [],
     };
   },
+  mounted() {
+    this.fetch();
+  },
   methods: {
-    /**
-     * @param filterObject 用于数据获取请求的参数对象
-     * @param currentPage  当前页数
-     */
-    getBugData(filterObject, currentPage) {
-      console.log('getBugData');
-    },
-    showMissionDetailsForm() {
-      console.log(this.$refs.missionDetailsForm);
-      this.$refs.missionDetailsForm.showForm();
+    async fetch() {
+      this.taskList = await RequirementAPI.getTasksByProjectId(this.$store.state.workspace.currentProjectId);
     },
-    handleCurrentChange(currentPage) {
-      this.getBugData({}, currentPage);
+    openDrawer(row) {
+      console.log(row);
     },
   },
 };