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

<!--学生管理-->
<template>
  <div class="app-container student">
    <div v-if="pageType == 1" class="student-one-box">
      <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" v-show="showSearch">
        <!--v-hasPermi="['laboratory:plan:add']"-->
        <el-form-item label="关键字" prop="searchValue" label-width="58px">
          <el-input
            maxLength="20"
            v-model="queryParams.searchValue"
            placeholder="姓名/学号/导师/电话"
            clearable
            size="small"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="专业" prop="majorId" label-width="60px">
          <el-select v-model="queryParams.majorId" clearable placeholder="请选择专业">
            <el-option
              v-for="item in professionOptions"
              :key="item.id"
              :label="item.majorName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="deptId" label-width="80px">
          <el-select v-model="queryParams.deptId" clearable placeholder="请选择学院">
            <el-option
              v-for="item in collegeOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status" label-width="60px">
          <el-select v-model="queryParams.status" clearable placeholder="请选择状态">
            <el-option :key="0" label="启用" :value="0"></el-option>
            <el-option :key="1" label="停用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="importButton" v-hasPermi="['system:user_student:import']">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_dr.png">
              <p>导入</p>
              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}" v-hasPermi="['system:user_student:exceltemplate']">下载模板</el-dropdown-item>
              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导入数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="exportButton" v-hasPermi="['system:user_student:export']">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.png">
              <p>导出</p>
              <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">导出全部数据</el-dropdown-item>
              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导出选中数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-col :span="1.5" v-hasPermi="['system:user_student:add']">
            <p class="add-button-one-90"
               @click="addButton"
            ><i class="el-icon-plus"></i>新增</p>
          </el-col>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
      </el-form>
      <el-table  border :data="userList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="序号"  width="50" align="center"  type="index"/>
        <el-table-column label="姓名" align="left" prop="nickName"/>
        <el-table-column label="学号" align="left" prop="userName" width="180">
          <template slot-scope="scope">
            <div style="display: flex">
              <span style="flex:1;">{{scope.row.userName}}</span>
              <el-switch
                @click.native="changeIsNeedCaptcha(scope.row)"
                class="switch captcha-img"
                active-value="0"
                inactive-value="1"
                active-color="#0183FA"
                inactive-color="#999"
                v-model="scope.row.status"
                active-text="启用"
                inactive-text="停用"
                disabled
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="left" prop="phonenumber" show-overflow-tooltip width="162"/>
        <el-table-column label="学院" align="left" prop="deptName" show-overflow-tooltip width="200"/>
        <el-table-column label="专业" align="left" prop="major" show-overflow-tooltip width="180"/>
        <el-table-column label="学生类别" align="left" prop="education" show-overflow-tooltip width="149"/>
        <el-table-column label="班级" align="center" prop="gradeName" show-overflow-tooltip width="100"/>
        <el-table-column label="导师" align="center" prop="tutorUserName" show-overflow-tooltip width="150"/>
        <el-table-column label="操作" align="left" width="160" class-name="small-padding fixed-width" v-if="tableButtonType">
          <template slot-scope="scope">
            <div class="button-box">
              <p class="table-min-button"
                 style="margin-left:20px;"
                 v-hasPermi="['system:user_student:query']"
                 @click="infoButton(scope.row)"
              >详情</p>
              <el-dropdown @command="moreClick" v-hasPermi="['system:user_student:query','system:user_student:edit','system:user_student:remove','system:user_student:resetpwd']">
                <p class="table-min-button">更多>></p>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{row:scope.row,command:1}"
                                    v-hasPermiAnd="['system:user_student:query','system:user_student:edit']">编辑</el-dropdown-item>
                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{row:scope.row,command:2}"
                                    v-hasPermi="['system:user_student:remove']">删除</el-dropdown-item>
                  <el-dropdown-item style="margin:0 10px;" :command="{row:scope.row,command:3}"
                                    v-hasPermi="['system:user_student:resetpwd']">重置密码</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;height:32px;margin-top:15px;">
        <!--<p style="flex:4;"></p>-->
        <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
          <i class="el-icon-warning" style="color:#0183FA;"></i>
          已选择 {{selectedNum}} 项
        </p>
        <div style="flex:5;">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
    <add-page v-if="pageType == 2" :editType="editType" :propsData="propsData" :titleName="titleName"></add-page>
    <!--重置密码-->
    <el-dialog title="重置密码" :visible.sync="reviseOpen" width="600px" append-to-body class="teacher-revise-dialog-box">
      <el-form :model="passwordForm" ref="passwordForm" :inline="true" :rules="rules" class="addCheckPage-min">
        <el-form-item label="新密码" prop="password" label-width="110px" >
          <el-input type="password" v-model="passwordForm.password" clearable maxlength="20" style="width:420px;" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPassword" label-width="110px">
          <el-input type="password" v-model="passwordForm.newPassword" clearable maxlength="20" style="width:420px;" placeholder="请确认新密码"/>
        </el-form-item>
      </el-form>
      <!--<p class="teacher-text-p">确定要重置该账号的密码吗？</p>-->
      <!--<p class="teacher-text-p">确定操作后，该账号密码将重置为系统初始密码。</p>-->
      <div slot="footer" class="teacher-revise-dialog-button-box">
        <p class="reset-button-one" @click="reviseOpenOff">取消</p>
        <p class="inquire-button-one" @click="putUserResetPwd">确定</p>
      </div>
    </el-dialog>
    <!--导入窗口-->
    <el-dialog title="导入数据" :visible.sync="importOpen" @close="importOpenOff" width="600px" append-to-body class="teacher-import-dialog-box">
      <el-upload
        class="teacher-import-dialog-upLoad-box"
        :drag="true"
        :data="upImportData"
        :action="uploadImgUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :headers="headers"
        :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upImportData.upDate">是否更新已经存在的用户数据</el-checkbox>
        </div>
        <div class="el-upload__tip" slot="tip">仅允许导入xls、xlsx、格式文件。<span style="color:#0183FA;cursor: pointer" v-hasPermi="['system:user_student:exceltemplate']" @click="importTemplate">下载模板</span></div>
        <div class="el-upload-text-box" slot="tip" v-if="getImportData.downFile">
          <div class="img-text-box">
            <img src="@/assets/ZDimages/personnelManagement/icon_dr_wj.png">
            <p>{{getImportData.textName}}</p>
          </div>
          <p class="text-p">数据导入成功 <span style="color:#0183FA;">{{getImportData.successNum}}</span> 条，失败 <span style="color:#FF6464 ;">{{getImportData.failureNum}}</span> 条</p>
          <div class="img-text-box">
            <img src="@/assets/ZDimages/personnelManagement/icon_dr_sj.png">
            <p style="color:#0183FA;cursor: pointer;" @click="failureExcel">点击下载失败数据报表</p>
          </div>
        </div>
      </el-upload>
      <div slot="footer" class="teacher-import-dialog-button-box">
        <p class="inquire-button-one" @click="importOpenOff">确定</p>
      </div>
      <div class="teacher-import-dialog-position-box" v-if="loading"></div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { listDepartments } from "@/api/system/dept";
