@ebiz/designer-components 0.0.61 → 0.0.62

package/src/components/EbizMobileMeetingRoomSelector.vue

@@ -0,0 +1,728 @@
+<template>
+  <div class="ebiz-mobile-meeting-room-selector">
+    <!-- 头部区域 -->
+    <div class="selector-header">
+      <slot name="header">
+        <div class="header-content">
+          <h3 class="title">📅 会议室预约</h3>
+          <div class="date-selector">
+            <t-date-picker
+              v-model="currentDate"
+              :disabled="disabled"
+              :min-date="new Date()"
+              format="YYYY-MM-DD"
+              placeholder="选择日期"
+              @change="handleDateChange"
+            />
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <t-loading size="large" text="加载中..." />
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div v-else class="selector-content">
+      <!-- 会议室列表 -->
+      <div class="rooms-list">
+        <div
+          v-for="room in roomList"
+          :key="room.id"
+          class="room-card"
+          :class="{ 'selected': selectedRoom?.id === room.id }"
+          @click="handleRoomSelect(room)"
+        >
+          <!-- 会议室信息 -->
+          <div class="room-info">
+            <slot name="room-info" :room="room">
+              <div class="room-header">
+                <h4 class="room-name">🏢 {{ room.name }}</h4>
+                <div class="room-status" :class="getRoomStatusClass(room)">
+                  {{ getRoomStatusText(room) }}
+                </div>
+              </div>
+              <div class="room-details">
+                <div class="detail-item">
+                  <span class="icon">👥</span>
+                  <span>{{ room.capacity }}人</span>
+                </div>
+                <div class="detail-item">
+                  <span class="icon">📍</span>
+                  <span>{{ room.location }}</span>
+                </div>
+              </div>
+              <div v-if="room.equipment?.length" class="equipment">
+                <t-tag
+                  v-for="item in room.equipment"
+                  :key="item"
+                  size="small"
+                  variant="light"
+                  class="equipment-tag"
+                >
+                  {{ item }}
+                </t-tag>
+              </div>
+            </slot>
+          </div>
+
+          <!-- 时间段选择区域 -->
+          <div v-if="selectedRoom?.id === room.id" class="time-selection">
+            <div class="time-header">
+              <h5>⏰ 选择时间段</h5>
+              <div class="time-info">
+                <span v-if="selectedTimeSlots.length > 0" class="selected-info">
+                  已选 {{ selectedTimeSlots.length * 0.5 }}小时
+                </span>
+              </div>
+            </div>
+            
+            <!-- 时间段网格 -->
+            <div class="time-slots-grid">
+              <div
+                v-for="slot in timeSlotList"
+                :key="slot.value"
+                class="time-slot"
+                :class="{
+                  'booked': isSlotBooked(room.id, slot.value),
+                  'selected': isSlotSelected(room.id, slot.value),
+                  'disabled': disabled || isSlotDisabled(room.id, slot.value)
+                }"
+                @click="handleTimeSlotClick(room, slot)"
+              >
+                <slot name="time-slot" :room="room" :slot="slot" :is-booked="isSlotBooked(room.id, slot.value)">
+                  <div class="slot-content">
+                    <div class="slot-time">{{ slot.label }}</div>
+                    <div class="slot-status">
+                      <span v-if="isSlotBooked(room.id, slot.value)" class="status-icon booked">❌</span>
+                      <span v-else-if="isSlotSelected(room.id, slot.value)" class="status-icon selected">✅</span>
+                      <span v-else class="status-icon available">⭕</span>
+                    </div>
+                  </div>
+                </slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预约确认浮动面板 -->
+    <div v-if="selectedTimeSlots.length > 0" class="booking-panel">
+      <slot name="booking-form" :selection="currentSelection">
+        <div class="booking-form">
+          <div class="booking-header">
+            <h4>📋 预约确认</h4>
+            <t-button
+              variant="text"
+              size="small"
+              @click="handleCancelSelection"
+            >
+              取消
+            </t-button>
+          </div>
+          <div class="booking-info">
+            <div class="info-row">
+              <span class="label">会议室:</span>
+              <span class="value">{{ selectedRoom?.name }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">日期:</span>
+              <span class="value">{{ currentDate }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">时间:</span>
+              <span class="value">{{ formatSelectedTime() }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">时长:</span>
+              <span class="value">{{ selectedTimeSlots.length * 0.5 }}小时</span>
+            </div>
+          </div>
+          <div class="booking-actions">
+            <t-button
+              theme="primary"
+              size="large"
+              block
+              @click="handleConfirmBooking"
+            >
+              🎯 确认预约
+            </t-button>
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- 底部说明 -->
+    <div class="selector-footer">
+      <slot name="footer">
+        <div class="legend">
+          <div class="legend-item">
+            <span class="legend-icon">⭕</span>
+            <span>可预约</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-icon">❌</span>
+            <span>已预约</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-icon">✅</span>
+            <span>已选择</span>
+          </div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, defineProps, defineEmits } from 'vue'
+import { DatePicker as TDatePicker, Loading as TLoading, Tag as TTag, Button as TButton } from 'tdesign-vue-next'
+
+// 组件属性接口
+interface Room {
+  id: string
+  name: string
+  capacity: number
+  location: string
+  equipment?: string[]
+}
+
+interface TimeSlot {
+  value: string
+  label: string
+  hour: number
+  minute: number
+}
+
+interface Props {
+  rooms?: Room[]
+  selectedDate?: string
+  timeSlots?: TimeSlot[]
+  bookedSlots?: Record<string, string[]>
+  loading?: boolean
+  disabled?: boolean
+  minDuration?: number
+  maxDuration?: number
+}
+
+// 定义属性
+const props = withDefaults(defineProps<Props>(), {
+  rooms: () => [],
+  selectedDate: "",
+  timeSlots: () => [],
+  bookedSlots: () => ({}),
+  loading: false,
+  disabled: false,
+  minDuration: 1,
+  maxDuration: 8
+})
+
+// 定义事件
+const emit = defineEmits(['room-select', 'time-select', 'booking-confirm', 'date-change'])
+
+// 响应式数据
+const currentDate = ref(props.selectedDate || new Date().toISOString().split('T')[0])
+const selectedRoom = ref<Room | null>(null)
+const selectedTimeSlots = ref<string[]>([])
+
+// 计算属性
+const roomList = computed(() => props.rooms)
+
+const timeSlotList = computed(() => {
+  if (props.timeSlots.length > 0) {
+    return props.timeSlots
+  }
+  
+  // 默认生成9:00-18:00的时间段，每30分钟一个
+  const slots: TimeSlot[] = []
+  for (let hour = 9; hour < 18; hour++) {
+    for (let minute = 0; minute < 60; minute += 30) {
+      const timeValue = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+      slots.push({
+        value: timeValue,
+        label: timeValue,
+        hour,
+        minute
+      })
+    }
+  }
+  return slots
+})
+
+// 辅助方法
+const getEndTime = (startTime: string): string => {
+  const [hour, minute] = startTime.split(':').map(Number)
+  const endMinute = minute + 30
+  const endHour = endMinute >= 60 ? hour + 1 : hour
+  const finalMinute = endMinute >= 60 ? endMinute - 60 : endMinute
+  
+  return `${endHour.toString().padStart(2, '0')}:${finalMinute.toString().padStart(2, '0')}`
+}
+
+const clearTimeSelection = () => {
+  selectedTimeSlots.value = []
+}
+
+const clearSelection = () => {
+  selectedRoom.value = null
+  clearTimeSelection()
+}
+
+const isSlotBooked = (roomId: string, timeSlot: string): boolean => {
+  return props.bookedSlots[roomId]?.includes(timeSlot) || false
+}
+
+const isSlotSelected = (roomId: string, timeSlot: string): boolean => {
+  return selectedRoom.value?.id === roomId && selectedTimeSlots.value.includes(timeSlot)
+}
+
+const isSlotDisabled = (_roomId: string, _timeSlot: string): boolean => {
+  return false
+}
+
+const getRoomStatusClass = (room: Room): string => {
+  const availableSlots = timeSlotList.value.filter(slot => 
+    !isSlotBooked(room.id, slot.value)
+  ).length
+  
+  if (availableSlots === 0) return 'fully-booked'
+  if (availableSlots < timeSlotList.value.length / 2) return 'partially-available'
+  return 'available'
+}
+
+const getRoomStatusText = (room: Room): string => {
+  const availableSlots = timeSlotList.value.filter(slot => 
+    !isSlotBooked(room.id, slot.value)
+  ).length
+  
+  if (availableSlots === 0) return '已满'
+  if (availableSlots < timeSlotList.value.length / 2) return '紧张'
+  return '充足'
+}
+
+const formatSelectedTime = (): string => {
+  if (selectedTimeSlots.value.length === 0) return ''
+  
+  const sortedSlots = [...selectedTimeSlots.value].sort()
+  const startTime = sortedSlots[0]
+  const endTime = getEndTime(sortedSlots[sortedSlots.length - 1])
+  
+  return `${startTime} - ${endTime}`
+}
+
+const currentSelection = computed(() => {
+  if (!selectedRoom.value || selectedTimeSlots.value.length === 0) {
+    return null
+  }
+  
+  const sortedSlots = [...selectedTimeSlots.value].sort()
+  return {
+    room: selectedRoom.value,
+    date: currentDate.value,
+    startTime: sortedSlots[0],
+    endTime: getEndTime(sortedSlots[sortedSlots.length - 1]),
+    duration: selectedTimeSlots.value.length,
+    timeSlots: sortedSlots
+  }
+})
+
+// 事件处理方法
+const handleDateChange = (date: string) => {
+  currentDate.value = date
+  clearSelection()
+  emit('date-change', date)
+}
+
+const handleRoomSelect = (room: Room) => {
+  if (selectedRoom.value?.id === room.id) {
+    // 如果点击的是已选中的会议室，则收起时间选择
+    selectedRoom.value = null
+    clearTimeSelection()
+  } else {
+    // 选择新的会议室
+    selectedRoom.value = room
+    clearTimeSelection()
+    emit('room-select', room)
+  }
+}
+
+const handleTimeSlotClick = (room: Room, slot: TimeSlot) => {
+  if (disabled || isSlotDisabled(room.id, slot.value) || isSlotBooked(room.id, slot.value)) {
+    return
+  }
+
+  const slotIndex = selectedTimeSlots.value.indexOf(slot.value)
+  
+  if (slotIndex > -1) {
+    // 取消选择
+    selectedTimeSlots.value.splice(slotIndex, 1)
+  } else {
+    // 添加选择
+    selectedTimeSlots.value.push(slot.value)
+    
+    // 检查时长限制
+    if (selectedTimeSlots.value.length > props.maxDuration) {
+      selectedTimeSlots.value = selectedTimeSlots.value.slice(-props.maxDuration)
+    }
+  }
+  
+  if (selectedTimeSlots.value.length >= props.minDuration) {
+    emit('time-select', currentSelection.value)
+  }
+}
+
+const handleConfirmBooking = () => {
+  if (currentSelection.value) {
+    emit('booking-confirm', currentSelection.value)
+    clearSelection()
+  }
+}
+
+const handleCancelSelection = () => {
+  clearSelection()
+}
+
+// 监听属性变化
+watch(() => props.selectedDate, (newDate) => {
+  if (newDate && newDate !== currentDate.value) {
+    currentDate.value = newDate
+    clearSelection()
+  }
+})
+
+// 暴露组件实例方法
+defineExpose({
+  clearSelection,
+  clearTimeSelection,
+  getCurrentSelection: () => currentSelection.value
+})
+</script>
+
+<style scoped>
+.ebiz-mobile-meeting-room-selector {
+  background: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 80px; /* 为浮动面板留出空间 */
+}
+
+.selector-header {
+  background: #fff;
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.date-selector {
+  flex-shrink: 0;
+}
+
+.loading-container {
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.selector-content {
+  padding: 16px;
+}
+
+.rooms-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.room-card {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.room-card.selected {
+  border: 2px solid #1890ff;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+}
+
+.room-info {
+  padding: 16px;
+  cursor: pointer;
+}
+
+.room-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.room-name {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.room-status {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.room-status.available {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.room-status.partially-available {
+  background: #fff7e6;
+  color: #fa8c16;
+}
+
+.room-status.fully-booked {
+  background: #fff2f0;
+  color: #ff4d4f;
+}
+
+.room-details {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: #666;
+}
+
+.icon {
+  font-size: 16px;
+}
+
+.equipment {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.equipment-tag {
+  font-size: 12px;
+}
+
+.time-selection {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px;
+  background: #fafafa;
+}
+
+.time-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.time-header h5 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.selected-info {
+  font-size: 12px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.time-slots-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 8px;
+}
+
+.time-slot {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.time-slot:active {
+  transform: scale(0.95);
+}
+
+.time-slot.booked {
+  background: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+.time-slot.selected {
+  background: #e6f7ff;
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.time-slot.disabled {
+  background: #f0f0f0;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.slot-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.slot-time {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-icon {
+  font-size: 16px;
+}
+
+.booking-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-top: 1px solid #eee;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.booking-form {
+  padding: 16px;
+}
+
+.booking-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.booking-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.booking-info {
+  margin-bottom: 16px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 0;
+  font-size: 14px;
+}
+
+.label {
+  color: #666;
+  font-weight: 500;
+}
+
+.value {
+  color: #333;
+  font-weight: 600;
+}
+
+.booking-actions {
+  margin-top: 16px;
+}
+
+.selector-footer {
+  padding: 16px;
+  background: #fff;
+  margin-top: 16px;
+}
+
+.legend {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #666;
+}
+
+.legend-icon {
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media (max-width: 375px) {
+  .time-slots-grid {
+    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+    gap: 6px;
+  }
+  
+  .time-slot {
+    padding: 6px;
+    min-height: 50px;
+  }
+  
+  .slot-time {
+    font-size: 11px;
+  }
+  
+  .status-icon {
+    font-size: 14px;
+  }
+}
+</style>