feat:人脸管理

src/api/admin/userFace.ts

@@ -0,0 +1,49 @@
+import request from "/@/utils/request"
+
+export function pageJoin(query?: Object) {
+  return request({
+    url: '/admin/user-face/page-join',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchList(query?: Object) {
+  return request({
+    url: '/admin/user-face/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj?: Object) {
+  return request({
+    url: '/admin/user-face',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id?: string) {
+  return request({
+    url: '/admin/user-face/' + id,
+    method: 'get'
+  })
+}
+
+export function delObjs(ids?: Object) {
+  return request({
+    url: '/admin/user-face',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function putObj(obj?: Object) {
+  return request({
+    url: '/admin/user-face',
+    method: 'put',
+    data: obj
+  })
+}
+

src/i18n/pages/form/zh-cn.ts

@@ -1,6 +1,7 @@
 // 定义通用内容
 export default {
 	common: {
+		confirmTitle: '警告',
 		queryBtn: '查询',
 		addBtn: '新 增',
 		editBtn: '修 改',

src/views/admin/system/user/face-manage.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="system-user-dialog-container">
+        <el-dialog :close-on-click-modal="false" title="人脸管理" draggable v-model="dialogVisible">
+            <el-button icon="folder-add" type="primary" @click="addFace">
+                新增
+            </el-button>
+            <div class="h-4" />
+            <el-table v-loading="state.loading" :data="state.dataList" row-key="userId" border
+                :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
+                <el-table-column prop="username" align="center" label="用户名" />
+                <el-table-column prop="date" align="center" label="人脸">
+                    <template #default="{ row }">
+                        <preview-image :src="row.faceImg" />
+                    </template>
+                </el-table-column>
+                <el-table-column prop="address" align="center" label="操作">
+                    <template #default="{ row }">
+                        <el-button link type="primary" @click="editFace(row)">
+                            <Icon icon="ep:edit" />修改
+                        </el-button>
+                        <el-button link type="danger" @click="delFace(row)">
+                            删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <template #footer>
+                <el-button @click="submitForm" type="primary">确 定</el-button>
+                <el-button @click="dialogVisible = false">取 消</el-button>
+            </template>
+        </el-dialog>
+        <el-dialog v-model="uploadDialogVisible" :close-on-click-modal="false" :title="faceUploadTitle" width="30%"
+            @close="uploadDialogClone">
+            <el-form v-loading="formLoading" ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+                <el-form-item label="人脸" prop="uploadFace">
+                    <upload-img v-model:image-url="formData.uploadFace" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="submitFace" type="primary" :disabled="formLoading">确 定</el-button>
+                <el-button @click="uploadDialogVisible = false">取 消</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup name="face-manage">
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import * as userFaceApi from "/@/api/admin/userFace"
+import { useMessage } from '/@/hooks/message';
+
+// 定义刷新表格emit
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const formRef = ref()
+
+const dialogVisible = ref(false)
+const uploadDialogVisible = ref(false)
+
+const faceUploadTitle = ref<"上传人脸" | "修改人脸">("上传人脸")
+
+const formLoading = ref(false)
+const faceTableLoading = ref(false)
+
+const formData = ref<any>({
+    id: undefined,
+    uploadFace: undefined,
+})
+const detailId = ref<any>(null)
+
+// 定义表格查询、后台调用的API
+const state: BasicTableProps = reactive<BasicTableProps>({
+    queryForm: {
+        deptId: '',
+        username: '',
+        phone: '',
+    },
+    pageList: userFaceApi.pageJoin,
+});
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
+
+const formRules = reactive({
+    uploadFace: [{ required: true, message: '请上传人脸', trigger: 'blur' }],
+})
+
+const submitForm = async () => {
+    dialogVisible.value = false
+    emit('refresh')
+}
+
+const addFace = (row: any) => {
+    faceUploadTitle.value = "上传人脸"
+    formData.value.uploadFace = ""
+    uploadDialogVisible.value = true
+}
+
+const editFace = (row: any) => {
+    faceUploadTitle.value = "修改人脸"
+    formData.value.id = row.id
+    formData.value.uploadFace = row.faceImg
+    uploadDialogVisible.value = true
+}
+
+const delFace = async (row: any) => {
+    try {
+        await useMessage().delConfirm('是否删除人脸?')
+        userFaceApi.delObjs(row.id)
+        useMessage().success("删除成功")
+        getDataList()
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+const openDialog = async (id: number) => {
+    if (!id) return;
+    dialogVisible.value = true
+    resetForm()
+    detailId.value = id
+    getDataList()
+}
+
+const submitFace = async () => {
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    formLoading.value = true
+    const pa: any = {
+        userId: detailId.value,
+        faceImg: formData.value.uploadFace,
+    }
+    if (faceUploadTitle.value == "修改人脸") {
+        pa.id = formData.value.id
+    }
+    try {
+        const fc = faceUploadTitle.value == "上传人脸" ? userFaceApi.addObj : userFaceApi.putObj
+        await fc(pa)
+        useMessage().success("操作成功")
+        uploadDialogClone()
+        getDataList()
+    } catch (error) {
+        console.log(error);
+    } finally {
+        formLoading.value = false
+    }
+}
+
+const uploadDialogClone = () => {
+    uploadDialogVisible.value = false
+    resetForm()
+}
+
+const resetForm = () => {
+    formData.value = {
+        id: undefined,
+        uploadFace: undefined,
+    }
+    formRef.value?.resetFields()
+}
+
+defineExpose({ openDialog }) 
+</script>

src/views/admin/system/user/form.vue

@@ -1,16 +1,19 @@
 <template>
 	<div class="system-user-dialog-container">
-		<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" draggable v-model="visible">
+		<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
+			draggable v-model="visible">
 			<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
 				<el-row :gutter="20">
 					<el-col :span="12" class="mb20">
 						<el-form-item :label="$t('sysuser.username')" prop="username">
-							<el-input :disabled="dataForm.userId !== ''" placeholder="请输入用户名" v-model="dataForm.username"></el-input>
+							<el-input :disabled="dataForm.userId !== ''" placeholder="请输入用户名"
+								v-model="dataForm.username"></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :span="12" class="mb20">
 						<el-form-item :label="$t('sysuser.password')" prop="password">
-							<el-input clearable placeholder="请输入密码" type="password" v-model="dataForm.password"></el-input>
+							<el-input clearable placeholder="请输入密码" type="password"
+								v-model="dataForm.password"></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :span="12" class="mb20">
@@ -26,28 +29,24 @@
 					<el-col :span="12" class="mb20">
 						<el-form-item :label="$t('sysuser.role')" prop="role">
 							<el-select clearable multiple placeholder="请选择角色" v-model="dataForm.role">
-								<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId" v-for="item in roleData" />
+								<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId"
+									v-for="item in roleData" />
 							</el-select>
 						</el-form-item>
 					</el-col>
 					<el-col :span="12" class="mb20">
 						<el-form-item :label="$t('sysuser.post')" prop="post">
 							<el-select clearable multiple placeholder="请选择岗位" v-model="dataForm.post">
-								<el-option :key="item.postId" :label="item.postName" :value="item.postId" v-for="item in postData" />
+								<el-option :key="item.postId" :label="item.postName" :value="item.postId"
+									v-for="item in postData" />
 							</el-select>
 						</el-form-item>
 					</el-col>
 					<el-col :span="12" class="mb20">
 						<el-form-item :label="$t('sysuser.dept')" prop="deptId">
-							<el-tree-select
+							<el-tree-select :data="deptData"
-								:data="deptData"
+								:props="{ value: 'id', label: 'name', children: 'children' }" check-strictly
-								:props="{ value: 'id', label: 'name', children: 'children' }"
+								class="w100" clearable placeholder="请选择所属部门" v-model="dataForm.deptId">
-								check-strictly
-								class="w100"
-								clearable
-								placeholder="请选择所属部门"
-								v-model="dataForm.deptId"
-							>
 							</el-tree-select>
 						</el-form-item>
 					</el-col>
@@ -65,7 +64,8 @@
 					<el-col :span="12" class="mb20">
 						<el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag">
 							<el-radio-group v-model="dataForm.lockFlag">
-								<el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag">{{ item.label }} </el-radio>
+								<el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag">{{
+									item.label }} </el-radio>
 							</el-radio-group>
 						</el-form-item>
 					</el-col>
@@ -74,7 +74,8 @@
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
-					<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
+					<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText')
+						}}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -107,10 +108,10 @@ const postData = ref<any[]>([]);
 const loading = ref(false);
 
 const props = defineProps({
-  deptId: {
+	deptId: {
-    type: String,
+		type: String,
-    default: '',
+		default: '',
-  }
+	}
 });
 
 const dataForm = reactive({
@@ -155,7 +156,7 @@ const dataRules = ref({
 	],
 	// 姓名校验，不能为空、只能是中文
 	name: [
-    { validator: rule.overLength, trigger: 'blur' },
+		{ validator: rule.overLength, trigger: 'blur' },
 		{ required: true, message: '姓名不能为空', trigger: 'blur' },
 		{ validator: rule.chinese, trigger: 'blur' },
 	],
@@ -173,7 +174,7 @@ const dataRules = ref({
 			trigger: 'blur',
 		},
 	],
-	email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },{ validator: rule.overLength, trigger: 'blur' }],
+	email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }, { validator: rule.overLength, trigger: 'blur' }],
 	lockFlag: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
 });
 
@@ -202,7 +203,7 @@ const openDialog = async (id: string) => {
 
 // 提交
 const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => {});
+	const valid = await dataFormRef.value.validate().catch(() => { });
 	if (!valid) return false;
 
 	try {
@@ -263,9 +264,9 @@ const getDeptData = () => {
 	deptTree().then((res) => {
 		deptData.value = res.data;
 		// 默认选择在树中选中的部门
-    if (!dataForm.userId) {
+		if (!dataForm.userId) {
-      dataForm.deptId = props.deptId;
+			dataForm.deptId = props.deptId;
-    }
+		}
 	});
 };
 
@@ -274,9 +275,9 @@ const getPostData = () => {
 	postList().then((res) => {
 		postData.value = res.data;
 		// 默认选择第一个
-    if (!dataForm.userId) {
+		if (!dataForm.userId) {
-      dataForm.post = [res.data[0].postId];
+			dataForm.post = [res.data[0].postId];
-    }
+		}
 	});
 };
 // 角色数据
@@ -284,9 +285,9 @@ const getRoleData = () => {
 	roleList().then((res) => {
 		roleData.value = res.data;
 		// 默认选择第一个
-    if (!dataForm.userId) {
+		if (!dataForm.userId) {
-      dataForm.role = [res.data[0].roleId];
+			dataForm.role = [res.data[0].roleId];
-    }
+		}
 	});
 };
 

src/views/admin/system/user/index.vue

@@ -89,7 +89,7 @@
 									active-value="0" inactive-value="9"></el-switch>
 							</template>
 						</el-table-column>
-						<el-table-column :label="$t('common.action')" width="200" fixed="right">
+						<el-table-column :label="$t('common.action')" width="300" fixed="right">
 							<template #default="scope">
 								<div style="display: flex">
 									<!-- 重置密码 -->
@@ -106,6 +106,11 @@
 										@click="userDialogRef.openDialog(scope.row.userId)">
 										{{ $t('common.editBtn') }}
 									</el-button>
+									<!-- 人脸管理 -->
+									<el-button icon="User" text type="primary"
+										@click="faceManageRef.openDialog(scope.row.userId)">
+										人脸管理
+									</el-button>
 									<!-- 删除用户 -->
 									<el-tooltip :content="$t('sysuser.deleteDisabledTip')"
 										:disabled="scope.row.userId !== '1'" placement="top">
@@ -129,6 +134,8 @@
 
 		<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
 
+		<face-manage ref="faceManageRef" @refresh="getDataList(false)" />
+
 		<upload-excel ref="excelUploadRef" :title="$t('sysuser.importUserTip')"
 			temp-url="/admin/sys-file/local/file/user.xlsx" url="/admin/user/import" @refreshDataList="getDataList" />
 	</div>
@@ -143,6 +150,7 @@ import { useI18n } from 'vue-i18n';
 
 // 动态引入组件
 const UserForm = defineAsyncComponent(() => import('./form.vue'));
+const FaceManage = defineAsyncComponent(() => import('./face-manage.vue'));
 const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'));
 const PopoverInput = defineAsyncComponent(() => import('/@/components/PopoverInput/index.vue'));
 
@@ -150,6 +158,7 @@ const { t } = useI18n();
 
 // 定义变量内容
 const userDialogRef = ref();
+const faceManageRef = ref();
 const excelUploadRef = ref();
 const queryRef = ref();
 const showSearch = ref(true);