|
|
@@ -1,183 +1,168 @@
|
|
|
<template>
|
|
|
-<div class="curricula-manager">
|
|
|
- <div class="curricula-manager-header">
|
|
|
- <el-button>搜索</el-button>
|
|
|
- </div>
|
|
|
- <div class="curricula-manager-body">
|
|
|
- <el-button class="bgcolor" @click="taskstatus()">进行中</el-button>
|
|
|
- <el-button class="bgcolor" @click="taskstatus()">待开始</el-button>
|
|
|
- <el-button class="bgcolor" @click="taskstatus()">已结束</el-button>
|
|
|
- </div>
|
|
|
- <div class="curricula-manager-body1">
|
|
|
+ <div class="curricula-manager">
|
|
|
+ <div class="curricula-manager-header">
|
|
|
+ <el-button>搜索</el-button>
|
|
|
+ </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="curricula-manager-body1">
|
|
|
<div class="paixu">
|
|
|
<span>排序:</span>
|
|
|
-
|
|
|
- <div class="sortBtn" style="display: flex;">创建时间
|
|
|
- <i class="el-icon-sort"></i>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="sortBtn" style="display: flex;">编辑时间
|
|
|
- <i class="el-icon-sort"></i>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="sortBtn" style="display: flex;">开课时间
|
|
|
- <i class="el-icon-sort"></i>
|
|
|
+ <div class="sortBtn" v-for="item in time" :key="item.id">
|
|
|
+ <div>{{ item.createtime }}</div>
|
|
|
+ <div>{{ item.bianjitime }}</div>
|
|
|
+ <div>{{ item.onclasstime }}</div>
|
|
|
+ <i class="el-icon-sort"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <div class="curricula-manager-body2" style="margin-left: 850px;">
|
|
|
- <el-button class="bgcolor">新建课程</el-button>
|
|
|
+ <div class="curricula-manager-body2">
|
|
|
+ <el-button class="bgcolor">新建课程</el-button>
|
|
|
</div>
|
|
|
|
|
|
- <div class="div1" style="max-height: 700px; overflow: scroll;">
|
|
|
- <div v-for="item in obj" :key="item.id" class="xunhuan">
|
|
|
- <div class="curricula-manager-foot">
|
|
|
- <span>{{item.subject}}</span>
|
|
|
- <span>{{item.status}}</span>
|
|
|
- </div>
|
|
|
- <div class="curricula-manager-foot1" style="padding: 20px 0 0 0;">
|
|
|
- <span>{{item.createtime}}</span>
|
|
|
- <span style="margin-left: 10px;">{{item.onclasstime}}</span>
|
|
|
- <span style="margin-left: 10px;">{{item.teacher}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="div1">
|
|
|
+ <div v-for="(item, index) in obj" :key="index" class="xunhuan">
|
|
|
+ <div class="curricula-manager-foot">
|
|
|
+ <span>{{ item.subject }}</span>
|
|
|
+ <span>{{ item.status }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="curricula-manager-foot1">
|
|
|
+ <span>{{ item.createtime }}</span>
|
|
|
+ <span class="curricula-manager-foot2">{{ item.onclasstime }}</span>
|
|
|
+ <span class="curricula-manager-foot2">{{ item.teacher }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
-const obj={order:false}
|
|
|
-console.log(obj)
|
|
|
export default {
|
|
|
name: 'CurriculaManager',
|
|
|
- data(){
|
|
|
- return{
|
|
|
- ifShow:null,
|
|
|
- obj: [
|
|
|
- {
|
|
|
- subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
- createtime:'2021/3/28',
|
|
|
- onclasstime:'2021/4/25',
|
|
|
- teacher:'张一三',
|
|
|
- status:"进行中"
|
|
|
- },
|
|
|
- {
|
|
|
- subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
- createtime:'2021/3/12',
|
|
|
- onclasstime:'2021/4/23',
|
|
|
- teacher:'张一三',
|
|
|
- status:"进行中"
|
|
|
- },
|
|
|
- {
|
|
|
- subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
- createtime:'2021/3/22',
|
|
|
- onclasstime:'2021/4/17',
|
|
|
- teacher:'张一三',
|
|
|
- status:"进行中"
|
|
|
- },
|
|
|
- {
|
|
|
- subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
- createtime:'2021/3/2',
|
|
|
- onclasstime:'2021/4/28',
|
|
|
- teacher:'张一三',
|
|
|
- status:"报名中"
|
|
|
- },
|
|
|
- {
|
|
|
- subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
- createtime:'2021/3/6',
|
|
|
- onclasstime:'2021/4/1',
|
|
|
- teacher:'张一三',
|
|
|
- status:"报名中"
|
|
|
- },
|
|
|
- {
|
|
|
- subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
- createtime:'2021/3/19',
|
|
|
- onclasstime:'2021/4/9',
|
|
|
- teacher:'张一三',
|
|
|
- status:"报名中"
|
|
|
- },
|
|
|
- {
|
|
|
- subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
- createtime:'2021/3/16',
|
|
|
- onclasstime:'2021/4/25',
|
|
|
- teacher:'张一三',
|
|
|
- status:"报名中"
|
|
|
- },
|
|
|
- {
|
|
|
- subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
- createtime:'2021/3/21',
|
|
|
- onclasstime:'2021/4/11',
|
|
|
- teacher:'张一三',
|
|
|
- status:"已结束"
|
|
|
- },
|
|
|
- ],
|
|
|
- sortType: null, // 数组对象中的哪一个属性进行排序
|
|
|
- order: false, // 升序还是降序
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ time: [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ createtime: '创建时间',
|
|
|
+ sortType: 'createtime', // 数组对象中的哪一个属性进行排序
|
|
|
+ order: false, //升序还是降序
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ bianjitime: '编辑时间',
|
|
|
+ sortType: 'bianjitime',
|
|
|
+ order: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ onclasstime: '开课时间',
|
|
|
+ sortType: 'onclasstime',
|
|
|
+ order: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ completion: [
|
|
|
+ {
|
|
|
+ status: '1',
|
|
|
+ val: '进行中',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ status: '2',
|
|
|
+ val: '报名中',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ status: '3',
|
|
|
+ val: '已结束',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ obj: [
|
|
|
+ {
|
|
|
+ subject: '中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime: '2021/3/28',
|
|
|
+ onclasstime: '2021/4/25',
|
|
|
+ teacher: '张一三',
|
|
|
+ status: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject: '中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime: '2021/3/12',
|
|
|
+ onclasstime: '2021/4/23',
|
|
|
+ teacher: '张一三',
|
|
|
+ status: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject: '中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime: '2021/3/22',
|
|
|
+ onclasstime: '2021/4/17',
|
|
|
+ teacher: '张一三',
|
|
|
+ status: '2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject: '中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime: '2021/3/2',
|
|
|
+ onclasstime: '2021/4/28',
|
|
|
+ teacher: '张一三',
|
|
|
+ status: '3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject: '中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime: '2021/3/6',
|
|
|
+ onclasstime: '2021/4/1',
|
|
|
+ teacher: '张一三',
|
|
|
+ status: '2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject: '中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime: '2021/3/19',
|
|
|
+ onclasstime: '2021/4/9',
|
|
|
+ teacher: '张一三',
|
|
|
+ status: '2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject: '中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime: '2021/3/16',
|
|
|
+ onclasstime: '2021/4/25',
|
|
|
+ teacher: '张一三',
|
|
|
+ status: '3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject: '中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime: '2021/3/21',
|
|
|
+ onclasstime: '2021/4/11',
|
|
|
+ teacher: '张一三',
|
|
|
+ status: '1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ taskstatus(status) {
|
|
|
+ console.log(123);
|
|
|
+ },
|
|
|
},
|
|
|
- // mounted() {
|
|
|
- // jinxing().then(response => {
|
|
|
- // console.log(456)
|
|
|
- // });
|
|
|
- // },
|
|
|
- methods:{
|
|
|
- taskstatus() {
|
|
|
- console.log(123)
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // sort(type) { // 排序
|
|
|
- // this.order = !this.order; // 更改为 升序或降序
|
|
|
- // this.sortType = type;
|
|
|
- // this.obj.sort(this.compare(type));
|
|
|
- // },
|
|
|
- // 调用下面 compare 方法 并传值
|
|
|
- // compare(attr) { // 排序方法
|
|
|
- // let that = this;
|
|
|
- // return function(a,b){
|
|
|
- // let val1 = a[attr];
|
|
|
- // let val2 = b[attr];
|
|
|
-
|
|
|
- // if(that.order){
|
|
|
- // if(that.sortType == 'createtime'){ // 如果是时间就转换成时间格式
|
|
|
- // return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));
|
|
|
- // }else{
|
|
|
- // return val2 - val1;
|
|
|
- // }
|
|
|
-
|
|
|
- // }else{
|
|
|
- // if(that.sortType == 'createtime'){
|
|
|
- // return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));
|
|
|
- // }else{
|
|
|
- // return val1 - val2;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
//
|
|
|
-::-webkit-scrollbar {
|
|
|
- //隐藏滚轮
|
|
|
- display: none;
|
|
|
-}
|
|
|
.paixu {
|
|
|
display: flex;
|
|
|
padding-left: 10px;
|
|
|
margin-left: -30px;
|
|
|
margin-bottom: -35px;
|
|
|
}
|
|
|
+.sortBtn {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
.xunhuan {
|
|
|
- margin: 20px 0 20px 150px;
|
|
|
+ margin: 0 0 20px 150px;
|
|
|
width: 800px;
|
|
|
height: 100px;
|
|
|
background-color: #eee;
|
|
|
@@ -193,6 +178,7 @@ export default {
|
|
|
border: 1px solid #c4c4c4;
|
|
|
border-radius: 0;
|
|
|
color: #0c0c0c;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
.curricula-manager-header .el-button {
|
|
|
width: 300px;
|
|
|
@@ -203,7 +189,7 @@ export default {
|
|
|
display: flex;
|
|
|
padding-left: 0;
|
|
|
margin-top: 50px;
|
|
|
- margin-left: 380px;
|
|
|
+ margin-left: 385px;
|
|
|
}
|
|
|
.el-button + .el-button {
|
|
|
margin-left: 0;
|
|
|
@@ -213,12 +199,16 @@ export default {
|
|
|
margin-left: 150px;
|
|
|
margin-right: 500px;
|
|
|
}
|
|
|
-.div1 {
|
|
|
- overflow: auto;
|
|
|
- height: 1000px;
|
|
|
+.curricula-manager-body2 {
|
|
|
+ margin-left: 850px;
|
|
|
}
|
|
|
.curricula-manager-body1 span {
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
+.curricula-manager-foot1 {
|
|
|
+ padding: 20px 0 0 0;
|
|
|
+}
|
|
|
+.curricula-manager-foot2 {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
</style>
|
|
|
-
|
赵仕锟