Merge pull request '教材change' (#20) from lyc-dev into main

This commit is contained in:
lyc 2024-07-15 15:22:48 +08:00
commit 6308d72267
3 changed files with 126 additions and 45 deletions

View File

@ -1,18 +1,22 @@
<template> <template>
<div class="book-wrap"> <div class="book-wrap">
<div class="book-name flex" @click="dialogVisible = true"> <el-scrollbar height="100%">
<span>{{ curBookName }}</span> <div class="book-name flex" @click="dialogVisible = true">
<i class="iconfont icon-xiangyou"></i> <span>{{ curBookName }}</span>
</div> <i class="iconfont icon-xiangyou"></i>
<div class="book-list"> </div>
<el-tree ref="treeref" :data="treeData" :props="defaultProps" node-key="id" <div class="book-list">
:default-expanded-keys="defaultExpandedKeys"
:current-node-key="currentNode" highlight-current @node-click="handleNodeClick"> <el-tree ref="refTree" :data="treeData" :props="defaultProps" node-key="id"
<template #default="{ node }"> :default-expanded-keys="defaultExpandedKeys" :current-node-key="currentNode" highlight-current
<span :title="node.label" class="tree-label">{{ node.label }}</span> @node-click="handleNodeClick">
</template> <template #default="{ node }">
</el-tree> <span :title="node.label" class="tree-label">{{ node.label }}</span>
</div> </template>
</el-tree>
</div>
</el-scrollbar>
</div> </div>
<!--弹窗 选择教材--> <!--弹窗 选择教材-->
<el-dialog v-model="dialogVisible" append-to-body :show-close="false" width="550" <el-dialog v-model="dialogVisible" append-to-body :show-close="false" width="550"
@ -37,12 +41,12 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, nextTick } from 'vue'; import { onMounted, ref, nextTick, toRaw } from 'vue';
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import { listEvaluation } from '@/api/subject' import { listEvaluation } from '@/api/subject'
// emit // emit
const emit = defineEmits(['nodeClick']) const emit = defineEmits(['nodeClick', 'changeBook'])
// store // store
const userStore = useUserStore() const userStore = useUserStore()
const { edustage, edusubject, userId } = userStore.user const { edustage, edusubject, userId } = userStore.user
@ -65,12 +69,14 @@ const curBookName = ref('')
const volumeOne = ref([]) const volumeOne = ref([])
// //
const volumeTwo = ref([]) const volumeTwo = ref([])
// // ID
const currentNode = ref(0) const currentNode = ref(0)
//
const currentNodeName = ref('')
// //
const defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
// tree // tree
const treeref = ref(null) const refTree = ref(null)
// //
@ -101,7 +107,6 @@ const changeBook = ({ id, itemtitle }) => {
setTimeout(() => { setTimeout(() => {
dialogVisible.value = false dialogVisible.value = false
}, 100); }, 100);
} }
const getTreeData = () => { const getTreeData = () => {
@ -112,33 +117,74 @@ const getTreeData = () => {
defaultExpandedKeys.value = [treeData.value[0].id] defaultExpandedKeys.value = [treeData.value[0].id]
nextTick(() => { nextTick(() => {
currentNode.value = getLastLevelData(treeData.value)[0].id currentNode.value = getLastLevelData(treeData.value)[0].id
currentNodeName.value = getLastLevelData(treeData.value)[0].label
emitChangeBook()
}) })
} }
const getLastLevelData = (tree) => { const emitChangeBook = () => {
let lastLevelData = []; let curNode = {
// id: currentNode.value,
function traverseTree(nodes) { label: currentNodeName.value
nodes.forEach((node) => { }
// let parentNode = findParentByChildId(treeData.value, currentNode.value)
if (node.children && node.children.length > 0) { curNode.parentNode = toRaw(parentNode)
traverseTree(node.children);
} else {
//
lastLevelData.push(node);
}
});
}
// const data = {
traverseTree(tree); textBook: {
curBookId: curBookId.value,
// curBookName: curBookName.value
return lastLevelData; },
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);
}
});
}
//
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 = findParentNode(node.children, targetNodeId);
if (parentNode) {
return parentNode;
}
}
}
// null
return null;
}
const transData = (data) => { const transData = (data) => {
let ary = [] let ary = []
@ -170,6 +216,7 @@ const transData = (data) => {
const getSubject = async () => { const getSubject = async () => {
const { rows } = await listEvaluation({ itemkey: "version", pageSize: 500 }) const { rows } = await listEvaluation({ itemkey: "version", pageSize: 500 })
subjectList.value = rows.filter(item => item.edustage == edustage && item.edusubject == edusubject && isHaveUnit(item.id)) subjectList.value = rows.filter(item => item.edustage == edustage && item.edusubject == edusubject && isHaveUnit(item.id))
//
curBookName.value = subjectList.value[0].itemtitle curBookName.value = subjectList.value[0].itemtitle
curBookId.value = subjectList.value[0].id curBookId.value = subjectList.value[0].id
} }
@ -182,8 +229,32 @@ const isHaveUnit = (id) => {
} }
const handleNodeClick = (data) => { const handleNodeClick = (data, node) => {
emit('nodeClick', data) /**
* 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(() => { onMounted(() => {
@ -193,7 +264,6 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.book-wrap { .book-wrap {
width: 300px; width: 300px;
height: 100%; height: 100%;
@ -202,10 +272,17 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06); box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
.book-name { .book-name {
background-color: #ffffff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 45px; height: 45px;
padding: 0 15px; padding: 0 15px;
z-index: 1;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: #3b3b3b; color: #3b3b3b;
@ -216,6 +293,7 @@ onMounted(() => {
} }
.book-list { .book-list {
padding-top: 45px;
padding-left: 10px; padding-left: 10px;
flex: 1; flex: 1;
} }
@ -286,9 +364,8 @@ onMounted(() => {
text-overflow: ellipsis; 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; background-color: #d9e8fe !important;
color: #409EFF color: #409EFF
} }
</style> </style>

View File

@ -49,8 +49,8 @@ const openDialog = ()=>{
} }
const submitFile = (fileList)=>{ const submitFile = (fileList)=>{
console.log(toRaw(fileList)) // console.log(toRaw(fileList))
uploaderState().pushFile(toRaw(fileList)) // uploaderState().pushFile(toRaw(fileList))
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page-resource flex"> <div class="page-resource flex">
<ChooseTextbook @nodeClick="nodeClick" /> <ChooseTextbook @changeBook="changeBook" @nodeClick="nodeClick" />
<div class="page-right"> <div class="page-right">
<template v-if="!sourceStore.isCreate"> <template v-if="!sourceStore.isCreate">
@ -15,7 +15,6 @@
</template> </template>
<script setup> <script setup>
import { toRaw } 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 ResoureSearch from './container/resoure-search.vue' import ResoureSearch from './container/resoure-search.vue'
@ -27,9 +26,14 @@ const { ipcRenderer } = window.electron || {}
// ipcRenderer.send('set-winsize',{x:1100,y: 700}) // ipcRenderer.send('set-winsize',{x:1100,y: 700})
const nodeClick = (data) => { const nodeClick = (data) => {
console.log(toRaw(data)) console.log(data)
} }
const changeBook = (data) => {
console.log(data)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>