shinnosuke
4 天以前 da90ca8cc53e78e539c4b78687053bf518ddd95d
更新....
4个文件已添加
185 ■■■■■ 已修改文件
rencaika/static/home-assets/mascot-leap.png 补丁 | 查看 | 原始文档 | blame | 历史
rencaika/static/home-assets/mascot-rest.png 补丁 | 查看 | 原始文档 | blame | 历史
rencaika/static/home-assets/mascot-stand.png 补丁 | 查看 | 原始文档 | blame | 历史
talent-card-admin/src/views/TalentUpgradeView.vue 185 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
rencaika/static/home-assets/mascot-leap.png
rencaika/static/home-assets/mascot-rest.png
rencaika/static/home-assets/mascot-stand.png
talent-card-admin/src/views/TalentUpgradeView.vue
New file
@@ -0,0 +1,185 @@
<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>