WanZai_School/src/views/user/user.vue

<template>
  <div class="content-box">
    <div class="treeV">
      <el-input
        v-model="searchInput.department"
        :clearable="true"
        @clear="getDepartment"
        @input="getDepartment"
        placeholder="请输入部门名称"
        class="searchTree"
      >
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
      <el-tree
        :data="dataSource"
        node-key="id"
        :default-expanded-keys="[2, 3, 16]"
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <div class="title" @click="nodeClick(node, data)">
              <img src="@/assets/images/folder.png" alt="" />
              <!-- <img src="@/assets/images/document.png" alt="" /> -->
              <span :class="data.id == treeNodeId ? 'nodeClick' : ''">{{
                data.name
              }}</span>
            </div>
            <el-dropdown
              v-if="data.isManage == 1"
              @command="handleCommand"
              :hide-on-click="false"
              trigger="click"
            >
              <span class="el-dropdown-link">
                <img src="@/assets/images/edit.png" alt="" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    command="a"
                    @click="amendBMClick(node, data)"
                    >修改部门</el-dropdown-item
                  >
                  <el-dropdown-item command="b" @click="addBMClick(node, data)"
                    >新建子部门</el-dropdown-item
                  >
                  <!-- <el-dropdown-item command="c">删除</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </template>
      </el-tree>
    </div>
    <!-- 主页面 -->
    <div class="userRight" v-if="homeShow">
      <div class="left">
        <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
        <span>用户管理</span>
        <span>&nbsp;| {{ treeNodeName }}</span>
        <span>/ 共有{{ total }}人</span>
      </div>
      <div class="scorll">
        <div class="middle">
          <div class="filter">
            <div class="condition">
              <el-input
                v-model="searchInput.keyWord"
                :clearable="true"
                @clear="searchBtn"
                placeholder="请输入用户姓名"
                style="width: 240px"
              >
                <template #prefix>
                  <el-icon class="el-input__icon"><search /></el-icon>
                </template>
              </el-input>
            </div>
            <el-button
              color="rgba(0, 97, 255, 1)"
              type="primary"
              class="search"
              @click="searchBtn"
            >
              <span>查询</span></el-button
            >
          </div>
          <!-- 按钮列表 -->
          <div class="gongneng">
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="addMemberClick"
              :disabled="isManage != 1"
              plain
              >添加成员</el-button
            >
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="moveMemberClick"
              :disabled="isManage != 1"
              plain
              >移动成员</el-button
            >

            <el-dropdown>
              <el-button color="rgba(0, 97, 255, 1)" plain>批量操作</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    :disabled="isManage != 1"
                    @click="addBatchClick"
                    >批量导入</el-dropdown-item
                  >
                  <el-dropdown-item
                    :disabled="isManage != 1"
                    @click="updateBatchClick"
                    >批量更新</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="closeAccountClick"
              plain
              >注销账号</el-button
            > -->
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="delDelClick"
              :disabled="isManage != 1"
              plain
              >勾选删除</el-button
            >
           
              <el-button-group class="ml-4">
                <el-tooltip
              class="box-item"
              effect="dark"
              content="根据当前选中的部门、查询中的用户姓名进行导出"
              placement="top-start"
            > <el-button
                type="primary"
                color="rgba(0, 97, 255, 1)"
                @click="importExcel"
                :disabled="isManage != 1"
                plain
                style="margin-right: 0;border-right: 0px ;"
                >导出用户</el-button
              >
          </el-tooltip>
                <el-button type="primary" @click="exportSettingsClick" style="border-left: 0px ;" plain color="rgba(0, 97, 255, 1)" :icon="Tools" />
              </el-button-group>
              <!-- <el-button
                type="primary"
                color="rgba(0, 97, 255, 1)"
                @click="importExcel"
                :disabled="isManage != 1"
                plain
                >导出用户</el-button
              > -->
           
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="DelRecordClick"
              :disabled="isManage != 1"
              plain
              >删除记录</el-button
            >
          </div>
        </div>
        <div class="footer" v-loading="loading">
          <el-table
            :row-class-name="tableRowClassName"
            :data="tableData.list"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
              border: 0,
            }"
          >
            <el-table-column
              align="center"
              type="selection"
              
              width="80"
            />
            <el-table-column align="center" prop="name" label="姓名" />
            <el-table-column align="center" prop="name" label="时间组" />
            <el-table-column align="center" prop="identity" label="身份" />
            <el-table-column align="center" prop="department" label="部门" />
            <el-table-column
              align="center"
              prop="cardNo"
              label="学号/电话号码"
            />
            <el-table-column align="center" prop="img" label="人脸照片">
              <template #default="{ row }">
                <div class="img">
                  <img
                    v-if="row.headImage"
                    @click="imgClick(row)"
                    :src="row.headImage"
                    alt=""
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="200">
              <template #default="scope" v-if="isManage == 1">
                <div class="edit">
                  <div class="look" @click="editClick(scope.row)">编辑</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页组件 -->
        <div class="pageSize">
          <span></span>
          <el-pagination
            background
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total,sizes, prev, pager, next, jumper, slot"
            :total="total"
            @size-change="handleSizeChange"
            @update:current-page="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 添加成员 -->
    <div class="addMember" v-if="addMemberShow">
      <div class="left">
        <img src="@/assets/images/close.png" alt="" @click="addMemberConcel" />
        <span class="add">{{ addMemberTitle }}</span>
      </div>
      <div class="content">
        <div class="form">
          <el-form
            ref="addMemberRef"
            :model="addMemberRuleForm"
            :rules="addMemberRules"
            label-width="90px"
            class="demo-ruleForm"
            :size="formSize"
            label-position="right"
            status-icon
          >
            <div class="title">
              <img src="@/assets/images/basicInfo.png" alt="" />
              <span>基本信息</span>
            </div>
            <el-form-item
              :key="addMemberRuleForm.identity"
              label="学号 :"
              :prop="addMemberRuleForm.identity == 1 ? '' : 'serialNumber'"
            >
              <el-input
                :disabled="addMemberTitle == '编辑成员' ? true : false"
                v-model="addMemberRuleForm.serialNumber"
                placeholder="请输学号"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item label="姓名 :" prop="name">
              <el-input
                v-model="addMemberRuleForm.name"
                placeholder="请输入姓名"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item label="身份 :" prop="identity">
              <el-select
                v-model="addMemberRuleForm.identity"
                placeholder="请选择身份"
                style="width: 500px"
                @change="identityChange"
                clearable
              >
                <el-option
                  v-for="i in identityData"
                  :label="i.name"
                  :value="i.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="addMemberRuleForm.identity != 1"
              label="职务 :"
              :prop="addMemberRuleForm.identity == 3 ? 'duty' : ''"
            >
              <el-select
                v-model="addMemberRuleForm.duty"
                placeholder="先选择身份再选择职务"
                style="width: 500px"
                clearable
              >
                <el-option
                  v-for="i in postData"
                  :label="i.name"
                  :value="`${i.id}`"
                />
              </el-select>
              <!-- <el-tooltip
                class="box-item"
                effect="dark"
                content="请先选择身份"
                placement="top-start"
              >
                
              </el-tooltip> -->
            </el-form-item>
            <el-form-item
              label="身份证号 :"
              :prop="addMemberRuleForm.identity == 1 ? '' : ''"
            >
              <el-input
                v-model="addMemberRuleForm.icCard"
                placeholder="请输入身份证号"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item label="性别 :" prop="sex">
              <el-radio-group v-model="addMemberRuleForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="部门 :" prop="department">
              <!-- <el-cascader
                v-model="addMemberRuleForm.department"
                style="width: 500px"
                filterable
                clearable
                :options="dataSource"
                :props="{ label: 'name', value: 'id' }"
                :show-all-levels="false"
              /> -->
              <el-tree-select
                v-model="addMemberRuleForm.department"
                :data="dataSource"
                default-expand-all
                check-strictly
                :render-after-expand="false"
                style="width: 500px"
                :props="{ label: 'name', value: 'id' }"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="人脸照片 :"
              :prop="addMemberRuleForm.identity == 1 ? '' : 'facePhoto'"
            >
              <div class="facePhoto">
                <div v-if="addMemberRuleForm.facePhoto">
                  <img
                    @click="imgClick(addMemberRuleForm.facePhoto)"
                    :src="addMemberRuleForm.facePhoto"
                    alt="facePhotoImg"
                  />
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :auto-upload="false"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-change="handleChange"
                  :http-request="handleUpload"
                  :before-upload="beforeAvatarUpload"
                  ref="upload"
                  :limit="1"
                  :on-exceed="handleExceed"
                >
                  <template #trigger>
                    <el-button :icon="Camera">上传图片</el-button>
                  </template>
                  <template #tip>
                    <div class="el-upload__tip">
                      支持扩展名：.jpg
                      .png，五官清晰无遮挡，名字+后缀，大小不超过2M
                    </div>
                  </template>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item
              v-if="addMemberRuleForm.identity != 1"
              label="年级 :"
              :prop="
                addMemberRuleForm.identity == 3 && addMemberRuleForm.duty != 1
                  ? ''
                  : 'grade'
              "
            >
              <el-select
                v-model="addMemberRuleForm.grade"
                placeholder="请选择年级"
                style="width: 500px"
                @change="classsListChange"
                clearable
              >
                <el-option
                  v-for="i in gradeData"
                  :label="i.name"
                  :value="i.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="addMemberRuleForm.identity != 1"
              label="班级 :"
              :prop="
                addMemberRuleForm.identity == 3 && addMemberRuleForm.duty != 1
                  ? ''
                  : 'class'
              "
            >
              <el-select
                v-model="addMemberRuleForm.class"
                placeholder="请选择班级"
                style="width: 500px"
                clearable
              >
                <el-option
                  v-for="i in classsData"
                  :label="i.name"
                  :value="i.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="任课班级 :"
              :prop="addMemberRuleForm.identity == 1 ? '' : 'timeGroupId'"
            >
              <el-cascader
                style="width: 500px"
                placeholder="请选择任课班级"
                v-model="addMemberRuleForm.teachingClass"
                :options="teachingClassData"
                :props="teachingClassProps"
                @change="teachingClassChange"
                clearable
              />
            </el-form-item>
            <el-form-item
              v-if="addMemberRuleForm.identity != 3"
              label="时间组 :"
              :prop="addMemberRuleForm.identity == 1 ? '' : 'timeGroupId'"
            >
              <el-select
                v-model="addMemberRuleForm.timeGroupId"
                placeholder="请选择时间"
                style="width: 500px"
                clearable
              >
                <el-option
                  v-for="i in timeGroupList"
                  :label="i.name"
                  :value="i.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="
                addMemberRuleForm.identity != 2 &&
                addMemberRuleForm.identity != 1 &&
                addMemberRuleForm.identity != 3
              "
              label="学院 :"
              prop="institute"
            >
              <el-input
                v-model="addMemberRuleForm.institute"
                placeholder="请输入学院"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item
              v-if="
                addMemberRuleForm.identity != 2 &&
                addMemberRuleForm.identity != 1 &&
                addMemberRuleForm.identity != 3
              "
              label="专业 :"
              prop="specialty"
            >
              <el-input
                v-model="addMemberRuleForm.specialty"
                placeholder="请输入专业"
                clearable
                style="width: 500px"
              />
            </el-form-item>

            <el-form-item label="校区 :" prop="school">
              <el-input
                v-model="addMemberRuleForm.school"
                placeholder="请输入校区"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item label="宿舍号 :" prop="dormitory">
              <el-input
                v-model="addMemberRuleForm.dormitory"
                placeholder="请输入宿舍号"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item
              v-if="addMemberRuleForm.identity != 2"
              label="手机号 :"
              prop="phone"
            >
              <el-input
                v-model="addMemberRuleForm.phone"
                placeholder="请输入手机号"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item
              v-if="
                addMemberRuleForm.identity != 3 &&
                addMemberRuleForm.identity != 2
              "
              label="关联人 :"
              prop="contact"
            >
              <el-select
                v-model="addMemberRuleForm.contact"
                popper-class="more-tag-data"
                multiple
                filterable
                remote
                :remote-method="conteactMethod"
                :loading="conteactLoading"
                placeholder="请选择关联人"
                style="width: 500px"
              >
                <el-option
                  v-for="item in conteactListData"
                  :key="item.id"
                  :label="`${item.name}·${item.id}`"
                  :value="`${item.name}·${item.id}`"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span
                    style="
                      float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;
                    "
                    >{{ item.id }}</span
                  >
                </el-option>
                <template #footer>
                  <div class="addStudentMore">
                    <el-button
                      v-if="
                        conteactListCurrentPage < conteactListTotalPage &&
                        conteactListTotalPage != 0
                      "
                      @click="addStudentListMore"
                      >加载更多+</el-button
                    >
                  </div>
                </template>
              </el-select>
            </el-form-item>
            <div class="title">
              <img src="@/assets/images/basicInfo.png" alt="" />
              <span>其他信息</span>
            </div>
            <el-form-item label="职称 :" prop="jobName">
              <el-input
                v-model="addMemberRuleForm.jobName"
                placeholder="请输入职称"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item label="家庭地址 :" prop="houseAddress">
              <el-input
                v-model="addMemberRuleForm.houseAddress"
                placeholder="请输入家庭地址"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item label="民族 :" prop="nation">
              <el-input
                v-model="addMemberRuleForm.nation"
                placeholder="请输入民族"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item label="生源地 :" prop="originOfStudent">
              <el-input
                v-model="addMemberRuleForm.originOfStudent"
                placeholder="请输入生源地"
                clearable
                style="width: 500px"
              />
            </el-form-item>
            <el-form-item label="毕业学院 :" prop="graduateCollege">
              <el-input
                v-model="addMemberRuleForm.graduateCollege"
                placeholder="请输入毕业学院"
                clearable
                style="width: 500px"
              />
            </el-form-item>

            <el-form-item class="options">
              <el-button
                color="rgba(41, 109, 227, 1)"
                class="queding"
                type="primary"
                @click="confirmAddMember(addMemberRef)"
              >
                确认
              </el-button>
              <el-button @click="addMemberConcel(addMemberRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 批量添加 -->
    <div
      class="addMember"
      v-if="addBatchShow"
      v-loading="startImprot"
      element-loading-text="人员信息导入中..."
    >
      <div class="left">
        <img src="@/assets/images/close.png" alt="" @click="addBatchConcel" />
        <span class="add">批量添加</span>
      </div>
      <div class="content">
        <div class="form">
          <div class="imgUpload">
            <el-upload
              style="width: 500px"
              class="upload-demo"
              ref="upload2"
              drag
              action="#"
              :on-preview="handlePreview2"
              :on-remove="handleRemove2"
              :on-change="handleChange2"
              :http-request="handleUpload2"
              :before-upload="beforeAvatarUpload2"
              :limit="1"
              :on-exceed="handleExceed2"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                <span style="font-size: 20px">点击上传或拖拽文件</span><br />
                <em>请按照标准模板填写信息</em><br />
                <em>&nbsp;</em>
              </div>
              <!-- <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template> -->
            </el-upload>
            <el-upload
              v-loading="imgLoading"
              element-loading-text="图片导入中..."
              style="width: 500px"
              class="img-upload-demo"
              drag
              action="#"
              multiple
              ref="allImgUpload"
              :on-preview="handlePreviewImgUpload"
              :on-remove="handleRemoveImgUpload"
              :on-change="handleChangeImgUpload"
              :http-request="handleUploadImgUpload"
              :before-upload="beforeAvatarUploadImgUpload"
              :on-success="handleSuccessImgUpload"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                <span style="font-size: 20px">点击上传图片文件夹</span><br />
                <em> 图片格式为jpeg/jpg/png格式且每张图片不能超过2MB </em><br />
                <em> 上传文件夹中照片不要超过1000张 </em>
              </div>
              <!-- <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template> -->
            </el-upload>
          </div>
          <!-- <input
            ref="Folder"
            type="file"
            @change="uploadFloder"
            webkitdirectory
          /> -->
          <div class="startImport">
            <el-button
              v-if="!imgLoading && upload2File && uploadImgList"
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="bulkImport"
              plain
              >开始导入</el-button
            >
            <span
              v-else
              type="primary"
              color="rgba(236, 245, 255, 1)"
              style="
                display: inline-block;
                width: 500px;
                height: 42px;
                text-align: center;
                line-height: 42px;
                color: rgb(160, 207, 255);
                border: 1px solid #dcdfe6;
                border-radius: 4px;
              "
              plain
              >开始导入</span
            >
            <span
              style="
                width: 120px;
                margin-left: 20px;
                cursor: pointer;
                color: rgba(0, 97, 255, 1);
              "
              @click="resetImport"
              >重置</span
            >
            <span class="downLoad" @click="downLoadtempAdd(1)"
              >下载学生模板</span
            >
            <span class="downLoad" @click="downLoadtempAdd(2)"
              >下载教师模板</span
            >
          </div>
          <!-- <div class="tableTitle">导入历史</div>
          <div class="footer">
            <el-table
              :row-class-name="tableRowClassName"
              :data="addBatchData.list"
              @selection-change="handleSelectionChange"
              :header-cell-style="{
                background: 'rgba(240, 243, 247, 1)',
                height: '45px',
                border: 0,
              }"
            >
              <el-table-column
                align="center "
                prop="userName"
                label="操作管理员"
              />
              <el-table-column
                width="160"
                align="center"
                prop="time"
                label="上传时间"
              />
              <el-table-column align="center" prop="status" label="导入状态" />
              <el-table-column
                align="center"
                prop="userPhone"
                label="导入成功"
              />
              <el-table-column
                align="center"
                prop="userPhone"
                label="导入失败"
              />
              <el-table-column align="center" label="失败列表" width="200">
                <template #default="scope">
                  <div class="edit">
                    <div class="look" @click="lookClick(scope.row)">
                      点击查看
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageSize">
              <span></span>
              <el-pagination
                background
                :current-page="addBatch_currentPage"
                :page-size="addBatch_pageSize"
                layout="total, prev, pager, next, jumper, slot"
                :total="addBatch_total"
                @update:current-page="handleAddBatch"
              />
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 批量更新 -->
    <div
      class="addMember"
      v-if="updateBatchShow"
      v-loading="startUpdate"
      element-loading-text="人员信息更新中..."
    >
      <div class="left">
        <img
          src="@/assets/images/close.png"
          alt=""
          @click="updateBatchConcel"
        />
        <span class="add">批量更新</span>
      </div>
      <div class="content">
        <div class="form">
          <div class="imgUpload">
            <el-upload
              style="width: 500px"
              class="upload-demo"
              ref="batchUpload"
              drag
              action="#"
              :on-preview="handlePreviewUpdate"
              :on-remove="handleRemoveUpdate"
              :on-change="handleChangeUpdate"
              :http-request="handleUploadUpdate"
              :before-upload="beforeAvatarUploadUpdate"
              :limit="1"
              :on-exceed="handleExceedUpdate"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                <span style="font-size: 20px">点击上传或拖拽文件</span><br />
                <em>请按照标准模板填写信息</em><br />
                <em>&nbsp;</em>
              </div>
              <!-- <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template> -->
            </el-upload>
            <!-- <el-upload
              v-loading="imgLoading"
              element-loading-text="图片导入中..."
              style="width: 500px"
              class="img-upload-demo"
              drag
              action="#"
              multiple
              ref="allImgUpload"
              :on-preview="handlePreviewImgUpload"
              :on-remove="handleRemoveImgUpload"
              :on-change="handleChangeImgUpload"
              :http-request="handleUploadImgUpload"
              :before-upload="beforeAvatarUploadImgUpload"
              :on-success="handleSuccessImgUpload"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                <span style="font-size: 20px">点击上传图片文件夹</span><br />
                <em> 图片格式为jpeg/jpg/png格式且每张图片不能超过2MB </em><br />
                <em> 上传文件夹中照片不要超过1000张 </em>
              </div>
            </el-upload> -->
          </div>
          <div class="startImport">
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="bulkUpdateImport"
              plain
              >开始更新</el-button
            >
            <!-- <span
              style="
                width: 120px;
                margin-left: 20px;
                cursor: pointer;
                color: rgba(0, 97, 255, 1);
              "
              @click="resetImport"
              >重置</span
            > -->
            <span class="downLoad" @click="downLoadtempUpdate">下载模板</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除记录页面 -->
    <div class="delRecord" v-if="delRecordShow">
      <div class="left">
        <img src="@/assets/images/close.png" alt="" @click="delRecordClose" />
        <span class="add">{{ addMemberTitle }}</span>
      </div>
      <div class="scorll">
        <div class="footer" v-loading="loading">
          <el-table
            :row-class-name="tableRowClassName"
            :data="delRecordDatas"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
              border: 0,
            }"
          >
            <el-table-column align="center" prop="name" label="姓名" />
            <el-table-column align="center" prop="identityStr" label="身份" />
            <el-table-column align="center" prop="departmentStr" label="部门" />
            <el-table-column align="center" prop="cardNo" label="学号" />
            <el-table-column align="center" prop="img" label="人脸照片">
              <template #default="{ row }">
                <div class="img">
                  <img @click="imgClick(row)" :src="row.headImage" alt="" />
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="操作" width="200">
              <template #default="scope">
                <div class="edit">
                  <div class="look" @click="editClick(scope.row)">编辑</div>
                </div>
              </template>
            </el-table-column> -->
          </el-table>
        </div>

        <!-- 分页组件 -->
        <div class="pageSize">
          <span></span>
          <el-pagination
            background
            :current-page="delRecordCurrentPage"
            :page-size="delRecordPageSize"
            layout="total, prev, pager, next, jumper, slot"
            :total="delRecordTotal"
            @update:current-page="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 批量删除 -->
    <div class="addMember" v-if="delBatchShow">
      <div class="left">
        <img src="@/assets/images/close.png" alt="" @click="delBatchConcel" />
        <span class="add">批量删除</span>
      </div>
      <div class="content">
        <div class="form">
          <el-upload
            style="width: 500px"
            class="upload-demo"
            drag
            action="#"
            multiple
            :on-preview="handlePreview3"
            :on-remove="handleRemove3"
            :on-change="handleChange3"
            :http-request="handleUpload3"
            :before-upload="beforeAvatarUpload3"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              <span style="font-size: 20px">点击上传或拖拽文件</span><br /><em
                >务必按照我们的标准模板填写信息</em
              >
            </div>
            <!-- <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template> -->
          </el-upload>
          <div class="startImport">
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              @click="addClick"
              plain
              >开始执行批量删除</el-button
            >
            <span class="downLoad">下载模板</span>
          </div>
          <div class="tableTitle">导入历史</div>
          <div class="footer">
            <el-table
              :row-class-name="tableRowClassName"
              :data="delBatchData.list"
              @selection-change="handleSelectionChange"
              :header-cell-style="{
                background: 'rgba(240, 243, 247, 1)',
                height: '45px',
                border: 0,
              }"
            >
              <el-table-column
                align="center "
                prop="userName"
                label="操作管理员"
              />
              <el-table-column align="center" prop="time" label="上传时间" />
              <el-table-column align="center" prop="status" label="导入状态" />
              <el-table-column
                align="center"
                prop="userPhone"
                label="导入成功"
              />
              <el-table-column
                align="center"
                prop="userPhone"
                label="导入失败"
              />
              <el-table-column align="center" label="失败列表" width="200">
                <template #default="scope">
                  <div class="edit">
                    <div class="look" @click="lookClick(scope.row)">
                      点击查看
                    </div>
                    <!-- <el-popconfirm
                      width="220"
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      :icon="InfoFilled"
                      icon-color="#f89626"
                      title="是否删除此房型?"
                      @confirm="del(scope.row)"
                      @cancel="cancelEvent"
                    >
                      <template #reference>
                        <div class="del">删除</div>
                      </template>
                    </el-popconfirm> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageSize">
              <span></span>
              <el-pagination
                background
                :current-page="delBatch_currentPage"
                :page-size="delBatch_pageSize"
                layout="total, prev, pager, next, jumper, slot"
                :total="delBatch_total"
                @update:current-page="handleDelBatch"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改部门 -->
    <el-dialog
      class="amendBMDialog"
      v-model="amendBMVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="修改部门"
      align-center
      width="500"
      :before-close="cancelAmendBM"
    >
      <el-form
        ref="amendBMRef"
        :model="amendBMRuleForm"
        :rules="amendBMRules"
        label-width="90px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="left"
        status-icon
      >
        <el-form-item label="部门名称 :" prop="department">
          <el-input
            v-model.trim="amendBMRuleForm.department"
            placeholder="请输入部门名称"
            clearable
            style="width: 340px"
          />
        </el-form-item>
        <div class="option">
          <el-button
            color="rgba(41, 109, 227, 1)"
            class="queding"
            type="primary"
            @click="confirmAmendBM(amendBMRef)"
          >
            确认
          </el-button>
          <el-button @click="cancelAmendBM(amendBMRef)">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 新建子部门 -->
    <el-dialog
      class="amendBMDialog"
      v-model="addBMVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="新建子部门"
      align-center
      width="500"
      :before-close="cancelAddBM"
    >
      <el-form
        ref="addBMRef"
        :model="addBMRuleForm"
        :rules="addBMRules"
        label-width="90px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="left"
        status-icon
      >
        <el-form-item label="部门名称 :" prop="department">
          <el-input
            v-model.trim="addBMRuleForm.department"
            placeholder="请输入部门名称"
            clearable
            style="width: 340px"
          />
        </el-form-item>
        <div class="option">
          <el-button
            color="rgba(41, 109, 227, 1)"
            class="queding"
            type="primary"
            @click="confirmAddBM(addBMRef)"
          >
            确认
          </el-button>
          <el-button @click="cancelAddBM(addBMRef)">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 移动成员 -->
    <el-dialog
      class="moveMemberDialog"
      v-model="moveMemberVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="移动选择用户至"
      align-center
      width="650"
      :before-close="cancelMoveMember"
    >
      <div class="move">
        <div class="moveLeft">
          <el-input
            v-model="moveSearchInput"
            :clearable="true"
            @clear="getMoveData"
            @input="getMoveData"
            placeholder="请输入部门"
            class="searchTree"
            style="width: 260px"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
          <el-tree
            ref="moveTree"
            :data="moveData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            @check-change="moveCheckChange"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <div class="title">
                  <img src="@/assets/images/folder.png" alt="" />
                  <!-- <img src="@/assets/images/document.png" alt="" /> -->
                  <span>{{ data.name }}</span>
                </div>
              </span>
            </template>
          </el-tree>
        </div>
        <div class="moveRight">
          <div class="sel">已选择 :</div>
          <ul
            class="infinite-list"
            style="overflow: auto"
            infinite-scroll-immediate="false"
          >
            <li
              v-for="(i, index) in treeSelData.list"
              :key="index"
              class="infinite-list-item"
            >
              <span style="margin-left: 19px">{{ i.label }}</span>
              <el-icon @click="cancelTreeSel(i)">
                <Close />
              </el-icon>
              <!-- <i class="el-icon-close" @click="cancelCheck(i)"></i> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmMoveMember"
        >
          确认
        </el-button>
        <el-button @click="cancelMoveMember">取消</el-button>
      </div>
    </el-dialog>
     <!-- 用户导出设置 -->
     <el-dialog
      class="exportSettings"
      v-model="exportSettingsVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="用户导出设置"
      align-center
      width="650"
      :before-close="cancelExportSettings"
    >
      <div class="move">
        <el-transfer
         v-model="exportSettingsSel"
         :titles="['未选择', '已选择']"
         :left-default-checked="leftChecked"
         :right-default-checked="rightChecked"
         :props="{
           key: 'id',
           label: 'name',
         }"
         @change="exportSettingsChange"
         :data="exportSettingsData"
       />
      </div>
      <div class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmExportSettings"
        >
          确认
        </el-button>
        <el-button @click="cancelExportSettings">取消</el-button>
      </div>
    </el-dialog>
    <!-- 注销账号 -->
    <!-- <el-dialog
      class="closeAccount"
      v-model="closeAccountVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="注销账号"
      align-center
      width="500"
      :before-close="cancelCloseAccount"
    >
      <div class="content">
        <img src="@/assets/images/warning.png" alt="" />
        <span
          >选中的用户将会被注销账号，注销后相应的功能将无法使用，确定要操作吗？</span
        >
      </div>
      <div class="option">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmCloseAccount"
        >
          确认
        </el-button>
        <el-button @click="cancelCloseAccount">取消</el-button>
      </div>
    </el-dialog> -->
    <!-- 勾选删除 -->
    <el-dialog
      class="closeAccount"
      v-model="selDelVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="勾选删除"
      align-center
      width="500"
      :before-close="cancelSelDel"
    >
      <div class="content">
        <img src="@/assets/images/warning.png" alt="" />
        <span>是否删除勾选的用户？</span>
      </div>
      <div class="option">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmSelDel"
        >
          确认
        </el-button>
        <el-button @click="cancelSelDel">取消</el-button>
      </div>
    </el-dialog>

    <div class="bgImg" v-if="bgImg">
      <el-carousel
        @click="bgImg = false"
        ref="bgImgs"
        indicator-position
        arrow="always"
        :autoplay="false"
        trigger
      >
        <el-carousel-item>
          <img :src="showImg" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import COS from "cos-js-sdk-v5";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, genFileId } from "element-plus";
