modified: src/views/teacher/main/CurriculaManager.vue

src/views/teacher/main/CurriculaManager.vue

@@ -1,39 +1,42 @@
 <template>
-  <div>
+  <div class="curricula-manager">
     <div class="curricula-manager-header">
-      <el-button>搜索</el-button>
+      <el-input v-model="input" placeholder="请输入" suffix-icon="el-icon-search"> </el-input>
     </div>
     <div class="curricula-manager-body">
-      <el-button
-        v-for="item in completion"
-        :key="item.status"
-        class="bgcolor"
-        @click="taskstatus(item.status)"
-        >{{ item.val }}</el-button
-      >
-    </div>
-    <div class="sort">
-      <span>排序:</span>
-      <div class="sort-body" v-for="item in time" :key="item.id">
-        {{ item.createTime }}
-        {{ item.editTime }}
-        {{ item.onclassTime }}
-        <i class="el-icon-sort"></i>
+      <div class="curricula-manager-body1">
+        <el-button
+          @click="click(item.status, index)"
+          :class="background == index ? 'changeColor' : 'bgcolor'"
+          v-for="(item, index) in statusList"
+          :key="index"
+        >
+          {{ item.val }}
+        </el-button>
       </div>
-    </div>
-    <div class="curricula-manager-body_">
-      <el-button class="bgcolor">新建课程</el-button>
-    </div>
-    <div>
-      <div v-for="(item, index) in obj" :key="index" class="circulation">
-        <div class="curricula-manager-foot">
-          <span>{{ item.subject }}</span>
-          <span>{{ item.status }}</span>
+      <div class="sort">
+        <span>排序:</span>
+        <div class="sort-body" v-for="item in sortList" :key="item.id">
+          {{ item.name }}
+          <i class="el-icon-sort"></i>
         </div>
-        <div class="_curricula-manager-foot">
-          <span>{{ item.createTime }}</span>
-          <span class="curricula-manager-foot_">{{ item.onclassTime }}</span>
-          <span class="curricula-manager-foot_">授课教师：{{ item.teacher }}</span>
+      </div>
+      <div class="curricula-manager-body2">
+        <el-button class="bgcolor" @click="add()">新建课程</el-button>
+      </div>
+    </div>
+    <div class="curricula-manager-foot">
+      <div v-for="(item, inx) in taskList" :key="inx">
+        <div v-if="item.status == isstatus" class="circulation">
+          <div class="curricula-manager-foot1">
+            <span>{{ item.subject }}</span>
+            <span>{{ item.val }}</span>
+          </div>
+          <div class="curricula-manager-foot2">
+            <span>{{ item.createTime }}</span>
+            <span class="curricula-manager-foot3">{{ item.onclassTime }}</span>
+            <span class="curricula-manager-foot3">授课教师：{{ item.teacher }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -45,164 +48,189 @@ export default {
   name: 'CurriculaManager',
   data() {
     return {
-      time: [
+      input: '',
+      background: 0,
+      isstatus: 1,
+      sortList: [
         {
           id: '1',
-          createTime: '创建时间',
+          name: '创建时间',
+          sortType: 'createTime', // 数组对象中的哪一个属性进行排序
+          order: false //升序还是降序
         },
         {
           id: '2',
-          editTime: '编辑时间',
-        },
-        {
-          id: '3',
-          onclassTime: '开课时间',
-        },
-      ],
-      sort: [
-        {
-          sortType: 'createtime', // 数组对象中的哪一个属性进行排序
-          order: false, //升序还是降序
-        },
-        {
+          name: '编辑时间',
           sortType: 'editTime',
-          order: false,
+          order: false
         },
         {
-          sortType: 'onclasstime',
-          order: false,
-        },
+          id: '3',
+          name: '开课时间',
+          sortType: 'onclassTime',
+          order: false
+        }
       ],
-      completion: [
+      statusList: [
         {
           status: '1',
-          val: '进行中',
+          val: '进行中'
         },
         {
           status: '2',
-          val: '待开始',
+          val: '待开始'
         },
         {
           status: '3',
-          val: '已结束',
-        },
+          val: '已结束'
+        }
       ],
-      obj: [
+      taskList: [
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createTime: '2021/3/28',
           onclassTime: '2021/4/25',
           teacher: '张一三',
-          status: '1',
+          val: '进行中',
+          status: '1'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createTime: '2021/3/12',
           onclassTime: '2021/4/23',
           teacher: '张一三',
-          status: '1',
+          val: '进行中',
+          status: '1'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createTime: '2021/3/22',
           onclassTime: '2021/4/17',
           teacher: '张一三',
-          status: '2',
+          val: '已结束',
+          status: '3'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createTime: '2021/3/2',
           onclassTime: '2021/4/28',
           teacher: '张一三',
-          status: '3',
+          val: '待开始',
+          status: '2'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createTime: '2021/3/6',
           onclassTime: '2021/4/1',
           teacher: '张一三',
-          status: '2',
+          val: '进行中',
+          status: '1'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createTime: '2021/3/19',
           onclassTime: '2021/4/9',
           teacher: '张一三',
-          status: '2',
+          val: '已结束',
+          status: '3'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createTime: '2021/3/16',
           onclassTime: '2021/4/25',
           teacher: '张一三',
-          status: '3',
+          val: '待开始',
+          status: '2'
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
           createTime: '2021/3/21',
           onclassTime: '2021/4/11',
           teacher: '张一三',
-          status: '1',
-        },
-      ],
+          val: '进行中',
+          status: '1'
+        }
+      ]
     };
   },
   methods: {
-    taskstatus(status) {
+    click(status, index) {
+      this.isstatus = status;
+      this.background = index;
       console.log(status);
+      console.log(index);
     },
-  },
+    add() {
+      console.log(123);
+    }
+  }
 };
 </script>
 
