<style>

  .customWidthMb{

    width:100%;

  }

  .customWidthPC{

    width:720px;

  }

</style>

<template>

  <div class="app-container">

    <el-row :gutter="20">

      <!--单位数据-->

<!--      <el-col :span="4" :xs="24">-->

      <el-col :span="orgNum==='mult'?4:0" :xs="24">

        <div class="head-container">

          <el-input

            v-model="orgName"

            placeholder="请输入单位名称"

            clearable

            size="small"

            prefix-icon="el-icon-search"

            style="margin-bottom: 20px"

          />

        </div>

        <div class="head-container">

          <el-tree

            :data="orgOptions"

            :props="defaultProps"

            :expand-on-click-node="false"

            :filter-node-method="filterNode"

            ref="tree"

            default-expand-all

            @node-click="handleNodeClick"

          />

        </div>

      </el-col>

      <!--人员数据-->

<!--      <el-col :span="20" :xs="24">-->

      <el-col :span="orgNum==='mult'?20:24" :xs="24">

        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

          <el-form-item label="人员姓名" prop="userName">

            <el-input

              v-model="queryParams.userName"

              placeholder="请输入人员姓名"

              clearable

              size="small"

              style="width: 180px"

              @keyup.enter.native="handleQuery"

            />

          </el-form-item>

          <el-form-item label="人员类型" prop="personType">

            <el-select

              v-model="queryParams.personType"

              placeholder="人员状态"

              clearable

              size="small"

              style="width: 180px"

            >

              <el-option

                v-for="dict in personTypeOptions"

                :key="dict.dictValue"

                :label="dict.dictLabel"

                :value="dict.dictValue"

              />

            </el-select>

          </el-form-item>

          <el-form-item label="状态" prop="status">

            <el-select

              v-model="queryParams.status"

              placeholder="人员状态"

              clearable

              size="small"

              style="width: 180px"

            >

              <el-option

                v-for="dict in statusOptions"

                :key="dict.dictValue"

                :label="dict.dictLabel"

                :value="dict.dictValue"

              />

            </el-select>

          </el-form-item>

          <el-form-item label="截止时间">

            <el-date-picker

              v-model="dateRange"

              size="small"

              style="width: 240px"

              value-format="yyyy-MM-dd"

              type="daterange"

              range-separator="-"

              start-placeholder="开始日期"

              end-placeholder="结束日期"

            ></el-date-picker>

          </el-form-item>

          <el-form-item>

            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

          </el-form-item>

        </el-form>

        <el-row :gutter="10" class="mb8">

          <el-col :span="1.5">

            <el-button

              type="primary"

              icon="el-icon-plus"

              size="mini"

              @click="handleAdd"

              v-hasPermi="['campsys:hr:add']"

            >新增</el-button>

          </el-col>

          <el-col :span="1.5">

            <el-button

              type="success"

              icon="el-icon-edit"

              size="mini"

              :disabled="single"

              @click="handleUpdate"

              v-hasPermi="['campsys:hr:edit']"

            >修改</el-button>

          </el-col>

          <el-col :span="1.5">

            <el-button

              type="danger"

              icon="el-icon-delete"

              size="mini"

              :disabled="multiple"

              @click="handleDelete"

              v-hasPermi="['campsys:hr:remove']"

            >删除</el-button>

          </el-col>

          <el-col :span="1.5">

            <el-button

              type="info"

              icon="el-icon-upload2"

              size="mini"

              @click="handleImport"

              v-hasPermi="['campsys:hr:import']"

            >导入</el-button>

          </el-col>

          <el-col :span="1.5">

            <el-button

              type="warning"

              icon="el-icon-download"

              size="mini"

              @click="handleExport"

              v-hasPermi="['campsys:hr:export']"

            >导出</el-button>

          </el-col>

          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

        </el-row>

        <el-table v-loading="loading" :data="personList" @selection-change="handleSelectionChange"  @sort-change="changeSort">

          <el-table-column type="selection" width="50" align="center" />

