Files
nuttyreading-master-html/src/views/modules/course/courseList.vue
@fawn-nine e1c94388bd 暂存
2024-07-29 17:04:57 +08:00

867 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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
>
<!-- <el-dropdown>
<span
class="el-dropdown-link"
style="color:#17B3A3 ; cursor:pointer"
>
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-button
type="text"
size="small"
@click="showLinkTags(scope.row)"
>查看引用</el-button
>
</el-dropdown-item> -->
<!-- <el-dropdown-item>
<el-button
@click="showDirectorShow(scope.row)"
type="text"
size="small"
>教务主任管理</el-button
>
</el-dropdown-item> -->
<!-- </el-dropdown-menu>
</el-dropdown> -->
</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>
<!-- 教务主任设置 -->
<el-dialog
title="教务主任管理"
:visible.sync="directorShow"
width="40%"
@close="closeDirector"
>
<div class="">
<h3>当前操作的课程{{ optCourse.title }}</h3>
<el-form ref="director" :model="director" label-width="100px">
<el-form-item label="主任设置:" prop="director">
<el-select
v-model="director.director"
filterable
remote
clearable
reserve-keyword
placeholder="请输入手机号"
:remote-method="remoteMethod"
:loading="remoteMethodLoading"
>
<el-option
v-for="item in userList"
:key="item.tel"
:label="item.tel"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="副主任设置:" prop="ddirector">
<el-select
v-model="director.ddirector"
filterable
remote
clearable
reserve-keyword
placeholder="请输入手机号"
:remote-method="remoteMethod"
:loading="remoteMethodLoading"
>
<el-option
v-for="item in userList"
:key="item.tel"
:label="item.tel"
:value="item.id"
>
</el-option>
</el-select>
<span v-show="isSameOne" style="color:red"
>主任和副主任不可以是同一个人</span
>
</el-form-item></el-form
>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveDirector"> </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: [],
director: {
director: null,
ddirector: null
},
directorShow: false,
remoteMethodLoading: false,
miniClassVisible: false,
personSeting: false,
userList: [],
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,
optCourse: {}
};
},
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);
},
saveDirector() {
if(this.director.director == this.director.ddirector && this.director.director != null){
this.$message.error('主任与副主任不能是同一人')
return
}
var director = 0;
var ddirector = 0;
if (this.director.director) {
director = this.director.director;
}
if (this.director.ddirector) {
ddirector = this.director.ddirector;
}
this.$http({
url: this.$http.adornUrl("/master/course/editCourseDirector"),
method: "post",
data: this.$http.adornData({
courseId: this.optCourse.id,
director: director, //主任清空时传0
ddirector: ddirector //副主任清空时传0
})
})
.then(res => {
if (res.data.code == 0) {
this.$message.success("操作成功!");
this.closeDirector();
}
})
.catch(e => {
this.$message.error("获取课程信息失败");
_info = null;
});
},
closeDirector() {
this.directorShow = false;
setTimeout(() => {
this.$nextTick(() => {
this.$refs["director"].resetFields();
this.director = {
director: null,
ddirector: null
};
this.userList = []
this.optCourse = {};
console.log("director关闭了吗", this.director);
})
},200)
},
async showDirectorShow(data) {
this.optCourse = data;
var obj = await this.getDirectorInfo(data.id);
console.log("教务信息", obj);
if (obj) {
// console.log("有绑定", obj.data.director.tel);
if (obj.data.director != null) {
var list = this.userList.map( item => { return item.id})
console.log('list',list)
var i = list.find(function(elem){
return elem == obj.data.director.id;
});
if(!i){
this.userList.push({
id:obj.data.director.id,
tel:obj.data.director.tel
})
}
this.director.director = obj.data.director.id;
}
else {
// this.director.director = null;
}
if (obj.data.ddirector != null) {
console.log('jinlailema')
var list = this.userList.map( item => { return item.id})
console.log('list',list)
var i = list.find(function(elem){
return elem == obj.data.ddirector.id;
});
if(!i){
this.userList.push({
id:obj.data.ddirector.id,
tel:obj.data.ddirector.tel
})
}
this.director.ddirector = obj.data.ddirector.id;
}
else {
// this.ddirector.director = null;
}
} else {
console.log("没有绑定");
this.director = {
director: null,
ddirector: null
};
}
this.directorShow = true;
},
// 检索教务信息
getDirectorInfo(id) {
return new Promise((resolve, reject) => {
this.$http({
url: this.$http.adornUrl("/master/course/getCourseDirector"),
method: "post",
data: this.$http.adornData({
courseId: id
})
})
.then(res => {
resolve(res);
// if (res.code === 0) {
// _info = res.director;
// console.log('教务信息++++res', res.director)
// }
})
.catch(e => {
this.$message.error("获取课程信息失败");
reject(e);
});
});
},
// 搜索用户列表
remoteMethod(query) {
if (query !== "") {
this.remoteMethodLoading = true;
this.$http({
url: this.$http.adornUrl("/book/user/getUserList"),
method: "post",
data: this.$http.adornData({
page: 1,
limit: 10,
key: query
})
})
.then(({ data }) => {
if (data && data.code === 0) {
this.userList = data.user.records;
this.remoteMethodLoading = false;
}
})
.catch(e => {
this.userList = [];
this.remoteMethodLoading = false;
});
} else {
this.userList = [];
}
},
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();
});
}
},
computed: {
isSameOne() {
if(this.director.ddirector == this.director.director && this.director.ddirector != null){
return true
}else{
return false
}
}
}
};
</script>
<style lang="less" scoped>
.el-select-dropdown__item.selected {
/deep/ .el-select-dropdown__item.selected {
color: #149f97;
}
}
.flexbox {
display: flex;
}
</style>