课纲结构调整拖拽调整以及保存机制调整

TEAMModelOS/ClientApp/src/components/syllabus/DragTree.vue

@@ -1,18 +1,20 @@
 <template>
 	<div class="syllabus-tree-main">
 		<vuescroll>
-			<el-tree :data="treeDatas" :props="defaultProps" class="tree" node-key="id"  default-expand-all highlight-current
-				@node-drop="handleDrop" @node-click="onNodeClick" :draggable="editable" :expand-on-click-node="false">
+			<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">
 				<span class="custom-tree-node" slot-scope="{ node, data }">
 					<span class="tree-node-lable">
-						{{data.title}}
-						<Icon type="md-cube" title="有关联资源" v-if="data.rnodes && data.rnodes.length"/>
+						{{data.title}}{{ data.id }}
+						<Icon type="md-cube" title="有关联资源" 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.pid)" @click="doShare(data)"/>
+						<Icon type="md-share" v-if="isFirstLevel(data)" :title="isSchool ? '共编该章节' : '分享该章节'"
+							@click="doShare(data)" />
 					</span>
 				</span>
 			</el-tree>
@@ -27,7 +29,8 @@
 				<p class="node-title">节点名称</p>
 				<Input v-model="nodeInfo.title" placeholder="请输入节点名称..." style="width: 100%" />
 			</div>
-			<Button @click="onSubmitNode" class="modal-btn" style="width: 88%;margin-left: 6%;margin-bottom: 20px;">确认</Button>
+			<Button @click="onSubmitNode" class="modal-btn"
+				style="width: 88%;margin-left: 6%;margin-bottom: 20px;">确认</Button>
 		</Modal>
 	</div>
 </template>
@@ -65,7 +68,7 @@
 				currentParentData: null,
 				currentResources: [],
 				currentItems: [],
-				curNode:null,
+				curNode: null,
 				nodeInfo: {
 					id: null,
 					title: '',
@@ -80,21 +83,45 @@
 					code: '',
 					status: 1,
 					parent: ''
-				}
+				},
+				modifyIdArr: [],
+				isSchool: false
 			}
 		},
+		created() {
+			this.isSchool = this.$route.name === 'syllabus'
+		},
 		methods: {
 			onNodeClick(data, node) {
 				console.log(data, node)
 				this.curNode = data
-				this.$emit('onNodeClick',data)
+				this.$emit('onNodeClick', data)
+			},
+
+			doShare(data) {
+				this.$emit('doShare', data)
 			},
 			
-			doShare(data){
-				this.$emit('doShare',data)
+			/* 禁止一级节点往下级进行拖拽 */
+			allowDrop(draggingNode, dropNode, dropType) {
+				if (draggingNode.level === dropNode.level) {
+					if(draggingNode.level === 1){
+						return dropType === 'prev' || dropType === 'after'
+					}else{
+						return dropType === 'prev' || dropType === 'after' ||  dropType === 'inner'
+					}
+				} else {
+					// 如果是二三级拖到其他级别 则正常拖拽 但是不能拖到第一级
+					if(draggingNode.level !== 1 && dropNode.level !== 1){
+						return dropType === 'prev' || dropType === 'after' ||  dropType === 'inner'
+					}
+					
+				}
 			},
 			// 拖拽完成回调
 			handleDrop(draggingNode, dropNode, dropType) {
+				this.modifyIdArr.push(draggingNode.data.pid)
+				this.modifyIdArr.push(dropNode.data.pid)
 				switch (dropType) {
 					case 'before':
 						draggingNode.data.pid = dropNode.data.pid
@@ -109,10 +136,12 @@
 						break
 				}
 				this.$parent.hasModify = true
+
 			},
 
 			// 删除节点操作
 			remove(node, data) {
+				let isFirstLevel = this.isFirstLevel(data)
 				this.$Modal.confirm({
 					title: '删除节点',
 					content: '<p>确认删除该节点？</p>',
@@ -122,9 +151,31 @@
 						const parent = node.parent
 						const children = parent.data.children || parent.data
 						const index = children.findIndex(d => d.id === data.id)
-						children.splice(index, 1)
-						this.$Message.success('删除成功')
-						this.$parent.hasModify = true
+						// 如果是删除的第一层的节点 则直接访问API进行删除 如果不是 则记录子节点的PID
+						if(isFirstLevel){
+							this.$api.syllabus.DeleteTree({
+								id:data.id,
+								code:this.volume.id,
+								scope:this.volume.scope
+							}).then(res => {
+								if (!res.error) {
+									if(res.code === 404){
+										this.modifyIdArr  = this.modifyIdArr.filter(i => i !== data.id)
+									}
+									children.splice(index, 1)
+									this.$Message.success('删除成功')
+								} else {
+									this.$Message.warning(res.error);
+								}
+							}).catch(err => {
+								this.$Message.error(err);
+							})
+						}else{
+							children.splice(index, 1)
+							this.$Message.success('删除成功')
+							this.$parent.hasModify = true
+							this.modifyIdArr.push(data.pid)
+						}
 					}
 				})
 			},
@@ -134,9 +185,9 @@
 				e.stopPropagation() // 防止点击事件穿透到父层
 				this.isEditItem = false
 				this.isEditOrAdd = true
-
 				this.currentParentData = data // 当前点击节点即为父节点
 				this.nodeInfo.parent = data.title
+				this.nodeInfo.id = data.id
 				this.nodeInfo.title = ''
 			},
 
