123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686 |
- <template>
- <div>
- <el-breadcrumb separator=">">
- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
- <el-breadcrumb-item>
- <a href="#">系统管理</a>
- </el-breadcrumb-item>
- <el-breadcrumb-item>
- <a href="#">设备人员管理</a>
- </el-breadcrumb-item>
- </el-breadcrumb>
- <el-divider></el-divider>
- <!--
- 要resetFields起作用,必须配置:model和prop
- -->
- <el-form
- ref="queryForm"
- :model="queryModel"
- :rules="ruleValidate"
- inline
- class="demo-form-inline"
- >
- <div>
- <el-form-item label="绑定设备名称" prop="deviceId">
- <el-select
- v-model="queryModel.deviceId"
- size="mini"
- filterable
- clearable
- remote
- style="width:220px;"
- placeholder="请输入关键词"
- :remote-method="queryDevice"
- >
- <el-option
- v-for="device in deviceResult"
- :key="device.id"
- :label="device.aliasName"
- :value="device.id"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="姓名" prop="name">
- <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
- </el-form-item>
- <el-form-item label="手机号" prop="phone">
- <el-input type="text" size="mini" v-model="queryModel.phone"></el-input>
- </el-form-item>
- <el-form-item label="身份证" prop="idCard">
- <el-input type="text" size="mini" v-model="queryModel.idCard"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button
- type="primary"
- size="mini"
- icon="ios-search"
- @click="handleQuery"
- :loading="loading"
- >查询</el-button>
- <el-button
- type="info"
- size="mini"
- style="margin-left: 8px"
- @click="handleReset('queryForm')"
- >重置</el-button>
- </el-form-item>
- </div>
- <div>
- <el-form-item label="单位" prop="parentId">
- <el-select-tree
- size="mini"
- :props="props"
- :options="companyResult"
- :value="queryModel.parentId"
- @getValue="getSelectedValue($event)"
- height="200"
- ></el-select-tree>
- <el-checkbox v-model="queryModel.subordinate">是否包含下级单位</el-checkbox>
- </el-form-item>
- <el-form-item label="是否上传照片" prop="isUploadPhoto">
- <el-select
- v-model="queryModel.isUploadPhoto"
- size="mini"
- filterable
- placeholder="请选择"
- style="width:120px"
- >
- <el-option value label="全部"></el-option>
- <el-option value="1" label="已上传"></el-option>
- <el-option value="0" label="未上传"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="是否同步" prop="isBound">
- <el-select
- v-model="queryModel.isBound"
- size="mini"
- filterable
- placeholder="请选择"
- style="width:120px"
- >
- <el-option value label="全部"></el-option>
- <el-option value="1" label="已同步"></el-option>
- <el-option value="0" label="未同步"></el-option>
- </el-select>
- </el-form-item>
- </div>
- <div>
- <el-form-item v-if="position1Show" :label="position1" prop="position1">
- <el-input type="text" size="mini" v-model="queryModel.position1"></el-input>
- </el-form-item>
- <el-form-item v-if="position2Show" :label="position2" prop="position2">
- <el-input type="text" size="mini" v-model="queryModel.position2"></el-input>
- </el-form-item>
- <el-form-item v-if="position3Show" :label="position3" prop="position3">
- <el-input type="text" size="mini" v-model="queryModel.position3"></el-input>
- </el-form-item>
- <el-form-item v-if="position4Show" :label="position4" prop="position4">
- <el-input type="text" size="mini" v-model="queryModel.position4"></el-input>
- </el-form-item>
- <el-form-item v-if="position5Show" :label="position5" prop="position5">
- <el-input type="text" size="mini" v-model="queryModel.position5"></el-input>
- </el-form-item>
- </div>
- </el-form>
- <el-divider></el-divider>
- <el-row class="button-group">
- <el-button
- type="primary"
- size="small"
- plain
- icon="el-icon-refresh"
- :disabled="multipleSelection.length==0"
- @click="dataSync"
- >数据同步</el-button>
- </el-row>
- <el-table
- ref="formTable"
- :data="tableData"
- v-loading="loading"
- stripe
- :height="tableHeight"
- @sort-change="sortChange"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55"></el-table-column>
- <el-table-column prop="personInfo.id" label="序号" width="80" fixed="left"></el-table-column>
- <el-table-column prop="personInfo.name" label="姓名" width="80" fixed="left"></el-table-column>
- <el-table-column prop="personInfo.faceImageUrl" label="人员照片" width="80" fixed="left">
- <template v-if="row.personInfo.faceImageUrl" slot-scope="{row}">
- <a :href="row.personInfo.faceImageUrl" target="_blank">
- <el-avatar
- :size="48"
- shape="circle"
- :src="row.personInfo.faceImageUrl+'?x-oss-process=image/resize,m_fill,w_64,h_64'"
- :key="row.personInfo.id"
- ></el-avatar>
- </a>
- </template>
- </el-table-column>
- <el-table-column prop="personInfo.companyName" label="单位" width="250"></el-table-column>
- <el-table-column prop="personInfo.phone" label="手机号" width="180"></el-table-column>
- <el-table-column prop="personInfo.idCard" label="身份证" width="100" show-overflow-tooltip></el-table-column>
- <el-table-column prop="deviceInfo.aliasName" label="绑定设备" width="150" show-overflow-tooltip></el-table-column>
- <el-table-column prop="isBound" label="是否同步到设备" width="150" show-overflow-tooltip>
- <template slot-scope="{row}">{{row.isBound ? "是" : "否"}}</template>
- </el-table-column>
- <el-table-column
- prop="personInfo.position1"
- :label="position1"
- width="180"
- v-if="position1Show"
- ></el-table-column>
- <el-table-column
- prop="personInfo.position2"
- :label="position2"
- width="180"
- v-if="position2Show"
- ></el-table-column>
- <el-table-column
- prop="personInfo.position3"
- :label="position3"
- width="180"
- v-if="position3Show"
- ></el-table-column>
- <el-table-column
- prop="personInfo.position4"
- :label="position4"
- width="180"
- v-if="position4Show"
- ></el-table-column>
- <el-table-column
- prop="personInfo.position5"
- :label="position5"
- width="180"
- v-if="position5Show"
- ></el-table-column>
- <el-table-column prop="personInfo.openId" label="是否绑定公众号" width="180">
- <template slot-scope="{row}">{{row.personInfo.openId == null ? "否" : "是"}}</template>
- </el-table-column>
- <!-- <el-table-column prop="personInfo.faceBound" label="是否同步人脸信息" width="180">
- <template slot-scope="{row}">{{row.personInfo.faceBound ? "是" : "否"}}</template>
- </el-table-column>-->
- <el-table-column prop="personInfo.popedom" label="用户身份" width="200">
- <template slot-scope="{row}">
- <el-row>
- <el-col :span="10" v-if="row.personInfo.popedom.indexOf('1')!= -1">个人用户</el-col>
- <el-col :span="10" v-if="row.personInfo.popedom.indexOf('2')!= -1">单位管理员</el-col>
- <el-col :span="10" v-if="row.personInfo.popedom.indexOf('3')!= -1">监管专员</el-col>
- </el-row>
- </template>
- </el-table-column>
- <el-table-column label="人脸授权">
- <template slot-scope="{row}">
- <el-switch
- v-model="row.personInfo.faceEnabled"
- active-color="#13ce66"
- inactive-color="#ff4949"
- disabled
- ></el-switch>
- </template>
- </el-table-column>
- <el-table-column label="刷卡授权">
- <template slot-scope="{row}">
- <el-switch
- v-model="row.personInfo.cardEnabled"
- active-color="#13ce66"
- inactive-color="#ff4949"
- disabled
- ></el-switch>
- </template>
- </el-table-column>
- <el-table-column label="手机授权">
- <template slot-scope="{row}">
- <el-switch
- v-model="row.personInfo.appEnabled"
- active-color="#13ce66"
- inactive-color="#ff4949"
- disabled
- ></el-switch>
- </template>
- </el-table-column>
- <!-- <el-table-column label="密码">
- <template slot-scope="{row}">
- <el-switch v-model="row.passwordEnabled" @change="enabledTo(row.id,'face')" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
- </template>
- </el-table-column>-->
- <el-table-column label="访客授权">
- <template slot-scope="{row}">
- <el-switch
- v-model="row.personInfo.guestEnabled"
- active-color="#13ce66"
- inactive-color="#ff4949"
- disabled
- ></el-switch>
- </template>
- </el-table-column>
- <el-table-column label="接收微信通知">
- <template slot-scope="{row}">
- <el-switch
- v-model="row.personInfo.wechatNoticeEnabled"
- active-color="#13ce66"
- inactive-color="#ff4949"
- disabled
- ></el-switch>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="80" fixed="right">
- <template slot-scope="{row}">
- <el-row>
- <el-col>
- <span v-if="row.isBound">
- <el-link
- type="primary"
- :underline="false"
- :disabled="true"
- @click="uploadData(row)"
- >数据同步</el-link>
- </span>
- <span v-else>
- <el-link type="primary" :underline="false" @click="uploadData(row)">数据同步</el-link>
- </span>
- </el-col>
- </el-row>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- :current-page.sync="pageIndex"
- :total="totalElements"
- :page-sizes="pageSizeList"
- @current-change="changePage"
- @size-change="pageSizeChange"
- layout="total, sizes, prev, pager, next, jumper"
- ></el-pagination>
- </div>
- </template>
- <script>
- import Constant from "@/constant";
- import personInfoApi from "@/api/base/personInfo";
- import companyInfoApi from "@/api/base/companyInfo";
- import companyPositionApi from "@/api/base/companyPosition";
- import deviceInfoApi from "@/api/base/deviceInfo";
- import personDeviceRelationApi from "@/api/base/personDeviceRelation";
- import SelectTree from "@/components/SelectTree";
- import { getToken } from "@/utils/auth"; // get token from cookie
- import NProgress from "nprogress"; // progress bar
- import "nprogress/nprogress.css"; // progress bar style
- export default {
- data() {
- var self = this;
- return {
- ruleValidate: {
- deviceId: [{ required: true, message: "不能为空", trigger: "blur" }]
- },
- queryModel: {
- companyCode: "",
- parentId: "",
- name: "",
- phone: "",
- idCard: "",
- isBound: "",
- isUploadPhoto: "",
- subordinate: false,
- position1: "",
- position2: "",
- position3: "",
- position4: "",
- position5: "",
- deviceId: ""
- },
- loading: false,
- tableData: [],
- pageIndex: 1,
- pageSize: 30,
- totalPages: 0,
- totalElements: 0,
- field: "",
- direction: "",
- pageSizeList: [30, 100, 500],
- multipleSelection: [],
- showModal: false,
- modalTitle: "",
- businessKey: "",
- companyResult: [],
- uploadCompanyId: "",
- batchImportVisible: false,
- batchImportFileList: [],
- disabled: false,
- position1: "",
- position2: "",
- position3: "",
- position4: "",
- position5: "",
- position1Show: false,
- position2Show: false,
- position3Show: false,
- position4Show: false,
- position5Show: false,
- personId: "",
- deviceResult: [],
- boundDeviceId: "",
- boundUnDeviceId: "",
- xlsLoading: false,
- tableHeight: "",
- boundDeviceDisabled: false,
- treeData: [],
- props: {
- // 配置项(必选)
- value: "id",
- label: "name",
- children: "children"
- }
- };
- },
- created() {
- var self = this;
- companyInfoApi.list().then(function(response) {
- var jsonData = response.data;
- if (jsonData.result) {
- if (jsonData.data != null && jsonData.data != "") {
- self.companyResult = jsonData.data;
- }
- }
- });
- companyPositionApi.detailForCompany().then(function(response) {
- var jsonData = response.data.data;
- if (jsonData.position1Name != null && jsonData.position1Name != "") {
- self.position1 = jsonData.position1Name;
- self.position1Show = true;
- }
- if (jsonData.position2Name != null && jsonData.position2Name != "") {
- self.position2 = jsonData.position2Name;
- self.position2Show = true;
- }
- if (jsonData.position3Name != null && jsonData.position3Name != "") {
- self.position3 = jsonData.position3Name;
- self.position3Show = true;
- }
- if (jsonData.position4Name != null && jsonData.position4Name != "") {
- self.position4 = jsonData.position4Name;
- self.position4Show = true;
- }
- if (jsonData.position5Name != null && jsonData.position5Name != "") {
- self.position5 = jsonData.position5Name;
- self.position5Show = true;
- }
- });
- this.queryDevice("");
- this.loadTree();
- },
- methods: {
- queryDevice(aliasName) {
- var self = this;
- var formData = new FormData();
- formData.append("aliasName", aliasName);
- formData.append("limit", 10);
- deviceInfoApi.query(formData).then(function(response) {
- var jsonData = response.data;
- if (jsonData.result) {
- if (jsonData.data != null && jsonData.data != "") {
- self.deviceResult = jsonData.data;
- }
- }
- });
- },
- getSelectedValue(value) {
- this.queryModel.parentId = value;
- },
- loadTree() {
- var formData = new FormData();
- companyInfoApi.loadChildren(formData).then(resp => {
- var jsonData = resp.data;
- if (jsonData.result) {
- this.treeData = jsonData.data;
- } else {
- this.$message.error(jsonData.message + "");
- }
- });
- },
- loadChildren(tree, treeNode, resolve) {
- console.log(tree);
- var formData = new FormData();
- formData.append("parentId", tree.id);
- companyInfoApi.loadChildren(formData).then(resp => {
- var jsonData = resp.data;
- if (jsonData.result) {
- resolve(jsonData.data);
- } else {
- this.$message.error(jsonData.message + "");
- }
- });
- },
- handleQuery() {
- var self = this;
- this.$refs["queryForm"].validate(valid => {
- if (valid) {
- self.changePage(1);
- }
- });
- },
- changePage(pageIndex) {
- var self = this;
- self.loading = true;
- self.pageIndex = pageIndex;
- var formData = new FormData();
- formData.append("pageIndex", self.pageIndex);
- formData.append("pageSize", self.pageSize);
- if (self.queryModel.parentId == null) {
- self.queryModel.parentId = "";
- }
- formData.append("companyCode", self.queryModel.companyCode);
- formData.append("parentId", self.queryModel.parentId);
- formData.append("subordinate", self.queryModel.subordinate);
- formData.append("name", self.queryModel.name);
- formData.append("phone", self.queryModel.phone);
- formData.append("idCard", self.queryModel.idCard);
- formData.append("isBound", self.queryModel.isBound);
- formData.append("isUploadPhoto", self.queryModel.isUploadPhoto);
- formData.append("position1", self.queryModel.position1);
- formData.append("position2", self.queryModel.position2);
- formData.append("position3", self.queryModel.position3);
- formData.append("position4", self.queryModel.position4);
- formData.append("position5", self.queryModel.position5);
- formData.append("deviceId", self.queryModel.deviceId);
- if (this.field != null) {
- formData.append("field", this.field);
- }
- if (this.direction != null) {
- formData.append("direction", this.direction);
- }
- personDeviceRelationApi
- .devicePersonList(formData)
- .then(function(response) {
- self.loading = false;
- var jsonData = response.data.data;
- self.tableData = jsonData.data;
- self.totalPages = jsonData.totalPages;
- self.totalElements = jsonData.recordsTotal;
- //45为分页栏的高度
- //页面高度-列表上面的高度-分页栏高度
- self.tableHeight =
- window.innerHeight - self.$refs.formTable.$el.offsetTop - 45;
- })
- .catch(error => {
- self.loading = false;
- // self.$message.error(error + "");
- });
- },
- pageSizeChange(pageSize) {
- this.pageSize = pageSize;
- this.changePage(this.pageIndex);
- },
- sortChange(data) {
- this.field = data.column.field;
- this.changePage(this.pageIndex);
- },
- handleSelectionChange(val) {
- this.multipleSelection = val;
- },
- handleReset(name) {
- this.$refs[name].resetFields();
- },
- uploadData(record) {
- //同步人脸数据
- var self = this;
- self.loading = true;
- var uploadSync = new Array(0);
- uploadSync.push(record.personInfo.id);
- var formData = new FormData();
- formData.append("personId", uploadSync);
- formData.append("deviceId", record.deviceId);
- personDeviceRelationApi
- .devicePersonSync(formData)
- .then(function(response) {
- var jsonData = response.data;
- self.loading = false;
- if (jsonData.result) {
- if (jsonData.data) {
- self.changePage(self.pageIndex);
- self.$message({
- type: "success",
- message: "同步成功!"
- });
- } else {
- if (jsonData.message != null) {
- //下载有错误信息提示的报表
- //window.open(response.data);
- self.$message({
- showClose: true,
- dangerouslyUseHTMLString: true,
- message:
- "错误" +
- `,<a href="${jsonData.message}" target="_blank">点击下载错误报表</a> `,
- duration: 30000
- });
- }
- }
- } else {
- self.$message({
- type: "warning",
- message: jsonData.message
- });
- }
- });
- },
- dataSync() {
- //批量同步人脸
- var self = this;
- var idList = this.multipleSelection.map(record => {
- return record.personInfo.id;
- });
- this.$confirm("是否确认同步选中项?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- })
- .then(() => {
- self.loading = true;
- var formData = new FormData();
- formData.append("personIds", idList);
- formData.append("deviceId", self.queryModel.deviceId);
- personDeviceRelationApi
- .devicePersonsSync(formData)
- .then(function(response) {
- var jsonData = response.data;
- self.loading = false;
- if (jsonData.result) {
- if (jsonData.data) {
- self.changePage(self.pageIndex);
- self.$message({
- type: "success",
- message: "同步成功!"
- });
- } else {
- if (jsonData.message != null) {
- //下载有错误信息提示的报表
- //window.open(response.data);
- self.$message({
- showClose: true,
- dangerouslyUseHTMLString: true,
- message:
- "错误" +
- `,<a href="${jsonData.message}" target="_blank">点击下载错误报表</a> `,
- duration: 30000
- });
- }
- }
- } else {
- self.$message({
- type: "warning",
- message: jsonData.message
- });
- }
- });
- })
- .catch(() => {
- self.loading = false;
- });
- }
- },
- async mounted() {
- var self = this;
- this.queryDevice("");
- },
- components: {
- "el-select-tree": SelectTree
- }
- };
- </script>
- <style lang="scss" scoped>
- .el-breadcrumb {
- margin: 10px;
- line-height: 20px;
- }
- .el-divider {
- margin: 5px 0;
- }
- .demo-form-inline {
- margin-left: 10px;
- text-align: left;
- }
- .button-group {
- margin-left: 10px;
- text-align: left;
- }
- .el-select-dropdown__wrap .el-scrollbar__wrap {
- margin: 0px;
- max-height: 10;
- overflow: scroll;
- }
- </style>
|