import { getAuthRole, updateAuthRole, resetUserPwd } from "@/api/system/user";
import { listUser, getUser, delUser, addUser, updateUser, changeUserStatus,getListAll, putUserTeacher,putUserResetPwd,delUserInfo,getStudentInfo } from "@/api/system/user_student";
import { optionUser } from "@/api/system/user_teacher";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import {listMajorAll} from "@/api/system/major";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import addPage from "./addPage.vue"

export default {
  name: "User",
  components: {
    addPage
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.passwordForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      tableButtonType:this.hasPermiDom(['system:user_student:query','system:user_student:query','system:user_student:edit','system:user_student:remove','system:user_student:resetpwd']),
      uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/system/user/student/importData", // 上传地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      //专业列表
      majorList:[],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: [],
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      //专业列表
      professionOptions:[],
      //学院列表
      collegeOptions:[],
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 日期范围
      dateRange: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/system/user/importData"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        searchValue: "",
        majorId: "",
        deptId: "",
        status: "",
      },
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true }
      ],
      // 表单校验
      rules: {
        password: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '新密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: "确认新密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '确认新密码长度必须介于 5 和 20 之间', trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
      },
      //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
      selectedNum:0,
      //页面选项
      pageType:1,
      editType:false,
      //组件传参数据
      propsData:{},
      //弹窗状态
      shadeType:1,
      // 教师列表
      teacherList: [],
      //学院列表
      deptList:[],
      // 新增学生开关
      addStudentType:false,
      addTitle:"",
      addForm:{
          tutorUserName:"",
          tmpTutorUserId:"",
      },
      subForm:{
          tutorUserName:""
      },
      // 重置密码弹层开关
      reviseOpen: false,
      //导入弹层开关
      importOpen:false,
      //导入数据
      upImportData:{
        sysUserEnable:true,
        upDate:false,
      },
      getImportData:{
        downFile:false,
        successNum:0,
        failureNum:0,
        textName:"",
      },
      //重置密码id
      resetPwdId:"",
      passwordForm:{
        password:"",
        newPassword:"",
      },
      currentDate:'',
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getListAll();
    this.listDepartments();
    this.getDicts("sys_user_sex").then(response => {

    });
    this.getConfigKey("sys.user.initPassword").then(response => {

    });
  },
  methods: {
    //关闭重置密码页面
    reviseOpenOff(){
      this.reviseOpen = false;
      this.resetPwdId = "";
    },
    //重置密码
    putUserResetPwd(){
      this.$refs["passwordForm"].validate(valid => {
        if (valid) {
          let obj = {
            userId : this.resetPwdId,
            password:this.passwordForm.password
          };
          putUserResetPwd(obj).then(response => {
            this.reviseOpen = false;
            this.msgSuccess(response.msg)
          });
        }
      });
    },
    //启用/停用
    changeIsNeedCaptcha(row){
      let obj = {
        userId:row.userId,//用户id
        userName:row.userName,//用户账户
        status:row.status == 1?'0':'1',//账户启用停用，0是启用，1是停用
      }
      putUserTeacher(obj).then(response => {
        row.status = row.status == 1?'0':'1';
        this.msgSuccess(response.msg)
      });
    },
    //获取学院列表
    listDepartments(){
      listDepartments().then(response => {
        this.collegeOptions = response.data;
      });
    },
    // 查询专业列表
    getListAll(){
      getListAll().then(response => {
        this.professionOptions = response.data;
      });
    },
    outPage(){
      this.pageType = 1;
      this.getList();
    },
    //新增按钮
    addButton(){
      this.pageType = 2;
      this.propsData = {};
      this.titleName = '新增学生';
      this.editType = false;
    },
    //详情按钮
    infoButton(row){
      getStudentInfo(row.userId).then(response => {
        this.propsData = response.data;
        this.titleName = '学生详情';
        this.editType = true;
        this.pageType = 2;
      });
    },
    //更多选项
    moreClick(item){
      let self = this;
      if(item.command == 1){
        getStudentInfo(item.row.userId).then(response => {
          this.titleName = '学生编辑';
          this.propsData = response.data;
          this.editType = false;
          this.pageType = 2;
        });
      }else if(item.command == 2){
        this.$confirm('确认要删除吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          //  确定
          delUserInfo(item.row.userId).then(response => {
            self.msgSuccess(response.msg);
            self.getList();
          });
        }).catch(function() {});
      }else if(item.command == 3){
        this.reset();
        this.title = "重置密码";
        this.resetPwdId = item.row.userId;
        this.reviseOpen = true;
      }
    },
    //=========表格扩展选择器方法---开始=========
    //选择本页
    selectPage(){
      console.log(this.$refs.multipleTable)
      this.$refs.multipleTable.toggleAllSelection()
      // console.log(this.$refs.multipleTable.selection)
    },
    //清除选择
    clearSelection(){
      this.$refs.multipleTable.clearSelection()
    },
    /*===记录勾选数据===
      需要再el-table 添加  :row-key="getRowKeys"
      需要在selection 添加 :reserve-selection="true"
    */
    getRowKeys(row) {
      return row.id
    },
    //=========表格扩展选择器方法---结束=========
    /** 查询用户列表 */
    getList() {
      // this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          // this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        newPassword: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      // this.resetForm("queryForm");
      this.$set(this,'queryParams',{
        pageNum: 1,
        pageSize:20,
        searchValue: "",
        majorId: "",
        deptId: "",
        status: "",
      });
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedNum = selection.length;
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const userId = row.userId || this.ids;
      getUser(userId).then(response => {
        this.form = response.data;
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.form.postIds = response.postIds;
        this.form.roleIds = response.roleIds;
        this.open = true;
        this.title = "修改用户";
        this.form.password = "";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
        debugger
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          if (this.addForm.userId != undefined) {
            console.log("this.addForm",this.addForm)
            this.subForm=this.addForm;
            if(!(!isNaN(this.addForm.tutorUserId) && typeof this.addForm.tutorUserId === 'number')){
                this.subForm.tutorUserId=this.addForm.tmpTutorUserId;
            }
            updateUser(this.subForm).then(response => {
              this.msgSuccess("修改成功");
              this.addStudentType = false;
              this.getList();
            });
          } else {
            this.addForm.password = '123456';
            addUser(this.addForm).then(response => {
              this.msgSuccess("新增成功");
              this.addStudentType = false;
              this.getList();
            });
          }
        }
      });
    },
    //导入页面关闭
    importOpenOff(){
      this.importOpen = false;
      this.getImportData.downFile = false;
      this.getImportData.successNum = 0;
      this.getImportData.failureNum = 0;
      this.getImportData.textName = "";
    },
    /** 导入按钮操作 */
    importButton(item){
      if(item.command == 1){
        //  下载模板
        this.download('/system/user/student/importTemplate', {}, `导入模板.xlsx`)
      }else if(item.command == 2){
        //  导入数据
        console.log('导入数据');
        this.importOpen = true;
      }
    },
    /** 当前时间 */
    getCurrentTime () {
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      return yy + '-' + mm + '-' + dd
    },
    /** 导出按钮操作 */
    exportButton(item) {
      let self = this;
      this.currentDate=this.getCurrentTime()
      if(item.command == 1){
        self.$confirm(`确认导出全部数据?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          self.download('/system/user/student/export/', {...self.queryParams}, '学生信息-'+this.currentDate+'.xlsx')
        }).catch(() => {})
      }else if(item.command == 2){
        if(self.ids.length>0) {
          self.$confirm(`确认导出选中数据?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            let ids = self.ids.join(',');
            let obj = {
              ids :ids
            }
            self.download(`/system/user/student/export/`,obj, '学生信息-'+this.currentDate+'.xlsx')
          }).catch(() => {})
        }else {
          Message({
            message: "请选择要导出的数据",
            type: 'error'
          });
        }
      }
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('/system/user/student/importTemplate', {}, `导入模板.xlsx`)
    },
    /*下载失败列表*/
    failureExcel(){
      this.download('/system/user/student/importErrorData', {}, `失败报表.xlsx`)
    },
    //****************************************导入功能**************************************
    handleAvatarSuccess(res, file) {
      if(res.code == 200){
        this.getImportData.downFile = res.data.downFile
        this.getImportData.successNum = res.data.successNum
        this.getImportData.failureNum = res.data.failureNum
        // this.importOpen = false;
        // this.getList();
      }else{
        this.msgError(res.msg);
      }
      this.loading = false;
    },
    beforeAvatarUpload(file) {
      let type = false;
      console.log('file',file);
      if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type == 'application/vnd.ms-excel') {
        this.getImportData.textName = file.name;
        type = true;
        this.loading = true;
      }else{
        this.$message.error('只能上传xls/xlsx格式文件');
        type = false;
      }
      return type;
    },
  }
};
</script>

