370 lines
12 KiB
Vue
370 lines
12 KiB
Vue
|
<style lang="scss" scoped>
|
|||
|
|
@import "../table.scss";
|
|||
|
|
</style>
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-card>
|
|||
|
|
<!-- 检索区域 -->
|
|||
|
|
<div class="seachbox">
|
|||
|
|
|
|||
|
|
<div class="seachbox">
|
|||
|
|
<!-- 学期检索 --><el-select v-model="queryParams.Term" @change="getgetcourseListinfo()" filterable
|
|||
|
|
placeholder="学期" clearable size="small" class="ml-5 seachbox_input">
|
|||
|
|
<el-option v-for="item in TermList" :key="item.name" :label="item.name" :value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
<!-- 学院检索 -->
|
|||
|
|
<el-select v-model="queryParams.collegeId" filterable @change="getgetcourseListinfo()"
|
|||
|
|
placeholder="学院" clearable size="small" class="ml-5 seachbox_input">
|
|||
|
|
|
|||
|
|
<el-option v-for="item in CollegeList" :key="item.value" :label="item.name"
|
|||
|
|
:value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
<!-- 教师检索 -->
|
|||
|
|
<el-input v-model.trim="queryParams.nname" placeholder="教师姓名" clearable size="small"
|
|||
|
|
style="width:200px; margin:0px 10px 0px 0px "></el-input>
|
|||
|
|
<el-input v-model.trim="queryParams.num" placeholder="教师工号" clearable size="small"
|
|||
|
|
style="width:200px; margin:0px 10px 0px 0px "></el-input>
|
|||
|
|
<!-- 课程名检索 -->
|
|||
|
|
<el-select v-model="queryParams.coursevalue" filterable placeholder="课程名" clearable size="small"
|
|||
|
|
class="ml-5 seachbox_input">
|
|||
|
|
<el-option v-for="item in courseList
|
|||
|
|
" :key="item.CourceCode.toString()" :label="item.CourceName"
|
|||
|
|
:value="item.CourceCode.toString()" />
|
|||
|
|
</el-select>
|
|||
|
|
<!-- 按钮——————搜索 -->
|
|||
|
|
<el-button class="ml-5" style="margin-left: 10px;" type="primary"
|
|||
|
|
@click="ClickSearch">搜索</el-button>
|
|||
|
|
</div>
|
|||
|
|
<!-- 状态检索 -->
|
|||
|
|
<!-- <div class="status">
|
|||
|
|
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
<!-- 检索结束 -->
|
|||
|
|
|
|||
|
|
<!-- table开始-->
|
|||
|
|
<el-table :data="tableData" border stripe :header-cell-style="{ 'text-align': 'center' }"
|
|||
|
|
:scrollbar-always-on="true">
|
|||
|
|
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|||
|
|
<el-table-column prop="CollegeName" align="center" label="学院">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="CourceName" label="课程" align="left">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="Teacher" align="center" label="教师" :show-overflow-tooltip="true">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<span>{{ scope.row.TeacherName }}({{ scope.row.TeacherNumber }}) </span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="ClassName" align="left" label="班级">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="ClassroomName" align="left" label="教室">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="weeksAndWeekday" align="center" label="节次">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<span>{{ scope.row.ScheduleName }}({{ scope.row.AcademicNumber }})</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column label="操作" align="center" width="150" fixed="right">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<Details-Button permission="courseStatisticsColumns:Details" v-if="scope.row.ReviewNumber != 0"
|
|||
|
|
@clicknative="detailTableItem(scope.row)" content="详情"></Details-Button>
|
|||
|
|
<span v-else>暂无考勤信息</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<!-- table结束 -->
|
|||
|
|
<!-- 分页 -->
|
|||
|
|
<div class="paginationbox">
|
|||
|
|
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|||
|
|
:current-page="pageobj.pageNum" :page-sizes="pageobj.pageSizeOptions" :page-size="pageobj.pageSize"
|
|||
|
|
layout="total, sizes, prev, pager, next" :total="pageobj.Total">
|
|||
|
|
</el-pagination>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { nanoid } from 'nanoid'
|
|||
|
|
import { getsplit } from "@/utils/common.js"
|
|||
|
|
|
|||
|
|
import { getTermList, getCollegeList, getcourseList, getTabledata } from "@/api/courseStatistics.js"
|
|||
|
|
export default {
|
|||
|
|
name: 'courseStatistics_index',
|
|||
|
|
components: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
directives: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
//检索部分
|
|||
|
|
// 检索 ---数组列表 数组系列
|
|||
|
|
TermList: [], //检索——学期
|
|||
|
|
CollegeList: [], //检索——学院
|
|||
|
|
courseList: [],
|
|||
|
|
tableData: [], //检索——表格
|
|||
|
|
allvalue: 0,
|
|||
|
|
//检索 ----参数
|
|||
|
|
queryParams: {
|
|||
|
|
Term: '',
|
|||
|
|
semesterNum: "全部学期",
|
|||
|
|
collegeId: '',
|
|||
|
|
nname: "",
|
|||
|
|
num: "",
|
|||
|
|
coursevalue: "", //日期
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//新增 -----form数组列表
|
|||
|
|
isedit: false,
|
|||
|
|
//分页
|
|||
|
|
pageobj: {
|
|||
|
|
oldTotal: 0,
|
|||
|
|
oldCurrent: 1,
|
|||
|
|
Total: 0,
|
|||
|
|
pageSize: 10,
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSizeOptions: [10, 20, 50, 100, 150, 200],
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//分页部分
|
|||
|
|
//切换页码
|
|||
|
|
handleCurrentChange(e) { //e---指代的是页码数
|
|||
|
|
this.pageobj.pageNum = Math.ceil(e);
|
|||
|
|
this.getTabledatainfo(this.pageobj.pageNum);
|
|||
|
|
},
|
|||
|
|
//切换每页条数
|
|||
|
|
handleSizeChange(e) { //e--指代的是每页条数
|
|||
|
|
this.pageobj.pageSize = Math.ceil(e);
|
|||
|
|
this.pageobj.pageNum = 1; //这里是当我们位于每页十条的时候的第5页的时候 我们切换每页条数 页面跳转到第一页
|
|||
|
|
this.getTabledatainfo(this.pageobj.pageNum);
|
|||
|
|
},
|
|||
|
|
// 检索部分
|
|||
|
|
// 检索——Term（学期）
|
|||
|
|
getTermListinfo() {
|
|||
|
|
|
|||
|
|
getTermList({ SelectTermList: '' })
|
|||
|
|
.then((res) => {
|
|||
|
|
this.TermList = res
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//检索--课程名
|
|||
|
|
getgetcourseListinfo() {
|
|||
|
|
this.queryParams.semesterNum =
|
|||
|
|
this.queryParams.semesterNum == "全部学期"
|
|||
|
|
? ""
|
|||
|
|
: this.queryParams.semesterNum;
|
|||
|
|
getcourseList({ term: this.queryParams.semesterNum, collegeId: this.queryParams.collegeId || 0 })
|
|||
|
|
.then((res) => {
|
|||
|
|
this.courseList = res
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//检索——College（学院）
|
|||
|
|
getCollegeListinfo(params) {
|
|||
|
|
|
|||
|
|
const { collegeId, isAll } = params;
|
|||
|
|
|
|||
|
|
getCollegeList({ SelectCollegeList: collegeId, isAll: isAll })
|
|||
|
|
.then((res) => {
|
|||
|
|
this.CollegeList = res
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//检索——Classroom（教室）
|
|||
|
|
getClassroomListinfo() {
|
|||
|
|
getClassroomList({
|
|||
|
|
bName: '',
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.ClassroomList = res
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
ClickSearch() {
|
|||
|
|
//搜索
|
|||
|
|
this.getTabledatainfo(1);
|
|||
|
|
},
|
|||
|
|
//All检索——表格
|
|||
|
|
|
|||
|
|
getTabledatainfo(pageNum) { //pageNum---当前页
|
|||
|
|
let semesterNum1 = this.queryParams.Term;
|
|||
|
|
let collegeId1 = this.queryParams.collegeId || 0;
|
|||
|
|
let nname = this.queryParams.nname;
|
|||
|
|
let num = this.queryParams.num;
|
|||
|
|
let coursevalue = this.queryParams.coursevalue;
|
|||
|
|
|
|||
|
|
this.pageobj.pageNum = pageNum;
|
|||
|
|
getTabledata({
|
|||
|
|
oldTotal: this.pageobj.oldTotal,
|
|||
|
|
oldCurrent: this.pageobj.oldCurrent,
|
|||
|
|
pageSize: this.pageobj.pageSize,
|
|||
|
|
pageNum: pageNum,
|
|||
|
|
collegeId: collegeId1,
|
|||
|
|
teaNum: num,
|
|||
|
|
teaName: nname,
|
|||
|
|
courceCode: coursevalue,
|
|||
|
|
term: semesterNum1 === "全部学期" ? "" : semesterNum1,
|
|||
|
|
}).then((res) => {
|
|||
|
|
let data = res;
|
|||
|
|
if (data.length > 0) {
|
|||
|
|
this.pageobj.Total = data[0].total;
|
|||
|
|
} else {
|
|||
|
|
this.pageobj.Total = 0;
|
|||
|
|
this.pageobj.pageNum = 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.tableData = data;
|
|||
|
|
// debugger
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 检索完成
|
|||
|
|
detailTableItem(row) {
|
|||
|
|
// debugger
|
|||
|
|
let argu = {
|
|||
|
|
courseId: row.CourceCode,
|
|||
|
|
ClassroomCode: row.ClassroomCode,
|
|||
|
|
TeacherNumber: row.TeacherNumber,
|
|||
|
|
};
|
|||
|
|
this.$router.push({
|
|||
|
|
name: "courseInfos",
|
|||
|
|
query: argu,
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//初始化
|
|||
|
|
Initialization() {
|
|||
|
|
this.getTermListinfo(); //学期
|
|||
|
|
this.getCollegeListinfo({
|
|||
|
|
collegeId: "",
|
|||
|
|
isAll: false,
|
|||
|
|
}); //学院
|
|||
|
|
this.getgetcourseListinfo()
|
|||
|
|
this.getTabledatainfo(1) //桌面
|
|||
|
|
},
|
|||
|
|
// 添加页面
|
|||
|
|
|
|||
|
|
//获取学院信息 --这里获取学院信息有点重复
|
|||
|
|
getNewCollegeListinfo() {
|
|||
|
|
getNewCollegeList({
|
|||
|
|
scSchoolCode: '',
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.NewCollegeList = res
|
|||
|
|
}).catch((err) => {
|
|||
|
|
// console.log('学院信息请求错误');
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
CollegeChange() {
|
|||
|
|
this.Form.Major = "";
|
|||
|
|
this.Form.Grade = "";
|
|||
|
|
this.Form.Class = "";
|
|||
|
|
this.getNewMajorListinfo()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.Initialization()
|
|||
|
|
},
|
|||
|
|
activated() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.status {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date {
|
|||
|
|
margin: 0px 10px 0px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-form .el-select {
|
|||
|
|
width: 80%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-form .el-input {
|
|||
|
|
width: 80%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-drawerchange__footer {
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-card {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 60%;
|
|||
|
|
left: 20%;
|
|||
|
|
top: 30%;
|
|||
|
|
z-index: 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.Newfooter {
|
|||
|
|
position: relative;
|
|||
|
|
float: right;
|
|||
|
|
margin: 10px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_close {
|
|||
|
|
box-shadow: none;
|
|||
|
|
border: none;
|
|||
|
|
background: none;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_cancel {
|
|||
|
|
box-shadow: none;
|
|||
|
|
border: none;
|
|||
|
|
background: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.div_forshow {}
|
|||
|
|
|
|||
|
|
.div_show {
|
|||
|
|
position: relative;
|
|||
|
|
margin: 5px 0px;
|
|||
|
|
border: 2px dotted rgba(113, 158, 243, 0.3);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.div_item {
|
|||
|
|
width: 220px;
|
|||
|
|
margin: 0px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_semiselect {
|
|||
|
|
margin: 2px 0px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
box-shadow: none;
|
|||
|
|
background: rgba(139, 139, 241, 0.5);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.div_btn {
|
|||
|
|
width: 60px;
|
|||
|
|
}
|
|||
|
|
</style>
|