Skip to content

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

页面修改

parent 8e3fed1c
Show 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,13 +102,15 @@
</template>
<script>
import {
import {
queryChapterTree,
batchUpdateChapterNo,
deleteChapters
} from "../../api/course/index";
import { openURL } from "quasar";
export default {
} from "../../api/course/index";
import {
openURL
} from "quasar";
export default {
meta: {
title: "章节管理"
},
......@@ -174,12 +130,10 @@ export default {
backgroundColor: "rgba(0,0,0,0.02)",
color: "#555"
},
contentActiveStyle: {
backgroundColor: "#eee",
color: "black"
},
thumbStyle: {
right: "2px",
borderRadius: "5px",
......@@ -191,10 +145,20 @@ export default {
updateChapters: [],
updateNo: false,
viewObj: null,
isViewer:false
isViewer: false,
IsOperateAuth: false, //是否有章节【新增、修改、删除】权限
};
},
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;
}
})
}
if (this.$route.query.CourseId) {
this.CourseId = this.$route.query.CourseId;
this.msg.CourseId = this.CourseId;
......@@ -205,18 +169,21 @@ export default {
this.getchaperTree();
},
methods: {
viewDetail(obj){
viewDetail(obj) {
try {
obj.ChapterContent=decodeURIComponent(obj.ChapterContent)
obj.Objectives=decodeURIComponent(obj.Objectives)
obj.Requirement=decodeURIComponent(obj.Requirement)
obj.ChapterContent = decodeURIComponent(obj.ChapterContent)
obj.Objectives = decodeURIComponent(obj.Objectives)
obj.Requirement = decodeURIComponent(obj.Requirement)
} catch (error) {
}
this.viewObj=obj
this.isViewer=true
this.viewObj = obj
this.isViewer = true
},
tableRowClassName({ row, rowIndex }) {
tableRowClassName({
row,
rowIndex
}) {
if (row.ChapterNo.indexOf(".") == -1) {
return "first-level-node";
}
......@@ -226,8 +193,7 @@ export default {
this.$q
.dialog({
title: "删除确认",
message:
"删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗",
message: "删除章节节点将会连同下属章节也会一并删除且无法恢复，你确定要这样执行吗",
cancel: {
label: "取消删除",
flat: true
......@@ -334,29 +300,30 @@ export default {
});
}
}
};
};
</script>
<style>
.tree-tab-chapter thead {
.tree-tab-chapter thead {
display: none;
}
}
.tree-tab-chapter td {
.tree-tab-chapter td {
border-bottom: none !important;
padding: 5px 0 !important;
}
}
.tree-tab-chapter::before {
.tree-tab-chapter::before {
display: none !important;
}
}
.tree-tab-chapter .el-table__expand-icon {
.tree-tab-chapter .el-table__expand-icon {
/* display: none !important; */
margin-right: 0 !important;
}
}
.tree-tab-chapter .catalog_num {
.tree-tab-chapter .catalog_num {
height: 20px;
padding-left: 14px;
background: #d0d5db;
......@@ -366,9 +333,9 @@ export default {
left: 15px;
top: 50%;
margin-top: -10px;
}
}
.tree-tab-chapter .catalog_num > span {
.tree-tab-chapter .catalog_num>span {
min-width: 24px;
height: 24px;
padding: 4px;
......@@ -376,9 +343,9 @@ export default {
background: #d0d5db;
display: block;
border-radius: 20px;
}
}
.tree-tab-chapter .catalog_num > span > i {
.tree-tab-chapter .catalog_num>span>i {
min-width: 16px;
height: 16px;
padding: 0 2px;
......@@ -391,34 +358,38 @@ export default {
display: block;
text-align: center;
font-style: normal;
}
}
.tree-tab-chapter .first-level-node {
.tree-tab-chapter .first-level-node {
background-color: #f5f7fa !important;
}
}
.tree-tab-chapter .first-level-node td:first-child {
.tree-tab-chapter .first-level-node td:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
}
.tree-tab-chapter .first-level-node td:last-child {
.tree-tab-chapter .first-level-node td:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
}
.tree-tab-chapter tr .op-box {
.tree-tab-chapter tr .op-box {
display: none;
}
}
.tree-tab-chapter tr:hover .op-box {
.tree-tab-chapter tr:hover .op-box {
display: block;
}
.tree-tab-chapter .el-table__indent{
}
.tree-tab-chapter .el-table__indent {
display: none !important;
}
.tree-tab-chapter .el-table__expand-icon{
}
.tree-tab-chapter .el-table__expand-icon {
display: none !important;
}
/**@import url('~assets/css/table.sass')*/
}
/**@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