classroom-instruments/src/views/classList/components/classStudent.tsx

import { defineComponent, onMounted, reactive, watch } from 'vue';
import styles from '../index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NSelect,
  NSpace,
  useMessage
} from 'naive-ui';
import SearchInput from '@/components/searchInput';
import CSelect from '@/components/CSelect';
import Pagination from '@/components/pagination';
import { classGroupDetail, getStudentList } from '../api';
import add from './images/add.png';
import { useRoute, useRouter } from 'vue-router';
import TheEmpty from '/src/components/TheEmpty';
export default defineComponent({
  name: 'student-studentList',
  props: {
    upgradeFlag: {
      type: Number
    }
  },
  setup(props, { emit }) {
    const message = useMessage();
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      upgradeFlag: props.upgradeFlag == 0 ? true : false, // 是否为历史班
      searchForm: { keyword: '', gender: null as any },
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [] as any
    });

    watch(
      () => props.upgradeFlag,
      () => {
        state.upgradeFlag = props.upgradeFlag == 0 ? true : false;
      }
    );
    const search = () => {
      state.pagination.page = 1;
      getList();
      console.log('search', state);
    };

    const onReset = () => {
      state.searchForm = { keyword: '', gender: null as any };
      search();
    };
    const getList = async () => {
      state.loading = true;
      try {
        const res = await getStudentList({
          classGroupId: route.query.id,
          ...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);
      }
    };

    onMounted(() => {
      getList();
    });

    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 gotoDetail = (row: any) => {
      router.push({
        path: '/classStudentDetail',
        query: {
          ...route.query,
          studentId: row.id,
          studentName: row.nickname,
          upgradeFlag: state.upgradeFlag ? 0 : 1
        }
      });
    };
    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: 'studentType',
        //   render(row: any) {
        //     return <>{row.studentType == 'member' ? '会员' : '普通'}</>;
        //   }
        // },
        {
          title: '操作',
          key: 'id',
          render(row: any) {
            return (
              <NButton text type="primary" onClick={() => gotoDetail(row)}>
                详情
              </NButton>
            );
          }
        }
      ];
    };
    return () => (
      <div>
        <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>
              <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"
          v-slots={{
            icon: () => (
              <>
                <NImage class={styles.addBtnIcon} 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>
      </div>
    );
  }
});