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 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>