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

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NModal,
  NSelect,
  NSpace,
  useMessage
} from 'naive-ui';
import SearchInput from '@/components/searchInput';
import CSelect from '@/components/CSelect';
import Pagination from '@/components/pagination';
import add from './images/add.png';
import { useRoute, useRouter } from 'vue-router';
import { getStudentList, schoolDetail } from './api';
import { classGroupList } from '@/views/classList/api';
import AddStudentModel from './modals/addStudentModel';
import Studentguide from '@/custom-plugins/guide-page/student-guide';
import TheEmpty from '/src/components/TheEmpty';
import NoticeModal from './modals/noticeModal';
import { useUserStore } from '/src/store/modules/users';
export default defineComponent({
  name: 'student-studentList',
  setup(props, { emit }) {
    const userStore = useUserStore();
    const state = reactive({
      searchForm: {
        keyword: '',
        gender: null as any,
        classGroupId: null as any,
        membership: null as any
      },
      searchWord: '',
      orchestraType: null,
      courseTypeCode: null,
      subjectId: null,
      classId: null,
      studentType: null,
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [] as any,
      classList: [],
      addStudentVisible: false,
      activeRow: {} as any
    });
    const route = useRoute();
    const router = useRouter();
    const showGuide = ref(false);
    const message = useMessage();
    const search = () => {
      state.pagination.page = 1;
      getList();
    };
    const getClasslist = async () => {
      try {
        const res = await classGroupList({ page: 1, rows: 999 });
        state.classList = res.data.rows.map((item: any) => {
          return {
            label: item.name,
            value: item.id
          };
        });
      } catch (e) {
        console.log(e);
      }
    };

    const copyTo = (text: string) => {
      const input = document.createElement('input');
      input.value = text;
      document.body.appendChild(input);
      input.select();
      input.setSelectionRange(0, input.value.length);
      document.execCommand('Copy');
      document.body.removeChild(input);
      message.success('复制成功');
    };
    const onReset = () => {
      state.searchForm = {
        keyword: '',
        gender: null as any,
        classGroupId: null as any,
        membership: null as any
      };
      search();
    };
    const getList = async () => {
      try {
        const res = await getStudentList({
          ...state.searchForm,
          ...state.pagination
        });
        state.tableList = res.data.rows;
        state.pagination.pageTotal = res.data.total;
        if (state.tableList.length > 0) {
          setTimeout(() => {
            showGuide.value = true;
          }, 500);
        }
      } catch (e) {
        console.log(e);
      }
      console.log('getList');
    };
    onMounted(() => {
      getList();
      getClasslist();
    });
    const columns = () => {
      return [
        {
          title: '学生姓名',
          key: 'nickname',
          render: (row: any) => {
            return (
              <div
                style={{ userSelect: 'all', cursor: 'pointer' }}
                onClick={() => copyTo(row.nickname)}>
                {row.nickname}
              </div>
            );
          }
        },
        {
          title: '手机号',
          key: 'phone',
          render: (row: any) => {
            return (
              <div
                style={{ userSelect: 'all', cursor: 'pointer' }}
                onClick={() => copyTo(row.phone)}>
                {row.phone}
              </div>
            );
          }
        },
        {
          title: '性别',
          key: 'gender',
          render(row: any) {
            return (
              <>
                {row.gender + '' != 'null'
                  ? row.gender == '0'
                    ? '女'
                    : '男'
                  : '--'}
              </>
            );
          }
        },
        {
          title: '年级班级',
          key: 'classGroupName'
        },

        {
          title: '学生类型',
          key: 'vipMember',
          render(row: any) {
            return <>{row.vipMember ? '会员' : '普通'}</>;
          }
        },
        {
          title: '操作',
          key: 'id',
          width: 300,
          render(row: any, index: number) {
            return (
              <>
                {index == 0 ? (
                  <NButton
                    {...{ id: 'student-1' }}
                    text
                    type="primary"
                    onClick={() => gotoDetail(row)}>
                    详情
                  </NButton>
                ) : (
                  <NButton text type="primary" onClick={() => gotoDetail(row)}>
                    详情
                  </NButton>
                )}
              </>
            );
          }
        }
      ];
    };

    const gotoDetail = (row: any) => {
      router.push({
        path: '/studentDetail',
        query: { ...route.query, studentId: row.id, studentName: row.nickname }
      });
    };
    return () => (
      <div class={styles.listWrap}>
        <div class={styles.searchList}>
          <NForm label-placement="left" inline>
            <NFormItem>
              <SearchInput
                {...{ placeholder: '请输入学生姓名' }}
                class={styles.searchInput}
                searchWord={state.searchForm.keyword}
                onChangeValue={(val: string) =>
                  (state.searchForm.keyword = val)
                }></SearchInput>
            </NFormItem>

            <NFormItem>
              <CSelect
                {...({
                  options: [
                    {
                      label: '学生性别',
                      value: null
                    },
                    {
                      label: '男',
                      value: 1
                    },
                    {
                      label: '女',
                      value: 0
                    }
                  ],
                  placeholder: '性别',
                  clearable: true,
                  inline: true
                } as any)}
                v-model:value={state.searchForm.gender}></CSelect>
            </NFormItem>
            <NFormItem>
              <CSelect
                {...({
                  options: [
                    { label: '年级班级', value: null },
                    ...state.classList
                  ],
                  placeholder: '年级班级',
                  clearable: true,
                  inline: true
                } as any)}
                v-model:value={state.searchForm.classGroupId}></CSelect>
            </NFormItem>
            <NFormItem>
              <CSelect
                {...({
                  options: [
                    {
                      label: '学生类型',
                      value: null
                    },
                    {
                      label: '会员',
                      value: true
                    },
                    {
                      label: '普通',
                      value: false
                    }
                  ],
                  placeholder: '学生类型',
                  clearable: true,
                  inline: true
                } as any)}
                v-model:value={state.searchForm.membership}></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
          {...{ id: 'student-0' }}
          onClick={async () => {
            // state.addStudentVisible = true;
            try {
              const { schoolInfos } = userStore.getUserInfo;
              const schoolId =
                schoolInfos.length > 0 ? schoolInfos[0].id : null;
              if (schoolId) {
                const { data } = await schoolDetail({ id: schoolId });
                state.activeRow = data;

                state.addStudentVisible = true;
              }
            } catch {
              //
            }
          }}
          class={styles.addBtn}
          type="primary"
          v-slots={{
            icon: () => (
              <>
                <NImage
                  class={styles.addBtnIcon}
                  previewDisabled
                  src={add}></NImage>
              </>
            )
          }}>
          邀请学生
        </NButton>
        <div class={styles.tableWrap}>
          <NDataTable
            v-slots={{
              empty: () => <TheEmpty></TheEmpty>
            }}
            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
          />
        </div>
        {/* {state.addStudentVisible ? (
          <div v-model:show={state.addStudentVisible} class="n-modal-mask">
            <AddStudentModel
              onClose={() => {
                state.addStudentVisible = false;
              }}></AddStudentModel>
          </div>
        ) : null} */}
        <NModal
          v-model:show={state.addStudentVisible}
          showIcon={false}
          style={{ width: '400px' }}>
          <NoticeModal
            data={state.activeRow}
            onClose={() => (state.addStudentVisible = false)}
          />
        </NModal>
        {showGuide.value ? <Studentguide></Studentguide> : null}
      </div>
    );
  }
});