Compare commits
No commits in common. "ba356779471b3c8411e3aa8fa713aba76891970e" and "25654813061cab1be032513ba53972610d3eebf9" have entirely different histories.
ba35677947
...
2565481306
|
@ -1,333 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="book-wrap">
|
|
||||||
<el-scrollbar height="100%">
|
|
||||||
<div class="book-name flex" @click="dialogVisible = true">
|
|
||||||
<span>{{ curBook.data.itemtitle }}</span>
|
|
||||||
<i class="iconfont icon-xiangyou"></i>
|
|
||||||
</div>
|
|
||||||
<div class="book-list" v-loading="treeLoading">
|
|
||||||
<el-tree :data="treeData" accordion :props="defaultProps" node-key="id"
|
|
||||||
:default-expanded-keys="defaultExpandedKeys" :current-node-key="curNode.data.id" highlight-current
|
|
||||||
@node-click="handleNodeClick">
|
|
||||||
<template #default="{ node }">
|
|
||||||
<span :title="node.label" class="tree-label">{{ node.label }}</span>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
<!--弹窗 选择教材-->
|
|
||||||
<el-dialog v-model="dialogVisible" append-to-body :show-close="false" width="550"
|
|
||||||
style="border-radius: 10px; padding: 10px 15px;">
|
|
||||||
<template #header>
|
|
||||||
<div class="choose-book-header flex">
|
|
||||||
<span>切换教材</span>
|
|
||||||
<i class="iconfont icon-guanbi" @click="dialogVisible = false"></i>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="textbook-container">
|
|
||||||
<el-scrollbar height="450px">
|
|
||||||
<div class="textbook-item flex" v-for="item in subjectList" :class="curBook.data.id == item.id ? 'active-item' : ''"
|
|
||||||
:key="item.id" @click="changeBook(item)">
|
|
||||||
<img v-if="item.avartar" :src="item.avartar.indexOf('http') === 0 ? item.avartar : BaseUrl + item.avartar" class="textbook-img" alt="">
|
|
||||||
<div v-else class="textbook-img">
|
|
||||||
<i class="iconfont icon-jiaocaixuanze" style="font-size: 40px;"></i>
|
|
||||||
</div>
|
|
||||||
<span class="book-name">{{ item.itemtitle }}</span>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { onMounted, ref, nextTick, toRaw, reactive } from 'vue';
|
|
||||||
import { cloneDeep } from 'lodash'
|
|
||||||
import { listEvaluation } from '@/api/subject'
|
|
||||||
import { sessionStore } from '@/utils/store'
|
|
||||||
|
|
||||||
const BaseUrl = import.meta.env.VITE_APP_BUILD_BASE_PATH
|
|
||||||
// 定义要发送的emit事件
|
|
||||||
const emit = defineEmits(['nodeClick', 'changeBook'])
|
|
||||||
// 章节List
|
|
||||||
const unitList = ref([])
|
|
||||||
const subjectList = ref([])
|
|
||||||
const dialogVisible = ref(false)
|
|
||||||
// 当前教材下面单元内容数据
|
|
||||||
const treeData = ref([])
|
|
||||||
const defaultProps = {
|
|
||||||
children: 'children',
|
|
||||||
label: 'itemtitle',
|
|
||||||
class: 'textbook-tree'
|
|
||||||
}
|
|
||||||
//查当前学科
|
|
||||||
const subjectParams = reactive(
|
|
||||||
{
|
|
||||||
edusubject: '科学',
|
|
||||||
edustage:'小学',
|
|
||||||
itemkey: 'version',
|
|
||||||
orderby: 'orderidx asc',
|
|
||||||
pageSize: 10000
|
|
||||||
}
|
|
||||||
)
|
|
||||||
// 查所有的学科
|
|
||||||
const unitParams = reactive({
|
|
||||||
edusubject:'科学',
|
|
||||||
edustage:'小学',
|
|
||||||
itemgroup: 'textbook',
|
|
||||||
orderby: 'orderidx asc',
|
|
||||||
pageSize: 10000
|
|
||||||
})
|
|
||||||
// 当前选中的教材
|
|
||||||
const curBook = reactive({
|
|
||||||
data: {}
|
|
||||||
})
|
|
||||||
// 当前节点
|
|
||||||
const curNode = reactive({
|
|
||||||
data:{}
|
|
||||||
})
|
|
||||||
const treeLoading = ref(false)
|
|
||||||
// 默认展开的节点
|
|
||||||
const defaultExpandedKeys = ref([])
|
|
||||||
|
|
||||||
//选择教材
|
|
||||||
const changeBook = (data) => {
|
|
||||||
curBook.data = data
|
|
||||||
treeData.value = getTreeData(data.id)
|
|
||||||
//切换教材后默认展开第一个并选中
|
|
||||||
nextTick(() =>{
|
|
||||||
defaultExpandedKeys.value = [treeData.value[0].id]
|
|
||||||
curNode.data = getLastLevelData(treeData.value)[0]
|
|
||||||
handleNodeClick(curNode.data)
|
|
||||||
})
|
|
||||||
// 延迟关闭 视觉上选中
|
|
||||||
setTimeout(() => {
|
|
||||||
dialogVisible.value = false
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLastLevelData = (tree) => {
|
|
||||||
let lastLevelData = [];
|
|
||||||
// 递归函数遍历树形结构
|
|
||||||
function traverseTree(nodes) {
|
|
||||||
nodes.forEach((node) => {
|
|
||||||
// 如果当前节点有子节点,继续遍历
|
|
||||||
if (node.children && node.children.length > 0) {
|
|
||||||
traverseTree(node.children);
|
|
||||||
} else {
|
|
||||||
// 如果没有子节点,说明是最后一层的节点
|
|
||||||
lastLevelData.push(node);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 调用递归函数开始遍历
|
|
||||||
traverseTree(tree);
|
|
||||||
|
|
||||||
// 返回最后一层的数据
|
|
||||||
return lastLevelData;
|
|
||||||
}
|
|
||||||
// 根据id 拿到父节点数据
|
|
||||||
const findParentByChildId = (treeData, targetNodeId) => {
|
|
||||||
// 递归查找函数
|
|
||||||
// 遍历树中的每个节点
|
|
||||||
for (let node of treeData) {
|
|
||||||
// 检查当前节点的子节点是否包含目标子节点 ID
|
|
||||||
if (node.children && node.children.some(child => child.id === targetNodeId)) {
|
|
||||||
// 如果当前节点的某个子节点的 ID 匹配目标子节点 ID,则当前节点即为父节点
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
// 如果当前节点没有匹配的子节点,则递归检查当前节点的子节点
|
|
||||||
if (node.children) {
|
|
||||||
let parentNode = findParentByChildId(node.children, targetNodeId);
|
|
||||||
if (parentNode) {
|
|
||||||
return parentNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 如果未找到匹配的父节点,则返回 null 或者适当的默认值
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const handleNodeClick = (data) => {
|
|
||||||
/**
|
|
||||||
* data : 当前节点数据
|
|
||||||
*/
|
|
||||||
let nodeData = cloneDeep(toRaw(data));
|
|
||||||
|
|
||||||
//增加一个label 之前取的label
|
|
||||||
nodeData.label = nodeData.itemtitle
|
|
||||||
// 父级节点 如果当前是一级节点 父级则为null
|
|
||||||
let parent = {
|
|
||||||
id: nodeData.parentid,
|
|
||||||
label: nodeData.parenttitle,
|
|
||||||
itemtitle: nodeData.parenttitle
|
|
||||||
}
|
|
||||||
const parentNode = nodeData.parentid ? parent : null
|
|
||||||
nodeData.parentNode = parentNode
|
|
||||||
let curData = {
|
|
||||||
textBook: {
|
|
||||||
curBookId: curBook.data.id,
|
|
||||||
curBookName: curBook.data.itemtitle,
|
|
||||||
curBookImg: BaseUrl + curBook.data.avartar,
|
|
||||||
curBookPath: curBook.data.fileurl
|
|
||||||
},
|
|
||||||
node: nodeData
|
|
||||||
}
|
|
||||||
// 本地存储:electron-store
|
|
||||||
emit('nodeClick', curData)
|
|
||||||
}
|
|
||||||
// 单元章节数据转为“树”结构
|
|
||||||
const getTreeData = (bookId) =>{
|
|
||||||
// 根据当前教材的id 查找出对应的章节
|
|
||||||
let data = unitList.value.filter(item => item.rootid == bookId && item.level == 1)
|
|
||||||
data.forEach( item => {
|
|
||||||
item.children = unitList.value.filter( item2 => item2.parentid == item.id && item2.level == 2)
|
|
||||||
})
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
onMounted( async () => {
|
|
||||||
treeLoading.value = true
|
|
||||||
try{
|
|
||||||
//获取学科列表
|
|
||||||
const { rows } = await listEvaluation(subjectParams)
|
|
||||||
// 获取所有的教材
|
|
||||||
subjectList.value = rows
|
|
||||||
|
|
||||||
const res = await listEvaluation(unitParams)
|
|
||||||
unitList.value = [...res.rows]
|
|
||||||
// 当前教材
|
|
||||||
curBook.data = rows[0]
|
|
||||||
|
|
||||||
// 章节"树"rows
|
|
||||||
treeData.value = getTreeData(rows[0].id)
|
|
||||||
|
|
||||||
nextTick(() =>{
|
|
||||||
// 默认展开 选中
|
|
||||||
defaultExpandedKeys.value = [treeData.value[0].id]
|
|
||||||
curNode.data = getLastLevelData(treeData.value)[0]
|
|
||||||
handleNodeClick(curNode.data)
|
|
||||||
})
|
|
||||||
|
|
||||||
} finally{
|
|
||||||
treeLoading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.book-wrap {
|
|
||||||
width: 300px;
|
|
||||||
height: 100%;
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.book-name {
|
|
||||||
background-color: #ffffff;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 45px;
|
|
||||||
padding: 0 15px;
|
|
||||||
z-index: 1;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
color: #3b3b3b;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: solid #f4f5f7 1px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 10px 10px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-list {
|
|
||||||
padding: 45px 10px 0 10px;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.choose-dialog) {
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choose-book-header {
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
.icon-guanbi {
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.textbook-container {
|
|
||||||
.textbook-item {
|
|
||||||
padding: 10px 20px;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.book-name {
|
|
||||||
margin-left: 20px;
|
|
||||||
color: #3b3b3b;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f4f7f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-item {
|
|
||||||
background-color: #f4f7f9;
|
|
||||||
|
|
||||||
.book-name {
|
|
||||||
color: #368fff;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.textbook-img {
|
|
||||||
width: 55px;
|
|
||||||
height: 70px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tree-node) {
|
|
||||||
.el-tree-node__content {
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #eaf3ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-label {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
|
|
||||||
background-color: #eaf3ff !important;
|
|
||||||
color: #409EFF
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -57,31 +57,24 @@ export const resourceFormat = [
|
||||||
// 资源类型
|
// 资源类型
|
||||||
export const resourceType = [
|
export const resourceType = [
|
||||||
{
|
{
|
||||||
id:1,
|
|
||||||
label: '课例库',
|
label: '课例库',
|
||||||
value: "'apt','课件','教案'"
|
value: "'apt','课件','教案'"
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// label: '作业库',
|
label: '作业库',
|
||||||
// value: '作业',
|
value: '作业',
|
||||||
// disabled: true
|
disabled: true
|
||||||
// },
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
id:2,
|
|
||||||
label: '素材库',
|
label: '素材库',
|
||||||
value: "'素材'"
|
value: "'素材'"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id:3,
|
label: '习题库',
|
||||||
label: '实验室',
|
value: '习题',
|
||||||
value: "'素材'"
|
disabled: true
|
||||||
},
|
}
|
||||||
// {
|
|
||||||
// label: '习题库',
|
|
||||||
// value: '习题',
|
|
||||||
// disabled: true
|
|
||||||
// }
|
|
||||||
]
|
]
|
||||||
// 年级划分
|
// 年级划分
|
||||||
export const gradeList = [
|
export const gradeList = [
|
||||||
|
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<el-dialog v-model="model" class="preview-drawer" :title="row.fileShowName" :modal="true" :destroy-on-close="true" :with-header="false" :append-to-body="true"
|
|
||||||
width="60%">
|
|
||||||
<video style="margin: 0 auto;" :src="row.fileFullPath" controls autoplay></video>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
const model = defineModel()
|
|
||||||
const props = defineProps({
|
|
||||||
row: {
|
|
||||||
type: Object,
|
|
||||||
default(){
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.header-close {
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,214 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="page-resource flex">
|
|
||||||
<!-- 左侧 教材 目录 -->
|
|
||||||
<div class="page-right">
|
|
||||||
<!-- 排序 -->
|
|
||||||
<div style="margin-left: 5px;margin-top: 10px;height: 45px;">
|
|
||||||
<el-form size="large">
|
|
||||||
<el-form-item label="排序:">
|
|
||||||
<div
|
|
||||||
:class="['score-circle', { 'active': active == item.active }]"
|
|
||||||
v-for="(item,index) in screenList" :key="index" @click="chooseItem(item)">
|
|
||||||
<el-text
|
|
||||||
:style="{fontWeight:'bold', color: active == item.active ? 'rgb(57, 184, 244)':'rgb(131,131,131)' }"
|
|
||||||
size="large">{{ item.title }}</el-text>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<el-scrollbar>
|
|
||||||
<el-empty v-if="!sourceStore.result.list.length" description="暂无数据" />
|
|
||||||
<div class="list-content">
|
|
||||||
<div class="list-container" v-loading="loading">
|
|
||||||
<div v-for="(item, index) in sourceStore.result.list" :key="index" class="content">
|
|
||||||
<div class="content-list">
|
|
||||||
<!-- 封面 -->
|
|
||||||
<el-image style="width: 100%;border-radius: 8px;" :src="item.coverPic" fit="contain" @click="chooseVedio(item)"/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- 标题 -->
|
|
||||||
<div style="text-align: left;">
|
|
||||||
<el-text>{{ item.fileShowName }}</el-text>
|
|
||||||
</div>
|
|
||||||
<!-- 观看人数 -->
|
|
||||||
<!-- <div style="text-align: left;display: flex;align-items: center;">
|
|
||||||
<el-icon type="info"><View /></el-icon><el-text size="small" type="info">{{ item.nums }}</el-text>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
<div class="pagination-box">
|
|
||||||
<el-pagination
|
|
||||||
v-model:current-page="sourceStore.query.pageNum"
|
|
||||||
v-model:page-size="sourceStore.query.pageSize"
|
|
||||||
:page-sizes="[10, 20, 30, 50]"
|
|
||||||
background
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="sourceStore.result.total"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 播放视频 -->
|
|
||||||
<VideoLog v-model="isShow" :row="curRow"></VideoLog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import VideoLog from './components/VideoLog.vue'
|
|
||||||
import useResoureStore from '../store'
|
|
||||||
const sourceStore = useResoureStore()
|
|
||||||
// 排序列表
|
|
||||||
const screenList = ref([
|
|
||||||
{
|
|
||||||
title: '最新发布',
|
|
||||||
active: 1,
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const active = ref(1)
|
|
||||||
// 弹出视频
|
|
||||||
const isShow = ref(false)
|
|
||||||
const curRow = ref({})
|
|
||||||
// loading框
|
|
||||||
const loading = computed(() => sourceStore.loading)
|
|
||||||
const chooseItem = (item) => {
|
|
||||||
active.value = item.active
|
|
||||||
}
|
|
||||||
// 分页change
|
|
||||||
const handleSizeChange = (limit) => {
|
|
||||||
sourceStore.query.pageSize = limit
|
|
||||||
sourceStore.handleQuery()
|
|
||||||
}
|
|
||||||
const handleCurrentChange = (page) => {
|
|
||||||
sourceStore.query.pageNum = page
|
|
||||||
sourceStore.handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const chooseVedio = (item) => {
|
|
||||||
isShow.value = true
|
|
||||||
curRow.value = item
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.page-resource {
|
|
||||||
height: 100%;
|
|
||||||
padding: 10px 15px 0;
|
|
||||||
|
|
||||||
.page-right {
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.icon-jiahao {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 3px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.create-btn {
|
|
||||||
font-size: 13px;
|
|
||||||
padding: 5px 13px;
|
|
||||||
}
|
|
||||||
.list-content {
|
|
||||||
border-radius: 8px;
|
|
||||||
height: 90%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.list-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
border-radius: 8px;
|
|
||||||
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
width: calc(20%);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
padding: 5px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
// justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
// box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
.content-list{
|
|
||||||
height: 150px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-icon {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #409eff;
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-text {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #303133;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-bottom {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 过渡动画 */
|
|
||||||
.fade-enter-active, .fade-leave-active {
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter, .fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.score-circle {
|
|
||||||
background-color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 5px;
|
|
||||||
width: auto;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-circle.active {
|
|
||||||
background-color: rgb(218, 236, 255);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.pagination-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
height: 65px;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -3,21 +3,19 @@
|
||||||
<el-row justify="space-between">
|
<el-row justify="space-between">
|
||||||
<el-col :span="12" class="tab-btns flex">
|
<el-col :span="12" class="tab-btns flex">
|
||||||
<el-button text v-for="item in sourceStore.resourceTypeList" :key="item.id"
|
<el-button text v-for="item in sourceStore.resourceTypeList" :key="item.id"
|
||||||
:type="sourceStore.activeIndex == item.id ? 'primary' : ''"
|
:type="sourceStore.query.fileFlags == item.value ? 'primary' : ''"
|
||||||
@click="sourceStore.changeType(item)" :disabled="item.disabled">{{ item.label
|
@click="sourceStore.changeType(item.value)" :disabled="item.disabled">{{ item.label
|
||||||
}}</el-button>
|
}}</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<template v-if="!isExper">
|
<el-col :span="12" class="search-box flex" v-if="isThird">
|
||||||
<el-col :span="12" class="search-box flex" v-if="isThird">
|
<el-input v-model="sourceStore.thirdQuery.title" @input="onchangeInput()" style="width: 240px"
|
||||||
<el-input v-model="sourceStore.thirdQuery.title" @input="onchangeInput()" style="width: 240px"
|
placeholder="请输入关键词" />
|
||||||
placeholder="请输入关键词" />
|
</el-col>
|
||||||
</el-col>
|
<el-col :span="12" class="search-box flex" v-else>
|
||||||
<el-col :span="12" class="search-box flex" v-else>
|
<el-input v-model="sourceStore.query.fileName" @input="onchangeInput()" style="width: 240px"
|
||||||
<el-input v-model="sourceStore.query.fileName" @input="onchangeInput()" style="width: 240px"
|
placeholder="请输入关键词" />
|
||||||
placeholder="请输入关键词" />
|
</el-col>
|
||||||
</el-col>
|
|
||||||
</template>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<!-- 第三方资源筛选-->
|
<!-- 第三方资源筛选-->
|
||||||
|
@ -36,24 +34,22 @@
|
||||||
<el-col :span="24" class="query-row flex">
|
<el-col :span="24" class="query-row flex">
|
||||||
<div class="flex row-left">
|
<div class="flex row-left">
|
||||||
<!-- 第三方资源筛选-->
|
<!-- 第三方资源筛选-->
|
||||||
<template v-if="!isExper">
|
<el-select v-if="isThird" v-model="sourceStore.thirdQuery.type" @change="sourceStore.thirdChangeType"
|
||||||
<el-select v-if="isThird" v-model="sourceStore.thirdQuery.type" @change="sourceStore.thirdChangeType"
|
style="width: 110px">
|
||||||
style="width: 110px">
|
<el-option v-for="item in coursewareTypeList" :key="item.value" :label="item.label"
|
||||||
<el-option v-for="item in coursewareTypeList" :key="item.value" :label="item.label"
|
:value="item.value" />
|
||||||
:value="item.value" />
|
</el-select>
|
||||||
</el-select>
|
|
||||||
|
|
||||||
<el-select v-else v-model="sourceStore.query.fileSuffix" @change="sourceStore.changeSuffix"
|
<el-select v-else v-model="sourceStore.query.fileSuffix" @change="sourceStore.changeSuffix"
|
||||||
style="width: 110px">
|
style="width: 110px">
|
||||||
<el-option v-for="item in sourceStore.resourceFormatList" :key="item.value" :label="item.label"
|
<el-option v-for="item in sourceStore.resourceFormatList" :key="item.value" :label="item.label"
|
||||||
:value="item.value" />
|
:value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<el-button v-for="item in sourceStore.tabs" :key="item.id"
|
<el-button v-for="item in sourceStore.tabs" :key="item.id"
|
||||||
:type="sourceStore.query.fileSource == item.value ? 'primary' : ''"
|
:type="sourceStore.query.fileSource == item.value ? 'primary' : ''"
|
||||||
@click="sourceStore.changeTab(item.value)">{{
|
@click="sourceStore.changeTab(item.value)">{{
|
||||||
item.label }}</el-button>
|
item.label }}</el-button>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<slot name="add" />
|
<slot name="add" />
|
||||||
|
@ -67,10 +63,7 @@
|
||||||
import {watch,ref,onMounted} from 'vue'
|
import {watch,ref,onMounted} from 'vue'
|
||||||
import useResoureStore from '../store'
|
import useResoureStore from '../store'
|
||||||
import {coursewareTypeList} from '@/utils/resourceDict'
|
import {coursewareTypeList} from '@/utils/resourceDict'
|
||||||
// 是否是第三方资源
|
|
||||||
const isThird = ref(false)
|
const isThird = ref(false)
|
||||||
//判断是不是进入实验室
|
|
||||||
const isExper = ref(false)
|
|
||||||
const sourceStore = useResoureStore()
|
const sourceStore = useResoureStore()
|
||||||
// 防抖函数
|
// 防抖函数
|
||||||
const debounce = (fn, t) => {
|
const debounce = (fn, t) => {
|
||||||
|
@ -92,9 +85,6 @@ onMounted(() => {
|
||||||
watch(() => sourceStore.query.fileSource,() => {
|
watch(() => sourceStore.query.fileSource,() => {
|
||||||
sourceStore.query.fileSource === '第三方'?isThird.value = true:isThird.value = false
|
sourceStore.query.fileSource === '第三方'?isThird.value = true:isThird.value = false
|
||||||
})
|
})
|
||||||
watch(() => sourceStore.query.orderByColumn,() => {
|
|
||||||
sourceStore.query.orderByColumn === 'uploadTime'?isExper.value = true:isExper.value = false
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.resoure-search {
|
.resoure-search {
|
||||||
|
|
|
@ -1,14 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-resource flex">
|
<div class="page-resource flex">
|
||||||
<!--左侧 教材 目录-->
|
<!--左侧 教材 目录-->
|
||||||
<template v-if="!isExper">
|
<Third v-if="isThird" @node-click="getDataOther"></Third>
|
||||||
<Third v-if="isThird" @node-click="getDataOther"/>
|
<ChooseTextbook v-else @node-click="getData" />
|
||||||
<ChooseTextbook v-else @node-click="getData" />
|
|
||||||
</template>
|
|
||||||
<!-- 实验室的左侧树结构列表 -->
|
|
||||||
<template v-else>
|
|
||||||
<ExperimentBook @node-click="getExperData"/>
|
|
||||||
</template>
|
|
||||||
<div class="page-right">
|
<div class="page-right">
|
||||||
<!-- 搜索 -->
|
<!-- 搜索 -->
|
||||||
<ResoureSearch #add>
|
<ResoureSearch #add>
|
||||||
|
@ -24,14 +19,9 @@
|
||||||
>
|
>
|
||||||
</ResoureSearch>
|
</ResoureSearch>
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
<template v-if="!isExper">
|
<!-- 第三方列表-->
|
||||||
<!-- 第三方列表-->
|
<ThirdList v-if="isThird" />
|
||||||
<ThirdList v-if="isThird" />
|
<ResoureList v-else />
|
||||||
<ResoureList v-else />
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<ExperList/>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 上传弹窗 -->
|
<!-- 上传弹窗 -->
|
||||||
|
@ -43,12 +33,8 @@ import { onMounted, ref, toRaw,watch } from 'vue'
|
||||||
import useResoureStore from './store'
|
import useResoureStore from './store'
|
||||||
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
||||||
import Third from '@/components/choose-textbook/third.vue'
|
import Third from '@/components/choose-textbook/third.vue'
|
||||||
// 科学学科对应实验室
|
|
||||||
import ExperimentBook from '@/components/choose-textbook/experimentBook.vue'
|
|
||||||
import ResoureSearch from './container/resoure-search.vue'
|
import ResoureSearch from './container/resoure-search.vue'
|
||||||
import ResoureList from './container/resoure-list.vue'
|
import ResoureList from './container/resoure-list.vue'
|
||||||
// 实验列表
|
|
||||||
import ExperList from './container/exper-list.vue'
|
|
||||||
import ThirdList from './container/third-list.vue'
|
import ThirdList from './container/third-list.vue'
|
||||||
import uploadDialog from '@/components/upload-dialog/index.vue'
|
import uploadDialog from '@/components/upload-dialog/index.vue'
|
||||||
import uploaderState from '@/store/modules/uploader'
|
import uploaderState from '@/store/modules/uploader'
|
||||||
|
@ -62,8 +48,6 @@ const openDialog = () => {
|
||||||
}
|
}
|
||||||
//判断是否去查看第三方资源
|
//判断是否去查看第三方资源
|
||||||
const isThird = ref(false)
|
const isThird = ref(false)
|
||||||
//判断是不是进入实验室
|
|
||||||
const isExper = ref(false)
|
|
||||||
|
|
||||||
// 查询
|
// 查询
|
||||||
const getData = (data) => {
|
const getData = (data) => {
|
||||||
|
@ -89,7 +73,6 @@ const getData = (data) => {
|
||||||
// 头部 教材分析打开外部链接需要当前章节ID
|
// 头部 教材分析打开外部链接需要当前章节ID
|
||||||
localStorage.setItem('unitId', JSON.stringify({ levelFirstId, levelSecondId}))
|
localStorage.setItem('unitId', JSON.stringify({ levelFirstId, levelSecondId}))
|
||||||
}
|
}
|
||||||
// 查询第三方资源
|
|
||||||
const getDataOther = (data) => {
|
const getDataOther = (data) => {
|
||||||
sourceStore.thirdQuery.chapterId = data.chapterId
|
sourceStore.thirdQuery.chapterId = data.chapterId
|
||||||
sourceStore.thirdQuery.bookId = data.bookId
|
sourceStore.thirdQuery.bookId = data.bookId
|
||||||
|
@ -97,19 +80,6 @@ const getDataOther = (data) => {
|
||||||
sourceStore.thirdQuery.subjectId = data.subjectId
|
sourceStore.thirdQuery.subjectId = data.subjectId
|
||||||
sourceStore.handleQuery()
|
sourceStore.handleQuery()
|
||||||
}
|
}
|
||||||
// 查询科学实验室的资源
|
|
||||||
const getExperData = (data) => {
|
|
||||||
const { textBook, node } = data
|
|
||||||
if (node.parentNode) {
|
|
||||||
sourceStore.query.levelFirstId = node.parentNode.id
|
|
||||||
sourceStore.query.levelSecondId = node.id
|
|
||||||
} else {
|
|
||||||
sourceStore.query.levelFirstId = node.id
|
|
||||||
sourceStore.query.levelSecondId = ''
|
|
||||||
}
|
|
||||||
sourceStore.query.textbookId = node.rootid
|
|
||||||
sourceStore.handleQuery()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提交文件
|
// 提交文件
|
||||||
const submitFile = (data) => {
|
const submitFile = (data) => {
|
||||||
|
@ -138,15 +108,6 @@ onMounted(() => {
|
||||||
watch(() => sourceStore.query.fileSource,() => {
|
watch(() => sourceStore.query.fileSource,() => {
|
||||||
sourceStore.query.fileSource === '第三方'?isThird.value = true:isThird.value = false
|
sourceStore.query.fileSource === '第三方'?isThird.value = true:isThird.value = false
|
||||||
})
|
})
|
||||||
watch(() => sourceStore.query.orderByColumn,() => {
|
|
||||||
if(sourceStore.query.orderByColumn === 'uploadTime'){
|
|
||||||
isExper.value = true
|
|
||||||
sourceStore.getCreate()
|
|
||||||
}else{
|
|
||||||
isExper.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -77,7 +77,6 @@ export default defineStore('resource', {
|
||||||
list: [],
|
list: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
},
|
},
|
||||||
activeIndex:1
|
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
|
@ -120,16 +119,7 @@ export default defineStore('resource', {
|
||||||
this.handleQuery()
|
this.handleQuery()
|
||||||
},
|
},
|
||||||
changeType(val) {
|
changeType(val) {
|
||||||
// 实验列表
|
this.query.fileFlags = val
|
||||||
if(val.label === '实验室'){
|
|
||||||
this.query.orderByColumn = 'uploadTime'
|
|
||||||
this.query.fileSuffix = 'mp4'
|
|
||||||
}else{
|
|
||||||
this.query.orderByColumn = 'createTime'
|
|
||||||
this.query.fileSuffix = ''
|
|
||||||
}
|
|
||||||
this.query.fileFlags = val.value
|
|
||||||
this.activeIndex = val.id
|
|
||||||
this.handleQuery()
|
this.handleQuery()
|
||||||
},
|
},
|
||||||
thirdChangeType(val) {
|
thirdChangeType(val) {
|
||||||
|
@ -146,11 +136,7 @@ export default defineStore('resource', {
|
||||||
this.handleQuery()
|
this.handleQuery()
|
||||||
},
|
},
|
||||||
getCreate(){
|
getCreate(){
|
||||||
// 实验的时候也需要进入
|
if(this.query.fileSource == '平台' || this.query.fileSource == '第三方' ){
|
||||||
if((this.query.fileSource == '平台' || this.query.fileSource == '第三方') || this.query.orderByColumn == 'uploadTime' ){
|
|
||||||
if(this.query.orderByColumn == 'uploadTime'){
|
|
||||||
this.query.fileSource = '平台'
|
|
||||||
}
|
|
||||||
this.isCreate = hasPermission(['platformmanager'])
|
this.isCreate = hasPermission(['platformmanager'])
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
|
|
Loading…
Reference in New Issue