Disable profile fields when not editing

web/src/components/ChinesePostalCodeInput.vue

@@ -4,7 +4,7 @@ import { nativePlaceCandidatesForPostcode, postcodeForNativePlace } from '../dat
 
 const postcode = defineModel<string>({ default: '' })
 const nativePlace = defineModel<string>('nativePlace', { default: '' })
-const props = defineProps<{ linked?: boolean }>()
+const props = defineProps<{ linked?: boolean; disabled?: boolean }>()
 
 const candidates = ref<string[]>([])
 const suggestedPostcode = computed(() => props.linked === false ? undefined : postcodeForNativePlace(nativePlace.value))
@@ -48,11 +48,11 @@ watch(() => props.linked, (linked) => {
   <div class="postcode-control">
     <template v-if="linked !== false && lockedPrefix">
       <el-input :model-value="lockedPrefix" disabled class="postcode-prefix" aria-label="邮政编码前四位" />
-      <el-input v-model="suffix" inputmode="numeric" maxlength="2" placeholder="后两位" aria-label="邮政编码后两位" />
+      <el-input v-model="suffix" inputmode="numeric" maxlength="2" :disabled="disabled" placeholder="后两位" aria-label="邮政编码后两位" />
     </template>
-    <el-input v-else-if="linked !== false" :model-value="postcode" inputmode="numeric" maxlength="6" placeholder="6位邮政编码" @update:model-value="updatePostcode" />
-    <el-input v-else v-model="postcode" maxlength="20" placeholder="邮政编码" />
-    <el-select v-if="linked !== false && candidates.length > 1" placeholder="请选择匹配的区县" @update:model-value="selectCandidate">
+    <el-input v-else-if="linked !== false" :model-value="postcode" inputmode="numeric" maxlength="6" :disabled="disabled" placeholder="6位邮政编码" @update:model-value="updatePostcode" />
+    <el-input v-else v-model="postcode" maxlength="20" :disabled="disabled" placeholder="邮政编码" />
+    <el-select v-if="linked !== false && candidates.length > 1" :disabled="disabled" placeholder="请选择匹配的区县" @update:model-value="selectCandidate">
       <el-option v-for="candidate in candidates" :key="candidate" :label="candidate" :value="candidate" />
     </el-select>
   </div>

web/src/views/StudentProfileView.vue

@@ -144,9 +144,9 @@ onMounted(load)
           <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-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>
+          <el-form-item label="民族"><el-select v-model="form.ethnicity" filterable clearable :disabled="!editing || !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="!editing || !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="!editing || !isChinese()" /></el-form-item>
         </div>
       </article>
 
@@ -157,7 +157,7 @@ onMounted(load)
           <el-form-item label="电子邮箱"><el-input v-model="form.email" maxlength="100" /></el-form-item>
           <el-form-item label="微信"><el-input v-model="form.weChat" maxlength="60" /></el-form-item>
           <el-form-item label="QQ"><el-input v-model="form.qq" maxlength="30" /></el-form-item>
-          <el-form-item label="邮政编码"><ChinesePostalCodeInput v-model="form.postalCode" v-model:native-place="form.nativePlace" :linked="isChinese()" /></el-form-item>
+          <el-form-item label="邮政编码"><ChinesePostalCodeInput v-model="form.postalCode" v-model:native-place="form.nativePlace" :linked="isChinese()" :disabled="!editing" /></el-form-item>
           <el-form-item label="户籍地址" class="span-2"><el-input v-model="form.householdAddress" maxlength="300" /></el-form-item>
           <el-form-item label="现居住地址" class="span-2"><el-input v-model="form.currentAddress" maxlength="300" /></el-form-item>
         </div>
@@ -170,7 +170,7 @@ onMounted(load)
           <el-form-item label="与本人关系"><el-input v-model="form.emergencyContactRelationship" maxlength="30" /></el-form-item>
           <el-form-item label="紧急联系电话"><el-input v-model="form.emergencyContactPhone" maxlength="30" /></el-form-item>
           <el-form-item label="特殊标记">
-            <el-select v-model="form.specialTags" multiple filterable placeholder="请选择需要关注的情况">
+            <el-select v-model="form.specialTags" multiple filterable :disabled="!editing" placeholder="请选择需要关注的情况">
               <el-option v-for="tag in specialTagOptions" :key="tag" :label="tag" :value="tag" />
             </el-select>
           </el-form-item>