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> |