Skip to content

C
confucius
Commit 5e2315db authored by zhengke's avatar zhengke
Browse files
Options

修改

parent aef46923
Hide whitespace changes
Inline Side-by-side
Showing with 543 additions and 519 deletions
src/pages/course/chapterEditor.vue
View file @ 5e2315db
<template> <template>
<div class="flex flex-start window-height"> <div class="flex flex-start window-height">
<div class="q-pa-lg full-height" style="border-right:1px solid #f5f5f5;width:450px;"> <q-splitter v-model="splitterModel" style="height: 100%;width:100%">
<q-card class="q-pa-md bg-dark text-white q-mb-lg"> <template v-slot:before>
<div class="q-pa-lg full-height">
<q-card class="q-pa-md bg-dark text-white q-mb-lg">
<span>{{courseInfo.CourseName}}</span> <span>{{courseInfo.CourseName}}</span>
</q-card> </q-card>
<div class="q-gutter-xs q-pb-lg" style="border-bottom:1px solid #f5f5f5;"> <div class="q-gutter-xs q-pb-lg" style="border-bottom:1px solid #f5f5f5;">
<q-btn color="primary" size="xs" unelevated label="同级目录" @click="addSameLevel"></q-btn> <q-btn color="primary" size="xs" unelevated label="同级目录" @click="addSameLevel"></q-btn>
<q-btn color="primary" size="xs" unelevated label="子目录" @click="addChildLevel"></q-btn> <q-btn color="primary" size="xs" unelevated label="子目录" @click="addChildLevel"></q-btn>
<q-btn color="primary" size="xs" title="向上移动" :disable="!canUp" @click="moveUp" outline icon="iconfont icon-up"></q-btn> <q-btn color="primary" size="xs" title="向上移动" :disable="!canUp" @click="moveUp" outline
<q-btn color="primary" size="xs" title="向下移动" :disable="!canDown" @click="moveDown" outline icon="iconfont icon-down1"></q-btn> icon="iconfont icon-up"></q-btn>
<q-btn color="primary" size="xs" title="向下移动" :disable="!canDown" @click="moveDown" outline
icon="iconfont icon-down1"></q-btn>
<q-btn color="primary" size="xs" title="导入 ..." unelevated label="导入 ..."></q-btn> <q-btn color="primary" size="xs" title="导入 ..." unelevated label="导入 ..."></q-btn>
</div> </div>
<div class="q-mt-lg" style="height:calc(100% - 140px)"> <div class="q-mt-lg" style="height:calc(100% - 140px)">
<q-scroll-area <q-scroll-area :thumb-style="thumbStyle" :content-style="contentStyle"
:thumb-style="thumbStyle" :content-active-style="contentActiveStyle" style="height: 100%; width: 100%;padding-right:10px;">
:content-style="contentStyle" <el-tree ref="chapterTree" :default-expanded-keys="defaultChapterId" @node-click="changeNode"
:content-active-style="contentActiveStyle" v-loading="canOptions" class="chapter-tree" :data="dataList" empty-text="暂无章节数据，请点击”添加同级“开始录入开始吧"
style="height: 100%; width: 100%;" :props="defaultProps" node-key="ChapterId" @node-drag-start="handleDragStart"
> @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver"
<el-tree ref="chapterTree" :default-expanded-keys="defaultChapterId" @node-click="changeNode" v-loading="canOptions" class="chapter-tree" :data="dataList" empty-text="暂无章节数据，请点击”添加同级“开始录入开始吧" :props="defaultProps" node-key="ChapterId" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag"> @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop"
<div class="row chapter-node full-width" slot-scope="{ node, data }"> :allow-drag="allowDrag">
<div class="q-mr-md">{{ data.ChapterNo.length>1?data.ChapterNo:`0${data.ChapterNo}` }}</div> <div class="row chapter-node full-width" slot-scope="{ node, data }">
<div class="col q-mr-xs" v-if="editorNodeId==data.ChapterId"> <div class="q-mr-md">{{ data.ChapterNo.length>1?data.ChapterNo:`0${data.ChapterNo}` }}</div>
<input type="text" @click.stop="" @blur="changeChapterName(data)" maxlength="100" @click.native="ChapterNameClick" class="tree-input" v-focus v-model="data.ChapterName" @focus="selectValue($event)" /> <div class="col q-mr-xs" v-if="editorNodeId==data.ChapterId">
</div> <input type="text" @click.stop="" @blur="changeChapterName(data)" maxlength="100"
<div class="col q-mr-md ellipsis" v-if="editorNodeId!=data.ChapterId">{{data.ChapterName}}</div> @click.native="ChapterNameClick" class="tree-input" v-focus v-model="data.ChapterName"
<div class="oops-box q-mr-xs" v-if="editorNodeId!=data.ChapterId"> @focus="selectValue($event)" />
<q-btn size="xs" flat color="primary" label="编辑" @click.stop="editorNodeId=data.ChapterId"></q-btn> </div>
<q-btn size="xs" flat color="negative" label="删除" @click.stop="deleteObj(data)"></q-btn> <div class="col q-mr-md ellipsis" v-if="editorNodeId!=data.ChapterId">{{data.ChapterName}}</div>
</div> <div class="oops-box q-mr-xs" v-if="editorNodeId!=data.ChapterId">
<div class="q-mr-xs rate-box"> <q-btn size="xs" flat color="primary" label="编辑" @click.stop="editorNodeId=data.ChapterId"></q-btn>
<q-badge class="bg-white text-grey-8"> <q-btn size="xs" flat color="negative" label="删除" @click.stop="deleteObj(data)"></q-btn>
{{data.CourseRateName.replace('课程','')}} </div>
</q-badge> <div class="q-mr-xs rate-box">
<q-badge class="q-ml-xs bg-grey-3 text-dark">{{data.StudyMinutes}}分钟</q-badge> <q-badge class="bg-white text-grey-8">
</div> {{data.CourseRateName.replace('课程','')}}
</div> </q-badge>
</el-tree> <q-badge class="q-ml-xs bg-grey-3 text-dark">{{data.StudyMinutes}}分钟</q-badge>
</div>
</div>
</el-tree>
</q-scroll-area> </q-scroll-area>
</div>
</div> </div>
</div> </template>
<div class="col full-height q-pa-lg chapter-content scroll"> <template v-slot:after>
<div v-if="chapter"> <div class="col full-height q-pa-lg chapter-content scroll">
<div v-if="chapter">
<div class="text-h6 q-mb-md">章节学习内容</div> <div class="text-h6 q-mb-md">章节学习内容</div>
<div class="row q-mb-md"> <div class="row q-mb-md">
<div class="col q-mr-md"> <div class="col q-mr-md">
<q-input square filled label="消耗分钟" v-model="chapter.StudyMinutes" suffix="分钟" mask="#" fill-mask="0" reverse-fill-mask></q-input> <q-input square filled label="消耗分钟" v-model="chapter.StudyMinutes" suffix="分钟" mask="#" fill-mask="0"
</div> reverse-fill-mask></q-input>
<div class="col"> </div>
<q-select :options="rateList" option-label="Name" option-value="Id" square filled label="关联等级" v-model="defauRateObj"></q-select> <div class="col">
</div> <q-select :options="rateList" option-label="Name" option-value="Id" square filled label="关联等级"
v-model="defauRateObj"></q-select>
</div>
</div> </div>
<!-- <div v-if="chapter.ParentId!=0"> --> <!-- <div v-if="chapter.ParentId!=0"> -->
<div> <div>
<div class="text-h6 q-mb-md">章节学习内容</div> <div class="text-h6 q-mb-md">章节学习内容</div>
<div class="q-mb-md"> <div class="q-mb-md">
<editor v-model="chapter.ChapterContent" @blur="changeContent" placeHolder="请输入章节学习内容" :config="config" ref="chapterContent"></editor> <editor v-model="chapter.ChapterContent" @blur="changeContent" placeHolder="请输入章节学习内容" :config="config"
</div> ref="chapterContent"></editor>
<div class="text-h6 q-mb-md">教学重点</div> </div>
<div class="q-mb-md"> <div class="text-h6 q-mb-md">教学重点</div>
<editor v-model="chapter.Objectives" placeHolder="请输入章节教学重点" :config="config" ref="objectives"></editor> <div class="q-mb-md">
</div> <editor v-model="chapter.Objectives" placeHolder="请输入章节教学重点" :config="config" ref="objectives"></editor>
<div class="text-h6 q-mb-md">学生学习要求</div> </div>
<div class="q-mb-md"> <div class="text-h6 q-mb-md">学生学习要求</div>
<editor v-model="chapter.Requirement" placeHolder="请输入章节学生学习要求" :config="config" ref="requirement"></editor> <div class="q-mb-md">
</div> <editor v-model="chapter.Requirement" placeHolder="请输入章节学生学习要求" :config="config" ref="requirement">
</editor>
</div>
</div> </div>
<!-- <div v-else class="text-center text-h5 text-grey-4 q-mt-lg">单元节点不支持编辑相关内容</div> --> <!-- <div v-else class="text-center text-h5 text-grey-4 q-mt-lg">单元节点不支持编辑相关内容</div> -->
</div>
</div> </div>
</div>
<q-btn round padding="md" v-if="chapter && chapter.ChapterId>0" @click="saveChapterUpdate" :loading="submiting" color="primary" class="fixed-bottom-right" label="保存" style="z-index:9999999;right:20px;bottom:100px;"> </template>
<template v-slot:loading> </q-splitter>
<q-spinner-ios /> <q-btn round padding="md" v-if="chapter && chapter.ChapterId>0" @click="saveChapterUpdate" :loading="submiting"
</template> color="primary" class="fixed-bottom-right" label="保存" style="z-index:9999999;right:20px;bottom:100px;">
<template v-slot:loading>
<q-spinner-ios />
</template>
</q-btn> </q-btn>
</div> </div>
</template> </template>
<script> <script>
import editor from "../../components/editor/UeEditor"; import editor from "../../components/editor/UeEditor";
import { import {
queryChapterTree, queryChapterTree,
saveChapter, saveChapter,
batchUpdateChapterNo, batchUpdateChapterNo,
...@@ -88,506 +105,513 @@ import { ...@@ -88,506 +105,513 @@ import {
queryCourseInfo, queryCourseInfo,
deleteChapters, deleteChapters,
setChaptersRate setChaptersRate
} from "../../api/course/index"; } from "../../api/course/index";
import {compareObject} from '../../utils/validate' import {
import { extend } from 'quasar' compareObject
export default { } from '../../utils/validate'
import {
extend
} from 'quasar'
export default {
meta: { meta: {
title: "课程章节详情" title: "课程章节详情"
}, },
components: { components: {
editor editor
}, },
directives: { directives: {
focus: { focus: {
// 指令的定义 // 指令的定义
inserted: function (el) { inserted: function (el) {
el.focus() el.focus()
}
} }
}
}, },
data() { data() {
return { return {
chapter: null, chapter: null,
config: { config: {
initialFrameWidth: null, initialFrameWidth: null,
initialFrameHeight: 400 initialFrameHeight: 400
}, },
showContent: true, showContent: true,
courseId: 0, courseId: 0,
dataList: [], dataList: [],
defaultProps: { defaultProps: {
children: 'ChildList', children: 'ChildList',
label: 'ChapterName' label: 'ChapterName'
}, },
currentNode: null, currentNode: null,
canOptions: true, canOptions: true,
updateChapters: [], updateChapters: [],
editorNodeId: 0, editorNodeId: 0,
canUp:false, canUp: false,
canDown:false, canDown: false,
rateList:[], rateList: [],
defauRateObj:{ defauRateObj: {
Id:8, Id: 8,
Name:"其它" Name: "其它"
}, },
courseInfo:{}, courseInfo: {},
submiting:false, submiting: false,
bakObj:{}, bakObj: {},
contentStyle: { contentStyle: {
backgroundColor: 'rgba(0,0,0,0.02)', backgroundColor: 'rgba(0,0,0,0.02)',
color: '#555' color: '#555'
}, },
contentActiveStyle: { contentActiveStyle: {
backgroundColor: '#eee', backgroundColor: '#eee',
color: 'black' color: 'black'
}, },
thumbStyle: { thumbStyle: {
right: '2px', right: '2px',
borderRadius: '5px', borderRadius: '5px',
backgroundColor: '#027be3', backgroundColor: '#027be3',
width: '5px', width: '5px',
opacity: 0.75 opacity: 0.75
}, },
defaultChapterId:0 defaultChapterId: 0,
}; splitterModel: 30 //左侧默认占据多大
};
}, },
created() { created() {
if(this.$route.query.chapter){ if (this.$route.query.chapter) {
this.defaultChapterId=this.$route.query.chapter this.defaultChapterId = this.$route.query.chapter;
} }
if (this.$route.query.courseId) { if (this.$route.query.courseId) {
this.courseId = this.$route.query.courseId; this.courseId = this.$route.query.courseId;
this.initTree(); this.initTree();
this.initRateList(); this.initRateList();
this.getCourseInfo(); this.getCourseInfo();
} }
}, },
mounted() { mounted() {
this.showContent = false; this.showContent = false;
setTimeout(() => { setTimeout(() => {
this.showContent = true; this.showContent = true;
}, 3000); }, 3000);
}, },
methods: { methods: {
changeContent(){ changeContent() {},
}, getCourseInfo() {
getCourseInfo() { queryCourseInfo({
queryCourseInfo({ CourseId: this.courseId
CourseId: this.courseId }).then(res => {
}).then(res => { this.courseInfo = res.Data;
this.courseInfo = res.Data; })
}) },
}, initRateList() {
initRateList(){ getCourseRate({}).then(r => {
getCourseRate({}).then(r=>{ this.rateList = r.Data
this.rateList=r.Data
})
},
ChapterNameClick(){
},
changeNode(data,node,ev){
if(this.chapter && this.chapter.ChapterId>0){
if(this.defauRateObj.Id!=0){
this.chapter.CourseRate=this.defauRateObj.Id
this.chapter.CourseRateName=this.defauRateObj.Name
}
if(!compareObject(this.bakObj,this.chapter,false)){
this.saveChapterUpdate()
if(this.bakObj.CourseRate!=this.chapter.CourseRate){
if(this.chapter.ChildList && this.chapter.ChildList.length>0){
this.updateRate()
this.updateRateNode(this.chapter.ChildList)
}
}
}
}
try {
data.ChapterContent=decodeURIComponent(data.ChapterContent)
data.Objectives=decodeURIComponent(data.Objectives)
data.Requirement=decodeURIComponent(data.Requirement)
} catch (error) {
}
data.StudyMinutes=data.StudyMinutes.toString()
this.chapter=data })
extend(this.bakObj,data) },
ChapterNameClick() {
if(this.$refs.chapterContent){
this.$refs.chapterContent.reloadNewValue()
this.$refs.objectives.reloadNewValue()
this.$refs.requirement.reloadNewValue()
}
this.checkMove(node)
this.rateList.forEach(x=>{
if(x.Id==data.CourseRate){
this.defauRateObj=x
}
})
}, },
updateRate(){ changeNode(data, node, ev) {
setChaptersRate({ if (this.chapter && this.chapter.ChapterId > 0) {
CourseRate:this.defauRateObj.CourseRate, if (this.defauRateObj.Id != 0) {
CourseId:this.courseId, this.chapter.CourseRate = this.defauRateObj.Id
ChapterNo:this.chapter.ChapterNo+"." this.chapter.CourseRateName = this.defauRateObj.Name
}).then(r=>{ }
//this.initTree() if (!compareObject(this.bakObj, this.chapter, false)) {
}) this.saveChapterUpdate()
}, if (this.bakObj.CourseRate != this.chapter.CourseRate) {
updateRateNode(arr){ if (this.chapter.ChildList && this.chapter.ChildList.length > 0) {
arr.forEach(x=>{ this.updateRate()
x.CourseRate=this.defauRateObj.Id this.updateRateNode(this.chapter.ChildList)
x.CourseRateName=this.defauRateObj.Name }
if(x.ChildList && x.ChildList.length>0){
this.updateRateNode(x.ChildList)
}
})
},
deleteObj(data){
this.$q.dialog({
title: '删除确认',
message: '删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗',
cancel: {
label: "取消删除",
flat: true
},
ok: {
label: "确认",
flat: true,
focus: true,
color:"negative"
}
}).onOk(() => {
deleteChapters({
CourseId:this.courseId,
ChapterNo:data.ChapterNo+".",
ChapterId:data.ChapterId
}).then(r=>{
//this.initTree()
this.$refs.chapterTree.remove(data.ChapterId)
this.updateChapters = []
this.genernalNo("",this.dataList)
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate()
}
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '删除成功！',
position: 'top'
})
})
}).onCancel(() => {
// console.log('>>>> Cancel')
})
},
saveChapterUpdate(){
if(!this.submiting){
this.submiting=true
if(this.defauRateObj.Id!=0){
this.chapter.CourseRate=this.defauRateObj.Id
this.chapter.CourseRateName=this.defauRateObj.Name
}
let msg={}
extend(msg,this.chapter)
msg.ChapterContent=encodeURIComponent(msg.ChapterContent)
msg.Objectives=encodeURIComponent(msg.Objectives)
msg.Requirement=encodeURIComponent(msg.Requirement)
saveChapter(msg).then(r => {
this.submiting=false
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '数据保存成功！',
position: 'top'
})
if(this.bakObj.CourseRate!=this.defauRateObj.Id){
if(this.chapter.ChildList && this.chapter.ChildList.length>0){
this.updateRate()
this.updateRateNode(this.chapter.ChildList)
}
extend(this.bakObj,this.chapter)
}
}).catch(e=>{
this.submiting=false
})
}
},
checkMove(node){
let noTemp=node.data.ChapterNo.split('.')
let no=parseInt(noTemp[noTemp.length-1])
let p=node.parent.data
this.canUp=no!=1
this.canDown=no!=p.length
},
moveUp(){
let data = this.$refs.chapterTree.getCurrentNode()
let node=this.$refs.chapterTree.getNode(data.ChapterId)
console.log(data)
if(node){
let noTemp=data.ChapterNo.toString().split('.')
let no=parseInt(noTemp[noTemp.length-1])-1
let p=node.parent.data
if(data.ParentId==0){
p=this.swapArray(p,no,no-1)
}else{
p.ChildList=this.swapArray(p.ChildList,no,no-1)
}
node.parent.childNodes=this.swapArray(node.parent.childNodes,no,no-1)
this.updateChapters = []
this.genernalNo("", this.dataList)
this.checkMove(this.$refs.chapterTree.getNode(data.ChapterId))
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate()
}
}
},
moveDown(){
let data = this.$refs.chapterTree.getCurrentNode()
let node=this.$refs.chapterTree.getNode(data.ChapterId)
console.log(data)
if(node){
let noTemp=data.ChapterNo.toString().split('.')
let no=parseInt(noTemp[noTemp.length-1])-1
let p=node.parent.data
if(data.ParentId==0){
p=this.swapArray(p,no,no+1)
}else{
p.ChildList=this.swapArray(p.ChildList,no,no+1)
}
node.parent.childNodes=this.swapArray(node.parent.childNodes,no,no+1)
this.updateChapters = []
this.genernalNo("", this.dataList)
this.checkMove(this.$refs.chapterTree.getNode(data.ChapterId))
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate()
}
} }
}, }
swapArray(arr, index1, index2) { }
arr[index1] = arr.splice(index2, 1, arr[index1])[0]; try {
return arr; data.ChapterContent = decodeURIComponent(data.ChapterContent)
}, data.Objectives = decodeURIComponent(data.Objectives)
selectValue(e) { data.Requirement = decodeURIComponent(data.Requirement)
e.currentTarget.select(); } catch (error) {
},
changeChapterName(data){
this.editorNodeId=0
let msg={
ChapterId:data.ChapterId,
ChapterName:data.ChapterName
}
updateChapterName(msg).then(r=>{
}) }
}, data.StudyMinutes = data.StudyMinutes.toString()
addSameLevel() {
let temp = this.$refs.chapterTree.getCurrentNode() this.chapter = data
if (!temp || temp.ParentId == 0) { extend(this.bakObj, data)
let no = this.dataList && this.dataList.length > 0 ? (this.dataList.length + 1) : 1
let t = this.createNewNode(0, no,8,'其它') if (this.$refs.chapterContent) {
saveChapter(t).then(r => { this.$refs.chapterContent.reloadNewValue()
t.ChapterId=r.Data.ChapterId this.$refs.objectives.reloadNewValue()
this.dataList.push(t) this.$refs.requirement.reloadNewValue()
}) }
} else {
let parentTemp = this.$refs.chapterTree.getNode(temp.ParentId).data this.checkMove(node)
let no = parentTemp.ChildList && parentTemp.ChildList.length > 0 ? (parentTemp.ChildList.length + 1) : 1 this.rateList.forEach(x => {
no = parentTemp.ChapterNo + "." + no if (x.Id == data.CourseRate) {
let t=this.createNewNode(parentTemp.ChapterId,no,parentTemp.CourseRate,parentTemp.CourseRateName) this.defauRateObj = x
saveChapter(t).then(r=>{ }
t.ChapterId=r.Data.ChapterId })
parentTemp.ChildList.push(t)
}) },
} updateRate() {
}, setChaptersRate({
addChildLevel() { CourseRate: this.defauRateObj.CourseRate,
let temp = this.$refs.chapterTree.getCurrentNode() CourseId: this.courseId,
if (!temp) { ChapterNo: this.chapter.ChapterNo + "."
let no = this.dataList && this.dataList.length > 0 ? (this.dataList.length + 1) : 1 }).then(r => {
let t = this.createNewNode(0, no, 8,'其它') //this.initTree()
saveChapter(t).then(r => { })
t.ChapterId=r.Data.ChapterId },
this.dataList.push(t) updateRateNode(arr) {
}) arr.forEach(x => {
} else { x.CourseRate = this.defauRateObj.Id
if (!temp.ChildList) { x.CourseRateName = this.defauRateObj.Name
this.$set(temp, 'ChildList', []) if (x.ChildList && x.ChildList.length > 0) {
} this.updateRateNode(x.ChildList)
let no = temp.ChildList && temp.ChildList.length > 0 ? (temp.ChildList.length + 1) : 1 }
no = temp.ChapterNo + "." + no })
let t = this.createNewNode(temp.ChapterId, no,temp.CourseRate,temp.CourseRateName) },
saveChapter(t).then(r => { deleteObj(data) {
t.ChapterId=r.Data.ChapterId this.$q.dialog({
temp.ChildList.push(t) title: '删除确认',
}) message: '删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗',
} cancel: {
}, label: "取消删除",
handleDragStart(node, ev) { flat: true
console.log('drag start', node); },
}, ok: {
handleDragEnter(draggingNode, dropNode, ev) { label: "确认",
console.log('tree drag enter: ', dropNode.label); flat: true,
}, focus: true,
handleDragLeave(draggingNode, dropNode, ev) { color: "negative"
console.log('tree drag leave: ', dropNode.label); }
}, }).onOk(() => {
handleDragOver(draggingNode, dropNode, ev) { deleteChapters({
console.log('tree drag over: ', dropNode.label); CourseId: this.courseId,
}, ChapterNo: data.ChapterNo + ".",
handleDragEnd(draggingNode, dropNode, dropType, ev) { ChapterId: data.ChapterId
console.log(draggingNode, dropNode, dropType) }).then(r => {
//this.initTree()
this.$refs.chapterTree.remove(data.ChapterId)
this.updateChapters = [] this.updateChapters = []
if (dropType == 'inner') {
draggingNode.data.ParentId = dropNode.data.ChapterId
} else {
draggingNode.data.ParentId = dropNode.data.ParentId
}
this.genernalNo("", this.dataList) this.genernalNo("", this.dataList)
if (this.updateChapters && this.updateChapters.length > 0) { if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate() this.batchUpdate()
}
},
handleDrop(draggingNode, dropNode, dropType, ev) {},
allowDrop(draggingNode, dropNode, type) {
// if (dropNode.data.ChapterName === '二级 3-1') {
// return type !== 'inner';
// } else {
return true;
//}
},
allowDrag(draggingNode) {
return true;
},
initTree() {
this.canOptions = true
queryChapterTree({
CourseId: this.courseId
}).then(r => {
console.log(r);
this.dataList = r.Data
this.canOptions = false
if(this.defaultChapterId!=0){
setTimeout(() => {
this.$refs.chapterTree.setCurrentKey(this.defaultChapterId)
let t=this.$refs.chapterTree.getNode(this.defaultChapterId)
this.changeNode(t.data,t,null)
}, 1000);
}
});
},
createNewNode(pid, no,rate,crn) {
if (this.canOptions) return;
let name = ""
if (pid == 0) {
name = `第${this.toChinesNum(no)}单元`
} else {
let d = no.split('.')
name = `第${this.toChinesNum(d[d.length-1])}课时`
}
return {
ChapterId: 0,
ParentId: pid,
ChapterContent: "",
ChapterName: name,
CourseId: this.courseId,
ChapterNo: no.toString(),
OpenStatus: 1,
Progress: 0,
Objectives: "",
Requirement: "",
StudyMinutes: 0,
ChildList: [],
CourseRate: rate,
CourseRateName:crn
} }
}, this.$q.notify({
toChinesNum(num) { icon: 'iconfont icon-chenggong',
let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零" color: 'accent',
let unit = ["", "十", "百", "千", "万"]; timeout: 2000,
num = parseInt(num); message: '删除成功！',
let getWan = (temp) => { position: 'top'
let strArr = temp.toString().split("").reverse();
let newNum = "";
for (var i = 0; i < strArr.length; i++) {
newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
}
return newNum;
}
let overWan = Math.floor(num / 10000);
let noWan = num % 10000;
if (noWan.toString().length < 4) noWan = "0" + noWan;
return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
},
genernalNo(parentNo, list) {
list.forEach((x, i) => {
if (parentNo != "") {
x.ChapterNo = parentNo + "." + (i + 1)
} else {
x.ChapterNo = (i + 1).toString()
}
this.updateChapters.push({
ChapterNo: x.ChapterNo,
ChapterId: x.ChapterId,
ParentId: x.ParentId
})
if (x.ChildList && x.ChildList.length > 0) {
x.ChildList = this.genernalNo(x.ChapterNo, x.ChildList)
}
}) })
return list })
}, }).onCancel(() => {
batchUpdate() { // console.log('>>>> Cancel')
batchUpdateChapterNo(this.updateChapters).then(r => { })
console.log(x)
},
saveChapterUpdate() {
if (!this.submiting) {
this.submiting = true
if (this.defauRateObj.Id != 0) {
this.chapter.CourseRate = this.defauRateObj.Id
this.chapter.CourseRateName = this.defauRateObj.Name
}
let msg = {}
extend(msg, this.chapter)
msg.ChapterContent = encodeURIComponent(msg.ChapterContent)
msg.Objectives = encodeURIComponent(msg.Objectives)
msg.Requirement = encodeURIComponent(msg.Requirement)
saveChapter(msg).then(r => {
this.submiting = false
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '数据保存成功！',
position: 'top'
}) })
if (this.bakObj.CourseRate != this.defauRateObj.Id) {
if (this.chapter.ChildList && this.chapter.ChildList.length > 0) {
this.updateRate()
this.updateRateNode(this.chapter.ChildList)
}
extend(this.bakObj, this.chapter)
}
}).catch(e => {
this.submiting = false
})
}
},
checkMove(node) {
let noTemp = node.data.ChapterNo.split('.')
let no = parseInt(noTemp[noTemp.length - 1])
let p = node.parent.data
this.canUp = no != 1
this.canDown = no != p.length
},
moveUp() {
let data = this.$refs.chapterTree.getCurrentNode()
let node = this.$refs.chapterTree.getNode(data.ChapterId)
console.log(data)
if (node) {
let noTemp = data.ChapterNo.toString().split('.')
let no = parseInt(noTemp[noTemp.length - 1]) - 1
let p = node.parent.data
if (data.ParentId == 0) {
p = this.swapArray(p, no, no - 1)
} else {
p.ChildList = this.swapArray(p.ChildList, no, no - 1)
}
node.parent.childNodes = this.swapArray(node.parent.childNodes, no, no - 1)
this.updateChapters = []
this.genernalNo("", this.dataList)
this.checkMove(this.$refs.chapterTree.getNode(data.ChapterId))
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate()
}
}
},
moveDown() {
let data = this.$refs.chapterTree.getCurrentNode()
let node = this.$refs.chapterTree.getNode(data.ChapterId)
console.log(data)
if (node) {
let noTemp = data.ChapterNo.toString().split('.')
let no = parseInt(noTemp[noTemp.length - 1]) - 1
let p = node.parent.data
if (data.ParentId == 0) {
p = this.swapArray(p, no, no + 1)
} else {
p.ChildList = this.swapArray(p.ChildList, no, no + 1)
}
node.parent.childNodes = this.swapArray(node.parent.childNodes, no, no + 1)
this.updateChapters = []
this.genernalNo("", this.dataList)
this.checkMove(this.$refs.chapterTree.getNode(data.ChapterId))
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate()
}
}
},
swapArray(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
},
selectValue(e) {
e.currentTarget.select();
},
changeChapterName(data) {
this.editorNodeId = 0
let msg = {
ChapterId: data.ChapterId,
ChapterName: data.ChapterName
}
updateChapterName(msg).then(r => {
})
},
addSameLevel() {
let temp = this.$refs.chapterTree.getCurrentNode()
if (!temp || temp.ParentId == 0) {
let no = this.dataList && this.dataList.length > 0 ? (this.dataList.length + 1) : 1
let t = this.createNewNode(0, no, 8, '其它')
saveChapter(t).then(r => {
t.ChapterId = r.Data.ChapterId
this.dataList.push(t)
})
} else {
let parentTemp = this.$refs.chapterTree.getNode(temp.ParentId).data
let no = parentTemp.ChildList && parentTemp.ChildList.length > 0 ? (parentTemp.ChildList.length + 1) : 1
no = parentTemp.ChapterNo + "." + no
let t = this.createNewNode(parentTemp.ChapterId, no, parentTemp.CourseRate, parentTemp.CourseRateName)
saveChapter(t).then(r => {
t.ChapterId = r.Data.ChapterId
parentTemp.ChildList.push(t)
})
} }
},
addChildLevel() {
let temp = this.$refs.chapterTree.getCurrentNode()
if (!temp) {
let no = this.dataList && this.dataList.length > 0 ? (this.dataList.length + 1) : 1
let t = this.createNewNode(0, no, 8, '其它')
saveChapter(t).then(r => {
t.ChapterId = r.Data.ChapterId
this.dataList.push(t)
})
} else {
if (!temp.ChildList) {
this.$set(temp, 'ChildList', [])
}
let no = temp.ChildList && temp.ChildList.length > 0 ? (temp.ChildList.length + 1) : 1
no = temp.ChapterNo + "." + no
let t = this.createNewNode(temp.ChapterId, no, temp.CourseRate, temp.CourseRateName)
saveChapter(t).then(r => {
t.ChapterId = r.Data.ChapterId
temp.ChildList.push(t)
})
}
},
handleDragStart(node, ev) {
console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log(draggingNode, dropNode, dropType)
this.updateChapters = []
if (dropType == 'inner') {
draggingNode.data.ParentId = dropNode.data.ChapterId
} else {
draggingNode.data.ParentId = dropNode.data.ParentId
}
this.genernalNo("", this.dataList)
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate()
}
},
handleDrop(draggingNode, dropNode, dropType, ev) {},
allowDrop(draggingNode, dropNode, type) {
// if (dropNode.data.ChapterName === '二级 3-1') {
// return type !== 'inner';
// } else {
return true;
//}
},
allowDrag(draggingNode) {
return true;
},
initTree() {
this.canOptions = true
queryChapterTree({
CourseId: this.courseId
}).then(r => {
console.log(r);
this.dataList = r.Data
this.canOptions = false
if (this.defaultChapterId != 0) {
setTimeout(() => {
this.$refs.chapterTree.setCurrentKey(this.defaultChapterId)
let t = this.$refs.chapterTree.getNode(this.defaultChapterId)
this.changeNode(t.data, t, null)
}, 1000);
}
});
},
createNewNode(pid, no, rate, crn) {
if (this.canOptions) return;
let name = ""
if (pid == 0) {
name = `第${this.toChinesNum(no)}单元`
} else {
let d = no.split('.')
name = `第${this.toChinesNum(d[d.length-1])}课时`
}
return {
ChapterId: 0,
ParentId: pid,
ChapterContent: "",
ChapterName: name,
CourseId: this.courseId,
ChapterNo: no.toString(),
OpenStatus: 1,
Progress: 0,
Objectives: "",
Requirement: "",
StudyMinutes: 0,
ChildList: [],
CourseRate: rate,
CourseRateName: crn
}
},
toChinesNum(num) {
let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零"
let unit = ["", "十", "百", "千", "万"];
num = parseInt(num);
let getWan = (temp) => {
let strArr = temp.toString().split("").reverse();
let newNum = "";
for (var i = 0; i < strArr.length; i++) {
newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[
strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
}
return newNum;
}
let overWan = Math.floor(num / 10000);
let noWan = num % 10000;
if (noWan.toString().length < 4) noWan = "0" + noWan;
return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
},
genernalNo(parentNo, list) {
list.forEach((x, i) => {
if (parentNo != "") {
x.ChapterNo = parentNo + "." + (i + 1)
} else {
x.ChapterNo = (i + 1).toString()
}
this.updateChapters.push({
ChapterNo: x.ChapterNo,
ChapterId: x.ChapterId,
ParentId: x.ParentId
})
if (x.ChildList && x.ChildList.length > 0) {
x.ChildList = this.genernalNo(x.ChapterNo, x.ChildList)
}
})
return list
},
batchUpdate() {
batchUpdateChapterNo(this.updateChapters).then(r => {
console.log(x)
})
}
} }
}; };
</script> </script>
<style> <style>
.chapter-tree .chapter-node .oops-box, .chapter-tree .chapter-node .oops-box,
.chapter-tree .chapter-node:hover .rate-box{ .chapter-tree .chapter-node:hover .rate-box {
display: none; display: none;
} }
.chapter-tree .chapter-node:hover .oops-box, .chapter-tree .chapter-node:hover .oops-box,
.chapter-tree .chapter-node .rate-box { .chapter-tree .chapter-node .rate-box {
display: block; display: block;
} }
.chapter-tree .el-tree-node__content { .chapter-tree .el-tree-node__content {
height: 32px !important; height: 32px !important;
} }
.chapter-tree .el-tree-node__content:hover, .chapter-tree .el-tree-node__content:hover,
.chapter-tree .is-current>.el-tree-node__content { .chapter-tree .is-current>.el-tree-node__content {
background: #eaeff7 !important; background: #eaeff7 !important;
} }
.chapter-tree .el-tree-node__content{ .chapter-tree .el-tree-node__content {
border-radius: 4px; border-radius: 4px;
} }
.chapter-tree .tree-input { .chapter-tree .tree-input {
outline: none; outline: none;
border: none; border: none;
padding: 0 5px; padding: 0 5px;
font-size: 14px; font-size: 14px;
width: 100% width: 100%
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment