教材change
This commit is contained in:
parent
3b983393c7
commit
0cac6ef996
|
|
@ -1,18 +1,22 @@
|
|||
<template>
|
||||
<div class="book-wrap">
|
||||
<div class="book-name flex" @click="dialogVisible = true">
|
||||
<span>{{ curBookName }}</span>
|
||||
<i class="iconfont icon-xiangyou"></i>
|
||||
</div>
|
||||
<div class="book-list">
|
||||
<el-tree ref="treeref" :data="treeData" :props="defaultProps" node-key="id"
|
||||
:default-expanded-keys="defaultExpandedKeys"
|
||||
:current-node-key="currentNode" highlight-current @node-click="handleNodeClick">
|
||||
<template #default="{ node }">
|
||||
<span :title="node.label" class="tree-label">{{ node.label }}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<el-scrollbar height="100%">
|
||||
<div class="book-name flex" @click="dialogVisible = true">
|
||||
<span>{{ curBookName }}</span>
|
||||
<i class="iconfont icon-xiangyou"></i>
|
||||
</div>
|
||||
<div class="book-list">
|
||||
|
||||
<el-tree ref="refTree" :data="treeData" :props="defaultProps" node-key="id"
|
||||
:default-expanded-keys="defaultExpandedKeys" :current-node-key="currentNode" 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"
|
||||
|
|
@ -37,12 +41,12 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, nextTick } from 'vue';
|
||||
import { onMounted, ref, nextTick, toRaw } from 'vue';
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { listEvaluation } from '@/api/subject'
|
||||
|
||||
// 定义要发送的emit事件
|
||||
const emit = defineEmits(['nodeClick'])
|
||||
const emit = defineEmits(['nodeClick', 'changeBook'])
|
||||
// store
|
||||
const userStore = useUserStore()
|
||||
const { edustage, edusubject, userId } = userStore.user
|
||||
|
|
@ -65,12 +69,14 @@ const curBookName = ref('')
|
|||
const volumeOne = ref([])
|
||||
// 下册
|
||||
const volumeTwo = ref([])
|
||||
// 当前选中的节点
|
||||
// 当前选中的节点ID
|
||||
const currentNode = ref(0)
|
||||
// 当前选中的节点名称
|
||||
const currentNodeName = ref('')
|
||||
// 默认展开的节点
|
||||
const defaultExpandedKeys = ref([])
|
||||
// tree
|
||||
const treeref = ref(null)
|
||||
const refTree = ref(null)
|
||||
|
||||
|
||||
//获取教材下面的单元内容
|
||||
|
|
@ -101,7 +107,6 @@ const changeBook = ({ id, itemtitle }) => {
|
|||
setTimeout(() => {
|
||||
dialogVisible.value = false
|
||||
}, 100);
|
||||
|
||||
}
|
||||
|
||||
const getTreeData = () => {
|
||||
|
|
@ -112,32 +117,73 @@ const getTreeData = () => {
|
|||
defaultExpandedKeys.value = [treeData.value[0].id]
|
||||
nextTick(() => {
|
||||
currentNode.value = getLastLevelData(treeData.value)[0].id
|
||||
currentNodeName.value = getLastLevelData(treeData.value)[0].label
|
||||
emitChangeBook()
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
const emitChangeBook = () => {
|
||||
let curNode = {
|
||||
id: currentNode.value,
|
||||
label: currentNodeName.value
|
||||
}
|
||||
let parentNode = findParentByChildId(treeData.value, currentNode.value)
|
||||
curNode.parentNode = toRaw(parentNode)
|
||||
|
||||
const data = {
|
||||
textBook: {
|
||||
curBookId: curBookId.value,
|
||||
curBookName: curBookName.value
|
||||
},
|
||||
node: curNode
|
||||
}
|
||||
emit('changeBook', data)
|
||||
}
|
||||
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
// 递归函数遍历树形结构
|
||||
function traverseTree(nodes) {
|
||||
nodes.forEach((node) => {
|
||||
// 如果当前节点有子节点，继续遍历
|
||||
if (node.children && node.children.length > 0) {
|
||||
traverseTree(node.children);
|
||||
} else {
|
||||
// 如果没有子节点，说明是最后一层的节点
|
||||
lastLevelData.push(node);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 调用递归函数开始遍历
|
||||
traverseTree(tree);
|
||||
// 调用递归函数开始遍历
|
||||
traverseTree(tree);
|
||||
|
||||
// 返回最后一层的数据
|
||||
return lastLevelData;
|
||||
// 返回最后一层的数据
|
||||
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 = findParentNode(node.children, targetNodeId);
|
||||
if (parentNode) {
|
||||
return parentNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 如果未找到匹配的父节点，则返回 null 或者适当的默认值
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
const transData = (data) => {
|
||||
let ary = []
|
||||
|
|
@ -170,6 +216,7 @@ const transData = (data) => {
|
|||
const getSubject = async () => {
|
||||
const { rows } = await listEvaluation({ itemkey: "version", pageSize: 500 })
|
||||
subjectList.value = rows.filter(item => item.edustage == edustage && item.edusubject == edusubject && isHaveUnit(item.id))
|
||||
// 默认第一个
|
||||
curBookName.value = subjectList.value[0].itemtitle
|
||||
curBookId.value = subjectList.value[0].id
|
||||
}
|
||||
|
|
@ -182,8 +229,32 @@ const isHaveUnit = (id) => {
|
|||
}
|
||||
|
||||
|
||||
const handleNodeClick = (data) => {
|
||||
emit('nodeClick', data)
|
||||
const handleNodeClick = (data, node) => {
|
||||
/**
|
||||
* data : 当前节点数据
|
||||
* node : 当前节点对象 包含当前节点所有数据 parent属性 指向父节点Node对象
|
||||
*/
|
||||
const currentNode = data;
|
||||
const parentNode = node.parent.data;
|
||||
|
||||
if (Array.isArray(parentNode)) {
|
||||
let node = parentNode.filter(item => item.id == currentNode.id)
|
||||
currentNode.parentNode = { ...(node[0]) }
|
||||
}
|
||||
else {
|
||||
currentNode.parentNode = parentNode
|
||||
}
|
||||
|
||||
let curData = {
|
||||
textBook: {
|
||||
curBookId: curBookId.value,
|
||||
curBookName: curBookName.value
|
||||
},
|
||||
node: toRaw(currentNode)
|
||||
}
|
||||
|
||||
emit('nodeClick', curData)
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -193,7 +264,6 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.book-wrap {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
|
|
@ -202,10 +272,17 @@ onMounted(() => {
|
|||
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;
|
||||
|
|
@ -216,6 +293,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.book-list {
|
||||
padding-top: 45px;
|
||||
padding-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -286,9 +364,8 @@ onMounted(() => {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
|
||||
background-color: #d9e8fe !important;
|
||||
color: #409EFF
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -49,8 +49,8 @@ const openDialog = ()=>{
|
|||
}
|
||||
|
||||
const submitFile = (fileList)=>{
|
||||
console.log(toRaw(fileList))
|
||||
uploaderState().pushFile(toRaw(fileList))
|
||||
// console.log(toRaw(fileList))
|
||||
// uploaderState().pushFile(toRaw(fileList))
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="page-resource flex">
|
||||
<ChooseTextbook @nodeClick="nodeClick" />
|
||||
<ChooseTextbook @changeBook="changeBook" @nodeClick="nodeClick" />
|
||||
|
||||
<div class="page-right">
|
||||
<template v-if="!sourceStore.isCreate">
|
||||
|
|
@ -15,7 +15,6 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { toRaw } from 'vue'
|
||||
import useResoureStore from './store'
|
||||
import ChooseTextbook from '@/components/choose-textbook/index.vue'
|
||||
import ResoureSearch from './container/resoure-search.vue'
|
||||
|
|
@ -27,9 +26,14 @@ const { ipcRenderer } = window.electron || {}
|
|||
// ipcRenderer.send('set-winsize',{x:1100,y: 700})
|
||||
|
||||
const nodeClick = (data) => {
|
||||
console.log(toRaw(data))
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const changeBook = (data) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue