|
|
|
|
@ -1,19 +1,25 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 面包屑导航 -->
|
|
|
|
|
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
|
|
|
|
|
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
|
|
|
|
|
<el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
|
|
|
|
|
<el-breadcrumb-item>房间信息</el-breadcrumb-item>
|
|
|
|
|
</el-breadcrumb>
|
|
|
|
|
<!-- 房间信息管理卡片 -->
|
|
|
|
|
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 功能区-->
|
|
|
|
|
<!-- 功能区域 -->
|
|
|
|
|
<div style="margin: 10px 0">
|
|
|
|
|
<!-- 搜索区-->
|
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<div style="margin: 10px 0">
|
|
|
|
|
<!-- 搜索输入框 -->
|
|
|
|
|
<el-input v-model="search" clearable placeholder="请输入房间号" prefix-icon="Search" style="width: 20%"/>
|
|
|
|
|
<!-- 搜索按钮 -->
|
|
|
|
|
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
|
|
|
|
|
<!-- 重置按钮 -->
|
|
|
|
|
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
|
|
|
|
|
<!-- 右侧添加按钮 -->
|
|
|
|
|
<div style="float: right">
|
|
|
|
|
<el-tooltip content="添加" placement="top">
|
|
|
|
|
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
|
|
|
|
|
@ -21,29 +27,38 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 表格-->
|
|
|
|
|
<!-- 房间信息表格 -->
|
|
|
|
|
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
|
|
|
|
|
<!-- 序号列 -->
|
|
|
|
|
<el-table-column label="#" type="index"/>
|
|
|
|
|
<!-- 床位展开-->
|
|
|
|
|
<!-- 床位展开列 -->
|
|
|
|
|
<el-table-column type="expand">
|
|
|
|
|
<template #default="props">
|
|
|
|
|
<!-- 床位信息表单 -->
|
|
|
|
|
<el-form inline label-position="left">
|
|
|
|
|
<!-- 一号床位 -->
|
|
|
|
|
<el-form-item label="一号床位" class="item">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<!-- 已住学生标签 -->
|
|
|
|
|
<el-tag v-if="props.row.firstBed != null" disable-transitions type="primary"
|
|
|
|
|
>{{ props.row.firstBed }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
<div class="el-form--inline-icon">
|
|
|
|
|
<!-- 空床位添加图标 -->
|
|
|
|
|
<el-icon v-if="props.row.firstBed == null" @click="plusIcon(1, props.row)">
|
|
|
|
|
<plus/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 已住床位操作图标 -->
|
|
|
|
|
<div v-if="props.row.firstBed != null" class="el-form--inline-icon">
|
|
|
|
|
<!-- 查看详情图标 -->
|
|
|
|
|
<el-icon @click="detailIcon(1, props.row)">
|
|
|
|
|
<more-filled/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 编辑床位图标 -->
|
|
|
|
|
<el-icon @click="editIcon(1, props.row)">
|
|
|
|
|
<edit/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 删除床位图标（带确认提示） -->
|
|
|
|
|
<el-popconfirm title="确认删除？" @confirm="deleteStuBed(1, props.row)">
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-icon>
|
|
|
|
|
@ -55,22 +70,29 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 二号床位 -->
|
|
|
|
|
<el-form-item label="二号床位" class="item">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<!-- 已住学生标签 -->
|
|
|
|
|
<el-tag v-if="props.row.secondBed != null" disable-transitions type="primary"
|
|
|
|
|
>{{ props.row.secondBed }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
<div class="el-form--inline-icon">
|
|
|
|
|
<!-- 空床位添加图标 -->
|
|
|
|
|
<el-icon v-if="props.row.secondBed == null" @click="plusIcon(2, props.row)">
|
|
|
|
|
<plus/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 已住床位操作图标 -->
|
|
|
|
|
<div v-if="props.row.secondBed != null" class="el-form--inline-icon">
|
|
|
|
|
<!-- 查看详情图标 -->
|
|
|
|
|
<el-icon @click="detailIcon(2, props.row)">
|
|
|
|
|
<more-filled/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 编辑床位图标 -->
|
|
|
|
|
<el-icon @click="editIcon(2, props.row)">
|
|
|
|
|
<edit/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 删除床位图标（带确认提示） -->
|
|
|
|
|
<el-popconfirm title="确认删除？" @confirm="deleteStuBed(2, props.row)">
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-icon>
|
|
|
|
|
@ -82,22 +104,29 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 三号床位 -->
|
|
|
|
|
<el-form-item label="三号床位" class="item">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<!-- 已住学生标签 -->
|
|
|
|
|
<el-tag v-if="props.row.thirdBed != null" disable-transitions type="primary"
|
|
|
|
|
>{{ props.row.thirdBed }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
<div class="el-form--inline-icon">
|
|
|
|
|
<!-- 空床位添加图标 -->
|
|
|
|
|
<el-icon v-if="props.row.thirdBed == null" @click="plusIcon(3, props.row)">
|
|
|
|
|
<plus/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 已住床位操作图标 -->
|
|
|
|
|
<div v-if="props.row.thirdBed != null" class="el-form--inline-icon">
|
|
|
|
|
<!-- 查看详情图标 -->
|
|
|
|
|
<el-icon @click="detailIcon(3, props.row)">
|
|
|
|
|
<more-filled/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 编辑床位图标 -->
|
|
|
|
|
<el-icon @click="editIcon(3, props.row)">
|
|
|
|
|
<edit/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 删除床位图标（带确认提示） -->
|
|
|
|
|
<el-popconfirm title="确认删除？" @confirm="deleteStuBed(3, props.row)">
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-icon>
|
|
|
|
|
@ -109,22 +138,29 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 四号床位 -->
|
|
|
|
|
<el-form-item label="四号床位" class="item">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<!-- 已住学生标签 -->
|
|
|
|
|
<el-tag v-if="props.row.fourthBed != null" disable-transitions type="primary"
|
|
|
|
|
>{{ props.row.fourthBed }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
<div class="el-form--inline-icon">
|
|
|
|
|
<!-- 空床位添加图标 -->
|
|
|
|
|
<el-icon v-if="props.row.fourthBed == null" @click="plusIcon(4, props.row)">
|
|
|
|
|
<plus/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 已住床位操作图标 -->
|
|
|
|
|
<div v-if="props.row.fourthBed != null" class="el-form--inline-icon">
|
|
|
|
|
<!-- 查看详情图标 -->
|
|
|
|
|
<el-icon @click="detailIcon(4, props.row)">
|
|
|
|
|
<more-filled/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 编辑床位图标 -->
|
|
|
|
|
<el-icon @click="editIcon(4, props.row)">
|
|
|
|
|
<edit/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
<!-- 删除床位图标（带确认提示） -->
|
|
|
|
|
<el-popconfirm title="确认删除？" @confirm="deleteStuBed(4, props.row)">
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-icon>
|
|
|
|
|
@ -139,10 +175,15 @@
|
|
|
|
|
</el-form>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 房间号列 -->
|
|
|
|
|
<el-table-column label="房间号" prop="dormRoomId" sortable/>
|
|
|
|
|
<!-- 楼栋号列 -->
|
|
|
|
|
<el-table-column label="楼栋号" prop="dormBuildId" sortable/>
|
|
|
|
|
<!-- 楼层列 -->
|
|
|
|
|
<el-table-column label="楼层" prop="floorNum" sortable/>
|
|
|
|
|
<!-- 最多可住人数列 -->
|
|
|
|
|
<el-table-column label="最多可住人数" prop="maxCapacity"/>
|
|
|
|
|
<!-- 已住人数列（带筛选功能） -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
:filter-method="filterTag"
|
|
|
|
|
:filters="[
|
|
|
|
|
@ -157,11 +198,13 @@
|
|
|
|
|
prop="currentCapacity"
|
|
|
|
|
sortable
|
|
|
|
|
/>
|
|
|
|
|
<!-- 操作栏-->
|
|
|
|
|
<!-- 操作列 -->
|
|
|
|
|
<el-table-column label="操作" width="130px">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<!-- 编辑按钮 -->
|
|
|
|
|
<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"
|
|
|
|
|
></el-button>
|
|
|
|
|
<!-- 删除按钮（带确认提示） -->
|
|
|
|
|
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.dormRoomId)">
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-button icon="Delete" type="danger"></el-button>
|
|
|
|
|
@ -170,7 +213,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<!--分页-->
|
|
|
|
|
<!-- 分页组件 -->
|
|
|
|
|
<div style="margin: 10px 0">
|
|
|
|
|
<el-pagination
|
|
|
|
|
v-model:currentPage="currentPage"
|
|
|
|
|
@ -183,26 +226,33 @@
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 弹窗-->
|
|
|
|
|
<!-- 房间信息操作弹窗 -->
|
|
|
|
|
<div>
|
|
|
|
|
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
|
|
|
|
|
<!-- 房间信息表单 -->
|
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|
|
|
|
<!-- 楼栋号输入框 -->
|
|
|
|
|
<el-form-item label="楼栋号" prop="dormBuildId">
|
|
|
|
|
<el-input v-model.number="form.dormBuildId" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 楼层数输入框 -->
|
|
|
|
|
<el-form-item label="楼层数" prop="floorNum">
|
|
|
|
|
<el-input v-model.number="form.floorNum" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 房间号输入框 -->
|
|
|
|
|
<el-form-item label="房间号" prop="dormRoomId">
|
|
|
|
|
<el-input v-model.number="form.dormRoomId" :disabled="disabled" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 最多可住人数输入框 -->
|
|
|
|
|
<el-form-item label="最多可住人数" prop="maxCapacity">
|
|
|
|
|
<el-input v-model.number="form.maxCapacity" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 已住人数输入框 -->
|
|
|
|
|
<el-form-item label="已住人数" prop="currentCapacity">
|
|
|
|
|
<el-input v-model.number="form.currentCapacity" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 弹窗底部按钮 -->
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
|
@ -210,67 +260,85 @@
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- 床位 弹窗-->
|
|
|
|
|
<!-- 床位操作弹窗 -->
|
|
|
|
|
<el-dialog v-model="bedDialog" title="操作" width="30%" @close="cancel">
|
|
|
|
|
<!-- 床位信息表单 -->
|
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|
|
|
|
<!-- 楼栋号输入框（只读） -->
|
|
|
|
|
<el-form-item label="楼栋号" prop="dormBuildId">
|
|
|
|
|
<el-input v-model.number="form.dormBuildId" disabled="true" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 楼层数输入框（只读） -->
|
|
|
|
|
<el-form-item label="楼层数" prop="floorNum">
|
|
|
|
|
<el-input v-model.number="form.floorNum" disabled="true" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 房间号输入框（只读） -->
|
|
|
|
|
<el-form-item label="房间号" prop="dormRoomId">
|
|
|
|
|
<el-input v-model.number="form.dormRoomId" disabled="true" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 一号床位输入框 -->
|
|
|
|
|
<el-form-item v-if="this.bedNum === 1" label="床位(一)" prop="firstBed">
|
|
|
|
|
<el-input v-model.number="form.firstBed" placeholder="请输入学号" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 二号床位输入框 -->
|
|
|
|
|
<el-form-item v-if="this.bedNum === 2" label="床位(二)" prop="secondBed">
|
|
|
|
|
<el-input v-model.number="form.secondBed" placeholder="请输入学号" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 三号床位输入框 -->
|
|
|
|
|
<el-form-item v-if="this.bedNum === 3" label="床位(三)" prop="thirdBed">
|
|
|
|
|
<el-input v-model.number="form.thirdBed" placeholder="请输入学号" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 四号床位输入框 -->
|
|
|
|
|
<el-form-item v-if="this.bedNum === 4" label="床位(四)" prop="fourthBed">
|
|
|
|
|
<el-input v-model.number="form.fourthBed" placeholder="请输入学号" style="width: 80%"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 弹窗底部按钮 -->
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
|
<!-- 添加床位按钮 -->
|
|
|
|
|
<el-button v-if="this.judge === false" type="primary" @click="addStuBed">确 定</el-button>
|
|
|
|
|
<!-- 编辑床位按钮 -->
|
|
|
|
|
<el-button v-if="this.judge === true" type="primary" @click="editStuBed">确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- 学生信息弹窗-->
|
|
|
|
|
<!-- 学生信息详情弹窗 -->
|
|
|
|
|
<el-dialog v-model="stuInfoDialog" title="学生信息" width="20%" @close="cancel">
|
|
|
|
|
<!-- 学生信息表单 -->
|
|
|
|
|
<el-form ref="form" :model="form" label-width="120px">
|
|
|
|
|
<!-- 学号信息 -->
|
|
|
|
|
<el-form-item label="学号：" prop="username">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<span>{{ form.username }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 姓名信息 -->
|
|
|
|
|
<el-form-item label="姓名：" prop="name">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<span>{{ form.name }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 年龄信息 -->
|
|
|
|
|
<el-form-item label="年龄：" prop="age">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<span>{{ form.age }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 性别信息 -->
|
|
|
|
|
<el-form-item label="性别：" prop="gender">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<span>{{ form.gender }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 手机号信息 -->
|
|
|
|
|
<el-form-item label="手机号：" prop="phoneNum">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<span>{{ form.phoneNum }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 邮箱地址信息 -->
|
|
|
|
|
<el-form-item label="邮箱地址：" prop="email">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<span>{{ form.email }}</span>
|
|
|
|
|
@ -283,5 +351,7 @@
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 引入房间信息管理页面的JavaScript逻辑 -->
|
|
|
|
|
<script src="@/assets/js/RoomInfo.js"></script>
|
|
|
|
|
<!-- 引入房间信息管理页面样式 -->
|
|
|
|
|
<style scoped>@import '../assets/css/RoomInfo.css';</style>
|
FONTRESSORTIR
