67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<template>
|
||
<view class="device-room-page">
|
||
<app-navbar title="所在房间">
|
||
<template #right>
|
||
<view class="device-room-page__add-btn" @tap="onOpenAddDialog">
|
||
<text class="device-room-page__add-icon">+</text>
|
||
</view>
|
||
</template>
|
||
</app-navbar>
|
||
|
||
<view v-if="listLoading" class="device-room-page__loading">
|
||
<text class="device-room-page__loading-text">加载中...</text>
|
||
</view>
|
||
<view v-else-if="!roomOptions.length" class="device-room-page__empty">
|
||
<text class="device-room-page__empty-text">暂无房间位置，点击右上角添加</text>
|
||
</view>
|
||
<view v-else class="device-room-page__list">
|
||
<view
|
||
v-for="room in roomOptions"
|
||
:key="room.locationId"
|
||
class="device-room-page__item"
|
||
:class="{ 'device-room-page__item--disabled': saving }"
|
||
@tap="onSelectRoom(room)"
|
||
>
|
||
<text class="device-room-page__name">{{ room.name }}</text>
|
||
<view
|
||
class="device-room-page__indicator"
|
||
:class="{ 'device-room-page__indicator--selected': isRoomSelected(room.locationId) }"
|
||
>
|
||
<text
|
||
v-if="isRoomSelected(room.locationId)"
|
||
class="device-room-page__check-mark"
|
||
>
|
||
✓
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<room-location-dialog
|
||
v-model:visible="addDialogVisible"
|
||
title="添加房间位置"
|
||
@confirm="onConfirmAddRoom"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import RoomLocationDialog from '../../components/room-location-dialog/index.vue'
|
||
import { useDeviceRoom } from './use-device-room'
|
||
|
||
const {
|
||
roomOptions,
|
||
listLoading,
|
||
saving,
|
||
addDialogVisible,
|
||
isRoomSelected,
|
||
onOpenAddDialog,
|
||
onConfirmAddRoom,
|
||
onSelectRoom,
|
||
} = useDeviceRoom()
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './room.scss';
|
||
</style>
|