classroom-instruments/src/views/classList/index.tsx

import { defineComponent, reactive, onMounted, ref } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NModal,
  NSelect,
  NSpace,
  useDialog,
  useMessage
} from 'naive-ui';
import SearchInput from '@/components/searchInput';
import CSelect from '@/components/CSelect';
import Pagination from '@/components/pagination';
import { classGroupList, deleteClass } from './api';
import { useUserStore } from '/src/store/modules/users';
import CreateClass from './modals/createClass';
import RestStudentBox from './modals/restStudentBox';
import {
  sixYearSystem,
  fiveYearSystem,
  threeYearSystem,
  foreYearSystem,
  nineYearSystem,
  classArray
} from './contants';
import add from '@/views/studentList/images/add.png';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'class-classList',
  setup(props, { emit }) {
    const state = reactive({
      searchForm: {
        keyword: null as any,
        currentClass: null,
        currentGradeNum: null
      },

      orchestraType: null,
      courseTypeCode: null,
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 6
      },
      gradeNumList: [] as any,
      tableList: [] as any,
      studentVisible: false,
      activeRow: null as any,
      showaddClass: false
    });
    const formRef = ref();
    const dialog = useDialog();
    const message = useMessage();
    const router = useRouter();
    const search = () => {
      state.pagination.page = 1;
      getList();
      console.log('search', state);
    };
    const userInfo = useUserStore();
    if (userInfo.getUserInfo.schoolInfos[0].gradeYear == 'THREE_YEAR_SYSTEM') {
      state.gradeNumList = threeYearSystem;
    } else if (
      userInfo.getUserInfo.schoolInfos[0].gradeYear == 'FORE_YEAR_SYSTEM'
    ) {
      state.gradeNumList = foreYearSystem;
    } else if (
      userInfo.getUserInfo.schoolInfos[0].gradeYear == 'FIVE_YEAR_SYSTEM'
    ) {
      state.gradeNumList = fiveYearSystem;
    } else if (
      userInfo.getUserInfo.schoolInfos[0].gradeYear == 'SIX_YEAR_SYSTEM'
    ) {
      state.gradeNumList = sixYearSystem;
    } else {
      state.gradeNumList = nineYearSystem;
    }
    const onReset = () => {
      state.searchForm = {
        keyword: null as any,
        currentClass: null,
        currentGradeNum: null
      };
      getList();
    };

    const removeClass = async (row: any) => {
      dialog.warning({
        title: '警告',
        content: `是否删除班级“${row.name}”？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await deleteClass({ ids: row.id });
            getList();
            message.success(`删除成功`);
          } catch (e) {
            console.log(e);
          }
        }
      });
    };
    const getList = async () => {
      // classGroupList
      state.loading = true;
      try {
        const res = await classGroupList({
          ...state.searchForm,
          ...state.pagination
        });
        state.tableList = res.data.rows;
        state.pagination.pageTotal = res.data.total;
        state.loading = false;
      } catch (e) {
        state.loading = false;
        console.log(e);
      }
      console.log('getList');
    };

    const columns = () => {
      return [
        {
          title: '班级名称',
          key: 'name'
        },
        {
          title: '学生人数',
          key: 'preStudentNum'
        },
        {
          title: '上次学习',
          key: 'lastStudy',
          render(row: any) {
            return <p>{row.lastStudy ? row.lastStudy : '--'}</p>;
          }
        },
        {
          title: '操作',
          key: 'id',
          render(row: any) {
            return (
              <div>
                <NSpace>
                  <NButton
                    type="primary"
                    text
                    onClick={() => {
                      router.push({
                        path: '/classDetail',
                        query: { name: row.name, id: row.id }
                      });
                    }}>
                    详情
                  </NButton>
                  <NButton
                    type="primary"
                    text
                    onClick={() => {
                      startResetStudent(row);
                    }}>
                    学生调整
                  </NButton>
                  <NButton type="primary" text>
                    开始上课
                  </NButton>
                  {!(row.preStudentNum > 0) ? (
                    <NButton
                      type="primary"
                      text
                      textColor="#EA4132"
                      onClick={() => removeClass(row)}>
                      删除
                    </NButton>
                  ) : null}
                </NSpace>
              </div>
            );
          }
        }
      ];
    };

    const startResetStudent = (row: any) => {
      state.activeRow = row;
      state.studentVisible = true;
    };
    onMounted(() => {
      getList();
    });
    return () => (
      <div class={styles.listWrap}>
        <div class={styles.searchList}>
          <NForm label-placement="left" inline ref={formRef}>
            <NFormItem>
              <SearchInput
                {...{ placeholder: '请输入班级名称' }}
                class={styles.searchInput}
                searchWord={state.searchForm.keyword}
                onChangeValue={(val: string) =>
                  (state.searchForm.keyword = val)
                }></SearchInput>
            </NFormItem>

            <NFormItem>
              <CSelect
                {...({
                  options: state.gradeNumList,
                  placeholder: '选择年级',
                  clearable: true,
                  inline: true
                } as any)}
                v-model:value={state.searchForm.currentGradeNum}></CSelect>
            </NFormItem>
            <NFormItem>
              <CSelect
                {...({
                  options: classArray,
                  placeholder: '选择班级',
                  clearable: true,
                  inline: true
                } as any)}
                v-model:value={state.searchForm.currentClass}></CSelect>
            </NFormItem>

            <NFormItem>
              <NSpace justify="end">
                <NButton type="primary" class="searchBtn" onClick={search}>
                  搜索
                </NButton>
                <NButton
                  type="primary"
                  ghost
                  class="resetBtn"
                  onClick={onReset}>
                  重置
                </NButton>
              </NSpace>
            </NFormItem>
          </NForm>
        </div>
        <NButton
          class={styles.addBtn}
          type="primary"
          onClick={() => (state.showaddClass = true)}
          v-slots={{
            icon: () => (
              <>
                <NImage class={styles.addBtnIcon} src={add}></NImage>
              </>
            )
          }}>
          创建班级
        </NButton>
        <div class={styles.tableWrap}>
          <NDataTable
            class={styles.classTable}
            loading={state.loading}
            columns={columns()}
            data={state.tableList}></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
            saveKey="orchestraRegistration-key"
          />
        </div>
        <NModal
          v-model:show={state.studentVisible}
          style={{ width: '707px' }}
          preset="card"
          class={['modalTitle background']}
          title={'学员调整'}>
          <RestStudentBox
            activeRow={state.activeRow}
            onClose={() => (state.studentVisible = false)}
            onGetList={() => getList()}></RestStudentBox>
        </NModal>
        <NModal
          v-model:show={state.showaddClass}
          style={{ width: '500px' }}
          preset="card"
          class={['modalTitle background']}
          title={'创建班级'}>
          <CreateClass
            gradeNumList={state.gradeNumList}
            classArray={classArray}
            onGetList={() => getList()}
            onClose={() => (state.showaddClass = false)}
          />
        </NModal>
      </div>
    );
  }
});