| New file |
| | |
| | | <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> |