import { Camera,Tools } from "@element-plus/icons-vue";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import compressImg from "@/utils/compressImg.js";
import eds from "@/utils/eds.js";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 树形结构
const dataSource = ref([
  {
    id: 1,
    label: "万载县第三中学",
    children: [
      {
        id: 2,
        label: "教职工",
        children: [
          {
            id: 121,
            label: "院领导",
          },
          {
            id: 122,
            label: "董事会办公室",
          },
          {
            id: 123,
            label: "团委",
          },
          {
            id: 124,
            label: "科技园",
          },
        ],
      },
      {
        id: 3,
        label: "学生",
        children: [
          {
            id: 131,
            label: "设计与技术学院",
          },
          {
            id: 132,
            label: "商学院",
          },
        ],
      },
      {
        id: 4,
        label: "临时人员",
        children: [
          {
            id: 141,
            label: "维修",
          },
          {
            id: 142,
            label: "商品",
          },
        ],
      },
      {
        id: 5,
        label: "司机",
      },
      {
        id: 6,
        label: "食堂",
        children: [
          {
            id: 9,
            label: "一食堂",
          },
          {
            id: 10,
            label: "二食堂",
          },
        ],
      },
    ],
  },
]);
// 被点击的树形节点 id
const treeNodeId = ref();
const treeNodeName = ref();
const isManage = ref(); // 判断当前节点是否是编辑权限

