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

<template>
  project-task-list
  <div class="taskListContainer">
    <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">

<!--     组件，然后 当展示的时候，将筛选的选项传入-->
<!--      buglist和任务list复用-->
<!--      点击具体项的时候，任务的抽屉也是一个组件-->
    </div>
  </div>

</template>

<script>
export default {
  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',

    };
  },
};
</script>

<style scoped>
.taskListContainer{
  margin: 30px 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;
}
</style>