Merge branch 'master' of https://gitee.com/wjl2008_admin/nuttyreading-master-html
This commit is contained in:
@@ -8,7 +8,7 @@
|
|||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.key"
|
v-model="dataForm.key"
|
||||||
placeholder="参数名"
|
placeholder="商品名"
|
||||||
clearable
|
clearable
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -104,12 +104,12 @@
|
|||||||
label="操作"
|
label="操作"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button
|
<!-- <el-button
|
||||||
type="text"
|
type="text"
|
||||||
size="small"
|
size="small"
|
||||||
@click="addOrUpdateHandle(scope.row.productId)"
|
@click="addOrUpdateHandle(scope.row.productId)"
|
||||||
>修改</el-button
|
>修改</el-button
|
||||||
>
|
> -->
|
||||||
<el-button
|
<el-button
|
||||||
type="text"
|
type="text"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -293,10 +293,12 @@ export default {
|
|||||||
.then(({ data }) => {
|
.then(({ data }) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
this.dataList = data.result.records;
|
this.dataList = data.result.records;
|
||||||
this.totalPage = data.result.pages;
|
this.totalPage = data.result.total;
|
||||||
|
this.pageIndex = data.result.current
|
||||||
} else {
|
} else {
|
||||||
this.dataList = [];
|
this.dataList = [];
|
||||||
this.totalPage = 0;
|
this.totalPage = 0;
|
||||||
|
this.pageIndex = 1
|
||||||
}
|
}
|
||||||
this.dataListLoading = false;
|
this.dataListLoading = false;
|
||||||
});
|
});
|
||||||
|
|||||||
597
src/views/modules/shop/smallShopTags/bookTagsForm.vue
Normal file
597
src/views/modules/shop/smallShopTags/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>
|
||||||
563
src/views/modules/shop/smallShopTags/shopproduct.vue
Normal file
563
src/views/modules/shop/smallShopTags/shopproduct.vue
Normal file
@@ -0,0 +1,563 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
style="width: 100%; height: 100%; margin-top: -50px"
|
||||||
|
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<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="shopProduct.productId"
|
||||||
|
>
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="shopProduct.productName"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="商品名称"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="shopProduct.price"
|
||||||
|
width="120"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
sortable
|
||||||
|
label="价格"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column v-if="oprateType=='yingxiao'"
|
||||||
|
prop="sort"
|
||||||
|
width="120"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="排序( 双击修改 )"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="paixu" @dblclick="myDbClick(scope.row)">
|
||||||
|
<span v-show="!scope.row.isEdit">{{scope.row.sort}}</span>
|
||||||
|
<div class="inputBox" v-show="scope.row.isEdit">
|
||||||
|
<el-input @keyup.enter.native="changeSort(scope.row)" min="0" @blur="changeSort(scope.row)" v-model.number="scope.row.sort" ></el-input>
|
||||||
|
<el-tag type="danger" size="mini" @click="cancelBtn(scope.row)">×</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="shopProduct.activityPrice"
|
||||||
|
width="120"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
sortable
|
||||||
|
label="活动价"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="shopProduct.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.shopProduct.productImages != ''"
|
||||||
|
:src="scope.row.shopProduct.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>
|
||||||
|
</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",'oprateType'],
|
||||||
|
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: "",
|
||||||
|
},
|
||||||
|
oldSort:0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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])
|
||||||
|
},
|
||||||
|
cancelBtn(row){
|
||||||
|
row.isEdit = false
|
||||||
|
this.oldSort = 0
|
||||||
|
if(row.sort == ""){row.sort = 0}
|
||||||
|
},
|
||||||
|
changeSort(row){ // 确认排序
|
||||||
|
if(this.oldSort == row.sort) {return}
|
||||||
|
if(row.sort == ""){row.sort = 0}
|
||||||
|
row.isEdit = false
|
||||||
|
// console.log(row)
|
||||||
|
// return false
|
||||||
|
var url = ""
|
||||||
|
if(this.oprateType == "yingxiao"){
|
||||||
|
url = "/master/shopStore/editStoreProductSort"
|
||||||
|
}else{
|
||||||
|
return
|
||||||
|
}
|
||||||
|
console.log(url,this.oprateType)
|
||||||
|
this.$http
|
||||||
|
.request({
|
||||||
|
url: this.$http.adornUrl(url),
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
"id": row.id,
|
||||||
|
"sort": row.sort
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
//默认 无 说明：请求头
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
if(data.code == 0 && data.msg == "success"){
|
||||||
|
|
||||||
|
this.getAssociatedGoodsList()
|
||||||
|
this.oldSort = 0
|
||||||
|
// console.log(this.oldSort,'复原')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
myDbClick(row){ // 双击修改排序
|
||||||
|
this.oldSort = row.sort
|
||||||
|
// console.log(this.oldSort,88888888)
|
||||||
|
row.isEdit = true
|
||||||
|
},
|
||||||
|
// 获取商品类型
|
||||||
|
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() {
|
||||||
|
// :currentId="addForm.id"
|
||||||
|
// currentType="bookLabelId"
|
||||||
|
var form = { ...this.dataForm };
|
||||||
|
|
||||||
|
// 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)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// await this.getGoodsTypeList(); // 获取商品类型
|
||||||
|
this.dataListLoading = true;
|
||||||
|
await this.$http({
|
||||||
|
url: this.$http.adornUrl(`${this.urlList.getAssociatedGoodsList}`),
|
||||||
|
method: "post",
|
||||||
|
data: {
|
||||||
|
"storeId": this.currentId
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
//默认 无 说明：请求头
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}).then(async ({ data }) => {
|
||||||
|
if (data && data.code === 0) {
|
||||||
|
var list = [...data.list];
|
||||||
|
// this.associatedGoodsList = [...data.result.records];
|
||||||
|
this.dataListLoading = false;
|
||||||
|
|
||||||
|
list.forEach((item) => {
|
||||||
|
item.isEdit = false
|
||||||
|
})
|
||||||
|
this.associatedGoodsList = list
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 每页数
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.$bus.$on("refreshProductList", (data) => {
|
||||||
|
// console.log('收到', data)
|
||||||
|
this.getAssociatedGoodsList()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.paixu{cursor: pointer;}
|
||||||
|
.inputBox{display: flex; align-items:center;
|
||||||
|
.el-input{margin-right: 5px;}
|
||||||
|
}
|
||||||
|
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: 324px;
|
||||||
|
.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>
|
||||||
|
|
||||||
347
src/views/modules/shop/smallShopTags/shopproductTable.vue
Normal file
347
src/views/modules/shop/smallShopTags/shopproductTable.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-drawer title="新增关联商品" v-if="drawer" :wrapperClosable="false" :visible.sync="drawer" :before-close="handleClose" destroy-on-close
|
||||||
|
direction="rtl" size="70%">
|
||||||
|
<div class="shop_drawer_box demo-drawer__content">
|
||||||
|
<div class="addFormBox">
|
||||||
|
<el-form ref="addForm" label-width="80px" :model="dataForm">
|
||||||
|
<el-form-item label="商品名称" prop="keywords" class="form_item">
|
||||||
|
<el-input size="small" placeholder="请输入商品名称" style="width: 100%" v-model="dataForm.keywords" clearable>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品类型" prop="type" class="form_item">
|
||||||
|
<el-select size="small" v-model="dataForm.type" placeholder="请选择" style="width: 100%" clearable>
|
||||||
|
<el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue"
|
||||||
|
:value="item.dictType">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="" class="form_item" label-width="20px" style="width: 160px !important">
|
||||||
|
<el-button type="primary" plain @click="
|
||||||
|
pageIndex = 1;
|
||||||
|
getDataList(bookMarketId);
|
||||||
|
" size="small">查询</el-button>
|
||||||
|
<el-button @click="handleReset()" size="small" plain>重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table ref="table" height="80%" :data="dataList" :row-key="getRowKeys" border size="mini"
|
||||||
|
v-loading="dataListLoading" @selection-change="handleSelectionChange" style="width: 100%">
|
||||||
|
<!-- <el-table-column :reserve-selection="true" type="selection" header-align="center" align="center" width="50">
|
||||||
|
</el-table-column> -->
|
||||||
|
<!-- -->
|
||||||
|
<el-table-column label="商品ID" width="70" align="center" prop="productId">
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="productName" header-align="center" align="center" label="商品名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="price" width="120" header-align="center" align="center" sortable label="价格">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="activityPrice" width="120" header-align="center" align="center" sortable label="活动价">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="productStock" width="120" header-align="center" align="center" sortable label="库存">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column header-align="center" align="center" label="商品图" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="25" height="35"
|
||||||
|
class="tableImg" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="productStock" width="120" header-align="center" align="center" sortable label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="primary" plain size="mini" @click="addLink(scope.row)">绑定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
|
||||||
|
:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper">
|
||||||
|
</el-pagination>
|
||||||
|
|
||||||
|
<!-- <div class="demo-drawer__footer">
|
||||||
|
<div style="float: right; margin-top: 20px">
|
||||||
|
<el-button @click="close" size="small">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="submit" :loading="loading" size="small">{{ loading ? "提交中 ..." : "确 定"
|
||||||
|
}}</el-button>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- 弹窗, 新增 / 修改 -->
|
||||||
|
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
|
||||||
|
<choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book> -->
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import chooseBook from './chooseBook.vue'
|
||||||
|
// import AddOrUpdate from './shopproduct-add-or-update'
|
||||||
|
export default {
|
||||||
|
props: ["currentType", "currentId"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timer: null,
|
||||||
|
drawer: false,
|
||||||
|
loading: false,
|
||||||
|
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
|
||||||
|
multipleSelection: [], // 当前页选中的数据
|
||||||
|
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
|
||||||
|
dataForm: {
|
||||||
|
type:'00'
|
||||||
|
},
|
||||||
|
bookMarketId: null,
|
||||||
|
dataList: [],
|
||||||
|
publishStatus: false,
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
totalPage: 0,
|
||||||
|
dataListLoading: false,
|
||||||
|
dataListSelections: [],
|
||||||
|
addOrUpdateVisible: false,
|
||||||
|
chooseBookVisible: false,
|
||||||
|
bookIds: [],
|
||||||
|
goodsTypeList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
// AddOrUpdate,
|
||||||
|
// chooseBook
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addLink(row){
|
||||||
|
// 添加商品绑定
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl("/master/shopStore/bindStoreAndProduct"),
|
||||||
|
method: "post",
|
||||||
|
data: {
|
||||||
|
"productId": row.productId,
|
||||||
|
"storeId": this.currentId
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
//默认 无 说明：请求头
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}).then(({ data }) => {
|
||||||
|
// console.log(data.dataList)
|
||||||
|
// this.goodsTypeList = data.dataList;
|
||||||
|
this.getDataList()
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleReset() {
|
||||||
|
this.dataForm = {
|
||||||
|
type:'00'
|
||||||
|
};
|
||||||
|
this.pageIndex = 1;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
submit() {
|
||||||
|
// var ids = this.multipleSelection.map((e) => e.productId).toString(",");
|
||||||
|
// this.$emit("submit", ids);
|
||||||
|
// console.log(
|
||||||
|
// "🚀 ~ submit ~ this.multipleSelection:",
|
||||||
|
// this.multipleSelection
|
||||||
|
// );
|
||||||
|
// this.drawer = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取商品类型
|
||||||
|
getGoodsTypeList() {
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
|
||||||
|
method: "get",
|
||||||
|
}).then(({ data }) => {
|
||||||
|
// console.log(data.dataList)
|
||||||
|
this.goodsTypeList = data.dataList;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleClose(done) {
|
||||||
|
this.$bus.$emit("refreshProductList", 'refresh' );
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
async open() {
|
||||||
|
this.drawer = true;
|
||||||
|
this.dataForm = {
|
||||||
|
type:'00'
|
||||||
|
};
|
||||||
|
this.pageIndex = 1;
|
||||||
|
await this.getGoodsTypeList();
|
||||||
|
await this.getDataList();
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.drawer = false;
|
||||||
|
|
||||||
|
},
|
||||||
|
getRowKeys(row) {
|
||||||
|
return row.productId;
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
console.log("🚀 ~ handleSelectionChange ~ val:", val);
|
||||||
|
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
|
||||||
|
this.multipleSelection = val;
|
||||||
|
// this.changePageCoreRecordData();
|
||||||
|
},
|
||||||
|
|
||||||
|
closeBookf() {
|
||||||
|
this.chooseBookVisible = false;
|
||||||
|
},
|
||||||
|
showchooseBookf(e) {
|
||||||
|
// 显示图书列表
|
||||||
|
this.chooseBookVisible = true;
|
||||||
|
// console.log(this.bookIds,'this.bookIds')
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// this.$refs.chooseBook.getBookList()
|
||||||
|
// this.bookIds = e.bookIds
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
// 获取数据列表
|
||||||
|
async getDataList() {
|
||||||
|
var form = {
|
||||||
|
...this.dataForm,
|
||||||
|
page: this.pageIndex,
|
||||||
|
limit: this.pageSize,
|
||||||
|
id: this.currentId
|
||||||
|
// productId: "",
|
||||||
|
};
|
||||||
|
this.dataListLoading = true;
|
||||||
|
this.clear();
|
||||||
|
|
||||||
|
await this.$http({
|
||||||
|
url: this.$http.adornUrl('/master/shopStore/getCanBindProductList'),
|
||||||
|
method: "post",
|
||||||
|
data: this.$http.adornData(form),
|
||||||
|
}).then(({ data }) => {
|
||||||
|
if (data && data.code === 0) {
|
||||||
|
this.dataList = data.page.records;
|
||||||
|
this.totalPage = data.page.total;
|
||||||
|
} else {
|
||||||
|
this.dataList = [];
|
||||||
|
this.totalPage = 0;
|
||||||
|
}
|
||||||
|
this.dataListLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
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>
|
||||||
975
src/views/modules/shop/smallShopTags/tags.vue
Normal file
975
src/views/modules/shop/smallShopTags/tags.vue
Normal file
@@ -0,0 +1,975 @@
|
|||||||
|
<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.name : ""
|
||||||
|
}}</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 && 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="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> -->
|
||||||
|
<!-- <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: "name"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
console.log("🚀 ~ selectShop ~ v:", v);
|
||||||
|
|
||||||
|
if (v.select) {
|
||||||
|
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,
|
||||||
|
images:'',
|
||||||
|
sort: 0,
|
||||||
|
name: ""
|
||||||
|
};
|
||||||
|
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.name}】？`, "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning"
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
that
|
||||||
|
.$http.request({
|
||||||
|
url: this.$http.adornUrl(`${that.urlList.deleteShop}`),
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
id: data.id
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
//默认 无 说明：请求头
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
.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
Reference in New Issue
Block a user