@@ -0,0 +1,28 @@ | |||||
/** | |||||
* @description 学生归寝 | |||||
* @license Apache License Version 2.0 | |||||
* @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛 | |||||
* @remarks | |||||
* SimpleAdmin 基于 Apache License Version 2.0 协议发布,可用于商业项目,但必须遵守以下补充条款: | |||||
* 1.请不要删除和修改根目录下的LICENSE文件。 | |||||
* 2.请不要删除和修改SimpleAdmin源码头部的版权声明。 | |||||
* 3.分发源码时候,请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin | |||||
* 4.基于本软件的作品,只能使用 SimpleAdmin 作为后台服务,除外情况不可商用且不允许二次分发或开源。 | |||||
* 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为,不能以任何形式用于非法为目的的行为不要删除和修改作者声明。 | |||||
* 6.任何基于本软件而产生的一切法律纠纷和责任,均于我司无关 | |||||
*/ | |||||
import { ReqPage } from "@/api"; | |||||
/** | |||||
* @Description: 教师点名 | |||||
* @Author: yxq | |||||
* @Date: 2023-12-17 15:34:54 | |||||
*/ | |||||
export namespace AttendanceBehaviorTrace { | |||||
export interface Page extends ReqPage {} | |||||
/** 表单 */ | |||||
export interface behaviorTraceInfo { | |||||
} | |||||
} |
@@ -14,3 +14,4 @@ | |||||
*/ | */ | ||||
export * from "./passenger"; | export * from "./passenger"; | ||||
export * from "./studentsReturn"; | export * from "./studentsReturn"; | ||||
export * from "./behaviorTrace"; |
@@ -24,8 +24,5 @@ export namespace AttendanceStudentsReturn { | |||||
/** 表单 */ | /** 表单 */ | ||||
export interface studentsReturnInfo { | export interface studentsReturnInfo { | ||||
fenpianleixing:String, | |||||
shijianduan:any, | |||||
shexiangtou:any, | |||||
} | } | ||||
} | } |
@@ -24,19 +24,23 @@ const http = moduleRequest("/business/dfieldApi/"); | |||||
const attendanceBehaviorTrace = { | const attendanceBehaviorTrace = { | ||||
/** 查询底库列表 */ | /** 查询底库列表 */ | ||||
page(params: SysUserPersonnel.ClassPage) { | page(params: SysUserPersonnel.ClassPage) { | ||||
return http.get("page", params); | |||||
return http.get("test", params); | |||||
}, | }, | ||||
/** 删除底库 */ | /** 删除底库 */ | ||||
delete(params: ReqId) { | delete(params: ReqId) { | ||||
return http.delete("deleteDfieldD", params); | |||||
return http.delete("test", params); | |||||
}, | }, | ||||
/** 创建底库 */ | /** 创建底库 */ | ||||
add(params: SysUserPersonnel.ClassPage) { | add(params: SysUserPersonnel.ClassPage) { | ||||
return http.post("createDfieldA", params); | |||||
return http.post("test", params); | |||||
}, | }, | ||||
/** 更新底库 */ | /** 更新底库 */ | ||||
update(params: SysUserPersonnel.ClassPage) { | update(params: SysUserPersonnel.ClassPage) { | ||||
return http.put("updateDfieldU", params); | |||||
return http.put("test", params); | |||||
}, | |||||
/** 轨迹详情 */ | |||||
detail(params: SysUserPersonnel.ClassPage) { | |||||
return http.get("test", params); | |||||
} | } | ||||
}; | }; | ||||
@@ -1,5 +1,5 @@ | |||||
/** | /** | ||||
* @description 单页管理接口 | |||||
* @description 学生归寝 | |||||
* @license Apache License Version 2.0 | * @license Apache License Version 2.0 | ||||
* @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛 | * @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛 | ||||
* @remarks | * @remarks | ||||
@@ -1,191 +0,0 @@ | |||||
<!-- | |||||
* @Description: 人员表单 | |||||
* @Author: syy | |||||
* @Date: 2023-12-15 15:45:50 | |||||
--> | |||||
<template> | |||||
<div class="userManageForm"> | |||||
<div> | |||||
<el-row :gutter="16"> | |||||
<el-col :span="12"> | |||||
<s-form-item label="人员姓名" prop="name"> | |||||
<s-input v-model="userInfo.name"></s-input> | |||||
</s-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<s-form-item label="所属班级" prop="personSetId"> | |||||
<s-select v-model="userInfo.personSetId" :options="treeData" label="personSetName" value="personSetId"></s-select> | |||||
</s-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row :gutter="16"> | |||||
<el-col :span="24"> | |||||
<s-form-item label="上传人脸" prop="faces"> | |||||
<el-upload | |||||
v-model:file-list="fileList" | |||||
action="/api/business/personApi/uploadFile" | |||||
list-type="picture-card" | |||||
:on-success="handleAvatarSuccess" | |||||
:on-error="handleAvatarError" | |||||
:on-preview="handlePictureCardPreview" | |||||
:on-remove="handleRemove" | |||||
accept=".jpg, .jpeg, .png" | |||||
:headers="{ | |||||
Authorization: `${TokenEnum.TOKEN_PREFIX} ${accessToken}` | |||||
}" | |||||
> | |||||
<el-icon><Plus /></el-icon> | |||||
</el-upload> | |||||
<el-dialog v-model="dialogVisible" title="查看图片"> | |||||
<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /> | |||||
</el-dialog> | |||||
</s-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row :gutter="16"> | |||||
<el-col :span="12"> | |||||
<s-form-item label="性别" prop="gender"> | |||||
<s-radio-group v-model="userInfo.gender" :options="genderOptions" /> | |||||
</s-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<s-form-item label="年龄" prop="age"> | |||||
<s-input v-model="userInfo.age"></s-input> | |||||
</s-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row :gutter="16"> | |||||
<el-col :span="12"> | |||||
<s-form-item label="手机号" prop="phone"> | |||||
<s-input v-model="userInfo.phone"></s-input> | |||||
</s-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<s-form-item label="扩展字段" prop="extData"> | |||||
<s-input v-model="userInfo.extData"></s-input> | |||||
</s-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script setup lang="ts"> | |||||
import { SysUserPersonnel, userManagePersonnelApi, userManageClassManageApi } from "@/api"; | |||||
import { Plus } from "@element-plus/icons-vue"; | |||||
import { useUserStore } from "@/stores/modules"; | |||||
import type { UploadProps } from "element-plus"; | |||||
import { ElMessage } from "element-plus"; | |||||
import { TokenEnum } from "@/enums"; | |||||
// props | |||||
interface FormProps { | |||||
modelValue: Partial<SysUserPersonnel.SysUserPerInfo>; | |||||
} | |||||
const emit = defineEmits(["update:modelValue"]); //定义emit | |||||
const props = defineProps<FormProps>(); //定义props | |||||
// 人员信息 | |||||
const userInfo = computed({ | |||||
get: () => props.modelValue, | |||||
set: val => emit("update:modelValue", val) | |||||
}); | |||||
/* */ | |||||
const userStore = useUserStore(); | |||||
const { accessToken } = userStore; | |||||
const fileList = ref<any>([]); | |||||
const faces = ref<SysUserPersonnel.SysUserAvatar[]>([]); | |||||
const dialogImageUrl = ref(""); | |||||
const dialogVisible = ref(false); | |||||
const treeData = ref<any>([]); | |||||
const handleRemove: UploadProps["onRemove"] = (uploadFile: any) => { | |||||
const index = faces.value.findIndex(item => item.uid === uploadFile.uid); | |||||
if (index > -1) { | |||||
faces.value.splice(index, 1); | |||||
} | |||||
userInfo.value.faces = faces.value; | |||||
if (uploadFile.personId) { | |||||
userManagePersonnelApi.deleteFace({ personId: uploadFile.personId, faceIds: [uploadFile.uid] }).then(res => {}); | |||||
} | |||||
}; | |||||
const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => { | |||||
dialogImageUrl.value = uploadFile.url!; | |||||
dialogVisible.value = true; | |||||
}; | |||||
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => { | |||||
if (response.code === 200) { | |||||
faces.value.push({ faceUrl: response.data, uid: uploadFile.uid }); | |||||
userInfo.value.faces = faces.value; | |||||
ElMessage.success(response.msg); | |||||
} else { | |||||
ElMessage.error(response.msg); | |||||
fileList.value = fileList.value.splice(0, fileList.value.length - 1); | |||||
} | |||||
}; | |||||
const handleAvatarError: UploadProps["onError"] = (error, uploadFile, uploadFiles) => { | |||||
console.log(error, uploadFile, uploadFiles, "err"); | |||||
}; | |||||
// 通用状态选项 | |||||
const genderOptions = ref([ | |||||
{ | |||||
label: "未知", | |||||
value: "GENDER_UNKNOWN" | |||||
}, | |||||
{ | |||||
label: "男", | |||||
value: "GENDER_MALE" | |||||
}, | |||||
{ | |||||
label: "女", | |||||
value: "GENDER_FEMALE" | |||||
} | |||||
]); | |||||
const getRequestData = async () => { | |||||
const { data } = await userManageClassManageApi.page(); | |||||
treeData.value = data; | |||||
}; | |||||
onMounted(() => { | |||||
// 初始化 | |||||
userInfo.value.gender = userInfo.value.gender ? userInfo.value.gender : genderOptions.value[0].value; | |||||
getRequestData(); | |||||
if (userInfo.value.personId) { | |||||
if (userInfo.value.faces?.length > 0) { | |||||
fileList.value = [ | |||||
...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => { | |||||
return { | |||||
url: item.faceUrl, | |||||
uid: item.faceId, | |||||
personId: userInfo.value.personId | |||||
}; | |||||
}) | |||||
]; | |||||
faces.value = [ | |||||
...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => { | |||||
return { | |||||
faceUrl: item.faceUrl, | |||||
uid: item.faceId, | |||||
personId: userInfo.value.personId | |||||
}; | |||||
}) | |||||
]; | |||||
} | |||||
} | |||||
}); | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
:deep(.el-input__wrapper) { | |||||
width: 100% !important; | |||||
} | |||||
:deep(.el-date-editor.el-input) { | |||||
width: 92% !important; | |||||
} | |||||
:deep(.el-upload-list--picture-card .el-upload-list__item) { | |||||
width: 100px !important; | |||||
height: 100px !important; | |||||
} | |||||
:deep(.el-upload--picture-card) { | |||||
width: 100px !important; | |||||
height: 100px !important; | |||||
} | |||||
</style> |
@@ -1,120 +0,0 @@ | |||||
<!-- | |||||
* @Description: 表单 | |||||
* @Author: syy | |||||
* @Date: 2023-12-15 15:45:59 | |||||
--> | |||||
<template> | |||||
<div> | |||||
<form-container v-model="visible" :title="`${sysUserProps.opt}人员`" form-size="800px" @close="onClose"> | |||||
<el-form | |||||
ref="sysUserFormRef" | |||||
:rules="rules" | |||||
:disabled="sysUserProps.disabled" | |||||
:model="sysUserProps.record" | |||||
:hide-required-asterisk="sysUserProps.disabled" | |||||
label-width="auto" | |||||
label-suffix=" :" | |||||
> | |||||
<el-tabs v-model="activeName"> | |||||
<Basic v-model="sysUserProps.record"></Basic> | |||||
</el-tabs> | |||||
</el-form> | |||||
<template #footer> | |||||
<el-button @click="onClose"> 取消 </el-button> | |||||
<el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||||
</template> | |||||
</form-container> | |||||
</div> | |||||
</template> | |||||
<script setup lang="ts" name="SysUserPersonnelForm"> | |||||
import { SysUserPersonnel, userManagePersonnelApi } from "@/api"; | |||||
import { FormOptEnum, SysDictEnum } from "@/enums"; | |||||
import { required } from "@/utils/formRules"; | |||||
import { FormInstance } from "element-plus"; | |||||
import { useDictStore } from "@/stores/modules"; | |||||
import Basic from "./form_basic.vue"; | |||||
const visible = ref(false); //是否显示表单 | |||||
const activeName = ref("basic"); | |||||
// 表单参数 | |||||
const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.SysUserPerInfo>>({ | |||||
opt: FormOptEnum.ADD, | |||||
record: {}, | |||||
disabled: false | |||||
}); | |||||
// 表单验证规则 | |||||
const rules = reactive({ | |||||
// personId: [required("请输入人员ID")], | |||||
name: [required("请输入姓名")], | |||||
gender: [required("请选择性别")], | |||||
faces: [required("请上传人脸图片")], | |||||
phone: [required("请输入手机号")] | |||||
// extData: [required("请输入扩展数据")] | |||||
}); | |||||
/** | |||||
* 打开表单 | |||||
* @param props 表单参数 | |||||
*/ | |||||
function onOpen(props: FormProps.Base<SysUserPersonnel.SysUserPerInfo>) { | |||||
Object.assign(sysUserProps, props); //合并参数 | |||||
if (props.opt == FormOptEnum.ADD) { | |||||
//如果是新增,设置默认值 | |||||
// sysUserProps.record.sortCode = 99; | |||||
} | |||||
visible.value = true; //显示表单 | |||||
if (props.record.personId) { | |||||
//如果传了id,就去请求api获取record | |||||
userManagePersonnelApi.detail({ id: props.record.personId }).then(res => { | |||||
sysUserProps.record = res.data; | |||||
}); | |||||
} | |||||
} | |||||
// 提交数据(新增/编辑) | |||||
const sysUserFormRef = ref<FormInstance>(); | |||||
/** 提交表单 */ | |||||
async function handleSubmit() { | |||||
sysUserFormRef.value?.validate(async valid => { | |||||
if (!valid) return; //表单验证失败 | |||||
//提交表单 | |||||
if (sysUserProps.record.faces.length === 0) { | |||||
return ElMessage.error("请上传人脸图片"); | |||||
} | |||||
if (sysUserProps.record.personId) { | |||||
await userManagePersonnelApi | |||||
.update(sysUserProps.record) | |||||
.then(() => { | |||||
sysUserProps.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} else { | |||||
await userManagePersonnelApi | |||||
.add(sysUserProps.record) | |||||
.then(() => { | |||||
sysUserProps.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
/** 关闭表单*/ | |||||
function onClose() { | |||||
visible.value = false; | |||||
activeName.value = "basic"; | |||||
} | |||||
// 暴露给父组件的方法 | |||||
defineExpose({ | |||||
onOpen | |||||
}); | |||||
</script> | |||||
<style lang="scss" scoped></style> |
@@ -1,107 +0,0 @@ | |||||
<!-- | |||||
* @Description: 表单 | |||||
* @Author: syy | |||||
* @Date: 2023-12-15 15:45:59 | |||||
--> | |||||
<template> | |||||
<div> | |||||
<form-container v-model="visibleClass" :title="`${sysUserProps.opt}班级`" form-size="400px" @close="onClose"> | |||||
<el-form | |||||
ref="sysUserFormRef" | |||||
:rules="rules" | |||||
:disabled="sysUserProps.disabled" | |||||
:model="sysUserProps.record" | |||||
:hide-required-asterisk="sysUserProps.disabled" | |||||
label-width="auto" | |||||
label-suffix=" :" | |||||
> | |||||
<div> | |||||
<el-row :gutter="16"> | |||||
<el-col :span="22"> | |||||
<s-form-item label="班级名称" prop="personSetName"> | |||||
<s-input v-model="sysUserProps.record.personSetName"></s-input> | |||||
</s-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</el-form> | |||||
<template #footer> | |||||
<el-button @click="onClose"> 取消 </el-button> | |||||
<el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||||
</template> | |||||
</form-container> | |||||
</div> | |||||
</template> | |||||
<script setup lang="ts" name="SysUserPerformClass"> | |||||
import { ref } from "vue"; | |||||
import { SysUserPersonnel, userManageClassManageApi } from "@/api"; | |||||
import { FormOptEnum } from "@/enums"; | |||||
import { required } from "@/utils/formRules"; | |||||
import { FormInstance } from "element-plus"; | |||||
const visibleClass = ref(false); //是否显示表单 | |||||
// 表单参数 | |||||
const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.ClassPage>>({ | |||||
opt: FormOptEnum.ADD, | |||||
record: {}, | |||||
disabled: false | |||||
}); | |||||
// 表单验证规则 | |||||
const rules = reactive({ | |||||
personSetName: [required("请输入班级名称")] | |||||
}); | |||||
/** | |||||
* 打开表单 | |||||
* @param props 表单参数 | |||||
*/ | |||||
function onOpen(props: FormProps.Base<SysUserPersonnel.ClassPage>) { | |||||
Object.assign(sysUserProps, props); //合并参数 | |||||
visibleClass.value = true; //显示表单 | |||||
sysUserProps.record = props.record; | |||||
} | |||||
// 提交数据(新增/编辑) | |||||
const sysUserFormRef = ref<FormInstance>(); | |||||
/** 提交表单 */ | |||||
async function handleSubmit() { | |||||
sysUserFormRef.value?.validate(async valid => { | |||||
if (!valid) return; //表单验证失败 | |||||
sysUserProps.record.name = sysUserProps.record.personSetName; | |||||
//提交表单 | |||||
if (sysUserProps.record.personSetId) { | |||||
sysUserProps.record.id = sysUserProps.record.personSetId; | |||||
await userManageClassManageApi | |||||
.update(sysUserProps.record) | |||||
.then(() => { | |||||
sysUserProps.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} else { | |||||
await userManageClassManageApi | |||||
.add(sysUserProps.record) | |||||
.then(() => { | |||||
sysUserProps.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
/** 关闭表单*/ | |||||
function onClose() { | |||||
visibleClass.value = false; | |||||
} | |||||
// 暴露给父组件的方法 | |||||
defineExpose({ | |||||
onOpen | |||||
}); | |||||
</script> | |||||
<style lang="scss" scoped></style> |
@@ -1,116 +0,0 @@ | |||||
<!-- | |||||
* @Description: 表单 | |||||
* @Author: syy | |||||
* @Date: 2023-12-15 15:45:59 | |||||
--> | |||||
<template> | |||||
<div> | |||||
<form-container v-model="visibleClass" :title="`${sysUserProps.opt}`" form-size="400px" @close="onClose"> | |||||
<el-form | |||||
ref="sysUserFormRef" | |||||
:rules="rules" | |||||
:disabled="sysUserProps.disabled" | |||||
:model="sysUserProps.record" | |||||
:hide-required-asterisk="sysUserProps.disabled" | |||||
label-width="auto" | |||||
label-suffix=" :" | |||||
> | |||||
<div> | |||||
<el-row :gutter="16"> | |||||
<el-col :span="22"> | |||||
<s-form-item label="班主任" prop="userId"> | |||||
<s-select v-model="sysUserProps.record.userId" :options="teacherData" label="name" value="userId"></s-select> | |||||
</s-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</el-form> | |||||
<template #footer> | |||||
<el-button @click="onClose"> 取消 </el-button> | |||||
<el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||||
</template> | |||||
</form-container> | |||||
</div> | |||||
</template> | |||||
<script setup lang="ts" name="SysUserPerformClass"> | |||||
import { ref } from "vue"; | |||||
import { SysUserPersonnel, userManageTeacherApi } from "@/api"; | |||||
import { required } from "@/utils/formRules"; | |||||
import { FormInstance } from "element-plus"; | |||||
const teacherData = ref<any>([]); | |||||
const visibleClass = ref(false); //是否显示表单 | |||||
// 表单参数 | |||||
enum FormOptEnum { | |||||
/** 新增 */ | |||||
AddTeacher = "绑定班主任", | |||||
/** 编辑 */ | |||||
UpdateTeacher = "修改班主任" | |||||
} | |||||
const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.ClassPage>>({ | |||||
opt: FormOptEnum.AddTeacher, | |||||
record: {}, | |||||
disabled: false | |||||
}); | |||||
// 表单验证规则 | |||||
const rules = reactive({ | |||||
userId: [required("请选择班主任名称")] | |||||
}); | |||||
/** | |||||
* 打开表单 | |||||
* @param props 表单参数 | |||||
*/ | |||||
function onOpen(props: FormProps.Base<SysUserPersonnel.ClassPage>) { | |||||
getRequestData(); | |||||
Object.assign(sysUserProps, props); //合并参数 | |||||
visibleClass.value = true; //显示表单 | |||||
sysUserProps.record = props.record; | |||||
} | |||||
const getRequestData = async () => { | |||||
const { data } = await userManageTeacherApi.page(); | |||||
teacherData.value = data; | |||||
}; | |||||
// 提交数据(新增/编辑) | |||||
const sysUserFormRef = ref<FormInstance>(); | |||||
/** 提交表单 */ | |||||
async function handleSubmit() { | |||||
sysUserFormRef.value?.validate(async valid => { | |||||
if (!valid) return; //表单验证失败 | |||||
console.log(sysUserProps); | |||||
//提交表单 | |||||
if (sysUserProps.opt === FormOptEnum.UpdateTeacher) { | |||||
await userManageTeacherApi | |||||
.update(sysUserProps.record) | |||||
.then(() => { | |||||
sysUserProps.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} else { | |||||
await userManageTeacherApi | |||||
.add(sysUserProps.record) | |||||
.then(() => { | |||||
sysUserProps.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
/** 关闭表单*/ | |||||
function onClose() { | |||||
visibleClass.value = false; | |||||
} | |||||
// 暴露给父组件的方法 | |||||
defineExpose({ | |||||
onOpen | |||||
}); | |||||
</script> | |||||
<style lang="scss" scoped></style> |
@@ -1,23 +1,12 @@ | |||||
<!-- | <!-- | ||||
* @Description: 人脸识别失败表格 | |||||
* @Description: 行为轨迹 | |||||
* @Author: yxq | * @Author: yxq | ||||
* @Date: 2023-12-15 15:45:59 | * @Date: 2023-12-15 15:45:59 | ||||
--> | --> | ||||
<template> | <template> | ||||
<div> | <div> | ||||
<form-container v-model="visible" :title="`行为轨迹查看`" form-size="1000px" @close="onClose"> | <form-container v-model="visible" :title="`行为轨迹查看`" form-size="1000px" @close="onClose"> | ||||
<ProTable ref="proTable" title="教师点名" height="600px" :data="tableData" :columns="columns"> | |||||
<!-- 表格 header 按钮 --> | |||||
<template #tableHeader> | |||||
<!-- <s-button type="primary" icon="none" prefix="人工" suffix="确认" @click="handleSubmit" /> --> | |||||
</template> | |||||
<!-- 表格操作栏 --> | |||||
<template #operation="scope"> | |||||
<el-space> | |||||
<s-button link :opt="FormOptEnum.EDIT" prefix="人工" suffix="确认" @click="onOpen(FormOptEnum.VIEW, scope.row)" /> | |||||
</el-space> | |||||
</template> | |||||
</ProTable> | |||||
<ProTable ref="proTable" title="教师点名" height="600px" :data="tableData" :columns="columns"></ProTable> | |||||
<template #footer> | <template #footer> | ||||
<el-button @click="onClose"> 关闭 </el-button> | <el-button @click="onClose"> 关闭 </el-button> | ||||
</template> | </template> | ||||
@@ -31,15 +20,15 @@ | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script setup lang="tsx" name="attendancePassenger"> | |||||
import { AttendancePassenger, attendancePassenger } from "@/api"; | |||||
<script setup lang="tsx" name="attendanceBehaviorTrace"> | |||||
import { AttendanceBehaviorTrace, attendanceBehaviorTrace } from "@/api"; | |||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | ||||
import { FormOptEnum } from "@/enums"; | import { FormOptEnum } from "@/enums"; | ||||
const visible = ref(false); //是否显示 | const visible = ref(false); //是否显示 | ||||
// 弹框参数 | // 弹框参数 | ||||
const propsInfo = reactive<FormProps.Base<AttendancePassenger.PassengerInfo>>({ | |||||
opt: FormOptEnum.ADD, //操作类型 | |||||
const propsInfo = reactive<FormProps.Base<AttendanceBehaviorTrace.behaviorTraceInfo>>({ | |||||
opt: FormOptEnum.VIEW, //操作类型 | |||||
record: {}, //弹框数据 | record: {}, //弹框数据 | ||||
disabled: false | disabled: false | ||||
}); | }); | ||||
@@ -47,17 +36,12 @@ const propsInfo = reactive<FormProps.Base<AttendancePassenger.PassengerInfo>>({ | |||||
* 打开弹框 | * 打开弹框 | ||||
* @param props 弹框参数 | * @param props 弹框参数 | ||||
*/ | */ | ||||
function onOpen(props: FormProps.Base<AttendancePassenger.PassengerInfo>) { | |||||
function onOpen(props: FormProps.Base<AttendanceBehaviorTrace.PassengerInfo>) { | |||||
Object.assign(propsInfo, props); //合并参数 | Object.assign(propsInfo, props); //合并参数 | ||||
if (props.opt == FormOptEnum.ADD) { | |||||
//如果是新增,设置默认值 | |||||
propsInfo.record.shijianduan = []; | |||||
propsInfo.record.shexiangtou = []; | |||||
} | |||||
visible.value = true; //显示弹框 | visible.value = true; //显示弹框 | ||||
if (props.record.id) { | if (props.record.id) { | ||||
//如果传了id,就去请求api获取record | //如果传了id,就去请求api获取record | ||||
attendancePassenger.detail({ id: props.record.id }).then(res => { | |||||
attendanceBehaviorTrace.detail({ id: props.record.id }).then(res => { | |||||
propsInfo.record = res.data; | propsInfo.record = res.data; | ||||
}); | }); | ||||
} | } | ||||
@@ -135,13 +119,12 @@ const columns: ColumnProps[] = [ | |||||
<img | <img | ||||
src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ""} | src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ""} | ||||
onClick={() => viewHeadImage(scope)} | onClick={() => viewHeadImage(scope)} | ||||
style="width:50px;height:50px;" | |||||
style="width:50px;height:50px;cursor:pointer" | |||||
alt="" | alt="" | ||||
/> | /> | ||||
); | ); | ||||
} | } | ||||
} | } | ||||
// { prop: "operation", label: "操作", width: 250, fixed: "right" } | |||||
]; | ]; | ||||
// 图片预览 | // 图片预览 | ||||
const imgVisible = ref(false); | const imgVisible = ref(false); | ||||
@@ -150,47 +133,6 @@ const viewHeadImage = (scope: any) => { | |||||
faceUrl.value = scope.row.faces[0].faceUrl; | faceUrl.value = scope.row.faces[0].faceUrl; | ||||
imgVisible.value = true | imgVisible.value = true | ||||
}; | }; | ||||
// 刷新表格 | |||||
const RefreshTable = () => { | |||||
proTable.value?.refresh(); | |||||
}; | |||||
// 提交数据(新增/编辑) | |||||
const formRef = ref<FormInstance>(); | |||||
/** 提交表单 */ | |||||
async function handleSubmit() { | |||||
formRef.value?.validate(async valid => { | |||||
if (!valid) return; //表单验证失败 | |||||
// shijianduan时间段 | |||||
propsInfo.record.startTime = formatDate(propsInfo.record.shijianduan[0]); | |||||
propsInfo.record.endTime = formatDate(propsInfo.record.shijianduan[1]); | |||||
delete propsInfo.record.shijianduan; | |||||
// shexiangtou摄像头 | |||||
propsInfo.record.shexiangtou = propsInfo.record.shexiangtou.toString(); | |||||
//提交表单 | |||||
console.log(propsInfo); | |||||
if (propsInfo.record.id) { | |||||
await attendancePassenger | |||||
.update(propsInfo.record) | |||||
.then(() => { | |||||
propsInfo.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} else { | |||||
console.log(propsInfo.record); | |||||
await attendancePassenger | |||||
.add(propsInfo.record) | |||||
.then(() => { | |||||
propsInfo.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
/** 关闭表单*/ | /** 关闭表单*/ | ||||
function onClose() { | function onClose() { | ||||
visible.value = false; | visible.value = false; | ||||
@@ -1,6 +1,6 @@ | |||||
<!-- | <!-- | ||||
* @Description: 人员管理 | |||||
* @Author: syy | |||||
* @Description: 行为轨迹 | |||||
* @Author: yxq | |||||
* @Date: 2024-7-15 | * @Date: 2024-7-15 | ||||
--> | --> | ||||
<template> | <template> | ||||
@@ -15,100 +15,26 @@ | |||||
@change="changeTreeFilter" | @change="changeTreeFilter" | ||||
> | > | ||||
<template v-slot:header> | <template v-slot:header> | ||||
<!-- <s-button suffix="班级" @click="addClass(FormOptEnum.ADD)" style="margin-bottom: 15px" /> --> | |||||
<h4 style="margin: 0 0 15px; font-size: 18px; font-weight: bold; color: var(--el-color-info-dark-2); letter-spacing: 0.5px">班级</h4> | |||||
</template> | </template> | ||||
<template v-slot:label="{ row }"> | <template v-slot:label="{ row }"> | ||||
<span class="custom-tree-node"> | <span class="custom-tree-node"> | ||||
<span>{{ row.node.label }}</span> | <span>{{ row.node.label }}</span> | ||||
<span v-if="row.node.label != '全部'"> | |||||
<!-- <a @click.stop="addClass(FormOptEnum.EDIT, row.node.data)"> | |||||
<el-icon><Edit /></el-icon> | |||||
</a> --> | |||||
<!-- <a style="margin-left: 8px" @click.stop="addDelete(row.node.data.personSetId, '删除班级')"> | |||||
<el-icon><Delete /></el-icon> | |||||
</a> --> | |||||
<!-- <a style="margin-left: 8px" @click.stop> | |||||
<el-dropdown @command="handleCommandTree"> | |||||
<el-link :underline="false" :icon="More"> </el-link> | |||||
<template #dropdown> | |||||
<el-dropdown-menu> | |||||
<el-dropdown-item v-if="!row.node.data.userId" :command="commander(row.node.data, cmdEnumTree.AddTeacher)"> | |||||
{{ cmdEnumTree.AddTeacher }} | |||||
</el-dropdown-item> | |||||
<el-dropdown-item v-if="row.node.data.userId" :command="commander(row.node.data, cmdEnumTree.UpdateTeacher)"> | |||||
{{ cmdEnumTree.UpdateTeacher }} | |||||
</el-dropdown-item> | |||||
<el-dropdown-item v-if="row.node.data.userId" :command="commander(row.node.data, cmdEnumTree.DeleteTeacher)"> | |||||
{{ cmdEnumTree.DeleteTeacher }} | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</template> | |||||
</el-dropdown> | |||||
</a> --> | |||||
</span> | |||||
</span> | </span> | ||||
</template> | </template> | ||||
</TreeFilter> | </TreeFilter> | ||||
<div class="table-box"> | <div class="table-box"> | ||||
<ProTable ref="proTable" title="人员管理" :columns="columns" rowKey="personId" :request-api="userManagePersonnelApi.page"> | <ProTable ref="proTable" title="人员管理" :columns="columns" rowKey="personId" :request-api="userManagePersonnelApi.page"> | ||||
<!-- 表格 header 按钮 --> | |||||
<template #tableHeader="scope"> | |||||
<!-- <s-button v-auth="userPerButtonCode.add" suffix="人员" @click="onOpen(FormOptEnum.ADD, { personSetId: personSetId })" /> | |||||
<s-button | |||||
v-auth="userPerButtonCode.delete" | |||||
type="danger" | |||||
:opt="FormOptEnum.DELETE" | |||||
plain | |||||
suffix="人员" | |||||
:disabled="!scope.isSelected" | |||||
@click="onDelete(scope.selectedListIds, '删除所选人员')" | |||||
/> --> | |||||
</template> | |||||
<!-- 表格操作栏 --> | <!-- 表格操作栏 --> | ||||
<template #operation="scope"> | <template #operation="scope"> | ||||
<el-space> | <el-space> | ||||
<s-button link prefix="轨迹" suffix="查看" :opt="FormOptEnum.VIEW" @click="onOpenDetail(FormOptEnum.VIEW, scope.row)" /> | <s-button link prefix="轨迹" suffix="查看" :opt="FormOptEnum.VIEW" @click="onOpenDetail(FormOptEnum.VIEW, scope.row)" /> | ||||
<!-- <s-button v-auth="userPerButtonCode.edit" link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | |||||
<s-button v-auth="userPerButtonCode.delete" link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.personId], `删除人员`)" /> | |||||
<el-dropdown @command="handleCommand"> | |||||
<el-link type="primary" :underline="false" :icon="ArrowDown"> 更多 </el-link> | |||||
<template #dropdown> | |||||
<el-dropdown-menu> | |||||
<el-dropdown-item :command="command(scope.row, cmdEnum.AddFace)" | |||||
><el-upload | |||||
ref="upload" | |||||
class="upload-demo" | |||||
action="/api/business/personApi/uploadFile" | |||||
:show-file-list="false" | |||||
:on-success="handleAvatarSuccess" | |||||
accept=".jpg, .jpeg, .png" | |||||
:headers="{ | |||||
Authorization: `${TokenEnum.TOKEN_PREFIX} ${accessToken}` | |||||
}" | |||||
> | |||||
<template #trigger> | |||||
{{ cmdEnum.AddFace }} | |||||
</template> | |||||
</el-upload> | |||||
</el-dropdown-item> | |||||
<el-dropdown-item :command="command(scope.row, cmdEnum.UnderpantsUnBinding)"> | |||||
{{ cmdEnum.UnderpantsUnBinding }} | |||||
</el-dropdown-item> | |||||
</el-dropdown-menu> | |||||
</template> | |||||
</el-dropdown> --> | |||||
</el-space> | </el-space> | ||||
</template> | </template> | ||||
</ProTable> | </ProTable> | ||||
</div> | </div> | ||||
<!-- 人员新增/编辑表单 --> | |||||
<Form ref="formRef"></Form> | |||||
<!-- 班级新增/编辑表单 --> | |||||
<FormClass ref="formRefC" /> | |||||
<!-- 班主任绑定/修改 --> | |||||
<FormTeacher ref="formRefT" /> | |||||
<!-- 预览头像 --> | <!-- 预览头像 --> | ||||
<el-dialog v-model="visible" title="查看头像" width="830px" :before-close="handleClose"> | |||||
<el-dialog v-model="visible" title="查看快照" width="830px" :before-close="handleClose"> | |||||
<div style="display: flex; align-items: center; justify-content: center"> | <div style="display: flex; align-items: center; justify-content: center"> | ||||
<img class="detailpic" :src="faceUrl" alt="" /> | <img class="detailpic" :src="faceUrl" alt="" /> | ||||
</div> | </div> | ||||
@@ -118,29 +44,20 @@ | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script setup lang="tsx" name="SysUserPersonnel"> | <script setup lang="tsx" name="SysUserPersonnel"> | ||||
import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel,userManageClassManageApi,userManageTeacherApi } from "@/api"; | |||||
import { useHandleData } from "@/hooks/useHandleData"; | |||||
import { userManagePersonnelApi,SysUserPersonnel,userManageClassManageApi,userManageTeacherApi } from "@/api"; | |||||
import { FormOptEnum } from "@/enums"; | import { FormOptEnum } from "@/enums"; | ||||
import Form from "./components/form/index.vue"; | |||||
import FormClass from "./components/formClass/index.vue"; | |||||
import FormTeacher from "./components/formTeacher/index.vue"; | |||||
import { ArrowDown,More } from "@element-plus/icons-vue"; | |||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | ||||
import TreeFilter from "@/components/TreeFilter/index.vue"; | import TreeFilter from "@/components/TreeFilter/index.vue"; | ||||
import { useUserStore } from "@/stores/modules"; | import { useUserStore } from "@/stores/modules"; | ||||
import { TokenEnum } from "@/enums"; | |||||
import type { UploadProps } from "element-plus"; | |||||
import TraceDetail from "./components/nofaceTable/index.vue"; | import TraceDetail from "./components/nofaceTable/index.vue"; | ||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | // 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | ||||
const faceUrl = ref(''); | const faceUrl = ref(''); | ||||
const visible = ref(false); //是否显示人员表单 | |||||
const visible = ref(false); //预览头像 | |||||
const proTable = ref<ProTableInstance>(); | const proTable = ref<ProTableInstance>(); | ||||
const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null); | const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null); | ||||
const userStore = useUserStore(); | const userStore = useUserStore(); | ||||
const { accessToken } = userStore; | |||||
// 表格配置项 | // 表格配置项 | ||||
const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | ||||
{ type: "selection", fixed: "left", width: 50 }, | |||||
{ | { | ||||
prop: "faceUrl", | prop: "faceUrl", | ||||
label: "人脸", | label: "人脸", | ||||
@@ -174,168 +91,17 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||||
const viewHeadImage = (scope: any) => { | const viewHeadImage = (scope: any) => { | ||||
faceUrl.value = scope.row.faces[0].faceUrl; | faceUrl.value = scope.row.faces[0].faceUrl; | ||||
visible.value = true | visible.value = true | ||||
console.log(faceUrl); | |||||
}; | }; | ||||
const handleClose = () => { | const handleClose = () => { | ||||
visible.value = false; | visible.value = false; | ||||
}; | }; | ||||
// 人员表单引用 | |||||
const formRef = ref<InstanceType<typeof Form> | null>(null); | |||||
// 班级表单引用 | |||||
const formRefC = ref<InstanceType<typeof FormClass> | null>(null); | |||||
// 班级表单引用 | |||||
const formRefT = ref<InstanceType<typeof FormTeacher> | null>(null); | |||||
/** | |||||
* 打开表单 | |||||
* @param opt 操作类型 | |||||
* @param record 记录 | |||||
*/ | |||||
function onOpen(opt: FormOptEnum, record: {} | SysUserPersonnel.SysUserPerInfo = {}) { | |||||
formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable }); | |||||
} | |||||
/** | |||||
* 打开班级表单 | |||||
* @param opt 操作类型 | |||||
* @param record 记录 | |||||
*/ | |||||
function addClass(opt: FormOptEnum, record: {} | SysUserPersonnel.ClassPage = {}) { | |||||
formRefC.value?.onOpen({ opt: opt, record: JSON.parse(JSON.stringify(record)), successful: RefreshTable }); | |||||
} | |||||
/** | |||||
* 班级删除 | |||||
* @param ids id数组 | |||||
*/ | |||||
async function addDelete(id: string[],msg: string) { | |||||
// 二次确认 => 请求api => 刷新表格 | |||||
await useHandleData(userManageClassManageApi.delete, { id }, msg); | |||||
RefreshTable(); //刷新表格 | |||||
} | |||||
/** | |||||
* 人员删除 | |||||
* @param ids id数组 | |||||
*/ | |||||
async function onDelete(ids: string[], msg: string) { | |||||
if(ids.length === 0){ | |||||
ElMessage({ | |||||
message: '请选择要删除的人员', | |||||
type: 'warning' | |||||
}); | |||||
return | |||||
} | |||||
// 二次确认 => 请求api => 刷新表格 | |||||
await useHandleData(userManagePersonnelApi.delete, {id: ids.join(",") }, msg); | |||||
RefreshTable(); //刷新表格 | |||||
} | |||||
// 刷新表格 | // 刷新表格 | ||||
const RefreshTable = () => { | const RefreshTable = () => { | ||||
proTable.value?.refresh(); | proTable.value?.refresh(); | ||||
treeFilter.value?.refresh(); //刷新树形筛选器 | treeFilter.value?.refresh(); //刷新树形筛选器 | ||||
} | } | ||||
/** 更多下拉菜单命令枚举 */ | |||||
enum cmdEnum { | |||||
AddFace = "添加人脸", | |||||
UnderpantsUnBinding = "底库解绑" | |||||
} | |||||
/** 下拉菜单参数接口 */ | |||||
interface Command { | |||||
row: SysUserPersonnel.SysUserPerInfo; | |||||
command: cmdEnum; | |||||
} | |||||
/**配置command的参数 */ | |||||
function command(row: SysUserPersonnel.SysUserPerInfo, command: cmdEnum): Command { | |||||
return { | |||||
row: row, | |||||
command: command | |||||
}; | |||||
} | |||||
/** | |||||
* 列表更多下拉菜单点击事件 | |||||
* @param command | |||||
*/ | |||||
const personId = ref<number | string>(); //人员id | |||||
function handleCommand(command: Command) { | |||||
switch (command.command) { | |||||
case cmdEnum.AddFace: | |||||
personId.value = command.row.personId; //获取人员id | |||||
break | |||||
case cmdEnum.UnderpantsUnBinding: | |||||
userManagePersonnelApi.personUnBindDfie({ | |||||
personId:command.row.personId, | |||||
personSetId: command.row.personSets[0].personSetId | |||||
}).then(res=>{ | |||||
ElMessage.success('底库解绑成功'); | |||||
RefreshTable() | |||||
}) | |||||
break; | |||||
} | |||||
} | |||||
/** 更多下拉菜单命令枚举 */ | |||||
enum cmdEnumTree { | |||||
AddTeacher = "绑定班主任", | |||||
UpdateTeacher = "修改班主任", | |||||
DeleteTeacher = "解绑班主任", | |||||
} | |||||
/** 树下拉菜单参数接口 */ | |||||
interface CommandTree { | |||||
row: SysUserPersonnel.ClassPage; | |||||
commander: cmdEnumTree; | |||||
} | |||||
/**配置command的参数 */ | |||||
function commander(row: SysUserPersonnel.ClassPage, commander: cmdEnumTree): CommandTree { | |||||
return { | |||||
row: row, | |||||
commander: commander, | |||||
}; | |||||
} | |||||
/** | |||||
* 树更多下拉菜单点击事件 | |||||
* @param commandtree | |||||
*/ | |||||
async function handleCommandTree(commander: CommandTree) { | |||||
switch (commander.commander) { | |||||
case cmdEnumTree.AddTeacher: | |||||
formRefT.value?.onOpen({ opt: commander.commander, record: commander.row, successful: RefreshTable }); | |||||
break | |||||
case cmdEnumTree.UpdateTeacher: | |||||
formRefT.value?.onOpen({ opt: commander.commander, record: commander.row, successful: RefreshTable }); | |||||
break; | |||||
case cmdEnumTree.DeleteTeacher: | |||||
// 二次确认 => 请求api => 刷新表格 | |||||
await useHandleData(userManageTeacherApi.delete, {id: commander.row.id}, '解绑教师'); | |||||
RefreshTable(); //刷新表格 | |||||
break; | |||||
} | |||||
} | |||||
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => { | |||||
if (response.code === 200) { | |||||
userManagePersonnelApi.addFace({ | |||||
personId: personId.value, | |||||
faceUrl: response.data | |||||
}).then(res=>{ | |||||
RefreshTable() | |||||
}) | |||||
} else { | |||||
ElMessage.error(response.msg); | |||||
} | |||||
}; | |||||
/** 部门切换 */ | /** 部门切换 */ | ||||
const personSetId = ref<number | string>() | const personSetId = ref<number | string>() | ||||
function changeTreeFilter(val: number | string) { | function changeTreeFilter(val: number | string) { | ||||
@@ -75,7 +75,7 @@ const columns: ColumnProps<any>[] = [ | |||||
}, | }, | ||||
{ | { | ||||
prop: "tongjirenshu", | prop: "tongjirenshu", | ||||
label: "统计后的总人数" | |||||
label: "总人数" | |||||
}, | }, | ||||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | { prop: "operation", label: "操作", width: 250, fixed: "right" } | ||||
]; | ]; | ||||
@@ -5,17 +5,18 @@ | |||||
--> | --> | ||||
<template> | <template> | ||||
<div> | <div> | ||||
<form-container v-model="visible" :title="`${propsInfo.record.classname}人脸未识别确认`" form-size="1000px" @close="onClose"> | |||||
<ProTable ref="proTable" title="教师点名" height="600px" :data="tableData" :columns="columns"> | |||||
<form-container v-model="visible" row-key="id" :title="`${propsInfo.record.classname}人脸未识别确认`" form-size="1000px" @close="onClose"> | |||||
<ProTable ref="noFaceTableRef" title="教师点名" height="600px" :data="tableData" :columns="columns"> | |||||
<!-- 表格 header 按钮 --> | <!-- 表格 header 按钮 --> | ||||
<template #tableHeader> | |||||
<s-button type="primary" icon="check" prefix="人工" suffix="确认" @click="handleSubmit" /> | |||||
</template> | |||||
<!-- 表格操作栏 --> | |||||
<template #operation="scope"> | |||||
<el-space> | |||||
<s-button link :opt="FormOptEnum.EDIT" prefix="人工" suffix="确认" @click="onOpen(FormOptEnum.VIEW, scope.row)" /> | |||||
</el-space> | |||||
<template #tableHeader="scope"> | |||||
<s-button | |||||
type="primary" | |||||
:disabled="!scope.isSelected" | |||||
icon="check" | |||||
prefix="人工" | |||||
suffix="确认" | |||||
@click="personConfirm(scope.selectedListIds, '确认人脸识别')" | |||||
/> | |||||
</template> | </template> | ||||
</ProTable> | </ProTable> | ||||
<template #footer> | <template #footer> | ||||
@@ -31,15 +32,16 @@ | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script setup lang="tsx" name="attendancePassenger"> | |||||
import { AttendancePassenger, attendancePassenger } from "@/api"; | |||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||||
<script setup lang="tsx" name="attendanceStudentsReturn"> | |||||
import { AttendanceStudentsReturn, attendanceStudentsReturn } from "@/api"; | |||||
import { ColumnProps, noFaceTableInstance } from "@/components/noFaceTableRef/interface"; | |||||
import { FormOptEnum } from "@/enums"; | import { FormOptEnum } from "@/enums"; | ||||
import { useHandleData } from "@/hooks"; | |||||
const visible = ref(false); //是否显示 | const visible = ref(false); //是否显示 | ||||
// 弹框参数 | // 弹框参数 | ||||
const propsInfo = reactive<FormProps.Base<AttendancePassenger.PassengerInfo>>({ | |||||
opt: FormOptEnum.ADD, //操作类型 | |||||
const propsInfo = reactive<FormProps.Base<AttendanceStudentsReturn.PassengerInfo>>({ | |||||
opt: FormOptEnum.VIEW, //操作类型 | |||||
record: {}, //弹框数据 | record: {}, //弹框数据 | ||||
disabled: false | disabled: false | ||||
}); | }); | ||||
@@ -47,17 +49,12 @@ const propsInfo = reactive<FormProps.Base<AttendancePassenger.PassengerInfo>>({ | |||||
* 打开弹框 | * 打开弹框 | ||||
* @param props 弹框参数 | * @param props 弹框参数 | ||||
*/ | */ | ||||
function onOpen(props: FormProps.Base<AttendancePassenger.PassengerInfo>) { | |||||
function onOpen(props: FormProps.Base<AttendanceStudentsReturn.PassengerInfo>) { | |||||
Object.assign(propsInfo, props); //合并参数 | Object.assign(propsInfo, props); //合并参数 | ||||
if (props.opt == FormOptEnum.ADD) { | |||||
//如果是新增,设置默认值 | |||||
propsInfo.record.shijianduan = []; | |||||
propsInfo.record.shexiangtou = []; | |||||
} | |||||
visible.value = true; //显示弹框 | visible.value = true; //显示弹框 | ||||
if (props.record.id) { | if (props.record.id) { | ||||
//如果传了id,就去请求api获取record | //如果传了id,就去请求api获取record | ||||
attendancePassenger.detail({ id: props.record.id }).then(res => { | |||||
attendanceStudentsReturn.detail({ id: props.record.id }).then(res => { | |||||
propsInfo.record = res.data; | propsInfo.record = res.data; | ||||
}); | }); | ||||
} | } | ||||
@@ -65,6 +62,7 @@ function onOpen(props: FormProps.Base<AttendancePassenger.PassengerInfo>) { | |||||
const tableData = ref([ | const tableData = ref([ | ||||
{ | { | ||||
id:'1', | |||||
studentname: "张三", | studentname: "张三", | ||||
faces: [ | faces: [ | ||||
{ | { | ||||
@@ -74,6 +72,7 @@ const tableData = ref([ | |||||
], | ], | ||||
}, | }, | ||||
{ | { | ||||
id:'2', | |||||
studentname: "李四", | studentname: "李四", | ||||
faces: [ | faces: [ | ||||
{ | { | ||||
@@ -83,6 +82,7 @@ const tableData = ref([ | |||||
], | ], | ||||
}, | }, | ||||
{ | { | ||||
id:'3', | |||||
studentname: "张三", | studentname: "张三", | ||||
faces: [ | faces: [ | ||||
{ | { | ||||
@@ -92,6 +92,7 @@ const tableData = ref([ | |||||
], | ], | ||||
}, | }, | ||||
{ | { | ||||
id:'4', | |||||
studentname: "李四", | studentname: "李四", | ||||
faces: [ | faces: [ | ||||
{ | { | ||||
@@ -101,6 +102,7 @@ const tableData = ref([ | |||||
], | ], | ||||
}, | }, | ||||
{ | { | ||||
id:'5', | |||||
studentname: "张三", | studentname: "张三", | ||||
faces: [ | faces: [ | ||||
{ | { | ||||
@@ -110,8 +112,8 @@ const tableData = ref([ | |||||
], | ], | ||||
} | } | ||||
]); | ]); | ||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||||
const proTable = ref<ProTableInstance>(); | |||||
// 获取 noFaceTableRef 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||||
const noFaceTableRef = ref<noFaceTableInstance>(); | |||||
// 表格配置项 | // 表格配置项 | ||||
const columns: ColumnProps[] = [ | const columns: ColumnProps[] = [ | ||||
{ type: "selection" }, | { type: "selection" }, | ||||
@@ -133,7 +135,6 @@ const columns: ColumnProps[] = [ | |||||
); | ); | ||||
} | } | ||||
} | } | ||||
// { prop: "operation", label: "操作", width: 250, fixed: "right" } | |||||
]; | ]; | ||||
// 图片预览 | // 图片预览 | ||||
const imgVisible = ref(false); | const imgVisible = ref(false); | ||||
@@ -142,52 +143,19 @@ const viewHeadImage = (scope: any) => { | |||||
faceUrl.value = scope.row.faces[0].faceUrl; | faceUrl.value = scope.row.faces[0].faceUrl; | ||||
imgVisible.value = true | imgVisible.value = true | ||||
}; | }; | ||||
// 刷新表格 | |||||
const RefreshTable = () => { | |||||
proTable.value?.refresh(); | |||||
}; | |||||
// 提交数据(新增/编辑) | |||||
const formRef = ref<FormInstance>(); | |||||
/** 提交表单 */ | |||||
async function handleSubmit() { | |||||
formRef.value?.validate(async valid => { | |||||
if (!valid) return; //表单验证失败 | |||||
// shijianduan时间段 | |||||
propsInfo.record.startTime = formatDate(propsInfo.record.shijianduan[0]); | |||||
propsInfo.record.endTime = formatDate(propsInfo.record.shijianduan[1]); | |||||
delete propsInfo.record.shijianduan; | |||||
// shexiangtou摄像头 | |||||
propsInfo.record.shexiangtou = propsInfo.record.shexiangtou.toString(); | |||||
//提交表单 | |||||
console.log(propsInfo); | |||||
if (propsInfo.record.id) { | |||||
await attendancePassenger | |||||
.update(propsInfo.record) | |||||
.then(() => { | |||||
propsInfo.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} else { | |||||
console.log(propsInfo.record); | |||||
await attendancePassenger | |||||
.add(propsInfo.record) | |||||
.then(() => { | |||||
propsInfo.successful!(); //调用父组件的successful方法 | |||||
}) | |||||
.finally(() => { | |||||
onClose(); | |||||
}); | |||||
} | |||||
}); | |||||
/** 人工确认 */ | |||||
async function personConfirm(ids: string[], msg: string) { | |||||
await useHandleData(attendanceStudentsReturn.delete, {id: ids.toString() }, msg); | |||||
RefreshTable(); //刷新表格 | |||||
} | } | ||||
/** 关闭表单*/ | /** 关闭表单*/ | ||||
function onClose() { | function onClose() { | ||||
visible.value = false; | visible.value = false; | ||||
} | } | ||||
// 刷新表格 | |||||
const RefreshTable = () => { | |||||
noFaceTableRef.value?.refresh(); | |||||
}; | |||||
// 暴露给父组件的方法 | // 暴露给父组件的方法 | ||||
defineExpose({ | defineExpose({ | ||||
onOpen | onOpen | ||||
@@ -9,7 +9,14 @@ | |||||
<!-- 表格操作栏 --> | <!-- 表格操作栏 --> | ||||
<template #operation="scope"> | <template #operation="scope"> | ||||
<el-space> | <el-space> | ||||
<s-button link prefix="人工" :opt="FormOptEnum.EDIT" suffix="确认" @click="onOpen(FormOptEnum.VIEW, scope.row)" /> | |||||
<s-button | |||||
:disabled="!scope.row.noFaceNum" | |||||
link | |||||
prefix="人工" | |||||
:opt="FormOptEnum.EDIT" | |||||
suffix="确认" | |||||
@click="onOpen(FormOptEnum.VIEW, scope.row)" | |||||
/> | |||||
</el-space> | </el-space> | ||||
</template> | </template> | ||||
</ProTable> | </ProTable> | ||||
@@ -65,7 +72,7 @@ const columns: ColumnProps[] = [ | |||||
]; | ]; | ||||
const FaceConfirmRef = ref<InstanceType<typeof FaceConfirm> | null>(null); | const FaceConfirmRef = ref<InstanceType<typeof FaceConfirm> | null>(null); | ||||
/** | /** | ||||
* 打开弹框 | |||||
* 人工确认 | |||||
* @param opt 操作类型 | * @param opt 操作类型 | ||||
* @param record 弹框数据 | * @param record 弹框数据 | ||||
*/ | */ | ||||