@@ -96,7 +96,7 @@ const columns: ColumnProps<SysUserPersonnel.ClassPage>[] = [ | |||
el: "select", | |||
span:1, | |||
props: { | |||
clearable: false, | |||
clearable: true, | |||
placeholder: "请选择专业", | |||
}, | |||
}, | |||
@@ -105,7 +105,9 @@ const columns: ColumnProps<SysUserPersonnel.ClassPage>[] = [ | |||
{ | |||
prop: "personSetName", | |||
label: "班级名称", | |||
search: { el: "input",span:1, } | |||
search: { el: "input",span:1,props: { | |||
clearable: true, | |||
}, }, | |||
}, | |||
{ | |||
@@ -30,6 +30,11 @@ | |||
}" | |||
> | |||
<el-icon><Plus /></el-icon> | |||
<template #tip> | |||
<div class="el-upload__tip" style="color: #909399"> | |||
请上传不超过5张的清晰人脸照片,以便应用能准确识别 .支持*JPEG、PNG格式,单张照片不超过5M | |||
</div> | |||
</template> | |||
</el-upload> | |||
<el-dialog v-model="dialogVisible" title="查看图片"> | |||
<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /> | |||
@@ -24,30 +24,6 @@ | |||
<el-space> | |||
<s-button link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | |||
<s-button 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-menu> | |||
</template> | |||
</el-dropdown> | |||
</el-space> | |||
</template> | |||
</ProTable> | |||
@@ -67,18 +43,12 @@ import { userManageKeyPersonApi,SysUserPersonnel } from "@/api"; | |||
import { useHandleData } from "@/hooks/useHandleData"; | |||
import { FormOptEnum } from "@/enums"; | |||
import Form from "./components/form/index.vue"; | |||
import { ArrowDown } from "@element-plus/icons-vue"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
import { ElMessage } from "element-plus"; | |||
import { useUserStore } from "@/stores/modules"; | |||
import { TokenEnum } from "@/enums"; | |||
import type { UploadProps } from "element-plus"; | |||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||
const faceUrl = ref(''); | |||
const visible = ref(false); //是否显示人员表单 | |||
const proTable = ref<ProTableInstance>(); | |||
const userStore = useUserStore(); | |||
const { accessToken } = userStore; | |||
// 表格配置项 | |||
const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
{ type: "selection", fixed: "left", width: 50 }, | |||
@@ -96,8 +66,24 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
label: "姓名" | |||
}, | |||
{ | |||
prop: "personId", | |||
label: "人员ID" | |||
prop: "gender", | |||
label: "性别", | |||
enum: [{ | |||
label: "未知", | |||
value: "GENDER_UNKNOWN" | |||
}, | |||
{ | |||
label: "男", | |||
value: "GENDER_MALE" | |||
}, | |||
{ | |||
label: "女", | |||
value: "GENDER_FEMALE" | |||
}], | |||
}, | |||
{ | |||
prop: "phone", | |||
label: "手机号" | |||
}, | |||
{ | |||
prop: "age", | |||
@@ -151,54 +137,6 @@ function onOpen(opt: FormOptEnum, record: {} | SysUserPersonnel.SysUserPerInfo = | |||
const RefreshTable = () => { | |||
proTable.value?.refresh(); | |||
} | |||
/** 更多下拉菜单命令枚举 */ | |||
enum cmdEnum { | |||
AddFace = "添加人脸", | |||
} | |||
/** 下拉菜单参数接口 */ | |||
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 | |||
} | |||
} | |||
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => { | |||
if (response.code === 200) { | |||
userManageKeyPersonApi.addFace({ | |||
personId: personId.value, | |||
faceUrl: response.data | |||
}).then(res=>{ | |||
RefreshTable() | |||
}) | |||
} else { | |||
ElMessage.error(response.msg); | |||
} | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.table-box { | |||
@@ -26,7 +26,13 @@ | |||
</el-col> | |||
<el-col :span="12"> | |||
<s-form-item label="所属班级" prop="personSetId"> | |||
<s-select v-model="userInfo.personSetId" :options="classOptions" label="personSetName" value="personSetId"></s-select> </s-form-item | |||
<s-select | |||
v-model="userInfo.personSetId" | |||
:filterable="true" | |||
:options="classOptions" | |||
label="personSetName" | |||
value="personSetId" | |||
></s-select> </s-form-item | |||
></el-col> | |||
</el-row> | |||
<el-row :gutter="16"> | |||
@@ -46,6 +52,11 @@ | |||
}" | |||
> | |||
<el-icon><Plus /></el-icon> | |||
<template #tip> | |||
<div class="el-upload__tip" style="color: #909399"> | |||
请上传不超过5张的清晰人脸照片,以便应用能准确识别 .支持*JPEG、PNG格式,单张照片不超过5M | |||
</div> | |||
</template> | |||
</el-upload> | |||
<el-dialog v-model="dialogVisible" title="查看图片"> | |||
<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /> | |||
@@ -154,8 +165,8 @@ onMounted(async () => { | |||
// 初始化 | |||
userInfo.value.gender = userInfo.value.gender ? userInfo.value.gender : genderOptions.value[0].value; | |||
if (userInfo.value.personId) { | |||
majorOptions.value = await getMajorList(userInfo.value.depId); | |||
classOptions.value = await getClassList(userInfo.value.majorId); | |||
majorOptions.value = await getMajorList(userInfo.value.depId ? userInfo.value.depId : ""); | |||
classOptions.value = await getClassList(userInfo.value.majorId ? userInfo.value.majorId : ""); | |||
if (userInfo.value.faces?.length > 0) { | |||
fileList.value = [ | |||
...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => { | |||
@@ -70,6 +70,7 @@ function onOpen(props: FormProps.Base<SysUserPersonnel.SysUserPerInfo>) { | |||
userManagePersonnelApi.detail({ id: props.record.personId }).then((res: any) => { | |||
if (!res.data.majorId) res.data.majorId = ""; | |||
if (!res.data.depId) res.data.depId = ""; | |||
if (!res.data.age) res.data.age = ""; | |||
sysUserProps.record = res.data; | |||
}); | |||
} | |||
@@ -25,33 +25,9 @@ | |||
<el-space> | |||
<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 v-if="scope.row.personSetId" :command="command(scope.row, cmdEnum.UnderpantsUnBinding)"> | |||
{{ cmdEnum.UnderpantsUnBinding }} | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</template> | |||
</el-dropdown> | |||
<el-button v-if="scope.row.personSetId" type="primary" :icon="Remove" link @click="onUnbind(scope.row)"> | |||
{{ cmdEnum.UnderpantsUnBinding }} | |||
</el-button> | |||
</el-space> | |||
</template> | |||
</ProTable> | |||
@@ -68,73 +44,38 @@ | |||
</template> | |||
<script setup lang="tsx" name="SysUserPersonnel"> | |||
import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel } from "@/api"; | |||
import { getMajorList, getDepartmentList, getClassList } from "@/mixin"; | |||
import { getClassList } from "@/mixin"; | |||
import { useHandleData } from "@/hooks/useHandleData"; | |||
import { FormOptEnum } from "@/enums"; | |||
import Form from "./components/form/index.vue"; | |||
import { ArrowDown } from "@element-plus/icons-vue"; | |||
import { Remove } from "@element-plus/icons-vue"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
import { useUserStore } from "@/stores/modules"; | |||
import { TokenEnum } from "@/enums"; | |||
import type { UploadProps } from "element-plus"; | |||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||
const faceUrl = ref(''); | |||
const visible = ref(false); //是否显示人员表单 | |||
const proTable = ref<ProTableInstance>(); | |||
const userStore = useUserStore(); | |||
const { accessToken } = userStore; | |||
const departmentOptions = ref<any>([]) | |||
const majorOptions = ref<any>([]) | |||
const classOptions = ref<any>([]) | |||
//监听depId/majorId变化 | |||
watch( | |||
() => [proTable.value!?.searchParam?.depId,proTable.value!?.searchParam?.majorId], | |||
async ([newDepId,newMajorId],[oldDepId,oldMajorId]) => { | |||
if(newDepId !== oldDepId){ | |||
majorOptions.value =await getMajorList(newDepId) | |||
classOptions.value = []; | |||
proTable.value!.searchParam.majorId = ""; | |||
proTable.value!.searchParam.personSetId = "" | |||
} | |||
if(newMajorId !== oldMajorId){ | |||
classOptions.value = await getClassList(newMajorId) | |||
} | |||
} ,{ deep: true, immediate: false } | |||
); | |||
// 表格配置项 | |||
const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
{ type: "selection", fixed: "left", width: 50 }, | |||
{ | |||
prop: "depId", | |||
label: "所属系部", | |||
enum: departmentOptions, | |||
fieldNames: { label: "name", value: "id" }, | |||
search: { | |||
el: "select", | |||
span:1, | |||
props: { | |||
clearable: false, | |||
placeholder: "请选择系部", | |||
}, | |||
}, | |||
isShow: false | |||
prop: "faceUrl", | |||
label: "人脸", | |||
render: scope => { | |||
return ( | |||
<img src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/> | |||
); | |||
} | |||
}, | |||
{ | |||
prop: "majorId", | |||
label: "所属专业", | |||
enum: majorOptions, | |||
fieldNames: { label: "name", value: "id" }, | |||
search: { | |||
el: "select", | |||
span:1, | |||
props: { | |||
clearable: false, | |||
placeholder: "请选择专业", | |||
}, | |||
}, | |||
isShow: false | |||
prop: "name", | |||
label: "姓名", | |||
search: {el:'input',span:1,} | |||
}, | |||
{ | |||
prop: "personSetName", | |||
label: "所属班级", | |||
}, | |||
{ | |||
prop: "personSetId", | |||
@@ -152,29 +93,33 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
isShow: false | |||
}, | |||
{ | |||
prop: "faceUrl", | |||
label: "人脸", | |||
render: scope => { | |||
return ( | |||
<img src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/> | |||
); | |||
} | |||
}, | |||
{ | |||
prop: "name", | |||
label: "姓名" | |||
}, | |||
{ | |||
prop: "personId", | |||
label: "人员ID" | |||
prop: "gender", | |||
label: "性别", | |||
enum: [{ | |||
label: "未知", | |||
value: "GENDER_UNKNOWN" | |||
}, | |||
{ | |||
label: "男", | |||
value: "GENDER_MALE" | |||
}, | |||
{ | |||
label: "女", | |||
value: "GENDER_FEMALE" | |||
}], | |||
}, | |||
{ | |||
prop: "phone", | |||
label: "手机号" | |||
label: "手机号", | |||
search: {el:'input',span:1,} | |||
}, | |||
{ | |||
prop: "personSetName", | |||
label: "所属班级", | |||
prop: "age", | |||
label: "年龄", | |||
render: scope => { | |||
return scope.row.age ? scope.row.age : '--'; | |||
} | |||
}, | |||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
]; | |||
@@ -226,61 +171,18 @@ const RefreshTable = () => { | |||
/** 更多下拉菜单命令枚举 */ | |||
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.personSetId | |||
}).then(res=>{ | |||
ElMessage.success('班级解绑成功'); | |||
RefreshTable() | |||
}) | |||
break; | |||
} | |||
} | |||
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => { | |||
if (response.code === 200) { | |||
userManagePersonnelApi.addFace({ | |||
personId: personId.value, | |||
faceUrl: response.data | |||
}).then(res=>{ | |||
const onUnbind = (row: SysUserPersonnel.SysUserPerInfo) => { | |||
userManagePersonnelApi.personUnBindDfie({ | |||
personId:row.personId, | |||
personSetId: row.personSetId | |||
}).then(res=>{ | |||
ElMessage.success('班级解绑成功'); | |||
RefreshTable() | |||
}) | |||
} else { | |||
ElMessage.error(response.msg); | |||
} | |||
}; | |||
}) | |||
} | |||
onMounted(async () => { | |||
// 获取系部下拉数据 | |||
departmentOptions.value = await getDepartmentList() | |||
// 获取班级 | |||
classOptions.value = await getClassList(""); | |||
}); | |||