<!--          <el-table-column label="人员编号" align="center" prop="personId" />-->

          <el-table-column label="人事名称" align="center" prop="personName" :show-overflow-tooltip="true" />

          <el-table-column label="证件号码" align="center" prop="personSid" :show-overflow-tooltip="true" />

          <el-table-column label="类型" align="center" prop="personType" :show-overflow-tooltip="true" />

          <el-table-column label="手机号码" align="center" prop="personMp" width="120" />

          <!--          <el-table-column label="人事昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />-->

          <el-table-column label="所属营区" align="center" prop="camp.campName" :show-overflow-tooltip="true" />

          <el-table-column label="所属单位" align="center" prop="org.orgName" :show-overflow-tooltip="true" />

          <el-table-column

            label="操作"

            align="center"

            width="160"

            class-name="small-padding fixed-width"

          >

            <template slot-scope="scope">

              <el-button

                size="mini"

                type="text"

                icon="el-icon-edit"

                @click="handleUpdate(scope.row)"

                v-hasPermi="['campsys:hr:edit']"

              >修改</el-button>

              <el-button

                size="mini"

                type="text"

                icon="el-icon-delete"

                @click="handleDelete(scope.row)"

                v-hasPermi="['campsys:hr:remove']"

              >删除</el-button>

              <el-button

                size="mini"

                type="text"

                icon="el-icon-key"

                @click="handleResetPwd(scope.row)"

                v-hasPermi="['campsys:hr:resetPwd']"

              >重置</el-button>

            </template>

          </el-table-column>

        </el-table>

        <pagination

          v-show="total>0"

          :total="total"

          :page.sync="queryParams.pageNum"

          :limit.sync="queryParams.pageSize"

          @pagination="getList"

        />

      </el-col>

    </el-row>

    <!-- 添加或修改参数配置对话框 -->

    <el-dialog v-bind:customClass="dialogStyle?'customWidthMb':'customWidthPC'"   :title="title" :visible.sync="open" append-to-body>

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-row>

          <el-col :span="colWidth" >

            <el-form-item  label="人事名称" prop="personName">

              <el-input v-model="form.personName" placeholder="请输入人事名称" />

            </el-form-item>

          </el-col>

          <el-col :span="colWidth" >

            <el-form-item  label="人事昵称" prop="nickName">

              <el-input v-model="form.nickName" placeholder="请输入人事昵称" />

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="colWidth">

            <el-form-item  label="人事性别"  prop="personSex">

              <el-select v-model="form.personSex" placeholder="请选择" style="width:100%">

                <el-option

                  v-for="dict in sexOptions"

                  :key="dict.dictValue"

                  :label="dict.dictLabel"

                  :value="dict.dictValue"

                ></el-option>

              </el-select>

            </el-form-item>

          </el-col>

          <el-col :span="colWidth">

            <el-form-item label="人员类型" prop="personType">

              <el-select v-model="form.personType" placeholder="请选择人员类型" style="width:100%">

                <el-option

                  v-for="dict in personTypeOptions"

                  :key="dict.dictValue"

                  :label="dict.dictLabel"

                  :value="dict.dictValue"

                ></el-option>

              </el-select>

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="colWidth">

            <el-form-item label="归属单位" prop="orgId">

              <treeselect v-model="form.orgId" :options="orgOptions" :show-count="true" placeholder="请选择归属单位" />

            </el-form-item>

          </el-col>

          <el-col :span="colWidth">

            <el-form-item label="所属营区" prop="campId">

              <el-select v-model="form.campId"  placeholder="请选择营区" style="width:100%" >

                <el-option

                  v-for="item in campOptions"

                  :key="item.campId"

                  :label="item.campName"

                  :value="item.campId"

                  :disabled="item.status == 1"

                ></el-option>

              </el-select>

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="colWidth">

            <el-form-item label="通行权限" prop="devRoleId">

              <el-select v-model="form.devRoleId"  placeholder="请选择人员通行权限角色"  style="width:100%" >

                <el-option

                  v-for="item in roleOptions"

                  :key="item.roleId"

                  :label="item.roleName"

                  :value="item.roleId"

                  :disabled="item.status == 1"

                ></el-option>

              </el-select>

            </el-form-item>

          </el-col>

          <el-col :span="colWidth">

            <el-form-item  v-if="form.personId == undefined" label="人事密码" prop="personPsw">

              <el-input v-model="form.personPsw" placeholder="请输入人事密码" type="password" />

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="colWidth">

            <el-form-item  label="证件类型" prop="personSidType">

              <el-select v-model="form.personSidType" placeholder="请选择证件类型" style="width:100%">

                <el-option

                  v-for="dict in IDTypeOptions"

                  :key="dict.dictValue"

                  :label="dict.dictLabel"

                  :value="dict.dictValue"

                ></el-option>

              </el-select>

            </el-form-item>

          </el-col>

          <el-col :span="colWidth">

            <el-form-item  label="证件号码" prop="personSid">

              <el-input v-model="form.personSid" placeholder="请输入证件号" />

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="colWidth">

            <el-form-item  label="手机号码" prop="personMp">

              <el-input v-model="form.personMp" placeholder="请输入手机号码" maxlength="11" />

            </el-form-item>

          </el-col>

          <el-col :span="colWidth">

            <el-form-item  label="地址">

              <el-input v-model="form.addr" type="text" placeholder="请输入内容"></el-input>

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="12">

            <el-form-item  label="照片路径">

              <el-input v-model="form.imgPath" type="text" placeholder="请上传照片"></el-input>

            </el-form-item>

          </el-col>

          <el-col :span="1.5">

            <el-button

              type="info"

              icon="el-icon-upload2"

              size="mini"

              @click="handleImportJPG"

            >导入图片</el-button>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="24">

            <el-form-item  label="备注">

              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>

            </el-form-item>

          </el-col>

        </el-row>

        <template>

          <div>

            <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />

            <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">

              <el-row>

                <el-col :xs="24" :md="12" :style="{height: '350px'}">

                  <vue-cropper

                    ref="cropper"

                    :img="options.img"

                    :info="true"

                    :autoCrop="options.autoCrop"

                    :autoCropWidth="options.autoCropWidth"

                    :autoCropHeight="options.autoCropHeight"

                    :fixedBox="options.fixedBox"

                    @realTime="realTime"

                    v-if="visible"

                  />

                </el-col>

                <el-col :xs="24" :md="12" :style="{height: '350px'}">

                  <div class="avatar-upload-preview">

                    <img :src="previews.url" :style="previews.img" />

                  </div>

                </el-col>

              </el-row>

              <br />

              <el-row>

                <el-col :lg="2" :md="2">

                  <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">

                    <el-button size="small">

                      上传

                      <i class="el-icon-upload el-icon--right"></i>

                    </el-button>

                  </el-upload>

                </el-col>

                <el-col :lg="{span: 1, offset: 2}" :md="2">

                  <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>

                </el-col>

                <el-col :lg="{span: 1, offset: 1}" :md="2">

                  <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>

                </el-col>

                <el-col :lg="{span: 1, offset: 1}" :md="2">

                  <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>

                </el-col>

                <el-col :lg="{span: 1, offset: 1}" :md="2">

                  <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>

                </el-col>

                <el-col :lg="{span: 2, offset: 6}" :md="2">

                  <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>

                </el-col>

              </el-row>

            </el-dialog>

          </div>

        </template>

        <el-row>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitForm">确 定</el-button>

        <el-button @click="cancel">取 消</el-button>

      </div>

    </el-dialog>

    <!-- 人员导入对话框 -->

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>

      <el-upload

        ref="upload"

        :limit="1"

        accept=".xlsx, .xls"

        :headers="upload.headers"

        :action="upload.url + '?updateSupport=' + upload.updateSupport"

        :disabled="upload.isUploading"

        :on-progress="handleFileUploadProgress"

        :on-success="handleFileSuccess"

        :auto-upload="false"

        drag

      >

        <i class="el-icon-upload"></i>

        <div class="el-upload__text">

          将文件拖到此处，或

          <em>点击上传</em>

        </div>

        <div class="el-upload__tip" slot="tip">

          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的人员数据

          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>

        </div>

        <div class="el-upload__tip" style="color:#ff0000" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>

      </el-upload>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitFileForm">确 定</el-button>

        <el-button @click="upload.open = false">取 消</el-button>

      </div>

    </el-dialog>

    <el-dialog :title="uploadJPG.title" :visible.sync="uploadJPG.open" width="400px" append-to-body>

      <el-upload

        ref="upload"

        :limit="1"

        accept=".jpg"

        :headers="uploadJPG.headers"

        :action="uploadJPG.url + '?updateSupport=' + uploadJPG.updateSupport"

        :disabled="uploadJPG.isUploading"

        :on-progress="handleJPGUploadProgress"

        :on-success="handleJPGSuccess"

        :auto-upload="false"

        drag

      >

        <i class="el-icon-upload"></i>

        <div class="el-upload__text">

          将文件拖到此处，或

          <em>点击上传</em>

        </div>

