FE-V2-PC/src/views/comprehensive/personnel/student/addPage.vue

<template>
  <div class="student-add-page">
    <div class="top-title-box">
      <p>{{titleName}}</p>
      <p @click="outPageButton">返回</p>
    </div>
    <el-form :model="form" class="top-info-box" ref="form" :inline="true" :rules="rules" label-width="120px">
        <div class="left-info-box">
          <img :src="form.avatar" v-if="form.avatar">
          <img src="@/assets/ZDimages/tx_cion_one.png" v-if="!form.avatar">
          <el-upload
            v-if="!editType"
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :on-success="handleAvatarSuccess"
            :headers="headers"
            :before-upload="beforeAvatarUpload">
            <p>上传证件照</p>
          </el-upload>
        </div>
        <div class="right-info-box">
          <el-form-item label="姓名：" prop="nickName">
            <el-input
              :disabled="editType"
              style="width:218px;"
              maxlength="10"
              v-model="form.nickName"
              placeholder="请输入姓名"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="性别：" prop="sex">
            <el-radio-group v-model="form.sex" v-if="!editType">
              <el-radio :label="0" style="margin-left:20px;width:70px;">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
            <p v-if="editType" style="line-height:40px;color:#999;width:180px;padding-left:40px;">{{form.sex==0?'男':'女'}}</p>
          </el-form-item>
          <el-form-item label="学号：" prop="userName">
            <el-input
              style="width:218px;"
              :disabled="editType"
              maxlength="50"
              v-model="form.userName"
              placeholder="请输入学号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="所在学院：" prop="deptId">
            <el-select v-model="form.deptId" clearable :disabled="editType" placeholder="请选择所在学院">
              <el-option
                v-for="item in deptOptions"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业：" prop="majorId">
            <el-select
              :disabled="editType"
              v-model="form.majorId"
              filterable
              remote
              clearable
              reserve-keyword
              @visible-change="majorSelectNull"
              @change="majorSelectClick"
              @clear="majorClearClick"
              placeholder="请选择专业"
              :remote-method="majorSelect">
              <el-option
                v-for="item in majorOptions"
                :key="item.id"
                :label="item.majorName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码：" prop="phonenumber">
            <el-input
              :disabled="editType"
              style="width:218px;"
              maxlength="11"
              onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
              v-model="form.phonenumber"
              placeholder="请输入手机号码"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="班级：" prop="grade">
            <el-select
              :disabled="editType"
              v-model="form.grade"
              filterable
              remote
              clearable
              reserve-keyword
              @visible-change="gradeSelectNull"
              @change="gradeSelectClick"
              @clear="gradeClearClick"
              placeholder="请选择班级"
              :remote-method="gradeSelect">
              <el-option
                v-for="item in gradeOptions"
                :key="item.id"
                :label="item.className"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期：" prop="dateBirth">
            <el-date-picker
              :disabled="editType"
              v-model="form.dateBirth"
              type="date"
              placeholder="请选择出生日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input
              :disabled="editType"
              style="width:218px;"
              maxlength="40"
              v-model="form.email"
              placeholder="请输入邮箱"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="导师：" prop="tutorUserId">
            <el-select
              :disabled="editType"
              v-model="form.tutorUserId"
              filterable
              remote
              clearable
              reserve-keyword
              @change="tutorUserSelectClick"
              @clear="tutorUserClearClick"
              placeholder="请选择"
              :remote-method="tutorUserSelect">
              <el-option
                v-for="item in tutorUserOptions"
                :key="item.userId"
                :label="item.nickName+'-'+item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生类别：" prop="education">
            <el-select
              :disabled="editType"
              v-model="form.education"
              filterable
              remote
              clearable
              reserve-keyword
              @change="educationSelectClick"
              @clear="educationClearClick"
              placeholder="请选择学生类别"
              :remote-method="educationSelect">
              <el-option
                v-for="item in educationOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学籍状态：" prop="workStatus">
            <el-select
              :disabled="editType"
              v-model="form.workStatus"
              filterable
              remote
              clearable
              reserve-keyword
              @change="workStatusSelectClick"
              @clear="workStatusClearClick"
              placeholder="请选择学籍状态"
              :remote-method="workStatusSelect">
              <el-option
                v-for="item in workStatusOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="校园卡号：" prop="cardNum">
            <el-input
              :disabled="editType"
              style="width:218px;"
              onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
              maxlength="50"
              v-model="form.cardNum"
              placeholder="请输入校园卡号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="人脸照片：" prop="status" v-if="editType">
            <div style="width:180px;" v-if="form.faceImg">
              <img :src="form.faceImg" style="width:140px;height:140px;">
            </div>
            <p v-if="!form.faceImg" style="line-height:40px;color:#999;width:180px;padding-left:40px;">未上传</p>
          </el-form-item>
          <el-form-item label="电子签名：" prop="status" v-if="editType">
            <div style="width:180px;" v-if="form.signature">
              <img :src="form.signature" style="width:140px;height:140px;">
            </div>
            <p v-if="!form.signature" style="line-height:40px;color:#999;width:180px;padding-left:40px;">未上传</p>
          </el-form-item>
          <el-form-item label="账号状态：" prop="status">
            <el-switch
              v-if="!editType"
              @click.native="changeIsNeedCaptcha"
              class="switch captcha-img"
              :active-value="0"
              :inactive-value="1"
              active-color="#29B24D"
              inactive-color="#999"
              v-model="form.status"
              active-text="启用"
              inactive-text="停用"
              disabled
            ></el-switch>
            <p v-if="editType" style="line-height:40px;color:#999;width:180px;padding-left:40px;">{{form.status==0?'启用':'停用'}}</p>
          </el-form-item>
        </div>
    </el-form>
    <div class="bottom-button-box" v-if="!editType">
      <p class="inquire-button-one" @click="upDataClick">提交</p>
    </div>
    <el-dialog title="添加班级" :visible.sync="gradeOpen" width="600px" append-to-body class="teacher-revise-dialog-box">
      <el-form :model="gradeForm" ref="gradeForm" :inline="true" :rules="rules" class="addCheckPage-min">
        <el-form-item label="班级名称" prop="gradeName" label-width="110px" >
          <el-input v-model="gradeForm.gradeName" clearable maxlength="20" style="width:420px;" placeholder="请输入班级名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="teacher-revise-dialog-button-box">
        <p class="reset-button-one" @click="gradeOpenOff">取消</p>
        <p class="inquire-button-one" @click="gradeOpenUp">确定</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listDepartments } from "@/api/system/dept";
  import { getWorkList, getVague, addSystemClass, getMajorList,getTeacherOption,addUserStudent,putUserStudent } from "@/api/system/user_student";
  import { getToken } from "@/utils/auth";
  export default {
    name: "addPage",
    props:{
      editType:{},
      propsData:{},
      titleName:{},
    },
    data() {
      return {
        uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/base/upload", // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        menuList:[],
        form:{
          avatar:"",
          nickName:"",
          sex:0,
          userName:"",
          deptId:"",
          majorId:"",
          grade:"",
          dateBirth:"",
          email:"",
          phonenumber:"",
          tutorUserId:"",
          education:"",
          workStatus:"",
          cardNum:"",
          status:0,
        },
        rules:{
          gradeName: [{ required: true, message: "请输入班级名称", trigger: "blur" },
            { required: true, message: "请输入班级名称", validator: this.spaceJudgment, trigger: "blur" }],
          nickName: [{ required: true, message: "请输入姓名", trigger: "blur" },
            { required: true, message: "请输入姓名", validator: this.spaceJudgment, trigger: "blur" }],
          userName: [{ required: true, message: "请输入学号", trigger: "blur" },
            { required: true, message: "请输入学号", validator: this.spaceJudgment, trigger: "blur" }],
          deptId: [{ required: true, message: "请选择所在学院", trigger: "blur" }],
          majorId: [{ required: true, message: "请选择专业", trigger: "blur" }],
          phonenumber: [
            { required: true, message: "请输入手机号码", trigger: "blur" },
            { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        textType:false,
        //数据范围列表
        optionsDataList:[
          {type: 0, value: "所有数据",},
          {type: 1, value: "本部门及下级部门数据",},
          {type: 2, value: "本部门及指定部门数据",},
          {type: 3, value: "当前账号数据",},
        ],
        //学院数据列表
        deptOptions:[],
        //快捷权限列表
        templateList:[{name:"校领导",id:"0"},{name:"教师",id:"1"},{name:"助教",id:"2"}],
        templateKey:"",
        templateName:"",
        //权限勾选数据
        permissionOpen:false,
        permissionCheckData:{},
        allCheckType:false,
        //导师查询数据
        tutorUserOptions:[],
        //专业查询数据
        majorOptions:[],
        //班级查询数据
        gradeOptions:[
          {id:9981,className:"+ 添加班级"}
        ],
        //学生类别查询数据
        educationOptions:[],
        //学籍状态查询数据
        workStatusOptions:[],
        //新增班级弹窗开关
        gradeOpen:false,
        gradeForm:{
          gradeName:"",
        }
      }
    },
    created(){
      if(this.propsData.userId){
        if(this.propsData.avatar){
          this.form.avatar = this.propsData.avatar;
        }else{
          this.form.avatar = '';
        }
        if(this.propsData.nickName){
          this.form.nickName = this.propsData.nickName;
        }else{
          this.form.nickName = '';
        }
        if(this.propsData.sex){
          this.form.sex = parseInt(this.propsData.sex);
        }else{
          this.form.sex = 0;
        }
        if(this.propsData.userName){
          this.form.userName = this.propsData.userName;
        }else{
          this.form.userName = '';
        }
        if(this.propsData.deptId){
          this.form.deptId = this.propsData.deptId;
        }else{
          this.form.deptId = '';
        }
        if(this.propsData.majorId){
          this.form.majorId = parseInt(this.propsData.majorId);
        }else{
          this.form.majorId = '';
        }
        if(this.propsData.grade){
          this.form.grade = parseInt(this.propsData.grade);
        }else{
          this.form.grade = '';
        }
        if(this.propsData.dateBirth){
          this.form.dateBirth = this.propsData.dateBirth;
        }else{
          this.form.dateBirth = '';
        }
        if(this.propsData.email){
          this.form.email = this.propsData.email;
        }else{
          this.form.email = '';
        }
        if(this.propsData.phonenumber){
          this.form.phonenumber = this.propsData.phonenumber;
        }else{
          this.form.phonenumber = '';
        }
        if(this.propsData.tutorUserId){
          this.form.tutorUserId = this.propsData.tutorUserId;
        }else{
          this.form.tutorUserId = '';
        }
        if(this.propsData.education){
          this.form.education = this.propsData.education;
        }else{
          this.form.education = '';
        }
        if(this.propsData.workStatus){
          this.form.workStatus = this.propsData.workStatus;
        }else{
          this.form.workStatus = '';
        }
        if(this.propsData.cardNum){
          this.form.cardNum = this.propsData.cardNum;
        }else{
          this.form.cardNum = '';
        }
        if(this.propsData.status){
          this.form.status = parseInt(this.propsData.status);
        }else{
          this.form.status = '';
        }
        if(this.propsData.faceImg){
          this.form.faceImg = this.propsData.faceImg;
        }else{
          this.form.faceImg = '';
        }
        if(this.propsData.signature){
          this.form.signature = this.propsData.signature;
        }else{
          this.form.signature = '';
        }
        this.getSelect();
      }else{
        this.getAll();
        this.majorSelectAll();
        this.gradeSelectAll();
      }
    },
    mounted(){
      this.listDepartments();
    },
    methods:{
      upDataClick(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(this.form.email){
              let re = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if(!re.test(this.form.email)){
                this.msgError('请输入正确的邮箱地址')
                return
              }
            }
            if(this.propsData.userId){
              //编辑
              this.form.userId = this.propsData.userId
              putUserStudent(this.form).then(response => {
                this.msgSuccess(response.msg)
                this.outPageButton()
              });
            }else{
              //新增
              addUserStudent(this.form).then(response => {
                this.msgSuccess(response.msg)
                this.outPageButton()
              });
            }
          }
        });
      },
      //查询所有搜索接口数据
      getAll(){
        //学籍状态查询
        getVague({dictType:"student_status", dictLabel:""}).then(response => {
          this.workStatusOptions = response.data;
        });
        //学生类别查询
        getVague({dictType:"education",dictLabel:""}).then(response => {
          this.educationOptions = response.data;
        });
      },
      getSelect(){
        //导师查询
        if(this.propsData.tutorUserName){
          getTeacherOption({nickName:this.propsData.tutorUserName}).then(response => {
            this.tutorUserOptions = response.data;
          });
        }
        //专业查询
        getMajorList({majorName:this.propsData.major}).then(response => {
          this.majorOptions = response.data;
        });
        //班级查询
        getWorkList({className:this.propsData.className}).then(response => {
          this.gradeOptions = response.data;
          this.gradeOptions.push({className:"+ 添加班级",id:9981});
        });
        //学籍状态查询
        getVague({dictType:"student_status", dictLabel:""}).then(response => {
          this.workStatusOptions = response.data;
        });
        //学生类别查询
        getVague({dictType:"education",dictLabel:""}).then(response => {
          this.educationOptions = response.data;
        });
      },
      //新增班级关闭
      gradeOpenOff(){
        this.gradeOpen = false;
      },
      //新增班级提交
      gradeOpenUp(){
        this.$refs["gradeForm"].validate(valid => {
          if (valid) {
            let obj = {
              className:this.gradeForm.gradeName,
            }
            addSystemClass(obj).then(response => {
              this.gradeOptions.unshift({className:response.data.classObject.className,id:response.data.classObject.id});
              this.form.grade = response.data.classObject.id;
              this.gradeOpen = false;
              this.msgSuccess(response.msg);
            });
          }
        });
      },
      //账号启用停用开关
      changeIsNeedCaptcha(){
        this.form.status = this.form.status == 1?0:1;
      },
      //*************************学籍状态查询
      workStatusSelect(query){
        if (query !== '') {
          let obj = {
            dictType:"student_status",
            dictLabel:query
          };
          getVague(obj).then(response => {
            this.workStatusOptions = response.data;
          });
        } else {
          this.workStatusOptions = [];
        }
      },
      //学籍状态选中触发
      workStatusSelectClick(data){
        console.log("学籍状态选中触发",data)
      },
      //学籍状态清空触发
      workStatusClearClick(){
        console.log("学籍状态清空触发")
        getVague({dictType:"student_status", dictLabel:""}).then(response => {
          this.workStatusOptions = response.data;
        });
      },
      //*************************学生类别查询
      educationSelect(query){
        if (query !== '') {
          let obj = {
            dictType:"education",
            dictLabel:query
          };
          getVague(obj).then(response => {
            this.educationOptions = response.data;
          });
        } else {
          this.educationOptions = [];
        }
      },
      //学生类别选中触发
      educationSelectClick(data){
        console.log("学生类别选中触发",data)
      },
      //学生类别清空触发
      educationClearClick(){
        console.log("学生类别清空触发")
        getVague({dictType:"education",dictLabel:""}).then(response => {
          this.educationOptions = response.data;
        });
      },
      //*************************班级查询
      gradeSelectNull(type){
        if(!type&&!this.gradeOptions[1]){
          this.gradeSelectAll();
        }
      },
      gradeSelectAll(){
        let obj = {
          className:'',
        }
        getWorkList(obj).then(response => {
          this.gradeOptions = response.data;
          this.gradeOptions.push({className:"+ 添加班级",id:9981});
        });
      },
      gradeSelect(query){
        if (query !== '') {
          let obj = {
            className:query,
          }
          getWorkList(obj).then(response => {
            this.gradeOptions = response.data;
            this.gradeOptions.push({className:"+ 添加班级",id:9981});
          });
        } else {
          this.optionsUser = [];
        }
      },
      //班级选中触发
      gradeSelectClick(data){
        console.log("班级选中触发",data);
        if(data == 9981){
          this.gradeForm.gradeName = "";
          this.form.grade = "";
          this.gradeOpen = true;
        }
      },
      //班级清空触发
      gradeClearClick(){
        console.log("班级清空触发")
        this.gradeSelectAll();
      },
      //*************************专业查询
      majorSelectNull(type){
        console.log("type",type);
        if(!type&&!this.majorOptions[0]){
          this.majorSelectAll();
        }
      },
      majorSelectAll(){
        let obj = {
          majorName:'',
        };
        getMajorList(obj).then(response => {
          this.majorOptions = response.data;
        });
      },
      majorSelect(query){
        if (query !== '') {
          let obj = {
            majorName:query,
          };
          getMajorList(obj).then(response => {
            this.majorOptions = response.data;
          });
        } else {
          this.majorOptions = [];
        }
      },
      //专业选中触发
      majorSelectClick(data){
        console.log("专业选中触发",data)
      },
      //专业清空触发
      majorClearClick(){
        console.log("专业清空触发")
        this.majorSelectAll();
      },
      //*************************导师查询
      tutorUserSelect(query){
        if (query !== '') {
          let obj = {
            nickName:query,
          }
          getTeacherOption(obj).then(response => {
            this.tutorUserOptions = response.data;
          });
        } else {
          this.tutorUserOptions = [];
        }
      },
      //导师选中触发
      tutorUserSelectClick(data){
        console.log("导师选中触发",data)
      },
      //导师清空触发
      tutorUserClearClick(){
        console.log("导师清空触发")
        this.tutorUserOptions = [];
      },
      //获取学院列表
      listDepartments(){
        listDepartments().then(response => {
          this.deptOptions = response.data;
        });
      },
      //上传
      handleAvatarSuccess(res, file) {
        console.log(res.data.url);
        this.form.avatar = res.data.url;
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        console.log('file',file);
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif格式图片');
          type = false;
        }
        return type;
      },
      //导入用户权限
      importUser(){
        this.$refs.userOpen.show();
      },
      //返回事件
      outPageButton(){
        this.$parent.outPage(1);
      },
      //模板选中
      templateClick(id){
        let self = this;
        if(this.templateKey != id){
          this.templateKey = id;
          for(let i=0;i<self.templateList.length;i++){
            if(id == self.templateList[i].id){
              this.templateName = self.templateList[i].name;
            }
          }
        }else{
          this.templateKey = "";
          this.templateName = "";
        }
      },
      //清除模板选中
      templateDel(){
        this.templateKey = "";
        this.templateName = "";
      },
      //权限详情按钮
      permissionDetails(item){
        console.log('item',item)
        let num = 0;
        for(let i=0;i<item.children.length;i++){
          if(item.children[i].checkType){
            num++
          }
        }
        this.allCheckType = num != 0;
        this.$set(this,'permissionCheckData',item)
        this.permissionOpen = true;
      },
      //数据范围刷新
      optionChange(){
        this.$forceUpdate()
      },
      //模块勾选逻辑
      itemCheckClick(status,type,item){
        if(status == 1 || status == 2 || status == 3){
          //一级菜单勾选
          if(item.children){
            for(let i=0;i<item.children.length;i++){
              item.children[i].checkType = !!type;
              if(item.children[i].children){
                for(let o=0;o<item.children[i].children.length;o++){
                  item.children[i].children[o].checkType = !!type;
                  if(item.children[i].children[o].children){
                    for(let x=0;x<item.children[i].children[o].children.length;x++){
                      item.children[i].children[o].children[x].checkType = !!type;
                    }
                  }
                  if(item.children[i].children[o].menuType == 'C'){
                    item.children[i].children[o].scopeCheckType = !!type;
                    item.children[i].children[o].value = type?0:"";
                    item.children[i].children[o].permissionCheckType = !!type;
                  }
                }
              }
              if(item.children[i].menuType == 'C'){
                item.children[i].scopeCheckType = !!type;
                item.children[i].value = type?0:"";
                item.children[i].permissionCheckType = !!type;
              }
            }
          }
          if(item.menuType == 'C'){
            item.scopeCheckType = !!type;
            item.value = type?0:"";
            item.permissionCheckType = !!type;
          }
        }else if(status == 4){
          //数据范围勾选
          item.scopeCheckType = !!type;
          item.value = type?0:"";
        }else if(status == 5){
          //管理权限勾选
          item.permissionCheckType = !!type;
          for(let i=0;i<item.children.length;i++){
            item.children[i].checkType = !!type;
          }
        }
      },
      //权限勾选逻辑
      permissionCheckClick(status,type){
        let self = this;
        if(status == 1){
          for(let i=0;i<self.permissionCheckData.children.length;i++){
            self.permissionCheckData.children[i].checkType = !!type;
            self.permissionCheckData.permissionCheckType = !!type;
          }
        }else if(status == 2){
          if(type&&!this.allCheckType){
            this.allCheckType = true;
            this.permissionCheckData.permissionCheckType = true;
          }else{
            let num = 0;
            for(let i=0;i<self.permissionCheckData.children.length;i++){
              if(!self.permissionCheckData.children[i].checkType){
                num++
              }
            }
            if(num == self.permissionCheckData.children.length){
              this.allCheckType = false;
              this.permissionCheckData.permissionCheckType = false;
            }
          }
        }
        this.$forceUpdate();
      },
      showText(){
        console.log("1")
        this.textType = true;
      },
      hideText(){
        console.log("2")
        this.textType = false;
      },
    }
  }
