FE-V2-PC/src/views/comprehensive/personnel/teacher/addPage.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="50"
              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(/^\s*|\s*$/g,'')"
              maxlength="30"
              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
            ></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();
        }else if(response.code==205){
          this.$confirm(response.msg, "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //  确定
            this.$router.push({ path: '/comprehensive/laboratoryManagement/accessAuthorization' });
          }).catch(function() {
            //  取消
            this.outPageButton();
          });
        }
      });
    },
    addUserTeacher(obj){
      addUserTeacher(obj).then(response => {
        if(response.code == 200){
          this.msgSuccess(response.msg);
          this.outPageButton();
        }else if(response.code==205){
          this.$confirm(response.msg, "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //  确定
            this.$router.push({ path: '/comprehensive/laboratoryManagement/accessAuthorization' });
          }).catch(function() {
            //  取消
            this.outPageButton();
          });
        }
      });
    },
    //根据用户查询权限
    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>