-<style>
-.curricula-manager-header .el-button {
-  width: 300px;
-  margin-top: 50px;
-  margin-left: 360px;
-}
-.curricula-manager-body .el-button {
-  width: 120px;
-  margin-top: 50px;
-  margin-left: 330px;
-}
-.bgcolor {
-  background-color: #c4c4c4;
-  border: 1px solid #c4c4c4;
-  border-radius: 0;
-  color: #0c0c0c;
-  margin-bottom: 20px;
-}
-.el-button + .el-button {
-  margin-left: 0;
-}
-.sort {
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: -35px;
-}
-.sort-body {
-  margin-left: 20px;
-}
-.curricula-manager-body_ {
-  margin-top: 5px;
-  margin-left: 930px;
-}
-.curricula-manager-foot {
-  display: flex;
-  justify-content: space-between;
-}
-._curricula-manager-foot {
-  padding: 20px 0 0 0;
-}
-.curricula-manager-foot_ {
-  margin-left: 20px;
-}
-.circulation {
-  margin: 0 0 20px 0;
-  width: 1030px;
-  height: 100px;
-  background-color: #eee;
-  padding: 20px 20px 0 20px;
+<style lang="scss">
+.curricula-manager {
+  .changeColor {
+    background: #e5e5e5;
+    border: 1px solid #e5e5e5;
+    border-radius: 0;
+    color: #0c0c0c;
+    margin-bottom: 20px;
+  }
+  .curricula-manager-header .el-input {
+    width: 365px;
+    margin-top: 50px;
+    margin-left: 359px;
+  }
+  .curricula-manager-body1 .el-button {
+    width: 145px;
+    height: 75px;
+    font-size: 20px;
+    margin-top: 50px;
+    margin-left: 325px;
+  }
+  .bgcolor {
+    background: #c4c4c4;
+    border: 1px solid #c4c4c4;
+    border-radius: 0;
+    color: #0c0c0c;
+    margin-bottom: 20px;
+  }
+  .el-button + .el-button {
+    margin-left: 0;
+  }
+  .sort {
+    display: flex;
+    margin-top: 30px;
+    margin-bottom: -35px;
+    .sort-body {
+      margin-left: 20px;
+    }
+  }
+  .curricula-manager-body {
+    .curricula-manager-body2 {
+      margin-top: 5px;
+      margin-left: 930px;
+    }
+  }
+
+  .curricula-manager-foot {
+    .circulation {
+      margin: 0 0 20px 0;
+      width: 1030px;
+      height: 100px;
+      background-color: #eee;
+      padding: 20px 20px 0 20px;
+    }
+    .curricula-manager-foot1 {
+      display: flex;
+      justify-content: space-between;
+    }
+    .curricula-manager-foot2 {
+      padding: 20px 0 0 0;
+    }
+    .curricula-manager-foot3 {
+      margin-left: 20px;
+    }
+  }
 }
 </style>