// 主页面数据（----------------------------------------------）
// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [
    // {
    //   userName: "张三",
    //   type: "越界",
    //   position: "教学楼",
    //   img: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1123%2F77d07411j00r30gwf004dc000go00b4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
    //   remark: "请规范好学生行为",
    //   status: "已处理",
    //   time: "2023-12-02 11:05:30",
    // },
  ],
});
const searchInput = reactive({
  keyWord: "", // 姓名或学号关键字
  department: "", // 部门
}); // 搜索按钮数据
const homeShow = ref(true);
const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(8); // 当前总数

// 修改部门 (----------------------------------------------)
const amendBMVisible = ref(false);
const amendBMRef = ref();
const amendBMRuleForm = reactive({
  department: "", // 部门
  id: "",
  parentId: "",
});
// 表单验证
const amendBMRules = reactive({
  department: [
    { required: true, message: "部门名称不能为空", trigger: "blur" },
  ],
});
// 新建子部门 (----------------------------------------------)
const addBMVisible = ref(false);
const addBMRef = ref();
const addBMRuleForm = reactive({
  department: "", // 部门
  id: "",
});
// 表单验证
const addBMRules = reactive({
  department: [
    { required: true, message: "部门名称不能为空", trigger: "blur" },
  ],
});

// 添加成员页面 (---------------------------------------------)
const addMemberShow = ref(false);
const addMemberTitle = ref("添加成员");
const addMemberRef = ref();
const addMemberRuleForm = reactive({
  serialNumber: "", // 学号
  name: "", // 姓名
  identity: "", // 身份
  icCard: "", // 身份证号
  sex: "", // 性别
  department: "", // 部门
  facePhoto: "", // 人脸照片
  facePhoto: "", // 人脸照片
  compressFacePhoto: "", // 压缩的人脸照片
  grade: "", // 年级
  class: "", // 班级
  teachingClass: "", // 任课班级
  institute: "", // 学院
  specialty: "", // 专业
  school: "", // 校区
  dormitory: "", // 宿舍号
  phone: "", // 手机号
  contact: [], // 联系人
  timeGroupId: "", // 时间组
  // 其他信息
  jobName: "", // 职称
  houseAddress: "", // 家庭地址
  nation: "", // 民族
  originOfStudent: "", // 生源地
  graduateCollege: "", // 毕业学院
  duty: "", // 职务
  id: "",
});
const identityData = ref(); // 身份下拉数据
const gradeData = ref(); // 年级下拉数据
const classsData = ref(); // 班级下拉数据
const postData = ref(); // 职务下拉数据
const timeGroupList = ref(); // 时间组下拉数据

