FE-V2-PC/src/views/comprehensive/personnel/teacher/addPageOne.vue

<!--教职工管理新增/编辑(针对空军四医大项目 去除了检查者相关字段)-->
<template>
  <div class="teacher-add-page">
    <div class="public-form-box scrollbar-box">
      <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.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-cascader
              :disabled="editType"
              :show-all-levels="false"
              v-model="form.deptId"
              :options="deptOptions"
              :props="{ checkStrictly: true, value: 'id', label: 'label',emitPath:false  }"></el-cascader>
          </el-form-item>
          <el-form-item label="身份：" prop="position">
            <el-select
              :disabled="editType"
              v-model="form.position"
              filterable
              remote
              clearable
              reserve-keyword
              @change="positionSelectClick"
              @clear="positionClearClick"
              placeholder="请选择身份"
              :remote-method="positionSelect">
              <el-option
                v-for="item in positionOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码：" prop="phonenumber">
            <el-input
              :disabled="editType"
              style="width:218px;"
              maxlength="25"
              onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
              v-model="form.phonenumber"
              placeholder="请输入手机号码"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="职称：" prop="category">
            <el-select
              :disabled="editType"
              v-model="form.category"
              filterable
              remote
              clearable
              reserve-keyword
              @change="categorySelectClick"
              @clear="categoryClearClick"
              placeholder="请选择身份"
              :remote-method="categorySelect">
              <el-option
                v-for="item in categoryOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </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="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="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="dateBirth">
            <el-date-picker
              :disabled="editType"
              v-model="form.dateBirth"
              type="date"
              placeholder="请选择出生日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="在职状态：" prop="nature">
            <el-switch
              v-if="!editType"
              @click.native="natureCaptcha"
              class="switch captcha-img"
              active-value="0"
              inactive-value="1"
              active-color="#29B24D"
              inactive-color="#999"
              v-model="form.nature"
              active-text="在职"
              inactive-text="离职"
              disabled
            ></el-switch>
            <p v-if="editType" style="line-height:40px;color:#999;width:180px;padding-left:40px;">{{form.nature==0?'在职':'离职'}}</p>
          </el-form-item>
          <!--<el-form-item label="安全检查人员：" prop="isCheck">-->
          <!--<el-switch-->
          <!--v-if="!editType"-->
          <!--@click.native="isCheckCaptcha"-->
          <!--class="switch captcha-img"-->
          <!--:active-value="1"-->
          <!--:inactive-value="0"-->
          <!--active-color="#0183FA"-->
          <!--inactive-color="#999"-->
          <!--v-model="form.isCheck"-->
          <!--active-text="是"-->
          <!--inactive-text="否"-->
          <!--disabled-->
          <!--&gt;</el-switch>-->
          <!--<p v-if="editType" style="line-height:40px;color:#999;width:180px;padding-left:40px;">{{form.isCheck==0?'否':'是'}}</p>-->
          <!--</el-form-item>-->
          <el-form-item label="账号状态：" prop="status" v-if="form.nature == 0">
            <el-switch
              v-if="!editType"
              @click.native="statusCaptcha"
              class="switch captcha-img"
              active-value="0"
              inactive-value="1"
              active-color="#0183FA"
              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="top-title-one" v-if="!editType && form.status == 0">
        <p class="title-p">权限配置</p>
        <p class="el-icon-question img-p" @mouseenter="showText" @mouseout="hideText"></p>
        <div class="position-box" v-if="textType">
          <p>1、权限快捷模板：列出所有已创建的快捷模板，可选择快捷导入模板；导入后可修改或清空。</p>
          <p>2、模块菜单：选中父级，联动子级全部选中，可对子级单独勾选；子级选中，父级联动选中。</p>
          <p>3、数据范围：数据查看范围选择，默认展示所有数据。</p>
          <p>4、管理权限：功能操作权限，包含增删改查、启用、停用，以及导出等操作功能。</p>
          <p>5、详细配置：对底层菜单的功能操作进行细分权限勾选，功能操作按所属菜单页面现有的功能操作进行展示，可单选、全选。</p>
        </div>
      </div>
      <div class="for-button-list" v-if="!editType && form.status == 0">
        <p class="for-title-p">权限快捷模板：</p>
        <div class="for-button-max-box">
          <div class="for-button-min-box" v-for="(item,index) in templateList" :key="index"
               :class="templateKey == item.id?'colorAA':'colorBB'" @click="templateClick(item.id)">
            <i class="el-icon-success" v-if="templateKey == item.id"></i>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <div class="template-name-box" v-if="!editType && form.status == 0">
        <p class="template-name-p">当前导入模板：{{templateName?templateName:'无'}}</p>
        <p class="reset-button-one template-name-button" @click="templateDel">清除</p>
        <p class="template-name-button-one" @click="importUser">导入其他账号权限</p>
      </div>
      <div class="table-for-max-box" v-if="!editType && form.status == 0">
        <div class="table-title-box">
          <p>模块菜单</p>
          <p>权限</p>
        </div>
        <div class="table-for-big-box" v-for="(maxItem,maxIndex) in menuList" :key="maxIndex">
          <div class="max-title-box" :class="!maxItem.children?'max-title-box-null':''">
            <p><el-checkbox :disabled="maxItem.isRequired == 1" v-model="maxItem.checkType" @change="(type)=>itemCheckClick(1,type,maxItem)">{{maxItem.menuName}}</el-checkbox></p>
          </div>
          <div class="max-right-box">
            <div class="big-box" v-for="(bigItem,bigIndex) in maxItem.children" :key="bigIndex">
              <div class="big-title-box" :class="bigItem.menuType == 'C'?'big-title-box-null':''">
                <p><el-checkbox :disabled="bigItem.isRequired == 1" v-model="bigItem.checkType" @change="(type)=>itemCheckClick(2,type,bigItem,maxItem)">{{bigItem.menuName}}</el-checkbox></p>
              </div>
              <div class="big-right-box" v-if="bigItem.menuType !='C'">
                <div class="min-box" v-for="(minItem,minIndex) in bigItem.children" :key="minIndex">
                  <div class="min-title-box">
                    <p><el-checkbox :disabled="minItem.isRequired == 1" v-model="minItem.checkType" @change="(type)=>itemCheckClick(3,type,minItem,bigItem,maxItem)">{{minItem.menuName}}</el-checkbox></p>
                  </div>
                  <div class="min-right-box" v-if="minItem.checkType">
                    <div class="scope-box">
                      <p>
                        <el-checkbox v-model="minItem.scopeCheckType" @change="(type)=>itemCheckClick(4,type,minItem)" style="margin-right:40px;">数据范围</el-checkbox>
                        <el-select v-model="minItem.dataScope" :disabled="!minItem.scopeCheckType" v-if="minItem.isRequired == 1"
                                   placeholder="请选择1" @visible-change="(type)=>visibleChange(type,minItem,maxIndex,bigIndex,minIndex)">
                          <el-option v-for="dist in optionsDataListOne" :key="dist.type" :label="dist.value" :value="dist.type" @click.native="(type)=>optionChange(dist.type,minItem,maxIndex,bigIndex,minIndex)"></el-option>
                        </el-select>
                        <el-select v-model="minItem.dataScope" :disabled="!minItem.scopeCheckType" v-if="minItem.isRequired != 1"
                                   placeholder="请选择" @visible-change="(type)=>visibleChange(type,minItem,maxIndex,bigIndex,minIndex)">
                          <el-option v-for="dist in optionsDataList" :key="dist.type" :label="dist.value" :value="dist.type" @click.native="(type)=>optionChange(dist.type,minItem,maxIndex,bigIndex,minIndex)"></el-option>
                        </el-select>
                      </p>
                    </div>
                    <div class="permission-box" v-if="minItem.children">
                      <p class="check-left-p"><el-checkbox v-model="minItem.permissionCheckType"  @change="(type)=>itemCheckClick(5,type,minItem)">管理权限</el-checkbox></p>
                      <div class="check-button-box" @click="permissionDetails(minItem,maxIndex,bigIndex,minIndex)"
                           :class="minItem.permissionCheckType?'check-button-box-colorA':'check-button-box-colorB'">
                        <img v-if="!minItem.permissionCheckType" src="@/assets/ZDimages/personnelManagement/icon_xzqx_zc.png">
                        <img v-if="minItem.permissionCheckType" src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png">
                        <p>详细配置</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="big-right-box-null" v-if="bigItem.menuType == 'C'&&bigItem.checkType">
                <div class="scope-box">
                  <p>
                    <el-checkbox v-model="bigItem.scopeCheckType" style="margin-right:40px;" @change="(type)=>itemCheckClick(4,type,bigItem)">数据范围</el-checkbox>
                    <el-select v-model="bigItem.dataScope" :disabled="!bigItem.scopeCheckType" v-if="bigItem.isRequired == 1"
                               placeholder="请选择" @visible-change="(type)=>visibleChange(type,bigItem,maxIndex,bigIndex)">
                      <el-option v-for="dist in optionsDataListOne" :key="dist.type" :label="dist.value" :value="dist.type" @click.native="(type)=>optionChange(dist.type,bigItem,maxIndex,bigIndex)"></el-option>
                    </el-select>
                    <el-select v-model="bigItem.dataScope" :disabled="!bigItem.scopeCheckType" v-if="bigItem.isRequired != 1"
                               placeholder="请选择" @visible-change="(type)=>visibleChange(type,bigItem,maxIndex,bigIndex)">
                      <el-option v-for="dist in optionsDataList" :key="dist.type" :label="dist.value" :value="dist.type" @click.native="(type)=>optionChange(dist.type,bigItem,maxIndex,bigIndex)"></el-option>
                    </el-select>
                  </p>
                </div>
                <div class="permission-box" v-if="bigItem.children">
                  <p class="check-left-p"><el-checkbox v-model="bigItem.permissionCheckType" @change="(type)=>itemCheckClick(5,type,bigItem)">管理权限</el-checkbox></p>
                  <div class="check-button-box" @click="permissionDetails(bigItem,maxIndex,bigIndex)"
                       :class="bigItem.permissionCheckType?'check-button-box-colorA':'check-button-box-colorB'">
                    <img v-if="!bigItem.permissionCheckType" src="@/assets/ZDimages/personnelManagement/icon_xzqx_zc.png">
                    <img v-if="bigItem.permissionCheckType" src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png">
                    <p>详细配置</p>
                  </div>
                </div>
              </div>
            </div>
            <p class="big-box-null" v-if="!maxItem.children&&maxItem.menuName == '数据可视化'">数据可视化大屏查看权限</p>
          </div>
        </div>
      </div>

      <user-list-one ref="userOpen"></user-list-one>
      <el-dialog :title="permissionCheckData.menuName+'模块'" :visible.sync="permissionOpen" width="900px" append-to-body class="managePermissionTemplates-permission-dialog-box">
        <p class="title-p">{{permissionCheckData.menuName}}权限详细配置</p>
        <div class="managePermissionTemplates-permission-dialog-form-box">
          <div class="title-box">
            <p class="left-title-p">功能菜单</p>
            <div class="right-box">
              <el-checkbox v-model="allCheckType" class="right-box-min" @change="(type)=>permissionCheckClick('1',type)">功能操作</el-checkbox>
            </div>
          </div>
          <div class="check-box">
            <div class="left-title-box">
              <p class="left-title-p">{{permissionCheckData.menuName}}</p>
            </div>
            <div class="right-box">
              <el-checkbox class="for-check-box" @change="(type)=>permissionCheckClick('2',type)"
                           v-for="(item,index) in permissionCheckData.children" :key="index" v-model="item.checkType">
                {{item.menuName}}
              </el-checkbox>
            </div>
          </div>
        </div>
        <div slot="footer" class="managePermissionTemplates-permission-dialog-button-box">
          <p class="reset-button-one" @click="permissionOpenOff">取消</p>
          <p class="inquire-button-one" @click="surePermissionOpen">确定</p>
        </div>
      </el-dialog>
      <el-dialog title="选择指定部门（可多选）" @close="deptCancel" :visible.sync="deptOpen" v-if="deptOpen" width="500px" append-to-body class="managePermissionTemplates-dept-dialog-box">
        <el-form :model="deptForm" ref="deptForm" :inline="true" :rules="rules" class="addCheckPage-min">
          <el-form-item label="指定部门" prop="deptIds" label-width="90px" class="el-form-item-bottom">
            <el-cascader
              style="width:300px;"
              :options="treeselectList"
              :props="{multiple: true,value: 'id', label: 'label'}"
              v-model="deptForm.deptIds"
              clearable>
            </el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="managePermissionTemplates-dept-dialog-button-box">
          <p class="reset-button-one" @click="deptCancel">取消</p>
          <p class="inquire-button-one" @click="deptSure">确定</p>
        </div>
      </el-dialog>
      <!--另存-->
      <el-dialog title="另存为权限模板" :visible.sync="saveOpen" width="600px" append-to-body class="teacher-revise-dialog-box">
        <el-form :model="saveForm" ref="saveForm" :inline="true" :rules="rules" class="addCheckPage-min">
          <el-form-item label="模板名称" prop="name" label-width="110px" >
            <el-input v-model="saveForm.name" clearable maxlength="12" style="width:420px;" placeholder="请输入模板名称"/>
          </el-form-item>
          <el-form-item label="是否为学生模板" prop="type" style="width:420px;">
            <el-radio-group v-model="saveForm.type">
              <el-radio :label="1" style="width:80px;margin-left:20px;">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限模板说明" prop="newPassword" label-width="110px">
            <el-input
              type="textarea"
              style="width:420px;"
              maxlength="100"
              resize="none"
              show-word-limit
              :autosize="{ minRows: 6, maxRows: 6}"
              placeholder="请输入权限模板说明"
              v-model="saveForm.text">
            </el-input>
          </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="saveOpenOff">取消</p>
          <p class="inquire-button-one" @click="saveUpData">确定</p>
        </div>
      </el-dialog>
    </div>
    <div class="bottom-button-box" v-if="!editType">
      <p class="inquire-button-one" @click="upDataButton">提交</p>
      <p class="add-button-one-150" v-if="form.status == 0 && form.nature == 0" @click="saveDataButton">另存为权限模板</p>
    </div>
  </div>

