代码提交
parent
6311b3ff8d
commit
9bbb67637c
@ -0,0 +1,12 @@
|
||||
import http from '@/api';
|
||||
import {ADMIN_MODULE} from '@/api/helper/prefix';
|
||||
import type {ComputerRoomRow} from "@/api/types/computerRoom/computerRoom";
|
||||
|
||||
/**
|
||||
* 获取机房列表
|
||||
* @param params
|
||||
* @returns {*}
|
||||
*/
|
||||
export const getListApi = (params: { substationId: number }) => {
|
||||
return http.get<ComputerRoomRow[]>(ADMIN_MODULE + `/computerRoom/list`, params);
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
// list或detail返回结构
|
||||
export type ComputerRoomRow = {
|
||||
id?: number;
|
||||
substationId?: number;
|
||||
name?: string;
|
||||
description?: string;
|
||||
};
|
||||
@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { Picture } from '@element-plus/icons-vue'; // 引入一个图标让按钮更好看
|
||||
import type { ComputerRoomRow } from "@/api/types/computerRoom/computerRoom";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const drawer = ref(false);
|
||||
const paramsProps = ref();
|
||||
const computerRoomList = ref<ComputerRoomRow[]>([]);
|
||||
const router = useRouter();
|
||||
// 接收父组件参数并获取数据
|
||||
const acceptParams = async (params: any) => {
|
||||
paramsProps.value = params;
|
||||
const res = await paramsProps.value.getListApi({
|
||||
substationId: paramsProps.value.data.id
|
||||
});
|
||||
if (res.code === '0000') {
|
||||
computerRoomList.value = res.data;
|
||||
}
|
||||
drawer.value = true;
|
||||
}
|
||||
|
||||
// 点击“查看平面图”按钮的逻辑
|
||||
const handleViewPlan = (room: ComputerRoomRow) => {
|
||||
router.push({
|
||||
path:'/teacher/teacher-preview',
|
||||
query: {
|
||||
roomId: room.id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
acceptParams
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer v-model="drawer" title="机房列表" size="400px">
|
||||
<div class="room-list-container">
|
||||
<template v-if="computerRoomList.length > 0">
|
||||
<div v-for="room in computerRoomList" :key="room.id" class="room-item">
|
||||
<div class="room-info">
|
||||
<div class="room-name">{{ room.name }}</div>
|
||||
<div class="room-desc" v-if="room.description">{{ room.description }}</div>
|
||||
</div>
|
||||
<div class="room-action">
|
||||
<el-button type="primary" plain :icon="Picture" size="small" @click="handleViewPlan(room)">
|
||||
查看平面图
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty v-else description="暂无绑定平面图的机房" />
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.room-list-container {
|
||||
padding: 0 5px;
|
||||
|
||||
.room-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 14px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #efefef;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
/* 悬浮时的交互反馈 */
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
border-color: #c6e2ff;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
flex: 1;
|
||||
overflow: hidden; /* 防止文字过长挤压按钮 */
|
||||
margin-right: 15px;
|
||||
|
||||
.room-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.room-desc {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.room-action {
|
||||
flex-shrink: 0; /* 保证按钮不会被压缩 */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue