修复sheet选择乐团和声部

1

src/school/attendance/components/attend-student.tsx

@@ -12,7 +12,8 @@ import {
   PullRefresh,
   ActionSheet,
   showToast,
-  Sticky
+  Sticky,
+  Picker
 } from 'vant'
 import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -102,17 +103,19 @@ export default defineComponent({
       getList()
     }
     const checkOrchestra = (val: any) => {
-      forms.orchestraId = val.value
-      forms.orchestraName = val.name
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.orchestraId = selectedOptions.value
+      forms.orchestraName = selectedOptions.name
       state.showPopoverOrchestra = false
       refreshing.value = true
       getList()
     }
 
     const checkSubject = (val: any) => {
-      forms.subjectId = val.value
-      forms.subjectName = val.name
-      console.log(val, forms)
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.subjectId = selectedOptions.value
+      forms.subjectName = selectedOptions.name
+      state.showPopoverSubject = false
       refreshing.value = true
       getList()
     }
@@ -179,35 +182,37 @@ export default defineComponent({
           <div class={styles.chioseWrap}>
             <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
               <div
-                class={styles.searchBand}
+                class={[styles.searchBand, styles.orchestraBand]}
                 onClick={() => {
                   state.showPopoverTime = true
                 }}
               >
-                {forms.timeName}
+                <p> {forms.timeName} </p>
                 <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
               </div>
             </div>
 
             <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
               <div
-                class={styles.searchBand}
+                class={[styles.searchBand, styles.orchestraBand]}
                 onClick={() => {
                   state.showPopoverOrchestra = true
                 }}
               >
-                {forms.orchestraName}
+                <p> {forms.orchestraName}</p>
+
                 <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
               </div>
             </div>
             <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
               <div
-                class={styles.searchBand}
+                class={[styles.searchBand, styles.orchestraBand]}
                 onClick={() => {
                   state.showPopoverSubject = true
                 }}
               >
-                {forms.subjectName}
+                <p> {forms.subjectName}</p>
+
                 <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
               </div>
             </div>
@@ -251,7 +256,7 @@ export default defineComponent({
           />
         </Popup>
 
-        <ActionSheet
+        {/* <ActionSheet
           v-model:show={state.showPopoverOrchestra}
           title="选择乐团"
           actions={state.actions}
@@ -265,7 +270,24 @@ export default defineComponent({
           title="选择声部"
           actions={state.subjects}
           onSelect={checkSubject}
-        ></ActionSheet>
+        ></ActionSheet> */}
+        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+          <Picker
+            columns={state.actions}
+            onCancel={() => (state.showPopoverOrchestra = false)}
+            onConfirm={(val: any) => checkOrchestra(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
+
+        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+          <Picker
+            columns={state.subjects}
+            onCancel={() => (state.showPopoverSubject = false)}
+            onConfirm={(val: any) => checkSubject(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
       </div>
     )
   }

src/school/attendance/components/attend-teacher.tsx

@@ -11,7 +11,8 @@ import {
   PullRefresh,
   ActionSheet,
   showToast,
-  Sticky
+  Sticky,
+  Picker
 } from 'vant'
 import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -107,16 +108,22 @@ export default defineComponent({
       getList()
     }
     const checkOrchestra = (val: any) => {
-      forms.orchestraId = val.value
-      forms.orchestraName = val.name
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.orchestraId = selectedOptions.value
+      forms.orchestraName = selectedOptions.name
+
       state.showPopoverOrchestra = false
       refreshing.value = true
       getList()
     }
 
     const checkSubject = (val: any) => {
-      forms.courseType = val.value
-      forms.courseTypeName = val.name
+      const selectedOptions = val.selectedOptions[0] || {}
+      // forms.courseType = val.value
+      // forms.courseTypeName = val.name
+      forms.courseType = selectedOptions.value
+      forms.courseTypeName = selectedOptions.name
+      state.showPopoverSubject = false
       refreshing.value = true
       getList()
     }
@@ -182,30 +189,33 @@ export default defineComponent({
                     state.showPopoverTime = true
                   }}
                 >
-                  {forms.timeName}
+                  <p> {forms.timeName}</p>
+
                   <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
                 </div>
               </div>
 
               <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
                 <div
-                  class={styles.searchBand}
+                  class={[styles.searchBand, styles.orchestraBand]}
                   onClick={() => {
                     state.showPopoverOrchestra = true
                   }}
                 >
-                  {forms.orchestraName}
+                  <p>{forms.orchestraName}</p>
+
                   <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
                 </div>
               </div>
               <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
                 <div
-                  class={styles.searchBand}
+                  class={[styles.searchBand, styles.orchestraBand]}
                   onClick={() => {
                     state.showPopoverSubject = true
                   }}
                 >
-                  {forms.courseTypeName}
+                  <p> {forms.courseTypeName}</p>
+
                   <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
                 </div>
               </div>
@@ -249,7 +259,7 @@ export default defineComponent({
           />
         </Popup>
 
-        <ActionSheet
+        {/* <ActionSheet
           v-model:show={state.showPopoverOrchestra}
           title="选择乐团"
           actions={state.actions}
@@ -263,7 +273,24 @@ export default defineComponent({
           title="选择课程"
           actions={state.courseList}
           onSelect={checkSubject}
-        ></ActionSheet>
+        ></ActionSheet> */}
+        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+          <Picker
+            columns={state.actions}
+            onCancel={() => (state.showPopoverOrchestra = false)}
+            onConfirm={(val: any) => checkOrchestra(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
+
+        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+          <Picker
+            columns={state.courseList}
+            onCancel={() => (state.showPopoverSubject = false)}
+            onConfirm={(val: any) => checkSubject(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
       </div>
     )
   }

src/school/attendance/student-att-day.tsx

@@ -2,15 +2,7 @@ import OEmpty from '@/components/o-empty'
 import OHeader from '@/components/o-header'
 import OSearch from '@/components/o-search'
 import dayjs from 'dayjs'
-import {
-  DatePicker,
-  DatePickerColumnType,
-  Popup,
-  List,
-  PullRefresh,
-  ActionSheet,
-  showToast
-} from 'vant'
+import { DatePicker, DatePickerColumnType, Popup, List, PullRefresh, showToast } from 'vant'
 import OFullRefresh from '@/components/o-full-refresh'
 import { defineComponent, reactive, ref, onMounted } from 'vue'
 import sanIcon from './images/san-icon.png'

src/school/ranking-list/components/day-bang.tsx

@@ -11,7 +11,8 @@ import {
   PullRefresh,
   ActionSheet,
   showToast,
-  Sticky
+  Sticky,
+  Picker
 } from 'vant'
 import OFullRefresh from '@/components/o-full-refresh'
 import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
@@ -104,17 +105,19 @@ export default defineComponent({
       getList()
     }
     const checkOrchestra = (val: any) => {
-      forms.orchestraId = val.value
-      forms.orchestraName = val.name
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.orchestraId = selectedOptions.value
+      forms.orchestraName = selectedOptions.name
       state.showPopoverOrchestra = false
       refreshing.value = true
       getList()
     }
 
     const checkSubject = (val: any) => {
-      forms.subjectId = val.value
-      forms.subjectName = val.name
-      console.log(val, forms)
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.subjectId = selectedOptions.value
+      forms.subjectName = selectedOptions.name
+      state.showPopoverSubject = false
       refreshing.value = true
       getList()
     }
@@ -254,7 +257,7 @@ export default defineComponent({
           />
         </Popup>
 
-        <ActionSheet
+        {/* <ActionSheet
           v-model:show={state.showPopoverOrchestra}
           title="选择乐团"
           actions={state.actions}
@@ -268,7 +271,24 @@ export default defineComponent({
           title="选择声部"
           actions={state.subjects}
           onSelect={checkSubject}
-        ></ActionSheet>
+        ></ActionSheet> */}
+        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+          <Picker
+            columns={state.actions}
+            onCancel={() => (state.showPopoverOrchestra = false)}
+            onConfirm={(val: any) => checkOrchestra(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
+
+        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+          <Picker
+            columns={state.subjects}
+            onCancel={() => (state.showPopoverSubject = false)}
+            onConfirm={(val: any) => checkSubject(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
       </div>
     )
   }

src/school/ranking-list/components/timer-bang.tsx

@@ -11,7 +11,8 @@ import {
   PullRefresh,
   ActionSheet,
   showToast,
-  Sticky
+  Sticky,
+  Picker
 } from 'vant'
 import OFullRefresh from '@/components/o-full-refresh'
 import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
@@ -104,17 +105,19 @@ export default defineComponent({
       getList()
     }
     const checkOrchestra = (val: any) => {
-      forms.orchestraId = val.value
-      forms.orchestraName = val.name
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.orchestraId = selectedOptions.value
+      forms.orchestraName = selectedOptions.name
       state.showPopoverOrchestra = false
       refreshing.value = true
       getList()
     }
 
     const checkSubject = (val: any) => {
-      forms.subjectId = val.value
-      forms.subjectName = val.name
-      console.log(val, forms)
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.subjectId = selectedOptions.value
+      forms.subjectName = selectedOptions.name
+      state.showPopoverSubject = false
       refreshing.value = true
       getList()
     }
@@ -254,7 +257,7 @@ export default defineComponent({
           />
         </Popup>
 
-        <ActionSheet
+        {/* <ActionSheet
           v-model:show={state.showPopoverOrchestra}
           title="选择乐团"
           actions={state.actions}
@@ -268,7 +271,24 @@ export default defineComponent({
           title="选择声部"
           actions={state.subjects}
           onSelect={checkSubject}
-        ></ActionSheet>
+        ></ActionSheet> */}
+        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+          <Picker
+            columns={state.actions}
+            onCancel={() => (state.showPopoverOrchestra = false)}
+            onConfirm={(val: any) => checkOrchestra(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
+
+        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+          <Picker
+            columns={state.subjects}
+            onCancel={() => (state.showPopoverSubject = false)}
+            onConfirm={(val: any) => checkSubject(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
       </div>
     )
   }

src/teacher/attendance/index.tsx

@@ -11,7 +11,8 @@ import {
   PullRefresh,
   ActionSheet,
   showToast,
-  Sticky
+  Sticky,
+  Picker
 } from 'vant'
 import OFullRefresh from '@/components/o-full-refresh'
 import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
@@ -108,16 +109,19 @@ export default defineComponent({
       getList()
     }
     const checkOrchestra = (val: any) => {
-      forms.orchestraId = val.value
-      forms.orchestraName = val.name
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.orchestraId = selectedOptions.value
+      forms.orchestraName = selectedOptions.name
       state.showPopoverOrchestra = false
       refreshing.value = true
       getList()
     }
 
     const checkSubject = (val: any) => {
-      forms.courseType = val.value
-      forms.courseTypeName = val.name
+      const selectedOptions = val.selectedOptions[0] || {}
+      forms.courseType = selectedOptions.value
+      forms.courseTypeName = selectedOptions.name
+      state.showPopoverSubject = false
       refreshing.value = true
       getList()
     }
@@ -235,7 +239,7 @@ export default defineComponent({
           />
         </Popup>
 
-        <ActionSheet
+        {/* <ActionSheet
           v-model:show={state.showPopoverOrchestra}
           title="选择乐团"
           actions={state.actions}
@@ -249,7 +253,24 @@ export default defineComponent({
           title="选择课程"
           actions={state.courseList}
           onSelect={checkSubject}
-        ></ActionSheet>
+        ></ActionSheet> */}
+        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+          <Picker
+            columns={state.actions}
+            onCancel={() => (state.showPopoverOrchestra = false)}
+            onConfirm={(val: any) => checkOrchestra(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
+
+        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+          <Picker
+            columns={state.courseList}
+            onCancel={() => (state.showPopoverSubject = false)}
+            onConfirm={(val: any) => checkSubject(val)}
+            columnsFieldNames={{ text: 'name', value: 'value' }}
+          />
+        </Popup>
       </div>
     )
   }