Commit 1a9ee2b4 authored by zhengke's avatar zhengke

增加页面

parent 562b6420
......@@ -23,3 +23,29 @@ export function GetClassMonthStatistics(data) {
data
})
}
/**
* 获取我的课表分页列表
* @param {JSON参数} data
*/
export function GetClassPlanStatistical(data) {
return request({
url: '/TeacherClass/GetClassPlanStatistical',
method: 'post',
data
})
}
/**
* 获取我的课表列表数据
* @param {JSON参数} data
*/
export function GetClassPlanStatisticalPage(data) {
return request({
url: '/TeacherClass/GetClassPlanStatisticalPage',
method: 'post',
data
})
}
<style>
.MainPlan .ClassPlanTable {
width: 100%;
color: #000;
}
.ClassPlanTable th,
.ClassPlanTable td {
border: 1px solid #d1d1d1;
height: 40px;
}
.MainPlan td {
vertical-align: top;
padding: 5px;
width: 14%;
}
.MainPlan {
margin: 20px;
}
.MainPlan .plan_ClassDate {
height: 30px;
line-height: 30px;
font-size: 15px;
font-weight: bold;
}
.MainPlan .plantHead th {
border-bottom: 0;
}
.MainPlan .planTabDiv {
max-height: calc(100vh - 235px);
height: calc(100vh - 235px);
overflow-y: overlay;
/* margin-right: -3px; */
}
.planTabDiv::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: #F5F5F5;
}
/*!*定义滚动条轨道 内阴影+圆角*!*/
.planTabDiv::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*!*定义滑块 内阴影+圆角*!*/
.planTabDiv::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-color: #0ae;
}
.MainPlan .el-collapse-item__header {
font-size: 12px;
line-height: normal;
color: #000;
}
.MainPlan .plan_Inner {
font-size: 12px;
color: #000;
display: flex;
margin-top: 5px;
}
.MainPlan .plan_LeftTitle {
width: 60px;
text-align: right;
flex-shrink: 0
}
.MainPlan .plan_RightInner {
width: 100%;
}
.MainPlan .commonTimeStr {
display: inline-block;
color: #fff;
padding: 1px 3px;
border-radius: 5px;
}
.MainPlan .greenTime {
background-color: green;
}
.MainPlan .blueTime {
background-color: blue;
}
.MainPlan .orangeTime {
background-color: orange;
}
.MainPlan .plan_Tdiv {
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
</style>
<template>
<div>
<table class="ClassPlanTable plantHead" style="border-collapse:collapse;width:100%;margin:15px 0 0 0;">
<thead>
<tr>
<th colspan="16">甲鹤校区教室使用情况</th>
</tr>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
</thead>
</table>
<div class="planTabDiv" ref="planTabDiv">
<table class="ClassPlanTable" ref="PlanTable" style="border-collapse:collapse;margin-top:0;">
<tbody>
<tr v-for="(item,index) in dataList.fridayList" :key="index">
<td>
<div class="plan_ClassDate">{{dataList.mondayList[index].ClassDate}}</div>
<mateitem v-if="dataList.mondayList&&dataList.mondayList[index].SubList"
:dayData="dataList.mondayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{dataList.tuesdayList[index].ClassDate}}</div>
<mateitem v-if="dataList.tuesdayList&&dataList.tuesdayList[index].SubList"
:dayData="dataList.tuesdayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{dataList.wednesdayList[index].ClassDate}}</div>
<mateitem v-if="dataList.wednesdayList&&dataList.wednesdayList[index].SubList"
:dayData="dataList.wednesdayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{dataList.thursdayList[index].ClassDate}}</div>
<mateitem v-if="dataList.thursdayList&&dataList.thursdayList[index].SubList"
:dayData="dataList.thursdayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{dataList.fridayList[index].ClassDate}}</div>
<mateitem v-if="dataList.fridayList&&dataList.fridayList[index].SubList"
:dayData="dataList.fridayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{dataList.saturdayList[index].ClassDate}}</div>
<mateitem v-if="dataList.saturdayList&&dataList.saturdayList[index].SubList"
:dayData="dataList.saturdayList[index]"></mateitem>
</td>
<td>
<div class="plan_ClassDate">{{dataList.sundayList[index].ClassDate}}</div>
<mateitem v-if="dataList.sundayList&&dataList.sundayList[index].SubList"
:dayData="dataList.sundayList[index]"></mateitem>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import mateitem from '../components/mateitem';
export default {
props: {
dataList: {
type: Object,
default: null
},
},
components: {
mateitem,
},
data() {
return {
msg: {
StartTime: "",
EndTime: '',
TeacherId: 0,
ClassRoomId: 0
},
};
},
created() {
},
mounted() {},
methods: {
//获取进度条
getProgress(num, total) {
if (num == 0 || total == 0) {
return 0;
}
return (Math.round(num / total * 100) / 100.00);
}
}
};
</script>
<style>
</style>
<template>
<div>
<el-collapse v-if="dayData&&dayData.SubList&&dayData.SubList.length>0">
<el-collapse-item v-for="(subItem,subIndex) in dayData.SubList" :key="subIndex" :name="subIndex">
<template slot="title">
<div class="plan_Tdiv">
<span v-if="subItem.TimeStr==='早上'" class="commonTimeStr greenTime">{{subItem.TimeStr}}</span>
<span v-if="subItem.TimeStr==='下午'" class="commonTimeStr blueTime">{{subItem.TimeStr}}</span>
<span v-if="subItem.TimeStr==='晚上'" class="commonTimeStr orangeTime">{{subItem.TimeStr}}</span>
<span v-if="subItem.ClassType==2">试听课</span>
<span style="color:red;margin:0 5px;">{{subItem.TeacherName}}</span>
<span>[{{subItem.RoomName}}]</span>
</div>
</template>
<div @click="goUrl(subItem)" style="cursor:pointer;">
<div class="plan_Inner">
<div class="plan_LeftTitle">上课时间:</div>
<div class="plan_RightInner">{{subItem.StartTime}}-{{subItem.EndTime}}</div>
</div>
<div class="plan_Inner" v-if="subItem.ClassName">
<div class="plan_LeftTitle">班级:</div>
<div class="plan_RightInner">{{subItem.ClassName}}</div>
</div>
<div class="plan_Inner">
<div class="plan_LeftTitle">课程名称:</div>
<div class="plan_RightInner">{{subItem.CourseName}}</div>
</div>
<div class="plan_Inner" v-if="subItem.GuestList&&subItem.GuestList.length>0">
<div class="plan_LeftTitle">学生名称:</div>
<div class="plan_RightInner">
<span style="margin-right:10px;" v-for="tItem in subItem.GuestList">{{tItem.GuestName}}</span>
</div>
</div>
<div class="plan_Inner" style="align-items:center;" v-if="subItem.CompleteProgress>=0">
<div class="plan_LeftTitle">课程进度:</div>
<div class="plan_RightInner">
<el-progress :percentage="subItem.CompleteProgress"></el-progress>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
props: {
dayData: {
type: Object,
default: null
}
},
components: {
},
data() {
return {
}
},
created() {},
mounted() {
},
methods: {
goUrl(item) {
if (item.ClassType === 1) {
this.$router.push({
path: "../../classroom/courseInfo",
query: {
id: item.Id
}
})
}
}
}
}
</script>
<template>
<div class="page-body" style="padding:20px 0">
<div class="page-content">
<q-table :pagination="setMsg" no-data-label="暂无相关数据" flat
class="sticky-column-table sticky-right-column-table" separator="none" :data="tableData" :columns="columns"
row-key="name">
<template v-slot:body-cell-GuestList="props">
<q-td auto-width :props="props">
<span v-for="(item,index) in props.row.GuestList" style="margin-right:5px;">
{{item.GuestName}}
</span>
</q-td>
</template>
<template v-slot:body-cell-TotalPlanNum="props">
<q-td>
{{props.row.Ranks}}/{{props.row.TotalPlanNum}}
</q-td>
</template>
<template v-slot:bottom>
<q-pagination class="full-width justify-end" v-model="PageIndex" color="primary" :max="PageCount"
:input="true" @input="changePage" />
</template>
</q-table>
</div>
</div>
</template>
<script>
export default {
props: {
setMsg: {
type:Object,
default: null
},
tableData: {
type: Array,
default: null
},
PageCount: {
type: Number,
default: null
}
},
meta: {
title: "我的课表"
},
components: {
},
data() {
return {
columns: [{
name: 'ClassName',
label: '班级',
field: 'ClassName',
align: 'left'
},
{
name: 'CourseName',
label: '课程名称',
field: 'CourseName',
align: 'left',
},
{
name: 'GuestList',
label: '学员名称',
field: 'GuestList',
align: 'left'
},
{
name: 'StartTime',
label: '上课时间',
field: 'StartTime',
align: 'left'
},
{
name: 'TeacherName',
label: '教师',
field: 'TeacherName',
align: 'left'
},
{
name: 'TotalPlanNum',
label: '课程进度',
field: 'TotalPlanNum',
align: 'left'
}
],
tabMsg:{
PageIndex:1,
PageSize:15,
rowsPerPage: 15,
StartTime:'',
EndTime:'',
TeacherId:0,
ClassRoomId:0,
ClassType:0
},
PageIndex:1
}
},
created() {
},
mounted() {
console.log(this.setMsg,'setMsg');
},
methods: {
//翻页
changePage(val) {
this.PageIndex = val;
console.log(val,'val');
this.$emit('getChange',this.PageIndex);
}
}
}
</script>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
<template>
<div class="page-body MainPlan">
<div class="col row wrap q-col-gutter-md">
<div class="col-2">
<el-select v-model="msg.TeacherId" style="width:100%;" placeholder="教师团队" size="small" @change="getTypeWay()">
<el-option v-for="item in TeacherList" :key="item.TeacherName" :label="item.TeacherName" :value="item.TId">
</el-option>
</el-select>
</div>
<div class="col-2">
<el-select v-model="msg.ClassRoomId" style="width:100%;" placeholder="教室" size="small" @change="getTypeWay()">
<el-option v-for="item in ClassRoomList" :key="item.RoomName" :label="item.RoomName" :value="item.RoomId">
</el-option>
</el-select>
</div>
<div class="col-2">
<el-date-picker v-model="msg.StartTime" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" size="small"
style="width:100%;" @change="getTypeWay()" clear-icon="iconfont icon-guanbi">
</el-date-picker>
</div>
<div class="col-2">
<el-date-picker v-model="msg.EndTime" type="date" value-format="yyyy-MM-dd" placeholder="结束日期" size="small"
style="width:100%;" @change="getTypeWay()" clear-icon="iconfont icon-guanbi">
</el-date-picker>
</div>
<div class="col-2">
<el-select v-model="msg.ClassType" style="width:100%;" placeholder="类型" size="small" @change="getTypeWay()">
<el-option :key="0" label="全部" :value="0">
</el-option>
<el-option :key="1" label="正常" :value="1">
</el-option>
<el-option :key="2" label="试听课" :value="2">
</el-option>
</el-select>
</div>
<div class="col-2">
<q-btn color="accent" size="sm" class="q-mr-md" @click="exchangeType" :label="typeName" />
</div>
</div>
<classmateForm :dataList="dataList" v-if="commonType==1"></classmateForm>
<teachTable v-if="commonType==2" :tableData="tableData" :PageCount="PageCount" :setMsg="tabMsg" @getChange="getChange"></teachTable>
</div>
</template>
<script>
import {
getTeacherDropDownList,
queryClassRoomList
} from '../../api/school/index'
import {
GetClassPlanStatistical,
GetClassPlanStatisticalPage
} from '../../api/teacher/index';
import classmateForm from '../teacher/components/classmate-form';
import teachTable from '../teacher/components/teachTable';
export default {
meta: {
title: "上课计划"
},
components: {
classmateForm,
teachTable
},
data() {
return {
TeacherList: [], //教师团队
ClassRoomList: [], //
StartTime: "",
EndTime: '',
TeacherId: 0,
ClassRoomId: 0,
dataList: {},
activeNames: [1],
msg: {
StartTime: "",
EndTime: '',
TeacherId: 0,
ClassRoomId: 0,
ClassType: 0,
},
commonType:1, //1日历模式 2列表模式
typeName:'列表模式',
tabMsg:{
PageIndex:1,
PageSize:12,
rowsPerPage: 12,
StartTime:'',
EndTime:'',
TeacherId:0,
ClassRoomId:0,
ClassType:0
},
tableData:[], //表格数据
PageCount:0
};
},
created() {
if (this.$route.query && this.$route.query.ClassType) {
this.msg.ClassType = this.$route.query.ClassType;
}
this.GetTeacherList();
this.getClassRoomList();
},
mounted() {
this.getPlanList();
},
methods: {
// 获取校区教室导航列表
getPlanList() {
GetClassPlanStatistical(this.msg).then(res => {
if (res.Code == 1) {
this.dataList = res.Data;
}
}).catch(() => {
})
},
//获取教师下拉
GetTeacherList() {
getTeacherDropDownList({}).then(res => {
if (res.Code == 1) {
this.TeacherList = res.Data;
var obj = {
TeacherName: '请选择',
TId: 0
}
this.TeacherList.unshift(obj);
}
})
},
//获取教室下拉
getClassRoomList() {
queryClassRoomList({}).then(res => {
if (res.Code == 1) {
this.ClassRoomList = res.Data;
var obj = {
RoomName: '请选择',
RoomId: 0
}
this.ClassRoomList.unshift(obj);
}
})
},
exchangeType(){
if(this.commonType==1){
this.commonType=2
this.typeName='日历模式'
this.getTableList()
}else{
this.commonType=1;
this.typeName='列表模式'
this.getPlanList()
}
},
getTableList(){
this.tabMsg.StartTime = this.msg.StartTime;
this.tabMsg.EndTime = this.msg.EndTime;
this.tabMsg.TeacherId = this.msg.TeacherId;
this.tabMsg.ClassRoomId = this.msg.ClassRoomId;
this.tabMsg.ClassType = this.msg.ClassType;
GetClassPlanStatisticalPage(this.tabMsg).then(res => {
if (res.Code == 1) {
this.tableData = res.Data.PageData;
this.PageCount = res.Data.PageCount;
}
})
},
getChange(val) {
this.tabMsg.PageIndex = val;
this.getTableList()
},
getTypeWay(){
if(this.commonType==2){
this.getTableList()
}else{
this.getPlanList()
}
}
}
};
</script>
......@@ -954,6 +954,11 @@ const routes = [{
component: () =>
import("pages/teacher/teachMonthLessonCost")
},
{
path: "/teacher/teacherSchedule",
component: () =>
import("pages/teacher/teacherSchedule")
}
],
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment