927 lines
33 KiB
Vue
927 lines
33 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<!--部门数据-->
|
|||
|
|
<el-col :span="4" :xs="24">
|
|||
|
|
<div class="head-container">
|
|||
|
|
<el-input
|
|||
|
|
v-model="branchName"
|
|||
|
|
placeholder="请输入部门名称"
|
|||
|
|
clearable
|
|||
|
|
size="small"
|
|||
|
|
prefix-icon="el-icon-search"
|
|||
|
|
style="margin-bottom: 20px"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="head-container">
|
|||
|
|
<el-tree
|
|||
|
|
:data="branchOptions"
|
|||
|
|
:props="defaultProps"
|
|||
|
|
node-key="id"
|
|||
|
|
:expand-on-click-node="false"
|
|||
|
|
:filter-node-method="filterNode"
|
|||
|
|
ref="treeRef"
|
|||
|
|
@node-click="handleNodeClick"
|
|||
|
|
:default-expanded-keys="nodeKey">
|
|||
|
|
<!-- <span slot-scope="{ node, data }">
|
|||
|
|
<el-tooltip class="item" effect="dark" :content="node.label" placement="right">
|
|||
|
|
<span class="custom-tree-node">{{ node.label }}</span>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</span> -->
|
|||
|
|
</el-tree>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="20" :xs="24">
|
|||
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
|
|||
|
|
<el-form-item label="人员名称" prop="name">
|
|||
|
|
<el-input
|
|||
|
|
v-model="queryParams.name"
|
|||
|
|
placeholder="请输入人员名称"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter.native="handleQuery"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="联系电话" prop="phone">
|
|||
|
|
<el-input
|
|||
|
|
v-model="queryParams.phone"
|
|||
|
|
placeholder="请输入联系电话"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter.native="handleQuery"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="身份证号码" prop="idcard">
|
|||
|
|
<el-input
|
|||
|
|
v-model="queryParams.idcard"
|
|||
|
|
placeholder="请输入"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter.native="handleQuery"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="是否注册" prop="guidFlag">
|
|||
|
|
<el-select v-model="queryParams.guidFlag" placeholder="请选择" clearable @keyup.enter.native="handleQuery" >
|
|||
|
|
<el-option key="yzc" label="已注册" value="yzc" />
|
|||
|
|
<el-option key="wzc" label="未注册" value="wzc" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="是否下发" prop="downFlag">
|
|||
|
|
<el-select v-model="queryParams.downFlag" placeholder="请选择" clearable @keyup.enter.native="handleQuery" >
|
|||
|
|
<el-option key="yxf" label="已下发" value="yxf" />
|
|||
|
|
<el-option key="wxf" label="未下发" value="wxf" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="人脸注册" prop="faceFlag">
|
|||
|
|
<el-select v-model="queryParams.faceFlag" placeholder="请选择" clearable @keyup.enter.native="handleQuery" >
|
|||
|
|
<el-option key="yzc" label="已注册人脸" value="yzc" />
|
|||
|
|
<el-option key="wzc" label="未注册人脸" value="wzc" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="卡号注册" prop="cardFlag">
|
|||
|
|
<el-select v-model="queryParams.cardFlag" placeholder="请选择" clearable @keyup.enter.native="handleQuery" >
|
|||
|
|
<el-option key="yzc" label="已录入卡号" value="yzc" />
|
|||
|
|
<el-option key="wzc" label="未录入卡号" value="wzc" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="卡号" prop="doorNo">
|
|||
|
|
<el-input
|
|||
|
|
v-model="queryParams.doorNo"
|
|||
|
|
placeholder="请输入卡号"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter.native="handleQuery"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" 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"
|
|||
|
|
plain
|
|||
|
|
icon="el-icon-plus"
|
|||
|
|
size="mini"
|
|||
|
|
@click="handleAdd"
|
|||
|
|
v-hasPermi="['system:sysPeople:add']"
|
|||
|
|
>新增</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button
|
|||
|
|
type="success"
|
|||
|
|
plain
|
|||
|
|
icon="el-icon-edit"
|
|||
|
|
size="mini"
|
|||
|
|
:disabled="single"
|
|||
|
|
@click="handleUpdate"
|
|||
|
|
v-hasPermi="['system:sysPeople:edit']"
|
|||
|
|
>修改</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
plain
|
|||
|
|
icon="el-icon-delete"
|
|||
|
|
size="mini"
|
|||
|
|
:disabled="multiple"
|
|||
|
|
@click="handleDelete"
|
|||
|
|
v-hasPermi="['system:sysPeople:remove']"
|
|||
|
|
>删除</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button
|
|||
|
|
type="success"
|
|||
|
|
plain
|
|||
|
|
icon="el-icon-bottom"
|
|||
|
|
size="mini"
|
|||
|
|
:disabled="multiple"
|
|||
|
|
@click="handleDown"
|
|||
|
|
v-hasPermi="['system:sysPeople:remove']"
|
|||
|
|
>下发</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button
|
|||
|
|
type="info"
|
|||
|
|
plain
|
|||
|
|
icon="el-icon-upload2"
|
|||
|
|
size="mini"
|
|||
|
|
@click="handleImport"
|
|||
|
|
v-hasPermi="['system:sysPeople:import']"
|
|||
|
|
>导入</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button
|
|||
|
|
type="warning"
|
|||
|
|
plain
|
|||
|
|
icon="el-icon-download"
|
|||
|
|
size="mini"
|
|||
|
|
@click="handleExport"
|
|||
|
|
v-hasPermi="['system:sysPeople:export']"
|
|||
|
|
>导出</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-table v-loading="loading" :data="sysPeopleList" @selection-change="handleSelectionChange">
|
|||
|
|
<el-table-column type="selection" width="55" align="center" />
|
|||
|
|
<!-- <el-table-column label="序号" align="center" min-width="80">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<span>{{ queryParams.pageSize * (queryParams.pageNum - 1) + scope.$index + 1 }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>-->
|
|||
|
|
<el-table-column label="人员名称" align="center" prop="name" />
|
|||
|
|
<el-table-column label="联系电话" align="center" prop="phone" />
|
|||
|
|
<el-table-column label="性别" align="center" prop="sex">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="头像地址" align="center" prop="avatar" >
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<el-image
|
|||
|
|
style="width: 80px; height: 80px"
|
|||
|
|
:src="scope.row.avatar"
|
|||
|
|
:preview-src-list="[scope.row.avatar]" >
|
|||
|
|
</el-image>
|
|||
|
|
<!-- <div class="published-div" v-if="scope.row.faceGuid!=undefined">
|
|||
|
|
<el-button type="success" icon="el-icon-check" size="mini" circle></el-button>
|
|||
|
|
</div>
|
|||
|
|
<div class="published-div" v-if="scope.row.faceGuid==undefined">
|
|||
|
|
<el-button type="danger" icon="el-icon-close" size="mini" circle></el-button>
|
|||
|
|
</div> -->
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="所在部门" align="center" prop="branchId" min-width="100">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<template v-if="scope.row.branch">{{ scope.row.branch.name }}</template>
|
|||
|
|
<template v-else>暂无</template>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="职位标签" align="center" prop="position" />
|
|||
|
|
<el-table-column label="身份证号码" align="center" prop="idcard" />
|
|||
|
|
<el-table-column label="卡号" align="center" prop="doorNo" min-width="100"/>
|
|||
|
|
<el-table-column label="创建时间" align="center" prop="createTime" min-width="100">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="人员注册状态" align="center" prop="guid" min-width="100">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<el-switch v-if="scope.row.guid!=undefined" :value="true"
|
|||
|
|
disabled>
|
|||
|
|
</el-switch>
|
|||
|
|
<el-switch v-if="scope.row.guid==undefined" :value="false"
|
|||
|
|
disabled>
|
|||
|
|
</el-switch>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="下发状态" align="center" prop="createTime" min-width="100">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<span v-if="scope.row.down==0">未下发</span>
|
|||
|
|
<span v-if="scope.row.down>0">已下发</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="150" align="center" 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="['system:sysPeople:edit']"
|
|||
|
|
>修改</el-button>
|
|||
|
|
<el-button
|
|||
|
|
size="mini"
|
|||
|
|
type="text"
|
|||
|
|
icon="el-icon-delete"
|
|||
|
|
@click="handleDelete(scope.row)"
|
|||
|
|
v-hasPermi="['system:sysPeople:remove']"
|
|||
|
|
>删除</el-button>
|
|||
|
|
<el-button
|
|||
|
|
size="mini"
|
|||
|
|
type="text"
|
|||
|
|
icon="el-icon-bottom"
|
|||
|
|
@click="handleDown(scope.row)"
|
|||
|
|
v-hasPermi="['system:sysPeople:remove']"
|
|||
|
|
>下发</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 :title="title" :visible.sync="open" width="780px" append-to-body>
|
|||
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="24" >
|
|||
|
|
<el-form-item label="头像地址" prop="avatar">
|
|||
|
|
<div class="card_list" >
|
|||
|
|
<image-minio-upload v-model="form.avatar" :limit="1" :isShowTip="false" :fileName="form.gh"/>
|
|||
|
|
<div class="avater_box">
|
|||
|
|
<div class="avater_l">
|
|||
|
|
<!-- <el-popover
|
|||
|
|
placement="top-start"
|
|||
|
|
title="注册照片示例"
|
|||
|
|
width="500"
|
|||
|
|
trigger="hover">
|
|||
|
|
<div class="txt">照片要求</div>
|
|||
|
|
<el-image
|
|||
|
|
:src="logo"
|
|||
|
|
:preview-src-list="[logo]" >
|
|||
|
|
</el-image>
|
|||
|
|
<el-button size="mini" slot="reference" type="danger" plain>照片示例图</el-button>
|
|||
|
|
<el-button size="mini" slot="reference" type="primary" v-if="form.avatar!=undefined&&form.avatar!=''">人脸已采集</el-button>
|
|||
|
|
<el-button size="mini" slot="reference" @click="cjZp" v-if="form.avatar==undefined||form.avatar==''" :loading="isCjZp" type="danger" ><span v-if="isCjZp">前往设备采集人脸</span><span v-if="!isCjZp">人脸采集</span></el-button>
|
|||
|
|
</el-popover> -->
|
|||
|
|
<el-button size="mini" slot="reference" type="primary" v-if="form.avatar!=undefined&&form.avatar!=''">人脸已采集</el-button>
|
|||
|
|
<el-button size="mini" slot="reference" @click="cjZp" v-if="form.avatar==undefined||form.avatar==''" :loading="isCjZp" type="danger" ><span v-if="isCjZp">前往设备采集人脸</span><span v-if="!isCjZp">人脸采集</span></el-button>
|
|||
|
|
<div class="txt">1、确保照片是正脸，且足够清晰，同一个人最多3张注册照。</div>
|
|||
|
|
<div class="txt">2、照片格式支持JPG\JPEG\PNG</div>
|
|||
|
|
<div class="txt">3、小于2M</div>
|
|||
|
|
<div class="txt">4、面部区域像素不低于128x128</div>
|
|||
|
|
<div class="txt">5、人像大小占整张照片1/3以上</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="avater_r">
|
|||
|
|
<img :src="logo" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="工号" prop="gh">
|
|||
|
|
<el-input v-model="form.gh" placeholder="请输入人员工号" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="人员名称" prop="name">
|
|||
|
|
<el-input v-model="form.name" placeholder="请输入人员名称" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="所在部门" prop="branchId">
|
|||
|
|
<treeselect v-model="form.branchId" :options="branchOptions" :normalizer="normalizer" placeholder="选择所在部门" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="联系电话" prop="phone">
|
|||
|
|
<el-input v-model="form.phone" placeholder="请输入联系电话" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="性别" prop="sex">
|
|||
|
|
<el-select v-model="form.sex" placeholder="请选择用户性别">
|
|||
|
|
<el-option
|
|||
|
|
v-for="dict in dict.type.sys_user_sex"
|
|||
|
|
:key="dict.value"
|
|||
|
|
:label="dict.label"
|
|||
|
|
:value="dict.value"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="职位标签" prop="position">
|
|||
|
|
<el-input v-model="form.position" placeholder="请输入职位标签" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="身份证" prop="idcard" >
|
|||
|
|
<el-input v-model="form.idcard" placeholder="请输入身份证号码" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="卡号" prop="doorNo">
|
|||
|
|
<el-input v-model="form.doorNo" placeholder="请输入卡号" @change="selectDoor"/>
|
|||
|
|
<el-button size="mini" type="primary" v-if="form.doorNo!=undefined&&form.doorNo!=''">卡号已采集</el-button>
|
|||
|
|
<el-button size="mini" @click="cjKh" v-if="form.doorNo==undefined||form.doorNo==''" :loading="isCjKh" type="primary" ><span v-if="isCjKh">前往设备采集卡号</span><span v-if="!isCjKh">卡号采集</span></el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="关联用户" prop="userId">
|
|||
|
|
<el-select v-model="form.userId" filterable placeholder="请选择关联用户" style="width:100%;" clearable :filter-method="changeTreeSelect" @visible-change="visChange">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in peopleOptions"
|
|||
|
|
:key="item.userId"
|
|||
|
|
:label="item.userName"
|
|||
|
|
:value="item.userId">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
<!-- <treeselect v-model="form.userId" :options="peopleOptions" :normalizer="normalizer1" placeholder="请选择关联用户" /> -->
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="车牌号码" prop="carNo">
|
|||
|
|
<el-input v-model="form.carNo" placeholder="请输入车辆号码" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="入职时间" prop="carNo">
|
|||
|
|
<el-date-picker clearable
|
|||
|
|
v-model="form.joinTime"
|
|||
|
|
type="date"
|
|||
|
|
value-format="yyyy-MM-dd"
|
|||
|
|
placeholder="请选择入职时间">
|
|||
|
|
</el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="指纹采集" prop="carNo">
|
|||
|
|
<el-button size="mini" type="primary" v-if="form.fingerprint!=undefined">指纹已采集</el-button>
|
|||
|
|
<el-button size="mini" @click="cjZw" v-if="form.fingerprint==undefined" :loading="isCjZw" type="primary" ><span v-if="isCjZw">前往设备采集指纹</span><span v-if="!isCjZw">指纹采集</span></el-button>
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="头像注册状态" prop="faceGuid" label-width="100px">
|
|||
|
|
<el-switch v-if="form.faceGuid!=undefined" :value="true"
|
|||
|
|
disabled>
|
|||
|
|
</el-switch>
|
|||
|
|
<el-switch v-if="form.faceGuid==undefined" :value="false"
|
|||
|
|
disabled>
|
|||
|
|
</el-switch>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" >
|
|||
|
|
<el-form-item label="人员注册状态" prop="guid" label-width="100px">
|
|||
|
|
<el-switch v-if="form.guid!=undefined" :value="true"
|
|||
|
|
disabled>
|
|||
|
|
</el-switch>
|
|||
|
|
<el-switch v-if="form.guid==undefined" :value="false"
|
|||
|
|
disabled>
|
|||
|
|
</el-switch>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="24" >
|
|||
|
|
<el-form-item label="备注" prop="remark">
|
|||
|
|
<el-input v-model="form.remark" placeholder="请输入备注" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</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 text-center" slot="tip">
|
|||
|
|
<div class="el-upload__tip" slot="tip">
|
|||
|
|
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的数据
|
|||
|
|
</div>
|
|||
|
|
<span>仅允许导入xls、xlsx格式文件。</span>
|
|||
|
|
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
|
|||
|
|
</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>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
listSysPeople,
|
|||
|
|
getSysPeople,
|
|||
|
|
delSysPeople,
|
|||
|
|
addSysPeople,
|
|||
|
|
updateSysPeople,
|
|||
|
|
dactylogram,
|
|||
|
|
faceCollect,
|
|||
|
|
featureInfo,
|
|||
|
|
faceFind, icCardRegist,personFind,downSysPeople
|
|||
|
|
} from "@/api/system/sysPeople";
|
|||
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|||
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|||
|
|
import logoImg from '@/assets/images/exampleavater.png'
|
|||
|
|
import {branchTreeSelect, getSysBranch, listSysBranch} from "@/api/system/sysBranch";
|
|||
|
|
import {listPoint} from "@/api/system/point";
|
|||
|
|
import {listUser} from "@/api/system/user";
|
|||
|
|
import {getToken} from "@/utils/auth";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "SysPeople",
|
|||
|
|
dicts: ['sys_user_sex'],
|
|||
|
|
components: {Treeselect },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
logo: logoImg,
|
|||
|
|
// 遮罩层
|
|||
|
|
loading: true,
|
|||
|
|
isCjZw:false,
|
|||
|
|
isCjZp:false,
|
|||
|
|
isCjKh:false,
|
|||
|
|
// 选中数组
|
|||
|
|
ids: [],
|
|||
|
|
// 部门树选项
|
|||
|
|
branchOptions: [],
|
|||
|
|
nodeKey: [],
|
|||
|
|
// 部门名称
|
|||
|
|
branchId: undefined,
|
|||
|
|
branchName: undefined,
|
|||
|
|
// 非单个禁用
|
|||
|
|
single: true,
|
|||
|
|
// 非多个禁用
|
|||
|
|
multiple: true,
|
|||
|
|
// 显示搜索条件
|
|||
|
|
showSearch: true,
|
|||
|
|
// 总条数
|
|||
|
|
total: 0,
|
|||
|
|
// 人员管理表格数据
|
|||
|
|
sysPeopleList: [],
|
|||
|
|
peopleOptions:[],
|
|||
|
|
// 弹出层标题
|
|||
|
|
title: "",
|
|||
|
|
// 是否显示弹出层
|
|||
|
|
open: false,
|
|||
|
|
defaultProps: {
|
|||
|
|
children: 'children',
|
|||
|
|
label: 'label'
|
|||
|
|
},
|
|||
|
|
// 查询参数
|
|||
|
|
queryParams: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
name: null,
|
|||
|
|
phone: null,
|
|||
|
|
sex: null,
|
|||
|
|
branchId: null,
|
|||
|
|
guidFlag: null,
|
|||
|
|
downFlag: null,
|
|||
|
|
faceFlag: null,
|
|||
|
|
delFlag:"0"
|
|||
|
|
},
|
|||
|
|
queryParams1: {
|
|||
|
|
deptId: undefined,
|
|||
|
|
},
|
|||
|
|
// 表单参数
|
|||
|
|
form: {},
|
|||
|
|
// 导入参数
|
|||
|
|
upload: {
|
|||
|
|
// 是否显示弹出层（用户导入）
|
|||
|
|
open: false,
|
|||
|
|
// 弹出层标题（用户导入）
|
|||
|
|
title: "",
|
|||
|
|
// 是否禁用上传
|
|||
|
|
isUploading: false,
|
|||
|
|
// 是否更新已经存在的用户数据
|
|||
|
|
updateSupport: 0,
|
|||
|
|
// 设置上传的请求头部
|
|||
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|||
|
|
// 上传的地址
|
|||
|
|
url: process.env.VUE_APP_BASE_API + "/system/sysPeople/importData"
|
|||
|
|
},
|
|||
|
|
// 表单校验
|
|||
|
|
rules: {
|
|||
|
|
gh: [
|
|||
|
|
{ required: true, message: "工号不能为空", trigger: "blur" }
|
|||
|
|
],
|
|||
|
|
name: [
|
|||
|
|
{ required: true, message: "人员名称不能为空", trigger: "blur" }
|
|||
|
|
],
|
|||
|
|
/* phone: [
|
|||
|
|
{ required: true, message: "联系电话不能为空", trigger: "blur" },
|
|||
|
|
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: "请输入正确的手机号码",trigger: "blur"}
|
|||
|
|
],*/
|
|||
|
|
/* avatar: [
|
|||
|
|
{ required: true, message: "头像地址不能为空", trigger: "blur" }
|
|||
|
|
],*/
|
|||
|
|
branchId: [
|
|||
|
|
{ required: true, message: "所在部门不能为空", trigger: "blur" }
|
|||
|
|
],
|
|||
|
|
/* idcard: [
|
|||
|
|
{ required: true, message: "身份证号码不能为空", trigger: "blur" },
|
|||
|
|
{ pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message: "请输入正确的身份证号码",trigger: "blur"}
|
|||
|
|
],*/
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 根据名称筛选部门树
|
|||
|
|
branchName(val) {
|
|||
|
|
this.$refs.treeRef.filter(val)
|
|||
|
|
},
|
|||
|
|
'form.branchId': 'getPeople',
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getList();
|
|||
|
|
this.getOptions()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 查询人员管理列表 */
|
|||
|
|
getList() {
|
|||
|
|
this.loading = true;
|
|||
|
|
listSysPeople(this.queryParams).then(response => {
|
|||
|
|
this.sysPeopleList = response.rows;
|
|||
|
|
this.total = response.total;
|
|||
|
|
this.loading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/** 查询选项列表 */
|
|||
|
|
getOptions() {
|
|||
|
|
this.branchOptions = []
|
|||
|
|
branchTreeSelect().then(response => {
|
|||
|
|
this.branchOptions = response.data
|
|||
|
|
this.nodeKey.push(this.branchOptions[0].id)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/** 查询选项列表 */
|
|||
|
|
getPeople() {
|
|||
|
|
if(this.form.branchId!=null){
|
|||
|
|
getSysBranch(this.form.branchId).then(response => {
|
|||
|
|
this.queryParams1.deptId=response.data.deptId;
|
|||
|
|
this.peopleOptions = []
|
|||
|
|
listUser(this.queryParams1).then(response => {
|
|||
|
|
this.peopleOptions = response.rows
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
}else {
|
|||
|
|
listUser(this.queryParams1).then(response => {
|
|||
|
|
this.peopleOptions = response.rows
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeTreeSelect(userName){
|
|||
|
|
listUser({userName}).then(response => {
|
|||
|
|
this.peopleOptions = response.rows;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
visChange(e){
|
|||
|
|
if(e){
|
|||
|
|
this.getPeople();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** 转换树数据结构 */
|
|||
|
|
normalizer(node) {
|
|||
|
|
if (node.children && !node.children.length) {
|
|||
|
|
delete node.children;
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
id: node.id,
|
|||
|
|
label: node.label,
|
|||
|
|
isDisabled: false,
|
|||
|
|
children: node.children
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
normalizer1(node) {
|
|||
|
|
if (node.children && !node.children.length) {
|
|||
|
|
delete node.children;
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
id: node.userId,
|
|||
|
|
label: node.userName,
|
|||
|
|
isDisabled: false,
|
|||
|
|
children: node.children
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// 取消按钮
|
|||
|
|
cancel() {
|
|||
|
|
this.open = false;
|
|||
|
|
this.reset();
|
|||
|
|
},
|
|||
|
|
// 表单重置
|
|||
|
|
reset() {
|
|||
|
|
this.form = {
|
|||
|
|
id: null,
|
|||
|
|
name: null,
|
|||
|
|
phone: null,
|
|||
|
|
sex: null,
|
|||
|
|
avatar: null,
|
|||
|
|
branchId: null,
|
|||
|
|
position: null,
|
|||
|
|
idcard: null,
|
|||
|
|
carNo: null,
|
|||
|
|
doorNo: null,
|
|||
|
|
guid: null,
|
|||
|
|
faceGuid: null,
|
|||
|
|
userId: null,
|
|||
|
|
remark: null,
|
|||
|
|
createBy: null,
|
|||
|
|
createTime: null,
|
|||
|
|
updateBy: null,
|
|||
|
|
updateTime: null
|
|||
|
|
};
|
|||
|
|
this.resetForm("form");
|
|||
|
|
},
|
|||
|
|
/** 搜索按钮操作 */
|
|||
|
|
handleQuery() {
|
|||
|
|
this.queryParams.pageNum = 1;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
/** 重置按钮操作 */
|
|||
|
|
resetQuery() {
|
|||
|
|
this.resetForm("queryForm");
|
|||
|
|
this.queryParams.branchId = undefined;
|
|||
|
|
this.handleQuery();
|
|||
|
|
},
|
|||
|
|
// 多选框选中数据
|
|||
|
|
handleSelectionChange(selection) {
|
|||
|
|
this.ids = selection.map(item => item.id)
|
|||
|
|
this.single = selection.length!==1
|
|||
|
|
this.multiple = !selection.length
|
|||
|
|
},
|
|||
|
|
/** 筛选节点 */
|
|||
|
|
filterNode(value, data) {
|
|||
|
|
if (!value) return true
|
|||
|
|
return data.label.indexOf(value) !== -1
|
|||
|
|
},
|
|||
|
|
/** 节点单击事件 */
|
|||
|
|
handleNodeClick(data) {
|
|||
|
|
this.queryParams.branchId = data.id
|
|||
|
|
this.handleQuery()
|
|||
|
|
},
|
|||
|
|
/** 新增按钮操作 */
|
|||
|
|
handleAdd() {
|
|||
|
|
this.reset();
|
|||
|
|
this.open = true;
|
|||
|
|
this.title = "添加人员管理";
|
|||
|
|
},
|
|||
|
|
/** 修改按钮操作 */
|
|||
|
|
handleUpdate(row) {
|
|||
|
|
this.reset();
|
|||
|
|
const id = row.id || this.ids
|
|||
|
|
getSysPeople(id).then(response => {
|
|||
|
|
this.form = response.data;
|
|||
|
|
this.open = true;
|
|||
|
|
this.title = "修改人员管理";
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/** 提交按钮 */
|
|||
|
|
submitForm() {
|
|||
|
|
this.$refs["form"].validate(valid => {
|
|||
|
|
if (valid) {
|
|||
|
|
if (this.form.id != null) {
|
|||
|
|
updateSysPeople(this.form).then(response => {
|
|||
|
|
this.$modal.msgSuccess("修改成功");
|
|||
|
|
this.open = false;
|
|||
|
|
this.getList();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
addSysPeople(this.form).then(response => {
|
|||
|
|
this.$modal.msgSuccess("新增成功");
|
|||
|
|
this.open = false;
|
|||
|
|
this.getList();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/** 删除按钮操作 */
|
|||
|
|
handleDelete(row) {
|
|||
|
|
const ids = row.id || this.ids;
|
|||
|
|
this.$modal.confirm('是否确认删除人员管理编号为"' + ids + '"的数据项？').then(function() {
|
|||
|
|
return delSysPeople(ids);
|
|||
|
|
}).then(() => {
|
|||
|
|
this.getList();
|
|||
|
|
this.$modal.msgSuccess("删除成功");
|
|||
|
|
}).catch(() => {});
|
|||
|
|
},
|
|||
|
|
/** 导出按钮操作 */
|
|||
|
|
handleExport() {
|
|||
|
|
this.download('system/sysPeople/export', {
|
|||
|
|
...this.queryParams
|
|||
|
|
}, `人员信息_${new Date().getTime()}.xlsx`)
|
|||
|
|
},
|
|||
|
|
cjZp() {
|
|||
|
|
if(this.form.name==undefined){
|
|||
|
|
this.$modal.msgError("请先输入人员名称");
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if(!this.isCjZp){
|
|||
|
|
this.isCjZp=true;
|
|||
|
|
faceCollect(this.form).then(response => {
|
|||
|
|
this.form.faceGuid=undefined;
|
|||
|
|
this.form.guid=response.data.guid
|
|||
|
|
//获取指纹和照片
|
|||
|
|
setInterval(this.findeCjxxs,3000)
|
|||
|
|
}).catch(error => {
|
|||
|
|
this.isCjZp=false;
|
|||
|
|
|
|||
|
|
});;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
cjZw() {
|
|||
|
|
if(this.form.name==undefined){
|
|||
|
|
this.$modal.msgError("请先输入人员名称");
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if(!this.isCjZw){
|
|||
|
|
this.isCjZw=true;
|
|||
|
|
dactylogram(this.form).then(response => {
|
|||
|
|
this.form.guid=response.data.guid
|
|||
|
|
setInterval(this.findeCjxxs,3000)
|
|||
|
|
}).catch(error => {
|
|||
|
|
this.isCjZw=false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
cjKh() {
|
|||
|
|
if(this.form.name==undefined){
|
|||
|
|
this.$modal.msgError("请先输入人员名称");
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if(!this.isCjKh){
|
|||
|
|
this.isCjKh=true;
|
|||
|
|
icCardRegist(this.form).then(response => {
|
|||
|
|
this.form.guid=response.data.guid
|
|||
|
|
setInterval(this.findeCjxxs,3000)
|
|||
|
|
}).catch(error => {
|
|||
|
|
this.isCjKh=false;
|
|||
|
|
});;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
findeCjxxs(){
|
|||
|
|
if(this.isCjZw){
|
|||
|
|
featureInfo(this.form).then(response => {
|
|||
|
|
if(response.data.fingerprint!=""&&response.data.fingerprint!=undefined){
|
|||
|
|
this.form.fingerprint=response.data.fingerprint
|
|||
|
|
this.isCjZw=false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if(this.isCjZp){
|
|||
|
|
faceFind(this.form).then(response => {
|
|||
|
|
if(response.data.avatar!=""&&response.data.avatar!=undefined){
|
|||
|
|
this.form.avatar=response.data.avatar
|
|||
|
|
this.form.faceGuid=response.data.faceGuid
|
|||
|
|
this.isCjZp=false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if(this.isCjKh){
|
|||
|
|
personFind(this.form).then(response => {
|
|||
|
|
if(response.data.doorNo!=""&&response.data.doorNo!=undefined){
|
|||
|
|
this.form.doorNo=response.data.doorNo
|
|||
|
|
this.isCjKh=false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** 删除按钮操作 */
|
|||
|
|
handleDown(row) {
|
|||
|
|
const ids = row.id || this.ids;
|
|||
|
|
this.$modal.confirm('是否确认下发人员编号为"' + ids + '"的数据项？').then(function() {
|
|||
|
|
return downSysPeople(ids);
|
|||
|
|
}).then(() => {
|
|||
|
|
this.$modal.msgSuccess("下发成功");
|
|||
|
|
}).catch(() => {});
|
|||
|
|
},
|
|||
|
|
/** 导入按钮操作 */
|
|||
|
|
handleImport() {
|
|||
|
|
this.upload.title = "人员信息导入";
|
|||
|
|
this.upload.open = true;
|
|||
|
|
},
|
|||
|
|
// 文件上传中处理
|
|||
|
|
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("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
// 提交上传文件
|
|||
|
|
submitFileForm() {
|
|||
|
|
this.$refs.upload.submit();
|
|||
|
|
},
|
|||
|
|
/** 下载模板操作 */
|
|||
|
|
importTemplate() {
|
|||
|
|
this.download('system/sysPeople/importTemplate', {
|
|||
|
|
}, `人员信息_${new Date().getTime()}.xlsx`)
|
|||
|
|
},
|
|||
|
|
selectDoor(){
|
|||
|
|
let num;
|
|||
|
|
if(this.form.doorNo.length>10){
|
|||
|
|
num=this.form.doorNo.substring(this.form.doorNo.length-10,this.form.doorNo.length)
|
|||
|
|
this.form.doorNo=num
|
|||
|
|
}
|
|||
|
|
if(this.form.doorNo.length>8){
|
|||
|
|
num=this.toHex(this.form.doorNo);
|
|||
|
|
let first=this.form.doorNo.substring(0,1);
|
|||
|
|
if(first=='0'){
|
|||
|
|
num=num.substring(1,num.length)
|
|||
|
|
}else{
|
|||
|
|
num=num.substring(2,num.length)
|
|||
|
|
}
|
|||
|
|
this.form.doorNo=parseInt(num,16)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toHex(num){
|
|||
|
|
var rs = "";
|
|||
|
|
var temp;
|
|||
|
|
while(num/16 > 0){
|
|||
|
|
temp = num%16;
|
|||
|
|
rs = (temp+"").replace("10","A").replace("11","B").replace("12","C").replace("13","D").replace("14","E").replace("15","F") + rs;
|
|||
|
|
num = parseInt(num/16);
|
|||
|
|
}
|
|||
|
|
return rs;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
.card_list {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.published-div {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 70px;
|
|||
|
|
right: 60px;
|
|||
|
|
}
|
|||
|
|
.el-button--mini.is-circle {
|
|||
|
|
padding: 2px;
|
|||
|
|
}
|
|||
|
|
.el-form-item--medium .el-form-item__label {
|
|||
|
|
line-height: 40px;
|
|||
|
|
}
|
|||
|
|
.el-tree{
|
|||
|
|
height:700px;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
.custom-tree-node{
|
|||
|
|
font-size:14px;
|
|||
|
|
}
|
|||
|
|
</style>
|