mschool/src/views/schedule-manage/index.tsx

import MHeader from '@/components/m-header';
import MSticky from '@/components/m-sticky';
import {
  CellGroup,
  DropdownItem,
  DropdownMenu,
  List,
  Skeleton,
  Tab,
  Tabs
} from 'vant';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import MFullRefresh from '@/components/m-full-refresh';
import ListItem from './list-item';
import SkeletionItem from './skeletion-item';
import MEmpty from '@/components/m-empty';
import MSearch from '@/components/m-search';
import DropDownModal from '../site-management/drop-down-modal';
import { musicGroupQuitQueryPage } from './api';
import { MusicGroupQuitPageDto } from './schedule';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'schedule-manage',
  setup() {
    const router = useRouter();
    const todoData = reactive({
      examineLoading: true,
      refreshLoading: false,
      examineFinish: false,
      /** 待审批列表 */
      examineList: [] as MusicGroupQuitPageDto[],
      examinePage: {
        page: 1,
        rows: 20
      },
      examineSkelet: true,
      /** 完成列表 */
      completeList: [] as MusicGroupQuitPageDto[],
      completePage: {
        page: 1,
        rows: 20
      },
      completeResh: false,
      completeLoading: false,
      completeSkelet: true,
      completeFinish: false,
      completeActive: '',
      completeColumns: [{ text: '全部活动', value: '' }],

      options: [
        { text: '全部状态', value: '' },
        { text: '已通过', value: 'PASS' },
        { text: '未通过', value: 'REJECT' }
      ],
      optionTitle: '全部状态',
      activeOption: '' as any,
      search: ''
    });
    const getExamine = async () => {
      console.log('请求');
      todoData.examineLoading = true;
      if (todoData.refreshLoading) {
        todoData.examineList = [];
      }
      musicGroupQuitQueryPage({
        page: todoData.examinePage.page,
        rows: todoData.examinePage.rows
      })
        .then(res => {
          const rows: MusicGroupQuitPageDto[] = Array.isArray(res?.data?.rows)
            ? res.data.rows
            : [];
          todoData.examineList = todoData.examineList.concat(rows);
          if (!rows.length) {
            todoData.examineFinish = true;
          }
        })
        .catch(() => {
          todoData.examineFinish = true;
        })
        .finally(() => {
          todoData.examineLoading = false;
          setTimeout(() => {
            todoData.refreshLoading = false;
            todoData.examineSkelet = false;
          }, 500);
        });
    };
    const getComplete = () => {
      console.log('请求');
      todoData.completeLoading = true;
      musicGroupQuitQueryPage({
        page: todoData.examinePage.page,
        rows: todoData.examinePage.rows,
        search: todoData.search,
        status: todoData.activeOption
      })
        .then(res => {
          if (todoData.completeResh){
            todoData.completeList = []
          }
          const rows: MusicGroupQuitPageDto[] = Array.isArray(res?.data?.rows)
            ? res.data.rows
            : [];
          todoData.completeList = todoData.completeList.concat(rows);
          if (!rows.length) {
            todoData.completeFinish = true;
          }
        })
        .catch(() => {
          todoData.completeFinish = true;
        })
        .finally(() => {
          todoData.completeLoading = false;
          setTimeout(() => {
            todoData.completeResh = false;
            todoData.completeSkelet = false;
          }, 500);
        });
    };

    onMounted(() => {
      getExamine();
      getComplete();
    });

    /** 下载菜单改变 */
    const changeDropTitle = (option: any) => {
      // console.log(option, todoData.activeOption);
      todoData.optionTitle =
        todoData.activeOption === 'PASS'
          ? '已通过'
          : todoData.activeOption === 'REJECT'
          ? '未通过'
          : '全部状态';
    };

    /** 去详情页 */
    const handleGoto = (item: MusicGroupQuitPageDto) => {
      router.push({
        path: 'schedule-manage-detail',
        query: {
          musicGroupQuitId: item.musicGroupQuitId
        }
      });
    };

    return () => (
      <div class={styles['schedule-manage']}>
        <MSticky position="top">
          <MHeader></MHeader>
        </MSticky>
        <Tabs swipeable animated>
          <Tab name="待审批" title="待审批">
            <List
              loading={todoData.examineLoading}
              finished={todoData.examineFinish}
              class={styles.list}
              onLoad={getExamine}>
              <MFullRefresh
                v-model:modelValue={todoData.refreshLoading}
                onRefresh={() => {
                  todoData.examinePage.page = 1;
                  todoData.examineFinish = false;
                  getExamine();
                }}>
                {todoData.examineSkelet && (
                  <div class={[styles.list, styles.listHide]}>
                    <Skeleton loading={true}>
                      {{
                        template: () => (
                          <div style={{ width: '100%' }}>
                            {new Array(10).fill(1).map((item: any) => (
                              <SkeletionItem />
                            ))}
                          </div>
                        )
                      }}
                    </Skeleton>
                  </div>
                )}
                {todoData.examineList.map((item: MusicGroupQuitPageDto) => (
                  <ListItem status="success" onGoto={() => handleGoto(item)} />
                ))}
                {!todoData.examineList.length && (
                  <MEmpty
                    description="暂无数据"
                    style={{
                      minHeight: '100%'
                    }}
                  />
                )}
              </MFullRefresh>
            </List>
          </Tab>
          <Tab name="已完成" title="已完成">
            <div class={styles.menubox}>
              <DropdownMenu>
                <DropdownItem
                  teleport="body"
                  title={todoData.optionTitle}
                  v-model={todoData.activeOption}
                  options={todoData.options}
                  onChange={changeDropTitle}
                />
              </DropdownMenu>
              <MSearch
                placeholder="请输入学员名称"
                v-model:modelValue={todoData.search}
                onSearch={() => {
                  todoData.examinePage.page = 1;
                  todoData.completeFinish = false;
                  getComplete();
                }}
              />
            </div>
            <List
              loading={todoData.completeLoading}
              finished={todoData.completeFinish}
              class={styles.list}
              onLoad={getComplete}>
              <MFullRefresh
                v-model:modelValue={todoData.completeResh}
                onRefresh={() => {
                  todoData.examinePage.page = 1;
                  todoData.completeFinish = false;
                  getComplete();
                }}>
                {todoData.completeSkelet && (
                  <div class={[styles.list, styles.listHide]}>
                    <Skeleton loading={true}>
                      {{
                        template: () => (
                          <div style={{ width: '100%' }}>
                            {new Array(10).fill(1).map((item: any) => (
                              <SkeletionItem />
                            ))}
                          </div>
                        )
                      }}
                    </Skeleton>
                  </div>
                )}
                {todoData.completeList.map((item: any) => (
                  <ListItem status="success" />
                ))}
                {!todoData.examineList.length && (
                  <MEmpty
                    description="暂无数据"
                    style={{
                      minHeight: '100%'
                    }}
                  />
                )}
              </MFullRefresh>
            </List>
          </Tab>
        </Tabs>
      </div>
    );
  }
});