<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 { getParkingPlateSubmissions } from '../api/admin'
|
import { TALENT_CARD_LEVELS } from '../utils/cardLevels'
|
import { downloadExcel } from '../utils/excel'
|
|
const loading = ref(false)
|
const router = useRouter()
|
const rows = ref<Record<string, any>[]>([])
|
const filters = reactive({ keyword: '', serviceKeyword: '', cardLevel: '', status: '', submissionType: '', submittedTime: [] as string[] })
|
const pagination = reactive({ page: 1, size: 10, total: 0 })
|
const cardLevels = TALENT_CARD_LEVELS
|
const statusOptions = ['待处理', '已处理', '已驳回']
|
const submissionTypes = ['新增', '修改']
|
function text(value: unknown) { return value === undefined || value === null || value === '' ? '-' : String(value) }
|
function formatDate(value: unknown) { return text(value).replace('T', ' ') }
|
function statusText(value: unknown) {
|
const label = text(value).toUpperCase()
|
if (['SUBMITTED', 'PENDING', '待处理', '待审核'].includes(label)) return '待处理'
|
if (['ACTIVE', 'PROCESSED', 'PASSED', 'APPROVED', '已处理', '处理完成', '通过', '已通过'].includes(label)) return '已处理'
|
if (['REJECTED', 'REFUSED', 'DENIED', '已拒绝', '拒绝', '驳回', '已驳回'].includes(label)) return '已驳回'
|
if (['CANCELLED', 'CANCELED', '已取消', '取消'].includes(label)) return '已取消'
|
return text(value)
|
}
|
function queryParams(size = pagination.size) { return { page: pagination.page, size, keyword: filters.keyword || undefined, serviceKeyword: filters.serviceKeyword || undefined, cardLevel: filters.cardLevel || undefined, status: filters.status || undefined, submissionType: filters.submissionType || undefined, submittedStart: filters.submittedTime?.[0], submittedEnd: filters.submittedTime?.[1] } }
|
async function loadData() { loading.value = true; try { const result = await getParkingPlateSubmissions(queryParams()); rows.value = result.records || []; pagination.total = result.total || 0 } finally { loading.value = false } }
|
function search() { pagination.page = 1; loadData() }
|
function resetFilters() { Object.assign(filters, { keyword: '', serviceKeyword: '', cardLevel: '', status: '', submissionType: '', submittedTime: [] }); search() }
|
function viewDetail(row: Record<string, any>) { router.push(`/parking-plates/${row.id}`) }
|
async function download() { const result = await getParkingPlateSubmissions({ ...queryParams(1000), page: 1 }); downloadExcel('停车车牌管理', [{ title: '提交单号', value: row => text(row.registrationNo || row.submissionNo || row.applicationNo) }, { title: '持卡人名称', value: row => text(row.talentName) }, { title: '持卡人电话', value: row => text(row.talentMobile) }, { title: '人才等级', value: row => text(row.cardLevel || row.talentLevel) }, { title: '车牌号', value: row => text(row.plateNumber || row.plateNo) }, { title: '停车场', value: row => text(row.parkingLotName || row.parkingLot || row.serviceName) }, { title: '提交时间', value: row => formatDate(row.submittedAt || row.createdAt) }, { title: '提交类型', value: row => text(row.submissionType) }, { title: '状态', value: row => statusText(row.statusName || row.status) }], result.records || []) }
|
onMounted(loadData)
|
</script>
|
<template>
|
<div class="page-stack prototype-page parking-plate-page">
|
<section class="panel">
|
<div class="panel-header">
|
<h3>查询表格</h3>
|
</div>
|
|
<el-form class="parking-plate-filter-form" :model="filters" label-width="72px">
|
<el-form-item label="持卡人"><el-input v-model="filters.keyword" clearable placeholder="持卡人姓名、手机号、卡号" /></el-form-item>
|
<el-form-item label="停车场"><el-input v-model="filters.serviceKeyword" clearable placeholder="停车场名称" /></el-form-item>
|
<el-form-item label="卡片等级"><el-select v-model="filters.cardLevel" clearable placeholder="全部"><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-date-picker v-model="filters.submittedTime" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /></el-form-item>
|
<el-form-item label="状态"><el-select v-model="filters.status" clearable placeholder="全部"><el-option label="全部" value="" /><el-option v-for="status in statusOptions" :key="status" :label="status" :value="status" /></el-select></el-form-item>
|
<el-form-item label="提交类型"><el-select v-model="filters.submissionType" clearable placeholder="全部"><el-option label="全部" value="" /><el-option v-for="item in submissionTypes" :key="item" :label="item" :value="item" /></el-select></el-form-item>
|
<div class="parking-plate-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="parking-plate-table-tools">
|
<el-button v-permission="'admin.parking-plates.export'" :icon="Download" @click="download">下载</el-button>
|
</div>
|
|
<el-table v-loading="loading" :data="rows" border class="parking-plate-table" empty-text="暂无车牌提交数据">
|
<el-table-column label="提交单号" min-width="116" align="center"><template #default="{ row }">{{ text(row.registrationNo || row.submissionNo || row.applicationNo) }}</template></el-table-column>
|
<el-table-column prop="talentName" label="持卡人名称" min-width="106" align="center" />
|
<el-table-column prop="talentMobile" label="持卡人电话" min-width="118" align="center" />
|
<el-table-column label="人才等级" min-width="106" align="center"><template #default="{ row }">{{ text(row.cardLevel || row.talentLevel) }}</template></el-table-column>
|
<el-table-column label="车牌号" min-width="104" align="center"><template #default="{ row }">{{ text(row.plateNumber || row.plateNo) }}</template></el-table-column>
|
<el-table-column label="停车场" min-width="144" align="center" show-overflow-tooltip><template #default="{ row }">{{ text(row.parkingLotName || row.parkingLot || row.serviceName) }}</template></el-table-column>
|
<el-table-column label="提交时间" min-width="134" align="center"><template #default="{ row }">{{ formatDate(row.submittedAt || row.createdAt) }}</template></el-table-column>
|
<el-table-column prop="submissionType" label="提交类型" min-width="96" align="center" />
|
<el-table-column label="状态" min-width="90" align="center"><template #default="{ row }">{{ statusText(row.statusName || row.status) }}</template></el-table-column>
|
<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>
|
