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: this.uploadUrl(), // 上传的图片服务器地址
      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 => {
              if(response.code==200){
                this.msgSuccess(response.msg)
                this.outPageButton()
              }else if(response.code==205){
                this.$confirm(response.msg, "警告", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }).then(() => {
                  //  确定
                  this.$router.push({ path: '/comprehensive/laboratoryManagement/accessAuthorization' });
                }).catch(function() {
                  //  取消
                  this.outPageButton();
                });
              }

            });
          }else{
            //新增
            addUserStudent(this.form).then(response => {
              if(response.code==200){
                this.msgSuccess(response.msg)
                this.outPageButton()
              }else if(response.code==205){
                this.$confirm(response.msg, "警告", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }).then(() => {
                  //  确定
                  this.$router.push({ path: '/comprehensive/laboratoryManagement/accessAuthorization' });
                }).catch(function() {
                  //  取消
                  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>