<!--        <div class="el-upload__tip" slot="tip">-->

<!--          <el-checkbox v-model="uploadJPG.updateSupport" />是否更新已经存在的人员数据-->

<!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->

<!--        </div>-->

        <div class="el-upload__tip" style="color:#ff0000" slot="tip">提示：仅允许导入“jpg”格式文件,正面人脸占比大于70%！</div>

      </el-upload>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitJPGForm">确 定</el-button>

        <el-button @click="uploadJPG.open = false">取 消</el-button>

      </div>

    </el-dialog>

  </div>

</template>

<script>

import { listPerson, getPerson, delPerson, addPerson, updatePerson, exportPerson, resetPersonPwd, changePersonStatus, importTemplate } from "@/api/campsys/armyman";

import { getToken } from "@/utils/auth";

import { treeselect } from "@/api/system/org";

import { getCampsOfOrg } from "@/api/campsys/camp";

import { getUsersOfOrg,getUsersOfOrgbyname} from "@/api/companySys/user";

import { getRolesAll } from "@/api/campsys/pdevrole";

import { getInfo } from "@/api/login";

import Treeselect from "@riophae/vue-treeselect";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {

  name: "Person",

  components: { Treeselect },

  data() {

    return {

      // 遮罩层

      loading: true,

      // 选中数组

      ids: [],

      // 非单个禁用

      single: true,

      // 非多个禁用

      multiple: true,

      // 显示搜索条件

      showSearch: true,

      // 总条数

      total: 0,

      // 人员表格数据

      personList: null,

      // 弹出层标题

      title: "",

      //选择人事

      radiohr: "0",

      //输入查询值

      name:'',

      // 单位树选项

      orgOptions: undefined,

      // 场站选项

      campOptions: undefined,

      //通道权限角色

      roleOptions:undefined,

      // 部门选项

      deptOptions: undefined,

      //人员信息

      userOptions:undefined,

      userOptionscp:undefined,

      //用户信息

      userInfo:undefined,

      // 是否显示弹出层

      open: false,

      // 单位名称

      orgName: undefined,

      //单位个数

      orgNum:undefined,

      // 默认密码

      initPassword: undefined,

      // 日期范围

      dateRange: [],

      // 状态数据字典

      statusOptions: [],

      // 证件类型字典

      IDTypeOptions: [],

      // 性别状态字典

      sexOptions: [],

      // 人员类型

      typeOptions: [],

      personTypeOptions: [],

      dialogWidth: "'600px'",

      dialogStyle: 1,

      colWidth:12,

      // 表单参数

      form: { },

      defaultProps: {

        children: "children",

        label: "label"

      },

      // 人员导入参数

      upload: {

        // 是否显示弹出层（人员导入）

        open: false,

        // 弹出层标题（人员导入）

        title: "",

        // 是否禁用上传

        isUploading: false,

        // 是否更新已经存在的人员数据

        updateSupport: 0,

        // 设置上传的请求头部

        headers: { Authorization: "Bearer " + getToken() },

        // 上传的地址

        url: process.env.VUE_APP_BASE_API + "/campsys/armyman/importData"

      },

      uploadJPG: {

        // 是否显示弹出层（图片导入）

        open: false,

        // 弹出层标题（人员导入）

        title: "",

        // 是否禁用上传

        isUploading: false,

        // 是否更新已经存在的人员数据

        updateSupport: 0,

        // 设置上传的请求头部

        headers: { Authorization: "Bearer " + getToken() },

        // 上传的地址

        url: process.env.VUE_APP_BASE_API + "/campsys/armyman/importJPG"

      },

      // 查询参数

      queryParams: {

        pageNum: 1,

        pageSize: 10,

        personName: undefined,

        personSid:undefined,

        personType:undefined,

        status: undefined,

        isAsc:"asc",

        orderByColumn:"personId",

        orgId: undefined

      },

      // 查询参数

      queryUsers: {

        pageNum: 1,

        pageSize: 10,

        userName: undefined,

        orgId: undefined

      },

      // 表单校验

      rules: {

        personName: [

          { required: true, message: "人员名称不能为空", trigger: "blur" }

        ],

        orgId: [

          { required: true, message: "归属单位不能为空", trigger: "blur" }

        ],

        campId: [

          { required: true, message: "所属营区不能为空", trigger: "blur" }

        ],

        personType: [

          { required: true, message: "人员类型不能为空", trigger: "blur" }

        ],

        personSex: [

          { required: true, message: "人员性别不能为空", trigger: "blur" }

        ],

        devRoleId: [

          { required: true, message: "通行权限不能为空", trigger: "blur" }

        ]

      }

    };

  },

  watch: {

    // 根据名称筛选单位树

    orgName(val) {

      this.$refs.tree.filter(val);

    },

    'form.orgId': 'currOrgChange'

  },

  created() {

    this.getList();

    this.getTreeselect();

    this.getUserInfo();

    this.setDialogWidth();

    this.getAllRoles();

    this.getDicts("sys_normal_disable").then(response => {

      this.statusOptions = response.data;

    });

    this.getDicts("arm_person_type").then(response => {

      this.personTypeOptions = response.data;

    });

    this.getDicts("sys_user_sex").then(response => {

      this.sexOptions = response.data;

    });

    //证件类型

    this.getDicts("sys_card_type").then(response => {

      this.IDTypeOptions = response.data;

    });

    this.getConfigKey("sys.user.initPassword").then(response => {

      this.initPassword = response.msg;

    });

      },

  filters: {

    rounding (value) {

      return value.toFixed(2)

    }

  },

  mounted() {

    window.onresize = () => {

      return (() => {

        this.setDialogWidth()

      })()

    }

  },

  computed:{

    addDialogStyle(){

      console.log(document.body.clientWidth)

      var val = document.body.clientWidth

      const def = 800 // 默认宽度

      if (val < def) {

        this.colWidth=24;

        console.log("customWidthMb");

        return 'customWidthMb';

      } else {

        this.colWidth=12;

        console.log("customWidthPC");

        return 'customWidthPC';

      }

    },

  },

  methods: {

   // 设置 Dialog 宽度。

    setDialogWidth() {

      console.log(document.body.clientWidth)

      var val = document.body.clientWidth

      const def = 800 // 默认宽度

      if (val < def) {

        this.colWidth=24;

        this.dialogStyle=1;

      } else {

        this.dialogStyle=0;

        this.colWidth=12

      }

      console.log(this.dialogWidth)

    },

    //获取进出营区角色信息

    getAllRoles(){

      getRolesAll().then(response => {

        this.roleOptions = response.data;

      });

    },

   // 排序

    changeSort(column){  //column.prop

      if (column.order === 'descending') {

        this.queryParams.orderByColumn=column.prop;

        this.queryParams.isAsc="desc";

      }

      else{

        this.queryParams.orderByColumn=column.prop;

        this.queryParams.isAsc="asc";

      }

      //携带当前的排序规则再请求后台数据a

      this.getList()

    },

    //查询人员姓名

    searchUsers(){

      this.queryUsers.orgId=this.form.orgId;

      this.queryUsers.userName=this.name;

      getUsersOfOrgbyname(this.queryUsers).then(response => {

        this.userOptions = response.data;

        this.userOptionscp = response.data;

      });

    },

    dataFilter(val) {

      if (val) { //val存在

        this.userOptions = this.userOptionscp.filter((item) => {

          if (!!~item.userName.indexOf(val) || !!~item.userName.toUpperCase().indexOf(val.toUpperCase())) {

            return true

          }

        })

      }

      else { //val为空时，还原数组

       this.userOptions = this.userOptionscp;

      }

    },

    /** 单位发生变化 */

    currOrgChange(val) {

      if (val) {

        getUsersOfOrg(val).then(response => {

          this.userOptions = response.data;

          this.userOptionscp = response.data;

        });

        getCampsOfOrg(val).then(response => {

          this.campOptions = response.data;

          this.form.campId=this.campOptions[0].campId;

        });

      }

    },

    // 人员类型翻译

    personTypeFormat(row, column) {

      return this.selectDictLabel(this.personTypeOptions, row.personType);

    },

    //用户信息

    getUserInfo(){

      getInfo().then(response => {

          this.userInfo= response.user;

          console.log(this.userInfo.userName);

        }

      );

    },

    /** 查询人员列表 */

    getList() {

      this.loading = true;

      listPerson(this.addDateRange(this.queryParams, this.dateRange)).then(response => {

          this.personList = response.rows;

          this.total = response.total;

          this.loading = false;

        }

      );

    },

    /** 查询单位下拉树结构 */

    getTreeselect() {

      treeselect().then(response => {

        this.orgOptions = response.data;

        this.orgNum=response.msg;

      });

    },

    // 筛选节点

    filterNode(value, data) {

      if (!value) return true;

      return data.label.indexOf(value) !== -1;

    },

    // 节点单击事件m

    handleNodeClick(data) {

      this.queryParams.orgId = data.id;

      this.getList();

    },

    // 人员状态修改

    handleStatusChange(row) {

      let text = row.status === "0" ? "启用" : "停用";

      this.$confirm('确认要"' + text + '""' + row.license + '"人员吗?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return changePersonStatus(row.personId, row.status);

        }).then(() => {

          this.msgSuccess(text + "成功");

        }).catch(function() {

          row.status = row.status === "0" ? "1" : "0";

        });

    },

    // 取消按钮

    cancel() {

      this.open = false;

      this.reset();

    },

    // 表单重置

    reset() {

      this.form = {

        personId: undefined,

        orgId: undefined,

        campId:undefined,

        license: undefined,

        personType: undefined,

        status: "0",

        parkroleId:undefined

      };

      this.resetForm("form");

      this.form.orgId=this.userInfo.orgId;

    },

    /** 搜索按钮操作 */

    handleQuery() {

      this.queryParams.page = 1;

      this.getList();

    },

    /** 重置按钮操作 */

    resetQuery() {

      this.dateRange = [];

      this.resetForm("queryForm");

      this.handleQuery();

    },

    // 多选框选中数据

    handleSelectionChange(selection) {

      this.ids = selection.map(item => item.personId);

      this.single = selection.length != 1;

      this.multiple = !selection.length;

    },

    /** 新增按钮操作 */

    handleAdd() {

      this.reset();

      this.getTreeselect();

      getPerson().then(response => {

        this.open = true;

        this.form.personPsw = this.initPassword;

        this.title = "添加人员";

      });

    },

    /** 修改按钮操作 */

    handleUpdate(row) {

      this.reset();

      this.getTreeselect();

      const personId = row.personId || this.ids;

      getPerson(personId).then(response => {

        this.form = response.data;

        this.open = true;

        this.title = "修改人员";

      });

    },

    /** 重置密码按钮操作 */

    handleResetPwd(row) {

      this.$prompt('请输入"' + row.license + '"的新密码', "提示", {

        confirmButtonText: "确定",

        cancelButtonText: "取消"

      }).then(({ value }) => {

          resetPersonPwd(row.personId, value).then(response => {

            this.msgSuccess("修改成功，新密码是：" + value);

          });

        }).catch(() => {});

    },

    /** 提交按钮 */

    submitForm: function() {

      this.$refs["form"].validate(valid => {

        if (valid) {

          if (this.form.personId != undefined) {

            updatePerson(this.form).then(response => {

              this.msgSuccess("修改成功");

              this.open = false;

              this.getList();

            });

          } else {

            addPerson(this.form).then(response => {

              this.msgSuccess("新增成功");

              this.open = false;

              this.getList();

            });

          }

        }

      });

    },

    /** 删除按钮操作 */

    handleDelete(row) {

      const personIds = row.personId || this.ids;

      this.$confirm('是否确认删除人员编号为"' + personIds + '"的数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return delPerson(personIds);

        }).then(() => {

          this.getList();

          this.msgSuccess("删除成功");

        })

    },

    /** 导出按钮操作 */

    handleExport() {

      const queryParams = this.queryParams;

      this.$confirm('是否确认导出所有人员数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return exportPerson(queryParams);

        }).then(response => {

          this.download(response.msg);

        })

    },

    /** 导入按钮操作 */

    handleImport() {

      this.upload.title = "人员导入";

      this.upload.open = true;

    },

    /** 下载模板操作 */

    importTemplate() {

      importTemplate().then(response => {

        this.download(response.msg);

      });

    },

    // 文件上传中处理

    handleFileUploadProgress(event, file, fileList) {

      this.upload.isUploading = true;

    },

    // 文件上传成功处理

    handleFileSuccess(response, file, fileList) {

      this.upload.open = false;

      this.upload.isUploading = false;

      this.$refs.upload.clearFiles();

      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });

      this.getList();

    },

    // 提交上传文件

    submitFileForm() {

      this.$refs.upload.submit();

    },

    /** 导入图片操作 */

    handleImportJPG() {

      this.uploadJPG.title = "上传人脸图片";

      this.uploadJPG.open = true;

    },

    handleJPGUploadProgress(event, file, fileList) {

      this.uploadJPG.isUploading = true;

    },

    // 文件上传成功处理

    handleJPGSuccess(response, file, fileList) {

      this.uploadJPG.open = false;

      this.uploadJPG.isUploading = false;

      this.$refs.uploadJPG.clearFiles();

      this.form.imgPath=response.imgUrl;

      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });

      this.getList();

    },

    // 提交上传文件

    submitJPGForm() {

      this.$refs.upload.submit();

    }

  }

};

</script>