Ferat
This commit is contained in:
182
src/views/stuwork/dormbuilding/emptyRoomDialog.vue
Normal file
182
src/views/stuwork/dormbuilding/emptyRoomDialog.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
v-model="visible"
|
||||
:width="1000"
|
||||
:close-on-click-modal="false"
|
||||
draggable>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
v-loading="loading"
|
||||
border
|
||||
style="width: 100%">
|
||||
<!-- 空宿舍列表：序号、宿舍、几人间、是否有空调 -->
|
||||
<template v-if="roomType === 'all'">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="roomNo" label="宿舍" show-overflow-tooltip align="center" />
|
||||
<el-table-column prop="bedNum" label="几人间" show-overflow-tooltip align="center" />
|
||||
<el-table-column prop="isHaveAir" label="是否有空调" show-overflow-tooltip align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.isHaveAir === '1' || scope.row.isHaveAir === 1 ? '已安装' : '未安装' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<!-- 空几人宿舍列表：宿舍、床位1-6、是否有空调 -->
|
||||
<template v-else>
|
||||
<el-table-column prop="roomNo" label="宿舍" show-overflow-tooltip align="center" />
|
||||
<el-table-column prop="bedNo1" label="床位1" show-overflow-tooltip align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.bedNo1 || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bedNo2" label="床位2" show-overflow-tooltip align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.bedNo2 || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bedNo3" label="床位3" show-overflow-tooltip align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.bedNo3 || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bedNo4" label="床位4" show-overflow-tooltip align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.bedNo4 || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bedNo5" label="床位5" show-overflow-tooltip align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.bedNo5 || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bedNo6" label="床位6" show-overflow-tooltip align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.bedNo6 || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isHaveAir" label="是否有空调" show-overflow-tooltip align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.isHaveAir === '1' || scope.row.isHaveAir === 1 ? '已安装' : '未安装' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-if="isPage"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="pagination" />
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">关 闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="EmptyRoomDialog">
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { queryEmptyRoomWithBuildingNo, queryEmtryRoomDetail } from '/@/api/stuwork/dormroomstudent'
|
||||
import { useMessage } from '/@/hooks/message'
|
||||
|
||||
// 定义变量内容
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const buildingNo = ref('')
|
||||
const roomType = ref('')
|
||||
const tableData = ref<any[]>([])
|
||||
const isPage = ref(false)
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
layout: 'total, sizes, prev, pager, next, jumper'
|
||||
})
|
||||
|
||||
// 对话框标题
|
||||
const dialogTitle = computed(() => {
|
||||
if (roomType.value === 'all') {
|
||||
return `空宿舍列表 - ${buildingNo.value}号楼`
|
||||
} else {
|
||||
return `空${roomType.value}人宿舍列表 - ${buildingNo.value}号楼`
|
||||
}
|
||||
})
|
||||
|
||||
// 打开对话框
|
||||
const openDialog = async (building: string, type: string) => {
|
||||
visible.value = true
|
||||
buildingNo.value = building
|
||||
roomType.value = type
|
||||
tableData.value = []
|
||||
pagination.current = 1
|
||||
pagination.total = 0
|
||||
|
||||
await loadData()
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
let res: any
|
||||
if (roomType.value === 'all') {
|
||||
// 查询所有空宿舍
|
||||
res = await queryEmptyRoomWithBuildingNo(buildingNo.value)
|
||||
} else {
|
||||
// 查询空几人宿舍
|
||||
res = await queryEmtryRoomDetail(buildingNo.value, roomType.value)
|
||||
}
|
||||
|
||||
// 处理返回数据
|
||||
if (res.data) {
|
||||
if (Array.isArray(res.data)) {
|
||||
tableData.value = res.data
|
||||
isPage.value = false
|
||||
} else if (res.data.records && Array.isArray(res.data.records)) {
|
||||
tableData.value = res.data.records
|
||||
pagination.total = res.data.total || 0
|
||||
isPage.value = true
|
||||
} else if (res.data.list && Array.isArray(res.data.list)) {
|
||||
tableData.value = res.data.list
|
||||
isPage.value = false
|
||||
} else {
|
||||
tableData.value = []
|
||||
isPage.value = false
|
||||
}
|
||||
} else {
|
||||
tableData.value = []
|
||||
isPage.value = false
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('加载空宿舍列表失败', err)
|
||||
useMessage().error(err.msg || '加载失败')
|
||||
tableData.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 分页大小改变
|
||||
const sizeChangeHandle = (val: number) => {
|
||||
pagination.size = val
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 当前页改变
|
||||
const currentChangeHandle = (val: number) => {
|
||||
pagination.current = val
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
openDialog
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user