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

<!--教职工管理-->
<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="top-button-max-box">
            <el-tooltip class="item" effect="dark" content="新增下级部门" placement="top">
              <div class="new-button-box" @click="treeButtonClick(1)" v-hasPermi="['system:dept:add']"></div><!--新增-->
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="向上移动" placement="top">
              <div class="superior-button-box" @click="treeButtonClick(2)" v-hasPermi="['system:dept:edit']"></div><!--上调-->
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
              <div class="down-button-box" @click="treeButtonClick(3)" v-hasPermi="['system:dept:edit']"></div><!--下调-->
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
              <div class="edit-button-box" @click="treeButtonClick(4)" v-hasPermi="['system:dept:edit']"></div><!--编辑-->
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="添加部门人员" placement="top">
              <div class="add-button-box" @click="treeButtonClick(5)" v-hasPermi="['system:user_teacher:edit']"></div><!--人员添加-->
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <div class="delete-button-box" @click="treeButtonClick(6)" v-hasPermi="['system:dept:remove']"></div><!--删除-->
            </el-tooltip>
          </div>
          <div class="left-input-box">
            <el-input
              class="input-left"
              maxlength="10"
              v-model="inputDeptName"
              placeholder="请输入名称"
              clearable
              size="small"
            />
            <!--@clear="getTreeselect"-->
            <p class="button-right add-button-two-90" @click="getTreeselect">搜索</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="right-max-box">
          <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" v-show="showSearch">
            <!--v-hasPermi="['laboratory:plan:add']"-->

            <el-form-item label="关键字" prop="searchValue" label-width="54px">
              <el-input
                maxLength="20"
                v-model="queryParams.searchValue"
                placeholder="姓名/工号/电话"
                style="width: 130px"
              />
            </el-form-item>
            <el-form-item label="状态" prop="nature" label-width="40px">
              <el-select
                v-model="queryParams.nature"
                placeholder="请选择"
                clearable
              >
                <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="isCheck" label-width="54px">
              <el-select
                v-model="queryParams.isCheck"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in userTypeList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="校园卡" prop="cardNumSimple" label-width="54px">
              <el-select
                v-model="queryParams.cardNumSimple"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in postionList"
                  :key="dict.postId"
                  :label="dict.postName"
                  :value="dict.postId"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-dropdown @command="importButton" v-hasPermi="['system:user_teacher:import']">
                <div class="form-dropdown-box" style="margin-left:5px;">
                  <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_dr.png">
                  <p>导入</p>
                  <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}" v-hasPermi="['system:user_teacher:exceltemplate']">下载模板</el-dropdown-item>
                  <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导入数据</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
            <el-form-item>
              <el-dropdown @command="exportButton" v-hasPermi="['system:user_teacher:export']">
                <div class="form-dropdown-box">
                  <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.png">
                  <p>导出</p>
                  <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">导出全部数据</el-dropdown-item>
                  <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导出选中数据</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
            <el-form-item style="float: right;">
              <el-col :span="1.5" v-hasPermi="['system:user_teacher:add']">
                <p class="add-button-one-90"
                   @click="addButton"
                ><i class="el-icon-plus"></i>新增</p>
              </el-col>
            </el-form-item>
            <el-form-item style="float: right;">
              <el-col :span="1.5" v-hasPermi="['system:user_teacher:check']">
                <p class="add-button-one-90"
                   @click="bindingCard"
                >批量绑卡</p>
              </el-col>
            </el-form-item>
            <el-form-item>
              <p class="inquire-button-one" @click="handleQuery">查询</p>
              <p class="reset-button-one" @click="resetQuery">重置</p>
            </el-form-item>
          </el-form>
          <div class="min-list-box">
            <el-table :data="userList" border @selection-change="handleSelectionChange" ref="multipleTable" :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="nickName" width="100" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="工号" align="left" prop="userName" width="180">
                <template slot-scope="scope">
                  <div style="display: flex">
                    <el-tooltip class="item" effect="dark" :disabled="scope.row.userName.length>7?false:true" :content="scope.row.userName" placement="top">
                      <span style="height:23px;width:80px;margin-right:10px;overflow:hidden">
                          {{scope.row.userName.length>7?scope.row.userName[0]+scope.row.userName[1]+scope.row.userName[2]+scope.row.userName[3]+scope.row.userName[4]+scope.row.userName[5]+scope.row.userName[6]+'...':scope.row.userName}}
                      </span>
                    </el-tooltip>
                    <el-switch
                      v-if="scope.row.nature==0"
                      @click.native="statusCaptcha(scope.row)"
                      class="switch captcha-img"
                      active-value="0"
                      inactive-value="1"
                      active-color="#0183FA"
                      inactive-color="#999"
                      v-model="scope.row.status"
                      active-text="启用"
                      inactive-text="停用"
                      disabled
                    ></el-switch>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="手机号码" align="left" prop="phonenumber" 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="createTimeStr" show-overflow-tooltip/>
              <el-table-column label="在职状态" align="left" prop="userName" width="100">
                <template slot-scope="scope">
                  <p style="width:64px;margin:0 auto;">
                    <el-switch
                      @click.native="natureCaptcha(scope.row)"
                      class="switch captcha-img"
                      active-value="0"
                      inactive-value="1"
                      active-color="#29B24D"
                      inactive-color="#999"
                      v-model="scope.row.nature"
                      active-text="在职"
                      inactive-text="离职"
                      disabled
                    ></el-switch>
                  </p>
                </template>
              </el-table-column>
              <el-table-column label="检查者" align="center" prop="isCheck" width="70" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.isCheck == 0?'否':(scope.row.isCheck == 1?'是':'')}}</span>
                </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-hasPermi="['system:user_teacher:query']"
                       @click="infoButton(scope.row)"
                    >详情</p>
                    <el-dropdown @command="moreClick" v-hasPermi="['system:user_teacher:query','system:user_teacher:edit','system:user_teacher:remove','system:user_teacher:resetpwd']">
                      <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-hasPermiAnd="['system:user_teacher:query','system:user_teacher:edit']">编辑</el-dropdown-item>
                        <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{row:scope.row,command:2}"
                                          v-hasPermi="['system:user_teacher:remove']">删除</el-dropdown-item>
                        <el-dropdown-item style="margin:0 10px;" :command="{row:scope.row,command:3}"
                                          v-hasPermi="['system:user_teacher:resetpwd']">重置密码</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="flex:2;"></p>-->
              <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
                <i class="el-icon-warning" style="color:#0183FA;"></i>
                已选择 {{selectedNum}} 项
              </p>
              <div style="flex:5;">
                <pagination :page-sizes="[20, 30, 40, 50]"
                  v-show="total>0"
                  :total="total"
                  style="margin:0;"
                  :page.sync="queryParams.pageNum"
                  :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="teacher-revise-dialog-button-box">
        <p class="reset-button-one">取消</p>
        <p class="inquire-button-one" @click="teacherResetPwd">确定</p>
      </div>
    </el-dialog>
    <!--导入窗口-->
    <el-dialog title="导入数据" :visible.sync="importOpen" @close="importOpenOff" width="600px" append-to-body class="teacher-import-dialog-box">
      <el-upload
        class="teacher-import-dialog-upLoad-box"
        :drag="true"
        :data="upImportData"
        :action="uploadImgUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :headers="headers"
        :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upImportData.upDate">是否更新已经存在的用户数据</el-checkbox>
        </div>
        <div class="el-upload__tip" slot="tip">仅允许导入xls、xlsx、格式文件。<span style="color:#0183FA;cursor: pointer" v-hasPermi="['system:user_teacher:exceltemplate']" @click="importTemplate">下载模板</span></div>
        <div class="el-upload-text-box" slot="tip" v-if="getImportData.downFile">
          <div class="img-text-box">
            <img src="@/assets/ZDimages/personnelManagement/icon_dr_wj.png">
            <p>{{getImportData.textName}}</p>
          </div>
          <p class="text-p">数据导入成功 <span style="color:#0183FA;">{{getImportData.successNum}}</span> 条，失败 <span style="color:#FF6464 ;">{{getImportData.failureNum}}</span> 条</p>
          <div class="img-text-box">
            <img src="@/assets/ZDimages/personnelManagement/icon_dr_sj.png">
            <p style="color:#0183FA;cursor: pointer;" @click="failureExcel">点击下载失败数据报表</p>
          </div>
        </div>
      </el-upload>
      <div slot="footer" class="teacher-import-dialog-button-box">
        <p class="inquire-button-one" @click="importOpenOff">确定</p>
      </div>
      <div class="teacher-import-dialog-position-box" v-if="loading"></div>
    </el-dialog>
    <!--编辑--组织架构-->
    <el-dialog title="修改部门" :visible.sync="treeOpen" width="600px" append-to-body class="teacher-tree-dialog-box">
      <el-form :model="treeForm" class="teacher-tree-dialog-form-box" ref="treeForm" :rules="rules" v-show="showSearch">
        <el-form-item label="上级部门" prop="parentId" label-width="90px" v-if="treeForm.parentId != 0">
          <treeselect v-model="treeForm.parentId" :options="deptOptions" :show-count="true" @select="deptSelect" placeholder="请选择上级部门" />
        </el-form-item>
        <el-form-item label="部门编号" prop="" label-width="90px" v-if="treeForm.parentId != 0">
          <el-input v-model="treeForm.deptNum" maxlength="10" disabled
                    onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" placeholder="请输入部门编号"/>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName" label-width="90px">
          <el-input v-model="treeForm.deptName" maxlength="10" placeholder="请输入部门名称"/>
        </el-form-item>
        <el-form-item label="部门类型" prop="deptType" label-width="90px">
          <el-radio-group v-model="treeForm.deptType" style="margin:4px 0 0 10px;">
            <el-radio :label="1">学院</el-radio>
            <el-radio :label="0">非学院</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="teacher-tree-dialog-button-box">
        <p class="reset-button-one" @click="treeOpenOff">取消</p>
        <p class="inquire-button-one" @click="editDeptButton">确定</p>
      </div>
    </el-dialog>
    <!--新增--组织架构-->
    <el-dialog title="新增部门" :visible.sync="treeAddOpen" width="600px" append-to-body class="teacher-tree-dialog-box">
      <el-form :model="treeAddForm" class="teacher-tree-dialog-form-box" ref="treeAddForm" :rules="rules" v-show="showSearch">
        <el-form-item label="上级部门" prop="id" label-width="110px">
          <treeselect style="width:402px;" v-model="treeAddForm.id" :options="deptOptions" :show-count="true" @select="deptAddSelect" placeholder="请选择上级部门" />
        </el-form-item>
        <div class="scrollbar-box" style="max-height:500px">
          <div style="display:flex;border:1px solid #d8d8d8;border-radius:6px;margin:0 20px 20px;padding-top:20px;position: relative" v-for="(item,index) in treeAddForm.teaCherDpetList" :key="index">
            <div style="width:490px;">
              <el-form-item label="部门编号" :prop="'teaCherDpetList.' + index + '.deptNum'" :rules="rules.deptNum" label-width="90px">
                <el-input v-model="item.deptNum" maxlength="10" placeholder="请输入部门编号"/>
              </el-form-item>
              <el-form-item label="部门名称" :prop="'teaCherDpetList.' + index + '.deptName'" :rules="rules.deptName" label-width="90px">
                <el-input v-model="item.deptName" maxlength="10" placeholder="请输入部门名称"/>
              </el-form-item>
              <el-form-item label="部门类型" :prop="'teaCherDpetList.' + index + '.deptType'" :rules="rules.deptType" label-width="90px">
                <el-radio-group v-model="item.deptType" style="margin:4px 0 0 10px;">
                  <el-radio :label="1">学院</el-radio>
                  <el-radio :label="0">非学院</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div style="position: absolute;right:30px;bottom:22px;">
              <div style="display: flex;width:100px;" v-if="index != treeAddForm.teaCherDpetList.length-1">
                <p class="el-icon-delete" style="margin:10px 20px;font-size:20px;width:20px;cursor: pointer;color:#FF6666;" @click="delDeptItem(index)"></p>
              </div>
              <div style="display: flex;width:100px;" v-if="index == treeAddForm.teaCherDpetList.length-1 && index < 4 && index != 0">
                <p class="el-icon-circle-plus-outline" style="margin:10px 20px;font-size:20px;width:20px;cursor: pointer;color:#0183FA;" @click="addDeptItem"></p>
                <p class="el-icon-delete" style="margin:10px 0;font-size:20px;width:20px;cursor: pointer;color:#FF6666;" @click="delDeptItem(index)"></p>
              </div>
              <div style="display: flex;width:100px;" v-if="index == treeAddForm.teaCherDpetList.length-1 && index == 4">
                <p class="el-icon-delete" style="margin:10px 20px;font-size:20px;width:20px;cursor: pointer;color:#FF6666;" @click="delDeptItem(index)"></p>
              </div>
              <div style="display: flex;width:100px;" v-if="index == treeAddForm.teaCherDpetList.length-1 && index < 4 && index == 0">
                <p class="el-icon-circle-plus-outline" style="margin:10px 20px;font-size:20px;width:20px;cursor: pointer;color:#0183FA;" @click="addDeptItem"></p>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="teacher-tree-dialog-button-box">
        <p class="reset-button-one" @click="treeAddOpenOff">取消</p>
        <p class="inquire-button-one" @click="addDeptButton">确定</p>
      </div>
    </el-dialog>
    <user-list ref="userOpen"></user-list>
  </div>
