|  | @@ -0,0 +1,124 @@
 | 
	
		
			
				|  |  | +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,
 | 
	
		
			
				|  |  | +      subjectId: null,
 | 
	
		
			
				|  |  | +      classId: null,
 | 
	
		
			
				|  |  | +      studentType: null,
 | 
	
		
			
				|  |  | +      loading: false,
 | 
	
		
			
				|  |  | +      pagination: {
 | 
	
		
			
				|  |  | +        page: 1,
 | 
	
		
			
				|  |  | +        rows: 10,
 | 
	
		
			
				|  |  | +        pageTotal: 4
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      tableList: [
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          studentName: '胡小小',
 | 
	
		
			
				|  |  | +          phone: '17625367893',
 | 
	
		
			
				|  |  | +          trainNum: '49',
 | 
	
		
			
				|  |  | +          trainDay: '9',
 | 
	
		
			
				|  |  | +          averageNum: '35'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          studentName: '丁曼蓉',
 | 
	
		
			
				|  |  | +          phone: '14677789334',
 | 
	
		
			
				|  |  | +          trainNum: '49',
 | 
	
		
			
				|  |  | +          trainDay: '9',
 | 
	
		
			
				|  |  | +          averageNum: '35'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          studentName: '李书意',
 | 
	
		
			
				|  |  | +          phone: '13467857893',
 | 
	
		
			
				|  |  | +          trainNum: '49',
 | 
	
		
			
				|  |  | +          trainDay: '9',
 | 
	
		
			
				|  |  | +          averageNum: '35'
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          studentName: '夏小满',
 | 
	
		
			
				|  |  | +          phone: '13925367893',
 | 
	
		
			
				|  |  | +          trainNum: '49',
 | 
	
		
			
				|  |  | +          trainDay: '9',
 | 
	
		
			
				|  |  | +          averageNum: '35'
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      ] 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: 'trainDay',
 | 
	
		
			
				|  |  | +          render(row: any) {
 | 
	
		
			
				|  |  | +            return <span>{row.trainDay}天</span>;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          title: '练习总时长',
 | 
	
		
			
				|  |  | +          key: 'trainNum',
 | 
	
		
			
				|  |  | +          render(row: any) {
 | 
	
		
			
				|  |  | +            return <span>{row.trainNum}分钟</span>;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        {
 | 
	
		
			
				|  |  | +          title: '平均练习时长',
 | 
	
		
			
				|  |  | +          key: 'averageNum',
 | 
	
		
			
				|  |  | +          render(row: any) {
 | 
	
		
			
				|  |  | +            return <span>{row.averageNum}分钟</span>;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      ];
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +    return () => (
 | 
	
		
			
				|  |  | +      <div class={styles.listWrap}>
 | 
	
		
			
				|  |  | +        <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>
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +});
 |