@@ -12,7 +12,7 @@ | |||
* 6.任何基于本软件而产生的一切法律纠纷和责任,均于我司无关 | |||
*/ | |||
import { ReqId, ReqPage } from "@/api"; | |||
import { ReqPage } from "@/api"; | |||
/** | |||
* @Description: 人员管理接口 | |||
* @Author: syy | |||
@@ -20,15 +20,24 @@ import { ReqId, ReqPage } from "@/api"; | |||
*/ | |||
export namespace SysUserPersonnel { | |||
/** 头像信息 */ | |||
export interface Page extends ReqPage {} | |||
/** 底库信息 */ | |||
export interface ClassPage { | |||
id?: string | undefined; | |||
name?: string | undefined; | |||
} | |||
/** 人脸信息 */ | |||
export interface SysUserAvatar { | |||
/** 头像 */ | |||
avatar?: string; | |||
/** 人脸 */ | |||
personId?: string | undefined; | |||
faceId: string; | |||
faceUrl: string; | |||
tag: string; | |||
} | |||
/** 用户信息 */ | |||
export interface SysUserPerInfo { | |||
id: number | string; | |||
/** 人员id */ | |||
personId?: string; | |||
/** 姓名 */ | |||
@@ -42,6 +51,8 @@ export namespace SysUserPersonnel { | |||
/** 扩展字段 */ | |||
extData?: string; | |||
/** 人脸 */ | |||
// faces: Array<>; | |||
faces: Array<SysUserAvatar>; | |||
/** 分组 */ | |||
personSets: Array<ClassPage>; | |||
} | |||
} |
@@ -13,7 +13,7 @@ | |||
* @see https://gitee.com/dotnetmoyu/SimpleAdmin | |||
*/ | |||
import { moduleRequest } from "@/api/request"; | |||
import { ResPage, ZJRQ, ReqId } from "@/api/interface"; | |||
import { ReqId, SysUserPersonnel } from "@/api/interface"; | |||
const http = moduleRequest("/business/dfieldApi/"); | |||
/** | |||
@@ -23,20 +23,20 @@ const http = moduleRequest("/business/dfieldApi/"); | |||
*/ | |||
const userManageClassManageApi = { | |||
/** 查询底库列表 */ | |||
page(params: ZJRQ.Page) { | |||
page(params: SysUserPersonnel.ClassPage) { | |||
return http.get("queryAll", params); | |||
}, | |||
/** 删除底库 */ | |||
delete(params: ReqId) { | |||
return http.post("deleteDfieldD", params); | |||
return http.delete("deleteDfieldD", params); | |||
}, | |||
/** 创建底库 */ | |||
add(params: ZJRQ.WarnInfo) { | |||
add(params: SysUserPersonnel.ClassPage) { | |||
return http.post("createDfieldA", params); | |||
}, | |||
/** 更新底库 */ | |||
edit(params: ZJRQ.WarnInfo) { | |||
return http.post("updateDfieldU", params); | |||
update(params: SysUserPersonnel.ClassPage) { | |||
return http.put("updateDfieldU", params); | |||
} | |||
}; | |||
@@ -49,4 +49,4 @@ const userClassButtonCode = { | |||
delete: "userManageClassManageDelete" | |||
}; | |||
export { userManageClassManageApi,userClassButtonCode }; | |||
export { userManageClassManageApi, userClassButtonCode }; |
@@ -13,7 +13,7 @@ | |||
* @see https://gitee.com/dotnetmoyu/SimpleAdmin | |||
*/ | |||
import { moduleRequest } from "@/api/request"; | |||
import { ResPage, ZJRQ, ReqId } from "@/api/interface"; | |||
import { ResPage, ReqPersonId, SysUserPersonnel } from "@/api/interface"; | |||
const http = moduleRequest("/business/personApi/"); | |||
/** | |||
@@ -23,24 +23,40 @@ const http = moduleRequest("/business/personApi/"); | |||
*/ | |||
const userManagePersonnelApi = { | |||
/** 获取单页分页 */ | |||
page(params: ZJRQ.Page) { | |||
page(params: SysUserPersonnel.Page) { | |||
return http.post("pageQuery", params); | |||
}, | |||
/** 获取单页详情 */ | |||
detail(params: ReqId) { | |||
detail(params: ReqPersonId) { | |||
return http.get("getPersionById", params); | |||
}, | |||
/** 删除机构 */ | |||
delete(params: ReqId) { | |||
delete(params: ReqPersonId) { | |||
return http.post("deletePersonD", params); | |||
}, | |||
/** 新增机构 */ | |||
add(params: ZJRQ.WarnInfo) { | |||
add(params: SysUserPersonnel.SysUserPerInfo) { | |||
return http.post("createPersonA", params); | |||
}, | |||
/** 修改机构 */ | |||
edit(params: ZJRQ.WarnInfo) { | |||
return http.post("updatePersionU", params); | |||
update(params: SysUserPersonnel.SysUserPerInfo) { | |||
return http.put("updatePersionU", params); | |||
}, | |||
/** 添加人脸 */ | |||
addFace(params: SysUserPersonnel.SysUserAvatar) { | |||
return http.post("addFaceA", params); | |||
}, | |||
/** 删除人脸 */ | |||
deleteFace(params: SysUserPersonnel.SysUserAvatar) { | |||
return http.delete("deleteFaceD", params); | |||
}, | |||
/**底库绑定 */ | |||
personBindDfie(params: SysUserPersonnel.ClassPage) { | |||
return http.post("personBindDfie", params); | |||
}, | |||
/**底库解绑*/ | |||
personUnBindDfie(params: SysUserPersonnel.ClassPage) { | |||
return http.post("personUnBindDfie", params); | |||
} | |||
}; | |||
@@ -1,9 +1,11 @@ | |||
<template> | |||
<div class="card filter"> | |||
<div class="card filter" :style="{ width: width }"> | |||
<h4 v-if="title" class="title sle"> | |||
{{ title }} | |||
</h4> | |||
<slot name="header"></slot> | |||
<el-input v-model="filterText" placeholder="输入关键字进行过滤" clearable /> | |||
<el-scrollbar :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }"> | |||
<el-tree | |||
ref="treeRef" | |||
@@ -24,8 +26,8 @@ | |||
@check="handleCheckChange" | |||
> | |||
<template #default="scope"> | |||
<span class="el-tree-node__label"> | |||
<slot :row="scope"> | |||
<span class="el-tree-node__label" style="width: 100%"> | |||
<slot :row="scope" name="label"> | |||
{{ scope.node.label }} | |||
</slot> | |||
</span> | |||
@@ -53,6 +55,7 @@ interface TreeFilterProps { | |||
checkStrictly?: boolean; // 是否开启子节点和父节点不关联 ==> 非必传,默认为 false | |||
topName?: string; // 顶级分类名称 ==> 非必传,默认为 “全部” | |||
showAll?: boolean; // 是否显示全部选项 ==> 非必传,默认为 true | |||
width: string; | |||
} | |||
const props = withDefaults(defineProps<TreeFilterProps>(), { | |||
id: "id", | |||
@@ -249,10 +249,9 @@ | |||
/* el-dialog */ | |||
.el-dialog { | |||
padding: 0!important; | |||
padding: 0 !important; | |||
.el-dialog__header { | |||
padding: 16px; | |||
margin: 0; | |||
border-bottom: 1px solid var(--el-border-color-lighter); | |||
.el-dialog__title { | |||
@@ -263,13 +262,12 @@ | |||
} | |||
} | |||
.el-dialog__body { | |||
padding: 30px; | |||
padding: 20px; | |||
} | |||
.el-dialog__footer { | |||
padding: 15px 16px; | |||
box-sizing: border-box; | |||
border-top: 1px solid var(--el-border-color-lighter) | |||
padding: 15px 16px; | |||
border-top: 1px solid var(--el-border-color-lighter); | |||
} | |||
} | |||
@@ -0,0 +1,89 @@ | |||
<!-- | |||
* @Description: 人员表单 | |||
* @Author: syy | |||
* @Date: 2023-12-15 15:45:50 | |||
--> | |||
<template> | |||
<div> | |||
<div> | |||
<el-row :gutter="16"> | |||
<el-col :span="24"> | |||
<s-form-item label="人员姓名" prop="name"> | |||
<s-input v-model="userInfo.name"></s-input> | |||
</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 } from "@/api"; | |||
import { useDictStore } from "@/stores/modules"; | |||
const dictStore = useDictStore(); //字典仓库 | |||
// 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 genderOptions = ref([ | |||
{ | |||
label: "未知", | |||
value: "0" | |||
}, | |||
{ | |||
label: "男", | |||
value: "1" | |||
}, | |||
{ | |||
label: "女", | |||
value: "2" | |||
} | |||
]); | |||
onMounted(() => { | |||
// 初始化 | |||
userInfo.value.gender = userInfo.value.gender ? userInfo.value.gender : genderOptions.value[0].value; | |||
}); | |||
</script> | |||
<style lang="scss" scoped> | |||
:deep(.el-input__wrapper) { | |||
width: 100% !important; | |||
} | |||
:deep(.el-date-editor.el-input) { | |||
width: 92% !important; | |||
} | |||
</style> |
@@ -0,0 +1,119 @@ | |||
<!-- | |||
* @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("请选择性别")], | |||
// age: [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({ personId: props.record.personId }).then(res => { | |||
sysUserProps.record = res.data; | |||
}); | |||
} | |||
} | |||
// 提交数据(新增/编辑) | |||
const sysUserFormRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
sysUserFormRef.value?.validate(async valid => { | |||
if (!valid) return; //表单验证失败 | |||
//提交表单 | |||
console.log(sysUserProps); | |||
debugger; | |||
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> |
@@ -0,0 +1,108 @@ | |||
<!-- | |||
* @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 style="margin-top: 30px"> | |||
<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> |
@@ -4,35 +4,78 @@ | |||
* @Date: 2024-7-15 | |||
--> | |||
<template> | |||
<div class="table-box"> | |||
<ProTable ref="proTable" title="人员管理" :columns="columns" :request-api="userManagePersonnelApi.page"> | |||
<!-- 表格 header 按钮 --> | |||
<template #tableHeader="scope"> | |||
<s-button v-auth="userPerButtonCode.add" suffix="人员" /> | |||
<s-button | |||
v-auth="userPerButtonCode.delete" | |||
type="danger" | |||
:opt="FormOptEnum.DELETE" | |||
plain | |||
suffix="人员" | |||
:disabled="!scope.isSelected" | |||
@click="onDelete(scope.selectedListIds, '删除所选人员')" | |||
/> | |||
<div class="main-box"> | |||
<TreeFilter | |||
ref="treeFilter" | |||
label="personSetName" | |||
id="personSetId" | |||
width="300px" | |||
:show-all="false" | |||
:request-api="userManageClassManageApi.page" | |||
@change="changeTreeFilter" | |||
> | |||
<template v-slot:header> | |||
<s-button suffix="班级" @click="addClass(FormOptEnum.ADD)" style="margin-bottom: 15px" /> | |||
</template> | |||
<!-- 表格操作栏 --> | |||
<template #operation="scope"> | |||
<el-space> | |||
<s-button v-auth="userPerButtonCode.edit" link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | |||
<template v-slot:label="{ row }"> | |||
<span class="custom-tree-node"> | |||
<span>{{ row.node.label }}</span> | |||
<span> | |||
<a @click="addClass(FormOptEnum.EDIT, row.node.data)"> | |||
<el-icon><Edit /></el-icon> | |||
</a> | |||
<a style="margin-left: 8px" @click="addDelete(row.node.data.personSetId, '删除班级')"> | |||
<el-icon><Delete /></el-icon> | |||
</a> | |||
<a style="margin-left: 8px"> | |||
<el-icon><Setting /></el-icon> | |||
</a> | |||
</span> | |||
</span> | |||
</template> | |||
</TreeFilter> | |||
<div class="table-box"> | |||
<ProTable ref="proTable" title="人员管理" :columns="columns" :request-api="userManagePersonnelApi.page"> | |||
<!-- 表格 header 按钮 --> | |||
<template #tableHeader="scope"> | |||
<s-button v-auth="userPerButtonCode.add" suffix="人员" @click="onOpen(FormOptEnum.ADD)" /> | |||
<s-button | |||
v-auth="userPerButtonCode.delete" | |||
link | |||
type="danger" | |||
:opt="FormOptEnum.DELETE" | |||
@click="onDelete([scope.row.id], `删除【${scope.row.account}】人员`)" | |||
plain | |||
suffix="人员" | |||
:disabled="!scope.isSelected" | |||
@click="onDelete(scope.selectedListIds, '删除所选人员')" | |||
/> | |||
</el-space> | |||
</template> | |||
</ProTable> | |||
</template> | |||
<!-- 表格操作栏 --> | |||
<template #operation="scope"> | |||
<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.id], `删除【${scope.row.account}】人员`)" | |||
/> | |||
<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.DeleteFace)">{{ cmdEnum.DeleteFace }}</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> | |||
</template> | |||
</ProTable> | |||
</div> | |||
<!-- 人员新增/编辑表单 --> | |||
<Form ref="formRef" /> | |||
<!-- 班级新增/编辑表单 --> | |||
<FormClass ref="formRefC" /> | |||
<!-- 预览头像 --> | |||
<el-dialog v-model="visible" title="查看头像" width="830px" :before-close="handleClose"> | |||
<div> | |||
@@ -47,14 +90,19 @@ | |||
</div> | |||
</template> | |||
<script setup lang="tsx" name="SysUserPersonnel"> | |||
import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel } from "@/api"; | |||
import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel,userManageClassManageApi } from "@/api"; | |||
import { useHandleData } from "@/hooks/useHandleData"; | |||
import { FormOptEnum } from "@/enums"; | |||
import Form from "./components/form/index.vue"; | |||
import FormClass from "./components/formClass/index.vue"; | |||
import { ArrowDown } from "@element-plus/icons-vue"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
import TreeFilter from "@/components/TreeFilter/index.vue"; | |||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||
const faceUrl = ref(''); | |||
const visible = ref(false); //是否显示表单 | |||
const visible = ref(false); //是否显示人员表单 | |||
const proTable = ref<ProTableInstance>(); | |||
const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null); | |||
// 表格配置项 | |||
const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
{ | |||
@@ -62,7 +110,7 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
label: "头像", | |||
render: scope => { | |||
return ( | |||
<img src={scope.row.faces[0].faceUrl} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px' alt=''/> | |||
<img src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px' alt=''/> | |||
); | |||
} | |||
}, | |||
@@ -79,10 +127,10 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [ | |||
label: "年龄" | |||
}, | |||
{ | |||
prop: "personSetName", | |||
label: "所属分组", | |||
prop: "name", | |||
label: "所属班级", | |||
render: scope => { | |||
return scope.row.personSets[0].personSetName | |||
return scope.row.personSets.length > 0 ? scope.row.personSets[0].name : '' | |||
} | |||
}, | |||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
@@ -96,32 +144,112 @@ const handleClose = () => { | |||
visible.value = false; | |||
}; | |||
// 人员表单引用 | |||
const formRef = ref<InstanceType<typeof Form> | null>(null); | |||
// 班级表单引用 | |||
const formRefC = ref<InstanceType<typeof FormClass> | null>(null); | |||
/** | |||
* 打开表单 | |||
* @param opt 操作类型 | |||
* @param record 记录 | |||
*/ | |||
function onOpen(opt: FormOptEnum, record: {} | SysUser.SysUserInfo = {}) { | |||
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: 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) { | |||
// 二次确认 => 请求api => 刷新表格 | |||
await useHandleData(userManagePersonnelApi.delete, { ids }, msg); | |||
proTable.value?.refresh(); //刷新表格 | |||
RefreshTable(); //刷新表格 | |||
} | |||
// 刷新表格 | |||
const RefreshTable = () => { | |||
proTable.value?.refresh(); | |||
treeFilter.value?.refresh(); //刷新树形筛选器 | |||
} | |||
/** 更多下拉菜单命令枚举 */ | |||
enum cmdEnum { | |||
DeleteFace = "删除人脸", | |||
UnderpantsUnBinding = "底库解绑" | |||
} | |||
/** 下拉菜单参数接口 */ | |||
interface Command { | |||
row: SysUserPersonnel.SysUserPerInfo; | |||
command: cmdEnum; | |||
} | |||
/**配置command的参数 */ | |||
function command(row: SysUserPersonnel.SysUserPerInfo, command: cmdEnum): Command { | |||
return { | |||
row: row, | |||
command: command | |||
}; | |||
} | |||
/** | |||
* 更多下拉菜单点击事件 | |||
* @param command | |||
*/ | |||
function handleCommand(command: Command) { | |||
switch (command.command) { | |||
case cmdEnum.DeleteFace: | |||
break | |||
case cmdEnum.UnderpantsUnBinding: | |||
break; | |||
} | |||
} | |||
/** 部门切换 */ | |||
function changeTreeFilter(val: number | string) { | |||
console.log(proTable.value,".........",val); | |||
proTable.value!.pageable.pageNum = 1; | |||
// if (val != "") { | |||
// // 如果传入的val不为空,则将val赋值给initParam.parentId | |||
// initParam.orgId = val; | |||
// } else { | |||
// // 否则将initParam.parentId赋值为0 | |||
// initParam.orgId = 0; | |||
// } | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.table-box { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.custom-tree-node { | |||
display: flex; | |||
flex: 1; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding-right: 8px; | |||
font-size: 14px; | |||
} | |||
</style> |