</script>

<style scoped lang="scss">
  .student-add-page{
    flex:1;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:0 0 20px!important;
    *{
      margin:0;
    }
    .top-title-box{
      border-bottom:1px solid #E0E0E0;
      display: flex;
      p:nth-child(1){
        color:#0045AF;
        line-height:80px;
        margin-left:24px;
        font-size:18px;
        flex:1;
      }
      p:nth-child(2){
        border:1px solid #0045AF;
        color:#0045AF;
        width:80px;
        height:30px;
        text-align: center;
        font-size:16px;
        border-radius: 6px;
        line-height:30px;
        margin:25px 20px 0 0;
        cursor: pointer;
      }
    }
    .top-info-box{
      display: flex;
      padding:40px 20px 0;
      .left-info-box{
        margin-right:20px;
        img{
          width:100px;
          height:120px;
        }
        p{
          width: 80px;
          height: 26px;
          border: 1px solid #0183FA;
          border-radius: 6px;
          line-height:24px;
          font-size:12px;
          color:#0183FA;
          text-align: center;
          margin:24px 10px;
        }
      }
    }
    .for-button-list{
      background: #E5F2FE;
      margin:0 20px;
      display: flex;
      .for-title-p{
        width:175px;
        height:80px;
        line-height:80px;
        font-size:16px;
        color:#333;
        text-align: center;
      }
      .for-button-max-box{
        flex:1;
        .for-button-min-box{
          font-size:16px;
          display: inline-block;
          overflow: hidden;
          height:30px;
          line-height:30px;
          border-radius:6px;
          margin:25px 28px 0 0;
          cursor: pointer;
          i{
            height:30px;
            line-height:30px;
            font-size:16px;
            color:#fff;
            margin-right:6px;
          }
        }
        .colorAA{
          color: #ffffff;
          background: #0183FA;
          padding:0 26px 0 16px;
        }
        .colorBB{
          padding:0 26px;
          color: #333;
          background: #E0E0E0;
        }
      }
    }
    .template-name-box{
      display: flex;
      .template-name-p{
        font-weight:500;
        height:80px;
        line-height:80px;
        font-size:16px;
        color:#333;
        margin-left:20px;
        flex: 1;
      }
      .template-name-button{
        width:80px;
        height:40px;
        line-height:40px;
        margin:20px 20px 0 0;
      }
      .template-name-button-one{
        width:180px;
        height:40px;
        line-height:40px;
        margin:20px 40px 0 0;
        color:#fff;
        background: #0183FA;
        border: 1px solid #E0E0E0;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        border-radius: 6px;
      }
    }
    .table-for-max-box{
      border:1px solid #D7D7D7;
      margin:0 20px;
      *{
        margin:0;
        padding:0;
      }
      .table-title-box{
        background: rgba(1,131,250,0.1);
        display: flex;
        p{
          font-size:14px;
          font-weight:700;
          color:#333;
          line-height:48px;
          padding-left:20px;
        }
        p:nth-child(1){
          width:615px;
          border-right:1px solid #D7D7D7;
        }
      }
      .table-for-big-box{
        border-top:1px solid #D7D7D7;
        display: flex;
        font-size:14px;
        .max-title-box-null{
          width:615px!important;
        }
        .max-title-box{
          width:230px;
          border-right:1px solid #D7D7D7;
          min-height:48px;
          position: relative;
          p{
            position: absolute;
            top:50%;
            left:20px;
            height:18px;
            line-height:18px;
            margin-top:-9px;
          }
        }
        .max-right-box{
          flex:5;
          min-height:48px;
          .big-box:nth-child(1){
            border:none!important;
          }
          .big-box-null{
            line-height:48px;
            margin-left:20px;
            color:#606266;
          }
          .big-box{
            display: flex;
            border-top:1px solid #D7D7D7;
            .big-title-box-null{
              width:385px!important;
            }
            .big-title-box{
              width:180px;
              border-right:1px solid #D7D7D7;
              min-height:48px;
              position: relative;
              overflow: hidden;
              p{
                position: absolute;
                top:50%;
                left:20px;
                height:48px;
                line-height:48px;
                margin-top:-24px;
              }
            }
            .big-right-box-null{
              display: flex;
              .scope-box{
                width:430px;
                position: relative;
                overflow: hidden;
                border-right:1px solid #D7D7D7;
                p{
                  position: absolute;
                  top:50%;
                  left:20px;
                  height:48px;
                  line-height:48px;
                  margin-top:-24px;
                }
              }
              .permission-box{
                flex:1;
                position: relative;
                overflow: hidden;
                display: flex;
                .check-left-p{
                  margin-left:20px;
                  height:48px;
                  line-height:48px;
                }
                .check-button-box{
                  width:130px;
                  height:36px;
                  margin:6px 0 0 36px;
                  line-height:36px;
                  display: flex;
                  color:#333;
                  cursor: pointer;
                  img{
                    width:16px;
                    height:16px;
                    margin:10px 14px 0 19px;
                  }
                }
                .check-button-box-colorA{
                  background: #CCE6FE;
                  color:#0183FA;
                }
                .check-button-box-colorB{
                  background: #E0E0E0;
                  color:#333;
                }
              }
            }
            .big-right-box{
              flex:5;
              min-height:48px;
              .min-box:nth-child(1){
                border:none!important;
              }
              .min-box{
                display: flex;
                border-top:1px solid #D7D7D7;
                .min-title-box{
                  width:205px;
                  border-right:1px solid #D7D7D7;
                  min-height:48px;
                  position: relative;
                  overflow: hidden;
                  p{
                    position: absolute;
                    top:50%;
                    left:20px;
                    height:48px;
                    line-height:48px;
                    margin-top:-24px;
                  }
                }
                .min-right-box{
                  flex:5;
                  min-height:48px;
                  display: flex;
                  .scope-box{
                    width:430px;
                    position: relative;
                    overflow: hidden;
                    border-right:1px solid #D7D7D7;
                    p{
                      position: absolute;
                      top:50%;
                      left:20px;
                      height:48px;
                      line-height:48px;
                      margin-top:-24px;
                    }
                  }
                  .permission-box{
                    flex:1;
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    .check-left-p{
                      margin-left:20px;
                      height:48px;
                      line-height:48px;
                    }
                    .check-button-box{
                      width:130px;
                      height:36px;
                      margin:6px 0 0 36px;
                      line-height:36px;
                      display: flex;
                      color:#333;
                      cursor: pointer;
                      img{
                        width:16px;
                        height:16px;
                        margin:10px 14px 0 19px;
                      }
                    }
                    .check-button-box-colorA{
                      background: #CCE6FE;
                      color:#0183FA;
                    }
                    .check-button-box-colorB{
                      background: #E0E0E0;
                      color:#333;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .bottom-button-box{
      display: flex;
      width:100px;
      margin:30px auto 10px;
      p:nth-child(1){
        width:100px;
      }
    }
  }
</style>
<style lang="scss">
  .student-add-page{
    .top-info-box{
      .el-form-item{
        height:70px;
      }
      .el-input--small{
        width:180px!important;
      }
      .el-select{
        width:180px!important;
      }
      .el-input{
        width:180px!important;
      }
      .el-input__inner{
        width:180px!important;
      }
      .el-radio-group{
        width:180px!important;
      }
      .is-disabled{
        width:180px!important;
      }

      .switch .el-switch__label {
        position: absolute;
        display: none;
        color: #fff !important;
      }
      .switch .el-switch__label--right {
        z-index: 1;
      }
      .switch .el-switch__label--right span{
        margin-left: 10px;
      }
      .switch .el-switch__label--left {
        z-index: 1;
      }
      .switch .el-switch__label--left span{
        margin-left: 24px;
      }
      .switch .el-switch__label.is-active {
        display: block;
      }
      .switch.el-switch .el-switch__core,
      .el-switch .el-switch__label {
        width: 64px !important;
        margin: 0;
      }
    }
  }
</style>