mozhe
/
school-file-portal
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码提交

This commit is contained in:
jiangzhe 2024-06-20 17:08:05 +08:00
parent b8d7d0b6c7
commit eed984f0fd
13 changed files with 468 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/apis/catalogResource.js Normal file
View File

@ -0,0 +1,16 @@
import httpInstance from '@/utils/http'
export const getResourceCatalogList = (params = {}) => {
return httpInstance({
url: '/portal/resource/catalog/pageList',
params
})
}
export const getResourceList = (params = {}) => {
return httpInstance({
url: '/portal/resource/list',
params
})
}

45
src/apis/home.js
View File

@ -1,48 +1,47 @@
import httpInstance from '@/utils/http' import httpInstance from '@/utils/http'
// 获取banner // 查询门户Banner列表
export function getBannerAPI(params = {}) { export function getBannerAPI(params = {}) {
// 默认为1 商品为2
const { distributionSite = '1' } = params
return httpInstance({ return httpInstance({
url: '/home/banner', url: '/portal/banner/list',
params: { params
distributionSite
}
}) })
} }
/** /**
* @description: 获取新鲜好物 * 查询学校动态列表
* @param {*}
* @return {*}
*/ */
export const findNewAPI = () => { export const getTrendAPI = (params = {}) => {
return httpInstance({ return httpInstance({
url: '/home/new' url: '/portal/trend/list',
params
}) })
} }
/** /**
* @description: 获取人气推荐 *查询学校名师列表
* @param {*}
* @return {*}
*/ */
export const getHotAPI = () => { export const getShowAPI = (params = {}) => {
return httpInstance({ return httpInstance({
url: '/home/hot' url: '/portal/show/list',
params
}) })
} }
/** /**
* @description: 获取所有商品模块 *查询目录-同步教材
* @param {*}
* @return {*}
*/ */
export const getGoodsAPI = () => { export const getTextbookAPI = () => {
return httpInstance({ return httpInstance({
url: '/home/goods' url: '/portal/textbook/catalog/tree'
})
}
// 查询目录-专题资源
export const getResourceAPI = (params = {}) => {
return httpInstance({
url: '/portal/resource/catalog/pageList',
params
}) })
} }

24
src/apis/textbook.js Normal file
View File

@ -0,0 +1,24 @@
import httpInstance from '@/utils/http'
/**
*查询目录-同步教材
*/
export const getTextbookAPI = () => {
return httpInstance({
url: '/portal/textbook/catalog/list'
})
}
export const getTextbookTreeAPI = (params = {}) => {
return httpInstance({
url: '/portal/textbook/catalog/tree',
params
})
}
export const getTextbookList = (params = {}) => {
return httpInstance({
url: '/portal/textbook/list',
params
})
}

2
src/router/index.js
View File

@ -45,7 +45,7 @@ const router = createRouter({
component: () => import('@/views/CatalogResource/index.vue') component: () => import('@/views/CatalogResource/index.vue')
}, },
{ {
path: 'subSubject', path: 'subSubject/:id',
component: () => import('@/views/SubCatalogResource/index.vue') component: () => import('@/views/SubCatalogResource/index.vue')
}, },
{ {

4
src/utils/http.js
View File

@ -3,8 +3,8 @@ import axios from 'axios'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStore' import { useUserStore } from '@/stores/userStore'
const httpInstance = axios.create({ const httpInstance = axios.create({
baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net', baseURL: '/api',
timeout: 5000 timeout: 50000
}) })
// 拦截器 // 拦截器

44
src/utils/utils.js Normal file
View File

@ -0,0 +1,44 @@
// 日期格式化
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
return null;
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
let date;
if (typeof time === 'object') {
date = time;
} else {
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
time = parseInt(time);
} else if (typeof time === 'string') {
time = time
.replace(new RegExp(/-/gm), '/')
.replace('T', ' ')
.replace(new RegExp(/\.[\d]{3}/gm), '');
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000;
}
date = new Date(time);
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
};
return format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key];
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value];
}
if (result.length > 0 && value < 10) {
value = '0' + value;
}
return value || 0;
});
}

