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

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

</template>

<script>
import MissionDetailsForm from '../../components/MissionDetailsForm.vue';
import List from '../../components/List.vue';

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,
    };
  },
  methods: {
    /**
     * @param filterObject 用于数据获取请求的参数对象
     * @param currentPage  当前页数
     */
    getBugData(filterObject, currentPage) {
      console.log('getBugData');
    },
    showMissionDetailsForm() {
      console.log(this.$refs.missionDetailsForm);
      this.$refs.missionDetailsForm.showForm();
    },
    handleCurrentChange(currentPage) {
      this.getBugData({}, currentPage);
    },
  },
};
</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>