<!--教职工管理-->
<template>
  <div class="app-container teacher">
    <div v-show="pageType == 1" class="teacher-one-box">
      <div class="top-max-box">
        <div class="left-max-box ">
          <div class="left-input-box">
            <el-input
              class="input-left"
              maxlength="10"
              v-model="inputDeptName"
              placeholder="请输入名称"
              clearable
              @clear="systemDeptOrganizeStructureByDept"
              size="small"
            />
            <p class="button-right page-submit-common-style-button" @click="systemDeptOrganizeStructureByDept">搜索</p>
          </div>
          <div class="bottom-button-max-box scrollbar-box">
            <el-tree
              style="margin-right:20px;"
              highlight-current
              :data="deptOptions"
              :props="defaultProps"
              icon-class=""
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </div>
        <div class="center-max-box"></div>
        <div class="teacher-right-max-box">
          <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" v-show="showSearch">
            <el-form-item label="" prop="searchValue">
              <el-input
                maxLength="20"
                v-model="queryParams.searchValue"
                placeholder="姓名/工号/电话"
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item label="" prop="userState">
              <el-select
                v-model="queryParams.userState"
                placeholder="请选择状态"
                clearable
                style="width: 150px"
              >
                <el-option
                  v-for="dict in workClass"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="cardNumSimple" >
              <el-select
                v-model="queryParams.cardNumSimple"
                placeholder="请选择校园卡"
                clearable
                style="width: 150px"
              >
                <el-option
                  v-for="dict in postionList"
                  :key="dict.postId"
                  :label="dict.postName"
                  :value="dict.postId"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-hasPermiRouter="['system:user:import']">
              <import-component :importConfig="importConfig"></import-component>
            </el-form-item>
            <el-form-item v-hasPermiRouter="['system:user:export']">
              <export-component :exportConfig="exportConfig"></export-component>
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            <p class="page-submit-common-style-button"
               style="float: right;"
               @click="addButton"
               v-hasPermiRouter="['system:user:add']"
            >新增</p>
            <p class="page-add-common-style-button"
               style="float: right;margin-right:20px;"
               @click="bindingCard"
               v-hasPermiRouter="['system:user:batch']"
            >批量绑卡</p>
          </el-form>
          <div class="min-list-box">
            <el-table class="table-box" :data="userList" border @selection-change="handleSelectionChange" ref="table-box" :row-key="getRowKeys">
              <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
              <el-table-column label="序号"  width="50" align="center"  type="index"/>
              <el-table-column label="姓名" align="left"  prop="userName" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="工号" align="left" prop="account" width="180">
                <template slot-scope="scope">
                  <div style="display: flex">
                    <el-tooltip class="item" effect="dark" :disabled="scope.row.account.length>7?false:true" :content="scope.row.account" placement="top">
                      <span style="height:23px;width:80px;margin-right:10px;overflow:hidden">
                          {{scope.row.account.length>7?scope.row.account[0]+scope.row.account[1]+scope.row.account[2]+scope.row.account[3]+scope.row.account[4]+scope.row.account[5]+scope.row.account[6]+'...':scope.row.account}}
                      </span>
                    </el-tooltip>
                    <el-switch
                      v-hasPermiRouter="['system:user:edit']"
                      v-if="scope.row.userState"
                      @click.native="stateChange(scope.row)"
                      class="switch captcha-img"
                      :active-value="true"
                      :inactive-value="false"
                      active-color="#0183FA"
                      inactive-color="#999"
                      v-model="scope.row.state"
                      active-text="启用"
                      inactive-text="停用"
                      disabled
                    ></el-switch>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="手机号码" align="left" prop="mobile" width="130" show-overflow-tooltip/>
              <el-table-column label="所在部门" align="left" prop="deptName" width="110" show-overflow-tooltip/>
              <el-table-column label="身份" align="left" prop="positionName" width="110" show-overflow-tooltip/>
              <el-table-column label="创建时间" align="left" prop="createTime" width="160" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
                </template>
              </el-table-column>
              <el-table-column label="在职状态" align="left" prop="userName" width="100">
                <template slot-scope="scope">
                  <p style="width:64px;margin:-1px auto 0;">
                    <el-switch
                      v-hasPermiRouter="['system:user:edit']"
                      @click.native="userStateChange(scope.row)"
                      class="switch captcha-img"
                      :active-value="true"
                      :inactive-value="false"
                      active-color="#29B24D"
                      inactive-color="#999"
                      v-model="scope.row.userState"
                      active-text="在职"
                      inactive-text="离职"
                      disabled
                    ></el-switch>
                  </p>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="left" width="160" class-name="small-padding fixed-width" v-if="tableButtonType">
                <template slot-scope="scope">
                  <div class="table-button-box">
                    <p class="table-button-null"></p>
                    <p class="table-button-p"
                       v-hasPermiRouter="['system:user:detail']"
                       @click="infoButton(scope.row)"
                    >详情</p>
                    <el-dropdown @command="moreClick" v-if="tableDropdownType">
                      <p class="table-button-p">更多>></p>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{row:scope.row,command:1}"
                                          v-hasPermiRouter="['system:user:edit']">编辑</el-dropdown-item>
                        <el-dropdown-item style="margin:0 10px;" :command="{row:scope.row,command:2}"
                                          v-hasPermiRouter="['system:user:del']">删除</el-dropdown-item>
                        <!--<el-dropdown-item style="margin:0 10px;" :command="{row:scope.row,command:3}"-->
                                          <!--v-hasPermiRouter="['system:user:reset']">重置密码</el-dropdown-item>-->
                      </el-dropdown-menu>
                    </el-dropdown>
                    <p class="table-button-null"></p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="display: flex;height:32px;margin-top:15px;">
              <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
                <i class="el-icon-warning" style="color:#0183FA;"></i>
                已选择 {{selectedNum}} 项
              </p>
              <div style="flex:5;">
                <pagination :page-sizes="[20, 30, 40, 50]"
                  v-show="total>0"
                  :total="total"
                  style="margin:0;"
                  :page.sync="queryParams.page"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <add-page v-if="pageType == 2" :editType="editType" :propsData="propsData" :titleName="titleName"></add-page>
    <binding-card-page v-if="pageType == 3" :ids="ids"></binding-card-page>
    <!--重置密码-->
    <el-dialog title="重置密码" :visible.sync="reviseOpen" width="600px" append-to-body class="teacher-revise-dialog-box">
      <p class="teacher-text-p">确定要重置该账号的密码吗？</p>
      <p class="teacher-text-p">确定操作后，该账号密码将重置为系统初始密码。</p>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="offTeacherResetPwd">取消</p>
        <p class="dialog-footer-button-primary" @click="teacherResetPwd">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import addPage from "./addPage.vue"
  import bindingCardPage from "./bindingCardPage.vue"
  import { setDeptAdd,setDeptUpdate,setDeptDelete,setDeptSort,systemDeptOrganizeStructureByDept,
    systemUserList,systemUserEditState,systemUserResetPasswd,systemUserDelete,
    systemUserDetail,} from "@/api/commonality/permission";
  import exportComponent from "@/components/exportComponent/exportComponent.vue";
  import importComponent from "@/components/importComponent/importComponent.vue";

  export default {
    name: "User",
    components: {
      Treeselect,
      addPage,
      bindingCardPage,
      exportComponent,
      importComponent
    },
    data() {
      return {
        importConfig:{
          upLoadApi:'/system/user/importTeacher',                //上传接口地址
          downloadApi:'/system/user/importTemplate',          //下载模板接口地址
          downloadCustomKey:'userType',                                      //下载模板自定义参数KEY(非必填)
          downloadCustomValue:1,                                    //下载模板自定义参数VALUE(非必填)
          loseApi:'/system/user/importErrorData',             //失败报表接口地址
          loseCustomKey:'userType',                                          //失败报表自定义参数KEY(非必填)
          loseCustomValue:1,                                        //失败报表自定义参数VALUE(非必填)
          fileName:'教职工导入模板',                                       //下载模板命名
        },
        exportConfig:{
          api:'/system/user/export',              //导出接口地址
          ids:'',                                        //勾选导出,勾选的IDS
          fileName:'教职工信息',                           //导出文件的命名
          customKey:'userType',                                //自定义参数KEY(非必填)
          customValue:1                               //自定义参数VALUE(非必填)
        },
        /*============V3开始*/
        // 部门树选项
        deptOptions: null,
        deptOptionsOne:null,
        defaultProps: {
          children: "child",
          label: "deptName"
        },
        normalizer(node){
          //去掉children=[]的children属性
          if(node.children && !node.children.length){
            delete node.children;
          }
          return {
            id: node.deptId,
            parentId:node.parentId,
            label:node.deptName,
            deptNum:node.deptNum,
            deptType:node.deptType,
            children:node.child,
          }
        },
        deptLevel:null,
        /*============V3结束*/
        tableButtonType:this.hasPermiDom(['system:user:detail','system:user:edit','system:user:del','system:user:reset']),
        tableDropdownType:this.hasPermiDom(['system:user:edit','system:user:del','system:user:reset']),
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: [],
        idData:[],
        // 弹出层标题
        title: "",
        // 重置密码弹层开关
        reviseOpen: false,
        // 部门名称
        deptName: undefined,
        // 默认密码
        initPassword: undefined,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          page: 1,
          pageSize:20,
          deptId:"",
          searchValue: "",
          userState: "",
          cardNumSimple: "",
          userType:1,
        },
        //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
        selectedNum:0,
        //页面状态
        pageType:1,
        editType:false,
        //组件传参数据
        propsData:{},
        // 工作性质字典
        workClass:[
          {
            dictLabel:"离职",
            dictValue:false,
          },
          {
            dictLabel:"在职",
            dictValue:true,
          },
        ],
        //职位列表
        postionList: [
          {
            postName:"未绑定",
            postId:"0",
          },
          {
            postName:"已绑定",
            postId:"1",
          },
        ],
        getImportData:{
          downFile:false,
          successNum:0,
          failureNum:0,
          textName:"",
        },
        //新增组织架构数据
        treeAddOpen:false,
        treeAddForm:{
          id:null,
          parentId:"",
          relation:"",
          teaCherDpetList:[],
        },
        //编辑组织架构数据
        treeOpen:false,
        treeForm:{
          id:"",
          parentId:null,
          deptName:"",
          relation:"",
        },
        treeFormOne:{},
        userId:"",
        currentDate:'',
        inputDeptName:"",
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.systemDeptOrganizeStructureByDept();
      this.getList();
    },
    methods: {
      /*===========V3开始===========*/
      systemDeptOrganizeStructureByDept(){
        systemDeptOrganizeStructureByDept({deptName:this.inputDeptName}).then(response => {
          this.$set(this,'deptOptions',response.data);
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.deptName.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.$set(this.queryParams,'deptId',data.deptId);
        let obj = {
          id : data.deptId,
          parentId : data.parentId,
          deptName : data.deptName,
          deptNum : data.deptNum,
          deptType : data.deptType,
          state : data.state,
          sort : data.sort,
        }
        this.$set(this,'deptLevel',data.level);
        this.$set(this,'treeForm',obj);
        this.$set(this,'treeFormOne',JSON.parse(JSON.stringify(obj)));
        this.selectedNum = 0;
        this.$refs['table-box'].clearSelection()
        this.getList();
      },
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        systemUserList(obj).then(response => {
            this.userList = response.data.records;
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      //操作启用停用开关
      stateChange(row){
        let text = row.state ? "停用" : "启用";
        this.$confirm('确认要' + text + '"' + row.userName + '"?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return systemUserEditState({userId:row.userId, state:!row.state});
        }).then(() => {
          this.getList();
          this.msgSuccess("操作成功");
        }).catch(function() {
        });
      },
      //重置密码
      teacherResetPwd(){
        let obj = {
          userId:this.userId
        }
        systemUserResetPasswd(obj).then(response => {
          this.reviseOpen = false;
          this.msgSuccess(response.message);
        });
      },
      /*===========V3结束===========*/
      //批量绑卡页面跳转与数量检测
      bindingCard(){
        let self = this;
        if(self.ids.length<1){
          self.msgError('请先勾选人员')
          return
        }
        if(self.ids.length>50){
          self.msgError('批量绑卡最多只可选中50条数据,当前选中了'+self.ids.length+'条.')
          return
        }
        this.pageType = 3;
      },
      //操作在职开关
      userStateChange(row){
        let text = row.userState ? "离职" : "在职";
        this.$confirm('确认要修改' + '"' + row.userName + '"状态为'+text+'?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return systemUserEditState({userId:row.userId, userState:!row.userState});
        }).then(() => {
          this.getList();
          this.msgSuccess("操作成功");
        }).catch(function() {
        });
      },
      outPage(){
        this.pageType = 1;
        this.getList();
      },
      //新增按钮
      addButton(){
        this.pageType = 2;
        this.propsData = {};
        this.titleName = '新增教职工';
        this.editType = false;
      },
      //详情按钮
      infoButton(row){
        systemUserDetail({userId:row.userId}).then(response => {
          this.propsData = response.data;
          this.titleName = '教职工详情';
          this.editType = true;
          this.pageType = 2;
        });
      },
      //更多选项
      moreClick(item){
        let self = this;
        if(item.command == 1){
          systemUserDetail({userId:item.row.userId}).then(response => {
            this.titleName = '教职工编辑';
            this.propsData = response.data;
            this.editType = false;
            this.pageType = 2;
          });
        }else if(item.command == 2){
          const userIds = item.row.userId || this.ids;
          this.$confirm('确认删除"'+item.row.userName+'"?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return systemUserDelete({userId:userIds});
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(() => {});
        }else if(item.command == 3){
          if(item.row.source == 1){
            this.userId = item.row.userId;
            this.title = "重置密码";
            this.reviseOpen = true;
          }else{
            // 系统对接用户 跳转至统一认证平台
          }
        }
      },
      offTeacherResetPwd(){
        this.$set(this,'reviseOpen',false);
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.userId
      },
      //=========表格扩展选择器方法---结束=========
      /** 搜索按钮操作 */
      handleQuery() {
        this.pageType = 1;
        this.queryParams.page = 1;
        this.$set(this,"selectedNum",0);
        this.$refs['table-box'].clearSelection()
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        // this.resetForm("queryForm");
        this.$set(this,'queryParams',{
          page: 1,
          pageSize:20,
          deptId:"",
          searchValue: "",
          userState: "",
          cardNumSimple: "",
          userType:1,
        });
        this.systemDeptOrganizeStructureByDept();
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.ids = selection.map(item => item.userId);
        this.exportConfig.ids = selection.map(item => item.userId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
    }
  };
</script>

<style scoped lang="scss">
  .teacher {
    display: flex!important;
    flex-direction: column;
    .button-box{
      width:300px;
      display: flex;
    }
    .data-max-box{
      position:relative;
      margin-top:-20px;
      p{
        margin:0;
      }
      .info-title-p{
        line-height:80px;
        font-size:18px;
        padding-left:20px;
        border-bottom:1px solid #E0E0E0;
        margin-bottom:20px;
      }
      .info-data-box{
        height:40px;
        display:flex;
        padding-left:20px;
        p{
          width:270px;
          line-height:40px;
          font-size:16px;
        }
      }
      .reset-button-p{
        position: absolute;
        right:0;
        top:20px;
        cursor: pointer;
        text-align: center;
        width: 70px;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        font-size:14px;
        border: 1px solid #DCDFE6;
        color: #606266;
        background: #ffffff;
      }
    }
    .data-item-max-box{
      position:relative;
      margin-top:-20px;
      p{
        margin:0;
      }
      .info-title-p{
        line-height:80px;
        font-size:18px;
        padding-left:20px;
        border-bottom:1px solid #E0E0E0;
      }
      .info-for-max-box{
        .info-for-box{
          width:300px;
          height:163px;
          border: 1px solid #E0E0E0;
          border-radius: 6px;
          display: inline-block;
          margin:20px 20px 0;
          div{
            display: flex;
            margin-top:25px;
            p:nth-child(1){
              font-size:14px;
              margin-left:19px;
              border-radius:4px;
              padding:0 4px;
              margin-right:6px;
            }
            p:nth-child(2){
              font-size:16px;
            }
          }
          .address-p{
            font-size:14px;
            height:44px;
            line-height:20px;
            margin-top:24px;
            text-align: center;
            overflow: hidden;
          }
          .button-p{
            line-height:47px;
            text-align: center;
            border-top:1px solid #E0E0E0;
            font-size:14px;
            color:#FE3B2F;
            cursor:pointer
          }
        }
        .info-add-box{
          width:300px;
          height:163px;
          border: 1px solid #E0E0E0;
          border-radius: 6px;
          margin:20px 20px 0;
          cursor:pointer;
          p{
            line-height:163px;
            text-align: center;
            font-size:14px;
            i{
              margin-right:5px;
            }
          }
        }
      }
      .reset-button-p{
        position: absolute;
        right:0;
        top:20px;
        cursor: pointer;
        text-align: center;
        width: 70px;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        font-size:14px;
        border: 1px solid #DCDFE6;
        color: #606266;
        background: #ffffff;
      }
    }
    .teacher-one-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden!important;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      padding:20px!important;
      .top-max-box{
        flex:1;
        display: flex;
        overflow: hidden!important;
        .left-max-box{
          width:326px;
          display: flex;
          flex-direction: column;
          .top-button-max-box{
            width: 306px;
            height: 40px;
            border: 1px dashed #0045AF;
            border-radius: 10px;
            margin-bottom:10px;
            div{
              display: inline-block;
              overflow: hidden;
              width:20px;
              height:20px;
              margin:10px 0 0 29px;
              cursor: pointer;
            }
            div:nth-child(1){
              margin-left:20px;
            }
            .new-button-box{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_xzxjbm.png");
            }
            .new-button-box:hover{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_xzxjbm_xz.png");
            }
            .superior-button-box{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_xs.png");
            }
            .superior-button-box:hover{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_xs_xz.png");
            }
            .down-button-box{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_xx.png");
            }
            .down-button-box:hover{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_xx_xz.png");
            }
            .edit-button-box{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_bj.png");
            }
            .edit-button-box:hover{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_b_xz.png");
            }
            .add-button-box{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_tj.png");
            }
            .add-button-box:hover{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_tj_xz.png");
            }
            .delete-button-box{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_shanchu.png");
            }
            .delete-button-box:hover{
              background: url("~@/assets/ZDimages/integratedManagement/icon_jzgxx_shanchu_xz.png");
            }
          }
          .left-input-box{
            display: flex;
            margin-bottom:10px;
            .input-left{
              flex:1;
            }
            .button-right{
              width:60px;
              font-size:14px;
              line-height:40px;
              margin:0 20px 0 10px;
              font-weight:500;
            }
          }
          .bottom-button-max-box{
            flex:1;
          }
        }
        .center-max-box{
          border-right:2px dashed #E0E0E0;
          margin-right:20px;
          margin-top:20px;
        }
        .teacher-right-max-box{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden!important;
          .min-list-box{
            flex: 1;
            overflow: hidden!important;
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
    ::v-deep .teacher-right-max-box{
      .form-box{
        .form-dropdown-box{
          display: flex;
          margin:0;
          padding:0 5px 0 0;
          cursor: pointer;
          height:40px;
          img:nth-child(1){
            width:16px;
            height:16px;
            margin-top:12px;
          }
          p{
            width:47px;
            text-align: center;
            font-size:14px;
            margin:0;
            line-height:40px;
          }
          img:nth-child(3){
            width:10px;
            height:6px;
            margin-top:17px;
          }
        }
      }
      .min-list-box{
        .switch .el-switch__label {
          position: absolute;
          display: none;
          color: #fff !important;
        }
        .switch .el-switch__label--right {
          z-index: 1;
        }
        .switch .el-switch__label--right span{
          margin-left: 10px;
        }
        .switch .el-switch__label--left {
          z-index: 1;
        }
        .switch .el-switch__label--left span{
          margin-left: 24px;
        }
        .switch .el-switch__label.is-active {
          display: block;
        }
        .switch.el-switch .el-switch__core,
        .el-switch .el-switch__label {
          width: 64px !important;
          margin: 0;
        }
      }
    }
    ::v-deep .bottom-button-max-box{
      /*==========树结构开始==========*/
      .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg)!important;
        transform: rotate(0deg)!important;
      }
      //未展开
      .el-icon-caret-right:before {
        content:"\e6d9";
        color:#999;
        font-size: 12px;
        border: 1px solid #999;;
        border-radius: 2px;
      }
      //展开
      .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
        content:"\e6d8";
        color:#999;
        font-size: 12px;
        border: 1px solid #999;;
        border-radius: 2px;
      }
      .el-tree-node__expand-icon.is-leaf:before{
        color: transparent!important;
        border: none;
        cursor: default;
      }
      .el-tree .el-tree-node__label{
        font-size:14px;
        color:#333333;
        font-weight:700;
      }
      .el-tree .el-tree-node__children .el-tree-node__label{
        font-size: 14px!important;
      }
      .el-tree .el-tree-node__children .el-tree-node__children .el-tree-node__label{
        color:#333333;
        font-size: 14px!important;
      }
      .el-tree-node__content{
        height:37px;
      }
      /*==========树结构结束==========*/
    }
  }
</style>
<style lang="scss">
  .teacher {
    .el-input--small{
      width:150px!important;
    }
    .el-select{
      //width:150px!important;
    }
    .table-for-max-box{
      .el-select{
        width:210px!important;
      }
    }
    .pagination-container{
      margin: 0 !important;
      padding: 0!important;
    }
  }
  .teacher-revise-dialog-box{
    .teacher-text-p{
      margin-left:110px;
      font-size:16px;
    }
    .teacher-revise-dialog-button-box{
      display: flex;
      width:190px;
      margin:0 auto;
      p{
        margin:0;
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
      }
      p:nth-child(1){
        margin-right:50px;
      }
    }
  }
  .teacher-import-dialog-box{
    .teacher-import-dialog-upLoad-box{
      .el-upload{
        width:450px;
        margin:0 55px;
        .el-upload-dragger{
          width:450px;
          .el-icon-upload{
            font-size:100px;
            color:#CBE6FE;
          }
          .el-upload__text{
            margin-top:20px;
          }
        }
      }
      .el-upload__tip{
        margin-left:60px;
        font-size:14px;
        margin-top:10px;
      }
      .el-upload-text-box{
        background: #F5F5F5;
        border-radius: 10px;
        margin:15px 30px 0;
        padding:0 20px 15px;
        overflow: hidden;
        *{
          margin:0;
        }
        .img-text-box{
          display: flex;
          margin-top:15px;
          img{
            width:16px;
            height:16px;
            margin-right:13px;
          }
          p{
            height:16px;
            line-height:16px;
            font-size:12px;
          }
        }
        .text-p{
          margin-top:15px;
          margin-left:29px;
          height:16px;
          line-height:16px;
          font-size:12px;
        }
      }
    }
    .teacher-import-dialog-button-box{
      display: flex;
      width:190px;
      margin:0 auto;
      p{
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
        margin:0 auto;
      }
    }
    .teacher-import-dialog-position-box{
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
      z-index: 999;
      background: rgba(255,255,255,0.4);
      border-radius:20px;
    }
  }
  .teacher-tree-dialog-box{
    .teacher-tree-dialog-form-box{

    }
    .teacher-tree-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>
