Skip to content

C
confucius
Commit d5738c42 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 8e3fed1c
Hide whitespace changes
Inline Side-by-side
Showing with 283 additions and 312 deletions
src/pages/course/chapter.vue
View file @ d5738c42
......@@ -3,67 +3,36 @@
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md"></div>
<div class="page-option">
<q-btn
color="accent"
size="sm"
class="q-mr-md"
icon="add"
label="编辑章节"
@click="EditChapter(null)"
/>
<q-btn v-if="IsOperateAuth" color="accent" size="sm" class="q-mr-md" icon="add" label="编辑章节"
@click="EditChapter(null)" />
</div>
</div>
<div class="page-content" style="height:calc(100% - 42px)">
<q-scroll-area
:thumb-style="thumbStyle"
:content-style="contentStyle"
:content-active-style="contentActiveStyle"
style="height: 100%; width: 100%;"
>
<el-table
:data="dataList"
v-loading="loading"
:expand-row-keys="expandKeys"
:default-expand-all="true"
:row-class-name="tableRowClassName"
class="tree-tab-chapter"
style="width: 100%;margin-bottom: 20px;"
row-key="ChapterId"
ref="chapterTab"
@row-click="rowsClick"
:tree-props="{ children: 'ChildList', hasChildren: 'hasChildren' }"
>
<q-scroll-area :thumb-style="thumbStyle" :content-style="contentStyle" :content-active-style="contentActiveStyle"
style="height: 100%; width: 100%;">
<el-table :data="dataList" v-loading="loading" :expand-row-keys="expandKeys" :default-expand-all="true"
:row-class-name="tableRowClassName" class="tree-tab-chapter" style="width: 100%;margin-bottom: 20px;"
row-key="ChapterId" ref="chapterTab" @row-click="rowsClick"
:tree-props="{ children: 'ChildList', hasChildren: 'hasChildren' }">
<el-table-column prop="date" label="章节" width="450">
<template slot-scope="scope">
<div style="display: inline-block;">
<div class="flex q-ml-md">
<div
class="catalog_num"
v-if="scope.row.ChapterNo.indexOf('.') == -1"
>
<div class="catalog_num" v-if="scope.row.ChapterNo.indexOf('.') == -1">
<span>
<i>{{ scope.row.ChapterNo }}</i>
</span>
</div>
<div
style="margin-left: 36px;width:360px;"
class="ellipsis"
v-if="scope.row.ChapterNo.indexOf('.') == -1"
>
<div style="margin-left: 36px;width:360px;" class="ellipsis"
v-if="scope.row.ChapterNo.indexOf('.') == -1">
{{ scope.row.ChapterName }}
</div>
<div
v-if="scope.row.ChapterNo.indexOf('.') != -1"
:style="{ marginLeft: 20 * (scope.row.ChapterNo.split('.').length+1 - 2) + 'px' }"
>
<div v-if="scope.row.ChapterNo.indexOf('.') != -1"
:style="{ marginLeft: 20 * (scope.row.ChapterNo.split('.').length+1 - 2) + 'px' }">
{{ scope.row.ChapterNo }}
</div>
<div
v-if="scope.row.ChapterNo.indexOf('.') != -1"
style="margin-left: 12px;"
class="ellipsis"
:style="{width:(350-(20 * (scope.row.ChapterNo.split('.').length+1 - 2)))+'px'}"
>
<div v-if="scope.row.ChapterNo.indexOf('.') != -1" style="margin-left: 12px;" class="ellipsis"
:style="{width:(350-(20 * (scope.row.ChapterNo.split('.').length+1 - 2)))+'px'}">
{{ scope.row.ChapterName }}
</div>
</div>
......@@ -77,7 +46,8 @@
</el-table-column>
<el-table-column prop="address" label="章节详情" width="200">
<template slot-scope="scope">
<q-btn flat color="primary" v-if="scope.row.ChapterNo.indexOf('.') != -1" @click.stop="viewDetail(scope.row)">章节详情</q-btn>
<q-btn flat color="primary" v-if="scope.row.ChapterNo.indexOf('.') != -1"
@click.stop="viewDetail(scope.row)">章节详情</q-btn>
</template>
</el-table-column>
<el-table-column prop="address" label="状态" width="100">
......@@ -91,28 +61,11 @@
<el-table-column label="操作">
<template slot-scope="scope">
<div class="text-right op-box">
<q-btn
size="xs"
class="q-mr-md"
color="dark"
@click.stop="EditChapter(scope.row.ChapterId)"
>修改</q-btn
>
<!--<q-btn
size="xs"
flat
color="primary"
@click.stop=""
class="q-mr-md"
>设置</q-btn
>-->
<q-btn
size="xs"
flat
color="negative"
@click.stop="deleteObj(scope.row)"
>删除</q-btn
>
<template v-if="IsOperateAuth">
<q-btn size="xs" class="q-mr-md" color="dark" @click.stop="EditChapter(scope.row.ChapterId)">修改
</q-btn>
<q-btn size="xs" flat color="negative" @click.stop="deleteObj(scope.row)">删除</q-btn>
</template>
</div>
</template>
</el-table-column>
......@@ -129,7 +82,8 @@
<q-card-section>
<div class="text-subtitle1 q-mb-md">章节学习内容</div>
<div v-html="viewObj.ChapterContent" v-if="viewObj.ChapterContent!=''" class="q-pa-md bg-grey-2 rounded-borders"></div>
<div v-html="viewObj.ChapterContent" v-if="viewObj.ChapterContent!=''"
class="q-pa-md bg-grey-2 rounded-borders"></div>
<div class="text-grey-3 text-center" v-else>未添加内容</div>
</q-card-section>
<q-card-section>
......@@ -148,277 +102,294 @@
</template>
<script>
import {
queryChapterTree,
batchUpdateChapterNo,
deleteChapters
} from "../../api/course/index";
import { openURL } from "quasar";
export default {
meta: {
title: "章节管理"
},
computed: {},
watch: {},
data() {
return {
currentUrl: "",
selectedRowID: {},
dataList: [],
loading: true,
msg: {
CourseId: 0
},
CourseId: 0,
contentStyle: {
backgroundColor: "rgba(0,0,0,0.02)",
color: "#555"
},
contentActiveStyle: {
backgroundColor: "#eee",
color: "black"
},
thumbStyle: {
right: "2px",
borderRadius: "5px",
backgroundColor: "#027be3",
width: "5px",
opacity: 0.75
},
expandKeys: [],
updateChapters: [],
updateNo: false,
viewObj: null,
isViewer:false
};
},
created() {
if (this.$route.query.CourseId) {
this.CourseId = this.$route.query.CourseId;
this.msg.CourseId = this.CourseId;
}
},
mounted() {
this.currentUrl = this.$route.path;
this.getchaperTree();
},
methods: {
viewDetail(obj){
try {
obj.ChapterContent=decodeURIComponent(obj.ChapterContent)
obj.Objectives=decodeURIComponent(obj.Objectives)
obj.Requirement=decodeURIComponent(obj.Requirement)
} catch (error) {
}
this.viewObj=obj
this.isViewer=true
import {
queryChapterTree,
batchUpdateChapterNo,
deleteChapters
} from "../../api/course/index";
import {
openURL
} from "quasar";
export default {
meta: {
title: "章节管理"
},
tableRowClassName({ row, rowIndex }) {
if (row.ChapterNo.indexOf(".") == -1) {
return "first-level-node";
}
return "";
computed: {},
watch: {},
data() {
return {
currentUrl: "",
selectedRowID: {},
dataList: [],
loading: true,
msg: {
CourseId: 0
},
CourseId: 0,
contentStyle: {
backgroundColor: "rgba(0,0,0,0.02)",
color: "#555"
},
contentActiveStyle: {
backgroundColor: "#eee",
color: "black"
},
thumbStyle: {
right: "2px",
borderRadius: "5px",
backgroundColor: "#027be3",
width: "5px",
opacity: 0.75
},
expandKeys: [],
updateChapters: [],
updateNo: false,
viewObj: null,
isViewer: false,
IsOperateAuth: false, //是否有章节【新增、修改、删除】权限
};
},
deleteObj(data) {
this.$q
.dialog({
title: "删除确认",
message:
"删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗",
cancel: {
label: "取消删除",
flat: true
},
ok: {
label: "确认",
flat: true,
focus: true,
color: "negative"
created() {
var localStorageData = window.localStorage["loginUserInfo"];
let ActionMenuList = JSON.parse(localStorageData).data.ActionMenuList
if (ActionMenuList && ActionMenuList.length > 0) {
ActionMenuList.forEach(x => {
if (x.FunctionCode == 'Operate_CourseChapter') {
this.IsOperateAuth = true;
}
})
.onOk(() => {
deleteChapters({
CourseId: this.msg.CourseId,
ChapterNo: data.ChapterNo + ".",
ChapterId: data.ChapterId
}).then(r => {
this.updateNo = true;
this.getchaperTree();
//this.$refs.chapterTree.remove(data.ChapterId);
this.$q.notify({
icon: "iconfont icon-chenggong",
color: "accent",
timeout: 2000,
message: "删除成功！",
position: "top"
});
});
})
.onCancel(() => {
// console.log('>>>> Cancel')
});
}
if (this.$route.query.CourseId) {
this.CourseId = this.$route.query.CourseId;
this.msg.CourseId = this.CourseId;
}
},
batchUpdate() {
batchUpdateChapterNo(this.updateChapters).then(r => {});
mounted() {
this.currentUrl = this.$route.path;
this.getchaperTree();
},
genernalNo(parentNo, list) {
list.forEach((x, i) => {
if (parentNo != "") {
x.ChapterNo = parentNo + "." + (i + 1);
} else {
x.ChapterNo = (i + 1).toString();
methods: {
viewDetail(obj) {
try {
obj.ChapterContent = decodeURIComponent(obj.ChapterContent)
obj.Objectives = decodeURIComponent(obj.Objectives)
obj.Requirement = decodeURIComponent(obj.Requirement)
} catch (error) {
}
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);
this.viewObj = obj
this.isViewer = true
},
tableRowClassName({
row,
rowIndex
}) {
if (row.ChapterNo.indexOf(".") == -1) {
return "first-level-node";
}
});
return list;
},
rowsClick(row, column, event) {
//console.log(row,event)
this.$refs.chapterTab.toggleRowExpansion(row);
},
//新增修改章节
EditChapter(obj) {
// this.$router.push({
// path: '/chapter-editor?courseId='+this.CourseId
// });
if (!obj) {
openURL(
window.location.origin +
return "";
},
deleteObj(data) {
this.$q
.dialog({
title: "删除确认",
message: "删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗",
cancel: {
label: "取消删除",
flat: true
},
ok: {
label: "确认",
flat: true,
focus: true,
color: "negative"
}
})
.onOk(() => {
deleteChapters({
CourseId: this.msg.CourseId,
ChapterNo: data.ChapterNo + ".",
ChapterId: data.ChapterId
}).then(r => {
this.updateNo = true;
this.getchaperTree();
//this.$refs.chapterTree.remove(data.ChapterId);
this.$q.notify({
icon: "iconfont icon-chenggong",
color: "accent",
timeout: 2000,
message: "删除成功！",
position: "top"
});
});
})
.onCancel(() => {
// console.log('>>>> Cancel')
});
},
batchUpdate() {
batchUpdateChapterNo(this.updateChapters).then(r => {});
},
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;
},
rowsClick(row, column, event) {
//console.log(row,event)
this.$refs.chapterTab.toggleRowExpansion(row);
},
//新增修改章节
EditChapter(obj) {
// this.$router.push({
// path: '/chapter-editor?courseId='+this.CourseId
// });
if (!obj) {
openURL(
window.location.origin +
"/#/course/chapter-editor?courseId=" +
this.CourseId
);
} else {
openURL(
window.location.origin +
);
} else {
openURL(
window.location.origin +
"/#/course/chapter-editor?courseId=" +
this.CourseId +
"&chapter=" +
obj
);
}
},
//获取菜单分页列表
getchaperTree() {
this.loading = true;
queryChapterTree(this.msg)
.then(res => {
this.loading = false;
res.Data.forEach(x => {
this.expandKeys.push(x.ChapterId);
});
console.log(this.expandKeys);
);
}
},
//获取菜单分页列表
getchaperTree() {
this.loading = true;
queryChapterTree(this.msg)
.then(res => {
this.loading = false;
res.Data.forEach(x => {
this.expandKeys.push(x.ChapterId);
});
console.log(this.expandKeys);
this.dataList = res.Data;
if (this.updateNo) {
this.updateNo = false;
this.updateChapters = [];
this.genernalNo("", this.dataList);
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate();
this.dataList = res.Data;
if (this.updateNo) {
this.updateNo = false;
this.updateChapters = [];
this.genernalNo("", this.dataList);
if (this.updateChapters && this.updateChapters.length > 0) {
this.batchUpdate();
}
}
}
})
.catch(() => {
this.loading = false;
});
})
.catch(() => {
this.loading = false;
});
}
}
}
};
};
</script>
<style>
.tree-tab-chapter thead {
display: none;
}
.tree-tab-chapter thead {
display: none;
}
.tree-tab-chapter td {
border-bottom: none !important;
padding: 5px 0 !important;
}
.tree-tab-chapter td {
border-bottom: none !important;
padding: 5px 0 !important;
}
.tree-tab-chapter::before {
display: none !important;
}
.tree-tab-chapter::before {
display: none !important;
}
.tree-tab-chapter .el-table__expand-icon {
/* display: none !important; */
margin-right: 0 !important;
}
.tree-tab-chapter .catalog_num {
height: 20px;
padding-left: 14px;
background: #d0d5db;
border-radius: 10px;
margin: 10px 20px 0 0;
position: absolute;
left: 15px;
top: 50%;
margin-top: -10px;
}
.tree-tab-chapter .catalog_num>span {
min-width: 24px;
height: 24px;
padding: 4px;
margin: -2px -4px 0 0;
background: #d0d5db;
display: block;
border-radius: 20px;
}
.tree-tab-chapter .catalog_num>span>i {
min-width: 16px;
height: 16px;
padding: 0 2px;
line-height: 16px;
background: #fff;
font-size: 12px;
font-family: Arial;
color: #a8a8b3;
border-radius: 20px;
display: block;
text-align: center;
font-style: normal;
}
.tree-tab-chapter .el-table__expand-icon {
/* display: none !important; */
margin-right: 0 !important;
}
.tree-tab-chapter .first-level-node {
background-color: #f5f7fa !important;
}
.tree-tab-chapter .catalog_num {
height: 20px;
padding-left: 14px;
background: #d0d5db;
border-radius: 10px;
margin: 10px 20px 0 0;
position: absolute;
left: 15px;
top: 50%;
margin-top: -10px;
}
.tree-tab-chapter .first-level-node td:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.tree-tab-chapter .catalog_num > span {
min-width: 24px;
height: 24px;
padding: 4px;
margin: -2px -4px 0 0;
background: #d0d5db;
display: block;
border-radius: 20px;
}
.tree-tab-chapter .first-level-node td:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.tree-tab-chapter .catalog_num > span > i {
min-width: 16px;
height: 16px;
padding: 0 2px;
line-height: 16px;
background: #fff;
font-size: 12px;
font-family: Arial;
color: #a8a8b3;
border-radius: 20px;
display: block;
text-align: center;
font-style: normal;
}
.tree-tab-chapter tr .op-box {
display: none;
}
.tree-tab-chapter .first-level-node {
background-color: #f5f7fa !important;
}
.tree-tab-chapter tr:hover .op-box {
display: block;
}
.tree-tab-chapter .first-level-node td:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.tree-tab-chapter .el-table__indent {
display: none !important;
}
.tree-tab-chapter .first-level-node td:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.tree-tab-chapter .el-table__expand-icon {
display: none !important;
}
.tree-tab-chapter tr .op-box {
display: none;
}
/**@import url('~assets/css/table.sass')*/
.tree-tab-chapter tr:hover .op-box {
display: block;
}
.tree-tab-chapter .el-table__indent{
display: none !important;
}
.tree-tab-chapter .el-table__expand-icon{
display: none !important;
}
/**@import url('~assets/css/table.sass')*/
</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