275 lines
8.9 KiB
Vue
275 lines
8.9 KiB
Vue
<template>
|
|
<div class="page-card">
|
|
<h2 class="page-title">预约中心</h2>
|
|
<div class="filter-row">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
value-format="YYYY-MM-DD"
|
|
start-placeholder="开始日"
|
|
end-placeholder="结束日"
|
|
style="width: 260px"
|
|
/>
|
|
<el-select v-model="status" clearable placeholder="状态" style="width: 140px">
|
|
<el-option label="待开始" value="new" />
|
|
<el-option label="服务中" value="doing" />
|
|
<el-option label="已完成" value="done" />
|
|
<el-option label="已取消" value="cancel" />
|
|
</el-select>
|
|
<el-select v-model="staffId" clearable placeholder="技师" style="width: 140px">
|
|
<el-option v-for="s in staffOptions" :key="s.id" :label="s.name" :value="s.id" />
|
|
</el-select>
|
|
<el-checkbox v-model="missingReport">待出报告</el-checkbox>
|
|
<el-input v-model="keyword" clearable placeholder="宠主/手机/宠物名" style="width: 200px" />
|
|
<el-button type="primary" @click="load">查询</el-button>
|
|
<el-button @click="reset">重置</el-button>
|
|
</div>
|
|
|
|
<el-table :data="rows" v-loading="loading" stripe>
|
|
<el-table-column prop="appointmentTime" label="预约时间" min-width="160" />
|
|
<el-table-column label="状态" width="100">
|
|
<template #default="{ row }">{{ statusLabel(row.status) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="宠主" min-width="140">
|
|
<template #default="{ row }">
|
|
{{ row.customerName || '—' }}
|
|
<span class="muted">{{ row.customerPhoneMasked || '' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="petName" label="宠物" width="100" />
|
|
<el-table-column prop="serviceType" label="服务" min-width="110" />
|
|
<el-table-column prop="staffName" label="技师" width="100" />
|
|
<el-table-column label="报告" width="80">
|
|
<template #default="{ row }">
|
|
<el-button v-if="row.hasReport && row.reportId" link type="primary" @click="goReport(row)">有</el-button>
|
|
<span v-else>无</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="260" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button link type="primary" @click="openDetail(row)">详情</el-button>
|
|
<el-button v-if="row.status === 'new'" link type="primary" @click="onStart(row)">开始服务</el-button>
|
|
<el-button
|
|
v-if="row.status === 'new' || row.status === 'doing'"
|
|
link
|
|
type="danger"
|
|
@click="onCancel(row)"
|
|
>取消</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-drawer v-model="drawer" title="预约详情" size="420px">
|
|
<template v-if="current">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="时间">{{ current.appointmentTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="状态">{{ statusLabel(current.status) }}</el-descriptions-item>
|
|
<el-descriptions-item label="宠主">{{ current.customerName }} {{ current.customerPhoneMasked }}</el-descriptions-item>
|
|
<el-descriptions-item label="宠物">{{ current.petName }} / {{ current.petType }}</el-descriptions-item>
|
|
<el-descriptions-item label="服务">{{ current.serviceType }}</el-descriptions-item>
|
|
<el-descriptions-item label="技师">{{ current.staffName || '—' }}</el-descriptions-item>
|
|
<el-descriptions-item label="备注">{{ current.remark || '—' }}</el-descriptions-item>
|
|
<el-descriptions-item label="报告">{{ current.hasReport ? `已有 #${current.reportId}` : '无' }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-alert
|
|
class="hint"
|
|
type="info"
|
|
:closable="false"
|
|
title="拍照与填报告请回小程序完成"
|
|
/>
|
|
<div class="drawer-actions">
|
|
<el-button v-if="current.status === 'new'" type="primary" @click="onStart(current)">开始服务</el-button>
|
|
<el-button v-if="current.hasReport && current.reportId" @click="goReport(current)">查看报告</el-button>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import {
|
|
cancelAppointment,
|
|
getAppointmentDetail,
|
|
getAppointmentList,
|
|
getStaffList,
|
|
startAppointment,
|
|
} from '@/api'
|
|
|
|
type Appt = {
|
|
id: number
|
|
appointmentTime?: string
|
|
status?: string
|
|
petName?: string
|
|
petType?: string
|
|
serviceType?: string
|
|
customerUserId?: number
|
|
createdByUserId?: number
|
|
assignedStaffId?: number
|
|
assignedUserId?: number
|
|
staffName?: string
|
|
customerName?: string
|
|
customerPhoneMasked?: string
|
|
hasReport?: boolean
|
|
reportId?: number | null
|
|
remark?: string
|
|
updateTime?: string
|
|
}
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
const rows = ref<Appt[]>([])
|
|
const status = ref<string>((route.query.status as string) || '')
|
|
const keyword = ref('')
|
|
const dateFilter = ref((route.query.date as string) || '')
|
|
const dateRange = ref<[string, string] | ''>('')
|
|
const staffId = ref<number | undefined>()
|
|
const missingReport = ref(route.query.missingReport === '1')
|
|
const staffOptions = ref<Array<{ id: number; name: string }>>([])
|
|
const drawer = ref(false)
|
|
const current = ref<Appt | null>(null)
|
|
|
|
function statusLabel(s?: string) {
|
|
switch (s) {
|
|
case 'new': return '待开始'
|
|
case 'doing': return '服务中'
|
|
case 'done': return '已完成'
|
|
case 'cancel': return '已取消'
|
|
default: return s || '-'
|
|
}
|
|
}
|
|
|
|
function todayPrefix() {
|
|
const d = new Date()
|
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
|
}
|
|
|
|
function inDateRange(iso?: string) {
|
|
if (!iso) return false
|
|
const day = String(iso).slice(0, 10)
|
|
if (dateFilter.value === 'today') {
|
|
return day === todayPrefix()
|
|
}
|
|
if (Array.isArray(dateRange.value) && dateRange.value.length === 2) {
|
|
return day >= dateRange.value[0] && day <= dateRange.value[1]
|
|
}
|
|
return true
|
|
}
|
|
|
|
async function loadStaff() {
|
|
const res = await getStaffList()
|
|
const list = Array.isArray(res.data) ? (res.data as Array<Record<string, unknown>>) : []
|
|
staffOptions.value = list.map((u) => ({
|
|
id: Number(u.id),
|
|
name: String(u.name || u.phone || u.id),
|
|
}))
|
|
}
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
const res = await getAppointmentList({
|
|
status: status.value || undefined,
|
|
page: 1,
|
|
pageSize: 200,
|
|
})
|
|
let list = Array.isArray(res.data) ? (res.data as Appt[]) : []
|
|
list = list.filter((a) => inDateRange(a.appointmentTime))
|
|
if (staffId.value != null) {
|
|
list = list.filter((a) => (a.assignedStaffId ?? a.assignedUserId) === staffId.value)
|
|
}
|
|
if (missingReport.value) {
|
|
list = list.filter((a) => a.status === 'doing' && !a.hasReport)
|
|
}
|
|
if (keyword.value.trim()) {
|
|
const q = keyword.value.trim()
|
|
list = list.filter((a) =>
|
|
(a.petName || '').includes(q)
|
|
|| (a.customerName || '').includes(q)
|
|
|| (a.customerPhoneMasked || '').includes(q),
|
|
)
|
|
}
|
|
rows.value = list
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function reset() {
|
|
status.value = ''
|
|
keyword.value = ''
|
|
dateFilter.value = ''
|
|
dateRange.value = ''
|
|
staffId.value = undefined
|
|
missingReport.value = false
|
|
load()
|
|
}
|
|
|
|
async function openDetail(row: Appt) {
|
|
const res = await getAppointmentDetail(row.id)
|
|
if (res.code !== 200 || !res.data) {
|
|
ElMessage.error(res.message || '加载详情失败')
|
|
return
|
|
}
|
|
current.value = res.data as Appt
|
|
drawer.value = true
|
|
}
|
|
|
|
function goReport(row: Appt) {
|
|
if (!row.reportId) return
|
|
router.push({ path: '/reports', query: { q: String(row.reportId) } })
|
|
}
|
|
|
|
async function onStart(row: Appt) {
|
|
await ElMessageBox.confirm(`确认开始服务「${row.petName || row.id}」？`, '开始服务')
|
|
const res = await startAppointment(row.id)
|
|
if (res.code !== 200) {
|
|
ElMessage.error(res.message || '开始失败')
|
|
return
|
|
}
|
|
ElMessage.success('已开始服务')
|
|
drawer.value = false
|
|
await load()
|
|
}
|
|
|
|
async function onCancel(row: Appt) {
|
|
await ElMessageBox.confirm(`确认取消预约「${row.petName || row.id}」？`, '取消预约', { type: 'warning' })
|
|
const res = await cancelAppointment(row.id)
|
|
if (res.code !== 200) {
|
|
ElMessage.error(res.message || '取消失败')
|
|
return
|
|
}
|
|
ElMessage.success('已取消')
|
|
drawer.value = false
|
|
await load()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (dateFilter.value === 'today') {
|
|
const t = todayPrefix()
|
|
dateRange.value = [t, t]
|
|
}
|
|
await loadStaff()
|
|
await load()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.muted {
|
|
margin-left: 6px;
|
|
color: #8a94a6;
|
|
font-size: 12px;
|
|
}
|
|
.hint {
|
|
margin-top: 16px;
|
|
}
|
|
.drawer-actions {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
</style>
|