feat: 完成buglist表格部分

mock/routers/buglist.js

@@ -22,7 +22,7 @@ router.post('/finish', (req, res) => {
 router.get('/list', (req, res) => {
   res.json(wrapper(Mock.mock(
     {
-      'data|5-10': {
+      'data|5-10': [{
         'commits|0-10': [
           {
             'gitlabUsername|1': ['hks', 'wph', 'zxr', 'cyt'],
@@ -47,7 +47,9 @@ router.get('/list', (req, res) => {
         },
         expectedTimeCost: 140,
         'id|+5': 1001,
-        priority: ['紧急', '一般', '宽松'],
+        'priority|1': ['紧急', '一般', '宽松'],
+        processorId: 0,
+        'processorName|1': ['hks', 'wph', 'zxr', 'cyt'],
         startTime: {
           date: 0,
           day: 0,
@@ -62,7 +64,7 @@ router.get('/list', (req, res) => {
         },
         'state|1': ['CREATED', 'PROCESSING', 'FINISHED'],
         title: 'bug titleeee',
-      },
+      }],
     },
   ).data));
 });

src/api/index.ts

@@ -1,6 +1,7 @@
 import * as UserAPI from './devcloud/user';
 import * as ProjectAPI from './devcloud/project';
 import * as RequirementAPI from './devcloud/tree';
+import * as BugListAPI from './devcloud/buglist';
 import * as PipelineAPI from './devcloud/pipeline';
 import * as PortalAPI from './portal';
 
@@ -8,6 +9,7 @@ export {
   UserAPI,
   ProjectAPI,
   RequirementAPI,
+  BugListAPI,
   PipelineAPI,
   PortalAPI,
 };

src/views/Project/BugList.vue

@@ -1,97 +1,129 @@
 <template>
-  <div class="content">
-    <button @click="showRightForm">from test</button>
-    <ListFilter></ListFilter>
-    <List
-      style="margin-top: 10px"
-      :listData="bugData"
-      :total="300"
-      :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange">
-    </List>
-    <RightForm ref="rightForm">
-    </RightForm>
-  </div>
+<div class="table-container">
+  <ElTable
+    :data="bugList"
+    :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="expectedTimeCost"
+      label="预期耗时"
+      align="center"
+      width="100"
+    ></ElTableColumn>
+    <ElTableColumn
+      label="开始时间"
+      align="center"
+      width="180"
+      :formatter="(row) => timeFormatter(row, 'startTime')"
+    ></ElTableColumn>
+    <ElTableColumn
+      label="结束时间"
+      align="center"
+      width="180"
+      :formatter="(row) => timeFormatter(row, 'endTime')"
+    ></ElTableColumn>
+    <ElTableColumn
+      prop="state"
+      label="执行状态"
+      align="center"
+      width="100"
+    >
+      <template #default="scope">
+        <template v-if="scope.row.state === 'CREATED'">
+          <ElTag type="primary">已创建</ElTag>
+        </template>
+        <template v-if="scope.row.state === 'PROCESSING'">
+          <ElTag type="success">进行中</ElTag>
+        </template>
+        <template v-if="scope.row.state === 'FINISHED'">
+          <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 RightForm from '../../components/RightForm.vue';
-import List from '../../components/List.vue';
-import ListFilter from '../../components/ListFilter.vue';
+import { BugListAPI } from '@/api';
 
 export default {
-  components: { ListFilter, 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,
+      bugList: [],
     };
   },
+  mounted() {
+    this.fetch();
+  },
   methods: {
-    /**
-     * @param filterObject 用于数据获取请求的参数对象
-     * @param currentPage  当前页数
-     */
-    getBugData(filterObject, currentPage) {
-      console.log('getBugData');
-    },
-    showRightForm() {
-      console.log(this.$refs.rightForm);
-      this.$refs.rightForm.showForm();
+    timeFormatter: (row, property) => `${row[property].year}/${row[property].month}/${row[property].day} `
+            + `${row[property].hours}:${row[property].minutes}:${row[property].seconds}`,
+    async fetch() {
+      this.bugList = await BugListAPI.getBugListByProjectId(this.$store.state.workspace.currentProjectId);
     },
-    handleCurrentChange(currentPage) {
-      this.getBugData({}, currentPage);
+    openDrawer(row) {
+      console.log(row);
     },
   },
 };
 </script>
 
 <style scoped>
+.table-container {
+  margin: 50px 100px;
+}
 </style>