const conteactListData = ref(); // 联系人下拉数据
const conteactListCurrentPage = ref(1); // 联系人下拉当前页数
const conteactListPageCount = ref(50); // 联系人下拉一页数据条数
const conteactListTotalPage = ref(); // 联系人总共多少页，判断滚动到底是否还要加载
const conteactListInput = ref(); // 联系人下拉框中的搜索字段
const conteactLoading = ref(false); // 联系人下拉框搜索时加载
const teachingClassProps = { multiple: true }; // 任课班级
const teachingClassData = ref([
  {
    value: 1,
    label: "语文",
    children: [
      {
        value: 2,
        label: "七年级",
        children: [
          { value: 3, label: "一班" },
          { value: 4, label: "二班" },
          { value: 5, label: "三班" },
        ],
      },
      {
        value: 6,
        label: "八年级",
        children: [
          { value: 7, label: "一班" },
          { value: 8, label: "二班" },
          { value: 9, label: "三班" },
        ],
      },
      {
        value: 10,
        label: "九年级",
        children: [
          { value: 11, label: "一班" },
          { value: 12, label: "二班" },
          { value: 13, label: "三班" },
        ],
      },
    ],
  },
  {
    value: 14,
    label: "数学",
    children: [
      {
        value: 15,
        label: "七年级",
        children: [
          { value: 16, label: "一班" },
          { value: 17, label: "二班" },
          { value: 18, label: "三班" },
        ],
      },
      {
        value: 19,
        label: "八年级",
        children: [
          { value: 20, label: "一班" },
          { value: 21, label: "二班" },
          { value: 22, label: "三班" },
        ],
      },
    ],
  },
  {
    value: 23,
    label: "英语",
    children: [
      {
        value: 24,
        label: "七年级",
        children: [
          { value: 25, label: "一班" },
          { value: 26, label: "二班" },
          { value: 27, label: "三班" },
        ],
      },
      {
        value: 28,
        label: "八年级",
        children: [
          { value: 29, label: "一班" },
          { value: 30, label: "二班" },
          { value: 31, label: "三班" },
        ],
      },
    ],
  },
]);

