<script setup lang="ts">
|
import { onMounted, reactive, ref } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import type { FormInstance, FormRules } from 'element-plus'
|
import { getTalentDetail, upgradeTalent } from '../api/admin'
|
|
const route = useRoute()
|
const router = useRouter()
|
const talentId = String(route.params.id || '')
|
const loading = ref(false)
|
const saving = ref(false)
|
const formRef = ref<FormInstance>()
|
const mobile = ref('')
|
|
const levels = ['卓越人才卡', '杰出人才卡', '菁英人才卡']
|
|
const form = reactive({
|
name: '',
|
idCardNo: '',
|
gender: undefined as number | undefined,
|
workUnit: '',
|
talentLevel: '',
|
talentCardNo: '',
|
sourceAreaType: 'LOCAL',
|
workAddress: '',
|
contactAddress: '',
|
})
|
|
const rules: FormRules = {
|
name: [{ required: true, message: '请输入持卡人姓名', trigger: 'blur' }],
|
idCardNo: [
|
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
{ pattern: /^[0-9A-Z]{18}$/, message: '身份证号须为18位数字或大写英文字母', trigger: 'blur' },
|
],
|
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
workUnit: [{ required: true, message: '请输入工作单位', trigger: 'blur' }],
|
workAddress: [{ required: true, message: '请输入工作地址', trigger: 'blur' }],
|
contactAddress: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
|
talentLevel: [{ required: true, message: '请选择人才等级', trigger: 'change' }],
|
talentCardNo: [
|
{ required: true, message: '请输入人才卡号', trigger: 'blur' },
|
{ pattern: /^[0-9A-Z-]{1,64}$/, message: '人才卡号只能包含大写字母、数字和短横线', trigger: 'blur' },
|
],
|
}
|
|
function normalizeIdCardNo(value: string) {
|
form.idCardNo = value.toUpperCase().replace(/[^0-9A-Z]/g, '').slice(0, 18)
|
}
|
|
function normalizeTalentCardNo(value: string) {
|
form.talentCardNo = value.toUpperCase().replace(/[^0-9A-Z-]/g, '').slice(0, 64)
|
}
|
|
async function loadTalent() {
|
loading.value = true
|
try {
|
const detail = await getTalentDetail(talentId)
|
mobile.value = detail.mobile || ''
|
form.name = detail.name || ''
|
form.idCardNo = detail.idCardNo || ''
|
form.gender = detail.gender
|
form.workUnit = detail.workUnit || ''
|
form.workAddress = detail.workAddress || ''
|
form.contactAddress = detail.contactAddress || ''
|
form.sourceAreaType = detail.sourceAreaType === 'OUTSIDE' ? 'OUTSIDE' : 'LOCAL'
|
form.talentCardNo = detail.talentCardNo || ''
|
// 游客本来没有卡等级，默认给最高档，管理员可以改。
|
form.talentLevel = levels.includes(String(detail.talentLevel || '')) ? String(detail.talentLevel) : '卓越人才卡'
|
} finally {
|
loading.value = false
|
}
|
}
|
|
async function submit() {
|
const valid = await formRef.value?.validate().catch(() => false)
|
if (!valid) return
|
saving.value = true
|
try {
|
await upgradeTalent(talentId, { ...form })
|
ElMessage.success('已升级为持卡人')
|
router.push(`/talents/${talentId}`)
|
} finally {
|
saving.value = false
|
}
|
}
|
|
function goBack() {
|
router.push(`/talents/${talentId}`)
|
}
|
|
onMounted(loadTalent)
|
</script>
|
|
<template>
|
<div class="talent-detail-page talent-create-page">
|
<el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="104px">
|
<section class="detail-block user-summary create-mobile-summary">
|
<el-form-item label="手机号码：">
|
<span class="upgrade-mobile">{{ mobile || '-' }}</span>
|
<span class="upgrade-mobile-tip">手机号是账号标识，如需修改请回详情页点「修改」</span>
|
</el-form-item>
|
</section>
|
|
<section class="detail-block">
|
<h3>持卡人认证</h3>
|
<div class="identity-edit-card">
|
<div class="identity-edit-form">
|
<el-form-item label="持卡人姓名：" prop="name" required>
|
<el-input v-model="form.name" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="身份证号：" prop="idCardNo" required>
|
<el-input
|
v-model="form.idCardNo"
|
placeholder="请输入18位身份证号"
|
maxlength="18"
|
@input="normalizeIdCardNo"
|
/>
|
</el-form-item>
|
<el-form-item label="性别：" prop="gender" required>
|
<el-select v-model="form.gender" placeholder="选择">
|
<el-option label="男" :value="1" />
|
<el-option label="女" :value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工作单位：" prop="workUnit" required>
|
<el-input v-model="form.workUnit" placeholder="请输入工作单位" />
|
</el-form-item>
|
<el-form-item label="工作地址：" prop="workAddress" required>
|
<el-input v-model="form.workAddress" placeholder="请输入工作地址" />
|
</el-form-item>
|
<el-form-item label="联系地址：" prop="contactAddress" required>
|
<el-input v-model="form.contactAddress" placeholder="请输入联系地址" />
|
</el-form-item>
|
</div>
|
</div>
|
</section>
|
|
<section class="detail-block">
|
<h3>人才卡管理</h3>
|
<div class="identity-edit-card">
|
<div class="identity-edit-form">
|
<el-form-item label="人才等级：" prop="talentLevel" required>
|
<el-radio-group v-model="form.talentLevel">
|
<el-radio-button v-for="level in levels" :key="level" :label="level">{{ level }}</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="人才卡号：" prop="talentCardNo" required>
|
<el-input
|
v-model="form.talentCardNo"
|
placeholder="请输入人才卡号（大写字母、数字、短横线）"
|
maxlength="64"
|
@input="normalizeTalentCardNo"
|
/>
|
</el-form-item>
|
<el-form-item label="来源地：" prop="sourceAreaType" required>
|
<el-radio-group v-model="form.sourceAreaType">
|
<el-radio-button label="LOCAL">本地</el-radio-button>
|
<el-radio-button label="OUTSIDE">外地</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
</div>
|
</section>
|
|
<section class="detail-block">
|
<el-button type="primary" class="detail-save-button" :loading="saving" @click="submit">保存</el-button>
|
<el-button @click="goBack">取消</el-button>
|
</section>
|
</el-form>
|
</div>
|
</template>
|
|
<style scoped>
|
.upgrade-mobile {
|
color: #1f2d3d;
|
font-weight: 600;
|
}
|
|
.upgrade-mobile-tip {
|
margin-left: 16px;
|
color: #8a94a6;
|
font-size: 12px;
|
}
|
</style>
|
