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

<template>
	<div class="system-user-dialog-container">
		<el-dialog :close-on-click-modal="false" title="人脸管理" draggable v-model="dialogVisible">
			<el-button v-auth="'userFace_sysUserFace_add'" 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
					v-auths="['userFace_sysUserFace_edit', 'userFace_sysUserFace_del']"
					prop="address"
					align="center"
					label="操作"
				>
					<template #default="{ row }">
						<el-button v-auth="'userFace_sysUserFace_edit'" link type="primary" @click="editFace(row)">
							修改
						</el-button>
						<el-button v-auth="'userFace_sysUserFace_del'" 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"
import { auth } from "/@/utils/authFunction"

// 定义刷新表格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)

onMounted(() => {
	if (auth("userFace_sysUserFace_view")) {
		getDataList()
	}
})

// 定义表格查询、后台调用的API
const state: BasicTableProps = reactive<BasicTableProps>({
	createdIsNeed: false,
	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
	state.queryForm.userId = 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>