|
|
@@ -0,0 +1,417 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ title="选择班级"
|
|
|
+ :visible.sync="show"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="800px"
|
|
|
+ height="80%"
|
|
|
+ class="addNewPP2"
|
|
|
+ >
|
|
|
+ <div class="check_classBox" v-loading="isLoading">
|
|
|
+ <div class="check_class_right">
|
|
|
+ <span>年级</span>
|
|
|
+ <div
|
|
|
+ class="check_class"
|
|
|
+ :class="{ activeX: gradeId == '' }"
|
|
|
+ @click="(gradeId = ''), getClass()"
|
|
|
+ >
|
|
|
+ 全部年级
|
|
|
+ </div>
|
|
|
+ <el-tooltip
|
|
|
+ placement="top"
|
|
|
+ :content="item.name"
|
|
|
+ v-for="(item, index) in gradeList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="check_class"
|
|
|
+ :class="{ activeX: gradeId == item.id }"
|
|
|
+ @click="(gradeId = item.id), getClass()"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="check_class_left">
|
|
|
+ <div class="check_class_all_box">
|
|
|
+ <div class="check_class_left_title">班级</div>
|
|
|
+ <!-- <div style="display:flex;align-items:center;margin-left:auto;">
|
|
|
+ <el-checkbox
|
|
|
+ v-model="checkAll"
|
|
|
+ @change="handleCheckAllChange"
|
|
|
+ class="all_check"
|
|
|
+ >全选</el-checkbox
|
|
|
+ >
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <!-- <div class="class_item" style="position:absolute; margin:0" v-if="grade2.length">
|
|
|
+ <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
|
|
+ </div> -->
|
|
|
+ <!-- <el-checkbox-group
|
|
|
+ v-model="checkboxList2"
|
|
|
+ class="check_class_item"
|
|
|
+ @change="InviteChange"
|
|
|
+ v-if="grade2.length"
|
|
|
+ >
|
|
|
+ <div v-for="item in grade2" :key="item.id" class="class_item">
|
|
|
+ <el-checkbox :label="item.id">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group> -->
|
|
|
+ <div class="classItem" @click="classItemClick(item)" :class="{classActiveItem:checkboxList2.map(i=>i.id).includes(item.id)}" v-for="item in grade2" :key="item.id">
|
|
|
+ <div class="ci_left">
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ <span v-if="item.studentNum>=0">{{ item.studentNum }}名学生</span>
|
|
|
+ </div>
|
|
|
+ <div class="ci_right">
|
|
|
+
|
|
|
+ <svg v-show="checkboxList2.map(i=>i.id).includes(item.id)" t="1756864121172" class="icon" viewBox="0 0 1098 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4441" width="200" height="200"><path d="M476.808045 0.000043C213.401753 0.106685-0.031993 213.68973 0 477.074693S213.551052 953.98938 476.94668 954.021373s476.957344-213.412417 477.085315-476.808045A477.010665 477.010665 0 0 0 476.808045 0.000043z m273.761252 353.369671L441.861388 661.853674a43.1901 43.1901 0 0 1-62.023117 0L202.214984 484.251715a43.864079 43.864079 0 1 1 62.033781-62.033782l147.21959 147.21959 277.89897-276.86454a43.861946 43.861946 0 1 1 62.023117 62.033781z m0 0" p-id="4442" fill="#4CAF51"></path></svg>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!grade2.length">暂无数据</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <div class="b_bottom">
|
|
|
+ <div @click="close()">取消</div>
|
|
|
+ <div class="b_b_submit" @click="submit()">确定</div>
|
|
|
+ </div>
|
|
|
+ <!-- <el-button @click="close()">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit()">确定</el-button> -->
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ show:false,
|
|
|
+ gradeId:"",
|
|
|
+ gradeList:[],
|
|
|
+ checkAll:false,
|
|
|
+ checkboxList2:[],
|
|
|
+ grade2:[],
|
|
|
+ grade:[],
|
|
|
+ oid:this.$route.query.oid,
|
|
|
+ classJuri:[],
|
|
|
+ classSearch:"",
|
|
|
+ isLoading:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ open(data){
|
|
|
+ let _classList = data.classList?JSON.parse(JSON.stringify(data.classList)):[];
|
|
|
+ this.checkboxList2 = _classList;
|
|
|
+ this.getClass();
|
|
|
+ this.selectGrage();
|
|
|
+ this.show = true;
|
|
|
+
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ init(){
|
|
|
+ this.gradeId = "";
|
|
|
+ this.classSearch = "";
|
|
|
+ },
|
|
|
+ getClass(){
|
|
|
+ let params = {
|
|
|
+ oid: this.oid,
|
|
|
+ gid: this.gradeId,
|
|
|
+ cn: this.classSearch
|
|
|
+ };
|
|
|
+ this.isLoading = true;
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectClassBySchoolSearch2", params)
|
|
|
+ .then(res => {
|
|
|
+ this.isLoading = false;
|
|
|
+ if (!this.grade.length) {
|
|
|
+ this.grade = res.data[0];
|
|
|
+ }
|
|
|
+ this.grade2 = res.data[0];
|
|
|
+ this.classJuri = res.data[0];
|
|
|
+ let _check = [];
|
|
|
+ let _check2 = [];
|
|
|
+ for (var i = 0; i < this.grade2.length; i++) {
|
|
|
+ var gid = this.grade2[i].id;
|
|
|
+ _check.push(gid);
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.checkboxList2.length; i++) {
|
|
|
+ var _id = this.checkboxList2[i];
|
|
|
+ if (_check.indexOf(_id) !== -1) {
|
|
|
+ _check2.push(_id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.checkAll = _check2.length === _check.length;
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.isLoading = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectGrage() {
|
|
|
+ let params = {
|
|
|
+ oid: this.oid
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectGrageBySchool", params)
|
|
|
+ .then(res => {
|
|
|
+ this.gradeList = res.data[0];
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.isLoading = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit(){
|
|
|
+ let data = JSON.parse(JSON.stringify(this.checkboxList2));
|
|
|
+ this.$emit("success",data)
|
|
|
+ },
|
|
|
+ classItemClick(item){
|
|
|
+ if(this.checkboxList2.map(i=>i.id).includes(item.id)){
|
|
|
+ this.checkboxList2 = this.checkboxList2.filter(i => i.id != item.id);
|
|
|
+ }else{
|
|
|
+ this.checkboxList2.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.addNewPP2 >>> .el-dialog__body {
|
|
|
+ padding: 5px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.addNewPP2 >>> .el-dialog {
|
|
|
+ margin-top: 5vh !important;
|
|
|
+ border-radius: 10px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.check_classBox {
|
|
|
+ height: 400px;
|
|
|
+ display: flex;
|
|
|
+ border-top: 1.5px solid #e7ebf1;
|
|
|
+ border-bottom: 1.5px solid #e7ebf1;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class_right {
|
|
|
+ width: 200px;
|
|
|
+ border-right: 1px solid #e7ebf1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 15px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 40px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class_right>span{
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ top: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class {
|
|
|
+ width: 85%;
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 50px;
|
|
|
+ min-height: 30px;
|
|
|
+ padding: 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ border: solid 1px #E2E9EE;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class.activeX {
|
|
|
+ background: #E8F5E8;
|
|
|
+ color: #4CAF51;
|
|
|
+ font-weight: 700;
|
|
|
+ border-color: #4CAF51;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class + .check_class {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class_left {
|
|
|
+ background: #fafafa;
|
|
|
+ width: calc(100% - 130px);
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class_all_box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.all_check {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 2px 0 0;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.all_check >>> .el-checkbox__label {
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class_left_title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.check_class_item {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ overflow: auto;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.class_item:first-child {
|
|
|
+ /* margin: 0 15px 15px 67px; */
|
|
|
+}
|
|
|
+.class_item {
|
|
|
+ margin: 0 15px 15px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.class_item:hover >>> .el-checkbox__label {
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.class_item >>> .el-checkbox__label {
|
|
|
+ color: #0e1e33;
|
|
|
+}
|
|
|
+
|
|
|
+.class_item:hover >>> .el-checkbox__inner {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.class_item >>> .el-checkbox,
|
|
|
+.class_item >>> .el-checkbox__input {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.classItem{
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: solid 1px #E1E8ED;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding-left: 30px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.classItem::after{
|
|
|
+ content: "";
|
|
|
+ height: 100%;
|
|
|
+ width: 8px;
|
|
|
+ background: #E1E8ED;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ border-radius: 10px 0 0 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ci_left{
|
|
|
+ width: calc(100% - 70px);
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ci_left>div{
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.ci_left>span{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8F8F8F;
|
|
|
+}
|
|
|
+
|
|
|
+.ci_right{
|
|
|
+ width: 70px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.ci_right>svg{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.classActiveItem{
|
|
|
+ border: solid 1px #4CAF51;
|
|
|
+}
|
|
|
+
|
|
|
+.classActiveItem::after{
|
|
|
+ background: #4CAF51;
|
|
|
+}
|
|
|
+
|
|
|
+.b_bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.b_bottom>div{
|
|
|
+ padding: 10px 25px;
|
|
|
+ background: #fff;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: solid 1px #EEEEEE;
|
|
|
+ margin-left: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.b_bottom>.b_b_submit{
|
|
|
+ background: #1A1A1A;
|
|
|
+ color: #D4D4D4;
|
|
|
+ border-color: #1A1A1A;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
SanHQin