feat: 回显交互修改

src/views/fill-questionnaire/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onUnmounted, reactive, ref, nextTick, computed } from 'vue';
+import { defineComponent, onMounted, onUnmounted, reactive, ref, nextTick, computed, watch } from 'vue';
 import styles from './index.module.less';
 import {
   Button,
@@ -199,6 +199,7 @@ export default defineComponent({
       submitLoading: false,
       id: null as any,
       code: null as any,
+      areaPopupIndex: null as any,
     })
 
     onMounted(async () => {
@@ -280,6 +281,8 @@ export default defineComponent({
         forms.provinceCode = data.provinceCode
         forms.cityCode = data.cityCode
         forms.districtCode = data.districtCode
+        // 回显省市区
+        forms.areaPopupIndex = data.districtCode || data.cityCode || data.provinceCode
         const primarySchool = ['一年级','二年级','三年级','四年级','五年级','六年级',], juniorSchool = ['六年级','七年级','八年级','九年级'];
         if (primarySchool.includes(data.currentGrade) && (route.query.meetingType === 'primarySchoolNo' || route.query.meetingType === 'primarySchoolYes')) {
           forms.currentClass = data.currentClass
@@ -293,6 +296,7 @@ export default defineComponent({
         forms.prePhone = data.phone
         forms.username = data.username
         forms.schoolAreaId = data.schoolAreaId
+        forms.schoolPopupIndex = data.schoolAreaId ? [data.schoolAreaId] : []
         forms.schoolName = data.schoolName
         forms.supportFlag = data.supportFlag
         forms.participationFlag = data.participationFlag
@@ -568,6 +572,23 @@ export default defineComponent({
         //
       }
     };
+    // 监听状态
+    watch(
+      () => forms.showPicker,
+      () => {
+        if (forms.showPicker) {
+          forms.areaPopupIndex = forms.districtCode || forms.cityCode || forms.provinceCode
+        }
+      }
+    )
+    watch(
+      () => forms.schoolStatus,
+      () => {
+        if (forms.schoolStatus) {
+          forms.schoolPopupIndex = forms.schoolAreaId ? [forms.schoolAreaId] : [];
+        }
+      }
+    )
 
     onUnmounted(() => {
       window.removeEventListener('pageshow', onPageShow);
@@ -580,7 +601,7 @@ export default defineComponent({
             <p>1. 学校</p>
             {
               forms.schoolName ?
-              <div class={[styles.valDone, forms.schoolName && styles.valDone2, forms.schoolStatus && styles.openVal]} onClick={() => {
+              <div class={[styles.valDone, forms.schoolName && styles.valDone2, (forms.schoolStatus||forms.showPicker) && styles.openVal]} onClick={() => {
                 forms.schoolStatus = true
                 getSchoolAreaList()
               }}>
@@ -588,7 +609,7 @@ export default defineComponent({
                 <span class={styles.vdArea}>{forms.areaName}</span>
                 <i></i>
               </div> :
-              <div class={[styles.valDot, styles.grayText, forms.schoolStatus && styles.openVal]} onClick={openAreaPop}>请选择学校<i></i></div>
+              <div class={[styles.valDot, styles.grayText, (forms.schoolStatus||forms.showPicker) && styles.openVal]} onClick={openAreaPop}>请选择学校<i></i></div>
             }
             <div></div>
           </div>
@@ -740,6 +761,7 @@ export default defineComponent({
           <Area
             optionHeight={46}
             areaList={forms.areaList}
+            v-model={forms.areaPopupIndex}
             onCancel={() => {
               forms.showPicker = false
               // if (!forms.areaName) {
@@ -750,7 +772,7 @@ export default defineComponent({
               forms.provinceCode = selectedOptions[0].value;
               forms.cityCode = selectedOptions[1].value;
               forms.districtCode = selectedOptions[2]?.value || null;
-
+              forms.areaPopupIndex = forms.districtCode || forms.cityCode || forms.provinceCode
               forms.areaName = selectedOptions
                 .map((item: any) => item?.text)
                 .join(' ');
@@ -803,6 +825,7 @@ export default defineComponent({
                 onConfirm={(val: any) => {
                   const selectedOption = val.selectedOptions[0];
                   forms.schoolAreaId = selectedOption.id || null;
+                  forms.schoolPopupIndex = forms.schoolAreaId ? [forms.schoolAreaId] : [];
                   forms.schoolName = selectedOption.name;
                   forms.schoolStatus = false;
                   forms.currentGrade = null;