add:添加实验室; #154

Merged
yangws merged 1 commits from yws_dev into main 2024-12-19 17:27:54 +08:00
7 changed files with 684 additions and 42 deletions

View File

@ -0,0 +1,333 @@
<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>

View File

@ -57,24 +57,31 @@ 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: "'素材'"
}, },
{ {
label: '习题库', id:3,
value: '习题', label: '实验室',
disabled: true value: "'素材'"
} },
// {
// label: '习题库',
// value: '习题',
// disabled: true
// }
] ]
// 年级划分 // 年级划分
export const gradeList = [ export const gradeList = [

View File

@ -0,0 +1,25 @@
<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>

View File

@ -0,0 +1,214 @@
<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>

View File

@ -3,11 +3,12 @@
<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.query.fileFlags == item.value ? 'primary' : ''" :type="sourceStore.activeIndex == item.id ? 'primary' : ''"
@click="sourceStore.changeType(item.value)" :disabled="item.disabled">{{ item.label @click="sourceStore.changeType(item)" :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="请输入关键词" />
@ -16,6 +17,7 @@
<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>
<!-- 第三方资源筛选--> <!-- 第三方资源筛选-->
@ -34,6 +36,7 @@
<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"
@ -50,6 +53,7 @@
: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" />
@ -63,7 +67,10 @@
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) => {
@ -85,6 +92,9 @@ 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 {

View File

@ -1,9 +1,14 @@
<template> <template>
<div class="page-resource flex"> <div class="page-resource flex">
<!--左侧 教材 目录--> <!--左侧 教材 目录-->
<Third v-if="isThird" @node-click="getDataOther"></Third> <template v-if="!isExper">
<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>
@ -19,9 +24,14 @@
> >
</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>
<!-- 上传弹窗 --> <!-- 上传弹窗 -->
@ -33,8 +43,12 @@ 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'
@ -48,6 +62,8 @@ const openDialog = () => {
} }
// //
const isThird = ref(false) const isThird = ref(false)
//
const isExper = ref(false)
// //
const getData = (data) => { const getData = (data) => {
@ -73,6 +89,7 @@ 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
@ -80,6 +97,19 @@ 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) => {
@ -108,6 +138,15 @@ 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>

View File

@ -77,6 +77,7 @@ export default defineStore('resource', {
list: [], list: [],
total: 0, total: 0,
}, },
activeIndex:1
}), }),
actions: { actions: {
handleQuery() { handleQuery() {
@ -119,7 +120,16 @@ 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) {
@ -136,7 +146,11 @@ 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{