个人信息

web/src/views/PersonnelView.vue

@@ -6,6 +6,7 @@ import http, { apiErrorMessage } from '../api/http'
 import { downloadApiFile, importExcel } from '../api/excel'
 import { useAuthStore } from '../stores/auth'
 import NativePlaceCascader from '../components/NativePlaceCascader.vue'
+import { ethnicityOptions, isChineseNationality, nationalityOptions, politicalStatusOptions } from '../data/studentIdentityOptions'
 
 type Registry = 'teachers' | 'students'
 interface PageResult {
@@ -151,7 +152,7 @@ function resetForm(row?: any) {
       dateOfBirth: '',
       englishName: '',
       idCardNumber: '',
-      nationality: '',
+      nationality: '中国',
       ethnicity: '',
       politicalStatus: '',
       nativePlace: '',
@@ -170,10 +171,26 @@ function resetForm(row?: any) {
       biography: '',
       notes: '',
     }, row ?? {})
+    form.nationality ||= '中国'
     form.specialTags = splitSpecialTags(form.specialTags)
+    clearChinaOnlyFields()
   }
 }
 
+const isChinese = () => isChineseNationality(form.nationality)
+
+function clearChinaOnlyFields() {
+  if (active.value !== 'students') return
+  if (isChineseNationality(form.nationality)) return
+  form.ethnicity = ''
+  form.politicalStatus = ''
+  form.nativePlace = ''
+}
+
+watch(() => form.nationality, () => {
+  clearChinaOnlyFields()
+})
+
 async function load() {
   loading.value = true
   try {
@@ -632,12 +649,12 @@ watch(active, async () => {
             <el-form-item label="证件号码"><el-input v-model="form.idCardNumber" /></el-form-item>
           </div>
           <div class="form-grid">
-            <el-form-item label="国籍"><el-input v-model="form.nationality" /></el-form-item>
-            <el-form-item label="民族"><el-input v-model="form.ethnicity" /></el-form-item>
+            <el-form-item label="国籍"><el-select v-model="form.nationality" filterable placeholder="请选择国籍"><el-option v-for="option in nationalityOptions" :key="option" :label="option" :value="option" /></el-select></el-form-item>
+            <el-form-item label="民族"><el-select v-model="form.ethnicity" filterable clearable :disabled="!isChinese()" placeholder="请选择民族"><el-option v-for="option in ethnicityOptions" :key="option" :label="option" :value="option" /></el-select></el-form-item>
           </div>
           <div class="form-grid">
-            <el-form-item label="政治面貌"><el-input v-model="form.politicalStatus" /></el-form-item>
-            <el-form-item label="籍贯"><NativePlaceCascader v-model="form.nativePlace" /></el-form-item>
+            <el-form-item label="政治面貌"><el-select v-model="form.politicalStatus" filterable clearable :disabled="!isChinese()" placeholder="请选择政治面貌"><el-option v-for="option in politicalStatusOptions" :key="option" :label="option" :value="option" /></el-select></el-form-item>
+            <el-form-item label="籍贯"><NativePlaceCascader v-model="form.nativePlace" :disabled="!isChinese()" /></el-form-item>
           </div>
           <div class="form-grid">
             <el-form-item label="户籍地址"><el-input v-model="form.householdAddress" /></el-form-item>

web/src/views/StudentProfileView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, watch } from 'vue'
 import { Check, EditPen, Refresh } from '@element-plus/icons-vue'
 import http, { apiErrorMessage } from '../api/http'
 import NativePlaceCascader from '../components/NativePlaceCascader.vue'
+import { ethnicityOptions, isChineseNationality, nationalityOptions, politicalStatusOptions } from '../data/studentIdentityOptions'
 
 const loading = ref(true)
 const saving = ref(false)
@@ -39,10 +40,26 @@ function copyToForm() {
   for (const key of editableFields) {
     form[key] = key === 'specialTags'
       ? splitSpecialTags(profile[key])
-      : (profile[key] ?? '')
+      : key === 'nationality'
+        ? (profile[key] || '中国')
+        : (profile[key] ?? '')
   }
+  clearChinaOnlyFields()
 }
 
+const isChinese = () => isChineseNationality(form.nationality)
+
+function clearChinaOnlyFields() {
+  if (isChineseNationality(form.nationality)) return
+  form.ethnicity = ''
+  form.politicalStatus = ''
+  form.nativePlace = ''
+}
+
+watch(() => form.nationality, () => {
+  clearChinaOnlyFields()
+})
+
 async function load() {
   loading.value = true
   try {
@@ -125,10 +142,10 @@ onMounted(load)
           <el-form-item label="性别"><el-select v-model="form.gender"><el-option v-for="(label, value) in genderLabels" :key="value" :label="label" :value="value" /></el-select></el-form-item>
           <el-form-item label="出生日期"><el-date-picker v-model="form.dateOfBirth" value-format="YYYY-MM-DD" /></el-form-item>
           <el-form-item label="证件号码"><el-input v-model="form.idCardNumber" maxlength="30" /></el-form-item>
-          <el-form-item label="国籍"><el-input v-model="form.nationality" maxlength="50" /></el-form-item>
-          <el-form-item label="民族"><el-input v-model="form.ethnicity" maxlength="50" /></el-form-item>
-          <el-form-item label="政治面貌"><el-input v-model="form.politicalStatus" maxlength="50" /></el-form-item>
-          <el-form-item label="籍贯" class="span-2"><NativePlaceCascader v-model="form.nativePlace" /></el-form-item>
+          <el-form-item label="国籍"><el-select v-model="form.nationality" filterable placeholder="请选择国籍"><el-option v-for="option in nationalityOptions" :key="option" :label="option" :value="option" /></el-select></el-form-item>
+          <el-form-item label="民族"><el-select v-model="form.ethnicity" filterable clearable :disabled="!isChinese()" placeholder="请选择民族"><el-option v-for="option in ethnicityOptions" :key="option" :label="option" :value="option" /></el-select></el-form-item>
+          <el-form-item label="政治面貌"><el-select v-model="form.politicalStatus" filterable clearable :disabled="!isChinese()" placeholder="请选择政治面貌"><el-option v-for="option in politicalStatusOptions" :key="option" :label="option" :value="option" /></el-select></el-form-item>
+          <el-form-item label="籍贯" class="span-2"><NativePlaceCascader v-model="form.nativePlace" :disabled="!isChinese()" /></el-form-item>
         </div>
       </article>