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

import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NSelect,
  NSpace
} from 'naive-ui';
import SearchInput from '@/components/searchInput';
import CSelect from '@/components/CSelect';
import Pagination from '@/components/pagination';
import add from './images/add.png';
export default defineComponent({
  name: 'student-studentList',
  setup(props, { emit }) {
    const state = reactive({
      searchWord: '',
      orchestraType: null,
      courseTypeCode: null,
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [
        {
          studentName: '胡小小',
          phone: '17625367893',
          sex: '0',
          className: '一年级3班',
          classType: 'normal',
          studentType: 'member'
        },
        {
          studentName: '丁曼蓉',
          phone: '14677789334',
          sex: '1',
          className: '一年级3班',
          classType: 'normal',
          studentType: ''
        },
        {
          studentName: '李书意',
          phone: '13467857893',
          sex: '1',
          className: '一年级3班',
          classType: 'graduate',
          studentType: 'member'
        },
        {
          studentName: '夏小满',
          phone: '13925367893',
          sex: '0',
          className: '一年级3班',
          classType: 'none',
          studentType: ''
        }
      ] as any
    });
    const search = () => {
      console.log('search', state);
    };

    const onReset = () => {
      console.log('search');
    };
    const getList = () => {
      console.log('getList');
    };

    const columns = () => {
      return [
        {
          title: '姓名',
          key: 'studentName'
        },
        {
          title: '手机号',
          key: 'phone'
        },
        {
          title: '性别',
          key: 'sex',
          render(row: any) {
            return <>{row.sex == '0' ? '女' : '男'}</>;
          }
        },

        {
          title: '班级',
          key: 'className',
          render(row: any) {
            return (
              <>
                <div>
                  {row.classType == 'none' ? (
                    <p style={{ color: '#EA4132' }}>{'未在班级'}</p>
                  ) : null}
                  {row.classType == 'graduate' ? (
                    <p style={{ color: '#AAAAAA' }}>{'毕业'}</p>
                  ) : null}
                  {row.classType == 'normal' ? <p>{row.className}</p> : null}
                </div>
              </>
            );
          }
        },
        {
          title: '学生类型',
          key: 'studentType',
          render(row: any) {
            return <>{row.studentType == 'member' ? '会员' : '普通'}</>;
          }
        },
        {
          title: '操作',
          key: 'id',
          render(row: any) {
            return (
              <NButton text type="primary">
                详情
              </NButton>
            );
          }
        }
      ];
    };
    return () => (
      <div class={styles.listWrap}>
        <div class={styles.searchList}>
          <NForm label-placement="left" inline>
            <NFormItem>
              <SearchInput
                class={styles.searchInput}
                searchWord={state.searchWord}
                onChangeValue={(val: string) =>
                  (state.searchWord = val)
                }></SearchInput>
            </NFormItem>

            <NFormItem>
              <CSelect
                {...({
                  options: [
                    {
                      label:
                        "Everybody's Got Something to Hide Except Me and My Monkey",
                      value: 'song0'
                    },
                    {
                      label: 'Drive My Car',
                      value: 'song1'
                    }
                  ],
                  placeholder: '学生声部',
                  clearable: true
                } as any)}
                v-model:value={state.orchestraType}></CSelect>
            </NFormItem>
            <NFormItem>
              <CSelect
                {...({
                  options: [
                    {
                      label:
                        "Everybody's Got Something to Hide Except Me and My Monkey",
                      value: 'song0'
                    },
                    {
                      label: 'Drive My Car',
                      value: 'song1'
                    }
                  ],
                  placeholder: '年级班级',
                  clearable: true
                } as any)}
                v-model:value={state.orchestraType}></CSelect>
            </NFormItem>
            <NFormItem>
              <CSelect
                {...({
                  options: [
                    {
                      label:
                        "Everybody's Got Something to Hide Except Me and My Monkey",
                      value: 'song0'
                    },
                    {
                      label: 'Drive My Car',
                      value: 'song1'
                    }
                  ],
                  placeholder: '学生类型',
                  clearable: true
                } as any)}
                v-model:value={state.orchestraType}></CSelect>
            </NFormItem>
            <NFormItem>
              <NSpace justify="end">
                <NButton type="primary" ghost class="resetBtn" onClick={search}>
                  搜索
                </NButton>
                <NButton type="primary" class="searchBtn" 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
            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>
      </div>
    );
  }
});