这个东西可以用sessionstorage 再添加时判断当前数据列表的长度是不是0，如果为0将序号的值赋值为0 否则取出sessionstorage中存放的序号的值。
按钮
<el-button
type="primary"
@click="createTest"
>
+创建课程章节
</el-button>sessionstorage方法
data(){
return{
kcid:0,
zjList:[]
}
}
created(){
this.findTest()
},
methods:{
//查询方法
findTest(){
getKcById({kcid:this.kcid}).then(res =>{
this.zjList = res.data.data
// this.zjList 为章节/大题列表的数据 this.testid 为创建章节/大题列表名称时的序号
// this.test 最好是再 created 生命周期里 按照下面方法赋值
if(this.zjList == 0){
this.testid = 0
}
if(this.zjList != 0){
this.testid = JSON.parse(sessionStorage('testid'))
}
})
},
createTest(){
this.testid++
//createkcxj 是接口名称 kcid 编辑名称 分类 时间后返回的id name 创建的名称
createkcxj({kcid:this.kcid,name: '课程章节' + this.testid }).then( res =>{
// res.data.data.status 为后端返回的状态
if (res.data.status == 200) {
// 请求成功后存储
sessionStorage.setItem('testid',JSON.stringify(this.testid))
this.$message({
showClose: true,
message: '添加成功',
type: 'success'
})
// 查询列表数据方法 增删改后都要查一次
this.findTest()
} else {
this.$message({
showClose: true,
message: res.data.msg,
type: 'error'
})
}
}).catch(err =>{
console.log(err)
})
}
}
另一个太长了
html部分 只需要看关于创建课程章节的方法
<template>
<div class="second">
<div class="designTest">
<div class="deshead">
<div class="des_lef">
<el-button
type="primary"
@click="createTest"
>
+创建课程章节
</el-button>
</div>
</div>
<!-- 创建的课程章节 -->
<div class="course_list">
<div
v-for="(list, index) in kcList"
:key="index"
class="course_list_item"
>
<div class="btn_report">
<div class="btn_report_title">
{{ list.name }}
<el-popover
placement="bottom"
width="200"
trigger="click"
>
<div class="popover_edit_itle">
<el-input
v-model="list.name"
type="text"
/>
<div class="button">
<el-button @click="editTitleClick(list)">
修改
</el-button>
</div>
</div>
<span slot="reference">
<span class="iconfont icon-icon_edit" />
</span>
</el-popover>
</div>
<div class="btn_report_cz">
<el-button
icon="el-icon-delete"
@click="deleteChapter(list)"
>
删除章节及子章节
</el-button>
<el-popover
width="20"
placement="bottom"
trigger="click"
>
<div class="popover_px">
<div>
<el-button
type="text"
@click="pxClick(list, 0)"
>
上移
</el-button>
</div>
<div>
<el-button
type="text"
@click="pxClick(list, 1)"
>
下移
</el-button>
</div>
</div>
<el-button
slot="reference"
class="px_botton"
icon="el-icon-arrow-down"
/>
</el-popover>
</div>
</div>
<!-- 课程小结表格 -->
<div class="list_table">
<el-table
:data="list.kcxjList"
border
style="width: 100%"
:header-cell-style="{ background: '#eff2f5' }"
>
<el-table-column
type="index"
width="50"
label="序号"
align="center"
/>
<el-table-column
prop="name"
label="章节名称"
min-width="250"
show-overflow-tooltip
/>
<el-table-column
prop="zjnr"
label="内容"
min-width="250"
show-overflow-tooltip
/>
<el-table-column
prop="type"
label="类型"
width="150"
show-overflow-tooltip
>
<template slot-scope="scope">
{{
scope.row.tjfs == 0
? '文本'
: scope.row.tjfs == 1
? '视频'
: scope.row.tjfs == 2
? '文档'
: ''
}}
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="dialogShow(scope.row, 2, scope.row.tjfs,scope.row,scope.$index)"
>
编辑
</el-button>
<el-button
type="text"
size="small"
@click="deleteZzj(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="add_table_list">
<div @click="dialogShow(null, 2, 0,list,index)">
<span class="iconfont icon-tuwenguanli" />
添加图文
</div>
<div @click="dialogShow(null, 2, 1,list,index)">
<span class="iconfont icon-shipin" />
添加视频
</div>
<div @click="dialogShow(null, 2, 2,list,index)">
<span class="iconfont icon-icon_shiyongwendang" />
添加文档
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="fot">
<div class="footer">
<el-button @click="saveCourse">
完成设计&去发布课程
</el-button>
<el-button @click="editClass(1, '', tl)">
课时设置
</el-button>
<el-button
icon="el-icon-top-left"
@click="toback"
>
上一步
</el-button>
</div>
</div>
<el-dialog
:close-on-click-modal="false"
:width="dialogWidth + 'px'"
height="100%"
append-to-body
:title="dialogTitle"
:visible.sync="isShowDialog"
>
<components
:is="componentsName"
v-if="isShowDialog"
:dialog-info="dialogInfo"
:is-img-text="isImgText"
:kczj-id="diakczjId"
:kc-id="diakcId"
:tl="tl"
:dialog-index="dialogIndex"
@updataList="findKcById"
@addorEdit="addoredit"
@close="isShowDialog = false"
/>
</el-dialog>
</div>
</template>data数据
data(){
reutrn{
// 排序
isPopoverPx: false,
kcList: [],
// 子章节数据
zzjList: [],
// 弹框配置参数
isShowDialog: false,
dialogTitle: '',
componentsName: '',
dialogWidth: 500,
dialogInfo: null,
dialogIndex: null,
// 是否图文/文档
isImgText: 0,
// 组件
dialogType: {
1: {
title: '课程设置',
name: 'SetUp',
width: 800
},
2: {
title: '新增&编辑章节',
name: 'Imgfile',
width: 800
}
},
// 新增章节名称
testid: 0,
// 查询小节需要的id
kczjId: null,
kcId: null,
// 添加内容需要的参数
diakczjId: null,
diakcId: null,
form: {
},
tl: null
}
}created
created(){
this.findTest()
this.findKcById()
}methods
// 组件方法
methods: {
// 查询章节
findTest() {
// 获取课程ID
this.kcId = this.$route.query.kcId
// 获取课程列表数据
getByKc({ kcId: this.kcId }).then(res => {
this.kcList = res.data.data
if (this.kcList.length == 0) {
this.testid = 0
}
// 判断课程章节的名称
if (this.kcList.length > 0) {
this.testid = this.kcList[this.kcList.length - 1].name.split('节')[1]
if (this.kcList.length > 1) {
for (let i = 0; i < this.kcList.length; i++) {
if (i + 1 < this.kcList.length) {
var a = this.kcList[i]
var b = this.kcList[i + 1]
var c = 0
if (a.name.split('节')[1] < b.name.split('节')[1]) {
c = b.name.split('节')[1]
}
if (a.name.split('节')[1] > b.name.split('节')[1]) {
c = a.name.split('节')[1]
}
this.testid = c
}
}
}
// 遍历课程列表数据查询赋值章节内容
for (let j = 0; j < this.kcList.length; j++) {
const arr = this.kcList[j].kcxjList
for (let k = 0; k < arr.length; k++) {
// 查询章节内容
getkcxjByKczjIdAndDeleteFlag({ kczjId: arr[k].kczjId, deleteFlag: arr[k].deleteFlag }).then(res => {
// 给视频/文档小节中添加章节内容
if (res.data.data[k].tjfs != 0) {
this.kcList[j].kcxjList[k].zjnr = res.data.data[k].fileName
}
})
}
}
}
// console.log('章节序号', this.testid)
})
},
// 查询课程设置数据
findKcById() {
this.kcId = JSON.parse(this.$route.query.kcId)
// console.log('kcId', this.kcId)
// console.log('kcId', typeof this.kcId)
getPrimary({ kcId: this.kcId }).then(res => {
// console.log('getPrimary', res)
this.tl = res.data.data.tl
})
},
// 添加章节
createTest() {
this.testid++
addKczj({ kcId: this.kcId, name: '课程章节' + this.testid }).then(res => {
// console.log(res)
// this.kczjId = res.data.kczjId
// sessionStorage.setItem('testId', JSON.stringify(this.testid))
if (res.data.status == 200) {
this.$message({
showClose: true,
message: '添加成功',
type: 'success'
})
this.findTest()
} else {
this.$message({
showClose: true,
message: res.data.msg,
type: 'error'
})
}
}).catch(err => {
console.log(err)
})
var list = {
name: ''
}
this.kcList = this.kcList.concat(list)
},
// 修改章节标题
editTitleClick(item) {
// console.log('item', item)
updateKczj({ id: item.id, name: item.name }).then(res => {
// console.log('updateKczj', res)
if (res.data.status == 200) {
this.$message({
showClose: true,
message: '修改成功',
type: 'success'
})
document.body.click()
} else {
this.$message({
showClose: true,
message: res.data.msg,
type: 'error'
})
}
})
},
// 删除
deleteChapter(row) {
this.$confirm('确认删除章节及子章节吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteKczjAndKcxj({ id: row.id, kcId: row.kcId }).then(res => {
if (res.data.status == 200) {
this.$message({
showClose: true,
message: '删除成功',
type: 'success'
})
this.findTest()
} else {
this.$message({
showClose: true,
message: res.data.msg,
type: 'error'
})
}
})
})
.catch(() => {})
},
// 删除子章节
deleteZzj(row) {
this.$confirm('确认删除该子章节吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
// console.log(row)
deleteKcxj({ id: row.id }).then(res => {
if (res.data.status == 200) {
this.$message({
showClose: true,
message: '删除成功',
type: 'success'
})
this.findTest()
} else {
this.$message({
showClose: true,
message: res.data.msg,
type: 'error'
})
}
})
})
.catch(() => {})
},
// 移动章节
pxClick(data, ord) {
data.orderState = ord
console.log('data', data)
var order = ''
ord == 0 ? order = '上移' : ord == 1 ? order = '下移' : ''
tabbingOrderzj(data).then(res => {
console.log('tabbingOrderzj', res)
if (res.data.status == 200) {
this.$message({
showClose: true,
message: order + '成功',
type: 'success'
})
this.findTest()
document.body.click()
} else {
this.$message({
showClose: true,
message: res.data.msg,
type: 'success'
})
document.body.click()
}
})
},
// 完成设计&去发布课程
saveCourse() {
console.log()
this.$set(this.form, 'url', conf.studyUrl + 'v2/lesson/' + this.kcId)
console.log(' this.form', this.form)
updateKc(this.form).then(res => {
console.log('updatekc', res)
if (res.data.status == 200) {
this.$message({
showClose: true,
message: '修改成功',
type: 'success'
})
this.$router.push({
path: '/setcourse',
query: {
page: 'third',
kcId: this.kcId
}
})
} else {
this.$message({
showClose: true,
message: res.data.msg,
type: 'error'
})
}
})
},
// 编辑课程小节弹窗
dialogShow(row, type, index, item, i) {
this.diakczjId = item.id
this.diakcId = item.kcId
this.isImgText = index + 1
const dialog = this.dialogType[type]
this.dialogTitle = this.dialogType[type].title
this.dialogInfo = row || null
this.componentsName = dialog.name
this.dialogWidth = dialog.width
this.isShowDialog = true
this.dialogIndex = i
},
// 课程设置弹窗
editClass(type, name, data) {
this.activeTitle = name
const dialog = this.dialogType[type]
this.dialogInfo = data
this.componentsName = dialog.name
this.dialogWidth = dialog.width
this.isShowDialog = true
if (type === 4) {
this.dialogTitle =
name === 'first' ? '学习统计' : name === 'second' ? '查看评论' : ''
} else if (type === 2) {
this.tl = data
} else {
this.dialogTitle = this.dialogType[type].title
}
},
// 上一步
toback() {
this.$router.push({
path: '/setcourse',
query: {
page: 'first',
kcId: this.kcId
}
})
},
// 添加内容保存之后关闭弹窗
addoredit(item) {
this.isShowDialog = item
this.findTest()
}
}css部分
.second {
.designTest {
width: 100%;
.course_list {
margin-top: 10px;
.course_list_item {
width: 98%;
margin-bottom: 4px;
text-align: left;
background: #fff;
border: 1px solid #e6e9ee;
padding-top: 10px;
font-size: 13px;
margin: 0 auto;
border-radius: 3px;
margin-bottom: 20px;
.btn_report {
width: 98%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.btn_report_title {
font-size: 16px;
color: #333333;
}
.btn_report_cz {
.px_botton {
margin-left: -10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
.list_table {
width: 100%;
margin-top: 10px;
}
.add_table_list {
border: 1px solid #ebeef5;
border-top: none;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
div {
color: #333;
padding: 6px;
border: 1px solid #ccc;
margin: 0 5px;
border-radius: 2px;
.iconfont {
font-size: 14px;
}
}
}
}
}
.deshead {
width: 98%;
margin-bottom: 4px;
text-align: left;
background: #fff;
border: 1px solid #e6e9ee;
padding: 8px 4px 8px 4px;
font-size: 13px;
margin: 0 auto;
.des_lef {
margin-left: 10px;
}
}
}
// 底部按钮
.fot {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #fff;
.footer {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #fff;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
}
}
}
.popover_edit_itle {
width: 100%;
.button {
text-align: right;
margin-top: 20px;
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}
}
.popover_px {
text-align: center;
.el-button {
font-size: 16px;
color: #333333;
}
.el-button:hover {
color: #409eff;
}
}
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
