wwp 4ヶ月前
コミット
873624aaf3
11個のファイルの変更439行の追加506行の削除
  1. +2
    -2
      SafeCampus.WEB/src/api/modules/usermanage/dormitory.ts
  2. +29
    -9
      SafeCampus.WEB/src/components/Selectors/ClassUserselector/index.vue
  3. +2
    -0
      SafeCampus.WEB/src/components/Selectors/ClassUserselector/interface.ts
  4. +2
    -1
      SafeCampus.WEB/src/views/sysconfig/ability/index.vue
  5. +0
    -137
      SafeCampus.WEB/src/views/userManage/dormitory/components/form/form_basic.vue
  6. +51
    -49
      SafeCampus.WEB/src/views/userManage/dormitory/components/form/index.vue
  7. +0
    -107
      SafeCampus.WEB/src/views/userManage/dormitory/components/formClass/index.vue
  8. +123
    -0
      SafeCampus.WEB/src/views/userManage/dormitory/components/formDormitory/index.vue
  9. +0
    -116
      SafeCampus.WEB/src/views/userManage/dormitory/components/formTeacher/index.vue
  10. +144
    -0
      SafeCampus.WEB/src/views/userManage/dormitory/components/formUser/index.vue
  11. +86
    -85
      SafeCampus.WEB/src/views/userManage/dormitory/index.vue

+ 2
- 2
SafeCampus.WEB/src/api/modules/usermanage/dormitory.ts ファイルの表示

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


+ 29
- 9
SafeCampus.WEB/src/components/Selectors/ClassUserselector/index.vue ファイルの表示

@@ -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(); //刷新表格
}
}


+ 2
- 0
SafeCampus.WEB/src/components/Selectors/ClassUserselector/interface.ts ファイルの表示

@@ -40,6 +40,8 @@ export interface UserSelectTableInitParams {
positionId?: number | string | null;
/** 角色ID */
roleId?: number | string | null;
// 班级ID
personSetId?: number | string | null;
}

/**


+ 2
- 1
SafeCampus.WEB/src/views/sysconfig/ability/index.vue ファイルの表示

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


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

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

+ 51
- 49
SafeCampus.WEB/src/views/userManage/dormitory/components/form/index.vue ファイルの表示

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

// 暴露给父组件的方法


+ 0
- 107
SafeCampus.WEB/src/views/userManage/dormitory/components/formClass/index.vue ファイルの表示

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

+ 123
- 0
SafeCampus.WEB/src/views/userManage/dormitory/components/formDormitory/index.vue ファイルの表示

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

+ 0
- 116
SafeCampus.WEB/src/views/userManage/dormitory/components/formTeacher/index.vue ファイルの表示

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

+ 144
- 0
SafeCampus.WEB/src/views/userManage/dormitory/components/formUser/index.vue ファイルの表示

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

+ 86
- 85
SafeCampus.WEB/src/views/userManage/dormitory/index.vue ファイルの表示

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


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