</template>

<script>
  import userListOne from "./userListOne.vue"
  import { listMenuAll} from "@/api/system/menu";
  import { getToken } from "@/utils/auth";
  import { treeselect } from "@/api/system/dept";
  import { optionselect, getVaguet, userPermit, addUserTeacher, putUserTeacherNew } from "@/api/system/user_teacher";
  import { getPermitOptionList, getPermitInfo } from "@/api/laboratory/managePermissionTemplates";
  import { addSystemPermit } from "@/api/laboratory/managePermissionTemplates";
  import Treeselect from "@riophae/vue-treeselect";
  export default {
    name: "addPage",
    props:{
      editType:{},
      propsData:{},
      titleName:{},
    },
    components: {
      userListOne,
      Treeselect
    },
    data() {
      return {
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        menuList:[],
        menuListData:[],
        originalMenuList:[],
        form:{
          avatar:"",     //头像
          nickName:"",     //姓名
          sex:0,     //性别
          userName:"",     //工号
          deptId:"",     //所在部门
          position:"",     //身份
          category:"",     //职称
          phonenumber:"",     //联系方式
          cardNum:"",     //校园卡号
          education:"",     //文化程度
          dateBirth:"",     //出生日期
          email:"",     //邮箱
          nature:0,     //在职离职
          isCheck:0,     //是否检查者 0否 1是
          faceImg:"",     //人脸照片
          signature:"",     //电子签名
          status:0,     //账户状态，启用停用
        },
        rules:{
          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" }],
          position: [{ required: true, message: "请选择身份", trigger: "blur" }],
          name: [{ required: true, message: "请输入模板名称", trigger: "blur" },
            { required: true, message: "请输入模板名称", validator: this.spaceJudgment, trigger: "blur" }],
          deptIds: [{ required: true, message: "请选择指定部门", trigger: "blur" }],
          phonenumber: [
            { required: true, message: "请输入手机号码", trigger: "blur" },
            { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        textType:false,
        //数据范围列表
        optionsDataListOne:[
          {type: 1, value: "所有数据",},
          {type: 2, value: "本部门及下级部门数据",},
          {type: 3, value: "本部门及指定部门数据",},
        ],
        optionsDataList:[
          {type: 1, value: "所有数据",},
          {type: 2, value: "本部门及下级部门数据",},
          {type: 3, value: "本部门及指定部门数据",},
          {type: 4, value: "当前账号数据",},
        ],
        //数据范围部门弹窗
        deptOpen:false,
        deptOpenType:'',
        //部门数据结构树
        treeselectList:[],
        //指定部门数据
        deptForm:{
          deptIds:[],
          maxIndex:"",
          bigIndex:"",
          minIndex:"",
          dataScope:"",
        },
        //快捷权限列表
        templateList:[],
        templateKey:"",
        templateName:"",
        //权限勾选数据
        permissionOpen:false,
        permissionCheckData:{},
        allCheckType:false,
        maxIndex:'',
        bigIndex:'',
        minIndex:'',
        //身份列表
        positionOptions:[],
        //部门列表
        deptOptions:[],
        //职称列表
        categoryOptions:[],
        //文化列表
        educationOptions:[],
        //另存
        saveOpen:false,
        saveForm:{
          name:"",
          type:0,
          text:"",
        },
      }
    },
    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.position){
          this.form.position =  parseInt(this.propsData.position);
        }else{
          this.form.position = '';
        }
        if(this.propsData.category){
          this.form.category =  this.propsData.category;
        }else{
          this.form.category = '';
        }
        if(this.propsData.phonenumber){
          this.form.phonenumber = this.propsData.phonenumber;
        }else{
          this.form.phonenumber = '';
        }
        if(this.propsData.cardNum){
          this.form.cardNum = this.propsData.cardNum;
        }else{
          this.form.cardNum = '';
        }
        if(this.propsData.education){
          this.form.education =  this.propsData.education;
        }else{
          this.form.education =  '';
        }
        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.nature){
          this.form.nature = this.propsData.nature;
        }else{
          this.form.nature = '';
        }
        if(this.propsData.isCheck){
          this.form.isCheck = this.propsData.isCheck;
        }else{
          this.form.isCheck = '';
        }
        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 = '';
        }
        if(this.propsData.status){
          this.form.status = this.propsData.status;
        }else{
          this.form.status = '';
        }
        if(!this.editType){
          this.getPermitOptionList();
          this.getMenuOne();
        }
      }else{
        this.getPermitOptionList();
        this.getMenu();
      }
      this.getTreeselect();
      this.getAll();
    },
    mounted(){
    },
    methods:{
      //另存权限
      saveDataButton(){
        this.saveForm = {
          name:"",
          type:0,
          text:"",
        }
        this.saveOpen = true;
      },
      saveOpenOff(){
        this.saveOpen = false;
      },
      saveUpData(){
        this.$refs["saveForm"].validate(valid => {
          if (valid) {
            let list = this.toArray();
            console.log("list",list)
            let obj = {
              name:this.saveForm.name,
              type:this.saveForm.type,
              remark:this.saveForm.text,
              permitMenus:[]
            };
            for(let i=0;i<list.length;i++){
              let minObj = {
                menuId:list[i].menuId,
              }
              if(list[i].dataScope){
                minObj.dataScope = list[i].dataScope
                if(list[i].dataScope == 3){
                  minObj.deptIds = list[i].deptIds;
                  minObj.deptIdsList = list[i].deptIdsList;
                }
              }else{
                minObj.dataScope = 0
              }
              obj.permitMenus.push(minObj)
            }
            if(!obj.permitMenus[0]){
              this.msgError('请先勾选权限项');
              return
            }
            this.addSystemPermit(obj);
          }
        })
      },
      //保存权限
      addSystemPermit(obj){
        addSystemPermit(obj).then(response => {
          if(response.code == 200){
            this.saveOpenOff();
            this.msgSuccess(response.msg);
          }
        });
      },
      //根据选择人员获取权限
      takeUserData(ids){
        this.userPermit(ids[0]);
        this.$refs.userOpen.show();
      },
      //提交按钮
      upDataButton(){
        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
              }
            }
            let list = this.toArray();
            let obj = JSON.parse(JSON.stringify(this.form));
            obj.permitMenus = [];
            if(obj.status == 0){
              for(let i=0;i<list.length;i++){
                let minObj = {
                  menuId:list[i].menuId,
                }
                if(list[i].dataScope){
                  minObj.dataScope = list[i].dataScope
                  if(list[i].dataScope == 3){
                    minObj.deptIds = list[i].deptIds;
                    minObj.deptIdsList = list[i].deptIdsList;
                  }
                }else{
                  minObj.dataScope = 0
                }
                obj.permitMenus.push(minObj)
              }
            }
            if(this.propsData.userId){
              //修改
              obj.userId = this.propsData.userId;
              this.putUserTeacherNew(obj);
            }else{
              //发布
              this.addUserTeacher(obj);
            }
          }
        });
      },
      putUserTeacherNew(obj){
        putUserTeacherNew(obj).then(response => {
          if(response.code == 200){
            this.msgSuccess(response.msg);
            this.outPageButton();
          }
        });
      },
      addUserTeacher(obj){
        addUserTeacher(obj).then(response => {
          if(response.code == 200){
            this.msgSuccess(response.msg);
            this.outPageButton();
          }
        });
      },
      //根据用户查询权限
      userPermit(userId){
        let self = this;
        userPermit(userId).then(response => {
          if(response.code == 200){
            let newList = JSON.parse(JSON.stringify(this.originalMenuList));
            for(let i=0;i<response.data.length;i++){
              for(let o=0;o<newList.length;o++){
                if(response.data[i].menuId == newList[o].menuId){
                  newList[o].checkType = true;
                  if(response.data[i].dataScope == 3){
                    newList[o].dataScope = response.data[i].dataScope;
                    newList[o].deptIds =response.data[i].deptIds;
                    newList[o].deptIdsList =response.data[i].deptIdsList;
                    newList[o].scopeCheckType = true;
                  }else if(response.data[i].dataScope != 0){
                    newList[o].dataScope = response.data[i].dataScope;
                    newList[o].scopeCheckType = true;
                  }
                }
                if(response.data[i].menuType == 'F' && response.data[i].parentId == newList[o].menuId && !newList[o].permissionCheckType){
                  newList[o].permissionCheckType = true;
                }
              }
            }
            let newMenu = JSON.parse(JSON.stringify(this.handleTree(newList, "menuId")))
            this.$set(this,'menuList',newMenu);
          }
        });
      },
      getAll(){
        //身份
        optionselect({postName:""}).then(response => {
          this.positionOptions = response.data;
        });
        //职称
        getVaguet({dictType:"professional",dictLabel:""}).then(response => {
          this.categoryOptions = response.data;
        });
        //文化程度
        getVaguet({dictType:"education",dictLabel:""}).then(response => {
          this.educationOptions = response.data;
        });
      },
      //获取快捷权限列表
      getPermitOptionList(){
        getPermitOptionList().then(response => {
          this.templateList = response.data
        });
      },
      //查询身份
      positionSelect(query){
        if (query !== '') {
          let obj = {
            postName:query,
          };
          optionselect(obj).then(response => {
            this.positionOptions = response.data;
          });
        } else {
          this.positionOptions = [];
        }
      },
      positionSelectClick(){

      },
      positionClearClick(){

      },
      //查询职称列表
      categorySelect(query){
        if (query !== '') {
          let obj = {
            dictType:"professional",
            dictLabel:query
          };
          getVaguet(obj).then(response => {
            this.categoryOptions = response.data;
          });
        } else {
          this.categoryOptions = [];
        }
      },
      categorySelectClick(){

      },
      categoryClearClick(){

      },
      //查询文化程度
      educationSelect(query){
        if (query !== '') {
          let obj = {
            dictType:"education",
            dictLabel:query
          };
          getVaguet(obj).then(response => {
            this.educationOptions = response.data;
          });
        } else {
          this.educationOptions = [];
        }
      },
      educationSelectClick(){

      },
      educationClearClick(){

      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
          this.$set(this,'treeselectList',response.data[0].children);
        });
      },
      natureCaptcha(){
        this.form.nature = this.form.nature == 1?'0':'1';
        if(this.form.nature == 1){
          this.form.status = 1;
        }
      },
      isCheckCaptcha(){
        this.form.isCheck = this.form.isCheck == 1?0:1;
      },
      statusCaptcha(){
        this.form.status = this.form.status == 1?'0':'1';
      },
      //上传
      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;
        getPermitInfo(id).then(response => {
          for(let a=0;a<response.data.length;a++){
            if(response.data[a].isRequired == 1){
              response.data[a].checkType = true;
            }
          }
          let newList = JSON.parse(JSON.stringify(this.originalMenuList));
          for(let i=0;i<response.data.permitMenus.length;i++){
            for(let o=0;o<newList.length;o++){
              if(response.data.permitMenus[i].menuId == newList[o].menuId){
                newList[o].checkType = true;
                if(response.data.permitMenus[i].dataScope == 3){
                  newList[o].dataScope = response.data.permitMenus[i].dataScope;
                  newList[o].deptIds =response.data.permitMenus[i].deptIds;
                  newList[o].deptIdsList =response.data.permitMenus[i].deptIdsList;
                  newList[o].scopeCheckType = true;
                }else if(response.data.permitMenus[i].dataScope != 0){
                  newList[o].dataScope = response.data.permitMenus[i].dataScope;
                  newList[o].scopeCheckType = true;
                }
              }
              if(response.data.permitMenus[i].menuType == 'F' && response.data.permitMenus[i].parentId == newList[o].menuId && !newList[o].permissionCheckType){
                newList[o].permissionCheckType = true;
              }
            }
          }
          this.menuList = JSON.parse(JSON.stringify(this.handleTree(newList, "menuId")))
        });
        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 = "";
        }
        this.$forceUpdate();
      },
      //清除模板选中
      templateDel(){
        this.templateKey = "";
        this.templateName = "";
        this.$set(this,'menuList',JSON.parse(JSON.stringify(this.menuListData)))
      },
      //权限详情按钮
      permissionDetails(obj,maxIndex,bigIndex,minIndex){
        let item = JSON.parse(JSON.stringify(obj));
        this.maxIndex = maxIndex;
        this.bigIndex = bigIndex;
        this.minIndex = minIndex;
        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;
      },
      surePermissionOpen(){
        if(this.maxIndex != undefined && this.bigIndex != undefined && this.minIndex != undefined){
          this.menuList[this.maxIndex].children[this.bigIndex].children[this.minIndex] = JSON.parse(JSON.stringify(this.permissionCheckData));
          this.menuList[this.maxIndex].children[this.bigIndex].children[this.minIndex].permissionCheckType = JSON.parse(JSON.stringify(this.allCheckType))
        }else if(this.maxIndex != undefined && this.bigIndex != undefined){
          this.menuList[this.maxIndex].children[this.bigIndex] = JSON.parse(JSON.stringify(this.permissionCheckData));
          this.menuList[this.maxIndex].children[this.bigIndex].permissionCheckType = JSON.parse(JSON.stringify(this.allCheckType))
        }else if(this.maxIndex != undefined){
          this.menuList[this.maxIndex] = JSON.parse(JSON.stringify(this.permissionCheckData));
          this.menuList[this.maxIndex].permissionCheckType = JSON.parse(JSON.stringify(this.allCheckType))
        }
        this.permissionOpen = false;
      },
      permissionOpenOff(){
        this.permissionOpen = false;
      },
      //展开时触发
      visibleChange(type,item,maxIndex,bigIndex,minIndex){
        if(type){
          if(minIndex!=undefined){
            this.deptOpenType = this.menuList[maxIndex].children[bigIndex].children[minIndex].dataScope
          }else{
            this.deptOpenType = this.menuList[maxIndex].children[bigIndex].dataScope
          }
        }
      },
      //数据范围选中指定部门
      optionChange(type,item,maxIndex,bigIndex,minIndex){
        if(type == 3){
          console.log('deptIdsList',item.deptIdsList);
          if(item.deptIdsList){
            this.deptForm.deptIds = JSON.parse(item.deptIdsList);
          }else{
            this.deptForm.deptIds = "";
          }
          this.deptForm.maxIndex = maxIndex;
          this.deptForm.bigIndex = bigIndex;
          this.deptForm.minIndex = minIndex;
          this.deptForm.dataScope = item.dataScope;
          this.deptOpen = true;
        }
        console.log(type);
        this.$forceUpdate()
      },
      //指定部门弹窗取消
      deptCancel(){
        if(this.deptForm.minIndex || this.deptForm.minIndex == 0){
          this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex].children[this.deptForm.minIndex],'dataScope',this.deptOpenType)
        }else{
          this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex],'dataScope',this.deptOpenType)
        }
        this.deptForm.deptIds = [];
        this.deptForm.maxIndex = "";
        this.deptForm.bigIndex = "";
        this.deptForm.minIndex = "";
        this.deptForm.dataScope = "";
        this.deptOpen = false;
        this.$forceUpdate()
      },
      //指定部门弹窗确定
      deptSure(){
        let self = this;
        this.$refs["deptForm"].validate(valid => {
          if (valid) {
            let list = [];
            for(let i=0;i<self.deptForm.deptIds.length;i++){
              for(let o=0;o<self.deptForm.deptIds[i].length;o++){
                list.push(self.deptForm.deptIds[i][o])
              }
            }
            let newList = [];
            for (var i = 0,len=list.length; i < len; i++) {
              if(newList.indexOf(list[i]) === -1){
                newList.push(list[i]);
              }
            }
            if(this.deptForm.minIndex || this.deptForm.minIndex == 0){
              this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex].children[this.deptForm.minIndex],'deptIds',newList)
              this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex].children[this.deptForm.minIndex],'deptIdsList',JSON.stringify(self.deptForm.deptIds))
            }else{
              this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex],'deptIds',newList)
              this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex],'deptIdsList',JSON.stringify(self.deptForm.deptIds))
            }
            this.deptOpen = false;
            this.deptForm.deptIds = [];
            this.deptForm.maxIndex = "";
            this.deptForm.bigIndex = "";
            this.deptForm.minIndex = "";
            this.deptForm.dataScope = "";
            this.$forceUpdate()
          }
        });
      },
      //模块勾选逻辑
      itemCheckClick(status,type,item,bigItem,maxItem){
        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].dataScope = type?1:"";
                    item.children[i].children[o].permissionCheckType = !!type;
                  }
                }
              }
              if(item.children[i].menuType == 'C'){
                item.children[i].scopeCheckType = !!type;
                item.children[i].dataScope = type?1:"";
                item.children[i].permissionCheckType = !!type;
              }
            }
          }
          if(item.menuType == 'C'){
            item.scopeCheckType = !!type;
            item.dataScope = type?1:"";
            item.permissionCheckType = !!type;
          }
          if(bigItem&&type){
            bigItem.checkType = type;
          }
          if(maxItem&&type){
            maxItem.checkType = type;
          }
        }else if(status == 4){
          //数据范围勾选
          item.scopeCheckType = !!type;
          item.dataScope = type?1:"";
        }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;
      },
      /** 查询菜单列表 */
      getMenuOne(){
        let self = this;
        this.loading = true;
        listMenuAll(this.queryParams).then(response => {
          for(let a=0;a<response.data.length;a++){
            if(response.data[a].isRequired == 1){
              response.data[a].checkType = true;
            }
          }
          if(this.propsData.userId){
            let newList = JSON.parse(JSON.stringify(response.data));
            this.form.name = this.propsData.name;
            this.form.type = this.propsData.type;
            this.form.text = this.propsData.remark;
            for(let i=0;i<self.propsData.permitMenus.length;i++){
              for(let o=0;o<newList.length;o++){
                if(self.propsData.permitMenus[i].menuId == newList[o].menuId){
                  newList[o].checkType = true;
                  if(self.propsData.permitMenus[i].dataScope == 3){
                    newList[o].dataScope = self.propsData.permitMenus[i].dataScope;
                    newList[o].deptIds =self.propsData.permitMenus[i].deptIds;
                    newList[o].scopeCheckType = true;
                  }else if(self.propsData.permitMenus[i].dataScope != 0){
                    newList[o].dataScope = self.propsData.permitMenus[i].dataScope;
                    newList[o].scopeCheckType = true;
                  }
                }
                if(self.propsData.permitMenus[i].menuType == 'F' && self.propsData.permitMenus[i].parentId == newList[o].menuId && !newList[o].permissionCheckType){
                  newList[o].permissionCheckType = true;
                }
              }
            }
            this.menuList = JSON.parse(JSON.stringify(this.handleTree(newList, "menuId")))
            this.menuListData = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            this.originalMenuList = JSON.parse(JSON.stringify(response.data));
          }else{
            this.menuList = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            this.menuListData = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            this.originalMenuList = JSON.parse(JSON.stringify(response.data));
          }
          this.loading = false;
          this.userPermit(this.propsData.userId);
        });
      },
      getMenu() {
        let self = this;
        this.loading = true;
        listMenuAll(this.queryParams).then(response => {
          for(let a=0;a<response.data.length;a++){
            if(response.data[a].isRequired == 1){
              response.data[a].checkType = true;
            }
          }
          if(this.propsData.userId){
            let newList = JSON.parse(JSON.stringify(response.data));
            this.form.name = this.propsData.name;
            this.form.type = this.propsData.type;
            this.form.text = this.propsData.remark;
            for(let i=0;i<self.propsData.permitMenus.length;i++){
              for(let o=0;o<newList.length;o++){
                if(self.propsData.permitMenus[i].menuId == newList[o].menuId){
                  newList[o].checkType = true;
                  if(self.propsData.permitMenus[i].dataScope == 3){
                    newList[o].dataScope = self.propsData.permitMenus[i].dataScope;
                    newList[o].deptIds =self.propsData.permitMenus[i].deptIds;
                    newList[o].scopeCheckType = true;
                  }else if(self.propsData.permitMenus[i].dataScope != 0){
                    newList[o].dataScope = self.propsData.permitMenus[i].dataScope;
                    newList[o].scopeCheckType = true;
                  }
                }
                if(self.propsData.permitMenus[i].menuType == 'F' && self.propsData.permitMenus[i].parentId == newList[o].menuId && !newList[o].permissionCheckType){
                  newList[o].permissionCheckType = true;
                }
              }
            }
            this.menuList = JSON.parse(JSON.stringify(this.handleTree(newList, "menuId")))
            this.menuListData = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            this.originalMenuList = JSON.parse(JSON.stringify(response.data));
          }else{
            this.menuList = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            this.menuListData = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            this.originalMenuList = JSON.parse(JSON.stringify(response.data));
          }
          this.loading = false;
        });
      },
      //结构树转数组并筛选选中项
      toArray(){
        let list = [];
        let newList = JSON.parse(JSON.stringify(this.menuList));
        for(let i=0;i<newList.length;i++){
          pushNode(newList[i]);
        }
        function pushNode(node){
          if(node.children){
            for (let nodeItem of node.children){
              pushNode(nodeItem)
            }
            delete node.children;
            if(node.checkType){
              list.push(node)
            }
          }else{
            if(node.children){
              delete node.children
            }
            if(node.checkType){
              list.push(node)
            }
          }
        }
        return list
      }
    }
  }
