<script setup lang="ts">
|
import { onMounted, reactive, ref } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { Download, Refresh, Search } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import { getServiceApplications } from '../api/admin'
|
import type { ServiceApplication } from '../types/admin'
|
import { TALENT_CARD_LEVELS } from '../utils/cardLevels'
|
import { downloadExcel } from '../utils/excel'
|
|
const loading = ref(false)
|
const router = useRouter()
|
const rows = ref<ServiceApplication[]>([])
|
|
const cardLevels = TALENT_CARD_LEVELS
|
const subsidyOptions = ['是', '否']
|
const statusOptions = ['待处理', '已处理', '已取消']
|
|
const filters = reactive({
|
talentKeyword: '',
|
merchantName: '',
|
cardLevel: '',
|
subsidy: '',
|
status: '',
|
submittedTime: [] as string[],
|
})
|
|
const pagination = reactive({
|
page: 1,
|
size: 10,
|
total: 0,
|
})
|
|
function formatDateTime(value?: string) {
|
return value ? value.replace('T', ' ') : ''
|
}
|
|
function normalizeRecord(row: ServiceApplication): ServiceApplication {
|
return { ...row, submittedAt: formatDateTime(row.submittedAt) }
|
}
|
|
async function loadData() {
|
loading.value = true
|
try {
|
const result = await getServiceApplications({
|
page: pagination.page,
|
size: pagination.size,
|
applicationType: 'HOTEL_RESERVATION',
|
talentKeyword: filters.talentKeyword || undefined,
|
merchantName: filters.merchantName || undefined,
|
cardLevel: filters.cardLevel || undefined,
|
subsidy: filters.subsidy || undefined,
|
status: filters.status || undefined,
|
submittedStart: filters.submittedTime?.[0],
|
submittedEnd: filters.submittedTime?.[1],
|
})
|
rows.value = result.records.map(normalizeRecord)
|
pagination.total = result.total
|
} catch {
|
rows.value = []
|
pagination.total = 0
|
} finally {
|
loading.value = false
|
}
|
}
|
|
function search() {
|
pagination.page = 1
|
loadData()
|
}
|
|
function resetFilters() {
|
filters.talentKeyword = ''
|
filters.merchantName = ''
|
filters.cardLevel = ''
|
filters.subsidy = ''
|
filters.status = ''
|
filters.submittedTime = []
|
pagination.page = 1
|
search()
|
}
|
|
async function download() {
|
const result = await getServiceApplications({ page: 1, size: 1000, applicationType: 'HOTEL_RESERVATION', talentKeyword: filters.talentKeyword || undefined, merchantName: filters.merchantName || undefined, cardLevel: filters.cardLevel || undefined, subsidy: filters.subsidy || undefined, status: filters.status || undefined, submittedStart: filters.submittedTime?.[0], submittedEnd: filters.submittedTime?.[1] })
|
downloadExcel('酒店预约', [{ title: '预约单号', value: row => row.applicationNo }, { title: '持卡人', value: row => row.talentName }, { title: '手机号', value: row => row.talentMobile }, { title: '人才等级', value: row => row.talentLevel }, { title: '酒店', value: row => row.merchantName }, { title: '入住时间', value: row => row.expectedTime }, { title: '入住人数', value: row => row.guestCount }, { title: '补贴', value: row => row.subsidy }, { title: '提交时间', value: row => formatDateTime(row.submittedAt) }, { title: '状态', value: row => row.status }], result.records)
|
ElMessage.success(`已导出 ${result.records.length} 条预约`)
|
}
|
|
function viewDetail(row: ServiceApplication) {
|
router.push(`/hotel-reservations/${row.id}`)
|
}
|
|
onMounted(loadData)
|
</script>
|
|
<template>
|
<div class="page-stack prototype-page hotel-reservation-page">
|
<section class="panel">
|
<div class="panel-header">
|
<h3>查询表格</h3>
|
</div>
|
|
<el-form class="hotel-reservation-filter-form" :model="filters" label-width="72px">
|
<el-form-item label="持卡人">
|
<el-input v-model="filters.talentKeyword" placeholder="持卡人姓名、手机号、卡号" clearable />
|
</el-form-item>
|
<el-form-item label="商家名称">
|
<el-input v-model="filters.merchantName" placeholder="请输入商家名称" clearable />
|
</el-form-item>
|
<el-form-item label="卡片等级">
|
<el-select v-model="filters.cardLevel" placeholder="全部" clearable>
|
<el-option label="全部" value="" />
|
<el-option v-for="level in cardLevels" :key="level" :label="level" :value="level" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否补贴">
|
<el-select v-model="filters.subsidy" placeholder="全部" clearable>
|
<el-option label="全部" value="" />
|
<el-option v-for="item in subsidyOptions" :key="item" :label="item" :value="item" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="提交时间">
|
<el-date-picker
|
v-model="filters.submittedTime"
|
type="daterange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
range-separator="至"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select v-model="filters.status" placeholder="全部" clearable>
|
<el-option label="全部" value="" />
|
<el-option v-for="status in statusOptions" :key="status" :label="status" :value="status" />
|
</el-select>
|
</el-form-item>
|
<div class="hotel-reservation-filter-actions">
|
<el-button type="primary" :icon="Search" @click="search">查询</el-button>
|
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
|
</div>
|
</el-form>
|
|
<div class="hotel-reservation-table-tools">
|
<el-button v-permission="'admin.hotel-reservations.export'" :icon="Download" @click="download">下载</el-button>
|
</div>
|
|
<el-table
|
v-loading="loading"
|
:data="rows"
|
border
|
class="hotel-reservation-table"
|
empty-text="暂无酒店预约数据"
|
>
|
<el-table-column prop="applicationNo" label="预约单号" min-width="96" align="center" />
|
<el-table-column prop="talentName" label="持卡人名称" min-width="112" align="center" />
|
<el-table-column prop="talentMobile" label="持卡人电话" min-width="118" align="center" />
|
<el-table-column prop="talentLevel" label="人才等级" min-width="96" align="center" />
|
<el-table-column prop="merchantName" label="酒店等级" min-width="96" align="center" />
|
<el-table-column prop="productName" label="商品名称" min-width="96" align="center" />
|
<el-table-column prop="guestCount" label="入住人数" min-width="90" align="center" />
|
<el-table-column prop="expectedTime" label="预约入住时间" min-width="132" align="center">
|
<template #default="{ row }">{{ formatDateTime(row.expectedTime) }}</template>
|
</el-table-column>
|
<el-table-column prop="submittedAt" label="提交时间" min-width="126" align="center">
|
<template #default="{ row }">{{ formatDateTime(row.submittedAt) }}</template>
|
</el-table-column>
|
<el-table-column prop="status" label="状态" min-width="108" align="center" />
|
<el-table-column label="操作" width="86" fixed="right" align="center">
|
<template #default="{ row }">
|
<el-button link type="primary" @click="viewDetail(row)">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination-row">
|
<el-pagination
|
v-model:current-page="pagination.page"
|
v-model:page-size="pagination.size"
|
background
|
layout="total, sizes, prev, pager, next"
|
:page-sizes="[10, 20, 50]"
|
:pager-count="5"
|
:total="pagination.total"
|
@change="loadData"
|
/>
|
</div>
|
</section>
|
</div>
|
</template>
|
