|
@@ -1,24 +1,67 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <el-form :modal="searchForm" ref="searchFormRef" class="forms" inline>
|
|
|
+ <el-form-item prop="search">
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.search"
|
|
|
+ placeholder="请输入姓名/手机号"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="subjectId">
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.subjectId"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择专业"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in soundList"
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :key="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="courseType">
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.courseType"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择课程剩余时长"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in courseTypeList"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="onSearch" type="primary">搜索</el-button>
|
|
|
+ <el-button @click="onReset" type="danger">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
<el-table
|
|
|
:data="list"
|
|
|
- ref='studentTable'
|
|
|
- style
|
|
|
+ ref="studentTable"
|
|
|
:header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
|
tooltip-effect="dark"
|
|
|
-
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- max-height='300px'
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ @select="onTableSelect"
|
|
|
+ max-height="300px"
|
|
|
+ @sort-change="sortChang"
|
|
|
>
|
|
|
- <el-table-column v-if="isChiose"
|
|
|
- type="selection"
|
|
|
- :selectable="checkSelectable"
|
|
|
- width="55">
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-if="isChiose"
|
|
|
+ type="selection"
|
|
|
+ :selectable="checkSelectable"
|
|
|
+ width="55"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
prop="userId"
|
|
|
align="center"
|
|
|
- width="120"
|
|
|
+ width="80"
|
|
|
label="学员编号"
|
|
|
></el-table-column>
|
|
|
<el-table-column
|
|
@@ -27,17 +70,12 @@
|
|
|
width="120"
|
|
|
label="学员姓名"
|
|
|
></el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- align="center"
|
|
|
- width="120"
|
|
|
- label="性别"
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <div>
|
|
|
- {{scope.row.gender| sex}}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <el-table-column prop="name" align="center" width="80" label="性别">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{ scope.row.gender | sex }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="phone"
|
|
@@ -48,59 +86,253 @@
|
|
|
<el-table-column
|
|
|
prop="subjectNames"
|
|
|
align="center"
|
|
|
+ width="80"
|
|
|
label="专业"
|
|
|
></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="single"
|
|
|
+ align="center"
|
|
|
+ label="声部课"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.single || 0 }}分钟
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="mix"
|
|
|
+ align="center"
|
|
|
+ label="合奏课"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.mix || 0 }}分钟
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="trainingSingle"
|
|
|
+ align="center"
|
|
|
+ label="集训声部课"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.trainingSingle || 0 }}分钟
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="trainingMix"
|
|
|
+ align="center"
|
|
|
+ label="集训合奏课"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.trainingMix || 0 }}分钟
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="high"
|
|
|
+ align="center"
|
|
|
+ label="基础技能课"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.high || 0 }}分钟
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="highOnline"
|
|
|
+ align="center"
|
|
|
+ label="线上基础技能课"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.highOnline || 0 }}分钟
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="comprehensive"
|
|
|
+ align="center"
|
|
|
+ label="综合课"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.comprehensive || 0 }}分钟
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="classroom"
|
|
|
+ align="center"
|
|
|
+ label="课堂课"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.classroom || 0 }}分钟
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
<div slot="footer" class="dialog-footer" v-if="showOk">
|
|
|
- <el-button type="primary" @click="$listeners.close(selectList)">确 定</el-button>
|
|
|
+ <span style="display: flex;align-items: center; font-size: 16px;padding-right: 8px">当前选中:<span style="color: red;">{{ selectList.length || 0 }}</span>人</span>
|
|
|
+ <el-button type="primary" @click="$listeners.close(selectList)"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<div style="clear: both;" v-if="showOk"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { getClassAllStudent } from "@/api/studentManager";
|
|
|
export default {
|
|
|
- props: ['list','isChiose','chioseList','showOk','disabledList'],
|
|
|
- data(){
|
|
|
- return{
|
|
|
- selectList:this.chioseList
|
|
|
- }
|
|
|
- },mounted(){
|
|
|
- if(this.chioseList){
|
|
|
- let idList = this.chioseList.map((item,index)=>{
|
|
|
- return item.userId
|
|
|
- })
|
|
|
- this.list.forEach((item,index)=>{
|
|
|
- if(idList.indexOf(item.userId)!= -1){
|
|
|
- this.$refs.studentTable.toggleRowSelection(item,true);
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ props: ["isChiose", "chioseList", "showOk", "disabledList", "soundList", "search", "classId"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ searchForm: {
|
|
|
+ search: "",
|
|
|
+ courseType: null,
|
|
|
+ subjectId: null,
|
|
|
+ sortField: null,
|
|
|
+ sortType: null,
|
|
|
+ },
|
|
|
+ // classroom,comprehensive,high,high_online,mix,single,training_mix,training_single,no_course
|
|
|
+ // 课堂 综合 基础技能 线上基础技能 合奏 声部 集训合奏 集训声部 无排课时长
|
|
|
+ courseTypeList: [{
|
|
|
+ id: 'no_course',
|
|
|
+ name: '无排课时长'
|
|
|
+ }, {
|
|
|
+ id: 'single',
|
|
|
+ name: '声部课'
|
|
|
+ }, {
|
|
|
+ id: 'mix',
|
|
|
+ name: '合奏课'
|
|
|
+ }, {
|
|
|
+ id: 'trainingSingle',
|
|
|
+ name: '集训声部课'
|
|
|
+ }, {
|
|
|
+ id: 'trainingMix',
|
|
|
+ name: '集训合奏课'
|
|
|
+ }, {
|
|
|
+ id: 'high',
|
|
|
+ name: '基础技能课'
|
|
|
+ }, {
|
|
|
+ id: 'highOnline',
|
|
|
+ name: '线上基础技能课'
|
|
|
+ }, {
|
|
|
+ id: 'comprehensive',
|
|
|
+ name: '综合课'
|
|
|
+ }, {
|
|
|
+ id: 'classroom',
|
|
|
+ name: '课堂课'
|
|
|
+ }],
|
|
|
+ selectList: this.chioseList,
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
},
|
|
|
- methods:{
|
|
|
- handleSelectionChange(val){
|
|
|
- this.selectList = val
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ getClassAllStudent({ classGroupId: this.classId, ...this.searchForm }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.loading = true;
|
|
|
+ this.list = res.data?.map(item => {
|
|
|
+ return {
|
|
|
+ userId: item.userId,
|
|
|
+ nickName: item.name,
|
|
|
+ gender: item.gender,
|
|
|
+ phone: item.parentsPhone,
|
|
|
+ subjectNames: item.subjectName,
|
|
|
+ single: item.single,
|
|
|
+ mix: item.mix,
|
|
|
+ classroom: item.classroom,
|
|
|
+ comprehensive: item.comprehensive,
|
|
|
+ highOnline: item.highOnline,
|
|
|
+ trainingSingle: item.trainingSingle,
|
|
|
+ trainingMix: item.trainingMix,
|
|
|
+ high: item.high
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.selectList) {
|
|
|
+ let idList = this.selectList.map((item, index) => {
|
|
|
+ return item.userId;
|
|
|
+ });
|
|
|
+ this.list.forEach((item, index) => {
|
|
|
+ if (idList.indexOf(item.userId) != -1) {
|
|
|
+ console.log(idList, item.userId)
|
|
|
+ this.$refs.studentTable.toggleRowSelection(item, true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sortChang(val) {
|
|
|
+ const dates = {
|
|
|
+ ascending: "ASC",
|
|
|
+ descending: "DESC",
|
|
|
+ };
|
|
|
+
|
|
|
+ if(val.prop && val.order) {
|
|
|
+ this.searchForm.sortField = val.prop
|
|
|
+ this.searchForm.sortType = dates[val.order]
|
|
|
+ } else {
|
|
|
+ this.searchForm.sortField = null
|
|
|
+ this.searchForm.sortType = null
|
|
|
+ }
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ onSearch() {
|
|
|
+ this.getList()
|
|
|
},
|
|
|
- checkSelectable(row){
|
|
|
- let flag = true
|
|
|
- if(this.disabledList&&this.disabledList.length >0){
|
|
|
- this.disabledList.forEach(stu=>{
|
|
|
- if(stu.userId == row.userId){
|
|
|
- flag = false
|
|
|
+ onReset() {
|
|
|
+ // this.$refs.searchFormRef.resetFields()
|
|
|
+ this.searchForm.search = ""
|
|
|
+ this.searchForm.courseType = null
|
|
|
+ this.searchForm.subjectId = null
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ if(this.loading) return
|
|
|
+ this.selectList = val;
|
|
|
+ },
|
|
|
+ onTableSelect(rows, row) {
|
|
|
+ let idList = this.selectList.map((group) => {
|
|
|
+ return group.userId;
|
|
|
+ });
|
|
|
+ if (idList.indexOf(row.userId) != -1) {
|
|
|
+ this.selectList.splice(idList.indexOf(row.userId), 1);
|
|
|
+ if (this.selectList.length <= 0) {
|
|
|
+ this.clearCom();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearCom() {
|
|
|
+ this.selectList = [];
|
|
|
+ this.$refs.studentTable.clearSelection();
|
|
|
+ },
|
|
|
+ checkSelectable(row) {
|
|
|
+ let flag = true;
|
|
|
+ if (this.disabledList && this.disabledList.length > 0) {
|
|
|
+ this.disabledList.forEach(stu => {
|
|
|
+ if (stu.userId == row.userId) {
|
|
|
+ flag = false;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
- return flag
|
|
|
+ return flag;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-::v-deep .dialog-footer{
|
|
|
+::v-deep .dialog-footer {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
- .dialog-footer {
|
|
|
+.dialog-footer {
|
|
|
float: right;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
</style>
|