|
|
|
@ -1,18 +1,22 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="book-wrap">
|
|
|
|
|
<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="treeref" :data="treeData" :props="defaultProps" node-key="id"
|
|
|
|
|
:default-expanded-keys="defaultExpandedKeys"
|
|
|
|
|
:current-node-key="currentNode" highlight-current @node-click="handleNodeClick">
|
|
|
|
|
|
|
|
|
|
<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,10 +117,31 @@ 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 = [];
|
|
|
|
|
// 递归函数遍历树形结构
|
|
|
|
@ -137,7 +163,27 @@ const getLastLevelData = (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 = 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;
|
|
|
|
|
}
|
|
|
|
@ -290,5 +368,4 @@ onMounted(() => {
|
|
|
|
|
background-color: #d9e8fe !important;
|
|
|
|
|
color: #409EFF
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|