Skip to content

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

修改

parent aef46923
Show whitespace changes
Inline Side-by-side
Showing with 543 additions and 519 deletions
src/pages/course/chapterEditor.vue
View file @ 5e2315db
<template>
<div class="flex flex-start window-height">
<div class="q-pa-lg full-height" style="border-right:1px solid #f5f5f5;width:450px;">
<div class="flex flex-start window-height">
<q-splitter v-model="splitterModel" style="height: 100%;width:100%">
<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>
</q-card>
<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="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="!canDown" @click="moveDown" outline icon="iconfont icon-down1"></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="!canDown" @click="moveDown" outline
icon="iconfont icon-down1"></q-btn>
<q-btn color="primary" size="xs" title="导入 ..." unelevated label="导入 ..."></q-btn>
</div>
<div class="q-mt-lg" style="height:calc(100% - 140px)">
<q-scroll-area
:thumb-style="thumbStyle"
:content-style="contentStyle"
:content-active-style="contentActiveStyle"
style="height: 100%; width: 100%;"
>
<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">
<q-scroll-area :thumb-style="thumbStyle" :content-style="contentStyle"
:content-active-style="contentActiveStyle" style="height: 100%; width: 100%;padding-right:10px;">
<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">
<div class="row chapter-node full-width" slot-scope="{ node, data }">
<div class="q-mr-md">{{ data.ChapterNo.length>1?data.ChapterNo:`0${data.ChapterNo}` }}</div>
<div class="col q-mr-xs" v-if="editorNodeId==data.ChapterId">
<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)" />
<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>
<div class="col q-mr-md ellipsis" v-if="editorNodeId!=data.ChapterId">{{data.ChapterName}}</div>
<div class="oops-box q-mr-xs" v-if="editorNodeId!=data.ChapterId">
......@@ -40,22 +47,27 @@
</q-scroll-area>
</div>
</div>
</template>
<template v-slot:after>
<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="row q-mb-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"
reverse-fill-mask></q-input>
</div>
<div class="col">
<q-select :options="rateList" option-label="Name" option-value="Id" square filled label="关联等级" v-model="defauRateObj"></q-select>
<q-select :options="rateList" option-label="Name" option-value="Id" square filled label="关联等级"
v-model="defauRateObj"></q-select>
</div>
</div>
<!-- <div v-if="chapter.ParentId!=0"> -->
<div>
<div class="text-h6 q-mb-md">章节学习内容</div>
<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"
ref="chapterContent"></editor>
</div>
<div class="text-h6 q-mb-md">教学重点</div>
<div class="q-mb-md">
......@@ -63,23 +75,28 @@
</div>
<div class="text-h6 q-mb-md">学生学习要求</div>
<div class="q-mb-md">
<editor v-model="chapter.Requirement" placeHolder="请输入章节学生学习要求" :config="config" ref="requirement"></editor>
<editor v-model="chapter.Requirement" placeHolder="请输入章节学生学习要求" :config="config" ref="requirement">
</editor>
</div>
</div>
<!-- <div v-else class="text-center text-h5 text-grey-4 q-mt-lg">单元节点不支持编辑相关内容</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>
</q-splitter>
<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 v-slot:loading>
<q-spinner-ios />
</template>
</q-btn>
</div>
</div>
</template>
<script>
import editor from "../../components/editor/UeEditor";
import {
import editor from "../../components/editor/UeEditor";
import {
queryChapterTree,
saveChapter,
batchUpdateChapterNo,
......@@ -88,10 +105,14 @@ import {
queryCourseInfo,
deleteChapters,
setChaptersRate
} from "../../api/course/index";
import {compareObject} from '../../utils/validate'
import { extend } from 'quasar'
export default {
} from "../../api/course/index";
import {
compareObject
} from '../../utils/validate'
import {
extend
} from 'quasar'
export default {
meta: {
title: "课程章节详情"
},
......@@ -124,16 +145,16 @@ export default {
canOptions: true,
updateChapters: [],
editorNodeId: 0,
canUp:false,
canDown:false,
rateList:[],
defauRateObj:{
Id:8,
Name:"其它"
},
courseInfo:{},
submiting:false,
bakObj:{},
canUp: false,
canDown: false,
rateList: [],
defauRateObj: {
Id: 8,
Name: "其它"
},
courseInfo: {},
submiting: false,
bakObj: {},
contentStyle: {
backgroundColor: 'rgba(0,0,0,0.02)',
color: '#555'
......@@ -151,12 +172,13 @@ export default {
width: '5px',
opacity: 0.75
},
defaultChapterId:0
defaultChapterId: 0,
splitterModel: 30 //左侧默认占据多大
};
},
created() {
if(this.$route.query.chapter){
this.defaultChapterId=this.$route.query.chapter
if (this.$route.query.chapter) {
this.defaultChapterId = this.$route.query.chapter;
}
if (this.$route.query.courseId) {
this.courseId = this.$route.query.courseId;
......@@ -173,8 +195,7 @@ export default {
}, 3000);
},
methods: {
changeContent(){
},
changeContent() {},
getCourseInfo() {
queryCourseInfo({
CourseId: this.courseId
......@@ -182,25 +203,25 @@ export default {
this.courseInfo = res.Data;
})
},
initRateList(){
getCourseRate({}).then(r=>{
this.rateList=r.Data
initRateList() {
getCourseRate({}).then(r => {
this.rateList = r.Data
})
},
ChapterNameClick(){
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
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)){
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){
if (this.bakObj.CourseRate != this.chapter.CourseRate) {
if (this.chapter.ChildList && this.chapter.ChildList.length > 0) {
this.updateRate()
this.updateRateNode(this.chapter.ChildList)
}
......@@ -208,50 +229,50 @@ export default {
}
}
try {
data.ChapterContent=decodeURIComponent(data.ChapterContent)
data.Objectives=decodeURIComponent(data.Objectives)
data.Requirement=decodeURIComponent(data.Requirement)
data.ChapterContent = decodeURIComponent(data.ChapterContent)
data.Objectives = decodeURIComponent(data.Objectives)
data.Requirement = decodeURIComponent(data.Requirement)
} catch (error) {
}
data.StudyMinutes=data.StudyMinutes.toString()
data.StudyMinutes = data.StudyMinutes.toString()
this.chapter=data
extend(this.bakObj,data)
this.chapter = data
extend(this.bakObj, data)
if(this.$refs.chapterContent){
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
this.rateList.forEach(x => {
if (x.Id == data.CourseRate) {
this.defauRateObj = x
}
})
},
updateRate(){
updateRate() {
setChaptersRate({
CourseRate:this.defauRateObj.CourseRate,
CourseId:this.courseId,
ChapterNo:this.chapter.ChapterNo+"."
}).then(r=>{
CourseRate: this.defauRateObj.CourseRate,
CourseId: this.courseId,
ChapterNo: this.chapter.ChapterNo + "."
}).then(r => {
//this.initTree()
})
},
updateRateNode(arr){
arr.forEach(x=>{
x.CourseRate=this.defauRateObj.Id
x.CourseRateName=this.defauRateObj.Name
if(x.ChildList && x.ChildList.length>0){
updateRateNode(arr) {
arr.forEach(x => {
x.CourseRate = this.defauRateObj.Id
x.CourseRateName = this.defauRateObj.Name
if (x.ChildList && x.ChildList.length > 0) {
this.updateRateNode(x.ChildList)
}
})
},
deleteObj(data){
deleteObj(data) {
this.$q.dialog({
title: '删除确认',
message: '删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗',
......@@ -263,18 +284,18 @@ export default {
label: "确认",
flat: true,
focus: true,
color:"negative"
color: "negative"
}
}).onOk(() => {
deleteChapters({
CourseId:this.courseId,
ChapterNo:data.ChapterNo+".",
ChapterId:data.ChapterId
}).then(r=>{
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)
this.genernalNo("", this.dataList)
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate()
}
......@@ -291,20 +312,20 @@ export default {
})
},
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)
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.submiting = false
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
......@@ -312,39 +333,39 @@ export default {
message: '数据保存成功！',
position: 'top'
})
if(this.bakObj.CourseRate!=this.defauRateObj.Id){
if(this.chapter.ChildList && this.chapter.ChildList.length>0){
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)
extend(this.bakObj, this.chapter)
}
}).catch(e=>{
this.submiting=false
}).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
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(){
moveUp() {
let data = this.$refs.chapterTree.getCurrentNode()
let node=this.$refs.chapterTree.getNode(data.ChapterId)
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)
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))
......@@ -353,20 +374,20 @@ export default {
}
}
},
moveDown(){
moveDown() {
let data = this.$refs.chapterTree.getCurrentNode()
let node=this.$refs.chapterTree.getNode(data.ChapterId)
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)
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))
......@@ -382,13 +403,13 @@ export default {
selectValue(e) {
e.currentTarget.select();
},
changeChapterName(data){
this.editorNodeId=0
let msg={
ChapterId:data.ChapterId,
ChapterName:data.ChapterName
changeChapterName(data) {
this.editorNodeId = 0
let msg = {
ChapterId: data.ChapterId,
ChapterName: data.ChapterName
}
updateChapterName(msg).then(r=>{
updateChapterName(msg).then(r => {
})
},
......@@ -396,18 +417,18 @@ export default {
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,'其它')
let t = this.createNewNode(0, no, 8, '其它')
saveChapter(t).then(r => {
t.ChapterId=r.Data.ChapterId
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
let t = this.createNewNode(parentTemp.ChapterId, no, parentTemp.CourseRate, parentTemp.CourseRateName)
saveChapter(t).then(r => {
t.ChapterId = r.Data.ChapterId
parentTemp.ChildList.push(t)
})
}
......@@ -416,9 +437,9 @@ export default {
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,'其它')
let t = this.createNewNode(0, no, 8, '其它')
saveChapter(t).then(r => {
t.ChapterId=r.Data.ChapterId
t.ChapterId = r.Data.ChapterId
this.dataList.push(t)
})
} else {
......@@ -427,9 +448,9 @@ export default {
}
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)
let t = this.createNewNode(temp.ChapterId, no, temp.CourseRate, temp.CourseRateName)
saveChapter(t).then(r => {
t.ChapterId=r.Data.ChapterId
t.ChapterId = r.Data.ChapterId
temp.ChildList.push(t)
})
}
......@@ -478,17 +499,17 @@ export default {
console.log(r);
this.dataList = r.Data
this.canOptions = false
if(this.defaultChapterId!=0){
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)
let t = this.$refs.chapterTree.getNode(this.defaultChapterId)
this.changeNode(t.data, t, null)
}, 1000);
}
});
},
createNewNode(pid, no,rate,crn) {
createNewNode(pid, no, rate, crn) {
if (this.canOptions) return;
let name = ""
if (pid == 0) {
......@@ -511,7 +532,7 @@ export default {
StudyMinutes: 0,
ChildList: [],
CourseRate: rate,
CourseRateName:crn
CourseRateName: crn
}
},
toChinesNum(num) {
......@@ -522,7 +543,8 @@ export default {
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;
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;
}
......@@ -556,38 +578,40 @@ export default {
})
}
}
};
};
</script>
<style>
.chapter-tree .chapter-node .oops-box,
.chapter-tree .chapter-node:hover .rate-box{
.chapter-tree .chapter-node .oops-box,
.chapter-tree .chapter-node:hover .rate-box {
display: none;
}
}
.chapter-tree .chapter-node:hover .oops-box,
.chapter-tree .chapter-node .rate-box {
.chapter-tree .chapter-node:hover .oops-box,
.chapter-tree .chapter-node .rate-box {
display: block;
}
}
.chapter-tree .el-tree-node__content {
.chapter-tree .el-tree-node__content {
height: 32px !important;
}
}
.chapter-tree .el-tree-node__content:hover,
.chapter-tree .is-current>.el-tree-node__content {
.chapter-tree .el-tree-node__content:hover,
.chapter-tree .is-current>.el-tree-node__content {
background: #eaeff7 !important;
}
}
.chapter-tree .el-tree-node__content{
.chapter-tree .el-tree-node__content {
border-radius: 4px;
}
}
.chapter-tree .tree-input {
.chapter-tree .tree-input {
outline: none;
border: none;
padding: 0 5px;
font-size: 14px;
width: 100%
}
}
</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