商品绑定标签

This commit is contained in:
2024-05-09 13:29:10 +08:00
parent a677ca196c
commit d30e19e446
10 changed files with 3565 additions and 666 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div style="width: 100%; height: 100%; margin-top: -50px">
<div class="commonShopproduct" :style="`width: 100%; height: 100%; margin-top: -50px`">
<!-- <el-form
:inline="true"
@@ -29,9 +29,9 @@
<div class="search_form">
<div class="addFormBox shopFormBox">
<el-form ref="addForm" label-width="80px" :model="dataForm">
<slot name="searchFormItem" :dataForm="dataForm"></slot>
<slot name="searchFormItem" :dataForm="dataForm" v-if="!isNoSearch"></slot>
<el-form-item
<el-form-item v-if="!isNoSearch"
label=""
class="form_item"
label-width="20px"
@@ -158,7 +158,8 @@ export default {
"urlList",
"isEdit",
"currentId",
"currentType"
"currentType",
"isNoSearch",
],
data() {
return {

View File

@@ -7,6 +7,9 @@
:visible.sync="drawer"
destroy-on-close
direction="rtl"
:append-to-body="true"
:modal-append-to-body="false"
:modal="!isNoModal"
size="70%"
>
<div class="shop_drawer_box demo-drawer__content">
@@ -38,7 +41,7 @@
</div>
<el-table
ref="table"
height="80%"
height="calc(100% - 120px)"
:data="dataList"
:row-key="getRowKeys"
border
@@ -64,6 +67,7 @@
<!-- -->
</el-table>
<el-pagination
style="float: right;margin-top: 20px;"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
@@ -93,7 +97,15 @@
// import chooseBook from './chooseBook.vue'
// import AddOrUpdate from './shopproduct-add-or-update'
export default {
props: ["defaultForm","marketIdKey", "currentType", "currentId", "title", "urlList"],
props: [
"defaultForm",
"marketIdKey",
"currentType",
"currentId",
"title",
"isNoModal",
"urlList"
],
data() {
return {
timer: null,
@@ -103,9 +115,7 @@ export default {
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
dataForm: {
},
dataForm: {},
bookMarketId: null,
dataList: [],
publishStatus: false,
@@ -338,6 +348,7 @@ export default {
<style lang="less" scoped>
.shop_drawer_box {
padding: 20px !important;
padding-top: 0px !important;
box-sizing: border-box;
width: 100%;
height: 100%;

View File

@@ -315,6 +315,9 @@ export default {
// splits: [
// { required: true, message: '拆分类类型不能为空', trigger: 'blur' }
// ]
},
urlList: {
info: "/master/course/getCoursedetail"
}
};
},
@@ -325,16 +328,42 @@ export default {
methods: {
init(row) {
console.log("11111", row);
this.dataForm = row || {};
if (row.image != "" && row.image != null) {
var img = {
name: "",
url: row.image
};
var attr = [];
attr.push(img);
this.fileList = attr;
if (row.id) {
this.$http
.request({
url: this.$http.adornUrl(this.urlList.info),
method: "POST",
data: {
id: row.id
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json"
}
})
.then(res => {
console.log("result at line 452:", res);
if (res && res.data.code === 0) {
var data = res.data.course;
console.log("data at line 357:", data);
if (data.image != "" && data.image != null) {
var img = {
name: "",
url: data.image
};
var attr = [];
attr.push(img);
this.fileList = attr;
}
this.dataForm = { ...data };
}
});
} else {
this.dataForm = {};
}
// this.dataForm.id = row.id || 0
// this.dataForm.title = row.title || ''
this.visible = true;

View File

@@ -0,0 +1,758 @@
<template>
<div>
<el-drawer
title=""
:with-header="false"
v-if="drawer"
:visible.sync="drawer"
destroy-on-close
direction="rtl"
size="80%"
>
<div
class="shop_drawer_box demo-drawer__content"
v-loading="dataListLoading"
>
<button
@click="close"
aria-label="close drawer"
type="button"
class="el-drawer__close-btn"
>
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
<!-- <div class="addFormBox">
<el-form ref="addForm" label-width="80px" :model="dataForm">
<el-form-item label="商品名称" prop="title" class="form_item">
<el-input
size="small"
placeholder="请输入商品名称"
style="width: 100%"
v-model="dataForm.key"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="商品类型" prop="goodsType" class="form_item">
<el-select
size="small"
v-model="dataForm.goodsType"
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
@click="
pageIndex = 1;
getDataList(bookMarketId);
"
size="small"
>查询</el-button
>
<el-button @click="handleReset()" size="small">重置</el-button>
</el-form-item>
</el-form>
</div> -->
<div class="addFormBox commonTreeBox" style="overflow: hidden">
<div class="item-box" style="" v-for="(v, i) in appList">
<div class="title_box" slot="center">
<div class="title"><span class="line"></span>{{ v.name }}</div>
</div>
<div class="item-content">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="分类标签" :name="v.collapseLabelKey">
<commonTree
source="shop"
sourceType="bookLabelId"
:ref="`commonTree${v.key}`"
:productId="productId"
:dataList="dynamicArray('treeDataList', v.key)"
:urlList="urlList"
@submit="
(ids, sourceType) =>
handleSubmitShop(ids, sourceType, v.key)
"
@delete="
(ids, sourceType) =>
handleDeleteShop(ids, sourceType, v.key)
"
>
</commonTree>
</el-collapse-item>
<el-collapse-item title="营销标签" :name="v.collapseMarketKey">
<commonTreeMarket
source="shop"
sourceType="bookMarketId"
:productId="productId"
:ref="`commonTreeMarket${v.key}`"
:dataList="dynamicArray('treeDataMarketList', v.key)"
:urlList="urlList"
@submit="
(ids, sourceType) =>
handleSubmitShop(ids, sourceType, v.key)
"
@delete="
(ids, sourceType) =>
handleDeleteShop(ids, sourceType, v.key)
"
>
</commonTreeMarket>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
<!-- <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'
import debounce from "lodash/debounce"; //导入lodash中的debounce
import commonTree from "./tags.vue";
import commonTreeMarket from "./tags.vue";
import commonTreeZMZM from "./tags.vue";
export default {
props: ["currentType", "currentId"],
data() {
return {
activeNames: [],
appList: [
{
name: "疯子读书",
key: 1,
collapseLabelKey: 1,
collapseMarketKey: 2,
urlList: {
saveBookShop: "/master/shopProduct/bindProductAndBookLabel",
deleteBookShop: "/master/shopProduct/unbindProductAndBookLabel",
saveBookShopMarket: "/master/shopProduct/bindProductAndBookMarket",
deleteBookShopMarket:
"/master/shopProduct/unbindProductAndBookMarket"
}
},
{
name: "吴门医述",
key: 2,
collapseLabelKey: 3,
collapseMarketKey: 4,
urlList: {
saveBookShop: "/master/shopProduct/bindProductAndMedicineLabel",
deleteBookShop: "/master/shopProduct/unbindProductAndMedicineLabel",
saveBookShopMarket:
"/master/shopProduct/bindProductAndMedicineMarket",
deleteBookShopMarket:
"/master/shopProduct/unbindProductAndMedicineMarket"
}
},
{
name: "众妙之门",
key: 3,
collapseLabelKey: 5,
collapseMarketKey: 6,
urlList: {
saveBookShop: "/master/shopProduct/bindProductAndSociologyLabel",
deleteBookShop:
"/master/shopProduct/unbindProductAndSociologyLabel",
saveBookShopMarket:
"/master/shopProduct/bindProductAndSociologyMarket",
deleteBookShopMarket:
"/master/shopProduct/unbindProductAndSociologyMarket"
}
}
],
productId: null,
drawer: false,
loading: false,
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
dataForm: {
key: ""
},
bookMarketId: null,
dataList: [],
treeDataList1: [],
treeDataMarketList1: [],
treeDataList2: [],
treeDataMarketList2: [],
treeDataList3: [],
treeDataMarketList3: [],
publishStatus: false,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
chooseBookVisible: false,
bookIds: [],
goodsTypeList: [],
urlList: {
treeList: "/master/shopProduct/getProductToLabel",
treeMarketList: "/book/labelAndMarket/marketTree",
deleteBookShop: "/book/labelAndMarket/delToLable",
deleteBookShopMarket: "/book/labelAndMarket/delToMarket",
saveBookShop: "/book/labelAndMarket/saveToLabel",
saveBookShopMarket: "/book/labelAndMarket/saveToMarket",
getToLabelList: "/book/labelAndMarket/getToLabelList",
getToMarketList: "/book/labelAndMarket/getToMarketList"
}
};
},
components: {
commonTree,
commonTreeMarket,
commonTreeZMZM
// chooseBook
},
async activated() {
// await this.getDataList("treeList");
// await this.getDataList("treeMarketList");
},
methods: {
dynamicArray(type, key) {
console.log("key at line 228:", key);
// 这里可以根据条件返回 this.myArray 或 this.yourArray
var list = [];
if (type == "treeDataList") {
switch (key) {
case 1:
list = this.treeDataList1;
break;
case 2:
list = this.treeDataList2;
break;
case 3:
list = this.treeDataList3;
break;
}
} else if (type == "treeDataMarketList") {
switch (key) {
case 1:
list = this.treeDataMarketList1;
break;
case 2:
list = this.treeDataMarketList2;
break;
case 3:
list = this.treeDataMarketList3;
break;
}
}
console.log("list at line 258:", list, key);
return list;
},
handleChange(val) {
console.log(val);
},
handleSubmitShop: debounce(async function(ids, sourceType, key) {
this.dataListLoading = true;
console.log("🚀 ~ handleSubmitShop ~ ids:", ids);
var url;
var data = { productId: this.productId };
switch (sourceType) {
case "bookLabelId":
url = this.appList[key - 1].urlList.saveBookShop;
data.labelId = ids;
break;
case "bookMarketId":
url = this.appList[key - 1].urlList.saveBookShopMarket;
data.marketId = ids;
break;
}
await this.$http({
url: this.$http.adornUrl(`${url}`),
method: "post",
data: this.$http.adornData(data)
}).then(async ({ data }) => {
if (data && data.code === 0) {
// this.$message.success(data.msg);
} else {
this.$message.error(data.msg);
}
// this.dataListLoading = false;
});
this.$nextTick(async () => {
setTimeout(() => {
this.getDataList();
}, 200);
// await this.$refs[`commonTree${key}`][0].getAssociatedGoodsList(
// this.urlList.getToLabelList,
// "bookLabelId"
// );
// await this.$refs[`commonTreeMarket${key}`][0].getAssociatedGoodsList(
// this.urlList.getToMarketList,
// "bookMarketId"
// );
this.dataListLoading = false;
});
}),
handleDeleteShop: debounce(async function(ids, sourceType, key) {
console.log("key at line 289:", key);
this.dataListLoading = true;
console.log("🚀 ~ handleSubmitShop ~ ids:", ids);
var url;
var data = { productId: this.productId };
switch (sourceType) {
case "bookLabelId":
url = `${this.appList[key - 1].urlList.deleteBookShop}`;
data.labelId = ids;
break;
case "bookMarketId":
url = `${this.appList[key - 1].urlList.deleteBookShopMarket}`;
data.marketId = ids;
break;
}
await this.$http
.request({
url: this.$http.adornUrl(url),
method: "POST",
data: {
...data
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json"
}
})
.then(async ({ data }) => {
if (data && data.code === 0) {
// this.$message.success(data.msg);
} else {
this.$message.error(data.msg);
}
// this.dataListLoading = false;
});
this.$nextTick(async () => {
setTimeout(() => {
this.getDataList();
}, 200);
// await this.$refs[`commonTree${key}`][0].getAssociatedGoodsList(
// this.urlList.getToLabelList,
// "bookLabelId"
// );
// await this.$refs[`commonTreeMarket${key}`][0].getAssociatedGoodsList(
// this.urlList.getToMarketList,
// "bookMarketId"
// );
this.dataListLoading = false;
});
}),
async getDataList() {
await this.$http({
url: this.$http.adornUrl(`${this.urlList.treeList}`),
method: "post",
data: {
productId: this.productId
}
}).then(({ data }) => {
console.log("🚀 ~ getDataList ~ data:", data);
if (data && data.code === 0) {
var allData = data.data;
this.treeDataList1 = allData.bookLabel;
this.treeDataList2 = allData.medicineLabel;
this.treeDataList3 = allData.sociologyLabel;
// this.treeDataList1.push({});
this.treeDataMarketList1 = allData.bookMarket;
this.treeDataMarketList2 = allData.medicineMarket;
this.treeDataMarketList3 = allData.sociologyMarket;
// this.totalPage = data.page.totalCount
} else {
this.treeDataList1 = [];
this.treeDataList2 = [];
this.treeDataList3 = [];
this.treeDataMarketList1 = [];
this.treeDataMarketList2 = [];
this.treeDataMarketList3 = [];
// this.totalPage = 0
}
});
},
handleReset() {
this.dataForm = {};
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
);
},
// 获取商品类型
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) {
done();
// this.$confirm("确认关闭?")
// .then((_) => {
// done();
// })
// .catch((_) => {});
},
async getTreeList() {
this.dataListLoading = true;
this.$nextTick(async () => {
this.appList.forEach(async e => {
await this.$refs[`commonTree${e.key}`].getAssociatedGoodsList(
this.urlList.getToLabelList,
"bookLabelId"
);
await this.$refs[`commonTreeMarket${e.key}`].getAssociatedGoodsList(
this.urlList.getToMarketList,
"bookMarketId"
);
});
await this.getDataList("treeList");
await this.getDataList("treeMarketList");
this.dataListLoading = false;
});
},
async open(id) {
this.productId = id;
this.drawer = true;
this.dataForm = {};
this.appList.forEach(e => {
this.activeNames.push(e.collapseLabelKey);
this.activeNames.push(e.collapseMarketKey);
});
setTimeout(async () => {
await this.getDataList();
}, 200);
// this.pageIndex = 1;
// await this.getGoodsTypeList();
},
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,
// current: this.pageIndex,
// limit: this.pageSize,
// productId: "",
// };
// // this.multipleSelection=[]
// if (this.currentType == "bookLabelId") {
// form.bookLabelId = this.currentId;
// console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
// } else if (this.currentType == "bookMarketId") {
// form.bookMarketId = this.currentId;
// console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
// }
// this.dataListLoading = true;
// this.clear();
// await this.$http({
// url: this.$http.adornUrl(`/book/labelAndMarket/getNotToLabelList`),
// method: "post",
// data: this.$http.adornData(form),
// }).then(({ data }) => {
// if (data && data.code === 0) {
// this.dataList = data.result.records;
// this.totalPage = data.result.total;
// } else {
// this.dataList = [];
// this.totalPage = 0;
// }
// // setTimeout(async () => {
// // await this.setSelectRow();
// // }, 200);
// 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;
}
.commonTreeBox {
height: calc(100% - 10px) !important;
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 5px !important;
}
/deep/.tree_box {
width: 100% !important;
// min-width: 300px;
// background-color: #fff !important;
border: none !important;
border-radius: 10px;
padding: 15px;
padding-left: 0px !important ;
box-sizing: border-box;
.custom-tree-container {
border-radius: 4px !important;
height: calc(100% - 30px);
// border: 1px solid #ebeef5 !important;
// background-color: #fff !important;
overflow: hidden !important;
color: #303133 !important;
// padding: 15px;
transition: 0.3s !important;
}
// background: #fafafa;
}
/deep/.shop_drawer_box {
// padding-top: 0px !important ;
}
.title_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
.button_box {
// width: 200px;
float: right;
}
}
.title {
width: 300px;
min-width: 200px;
padding: 20px;
padding-bottom: 0;
float: left;
display: flex;
align-items: center;
font-weight: 600;
font-size: 22px;
// color: #17b3a3;
.line {
width: 4px;
height: 20px;
margin-right: 8px;
background: #17b3a3;
}
}
.el-drawer__close-btn {
position: absolute;
right: 10px;
top: 10px;
}
.item-box {
width: 32%;
height: 100%;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
border: 1px solid #ebeef5 !important;
}
.item-content {
padding: 20px;
padding-top: 0;
overflow-y: auto;
height: calc(100% - 80px);
}
/deep/.el-collapse-item {
margin-bottom: 20px;
.el-collapse-item__header {
background: #17b3a3 !important;
height: 36px !important;
color: #fff;
font-size: 16px;
padding-left: 15px;
}
.el-collapse-item__wrap {
background: #f8f8f8 !important;
.el-tree {
background-color: transparent !important;
}
}
}
/deep/.el-collapse {
border-bottom: none !important;
}
</style>

View File

@@ -0,0 +1,655 @@
<template>
<div>
<el-drawer
title=""
:with-header="false"
v-if="drawer"
:visible.sync="drawer"
destroy-on-close
direction="rtl"
size="80%"
>
<div
class="shop_drawer_box demo-drawer__content"
v-loading="dataListLoading"
>
<button
@click="close"
aria-label="close drawer"
type="button"
class="el-drawer__close-btn"
>
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
<div class="addFormBox commonTreeBox" style="overflow: hidden">
<div class="item-box" style="">
<!-- <div class="title_box" slot="center">
<div class="title"><span class="line"></span></div>
</div> -->
<div class="item-content">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="已关联图书列表" name="1">
<commonOperationsList
ref="commonOperationsBook"
title="图书"
source="book"
>
</commonOperationsList>
</el-collapse-item>
<el-collapse-item title="已关联课程列表" name="2">
<commonOperationsList
ref="commonOperationsCurriculum"
title="课程"
source="curriculum"
></commonOperationsList>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
<!-- <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'
import debounce from "lodash/debounce"; //导入lodash中的debounce
import commonOperationsList from "./operationsList.vue";
export default {
props: ["currentType", "currentId"],
data() {
return {
activeNames: ["1", "2"],
appList: [
{
name: "关联图书",
key: 1,
collapseLabelKey: 1,
collapseMarketKey: 2,
urlList: {}
},
{
name: "关联课程",
key: 2,
collapseLabelKey: 3,
collapseMarketKey: 4,
urlList: {}
},
{
name: "众妙之门",
key: 3,
collapseLabelKey: 5,
collapseMarketKey: 6,
urlList: {}
}
],
productId: null,
drawer: false,
loading: false,
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
dataForm: {
key: ""
},
bookMarketId: null,
dataList: [],
treeDataList1: [],
treeDataMarketList1: [],
treeDataList2: [],
treeDataMarketList2: [],
treeDataList3: [],
treeDataMarketList3: [],
publishStatus: false,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
chooseBookVisible: false,
bookIds: [],
goodsTypeList: [],
urlList: {
treeList: "/master/shopProduct/getProductToLabel",
treeMarketList: "/book/labelAndMarket/marketTree",
deleteBookShop: "/book/labelAndMarket/delToLable",
deleteBookShopMarket: "/book/labelAndMarket/delToMarket",
saveBookShop: "/book/labelAndMarket/saveToLabel",
saveBookShopMarket: "/book/labelAndMarket/saveToMarket",
getToLabelList: "/book/labelAndMarket/getToLabelList",
getToMarketList: "/book/labelAndMarket/getToMarketList"
}
};
},
components: {
commonOperationsList
// chooseBook
},
async activated() {
// await this.getDataList("treeList");
// await this.getDataList("treeMarketList");
},
methods: {
openTable(type, formName) {
this.$nextTick(() => {
this.$refs[`commonOperationsBook`][0].openTable(formName);
});
},
dynamicArray(type, key) {
console.log("key at line 228:", key);
// 这里可以根据条件返回 this.myArray 或 this.yourArray
var list = [];
if (type == "treeDataList") {
switch (key) {
case 1:
list = this.treeDataList1;
break;
case 2:
list = this.treeDataList2;
break;
case 3:
list = this.treeDataList3;
break;
}
} else if (type == "treeDataMarketList") {
switch (key) {
case 1:
list = this.treeDataMarketList1;
break;
case 2:
list = this.treeDataMarketList2;
break;
case 3:
list = this.treeDataMarketList3;
break;
}
}
console.log("list at line 258:", list, key);
return list;
},
handleChange(val) {
console.log(val);
},
handleSubmitShop: debounce(async function(ids, sourceType, key) {
this.dataListLoading = true;
console.log("🚀 ~ handleSubmitShop ~ ids:", ids);
var url;
var data = { productId: this.productId };
switch (sourceType) {
case "bookLabelId":
url = this.urlList.saveBookShop;
data.bookLabelId = ids;
break;
case "bookMarketId":
url = this.urlList.saveBookShopMarket;
data.bookMarketId = ids;
break;
}
await this.$http({
url: this.$http.adornUrl(`${url}`),
method: "post",
data: this.$http.adornData(data)
}).then(async ({ data }) => {
if (data && data.code === 0) {
// this.$message.success(data.msg);
} else {
this.$message.error(data.msg);
}
// this.dataListLoading = false;
});
this.$nextTick(async () => {
await this.$refs[`commonTree${key}`][0].getAssociatedGoodsList(
this.urlList.getToLabelList,
"bookLabelId"
);
await this.$refs[`commonTreeMarket${key}`][0].getAssociatedGoodsList(
this.urlList.getToMarketList,
"bookMarketId"
);
this.dataListLoading = false;
});
}, 200),
handleDeleteShop: debounce(async function(ids, sourceType, key) {
console.log("key at line 289:", key);
this.dataListLoading = true;
console.log("🚀 ~ handleSubmitShop ~ ids:", ids);
var url;
switch (sourceType) {
case "bookLabelId":
url = `${this.urlList.deleteBookShop}?lableId=${ids}&productId=${
this.productId
}`;
break;
case "bookMarketId":
url = `${
this.urlList.deleteBookShopMarket
}?marketId=${ids}&productId=${this.productId}`;
break;
}
await this.$http({
url: this.$http.adornUrl(url),
method: "post"
}).then(async ({ data }) => {
if (data && data.code === 0) {
// this.$message.success(data.msg);
} else {
this.$message.error(data.msg);
}
// this.dataListLoading = false;
});
this.$nextTick(async () => {
await this.$refs[`commonTree${key}`][0].getAssociatedGoodsList(
this.urlList.getToLabelList,
"bookLabelId"
);
await this.$refs[`commonTreeMarket${key}`][0].getAssociatedGoodsList(
this.urlList.getToMarketList,
"bookMarketId"
);
this.dataListLoading = false;
});
}, 200),
async getDataList(id) {
await this.$http({
url: this.$http.adornUrl(`${this.urlList.treeList}`),
method: "post",
data: {
productId: id
}
}).then(({ data }) => {
console.log("🚀 ~ getDataList ~ data:", data);
if (data && data.code === 0) {
var allData = data.data;
this.treeDataList1 = allData.bookLabel;
this.treeDataList2 = allData.medicineLabel;
this.treeDataList3 = allData.sociologyLabel;
// this.treeDataList1.push({});
this.treeDataMarketList1 = allData.bookMarket;
this.treeDataMarketList2 = allData.medicineMarket;
this.treeDataMarketList3 = allData.sociologyMarket;
// this.totalPage = data.page.totalCount
} else {
this.treeDataList1 = [];
this.treeDataList2 = [];
this.treeDataList3 = [];
this.treeDataMarketList1 = [];
this.treeDataMarketList2 = [];
this.treeDataMarketList3 = [];
// this.totalPage = 0
}
});
},
handleReset() {
this.dataForm = {};
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
);
},
// 获取商品类型
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) {
done();
// this.$confirm("确认关闭?")
// .then((_) => {
// done();
// })
// .catch((_) => {});
},
async getTreeList() {
this.dataListLoading = true;
this.$nextTick(async () => {
this.appList.forEach(async e => {
await this.$refs[`commonTree${e.key}`].getAssociatedGoodsList(
this.urlList.getToLabelList,
"bookLabelId"
);
await this.$refs[`commonTreeMarket${e.key}`].getAssociatedGoodsList(
this.urlList.getToMarketList,
"bookMarketId"
);
});
await this.getDataList("treeList");
await this.getDataList("treeMarketList");
this.dataListLoading = false;
});
},
async open(id) {
this.activeNames = ["1", "2"];
this.productId = id;
this.drawer = true;
this.dataForm = {};
this.appList.forEach(e => {
this.activeNames.push(e.collapseLabelKey);
this.activeNames.push(e.collapseMarketKey);
});
setTimeout(async () => {
await this.getDataList(id);
}, 200);
// this.pageIndex = 1;
// await this.getGoodsTypeList();
},
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,
// current: this.pageIndex,
// limit: this.pageSize,
// productId: "",
// };
// // this.multipleSelection=[]
// if (this.currentType == "bookLabelId") {
// form.bookLabelId = this.currentId;
// console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
// } else if (this.currentType == "bookMarketId") {
// form.bookMarketId = this.currentId;
// console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
// }
// this.dataListLoading = true;
// this.clear();
// await this.$http({
// url: this.$http.adornUrl(`/book/labelAndMarket/getNotToLabelList`),
// method: "post",
// data: this.$http.adornData(form),
// }).then(({ data }) => {
// if (data && data.code === 0) {
// this.dataList = data.result.records;
// this.totalPage = data.result.total;
// } else {
// this.dataList = [];
// this.totalPage = 0;
// }
// // setTimeout(async () => {
// // await this.setSelectRow();
// // }, 200);
// 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;
}
.commonTreeBox {
height: calc(100% - 10px) !important;
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 5px !important;
}
/deep/.tree_box {
width: 100% !important;
// min-width: 300px;
// background-color: #fff !important;
border: none !important;
border-radius: 10px;
padding: 15px;
padding-left: 0px !important ;
box-sizing: border-box;
.custom-tree-container {
border-radius: 4px !important;
height: calc(100% - 30px);
// border: 1px solid #ebeef5 !important;
// background-color: #fff !important;
overflow: hidden !important;
color: #303133 !important;
// padding: 15px;
transition: 0.3s !important;
}
// background: #fafafa;
}
/deep/.shop_drawer_box {
// padding-top: 0px !important ;
}
.title_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
.button_box {
// width: 200px;
float: right;
}
}
.title {
width: 300px;
min-width: 200px;
padding: 20px;
padding-bottom: 0;
float: left;
display: flex;
align-items: center;
font-weight: 600;
font-size: 22px;
// color: #17b3a3;
.line {
width: 4px;
height: 20px;
margin-right: 8px;
background: #17b3a3;
}
}
.el-drawer__close-btn {
position: absolute;
right: 10px;
top: 10px;
}
.item-box {
width: 100%;
height: 100%;
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
// border: 1px solid #ebeef5 !important;
}
.item-content {
padding: 20px;
padding-top: 0;
overflow-y: auto;
height: calc(100% - 80px);
}
/deep/.el-collapse-item {
margin-bottom: 20px;
.el-collapse-item__header {
background: #17b3a3 !important;
height: 36px !important;
color: #fff;
font-size: 16px;
padding-left: 15px;
}
.el-collapse-item__wrap {
// background: #f8f8f8 !important;
border-bottom: none !important;
.el-tree {
background-color: transparent !important;
}
}
}
/deep/.el-collapse {
border-bottom: none !important;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -1,13 +1,21 @@
<template>
<div class="tree_box">
<div style="overflow: hidden" v-if="source == 'tags'">
<p class="info_bg" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
<p
class="info_bg"
style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
>
当前标签<span style="color: #17b3a3; font-weight: 600">{{
currentNode ? currentNode.data.title : ""
}}</span>
currentNode ? currentNode.data.title : ""
}}</span>
</p>
<el-button type="primary" @click="addOrUpdateHandle()" style="float: right" size="mini">新增顶级标签</el-button>
<el-button
type="primary"
@click="addOrUpdateHandle()"
style="float: right"
size="mini"
>新增顶级标签</el-button
>
</div>
<!-- <p v-if="source == 'shop'" class="select_box" style="">
<el-checkbox
@@ -26,24 +34,48 @@
<!-- show-checkbox -->
<!-- :allow-drop="allowDrop" -->
<div class="custom-tree-container">
<el-tree :highlight-current="true" class="filter-tree" node-key="id" :data="treeDataList" :props="defaultProps"
default-expand-all :filter-node-method="filterNode" ref="tree" :draggable="true" @node-click="handleNodeClick"
:expand-on-click-node="false">
<el-tree
:highlight-current="true"
class="filter-tree"
node-key="id"
:data="treeDataList"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
:draggable="true"
@node-click="handleNodeClick"
:expand-on-click-node="false"
>
<!-- @click="handleClickNodes(node, data)" -->
<span class="custom-tree-node" slot-scope="{ node, data }" @click="
source == 'tags'
? handleClickNodes(node, data, 'edit')
: ''
" :class="`${currentNode&&currentNode.data.id==data.id?'isSelect':''}`" style=" padding-left: 5px;
box-sizing: border-box;">
<span
class="custom-tree-node"
slot-scope="{ node, data }"
@click="source == 'tags' ? handleClickNodes(node, data, 'edit') : ''"
:class="
`${currentNode && currentNode.data.id == data.id ? 'isSelect' : ''}`
"
style=" padding-left: 5px;
box-sizing: border-box;"
>
<!-- @change="(e) => selectShop(data, e)" -->
<span style="display: flex; align-items: center" ><el-checkbox @change=" selectShop(data)"
:value="selectArr.includes(data.id)" v-if="data.isLast == 1 && source == 'shop'"
style="margin-right: 10px"></el-checkbox>{{ node.label }}</span>
<span style="display: flex; align-items: center"
><el-checkbox
@change="selectShop(data)"
:value="data.select"
v-if="data.isLast == 1 && source == 'shop'"
style="margin-right: 10px"
></el-checkbox
>{{ node.label }}</span
>
<span v-if="source == 'tags'">
<!-- v-if="node.level <= 1" -->
<el-button type="text" size="mini" @click.stop="handleClickNodes(node, data, 'addChildren')"
v-if="data.isLast != 1">
<el-button
type="text"
size="mini"
@click.stop="handleClickNodes(node, data, 'addChildren')"
v-if="data.isLast != 1"
>
添加下级
</el-button>
<!-- <el-button
@@ -55,7 +87,12 @@
</el-button> -->
<!-- v-if="node.childNodes.length == 0" -->
<el-button type="text" size="mini" @click.stop="remove(data)" style="color: rgb(235 92 92);">
<el-button
type="text"
size="mini"
@click.stop="remove(data)"
style="color: rgb(235 92 92);"
>
删除
</el-button>
</span>
@@ -69,7 +106,7 @@
// import dialogComponent from './seckillprodrelation'
import debounce from "lodash/debounce"; //导入lodash中的debounce
export default {
props: ["dataList", "urlList", "source", "productId", 'sourceType'],
props: ["dataList", "urlList", "source", "productId", "sourceType"],
data() {
return {
currentNode: null,
@@ -78,8 +115,8 @@ export default {
selectArr: [],
defaultProps: {
children: "children",
label: "title",
},
label: "title"
}
};
},
components: {},
@@ -91,13 +128,13 @@ export default {
handler(newVal, oldVal) {
// this.$emit('changeCurrentNode',this.currentNode)
},
deep: true
deep: true
},
filterText(val) {
this.$refs.tree.filter(val);
},
}
},
activated() {
console.log("🚀 ~ activated ~ this.currentNode:", this.currentNode, "9999");
@@ -128,17 +165,17 @@ export default {
limit: 99999999,
// productName: "",
productId: this.productId,
...form,
...form
// bookLabelId: bookLabelId,
}),
})
}).then(async ({ data }) => {
if (data && data.code === 0) {
if (idType == "bookLabelId") {
this.selectArr = data.result.records.map((e) => {
this.selectArr = data.result.records.map(e => {
return e.bookLabelId;
});
} else if (idType == "bookMarketId") {
this.selectArr = data.result.records.map((e) => {
this.selectArr = data.result.records.map(e => {
return e.bookMarketId;
});
}
@@ -179,21 +216,11 @@ export default {
}
this.$forceUpdate();
},
selectShop: debounce(async function (v, status) {
selectShop: debounce(async function(v, status) {
console.log("🚀 ~ selectShop ~ status:", status);
// if (this.selectArr.includes(v.id)) {
// // this.selectArr = this.selectArr.filter(function (item) {
// // return item !== v.id;
// // });
// } else {
// // this.selectArr.push(v.id);
// }
console.log("🚀 ~ selectShop ~ v:", v);
console.log("🚀 ~ selectShop ~ this.selectShopArr999:", this.selectArr);
if (this.selectArr.includes(v.id)) {
if (v.select) {
this.$emit("delete", v.id, this.sourceType);
} else {
this.$emit("submit", v.id, this.sourceType);
@@ -209,25 +236,28 @@ export default {
// this.$forceUpdate();
// },
async setCurrentNodeShow(id) {
console.log("🚀 ~ setCurrentNodeShow ~ id222:", id, this.currentNode)
console.log("🚀 ~ setCurrentNodeShow ~ id222:", id, this.currentNode);
var newNodeData = {}
var newNodeData = {};
if (id) {
newNodeData = await this.$refs.tree.getNode(id);
} else {
newNodeData = {
data: {}
}
};
}
this.currentNode = newNodeData;
this.currentNode = newNodeData;
this.$forceUpdate();
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(id);
this.$refs.tree.setCheckedKeys([id]);
})
await this.$emit("handleClickNodes", newNodeData, newNodeData.data, "edit");
});
await this.$emit(
"handleClickNodes",
newNodeData,
newNodeData.data,
"edit"
);
},
allowDrop(draggingNode, dropNode, type) {
console.log(draggingNode.level, dropNode.level);
@@ -242,7 +272,7 @@ export default {
async correlationShop(bookLabelId) {
var status;
var productId = this.$refs.commonShop.multipleSelection.map(
(e) => e.productId
e => e.productId
);
console.log("🚀 ~ correlationShop ~ productId:", productId);
await this.$http({
@@ -250,8 +280,8 @@ export default {
method: "post",
data: this.$http.adornData({
productId: productId.toString(","),
bookLabelId: bookLabelId,
}),
bookLabelId: bookLabelId
})
}).then(async ({ data }) => {
if (data && data.code === 0) {
status = true;
@@ -263,20 +293,20 @@ export default {
return status;
},
//新增修改
dataFormSubmit: debounce(async function (formName) {
dataFormSubmit: debounce(async function(formName) {
// return false
if (this.addForm.title == "") {
this.$message.error("请输入标签名称");
return false;
}
await this.$refs[formName].validate(async (valid) => {
await this.$refs[formName].validate(async valid => {
if (valid) {
await this.$http({
url: this.$http.adornUrl(`${this.urlList.add}`),
method: "post",
data: this.$http.adornData({
...this.addForm,
}),
...this.addForm
})
}).then(async ({ data }) => {
if (data && data.code === 0) {
var status = await this.correlationShop(data.result.id);
@@ -305,7 +335,7 @@ export default {
// this.addForm={}
// this.$emit("refreshDataList");
},
}
});
}
} else {
@@ -324,14 +354,20 @@ export default {
this.isFresh = true;
},
async handleClickNodes(node, data, type) {
console.log("🚀 ~ handleClickNodes11111 ~ node, data, type:", node, data, type)
console.log(
"🚀 ~ handleClickNodes11111 ~ node, data, type:",
node,
data,
type
);
this.addForm = {};
// console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
console.log(node, data, "当前选中节点");
this.currentNode = node;
this.isFresh = false;
this.isFresh = true;
this.$forceUpdate()
this.$forceUpdate();
var form = {};
if (this.source == "shop") {
@@ -351,7 +387,7 @@ export default {
isLast: 0,
pid: data.id,
sort: 0,
title: "",
title: ""
};
break;
}
@@ -371,14 +407,13 @@ export default {
}
},
addOrUpdateHandle() {
var addform = {
children: [],
delFlag: 0,
isLast: 0,
pid: 0,
sort: 0,
title: "",
title: ""
};
this.handleClickNodes({ data: addform }, addform, "add");
// if (!this.currentNode) {
@@ -392,37 +427,37 @@ export default {
this.$confirm(`是否删除标签【${data.title}】?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
type: "warning"
})
.then(async () => {
that
.$http({
url: that.$http.adornUrl(`${that.urlList.delete}?id=` + data.id),
method: "post",
data: {}
})
.then(async ({ data }) => {
if (data && data.code === 0) {
that.$message({
type: "success",
message: "删除成功!"
});
} else {
this.$message.error(data.msg);
return false;
}
that.$http({
url: that.$http.adornUrl(`${that.urlList.delete}?id=` + data.id),
method: "post",
data: {},
}).then(async ({ data }) => {
if (data && data.code === 0) {
that.$message({
type: "success",
message: "删除成功!",
that.currentNode = null;
that.isFresh = false;
that.addForm = {};
that.$nextTick(() => {
that.isFresh = true;
});
await that.addOrUpdateHandle();
// this.expandedkey = [node.parent.data.catId]
});
} else {
this.$message.error(data.msg);
return false
}
that.currentNode = null;
that.isFresh = false;
that.addForm = {};
that.$nextTick(() => {
that.isFresh = true;
});
await that.addOrUpdateHandle();
// this.expandedkey = [node.parent.data.catId]
});
})
.catch(() => { });
.catch(() => {});
},
filterNode(value, data) {
if (!value) return true;
@@ -522,10 +557,10 @@ export default {
const children = parent.data.nodes || parent.data;
//若parent.data是对象操作的是子级如果是数组操作的是最外层
if (Array.isArray(parent.data)) {
const parentIndex = parent.data.findIndex((d) => d.id === data.id);
const parentIndex = parent.data.findIndex(d => d.id === data.id);
parent.data.splice(parentIndex, 1);
} else {
const childIndex = children.findIndex((d) => d.id === data.id);
const childIndex = children.findIndex(d => d.id === data.id);
children.splice(childIndex, 1);
}
this.curNode = undefined;
@@ -546,7 +581,7 @@ export default {
return;
}
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
@@ -558,7 +593,7 @@ export default {
nodes: [],
id: id,
typeName: "模板组",
temporaryData: "1", //用来区分临时数据
temporaryData: "1" //用来区分临时数据
};
/* 如果模版深度最多两层,以下条件改成该部分注释
this.curNode && this.curNode.depth == 1
@@ -658,7 +693,7 @@ export default {
this.isUpdateGroup = false;
const parent = node.parent;
const children = parent.data.nodes || parent.data;
const index = children.findIndex((d) => d.id === data.id);
const index = children.findIndex(d => d.id === data.id);
let temp = data;
temp.text = this.isactTitle;
children.splice(index, 1, temp);
@@ -678,7 +713,7 @@ export default {
this.dataListLoading = true;
await this.$http({
url: this.$http.adornUrl("/book/labelAndMarket/labelTree"),
method: "get",
method: "get"
// params: this.$http.adornParams({
// 'page': this.pageIndex,
// 'limit': this.pageSize,
@@ -710,7 +745,7 @@ export default {
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val;
},
}
// // 新增 / 修改
// addOrUpdateHandle(row) {
// this.addOrUpdateVisible = true;
@@ -718,26 +753,31 @@ export default {
// this.$refs.addOrUpdate.init(row);
// });
// },
},
}
};
</script>
<style lang="less" scoped>
/deep/ .filter-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
/deep/
.filter-tree
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
// 设置颜色
// background-color: #baf !important;
}
/deep/ .filter-tree .el-tree-node:focus>.el-tree-node__content {
/deep/ .filter-tree .el-tree-node:focus > .el-tree-node__content {
background-color: transparent !important;
// color: #17b3a3 !important;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
/deep/.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: transparent !important;
// color: #17b3a3 !important;
}
/deep/.filter-tree .el-tree-node__content .el-button {
display: inline-block !important;
}
@@ -812,7 +852,7 @@ export default {
}
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #eaebed;
color: #4796ec;
font-weight: bold;
@@ -920,9 +960,8 @@ p {
.el-tree-node__content:active {
background-color: unset;
}
.isSelect{
/* 自定义角度渐变 */
background-image: linear-gradient(-45deg, #fff, #b0f3ec);
.isSelect {
/* 自定义角度渐变 */
background-image: linear-gradient(-45deg, #fff, #b0f3ec);
}
</style>
</style>

View File

@@ -443,11 +443,6 @@ export default {
}
})
// this.$http({
// url: this.$http.adornUrl(`/master/shopProduct/getProductDetail/${this.dataForm.productId}`),
// method: 'get',
// params: this.$http.adornParams()
// })
.then(res => {
console.log("result at line 452:", res);

File diff suppressed because it is too large Load Diff

View File

@@ -88,7 +88,7 @@
fixed="right"
header-align="center"
align="center"
width="180"
width="240"
label="操作"
>
<template slot-scope="scope">
@@ -101,21 +101,51 @@
<el-button
type="text"
size="small"
@click="handleEditCurriculum(scope.row.productId)"
>修改课程</el-button
>
<el-button
type="text"
size="small"
@click="handleEditTags(scope.row.productId)"
>修改标签</el-button
>
@click.native="handleEditCurriculum(scope.row.productId)"
>新版修改</el-button
>
<el-button
style="color:red"
type="text"
size="small"
@click="deleteHandle(scope.row.productId)"
>删除</el-button
>
<el-dropdown>
<el-button
type="text"
size="small"
>更多操作<i class="el-icon-arrow-down el-icon--right"></i></el-button
>
<!-- <span type="primary" size="mini" class="el-dropdown-link">
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
</span> -->
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item
@click.native="addOrUpdateHandle(scope.row.productId)"
>修改</el-dropdown-item
>
<el-dropdown-item
@click.native="handleEditCurriculum(scope.row.productId)"
>新版修改</el-dropdown-item
> -->
<el-dropdown-item
@click.native="handleEditCorrelation(scope.row.productId)"
>关联绑定</el-dropdown-item
>
<el-dropdown-item
@click.native="handleEditTags(scope.row.productId)"
>修改标签</el-dropdown-item
>
<!-- <el-dropdown-item style="color:red"
@click.native="deleteHandle(scope.row.productId)"
>删除</el-dropdown-item
> -->
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
@@ -137,7 +167,6 @@
@showchooseBookf="showchooseBookf"
></add-or-update>
<curriculum
v-if="curriculumVisible"
ref="curriculum"
@@ -145,16 +174,17 @@
@showchooseBookf="showchooseBookf"
></curriculum>
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
@showchooseBookf="showchooseBookf"
></add-or-update>
<commonTags ref="commonTags"></commonTags>
<correlation ref="correlation"></correlation>
<choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book> -->
</div>
</template>
@@ -163,7 +193,9 @@ import chooseBook from "./chooseBook.vue";
import curriculum from "./curriculum.vue";
import AddOrUpdate from "./shopproduct-add-or-update";
// import AddOrUpdate from "./shopproduct-add-or-update";
import commonTags from "./commonBookTags/commonTags.vue";
import commonTree from "@/views/components/commonBookTags/tags.vue";
import commonTags from "./commonBookTags/commonTags1.vue";
import correlation from "./commonBookTags/correlation.vue";
export default {
data() {
return {
@@ -187,7 +219,8 @@ export default {
curriculum,
AddOrUpdate,
chooseBook,
commonTags
commonTags,
correlation
},
activated() {
this.getDataList();
@@ -198,6 +231,11 @@ export default {
this.$refs.commonTags.open(id);
});
},
handleEditCorrelation(id) {
this.$nextTick(() => {
this.$refs.correlation.open(id);
});
},
closeBookf() {
this.chooseBookVisible = false;
},
@@ -249,6 +287,7 @@ export default {
},
// 新增 / 修改
addOrUpdateHandle(id) {
console.log(11111111111111111);
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);