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