<!--人员管理-->
<template>
  <div>
    <div v-loading.fullscreen.lock="loadingFull" />

    <div class="home">
      <div class="left">
        <el-tree
          :data="treeList"
          node-key="id"
          default-expand-all
          :highlight-current="true"
          @current-change="clickChange"
          :expand-on-click-node="false"
          :props="{ label: 'name' }"
        >
        </el-tree>
      </div>
      <div class="right">
        <!--导入模板弹窗-->
        <div class="search1">
          <el-form ref="searchParams" :model="searchParams" label-width="80px">
            <el-input
              v-model="searchParams.true_name"
              placeholder="姓名"
              clearable
            ></el-input>
            <el-input
              v-model="searchParams.no"
              placeholder="学号"
              clearable
            ></el-input>
            <el-input
              v-model="searchParams.class"
              placeholder="班级"
              clearable
            ></el-input>
            <el-select
              v-model="searchParams.is_graduate"
              placeholder="请选择类型"
              clearable
              @change="ceshi"
            >
              <el-option
                v-for="item in graduate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="searchParams.politics_status"
              placeholder="请选择政治面貌"
              clearable
            >
              <el-option
                v-for="item in politics_status"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              @click="personnelSearch"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button type="success" @click="addPersonnel" icon="el-icon-edit"
              >添加党员</el-button
            >
            <el-button type="warning" @click="batchRevise"
              >批量修改政治面貌</el-button
            >
            <el-button type="warning" @click="partyOrganization"
              >批量修改党组织</el-button
            >
            <el-button type="warning" @click="placeOnfile">批量归档</el-button>
            <el-button type="danger" @click="importVisible = true"
              ><i class="el-icon-upload el-icon--left"></i>导入人员</el-button
            >
            <el-dropdown @command="handleCommand">
              <el-button type="danger" icon="el-icon-download">
                导出人员<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="1">当前页</el-dropdown-item>
                <el-dropdown-item command="2">选择项</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form>
          <!--选择导出字段-->
          <el-dialog
            title="选择需要导出的字段"
            :visible.sync="importFieldsVisible"
            width="50%"
            center
          >
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="(city, index) in cities"
                :label="city"
                :key="index"
                >{{ city }}</el-checkbox
              >
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancelSelectField">取 消</el-button>
              <el-button type="primary" @click="sureSelectField"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>

        <el-dialog
          title="导入人员信息"
          :visible.sync="importVisible"
          width="50%"
          center
        >
          <el-upload
            class="upload-import"
            :file-list="fileList"
            :action="base_url + '/staffs/import'"
            ref="upload"
            :headers="importHeader"
            :on-change="handleChange"
          >
            <el-button
              slot="trigger"
              size="mini"
              type="primary"
              class="btn-import"
              >选择excel</el-button
            >
            <!-- <p
              slot="trigger"
              size="mini"
              type="primary"
              class="btn-template"
              @click="downLoadModel"
            >
              点击下载模板
            </p> -->
            <a
              class="btn-template"
              download="学生信息导入模板"
              :href="modelUrl"
            >
              点击下载模板
            </a>
            <div class="model">
              <div class="import-msg">
                <p style="margin-bottom:5px;">注意：</p>
                <p>1.请严格按照模板中提供的数据案例格式进行填写；</p>
                <p>
                  2.其中姓名、学号、班级、支部名必须填写；其中支部名必须是已经存在的支部完整名称，否则数据不能导入；
                </p>
                <p>3.学生的登录账号和密码初始都为学号；</p>
                <p>4.学号不能重复，否则该条信息不能导入。</p>
              </div>
            </div>
          </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancelImport">取 消</el-button>
            <el-button type="primary" @click="importExcel">确 定</el-button>
          </span>
        </el-dialog>
        <el-table
          border
          style="width: 100%"
          :data="tableList"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="40" align="center">
          </el-table-column>
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="true_name"
            label="姓名"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="no" label="学号" width="100" align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="50" align="center">
            <template slot-scope="{ row }">
              <el-tag size="mini" v-if="row.sex == 1">男</el-tag>
              <el-tag size="mini" type="warning" v-else>女</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="nation_text"
            label="民族"
            width="50"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="politics_status_text"
            align="center"
            width="100"
            label="政治面貌"
          >
          </el-table-column>

          <el-table-column prop="class" label="班级" width="200">
          </el-table-column>
          <el-table-column
            prop="organization.name"
            label="所在支部"
            width="250"
          >
          </el-table-column>

          <!-- <el-table-column
            prop="birthday"
            label="出生日期"
            width="100"
            align="center"
          >
          </el-table-column> -->

          <el-table-column prop="status" label="状态" width="80" align="center">
            <template slot-scope="{ row }">
              <el-tag size="mini" type="success" v-if="row.status == 1"
                >正常</el-tag
              >
              <el-tag size="mini" type="danger" v-else>暂停</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            fixed="right"
            width="400"
          >
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                plain
                size="mini"
                @click="getDetail(row.id)"
                >详情</el-button
              >
              <el-button
                type="success"
                plain
                size="mini"
                @click="editList(row.id)"
                >编辑</el-button
              >
              <el-button
                type="warning"
                plain
                size="mini"
                @click="deletePersonnel(row.id)"
                >删除</el-button
              >
              <el-button
                type="danger"
                plain
                size="mini"
                @click="sureReset(row.id)"
                >重置密码</el-button
              >
              <el-button
                type="primary"
                plain
                size="mini"
                @click="getFileList(row)"
                >材料列表</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            background
            :page-sizes="[15, 20, 30, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
          >
          </el-pagination>
        </div>
        <!--查看详情-->
        <el-dialog
          title="人员详情"
          :visible.sync="dialogVisible"
          width="50%"
          center
        >
          <div class="detail">
            <div class="head">
              <div class="avatar">
                <img src="@/assets/image/avator.jpg" />
              </div>

              <div class="message">
                <div>姓名：{{ personnelDetails.true_name }}</div>
                <div>性别：{{ personnelDetails.sex_text }}</div>
                <div>班级：{{ personnelDetails.class }}</div>
                <div>学号：{{ personnelDetails.no }}</div>
                <div>身份证号：{{ personnelDetails.id_card }}</div>
                <div>入学日期：{{ personnelDetails.enrol_date }}</div>
                <div>电话：{{ personnelDetails.mobile }}</div>
                <div>籍贯：{{ personnelDetails.native_place }}</div>
                <div>
                  户口所在地派出所:{{ personnelDetails.local_police_station }}
                </div>
              </div>
              <div class="message">
                <div>政治面貌：{{ personnelDetails.politics_status_text }}</div>
                <div>所属支部：{{ personnelDetails.organization.name }}</div>
                <div>申请入党日期：{{ personnelDetails.join_party_date }}</div>
                <div>
                  成为积极分子日期：{{ personnelDetails.join_activist_date }}
                </div>
                <div>
                  确定为预备党员日期：{{ personnelDetails.join_group_date }}
                </div>
                <div>
                  党课结业日期：{{ personnelDetails.complete_party_date }}
                </div>
                <div>电子邮箱：{{ personnelDetails.email }}</div>
                <div>家庭地址{{ personnelDetails.address }}</div>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false"
              >关闭</el-button
            >
          </span>
        </el-dialog>
        <!--重置密码-->
        <el-dialog
          title="重置密码"
          :visible.sync="resetPasswordVisible"
          center
          width="30%"
        >
          <el-form label-width="80px">
            <el-form-item label="重置密码">
              <el-input v-model="resetPassword.password"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="resetPasswordVisible = false">取 消</el-button>
            <el-button type="primary" @click="resetPwd">确 定</el-button>
          </span>
        </el-dialog>
        <!--修改政治面貌-->
        <el-dialog
          title="修改政治面貌"
          :visible.sync="resetPoliticsVisible"
          center
          width="30%"
        >
          <el-form class="politics">
            <el-form-item label="政治面貌">
              <el-select
                v-model="politics.politics_status"
                placeholder="请选择政治面貌"
              >
                <el-option
                  v-for="item in politics_status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="resetPoliticsVisible = false">取 消</el-button>
            <el-button type="primary" @click="resetChangePolics"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <el-dialog
          title="修改党组织"
          :visible.sync="partyShow"
          center
          width="30%"
        >
          <el-form class="politics">
            <el-form-item label="党组织">
              <el-select
                v-model="politics.organization_id"
                placeholder="请选择组织"
              >
                <el-option
                  v-for="item in partyArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="partyShow = false">取 消</el-button>
            <el-button type="primary" @click="resetParty"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
