wwp 1ヶ月前
コミット
e7d6560e1c
6個のファイルの変更92行の追加233行の削除
  1. +4
    -2
      SafeCampus.WEB/src/views/userManage/classManage/index.vue
  2. +5
    -0
      SafeCampus.WEB/src/views/userManage/keyPersonnel/components/form/form_basic.vue
  3. +18
    -80
      SafeCampus.WEB/src/views/userManage/keyPersonnel/index.vue
  4. +14
    -3
      SafeCampus.WEB/src/views/userManage/personnel/components/form/form_basic.vue
  5. +1
    -0
      SafeCampus.WEB/src/views/userManage/personnel/components/form/index.vue
  6. +50
    -148
      SafeCampus.WEB/src/views/userManage/personnel/index.vue

+ 4
- 2
SafeCampus.WEB/src/views/userManage/classManage/index.vue ファイルの表示

@@ -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,
}, },
},
{


+ 5
- 0
SafeCampus.WEB/src/views/userManage/keyPersonnel/components/form/form_basic.vue ファイルの表示

@@ -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%" />


+ 18
- 80
SafeCampus.WEB/src/views/userManage/keyPersonnel/index.vue ファイルの表示

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


+ 14
- 3
SafeCampus.WEB/src/views/userManage/personnel/components/form/form_basic.vue ファイルの表示

@@ -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) => {


+ 1
- 0
SafeCampus.WEB/src/views/userManage/personnel/components/form/index.vue ファイルの表示

@@ -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;
});
}


+ 50
- 148
SafeCampus.WEB/src/views/userManage/personnel/index.vue ファイルの表示

@@ -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("");
});


読み込み中…
キャンセル
保存