|
@@ -3,17 +3,18 @@
|
|
|
<vuescroll>
|
|
|
<el-tree :data="treeDatas" :props="defaultProps" :allow-drop="allowDrop" class="tree" node-key="id"
|
|
|
default-expand-all highlight-current @node-drop="handleDrop" @node-click="onNodeClick"
|
|
|
- :draggable="editable" :expand-on-click-node="false">
|
|
|
+ :draggable="editable" :expand-on-click-node="false" ref="tree">
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
<span class="tree-node-lable">
|
|
|
- {{data.title}}{{ data.id }}
|
|
|
- <Icon type="md-cube" title="有关联资源" v-if="data.rnodes && data.rnodes.length" />
|
|
|
+ {{data.title}}
|
|
|
+ <!-- {{data.id}} -->
|
|
|
+ <Icon type="md-cube" :title="$t('syllabus.tree.hasResource')" v-if="data.rnodes && data.rnodes.length" />
|
|
|
</span>
|
|
|
<span class="custom-tree-tools" v-if="editable">
|
|
|
- <Icon type="md-create" size="16" title="编辑" @click="onEditItem(node,data,$event)" />
|
|
|
- <Icon type="md-add" size="16" title="添加" @click="onAddNode(data,$event)" />
|
|
|
- <Icon type="md-remove" size="16" title="删除" @click="remove(node,data)" />
|
|
|
- <Icon type="md-share" v-if="isFirstLevel(data)" :title="isSchool ? '共编该章节' : '分享该章节'"
|
|
|
+ <Icon type="md-create" size="16" :title="$t('syllabus.tree.edit')" @click="onEditItem(node,data,$event)" />
|
|
|
+ <Icon type="md-add" size="16" :title="$t('syllabus.tree.add')" @click="onAddNode(node,data,$event)" />
|
|
|
+ <Icon type="md-remove" size="16" :title="$t('syllabus.tree.remove')" @click="remove(node,data)" />
|
|
|
+ <Icon type="md-share" v-if="isFirstLevel(data)" :title="isSchool ? $t('syllabus.tree.coEdit') : $t('syllabus.tree.share')"
|
|
|
@click="doShare(data)" />
|
|
|
</span>
|
|
|
</span>
|
|
@@ -22,15 +23,15 @@
|
|
|
|
|
|
<!-- 新增或者编辑弹窗 -->
|
|
|
<Modal v-model="isEditOrAdd" width="500" footer-hide class="tree-modal">
|
|
|
- <div class="modal-header" slot="header">{{ isEditItem ? '编辑节点':'新增节点'}}</div>
|
|
|
+ <div class="modal-header" slot="header">{{ isEditItem ? $t('syllabus.tree.editTitle'):$t('syllabus.tree.addTitle')}}</div>
|
|
|
<div class="modal-content">
|
|
|
- <p class="node-title">父节点</p>
|
|
|
+ <p class="node-title">{{ $t('syllabus.tree.parent') }}</p>
|
|
|
<Input v-model="nodeInfo.parent" style="width: 100%" disabled />
|
|
|
- <p class="node-title">节点名称</p>
|
|
|
- <Input v-model="nodeInfo.title" placeholder="请输入节点名称..." style="width: 100%" />
|
|
|
+ <p class="node-title">{{ $t('syllabus.tree.nodeName') }}</p>
|
|
|
+ <Input v-model="nodeInfo.title" :placeholder="$t('syllabus.tree.place1')" style="width: 100%" />
|
|
|
</div>
|
|
|
<Button @click="onSubmitNode" class="modal-btn"
|
|
|
- style="width: 88%;margin-left: 6%;margin-bottom: 20px;">确认</Button>
|
|
|
+ style="width: 88%;margin-left: 6%;margin-bottom: 20px;">{{ $t('syllabus.tree.confirm') }}</Button>
|
|
|
</Modal>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -69,6 +70,7 @@
|
|
|
currentResources: [],
|
|
|
currentItems: [],
|
|
|
curNode: null,
|
|
|
+ curData:null,
|
|
|
nodeInfo: {
|
|
|
id: null,
|
|
|
title: '',
|
|
@@ -82,10 +84,11 @@
|
|
|
pid: '',
|
|
|
code: '',
|
|
|
status: 1,
|
|
|
- parent: ''
|
|
|
+ parent: '',
|
|
|
+ rnodes:[]
|
|
|
},
|
|
|
- modifyIdArr: [],
|
|
|
- isSchool: false
|
|
|
+ isSchool: false,
|
|
|
+ flatArr:[]
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -93,9 +96,12 @@
|
|
|
},
|
|
|
methods: {
|
|
|
onNodeClick(data, node) {
|
|
|
- console.log(data, node)
|
|
|
- this.curNode = data
|
|
|
- this.$emit('onNodeClick', data)
|
|
|
+ this.curNode = node
|
|
|
+ this.curData = data
|
|
|
+ this.$emit('onNodeClick', {
|
|
|
+ data:data,
|
|
|
+ node:node
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
doShare(data) {
|
|
@@ -120,8 +126,8 @@
|
|
|
},
|
|
|
// 拖拽完成回调
|
|
|
handleDrop(draggingNode, dropNode, dropType) {
|
|
|
- this.modifyIdArr.push(draggingNode.data.pid)
|
|
|
- this.modifyIdArr.push(dropNode.data.pid)
|
|
|
+ this.$emit('addModifyId',this.getChapterIdById(draggingNode.data.id))
|
|
|
+ this.$emit('addModifyId',this.getChapterIdById(dropNode.data.id))
|
|
|
switch (dropType) {
|
|
|
case 'before':
|
|
|
draggingNode.data.pid = dropNode.data.pid
|
|
@@ -143,10 +149,8 @@
|
|
|
remove(node, data) {
|
|
|
let isFirstLevel = this.isFirstLevel(data)
|
|
|
this.$Modal.confirm({
|
|
|
- title: '删除节点',
|
|
|
- content: '<p>确认删除该节点?</p>',
|
|
|
- okText: '确认',
|
|
|
- cancelText: '取消',
|
|
|
+ title: this.$t('syllabus.tree.removeTitle'),
|
|
|
+ content: this.$t('syllabus.tree.removeConfirm'),
|
|
|
onOk: () => {
|
|
|
const parent = node.parent
|
|
|
const children = parent.data.children || parent.data
|
|
@@ -160,10 +164,10 @@
|
|
|
}).then(res => {
|
|
|
if (!res.error) {
|
|
|
if(res.code === 404){
|
|
|
- this.modifyIdArr = this.modifyIdArr.filter(i => i !== data.id)
|
|
|
+ this.$parent.modifyIdArr = this.$parent.modifyIdArr.filter(i => i !== data.id)
|
|
|
}
|
|
|
children.splice(index, 1)
|
|
|
- this.$Message.success('删除成功')
|
|
|
+ this.$Message.success(this.$t('syllabus.tree.removeSucTip'))
|
|
|
} else {
|
|
|
this.$Message.warning(res.error);
|
|
|
}
|
|
@@ -172,16 +176,16 @@
|
|
|
})
|
|
|
}else{
|
|
|
children.splice(index, 1)
|
|
|
- this.$Message.success('删除成功')
|
|
|
+ this.$Message.success(this.$t('syllabus.tree.removeSucTip'))
|
|
|
this.$parent.hasModify = true
|
|
|
- this.modifyIdArr.push(data.pid)
|
|
|
+ this.$emit('addModifyId',this.getChapterIdById(data.id))
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
// 点击添加展开弹窗
|
|
|
- onAddNode(data, e) {
|
|
|
+ onAddNode(node,data, e) {
|
|
|
e.stopPropagation() // 防止点击事件穿透到父层
|
|
|
this.isEditItem = false
|
|
|
this.isEditOrAdd = true
|
|
@@ -189,6 +193,7 @@
|
|
|
this.nodeInfo.parent = data.title
|
|
|
this.nodeInfo.id = data.id
|
|
|
this.nodeInfo.title = ''
|
|
|
+ this.curNode = node
|
|
|
},
|
|
|
|
|
|
// 编辑节点操作
|
|
@@ -200,12 +205,23 @@
|
|
|
this.nodeInfo.parent = node.parent.data.title || this.volume.name
|
|
|
this.nodeInfo.title = node.data.title
|
|
|
this.nodeInfo.id = node.data.id
|
|
|
+ this.curNode = node
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 根据节点获取它所在的章节信息 */
|
|
|
+ getChapterByNode(node){
|
|
|
+ console.log(node)
|
|
|
+ if(node.level === 1){
|
|
|
+ return node
|
|
|
+ }else{
|
|
|
+ return this.getChapterByNode(node.parent)
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
// 提交编辑或者新增
|
|
|
onSubmitNode() {
|
|
|
if (!this.nodeInfo.title) {
|
|
|
- this.$Message.warning('节点名称不能为空')
|
|
|
+ this.$Message.warning(this.$t('syllabus.tree.nodeNameTip'))
|
|
|
return
|
|
|
}
|
|
|
if (this.isEditItem) {
|
|
@@ -227,9 +243,46 @@
|
|
|
}
|
|
|
this.isEditOrAdd = false
|
|
|
this.$parent.hasModify = true
|
|
|
- this.modifyIdArr.push(this.nodeInfo.id)
|
|
|
- this.$Message.success(this.isEditItem ? '编辑成功' : '添加成功')
|
|
|
+ this.$emit('addModifyId',this.getChapterIdById(this.curData.id))
|
|
|
+ this.$Message.success(this.isEditItem ? this.$t('syllabus.tree.editSucTip') : this.$t('syllabus.tree.addSucTip'))
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 获取整个树的章节与子节点归属 */
|
|
|
+ getAllChild(arr){
|
|
|
+ let result = []
|
|
|
+ arr.forEach(item => {
|
|
|
+ result.push({
|
|
|
+ chapterId:item.id,
|
|
|
+ children:this.flatChildren(item.children)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.flatArr = result
|
|
|
},
|
|
|
+
|
|
|
+ /* 递归拉平所有children */
|
|
|
+ flatChildren(children){
|
|
|
+ let result = []
|
|
|
+ const fn = (source)=>{
|
|
|
+ source.forEach(i => {
|
|
|
+ result.push(i.id)
|
|
|
+ if(i.children.length){
|
|
|
+ fn(i.children)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ fn(children)
|
|
|
+ return result
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 根据某个节点ID换取它对应的章节ID */
|
|
|
+ getChapterIdById(id){
|
|
|
+ if(this.flatArr.map(i => i.chapterId).includes(id)){
|
|
|
+ return id
|
|
|
+ }else{
|
|
|
+ let targetChapter = this.flatArr.find(i => i.children.includes(id))
|
|
|
+ return targetChapter.chapterId
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
@@ -244,20 +297,8 @@
|
|
|
treeData: {
|
|
|
handler: function(n, o) {
|
|
|
// 以下为拼接树形数据以及册别数据
|
|
|
- console.log(n)
|
|
|
- // let charpterIds = this.volume.syllabusIds
|
|
|
- // let trees = []
|
|
|
- // try{
|
|
|
- // trees = charpterIds.map(i => {
|
|
|
- // let nodeObj = n.find(j => j.id === i)
|
|
|
- // return nodeObj.trees[0]
|
|
|
- // })
|
|
|
- // this.treeDatas = trees
|
|
|
-
|
|
|
- // }catch(e){
|
|
|
- // console.log(e)
|
|
|
- // }
|
|
|
this.treeDatas = n.map(i => i.trees[0])
|
|
|
+ this.getAllChild(this.treeDatas)
|
|
|
this.$nextTick().then(() => {
|
|
|
const firstNode = document.querySelector('.el-tree-node')
|
|
|
firstNode.click();
|
|
@@ -317,7 +358,7 @@
|
|
|
}
|
|
|
|
|
|
.tree /deep/ .el-tree-node:before {
|
|
|
- border-left: 1px dashed #343434;
|
|
|
+ border-left: 1px dashed #626262;
|
|
|
bottom: 0px;
|
|
|
height: 100%;
|
|
|
top: -20px;
|
|
@@ -325,7 +366,7 @@
|
|
|
}
|
|
|
|
|
|
.tree /deep/ .el-tree-node:after {
|
|
|
- border-top: 1px dashed #343434;
|
|
|
+ border-top: 1px dashed #626262;
|
|
|
height: 20px;
|
|
|
top: 20px;
|
|
|
width: 12px;
|