import {
  treeOrganizationList,
  personnelList,
  deletePersonnelList,
  personnelDetail,
  importPersonnel,
  exportPersonnel,
  remarkPwd,
  batchPolitics,
  batchParty,
  fileGuidang,
  exportStaffs
} from "@/api/personnel/index";
import { classLists } from "@/api/organizationList/index";
import { getToken } from "@/utils/auth";
import "jquery";
import store from "@/store";
import { setTimeout } from "timers";
import axios from "axios";
var token = getToken();
const cityOptions = [
  "姓名",
  "院系班级/部门",
  "学号（学生填）",
  "身份证号",
  "入学日期",
  "籍贯（XX省XX县）",
  "户口所在地派出所",
  "家庭地址",
  "邮政编码",
  "申请入党日期",
  "列为积极分子日期",
  "列为发展对象日期",
  "列为预备党员日期",
  "列为正式党员日期",
  "党课结业日期",
  "所属支部",
  "出生日期（请填写到年月日）",
  "性别",
  "民族",
  "联系电话",
  "政治面貌"
];

export default {
  components: { UploadExcelComponent },
  data() {
    return {
      checkAll: true,
      checkedCities: [],
      cities: cityOptions,
      fieldSelect: [], //选择列
      command: "", //导出类型
      isIndeterminate: true,
      loadingFull: true,
      dialogVisible: false,
      resetPasswordVisible: false,
      partyShow:false,
      importVisible: false,
      resetPoliticsVisible: false,
      importFieldsVisible: false, // 选择需要导出的字段
      classList: "",
      resetPassword: {
        staff_id: "",
        password: ""
      }, //重置密码
      fileList: [], //上传文件列表
      fileName: "", //文件名称
      importHeader: "",
      searchParams: {
        true_name: "",
        no: "",
        class: "",
        is_graduate: 0,
        politics_status: "",
        organization_id: "" //组织id
      }, //搜索框数据

      limit: 15, //每页显示条数
      page: 1, //当前页码
      politics: {
        ids: [],
        politics_status: ""
      },
      politics_status: [
        {
          id: "",
          name: ""
        }
      ],
      politicsIndex: "", //选中身份索引
      totalPage: 0, //总页码
      tableList: [], //人员列表
      personnelDetails: {
        organization: {
          name: ""
        }
      }, //人员详情

      sex: [
        {
          value: 1,
          label: "男"
        },
        {
          value: 2,
          label: "女"
        }
      ],
      nation: [],
      //政治面貌
      treeList: [], //支部列表
      //导入文档标题
      tableData: [],
      tableHeader: [],
      selection: [],
      idList: [], //选中项id
      graduate: [
        {
          value: 1,
          label: "已归档"
        },
        {
          value: 0,
          label: "未归档"
        }
      ],
      modelUrl: "http://api.party.site.ximengnaikang.com/学生导入模板.xlsx",
      partyArr:[]
    };
  },
  created() {
    this.getTreeLists();
    //获取班级列表
    classLists().then(res => {
      this.classList = res;
    });
    console.log(token, "token");
    this.importHeader = {
      Authorization: "Bearer " + token
    };
    let allStatus = JSON.parse(sessionStorage.getItem("status"));

    let politics = allStatus["App\\Repositories\\Enums\\PoliticsEnum"];
    let arr = [];
    for (let i in politics) {
      arr.push({
        id: i,
        name: politics[i]
      });
    }
    this.politics_status = arr;
    // Authorization: 'Bearer ' + token
  },
  methods: {
    ceshi(e) {
      console.log(this.searchParams.is_graduate, "ceshi");
    },
    cancelSelectField: function() {
      this.fieldSelect = [];
      this.importFieldsVisible = false;
    },
    sureSelectField: function() {
      if (this.fieldSelect.length == 0) {
        this.$message.error("请选择需要导出的字段");
      } else {
        if (this.command == 0) {
          //导出全部
          let url = this.base_url + "/staffs/export";
          this.download();
          this.loadingFull = false;
        } else if (this.command == 2) {
          //到出选择项
          let arr = [];
          let selection = this.selection;
          selection.forEach(item => {
            item.id;
            arr.push(item.id);
            return arr;
          });
          let url = this.base_url + "/staffs/export?ids=" + arr;
          this.download(arr);
          this.loadingFull = false;
        } else {
          //导出当前页
          let arr = [];
          let selection = this.tableList;
          selection.forEach(item => {
            item.id;
            arr.push(item.id);
            console.log(arr);
            return arr;
          });
          //  let url = this.base_url + "/staffs/export?ids=" + arr;
          this.download(arr);
          this.loadingFull = false;
        }
        this.importFieldsVisible = false;
      }
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
      if (this.checkedCities.length > 0) {
        let arr = [];
        this.cities.map((item, index) => {
          arr.push(index + 1);
        });
        this.fieldSelect = arr;
      } else {
        this.fieldSelect = [];
      }
    },
    handleCheckedCitiesChange(value) {
      console.log(value, "----------------");
      let arr = [];

      value.map(item => {
        let index = this.cities.indexOf(item) + 1;
        arr.push(index);
        console.log(index, "++++++++++++K++++++++++++++");
      });

      this.fieldSelect = arr;
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    changeFile(file) {
      console.log(file, "changefile");
    },
    //获取单个人员资料列表
    getFileList(row) {
      this.$router.push({ name: "filelist", query: { list: row } });
    },
    //获取组织树状列表
    async getTreeLists() {
      this.loadingFull = true;
      await treeOrganizationList().then(res => {
        this.treeList = res.data;
        this.partyArr = res.data
        console.log(res, "获取组织树状列表");
        this.personnelList();
      });
    },
    //获取人员列表
    async personnelList(params) {
      this.loadingFull = true;
      await personnelList(params).then(res => {
        console.log(res, "获取人员列表");
        this.tableList = res.data.data;
        this.totalPage = res.data.meta.pagination.total;
        this.loadingFull = false;
      });
    },

    //人员搜索
    personnelSearch() {
      const params = this.searchParams;
      this.personnelList(params);
    },
    //选中政治面貌
    async resetChangePolics(e) {
      await batchPolitics(this.politics)
        .then(res => {
          console.log(res, "piliangxiiugai ");
          this.$message.success("批量修改成功");
          this.resetPoliticsVisible = false;
          this.personnelList();
        })
        .catch(err => {});
    },
    //批量修改政治面貌
    batchRevise() {
      if (this.selection.length == 0) {
        this.$message.error("请先选择需要修改的人员");
      } else {
        this.resetPoliticsVisible = true;
        console.log(this.selection, "selection");
        let arr = [];
        let selection = this.selection;
        selection.forEach(item => {
          item.id;
          arr.push(item.id);
          return arr;
        });
        this.politics.ids = arr;

        console.log(arr, "arr456");
      }
    },
    //选中党组织
    async resetParty(){
      await batchParty(this.politics)
        .then(res => {
          console.log(res, "piliangxiiugai ");
          this.$message.success("批量修改成功");
          this.partyShow = false;
          this.personnelList();
        })
        .catch(err => {});
    },

//修改党组织
    partyOrganization(){
      if (this.selection.length == 0) {
        this.$message.error("请先选择需要修改的人员");
      } else {
        this.partyShow = true;
        console.log(this.partyArr, "selection");
        let arr = [];
        let selection = this.selection;
        selection.forEach(item => {
          item.id;
          arr.push(item.id);
          return arr;
        });
        this.politics.ids = arr;

        console.log(arr, "arr456");
      }
    },
    //批量归档
    placeOnfile() {
      if (this.selection.length == 0) {
        this.$message.error("请先选择需要归档的人员");
      } else {
        console.log(this.selection, "selection");
        let arr = [];
        let selection = this.selection;
        selection.forEach(item => {
          item.id;
          arr.push(item.id);
          return arr;
        });
        let ids = arr;
        const date = {
          ids: arr,
          is_graduate: 1
        };
        this.$confirm("此操作将选中人员移入历史党员档案, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.fileGuidang(date);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
            this.selection = [];
          });
      }
    },
    async fileGuidang(date) {
      await fileGuidang(date).then(res => {
        this.personnelList(this.searchParams);
      });
    },
    //选择excel表格
    handleChange(file, fileList) {
      console.log(file, "file");
      this.fileName = file.name;
      console.log(typeof fileList, "fileList");
    },
    //导入
    importExcel(file) {
      this.loadingFull = true;
      let that = this;
      this.fileList = [];
      //this.$refs.upload.submit();
      console.log(file, "filr");
      this.importVisible = false;
      setTimeout(function() {
        that.personnelList(that.searchParams);
        this.loadingFull = false;
      }, 1000);
    },

    selectionChange(selection) {
      console.log(selection, "selection");
      this.selection = selection;
    },

    download(arr) {
      console.log(arr, "test");
      axios({
        baseURL: this.base_url, // url = base url + request url
        timeout: 5000, // request timeout
        method: "get",
        url: "/staffs/export",
        headers: {
          Authorization: "Bearer " + getToken()
        },
        params: {
          ids: arr,
          fields: this.fieldSelect,
          politics_status: this.searchParams.politics_status,
          organization_id: this.searchParams.organization_id
        },
        responseType: "blob"
      }).then(response => {
        this.convertRes2Blob(response);
      });
    },

    convertRes2Blob(response) {
      // 提取文件名
      const fileNameList = response.headers["content-disposition"].match(
        /filename=(.*)(.*)/
      );
      console.log(fileNameList, "Mead");
      const fileName = fileNameList[1];

      // 将二进制流转为blob
      const blob = new Blob([response.data], {
        type: "application/vnd.ms-excel"
      });
      if (typeof window.navigator.msSaveBlob !== "undefined") {
        // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
        window.navigator.msSaveBlob(blob, decodeURI(fileName));
      } else {
        // 创建新的URL并指向File对象或者Blob对象的地址
        const blobURL = window.URL.createObjectURL(blob);
        // 创建a标签，用于跳转至下载链接
        const tempLink = document.createElement("a");
        tempLink.style.display = "none";
        tempLink.href = blobURL;
        tempLink.setAttribute("download", decodeURI(fileName));
        // 兼容：某些浏览器不支持HTML5的download属性
        if (typeof tempLink.download === "undefined") {
          tempLink.setAttribute("target", "_blank");
        }
        // 挂载a标签
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        // 释放blob URL地址
        window.URL.revokeObjectURL(blobURL);
      }
    },
    //下载模板
    // downLoadModel() {
    //   let title = "/学生导入模板.xlsx";
    //   let url = this.base_url + title;
    //   console.log(url);
    //   let a = document.createElement("a");
    //   a.style.display = "none";
    //   document.body.appendChild(a);
    //   let triggerDownload = $(a)
    //     .attr("href", url)
    //     .attr("download", "人员名单");
    //   triggerDownload[0].click();
    //   document.body.removeChild(a);
    //   //this.download(url);
    // },
    //导出类型
    handleCommand(command) {
      //this.loadingFull = true;
      this.importFieldsVisible = true;
      this.command = command;
    },
    //导出
    async exportPersonnel(params) {
      await exportPersonnel(params)
        .then(res => {})
        .catch(e => {
          this.loadingFull = false;
        });
    },
    //取消导入
    cancelImport() {
      this.importVisible = false;
      this.fileList = [];
    },
    //添加人员
    addPersonnel() {
      this.$router.push({ name: "operation" });
    },
    //点击切换组织
    clickChange(e) {
      this.searchParams = {};
      this.searchParams.is_graduate = 0;
      this.searchParams.organization_id = e.id;
      let params = {
        organization_id: e.id
      };
      this.personnelList(params);
      console.log(e, "切换组织");
    },
    //查看详情
    getDetail(id) {
      const params = {
        id: id
      };
      this.personnelDetail(params);
    },
    async personnelDetail(params) {
      this.loadingFull = true;
      await personnelDetail(params).then(res => {
        console.log(res, "人员详情");
        this.personnelDetails = res.data;
        this.dialogVisible = true;
        this.loadingFull = false;
      });
    },
    //编辑
    editList(id) {
      this.$router.push({ name: "operation", query: { id: id } });
    },
    //删除
    deletePersonnel(id) {
      this.$confirm("此操作将永久删除该人员信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deletePersonnelList(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async deletePersonnelList(id) {
      await deletePersonnelList(id).then(res => {
        if (!res.code) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          const params = {
            organization_id: this.searchParams.organization_id
          };
          console.log(params);
          this.personnelList(params);
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
      });
    },
    //重置密码
    sureReset(id) {
      console.log(id);
      this.resetPassword.staff_id = id;
      this.resetPasswordVisible = true;
    },
    resetPwd() {
      this.loadingFull = true;
      remarkPwd(this.resetPassword)
        .then(res => {
          this.$message.success("重置密码成功");
          this.resetPasswordVisible = false;
          this.loadingFull = false;
        })
        .catch(err => {
          this.$message.error("重置密码失败");
          this.loadingFull = false;
        });
    },
    //切换每页显示数量
    handleSizeChange(e) {
      console.log(e, "切换页码");
      this.limit = e;
      const data = {
        true_name: this.searchParams.true_name,
        no: this.searchParams.no,
        class: this.searchParams.class,
        is_graduate: this.searchParams.is_graduate,
        politics_status: this.searchParams.politics_status,
        organization_id: this.searchParams.organization_id,
        limit: e,
        page: this.page
      };
      this.personnelList(data);
    },
    //切换页码
    handleCurrentChange(e) {
      console.log(e, "当前页码");
      this.page = e;
      const data = {
        true_name: this.searchParams.true_name,
        no: this.searchParams.no,
        class: this.searchParams.class,
        is_graduate: this.searchParams.is_graduate,
        politics_status: this.searchParams.politics_status,
        organization_id: this.searchParams.organization_id,
        page: e,
        limit: this.limit
      };
      this.personnelList(data);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/content.scss";
.app-main {
  padding-left: 10px !important;
  padding-bottom: 0 !important;
  .el-checkbox {
    line-height: 40px;
  }
  .search1 {
    .el-input {
      width: 160px !important;
      margin-right: 20px;
    }
    .el-select {
      width: 160px !important;
      margin-right: 20px;
    }
    .el-form {
      width: 100%;
    }
    .el-dropdown {
      margin-left: 10px;
    }
  }
  .home {
    display: flex;
    .left {
      min-height: 100vh;
      padding-top: 10px;
      box-shadow: 5px 5px 7px 7px #f3f2f2;
      flex: 0 0 270px;
      padding-bottom: 20px;
      ::v-deep {
        .el-tree-node__content {
          height: 35px !important;
          line-height: 35px !important;
        }
      }

      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        color: #409eff;
        height: 40px !important;
        background-color: #ffffff;
      }
    }
    .right {
      position: relative;
      flex: 1;
      padding-bottom: 50px;
      margin-left: 20px;
      width: 83%;
      .upload-import {
        text-align: center;
      }
      .el-upload {
        display: block !important;
      }
      .btn-import {
        margin: 10px auto 10px;
      }
      .btn-template {
        color: #409eff;
        margin-bottom: 30px;
        cursor: pointer;
        display: block;
      }
      .model {
        display: inline-block;
        vertical-align: top;
        margin-left: 15px;

        .el-button {
          margin-left: 30px;
          color: #409eff;
          background-color: #ffffff;
          border: none;
        }
        .import-msg {
          text-align: left;
          padding: 15px;
          border: 1px solid #409eff;
          border-radius: 10px;
          p {
            text-align: justify;
            line-height: 20px;
            padding: 0;
            margin: 0;
          }
        }
      }
      .paging {
        position: absolute;
        bottom: 0;
      }

      .el-table th,
      .el-table tr:nth-of-type(0) {
        background-color: #f5f5f5;
        text-align: center;
      }
    }
  }
  .detail {
    min-height: 380px;
    .head {
      display: flex;
      padding: 20px 20px 0;
      .avatar {
        height: 70px;
        width: 70px;
        border-radius: 50%;
        background-color: aquamarine;
        overflow: hidden;
        margin-right: 50px;
        img {
          height: 100%;
          width: 70px;
          background-color: rgb(195, 195, 235);
        }
      }
      .message {
        flex: 0 0 35%;
        display: inline-block;
        width: 50%;
        margin-right: 30px;
        line-height: 40px;
      }
    }
    .mes {
      margin-left: 140px;
      line-height: 30px;
    }
    .politics {
      width: 60% !important;
      margin: 0 auto !important;
    }
  }
}
</style>
