修改显示

src/views/train-statistics/train-model.tsx

@@ -1,12 +1,23 @@
-import { computed, defineComponent, onMounted, reactive, ref } from "vue";
-import styles from './train-model.module.less'
-import MSearch from "@/components/m-search";
-import { Button, Calendar, Cell, Col, DropdownItem, DropdownMenu, Picker, Popup, Row, showToast } from "vant";
-import dayjs from "dayjs";
-import { musicGroupClassPage, musicGroupPage } from "./api";
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './train-model.module.less';
+import MSearch from '@/components/m-search';
+import {
+  Button,
+  Calendar,
+  Cell,
+  Col,
+  DropdownItem,
+  DropdownMenu,
+  Picker,
+  Popup,
+  Row,
+  showToast
+} from 'vant';
+import dayjs from 'dayjs';
+import { musicGroupClassPage, musicGroupPage } from './api';
 
 export function getNowDateAndMonday(time: any) {
-  let timestamp = new Date(time.replace(/-/g, "/")).getTime();
+  let timestamp = new Date(time.replace(/-/g, '/')).getTime();
   let serverDate = new Date(time);
   if (serverDate.getDay() == 0) {
     timestamp -= 7 * 24 * 60 * 60 * 1000;
@@ -19,19 +30,19 @@ export function getNowDateAndMonday(time: any) {
   //月
   let mondayM =
     mondayData.getMonth() + 1 < 10
-      ? "0" + (mondayData.getMonth() + 1)
+      ? '0' + (mondayData.getMonth() + 1)
       : mondayData.getMonth() + 1;
   //日
   let mondayD =
     mondayData.getDate() < 10
-      ? "0" + mondayData.getDate()
+      ? '0' + mondayData.getDate()
       : mondayData.getDate();
 
-  let str = mondayY + "-" + mondayM + "-" + mondayD;
+  let str = mondayY + '-' + mondayM + '-' + mondayD;
   return str;
 }
 export function getNowDateAndSunday(time: any) {
-  let timestamp = new Date(time.replace(/-/g, "/")).getTime();
+  let timestamp = new Date(time.replace(/-/g, '/')).getTime();
   let serverDate = new Date(time);
 
   let num = 7 - serverDate.getDay();
@@ -44,18 +55,17 @@ export function getNowDateAndSunday(time: any) {
   let tomorrowY = SundayData.getFullYear(); //月
   let tomorrowM =
     SundayData.getMonth() + 1 < 10
-      ? "0" + (SundayData.getMonth() + 1)
+      ? '0' + (SundayData.getMonth() + 1)
       : SundayData.getMonth() + 1;
   //日
   let tomorrowD =
     SundayData.getDate() < 10
-      ? "0" + SundayData.getDate()
+      ? '0' + SundayData.getDate()
       : SundayData.getDate();
-  let str = tomorrowY + "-" + tomorrowM + "-" + tomorrowD;
+  let str = tomorrowY + '-' + tomorrowM + '-' + tomorrowD;
   return str;
 }
 
-
 export default defineComponent({
   props: {
     active: {
@@ -65,7 +75,7 @@ export default defineComponent({
     defaultTime: {
       type: Number,
       default: 0
-    },
+    }
   },
   name: 'train-model',
   emits: ['load'],
@@ -99,29 +109,32 @@ export default defineComponent({
       musicGroupName: '全部乐团',
       classId: '',
       className: '全部班级'
-    })
-    const dropDownRef = ref()
+    });
+    const dropDownRef = ref();
     const calendarValue = computed(() => {
       return `${dayjs(state.startDay).format('YYYY/MM/DD')} - ${dayjs(
         state.endDay
       ).format('YYYY/MM/DD')}`;
-    })
+    });
 
     const onSetMusicGrouop = (val: any) => {
-      const option = val.selectedOptions[0]
+      const option = val.selectedOptions[0];
       state.musicGroupId = option.value;
       state.musicGroupName = option.text;
+
+      state.classId = '';
+      state.className = '全部班级';
       state.showMusicGroup = false;
       getClassList();
-    }
-   const onSetClass = (val: any) => {
-     const option = val.selectedOptions[0]
-     state.classId = option.value;
-     state.className = option.text;
+    };
+    const onSetClass = (val: any) => {
+      const option = val.selectedOptions[0];
+      state.classId = option.value;
+      state.className = option.text;
       state.showClass = false;
-    }
+    };
 
-     const  getOrchestraList = async () => {
+    const getOrchestraList = async () => {
       try {
         const { data } = await musicGroupPage({
           organId: state.organId
@@ -143,7 +156,7 @@ export default defineComponent({
       } catch {
         //
       }
-    }
+    };
     const getClassList = async () => {
       try {
         const { data } = await musicGroupClassPage({
@@ -153,7 +166,7 @@ export default defineComponent({
         const result = data || [];
         const tempList = [
           {
-            text: '全部乐团',
+            text: '全部班级',
             value: ''
           }
         ];
@@ -167,7 +180,7 @@ export default defineComponent({
       } catch {
         //
       }
-    }
+    };
 
     const onCheckType = (type: string, value: string) => {
       if (type === 'member') {
@@ -175,7 +188,7 @@ export default defineComponent({
       } else if (type === 'type') {
         state.studentType = value;
       }
-    }
+    };
 
     const onSort = (type?: any) => {
       let searchArray: any = state.searchArray;
@@ -192,7 +205,7 @@ export default defineComponent({
         searchArray[type] = 'ASC';
       }
       onAllFilter();
-    }
+    };
 
     const onAllFilter = () => {
       const searchArray = state.searchArray;
@@ -222,15 +235,15 @@ export default defineComponent({
         order: currentType
       };
       emit('load', params);
-    }
+    };
 
     const changeDropDownItemStatus = () => {
       dropDownRef.value?.toggle(false);
-    }
+    };
     const onSubmit = () => {
       changeDropDownItemStatus();
       onAllFilter();
-    }
+    };
     const onReset = () => {
       let defaultTime = props.defaultTime;
       let day = defaultTime * 7;
@@ -254,14 +267,14 @@ export default defineComponent({
       state.defaultDate = [new Date(startTime), new Date(endTime)];
       state.startDay = startTime;
       state.endDay = endTime;
-      state.memberFlag = "";
-      state.studentType = "";
-      state.musicGroupId = "";
-      state.musicGroupName = "全部乐团";
-      state.classId = "";
-      state.className = "全部班级";
+      state.memberFlag = '';
+      state.studentType = '';
+      state.musicGroupId = '';
+      state.musicGroupName = '全部乐团';
+      state.classId = '';
+      state.className = '全部班级';
       onSubmit();
-    }
+    };
 
     const selectDate = (date: any) => {
       let [start, end] = date;
@@ -280,7 +293,7 @@ export default defineComponent({
         }
       }
       state.defaultDate = [new Date(start.valueOf()), new Date(end.valueOf())];
-    }
+    };
     const onConfirm = (date: any) => {
       let [start, end] = date;
       state.showCalendar = false;
@@ -298,13 +311,13 @@ export default defineComponent({
           end = dayjs(end).add(num, 'day');
         }
       }
-      state.calendarStatus = true
+      state.calendarStatus = true;
       state.startDay = dayjs(start).format('YYYY-MM-DD');
       state.endDay = dayjs(end).format('YYYY-MM-DD');
       //
       //   this.changeDropDownItemStatus();
       //   this.onAllFilter();
-    }
+    };
 
     onMounted(() => {
       let defaultTime = props.defaultTime;
@@ -331,192 +344,280 @@ export default defineComponent({
       state.endDay = endTime;
 
       onSort();
-      getOrchestraList()
-    })
-    return () => <div class={styles.trainModel}>
-      <MSearch placeholder="学生姓名或手机号"
-        // disabled={forms.listState.refreshing}
-        onSearch={(val: string) => {
-          // forms.params.keyword = val;
-          // forms.listState.refreshing = true;
-          // onRefresh();
-        }}>
-        {{
-          left: () => (
-            <DropdownMenu
-              class={styles.patrolDetailDropDown}
-              style={{ 'padding-right': '10px' }}
-              closeOnClickOutside={false}>
-              <DropdownItem title={'筛选'} ref={dropDownRef} >
-                <div class="search-group">
-                  <Cell title={'日期'}
-                    isLink
-                    onClick={() => {state.showCalendar = true
-                      state.calendarStatus = false
-                    }}
-                    titleClass={styles.cellTitle}
-                    value={calendarValue.value}
-                    valueClass={styles.calendarColor}
-                    class={styles.studentCell}></Cell>
-                  <Cell title={'是否学员'} titleClass={styles.cellTitle} class={styles.studentCell}>
-                    {{
-                      label: () => <div class={styles['btn-group']}>
-                        <Button plain={state.memberFlag === ''}
-                          round
-                          type={state.memberFlag === '' ? 'primary' : 'default'}
-                          onClick={() => onCheckType('member', '')}>
-                          全部学员
-                        </Button>
-                        <Button plain={state.memberFlag === '1'}
-                          round
-                          type={state.memberFlag === '1' ? 'primary' : 'default'}
-                          onClick={() => onCheckType('member', '1')}>
-                          会员学员
-                        </Button>
-                        <Button plain={state.memberFlag === '0'}
-                          round
-                          type={state.memberFlag === '0' ? 'primary' : 'default'}
-                          onClick={() => onCheckType('member', '0')}>
-                          普通学员
-                        </Button>
-                      </div>
-                    }}
-                  </Cell>
-                  <Cell title={'是否学员'} titleClass={styles.cellTitle} class={styles.studentCell}>
-                    {{
-                      label: () => <div class={styles['btn-group']}>
-                        <Button plain={state.studentType === ''}
-                          round
-                          type={state.studentType === '' ? 'primary' : 'default'}
-                          onClick={() => onCheckType('type', '')}>
-                          全部学员
-                        </Button>
-                        <Button plain={state.studentType === '1'}
-                          round
-                          type={state.studentType === '1' ? 'primary' : 'default'}
-                          onClick={() => onCheckType('type', '1')}>
-                          乐团学员
-                        </Button>
-                        <Button plain={state.studentType === '2'}
-                          round
-                          type={state.studentType === '2' ? 'primary' : 'default'}
-                          onClick={() => onCheckType('type', '2')}>
-                          已结束小课学员
-                        </Button>
-                        <Button plain={state.studentType === '3'}
-                          round
-                          type={state.studentType === '3' ? 'primary' : 'default'}
-                          onClick={() => onCheckType('type', '3')}>
-                          进行中小课学员
-                        </Button>
-                      </div>
-                    }}
-                  </Cell>
-                  <Cell title={'乐团'}
-                    isLink
-                    onClick={() => state.showMusicGroup = true}
-                    titleClass={styles.cellTitle}
-                    value={state.musicGroupName}
-                    valueClass={styles.calendarColor}
-                    class={styles.studentCell}></Cell>
-                  <Cell title={'班级'}
-                    isLink
-                    onClick={() => {
-                      if (!state.musicGroupId) {
-                        showToast('请选择乐团');
-                        return;
-                      }
-                      state.showClass = true
-                    }}
-                    titleClass={styles.cellTitle}
-                    value={state.className}
-                    valueClass={styles.calendarColor}
-                    class={styles.studentCell}></Cell>
-                </div>
-                <div class={[styles['submit-group'], 'van-hairline--top']}>
-                  <Button round block onClick={onReset} style={{ marginRight: '10px' }}>
-                    重置
-                  </Button>
-                  <Button type="primary" round block onClick={onSubmit}>
-                    确认
-                  </Button>
-                </div>
-              </DropdownItem>
-            </DropdownMenu>
-          )
-        }}
-      </MSearch>
-      <Row class={styles.searchArray}>
-        <Col span="6" class={styles['title-style']} onClick={() => onSort(0)}>
-          训练时长
-          <div>
-            <i
-              class={[styles['box'], styles["box-up"], state.searchArray[0] == 'ASC' && styles.active]}
-              style="margin-bottom: 0.03rem"
-            ></i>
-            <i
-              class={[styles['box'], styles['box-down'], state.searchArray[0] === 'DESC' && styles.active]}
-            ></i>
-          </div>
-        </Col  >
-        <Col span="6" class={styles['title-style']} onClick={() => onSort(1)} >
-          训练次数
-          <div>
-            <i
-              class={[styles['box'], styles["box-up"], state.searchArray[1] == 'ASC' && styles.active]}
-              style="margin-bottom: 0.03rem"
-            ></i>
-            <i
-              class={[styles['box'], styles['box-down'], state.searchArray[1] === 'DESC' && styles.active]}
-            ></i>
-          </div>
-        </Col>
-        <Col span="6" class={styles['title-style']} onClick={() => onSort(2)} >
-          训练天数
-          <div>
-            <i
-              class={[styles['box'], styles["box-up"], state.searchArray[2] == 'ASC' && styles.active]}
-              style="margin-bottom: 0.03rem"
-            ></i>
-            <i
-              class={[styles['box'], styles['box-down'], state.searchArray[2] === 'DESC' && styles.active]}
-            ></i>
-          </div>
-        </Col>
-        <Col span="6" class={styles['title-style']} onClick={() => onSort(3)} >
-          评测次数
-          <div>
-            <i
-              class={[styles['box'], styles["box-up"], state.searchArray[3] == 'ASC' && styles.active]}
-              style="margin-bottom: 0.03rem"
-            ></i>
-            <i
-              class={[styles['box'], styles['box-down'], state.searchArray[3] === 'DESC' && styles.active]}
-            ></i>
-          </div>
-        </Col>
-      </Row>
+      getOrchestraList();
+    });
+    return () => (
+      <div class={styles.trainModel}>
+        <MSearch
+          placeholder="学生姓名或手机号"
+          // disabled={forms.listState.refreshing}
+          onSearch={(val: string) => {
+            // forms.params.keyword = val;
+            // forms.listState.refreshing = true;
+            // onRefresh();
+          }}>
+          {{
+            left: () => (
+              <DropdownMenu
+                class={styles.patrolDetailDropDown}
+                style={{ 'padding-right': '10px' }}
+                closeOnClickOutside={false}>
+                <DropdownItem title={'筛选'} ref={dropDownRef}>
+                  <div class="search-group">
+                    <Cell
+                      title={'日期'}
+                      isLink
+                      onClick={() => {
+                        state.showCalendar = true;
+                        state.calendarStatus = false;
+                      }}
+                      titleClass={styles.cellTitle}
+                      value={calendarValue.value}
+                      valueClass={styles.calendarColor}
+                      class={styles.studentCell}></Cell>
+                    <Cell
+                      title={'是否学员'}
+                      titleClass={styles.cellTitle}
+                      class={styles.studentCell}>
+                      {{
+                        label: () => (
+                          <div class={styles['btn-group']}>
+                            <Button
+                              plain={state.memberFlag === ''}
+                              round
+                              type={
+                                state.memberFlag === '' ? 'primary' : 'default'
+                              }
+                              onClick={() => onCheckType('member', '')}>
+                              全部学员
+                            </Button>
+                            <Button
+                              plain={state.memberFlag === '1'}
+                              round
+                              type={
+                                state.memberFlag === '1' ? 'primary' : 'default'
+                              }
+                              onClick={() => onCheckType('member', '1')}>
+                              会员学员
+                            </Button>
+                            <Button
+                              plain={state.memberFlag === '0'}
+                              round
+                              type={
+                                state.memberFlag === '0' ? 'primary' : 'default'
+                              }
+                              onClick={() => onCheckType('member', '0')}>
+                              普通学员
+                            </Button>
+                          </div>
+                        )
+                      }}
+                    </Cell>
+                    <Cell
+                      title={'是否学员'}
+                      titleClass={styles.cellTitle}
+                      class={styles.studentCell}>
+                      {{
+                        label: () => (
+                          <div class={styles['btn-group']}>
+                            <Button
+                              plain={state.studentType === ''}
+                              round
+                              type={
+                                state.studentType === '' ? 'primary' : 'default'
+                              }
+                              onClick={() => onCheckType('type', '')}>
+                              全部学员
+                            </Button>
+                            <Button
+                              plain={state.studentType === '1'}
+                              round
+                              type={
+                                state.studentType === '1'
+                                  ? 'primary'
+                                  : 'default'
+                              }
+                              onClick={() => onCheckType('type', '1')}>
+                              乐团学员
+                            </Button>
+                            <Button
+                              plain={state.studentType === '2'}
+                              round
+                              type={
+                                state.studentType === '2'
+                                  ? 'primary'
+                                  : 'default'
+                              }
+                              onClick={() => onCheckType('type', '2')}>
+                              已结束小课学员
+                            </Button>
+                            <Button
+                              plain={state.studentType === '3'}
+                              round
+                              type={
+                                state.studentType === '3'
+                                  ? 'primary'
+                                  : 'default'
+                              }
+                              onClick={() => onCheckType('type', '3')}>
+                              进行中小课学员
+                            </Button>
+                          </div>
+                        )
+                      }}
+                    </Cell>
+                    <Cell
+                      title={'乐团'}
+                      isLink
+                      onClick={() => (state.showMusicGroup = true)}
+                      titleClass={styles.cellTitle}
+                      value={state.musicGroupName}
+                      valueClass={styles.calendarColor}
+                      class={styles.studentCell}></Cell>
+                    <Cell
+                      title={'班级'}
+                      isLink
+                      onClick={() => {
+                        if (!state.musicGroupId) {
+                          showToast('请选择乐团');
+                          return;
+                        }
+                        state.showClass = true;
+                      }}
+                      titleClass={styles.cellTitle}
+                      value={state.className}
+                      valueClass={styles.calendarColor}
+                      class={styles.studentCell}></Cell>
+                  </div>
+                  <div class={[styles['submit-group'], 'van-hairline--top']}>
+                    <Button
+                      round
+                      block
+                      onClick={onReset}
+                      style={{ marginRight: '10px' }}>
+                      重置
+                    </Button>
+                    <Button type="primary" round block onClick={onSubmit}>
+                      确认
+                    </Button>
+                  </div>
+                </DropdownItem>
+              </DropdownMenu>
+            )
+          }}
+        </MSearch>
+        <Row class={styles.searchArray}>
+          <Col span="6" class={styles['title-style']} onClick={() => onSort(0)}>
+            训练时长
+            <div>
+              <i
+                class={[
+                  styles['box'],
+                  styles['box-up'],
+                  state.searchArray[0] == 'ASC' && styles.active
+                ]}
+                style="margin-bottom: 0.03rem"></i>
+              <i
+                class={[
+                  styles['box'],
+                  styles['box-down'],
+                  state.searchArray[0] === 'DESC' && styles.active
+                ]}></i>
+            </div>
+          </Col>
+          <Col span="6" class={styles['title-style']} onClick={() => onSort(1)}>
+            训练次数
+            <div>
+              <i
+                class={[
+                  styles['box'],
+                  styles['box-up'],
+                  state.searchArray[1] == 'ASC' && styles.active
+                ]}
+                style="margin-bottom: 0.03rem"></i>
+              <i
+                class={[
+                  styles['box'],
+                  styles['box-down'],
+                  state.searchArray[1] === 'DESC' && styles.active
+                ]}></i>
+            </div>
+          </Col>
+          <Col span="6" class={styles['title-style']} onClick={() => onSort(2)}>
+            训练天数
+            <div>
+              <i
+                class={[
+                  styles['box'],
+                  styles['box-up'],
+                  state.searchArray[2] == 'ASC' && styles.active
+                ]}
+                style="margin-bottom: 0.03rem"></i>
+              <i
+                class={[
+                  styles['box'],
+                  styles['box-down'],
+                  state.searchArray[2] === 'DESC' && styles.active
+                ]}></i>
+            </div>
+          </Col>
+          <Col span="6" class={styles['title-style']} onClick={() => onSort(3)}>
+            评测次数
+            <div>
+              <i
+                class={[
+                  styles['box'],
+                  styles['box-up'],
+                  state.searchArray[3] == 'ASC' && styles.active
+                ]}
+                style="margin-bottom: 0.03rem"></i>
+              <i
+                class={[
+                  styles['box'],
+                  styles['box-down'],
+                  state.searchArray[3] === 'DESC' && styles.active
+                ]}></i>
+            </div>
+          </Col>
+        </Row>
 
-      <Calendar v-model:show={state.showCalendar}
-        minDate={state.minDate}
-        defaultDate={state.defaultDate}
-        firstDayOfWeek={1} color="#01c1b5" type="range"
-        onSelect={selectDate}
-        onConfirm={onConfirm}
-        onUpdate:show={(val: any) => {
-          console.log('1111')
-          if (!state.calendarStatus) {
-            state.defaultDate = [new Date(state.startDay), new Date(state.endDay)];
-          }
-        }} />
+        <Calendar
+          v-model:show={state.showCalendar}
+          minDate={state.minDate}
+          defaultDate={state.defaultDate}
+          firstDayOfWeek={1}
+          color="#01c1b5"
+          type="range"
+          onSelect={selectDate}
+          onConfirm={onConfirm}
+          onUpdate:show={(val: any) => {
+            if (!state.calendarStatus) {
+              state.defaultDate = [
+                new Date(state.startDay),
+                new Date(state.endDay)
+              ];
+            }
+          }}
+        />
 
         <Popup v-model:show={state.showMusicGroup} position="bottom" round>
-        <Picker columns={state.musicGroupList} showToolbar onCancel={() => state.showMusicGroup = false} onConfirm={onSetMusicGrouop} />
+          <Picker
+            columns={state.musicGroupList}
+            showToolbar
+            onCancel={() => (state.showMusicGroup = false)}
+            onConfirm={onSetMusicGrouop}
+          />
         </Popup>
 
         <Popup v-model:show={state.showClass} position="bottom" round>
-        <Picker columns={state.classList} showToolbar onCancel={() => state.showClass = false} onConfirm={onSetClass} />
+          <Picker
+            columns={state.classList}
+            showToolbar
+            onCancel={() => (state.showClass = false)}
+            onConfirm={onSetClass}
+          />
         </Popup>
-    </div>
+      </div>
+    );
   }
-})
+});