国学标签代码提交
This commit is contained in:
liqianyouyou
597
src/views/modules/course/sociologyComponents/bookTagsForm.vue
Normal file
597
src/views/modules/course/sociologyComponents/bookTagsForm.vue
Normal file
@@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.productId ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
@close="handlereset"
|
||||
lock-scroll
|
||||
width="750px"
|
||||
>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="所属分类" prop="poids">
|
||||
<el-cascader
|
||||
v-model="dataForm.poids"
|
||||
:options="categorys"
|
||||
:props="props"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handlereset">取消</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { quillEditor } from "vue-quill-editor";
|
||||
import global from "@/views/common/common.vue"; //引入共用组间
|
||||
|
||||
import "quill/dist/quill.core.css";
|
||||
import "quill/dist/quill.snow.css";
|
||||
import "quill/dist/quill.bubble.css";
|
||||
const toolbarOptions = [
|
||||
["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
|
||||
["blockquote", "code-block"], //引用，代码块
|
||||
[{ header: 1 }, { header: 2 }], // 几级标题
|
||||
[{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
|
||||
[{ script: "sub" }, { script: "super" }], // 下角标，上角标
|
||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
||||
[{ direction: "rtl" }], // 文字输入方向
|
||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 颜色选择
|
||||
[
|
||||
{
|
||||
font: [
|
||||
"SimSun",
|
||||
"SimHei",
|
||||
"Microsoft-YaHei",
|
||||
"KaiTi",
|
||||
"FangSong",
|
||||
"Arial",
|
||||
],
|
||||
},
|
||||
], // 字体
|
||||
[{ align: [] }], // 居中
|
||||
["clean"], // 清除样式,
|
||||
["link", "image"], // 上传图片、上传视频
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pointMemery: [], // 花生币操作记录
|
||||
baseUrl: global.baseUrl,
|
||||
goodsTypeList: [],
|
||||
visible: false,
|
||||
categorys: [],
|
||||
fileList: [], // 封面图
|
||||
swiperfileList: [],
|
||||
dialogVisible: false,
|
||||
props: {
|
||||
value: "catId",
|
||||
label: "name",
|
||||
children: "children",
|
||||
checkStrictly: true,
|
||||
},
|
||||
dataForm: {
|
||||
tags: [], // 商品标签
|
||||
hDprice: 0, // 活动价
|
||||
productId: 0,
|
||||
limitCountImg: 1, // 图片数量
|
||||
productImageList: "", // 轮播图
|
||||
showBtnDealImg: true,
|
||||
noneBtnImg: false,
|
||||
productName: "",
|
||||
productStock: null, // 商品库存
|
||||
price: "",
|
||||
author: "",
|
||||
publisher: "",
|
||||
weight: "",
|
||||
pubDate: "",
|
||||
// format: '', // 开本
|
||||
isFreeMail: 1, // 是否包邮
|
||||
// pageNum: '',
|
||||
// quality: '', // 内文用纸
|
||||
isNew: 0,
|
||||
sumSales: null, // 总销量
|
||||
publishStatus: "",
|
||||
productPid: "",
|
||||
productImages: "",
|
||||
createTime: "",
|
||||
updateTime: "",
|
||||
delFlag: "",
|
||||
sort: "",
|
||||
goodsType: "", // 商品类型
|
||||
poids: [],
|
||||
|
||||
Books: [], // 关联的图书
|
||||
},
|
||||
bookidsd: [],
|
||||
dataRule: {
|
||||
productName: [
|
||||
{
|
||||
required: true,
|
||||
message: "商品名称不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
price: [
|
||||
{
|
||||
required: true,
|
||||
message: "商品价格不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
weight: [
|
||||
{
|
||||
required: true,
|
||||
message: "商品重量不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
goodsType: [
|
||||
{
|
||||
required: true,
|
||||
message: "商品类型不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
poids: [
|
||||
{
|
||||
required: true,
|
||||
message: "商品父id不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
productImages: [
|
||||
{
|
||||
required: true,
|
||||
message: "商品图不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
// productDetails: [{
|
||||
// required: true,
|
||||
// message: '商品详情不能为空',
|
||||
// trigger: 'blur'
|
||||
// }],
|
||||
productStock: [
|
||||
{
|
||||
required: true,
|
||||
message: "商品库存不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
// updateTime: [
|
||||
// { required: true, message: '更新时间不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// delFlag: [
|
||||
// { required: true, message: '删除标记不能为空', trigger: 'blur' }
|
||||
// ],
|
||||
// sort: [
|
||||
// { required: true, message: '排序不能为空', trigger: 'blur' }
|
||||
// ]
|
||||
},
|
||||
// 富文本编辑器配置
|
||||
editorOption: {
|
||||
modules: {
|
||||
history: {
|
||||
delay: 1000,
|
||||
maxStack: 50,
|
||||
userOnly: false,
|
||||
},
|
||||
toolbar: {
|
||||
container: toolbarOptions,
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
// 调用element的图片上传组件
|
||||
document.querySelector(".avatar-uploader input").click();
|
||||
} else {
|
||||
this.quill.format("image", false);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
placeholder: "请输入正文",
|
||||
},
|
||||
tagList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTreeList();
|
||||
this.getTags();
|
||||
},
|
||||
methods: {
|
||||
contentUploadSuccess(res, file) {
|
||||
// console.log(res)
|
||||
let quill = this.$refs.myQuillEditor.quill;
|
||||
// 如果上传成功
|
||||
if (res) {
|
||||
// 获取光标所在位置
|
||||
let length = quill.getSelection().index;
|
||||
// 插入图片，res为服务器返回的图片链接地址
|
||||
quill.insertEmbed(length, "image", res.url);
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1);
|
||||
} else {
|
||||
// 提示信息，需引入Message
|
||||
this.$message.error("图片插入失败！");
|
||||
}
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
// console.log(value, 'value')
|
||||
},
|
||||
// 获取商品标签
|
||||
getTags() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/label/getLabels"),
|
||||
method: "post",
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.tagList = data.result.labels;
|
||||
// this.totalPage = data.page.totalCount
|
||||
} else {
|
||||
this.tagList = [];
|
||||
// this.totalPage = 0
|
||||
}
|
||||
});
|
||||
},
|
||||
showChooseBook() {
|
||||
// 显示图书列表
|
||||
this.$emit("showchooseBookf", { bookIds: this.dataForm.Books });
|
||||
// console.log('发送指令')
|
||||
this.$bus.$emit("showchooseBook", { bookIds: this.dataForm.Books });
|
||||
},
|
||||
init(id) {
|
||||
this.dataForm.productId = id || 0;
|
||||
this.visible = true;
|
||||
this.getTags();
|
||||
this.$nextTick(() => {
|
||||
this.$refs["dataForm"].resetFields();
|
||||
if (this.dataForm.productId) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
`/book/shopproduct/info/${this.dataForm.productId}`
|
||||
),
|
||||
method: "get",
|
||||
params: this.$http.adornParams(),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataForm.tags = data.labels;
|
||||
// console.log('收到的值', this.dataForm.tags)
|
||||
this.dataForm.productName = data.shopProduct.productName;
|
||||
this.dataForm.price = data.shopProduct.price;
|
||||
this.dataForm.goodsType = data.shopProduct.goodsType;
|
||||
this.dataForm.weight = data.shopProduct.weight;
|
||||
this.dataForm.publishStatus = data.shopProduct.publishStatus;
|
||||
this.dataForm.productPid = data.shopProduct.productPid;
|
||||
this.dataForm.productImages = data.shopProduct.productImages;
|
||||
this.dataForm.createTime = data.shopProduct.createTime;
|
||||
this.dataForm.updateTime = data.shopProduct.updateTime;
|
||||
this.dataForm.delFlag = data.shopProduct.delFlag;
|
||||
this.dataForm.sort = data.shopProduct.sort;
|
||||
this.dataForm.publisher = data.shopProduct.publisher;
|
||||
this.dataForm.author = data.shopProduct.author;
|
||||
this.dataForm.pubDate = data.shopProduct.pubDate;
|
||||
// this.dataForm.pageNum = data.shopProduct.pageNum
|
||||
// this.dataForm.quality = data.shopProduct.quality
|
||||
// this.dataForm.format = data.shopProduct.format
|
||||
this.dataForm.isFreeMail = data.shopProduct.isFreeMail;
|
||||
this.dataForm.isNew = data.shopProduct.isNew;
|
||||
this.dataForm.productDetails = data.shopProduct.productDetails;
|
||||
this.dataForm.poids = data.shopProduct.poids;
|
||||
this.dataForm.productStock = data.shopProduct.productStock;
|
||||
this.dataForm.hDprice = data.shopProduct.activityPrice;
|
||||
let arrArr = [];
|
||||
|
||||
if (data.shopProduct.bookidsimages !== "") {
|
||||
this.dataForm.Books = data.shopProduct.bookidsimages;
|
||||
}
|
||||
|
||||
sessionStorage.setItem(
|
||||
"Books",
|
||||
JSON.stringify(this.dataForm.Books)
|
||||
);
|
||||
|
||||
if (data.shopProduct.productImages != "") {
|
||||
var img = {
|
||||
name: "",
|
||||
url: data.shopProduct.productImages,
|
||||
};
|
||||
var attr = [];
|
||||
attr.push(img);
|
||||
this.fileList = attr;
|
||||
}
|
||||
|
||||
if (
|
||||
data.shopProduct.productImageList == null ||
|
||||
data.shopProduct.productImageList[0] == "" ||
|
||||
data.shopProduct.productImageList == ""
|
||||
) {
|
||||
this.swiperfileList = [];
|
||||
// console.log('走这')
|
||||
} else {
|
||||
// 有轮播图
|
||||
// console.log(data.shopProduct.productImageList)
|
||||
let arr = [];
|
||||
let arr1 = [];
|
||||
|
||||
arr = data.shopProduct.productImageList.split(",");
|
||||
// console.log(arr, '处理后得轮播图数组')
|
||||
arr.forEach((item, index) => {
|
||||
arr1.push({
|
||||
name: index,
|
||||
url: item,
|
||||
});
|
||||
});
|
||||
this.swiperfileList = arr1;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取商品类型
|
||||
getGoodsTypeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
|
||||
method: "get",
|
||||
}).then(({ data }) => {
|
||||
// console.log(data.dataList)
|
||||
this.goodsTypeList = data.dataList;
|
||||
});
|
||||
},
|
||||
// 删除图书
|
||||
deliteBook(index) {
|
||||
this.dataForm.Books.splice(index, 1);
|
||||
sessionStorage.setItem("Books", JSON.stringify(this.dataForm.Books));
|
||||
},
|
||||
dealImgChange(file, fileList) {
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.getBookIds();
|
||||
// console.log(this.bookidsd,'this.bookidsd')
|
||||
// return false
|
||||
this.$refs["dataForm"].validate((valid) => {
|
||||
this.dataForm.productImageList = this.getStringImgUrl();
|
||||
var bookIDS = this.getBookIds();
|
||||
// console.log(this.dataForm.productImageList)
|
||||
if (valid) {
|
||||
if (!this.dataForm.hDprice || this.dataForm.hDprice == 0) {
|
||||
// console.log('没有值')
|
||||
this.dataForm.hDprice = 0;
|
||||
}
|
||||
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
`/book/shopproduct/${
|
||||
!this.dataForm.productId ? "save" : "update"
|
||||
}`
|
||||
),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
productId: this.dataForm.productId || undefined,
|
||||
productName: this.dataForm.productName,
|
||||
price: this.dataForm.price,
|
||||
weight: this.dataForm.weight,
|
||||
publishStatus: this.dataForm.publishStatus,
|
||||
productPid: this.dataForm.poids[this.dataForm.poids.length - 1],
|
||||
productImages: this.dataForm.productImages,
|
||||
productImageList: this.dataForm.productImageList,
|
||||
createTime: this.dataForm.createTime,
|
||||
updateTime: this.dataForm.updateTime,
|
||||
delFlag: this.dataForm.delFlag,
|
||||
sort: this.dataForm.sort,
|
||||
goodsType: this.dataForm.goodsType,
|
||||
productDetails: this.dataForm.productDetails,
|
||||
author: this.dataForm.author,
|
||||
publisher: this.dataForm.publisher,
|
||||
pubDate: this.dataForm.pubDate,
|
||||
shoproudLabels: this.dataForm.tags,
|
||||
// 'format': this.dataForm.format, // 开本
|
||||
isFreeMail: this.dataForm.isFreeMail,
|
||||
isNew: this.dataForm.isNew,
|
||||
// 'pageNum': this.dataForm.pageNum,
|
||||
// 'quality': this.dataForm.quality, // 内文用纸
|
||||
productStock: this.dataForm.productStock, // 库存
|
||||
activityPrice: this.dataForm.hDprice,
|
||||
bookids: this.bookidsd, // 关联的图书[12,13,45]
|
||||
// 'bookidsimages': this.dataForm.Books // 关联的图书对象
|
||||
}),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false;
|
||||
this.$refs["dataForm"].resetFields();
|
||||
// this.$refs['dataForm'].reset()
|
||||
this.$emit("refreshDataList");
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
changeTime(e) {
|
||||
console.log(e);
|
||||
},
|
||||
getBookIds() {
|
||||
// 图书ids
|
||||
// console.log(this.dataForm.Books,'Books')
|
||||
this.bookidsd = this.dataForm.Books.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
},
|
||||
getTreeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/book/shopcategory/listTree`),
|
||||
method: "get",
|
||||
params: this.$http.adornParams(),
|
||||
}).then(({ data }) => {
|
||||
this.categorys = data.data;
|
||||
});
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dataForm.productImages = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
bannerHandlePicSuccess(res, file) {
|
||||
// 轮播图上传成功
|
||||
if (res.msg == "success") {
|
||||
this.swiperfileList.push({
|
||||
name: file.name,
|
||||
url: res.url,
|
||||
});
|
||||
// console.log(this.swiperfileList)
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
// 字符串图片地址
|
||||
getStringImgUrl() {
|
||||
let arr = this.swiperfileList.map((item) => item.url);
|
||||
if (arr.length <= 0) {
|
||||
return null;
|
||||
} else {
|
||||
return arr.toString();
|
||||
}
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
// console.log(res,'res')
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.productImages = res.url;
|
||||
this.fileList.push({
|
||||
name: file.name,
|
||||
url: res.url,
|
||||
});
|
||||
// console.log(this.dataForm.productImages,'productImages')
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
bannerHandleRemove(file, fileList) {
|
||||
// 轮播图删除操作
|
||||
this.swiperfileList = fileList;
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.productImages = "";
|
||||
this.fileList = [];
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handlereset() {
|
||||
(this.fileList = []), (this.visible = false);
|
||||
this.dataForm.tagList = [];
|
||||
this.dataForm.Books = [];
|
||||
this.swiperfileList = [];
|
||||
this.$refs["dataForm"].resetFields();
|
||||
sessionStorage.setItem("Books", JSON.stringify([]));
|
||||
// this.$refs['dataForm'].reset()
|
||||
},
|
||||
// 失去焦点事件
|
||||
onEditorBlur(quill) {
|
||||
// console.log('editor blur!', quill)
|
||||
},
|
||||
// 获得焦点事件
|
||||
onEditorFocus(quill) {
|
||||
//console.log('editor focus!', quill)
|
||||
},
|
||||
// 准备富文本编辑器
|
||||
onEditorReady(quill) {
|
||||
// console.log('editor ready!', quill)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
quillEditor,
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on("haveBookIds", (data) => {
|
||||
sessionStorage.setItem("Books", JSON.stringify(data.bookIds));
|
||||
// console.log('haveBookIds',data)
|
||||
//console.log(data.bookIds, '收到的数据')
|
||||
var newarr = [];
|
||||
var ids = []; //哨兵数组
|
||||
if (data.bookIds && data.bookIds.length > 0) {
|
||||
ids[0] = data.bookIds[0].id;
|
||||
newarr[0] = data.bookIds[0];
|
||||
// console.log(ids,'ids')
|
||||
// newarr.push(data.bookIds[0])
|
||||
for (let index = 0; index < data.bookIds.length; index++) {
|
||||
if (!ids.includes(data.bookIds[index].id)) {
|
||||
// console.log(data.bookIds[index].id, 'data.bookIds[index].id')
|
||||
newarr.push(data.bookIds[index]);
|
||||
ids.push(data.bookIds[index].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log(newarr,'newarr',ids)
|
||||
data.bookIds.length > 0
|
||||
? (this.dataForm.Books = newarr)
|
||||
: (this.dataForm.Books = []);
|
||||
});
|
||||
},
|
||||
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val, oldVal) {
|
||||
this.getGoodsTypeList();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
// .disUoloadSty {
|
||||
// .el-upload--picture-card {
|
||||
// display: none;
|
||||
// /* 上传按钮隐藏 */
|
||||
// }
|
||||
// }
|
||||
|
||||
// .el-form-item {
|
||||
// /deep/ .el-form-item__label {
|
||||
// font-size: 12px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.el-uploadfeng {
|
||||
.el-upload-list__item {
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
}
|
||||
|
||||
.el-upload--picture-card {
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
line-height: 95px;
|
||||
}
|
||||
}
|
||||
|
||||
.shangpin_editor .ql-editor {
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
612
src/views/modules/course/sociologyComponents/shopproduct.vue
Normal file
612
src/views/modules/course/sociologyComponents/shopproduct.vue
Normal file
@@ -0,0 +1,612 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%; height: 100%; margin-top: -50px"
|
||||
|
||||
>
|
||||
<!-- <el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
style="float: right"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.key"
|
||||
placeholder="商品名称"
|
||||
clearable
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="
|
||||
pageIndex = 1;
|
||||
getDataList(bookMarketId);
|
||||
"
|
||||
size="small"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
<div class="search_form">
|
||||
<div class="addFormBox shopFormBox">
|
||||
<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.productName"
|
||||
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
|
||||
style="padding:0 10px;box-sizing: border-box;"
|
||||
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: 80px !important"
|
||||
>
|
||||
<el-button @click="getAssociatedGoodsList(dataForm)" size="mini"
|
||||
>查询</el-button
|
||||
>
|
||||
<!-- <el-button @click="handleCommonShopReset()" size="mini"
|
||||
>重置</el-button
|
||||
> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shop_box">
|
||||
<!-- @selection-change="handleSelectionChange" -->
|
||||
<el-table
|
||||
ref="table"
|
||||
height="100%"
|
||||
:data="associatedGoodsList"
|
||||
:row-key="getRowKeys"
|
||||
border
|
||||
size="mini"
|
||||
v-loading="dataListLoading"
|
||||
|
||||
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="product.productName"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="课程名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="product.price"
|
||||
width="120"
|
||||
header-align="center"
|
||||
align="center"
|
||||
sortable
|
||||
label="价格"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="product.activityPrice"
|
||||
width="120"
|
||||
header-align="center"
|
||||
align="center"
|
||||
sortable
|
||||
label="活动价"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="product.productStock"
|
||||
width="120"
|
||||
header-align="center"
|
||||
align="center"
|
||||
sortable
|
||||
label="库存"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="商品图"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img
|
||||
v-if="scope.row.product.productImages != ''"
|
||||
:src="scope.row.product.productImages"
|
||||
width="25"
|
||||
height="35"
|
||||
class="tableImg"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="操作"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
style="color: red;"
|
||||
@click="shopDelete(scope.row)"
|
||||
size="mini"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <li
|
||||
v-for="(v, i) in associatedGoodsList"
|
||||
@click="isEdit ? selectShop(v) : ''"
|
||||
:class="
|
||||
selectShopArr.includes(v.id)
|
||||
? 'isSelect shop_box_item'
|
||||
: 'shop_box_item'
|
||||
"
|
||||
>
|
||||
<el-checkbox
|
||||
v-if="isEdit"
|
||||
size="medium"
|
||||
@change="(e) => selectShop(v)"
|
||||
:value="selectShopArr.includes(v.id)"
|
||||
class="shop_box_item_check"
|
||||
></el-checkbox>
|
||||
<img
|
||||
class="shop_box_item_img img-loaded"
|
||||
style="object-fit: cover"
|
||||
data-lazy-collect="1"
|
||||
:src="v.product.productImages"
|
||||
/>
|
||||
|
||||
<div class="shop_box_item_content">
|
||||
<li class="shop_box_item_title">
|
||||
<span></span><span>{{ v.product.productName }}</span>
|
||||
|
||||
</li>
|
||||
<li class="shop_box_item_title shop_box_item_info">
|
||||
<span>价格：</span>
|
||||
|
||||
<span style="color: #fd3f31">¥{{ v.product.price }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="v.product.activityPrice"
|
||||
class="shop_box_item_title shop_box_item_info"
|
||||
>
|
||||
<span>活动价：</span>
|
||||
|
||||
<span style="color: #fd3f31">¥{{ v.product.activityPrice }}</span>
|
||||
</li>
|
||||
<li class="shop_box_item_title shop_box_item_info">
|
||||
<span>库存：</span>
|
||||
|
||||
<span>{{ v.product.productStock }}</span>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
|
||||
</li> -->
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import chooseBook from './chooseBook.vue'
|
||||
// import AddOrUpdate from './shopproduct-add-or-update'
|
||||
export default {
|
||||
props: ["urlList", "isEdit", "currentId", "currentType"],
|
||||
data() {
|
||||
return {
|
||||
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
|
||||
// goodsTypeList: [], // goodsTypeList
|
||||
multipleSelection: [], // 当前页选中的数据
|
||||
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
|
||||
|
||||
bookMarketId: null,
|
||||
dataList: [],
|
||||
associatedGoodsList: [],
|
||||
publishStatus: false,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false,
|
||||
chooseBookVisible: false,
|
||||
bookIds: [],
|
||||
selectShopArr: [],
|
||||
dataForm: {
|
||||
productName: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 只要通过this.的方式拿到的值都可以使用watch进行监听
|
||||
isEdit: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
console.log("🚀 ~ handler ~ val:", val);
|
||||
this.selectShopArr = [];
|
||||
this.$forceUpdate();
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
// AddOrUpdate,
|
||||
// chooseBook
|
||||
},
|
||||
async activated() {
|
||||
|
||||
this.multipleSelection = [];
|
||||
await this.getAssociatedGoodsList({ ...this.dataForm });
|
||||
// await this.getGoodsTypeList();
|
||||
},
|
||||
methods: {
|
||||
shopDelete(row){
|
||||
this.$emit('delete',[row])
|
||||
},
|
||||
// 获取商品类型
|
||||
getGoodsTypeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
|
||||
method: "get",
|
||||
}).then(({ data }) => {
|
||||
// console.log(data.dataList)
|
||||
this.goodsTypeList = data.dataList;
|
||||
});
|
||||
},
|
||||
handleCheckAllChange(status) {
|
||||
// if (status) {
|
||||
// this.selectShopArr = this.associatedGoodsList.map((e) => e.id);
|
||||
// } else {
|
||||
// this.selectShopArr = [];
|
||||
// }
|
||||
this.$emit('delete',this.associatedGoodsList,'all')
|
||||
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
selectShop(v) {
|
||||
if (this.selectShopArr.includes(v.id)) {
|
||||
this.selectShopArr = this.selectShopArr.filter(function (item) {
|
||||
return item !== v.id;
|
||||
});
|
||||
} else {
|
||||
this.selectShopArr.push(v.id);
|
||||
}
|
||||
console.log("🚀 ~ selectShop ~ v:", v);
|
||||
|
||||
console.log("🚀 ~ selectShop ~ this.selectShopArr:", this.selectShopArr);
|
||||
this.$forceUpdate();
|
||||
},
|
||||
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(bookMarketId) {
|
||||
this.bookMarketId = bookMarketId;
|
||||
this.dataListLoading = true;
|
||||
this.getDataList = [];
|
||||
this.clear();
|
||||
// if (bookMarketId) {
|
||||
// await this.getCorrelationArr(bookMarketId);
|
||||
// }
|
||||
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl("/book/shopproduct/list"),
|
||||
method: "get",
|
||||
params: this.$http.adornParams({
|
||||
page: this.pageIndex,
|
||||
limit: this.pageSize,
|
||||
key: this.dataForm.key,
|
||||
}),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.page.list;
|
||||
this.totalPage = data.page.totalCount;
|
||||
} else {
|
||||
this.dataList = [];
|
||||
this.totalPage = 0;
|
||||
}
|
||||
// setTimeout(async () => {
|
||||
// await this.setSelectRow();
|
||||
// }, 200);
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
clear() {
|
||||
// this.$refs.table.clearSelection();
|
||||
// this.multipleSelection = [];
|
||||
},
|
||||
// 获取关联数据列表
|
||||
async getAssociatedGoodsList() {
|
||||
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
|
||||
// :currentId="addForm.id"
|
||||
// currentType="bookLabelId"
|
||||
var form = { ...this.dataForm };
|
||||
|
||||
// if (this.currentType == "bookLabelId") {
|
||||
// form.bookLabelId = this.currentId;
|
||||
form.id = this.currentId;
|
||||
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form)
|
||||
// }
|
||||
// else if (this.currentType == "bookMarketId") {
|
||||
// form.bookMarketId = this.currentId;
|
||||
// console.log("🚀 ~ getAssociatedGoodsList ~ form:", form)
|
||||
// }
|
||||
|
||||
// await this.getGoodsTypeList();
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`${this.urlList.getAssociatedGoodsList}`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
current: 1,
|
||||
limit: 99999999,
|
||||
// productName: "",
|
||||
productId: "",
|
||||
...form,
|
||||
// bookLabelId: bookLabelId,
|
||||
}),
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.associatedGoodsList = [...data.courseList];
|
||||
|
||||
this.dataListLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
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>
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.shop_box {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: auto;
|
||||
// margin-left: -10px;
|
||||
padding-bottom: 20px;
|
||||
// margin-top: 20px;
|
||||
.shop_box_item {
|
||||
width: 23.7%;
|
||||
min-width: 200px;
|
||||
height: 95px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
|
||||
float: left;
|
||||
// margin: 20px;
|
||||
// background: #f5f5f5;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
.shop_box_item_check {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
}
|
||||
.shop_box_item_img {
|
||||
margin: 0 auto;
|
||||
// display: flex;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
object-fit: contain;
|
||||
background: #bababa;
|
||||
}
|
||||
.shop_box_item_content {
|
||||
width: calc(100% - 70px);
|
||||
float: right;
|
||||
}
|
||||
.shop_box_item_title {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
.title-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isSelect {
|
||||
border: 1px solid rgb(19, 206, 102);
|
||||
box-shadow: 0 2px 12px 0 rgba(19, 206, 102);
|
||||
}
|
||||
.shop_box_item_info {
|
||||
font-weight: 500 !important;
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
.shopFormBox {
|
||||
float: right;
|
||||
min-width: 520px;
|
||||
.form_item {
|
||||
width: 240px !important;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.addFormBox {
|
||||
.form_item {
|
||||
width: 33%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.search_form {
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/deep/ .el-select-dropdown__list {
|
||||
padding: 6px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-drawer title="新增关联商品" v-if="drawer" :wrapperClosable="false" :visible.sync="drawer" destroy-on-close
|
||||
direction="rtl" size="70%"> -->
|
||||
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="drawer"
|
||||
@close="handlereset">
|
||||
<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="title" class="form_item">
|
||||
<el-input size="small" placeholder="请输入商品名称" style="width: 100%" v-model="dataForm.productName" 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 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>
|
||||
<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> -->
|
||||
</el-dialog>
|
||||
</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: {
|
||||
productName: "",
|
||||
},
|
||||
bookMarketId: null,
|
||||
dataList: [],
|
||||
publishStatus: false,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false,
|
||||
chooseBookVisible: false,
|
||||
bookIds: [],
|
||||
goodsTypeList: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
// AddOrUpdate,
|
||||
// chooseBook
|
||||
},
|
||||
activated() {
|
||||
this.getDataList();
|
||||
},
|
||||
methods: {
|
||||
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 open() {
|
||||
this.drawer = true;
|
||||
this.dataForm = {};
|
||||
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,
|
||||
page: this.pageIndex,
|
||||
limit: this.pageSize,
|
||||
|
||||
// productId: "",
|
||||
};
|
||||
// this.multipleSelection=[]
|
||||
// if (this.currentType == "bookLabelId") {
|
||||
form.id = 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(`/master/courseSociology/getCourseListCanSociology`),
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
@@ -64,7 +64,7 @@
|
||||
|
||||
|
||||
<script>
|
||||
import global from '../../common/common.vue' //引入共用组间
|
||||
import global from '../../../common/common.vue' //引入共用组间
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
930
src/views/modules/course/sociologyComponents/tags.vue
Normal file
930
src/views/modules/course/sociologyComponents/tags.vue
Normal file
@@ -0,0 +1,930 @@
|
||||
<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">
|
||||
|
||||
当前标签：<span style="color: #17b3a3; font-weight: 600">{{
|
||||
currentNode ? currentNode.data.title : ""
|
||||
}}</span>
|
||||
</p>
|
||||
<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
|
||||
v-model="checkAll"
|
||||
@change="handleCheckAllChange"
|
||||
style="float: left"
|
||||
>全选</el-checkbox
|
||||
>
|
||||
</p> -->
|
||||
<slot name="center" v-if="source == 'shop'"></slot>
|
||||
|
||||
<!-- <slot v-if="source=='shop'" name="title">
|
||||
|
||||
</slot> -->
|
||||
|
||||
<!-- 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">
|
||||
<!-- @click="handleClickNodes(node, data)" -->
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" @click="
|
||||
source == 'tags'
|
||||
? handleClickNodes(node, data, 'edit')
|
||||
: ''
|
||||
" :class="`${currentNode&¤tNode.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 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>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click.stop="handleClickNodes(node, data, 'edit')"
|
||||
>
|
||||
修改
|
||||
</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>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import dialogComponent from './seckillprodrelation'
|
||||
import debounce from "lodash/debounce"; //导入lodash中的debounce
|
||||
export default {
|
||||
props: ["dataList", "urlList", "source", "productId", 'sourceType'],
|
||||
data() {
|
||||
return {
|
||||
currentNode: null,
|
||||
checkAll: false,
|
||||
treeDataList: [],
|
||||
selectArr: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "title",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
watch: {
|
||||
dataList(val) {
|
||||
this.treeDataList = val;
|
||||
},
|
||||
currentNode: {
|
||||
handler(newVal, oldVal) {
|
||||
// this.$emit('changeCurrentNode',this.currentNode)
|
||||
},
|
||||
|
||||
deep: true
|
||||
},
|
||||
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
},
|
||||
activated() {
|
||||
console.log("🚀 ~ activated ~ this.currentNode:", this.currentNode, "9999");
|
||||
if (this.source == "tags") {
|
||||
if (this.currentNode && this.currentNode.data.id) {
|
||||
this.setCurrentNodeShow(this.currentNode.data.id);
|
||||
this.handleClickNodes(this.currentNode, this.currentNode.data, "edit");
|
||||
}
|
||||
}
|
||||
this.selectArr = [];
|
||||
this.checkAll = false;
|
||||
|
||||
// this.getDataList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getAssociatedGoodsList(urlList, idType) {
|
||||
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
|
||||
// :currentId="addForm.id"
|
||||
// currentType="bookLabelId"
|
||||
var form = {};
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`${urlList}`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
current: 1,
|
||||
limit: 99999999,
|
||||
// productName: "",
|
||||
productId: this.productId,
|
||||
...form,
|
||||
// bookLabelId: bookLabelId,
|
||||
}),
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
if (idType == "bookLabelId") {
|
||||
this.selectArr = data.result.records.map((e) => {
|
||||
return e.bookLabelId;
|
||||
});
|
||||
} else if (idType == "bookMarketId") {
|
||||
this.selectArr = data.result.records.map((e) => {
|
||||
return e.bookMarketId;
|
||||
});
|
||||
}
|
||||
|
||||
console.log(
|
||||
"🚀 ~ getAssociatedGoodsList ~ this.selectArr:",
|
||||
this.selectArr
|
||||
);
|
||||
this.dataListLoading = false;
|
||||
} else {
|
||||
this.dataListLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
collectId(arr, ids = []) {
|
||||
arr.forEach(({ id, children, isLast }) => {
|
||||
if (id && isLast == 1) {
|
||||
ids.push(id);
|
||||
}
|
||||
if (children) {
|
||||
this.collectId(children, ids);
|
||||
}
|
||||
});
|
||||
return ids;
|
||||
},
|
||||
handleCheckAllChange(status) {
|
||||
this.selectArr = [];
|
||||
if (status) {
|
||||
this.selectArr = this.collectId(this.treeDataList);
|
||||
console.log("🚀 ~ handleCheckAllChange ~ data111:", this.selectArr);
|
||||
// this.treeDataList.forEach((e) => {
|
||||
// if (e.isLast == 1) {
|
||||
// this.selectArr.push(e.id);
|
||||
// }
|
||||
// });
|
||||
} else {
|
||||
this.selectArr = [];
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
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)) {
|
||||
this.$emit("delete", v.id, this.sourceType);
|
||||
} else {
|
||||
this.$emit("submit", v.id, this.sourceType);
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}, 200),
|
||||
// handleCheckAllChange(status) {
|
||||
// if (status) {
|
||||
// this.selectArr = this.treeDataList.map((e) => e.id);
|
||||
// } else {
|
||||
// this.selectArr = [];
|
||||
// }
|
||||
// this.$forceUpdate();
|
||||
// },
|
||||
async setCurrentNodeShow(id) {
|
||||
console.log("🚀 ~ setCurrentNodeShow ~ id222:", id, this.currentNode)
|
||||
|
||||
var newNodeData = {}
|
||||
if (id) {
|
||||
newNodeData = await this.$refs.tree.getNode(id);
|
||||
} else {
|
||||
newNodeData = {
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
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");
|
||||
|
||||
|
||||
},
|
||||
allowDrop(draggingNode, dropNode, type) {
|
||||
console.log(draggingNode.level, dropNode.level);
|
||||
//注掉的是同级拖拽
|
||||
if (draggingNode.level === dropNode.level) {
|
||||
return type === "prev" || type === "next";
|
||||
} else {
|
||||
// 不同级进行处理
|
||||
return false;
|
||||
}
|
||||
},
|
||||
async correlationShop(bookLabelId) {
|
||||
var status;
|
||||
var productId = this.$refs.commonShop.multipleSelection.map(
|
||||
(e) => e.productId
|
||||
);
|
||||
console.log("🚀 ~ correlationShop ~ productId:", productId);
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`/book/labelAndMarket/saveToLabel`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
productId: productId.toString(","),
|
||||
bookLabelId: bookLabelId,
|
||||
}),
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
status = true;
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
status = false;
|
||||
}
|
||||
});
|
||||
return status;
|
||||
},
|
||||
//新增修改
|
||||
dataFormSubmit: debounce(async function (formName) {
|
||||
// return false
|
||||
if (this.addForm.title == "") {
|
||||
this.$message.error("请输入标签名称");
|
||||
return false;
|
||||
}
|
||||
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,
|
||||
}),
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
var status = await this.correlationShop(data.result.id);
|
||||
if (status) {
|
||||
await this.getDataList();
|
||||
var newNodeData = await this.$refs.tree.getNode(data.result.id);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(data.result.id);
|
||||
});
|
||||
|
||||
await this.handleClickNodes(
|
||||
newNodeData,
|
||||
newNodeData.data,
|
||||
"edit"
|
||||
);
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false;
|
||||
|
||||
this.$refs.tree.setCheckedKeys([data.result.id]);
|
||||
// console.log(this.$refs.tree.getCheckedKeys([this.addForm.id]),'88888');
|
||||
// this.$refs["addForm"].resetFields();
|
||||
// this.addForm={}
|
||||
|
||||
// this.$emit("refreshDataList");
|
||||
},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 200),
|
||||
setCheckedKeys() {
|
||||
this.$refs.tree.setCheckedKeys([0]);
|
||||
},
|
||||
handlereset() {
|
||||
this.currentNode = null;
|
||||
this.isFresh = false;
|
||||
this.isFresh = true;
|
||||
},
|
||||
async handleClickNodes(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()
|
||||
var form = {};
|
||||
|
||||
if (this.source == "shop") {
|
||||
await this.selectShop(data);
|
||||
} else if (this.source == "tags") {
|
||||
switch (type) {
|
||||
case "add":
|
||||
form = { ...data };
|
||||
break;
|
||||
case "edit":
|
||||
form = { ...node.data };
|
||||
break;
|
||||
case "addChildren":
|
||||
form = {
|
||||
children: [],
|
||||
delFlag: 0,
|
||||
isLast: 0,
|
||||
pid: data.id,
|
||||
sort: 0,
|
||||
title: "",
|
||||
};
|
||||
break;
|
||||
}
|
||||
this.addForm = { ...form };
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit(
|
||||
"getCommonShopDataList",
|
||||
type,
|
||||
type == "edit" ? form.id : null,
|
||||
this.addForm
|
||||
);
|
||||
// this.$refs.commonShop.clear();
|
||||
// this.$refs.commonShop.bookMarketId = null;
|
||||
// this.$refs.commonShop.getDataList();
|
||||
});
|
||||
}
|
||||
},
|
||||
addOrUpdateHandle() {
|
||||
|
||||
var addform = {
|
||||
children: [],
|
||||
delFlag: 0,
|
||||
isLast: 0,
|
||||
pid: 0,
|
||||
sort: 0,
|
||||
title: "",
|
||||
};
|
||||
this.handleClickNodes({ data: addform }, addform, "add");
|
||||
// if (!this.currentNode) {
|
||||
// this.$message.error("请先选择分类");
|
||||
// return;
|
||||
// }
|
||||
},
|
||||
async remove(data) {
|
||||
var that = this;
|
||||
var ids = { productId: data.productId };
|
||||
this.$confirm(`是否删除标签【${data.title}】？`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
|
||||
that.$http({
|
||||
url: that.$http.adornUrl(`${that.urlList.delete}`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
"id": data.id
|
||||
}),
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
that.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
} 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(() => { });
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.title.indexOf(value) !== -1;
|
||||
},
|
||||
|
||||
// renderContent(h, { node, data, store }) {
|
||||
// return;
|
||||
// `<span
|
||||
// style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
|
||||
// on-mouseenter={() => this.mouseenteract(data)}
|
||||
// on-mouseleave={() => this.mouseleaveact(data)}
|
||||
// >
|
||||
// <span>
|
||||
// <span>{node.label}</span>
|
||||
// </span>
|
||||
// {this.isact == data ? (
|
||||
// <span>
|
||||
// {this.isact.typeName == "模板组" ? (
|
||||
// <el-button
|
||||
// class="m-r-10"
|
||||
// type="text"
|
||||
// icon="el-icon-edit"
|
||||
// on-click={() => this.handleUpdateGroup(node, data)}
|
||||
// ></el-button>
|
||||
// ) : (
|
||||
// <span></span>
|
||||
// )}
|
||||
// <el-button
|
||||
// type="text"
|
||||
// icon="el-icon-delete"
|
||||
// on-click={(e) => this.handleDelete(node, data, e)}
|
||||
// ></el-button>
|
||||
// </span>
|
||||
// ) : (
|
||||
// <span></span>
|
||||
// )}
|
||||
// </span>`;
|
||||
// },
|
||||
updateRenderContent(h, { node, data, store }) {
|
||||
return `
|
||||
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
|
||||
<span>
|
||||
{this.isact == data ? (
|
||||
<input
|
||||
type="text"
|
||||
onChange={this.handleChangeTitle.bind(this)}
|
||||
value={node.label}
|
||||
/>
|
||||
) : (
|
||||
<span>{node.label}</span>
|
||||
)}
|
||||
</span>
|
||||
{this.isact == data ? (
|
||||
<span>
|
||||
{this.isact.typeName == "模板组" ? (
|
||||
<span>
|
||||
<el-button
|
||||
class="m-r-10"
|
||||
type="text"
|
||||
icon="el-icon-check"
|
||||
on-click={() => this.updateGroup(node, data)}
|
||||
></el-button>
|
||||
<el-button
|
||||
class="m-r-10"
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
on-click={(e) => this.cancelUpdate(node, data, e)}
|
||||
></el-button>
|
||||
</span>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
</span>`;
|
||||
},
|
||||
//获取鼠标进入节点的数据
|
||||
mouseenteract(da) {
|
||||
this.isact = da;
|
||||
},
|
||||
mouseleaveact(da) {
|
||||
this.isact = "";
|
||||
},
|
||||
handleNodeClick(pdata) {
|
||||
this.curNode = pdata;
|
||||
document
|
||||
.getElementsByClassName("el-tree-node__content")[0]
|
||||
.setAttribute("class", "el-tree-node__content");
|
||||
},
|
||||
handleDelete(node, data, e) {
|
||||
e.stopPropagation();
|
||||
//存在则添加到子级
|
||||
const parent = node.parent;
|
||||
const children = parent.data.nodes || parent.data;
|
||||
//若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
|
||||
if (Array.isArray(parent.data)) {
|
||||
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);
|
||||
children.splice(childIndex, 1);
|
||||
}
|
||||
this.curNode = undefined;
|
||||
},
|
||||
//新增组
|
||||
handleAddGroup() {
|
||||
/**
|
||||
* 如果模版深度最多两层，取消该部分注释
|
||||
* //最多只有两层组 不可能添加在dept2的组上 curNode存在 并且 深度超过1
|
||||
if (this.curNode != undefined && this.curNode.depth != 1) {
|
||||
this.$message.warning("不能添加超过两层");
|
||||
return;
|
||||
}
|
||||
*/
|
||||
|
||||
//如果isUpdateGroup 已经是true了 说明重复点击了
|
||||
if (this.isUpdateGroup) {
|
||||
return;
|
||||
}
|
||||
|
||||
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
|
||||
(
|
||||
c ^
|
||||
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
|
||||
).toString(16)
|
||||
);
|
||||
let newChild = {
|
||||
parentId: "", //如果有这个id 是插入第二层 否则是第一层 可有可无
|
||||
text: "", //必须有 this.templateContent.tempName
|
||||
nodes: [],
|
||||
id: id,
|
||||
typeName: "模板组",
|
||||
temporaryData: "1", //用来区分临时数据
|
||||
};
|
||||
/* 如果模版深度最多两层，以下条件改成该部分注释
|
||||
this.curNode && this.curNode.depth == 1
|
||||
*/
|
||||
this.indexRecord = [];
|
||||
if (this.curNode) {
|
||||
if (!this.curNode.nodes) {
|
||||
this.$message.warning("模板不可添加");
|
||||
return;
|
||||
}
|
||||
newChild.parentId = this.curNode.id;
|
||||
/* 如果模版深度最多两层，以下条件改成该部分注释
|
||||
const index = this.treeDataList.findIndex(
|
||||
item => item.id == this.curNode.id
|
||||
);
|
||||
this.treeDataList[index].nodes.push(newChild);
|
||||
*/
|
||||
//找到tree中的index轨迹
|
||||
this.getTemplateTreeNode(this.curNode.id, this.treeDataList, 0);
|
||||
//按照index轨迹插入节点
|
||||
this.insertNode(
|
||||
newChild,
|
||||
this.treeDataList,
|
||||
this.indexRecord,
|
||||
this.indexRecord.length
|
||||
);
|
||||
this.isBreak = false;
|
||||
} else if (this.curNode == undefined) {
|
||||
//没有选中的时候 添加到最外层
|
||||
newChild.depth = 1;
|
||||
this.treeDataList.push(newChild);
|
||||
}
|
||||
//调用出updateRender的input
|
||||
this.isact = newChild;
|
||||
this.isUpdateGroup = true;
|
||||
},
|
||||
//递归遍历获得选中node
|
||||
getTemplateTreeNode(target, list, dept) {
|
||||
//空数组直接返回
|
||||
if (list.length == 0) return;
|
||||
let dataLen = list.length;
|
||||
for (let i = 0; i < dataLen; i++) {
|
||||
//如果不匹配
|
||||
if (target != list[i].id) {
|
||||
//存在nodes 遍历nodes里的节点
|
||||
if (list[i].nodes) {
|
||||
this.indexRecord[dept] = i;
|
||||
let recordDept = dept + 1;
|
||||
this.getTemplateTreeNode(target, list[i].nodes, recordDept);
|
||||
} else {
|
||||
//不存在nodes 继续遍历
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
//匹配，则修改下标数组
|
||||
this.indexRecord[dept] = i;
|
||||
this.isBreak = true;
|
||||
break;
|
||||
}
|
||||
//删除不匹配的轨迹 如果已经break了说明已经找到正确的节点，就不用再删了
|
||||
if (!this.isBreak) {
|
||||
this.indexRecord.pop();
|
||||
}
|
||||
}
|
||||
},
|
||||
//插入节点
|
||||
insertNode(insertChild, tree, indexArr, len) {
|
||||
let index = indexArr.length - len;
|
||||
if (len == 0) {
|
||||
tree.push(insertChild);
|
||||
} else {
|
||||
this.insertNode(
|
||||
insertChild,
|
||||
tree[indexArr[index]].nodes,
|
||||
indexArr,
|
||||
len - 1
|
||||
);
|
||||
}
|
||||
},
|
||||
//修改组
|
||||
handleUpdateGroup() {
|
||||
this.isUpdateGroup = true;
|
||||
},
|
||||
//修改组名时获取title
|
||||
handleChangeTitle(e) {
|
||||
let value = e.target.value;
|
||||
this.isactTitle = value;
|
||||
},
|
||||
updateGroup(node, data) {
|
||||
//先handleChangeTitle获取title 再调用
|
||||
setTimeout(() => {
|
||||
if (this.isactTitle.trim() == "") {
|
||||
this.$message.warning("名称不能为空");
|
||||
return;
|
||||
}
|
||||
//修改数据组
|
||||
this.isUpdateGroup = false;
|
||||
const parent = node.parent;
|
||||
const children = parent.data.nodes || parent.data;
|
||||
const index = children.findIndex((d) => d.id === data.id);
|
||||
let temp = data;
|
||||
temp.text = this.isactTitle;
|
||||
children.splice(index, 1, temp);
|
||||
}, 500);
|
||||
},
|
||||
cancelUpdate(node, data, e) {
|
||||
this.$message.info("已取消");
|
||||
this.isUpdateGroup = false;
|
||||
//如果是插入操作 需要移除数据
|
||||
if (this.isact.temporaryData) {
|
||||
this.handleDelete(node, data, e);
|
||||
}
|
||||
},
|
||||
// 获取数据列表
|
||||
|
||||
async getDataList() {
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl("/book/labelAndMarket/labelTree"),
|
||||
method: "get",
|
||||
// params: this.$http.adornParams({
|
||||
// 'page': this.pageIndex,
|
||||
// 'limit': this.pageSize,
|
||||
// 'key': this.dataForm.key
|
||||
// })
|
||||
}).then(({ data }) => {
|
||||
console.log("🚀 ~ getDataList ~ data:", data);
|
||||
if (data && data.code === 0) {
|
||||
this.treeDataList = data.result;
|
||||
// this.totalPage = data.page.totalCount
|
||||
} else {
|
||||
this.treeDataList = [];
|
||||
// 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;
|
||||
// this.$nextTick(() => {
|
||||
// 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 {
|
||||
// 设置颜色
|
||||
// background-color: #baf !important;
|
||||
}
|
||||
|
||||
/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 {
|
||||
background-color: transparent !important;
|
||||
// color: #17b3a3 !important;
|
||||
}
|
||||
|
||||
|
||||
/deep/.filter-tree .el-tree-node__content .el-button {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
// /deep/.filter-tree .is-focusable {
|
||||
|
||||
// background-color: #17b3a3 !important;
|
||||
// }
|
||||
|
||||
.tree_box {
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border: 1px solid #bababa;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
// background: #fafafa;
|
||||
}
|
||||
|
||||
.border_box {
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
// color: #17b3a3;
|
||||
.line {
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
background: #17b3a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border_box {
|
||||
width: 100%;
|
||||
float: right;
|
||||
background: #fffefe;
|
||||
border: 1px solid #bababa;
|
||||
border-radius: 10px;
|
||||
padding: 15px 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tree_content_box {
|
||||
height: calc(100% - 110px) !important;
|
||||
}
|
||||
|
||||
.mod-config {
|
||||
width: 100%;
|
||||
height: 82vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
.el-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
.el-button {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #eaebed;
|
||||
color: #4796ec;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
height: 350px;
|
||||
overflow-y: auto !important;
|
||||
|
||||
.el-tree-node__content span {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.select_box {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
// .el-card {
|
||||
// background: none !important;
|
||||
// }
|
||||
p {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// .el-tree-node__content .el-button {
|
||||
// // width: 120px !important;
|
||||
|
||||
// display: block !important;
|
||||
// }
|
||||
// ::v-deep .el-tree .el-tree-node__content span:nth-child(2) {
|
||||
// width: 120px;
|
||||
// display: flex !important;
|
||||
// align-items: center !important;
|
||||
// justify-content: space-between !important;
|
||||
// }
|
||||
// /deep/.el-table__row--level-1 {
|
||||
// display: block !important;
|
||||
// }
|
||||
.addFormBox {
|
||||
.form_item {
|
||||
width: 49%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-container {
|
||||
height: calc(100% - 60px);
|
||||
|
||||
.filter-tree {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info_bg {
|
||||
background: #e0dede;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
// padding: 8px 5px;
|
||||
box-sizing: border-box;
|
||||
// margin-top: -10px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
width: calc(100% - 120px);
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* 去掉点击时的蓝色背景 */
|
||||
.el-tree .el-tree-node__content:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* 如果需要去掉所有hover效果 */
|
||||
.el-tree .el-tree-node__content:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
/* 针对被选中节点去掉背景色 */
|
||||
.el-tree .el-tree-node__content.is-checked {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* 如果需要去掉所有hover和active效果 */
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node__content:active {
|
||||
background-color: unset;
|
||||
}
|
||||
.isSelect{
|
||||
|
||||
/* 自定义角度渐变 */
|
||||
background-image: linear-gradient(-45deg, #fff, #b0f3ec);
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,9 +5,9 @@
|
||||
window.SITE_CONFIG = {};
|
||||
|
||||
// api接口请求地址
|
||||
window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';//张川川
|
||||
// window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';//张川川
|
||||
// window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
|
||||
// window.SITE_CONFIG['baseUrl'] = 'https://testapi.nuttyreading.com'; // 线上测试环境11
|
||||
window.SITE_CONFIG['baseUrl'] = 'https://testapi.nuttyreading.com'; // 线上测试环境11
|
||||
// window.SITE_CONFIG['baseUrl'] = 'https://api.nuttyreading.com'; // 线上正式环境
|
||||
// window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.110:9200/pb';
|
||||
// window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
|
||||
|
||||
Reference in New Issue
Block a user