<script setup name="userFaceManager">
|
// import userInfo from '@/assets/js/userMager/userInfo';
|
// import faceManager from '../login/components/face/faceManager';
|
// import faceManager from '../../assets/js/apis/faceManager/faceManager.js'
|
import { faceInfo, faceMagerAdd, faceMagerChange, faceMagerDelete } from '@/api/face';
|
import { ref, onMounted } from 'vue';
|
import useElement from "@/hooks/useElement.js";
|
|
const { $loading, $message, $confirm } = useElement();
|
|
const faceVisible = ref(false);
|
const dataList = ref([]);
|
const imageUrl = ref('');
|
const updateFace = ref({
|
id: 0,
|
uid: '',
|
uname: '',
|
msg: '只能上传jpg/png文件，且不超过2M'
|
});
|
|
onMounted(() => {
|
queryList();
|
});
|
|
// 查询用户列表
|
function queryList() {
|
let obj = null;
|
faceInfo(obj, "GET").then(result => {
|
console.log(result)
|
let params = [];
|
if (result.code == 1) {
|
params.push(result.data);
|
}
|
console.log('params', params, '=============');
|
|
dataList.value = params;
|
}).catch(err => {
|
|
})
|
}
|
// 添加/更新
|
function handleClick(row) {
|
listObj(row);
|
faceVisible.value = true;
|
}
|
// 删除
|
function deleteData(row) {
|
listObj(row);
|
if (!row.face) {
|
$message.success('用户未上传人脸!');
|
return false;
|
}
|
let obj = {
|
uId: updateFace.uid,
|
uName: updateFace.uname,
|
faceId: updateFace.id
|
}
|
$confirm('删除人脸?', { icon: 3 }, index => {
|
faceMagerDelete(obj).then(res => {
|
let result = res.data;
|
if (result.code == 1) {
|
$message.success('删除人脸成功!');
|
queryList();
|
} else {
|
$message.error('删除人脸失败！');
|
}
|
}).catch(err => {
|
$message.error('删除人脸失败！');
|
})
|
// 关闭弹出框
|
$layer.close(index);
|
})
|
}
|
// 处理参数
|
function listObj(row) {
|
updateFace.uid = row.uid;
|
updateFace.uname = row.uname;
|
updateFace.id = row.face ? row.face.id : null;
|
}
|
// 上传图片前
|
function uploadImg(file) {
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
if (!isJPG) {
|
$message.error('上传头像图片只能是 JPG或PNG 格式!');
|
return false;
|
}
|
if (!isLt2M) {
|
$message.error('上传头像图片大小不能超过 2MB!');
|
return false;
|
}
|
// 图片转base64
|
getBase64(file).then(res => {
|
imageUrl.value = res;
|
// //上传图片
|
let uname = updateFace.uname;
|
let jsontemp = {
|
fileData: res,
|
uName: uname
|
}
|
// let imgData ='"' + res + '"';
|
if (!updateFace.id) {//新增
|
jsontemp.uId = updateFace.uid.toString();
|
faceMagerAdd(jsontemp, "POST").then(res => {
|
let result = res.data;
|
if (result.code == 1) {
|
//隐藏弹窗
|
updateFace.show = false;
|
if (result.data === false) {
|
$message.error(result.msg);
|
} else {
|
// let text = updateFace.faceId ==0?'新增人脸成功！':'更新人脸成功！';
|
$message.success("新增人脸成功！");
|
queryList();
|
}
|
} else {
|
$message.error('上传失败，请重新上传！');
|
}
|
}).catch(err => {
|
$message.error('上传失败，请重新上传！');
|
})
|
} else {
|
jsontemp.fileData = '"' + jsontemp.fileData + '"';
|
faceMagerChange(jsontemp).then(res => {
|
let result = res.data;
|
if (result.code == 1) {
|
//隐藏弹窗
|
updateFace.show = false;
|
// let text = updateFace.faceId ==0?'新增人脸成功！':'更新人脸成功！';
|
if (result.data === false) {
|
$message.error(result.msg);
|
} else {
|
$message.success("更新人脸成功！");
|
queryList();
|
}
|
} else {
|
$message.error('上传失败，请重新上传！');
|
}
|
}).catch(err => {
|
$message.error('上传失败，请重新上传！');
|
})
|
}
|
|
})
|
return false;
|
}
|
// 图片转base64
|
function 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>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
</div>
|
<div class="page-content">
|
<yc-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table class="yc-table" stripe height="100%" size="small" :data="dataList" style="width: 100%">
|
<el-table-column type="index" fixed="left" 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 #default="scope">
|
<span v-if="!scope.row.face">未上传人脸</span>
|
<span v-else>已上传人脸</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="250" align="center">
|
<template #default="scope">
|
<el-button @click="handleClick(scope.row)" type="primary" size="small">{{
|
!scope.row.face?'添加人脸':'更新人脸' }}</el-button>
|
<el-button type="danger" size="small" @click="deleteData(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</yc-card>
|
</div>
|
<div class="page-footer"></div>
|
<!-- 人脸上传 -->
|
<el-dialog title="人脸上传" v-model="faceVisible" top="0" :close-on-click-modal="false" class="dialog-center"
|
width="700px" center>
|
<el-upload :before-upload="uploadImg" class="upload-demo" action="#" drag multiple>
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<template #tip>
|
<div class="el-upload__tip">{{ updateFace.msg }}
|
</div>
|
</template>
|
</el-upload>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
|
.page-content-table {
|
border-top: 1px solid var(--border-light-color);
|
box-sizing: border-box;
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
|
.filter-label {
|
display: inline-block;
|
}
|
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
|
.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>
|