</script>

<style scoped lang="scss">
  .teacher-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;
    overflow: hidden;
    *{
      margin:0;
    }
    .public-form-box{
      flex:1;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .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;
        }
      }
    }
    .top-title-one{
      display: flex;
      border-top:1px solid #E0E0E0;
      position: relative;
      .title-p{
        font-size:18px;
        color:#0045AF;
        line-height:80px;
        margin-left:24px;
      }
      .img-p{
        font-size:18px;
        margin:0 10px;
        line-height:80px;
        color:#FFC000;
      }
      .position-box{
        width: 420px;
        height: 194px;
        padding:20px;
        background: #F5F5F5;
        position: absolute;
        top:10px;
        left:134px;
        p{
          font-size:12px;
          line-height:18px;
          color:#333;
        }
      }
    }
    .name-input-box{
      height:100px;
    }
    .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:300px;
      margin:30px auto 10px;
      p:nth-child(1){
        width:100px;
        margin-right:20px;
      }
      p:nth-child(2){
        width:180px;
      }
    }
  }
</style>
<style lang="scss">
  .teacher-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;
      }
    }
  }
  .managePermissionTemplates-permission-dialog-box{
    *{
      margin:0;
    }
    .title-p{
      font-size:15px;
      font-weight:700;
      margin-bottom:30px;
    }
    .managePermissionTemplates-permission-dialog-form-box{
      .title-box{
        display: flex;
        height: 60px;
        background: #F5F5F5;
        .left-title-p{
          width:198px;
          border-right:1px solid #E0E0E0;
          font-size:15px;
          font-weight:700;
          padding-left:26px;
          line-height:60px;
          color:#333;
        }
        .right-box{
          flex:1;
          .right-box-min{
            height:20px;
            margin:20px 0 0 50px;
            .el-checkbox__label{
              font-size:15px;
              font-weight:700;
            }
          }
        }
      }
      .check-box{
        display: flex;
        .left-title-box{
          width:198px;
          border:1px solid #E0E0E0;
          position: relative;
          .left-title-p{
            position: absolute;
            left:27px;
            height:20px;
            line-height:20px;
            top:50%;
            margin-top:-10px;
          }
        }
        .right-box{
          padding:0 50px 41px 0;
          flex:1;
          border:1px solid #E0E0E0;
          border-left:none;
          .for-check-box{
            margin:41px 0 0 50px;
          }
        }
      }
    }
    .managePermissionTemplates-permission-dialog-button-box{
      display: flex;
      width:160px;
      margin:0 auto;
      p{
        margin:0;
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
      }
      p:nth-child(1){
        margin-right:20px;
      }
    }
  }
  .managePermissionTemplates-dept-dialog-box{
    *{
      margin:0;
    }
    .managePermissionTemplates-dept-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;
      }
    }
  }
</style>