</template>

<script>
  import { getAuthRole, updateAuthRole, resetUserPwd } from "@/api/system/user";
  import { allListPost } from "@/api/system/post";
  import { listDepartments } from "@/api/system/dept";
  import { setSubjectAdmin,getSubjectList,getNoAdminSubjectList,getNoAdminSubjectListNopage } from "@/api/laboratory/subject";
  import { listUser, delUser, addUser, updateUser, changeUserStatus,putUserTeacher,delTeacher,
           teacherResetPwd,addDeptByTeacher,putDeptByTeacher,updateDeptName,editDeptOrder,delDept,
           editUserByDept,getTeacherInfo,editNatureLinkage,treeselect } from "@/api/system/user_teacher";
  import { getUser } from "@/api/system/user_student";
  import { getToken } from "@/utils/auth";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { Message } from 'element-ui'
  import userList from "./userList.vue"
  import addPage from "./addPage.vue"
  import bindingCardPage from "./bindingCardPage.vue"

  export default {
    name: "User",
    components: {
      Treeselect,
      userList,
      addPage,
      bindingCardPage
    },
    data() {
      return {
        tableButtonType:this.hasPermiDom(['system:user_teacher:query','system:user_teacher:query','system:user_teacher:edit','system:user_teacher:remove','system:user_teacher:resetpwd']),
        uploadImgUrl: window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/system/user/teacher/importData", // 上传地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: [],
        idData:[],
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: undefined,
        // 重置密码弹层开关
        reviseOpen: false,
        // 部门名称
        deptName: undefined,
        // 默认密码
        initPassword: undefined,
        // 日期范围
        dateRange: [],
        // 职称字典
        professional: [],
        // 工作性质字典
        workClass:[],
        // 是否是检查者
        userTypeList:[
          {
            id:0,
            name:"否",
          },
          {
            id:1,
            name:"是",
          },
        ],
        // 性别状态字典
        sexOptions: [],
        // 岗位选项
        postOptions: [],
        // 角色选项
        roleOptions: [],
        // 学院选项
        facultyOptions: [],
        // 实验室选项
        laboratoryOptions: [],
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize:20,
          searchValue: "",
          cardNumSimple: "",
          nature: "",
          isCheck: "",
        },
        // 列信息
        columns: [
          { key: 0, label: `用户编号`, visible: true },
          { key: 1, label: `用户名称`, visible: true },
          { key: 2, label: `用户昵称`, visible: true },
          { key: 3, label: `部门`, visible: true },
          { key: 4, label: `手机号码`, visible: true },
          { key: 5, label: `状态`, visible: true },
          { key: 6, label: `创建时间`, visible: true }
        ],
        addRules:{
          userName: [
            { required: true, message: "请输入学号", trigger: "blur" },
            { required: true, message: "请输入学号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          nickName: [
            { required: true, message: "请输入姓名", trigger: "blur" },
            { required: true, message: "请输入姓名", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deptId: [
            { required: true, message: "请选择学院", trigger: "blur" }
          ],
          sex: [
            { required: true, message: "请选择性别", trigger: "blur" }
          ],
        },
        // 表单校验
        rules: {
          id: [
            { required: true, message: "请选择上级部门", trigger: "blur" }
          ],
          deptNum: [
            { required: true, message: "请输入部门编号", trigger: "blur" },
            { required: true, message: "请输入部门编号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deptName: [
            { required: true, message: "请输入部门名称", trigger: "blur" },
            { required: true, message: "请输入部门名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deptType: [
            { required: true, message: "请选择部门类型", trigger: "blur" },
            { required: true, message: "请选择部门类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
        selectedNum:0,
        //页面状态
        pageType:1,
        editType:false,
        //组件传参数据
        propsData:{},
        //危险源数据
        laboratoryList:[],
        //学院列表
        deptList:[],
        //职位列表
        postionList: [
          {
            postName:"未绑定",
            postId:"0",
          },
          {
            postName:"已绑定",
            postId:"1",
          },
        ],
        //文化程度
        educationList:[],
        // 新增学生开关
        addStudentType:false,
        addTitle:"",
        addForm:{},
        //导入弹层开关
        importOpen:false,
        //导入数据
        upImportData:{
          sysUserEnable:true,
          upDate:false,
        },
        getImportData:{
          downFile:false,
          successNum:0,
          failureNum:0,
          textName:"",
        },
        //新增组织架构数据
        treeAddOpen:false,
        treeAddForm:{
          id:null,
          parentId:"",
          ancestors:"",
          teaCherDpetList:[],
        },
        //编辑组织架构数据
        treeOpen:false,
        treeForm:{
          id:"",
          parentId:null,
          deptName:"",
          ancestors:"",
        },
        treeFormOne:{},
        userId:"",
        currentDate:'',
        inputDeptName:"",
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {

      this.getList();
      this.getTreeselect();
      this.getDeptList();
      // this.getPostionList();
      // //职称
      // this.getDicts("professional").then(response => {
      //   this.professional = response.data;
      // });
      //工作性质
      this.getDicts("work_class").then(response => {
        this.workClass = response.data;
      });
      //性别
      this.getDicts("sys_user_sex").then(response => {
        this.sexOptions = response.data;
      });
      //文化程度
      this.getDicts("education").then(response => {
        this.educationList = response.data;
      });
      this.getConfigKey("sys.user.initPassword").then(response => {
        this.initPassword = response.msg;
      });
    },
    methods: {
      //批量绑卡页面跳转与数量检测
      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;
      },
      //人员添加接口
      takeUserData(ids,idsData){
        let list = [];
        for(let i=0;i<ids.length;i++){
          let obj = {
            userId:ids[i],
            deptId:this.queryParams.deptId
          }
          list.push(obj);
        }
        editUserByDept(list).then(response => {
          this.msgSuccess(response.msg)
          this.$refs.userOpen.show();
          this.getList();
          this.getTreeselect();
          this.delTreeForm();
        });
      },
      //编辑部门关闭
      treeOpenOff(){
        this.treeOpen = false;
      },
      //编辑部门提交
      editDeptButton(){
        let self = this;
        this.$refs["treeForm"].validate(valid => {
          if (valid) {
            if(this.treeForm.parentId == 0){
              let obj = {
                deptId:this.treeForm.id,
                deptName:this.treeForm.deptName,
                deptType:this.treeForm.deptType,
              }
              updateDeptName(obj).then(response => {
                this.treeOpen = false;
                this.delTreeForm();
                this.msgSuccess(response.msg)
                this.getTreeselect();
                this.$set(this,'treeForm',{});
                this.$set(this,'treeAddForm',{});
              });
            }else{
              let obj = {
                deptId:this.treeForm.id,
                parentId:this.treeForm.parentId,
                ancestors:this.treeForm.ancestors,
                deptName:this.treeForm.deptName,
                deptType:this.treeForm.deptType,
              };
              putDeptByTeacher(obj).then(response => {
                this.treeOpen = false;
                this.delTreeForm();
                this.msgSuccess(response.msg)
                this.getTreeselect();
                this.$set(this,'treeForm',{});
                this.$set(this,'treeAddForm',{});
              });
            }
          }
        });
      },
      //新增子部门
      addDeptItem(){
        this.treeAddForm.teaCherDpetList.push({deptNum:"",deptName:""})
      },
      //删除子部门
      delDeptItem(index){
        this.treeAddForm.teaCherDpetList.splice(index,1)
      },
      //新增部门提交
      addDeptButton(){
        let self = this;
        this.$refs["treeAddForm"].validate(valid => {
          if (valid) {
            let newObj = {
              teaCherDpetList:[]
            }
            for(let i=0;i<self.treeAddForm.teaCherDpetList.length;i++){
              let obj = {
                ancestors:this.treeAddForm.ancestors,
                parentId:this.treeAddForm.id,
                deptNum:this.treeAddForm.teaCherDpetList[i].deptNum,
                deptName:this.treeAddForm.teaCherDpetList[i].deptName,
                deptType:this.treeAddForm.teaCherDpetList[i].deptType,
              }
              newObj.teaCherDpetList.push(obj);
            }
            addDeptByTeacher(newObj).then(response => {
              this.treeAddOpen = false;
              this.msgSuccess(response.msg)
              this.getTreeselect();
              this.$set(this,'treeForm',{});
              this.$set(this,'treeAddForm',{});
            });
          }
        });
      },
      //关闭新增页面
      treeAddOpenOff(){
        this.treeAddOpen = false;
      },
      //新增节点选择部门
      deptAddSelect(item){
        this.treeAddForm.parentId = item.id;
        this.treeAddForm.ancestors = item.ancestors;
      },
      //编辑节点选择部门
      deptSelect(item){
        this.treeForm.parentId = item.id;
        this.treeForm.ancestors = item.ancestors;
      },
      // 节点单击事件
      handleNodeClick(data) {
        console.log("data",data);
        this.$set(this.queryParams,'deptId',data.id);
        let obj = {
          id : data.id,
          deptNum : data.deptNum,
          parentId : data.parentId,
          deptName : data.label,
          deptType : data.deptType,
          ancestors : data.ancestors,
        }
        this.$set(this,'treeForm',obj);
        this.$set(this,'treeFormOne',JSON.parse(JSON.stringify(obj)));
        // this.treeForm.id = data.id;
        // this.treeForm.deptNum = data.deptNum;
        // this.treeForm.parentId = data.parentId;
        // this.treeForm.deptName = data.label;
        // this.treeForm.ancestors = data.ancestors;
        this.selectedNum = 0;
        this.$refs.multipleTable.clearSelection()
        this.getList();
      },
      //操作启用停用开关
      statusCaptcha(row){
        let obj = {
          userId:row.userId,//用户id
          userName:row.userName,//用户账户
          status:row.status == 1?'0':'1',//账户启用停用，0是启用，1是停用
        };
        putUserTeacher(obj).then(response => {
          row.status = row.status == 1?'0':'1';
          this.msgSuccess(response.msg)
        });
      },
      //操作在职开关
      natureCaptcha(row){
        let obj = {
          userId:row.userId,//用户id
          userName:row.userName,//用户账户
          nature:row.nature == 1?'0':'1',//账户启用停用，0是在职，1是离职
        };
        editNatureLinkage(obj).then(response => {
          this.msgSuccess(response.msg)
          this.getList();

        });
      },
      // 组织树操作
      treeButtonClick(type){
        let self = this;
        if(type == 1){
          //新增部门
          let obj = {
            id:null,
            parentId:"",
            ancestors:"",
            teaCherDpetList:[
              {deptNum:"",deptName:""}
            ]
          }
          if(this.treeForm.id){
            obj.id = this.treeForm.id;
            obj.parentId = this.treeForm.parentId;
            obj.ancestors = this.treeForm.ancestors;
          }
          this.$set(this,'treeAddForm',obj);
          this.treeAddOpen = true;
        }else {
          if(!this.queryParams.deptId){
            this.msgError("请先选择部门")
            return
          }
          if(type == 2){
            //部门上移动
            let obj = {
              parentId:this.treeForm.parentId,
              deptId:this.treeForm.id,
              upDownOper:"1",
            }
            editDeptOrder(obj).then(response => {
              this.delTreeForm();
              this.msgSuccess(response.msg)
              this.getTreeselect();
            });
          }else if(type == 3){
            //部门下移动
            let obj = {
              parentId:this.treeForm.parentId,
              deptId:this.treeForm.id,
              upDownOper:"2",
            }
            editDeptOrder(obj).then(response => {
              this.delTreeForm();
              this.msgSuccess(response.msg)
              this.getTreeselect();
            });
          }else if(type == 4){
            //部门编辑
            this.$set(this,'treeForm',JSON.parse(JSON.stringify(this.treeFormOne)));
            this.treeOpen = true;
          }else if(type == 5){
            //部门添加人员
            this.$refs.userOpen.show();
          }else if(type == 6){
            //部门删除
            this.$confirm('确认要删除吗?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              //  确定
              delDept(self.treeForm.id).then(response => {
                self.delTreeForm();
                self.msgSuccess(response.msg)
                self.getTreeselect();
              });
            }).catch(function() {});
          }
        }
      },
      delTreeForm(){
        this.queryParams.deptId = "";
        this.treeForm = {
          id:"",
          parentId:null,
          deptName:"",
          ancestors:"",
        }
      },
      //****************************************导入功能**************************************
      handleAvatarSuccess(res, file) {
        if(res.code == 200){
          this.getImportData.downFile = res.data.downFile
          this.getImportData.successNum = res.data.successNum
          this.getImportData.failureNum = res.data.failureNum
          // this.importOpen = false;
          // this.getList();
        }else{
          this.msgError(res.msg);
        }
        this.loading = false;
      },
      beforeAvatarUpload(file) {
        let type = false;
        console.log('file',file);
        if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type == 'application/vnd.ms-excel') {
          this.getImportData.textName = file.name;
          type = true;
          this.loading = true;
        }else{
          this.$message.error('只能上传xls/xlsx格式文件');
          type = false;
        }
        return type;
      },
      /** 查询职位列表 */
      getPostionList() {
        allListPost().then(response => {
          console.log(",IIIIIIIIIIIIIIIIIIIIIIIII",response.data)
          this.$set(this, 'postionList', response.data)
        });
      },
      /** 查询学院列表 */
      getDeptList() {
        listDepartments().then(response => {
          this.$set(this, 'deptList', response.data)
        });
      },
      outPage(){
        this.pageType = 1;
        this.getList();
      },
      //新增按钮
      addButton(){
        this.pageType = 2;
        this.propsData = {};
        this.titleName = '新增教职工';
        this.editType = false;
      },
      //详情按钮
      infoButton(row){
        getTeacherInfo(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){
          getTeacherInfo(item.row.userId).then(response => {
            this.titleName = '教职工编辑';
            this.propsData = response.data;
            this.editType = false;
            this.pageType = 2;
          });
        }else if(item.command == 2){
          this.$confirm('确认要删除吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //  确定
            delTeacher(item.row.userId).then(response => {
              self.msgSuccess(response.msg);
              self.getList();
            });
          }).catch(function() {});
        }else if(item.command == 3){
          this.userId = item.row.userId;
          this.reset();
          this.title = "重置密码";
          this.reviseOpen = true;
        }
      },
      teacherResetPwd(){
        let obj = {
          userId:this.userId
        }
        teacherResetPwd(obj).then(response => {
          this.reviseOpen = false;
          this.msgSuccess(response.msg);
        });
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.userId
      },
      //=========表格扩展选择器方法---结束=========
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.$set(this,'userList',response.rows);
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        let obj = {
          deptName:this.inputDeptName,
        }
        treeselect(obj).then(response => {
          this.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        // this.reset();
      },
      addReset(){
        this.addForm = {
          userId: undefined,
          nickName: undefined,
          userName: undefined,
          deptId: undefined,
          sex: undefined,
          phonenumber: undefined,
          email: undefined,
          major: undefined,
          grade: undefined,
          category: undefined,
          tutorUserId: undefined,
        };
      },
      // 表单重置
      reset() {
        this.form = {
          userId: undefined,
          deptId: undefined,
          userName: undefined,
          nickName: undefined,
          password: undefined,
          phonenumber: undefined,
          email: undefined,
          sex: undefined,
          status: "0",
          remark: undefined,
          postIds: [],
          roleIds: []
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.pageType = 1;
        this.queryParams.pageNum = 1;
        this.$set(this,"selectedNum",0);
        this.$refs.multipleTable.clearSelection()
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        // this.resetForm("queryForm");
        this.$set(this,'queryParams',{
          pageNum: 1,
          pageSize:20,
          searchValue: "",
          cardNumSimple: "",
          nature: "",
          isCheck: "",
        });
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.ids = selection.map(item => item.userId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      //导入页面关闭
      importOpenOff(){
        this.importOpen = false;
        this.getImportData.downFile = false;
        this.getImportData.successNum = 0;
        this.getImportData.failureNum = 0;
        this.getImportData.textName = "";
      },
      /** 导入按钮操作 */
      importButton(item){
        if(item.command == 1){
        //  下载模板
          this.download('/system/user/teacher/importTemplate', {}, `导入模板.xlsx`)
        }else if(item.command == 2){
        //  导入数据
          console.log('导入数据');
          this.importOpen = true;
        }
      },
      /** 当前时间 */
      getCurrentTime () {
        const yy = new Date().getFullYear()
        const mm = new Date().getMonth() + 1
        const dd = new Date().getDate()
        const hh = new Date().getHours()
        const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        return yy + '-' + mm + '-' + dd
      },
      /** 导出按钮操作 */
      exportButton(item) {
        let self = this;
        this.currentDate=this.getCurrentTime()

        if(item.command == 1){
          self.$confirm(`确认导出全部数据?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            self.download('/system/user/teacher/export/', {...self.queryParams}, '教职工信息-'+this.currentDate+'.xlsx')
          }).catch(() => {})
        }else if(item.command == 2){
          if(self.ids.length>0) {
            self.$confirm(`确认导出选中数据?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async () => {
              let ids = self.ids.join(',');
              let obj = {
                ids :ids
              }
              self.download(`/system/user/teacher/export/`,obj, '教职工信息-'+this.currentDate+'.xlsx')
            }).catch(() => {})
          }else {
            Message({
              message: "请选择要导出的数据",
              type: 'error'
            });
          }
        }
      },
      /** 下载模板操作 */
      importTemplate() {
        this.download('/system/user/teacher/importTemplate', {}, `导入模板.xlsx`)
      },
      /*下载失败列表*/
      failureExcel(){
        this.download('/system/user/teacher/importErrorData', {}, `失败报表.xlsx`)
      },
    }
  };
</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/personnelManagement/icon_jzgxx_xzxjbm.png");
            }
            .new-button-box:hover{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_xzxjbm_xz.png");
            }
            .superior-button-box{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_xs.png");
            }
            .superior-button-box:hover{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_xs_xz.png");
            }
            .down-button-box{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_xx.png");
            }
            .down-button-box:hover{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_xx_xz.png");
            }
            .edit-button-box{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_bj.png");
            }
            .edit-button-box:hover{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_b_xz.png");
            }
            .add-button-box{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_tj.png");
            }
            .add-button-box:hover{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_tj_xz.png");
            }
            .delete-button-box{
              background: url("~@/assets/ZDimages/personnelManagement/icon_jzgxx_shanchu.png");
            }
            .delete-button-box:hover{
              background: url("~@/assets/ZDimages/personnelManagement/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;
        }
        .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;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .right-max-box{
    .form-box{
      .el-select{
        width:90px !important;
        > .el-input{
          width:90px !important;
        }
      }
    }
  }
  .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;
        }
      }
    }
  }
  .right-max-box{
    .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;
      }
    }
  }
  .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>