31
src/views/CatalogResource/index.vue
View File

@ -9,9 +9,6 @@
<div class="subject-banner"> <div class="subject-banner">
<el-carousel height="500px" arrow="always"> <el-carousel height="500px" arrow="always">
<!-- <el-carousel-item v-for="item in bannerList" :key="item.id">
<img :src="item.imgUrl" alt="">
</el-carousel-item> -->
<el-carousel-item v-for="item in 4"> <el-carousel-item v-for="item in 4">
<img src="@/assets/images/subject-banner.png" alt=""> <img src="@/assets/images/subject-banner.png" alt="">
</el-carousel-item> </el-carousel-item>
@ -23,14 +20,14 @@
专题资源 专题资源
</div> </div>
<div class="more"> <div class="more">
19个专题 {{ total }}个专题
</div> </div>
<div class="subject-content"> <div class="subject-content">
<div class="subject-card" v-for="item in 12"> <div class="subject-card" v-for="item in resourceList">
<RouterLink to="subSubject"> <RouterLink :to="`subSubject/${item.catalogId}`">
<el-card> <el-card>
<img src="@/assets/images/subject.png" /> <img :src="item.coverUrl" />
</el-card> </el-card>
<div class="subject-top">1790个资源</div> <div class="subject-top">1790个资源</div>
</RouterLink> </RouterLink>
@ -42,7 +39,25 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import { getResourceCatalogList } from '@/apis/catalogResource'
const queryParams = ref({
pageNum: 1,
pageSize: 12
})
const resourceList = ref([])
const total = ref(0)
const getResourceListData = async () => {
const res = await getResourceCatalogList(queryParams.value)
resourceList.value = res.rows
total.value = res.total
}
onMounted(() => {
getResourceListData()
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

23
src/views/Home/components/HomeBanner.vue
View File

@ -2,15 +2,17 @@
import { getBannerAPI } from '@/apis/home' import { getBannerAPI } from '@/apis/home'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
// const bannerList = ref([]) const bannerList = ref([])
// const getBanner = async () => { const getBanner = async () => {
// const res = await getBannerAPI() const res = await getBannerAPI({
// console.log(res) pageNum: 1,
// bannerList.value = res.result pageSize: 10,
// } })
bannerList.value = res.rows
}
// onMounted(() => getBanner()) onMounted(() => getBanner())
</script> </script>
@ -18,11 +20,8 @@ import { onMounted, ref } from 'vue'
<template> <template>
<div class="home-banner"> <div class="home-banner">
<el-carousel height="500px" arrow="always"> <el-carousel height="500px" arrow="always">
<!-- <el-carousel-item v-for="item in bannerList" :key="item.id"> <el-carousel-item v-for="item in bannerList" :key="item.bannerId">
<img :src="item.imgUrl" alt=""> <img :src="item.coverUrl" :alt="item.title">
</el-carousel-item> -->
<el-carousel-item v-for="item in 4">
<img src="@/assets/images/carousel-item.png" alt="">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>

142
src/views/Home/index.vue
View File

@ -18,25 +18,9 @@
</template> </template>
<ul class="card-left-list"> <ul class="card-left-list">
<li> <li v-for="item in trendList">
<span>当AI融入课堂，会带来怎样的体验?</span> <span>{{ item.title }}</span>
<span>2024-04-12</span> <span>{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
</li>
<li>
<span>跟胡老师一起读:现代文篇②</span>
<span>2024-04-12</span>
</li>
<li>
<span>周末实验室-不伤鱼的三维立体方便测量盆</span>
<span>2024-04-12</span>
</li>
<li>
<span>构建智慧课堂 促生深度学习|赋能小学高效课堂教学...</span>
<span>2024-04-12</span>
</li>
<li>
<span>在线学习平台应用研讨会顺利举行</span>
<span>2024-04-12</span>
</li> </li>
</ul> </ul>
</el-card> </el-card>
@ -54,28 +38,15 @@
</template> </template>
<div class="card-right-content"> <div class="card-right-content">
<el-radio-group v-model="grade" class="grade-radio"> <el-radio-group v-model="grade" class="grade-radio" @change="firstChange">
<el-radio-button label="小学" value="small" /> <el-radio-button v-for="item in firstType" :label="item.label" :value="item.id" :key="item.id" />
<el-radio-button label="初中" value="middle" />
</el-radio-group> </el-radio-group>
<el-tabs type="border-card"> <el-tabs v-model="activeName" type="border-card" @tab-click="secondChange">
<el-tab-pane label="一年级" class="class-book"> <el-tab-pane v-for="item in secondType" :label="item.label" :name="item.id" :key="item.id"
<el-tag type="info">语文</el-tag> class="class-book">
<el-tag type="info">数学</el-tag> <el-tag v-for="item in threeType" :key="item.id" type="info" @click="gotoInfo(item.id)">{{ item.label
<el-tag type="info">英语</el-tag> }}</el-tag>
<el-tag type="info">音乐</el-tag>
<el-tag type="info">美术</el-tag>
<el-tag type="info">特殊教育</el-tag>
<el-tag type="info">科学</el-tag>
<el-tag type="info">道德与法治</el-tag>
<el-tag type="info">体育与健康</el-tag>
<el-tag type="info">小学劳动与技术</el-tag>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="二年级">二年级</el-tab-pane>
<el-tab-pane label="三年级">三年级</el-tab-pane>
<el-tab-pane label="四年级">四年级</el-tab-pane>
<el-tab-pane label="五年级">五年级</el-tab-pane>
<el-tab-pane label="六年级">六年级</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</el-card> </el-card>
@ -93,11 +64,10 @@
</div> </div>
</template> </template>
<div class="subject-content"> <div class="subject-content">
<el-card v-for="item in 8"> <el-card v-for="item in resourceList">
<img :src="item.coverUrl" alt="">
<template #footer> <template #footer>
<div class="subject-title">【金版学案】2016-2017学年高中语文人教版(必修3、必修4)检测+课件</div> <div class="subject-title">{{ item.catalogName }}</div>
<div class="subject-date">2024-04-12</div> <div class="subject-date">2024-04-12</div>
</template> </template>
</el-card> </el-card>
@ -116,12 +86,12 @@
</template> </template>
<ul class="card-teacher-list"> <ul class="card-teacher-list">
<li class="item" v-for="item in 4"> <li class="item" v-for="item in showList">
<el-card> <el-card>
<img src="@/assets/images/teacher.png" alt=""> <img :src="item.avatarUrl" alt="">
<p class="teacher-name">程晨</p> <p class="teacher-name">{{ item.teacherName }}</p>
<p class="teacher-class">一年级（1）班 | 语文</p> <p class="teacher-class">{{ item.gradeName }}</p>
<p class="teacher-desc">教师介绍教师介绍教师介绍教师介绍教师介绍教师介绍。</p> <p class="teacher-desc" v-html="item.content"></p>
</el-card> </el-card>
</li> </li>
</ul> </ul>
@ -131,10 +101,82 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import HomeBanner from './components/HomeBanner.vue' import HomeBanner from './components/HomeBanner.vue'
import { getTrendAPI, getTextbookAPI, getShowAPI, getResourceAPI } from '@/apis/home'
import { parseTime } from '@/utils/utils'
const grade = ref('small') const trendList = ref([])
const getTrendData = async () => {
const res = await getTrendAPI({
pageNum: 1,
pageSize: 5
})
trendList.value = res.rows
}
const grade = ref()
const activeName = ref()
const textbookList = ref([])
const firstType = ref([])
const secondType = ref([])
const threeType = ref([])
const getTextbookData = async () => {
const res = await getTextbookAPI()
textbookList.value = res.data
const firstList = res.data[0].children
firstType.value = firstList
grade.value = firstType.value[0].id
const secondList = firstList[0].children
secondType.value = secondList
activeName.value = secondType.value[0].id
const threeList = secondList[0].children
threeType.value = threeList
}
const firstChange = (val) => {
const firstList = textbookList.value[0].children
secondType.value = firstList.filter(item => item.id == val)[0].children
activeName.value = secondType.value[0].id
}
const secondChange = (tab) => {
const id = tab.props.name
threeType.value = secondType.value.filter(item => item.id == id)[0].children
}
const resourceList = ref([])
const getResourceData = async () => {
const res = await getResourceAPI({
type: 2,
pageNum: 1,
pageSize: 8
})
resourceList.value = res.rows
}
const showList = ref([])
const getShowData = async () => {
const res = await getShowAPI({
pageNum: 1,
pageSize: 4
})
showList.value = res.rows
}
onMounted(() => {
getTrendData()
getTextbookData()
getResourceData()
getShowData()
})
const gotoInfo = (id) => {
console.log('getInfo', id);
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

76
src/views/News/index.vue
View File

@ -14,69 +14,53 @@
<div>校园资讯常看常新</div> <div>校园资讯常看常新</div>
</div> </div>
<el-input v-model="keyWords" style="width: 240px;" size="large" placeholder="请输入关键字" :suffix-icon="Search" /> <el-input v-model="queryParams.title" style="width: 240px;" size="large" placeholder="请输入关键字"
:suffix-icon="Search" />
</div> </div>
</template> </template>
<el-table :data="tableData" class="table" stripe :show-header="false"> <el-table :data="tableData" class="table" stripe :show-header="false">
<el-table-column prop="title" label="title" /> <el-table-column prop="title" label="title" />
<el-table-column prop="date" label="date" width="150" /> <el-table-column prop="createTime" label="date" width="200" />
</el-table> </el-table>
<template #footer> <template #footer>
<el-pagination class="footer" background layout="prev, pager, next, sizes,jumper" :total="1000" /> <el-pagination class="footer" background layout="prev, pager, next, sizes,jumper" :total="total"
@current-change="handleCurrentChange" @size-change="handleSizeChange" />
</template> </template>
</el-card> </el-card>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import { getTrendAPI } from '@/apis/home'
const keyWords = ref('') const queryParams = ref({
const tableData = [ title: '',
{ pageNum: 1,
title: '当AI融入课堂，会带来怎样的体验?', pageSize: 10
date: '2024-04-12', })
}, const tableData = ref([])
{ const total = ref(0)
title: '当AI融入课堂，会带来怎样的体验?', const getTrendData = async () => {
date: '2024-04-12', const res = await getTrendAPI(queryParams.value)
}, tableData.value = res.rows
{ total.value = res.total
title: '当AI融入课堂，会带来怎样的体验?', }
date: '2024-04-12',
}, onMounted(() => {
{ getTrendData()
title: '当AI融入课堂，会带来怎样的体验?', })
date: '2024-04-12',
}, const handleCurrentChange = (val) => {
{ queryParams.pageNum = val
title: '当AI融入课堂，会带来怎样的体验?', }
date: '2024-04-12',
}, const handleSizeChange = (val) => {
{ queryParams.pageSize = val
title: '当AI融入课堂，会带来怎样的体验?',
date: '2024-04-12',
},
{
title: '当AI融入课堂，会带来怎样的体验?',
date: '2024-04-12',
},
{
title: '当AI融入课堂，会带来怎样的体验?',
date: '2024-04-12',
},
{
title: '当AI融入课堂，会带来怎样的体验?',
date: '2024-04-12',
},
{
title: '当AI融入课堂，会带来怎样的体验?',
date: '2024-04-12',
} }
]
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

56
src/views/SubCatalogResource/index.vue
View File

@ -47,17 +47,17 @@
</div> </div>
<div class="book-grid"> <div class="book-grid">
<el-card v-for="item in 6"> <el-card v-for="item in resourceList">
<div class="book-content"> <div class="book-content">
<img class="file-type" src="@/assets/images/word.png" alt=""> <img class="file-type" src="@/assets/images/word.png" alt="">
<img src="@/assets/images/book.png" alt=""> <img src="@/assets/images/book.png" alt="">
</div> </div>
<template #footer> <template #footer>
<div class="book-title">汉字文化云课堂</div> <div class="book-title">{{ item.fileName }}</div>
<div class="book-des"> <div class="book-des">
<div class="book-teacher"> <div class="book-teacher">
<span>王老师</span>&nbsp;|&nbsp;<span>一年级（2）班</span> <span>{{ item.createBy }}</span>&nbsp;|&nbsp;<span>{{ item.createDept }}</span>
</div> </div>
<div class="book-view"> <div class="book-view">
<span> <span>
@ -71,7 +71,7 @@
</template> </template>
</el-card> </el-card>
</div> </div>
<el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" /> <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total" />
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -79,8 +79,19 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { View, Search } from '@element-plus/icons-vue' import { View, Search } from '@element-plus/icons-vue'
import { getResourceList } from '@/apis/catalogResource'
const route = useRoute()
const id = route.params
const queryParams = ref({
title: '',
pageNum: 1,
pageSize: 6
})
const tableData = [ const tableData = [
{ {
@ -111,28 +122,19 @@ const tableData = [
}, },
] ]
const tableSortData = [ const tableSortData = []
{
date: '2016-05-03', const resourceList = ref([])
name: 'Tom', const total = ref(0)
address: 'No. 189, Grove St, Los Angeles', const getResourceListData = async () => {
}, const res = await getResourceList(queryParams.value)
{ resourceList.value = res.rows
date: '2016-05-02', total.value = res.total
name: 'Tom', }
address: 'No. 189, Grove St, Los Angeles',
}, onMounted(() => {
{ getResourceListData()
date: '2016-05-04', })
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

252
src/views/TextBook/index.vue
View File

@ -9,74 +9,62 @@
<el-card class="card-filter"> <el-card class="card-filter">
<el-form label-width="auto"> <el-form label-width="auto">
<el-form-item label="学段"> <el-form-item v-if="textbook2List && textbook2List.length" label="学段">
<el-checkbox-group> <el-radio-group v-model="radio2" @change="handle2Change">
<el-checkbox-button>小学</el-checkbox-button> <el-radio-button v-for="item in textbook2List" :label="item.catalogName" :value="item.catalogId"
<el-checkbox-button>初中</el-checkbox-button> :key="item.catalogId" />
</el-checkbox-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="年级"> <el-form-item v-if="textbook3List && textbook3List.length" label="年级">
<el-checkbox-group> <el-radio-group v-model="radio3" @change="handle3Change">
<el-checkbox-button>一年级</el-checkbox-button> <el-radio-button v-for="item in textbook3List" :label="item.catalogName" :value="item.catalogId"
<el-checkbox-button>二年级</el-checkbox-button> :key="item.catalogId" />
<el-checkbox-button>三年级</el-checkbox-button> </el-radio-group>
<el-checkbox-button>四年级</el-checkbox-button>
<el-checkbox-button>五年级</el-checkbox-button>
<el-checkbox-button>六年级</el-checkbox-button>
</el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="学科"> <el-form-item v-if="textbook4List && textbook4List.length" label="学科">
<el-checkbox-group> <el-radio-group v-model="radio4" @change="handle4Change">
<el-checkbox-button>语文</el-checkbox-button> <el-radio-button v-for="item in textbook4List" :label="item.catalogName" :value="item.catalogId"
<el-checkbox-button>数学</el-checkbox-button> :key="item.catalogId" />
<el-checkbox-button>英语</el-checkbox-button> </el-radio-group>
<el-checkbox-button>音乐</el-checkbox-button>
<el-checkbox-button>美术</el-checkbox-button>
<el-checkbox-button>特殊教育</el-checkbox-button>
<el-checkbox-button>科学</el-checkbox-button>
<el-checkbox-button>道德与法治</el-checkbox-button>
<el-checkbox-button>体育与健康</el-checkbox-button>
<el-checkbox-button>小学与劳动与技术</el-checkbox-button>
</el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="版本"> <el-form-item v-if="textbook5List && textbook5List.length" label="版本">
<el-checkbox-group> <el-radio-group v-model="radio5" @change="handle5Change">
<el-checkbox-button>人教版</el-checkbox-button> <el-radio-button v-for="item in textbook5List" :label="item.catalogName" :value="item.catalogId"
<el-checkbox-button>苏教版</el-checkbox-button> :key="item.catalogId" />
</el-checkbox-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="教材"> <el-form-item v-if="textbook6List && textbook6List.length" label="教材">
<el-checkbox-group> <el-radio-group v-model="radio6" @change="handle6Change">
<el-checkbox-button>语文人教部编版一上年上册</el-checkbox-button> <el-radio-button v-for="item in textbook6List" :label="item.catalogName" :value="item.catalogId"
<el-checkbox-button>语文人教部编版一上年下册</el-checkbox-button> :key="item.catalogId" />
</el-checkbox-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="类型"> <el-form-item label="类型">
<el-checkbox-group> <el-radio-group>
<el-checkbox-button>全部</el-checkbox-button> <el-radio-button>全部</el-radio-button>
<el-checkbox-button>课件</el-checkbox-button> <el-radio-button>课件</el-radio-button>
<el-checkbox-button>精品课堂</el-checkbox-button> <el-radio-button>精品课堂</el-radio-button>
<el-checkbox-button>作业</el-checkbox-button> <el-radio-button>作业</el-radio-button>
<el-checkbox-button>试卷</el-checkbox-button> <el-radio-button>试卷</el-radio-button>
</el-checkbox-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="格式"> <el-form-item label="格式">
<el-checkbox-group> <el-radio-group>
<el-checkbox-button>全部</el-checkbox-button> <el-radio-button>全部</el-radio-button>
<el-checkbox-button>PPT</el-checkbox-button> <el-radio-button>PPT</el-radio-button>
<el-checkbox-button>WORD</el-checkbox-button> <el-radio-button>WORD</el-radio-button>
<el-checkbox-button>PDF</el-checkbox-button> <el-radio-button>PDF</el-radio-button>
<el-checkbox-button>图片</el-checkbox-button> <el-radio-button>图片</el-radio-button>
<el-checkbox-button>音频</el-checkbox-button> <el-radio-button>音频</el-radio-button>
<el-checkbox-button>视频</el-checkbox-button> <el-radio-button>视频</el-radio-button>
<el-checkbox-button>其它</el-checkbox-button> <el-radio-button>其它</el-radio-button>
</el-checkbox-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
@ -90,8 +78,9 @@
</div> </div>
</template> </template>
<el-table :data="tableData" row-key="id" border default-expand-all :show-header="false"> <el-table @row-click="handleRowClick" :data="textbook7List" row-key="id" border default-expand-all
<el-table-column prop="name" label="Name" /> :show-header="false">
<el-table-column prop="label" label="label" />
</el-table> </el-table>
</el-card> </el-card>
</el-col> </el-col>
@ -104,29 +93,31 @@
</div> </div>
<div class="book-grid"> <div class="book-grid">
<el-card v-for="item in 6" :key="item"> <el-card v-for="item in tableData" :key="item">
<div class="book-content"> <div class="book-content">
<img class="file-type" src="@/assets/images/word.png" alt="" /> <img class="file-type" src="@/assets/images/word.png" alt="" />
<img src="@/assets/images/book.png" alt="" /> <img src="@/assets/images/book.png" alt="" />
</div> </div>
<template #footer> <template #footer>
<div class="book-title">汉字文化云课堂</div> <div class="book-title">{{ item.fileName }}</div>
<div class="book-des"> <div class="book-des">
<div class="book-teacher"><span>蒋老师</span>&nbsp;|&nbsp;<span>一年级（2）班</span></div> <div class="book-teacher"><span>{{ item.createBy }}</span>&nbsp;|&nbsp;<span>{{ item.createDept
}}</span></div>
<div class="book-view"> <div class="book-view">
<span> <span>
<el-icon> <el-icon>
<View /> <View />
</el-icon> </el-icon>
</span> </span>
<span>204</span> <span>{{ item.downloadNum }}</span>
</div> </div>
</div> </div>
</template> </template>
</el-card> </el-card>
</div> </div>
<el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" /> <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="total"
@current-change="handleCurrentChange" @size-change="handleSizeChange" />
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -134,39 +125,85 @@
</template> </template>
<script setup> <script setup>
import { ref, watchEffect } from 'vue'; import { ref, onMounted, watchEffect, watch } from 'vue';
import { View } from '@element-plus/icons-vue'; import { View } from '@element-plus/icons-vue'
import { getTextbookAPI, getTextbookTreeAPI, getTextbookList } from '@/apis/textbook'
import JzSort from '@/components/JzSort/index.vue'
import JzSort from '@/components/JzSort/index.vue'; const queryParams = ref({
catalogId: undefined,
pageNum: 1,
pageSize: 6
})
const tableData = ref([])
const total = ref(0)
const tableData = [ const radio2 = ref()
{ const radio3 = ref()
id: 1, const radio4 = ref()
name: '全部' const radio5 = ref()
}, const radio6 = ref()
{
id: 2, // 1主目录，2学段，3年级，4学科，5版本，6教材，7目录
name: '我上学了' const textbookList = ref([])
}, const textbook2List = ref([])
{ const textbook3List = ref([])
id: 3, const textbook4List = ref([])
name: '识字', const textbook5List = ref([])
children: [ const textbook6List = ref([])
{ const textbook7List = ref([])
id: 31,
name: '1 天地人' const getTextbookData = async () => {
}, const res = await getTextbookAPI()
{ textbookList.value = res.data
id: 32,
name: '2金木水火土' textbook2List.value = filterListByType(2)
} }
]
}, const handle2Change = (val) => {
{ textbook3List.value = filterListByParentId(val)
id: 4, textbook4List.value = []
name: '汉语拼音' textbook5List.value = []
textbook6List.value = []
textbook7List.value = []
console.log(val);
queryParams.value.catalogId = val
}
const handle3Change = (val) => {
textbook4List.value = filterListByParentId(val)
textbook5List.value = []
textbook6List.value = []
textbook7List.value = []
queryParams.value.catalogId = val
}
const handle4Change = (val) => {
textbook5List.value = filterListByParentId(val)
textbook6List.value = []
textbook7List.value = []
queryParams.value.catalogId = val
}
const handle5Change = (val) => {
textbook6List.value = filterListByParentId(val)
textbook7List.value = []
queryParams.value.catalogId = val
}
const handle6Change = async (val) => {
const res = await getTextbookTreeAPI({ parentId: val })
textbook7List.value = res.data
queryParams.value.catalogId = val
}
const filterListByType = (type) => {
return textbookList.value.filter(item => item.type == type)
}
const filterListByParentId = (parentId) => {
return textbookList.value.filter(item => item.parentId == parentId)
} }
];
// 排序初始化数据 // 排序初始化数据
const sortData = [ const sortData = [
@ -180,7 +217,35 @@ const sortResult = ref({}); // 排序结果
watchEffect(() => { watchEffect(() => {
console.log('===排序 改变了===', sortResult.value); console.log('===排序 改变了===', sortResult.value);
// TODO: 排序逻辑 // TODO: 排序逻辑
}); })
const getTextbookListData = async () => {
const res = await getTextbookList(queryParams.value)
tableData.value = res.rows
total.value = res.total
}
const handleCurrentChange = (val) => {
queryParams.pageNum = val
}
const handleSizeChange = (val) => {
queryParams.pageSize = val
}
const handleRowClick = (val) => {
queryParams.value.catalogId = val.id
}
watch(() => queryParams.value.catalogId, (oldVal, newVal) => {
getTextbookListData()
})
onMounted(() => {
getTextbookData()
getTextbookListData()
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -224,6 +289,10 @@ watchEffect(() => {
.book-content { .book-content {
position: relative; position: relative;
img {
width: 250px;
}
.file-type { .file-type {
position: absolute; position: absolute;
top: 0; top: 0;
@ -252,4 +321,3 @@ watchEffect(() => {
} }
} }
</style> </style>

9
vite.config.js
View File

@ -39,5 +39,14 @@ export default defineConfig({
`, `,
} }
} }
},
server: {
proxy: {
'/api': {
target: 'http://localhost:8090/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
} }
}) })