<template>
|
<!-- 用户人脸管理页面 -->
|
<flex-layout class="face_manager">
|
<div class="table-layout filter-box-table" slot="header">
|
</div>
|
<div class="flex-page-content">
|
<el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="dataList">
|
<el-table-column type="index" label="编号" min-width="90" align="center">
|
</el-table-column>
|
<el-table-column prop="UName" label="用户名称" min-width="160" align="center"></el-table-column>
|
<el-table-column label="状态" min-width="160" align="center">
|
<template slot-scope="scope">
|
<span v-if="scope.row.face.id == 0">未上传人脸</span>
|
<span v-else>已上传人脸</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="250" align="center">
|
<template slot-scope="scope">
|
<el-button @click="handleClick(scope.row)" type="primary" size="mini">{{ scope.row.face.id==0?'添加人脸':'更新人脸' }}</el-button>
|
<el-button type="danger" size="mini" @click="deleteData(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="flex-page-footer" slot="footer">
|
</div>
|
<!-- 人脸登陆 -->
|
<el-dialog
|
title="人脸上传" width="480px"
|
:visible.sync="updataFace.show"
|
:close-on-click-modal="false" top="-500px"
|
class="dialog-center" :modal-append-to-body="false">
|
<el-upload
|
:before-upload="uploadImg"
|
class="upload-demo"
|
action="#"
|
drag
|
multiple>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">{{ updataFace.msg }}</div>
|
</el-upload>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
<script>
|
import faceManager from '../../assets/js/apis/faceManager/faceManager.js'
|
export default {
|
data(){
|
return {
|
dataList:[],
|
updataFace:{
|
show:false,
|
id:0,
|
UId:'',
|
UName:'',
|
msg:'只能上传jpg/png文件，且不超过2M'
|
}
|
}
|
},
|
mounted() {
|
this.queryList();
|
},
|
methods: {
|
// 查询用户列表
|
queryList:function(){
|
let vm = this;
|
let obj = {
|
pageNum:1,
|
pageSize:10
|
}
|
faceManager.getUserList(obj).then(res=>{
|
let result = JSON.parse(res.data.result);
|
console.log(result)
|
let params = [];
|
if(result.code == 1){
|
params = result.data.obj;
|
}
|
vm.dataList = params;
|
}).catch(err=>{
|
|
})
|
},
|
// 添加/更新
|
handleClick:function(row){
|
let vm = this;
|
vm.listObj(row);
|
vm.updataFace.show = true;
|
},
|
// 删除
|
deleteData:function(row){
|
let vm = this;
|
vm.listObj(row);
|
if(row.face.id == 0){
|
vm.$message.success('用户未上传人脸!');
|
return false;
|
}
|
let obj = {
|
uId:vm.updataFace.UId,
|
uName:vm.updataFace.UName,
|
faceId:vm.updataFace.id
|
}
|
vm.$layer.confirm('确认删除人脸?', {icon:3},index=>{
|
faceManager.deleteUserFace(obj).then(res=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
vm.$message.success('删除人脸成功!');
|
vm.queryList();
|
}else{
|
vm.$message.error('删除人脸失败！');
|
}
|
}).catch(err=>{
|
vm.$message.error('删除人脸失败！');
|
})
|
// 关闭弹出框
|
this.$layer.close(index);
|
})
|
},
|
// 处理参数
|
listObj:function(row){
|
let vm = this;
|
vm.updataFace.UId = row.UId;
|
vm.updataFace.UName = row.UName;
|
vm.updataFace.id = row.face.id;
|
},
|
// 上传图片前
|
uploadImg:function(file){
|
let vm = this;
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
if (!isJPG) {
|
vm.$message.error('上传头像图片只能是 JPG或PNG 格式!');
|
return false;
|
}
|
if (!isLt2M) {
|
vm.$message.error('上传头像图片大小不能超过 2MB!');
|
return false;
|
}
|
// 图片转base64
|
vm.getBase64(file).then(res=>{
|
vm.imageUrl = res;
|
let jsontemp = {
|
fileData:res,
|
uId:vm.updataFace.UId,
|
uName:vm.updataFace.UName
|
}
|
let url = vm.updataFace.id ==0? 'FaceIdentifyAction_face_add':'FaceIdentifyAction_face_update'
|
vm.$axios({
|
method:'post',
|
url:url,
|
data:"json="+JSON.stringify(jsontemp)
|
}).then(res=>{
|
let result = JSON.parse(res.data.result);
|
if(result.code == 1){
|
//隐藏弹窗
|
vm.updataFace.show = false;
|
let text = vm.updataFace.faceId ==0?'新增人脸成功！':'更新人脸成功！';
|
vm.$message.success(text);
|
vm.queryList();
|
}else{
|
vm.$message.error('上传失败，请重新上传！');
|
}
|
}).catch(err=>{
|
vm.$message.error('上传失败，请重新上传！');
|
})
|
})
|
return false;
|
},
|
// 图片转base64
|
getBase64(file) {
|
return new Promise(function (resolve, reject) {
|
let reader = new FileReader();
|
let imgResult = "";
|
reader.readAsDataURL(file);
|
reader.onload = function () {
|
imgResult = reader.result;
|
};
|
reader.onerror = function (error) {
|
reject(error);
|
};
|
reader.onloadend = function () {
|
resolve(imgResult);
|
};
|
});
|
},
|
},//
|
}
|
</script>
|
<style lang="less">
|
.face_manager{
|
.upload-demo{
|
text-align: center;
|
padding: 10px 0;
|
.el-upload{
|
width: 100%;
|
.el-upload-dragger{
|
width: 100%;
|
border: none;
|
}
|
}
|
.el-upload__tip{
|
color: red;
|
}
|
}
|
}
|
</style>
|
