feat：完成基础的选择栏

src/element-plus.ts

@@ -2,7 +2,7 @@ import {
   ElCard,
   ElCarousel,
   ElCarouselItem,
-  ElContainer, ElDivider, ElHeader, ElMain, ElRow,
+  ElContainer, ElDivider, ElHeader, ElMain, ElRow, ElButton, ElSelect, ElOption,
 } from 'element-plus';
 
 export const Components = [
@@ -14,6 +14,9 @@ export const Components = [
   ElCarouselItem,
   ElDivider,
   ElCard,
+  ElButton,
+  ElSelect,
+  ElOption,
 ];
 
 export const Plugins = [];

src/views/Project/TaskList.vue

@@ -1,13 +1,115 @@
 <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>
-
+<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>