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

<template>
<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 { RequirementAPI } from '@/api';

export default {
  data() {
    return {
      taskList: [],
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    async fetch() {
      this.taskList = await RequirementAPI.getTasksByProjectId(this.$store.state.workspace.currentProjectId);
    },
    openDrawer(row) {
      console.log(row);
    },
  },
};
</script>

<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>