seecoder-devcloud-frontend/src/views/Project/TaskList.vue

<template>
  <div class="table-container" id="taskListTable" style="padding: 5px">
    <GeneralTable
      :data="taskList"
      :loading="loading"
      @row-click="openDrawer"
    />
  </div>
  <RequriementDrawer
    ref="drawer"
    v-bind="requirementInDrawer"
    :commits="commits"
    @requirement-update="fetch"
    :showSons="false"
  ></RequriementDrawer>
</template>

<script>
import { RequirementAPI } from '@/api';

import GeneralTable from '@/components/GeneralTable.vue';
import RequriementDrawer from '@/components/RequirementDrawer.vue';

export default {
  components: { GeneralTable, RequriementDrawer },
  data() {
    return {
      loading: false,
      taskList: [],
      requirementInDrawer: {},
      stateOptions: [{ value: '已完成' }, { value: '进行中' }, { value: '已创建' }],
      priorityOptions: [{ value: 0, label: '紧急' }, { value: 1, label: '宽松' }, { value: 2, label: '一般' }],
      commits: [],
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    async fetch() {
      this.loading = true;
      this.taskList = await RequirementAPI.getTasksByProjectId(this.$store.state.workspace.currentProjectId);
      this.loading = false;
    },
    async openDrawer(row) {
      this.requirementInDrawer = row;
      this.commits = await RequirementAPI.getTaskRecordCommitHistory(row.id);
      this.$refs.drawer.show();
    },
  },
};
</script>

<style scoped>
.table-container {
  margin: 50px 100px;
}
</style>