mschool/src/views/patrol-evaluation/detail.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './detail.module.less';
import MHeader from '@/components/m-header';
import { Button, DropdownItem, DropdownMenu, Tab, Tabs } from 'vant';
import MSticky from '@/components/m-sticky';
import DetailList from './detail-list';
import {
  coursesStatus,
  coursesType,
  evaluateStatus,
  problemType
} from '@/helpers/constant';

export default defineComponent({
  name: 'patrol-evaluation-detail',
  setup() {
    const dropDownRef = ref();
    const forms = reactive({
      heightV: 0,
      active: 'NotEvaluated',
      listState: {
        loading: true
      },
      dropDownValue: {
        evaluateStatus: '',
        problemType: '',
        evaluateStatus1: '',
        courseType: '',
        status: ''
      },
      dropDownValueSelect: {
        evaluateStatus: '',
        problemType: '',
        evaluateStatus1: '',
        courseType: '',
        status: ''
      },
      courseStatusType: [{ text: '全部状态', value: '' }],
      eveluationType: [{ text: '全部评价', value: '' }],
      questionType: [{ text: '全部问题', value: '' }],
      courseType: [{ text: '全部类型', value: '' }]
    });

    const onDropDownClose = (item: any) => {
      item.value && item.value.toggle();
    };

    const onSubmit = () => {
      if (forms.active === 'Evaluated') {
        //
        forms.dropDownValue.evaluateStatus =
          forms.dropDownValueSelect.evaluateStatus;
        forms.dropDownValue.problemType = forms.dropDownValueSelect.problemType;
      } else if (forms.active === 'NotEvaluated') {
        //
        forms.dropDownValue.evaluateStatus1 =
          forms.dropDownValueSelect.evaluateStatus1;
        forms.dropDownValue.courseType = forms.dropDownValueSelect.courseType;
        forms.dropDownValue.status = forms.dropDownValueSelect.status;
      }

      onDropDownClose(dropDownRef);
    };

    onMounted(() => {
      for (const key in coursesStatus) {
        if (Object.prototype.hasOwnProperty.call(coursesStatus, key)) {
          forms.courseStatusType.push({
            text: coursesStatus[key],
            value: key
          });
        }
      }

      for (const key in evaluateStatus) {
        if (Object.prototype.hasOwnProperty.call(evaluateStatus, key)) {
          forms.eveluationType.push({
            text: evaluateStatus[key],
            value: key
          });
        }
      }
      for (const key in problemType) {
        if (Object.prototype.hasOwnProperty.call(problemType, key)) {
          forms.questionType.push({
            text: problemType[key],
            value: key
          });
        }
      }
      for (const key in coursesType) {
        if (Object.prototype.hasOwnProperty.call(coursesType, key)) {
          forms.courseType.push({
            text: coursesType[key],
            value: key
          });
        }
      }
    });
    return () => (
      <div class={styles['patrol-evaluation-detail']}>
        <MSticky
          position="top"
          onBarHeight={(height: number) => {
            forms.heightV = height;
          }}>
          <MHeader>
            {{
              right: () => (
                <DropdownMenu
                  class={styles.patrolDetailDropDown}
                  closeOnClickOutside={false}>
                  <DropdownItem
                    title="筛选"
                    ref={dropDownRef}
                    teleport={'body'}
                    onOpen={() => {
                      forms.dropDownValueSelect = {
                        ...forms.dropDownValue
                      };
                    }}>
                    <div class={styles.searchContainer}>
                      {forms.active === 'Evaluated' ? (
                        <>
                          <div class={styles.searchTitle}>评价类型</div>
                          <div
                            class={[
                              styles.searchTypeGroup,
                              styles.searchTypeFlex
                            ]}>
                            {forms.eveluationType.map((item: any) => (
                              <div
                                class={[
                                  styles.searchTypeItem,
                                  forms.dropDownValueSelect.evaluateStatus ===
                                    item.value && styles['is-active']
                                ]}
                                onClick={() => {
                                  forms.dropDownValueSelect.evaluateStatus =
                                    item.value;
                                }}>
                                {item.text}
                              </div>
                            ))}
                          </div>
                          <div class={styles.searchTitle}>问题类型</div>
                          <div
                            class={[
                              styles.searchTypeGroup,
                              styles.searchTypeFlex
                            ]}>
                            {forms.questionType.map((item: any) => (
                              <div
                                class={[
                                  styles.searchTypeItem,
                                  forms.dropDownValueSelect.problemType ===
                                    item.value && styles['is-active']
                                ]}
                                onClick={() => {
                                  forms.dropDownValueSelect.problemType =
                                    item.value;
                                }}>
                                {item.text}
                              </div>
                            ))}
                          </div>
                        </>
                      ) : null}

                      {forms.active === 'NotEvaluated' ? (
                        <>
                          <div class={styles.searchTitle}>课程状态</div>
                          <div
                            class={[
                              styles.searchTypeGroup,
                              styles.searchTypeFlex
                            ]}>
                            {forms.courseStatusType.map((item: any) => (
                              <div
                                class={[
                                  styles.searchTypeItem,
                                  forms.dropDownValueSelect.status ===
                                    item.value && styles['is-active']
                                ]}
                                onClick={() => {
                                  forms.dropDownValueSelect.status = item.value;
                                }}>
                                {item.text}
                              </div>
                            ))}
                          </div>
                          <div class={styles.searchTitle}>课程类型</div>
                          <div
                            class={[
                              styles.searchTypeGroup,
                              styles.searchTypeFlex
                            ]}>
                            {forms.courseType.map((item: any) => (
                              <div
                                class={[
                                  styles.searchTypeItem,
                                  forms.dropDownValueSelect.courseType ===
                                    item.value && styles['is-active']
                                ]}
                                onClick={() => {
                                  forms.dropDownValueSelect.courseType =
                                    item.value;
                                }}>
                                {item.text}
                              </div>
                            ))}
                          </div>
                        </>
                      ) : null}
                    </div>
                    <div class={['btnGroupPopup', 'van-hairline--top']}>
                      <Button
                        round
                        onClick={() => onDropDownClose(dropDownRef)}>
                        取消
                      </Button>
                      <Button type="primary" round onClick={onSubmit}>
                        确定
                      </Button>
                    </div>
                  </DropdownItem>
                </DropdownMenu>
              )
            }}
          </MHeader>
        </MSticky>

        <Tabs
          v-model:active={forms.active}
          offsetTop={forms.heightV}
          sticky
          lazyRender
          swipeable>
          <Tab name={'NotEvaluated'} title="未评价">
            <DetailList
              type="NotEvaluated"
              evaluateStatus={forms.dropDownValue.evaluateStatus1}
              courseType={forms.dropDownValue.courseType}
              status={forms.dropDownValue.status}
            />
          </Tab>
          <Tab name={'Evaluated'} title="已评价">
            <DetailList
              type="Evaluated"
              evaluateStatus={forms.dropDownValue.evaluateStatus}
              problemType={forms.dropDownValue.problemType}
            />
          </Tab>
        </Tabs>
      </div>
    );
  }
});