zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

课程添加关联书籍

Browse Source
This commit is contained in:
@fawn-nine
2024-06-17 13:52:54 +08:00
parent ead4a02b3a
commit a9d9780521
3 changed files with 483 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/views/modules/course/course-add-or-update.vue
View File

@@ -45,6 +45,43 @@
<img width="100%" :src="dataForm.image" alt="" />
</el-dialog>
</el-form-item>
<div v-if="relationProducts && relationProducts.length > 0" style="margin-bottom:20px">
<el-table
:data="relationProducts"
border
style="width: 100%;"
>
<el-table-column
prop="productName"
header-align="center"
align="center"
label="商品名"
>
</el-table-column>
<el-table-column
label="课程图"
header-align="center"
align="center"
width="100"
>
<template slot-scope="scope">
<div
v-if="scope.row.productImages"
style="width:100%;display: flex;
align-items: center;justify-content: center;"
>
<img :src="scope.row.productImages" alt="" width="40px" height="40px" />
</div>
</template>
</el-table-column>
<el-table-column width="100px">
<template slot-scope="scope">
<el-button plain type="danger" size="mini" @click="delPro(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div style="text-align:center; margin-bottom:15px" ><el-button @click="showProTable" size="mini" type="primary">添加关联书籍</el-button></div>
<el-form-item label="课程介绍" prop="sort" style="margin-bottom: 140px;">
<div style="height: calc(620px - 120px)">
<el-upload
@@ -112,7 +149,7 @@ const toolbarOptions = [
export default {
components: {
quillEditor
},
},
data() {
return {
editorOption: {
@@ -140,6 +177,7 @@ export default {
},
placeholder: "请输入正文"
},
relationProducts :[],
baseUrl: global.baseUrl,
visible: false,
bookList: [
@@ -228,6 +266,7 @@ export default {
// relationId:0,
},
splitsTypeList: [],
courseId:undefined,
dataRule: {
// name: [
// { required: true, message: '书名不能为空', trigger: 'blur' }
@@ -286,8 +325,23 @@ export default {
created() {},
mounted() {
// this.restaurants = this.loadAll();
this.$bus.$on("linkList", (data) => {
console.log('获得列表',data)
if(data && data.length > 0){
this.relationProducts = this.relationProducts.concat(data)
}
})
},
methods: {
delPro(i){
console.log('i',i)
// this.$emit('delPro',i)
this.relationProducts.splice(i,1)
console.log('处理后的',this.relationProducts)
},
showProTable(){
this.$emit('showProTable',true)
},
contentUploadSuccess(res, file) {
// console.log(res)
let quill = this.$refs.myQuillEditor.quill;
@@ -319,6 +373,7 @@ export default {
init(row) {
console.log("11111", row);
if (row && row.id) {
this.courseId = row.id
this.$http
.request({
url: this.$http.adornUrl(this.urlList.info),
@@ -337,7 +392,11 @@ export default {
if (res && res.data.code === 0) {
var data = res.data.course;
console.log("data at line 357:", data);
if(res.data.shopProductList && res.data.shopProductList.length > 0){
this.relationProducts = res.data.shopProductList
}else{
this.relationProducts = []
}
if (data.image != "" && data.image != null) {
var img = {
name: "",
@@ -365,6 +424,15 @@ export default {
// this.$message.error("请选择图书类型");
// return
// }
let _relationProductIds = ''
if(this.relationProducts.length > 0){
let _list = [...this.relationProducts]
_list = _list.map(item => item.productId)
_relationProductIds = _list.join()
// console.log(_relationProductIds, _list,'_relationProductIds')
}
// console.log(_relationProductIds, _list,'_relationProductIds')
this.$refs["dataForm"].validate(valid => {
if (valid) {
this.$http({
@@ -381,7 +449,8 @@ export default {
title: this.dataForm.title,
sort: this.dataForm.sort,
image: this.dataForm.image,
content: this.dataForm.content
content: this.dataForm.content,
relationProductIds : _relationProductIds
})
}).then(({ data }) => {
if (data && data.code === 0) {
@@ -391,6 +460,8 @@ export default {
duration: 1500,
onClose: () => {
this.visible = false;
this.relationProductIds = []
this.relationProducts = []
this.$emit("refreshDataList");
}
});
@@ -429,6 +500,9 @@ export default {
},
handlereset() {
(this.fileList = []), (this.fileListNovel = []), (this.visible = false);
this.$emit('pclose')
this.relationProducts = []
this.courseId = undefined
},
handlePreview(file) {
console.log(file);

48
src/views/modules/course/courseList.vue
View File

@@ -339,8 +339,17 @@
<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"
@@ -383,6 +392,7 @@
</template>
<script>
import commonShopTable from "./shopproductTable.vue";
import AddOrUpdate from "./course-add-or-update";
export default {
data() {
@@ -405,9 +415,11 @@ export default {
children: []
}
],
courseId:"0",
dataForm: {
key: ""
key: "",
},
relationProducts:[],
query: {
type: "",
categoryId: "",
@@ -431,7 +443,8 @@ export default {
};
},
components: {
AddOrUpdate
AddOrUpdate,
commonShopTable
},
activated() {
if (this.$route.query.upPageInde != null) {
@@ -443,6 +456,32 @@ export default {
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 = [];
@@ -493,6 +532,7 @@ export default {
},
// 获取数据列表
getDataList() {
this.relationProducts = []
var data = {
page: this.pageIndex,
limit: this.pageSize,
@@ -554,7 +594,9 @@ export default {
},
// 新增 / 修改
addOrUpdateHandle(row) {
this.addOrUpdateVisible = true;
this.addOrUpdateVisible = true;
row ? this.courseId = row.id : ''
// this.courseId = row.id
this.$nextTick(() => {
this.$refs.addOrUpdate.init(row);
});

361
src/views/modules/course/shopproductTable.vue Normal file
View File

@@ -0,0 +1,361 @@
<template>
<div>
<el-drawer title="新增关联商品" v-if="drawer" :wrapperClosable="false" :visible.sync="drawer" :before-close="handleClose" destroy-on-close
direction="rtl" size="70%">
<div class="shop_drawer_box demo-drawer__content">
<div class="addFormBox">
<el-form ref="addForm" label-width="80px" :model="dataForm">
<el-form-item label="商品名称" prop="keywords" class="form_item">
<el-input size="small" placeholder="请输入商品名称" style="width: 100%" v-model="dataForm.keywords" clearable>
</el-input>
</el-form-item>
<el-form-item label="商品类型" prop="type" class="form_item">
<el-select size="small" v-model="dataForm.type" placeholder="请选择" style="width: 100%" clearable>
<el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue"
:value="item.dictType">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="" class="form_item" label-width="20px" style="width: 160px !important">
<el-button type="primary" plain @click="
pageIndex = 1;
getDataList(bookMarketId);
" size="small">查询</el-button>
<el-button @click="handleReset()" size="small" plain>重置</el-button>
</el-form-item>
</el-form>
</div>
<el-table ref="table" height="80%" :data="dataList" :row-key="getRowKeys" border size="mini"
v-loading="dataListLoading" @selection-change="handleSelectionChange" style="width: 100%">
<!-- <el-table-column :reserve-selection="true" type="selection" header-align="center" align="center" width="50">
</el-table-column> -->
<!-- -->
<el-table-column label="商品ID" width="70" align="center" prop="productId">
<!-- <template slot-scope="scope">
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
</template> -->
</el-table-column>
<el-table-column prop="productName" header-align="center" align="center" label="商品名称">
</el-table-column>
<el-table-column prop="price" width="120" header-align="center" align="center" sortable label="价格">
</el-table-column>
<el-table-column prop="activityPrice" width="120" header-align="center" align="center" sortable label="活动价">
</el-table-column>
<el-table-column prop="productStock" width="120" header-align="center" align="center" sortable label="库存">
</el-table-column>
<el-table-column header-align="center" align="center" label="商品图" width="120">
<template slot-scope="scope">
<img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="25" height="35"
class="tableImg" />
</template>
</el-table-column>
<el-table-column prop="productStock" width="120" header-align="center" align="center" sortable label="操作">
<template slot-scope="scope">
<el-button type="primary" plain size="mini" @click="addLink(scope.row, scope.$index)">添加</el-button>
</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"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- <div class="demo-drawer__footer">
<div style="float: right; margin-top: 20px">
<el-button @click="close" size="small">取 消</el-button>
<el-button type="primary" @click="submit" :loading="loading" size="small">{{ loading ? "提交中 ..." : "确 定"
}}</el-button>
</div>
</div> -->
<!-- 弹窗, 新增 / 修改 -->
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
<choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book> -->
</div>
</el-drawer>
</div>
</template>
<script>
// import chooseBook from './chooseBook.vue'
// import AddOrUpdate from './shopproduct-add-or-update'
export default {
props: ["currentType", "currentId"],
data() {
return {
timer: null,
drawer: false,
loading: false,
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
dataForm: {
type:'00'
},
bookMarketId: null,
dataList: [],
publishStatus: false,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
chooseBookVisible: false,
bookIds: [],
goodsTypeList: [],
linkList:[]
};
},
components: {
// AddOrUpdate,
// chooseBook
},
activated() {
this.getDataList();
},
methods: {
addLink(row,i){
// 添加商品绑定
this.linkList.push(row)
console.log('linkList',this.linkList)
this.dataList.splice(i,1)
// this.getDataList()
},
handleReset() {
this.dataForm = {
type:'00'
};
this.pageIndex = 1;
this.getDataList();
},
submit() {
// var ids = this.multipleSelection.map((e) => e.productId).toString(",");
// this.$emit("submit", ids);
// console.log(
// "🚀 ~ submit ~ this.multipleSelection:",
// this.multipleSelection
// );
// this.drawer = false;
},
// 获取商品类型
getGoodsTypeList() {
this.$http({
url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
method: "get",
}).then(({ data }) => {
// console.log(data.dataList)
this.goodsTypeList = data.dataList;
});
},
handleClose(done) {
this.$bus.$emit("linkList", this.linkList );
this.linkList = []
// this.$emit("linkList", this.linkList)
done();
},
async open() {
this.drawer = true;
this.dataForm = {
type:'00'
};
this.pageIndex = 1;
await this.getGoodsTypeList();
await this.getDataList();
},
close() {
this.drawer = false;
},
getRowKeys(row) {
return row.productId;
},
handleSelectionChange(val) {
console.log("🚀 ~ handleSelectionChange ~ val:", val);
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
this.multipleSelection = val;
// this.changePageCoreRecordData();
},
closeBookf() {
this.chooseBookVisible = false;
},
showchooseBookf(e) {
// 显示图书列表
this.chooseBookVisible = true;
// console.log(this.bookIds,'this.bookIds')
// this.$nextTick(() => {
// this.$refs.chooseBook.getBookList()
// this.bookIds = e.bookIds
// })
},
// 获取数据列表
async getDataList() {
var form = {
...this.dataForm,
keywords:this.dataForm.keywords ? this.dataForm.keywords : '',
page: this.pageIndex,
limit: this.pageSize,
id: this.currentId
// productId: "",
};
this.dataListLoading = true;
this.clear();
// let _url = "/master/shopProduct/listByPage"
// await this.$http({
// url: this.$http.adornUrl(_url),
// method: "post",
// data: {
// "current": form.page,
// "limit": form.limit,
// "productName": form.keywords,
// "goodsType": form.type
// },
// header: {
// //默认 无 说明：请求头
// "Content-Type": "application/json"
// }
// })
await this.$http({
url: this.$http.adornUrl(`/master/course/getProductListForCourse`),
method: "post",
data: this.$http.adornData({
"page": form.page,
"limit": form.limit,
"productName": form.keywords,
"goodsType": form.type,
"courseId": form.id
}),
})
.then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.shopProductListhopProducts.records;
this.totalPage = data.shopProductListhopProducts.total;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
clear() {
// this.$refs.table.clearSelection();
this.multipleSelection = [];
},
// 每页数
sizeChangeHandle(val) {
// this.changePageCoreRecordData();
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
// 改变页的时候调用一次
// this.changePageCoreRecordData();
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val;
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},
// 删除
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map((item) => {
return item.productId;
});
this.$confirm(
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
this.$http({
url: this.$http.adornUrl("/book/shopproduct/delete"),
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 = {
publishStatus: event.publishStatus,
productId: event.productId,
};
// console.log(parms)
this.$http({
url: this.$http.adornUrl("/book/shopproduct/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);
},
},
};
</script>
<style lang="less" scoped>
.shop_drawer_box {
padding: 20px !important;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.addFormBox {
width: 100%;
// overflow: hidden;
.form_item {
width: 33%;
float: left;
}
}
::v-deep.el-drawer__header {
margin-bottom: 10px !important;
}
</style>