@@ -56,8 +56,8 @@ const userManageDormitoryApi = { | |||
return httpChamber.delete("delete", params); | |||
}, | |||
/**寝室分配人员*/ | |||
assignPersonnel(params: SysDormitory.ChamberPersonnel) { | |||
return httpChamber.post("assignPersonnel", params); | |||
setAssignPerson(params: SysDormitory.ChamberPersonnel) { | |||
return httpChamber.post("setAssignPerson", params); | |||
} | |||
/** 获取单页详情 */ | |||
// detail(params: ReqId) { | |||
@@ -12,8 +12,9 @@ | |||
<el-tab-pane :label="`${orgName}`" class="ml-5px mr-5px" name="org"> | |||
<el-scrollbar max-height="650px"> | |||
<TreeFilter | |||
label="name" | |||
class="filterWidth" | |||
label="personSetName" | |||
id="personSetId" | |||
:title="`${orgName}列表`" | |||
:show-all="!biz" | |||
:default-expand-all="false" | |||
@@ -91,7 +92,7 @@ | |||
</form-container> | |||
</template> | |||
<script setup lang="ts" name="UserSelector"> | |||
<script setup lang="tsx" name="UserSelector"> | |||
import { SysUser, SysPosition, SysRole } from "@/api"; | |||
import { UserSelectProps, UserSelectTableInitParams } from "./interface"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
@@ -125,8 +126,24 @@ const chooseTable = ref<ProTableInstance>(); | |||
const columns: ColumnProps<SysUser.SysUserInfo>[] = [ | |||
{ type: "selection", fixed: "left", width: 50 }, | |||
{ prop: "operation", label: "操作", width: 80, fixed: "left" }, | |||
{ prop: "account", label: "账号", search: { el: "input", span: 2 } }, | |||
{ prop: "name", label: "姓名" } | |||
{ prop: "personSetName", label: "班级" }, | |||
{ | |||
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: "personName", | |||
label: "姓名", | |||
render: row => { | |||
return row.row.name; | |||
}, | |||
search: { el: "input", span: 2 } | |||
} | |||
]; | |||
/** 显示选择器 */ | |||
@@ -146,6 +163,7 @@ function onClose() { | |||
/** 提交数据 */ | |||
function handleOk() { | |||
visible.value = false; | |||
console.log(chooseData.value,'提交得数据') | |||
emit("successful", chooseData.value); | |||
} | |||
@@ -154,9 +172,9 @@ function changeOrgTreeFilter(val: number | string) { | |||
userTable.value!.pageable.pageNum = 1; | |||
if (val != "") { | |||
// 如果传入的val不为空 | |||
initParam.orgId = val; | |||
initParam.personSetId = val; | |||
} else { | |||
initParam.orgId = null; | |||
initParam.personSetId = null; | |||
} | |||
} | |||
@@ -197,7 +215,7 @@ function addRecords(records: any[]) { | |||
chooseDataTmp.value = chooseData.value; | |||
} else { | |||
//如果是多选,先判断已添加列表是否有重复,有则过滤掉,没有则直接添加 | |||
records = records.filter(item => !chooseData.value.find(it => it.id == item.id)); | |||
records = records.filter(item => !chooseData.value.find(it => it.personId == item.personId)); | |||
if (props.maxCount && props.maxCount < records.length + chooseData.value.length) { | |||
ElMessage.warning("最多选择" + props.maxCount + "条"); | |||
return; | |||
@@ -217,9 +235,11 @@ function delRecords(records: any[]) { | |||
/** 搜索记录 */ | |||
function searchRecords() { | |||
if (chooseTable.value?.searchParam?.account) { | |||
console.log(1111) | |||
console.log(chooseTable.value) | |||
if (chooseTable.value?.searchParam?.personName) { | |||
//搜索account符合的记录 | |||
chooseDataTmp.value = chooseDataTmp.value.filter(item => item.account.includes(chooseTable.value?.searchParam.account)); //过滤掉已选中的 | |||
chooseDataTmp.value = chooseDataTmp.value.filter(item => item.name.includes(chooseTable.value?.searchParam.personName)); //过滤掉已选中的 | |||
chooseTable.value?.refresh(); //刷新表格 | |||
} | |||
} | |||
@@ -40,6 +40,8 @@ export interface UserSelectTableInitParams { | |||
positionId?: number | string | null; | |||
/** 角色ID */ | |||
roleId?: number | string | null; | |||
// 班级ID | |||
personSetId?: number | string | null; | |||
} | |||
/** | |||
@@ -133,8 +133,9 @@ function changeVideo(val: number | string) { | |||
// 获取配置树 | |||
let warnGroupList = ref<any>([]); | |||
function getwarnGroup(id) { | |||
let sid:any = id ? id : null; | |||
setTimeout(async () => { | |||
await abilityApi.warnGroup({cameraId: id}).then((res:any) => { | |||
await abilityApi.warnGroup({cameraId: sid}).then((res:any) => { | |||
let { code, data } = res; | |||
if (code == 200) { | |||
warnGroupList.value = data; | |||
@@ -1,137 +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-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> |
@@ -5,97 +5,100 @@ | |||
--> | |||
<template> | |||
<div> | |||
<form-container v-model="visible" :title="`${sysUserProps.opt}人员`" form-size="800px" @close="onClose"> | |||
<form-container v-model="visibleChamber" :title="`${SysDormitoryProps.opt}寝室`" form-size="400px" @close="onClose"> | |||
<el-form | |||
ref="sysUserFormRef" | |||
ref="SysDormitoryFormRef" | |||
:rules="rules" | |||
:disabled="sysUserProps.disabled" | |||
:model="sysUserProps.record" | |||
:hide-required-asterisk="sysUserProps.disabled" | |||
:disabled="SysDormitoryProps.disabled" | |||
:model="SysDormitoryProps.record" | |||
:hide-required-asterisk="SysDormitoryProps.disabled" | |||
label-width="auto" | |||
label-suffix=" :" | |||
> | |||
<el-tabs v-model="activeName"> | |||
<Basic v-model="sysUserProps.record"></Basic> | |||
</el-tabs> | |||
<div> | |||
<el-row :gutter="16"> | |||
<el-col :span="22"> | |||
<s-form-item label="寝室名称" prop="name"> | |||
<s-input v-model="SysDormitoryProps.record.name"></s-input> | |||
</s-form-item> | |||
</el-col> | |||
<!-- <el-col :span="22"> | |||
<s-form-item label="性别" prop="gender"> | |||
<s-radio-group v-model="SysDormitoryProps.record.gender" :options="genderOptions" /> | |||
</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> | |||
<el-button v-show="!SysDormitoryProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||
</template> | |||
</form-container> | |||
</div> | |||
</template> | |||
<script setup lang="ts" name="SysUserPersonnelForm"> | |||
import { SysUserPersonnel, userManagePersonnelApi } from "@/api"; | |||
<script setup lang="ts" name="SysDormitoryformChamber"> | |||
import { ref } from "vue"; | |||
import { SysDormitory, userManageDormitoryApi } from "@/api"; | |||
import { FormOptEnum } from "@/enums"; | |||
import { required } from "@/utils/formRules"; | |||
import { FormInstance } from "element-plus"; | |||
import Basic from "./form_basic.vue"; | |||
const visible = ref(false); //是否显示表单 | |||
const activeName = ref("basic"); | |||
const visibleChamber = ref(false); //是否显示表单 | |||
const genderOptions = [ | |||
{ | |||
label: "男", | |||
value: true | |||
}, | |||
{ | |||
label: "女", | |||
value: false | |||
} | |||
]; | |||
// 表单参数 | |||
const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.SysUserPerInfo>>({ | |||
const SysDormitoryProps = reactive<FormProps.Base<SysDormitory.ChamberInfo>>({ | |||
opt: FormOptEnum.ADD, | |||
record: {}, | |||
disabled: false | |||
}); | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
// personId: [required("请输入人员ID")], | |||
name: [required("请输入姓名")], | |||
gender: [required("请选择性别")], | |||
faces: [required("请上传人脸图片")], | |||
phone: [required("请输入手机号")] | |||
// extData: [required("请输入扩展数据")] | |||
name: [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: any) => { | |||
sysUserProps.record = res.data; | |||
}); | |||
} | |||
function onOpen(props: FormProps.Base<SysDormitory.ChamberInfo>) { | |||
Object.assign(SysDormitoryProps, props); //合并参数 | |||
visibleChamber.value = true; //显示表单 | |||
SysDormitoryProps.record = props.record; | |||
} | |||
// 提交数据(新增/编辑) | |||
const sysUserFormRef = ref<FormInstance>(); | |||
const SysDormitoryFormRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
sysUserFormRef.value?.validate(async valid => { | |||
SysDormitoryFormRef.value?.validate(async valid => { | |||
if (!valid) return; //表单验证失败 | |||
console.log(SysDormitoryProps.record); | |||
//提交表单 | |||
if (sysUserProps.record.faces.length === 0) { | |||
return ElMessage.error("请上传人脸图片"); | |||
} | |||
if (sysUserProps.record.personId) { | |||
await userManagePersonnelApi | |||
.update(sysUserProps.record) | |||
if (SysDormitoryProps.record.id) { | |||
await userManageDormitoryApi | |||
.update(SysDormitoryProps.record) | |||
.then(() => { | |||
sysUserProps.successful!(); //调用父组件的successful方法 | |||
SysDormitoryProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} else { | |||
await userManagePersonnelApi | |||
.add(sysUserProps.record) | |||
await userManageDormitoryApi | |||
.add(SysDormitoryProps.record) | |||
.then(() => { | |||
sysUserProps.successful!(); //调用父组件的successful方法 | |||
SysDormitoryProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
@@ -106,8 +109,7 @@ async function handleSubmit() { | |||
/** 关闭表单*/ | |||
function onClose() { | |||
visible.value = false; | |||
activeName.value = "basic"; | |||
visibleChamber.value = false; | |||
} | |||
// 暴露给父组件的方法 | |||
@@ -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 { SysDormitory, 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<SysDormitory.DormitoryInfo>>({ | |||
opt: FormOptEnum.ADD, | |||
record: {}, | |||
disabled: false | |||
}); | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
personSetName: [required("请输入班级名称")] | |||
}); | |||
/** | |||
* 打开表单 | |||
* @param props 表单参数 | |||
*/ | |||
function onOpen(props: FormProps.Base<SysDormitory.DormitoryInfo>) { | |||
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> |
@@ -0,0 +1,123 @@ | |||
<!-- | |||
* @Description: 表单 | |||
* @Author: syy | |||
* @Date: 2023-12-15 15:45:59 | |||
--> | |||
<template> | |||
<div> | |||
<form-container v-model="visibleDormitory" :title="`${sysDormitoryProps.opt}宿舍楼`" form-size="400px" @close="onClose"> | |||
<el-form | |||
ref="sysDormitoryFormRef" | |||
:rules="rules" | |||
:disabled="sysDormitoryProps.disabled" | |||
:model="sysDormitoryProps.record" | |||
:hide-required-asterisk="sysDormitoryProps.disabled" | |||
label-width="auto" | |||
label-suffix=" :" | |||
> | |||
<div> | |||
<el-row :gutter="16"> | |||
<el-col :span="22"> | |||
<s-form-item label="宿舍楼名称" prop="name"> | |||
<s-input v-model="sysDormitoryProps.record.name"></s-input> | |||
</s-form-item> | |||
</el-col> | |||
<el-col :span="22"> | |||
<s-form-item label="性别" prop="gender"> | |||
<s-radio-group v-model="sysDormitoryProps.record.gender" :options="genderOptions" /> | |||
</s-form-item> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</el-form> | |||
<template #footer> | |||
<el-button @click="onClose"> 取消 </el-button> | |||
<el-button v-show="!sysDormitoryProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||
</template> | |||
</form-container> | |||
</div> | |||
</template> | |||
<script setup lang="ts" name="SysDormitoryformClass"> | |||
import { ref } from "vue"; | |||
import { SysDormitory, userManageDormitoryApi } from "@/api"; | |||
import { FormOptEnum } from "@/enums"; | |||
import { required } from "@/utils/formRules"; | |||
import { FormInstance } from "element-plus"; | |||
const visibleDormitory = ref(false); //是否显示表单 | |||
const genderOptions = [ | |||
{ | |||
label: "男", | |||
value: true | |||
}, | |||
{ | |||
label: "女", | |||
value: false | |||
} | |||
]; | |||
// 表单参数 | |||
const sysDormitoryProps = reactive<FormProps.Base<SysDormitory.DormitoryInfo>>({ | |||
opt: FormOptEnum.ADD, | |||
record: {}, | |||
disabled: false | |||
}); | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
name: [required("请输入宿舍楼名称")], | |||
gender: [required("请选择性别")] | |||
}); | |||
/** | |||
* 打开表单 | |||
* @param props 表单参数 | |||
*/ | |||
function onOpen(props: FormProps.Base<SysDormitory.DormitoryInfo>) { | |||
Object.assign(sysDormitoryProps, props); //合并参数 | |||
visibleDormitory.value = true; //显示表单 | |||
sysDormitoryProps.record = props.record; | |||
} | |||
// 提交数据(新增/编辑) | |||
const sysDormitoryFormRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
sysDormitoryFormRef.value?.validate(async valid => { | |||
if (!valid) return; //表单验证失败 | |||
// sysDormitoryProps.record.name = sysDormitoryProps.record.name; | |||
//提交表单 | |||
if (sysDormitoryProps.record.id) { | |||
// sysDormitoryProps.record.id = sysDormitoryProps.record.personSetId; | |||
await userManageDormitoryApi | |||
.updateDormitory(sysDormitoryProps.record) | |||
.then(() => { | |||
sysDormitoryProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} else { | |||
await userManageDormitoryApi | |||
.addDormitory(sysDormitoryProps.record) | |||
.then(() => { | |||
sysDormitoryProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} | |||
}); | |||
} | |||
/** 关闭表单*/ | |||
function onClose() { | |||
visibleDormitory.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> |
@@ -0,0 +1,144 @@ | |||
<!-- | |||
* @Description: 表单 | |||
* @Author: huguodong | |||
* @Date: 2023-12-15 15:45:28 | |||
!--> | |||
<template> | |||
<div> | |||
<form-container v-model="visible" title="人员选择" form-size="600px"> | |||
<el-form | |||
ref="userFormRef" | |||
:rules="rules" | |||
:disabled="liveUserProps.disabled" | |||
:model="liveUserProps.record" | |||
:hide-required-asterisk="liveUserProps.disabled" | |||
label-width="auto" | |||
label-suffix=" :" | |||
> | |||
<s-form-item label="分配人员" prop="userId"> | |||
<el-button link type="primary" @click="showSelector">选择</el-button> | |||
<el-tag v-if="liveUserProps.record.userId" class="ml-3px" type="warning" closable @close="removeDirector">{{ | |||
liveUserProps.record.userInfo?.name | |||
}}</el-tag> | |||
</s-form-item> | |||
</el-form> | |||
<template #footer> | |||
<el-button @click="onClose"> 取消 </el-button> | |||
<el-button v-show="!liveUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button> | |||
</template> | |||
</form-container> | |||
<user-selector | |||
multiple | |||
ref="userSelectorRef" | |||
:org-tree-api="sysOrgApi.tree" | |||
:user-selector-api="sysUserApi.selector" | |||
@successful="handleChooseUser" | |||
/> | |||
</div> | |||
</template> | |||
<script setup lang="ts"> | |||
import { SysOrg, SysUser, sysOrgApi, sysPositionApi, sysRoleApi, sysUserApi, monitorLIVEApi } from "@/api"; | |||
import { FormOptEnum, SysDictEnum } from "@/enums"; | |||
import { required } from "@/utils/formRules"; | |||
import { FormInstance } from "element-plus"; | |||
import { useDictStore } from "@/stores/modules"; | |||
import { UserSelectorInstance } from "@/components/Selectors/UserSelector/interface"; | |||
const visible = ref(false); //是否显示表单 | |||
const dictStore = useDictStore(); //字典仓库 | |||
// 表单参数 | |||
const liveUserProps = reactive<FormProps.Base<any>>({ | |||
opt: FormOptEnum.ADD, | |||
record: {}, | |||
disabled: false | |||
}); | |||
// 表单验证规则 | |||
const rules = reactive({ | |||
userId: [required("请选择人员")] | |||
}); | |||
/** | |||
* 打开表单 | |||
* @param props 表单参数 | |||
*/ | |||
function onOpen(props: FormProps.Base<any>) { | |||
Object.assign(liveUserProps, props); //合并参数 | |||
if (props.opt == FormOptEnum.ADD) { | |||
//如果是新增,设置默认值 | |||
} | |||
visible.value = true; //显示表单 | |||
if (props.record.pushUserId) { | |||
//如果传了id,就去请求api获取record | |||
liveUserProps.record.userId = props.record.pushUserId; | |||
liveUserProps.record.userInfo = props.record.sysUserItem; | |||
// sysOrgApi.detail({ id: props.record.id }).then(res => { | |||
// liveUserProps.record.userId = res.data; | |||
// }); | |||
} | |||
} | |||
// 提交数据(新增/编辑) | |||
const userFormRef = ref<FormInstance>(); | |||
/** 提交表单 */ | |||
async function handleSubmit() { | |||
userFormRef.value?.validate(async valid => { | |||
if (!valid) return; //表单验证失败 | |||
let params: any = { | |||
warnCode: "", | |||
userId: "" | |||
}; | |||
if (liveUserProps.opt == "预警推送人") { | |||
params.warnCode = liveUserProps.record.warnCode; | |||
params.userId = liveUserProps.record.userId; | |||
//提交表单 | |||
await monitorLIVEApi | |||
.setWarningPushPerson(params) | |||
.then(() => { | |||
liveUserProps.successful!(); //调用父组件的successful方法 | |||
}) | |||
.finally(() => { | |||
onClose(); | |||
}); | |||
} | |||
}); | |||
} | |||
/** 关闭表单*/ | |||
function onClose() { | |||
visible.value = false; | |||
liveUserProps.record.userId = null; | |||
liveUserProps.record.userInfo = null; | |||
} | |||
const userSelectorRef = ref<UserSelectorInstance>(); //用户选择器引用 | |||
/** 显示用户选择器 */ | |||
function showSelector() { | |||
//将liveUserProps.record.userInfo转为 SysUser.SysUserInfo[]类型 | |||
const userInfo = liveUserProps.record.userInfo ? [liveUserProps.record.userInfo] : []; | |||
userSelectorRef.value?.showSelector(userInfo); | |||
} | |||
/** 选择用户 */ | |||
function handleChooseUser(data: SysUser.SysUserInfo[]) { | |||
// 选择用户后,将用户id赋值给liveUserProps.record.userId | |||
if (data.length > 0) { | |||
liveUserProps.record.userId = data[0].id; | |||
liveUserProps.record.userInfo = data[0]; | |||
} | |||
} | |||
/** 移除主管 */ | |||
function removeDirector() { | |||
liveUserProps.record.userId = null; | |||
liveUserProps.record.userInfo = null; | |||
} | |||
// 暴露给父组件的方法 | |||
defineExpose({ | |||
onOpen | |||
}); | |||
</script> | |||
<style lang="scss" scoped></style> |
@@ -20,12 +20,12 @@ | |||
</template> | |||
<template v-slot:label="{ row }"> | |||
<span class="custom-tree-node"> | |||
<span>{{ row.node.label }}</span> | |||
<span v-if="row.node.label != '全部'"> | |||
<span>{{ row.node.data.name }}</span> | |||
<span v-if="row.node.data.id != ''"> | |||
<a :title="FormOptEnum.EDIT" @click.stop="addDormitory(FormOptEnum.EDIT, row.node.data)"> | |||
<el-icon><Edit /></el-icon> | |||
</a> | |||
<a :title="FormOptEnum.DELETE" style="margin-left: 8px" @click.stop="addDelete(row.node.data.personSetId, '删除宿舍楼')"> | |||
<a :title="FormOptEnum.DELETE" style="margin-left: 8px" @click.stop="addDelete(row.node.data.id, '删除宿舍楼')"> | |||
<el-icon><Delete /></el-icon> | |||
</a> | |||
</span> | |||
@@ -33,10 +33,10 @@ | |||
</template> | |||
</TreeFilter> | |||
<div class="table-box"> | |||
<ProTable ref="proTable" title="寝室管理" :columns="columns" rowKey="personId" :request-api="userManageDormitoryApi.page"> | |||
<ProTable ref="proTable" title="寝室管理" :columns="columns" rowKey="id" :request-api="userManageDormitoryApi.page"> | |||
<!-- 表格 header 按钮 --> | |||
<template #tableHeader="scope"> | |||
<s-button v-auth="dormitoryButtonCode.add" suffix="寝室" @click="onOpen(FormOptEnum.ADD, { personSetId: personSetId })" /> | |||
<s-button v-auth="dormitoryButtonCode.add" suffix="寝室" @click="onOpen(FormOptEnum.ADD, { buildId: buildId, gender: buildGender })" /> | |||
<s-button | |||
v-auth="dormitoryButtonCode.delete" | |||
type="danger" | |||
@@ -51,34 +51,17 @@ | |||
<template #operation="scope"> | |||
<el-space> | |||
<s-button v-auth="dormitoryButtonCode.edit" link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" /> | |||
<s-button v-auth="dormitoryButtonCode.delete" link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.personId], `删除寝室`)" /> | |||
<!-- <el-dropdown @command="handleCommand"> | |||
<s-button v-auth="dormitoryButtonCode.delete" link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.id], `删除寝室`)" /> | |||
<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 :command="command(scope.row, cmdEnum.AddPerson)"> | |||
{{ cmdEnum.AddPerson }} | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</template> | |||
</el-dropdown> --> | |||
</el-dropdown> | |||
</el-space> | |||
</template> | |||
</ProTable> | |||
@@ -86,9 +69,19 @@ | |||
<!-- 寝室新增/编辑表单 --> | |||
<Form ref="formRef"></Form> | |||
<!-- 宿舍楼新增/编辑表单 --> | |||
<FormClass ref="formRefC" /> | |||
<FormDormitory ref="formRefD" /> | |||
<!-- 班主任绑定/修改 --> | |||
<FormTeacher ref="formRefT" /> | |||
<!-- :user-selector-params="{ orgId: orgId }" --> | |||
<ClassUserselector | |||
ref="userSelectorRef" | |||
:org-tree-api="userManageClassManageApi.page" | |||
:org-tree-props="{ label: 'name', children: 'children' }" | |||
:user-selector-api="userManagePersonnelApi.page" | |||
multiple | |||
@successful="handleChooseUser" | |||
> | |||
</ClassUserselector> | |||
<!-- <formUser ref="formRefU" /> --> | |||
<!-- 预览头像 --> | |||
<el-dialog v-model="visible" title="查看头像" width="830px" :before-close="handleClose"> | |||
<div style="display: flex; align-items: center; justify-content: center"> | |||
@@ -98,18 +91,19 @@ | |||
</div> | |||
</template> | |||
<script setup lang="tsx" name="SysDormitory"> | |||
import { userManageDormitoryApi,dormitoryButtonCode,SysDormitory } from "@/api"; | |||
import { userManageDormitoryApi,dormitoryButtonCode,SysDormitory,sysOrgApi,sysPositionApi,sysUserApi,sysRoleApi,userManagePersonnelApi,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 FormTeacher from "./components/formTeacher/index.vue"; | |||
import FormDormitory from "./components/formDormitory/index.vue"; | |||
import formUser from "./components/formUser/index.vue"; | |||
import { ArrowDown,More } from "@element-plus/icons-vue"; | |||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | |||
import TreeFilter from "@/components/TreeFilter/index.vue"; | |||
import { useUserStore } from "@/stores/modules"; | |||
import { TokenEnum } from "@/enums"; | |||
import type { UploadProps } from "element-plus"; | |||
import { UserSelectorInstance } from "@/components/Selectors/UserSelector/interface"; | |||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | |||
const faceUrl = ref(''); | |||
const visible = ref(false); //是否显示寝室表单 | |||
@@ -125,11 +119,14 @@ const columns: ColumnProps<SysDormitory.ChamberInfo>[] = [ | |||
label: "寝室名称" | |||
}, | |||
{ | |||
prop: "personId", | |||
label: "寝室数量" | |||
prop: "personCount", | |||
label: "人员数量" | |||
}, | |||
{ | |||
prop: "createTime", | |||
label: "创建时间" | |||
}, | |||
// { prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | |||
]; | |||
const viewHeadImage = (scope: any) => { | |||
faceUrl.value = scope.row.faces[0].faceUrl; | |||
@@ -139,20 +136,24 @@ const viewHeadImage = (scope: any) => { | |||
const handleClose = () => { | |||
visible.value = false; | |||
}; | |||
const tableData = ref([ | |||
{ | |||
name: "203", | |||
personId: "20", | |||
}, | |||
function handleChooseUser(data: SysUser.SysUserInfo[]) { | |||
console.log(data) | |||
]); | |||
//组装参数 | |||
const grantUser: SysRole.GrantUserReq = { | |||
// id: roleId.value, | |||
// grantInfoList: data.map(item => item.id) as number[] | string[], | |||
dormitoryId: chamberId.value, | |||
personIds: data.map(item => item.personId) as number[] | string[], | |||
}; | |||
userManageDormitoryApi.setAssignPerson(grantUser); | |||
} | |||
// 寝室表单引用 | |||
const formRef = ref<InstanceType<typeof Form> | null>(null); | |||
// 宿舍楼表单引用 | |||
const formRefC = ref<InstanceType<typeof FormClass> | null>(null); | |||
// 宿舍楼表单引用 | |||
const formRefT = ref<InstanceType<typeof FormTeacher> | null>(null); | |||
const formRefD = ref<InstanceType<typeof FormDormitory> | null>(null); | |||
// 人员引用 | |||
const formRefU = ref<InstanceType<typeof formUser> | null>(null); | |||
/** | |||
* 打开表单 | |||
@@ -160,7 +161,15 @@ const formRefT = ref<InstanceType<typeof FormTeacher> | null>(null); | |||
* @param record 记录 | |||
*/ | |||
function onOpen(opt: FormOptEnum, record: {} | SysDormitory.ChamberInfo = {}) { | |||
formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable }); | |||
if(buildId.value) { | |||
formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable }); | |||
} else { | |||
ElMessage({ | |||
message: '请选择宿舍楼', | |||
type: 'warning' | |||
}); | |||
} | |||
} | |||
/** | |||
@@ -170,7 +179,7 @@ function onOpen(opt: FormOptEnum, record: {} | SysDormitory.ChamberInfo = {}) { | |||
*/ | |||
function addDormitory(opt: FormOptEnum, record: {} | SysDormitory.DormitoryInfo = {}) { | |||
formRefC.value?.onOpen({ opt: opt, record: JSON.parse(JSON.stringify(record)), successful: RefreshTable }); | |||
formRefD.value?.onOpen({ opt: opt, record: JSON.parse(JSON.stringify(record)), successful: RefreshTree }); | |||
} | |||
/** | |||
* 宿舍楼删除 | |||
@@ -178,8 +187,8 @@ function onOpen(opt: FormOptEnum, record: {} | SysDormitory.ChamberInfo = {}) { | |||
*/ | |||
async function addDelete(id: string[],msg: string) { | |||
// 二次确认 => 请求api => 刷新表格 | |||
await useHandleData(userManageClassManageApi.delete, { id }, msg); | |||
RefreshTable(); //刷新表格 | |||
await useHandleData(userManageDormitoryApi.deleteDormitory, { id }, msg); | |||
RefreshTree(); //刷新表格 | |||
} | |||
/** | |||
@@ -195,21 +204,27 @@ function onOpen(opt: FormOptEnum, record: {} | SysDormitory.ChamberInfo = {}) { | |||
return | |||
} | |||
// 二次确认 => 请求api => 刷新表格 | |||
await useHandleData(userManagePersonnelApi.delete, {id: ids.join(",") }, msg); | |||
await useHandleData(userManageDormitoryApi.delete, {id: ids.join(",") }, msg); | |||
RefreshTable(); //刷新表格 | |||
} | |||
// 刷新表格 | |||
const RefreshTable = () => { | |||
proTable.value?.refresh(); | |||
} | |||
// 同时刷新列表和树并恢复初始状态 | |||
const RefreshTree = () => { | |||
proTable.value!.pageable.pageNum = 1; | |||
proTable.value!.searchParam.buildId = null; | |||
proTable.value!.searchParam.gender =null; | |||
treeFilter.value?.refresh(); //刷新树形筛选器 | |||
proTable.value!.search(); | |||
} | |||
/** 更多下拉菜单命令枚举 */ | |||
enum cmdEnum { | |||
AddFace = "添加人脸", | |||
UnderpantsUnBinding = "底库解绑" | |||
AddPerson = "添加人员", | |||
} | |||
/** 下拉菜单参数接口 */ | |||
interface Command { | |||
@@ -228,44 +243,30 @@ function command(row: SysDormitory.ChamberInfo, command: cmdEnum): Command { | |||
* 列表更多下拉菜单点击事件 | |||
* @param command | |||
*/ | |||
const personId = ref<number | string>(); //寝室id | |||
const userSelectorRef = ref<UserSelectorInstance>(); //用户选择器引用 | |||
const chamberId = 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() | |||
}) | |||
case cmdEnum.AddPerson: | |||
console.log(111) | |||
// addPerson(FormOptEnum.add, command.row) | |||
userSelectorRef.value?.showSelector(); //显示用户选择器 | |||
chamberId.value = command.row.id; //获取寝室id | |||
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>() | |||
function changeTreeFilter(val: number | string) { | |||
personSetId.value = val | |||
function addPerson(opt: FormOptEnum, record: {} | SysDormitory.DormitoryInfo = {}) { | |||
formRefU.value?.onOpen({ opt: opt, record: record, successful: RefreshTable }); | |||
} | |||
/** 宿舍楼切换 */ | |||
const buildId = ref<number | string>() | |||
const buildGender = ref<boolean>() | |||
function changeTreeFilter(val: number | string, data: any) { | |||
buildId.value = data.id; | |||
buildGender.value = data.gender; | |||
proTable.value!.pageable.pageNum = 1; | |||
proTable.value!.searchParam.personSetId = val; | |||
proTable.value!.searchParam.buildId = data.id; | |||
proTable.value!.searchParam.gender = data.gender; | |||
proTable.value!.search(); | |||
} | |||
</script> | |||