<script setup>
|
import { onMounted, reactive, ref } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { Refresh, Search } from '@element-plus/icons-vue'
|
import { getGuideApplications } from '@/api/guideAudits'
|
|
const router = useRouter()
|
const loading = ref(false)
|
const records = ref([])
|
const total = ref(0)
|
const dateRange = ref([])
|
const query = reactive({ page: 1, size: 10, keyword: '', auditStatus: null })
|
const statusMeta = {
|
0: { label: '待审核', type: 'warning' },
|
1: { label: '已通过', type: 'success' },
|
2: { label: '已驳回', type: 'danger' },
|
}
|
|
const formatDateTime = (value) => value ? value.replace('T', ' ').slice(0, 19) : '-'
|
const auditActionText = (status) => status === 0 ? '审核' : '查看'
|
|
const loadApplications = async () => {
|
loading.value = true
|
try {
|
const [startDate, endDate] = dateRange.value || []
|
const result = await getGuideApplications({
|
page: query.page,
|
size: query.size,
|
keyword: query.keyword.trim() || undefined,
|
auditStatus: query.auditStatus ?? undefined,
|
startDate,
|
endDate,
|
})
|
records.value = result.records
|
total.value = result.total
|
} finally {
|
loading.value = false
|
}
|
}
|
|
const search = () => { query.page = 1; loadApplications() }
|
const reset = () => {
|
Object.assign(query, { page: 1, size: 10, keyword: '', auditStatus: null })
|
dateRange.value = []
|
loadApplications()
|
}
|
const openAudit = (row) => router.push(`/guide-audits/${row.id}`)
|
const changePage = (page) => { query.page = page; loadApplications() }
|
const changePageSize = (size) => { query.page = 1; query.size = size; loadApplications() }
|
|
onMounted(loadApplications)
|
</script>
|
|
<template>
|
<section class=guide-audit-page>
|
<el-card class=query-card shadow=never>
|
<h2>查询表格</h2>
|
<el-form class=query-form label-position=left label-width=82px @submit.prevent=search>
|
<el-form-item label=导游搜索>
|
<el-input v-model=query.keyword clearable placeholder=请输入导游手机号/姓名/申请编号 @keyup.enter=search />
|
</el-form-item>
|
<el-form-item label=创建时间>
|
<el-date-picker v-model=dateRange type=daterange value-format=YYYY-MM-DD range-separator=至 start-placeholder=开始日期 end-placeholder=结束日期 />
|
</el-form-item>
|
<el-form-item label=状态>
|
<el-select v-model=query.auditStatus clearable placeholder=全部>
|
<el-option label=待审核 :value=0 />
|
<el-option label=已通过 :value=1 />
|
<el-option label=已驳回 :value=2 />
|
</el-select>
|
</el-form-item>
|
<div class=query-actions>
|
<el-button type=primary :icon=Search @click=search>查询</el-button>
|
<el-button :icon=Refresh @click=reset>重置</el-button>
|
</div>
|
</el-form>
|
</el-card>
|
<el-card class=table-card shadow=never>
|
<el-table v-loading=loading :data=records border row-key=id>
|
<el-table-column prop=applicationNo label=申请编号 min-width=130 align=center />
|
<el-table-column prop=realName label=导游姓名 min-width=120 align=center />
|
<el-table-column prop=mobile label=手机号 min-width=145 align=center />
|
<el-table-column label=申请时间 min-width=175 align=center>
|
<template #default=scope><span v-text=formatDateTime(scope.row.createdAt) /></template>
|
</el-table-column>
|
<el-table-column label=状态 width=110 align=center>
|
<template #default=scope>
|
<el-tag :type=statusMeta[scope.row.auditStatus].type v-text=statusMeta[scope.row.auditStatus].label />
|
</template>
|
</el-table-column>
|
<el-table-column label=操作 width=120 fixed=right align=center>
|
<template #default=scope>
|
<el-button link type=primary @click=openAudit(scope.row) v-text=auditActionText(scope.row.auditStatus) />
|
</template>
|
</el-table-column>
|
<template #empty><el-empty description=暂无符合条件的导游申请 /></template>
|
</el-table>
|
<div class=pagination-row>
|
<span>共 <b v-text=total /> 条记录</span>
|
<el-pagination background :total=total :current-page=query.page :page-size=query.size
|
@current-change=changePage @size-change=changePageSize />
|
</div>
|
</el-card>
|
</section>
|
</template>
|
|
<style scoped>
|
.guide-audit-page { display: flex; flex-direction: column; gap: 18px; }
|
.query-card, .table-card { border-radius: 3px; }
|
.query-card h2 { margin: 0 0 20px; color: #2d3748; font-size: 15px; }
|
.query-form { display: grid; grid-template-columns: 1.1fr 1.4fr .8fr auto; gap: 14px 26px; align-items: start; }
|
.query-form :deep(.el-form-item) { margin-bottom: 0; }
|
.query-form :deep(.el-form-item__label) { white-space: nowrap; }
|
.query-form :deep(.el-input), .query-form :deep(.el-select), .query-form :deep(.el-date-editor) { width: 100%; }
|
.query-actions { display: flex; gap: 8px; }
|
.table-card :deep(.el-card__body) { padding-top: 26px; }
|
.pagination-row { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }
|
.pagination-row > span { color: #8a94a6; font-size: 13px; }
|
@media (max-width: 1200px) { .query-form { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
|
</style>
|
