1145 lines
32 KiB
Plaintext
1145 lines
32 KiB
Plaintext
<!-- 服务管理 - 重构版本 -->
|
||
<template>
|
||
<view class="service-management">
|
||
<!-- Header -->
|
||
<view class="header">
|
||
<text class="header-title">服务管理</text>
|
||
<view class="header-actions">
|
||
<button class="action-btn" @click="showAddService">
|
||
<text class="btn-text">➕ 新增服务</text>
|
||
</button>
|
||
<button class="action-btn" @click="showServiceSchedule">
|
||
<text class="btn-text">📅 服务排程</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Service Categories -->
|
||
<view class="category-section">
|
||
<scroll-view class="category-scroll" scroll-x="true">
|
||
<view class="category-tabs">
|
||
<button
|
||
v-for="category in serviceCategories"
|
||
:key="category.value"
|
||
class="category-tab"
|
||
:class="{ active: selectedCategory === category.value }"
|
||
@click="selectCategory(category.value)"
|
||
>
|
||
<text class="tab-icon">{{ category.icon }}</text>
|
||
<text class="tab-text">{{ category.label }}</text>
|
||
</button>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- Stats Cards -->
|
||
<view class="stats-section">
|
||
<view class="stat-card">
|
||
<view class="stat-icon">📋</view>
|
||
<view class="stat-content">
|
||
<text class="stat-number">{{ stats.total_services }}</text>
|
||
<text class="stat-label">总服务数</text>
|
||
</view>
|
||
</view>
|
||
<view class="stat-card active">
|
||
<view class="stat-icon">⏳</view>
|
||
<view class="stat-content">
|
||
<text class="stat-number">{{ stats.active_services }}</text>
|
||
<text class="stat-label">进行中</text>
|
||
</view>
|
||
</view>
|
||
<view class="stat-card pending">
|
||
<view class="stat-icon">📅</view>
|
||
<view class="stat-content">
|
||
<text class="stat-number">{{ stats.scheduled_services }}</text>
|
||
<text class="stat-label">已排程</text>
|
||
</view>
|
||
</view>
|
||
<view class="stat-card completed">
|
||
<view class="stat-icon">✅</view>
|
||
<view class="stat-content">
|
||
<text class="stat-number">{{ stats.completed_today }}</text>
|
||
<text class="stat-label">今日完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Filter Section -->
|
||
<view class="filters-section">
|
||
<view class="filter-row">
|
||
<view class="filter-group">
|
||
<text class="filter-label">服务状态</text>
|
||
<picker
|
||
:value="selectedStatusIndex"
|
||
:range="statusOptions"
|
||
range-key="label"
|
||
@change="onStatusChange"
|
||
>
|
||
<text class="picker-text">{{ selectedStatus?.label || '全部状态' }}</text>
|
||
</picker>
|
||
</view>
|
||
<view class="filter-group">
|
||
<text class="filter-label">服务人员</text>
|
||
<picker
|
||
:value="selectedProviderIndex"
|
||
:range="providerOptions"
|
||
range-key="name"
|
||
@change="onProviderChange"
|
||
>
|
||
<text class="picker-text">{{ selectedProvider?.name || '全部人员' }}</text>
|
||
</picker>
|
||
</view>
|
||
<view class="filter-group">
|
||
<text class="filter-label">时间范围</text>
|
||
<picker
|
||
:value="selectedTimeRangeIndex"
|
||
:range="timeRangeOptions"
|
||
range-key="label"
|
||
@change="onTimeRangeChange"
|
||
>
|
||
<text class="picker-text">{{ selectedTimeRange?.label || '今日' }}</text>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="filter-row">
|
||
<view class="search-group">
|
||
<input
|
||
class="search-input"
|
||
placeholder="搜索服务名称或患者"
|
||
v-model="searchKeyword"
|
||
@input="onSearchInput"
|
||
/>
|
||
<button class="search-btn" @click="performSearch">
|
||
<text class="search-text">🔍</text>
|
||
</button>
|
||
</view>
|
||
<button class="refresh-btn" @click="refreshData">
|
||
<text class="refresh-text">🔄 刷新</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Services List -->
|
||
<view class="services-section">
|
||
<view class="section-header">
|
||
<text class="section-title">{{ getCategoryLabel(selectedCategory) }} ({{ filteredServices.length }})</text>
|
||
<view class="view-modes">
|
||
<button
|
||
class="mode-btn"
|
||
:class="{ active: viewMode === 'list' }"
|
||
@click="setViewMode('list')"
|
||
>
|
||
<text class="mode-text">📋</text>
|
||
</button>
|
||
<button
|
||
class="mode-btn"
|
||
:class="{ active: viewMode === 'schedule' }"
|
||
@click="setViewMode('schedule')"
|
||
>
|
||
<text class="mode-text">📅</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- List View -->
|
||
<scroll-view
|
||
v-if="viewMode === 'list'"
|
||
class="services-list"
|
||
scroll-y="true"
|
||
:style="{ height: '500px' }"
|
||
>
|
||
<view
|
||
v-for="service in filteredServices"
|
||
:key="service.id"
|
||
class="service-item"
|
||
:class="getServiceStatusClass(service)"
|
||
@click="viewServiceDetail(service)"
|
||
>
|
||
<view class="service-header">
|
||
<view class="service-info">
|
||
<text class="service-name">{{ service.service_name }}</text>
|
||
<text class="service-type">{{ getServiceTypeText(service.service_type) }}</text>
|
||
</view>
|
||
<view class="service-status">
|
||
<text class="status-badge" :class="service.status">{{ getStatusText(service.status) }}</text>
|
||
<text class="service-time">{{ formatTime(service.scheduled_time) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="service-details">
|
||
<view class="detail-row">
|
||
<text class="detail-label">患者:</text>
|
||
<text class="detail-value">{{ service.elder_name }}</text>
|
||
</view>
|
||
<view class="detail-row" v-if="service.provider_name">
|
||
<text class="detail-label">服务人员:</text>
|
||
<text class="detail-value">{{ service.provider_name }}</text>
|
||
</view>
|
||
<view class="detail-row" v-if="service.location">
|
||
<text class="detail-label">位置:</text>
|
||
<text class="detail-value">{{ service.location }}</text>
|
||
</view>
|
||
<view class="detail-row" v-if="service.estimated_duration">
|
||
<text class="detail-label">预计时长:</text>
|
||
<text class="detail-value">{{ service.estimated_duration }}分钟</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="service-description" v-if="service.description">
|
||
<text class="description-text">{{ service.description }}</text>
|
||
</view>
|
||
|
||
<view class="service-actions">
|
||
<button
|
||
v-if="service.status === 'scheduled'"
|
||
class="action-btn small primary"
|
||
@click.stop="startService(service)"
|
||
>
|
||
<text class="btn-text">开始</text>
|
||
</button>
|
||
<button
|
||
v-if="service.status === 'in_progress'"
|
||
class="action-btn small success"
|
||
@click.stop="completeService(service)"
|
||
>
|
||
<text class="btn-text">完成</text>
|
||
</button>
|
||
<button class="action-btn small" @click.stop="editService(service)">
|
||
<text class="btn-text">✏️</text>
|
||
</button>
|
||
<button class="action-btn small warning" @click.stop="rescheduleService(service)">
|
||
<text class="btn-text">🕒</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- Schedule View -->
|
||
<view v-else class="schedule-view">
|
||
<view class="schedule-header">
|
||
<button class="date-nav-btn" @click="previousDay">
|
||
<text class="nav-text">‹</text>
|
||
</button>
|
||
<text class="current-date">{{ formatDate(currentDate) }}</text>
|
||
<button class="date-nav-btn" @click="nextDay">
|
||
<text class="nav-text">›</text>
|
||
</button>
|
||
</view>
|
||
|
||
<scroll-view class="schedule-content" scroll-y="true" :style="{ height: '450px' }">
|
||
<view class="time-slots">
|
||
<view
|
||
v-for="hour in timeSlots"
|
||
:key="hour"
|
||
class="time-slot"
|
||
>
|
||
<view class="time-header">
|
||
<text class="time-text">{{ hour }}:00</text>
|
||
</view>
|
||
<view class="slot-services">
|
||
<view
|
||
v-for="service in getServicesForHour(hour)"
|
||
:key="service.id"
|
||
class="schedule-service"
|
||
:class="getServiceStatusClass(service)"
|
||
@click="viewServiceDetail(service)"
|
||
>
|
||
<view class="schedule-service-content">
|
||
<text class="schedule-service-name">{{ service.service_name }}</text>
|
||
<text class="schedule-elder-name">{{ service.elder_name }}</text>
|
||
<text class="schedule-provider">{{ service.provider_name || '未分配' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Add Service Modal -->
|
||
<view v-if="showAddModal" class="modal-overlay" @click="hideAddModal">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="modal-header">
|
||
<text class="modal-title">新增服务</text>
|
||
<button class="close-btn" @click="hideAddModal">
|
||
<text class="close-text">✕</text>
|
||
</button>
|
||
</view>
|
||
|
||
<view class="modal-body">
|
||
<view class="form-group">
|
||
<text class="form-label">服务类型 *</text>
|
||
<picker
|
||
:value="newServiceTypeIndex"
|
||
:range="serviceTypeOptions"
|
||
range-key="label"
|
||
@change="onNewServiceTypeChange"
|
||
>
|
||
<text class="picker-text">{{ newServiceType?.label || '选择服务类型' }}</text>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">服务名称 *</text>
|
||
<input
|
||
class="form-input"
|
||
placeholder="请输入服务名称"
|
||
v-model="newService.service_name"
|
||
/>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">患者 *</text>
|
||
<picker
|
||
:value="newElderIndex"
|
||
:range="elderOptions"
|
||
range-key="name"
|
||
@change="onNewElderChange"
|
||
>
|
||
<text class="picker-text">{{ newElder?.name || '选择患者' }}</text>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">服务人员</text>
|
||
<picker
|
||
:value="newProviderIndex"
|
||
:range="providerOptions"
|
||
range-key="name"
|
||
@change="onNewProviderChange"
|
||
>
|
||
<text class="picker-text">{{ newProvider?.name || '选择服务人员' }}</text>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">计划时间 *</text>
|
||
<picker mode="date" @change="onNewServiceDateChange">
|
||
<text class="picker-text">{{ newService.scheduled_date || '选择日期' }}</text>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">计划时段 *</text>
|
||
<picker mode="time" @change="onNewServiceTimeChange">
|
||
<text class="picker-text">{{ newService.scheduled_time || '选择时间' }}</text>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">预计时长(分钟)</text>
|
||
<input
|
||
class="form-input"
|
||
type="number"
|
||
placeholder="预计服务时长"
|
||
v-model="newService.estimated_duration"
|
||
/>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">服务位置</text>
|
||
<input
|
||
class="form-input"
|
||
placeholder="服务位置"
|
||
v-model="newService.location"
|
||
/>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">服务描述</text>
|
||
<textarea
|
||
class="form-textarea"
|
||
placeholder="详细描述服务内容"
|
||
v-model="newService.description"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-footer">
|
||
<button class="cancel-btn" @click="hideAddModal">
|
||
<text class="btn-text">取消</text>
|
||
</button>
|
||
<button class="confirm-btn" @click="saveService" :disabled="!isFormValid">
|
||
<text class="btn-text">保存</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { formatDate, formatTime, formatDateTime } from '../types.uts'
|
||
import type { Elder, Caregiver, HealthStats } from '../types.uts'
|
||
|
||
// Service type
|
||
type Service = {
|
||
id: string
|
||
elder_id: string
|
||
elder_name: string
|
||
service_type: string
|
||
service_name: string
|
||
description: string | null
|
||
provider_id: string | null
|
||
provider_name: string | null
|
||
scheduled_date: string | null
|
||
scheduled_time: string | null
|
||
estimated_duration: number | null
|
||
actual_duration: number | null
|
||
location: string | null
|
||
status: string
|
||
priority: string
|
||
notes: string | null
|
||
created_at: string
|
||
updated_at: string
|
||
}
|
||
|
||
// Data
|
||
const services = ref<Service[]>([])
|
||
const stats = ref<HealthStats>({
|
||
total_services: 0,
|
||
active_services: 0,
|
||
scheduled_services: 0,
|
||
completed_today: 0,
|
||
total_equipment: 0,
|
||
online_equipment: 0,
|
||
maintenance_needed: 0,
|
||
faulty_equipment: 0,
|
||
total_records_today: 0,
|
||
abnormal_readings: 0,
|
||
pending_reviews: 0,
|
||
critical_alerts: 0,
|
||
today_visitors: 0,
|
||
current_visitors: 0,
|
||
scheduled_visits: 0,
|
||
pending_approvals: 0
|
||
})
|
||
|
||
// Filters
|
||
const searchKeyword = ref('')
|
||
const selectedCategory = ref('all')
|
||
const selectedStatusIndex = ref(-1)
|
||
const selectedProviderIndex = ref(-1)
|
||
const selectedTimeRangeIndex = ref(-1)
|
||
const viewMode = ref<'list' | 'schedule'>('list')
|
||
const currentDate = ref(new Date().toISOString().split('T')[0])
|
||
|
||
// Options
|
||
const serviceCategories = ref([
|
||
{ value: 'all', label: '全部服务', icon: '📋' },
|
||
{ value: 'dining', label: '餐饮服务', icon: '🍽️' },
|
||
{ value: 'hygiene', label: '清洁卫生', icon: '🧼' },
|
||
{ value: 'medical', label: '医疗护理', icon: '💊' },
|
||
{ value: 'rehabilitation', label: '康复训练', icon: '🏃' },
|
||
{ value: 'entertainment', label: '娱乐活动', icon: '🎮' },
|
||
{ value: 'maintenance', label: '设施维护', icon: '🔧' },
|
||
{ value: 'transport', label: '接送服务', icon: '🚗' }
|
||
])
|
||
|
||
const serviceTypeOptions = ref([
|
||
{ value: 'dining', label: '餐饮服务' },
|
||
{ value: 'hygiene', label: '清洁卫生' },
|
||
{ value: 'medical', label: '医疗护理' },
|
||
{ value: 'rehabilitation', label: '康复训练' },
|
||
{ value: 'entertainment', label: '娱乐活动' },
|
||
{ value: 'maintenance', label: '设施维护' },
|
||
{ value: 'transport', label: '接送服务' },
|
||
{ value: 'other', label: '其他服务' }
|
||
])
|
||
|
||
const statusOptions = ref([
|
||
{ value: 'scheduled', label: '已排程' },
|
||
{ value: 'in_progress', label: '进行中' },
|
||
{ value: 'completed', label: '已完成' },
|
||
{ value: 'cancelled', label: '已取消' },
|
||
{ value: 'postponed', label: '已延期' }
|
||
])
|
||
|
||
const timeRangeOptions = ref([
|
||
{ value: 'today', label: '今日' },
|
||
{ value: 'tomorrow', label: '明日' },
|
||
{ value: 'week', label: '本周' },
|
||
{ value: 'month', label: '本月' }
|
||
])
|
||
|
||
const elderOptions = ref<Elder[]>([])
|
||
const providerOptions = ref<Caregiver[]>([])
|
||
|
||
// Modal states
|
||
const showAddModal = ref(false)
|
||
|
||
// Form data
|
||
const newService = ref<Service>({
|
||
id: '',
|
||
elder_id: '',
|
||
elder_name: '',
|
||
service_type: 'dining',
|
||
service_name: '',
|
||
description: '',
|
||
provider_id: '',
|
||
provider_name: '',
|
||
scheduled_date: '',
|
||
scheduled_time: '',
|
||
estimated_duration: null,
|
||
actual_duration: null,
|
||
location: '',
|
||
status: 'scheduled',
|
||
priority: 'normal',
|
||
notes: '',
|
||
created_at: '',
|
||
updated_at: ''
|
||
})
|
||
|
||
const newServiceTypeIndex = ref(-1)
|
||
const newElderIndex = ref(-1)
|
||
const newProviderIndex = ref(-1)
|
||
|
||
// Time slots for schedule view
|
||
const timeSlots = ref([
|
||
6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22
|
||
])
|
||
|
||
// Computed
|
||
const selectedStatus = computed<any>(() => {
|
||
return selectedStatusIndex.value >= 0 ? statusOptions.value[selectedStatusIndex.value] : null
|
||
})
|
||
|
||
const selectedProvider = computed<Caregiver | null>(() => {
|
||
return selectedProviderIndex.value >= 0 ? providerOptions.value[selectedProviderIndex.value] : null
|
||
})
|
||
|
||
const selectedTimeRange = computed<any>(() => {
|
||
return selectedTimeRangeIndex.value >= 0 ? timeRangeOptions.value[selectedTimeRangeIndex.value] : null
|
||
})
|
||
|
||
const newServiceType = computed<any>(() => {
|
||
return newServiceTypeIndex.value >= 0 ? serviceTypeOptions.value[newServiceTypeIndex.value] : null
|
||
})
|
||
|
||
const newElder = computed<Elder | null>(() => {
|
||
return newElderIndex.value >= 0 ? elderOptions.value[newElderIndex.value] : null
|
||
})
|
||
|
||
const newProvider = computed<Caregiver | null>(() => {
|
||
return newProviderIndex.value >= 0 ? providerOptions.value[newProviderIndex.value] : null
|
||
})
|
||
|
||
const filteredServices = computed<Service[]>(() => {
|
||
let filtered = services.value
|
||
|
||
// Category filter
|
||
if (selectedCategory.value !== 'all') {
|
||
filtered = filtered.filter(item => item.service_type === selectedCategory.value)
|
||
}
|
||
|
||
// Search filter
|
||
if (searchKeyword.value.trim() !== '') {
|
||
const keyword = searchKeyword.value.toLowerCase()
|
||
filtered = filtered.filter(item =>
|
||
item.service_name.toLowerCase().includes(keyword) ||
|
||
item.elder_name.toLowerCase().includes(keyword) ||
|
||
(item.provider_name && item.provider_name.toLowerCase().includes(keyword))
|
||
)
|
||
}
|
||
|
||
// Status filter
|
||
if (selectedStatus.value) {
|
||
filtered = filtered.filter(item => item.status === selectedStatus.value.value)
|
||
}
|
||
|
||
// Provider filter
|
||
if (selectedProvider.value) {
|
||
filtered = filtered.filter(item => item.provider_id === selectedProvider.value?.id)
|
||
}
|
||
|
||
// Time range filter
|
||
if (selectedTimeRange.value) {
|
||
const today = new Date()
|
||
const todayStr = today.toISOString().split('T')[0]
|
||
|
||
switch (selectedTimeRange.value.value) {
|
||
case 'today':
|
||
filtered = filtered.filter(item => item.scheduled_date === todayStr)
|
||
break
|
||
case 'tomorrow':
|
||
const tomorrow = new Date(today)
|
||
tomorrow.setDate(tomorrow.getDate() + 1)
|
||
const tomorrowStr = tomorrow.toISOString().split('T')[0]
|
||
filtered = filtered.filter(item => item.scheduled_date === tomorrowStr)
|
||
break
|
||
case 'week':
|
||
const weekStart = new Date(today)
|
||
weekStart.setDate(today.getDate() - today.getDay())
|
||
const weekEnd = new Date(weekStart)
|
||
weekEnd.setDate(weekStart.getDate() + 6)
|
||
filtered = filtered.filter(item =>
|
||
item.scheduled_date !== null &&
|
||
item.scheduled_date >= weekStart.toISOString().split('T')[0] &&
|
||
item.scheduled_date <= weekEnd.toISOString().split('T')[0]
|
||
)
|
||
break
|
||
}
|
||
}
|
||
|
||
return filtered
|
||
})
|
||
|
||
const isFormValid = computed<boolean>(() => {
|
||
return newService.value.service_name.trim() !== '' &&
|
||
newService.value.elder_id !== '' &&
|
||
newService.value.scheduled_date !== '' &&
|
||
newService.value.scheduled_time !== ''
|
||
})
|
||
|
||
// Methods
|
||
const loadServices = async (): Promise<void> => {
|
||
try {
|
||
const response = await supa.executeAs('rpc/get_services_list', {
|
||
category: selectedCategory.value === 'all' ? null : selectedCategory.value
|
||
})
|
||
if (response.success && response.data) {
|
||
services.value = response.data as Service[]
|
||
}
|
||
} catch (error) {
|
||
console.error('加载服务列表失败:', error)
|
||
}
|
||
}
|
||
|
||
const loadStats = async (): Promise<void> => {
|
||
try {
|
||
const response = await supa.executeAs('rpc/get_service_stats', {})
|
||
if (response.success && response.data && response.data.length > 0) {
|
||
stats.value = response.data[0] as HealthStats
|
||
}
|
||
} catch (error) {
|
||
console.error('加载统计数据失败:', error)
|
||
}
|
||
}
|
||
|
||
const loadElders = async (): Promise<void> => {
|
||
try {
|
||
const response = await supa.executeAs('select', {
|
||
table: 'elders',
|
||
select: 'id, name, room_number',
|
||
match: { status: 'active' },
|
||
order: 'name'
|
||
})
|
||
if (response.success && response.data) {
|
||
elderOptions.value = response.data as Elder[]
|
||
}
|
||
} catch (error) {
|
||
console.error('加载患者列表失败:', error)
|
||
}
|
||
}
|
||
|
||
const loadProviders = async (): Promise<void> => {
|
||
try {
|
||
const response = await supa.executeAs('select', {
|
||
table: 'caregivers',
|
||
select: 'id, name, position',
|
||
match: { status: 'active' },
|
||
order: 'name'
|
||
})
|
||
if (response.success && response.data) {
|
||
providerOptions.value = response.data as Caregiver[]
|
||
}
|
||
} catch (error) {
|
||
console.error('加载服务人员列表失败:', error)
|
||
}
|
||
}
|
||
|
||
const getCategoryLabel = (category: string): string => {
|
||
const categoryItem = serviceCategories.value.find(item => item.value === category)
|
||
return categoryItem ? categoryItem.label : '全部服务'
|
||
}
|
||
|
||
const getServiceTypeText = (type: string): string => {
|
||
const typeItem = serviceTypeOptions.value.find(item => item.value === type)
|
||
return typeItem ? typeItem.label : type
|
||
}
|
||
|
||
const getStatusText = (status: string): string => {
|
||
const statusItem = statusOptions.value.find(item => item.value === status)
|
||
return statusItem ? statusItem.label : status
|
||
}
|
||
|
||
const getServiceStatusClass = (service: Service): string => {
|
||
switch (service.status) {
|
||
case 'scheduled': return 'status-scheduled'
|
||
case 'in_progress': return 'status-progress'
|
||
case 'completed': return 'status-completed'
|
||
case 'cancelled': return 'status-cancelled'
|
||
case 'postponed': return 'status-postponed'
|
||
default: return ''
|
||
}
|
||
}
|
||
|
||
const getServicesForHour = (hour: number): Service[] => {
|
||
return filteredServices.value.filter(service => {
|
||
if (!service.scheduled_time || service.scheduled_date !== currentDate.value) return false
|
||
const serviceHour = parseInt(service.scheduled_time.split(':')[0])
|
||
return serviceHour === hour
|
||
})
|
||
}
|
||
|
||
// Event handlers
|
||
const selectCategory = (category: string): void => {
|
||
selectedCategory.value = category
|
||
loadServices()
|
||
}
|
||
|
||
const onStatusChange = (e: any): void => {
|
||
selectedStatusIndex.value = e.detail.value
|
||
}
|
||
|
||
const onProviderChange = (e: any): void => {
|
||
selectedProviderIndex.value = e.detail.value
|
||
}
|
||
|
||
const onTimeRangeChange = (e: any): void => {
|
||
selectedTimeRangeIndex.value = e.detail.value
|
||
}
|
||
|
||
const onSearchInput = (): void => {
|
||
// Real-time search, handled by computed
|
||
}
|
||
|
||
const performSearch = (): void => {
|
||
// Manual search trigger
|
||
}
|
||
|
||
const refreshData = async (): Promise<void> => {
|
||
await Promise.all([
|
||
loadServices(),
|
||
loadStats(),
|
||
loadElders(),
|
||
loadProviders()
|
||
])
|
||
}
|
||
|
||
const setViewMode = (mode: 'list' | 'schedule'): void => {
|
||
viewMode.value = mode
|
||
}
|
||
|
||
const previousDay = (): void => {
|
||
const date = new Date(currentDate.value)
|
||
date.setDate(date.getDate() - 1)
|
||
currentDate.value = date.toISOString().split('T')[0]
|
||
}
|
||
|
||
const nextDay = (): void => {
|
||
const date = new Date(currentDate.value)
|
||
date.setDate(date.getDate() + 1)
|
||
currentDate.value = date.toISOString().split('T')[0]
|
||
}
|
||
|
||
const viewServiceDetail = (service: Service): void => {
|
||
console.log('查看服务详情:', service)
|
||
}
|
||
|
||
const startService = async (service: Service): Promise<void> => {
|
||
try {
|
||
const response = await supa.executeAs('update', {
|
||
table: 'services',
|
||
data: {
|
||
status: 'in_progress',
|
||
actual_start_time: new Date().toISOString()
|
||
},
|
||
match: { id: service.id }
|
||
})
|
||
if (response.success) {
|
||
await loadServices()
|
||
await loadStats()
|
||
}
|
||
} catch (error) {
|
||
console.error('开始服务失败:', error)
|
||
}
|
||
}
|
||
|
||
const completeService = async (service: Service): Promise<void> => {
|
||
try {
|
||
const response = await supa.executeAs('update', {
|
||
table: 'services',
|
||
data: {
|
||
status: 'completed',
|
||
completed_at: new Date().toISOString()
|
||
},
|
||
match: { id: service.id }
|
||
})
|
||
if (response.success) {
|
||
await loadServices()
|
||
await loadStats()
|
||
}
|
||
} catch (error) {
|
||
console.error('完成服务失败:', error)
|
||
}
|
||
}
|
||
|
||
const editService = (service: Service): void => {
|
||
console.log('编辑服务:', service)
|
||
}
|
||
|
||
const rescheduleService = (service: Service): void => {
|
||
console.log('重新安排服务:', service)
|
||
}
|
||
|
||
// Modal methods
|
||
const showAddService = (): void => {
|
||
newService.value = {
|
||
id: '',
|
||
elder_id: '',
|
||
elder_name: '',
|
||
service_type: 'dining',
|
||
service_name: '',
|
||
description: '',
|
||
provider_id: '',
|
||
provider_name: '',
|
||
scheduled_date: '',
|
||
scheduled_time: '',
|
||
estimated_duration: null,
|
||
actual_duration: null,
|
||
location: '',
|
||
status: 'scheduled',
|
||
priority: 'normal',
|
||
notes: '',
|
||
created_at: '',
|
||
updated_at: ''
|
||
}
|
||
newServiceTypeIndex.value = -1
|
||
newElderIndex.value = -1
|
||
newProviderIndex.value = -1
|
||
showAddModal.value = true
|
||
}
|
||
|
||
const hideAddModal = (): void => {
|
||
showAddModal.value = false
|
||
}
|
||
|
||
const showServiceSchedule = (): void => {
|
||
viewMode.value = 'schedule'
|
||
}
|
||
|
||
const onNewServiceTypeChange = (e: any): void => {
|
||
newServiceTypeIndex.value = e.detail.value
|
||
if (newServiceType.value) {
|
||
newService.value.service_type = newServiceType.value.value
|
||
}
|
||
}
|
||
|
||
const onNewElderChange = (e: any): void => {
|
||
newElderIndex.value = e.detail.value
|
||
if (newElder.value) {
|
||
newService.value.elder_id = newElder.value.id
|
||
newService.value.elder_name = newElder.value.name
|
||
}
|
||
}
|
||
|
||
const onNewProviderChange = (e: any): void => {
|
||
newProviderIndex.value = e.detail.value
|
||
if (newProvider.value) {
|
||
newService.value.provider_id = newProvider.value.id
|
||
newService.value.provider_name = newProvider.value.name
|
||
}
|
||
}
|
||
|
||
const onNewServiceDateChange = (e: any): void => {
|
||
newService.value.scheduled_date = e.detail.value
|
||
}
|
||
|
||
const onNewServiceTimeChange = (e: any): void => {
|
||
newService.value.scheduled_time = e.detail.value
|
||
}
|
||
|
||
const saveService = async (): Promise<void> => {
|
||
if (!isFormValid.value) return
|
||
|
||
try {
|
||
const response = await supa.executeAs('insert', {
|
||
table: 'services',
|
||
data: {
|
||
elder_id: newService.value.elder_id,
|
||
service_type: newService.value.service_type,
|
||
service_name: newService.value.service_name,
|
||
description: newService.value.description,
|
||
provider_id: newService.value.provider_id || null,
|
||
scheduled_date: newService.value.scheduled_date,
|
||
scheduled_time: newService.value.scheduled_time,
|
||
estimated_duration: newService.value.estimated_duration,
|
||
location: newService.value.location,
|
||
status: 'scheduled',
|
||
priority: 'normal'
|
||
}
|
||
})
|
||
|
||
if (response.success) {
|
||
hideAddModal()
|
||
await loadServices()
|
||
await loadStats()
|
||
}
|
||
} catch (error) {
|
||
console.error('保存服务失败:', error)
|
||
}
|
||
}
|
||
|
||
// Lifecycle
|
||
onMounted(async () => {
|
||
await refreshData()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.service-management {
|
||
padding: 20px;
|
||
background: #f5f7fa;
|
||
min-height: 100vh;
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24px;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
||
.header-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #1a202c;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
|
||
.action-btn {
|
||
padding: 8px 16px;
|
||
background: #4a90e2;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
|
||
&:hover {
|
||
background: #357abd;
|
||
}
|
||
|
||
.btn-text {
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-section {
|
||
margin-bottom: 24px;
|
||
|
||
.category-scroll {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.category-tabs {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 0 20px;
|
||
|
||
.category-tab {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 12px 16px;
|
||
background: white;
|
||
border: 2px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
min-width: 80px;
|
||
|
||
&.active {
|
||
border-color: #4a90e2;
|
||
background: #4a90e2;
|
||
|
||
.tab-icon, .tab-text {
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.tab-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 12px;
|
||
color: #374151;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.stats-section {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
flex-wrap: wrap;
|
||
|
||
.stat-card {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
&.active {
|
||
border-left: 4px solid #10b981;
|
||
}
|
||
|
||
&.pending {
|
||
border-left: 4px solid #f59e0b;
|
||
}
|
||
|
||
&.completed {
|
||
border-left: 4px solid #6366f1;
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.stat-content {
|
||
.stat-number {
|
||
display: block;
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: #1a202c;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ... 其余样式与之前页面类似，这里省略重复的样式代码
|
||
// 包括 filters-section, services-section, modal-overlay 等的样式
|
||
|
||
.schedule-view {
|
||
.schedule-header {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 20px;
|
||
padding: 20px;
|
||
background: #f8fafc;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
|
||
.date-nav-btn {
|
||
padding: 8px 12px;
|
||
background: #4a90e2;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 18px;
|
||
|
||
.nav-text {
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.current-date {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1a202c;
|
||
}
|
||
}
|
||
|
||
.time-slots {
|
||
.time-slot {
|
||
display: flex;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
min-height: 60px;
|
||
|
||
.time-header {
|
||
width: 80px;
|
||
padding: 16px;
|
||
background: #f8fafc;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-right: 1px solid #e5e7eb;
|
||
|
||
.time-text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #6b7280;
|
||
}
|
||
}
|
||
|
||
.slot-services {
|
||
flex: 1;
|
||
padding: 8px;
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
|
||
.schedule-service {
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
min-width: 200px;
|
||
|
||
&.status-scheduled {
|
||
background: #dbeafe;
|
||
border: 1px solid #3b82f6;
|
||
}
|
||
|
||
&.status-progress {
|
||
background: #dcfce7;
|
||
border: 1px solid #10b981;
|
||
}
|
||
|
||
&.status-completed {
|
||
background: #f3f4f6;
|
||
border: 1px solid #6b7280;
|
||
}
|
||
|
||
.schedule-service-content {
|
||
.schedule-service-name {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1a202c;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.schedule-elder-name {
|
||
display: block;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.schedule-provider {
|
||
font-size: 11px;
|
||
color: #9ca3af;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|