refactor: 移除无用的组件

src/components/List.vue

@@ -1,187 +0,0 @@
-<template>
-  <div style="width: 100%">
-    <div>
-      <el-button type="primary"  v-if="!isShowCheckbox" size="small" @click="showCheckbox">批量操作</el-button>
-      <span  v-if="isShowCheckbox">
-      <el-button type="info" size="small" @click="isShowCheckbox=false">取消操作</el-button>
-      <el-button type="danger"  size="small" @click="handleMultipleDelete">批量删除</el-button>
-      <el-select
-        @change="handleMultipleStatusChange"
-        v-model="status"
-        size='medium'
-        placeholder="批量修改状态"
-        style="margin-left: 30px">
-        <el-option
-          v-for="item in statusOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-select
-        @change="handleMultipleAssignmentChange"
-        v-model="assignment"
-        size='medium'
-        placeholder="批量修改负责人"
-        style="margin-left: 30px">
-        <el-option
-          v-for="item in assignmentOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      </span>
-    </div>
-    <el-table
-      :data="listData"
-      @selection-change="handleSelectionChange"
-      style="width: 100%">
-      <el-table-column
-        v-if="isShowCheckbox"
-        type="selection"
-        width="60">
-      </el-table-column>
-      <el-table-column
-        prop="projectCode"
-        label="编号"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="title"
-        min-width="180"
-        label="标题">
-      </el-table-column>
-      <el-table-column
-        prop="assignment"
-        label="优先级"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="status"
-        label="状态"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="assignment"
-        label="计划时间"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="assignment"
-        label="创建时间"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="assignment"
-        label="经办人"
-        width="180">
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      style="display: flex;flex-direction: row;justify-content: center;margin-top: 20px"
-      background
-      @current-change="handleCurrentChange"
-      :page-size="pageSize"
-      layout="prev, pager, next"
-      :total="total">
-    </el-pagination>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'List',
-  props: {
-    listData: Array, // 展示的列表数据
-    total: Number, // 总页数
-    statusOptions: {
-      type: Array,
-      default() {
-        return [
-          {
-            label: '未分配',
-            value: 1,
-          },
-          {
-            label: '未完成',
-            value: 2,
-          },
-          {
-            label: '已完成',
-            value: 3,
-          },
-          {
-            label: '已关闭',
-            value: 4,
-          }];
-      },
-    }, // 状态选项
-    assignmentOptions: {
-      type: Array,
-      default() {
-        return [
-          {
-            label: '组员A',
-            value: 1,
-          },
-          {
-            label: '组员B',
-            value: 2,
-          },
-          {
-            label: '组员C',
-            value: 3,
-          },
-          {
-            label: '组员D',
-            value: 4,
-          }];
-      },
-    }, // 分配人选项
-  },
-  data() {
-    return {
-      isShowCheckbox: false,
-      pageSize: 10,
-      selectedId: [],
-      status: null,
-      assignment: null,
-    };
-  },
-  methods: {
-    showCheckbox() {
-      this.isShowCheckbox = true;
-    },
-    handleSelectionChange(val) {
-      console.warn(val);
-      const tempArray = [];
-      val.forEach((item) => {
-        tempArray.push(item.projectCode);
-      });
-      this.selectedId = tempArray;
-    },
-    // 分页切换事件
-    handleCurrentChange(currentPage) {
-      console.log(currentPage);
-      this.$emit('current-change', currentPage);
-    },
-    // 批量删除事件
-    handleMultipleDelete() {
-      console.warn('deleteMultiply');
-      this.$emit('multiple-delete', this.selectedId);
-    },
-    // 批量修改状态事件
-    handleMultipleStatusChange() {
-      this.$emit('multiple-status-change', this.selectedId);
-    },
-    // 批量修改分配人事件
-    handleMultipleAssignmentChange() {
-      this.$emit('multiple-assignment-change', this.selectedId);
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>

src/components/ListFilter.vue

@@ -1,121 +0,0 @@
-<template>
-  <div class="list-filter-container">
-    <el-select
-      class="select"
-      size="small"
-      v-model="assignment"
-      @change="handleFilterChange">
-      <el-option
-        v-for="item in assignmentOptions"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value">
-      </el-option>
-    </el-select>
-    <el-select
-      class="select"
-      size="small"
-      v-model="status"
-      @change="handleFilterChange"
-      style="margin-left: 10px">
-      <el-option
-        v-for="item in statusOptions"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value">
-      </el-option>
-    </el-select>
-    <el-select
-      class="select"
-      size="small"
-      v-model="sort"
-      style="margin-left: auto"
-      @change="handleFilterChange">
-      <el-option
-        v-for="item in sortOptions"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value">
-      </el-option>
-    </el-select>
-  </div>
-
-</template>
-
-<script>
-export default {
-  name: 'ListFilter',
-  props: {
-    assignmentOptions: {
-      type: Array,
-      default() {
-        return [{
-          value: 0,
-          label: '全部',
-        }, {
-          value: 1,
-          label: '分配到我',
-        }];
-      },
-    },
-    statusOptions: {
-      type: Array,
-      default() {
-        return [{
-          value: 0,
-          label: '全部状态',
-        }, {
-          value: 1,
-          label: '已完成',
-        }, {
-          value: 2,
-          label: '进行中',
-        }];
-      },
-    },
-    sortOptions: {
-      type: Array,
-      default() {
-        return [{
-          value: 0,
-          label: '默认排序',
-        }, {
-          value: 1,
-          label: '创建时间',
-        }, {
-          value: 2,
-          label: '优先级',
-        }];
-      },
-    },
-  },
-  data() {
-    return {
-      assignment: 0,
-      status: 0,
-      sort: 0,
-    };
-  },
-  methods: {
-    handleFilterChange() {
-      this.$emit('filter-change', {
-        assignment: this.assignment,
-        status: this.status,
-        sort: this.sort,
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.list-filter-container{
-  width: 100%;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-.select{
-  width: 130px;
-}
-</style>

src/components/MissionDetailsForm.vue

@@ -1,83 +0,0 @@
-<template>
-<right-form ref="rightForm">
-  <div class="missionDetialscontainer">
-    <div class="missionBaseInfo">
-      <div class="missionBaseLine1">
-        {{taskInfo.creator+" 创建于"+taskInfo.createTime+" "+taskInfo.project}}
-      </div>
-      <div class="missionBaseLine2">
-        {{"#"+taskInfo.taskId+"  "+taskInfo.taskName}}
-      </div>
-    </div>
-    <el-tabs class="tablePane" v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="描述信息" name="taskdDescriptionInfo">
-        任务描述信息
-      </el-tab-pane>
-      <el-tab-pane label="代码提交记录" name="commitRecord">代码提交记录</el-tab-pane>
-    </el-tabs>
-  </div>
-</right-form>
-</template>
-
-<script>
-import RightForm from './RightForm.vue';
-
-export default {
-  components: { RightForm },
-  name: 'MissionDetailsForm',
-  data() {
-    return {
-      activeName: 'second',
-      taskInfo: {
-        taskId: 9973461,
-        creator: 'wkx',
-        createTime: '2020/01/23 15:15:37 GMT+8:00',
-        project: 'testPro',
-        taskName: '软工三需求迭代一',
-        taskType: '任务类型一',
-        taskPriority: '一般',
-        taskStatus: '新建',
-        taskExecutor: 'wkx',
-        expectedToTakeTime: '5小时',
-        startTime: '2020/01/24 15:15:37 GMT+8:00',
-        endTime: '',
-        taskDescription: '这个是任务的描述，喜欢写就写好了',
-        GitRecord: {
-          record1: '生成好的git信息1',
-          record2: '生成好的git信息2',
-          record3: '生成好的git信息3',
-        },
-        LeafTaskNode: {
-          leafTask1Id: 9973461,
-          leafTask2Id: 9973461,
-          leafTask3Id: 9973461,
-        },
-      },
-    };
-  },
-  methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
-    },
-    showForm() {
-      this.$refs.rightForm.showForm();
-    },
-  },
-};
-</script>
-
-<style scoped>
-.missionDetialscontainer{
-  margin: 0 40px 0 40px;
-  .missionBaseInfo{
-    .missionBaseLine1{
-      color: #ecf0f1;
-      font-size: 14px;
-    }
-    .missionBaseLine1{
-      color: #2C3E50;
-      font-size: 24px;
-    }
-  }
-}
-</style>

src/components/RightForm.vue

@@ -1,68 +0,0 @@
-<template>
-  <transition name="translation">
-  <div class="right-bar-container" v-if="isFormShow">
-    <div class="form-util">
-      <div class="close" @click="isFormShow=false"></div>
-    </div>
-    <div>
-      <slot></slot>
-    </div>
-  </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'RightForm',
-  data() {
-    return {
-      isFormShow: false,
-    };
-  },
-  methods: {
-    // 父组件通过ref的方式调用该方法显示表单
-    showForm() {
-      this.isFormShow = true;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.right-bar-container{
-  position: fixed;
-  right: 0px;
-  top: 0px;
-  height: 100vh;
-  width: 800px;
-  box-shadow: 0 0 5px #BDC3C7;
-  background: #FFFFFF;
-  z-index: 101;
-}
-.translation-enter-active,.translation-leave-active {
-  transition: all 0.3s ease-out;
-}
-.translation-enter-from,
-.translation-leave-to {
-  transform: translateX(800px);
-}
-.form-util{
-  width: 80px;
-  margin-left: auto;
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.form-util .close{
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-image: url("../assets/icon/close.svg");
-}
-
-</style>