<template>
|
<div class="train-container w-screen h-screen bg-slate-50 flex flex-col items-center">
|
<NormalHeader class="shrink-0"></NormalHeader>
|
|
<div class="list-container container grow relative">
|
<div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4">
|
<div class="list-wrapper w-full h-full">
|
<el-card class="h-full" :body-style="{ height: '100%' }">
|
<div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
|
<div class="card-header flex justify-between items-center shrink-0">
|
|
<!-- <div class="header-tab">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="全部" name="1"></el-tab-pane>
|
<el-tab-pane label="未开始" name="2"></el-tab-pane>
|
<el-tab-pane label="进行中" name="3"></el-tab-pane>
|
<el-tab-pane label="已结束" name="4"></el-tab-pane>
|
</el-tabs>
|
</div> -->
|
|
<div class="header-search flex items-center">
|
<el-input v-model="searchText" placeholder="课程名称" clearable @clear="searchData" :prefix-icon="Search" maxlength="20" @input="searchData" />
|
<el-select v-model="classesIdList" placeholder="选择班级" multiple clearable @clear="searchData" style="width: 200px;margin-left: 10px" @change="searchData">
|
<el-option v-for="classes in classesList" :key="classes.id" :label="classes.className" :value="classes.id"/>
|
</el-select>
|
<el-button type="primary" class="ml-4" @click="searchData">搜索</el-button>
|
</div>
|
</div>
|
|
<div class="card-main flex-1 my-5 relative">
|
<div class="main-content absolute top-0 bottom-0 left-0 right-0">
|
<DataList v-if="dataList && dataList.length > 0" :dataList="dataList"></DataList>
|
<el-empty v-else description="暂无" />
|
</div>
|
</div>
|
|
<div class="card-footer flex justify-center mb-7 shrink-0">
|
<el-pagination
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
:page-sizes="[10, 20, 50]"
|
:page-size="pageSize"
|
:currentPage="currentIndex"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import NormalHeader from '@/components/NormalHeader/index.vue';
|
import DataList from './data-list/index.vue';
|
import { Search } from '@element-plus/icons-vue';
|
import { getMeetList, getStudentClasses } from '@/api/modules/meet.js';
|
const activeName = ref('1');
|
const searchText = ref('');
|
const classesIdList = ref([]);
|
const classesList = ref([]);
|
const dataList = ref([]);
|
|
const loading = ref(false);
|
|
const currentIndex = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
|
const getData = () => {
|
loading.value = true;
|
getMeetList({meetName: searchText.value, classesIds: classesIdList.value}).then(res => {
|
dataList.value = res.data;
|
loading.value = false;
|
total.value = res.total;
|
}).catch(err => {
|
loading.value = false;
|
});
|
};
|
|
const studentClasses = () => {
|
getStudentClasses().then(res => {
|
classesList.value = res.data
|
})
|
}
|
|
getData();
|
studentClasses();
|
const handleCurrentChange = (val) => {
|
currentIndex.value = val;
|
getData();
|
};
|
|
const handleSizeChange = (val) => {
|
currentIndex.value = 1;
|
pageSize.value = val;
|
getData();
|
};
|
|
const searchData = () => {
|
getData();
|
|
};
|
|
const handleClick = (tab, event) => {
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.el-tabs__nav-wrap:after) {
|
display: none;
|
}
|
</style>
|
