376 lines
12 KiB
Vue
376 lines
12 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="bread-container">
|
||
<el-breadcrumb separator=">">
|
||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||
<el-breadcrumb-item>同步教材</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
|
||
<el-collapse v-model="activeNames">
|
||
<el-collapse-item title="" name="1" style="position: relative;">
|
||
<template #title>
|
||
<div style="position: absolute;right: 30px;font-size: 16px;">{{ activeNames == '1' ? '收起' : '展开' }}</div>
|
||
</template>
|
||
<el-form label-width="auto" style="padding-left: 20px;">
|
||
<el-form-item v-if="textbook2List && textbook2List.length > 0" label="学段">
|
||
<el-radio-group v-model="radio2" @change="handle2Change">
|
||
<el-radio-button v-for="item in textbook2List" :label="item.catalogName" :value="item.catalogId"
|
||
:key="item.catalogId" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="textbook3List && textbook3List.length > 0" label="年级">
|
||
<el-radio-group v-model="radio3" @change="handle3Change">
|
||
<el-radio-button v-for="item in textbook3List" :label="item.catalogName" :value="item.catalogId"
|
||
:key="item.catalogId" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="textbook4List && textbook4List.length > 0" label="学科">
|
||
<el-radio-group v-model="radio4" @change="handle4Change">
|
||
<el-radio-button v-for="item in textbook4List" :label="item.catalogName" :value="item.catalogId"
|
||
:key="item.catalogId" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="textbook5List && textbook5List.length > 0" label="版本">
|
||
<el-radio-group v-model="radio5" @change="handle5Change">
|
||
<el-radio-button v-for="item in textbook5List" :label="item.catalogName" :value="item.catalogId"
|
||
:key="item.catalogId" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="textbook6List && textbook6List.length > 0" label="教材">
|
||
<el-radio-group v-model="radio6" @change="handle6Change">
|
||
<el-radio-button v-for="item in textbook6List" :label="item.catalogName" :value="item.catalogId"
|
||
:key="item.catalogId" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="类型">
|
||
<el-radio-group v-model="queryParams.type">
|
||
<el-radio-button label="全部" value=""></el-radio-button>
|
||
<el-radio-button label="课件" value="1"></el-radio-button>
|
||
<el-radio-button label="精品课堂" value="2"></el-radio-button>
|
||
<el-radio-button label="作业" value="3"></el-radio-button>
|
||
<el-radio-button label="试卷" value="4"></el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="格式">
|
||
<el-radio-group v-model="queryParams.formatSuffix">
|
||
<el-radio-button label="全部" value=""></el-radio-button>
|
||
<el-radio-button label="PPT" value="1"></el-radio-button>
|
||
<el-radio-button label="WORD" value="2"></el-radio-button>
|
||
<el-radio-button label="PDF" value="3"></el-radio-button>
|
||
<el-radio-button label="图片" value="4"></el-radio-button>
|
||
<el-radio-button label="音频" value="5"></el-radio-button>
|
||
<el-radio-button label="视频" value="6"></el-radio-button>
|
||
<el-radio-button label="其它" value="7"></el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
|
||
|
||
<el-row :gutter="10" style="margin-top: 10px">
|
||
<el-col :span="6">
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card--left-header">
|
||
<span class="title">目录</span>
|
||
</div>
|
||
</template>
|
||
|
||
<el-table @row-click="handleRowClick" :data="textbook7List" row-key="id" border default-expand-all
|
||
:show-header="false">
|
||
<el-table-column prop="label" label="label" />
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :span="18">
|
||
<el-card>
|
||
<div class="card-right-header">
|
||
<!-- 排序组件 -->
|
||
<JzSort v-model="sortResult" :sortData="sortData" />
|
||
<div class="header-search">
|
||
<el-input v-model="queryParams.fileName" style="width: 300px" placeholder="请输入关键词" clearable
|
||
@clear="handleClear" />
|
||
<el-button type="primary" :icon="Search" @click="handleQuery" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="book-grid">
|
||
<el-card v-for="item in tableData" :key="item" @click="goto(item)">
|
||
<div class="book-content">
|
||
<img v-if="item?.fileSuffix.includes('doc')" src="@/assets/images/word.png" alt="" />
|
||
<img v-else-if="item?.fileSuffix.includes('xls')" src="@/assets/images/excel.png" alt="" />
|
||
<img v-else-if="item?.fileSuffix.includes('pdf')" src="@/assets/images/pdf.png" alt="" />
|
||
<img v-else-if="item?.fileSuffix.includes('txt')" src="@/assets/images/txt.png" alt="" />
|
||
<img v-else src="@/assets/images/book.png" alt="" />
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="book-title">{{ item?.fileName }}</div>
|
||
<div class="book-des">
|
||
<div class="book-teacher"><span>{{ item?.createBy }}</span> | <span>{{ item?.createDept
|
||
}}</span></div>
|
||
<div class="book-view">
|
||
<span style="margin-right: 5px;">
|
||
<el-icon>
|
||
<View />
|
||
</el-icon>
|
||
</span>
|
||
<span>{{ item?.downloadNum }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-card>
|
||
</div>
|
||
<pagination v-show="total > 0" :total="total" :page-sizes="[6, 10, 20, 30, 50]"
|
||
v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getTextbookListData" />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, watchEffect, watch } from 'vue';
|
||
import { useRouter } from 'vue-router'
|
||
import { View, Search } from '@element-plus/icons-vue'
|
||
import { getTextbookAPI, getTextbookTreeAPI, getTextbookList } from '@/apis/textbook'
|
||
import JzSort from '@/components/JzSort/index.vue'
|
||
import pagination from '@/components/Pagination/index.vue';
|
||
|
||
// 排序初始化数据
|
||
const sortData = [
|
||
{ label: '上传时间', key: 'createTime' },
|
||
{ label: '浏览量', key: 'previewNum' },
|
||
{ label: '下载量', key: 'downloadNum' }
|
||
];
|
||
const sortResult = ref({}); // 排序结果
|
||
|
||
const router = useRouter()
|
||
const queryParams = ref({
|
||
catalogId: undefined,
|
||
fileName: '',
|
||
type: undefined,
|
||
formatSuffix: undefined,
|
||
pageNum: 1,
|
||
pageSize: 6,
|
||
orderByColumn: '',
|
||
isAsc: ''
|
||
})
|
||
const tableData = ref([])
|
||
const total = ref(0)
|
||
|
||
const activeNames = ref(['1'])
|
||
|
||
const radio2 = ref()
|
||
const radio3 = ref()
|
||
const radio4 = ref()
|
||
const radio5 = ref()
|
||
const radio6 = ref()
|
||
|
||
// 1主目录，2学段，3年级，4学科，5版本，6教材，7目录
|
||
const textbookList = ref([])
|
||
const textbook2List = ref([])
|
||
const textbook3List = ref([])
|
||
const textbook4List = ref([])
|
||
const textbook5List = ref([])
|
||
const textbook6List = ref([])
|
||
const textbook7List = ref([])
|
||
|
||
const getTextbookData = async () => {
|
||
const res = await getTextbookAPI()
|
||
textbookList.value = res.data
|
||
// 学段
|
||
textbook2List.value = filterListByType(2)
|
||
radio2.value = textbook2List.value[0].catalogId
|
||
// 年级
|
||
textbook3List.value = filterListByParentId(radio2.value)
|
||
radio3.value = textbook3List.value[0].catalogId
|
||
// 学科
|
||
textbook4List.value = filterListByParentId(radio3.value)
|
||
radio4.value = textbook4List.value[0].catalogId
|
||
// 版本
|
||
textbook5List.value = filterListByParentId(radio4.value)
|
||
radio5.value = textbook5List.value[0].catalogId
|
||
// 教材
|
||
textbook6List.value = filterListByParentId(radio5.value)
|
||
radio6.value = textbook6List.value[0].catalogId
|
||
// 目录
|
||
const treeData = await getTextbookTreeAPI({ parentId: radio6.value })
|
||
textbook7List.value = treeData.data
|
||
queryParams.value.catalogId = radio6.value
|
||
}
|
||
|
||
const handle2Change = (val) => {
|
||
radio3.value = null
|
||
textbook4List.value = []
|
||
radio4.value = null
|
||
textbook5List.value = []
|
||
radio5.value = null
|
||
textbook6List.value = []
|
||
radio6.value = null
|
||
textbook7List.value = []
|
||
textbook3List.value = filterListByParentId(val)
|
||
queryParams.value.catalogId = val
|
||
}
|
||
|
||
const handle3Change = (val) => {
|
||
radio4.value = null
|
||
textbook5List.value = []
|
||
radio5.value = null
|
||
textbook6List.value = []
|
||
radio6.value = null
|
||
textbook7List.value = []
|
||
textbook4List.value = filterListByParentId(val)
|
||
queryParams.value.catalogId = val
|
||
}
|
||
|
||
const handle4Change = (val) => {
|
||
radio5.value = null
|
||
textbook6List.value = []
|
||
radio6.value = null
|
||
textbook7List.value = []
|
||
textbook5List.value = filterListByParentId(val)
|
||
queryParams.value.catalogId = val
|
||
}
|
||
|
||
const handle5Change = (val) => {
|
||
radio6.value = null
|
||
textbook7List.value = []
|
||
textbook6List.value = filterListByParentId(val)
|
||
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 getTextbookListData = async () => {
|
||
const res = await getTextbookList(queryParams.value)
|
||
tableData.value = res.rows
|
||
total.value = res.total
|
||
}
|
||
|
||
const handleRowClick = (val) => {
|
||
queryParams.value.catalogId = val.id
|
||
}
|
||
|
||
watchEffect(() => {
|
||
queryParams.value.orderByColumn = sortResult.value.key
|
||
queryParams.value.isAsc = sortResult.value.order
|
||
})
|
||
|
||
watch(queryParams, (newVal, oldVal) => {
|
||
getTextbookListData()
|
||
}, { deep: true })
|
||
|
||
const goto = (item) => {
|
||
router.push({ path: 'textBookDetail', query: { id: item.id } })
|
||
}
|
||
|
||
const handleQuery = () => {
|
||
if (!queryParams.value.fileName) {
|
||
ElMessage.error('请输入查询关键字！')
|
||
return
|
||
}
|
||
getTextbookListData()
|
||
}
|
||
|
||
const handleClear = () => {
|
||
queryParams.value.fileName = ''
|
||
getTextbookListData()
|
||
}
|
||
|
||
onMounted(() => {
|
||
getTextbookData()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
.bread-container {
|
||
padding: 25px 0;
|
||
|
||
:deep(.el-breadcrumb__inner) {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
:deep(.el-breadcrumb__separator) {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.el-collapse {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.card--left-header {
|
||
.title {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
.card-right-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #919DA3;
|
||
}
|
||
|
||
.book-grid {
|
||
margin-top: 10px;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
gap: 10px;
|
||
|
||
.book-content {
|
||
|
||
img {
|
||
border-radius: 10px;
|
||
width: 100%;
|
||
height: 240px;
|
||
}
|
||
|
||
}
|
||
|
||
.book-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.book-des {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #919DA3;
|
||
padding: 5px 0;
|
||
}
|
||
}
|
||
|
||
.book-page {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: end
|
||
}
|
||
}
|
||
</style>
|