@@ -96,7 +96,7 @@ const columns: ColumnProps<SysUserPersonnel.ClassPage>[] = [ | |||||
el: "select", | el: "select", | ||||
span:1, | span:1, | ||||
props: { | props: { | ||||
clearable: false, | |||||
clearable: true, | |||||
placeholder: "请选择专业", | placeholder: "请选择专业", | ||||
}, | }, | ||||
}, | }, | ||||
@@ -105,7 +105,9 @@ const columns: ColumnProps<SysUserPersonnel.ClassPage>[] = [ | |||||
{ | { | ||||
prop: "personSetName", | prop: "personSetName", | ||||
label: "班级名称", | label: "班级名称", | ||||
search: { el: "input",span:1, } | |||||
search: { el: "input",span:1,props: { | |||||
clearable: true, | |||||
}, }, | |||||
}, | }, | ||||
{ | { | ||||
@@ -30,6 +30,11 @@ | |||||
}" | }" | ||||
> | > | ||||
<el-icon><Plus /></el-icon> | <el-icon><Plus /></el-icon> | ||||
<template #tip> | |||||
<div class="el-upload__tip" style="color: #909399"> | |||||
请上传不超过5张的清晰人脸照片,以便应用能准确识别 .支持*JPEG、PNG格式,单张照片不超过5M | |||||
</div> | |||||
</template> | |||||
</el-upload> | </el-upload> | ||||
<el-dialog v-model="dialogVisible" title="查看图片"> | <el-dialog v-model="dialogVisible" title="查看图片"> | ||||
<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /> | <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /> | ||||
@@ -24,30 +24,6 @@ | |||||
<el-space> | <el-space> | ||||
<s-button link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | <s-button link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | ||||
<s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.personId], `删除人员`)" /> | <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> | </el-space> | ||||
</template> | </template> | ||||
</ProTable> | </ProTable> | ||||
@@ -67,18 +43,12 @@ import { userManageKeyPersonApi,SysUserPersonnel } from "@/api"; | |||||
import { useHandleData } from "@/hooks/useHandleData"; | import { useHandleData } from "@/hooks/useHandleData"; | ||||
import { FormOptEnum } from "@/enums"; | import { FormOptEnum } from "@/enums"; | ||||
import Form from "./components/form/index.vue"; | import Form from "./components/form/index.vue"; | ||||
import { ArrowDown } from "@element-plus/icons-vue"; | |||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | ||||
import { ElMessage } from "element-plus"; | import { ElMessage } from "element-plus"; | ||||
import { useUserStore } from "@/stores/modules"; | |||||
import { TokenEnum } from "@/enums"; | |||||
import type { UploadProps } from "element-plus"; | |||||
// 获取 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 userStore = useUserStore(); | |||||
const { accessToken } = userStore; | |||||
// 表格配置项 | // 表格配置项 | ||||
const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | ||||
{ type: "selection", fixed: "left", width: 50 }, | { type: "selection", fixed: "left", width: 50 }, | ||||
@@ -96,8 +66,24 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||||
label: "姓名" | 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", | prop: "age", | ||||
@@ -151,54 +137,6 @@ function onOpen(opt: FormOptEnum, record: {} | SysUserPersonnel.SysUserPerInfo = | |||||
const RefreshTable = () => { | const RefreshTable = () => { | ||||
proTable.value?.refresh(); | 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> | </script> | ||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
.table-box { | .table-box { | ||||
@@ -26,7 +26,13 @@ | |||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<s-form-item label="所属班级" prop="personSetId"> | <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-col> | ||||
</el-row> | </el-row> | ||||
<el-row :gutter="16"> | <el-row :gutter="16"> | ||||
@@ -46,6 +52,11 @@ | |||||
}" | }" | ||||
> | > | ||||
<el-icon><Plus /></el-icon> | <el-icon><Plus /></el-icon> | ||||
<template #tip> | |||||
<div class="el-upload__tip" style="color: #909399"> | |||||
请上传不超过5张的清晰人脸照片,以便应用能准确识别 .支持*JPEG、PNG格式,单张照片不超过5M | |||||
</div> | |||||
</template> | |||||
</el-upload> | </el-upload> | ||||
<el-dialog v-model="dialogVisible" title="查看图片"> | <el-dialog v-model="dialogVisible" title="查看图片"> | ||||
<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" /> | <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; | userInfo.value.gender = userInfo.value.gender ? userInfo.value.gender : genderOptions.value[0].value; | ||||
if (userInfo.value.personId) { | 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) { | if (userInfo.value.faces?.length > 0) { | ||||
fileList.value = [ | fileList.value = [ | ||||
...JSON.parse(JSON.stringify(userInfo.value.faces)).map((item: any) => { | ...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) => { | userManagePersonnelApi.detail({ id: props.record.personId }).then((res: any) => { | ||||
if (!res.data.majorId) res.data.majorId = ""; | if (!res.data.majorId) res.data.majorId = ""; | ||||
if (!res.data.depId) res.data.depId = ""; | if (!res.data.depId) res.data.depId = ""; | ||||
if (!res.data.age) res.data.age = ""; | |||||
sysUserProps.record = res.data; | sysUserProps.record = res.data; | ||||
}); | }); | ||||
} | } | ||||
@@ -25,33 +25,9 @@ | |||||
<el-space> | <el-space> | ||||
<s-button v-auth="userPerButtonCode.edit" link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, 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], `删除人员`)" /> | <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> | </el-space> | ||||
</template> | </template> | ||||
</ProTable> | </ProTable> | ||||
@@ -68,73 +44,38 @@ | |||||
</template> | </template> | ||||
<script setup lang="tsx" name="SysUserPersonnel"> | <script setup lang="tsx" name="SysUserPersonnel"> | ||||
import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel } from "@/api"; | import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel } from "@/api"; | ||||
import { getMajorList, getDepartmentList, getClassList } from "@/mixin"; | |||||
import { getClassList } from "@/mixin"; | |||||
import { useHandleData } from "@/hooks/useHandleData"; | import { useHandleData } from "@/hooks/useHandleData"; | ||||
import { FormOptEnum } from "@/enums"; | import { FormOptEnum } from "@/enums"; | ||||
import Form from "./components/form/index.vue"; | 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 { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | ||||
import { useUserStore } from "@/stores/modules"; | |||||
import { TokenEnum } from "@/enums"; | |||||
import type { UploadProps } from "element-plus"; | |||||
// 获取 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 userStore = useUserStore(); | |||||
const { accessToken } = userStore; | |||||
const departmentOptions = ref<any>([]) | |||||
const majorOptions = ref<any>([]) | |||||
const classOptions = 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>[] = [ | const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | ||||
{ type: "selection", fixed: "left", width: 50 }, | { 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", | prop: "personSetId", | ||||
@@ -152,29 +93,33 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||||
isShow: false | 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", | 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" } | { prop: "operation", label: "操作", width: 250, fixed: "right" } | ||||
]; | ]; | ||||
@@ -226,61 +171,18 @@ const RefreshTable = () => { | |||||
/** 更多下拉菜单命令枚举 */ | /** 更多下拉菜单命令枚举 */ | ||||
enum cmdEnum { | enum cmdEnum { | ||||
AddFace = "添加人脸", | |||||
UnderpantsUnBinding = "班级解绑" | 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() | RefreshTable() | ||||
}) | |||||
} else { | |||||
ElMessage.error(response.msg); | |||||
} | |||||
}; | |||||
}) | |||||
} | |||||
onMounted(async () => { | onMounted(async () => { | ||||
// 获取系部下拉数据 | |||||
departmentOptions.value = await getDepartmentList() | |||||
// 获取班级 | // 获取班级 | ||||
classOptions.value = await getClassList(""); | classOptions.value = await getClassList(""); | ||||
}); | }); | ||||