const upload = ref(); // 人脸照片
// 表单验证
const checkPhone = (rule, value, callback) => {
  var reg =
    /^(0|\+?86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
  if (!reg.test(value)) {
    callback(new Error("手机号格式不对"));
  } else {
    callback();
  }
};
const checkIccard = (rule, value, callback) => {
  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if (!reg.test(value)) {
    callback(new Error("身份证号格式不对"));
  } else {
    callback();
  }
};
const addMemberRules = reactive({
  serialNumber: [{ required: true, message: "学号不能为空", trigger: "blur" }],
  name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
  identity: [{ required: true, message: "身份不能为空", trigger: "change" }],
  icCard: [
    { required: true, message: "身份证号不能为空", trigger: "blur" },
    { validator: checkIccard, trigger: "blur" },
  ],
  sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
  department: [{ required: true, message: "部门不能为空", trigger: "change" }],
  facePhoto: [{ required: true, message: "人脸照片不能为空", trigger: "blur" }],
  grade: [{ required: true, message: "年级不能为空", trigger: "change" }],
  // institute: [{ required: true, message: "学院不能为空", trigger: "blur" }],
  // specialty: [{ required: true, message: "专业不能为空", trigger: "blur" }],
  class: [{ required: true, message: "班级不能为空", trigger: "change" }],
  // school: [{ required: true, message: "校区不能为空", trigger: "blur" }],
  // dormitory: [{ required: true, message: "宿舍号不能为空", trigger: "blur" }],
  phone: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { validator: checkPhone, trigger: "blur" },
  ],
  contact: [{ required: true, message: "关联人不能为空", trigger: "blur" }],
  // jobName: [{ required: true, message: "职称不能为空", trigger: "blur" }],
  houseAddress: [
    // { required: true, message: "家庭地址不能为空", trigger: "blur" },
  ],
  // nation: [{ required: true, message: "民族不能为空", trigger: "blur" }],
  originOfStudent: [
    // { required: true, message: "生源地不能为空", trigger: "blur" },
  ],
  graduateCollege: [
    // { required: true, message: "毕业学院不能为空", trigger: "blur" },
  ],
  duty: [{ required: true, message: "职务不能为空", trigger: "blur" }],
  timeGroupId: [{ required: true, message: "时间组不能为空", trigger: "blur" }],
});
// 批量添加 （-----------------------------------------）
const addBatchShow = ref(false);
const addBatchData = reactive({
  list: [
    {
      userName: "张三",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "王卿",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "李明",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "涂涂",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "小红",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "小明",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "例子",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
  ],
});
const addBatch_currentPage = ref(1); // 当前页
const addBatch_pageSize = ref(7);
const addBatch_total = ref(8); // 当前总数
const upload2 = ref(); // ref 导入文件ref
const allImgUpload = ref(); // ref 导入图片ref

const imgLoading = ref(false); // 导入时判断图片全部导入成功
const startImprot = ref(false); // 开始导入时全屏加载

const upload2File = ref(); // 批量导入的文件
const uploadImgList = ref(); // 批量导入的图片列表

// 批量更新 （-----------------------------------------）
const updateBatchShow = ref(false);
const batchUpload = ref(); // ref 更新文件ref
const startUpdate = ref(false); // 开始更新时全屏加载
const batchUpdateFile = ref(); // 批量更新的文件

// 批量删除（--------------------------------------------）
const delBatchShow = ref(false);
const delBatchData = reactive({
  list: [
    {
      userName: "张三",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "王卿",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "李明",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "涂涂",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "小红",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "小明",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
    {
      userName: "例子",
      status: "已处理",
      time: "2023-12-02 11:05:30",
    },
  ],
});
const delBatch_currentPage = ref(1); // 当前页
const delBatch_pageSize = ref(7);
const delBatch_total = ref(8); // 当前总数

// 移动成员（-----------------------------------------------）
const moveData = ref(); // 树形数据
const selectData = reactive({ list: [] }); // 要移动的成员列表
const moveMemberVisible = ref(false);
const moveTree = ref();
const moveSearchInput = ref(); // 移动部门中关键字搜索
const treeSelData = reactive({ list: [] }); //

// 用户导出设置 (-----------------------------------------------）
const exportSettingsVisible = ref(false);
const exportSettingsSel=ref([]) // 用户导出设置的选择数据
const leftChecked=ref([]) // 左边默认选择中的数据
const rightChecked=ref([]) // 右边默认选择中的数据
const exportSettingsData=ref([
  {name:'姓名',id:1},{name:'身份',id:2},{name:'部门',id:3},{name:'学号/电话号码',id:4},
]) // 

// 删除记录页面
const delRecordDatas = ref(); // 删除记录
const delRecordTotal = ref(); // 删除记录数量
const delRecordCurrentPage = ref(1);
const delRecordPageSize = ref(8);
const delRecordShow = ref(false);

// 勾选删除
const selDelVisible = ref(false);

// 查看表格图片 (----------------------------------------------)
const bgImg = ref(false);
const showImg = ref();
const imgClick = (row) => {
  console.log(typeof row);
  if (typeof row == "string") {
    bgImg.value = true;
    showImg.value = row;
  } else {
    bgImg.value = true;
    showImg.value = row.headImage;
  }
};

// 查看用户分页列表
const getList = async () => {
  loading.value = true;
  let data = {
    currentPage: currentPage.value,
    pageCount: pageSize.value,
    departmentId: treeNodeId.value,
    name: searchInput.keyWord,
  };
  // api.value='/smartApi'
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartUser/queryPageSmartUser",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "用户列表");
  if (res.data.code == 200) {
    loading.value = false;
    tableData.list = JSON.parse(eds.decryptDes(res.data.data)).list;
    total.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.message,
    //   center: true,
    // });
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 获取部门树形结构
const getDepartment = async () => {
  let data = {
    name: searchInput.department,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartDepartment/queryDepartmentTree",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "部门树形数据");
  if (res.data.code == 200) {
    loading.value = false;
    if (treeNodeId.value && treeNodeName.value) {
    } else {
      treeNodeId.value = JSON.parse(eds.decryptDes(res.data.data))[0].id;
      treeNodeName.value = JSON.parse(eds.decryptDes(res.data.data))[0].name;
      isManage.value = JSON.parse(eds.decryptDes(res.data.data))[0].isManage;
      getList();
    }
    dataSource.value = JSON.parse(eds.decryptDes(res.data.data));
    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.message,
    //   center: true,
    // });
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 部门节点被点击
const nodeClick = (node, data) => {
  treeNodeId.value = data.id;
  treeNodeName.value = data.name;
  isManage.value = data.isManage;
  getList();
  console.log(data);
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);

// 修改部门（------------------------------------------------）
const amendBMClick = (node, data) => {
  amendBMVisible.value = true;
  amendBMRuleForm.department = data.name;
  amendBMRuleForm.id = data.id;
  amendBMRuleForm.parentId = data.parentId;
  console.log(node, data, "修改部门");
};
const confirmAmendBM = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (valid) {
        let data = {
          id: amendBMRuleForm.id,
          name: amendBMRuleForm.department,
          parentId: amendBMRuleForm.parentId,
        };
        let res = await axios({
          method: "post",
          url:
            api.value + "/wanzai/api/smartDepartment/updateSmartDepartmentById",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res, "修改部门");
        if (res.data.code == 200) {
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          amendBMVisible.value = false;
          getDepartment();
          console.log(treeNodeId.value, amendBMRuleForm.id);
          if (treeNodeId.value == amendBMRuleForm.id) {
            treeNodeName.value = amendBMRuleForm.department;
            getList();
          }
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        console.log("error submit!", fields);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const cancelAmendBM = () => {
  amendBMVisible.value = false;
  amendBMRef.value.resetFields();
};

// 新建子部门（------------------------------------------------）
const addBMClick = (node, data) => {
  addBMVisible.value = true;
  addBMRuleForm.id = data.id;
  addBMRuleForm.department = "";
  console.log(node, data, "新建子部门");
};
const confirmAddBM = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        name: addBMRuleForm.department,
        parentId: addBMRuleForm.id,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/wanzai/api/smartDepartment/insertSmartDepartment",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "添加子部门");
      if (res.data.code == 200) {
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
        addBMVisible.value = false;
        getDepartment();
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const cancelAddBM = () => {
  addBMVisible.value = false;
};

//删除按钮（---------------------------------------------------）
const del = async (row) => {
  let data = {
    id: row.id,
  };
  //   let res = await axios({
  //     method: "post",
  //     url: api.value + "/mhotel/housedelHouser.action",
  //     headers: {
  //       // token: sessionStorage.getItem("token"),
  //       // user_head: sessionStorage.getItem("userhead"),
  //     },
  //     params: data,
  //   });
  //   if (res.data.code == 200) {
  //     if (tableData.list.length == 1 && currentPage.value != 1) {
  //       currentPage.value = currentPage.value - 1;
  //     }
  //     getList();
  //     ElMessage({
  //       type: "success",
  //       showClose: true,
  //       message: res.data.message,
  //       center: true,
  //     });
  //   } else {
  //     ElMessage({
  //       type: "error",
  //       showClose: true,
  //       message: res.data.message,
  //       center: true,
  //     });
  //   }
  // console.log(res);
};

// 添加成员(---------------------------------------------------)
// 获取身份数据下拉、年级数据下拉、班级数据下拉、新增时间组
const classDataList = async () => {
  let identity = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartIdentity/querySmartIdentitys",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(
    identity,
    JSON.parse(eds.decryptDes(identity.data.data)),
    "身份下拉数据"
  );
  identityData.value = JSON.parse(eds.decryptDes(identity.data.data));
  let grade = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartGrade/querySmartGrades",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(grade, "年级下拉数据");
  gradeData.value = JSON.parse(eds.decryptDes(grade.data.data));

  let timeGroupId = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartUser/timeGroups",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(timeGroupId, "时间组下拉数据");
  timeGroupList.value = JSON.parse(eds.decryptDes(timeGroupId.data.data));
};
// 联系人分页数据
const studentList = async () => {
  console.log(conteactListInput.value, "加载");

  let data = {
    currentPage: conteactListCurrentPage.value,
    pageCount: conteactListPageCount.value,
    name: conteactListInput.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/querySmartSecordPage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "联系人数据");
  conteactListData.value = JSON.parse(eds.decryptDes(res.data.data)).list;
  conteactListTotalPage.value = JSON.parse(
    eds.decryptDes(res.data.data)
  ).totalPage;
};
// 职务分页数据
const postList = async () => {
  let data = {
    identityId: addMemberRuleForm.identity,
  };
  let post = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartDuties/queryDutiesByIdentity",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(post);
  if (post.data.code == 200) {
    console.log(
      post,
      JSON.parse(eds.decryptDes(post.data.data)),
      "职务下拉数据"
    );
    postData.value = JSON.parse(eds.decryptDes(post.data.data));
  } else {
    postData.value = [];
  }
};
// 班级下拉数据
const classsList = async () => {
  let data = {
    gradeId: addMemberRuleForm.grade,
  };
  let classs = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartClass/querySmartClasss",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(classs, "班级下拉数据");
  if (classs.data.code == 200) {
    classsData.value = JSON.parse(eds.decryptDes(classs.data.data));
  }
};
// 改变身份加载职务数据
const identityChange = () => {
  addMemberRuleForm.duty = "";
  addMemberRuleForm.contact = [];
  addMemberRuleForm.class = "";
  addMemberRuleForm.grade = "";
  // addMemberRuleForm.phone = "";
  if (addMemberRuleForm.identity) {
    postList();
  }
};
// 切换年级加载班级数据
const classsListChange = (value) => {
  addMemberRuleForm.class = "";
  if (addMemberRuleForm.grade) {
    classsList();
  }
};
// 联系人分页触底加载更多
const addStudentListScroll = () => {
  nextTick(() => {
    const domElementNode = document.querySelector(
      ".more-tag-data .el-select-dropdown__wrap"
    );
    console.log(domElementNode);

    // 注册下拉滚动事件
    if (domElementNode) {
      domElementNode.addEventListener("scroll", async () => {
        const isBottom =
          domElementNode.scrollHeight - domElementNode.scrollTop <=
          domElementNode.clientHeight;
        if (isBottom) {
          if (conteactListCurrentPage.value < conteactListTotalPage.value) {
            conteactListCurrentPage.value++;
            console.log(conteactListInput.value, "滚动里面");
            let data = {
              currentPage: conteactListCurrentPage.value,
              pageCount: conteactListPageCount.value,
              name: conteactListInput.value,
            };
            let res = await axios({
              method: "get",
              url: api.value + "/wanzai/api/smartScore/querySmartSecordPage",
              headers: {
                token: sessionStorage.getItem("token"),
                user_head: sessionStorage.getItem("userhead"),
              },
              params: data,
            });
            console.log(res, "联系人数据");
            conteactListData.value = [
              ...conteactListData.value,
              ...JSON.parse(eds.decryptDes(res.data.data)).list,
            ];
          } else {
            console.log("数据全部加载完成");
          }
        }
      });
    }
  });
};
const addStudentListMore = async () => {
  if (conteactListCurrentPage.value < conteactListTotalPage.value) {
    conteactListCurrentPage.value++;
    console.log(conteactListInput.value, "滚动里面");
    let data = {
      currentPage: conteactListCurrentPage.value,
      pageCount: conteactListPageCount.value,
      name: conteactListInput.value,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartScore/querySmartSecordPage",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, "联系人数据");
    conteactListData.value = [
      ...conteactListData.value,
      ...JSON.parse(eds.decryptDes(res.data.data)).list,
    ];
  } else {
    console.log("数据全部加载完成");
  }
};
// 联系人下拉框搜索时加载
const conteactMethod = (query) => {
  console.log(query);
  conteactListInput.value = query;
  conteactListCurrentPage.value = 1;
  studentList();
};
// 添加成员弹窗
const addMemberClick = () => {
  addMemberTitle.value = "添加成员";
  conteactListCurrentPage.value = 1; // 联系人分页重新赋值为1
  homeShow.value = false;
  addMemberShow.value = true;
  delRecordShow.value = false;
  studentList();
  // addStudentListScroll();
  addMemberRuleForm.serialNumber = "";
  addMemberRuleForm.name = "";
  addMemberRuleForm.identity = "";
  addMemberRuleForm.icCard = "";
  addMemberRuleForm.sex = "";
  addMemberRuleForm.department = "";
  addMemberRuleForm.facePhoto = "";
  addMemberRuleForm.compressFacePhoto = "";
  addMemberRuleForm.grade = "";
  addMemberRuleForm.institute = "";
  addMemberRuleForm.specialty = "";
  addMemberRuleForm.class = "";
  addMemberRuleForm.timeGroupId = "";
  addMemberRuleForm.school = "";
  addMemberRuleForm.dormitory = "";
  addMemberRuleForm.phone = "";
  addMemberRuleForm.contact = [];
  addMemberRuleForm.jobName = "";
  addMemberRuleForm.houseAddress = "";
  addMemberRuleForm.nation = "";
  addMemberRuleForm.originOfStudent = "";
  addMemberRuleForm.graduateCollege = "";
  addMemberRuleForm.duty = "";
  nextTick(() => {
    addMemberRef.value.resetFields();
  });
};
const teachingClassChange=(val)=>{
  console.log(val);
  
}
// 编辑成员弹窗
const editClick = (row) => {
  addMemberTitle.value = "编辑成员";
  conteactListCurrentPage.value = 1; // 联系人分页重新赋值为1
  homeShow.value = false;
  addMemberShow.value = true;
  delRecordShow.value = false;
  studentList();
  // addStudentListScroll();
  console.log(row, "编辑");
  addMemberRuleForm.serialNumber = row.cardNo; // 学号
  addMemberRuleForm.name = row.name; // 姓名
  addMemberRuleForm.identity = row.identityId; // 身份ID
  nextTick(() => {
    postList();
  });
  addMemberRuleForm.icCard = row.idCard; // 身份证
  addMemberRuleForm.sex = row.sexId; // 性别 女:0男:1
  addMemberRuleForm.department = row.departmentId; // 部门ID
  addMemberRuleForm.facePhoto = row.headImage; // 人脸照片
  if (row.grade) {
    addMemberRuleForm.grade = Number(row.grade); // 年级
  } else {
    addMemberRuleForm.grade = "";
  }
  nextTick(() => {
    classsList();
  });
  addMemberRuleForm.institute = row.college; // 学院
  addMemberRuleForm.specialty = row.speciality; // 专业
  addMemberRuleForm.class = row.schoolClass; // 班级
  addMemberRuleForm.timeGroupId = row.timeGroupId; // 时间组
  addMemberRuleForm.school = row.campus; // 校区
  addMemberRuleForm.dormitory = row.dormitoryNumber; // 宿舍号
  addMemberRuleForm.phone = row.phone; // 手机号
  if (row.affiliate) {
    let arr = [];
    row.affiliates.forEach((item) => {
      arr.push(`${item.name}·${item.id}`);
    });
    addMemberRuleForm.contact = arr; // 联系人
  } else {
    addMemberRuleForm.contact = [];
  }
  addMemberRuleForm.jobName = row.title; // 职称
  addMemberRuleForm.houseAddress = row.address; // 家庭住址
  addMemberRuleForm.nation = row.nation; // 民族
  addMemberRuleForm.originOfStudent = row.ofStudent; // 生源地
  addMemberRuleForm.graduateCollege = row.graduate; // 毕业学校
  addMemberRuleForm.duty = row.duties; // 职务
  addMemberRuleForm.id = row.id;
};
// 确定添加成员
const confirmAddMember = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log(addMemberRuleForm.contact);
      let arr = [];
      addMemberRuleForm.contact.forEach((item) => {
        let index = item.split("·");
        arr.push(index[1]);
      });
      console.log(arr);
      let data = {
        cardNo: addMemberRuleForm.serialNumber, // 学号
        name: addMemberRuleForm.name, // 姓名
        identityId: addMemberRuleForm.identity, // 身份ID
        idCard: addMemberRuleForm.icCard, // 身份证
        sexId: addMemberRuleForm.sex, // 性别 女:0男:1
        departmentId: addMemberRuleForm.department, // 部门ID
        headImage: addMemberRuleForm.facePhoto, // 人脸照片
        grade: addMemberRuleForm.grade, // 年级
        college: addMemberRuleForm.institute, // 学院
        speciality: addMemberRuleForm.specialty, // 专业
        schoolClass: addMemberRuleForm.class, // 班级
        timeGroupId: addMemberRuleForm.timeGroupId, // 时间组
        campus: addMemberRuleForm.school, // 校区
        dormitoryNumber: addMemberRuleForm.dormitory, // 宿舍号
        phone: addMemberRuleForm.phone, // 手机号
        affiliate: arr, // 联系人
        title: addMemberRuleForm.jobName, // 职称
        address: addMemberRuleForm.houseAddress, // 家庭住址
        nation: addMemberRuleForm.nation, // 民族
        ofStudent: addMemberRuleForm.originOfStudent, // 生源地
        graduate: addMemberRuleForm.graduateCollege, // 毕业学校
        duties: addMemberRuleForm.duty, // 职务
      };
      let res = "";
      if (addMemberRuleForm.id) {
        data.id = addMemberRuleForm.id;
        res = await axios({
          method: "post",
          url: api.value + "/wanzai/api/smartUser/updateSmartUserById",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res, "编辑用户");
      } else {
        res = await axios({
          method: "post",
          url: api.value + "/wanzai/api/smartUser/insertSmartUser",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res, "新增用户");
      }

      if (res.data.code == 200) {
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
        homeShow.value = true;
        addMemberShow.value = false;
        delRecordShow.value = false;
        addMemberRef.value.resetFields();
        getList();
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const addMemberConcel = () => {
  addMemberShow.value = false;
  homeShow.value = true;
  delRecordShow.value = false;
  addMemberRef.value.resetFields();
  addMemberRuleForm.id = "";
};
// 移出照片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile.uid, uploadFiles);
  addMemberRuleForm.facePhoto = "";
};
// 点击图片的查看按钮
const handlePreview = (file) => {
  // imgUrl.value = file.url;
  // imgVisible.value = true;
  // console.log(file, "00000000");
};
// 限制上传图片的大小
// const beforeAvatarUpload = (rawFile) => {
//   console.log(rawFile, 33333);
//   if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
//     ElMessage.error("图片格式必须为JPG/PNG格式!");
//     return false;
//   } else if (rawFile.size / 1024 > 150) {
//     ElMessage.error("图片的大小不能超过150kb!");
//     return false;
//   }
//   return true;
// };
// 添加照片时往fileList列表中添加图片信息
const handleChange = async (file, fileLists) => {
  console.log(file, "1111");
  if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
    if (file.size / 1024 / 1024 <= 2) {
      const cos = new COS({
        SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
        SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
        SecurityToken: "1306339220",
        Bucket: "wanzai-1306339220",
        Region: "ap-shanghai",
      });
      const files = file.raw;
      console.log(files);
      // 压缩图片
      // console.log(compressImg);

      var compressImgFile = await compressImg.compressImg(files);
      // console.log(compressImgFile, "压缩图片");
      const compressKey = "Compress" + file.raw.name; // 设置上传到 COS 后的文件名
      cos.putObject(
        {
          Bucket: "wanzai-1306339220",
          Region: "ap-shanghai",
          Key: compressKey,
          Body: compressImgFile,
          onProgress: function (progressData) {
            console.log(JSON.stringify(progressData));
          },
        },
        function (err, data) {
          if (err) {
            console.error(err);
          } else {
            console.log(data, "压缩图片获取成功");
            addMemberRuleForm.facePhoto = "https://" + data.Location;
            // 成功
          }
        }
      );
      // 上传cos桶
      const key = file.raw.name; // 设置上传到 COS 后的文件名
      cos.putObject(
        {
          Bucket: "wanzai-1306339220",
          Region: "ap-shanghai",
          Key: key,
          Body: files,
          onProgress: function (progressData) {
            console.log(JSON.stringify(progressData));
          },
        },
        function (err, data) {
          if (err) {
            console.error(err);
          } else {
            console.log(data, "图片获取成功");
            addMemberRuleForm.compressFacePhoto = "https://" + data.Location;
            // 成功
          }
        }
      );
    } else {
      ElMessage.error("图片的大小不能超过2M!");
    }
  } else {
    ElMessage.error("图片格式必须为JPG/PNG格式!");
  }
};
// 可以获取图片参数
const handleUpload = async (file) => {
  console.log(file, "22222222");
};
// 当头像被另外图片替换时调用此函数
const handleExceed = (files) => {
  upload.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload.value.handleStart(file);
};

// // 确定编辑
// const confirmEdit = (formEl) => {
//   if (!formEl) return;
//   formEl.validate(async (valid, fields) => {
//     if (valid) {
//     }
//   });
// };

// 批量添加 (------------------------------------------------------)
const addBatchClick = () => {
  addBatchShow.value = true;
  homeShow.value = false;
  delRecordShow.value = false;
  nextTick(() => {
    const Ele = document.querySelector(".img-upload-demo .el-upload__input");
    Ele["webkitdirectory"] = true;
  });
};
const addBatchConcel = () => {
  homeShow.value = true;
  addBatchShow.value = false;
  delRecordShow.value = false;
  upload2File.value = "";
  uploadImgList.value = "";
  allImgUpload.value.clearFiles();
  upload2.value.clearFiles();
};

// 批量更新 (------------------------------------------------------)
const updateBatchClick = () => {
  homeShow.value = false;
  updateBatchShow.value = true;
  delRecordShow.value = false;
};
const updateBatchConcel = () => {
  updateBatchShow.value = false;
  homeShow.value = true;
  delRecordShow.value = false;
  batchUpdateFile.value = "";
  batchUpload.value.clearFiles();
};
// 添加文件信息
const handleChangeUpdate = async (file, fileLists) => {
  console.log(file, "1111");
  batchUpdateFile.value = file.raw;
};
// 可以获取文件参数
const handleUploadUpdate = async (file) => {
  console.log(file, "22222222");
};
// 上传文件时覆盖上一个文件
const handleExceedUpdate = (files) => {
  batchUpload.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  batchUpload.value.handleStart(file);
};
// 移出文件
const handleRemoveUpdate = (uploadFile, uploadFiles) => {
  batchUpdateFile.value = "";
};
// 更新时限制上传文件的大小
const beforeAvatarUploadUpdate = (rawFile) => {
  console.log(rawFile.type, "文件类型");
  if (
    rawFile.type !==
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  ) {
    ElMessage.error("文件格式必须为xlsx格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 100) {
    ElMessage.error("文件的大小不能超过100MB!");
    return false;
  }
  return true;
};
// 批量更新模板下载
const downLoadtempUpdate = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartUser/downloadUpdateUserExcel",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(
    res,
    JSON.parse(eds.decryptDes(res.data.data)),
    "批量更新模板下载"
  );

  if (res.data.code == 200) {
    var downloadPath = JSON.parse(eds.decryptDes(res.data.data));
    // window.open(downloadPath);
    window.location.href = downloadPath;
    var downloadLink = document.createElement("a");
    downloadLink.style.display = "none"; // 使其隐藏
    downloadLink.href = downloadPath;
    downloadLink.download = "";
    downloadLink.click();
    document.body.appendChild(downloadLink);
    document.body.removeChild(downloadLink);
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 开始批量更新按钮
const bulkUpdateImport = async () => {
  startUpdate.value = true;
  console.log(batchUpdateFile.value, "更新文件");

  const formData = new FormData();
  formData.append("file", batchUpdateFile.value);

  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartUser/importExcelUpdateUsers",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: formData,
  });
  console.log(res, "确定批量更新");
  if (res.data.code == 200) {
    getList();
    batchUpdateFile.value = "";
    batchUpload.value.clearFiles();
    startUpdate.value = false;
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    startUpdate.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 打开删除记录页面 （--------------------------------------------------）
const DelRecordClick = async () => {
  delRecordShow.value = true;
  delBatchShow.value = false;
  homeShow.value = false;
  addMemberTitle.value = "删除记录";
  let data = {
    currentPage: delRecordCurrentPage.value,
    pageCount: delRecordPageSize.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartUser/queryUserDeletePage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "删除记录分页");
  if (res.data.code == 200) {
    delRecordDatas.value = JSON.parse(eds.decryptDes(res.data.data)).list;
    delRecordTotal.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 关闭删除记录页面
const delRecordClose = () => {
  delRecordShow.value = false;
  delBatchShow.value = false;
  homeShow.value = true;
};

// 批量导入模板下载 (-------------------------------------------------)
const downLoadtempAdd = async (flag) => {
  if (flag == 1) {
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartUser/downloadUserExcel",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      // params: data,
    });
    console.log(
      res,
      JSON.parse(eds.decryptDes(res.data.data)),
      "批量导入学生模板下载"
    );

    if (res.data.code == 200) {
      var downloadPath = JSON.parse(eds.decryptDes(res.data.data));
      // window.open(downloadPath);
      window.location.href = downloadPath;
      var downloadLink = document.createElement("a");
      downloadLink.style.display = "none"; // 使其隐藏
      downloadLink.href = downloadPath;
      downloadLink.download = "";
      downloadLink.click();
      document.body.appendChild(downloadLink);
      document.body.removeChild(downloadLink);
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      loading.value = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else {
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartUser/downloadTeacherExcel",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      // params: data,
    });
    console.log(
      res,
      JSON.parse(eds.decryptDes(res.data.data)),
      "批量导入教师模板下载"
    );

    if (res.data.code == 200) {
      var downloadPath = JSON.parse(eds.decryptDes(res.data.data));
      // window.open(downloadPath);
      window.location.href = downloadPath;
      var downloadLink = document.createElement("a");
      downloadLink.style.display = "none"; // 使其隐藏
      downloadLink.href = downloadPath;
      downloadLink.download = "";
      downloadLink.click();
      document.body.appendChild(downloadLink);
      document.body.removeChild(downloadLink);
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      loading.value = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};
// 移出照片
const handleRemove2 = (uploadFile, uploadFiles) => {
  // console.log(uploadFile.uid, uploadFiles);
  // fileList.list = fileList.list.filter((item) => {
  //   return item.uid != uploadFile.uid;
  // });
  // ruleForm.fileListJson = fileList.list;
  upload2File.value = "";
};
// 点击图片的查看按钮
const handlePreview2 = (file) => {
  // imgUrl.value = file.url;
  // imgVisible.value = true;
  console.log(file);
};
// 限制上传图片的大小
const beforeAvatarUpload2 = (rawFile) => {
  console.log(rawFile.type, "文件类型");
  if (
    rawFile.type !==
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  ) {
    ElMessage.error("文件格式必须为xlsx格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 100) {
    ElMessage.error("文件的大小不能超过100MB!");
    return false;
  }
  return true;
};
// 添加照片时往fileList列表中添加图片信息
const handleChange2 = async (file, fileLists) => {
  console.log(file, "1111");
  // fileList.list.push(file);
  upload2File.value = file.raw;
};
// 可以获取图片参数
const handleUpload2 = async (file) => {
  // if (fileList.list.length >= 6) {
  //   ElMessage.error("最多可上传6张图片!");
  //   return false;
  // }
  console.log(file, "22222222");
  // let data = new FormData();
  // data.set("files", file.file);
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/file/cos/upload",
  //   headers: {},
  //   data: data,
  // });
  // console.log(res, "图片上传成功详情图");
  // if (res.data.code == 1) {
  //   // res.data.data.uid = file.file.uid;
  //   // console.log([res.data.data]);
  //   let arr = {
  //     uid: file.file.uid,
  //     url: res.data.data,
  //   };

  //   fileList.list = fileList.list.concat([arr]);
  //   ruleForm.fileListJson = fileList.list;
  // }
};
// 上传文件时覆盖上一个文件
const handleExceed2 = (files) => {
  upload2.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload2.value.handleStart(file);
};

// 移出照片
const handleRemoveImgUpload = (uploadFile, uploadFiles) => {
  // console.log(uploadFile.uid, uploadFiles);
  // fileList.list = fileList.list.filter((item) => {
  //   return item.uid != uploadFile.uid;
  // });
  // ruleForm.fileListJson = fileList.list;
};
// 点击图片的查看按钮
const handlePreviewImgUpload = (file) => {
  // imgUrl.value = file.url;
  // imgVisible.value = true;
  console.log(file);
};
// 限制上传图片的大小
const beforeAvatarUploadImgUpload = (rawFile) => {
  // console.log(rawFile.type, "文件类型");
  // console.log(rawFile.type == "image/jpeg",rawFile.type == "image/png");

  if (rawFile.type == "image/jpeg" || rawFile.type == "image/png") {
    if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error("图片的大小不能超过2MB!");
      return false;
    }
  } else {
    ElMessage.error("文件格式必须为jpg或png格式!");
    return false;
  }
  return true;
};
// 添加照片时往fileList列表中添加图片信息
const handleChangeImgUpload = async (file, fileLists) => {
  // console.log(file, "重新上传图片");
  // fileList.list.push(file);
  uploadImgList.value = "";
  // allImgUpload.value.clearFiles();
};
let timer;
// 可以获取图片参数
const handleUploadImgUpload = async (file) => {
  // console.log(file, "22222222");
  const cos = new COS({
    SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
    SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
    SecurityToken: "1306339220",
    Bucket: "wanzai-1306339220",
    Region: "ap-shanghai",
  });
  const files = file.file;
  // console.log(files);
  const compressKey = file.file.name; // 设置上传到 COS 后的文件名
  cos.putObject(
    {
      Bucket: "wanzai-1306339220",
      Region: "ap-shanghai",
      Key: compressKey,
      Body: files,
      onProgress: function (progressData) {
        // console.log(JSON.stringify(progressData));
      },
    },
    function (err, data) {
      if (err) {
        console.error(err);
      } else {
        // console.log(data, "图片获取成功");
        uploadImgList.value =
          uploadImgList.value + "," + "https://" + data.Location;
        // 成功
        successAllImg();
      }
    }
  );
};
const successAllImg = () => {
  imgLoading.value = true;
  clearTimeout(timer);
  timer = setInterval(() => {
    imgLoading.value = false;
  }, 1000);
};
// 文件上传成功时的钩子
const handleSuccessImgUpload = (response, uploadFile, uploadFiles) => {
  // console.log(response,uploadFile,uploadFiles,"上传成功");
  console.log(uploadFiles.length, "上传成功");
  // successAllImg()
};

// 重置按钮 重置上传文件
const resetImport = () => {
  upload2File.value = "";
  uploadImgList.value = "";
  allImgUpload.value.clearFiles();
  upload2.value.clearFiles();
};
// 批量导入按钮
const bulkImport = async () => {
  // if (upload2File.value && uploadImgList.value) {
  // } else {
  //   ElMessage({
  //     type: "warning",
  //     showClose: true,
  //     message: "上传文件或图片不能为空",
  //     center: true,
  //   });
  //   return false;
  // }
  startImprot.value = true;
  // uploadImgList.value = uploadImgList.value.slice(1);
  console.log(uploadImgList.value, "拼接好的图片地址");
  console.log(upload2File.value, "导入的文件");

  const formData = new FormData();
  formData.append("file", upload2File.value);
  formData.append("headImage", uploadImgList.value);

  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartUser/importExcelUsers",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: formData,
  });
  console.log(res, "确定批量导入");
  if (res.data.code == 200) {
    getList();
    upload2File.value = "";
    uploadImgList.value = "";
    allImgUpload.value.clearFiles();
    upload2.value.clearFiles();
    startImprot.value = false;
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    startImprot.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 分页
const handleAddBatch = (value) => {
  // console.log(value);
  addBatch_currentPage.value = value;
};

// 批量删除 (------------------------------------------------------)
const delBatchClick = () => {
  delBatchShow.value = true;
  homeShow.value = false;
  delRecordShow.value = false;
};
const delBatchConcel = () => {
  homeShow.value = true;
  delBatchShow.value = false;
  delRecordShow.value = false;
};
// 移出照片
const handleRemove3 = (uploadFile, uploadFiles) => {
  // console.log(uploadFile.uid, uploadFiles);
  // fileList.list = fileList.list.filter((item) => {
  //   return item.uid != uploadFile.uid;
  // });
  // ruleForm.fileListJson = fileList.list;
};
// 点击图片的查看按钮
const handlePreview3 = (file) => {
  // imgUrl.value = file.url;
  // imgVisible.value = true;
  console.log(file);
};
// 限制上传图片的大小
const beforeAvatarUpload3 = (rawFile) => {
  console.log(rawFile.type, "文件类型");
  if (
    rawFile.type !==
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  ) {
    ElMessage.error("文件格式必须为xlsx格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 100) {
    ElMessage.error("图片的大小不能超过100MB!");
    return false;
  }
  return true;
};
// 添加照片时往fileList列表中添加图片信息
const handleChange3 = async (file, fileLists) => {
  console.log(file, "1111");
  // fileList.list.push(file);
};
// 可以获取图片参数
const handleUpload3 = async (file) => {
  // if (fileList.list.length >= 6) {
  //   ElMessage.error("最多可上传6张图片!");
  //   return false;
  // }
  console.log(file, "22222222");
  // let data = new FormData();
  // data.set("files", file.file);
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/file/cos/upload",
  //   headers: {},
  //   data: data,
  // });
  // console.log(res, "图片上传成功详情图");
  // if (res.data.code == 1) {
  //   // res.data.data.uid = file.file.uid;
  //   // console.log([res.data.data]);
  //   let arr = {
  //     uid: file.file.uid,
  //     url: res.data.data,
  //   };

  //   fileList.list = fileList.list.concat([arr]);
  //   ruleForm.fileListJson = fileList.list;
  // }
};
// 分页
const handleDelBatch = (value) => {
  // console.log(value);
  delBatch_currentPage.value = value;
};

// 移动成员 (----------------------------------------------------------------)
// 首页表格多选框功能
const handleSelectionChange = (val) => {
  console.log(val);
  selectData.list = val;
};
// 获取移动成员中的部门信息
const getMoveData = async () => {
  let data = {
    name: moveSearchInput.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartDepartment/queryDepartmentTree",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "部门树形数据");
  if (res.data.code == 200) {
    moveData.value = JSON.parse(eds.decryptDes(res.data.data));
    // 判断有没有右边有没有勾选好的部门，有就重新给树形图自动勾上
    if (treeSelData.list.length) {
      moveTree.value.setCheckedNodes(treeSelData.list);
    }
    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.message,
    //   center: true,
    // });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 打开移动弹窗
const moveMemberClick = async () => {
  if (selectData.list.length) {
    moveMemberVisible.value = true;
    getMoveData();
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "请先选择需要移动的用户",
      center: true,
    });
  }
};
const cancelMoveMember = () => {
  moveMemberVisible.value = false;
  moveTree.value.setCheckedKeys([]);
  treeSelData.list = [];
};
// 移动成员里面勾选的
const moveCheckChange = (data, checked, indeterminate) => {
  console.log(data, checked, indeterminate, "移动成员勾选");
  if (treeSelData.list.length) {
    if (data.id == treeSelData.list[0].id) {
      treeSelData.list = [];
    }
  }
  if (checked) {
    let arr = {
      id: data.id,
      label: data.name,
    };
    treeSelData.list = [arr];
    // console.log(treeSelData.list);
    moveTree.value.setCheckedKeys([]); // 删除所有选中节点
    moveTree.value.setCheckedNodes([arr]); // 选中已选中节点
  } else {
    console.log("取消勾选");
  }
};
// 移动确定勾选
const confirmMoveMember = async () => {
  let userId = [];
  selectData.list.forEach((i) => {
    userId.push(i.id);
  });
  let data = {
    userIds: userId,
    departmentId: treeSelData.list[0].id,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartUser/changeDepartment",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "部门树形数据");
  if (res.data.code == 200) {
    moveMemberVisible.value = false;
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 移动取消勾选
const cancelTreeSel = (i) => {
  console.log(i);
  moveTree.value.setCheckedKeys([]);
  treeSelData.list = [];
  // treeSelData.list = treeSelData.list.filter((item) => {
  //   return item.id != i.id;
  // });
  // let arr = [];
  // treeSelData.list.forEach((item) => {
  //   arr.push(item.id);
  // });
  // moveTree.value.setCheckedKeys(arr);
};

// 用户导出设置 (----------------------------------------------------------------)
const exportSettingsClick = () => {
  exportSettingsVisible.value=true
};
const exportSettingsChange=(
  value,
  direction,
  movedKeys
) => {
  console.log(exportSettingsSel.value);
  
  console.log(value, direction, movedKeys)
}
const confirmExportSettings=()=>{
  console.log("确定用户设置");
}
const cancelExportSettings=()=>{
  exportSettingsVisible.value=false
}

// 注销账号 (--------------------------------------------------------------------)
// const closeAccountClick = () => {
//   if (selectData.list.length) {
//     closeAccountVisible.value = true;
//   } else {
//     ElMessage({
//       type: "warning",
//       showClose: true,
//       message: "请先选择需要注销的用户",
//       center: true,
//     });
//   }
// };
// const cancelCloseAccount = () => {
//   closeAccountVisible.value = false;
// };

// 勾选删除 (--------------------------------------------------------------------)
const delDelClick = () => {
  if (selectData.list.length) {
    selDelVisible.value = true;
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "请先选择需要删除的用户",
      center: true,
    });
  }
};
// 确定删除
const confirmSelDel = async () => {
  let userId = [];
  selectData.list.forEach((i) => {
    userId.push(i.id);
  });
  let data = {
    userIds: userId,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartUser/deleteSmartUserById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "删除成功");
  if (res.data.code == 200) {
    selDelVisible.value = false;
    if (
      selectData.list.length == tableData.list.length &&
      currentPage.value != 1
    ) {
      currentPage.value = currentPage.value - 1;
    }
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const cancelSelDel = () => {
  selDelVisible.value = false;
};

//导出功能
const importExcel = async () => {
  let data = {
    departmentId: treeNodeId.value,
    name: searchInput.keyWord,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartUser/smartUserExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
    responseType: "blob",
  });
  console.log(res, "导出用户");
  if (res.status == 200) {
    let name = `用户信息表`;
    var content = res.data;
    var datas = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(datas);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(datas);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};

// 每页显示条数
const handleSizeChange = (value) => {
  console.log(value, "每页显示条数");
  pageSize.value = value;
  currentPage.value = 1;
  getList();
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};
const Enters = (e) => {
  // console.log("按键:", e.key);
  if (e.key == "Enter") {
    searchBtn();
  }
};
onBeforeMount(async () => {
  document.addEventListener("keyup", Enters);
  api.value = store.state.user.api;
  getDepartment(); // 左边部门树形结构
  classDataList(); // 添加成员中 获取身份数据下拉、年级数据下拉、班级数据下拉
  postList(); // 职务数据
});
onUnmounted(() => {
  document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1200px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  // background-color: #fff;
  // color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  // box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  .searchTree {
    width: 220px;
    margin: 20px 12px;
    :deep(.el-input__wrapper) {
      background-color: rgba(230, 230, 230, 1);
    }
  }
  .treeV {
    width: 247px;
    height: 100%;
    overflow: auto;
    margin-right: 20px;
    border-radius: 8px;
    box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
    background-color: #fff;

    :deep(.el-tree-node__content) {
      cursor: auto;
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        .title {
          display: flex;
          align-items: center;
          cursor: pointer;
        }
        .nodeClick {
          color: rgb(0, 97, 255);
        }
        img {
          width: 1.2em;
          height: 1.2em;
          margin: 0 5px 0 0;
        }
      }
    }
  }
  // 主页面
  .userRight {
    flex: 1;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
    background-color: #fff;

    .scorll {
      overflow: auto;
      height: calc(100% - 61px);
    }
    .left {
      // width: calc(100wh - 40px);
      display: flex;
      align-items: center;
      height: 60px;
      padding: 0 30px;
      border-bottom: 1px solid #ccc;
      color: rgb(0, 0, 0);
      font-size: 20px;
      font-weight: 600;
      span:nth-child(2) {
      }
      span:nth-child(3) {
        margin-left: 20px;
        font-size: 14px;
        color: rgba(128, 128, 128, 1);
      }
    }

    .middle {
      width: 96%;
      margin: 0 auto;
      color: #000;

      // border-bottom: 1px solid rgb(231, 231, 231);
      .filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 10px 0 0 0;

        .search {
          color: #fff;
        }

        .condition {
          display: flex;
          align-items: center;
          margin: 10px 30px 10px 0;

          :deep(.el-input .el-input__inner) {
            font-size: 14px;
          }

          span {
            margin: 0 10px 0 0;
          }
        }
      }

      .gongneng {
        margin: 10px 0 20px 0;

        span {
          color: #fff;
        }
        .el-button {
          margin-right: 10px;
        }
        .el-dropdown {
          margin: 0 10px;
        }
      }

      :deep(.cont) {
        width: 60%;
        margin: 20px auto;
      }

      :deep(.download) {
        display: flex;
        align-items: center;
        margin: 10px;
      }

      :deep(.download span) {
        font-size: 16px;
        margin-left: 20px;
      }

      :deep(.cont .el-button) {
        margin-left: 60px;
        margin-bottom: 30px;
      }

      :deep(.cont .accomplish) {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      :deep(.cont .accomplish .el-button) {
        width: 50%;
        margin: 0;
      }
    }

    .footer {
      width: 96%;
      height: calc(100% - 205px);
      margin: 10px auto 25px;
      min-height: 300px;

      .el-table--fit {
        height: 100% !important;
        :deep(.el-table__header-wrapper) {
          background-color: #000;
          font-size: 14px;

          tr {
            // color: #000;
          }
        }

        :deep(.el-table__row) {
          height: 50px;
          font-size: 14px;
          // color: #000;
          &:hover {
            td {
              background-color: rgba(223, 236, 254, 1);
            }
          }
        }

        :deep(.el-table__row):nth-child(2n) {
          .el-table-fixed-column--right {
            background-color: rgba(240, 243, 247, 1);
          }
        }

        :deep(.el-table__row td) {
          padding: 0;
          border: 0;
          .img {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 5px 0;
            img {
              width: 60px;
              height: 60px;
              cursor: pointer;
            }
          }
        }

        .el-button--primary {
          margin-left: 5px;
        }

        :deep(.el-table__body .even) {
          background-color: #fff;
        }

        :deep(.el-table__body .odd) {
          background-color: rgba(240, 243, 247, 1);
        }

        :deep(.edit) {
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(111, 182, 184, 1);
        }

        :deep(.look) {
          padding: 0 10px;
          cursor: pointer;
          color: rgba(30, 125, 251, 1);
        }

        .del {
          padding: 0 10px;
          color: rgba(212, 48, 48, 1);
          cursor: pointer;
        }

        // :deep(.look):hover {
        //   color: red;
        // }
        // :deep(.del):hover {
        //   color: red;
        // }
      }
    }
  }
  // 添加成员页面
  .addMember {
    flex: 1;
    height: 100%;
    min-width: 900px;
    // margin-right: 20px;
    border-radius: 8px;
    box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
    .left {
      // width: calc(100wh - 40px);
      display: flex;
      align-items: center;
      height: 60px;
      padding: 0 30px;
      border-bottom: 1px solid #ccc;
      color: rgb(0, 0, 0);
      font-size: 20px;
      font-weight: 600;
      img {
        width: 18px;
        height: 18px;
        cursor: pointer;
      }
      .add {
        margin-left: 20px !important;
        font-size: 20px !important;
        color: rgba(0, 0, 0, 1) !important;
      }
    }
    .title {
      display: flex;
      align-items: center;
      height: 60px;
      color: rgb(0, 0, 0);
      font-size: 20px;
      font-weight: 600;
      img {
        width: 29px;
        height: 20px;
        margin-right: 5px;
      }
      .add {
        margin-left: 20px !important;
        font-size: 20px !important;
        color: rgba(0, 0, 0, 1) !important;
      }
    }
    .content {
      padding: 0 30px;
      height: calc(100% - 61px);
      // margin: 10px 0 0 0;
      .form {
        height: 100%;
        overflow: auto;
        .el-form-item {
          .facePhoto {
            img {
              width: 80px;
              // height:50px;
            }
          }
          :deep(.el-upload-list) {
            display: none;
          }
        }
        .imgUpload {
          margin-top: 5px;
          display: flex;
          .upload-demo {
            margin-right: 10px;
          }
          .img-upload-demo {
            :deep(.el-upload-list) {
              // display: none;
              max-height: 130px;
              overflow: auto;
              // 整个滚动条
              &::-webkit-scrollbar-track {
                background-color: #daeeff;
              }
              // 滚动条的滚动区域（轨道）
              &::-webkit-scrollbar {
                background-color: #0888f8;
                height: 3px;
                width: 4px;
              }
            }
          }
        }
        .startImport {
          .el-button {
            width: 500px;
            height: 42px;
          }
          .downLoad {
            color: rgba(0, 97, 255, 1);
            font-size: 14px;
            margin-left: 15px;
            cursor: pointer;
          }
        }
        .tableTitle {
          font-size: 14px;
          margin-top: 10px;
        }
        .footer {
          width: 99%;
          height: 360px;
          margin: 10px auto 30px;

          .el-table--fit {
            height: 100%;

            :deep(.el-table__header-wrapper) {
              background-color: #000;
              font-size: 14px;

              tr {
                color: #000;
              }
            }

            :deep(.el-table__row) {
              height: 45px;
              font-size: 14px;
              color: #000;
              &:hover {
                td {
                  background-color: rgba(223, 236, 254, 1);
                }
              }
            }

            :deep(.el-table__row):nth-child(2n) {
              .el-table-fixed-column--right {
                background-color: rgba(240, 243, 247, 1);
              }
            }

            :deep(.el-table__row td) {
              padding: 0;
              border: 0;
            }

            .el-button--primary {
              margin-left: 5px;
            }

            :deep(.el-table__body .even) {
              background-color: #fff;
            }

            :deep(.el-table__body .odd) {
              background-color: rgba(240, 243, 247, 1);
            }

            :deep(.edit) {
              display: flex;
              align-items: center;
              justify-content: center;
              color: rgba(111, 182, 184, 1);
            }

            :deep(.look) {
              padding: 0 10px;
              cursor: pointer;
              color: rgba(30, 125, 251, 1);
            }

            .del {
              padding: 0 10px;
              color: rgba(212, 48, 48, 1);
              cursor: pointer;
            }

            // :deep(.look):hover {
            //   color: red;
            // }
            // :deep(.del):hover {
            //   color: red;
            // }
          }
          .pageSize {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px 30px 0;

            span {
              color: #000;
            }

            .el-pagination {
              // width: 1600px;
              :deep(.el-pagination__total) {
                color: #000;
              }

              :deep(.el-pagination__goto) {
                color: #000;
              }

              :deep(.el-pagination__classifier) {
                color: #000;
              }

              :deep(.el-input__wrapper) {
                border: 1px solid rgba(0, 0, 0, 1);
                border-radius: 5px;
                box-shadow: none;
              }

              :deep(.el-pager li) {
                margin: 0 5px;
                border: 1px solid rgba(0, 0, 0, 1);
                border-radius: 5px;
                background-color: transparent;
              }

              :deep(.el-pager li.is-active) {
                // background-color: rgba(0, 97, 255, 0.8);
                border: 1px solid rgba(0, 97, 255, 1);
                color: rgba(0, 97, 255, 1);
              }

              :deep(.btn-prev) {
                margin-right: 5px;
                border: 1px solid rgba(0, 0, 0, 1);
                border-radius: 5px;
                background-color: transparent;
              }

              :deep(.btn-next) {
                margin-left: 5px;
                border: 1px solid rgba(0, 0, 0, 1);
                border-radius: 5px;
                background-color: transparent;
              }
            }
          }
        }
      }
      // 整个滚动条
      .form::-webkit-scrollbar-track {
        background-color: #daeeff;
      }
      // 滚动条的滚动区域（轨道）
      .form::-webkit-scrollbar {
        background-color: #0888f8;
        height: 3px;
        width: 4px;
      }
      // 滚动条的可拖拽部分（滑块）
      // .form::-webkit-scrollbar-thumb {
      //   background: #57b2ff;
      //   border-radius: 4px;
      //   height: 3px;
      //   width: 4px;
      // }
    }
  }
  // 删除记录页面
  .delRecord {
    flex: 1;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
    background-color: #fff;

    .scorll {
      overflow: auto;
      height: calc(100% - 61px);
    }
    .left {
      // width: calc(100wh - 40px);
      display: flex;
      align-items: center;
      height: 60px;
      padding: 0 30px;
      border-bottom: 1px solid #ccc;
      color: rgb(0, 0, 0);
      font-size: 20px;
      font-weight: 600;
      img {
        width: 18px;
        height: 18px;
      }
      .add {
        margin-left: 20px;
      }
    }

    .middle {
      width: 96%;
      margin: 0 auto;
      color: #000;
    }

    .footer {
      width: 96%;
      height: calc(100% - 100px);
      margin: 15px auto 25px;
      min-height: 300px;

      .el-table--fit {
        height: 100% !important;
        :deep(.el-table__header-wrapper) {
          background-color: #000;
          font-size: 14px;

          tr {
            // color: #000;
          }
        }

        :deep(.el-table__row) {
          height: 50px;
          font-size: 14px;
          // color: #000;
          &:hover {
            td {
              background-color: rgba(223, 236, 254, 1);
            }
          }
        }

        :deep(.el-table__row):nth-child(2n) {
          .el-table-fixed-column--right {
            background-color: rgba(240, 243, 247, 1);
          }
        }

        :deep(.el-table__row td) {
          padding: 0;
          border: 0;
          .img {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 5px 0;
            img {
              width: 60px;
              height: 60px;
              cursor: pointer;
            }
          }
        }

        .el-button--primary {
          margin-left: 5px;
        }

        :deep(.el-table__body .even) {
          background-color: #fff;
        }

        :deep(.el-table__body .odd) {
          background-color: rgba(240, 243, 247, 1);
        }

        :deep(.edit) {
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(111, 182, 184, 1);
        }

        :deep(.look) {
          padding: 0 10px;
          cursor: pointer;
          color: rgba(30, 125, 251, 1);
        }

        .del {
          padding: 0 10px;
          color: rgba(212, 48, 48, 1);
          cursor: pointer;
        }

        // :deep(.look):hover {
        //   color: red;
        // }
        // :deep(.del):hover {
        //   color: red;
        // }
      }
    }
  }
  .bgImg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);

    // border-radius: 50px;
    :deep(.el-carousel__container) {
      width: 100%;
      height: calc(100vh);

      .el-carousel__item {
        display: flex;
        justify-content: center;

        img {
          height: 100%;
        }
      }
    }
  }
  // 修改部门
  :deep(.amendBMDialog) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;
      // height: 200px;
      // display: flex;
      // flex-direction: column-reverse;
      .el-form-item {
        margin: 40px 0;
      }
      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }
  // 移动成员
  :deep(.moveMemberDialog) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;
      height: 550px;
      // display: flex;
      // flex-direction: column-reverse;
      .move {
        display: flex;
        .moveLeft {
          width: 280px;
          height: 96%;
          margin-right: 20px;
          border-radius: 8px;
          // box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
          .el-tree {
            height: 430px;
            // border: 1px solid red;
            overflow: auto;
          }
          .el-tree-node__content {
            .custom-tree-node {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 14px;
              padding-right: 8px;
              .title {
                display: flex;
                align-items: center;
              }
              img {
                width: 1.2em;
                height: 1.2em;
                margin: 0 5px 0 0;
              }
            }
          }
        }
        .moveRight {
          margin: 20px 0 0 0;
          flex: 1;
          .sel {
            margin-bottom: 10px;
          }
          ul {
            // width: 316px;
            height: 95%;
            list-style: none;
            padding: 0;
            margin: 0;
            border-left: 1px solid rgba(230, 230, 230, 1);
            box-sizing: border-box;
            overflow: auto;

            li {
              display: flex;
              justify-content: space-between;
              padding-right: 17px;
              align-items: center;
              margin-top: 5px;

              .el-icon-close {
                cursor: pointer;
                width: 10px;
                height: 10px;
              }
            }
          }
        }
      }
      .options {
        margin: 15px 0;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          margin-left: 20px;
        }
      }

      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }
   // 用户导出设置
   :deep(.exportSettings) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;
      height: 550px;
      // display: flex;
      // flex-direction: column-reverse;
      .move {
        display: flex;
        justify-content: center;
        .el-transfer{
          margin-top: 10px;
          height: 100%;
          .el-transfer-panel__body{
            height: 450px;
          }
        }
      }
      .options {
        margin: 15px 0;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          margin-left: 20px;
        }
      }

      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }
  // 注销账号
  :deep(.closeAccount) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;
      // height: 200px;
      // display: flex;
      // flex-direction: column-reverse;
      .content {
        height: 80px;
        font-size: 16px;
        padding: 20px 30px;
        display: flex;
        img {
          width: 25px;
          height: 25px;
          margin: 0 8px 0 0;
        }
      }
      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    span {
      color: #000;
    }

    .el-pagination {
      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        // background-color: rgba(0, 97, 255, 0.8);
        border: 1px solid rgba(0, 97, 255, 1);
        color: rgba(0, 97, 255, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>
<style lang="scss">
//添加成员 联系人下拉框样式
.more-tag-data {
  // border: 1px solid red;
  .el-select-dropdown__wrap {
    height: 200px;
  }
}
.el-popper {
  .addStudentMore {
    text-align: center;
  }
}
</style>