<script setup lang="ts">
|
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { Download, Refresh, Search } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import { getFamilyCardApplications } from '../api/admin'
|
import type { FamilyCardApplication } from '../types/admin'
|
import { downloadExcel } from '../utils/excel'
|
|
const props = defineProps<{ mode?: 'application' | 'management' }>()
|
const route = useRoute()
|
const router = useRouter()
|
const isManagement = computed(() => props.mode === 'management')
|
const emptyText = computed(() => isManagement.value ? '暂无家属卡数据' : '暂无家属卡申请数据')
|
|
const filters = reactive({
|
familyKeyword: '',
|
talentKeyword: '',
|
cardLevel: '',
|
status: undefined as string | number | undefined,
|
applyTime: [] as string[],
|
})
|
|
const pagination = reactive({
|
page: 1,
|
size: 10,
|
total: 0,
|
})
|
|
const loading = ref(false)
|
const rows = ref<FamilyCardApplication[]>([])
|
|
const applicationStatusOptions = [
|
{ label: '待审核', value: 0 },
|
{ label: '已通过', value: 1 },
|
{ label: '已驳回', value: 2 },
|
{ label: '已取消', value: 3 },
|
]
|
const managementStatusOptions = [
|
{ label: '正常', value: 1 },
|
{ label: '已解绑', value: 3 },
|
]
|
const statusOptions = computed(() => isManagement.value ? managementStatusOptions : applicationStatusOptions)
|
|
const cardLevels = ['卓越人才卡', '杰出人才卡', '菁英人才卡', '普通游客']
|
|
function statusText(row: FamilyCardApplication) {
|
if (isManagement.value) {
|
if (row.status === 1 || row.status === '1') return '正常'
|
if (row.status === 3 || row.status === '3') return '已解绑'
|
}
|
return row.statusText || '-'
|
}
|
|
function registerTime(row: FamilyCardApplication) {
|
if (isManagement.value) {
|
const value = row.auditTime || row.applyTime || row.createdAt || ''
|
return String(value).match(/^\d{4}-\d{2}-\d{2}/)?.[0] || value
|
}
|
return row.applyTime || row.createdAt || ''
|
}
|
|
function familyName(row: FamilyCardApplication) {
|
return row.familyName || row.dependentName || '-'
|
}
|
|
function familyMobile(row: FamilyCardApplication) {
|
return row.familyMobile || row.dependentMobile || '-'
|
}
|
|
function relationship(row: FamilyCardApplication) {
|
return row.relationship || row.relation || '-'
|
}
|
|
function familyIdCard(row: FamilyCardApplication) {
|
return row.idCardNo || row.dependentIdCardNo || '-'
|
}
|
|
async function loadData() {
|
loading.value = true
|
try {
|
const result = await getFamilyCardApplications({
|
page: pagination.page,
|
size: pagination.size,
|
familyKeyword: filters.familyKeyword || undefined,
|
talentKeyword: filters.talentKeyword || undefined,
|
cardLevel: filters.cardLevel || undefined,
|
status: filters.status,
|
applyStart: filters.applyTime?.[0],
|
applyEnd: filters.applyTime?.[1],
|
management: isManagement.value || undefined,
|
})
|
rows.value = result.records
|
pagination.total = result.total
|
} catch {
|
rows.value = []
|
pagination.total = 0
|
} finally {
|
loading.value = false
|
}
|
}
|
|
function search() {
|
pagination.page = 1
|
loadData()
|
}
|
|
function resetFilters() {
|
filters.familyKeyword = ''
|
filters.talentKeyword = ''
|
filters.cardLevel = ''
|
filters.status = undefined
|
filters.applyTime = []
|
pagination.page = 1
|
search()
|
}
|
|
async function download() {
|
const result = await getFamilyCardApplications({
|
page: 1,
|
size: 1000,
|
familyKeyword: filters.familyKeyword || undefined,
|
talentKeyword: filters.talentKeyword || undefined,
|
cardLevel: filters.cardLevel || undefined,
|
status: filters.status,
|
applyStart: filters.applyTime?.[0],
|
applyEnd: filters.applyTime?.[1],
|
management: isManagement.value || undefined,
|
})
|
downloadExcel(
|
isManagement.value ? '家属卡管理列表' : '家属卡申请列表',
|
isManagement.value ? [
|
{ title: '编号', value: row => row.id },
|
{ title: '家属姓名', value: row => familyName(row) },
|
{ title: '家属手机号', value: row => familyMobile(row) },
|
{ title: '持卡人姓名', value: row => row.talentName },
|
{ title: '持卡人手机号', value: row => row.talentMobile },
|
{ title: '人才卡号', value: row => row.talentCardNo },
|
{ title: '卡片等级', value: row => row.cardLevel },
|
{ title: '注册时间', value: row => registerTime(row) },
|
{ title: '状态', value: row => statusText(row) },
|
] : [
|
{ title: '申请编号', value: row => row.applicationNo || row.applyNo },
|
{ title: '持卡人姓名', value: row => row.talentName },
|
{ title: '持卡人手机号', value: row => row.talentMobile },
|
{ title: '持卡人身份证号', value: row => row.talentIdCardNo },
|
{ title: '人才卡号', value: row => row.talentCardNo },
|
{ title: '卡片等级', value: row => row.cardLevel },
|
{ title: '家属姓名', value: row => familyName(row) },
|
{ title: '家属手机号', value: row => familyMobile(row) },
|
{ title: '家属身份证号', value: row => familyIdCard(row) },
|
{ title: '关系', value: row => relationship(row) },
|
{ title: '申请时间', value: row => registerTime(row) },
|
{ title: '状态', value: row => statusText(row) },
|
{ title: '审核备注', value: row => row.auditRemark || '-' },
|
],
|
result.records,
|
)
|
ElMessage.success('已导出 ' + result.records.length + ' 条记录')
|
}
|
|
function viewDetail(row: FamilyCardApplication) {
|
router.push((isManagement.value ? '/family-cards/' : '/family-card-applications/') + row.id)
|
}
|
|
watch(() => route.path, () => resetFilters())
|
onMounted(loadData)
|
</script>
|
|
<template>
|
<div
|
class="page-stack prototype-page family-card-page"
|
:class="{ 'family-card-management-page': isManagement }"
|
>
|
<section class="panel">
|
<div class="panel-header">
|
<h3>查询表格</h3>
|
</div>
|
|
<el-form class="family-card-filter-form" :model="filters" label-width="84px">
|
<el-form-item :label="isManagement ? '家属' : '家属信息'">
|
<el-input v-model="filters.familyKeyword" :placeholder="isManagement ? '家属姓名、手机号' : '请输入家属姓名、手机号或身份证号'" clearable />
|
</el-form-item>
|
<el-form-item label="持卡人" :class="{ 'family-card-filter-talent': isManagement }">
|
<el-input v-model="filters.talentKeyword" 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.status" placeholder="全部" clearable>
|
<el-option label="全部" :value="undefined" />
|
<el-option v-for="item in statusOptions" :key="item.label" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="申请时间" :class="{ 'family-card-filter-date': isManagement }">
|
<el-date-picker
|
v-model="filters.applyTime"
|
type="daterange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
range-separator="至"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
<div class="family-card-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="family-card-table-tools">
|
<el-button :icon="Download" @click="download">{{ isManagement ? '下载' : '导出' }}</el-button>
|
</div>
|
|
<el-table v-if="isManagement" v-loading="loading" :data="rows" class="family-card-table" :empty-text="emptyText">
|
<el-table-column prop="id" label="编号" width="82" align="center" />
|
<el-table-column label="家属名称" min-width="106">
|
<template #default="{ row }">{{ familyName(row) }}</template>
|
</el-table-column>
|
<el-table-column label="家属手机号" min-width="130">
|
<template #default="{ row }">{{ familyMobile(row) }}</template>
|
</el-table-column>
|
<el-table-column prop="talentName" label="持卡人名称" min-width="110" />
|
<el-table-column prop="talentMobile" label="持卡人手机号" min-width="130" />
|
<el-table-column prop="talentCardNo" label="人才卡号" min-width="120" />
|
<el-table-column prop="cardLevel" label="卡片等级" min-width="108" />
|
<el-table-column label="注册时间" min-width="150">
|
<template #default="{ row }">{{ registerTime(row) }}</template>
|
</el-table-column>
|
<el-table-column label="状态" min-width="90">
|
<template #default="{ row }">{{ statusText(row) }}</template>
|
</el-table-column>
|
<el-table-column label="操作" width="72" fixed="right">
|
<template #default="{ row }">
|
<el-button link type="primary" @click="viewDetail(row)">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-table v-else v-loading="loading" :data="rows" class="family-card-table" :empty-text="emptyText">
|
<el-table-column prop="id" label="编号" width="86" align="center" />
|
<el-table-column prop="applicationNo" label="申请编号" min-width="160" />
|
<el-table-column label="家属姓名" min-width="110">
|
<template #default="{ row }">{{ familyName(row) }}</template>
|
</el-table-column>
|
<el-table-column label="家属手机号" min-width="130">
|
<template #default="{ row }">{{ familyMobile(row) }}</template>
|
</el-table-column>
|
<el-table-column label="家属身份证号" min-width="180">
|
<template #default="{ row }">{{ familyIdCard(row) }}</template>
|
</el-table-column>
|
<el-table-column prop="talentName" label="持卡人姓名" min-width="110" />
|
<el-table-column prop="talentMobile" label="持卡人手机号" min-width="130" />
|
<el-table-column prop="talentIdCardNo" label="持卡人身份证号" min-width="180" />
|
<el-table-column prop="talentCardNo" label="人才卡号" min-width="120" />
|
<el-table-column prop="cardLevel" label="卡片等级" min-width="108" />
|
<el-table-column label="关系" min-width="90">
|
<template #default="{ row }">{{ relationship(row) }}</template>
|
</el-table-column>
|
<el-table-column prop="auditRemark" label="审核备注" min-width="160" show-overflow-tooltip />
|
<el-table-column label="申请时间" min-width="150">
|
<template #default="{ row }">{{ registerTime(row) }}</template>
|
</el-table-column>
|
<el-table-column label="状态" width="90">
|
<template #default="{ row }">{{ statusText(row) }}</template>
|
</el-table-column>
|
<el-table-column label="操作" width="180" fixed="right">
|
<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="isManagement ? 7 : 5"
|
:total="pagination.total"
|
@change="loadData"
|
/>
|
</div>
|
</section>
|
</div>
|
</template>
|
