三方资源加入备课
This commit is contained in:
parent
5a1b95ea5d
commit
34fec10fc1
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "aix-win",
|
||||
"version": "2.5.1",
|
||||
"name": "aix-win-ws",
|
||||
"version": "2.5.3",
|
||||
"description": "",
|
||||
"main": "./out/main/index.js",
|
||||
"author": "上海交大重庆人工智能研究院",
|
||||
|
|
|
|||
|
|
@ -53,3 +53,14 @@ export const moveSmarttalk = (params) => {
|
|||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const addFileToPrepareThird = (data) => {
|
||||
return request({
|
||||
url: '/smarttalk/file/addFileToPrepareThird',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,308 @@
|
|||
<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 { sessionStore } from '@/utils/store'
|
||||
import { useGetSubject } from '@/hooks/useGetSubject'
|
||||
|
||||
const BaseUrl = import.meta.env.VITE_APP_BUILD_BASE_PATH
|
||||
// 定义要发送的emit事件
|
||||
const emit = defineEmits(['nodeClick', 'changeBook'])
|
||||
let useSubject = null
|
||||
const subjectList = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
// 当前教材下面单元内容数据
|
||||
const treeData = ref([])
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'itemtitle',
|
||||
class: 'textbook-tree'
|
||||
}
|
||||
// 当前选中的教材
|
||||
const curBook = reactive({
|
||||
data: {}
|
||||
})
|
||||
// 当前节点
|
||||
const curNode = reactive({
|
||||
data:{}
|
||||
})
|
||||
const treeLoading = ref(false)
|
||||
// 默认展开的节点
|
||||
const defaultExpandedKeys = ref([])
|
||||
|
||||
//选择教材
|
||||
const changeBook = (data) => {
|
||||
curBook.data = data
|
||||
treeData.value = useSubject.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)
|
||||
}
|
||||
onMounted( async () => {
|
||||
treeLoading.value = true
|
||||
try{
|
||||
useSubject = await useGetSubject()
|
||||
subjectList.value = sessionStore.get('subject.bookList')
|
||||
// 当前教材
|
||||
if(sessionStore.get('subject.curBook')){
|
||||
curBook.data = sessionStore.get('subject.curBook')
|
||||
}
|
||||
else{
|
||||
curBook.data = subjectList.value[0]
|
||||
}
|
||||
|
||||
// 章节"树"
|
||||
treeData.value = useSubject.getTreeData(curBook.data.id)
|
||||
|
||||
nextTick(() =>{
|
||||
// 默认展开 选中
|
||||
if(sessionStore.get('subject.curNode')){
|
||||
defaultExpandedKeys.value = sessionStore.get('subject.defaultExpandedKeys')
|
||||
curNode.data = sessionStore.get('subject.curNode')
|
||||
}else{
|
||||
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>
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div style="padding: 10px;">
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
width="350"
|
||||
append-to-body
|
||||
>
|
||||
<div style="display: flex;justify-content: center;">
|
||||
<ChooseTextbook @node-click="nodeClick" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click.stop="save">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineExpose,defineEmits } from 'vue'
|
||||
import ChooseTextbook from './chooseTextbook.vue'
|
||||
const emit = defineEmits(['onsuccess'])
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const getNodeInfo = ref({})
|
||||
|
||||
const openDialog = () => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const getFullObj = (node) => {
|
||||
const obj = []
|
||||
const recursive = (currentNode) => {
|
||||
// 这里添加节点参数
|
||||
if (currentNode.parentNode) {
|
||||
obj.unshift({id: currentNode.id,title:currentNode.itemtitle})
|
||||
recursive(currentNode.parentNode)
|
||||
} else {
|
||||
obj.unshift({id: currentNode.id,title:currentNode.itemtitle})
|
||||
}
|
||||
}
|
||||
recursive(node)
|
||||
return obj
|
||||
}
|
||||
|
||||
const nodeClick = (data) => {
|
||||
getNodeInfo.value = {
|
||||
textbookId:data.node.rootid,
|
||||
cataList:getFullObj(data.node)
|
||||
}
|
||||
console.log(getNodeInfo.value,'log')
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
dialogVisible.value = false
|
||||
emit('onsuccess', getNodeInfo.value)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openDialog
|
||||
})
|
||||
</script>
|
||||
|
|
@ -50,6 +50,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button v-loading="item.loading" size="small" plain round type="primary" @click.stop="openChapter(item)">
|
||||
<i class="iconfont icon-jiahao"></i>
|
||||
备课</el-button
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
|
|
@ -66,17 +70,20 @@
|
|||
/>
|
||||
</div>
|
||||
<FilePreview ref="thirdPreview" v-model="isViewImg"></FilePreview>
|
||||
<TreeLog ref="treelogRef" @onsuccess="addToPrepare"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
// import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Clock,View,Folder,Search } from '@element-plus/icons-vue'
|
||||
import FileImage from '@/components/file-image/index.vue'
|
||||
import FilePreview from '@/components/thirdFile-preview/index.vue'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import useResoureStore from '../store'
|
||||
import { addFileToPrepareThird } from '@/api/file'
|
||||
import TreeLog from '@/views/prepare/components/treeLog.vue'
|
||||
|
||||
const userstore = useUserStore()
|
||||
const sourceStore = useResoureStore()
|
||||
|
|
@ -85,6 +92,9 @@ const sourceStore = useResoureStore()
|
|||
//判断是否预览图片
|
||||
const isViewImg = ref(false)
|
||||
const thirdPreview = ref()
|
||||
const treelogRef = ref()
|
||||
const currentItem = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
// 分页change
|
||||
const handleSizeChange = (limit) => {
|
||||
|
|
@ -114,6 +124,31 @@ const handleRow = (item) => {
|
|||
isViewImg.value = true
|
||||
thirdPreview.value.init(item.itemId)
|
||||
}
|
||||
const openChapter = (item)=>{
|
||||
currentItem.value = item
|
||||
// 打开弹窗
|
||||
treelogRef.value.openDialog()
|
||||
}
|
||||
const addToPrepare = (data) => {
|
||||
console.log(data)
|
||||
let chapterArr = []
|
||||
for (let i = 0; i < data.cataList.length; i++) {
|
||||
chapterArr.push({id: data.cataList[i].id,name: data.cataList[i].title})
|
||||
}
|
||||
let postData = {
|
||||
itemId: currentItem.value.itemId,
|
||||
textBookId: data.textbookId,
|
||||
chapter: JSON.stringify(chapterArr)
|
||||
}
|
||||
currentItem.value.loading = true
|
||||
addFileToPrepareThird(postData).then((res) => {
|
||||
currentItem.value.loading = false
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("加入备课成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue