增加海外标签 评论列表
This commit is contained in:
49
src/views/modules/hwReadManage/commontList.vue
Normal file
49
src/views/modules/hwReadManage/commontList.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<div
|
||||
style="padding:0 20px;box-sizing: border-box;height:calc(100% - 100px);"
|
||||
>
|
||||
<common-commont
|
||||
ref="commonCommont"
|
||||
|
||||
|
||||
></common-commont>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import commonCommont from "./components/commont.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
aaa:111,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
||||
commonCommont
|
||||
},
|
||||
activated() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.commonCommont.init();
|
||||
});
|
||||
},
|
||||
created(){
|
||||
this.$nextTick(() => {
|
||||
this.$refs.commonCommont.init();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mod-config{
|
||||
height: 80vh;
|
||||
}
|
||||
</style>
|
||||
594
src/views/modules/hwReadManage/components/bookTagsForm.vue
Normal file
594
src/views/modules/hwReadManage/components/bookTagsForm.vue
Normal file
@@ -0,0 +1,594 @@
|
||||
<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) {
|
||||
|
||||
|
||||
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>
|
||||
256
src/views/modules/hwReadManage/components/commont.vue
Normal file
256
src/views/modules/hwReadManage/components/commont.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%;">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="query"
|
||||
@keyup.enter.native="getList()"
|
||||
style="position: relative;"
|
||||
>
|
||||
<el-form-item label="评论内容">
|
||||
<el-input
|
||||
style="width: 100%;"
|
||||
v-model="query.content"
|
||||
placeholder="请输入评论内容"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 120px;">
|
||||
<el-button
|
||||
@click="
|
||||
pageIndex = 1;
|
||||
getList();
|
||||
"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<!-- <el-button
|
||||
v-if="tableData.length > 0"
|
||||
style="position: absolute;right: 0;"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="deleteHandle('all')"
|
||||
>批量删除</el-button
|
||||
> -->
|
||||
<!-- <el-button type="text"
|
||||
@click="changeDefalutExpand()"
|
||||
style="position: absolute;right: 0;"
|
||||
:style="`color:${defaultExpand?'#17B3A3':'#333'}`"
|
||||
>{{ !defaultExpand ? "收起" : "展开" }}全部评论
|
||||
<i class="el-icon-s-comment" ></i
|
||||
></el-button> -->
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<el-table
|
||||
row-key="id"
|
||||
v-if="refreshTable"
|
||||
:default-expand-all="defaultExpand"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 40px)"
|
||||
@selection-change="handleSelectionChange"
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column
|
||||
fixed
|
||||
prop="createTime"
|
||||
label="日期"
|
||||
width="200"
|
||||
sortable
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-tooltip placement="top" v-if="scope.row.user">
|
||||
<div slot="content">
|
||||
<div>
|
||||
<p v-if="scope.row.user.nickname">
|
||||
昵称：{{ scope.row.user.nickname }}
|
||||
</p>
|
||||
<p v-if="scope.row.user.name">
|
||||
姓名：{{ scope.row.user.name }}
|
||||
</p>
|
||||
<p v-if="scope.row.user.email">
|
||||
邮箱：{{ scope.row.user.email }}
|
||||
</p>
|
||||
<p v-if="scope.row.user.tel">
|
||||
手机号：{{ scope.row.user.tel }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<img
|
||||
:src="scope.row.user ? scope.row.user.avatar : ''"
|
||||
alt=""
|
||||
v-if="scope.row.user && scope.row.user.avatar"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<div class="avatar" v-else></div>
|
||||
|
||||
<span></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="content" label="评论内容">
|
||||
<template slot-scope="scope">
|
||||
<div v-html="scope.row.content"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="60">
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
style="color: red;cursor: pointer;"
|
||||
@click="deleteHandle('one', scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
style="padding: 30px 0; text-align: center;"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["courseId"],
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
selectData: [],
|
||||
query: {
|
||||
content: ""
|
||||
},
|
||||
pageIndex: 1,
|
||||
defaultExpand: false,
|
||||
refreshTable: true,
|
||||
pageSize: 10,
|
||||
totalPage: 0
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
handleSelectionChange(data) {
|
||||
console.log("data at line 141:", data);
|
||||
this.selectData = data;
|
||||
},
|
||||
changeDefalutExpand() {
|
||||
this.refreshTable = false;
|
||||
this.$nextTick(() => {
|
||||
this.refreshTable = true;
|
||||
this.defaultExpand = !this.defaultExpand;
|
||||
});
|
||||
this.$forceUpdate();
|
||||
},
|
||||
init() {
|
||||
this.getList();
|
||||
},
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val;
|
||||
this.pageIndex = 1;
|
||||
this.getList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
"/master/bookAbroad/getBookAbroadCommentList"
|
||||
),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
limit: this.pageSize,
|
||||
current: this.pageIndex,
|
||||
|
||||
content: this.query.content //内容
|
||||
})
|
||||
}).then(res => {
|
||||
console.log("res at line 68:", res);
|
||||
|
||||
if (res.data.code == 0 && res.data.comments.records.length > 0) {
|
||||
this.tableData = res.data.comments.records ? res.data.comments.records : [];
|
||||
this.totalPage = res.data.comments.total;
|
||||
this.$forceUpdate();
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.totalPage = 0;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
// console.log(row, "row" , res.data.resList,this.resList);
|
||||
});
|
||||
},
|
||||
|
||||
deleteHandle(type, id) {
|
||||
if (type == "all") {
|
||||
if (this.selectData.length == 0) {
|
||||
this.$message.error("请至少选择一条评论");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
this.$confirm(`请确认是否${type == "all" ? "批量" : ""}删除?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
var ids = this.selectData.map(e => e.id).join(",");
|
||||
console.log("ids at line 205:", ids);
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
`/master/bookAbroad/delBookAbroadComment`
|
||||
),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
commentId: type == "all" ? ids : id
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
background-color: #f0f0f0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
617
src/views/modules/hwReadManage/components/shopproduct.vue
Normal file
617
src/views/modules/hwReadManage/components/shopproduct.vue
Normal file
@@ -0,0 +1,617 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%;">
|
||||
<!-- <el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
|
||||
style="float: right"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.keywords"
|
||||
placeholder="课程名称"
|
||||
clearable
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="
|
||||
pageIndex = 1;
|
||||
getDataList();
|
||||
"
|
||||
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.keywords"
|
||||
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-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="book_id">
|
||||
<!-- <template slot-scope="scope">
|
||||
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="图书名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sort"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="排序"
|
||||
width="180"
|
||||
>
|
||||
|
||||
</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="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
|
||||
@click="shopEdit(scope.row)"
|
||||
size="mini"
|
||||
>修改排序</el-button
|
||||
>
|
||||
<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: {
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
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: {
|
||||
onBlurFirst(row, column) {
|
||||
//由于修改的数据只会让合并列的第一行数据改变，因此循环遍历列表修改相同类型的合并列的其余数据
|
||||
this.associatedGoodsList.map(item => {
|
||||
if (row.rootTargetCode == item.rootTargetCode) {
|
||||
item.sort = Number(row.sort);
|
||||
}
|
||||
});
|
||||
//修改原型数据
|
||||
row[column.property + "Show"] = false;
|
||||
this.updateTable();
|
||||
},
|
||||
|
||||
shopDelete(row) {
|
||||
this.$emit("delete", row);
|
||||
},
|
||||
shopEdit(row) {
|
||||
this.$emit("edit", 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() {
|
||||
// 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,
|
||||
keywords: this.dataForm.keywords
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.page.list;
|
||||
console.log("this.dataList at line 372:", this.dataList);
|
||||
this.totalPage = data.page.totalPage;
|
||||
} else {
|
||||
this.dataList = [];
|
||||
this.totalPage = 0;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
// setTimeout(async () => {
|
||||
// await this.setSelectRow();
|
||||
// }, 200);
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
clear() {
|
||||
// this.$refs.table.clearSelection();
|
||||
// this.multipleSelection = [];
|
||||
},
|
||||
// 获取关联数据列表
|
||||
async getAssociatedGoodsList() {
|
||||
|
||||
var form = { ...this.dataForm };
|
||||
|
||||
form.lableId = this.currentId;
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`${this.urlList.getAssociatedGoodsList}`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
// page: 1,
|
||||
// limit: 99999999,
|
||||
|
||||
...form
|
||||
// bookLabelId: bookLabelId,
|
||||
})
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.associatedGoodsList = [...data.bookList];
|
||||
|
||||
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>
|
||||
423
src/views/modules/hwReadManage/components/shopproductTable.vue
Normal file
423
src/views/modules/hwReadManage/components/shopproductTable.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
title="新增关联图书"
|
||||
v-show="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="bookName" class="form_item">
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入图书名称"
|
||||
style="width: 100%"
|
||||
v-model="dataForm.bookName"
|
||||
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"
|
||||
highlight-current-row
|
||||
v-loading="dataListLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
@current-change="handleCurrentChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- <el-table-column :reserve-selection="true" type="selection" header-align="center" align="center" width="50">
|
||||
</el-table-column> -->
|
||||
|
||||
<!-- <el-table-column align="center" width="40px">
|
||||
<template slot-scope="scope">
|
||||
<el-radio v-model="currentRow" :label="scope.row"
|
||||
> </el-radio
|
||||
>
|
||||
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
|
||||
<!-- -->
|
||||
<el-table-column label="图书ID" width="70" align="center" prop="id">
|
||||
<!-- <template slot-scope="scope">
|
||||
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="图书名称"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="商品图"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img
|
||||
v-if="scope.row.images != ''"
|
||||
:src="scope.row.images"
|
||||
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"
|
||||
@click="handleCurrentChange(scope.row)"
|
||||
size="mini"
|
||||
>绑定</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>
|
||||
<!-- </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: {
|
||||
bookName: ""
|
||||
},
|
||||
currentRow: null,
|
||||
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.id).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;
|
||||
},
|
||||
|
||||
handleCurrentChange(val) {
|
||||
console.log("🚀 ~ handleSelectionChange ~ val:", val);
|
||||
|
||||
this.$emit("submit", val.id);
|
||||
|
||||
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
|
||||
// this.multipleSelection = val;
|
||||
// this.changePageCoreRecordData();
|
||||
},
|
||||
|
||||
handleSelectionChange(val) {
|
||||
console.log("🚀 ~ handleSelectionChange ~ val:", val);
|
||||
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
|
||||
this.multipleSelection = val;
|
||||
// this.changePageCoreRecordData();
|
||||
},
|
||||
|
||||
closeBookf() {
|
||||
this.chooseBookVisible = false;
|
||||
},
|
||||
showchooseBookf(e) {
|
||||
// 显示图书列表
|
||||
this.chooseBookVisible = true;
|
||||
// console.log(this.bookIds,'this.bookIds')
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.chooseBook.getBookList()
|
||||
// this.bookIds = e.bookIds
|
||||
// })
|
||||
},
|
||||
// 获取数据列表
|
||||
async getDataList() {
|
||||
var form = {
|
||||
...this.dataForm,
|
||||
current: this.pageIndex,
|
||||
limit: this.pageSize,
|
||||
"bookName":this.dataForm.bookName?this.dataForm.bookName:"",
|
||||
|
||||
};
|
||||
|
||||
form.lableId = 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/bookAbroad/getBookListCanToLable`
|
||||
),
|
||||
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>
|
||||
@@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
|
||||
@close="handlereset">
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
|
||||
<el-form-item label="加密类型" prop="type">
|
||||
<el-select v-model="dataForm.type" filterable
|
||||
placeholder="请选择类型">
|
||||
<el-option v-for="item in typeList" :key="item.dictType" :label="item.dictValue" :value="item.dictType">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频" prop="video">
|
||||
<el-input v-model="dataForm.video" placeholder="视频"></el-input>
|
||||
<!-- <el-upload
|
||||
:limit="1"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
class="el-uploadfeng"
|
||||
ref="files"
|
||||
action="#"
|
||||
:file-list="fileList"
|
||||
:on-change="changeData"
|
||||
accept=".mp3,.mp4,.gif,.mpeg,.mpg"
|
||||
:http-request="handleRequest"
|
||||
:before-remove="handleBeforeRemove"
|
||||
:on-remove="handleRemove"
|
||||
>
|
||||
<i
|
||||
class="el-icon-plus"
|
||||
v-if="fileList.length == 0 && !isUpload"
|
||||
></i>
|
||||
</el-upload> -->
|
||||
<div class="newpro">
|
||||
<el-progress
|
||||
v-if="isUpload"
|
||||
:stroke-width="10"
|
||||
:percentage="progressPercent"
|
||||
style="width: 100%"
|
||||
></el-progress>
|
||||
</div>
|
||||
<!-- <el-upload :action="baseUrl + '/oss/fileoss'" list-type="picture-card" :on-preview="handlePictureCardPreview"
|
||||
:file-list="fileList" :on-success="handlePicSuccess" :on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<img width="100%" :src="dataForm.video" alt="">
|
||||
</el-dialog> -->
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="内容" prop="content">
|
||||
<el-input v-model="dataForm.content" placeholder="内容"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="dataForm.sort" placeholder="排序"></el-input>
|
||||
</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 global from '../../../common/common.vue' //引入共用组间
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseUrl: global.baseUrl,
|
||||
progressPercent: 0,
|
||||
curPercentage: 0,
|
||||
isUpload: false,
|
||||
uploadTimer: null,
|
||||
visible: false,
|
||||
typeList: [ //类型0普通1加密
|
||||
|
||||
{
|
||||
dictType: 0,
|
||||
dictValue: "普通"
|
||||
},
|
||||
{
|
||||
dictType: 1,
|
||||
dictValue: "加密"
|
||||
}
|
||||
],
|
||||
props: {
|
||||
dictType: '',
|
||||
dictValue: ''
|
||||
},
|
||||
gushuList:[],
|
||||
authorList: [],
|
||||
restaurants: [],
|
||||
author: '',
|
||||
publisherList: [],
|
||||
fileList: [],
|
||||
fileListNovel: [],
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
dataForm: {
|
||||
"pid": null,
|
||||
"id": null,
|
||||
"isLast": 0,
|
||||
"title": "",
|
||||
"sort": 1,
|
||||
},
|
||||
splitsTypeList: [],
|
||||
dataRule: {
|
||||
video: [
|
||||
{ required: true, message: '请填写本项', trigger: 'blur' }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
watch: {
|
||||
isUpload: {
|
||||
handler(val, oldVal) {
|
||||
if (this.isUpload) {
|
||||
this.uploadTimer = setInterval(async () => {
|
||||
//需要定时执行的代码
|
||||
this.progressPercent = await this.getProgress(this.currentFile);
|
||||
}, 1000);
|
||||
} else {
|
||||
//this.uploadTimer = null;
|
||||
clearInterval(this.uploadTimer);
|
||||
this.currentFile = {};
|
||||
}
|
||||
// this.getGoodsTypeList()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init(row, chapter_id) {
|
||||
console.log('row2', row)
|
||||
this.dataForm = row || {}
|
||||
this.dataForm.chapterId = chapter_id || ''
|
||||
this.visible = true
|
||||
if (this.dataForm.video && this.dataForm.video != "") {
|
||||
var img = {
|
||||
name: this.dataForm.video,
|
||||
url: this.dataForm.video
|
||||
}
|
||||
var attr = []
|
||||
attr.push(img)
|
||||
this.fileList = attr
|
||||
}else{
|
||||
this.fileList = []
|
||||
}
|
||||
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`${!this.dataForm.id ? '/master/courseSociology/addCourseSociology' : '/master/courseSociology/editCourseSociology'}`),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({
|
||||
"pid": this.dataForm.pid || undefined,
|
||||
"id": this.dataForm.id || undefined,
|
||||
'isLast': this.dataForm.isLast,
|
||||
'title': this.dataForm.title,
|
||||
"sort": this.dataForm.sort,
|
||||
})
|
||||
}).then(({
|
||||
data
|
||||
}) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
async getProgress(file) {
|
||||
var that = this;
|
||||
|
||||
console.log("🚀 ~ handleRequest ~ data222:", file.uid);
|
||||
var progress = 0;
|
||||
// const config = {
|
||||
// onUploadProgress: (progressEvent) => {
|
||||
// // progressEvent.loaded:已上传文件大小
|
||||
// // progressEvent.total:被上传文件的总大小
|
||||
// this.progressPercent = Number(
|
||||
// ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
|
||||
// );
|
||||
// },
|
||||
// };
|
||||
await axios
|
||||
.get(this.$http.adornUrl(`/oss/fileoss/getSchedule?uid=${file.uid}`))
|
||||
.then(async (res) => {
|
||||
console.log("🚀 ~ this.$axios.post ~ res999:", res.data.percent);
|
||||
progress = Number(res.data.percent);
|
||||
if (progress == 100) {
|
||||
this.isUpload = false;
|
||||
clearInterval(this.uploadTimer);
|
||||
that.uploadTimer = null;
|
||||
await that.handlePicSuccess(res.data, file);
|
||||
this.currentFile = {};
|
||||
this.$forceUpdate();
|
||||
}
|
||||
});
|
||||
console.log("🚀 ~ .then ~ progress888:", progress);
|
||||
return progress;
|
||||
},
|
||||
handleRequest(option) {
|
||||
var that = this;
|
||||
const { onProgress, onSuccess, onError } = option;
|
||||
this.progressPercent = 0;
|
||||
|
||||
this.currentFile = option.file;
|
||||
let formdata = new FormData();
|
||||
formdata.append("file", option.file);
|
||||
formdata.append("fileName", option.file.fileNamee);
|
||||
formdata.append("uid", option.file.uid);
|
||||
console.log("🚀 ~ handleRequest ~ formdata:", formdata);
|
||||
|
||||
this.isUpload = true;
|
||||
|
||||
axios
|
||||
.post(this.baseUrl + "/oss/fileoss/uploadFileSchedule", formdata)
|
||||
.then((res) => {
|
||||
console.log("🚀 ~ this.$axios.post ~ res111:", res);
|
||||
if (res.data.code == 0) {
|
||||
that.fileList[that.fileList.length - 1].status = "done";
|
||||
// clearInterval(that.uploadTimer);
|
||||
// that.isUpload = false;
|
||||
// that.currentFile = {};
|
||||
// await that.handlePicSuccess(res.data, data.file);
|
||||
onSuccess();
|
||||
} else {
|
||||
that.fileList[that.fileList.length - 1].ststus = "error";
|
||||
onError();
|
||||
}
|
||||
});
|
||||
// var prom = new Promise((resolve, reject) => {});
|
||||
// prom.abort = () => {};
|
||||
// return prom;
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dataForm.video = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
console.log(res, file, "999999999");
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.video = res.url;
|
||||
this.fileList.push({
|
||||
name: file.name,
|
||||
url: res.url,
|
||||
});
|
||||
this.$message.success("上传成功");
|
||||
this.isUpload = false;
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.video = res.url;
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
changeData(file, fileList) {
|
||||
// 数据小于0.1M的时候按KB显示
|
||||
const size =
|
||||
file.size / 1024 / 1024 > 0.1
|
||||
? `(${(file.size / 1024 / 1024).toFixed(1)}M)`
|
||||
: `(${(file.size / 1024).toFixed(1)}KB)`;
|
||||
file.name.indexOf("M") > -1 || file.name.indexOf("KB") > -1
|
||||
? file.name
|
||||
: (file.name += size);
|
||||
},
|
||||
handleBeforeRemove(file, fileList) {
|
||||
console.log(file, fileList, "file, fileListfile, fileListfile, fileList");
|
||||
this.$refs.files.clearFiles();
|
||||
clearInterval(this.uploadTimer);
|
||||
this.isUpload = false;
|
||||
|
||||
this.currentFile = {};
|
||||
this.$forceUpdate();
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.video = "";
|
||||
this.fileList = fileList;
|
||||
//this.uploadTimer = null;
|
||||
clearInterval(this.uploadTimer);
|
||||
this.isUpload = false;
|
||||
|
||||
this.currentFile = {};
|
||||
this.$forceUpdate();
|
||||
|
||||
// this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handleDownload(file) {
|
||||
console.log(file)
|
||||
},
|
||||
handlereset() {
|
||||
this.fileList = [],
|
||||
this.fileListNovel = [],
|
||||
this.visible = false
|
||||
},
|
||||
// handlePreview(file) {
|
||||
// console.log(file);
|
||||
// },
|
||||
// handleExceed(files, fileList) {
|
||||
// this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
// },
|
||||
// beforeRemove(file, fileList) {
|
||||
// return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
// },
|
||||
// handleRemoveNovel(file) {
|
||||
// this.dataForm.novel = '';
|
||||
// },
|
||||
// handleNovelSuccess(file) {
|
||||
// this.dataForm.novel = file.url
|
||||
// },
|
||||
// querySearch(queryString, cb) {
|
||||
// var restaurants = this.restaurants;
|
||||
// var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
||||
// // 调用 callback 返回建议列表的数据
|
||||
// console.log(results)
|
||||
// cb(results);
|
||||
// },
|
||||
// createFilter(queryString) {
|
||||
// return (restaurant) => {
|
||||
// return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
// };
|
||||
// },
|
||||
// handleSelect(item) {
|
||||
// this.dataForm.authorId = item.id
|
||||
// console.log(item);
|
||||
// }
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.uploadTimer);
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
931
src/views/modules/hwReadManage/components/tags.vue
Normal file
931
src/views/modules/hwReadManage/components/tags.vue
Normal file
@@ -0,0 +1,931 @@
|
||||
<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','type'],
|
||||
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({
|
||||
type: type,
|
||||
...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>
|
||||
1115
src/views/modules/hwReadManage/operationsList.vue
Normal file
1115
src/views/modules/hwReadManage/operationsList.vue
Normal file
File diff suppressed because it is too large
Load Diff
1127
src/views/modules/hwReadManage/readLabel.vue
Normal file
1127
src/views/modules/hwReadManage/readLabel.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user