605 lines
17 KiB
Vue
605 lines
17 KiB
Vue
<template>
|
||
<div class="mod-config">
|
||
<el-form
|
||
:inline="true"
|
||
:model="dataForm"
|
||
@keyup.enter.native="getDataList()"
|
||
>
|
||
<el-form-item label="课程名称">
|
||
<el-input
|
||
v-model="query.courseName"
|
||
placeholder="课程名称"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="平台分类">
|
||
<el-cascader
|
||
clearable
|
||
:props="{
|
||
label: 'title',
|
||
value: 'id',
|
||
checkStrictly: true
|
||
}"
|
||
v-model="selectType"
|
||
:options="options"
|
||
@change="handleChange"
|
||
>
|
||
</el-cascader>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="出版社名称">
|
||
<el-input v-model="query.publisherName" placeholder="出版社名称" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="作者姓名">
|
||
<el-input v-model="query.authorName" placeholder="作者姓名" clearable></el-input>
|
||
</el-form-item> -->
|
||
<el-form-item>
|
||
<el-button
|
||
@click="
|
||
pageIndex = 1;
|
||
getDataList();
|
||
"
|
||
>查询</el-button
|
||
>
|
||
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
|
||
<!-- <el-button v-if="isAuth('book:book:delete')" type="danger" @click="deleteHandle()"
|
||
:disabled="dataListSelections.length <= 0">批量删除</el-button> -->
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table
|
||
:data="dataList"
|
||
border
|
||
v-loading="dataListLoading"
|
||
style="width: 100%;"
|
||
>
|
||
<!-- <el-table-column min-width="155px
|
||
" prop="delFlag" header-align="center" align="center" label="状态">
|
||
<template slot-scope="scope">
|
||
<el-switch :active-value=1 :inactive-value=0 style="display: block" v-model="scope.row.delFlag" disabled
|
||
@change="SwitchChange(scope.row)" active-color="#13ce66" inactive-color="#ff4949" active-text="未删"
|
||
inactive-text="已删">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column> -->
|
||
|
||
<el-table-column
|
||
prop="title"
|
||
header-align="center"
|
||
align="center"
|
||
label="课程名"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<span style="font-weight:bold; font-size:16px">{{ scope.row.title }}</span><br>
|
||
<span style="color:#999">( 创建时间：{{ scope.row.createTime}} )</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="课程图"
|
||
header-align="center"
|
||
align="center"
|
||
width="100"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div
|
||
v-if="scope.row.image"
|
||
style="width:100%;display: flex;
|
||
align-items: center;justify-content: center;"
|
||
>
|
||
<img :src="scope.row.image" alt="" width="40px" height="40px" />
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="sort"
|
||
header-align="center"
|
||
align="center"
|
||
label="关联商品"
|
||
width="600"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div style=" " v-if="scope.row.courseCatalogueEntityList.length == 0">
|
||
该课程还未添加目录
|
||
</div>
|
||
<div
|
||
v-if="scope.row.courseCatalogueEntityList.length > 0"
|
||
v-for="(v, i) in scope.row.courseCatalogueEntityList"
|
||
:style="
|
||
`overflow: hidden;display: flex;
|
||
align-items: center;padding:10px 0;${
|
||
i == scope.row.courseCatalogueEntityList.length - 1
|
||
? 'border:none;'
|
||
: 'border-bottom: 1px solid #17b3a3a1;'
|
||
}`
|
||
"
|
||
>
|
||
<div
|
||
style="width: 90px;float: left;font-weight: 800;border: 1px solid #bbbb; border-radius: 4px;line-height: 30px;"
|
||
>
|
||
<!-- <el-tag type="success" > -->
|
||
{{ v.title }}
|
||
<!-- </el-tag> -->
|
||
</div>
|
||
|
||
<div
|
||
class="right"
|
||
:style="
|
||
`width: calc(100% - ${
|
||
scope.row.courseCatalogueEntityList.length > 1 ? 100 : 0
|
||
}px);float: right;`
|
||
"
|
||
>
|
||
<div v-if="v.productList.length == 0">
|
||
暂未关联商品
|
||
</div>
|
||
<div
|
||
v-for="(item, i) in v.productList"
|
||
v-if="v.productList.length > 0"
|
||
>
|
||
{{ item.productName }}
|
||
<span style="color: #ff5b36;"
|
||
>￥{{
|
||
item.activePrice ? item.activePrice : item.price
|
||
}}</span
|
||
>
|
||
<span
|
||
style="color: #9c9a9b;text-decoration:line-through;"
|
||
v-if="item.activePrice > 0"
|
||
>￥{{ item.price }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="sort"
|
||
width="80"
|
||
header-align="center"
|
||
align="center"
|
||
label="排序"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
fixed="right"
|
||
header-align="center"
|
||
align="center"
|
||
width="240"
|
||
label="操作"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<router-link
|
||
:to="{
|
||
path: 'course-courseCatalogue',
|
||
query: { id: scope.row.id, pageIndex }
|
||
}"
|
||
>
|
||
<el-button type="text" size="small">目录管理</el-button>
|
||
</router-link>
|
||
<el-button
|
||
type="text"
|
||
size="small"
|
||
@click="addOrUpdateHandle(scope.row)"
|
||
>修改</el-button
|
||
>
|
||
<el-button type="text" size="small" @click="showLinkTags(scope.row)"
|
||
>查看引用</el-button
|
||
>
|
||
<el-button
|
||
type="text"
|
||
size="small"
|
||
@click="deleteHandle(scope.row.id)"
|
||
>删除</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="sizeChangeHandle"
|
||
@current-change="currentChangeHandle"
|
||
:current-page="pageIndex"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="pageSize"
|
||
:total="totalPage"
|
||
style="padding: 30px 0; text-align: center;"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
>
|
||
</el-pagination>
|
||
<!-- 弹窗, 新增 / 修改 -->
|
||
<add-or-update
|
||
v-if="addOrUpdateVisible"
|
||
ref="addOrUpdate"
|
||
:relationProducts = relationProducts
|
||
@pclose = "pclose"
|
||
@showProTable = "showProTable"
|
||
@refreshDataList="getDataList"
|
||
></add-or-update>
|
||
<commonShopTable
|
||
ref="commonShopTable"
|
||
:currentId="courseId"
|
||
currentType="courseLinkPro"
|
||
@linkList="linkList"
|
||
></commonShopTable>
|
||
<el-dialog
|
||
title="课程引用一览"
|
||
:visible.sync="resListVisible"
|
||
width="60%"
|
||
@close="closeLink"
|
||
>
|
||
<div>
|
||
<div v-if="resList.length > 0">
|
||
<div style="margin-bottom:20px">当前课程共有 {{resList.length}} 个标签引用</div>
|
||
<div v-for="(item, index) in resList" :key="index">
|
||
{{index + 1}}、 {{ item.title }}
|
||
<span v-if="item.isLast != 1">
|
||
<span v-for="(item1, index1) in item.children" :key="index1"
|
||
> > {{ item1.title }}
|
||
<span v-if="item1.isLast != 1">
|
||
<span
|
||
v-for="(item2, index2) in item1.children"
|
||
:key="index2"
|
||
> > {{ item2.title }}
|
||
<span v-if="item2.isLast != 1">
|
||
<span
|
||
v-for="(item3, index3) in item2.children"
|
||
:key="index3"
|
||
> > {{ item3.title }}</span
|
||
>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div v-else>这门课程还没有被标签引用哦~</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="closeLink">好 的</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import commonShopTable from "./shopproductTable.vue";
|
||
import AddOrUpdate from "./course-add-or-update";
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectType: [],
|
||
options: [
|
||
{
|
||
id: "all",
|
||
title: "全部",
|
||
children: undefined
|
||
},
|
||
{
|
||
id: 1,
|
||
title: "医学",
|
||
children: []
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "国学",
|
||
children: []
|
||
}
|
||
],
|
||
courseId:"0",
|
||
dataForm: {
|
||
key: "",
|
||
},
|
||
relationProducts:[],
|
||
query: {
|
||
type: "",
|
||
categoryId: "",
|
||
sociologyId: "",
|
||
courseName: ""
|
||
},
|
||
dataList: [],
|
||
delFlag: false,
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
totalPage: 0,
|
||
dataListLoading: false,
|
||
dataListSelections: [],
|
||
addOrUpdateVisible: false,
|
||
urlList: {
|
||
medicalList: "/master/courseMedical/getCourseMedicalList", //医学
|
||
sociologyList: "/master/courseSociology/getCourseSociologyList" //国学
|
||
},
|
||
resList: [],
|
||
resListVisible: false
|
||
};
|
||
},
|
||
components: {
|
||
AddOrUpdate,
|
||
commonShopTable
|
||
},
|
||
activated() {
|
||
if (this.$route.query.upPageInde != null) {
|
||
this.pageIndex = this.$route.query.upPageIndex;
|
||
console.log(this.pageIndex);
|
||
}
|
||
this.getDataList();
|
||
this.getTreeList(this.urlList.medicalList, 1);
|
||
this.getTreeList(this.urlList.sociologyList, 2);
|
||
},
|
||
methods: {
|
||
delPro(val){
|
||
console.log(val,this.relationProducts)
|
||
let list = this.relationProducts
|
||
|
||
|
||
this.relationProducts = list.slice(1,1)
|
||
|
||
|
||
},
|
||
pclose(){
|
||
this.relationProducts = []
|
||
this.courseId = null
|
||
console.log('关闭了 ')
|
||
},
|
||
linkList(data){
|
||
console.log('父级',data)
|
||
if(data && data.length > 0){
|
||
this.relationProducts = data
|
||
}
|
||
},
|
||
showProTable(data){
|
||
console.log('data',data)
|
||
this.$nextTick(() => {
|
||
this.$refs.commonShopTable.open();
|
||
});
|
||
},
|
||
closeLink() {
|
||
this.resListVisible = false;
|
||
this.resList = [];
|
||
},
|
||
showLinkTags(row) {
|
||
|
||
this.$http({
|
||
url: this.$http.adornUrl("/master/course/getCourseLableLinkList"),
|
||
method: "post",
|
||
data: this.$http.adornData({
|
||
courseId: row.id
|
||
})
|
||
}).then(res => {
|
||
this.resListVisible = true;
|
||
if (res.data.code == 0 && res.data.resList.length > 0) {
|
||
this.resList = res.data.resList;
|
||
|
||
}
|
||
// console.log(row, "row" , res.data.resList,this.resList);
|
||
});
|
||
},
|
||
handleChange(value) {
|
||
console.log(value, "989999999");
|
||
},
|
||
async getTreeList(treeList, type) {
|
||
this.dataListLoading = true;
|
||
await this.$http({
|
||
url: this.$http.adornUrl(treeList),
|
||
method: "get"
|
||
}).then(({ data }) => {
|
||
console.log("🚀 ~ getDataList ~ data:", data);
|
||
if (data && data.code === 0) {
|
||
if (type == 1) {
|
||
this.options[type].children = data.Medicals;
|
||
} else if (type == 2) {
|
||
this.options[type].children = data.sociologys;
|
||
}
|
||
|
||
// this.totalPage = data.page.totalCount
|
||
} else {
|
||
this.options[type].children = [];
|
||
// this.totalPage = 0
|
||
}
|
||
this.dataListLoading = false;
|
||
});
|
||
|
||
console.log("this.options at line 333:", this.options);
|
||
},
|
||
// 获取数据列表
|
||
getDataList() {
|
||
this.relationProducts = []
|
||
var data = {
|
||
page: this.pageIndex,
|
||
limit: this.pageSize,
|
||
courseName: this.query.courseName //关键字
|
||
};
|
||
|
||
if (this.selectType.length == 0) {
|
||
data.type = 0;
|
||
data.medicalId = "";
|
||
data.sociologyId = "";
|
||
} else if (this.selectType.length >= 1) {
|
||
data.type = this.selectType[0] == "all" ? 0 : this.selectType[0];
|
||
if (this.selectType.length == 1) {
|
||
data.medicalId = "";
|
||
data.sociologyId = "";
|
||
}
|
||
if (this.selectType.length > 1) {
|
||
if (this.selectType[0] == 1) {
|
||
data.medicalId = this.selectType[this.selectType.length - 1];
|
||
data.sociologyId = "";
|
||
}
|
||
if (this.selectType[0] == 2) {
|
||
data.medicalId = "";
|
||
data.sociologyId = this.selectType[this.selectType.length - 1];
|
||
}
|
||
}
|
||
}
|
||
|
||
this.dataListLoading = true;
|
||
this.$http({
|
||
url: this.$http.adornUrl("/master/course/getCourseList"),
|
||
method: "post",
|
||
data: this.$http.adornData(data)
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.dataList = data.page.records;
|
||
this.totalPage = data.page.total;
|
||
} else {
|
||
this.dataList = [];
|
||
this.totalPage = 0;
|
||
}
|
||
this.dataListLoading = false;
|
||
});
|
||
},
|
||
// 每页数
|
||
sizeChangeHandle(val) {
|
||
this.pageSize = val;
|
||
this.pageIndex = 1;
|
||
this.getDataList();
|
||
},
|
||
// 当前页
|
||
currentChangeHandle(val) {
|
||
this.pageIndex = val;
|
||
this.getDataList();
|
||
},
|
||
// 多选
|
||
selectionChangeHandle(val) {
|
||
this.dataListSelections = val;
|
||
},
|
||
// 新增 / 修改
|
||
addOrUpdateHandle(row) {
|
||
this.addOrUpdateVisible = true;
|
||
row ? this.courseId = row.id : ''
|
||
// this.courseId = row.id
|
||
this.$nextTick(() => {
|
||
this.$refs.addOrUpdate.init(row);
|
||
});
|
||
},
|
||
// 删除
|
||
deleteHandle(id) {
|
||
var ids = id
|
||
? [id]
|
||
: this.dataListSelections.map(item => {
|
||
return item.id;
|
||
});
|
||
this.$confirm(
|
||
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
|
||
"提示",
|
||
{
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning"
|
||
}
|
||
).then(() => {
|
||
this.$http({
|
||
url: this.$http.adornUrl("/master/course/delCourse?id=" + ids),
|
||
method: "post"
|
||
// data: this.$http.adornData(ids, false)
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.$message({
|
||
message: "操作成功",
|
||
type: "success",
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.getDataList();
|
||
}
|
||
});
|
||
} else {
|
||
this.$message.error(data.msg);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
// 开关变化
|
||
SwitchChange(event) {
|
||
/*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
|
||
var parms = {
|
||
delFlag: event.delFlag,
|
||
id: event.id
|
||
};
|
||
this.$http({
|
||
url: this.$http.adornUrl("/book/book/update"),
|
||
method: "post",
|
||
data: parms
|
||
})
|
||
.then(res => {
|
||
this.$message({
|
||
message: "成功",
|
||
type: "success"
|
||
});
|
||
this.loading = false;
|
||
this.getDataList();
|
||
})
|
||
.catch(error => {
|
||
this.loading = false;
|
||
console.log(error);
|
||
});
|
||
console.log(event);
|
||
},
|
||
chapterHandle(id, row) {
|
||
if (row.novel == "") {
|
||
this.$alert("请上传电子书文件后在进行此操作", "提示", {
|
||
confirmButtonText: "好的"
|
||
});
|
||
return false;
|
||
}
|
||
this.$http({
|
||
url: this.$http.adornUrl("/book/book/getChapter"),
|
||
method: "get",
|
||
params: this.$http.adornParams({
|
||
id: id
|
||
})
|
||
}).then(res => {
|
||
this.$message({
|
||
message: "成功",
|
||
type: "success"
|
||
});
|
||
this.loading = false;
|
||
this.getDataList();
|
||
});
|
||
},
|
||
contentHandle(id) {
|
||
this.$http({
|
||
url: this.$http.adornUrl("/book/bookchaptercontent/getBookVoices"),
|
||
method: "get",
|
||
params: this.$http.adornParams({
|
||
id: id
|
||
})
|
||
}).then(res => {
|
||
this.$message({
|
||
message: "成功",
|
||
type: "success"
|
||
});
|
||
this.loading = false;
|
||
this.getDataList();
|
||
});
|
||
},
|
||
voicesHandle(id) {
|
||
//allVoices
|
||
this.$http({
|
||
// url: this.$http.adornUrl('/book/bookchaptercontent/allVoices'),
|
||
url: this.$http.adornUrl("/book/bookchaptercontent/AllVOices"),
|
||
method: "get",
|
||
params: this.$http.adornParams({
|
||
id: id
|
||
})
|
||
}).then(res => {
|
||
console.log("book/bookchaptercontent/AllVOices");
|
||
this.$message({
|
||
message: "成功",
|
||
type: "success"
|
||
});
|
||
this.loading = false;
|
||
this.getDataList();
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.el-select-dropdown__item.selected {
|
||
/deep/ .el-select-dropdown__item.selected {
|
||
color: #149f97;
|
||
}
|
||
}
|
||
</style>
|