@@ -145,10 +196,10 @@
 				e.stopPropagation() // 防止点击事件穿透到父层
 				this.isEditOrAdd = true
 				this.isEditItem = true
-
 				this.currentEditData = data
 				this.nodeInfo.parent = node.parent.data.title || this.volume.name
 				this.nodeInfo.title = node.data.title
+				this.nodeInfo.id = node.data.id
 			},
 
 			// 提交编辑或者新增
@@ -176,14 +227,15 @@
 				}
 				this.isEditOrAdd = false
 				this.$parent.hasModify = true
+				this.modifyIdArr.push(this.nodeInfo.id)
 				this.$Message.success(this.isEditItem ? '编辑成功' : '添加成功')
 			},
 
 		},
-		computed:{
-			isFirstLevel(){
-				return pid => {
-					return pid === this.volume.id
+		computed: {
+			isFirstLevel() {
+				return data => {
+					return data.pid === this.volume.id
 				}
 			},
 		},
@@ -192,21 +244,24 @@
 			treeData: {
 				handler: function(n, o) {
 					// 以下为拼接树形数据以及册别数据
-					// let defaultTree = []
-					// let volumeParent = {
-					//     title: this.volume.name,
-					//     id: this.volume.id,
-					//     code: this.volume.code,
-					//     pid: 'Root',
-					//     children: []
+					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)
 					// }
-					// volumeParent.children = n
-					// defaultTree.push(volumeParent)
-					this.treeDatas = n
-					this.$nextTick().then(() =>{
+					this.treeDatas = n.map(i => i.trees[0])
+					this.$nextTick().then(() => {
 						const firstNode = document.querySelector('.el-tree-node')
 						firstNode.click();
-					  })
+					})
 				},
 				immediate: true
 			},

TEAMModelOS/ClientApp/src/locale/lang/zh-CN/index.js

@@ -32,6 +32,7 @@ import http from './http'
 import utils from './utils'
 import knowledge from './knowledge'
 import task from './task'
+import syllabus from './syllabus'
 export default {
   schoolBaseInfo,
   classMgmt,
@@ -67,6 +68,7 @@ export default {
   utils,
   knowledge,
   task,
+  syllabus,
   test: '测试',
   formConfigP: {
     input: '请输入',

TEAMModelOS/ClientApp/src/locale/lang/zh-CN/syllabus.js

@@ -0,0 +1,3 @@
+export default{
+    
+}

TEAMModelOS/ClientApp/src/locale/lang/zh-TW/index.js

@@ -32,6 +32,7 @@ import http from './http'
 import utils from './utils'
 import knowledge from './knowledge'
 import task from './task'
+import syllabus from './syllabus'
 export default {
   
   schoolBaseInfo,
@@ -68,6 +69,7 @@ export default {
   utils,
   knowledge,
   task,
+  syllabus,
   test: '測試',
   formConfigP: {
     input: '請輸入',

TEAMModelOS/ClientApp/src/locale/lang/zh-TW/syllabus.js

@@ -0,0 +1,3 @@
+export default{
+    
+}

TEAMModelOS/ClientApp/src/view/syllabus/Syllabus.vue

@@ -280,6 +280,7 @@
 				volumeList: [],
 				originVolumeList:[],
 				questionList: [],
+				allChapterIds:[],
 				schoolInfo: null,
 				previewFile: {},
 				previewPaper: null,
@@ -389,9 +390,10 @@
 			},
 			/* 点击某个册别 */
 			onVolumeClick(volume, volumeIndex) {
-				if (volume.id === this.curVolume.id && !this.isEditVolume) return
+				if (!volume || (volume.id === this.curVolume.id && !this.isEditVolume)) return
 				this.isLoading = true
 				this.curVolume = volume
+				this.allChapterIds = volume.syllabusIds || []
 				this.activeVolumeIndex = volumeIndex
 				this.getTreeByVolumeId(volume)
 				this.hasModify = false
@@ -470,7 +472,7 @@
 					scope: volume.scope
 				}).then(res => {
 					if (!res.error) {
-						this.treeOrigin = res.tree.trees
+						this.treeOrigin = res.tree
 					} else {
 						this.$Message.warning(res.error);
 						this.treeOrigin = []
@@ -485,32 +487,57 @@
 			onAddTreeNode() {
 				this.nodeInfo.id = this.$tools.guid()
 				this.nodeInfo.pid = this.curVolume.id
-				this.treeOrigin.push(this.nodeInfo)
+				// 统一传给树形组件的数据结构
+				this.treeOrigin.push({
+					auth:null,
+					id:this.nodeInfo.id,
+					scope:this.curVolume.scope,
+					trees:[this.nodeInfo],
+					volumeId:this.curVolume.id
+				})
+				// 只要本地新增的章节 都要记录到修改数据里
+				this.$nextTick(() => {
+					this.$refs.treeRef.modifyIdArr.push(this.nodeInfo.id)
+					// 还原默认值
+					this.nodeInfo = {
+						"id": "",
+						"pid": "",
+						"title": "",
+						"type": 1,
+						"children": [],
+					}
+				})
 				this.hasModify = true;
 				this.isAddTreeModal = false
-				this.nodeInfo = {
-					"id": "",
-					"pid": "",
-					"title": "",
-					"type": 1,
-					"children": []
-				}
+				
 			},
 			/* 存储变更保存最新课纲数据 */
 			onSaveSyllabus() {
-				console.log(this.$refs.treeRef)
-				let latestTree = this.$refs.treeRef ? this.$refs.treeRef.treeDatas : [];
-				this.$api.syllabus.UpsertTree({
-					"id": this.curVolume.id,
-					"code": this.curVolume.code.replace('Volume-', ''),
-					"scope": this.curVolume.scope,
-					"trees": latestTree
-				}).then((res) => {
+				console.log(this.$refs.treeRef.modifyIdArr)
+				console.log(this.$refs.treeRef.treeDatas)
+				this.isEditVolume = true
+				// 拿到有修改变动的章节ID集合
+				let modifyIdArr = [...new Set(this.$refs.treeRef.modifyIdArr)].filter(i => i !== this.curVolume.id)
+				let allChapter = this.$refs.treeRef ? this.$refs.treeRef.treeDatas : [];
+				let modifyChapters = modifyIdArr.length ? modifyIdArr.map(id => {
+					return {
+						id:id,
+						volumeId:this.curVolume.id,
+						scope:this.curVolume.scope,
+						trees:[allChapter.find(i => i.id === id)]
+					}
+				}) : [];
+				this.allChapterIds = allChapter.map(i => i.id)
+				this.$api.syllabus.UpsertTree(modifyChapters).then((res) => {
 					if (!res.error && res) {
-						this.treeOrigin = res;
-						this.hasModify = false;
-						this.$Message.success("保存成功");
-						this.getTreeByVolumeId(this.curVolume)
+						this.handleSubmit().then(result => {
+							this.treeOrigin = res;
+							this.hasModify = false;
+							this.$refs.treeRef && (this.$refs.treeRef.modifyIdArr = [])
+							this.isEditVolume = false
+							// this.$Message.success("保存成功");
+							// this.getTreeByVolumeId(this.curVolume)
+						})
 					} else {
 						this.$Message.warning("获取数据失败");
 					}
@@ -791,36 +818,42 @@
 			},
 			/* 提交新增册别 */
 			handleSubmit() {
-				this.isAddLoading = true
-				let addVolumeParams = {
-					"code": this.curCode,
-					"periodId": this.isSchool ? this.periodList[this.currentPeriodIndex].id : null,
-					"subjectId": this.isSchool ? this.subjectList[this.activeSubjectIndex].id : null,
-					"gradeId": this.isSchool ? this.addVolumeForm.grade : -1,
-					"semesterId": this.isSchool ? this.semesterList[this.addVolumeForm.semester].id : null,
-					"status": 1,
-					"name": this.addVolumeForm.name || this.getDefaultVolumeName,
-					"creatorId": this.$store.state.userInfo.TEAMModelId,
-					"school": this.$store.state.userInfo.schoolCode,
-					"scope": this.curScope
-				}
-				if (this.isEditVolume && this.curVolume) {
-					addVolumeParams.id = this.curVolume.id
-				}
-				// 发送新增或者编辑册别请求
-				this.$api.syllabus.SaveOrUpdateVolume(addVolumeParams).then(res => {
-					if (!res.error) {
-						this.isAddVolumeModal = false
-						this.$Message.success("操作成功");
-						this.getVolumeList()
-					} else {
-						this.$Message.warning(res.error === 4 ? '已存在相同册别！' : res.error);
+				return new Promise((r,j) => {
+					this.isAddLoading = true
+					let addVolumeParams = {
+						"code": this.curCode,
+						"periodId": this.isSchool ? this.periodList[this.currentPeriodIndex].id : null,
+						"subjectId": this.isSchool ? this.subjectList[this.activeSubjectIndex].id : null,
+						"gradeId": this.isSchool ? this.addVolumeForm.grade : -1,
+						"semesterId": this.isSchool ? this.semesterList[this.addVolumeForm.semester].id : null,
+						"status": 1,
+						"name": this.addVolumeForm.name || this.getDefaultVolumeName,
+						"creatorId": this.$store.state.userInfo.TEAMModelId,
+						"school": this.$store.state.userInfo.schoolCode,
+						"scope": this.curScope,
+						"syllabusIds":[]
 					}
-				}).catch(err => {
-					// this.$Message.error(err);
-				}).finally(() => {
-					this.isAddLoading = false
+					if (this.isEditVolume && this.curVolume) {
+						addVolumeParams.id = this.curVolume.id
+						addVolumeParams.syllabusIds = this.allChapterIds || []
+					}
+					// 发送新增或者编辑册别请求
+					this.$api.syllabus.SaveOrUpdateVolume(addVolumeParams).then(res => {
+						if (!res.error) {
+							this.isAddVolumeModal = false
+							this.$Message.success("操作成功");
+							this.getVolumeList()
+							r(200)
+						} else {
+							this.$Message.warning(res.error === 4 ? '已存在相同册别！' : res.error);
+						}
+					}).catch(err => {
+						// this.$Message.error(err);
+					}).finally(() => {
+						this.isAddLoading = false
+					})
 				})
+				
 			}
 		},
 		computed: {