<script setup lang="ts">
|
import { computed, onMounted, ref } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import { getServiceApplicationDetail, updateServiceApplicationStatus } from '../api/admin'
|
import type { ServiceApplication } from '../types/admin'
|
|
const route = useRoute()
|
const detail = ref<ServiceApplication>()
|
const loading = ref(false)
|
|
function text(value?: string | number) {
|
return value === undefined || value === null || value === '' ? '-' : String(value)
|
}
|
|
function formatDateTime(value?: string | number) {
|
return text(value).replace('T', ' ')
|
}
|
|
const cardholderInfo = computed(() => [
|
{ label: '持卡人姓名：', value: text(detail.value?.talentName) },
|
{ label: '手机号：', value: text(detail.value?.talentMobile) },
|
{ label: '人才等级：', value: text(detail.value?.talentLevel) },
|
])
|
|
const employmentInfo = computed(() => [
|
{ label: '配偶名称：', value: text(detail.value?.spouseName) },
|
{ label: '联系电话：', value: text(detail.value?.spouseMobile) },
|
{ label: '身份证号：', value: text(detail.value?.spouseIdCardNo) },
|
{ label: '政治面貌：', value: text(detail.value?.spousePoliticalStatus) },
|
{ label: '学历：', value: text(detail.value?.spouseEducation) },
|
{ label: '毕业院校及专业：', value: text(detail.value?.spouseSchoolMajor) },
|
{ label: '现在工作单位及职务：', value: text(detail.value?.spouseWorkUnit) },
|
{ label: '是否为机关事业单位在编人员：', value: text(detail.value?.spouseInInstitution) },
|
{
|
label: '工作经历：',
|
value: text(detail.value?.spouseWorkExperience),
|
wide: true,
|
},
|
])
|
|
const statusInfo = computed(() => [
|
{ label: '状态：', value: text(detail.value?.status) },
|
{ label: '处理时间：', value: formatDateTime(detail.value?.handledAt) },
|
{ label: '处理人：', value: text(detail.value?.handlerName) },
|
])
|
|
const handled = computed(() => detail.value?.status === '已处理')
|
|
async function loadDetail() {
|
loading.value = true
|
try {
|
detail.value = await getServiceApplicationDetail(String(route.params.id))
|
} finally {
|
loading.value = false
|
}
|
}
|
|
async function markHandled() {
|
detail.value = await updateServiceApplicationStatus(String(route.params.id), '已处理')
|
ElMessage.success('已处理')
|
}
|
|
onMounted(loadDetail)
|
</script>
|
|
<template>
|
<div v-loading="loading" class="spouse-employment-detail-page">
|
<section class="spouse-employment-detail-panel">
|
<div class="reservation-detail-section">
|
<h3>持卡人信息</h3>
|
<div class="reservation-detail-grid single-line">
|
<div v-for="item in cardholderInfo" :key="item.label" class="reservation-detail-item">
|
<span>{{ item.label }}</span>
|
<strong>{{ item.value }}</strong>
|
</div>
|
</div>
|
</div>
|
|
<div class="reservation-detail-section">
|
<h3>预约信息</h3>
|
<div class="reservation-detail-grid spouse-employment-info-grid">
|
<div
|
v-for="item in employmentInfo"
|
:key="item.label"
|
class="reservation-detail-item"
|
:class="{ wide: item.wide }"
|
>
|
<span>{{ item.label }}</span>
|
<strong>{{ item.value }}</strong>
|
</div>
|
</div>
|
</div>
|
|
<div class="reservation-detail-section">
|
<h3>状态信息</h3>
|
<div class="reservation-detail-grid single-line">
|
<div v-for="item in statusInfo" :key="item.label" class="reservation-detail-item">
|
<span>{{ item.label }}</span>
|
<strong>{{ item.value }}</strong>
|
</div>
|
</div>
|
</div>
|
</section>
|
|
<el-button v-if="!handled" type="primary" class="reservation-detail-action" @click="markHandled">已处理</el-button>
|
</div>
|
</template>
|