<style scoped lang="scss">
  .student {
    display: flex!important;
    flex-direction: column;
    overflow: hidden!important;
    .sheet-expand-box{
      height:40px;
      display:flex;
      background:rgba(1,131,250,0.1);
      border-radius: 5px;
      margin-bottom:18px;
      font-size:14px;
      i{
        margin:10px 16px 0 14px;
        height:20px;
        width:20px;
        font-size:20px;
        display: block;
      }
      p{
        margin:0;
      }
      p:nth-child(2){
        width:132px;
        font-size:14px;
        height:40px;
        line-height:40px;
      }
      p:nth-child(3){
        width:60px;
        font-size:14px;
        height:40px;
        line-height:40px;
        margin-right:20px;
      }
      p:nth-child(4){
        width:60px;
        font-size:14px;
        height:40px;
        line-height:40px;
        margin-right:20px;
      }
      p:nth-child(5){
        font-size:14px;
        line-height:30px;
        width: 100px;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        margin-top:5px;
        margin-right:20px;
      }
      p:nth-child(6){
        font-size:14px;
        line-height:30px;
        width: 100px;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        margin-top:5px;
      }
    }
    .button-box{
      width:300px;
      display: flex;
    }
    .data-max-box{
      position:relative;
      margin-top:-20px;
      p{
        margin:0;
      }
      .info-title-p{
        line-height:80px;
        font-size:18px;
        padding-left:20px;
        border-bottom:1px solid #E0E0E0;
      }
      .info-data-box{
        height:100px;
        display:flex;
        padding-left:20px;
        p{
          width:270px;
          line-height:60px;
          font-size:16px;
        }
      }
      .reset-button-p{
        position: absolute;
        right:0;
        top:20px;
        cursor: pointer;
        text-align: center;
        width: 70px;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        font-size:14px;
        border: 1px solid #DCDFE6;
        color: #606266;
        background: #ffffff;
      }
    }
    .student-one-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden!important;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      padding:20px!important;
      .top-max-box{
        flex:1;
        display: flex;
        overflow: hidden!important;
        .left-max-box{
          width:250px;
        }
        .center-max-box{
          border-right:2px dashed #E0E0E0;
          margin-right:50px;
          margin-top:20px;
        }
        .right-max-box{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden!important;
          .min-list-box{
            flex: 1;
            overflow: hidden!important;
            display: flex;
            margin-bottom:15px;
          }
        }
      }
      .bottom-max-box{
        height:35px;
      }
      .form-box{
        .form-dropdown-box{
          display: flex;
          margin:0;
          padding:0 10px;
          cursor: pointer;
          height:40px;
          img:nth-child(1){
            width:16px;
            height:16px;
            margin-top:12px;
          }
          p{
            width:47px;
            text-align: center;
            font-size:14px;
            margin:0;
            line-height:40px;
          }
          img:nth-child(3){
            width:10px;
            height:6px;
            margin-top:17px;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .teacher-revise-dialog-box{
    .teacher-text-p{
      margin-left:110px;
      font-size:16px;
    }
    .teacher-revise-dialog-button-box{
      display: flex;
      width:190px;
      margin:0 auto;
      p{
        margin:0;
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
      }
      p:nth-child(1){
        margin-right:50px;
      }
    }
  }
  .teacher-import-dialog-box{
    .teacher-import-dialog-upLoad-box{
      .el-upload{
        width:450px;
        margin:0 55px;
        .el-upload-dragger{
          width:450px;
          .el-icon-upload{
            font-size:100px;
            color:#CBE6FE;
          }
          .el-upload__text{
            margin-top:20px;
          }
        }
      }
      .el-upload__tip{
        margin-left:60px;
        font-size:14px;
        margin-top:10px;
      }
      .el-upload-text-box{
        background: #F5F5F5;
        border-radius: 10px;
        margin:15px 30px 0;
        padding:0 20px 15px;
        overflow: hidden;
        *{
          margin:0;
        }
        .img-text-box{
          display: flex;
          margin-top:15px;
          img{
            width:16px;
            height:16px;
            margin-right:13px;
          }
          p{
            height:16px;
            line-height:16px;
            font-size:12px;
          }
        }
        .text-p{
          margin-top:15px;
          margin-left:29px;
          height:16px;
          line-height:16px;
          font-size:12px;
        }
      }
    }
    .teacher-import-dialog-button-box{
      display: flex;
      width:190px;
      margin:0 auto;
      p{
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
        margin:0 auto;
      }
    }
    .teacher-import-dialog-position-box{
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
      z-index: 999;
      background: rgba(255,255,255,0.4);
      border-radius:20px;
    }
  }
</style>
<style lang="scss">
  .student{
    .student-one-box{
      .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>