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

新增图书标签 图书营销标签 小店管理

Browse Source
This commit is contained in:
始于初见
2024-03-25 18:02:49 +08:00
parent 4ee5176ee8
commit a8bad4ff3d
14 changed files with 2539 additions and 581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -17,7 +17,7 @@
"axios": "0.17.1",
"babel-plugin-component": "0.10.1",
"babel-polyfill": "6.26.0",
"element-ui": "^2.8.2",
"element-ui": "^2.15.14",
"gulp": "4.0.2",
"gulp-concat": "2.6.1",
"gulp-load-plugins": "2.0.5",

13
src/main.js
View File

@@ -2,8 +2,11 @@ import Vue from 'vue'
import App from '@/App'
import router from '@/router' // api: https://github.com/vuejs/vue-router
import store from '@/store' // api: https://github.com/vuejs/vuex
import VueCookie from 'vue-cookie' // api: https://github.com/alfhen/vue-cookie
import '@/element-ui' // api: https://github.com/ElemeFE/element
import VueCookie from 'vue-cookie'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // api: https://github.com/alfhen/vue-cookie
// import '@/element-ui' // api: https://github.com/ElemeFE/element
import '@/icons' // api: http://www.iconfont.cn/
import '@/element-ui-theme'
import '@/assets/scss/index.scss'
@@ -12,6 +15,12 @@ import Bus from '@/assets/js/eventBus.js'
import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
import { isAuth } from '@/utils'
import cloneDeep from 'lodash/cloneDeep'
// import { debounce, throttle } from './utils/dbucTrtl.js';
//
// import debounce from 'lodash/debounce' //导入lodash中的debounce
// 在Vue实例上扩展全局方法
// Vue.prototype.debounce = debounce;
// Vue.prototype.$throttle = throttle;
Vue.use(VueCookie)
Vue.config.productionTip = false

34
src/utils/dbucTrtl.js Normal file
View File

@@ -0,0 +1,34 @@
// 防抖函数
function debounce(func, wait, immediate) {
let timeout; // 定义一个计时器变量，用于延迟执行函数
return function (...args) { // 返回一个包装后的函数
const context = this; // 保存函数执行上下文对象
const later = function () { // 定义延迟执行的函数
timeout = null; // 清空计时器变量
if (!immediate) func.apply(context, args); // 若非立即执行，则调用待防抖函数
};
const callNow = immediate && !timeout; // 是否立即调用函数的条件
clearTimeout(timeout); // 清空计时器
timeout = setTimeout(later, wait); // 创建新的计时器，延迟执行函数
if (callNow) func.apply(context, args); // 如果满足立即调用条件，则立即执行函数
};
}
// 节流函数
function throttle(func, wait) {
let timeout; // 定义一个计时器变量，用于限制函数调用频率
return function (...args) { // 返回一个包装后的函数
const context = this; // 保存函数执行上下文对象
if (!timeout) { // 如果计时器不存在
func.apply(context, args); // 执行函数
timeout = setTimeout(() => {
timeout = null; // 清空计时器变量
}, wait); // 创建计时器，在指定时间后重置计时器变量
}
};
}
export {
debounce,
throttle
}; // 导出防抖函数和节流函数

33
src/utils/index.js
View File

@@ -57,3 +57,36 @@ export function clearLoginInfo () {
store.commit('resetStore')
router.options.isAddDynamicMenuRoutes = false
}
export function debounce(func, wait, immediate) {
let timeout; // 定义一个计时器变量，用于延迟执行函数
return function (...args) { // 返回一个包装后的函数
const context = this; // 保存函数执行上下文对象
const later = function () { // 定义延迟执行的函数
timeout = null; // 清空计时器变量
if (!immediate) func.apply(context, args); // 若非立即执行，则调用待防抖函数
};
const callNow = immediate && !timeout; // 是否立即调用函数的条件
clearTimeout(timeout); // 清空计时器
timeout = setTimeout(later, wait); // 创建新的计时器，延迟执行函数
if (callNow) func.apply(context, args); // 如果满足立即调用条件，则立即执行函数
};
}
// 节流函数
export function throttle(func, wait) {
let timeout; // 定义一个计时器变量，用于限制函数调用频率
return function (...args) { // 返回一个包装后的函数
const context = this; // 保存函数执行上下文对象
if (!timeout) { // 如果计时器不存在
func.apply(context, args); // 执行函数
timeout = setTimeout(() => {
timeout = null; // 清空计时器变量
}, wait); // 创建计时器，在指定时间后重置计时器变量
}
};
}

364
src/views/modules/shop/bookmarketingtags.vue
View File

@@ -1,84 +1,18 @@
<template>
<div class="mod-config">
<div class="tree_box">
<div>
<el-input
placeholder="请输入关键字进行查询"
v-model="filterText"
style="width: calc(100% - 70px)"
clearable
>
</el-input>
<el-button
type="primary"
@click="addOrUpdateHandle()"
style="margin-bottom: 20px; margin-left: 10px"
size="small"
>新增</el-button
>
</div>
<p class="info_bg">
当前选中营销标签：<span style="color: #17b3a3; font-weight: 600">{{
currentNode ? currentNode.data.title : ""
}}</span>
</p>
<!-- show-checkbox -->
<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"
:allow-drop="allowDrop"
@node-click="handleNodeClick"
:expand-on-click-node="false"
>
<!-- @click="handleClickNodes(node, data)" -->
<span
class="custom-tree-node"
slot-scope="{ node, data }"
@click="handleClickNodes(node, data, 'edit')"
>
<span>{{ node.label }}</span>
<span>
<!-- v-if="node.level <= 1" -->
<el-button
type="text"
size="mini"
@click.stop="handleClickNodes(node, data, 'addChildren')"
>
添加下级
</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)">
删除
</el-button>
</span>
</span>
</el-tree>
</div>
</div>
<div
style="width: calc(100% - 420px); height: 100%; float: right"
v-if="isFresh"
>
<commonTree
source="tags"
ref="commonTree"
:dataList="treeDataList"
@getCommonShopDataList="getCommonShopDataList"
@handleClickNodes="handleClickNodes"
:urlList="urlList"
></commonTree>
<div style="width: calc(100% - 360px); height: 100%; float: right">
<div class="border_box info_box">
<div class="title_box">
<div class="title"><span class="line"></span>基本标签信息</div>
</div>
<div class="addFormBox">
<el-form :model="addForm" ref="addForm" label-width="80px">
@@ -100,26 +34,96 @@
>
</el-input-number>
</el-form-item>
<el-form-item
label="是否为最终级"
prop="isLast"
label-width="120px"
class="form_item"
>
<el-switch
:disabled="
addForm && addForm.children && addForm.children.length != 0
"
v-model="addForm.isLast"
active-color="#13ce66"
:active-value="1"
:inactive-value="0"
active-text="是"
inactive-text="否"
@change="handleChangeIsLast"
>
</el-switch>
</el-form-item>
</el-form>
</div>
</div>
<div class="border_box tree_content_box">
<div class="title"><span class="line"></span>关联商品列表</div>
<div class="border_box tree_content_box" v-if="addForm.isLast == 1">
<div class="title_box" style="margin-bottom: 10px; height: 40px">
<div class="title">
<span class="line"></span>已关联商品列表
<el-button
plain
type="primary"
style="margin-left: 20px"
@click="openTable('addForm')"
size="mini"
>新增</el-button
>
<!-- <div style="" class="button_box"> -->
<el-button
plain
:type="isEdit ? 'primary' : ''"
@click="dataFormEdit()"
size="mini"
>{{ this.isEdit ? "退出修改" : "修改" }}</el-button
>
<!-- </div> -->
</div>
</div>
<commonShop
:currentId="addForm.id"
currentType="bookMarketId"
:dataList="associatedGoodsList"
:urlList="urlList"
:isEdit="isEdit"
ref="commonShop"
style="height: calc(100% - 50px)"
:style="`height: calc(100% - 50px); `"
></commonShop>
<div class="submitButton">
<div class="submitButtonBox" v-if="isEdit">
<el-checkbox
v-model="checkAll"
@change="handleCheckAllChange"
style="float: left"
>全选</el-checkbox
>
<!-- <el-button @click="handlereset" size="small">取消</el-button> -->
<el-button size="small" @click.stop="handlereset()">
<div class="submitButton">
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button>
</el-button> -->
<el-button
type="danger"
@click="dataFormDelete('addForm')"
size="small"
>删除</el-button
>
</div>
</div>
<!-- <div class="submitButtonBox" v-else> -->
<!-- <el-button @click="handlereset" size="small">取消</el-button> -->
<div class="submitButton submitButtonBox" v-else>
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> -->
</div>
</div>
</div>
@@ -132,7 +136,12 @@
</el-form> -->
<commonShopTable
ref="commonShopTable"
:currentId="addForm.id"
currentType="bookMarketId"
@submit="handleSubmitShopTable"
></commonShopTable>
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@@ -142,12 +151,26 @@
</template>
<script>
import debounce from "lodash/debounce"; //导入lodash中的debounce
import AddOrUpdate from "./commonBookTags/bookTagsForm.vue";
import commonShop from "./commonBookTags/shopproduct.vue";
import commonShopTable from "./commonBookTags/shopproductTable.vue";
import commonTree from "./commonBookTags/tags.vue";
// import dialogComponent from './seckillprodrelation'
export default {
data() {
return {
isEdit: false,
checkAll: false,
isIndeterminate: true,
urlList: {
treeList: "/book/labelAndMarket/marketTree",
delete: "/book/labelAndMarket/delMarket",
deleteShop: "/book/labelAndMarket/delToMarket",
saveShop: "/book/labelAndMarket/saveToMarket",
add: "/book/labelAndMarket/saveOrUpdateMarket",
getAssociatedGoodsList: "/book/labelAndMarket/getToMarketList",
},
addForm: {},
isFresh: false,
dataRule: {
@@ -161,6 +184,7 @@ export default {
},
currentNode: null,
treeDataList: [],
associatedGoodsList: [], //已关联商品列表
isact: "", //当前hover的节点
isactTitle: "", //记录修改节点名称
@@ -188,6 +212,8 @@ export default {
components: {
AddOrUpdate,
commonShop,
commonTree,
commonShopTable,
},
watch: {
filterText(val) {
@@ -195,44 +221,69 @@ export default {
},
},
activated() {
this.isEdit = false;
this.getDataList();
},
methods: {
allowDrop(draggingNode, dropNode, type) {
console.log(draggingNode.level, dropNode.level);
//注掉的是同级拖拽
if (draggingNode.level === dropNode.level) {
return type === "prev" || type === "next";
} else {
// 不同级进行处理
return false;
}
dataFormEdit() {
this.checkAll = false;
this.isEdit = !this.isEdit;
},
async correlationShop(bookLabelId) {
var status;
var productId = this.$refs.commonShop.multipleSelection.map(
(e) => e.productId
);
console.log("🚀 ~ correlationShop ~ productId:", productId);
handleCheckAllChange(val) {
this.$nextTick(() => {
this.$refs.commonShop.handleCheckAllChange(val);
});
},
handleSubmitShopTable: debounce(async function (ids) {
await this.$http({
url: this.$http.adornUrl(`/book/labelAndMarket/saveToLabel`),
url: this.$http.adornUrl(`${this.urlList.saveShop}`),
method: "post",
data: this.$http.adornData({
productId: productId.toString(","),
bookLabelId: bookLabelId,
productId: ids,
bookMarketId: this.addForm.id,
}),
}).then(async ({ data }) => {
if (data && data.code === 0) {
status = true;
this.$message.success(data.msg);
this.$refs.commonShop.getAssociatedGoodsList({
bookMarketId: this.addForm.id,
});
this.$refs.commonShopTable.close();
} else {
this.$message.error(data.msg);
status = false;
}
});
return status;
},200),
openTable() {
this.isEdit = false;
this.$nextTick(() => {
this.$refs.commonShopTable.open(this.addForm.id);
});
},
handleChangeIsLast(e) {
console.log("🚀 ~ handleChangeIsLast ~ e:", e);
this.$nextTick(() => {
if (e == 1) {
this.$refs.commonShop.getAssociatedGoodsList();
}
});
},
getCommonShopDataList(type, id, form) {
this.isEdit = false;
console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
this.addForm = form;
this.$nextTick(() => {
// this.$refs.commonShop.clear();
// this.$refs.commonShop.bookMarketId = null;
if (form.isLast == 1) {
this.$refs.commonShop.getAssociatedGoodsList();
}
});
},
//新增修改
async dataFormSubmit(formName) {
dataFormSubmit: debounce(async function (formName) {
// return false
if (this.addForm.title == "") {
this.$message.error("请输入标签名称");
@@ -241,26 +292,20 @@ export default {
await this.$refs[formName].validate(async (valid) => {
if (valid) {
await this.$http({
url: this.$http.adornUrl(`/book/labelAndMarket/saveOrUpdateMarket`),
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) {
// var status = await this.correlationShop(data.result.id);
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.$nextTick(async () => {
this.$refs.commonTree.setCurrentNodeShow(data.result.id);
this.$message({
message: "操作成功",
type: "success",
@@ -268,21 +313,44 @@ export default {
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),
//新增修改
async dataFormDelete(formName) {
// return false
var selectShopArr = this.$refs.commonShop.selectShopArr;
console.log(selectShopArr, "1111");
if (selectShopArr.length == 0) {
this.$message.error("请选择已关联的商品");
return false;
}
this.$refs.commonShop.dataListLoading = true;
await this.$http({
url: this.$http.adornUrl(
`${this.urlList.deleteShop}?lableIds=${selectShopArr.toString(",")}`
),
method: "post",
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success(data.msg);
this.$nextTick(() => {
this.$refs.commonShop.selectShopArr = [];
this.$refs.commonShop.getAssociatedGoodsList();
});
} else {
this.$message.error(data.msg);
}
});
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([0]);
@@ -291,10 +359,9 @@ export default {
this.currentNode = null;
this.isFresh = false;
this.isFresh = true;
this.$refs.commonShop.clear();
this.$refs.commonShop.bookMarketId = null;
},
handleClickNodes(node, data, type) {
this.isEdit = false;
this.addForm = {};
// console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
console.log(node, data, "当前选中节点");
@@ -325,7 +392,7 @@ export default {
this.$nextTick(() => {
this.$refs.commonShop.clear();
this.$refs.commonShop.bookMarketId = null;
// this.$refs.commonShop.bookMarketId = null;
this.$refs.commonShop.getDataList(type == "edit" ? form.id : "");
});
},
@@ -354,7 +421,7 @@ export default {
.then(async () => {
this.$http({
url: this.$http.adornUrl(
`/book/labelAndMarket/delMarket?id=` + data.id
`/book/labelAndMarket/delLabel?id=` + data.id
),
method: "post",
data: {},
@@ -628,7 +695,7 @@ export default {
async getDataList() {
this.dataListLoading = true;
await this.$http({
url: this.$http.adornUrl("/book/labelAndMarket/marketTree"),
url: this.$http.adornUrl(this.urlList.treeList),
method: "get",
// params: this.$http.adornParams({
// 'page': this.pageIndex,
@@ -669,13 +736,12 @@ export default {
// this.$refs.addOrUpdate.init(row);
// });
// },
// 删除
},
};
</script>
<style lang="less" scoped>
.tree_box {
width: 400px;
width: 350px !important;
height: 100%;
float: left;
border: 1px solid #bababa;
@@ -687,12 +753,26 @@ export default {
.border_box {
height: 100px;
margin-bottom: 10px;
.title_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
.button_box {
// width: 200px;
float: right;
}
}
.title {
width: 300px;
min-width: 200px;
float: left;
display: flex;
align-items: center;
font-weight: 600;
font-size: 16px;
margin-bottom: 10px;
// color: #17b3a3;
.line {
width: 4px;
@@ -710,6 +790,7 @@ export default {
border-radius: 10px;
padding: 15px 15px;
box-sizing: border-box;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.tree_content_box {
height: calc(100% - 110px) !important;
@@ -758,9 +839,14 @@ p {
margin: 0;
margin-bottom: 10px;
}
.submitButtonBox {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.submitButton {
float: right;
margin-top: 20px;
}
// .el-tree-node__content .el-button {
// // width: 120px !important;
@@ -776,9 +862,10 @@ p {
// /deep/.el-table__row--level-1 {
// display: block !important;
// }
.addFormBox {
.form_item {
width: 49%;
width: 33%;
float: left;
}
}
@@ -790,10 +877,15 @@ p {
}
.info_bg {
background: #e0dede;
padding: 8px 5px;
height: 28px;
line-height: 28px;
padding-left: 10px;
// padding: 8px 5px;
box-sizing: border-box;
margin-top: -10px;
// margin-top: -10px;
border-radius: 4px;
font-size: 14px;
width: calc(100% - 120px);
float: left;
}
</style>

232
src/views/modules/shop/booktags.vue
View File

@@ -1,19 +1,16 @@
<template>
<div class="mod-config">
<commonTree
source="tags"
ref="commonTree"
:dataList="treeDataList"
@getCommonShopDataList="getCommonShopDataList"
:urlList="urlList"
></commonTree>
<div style="width: calc(100% - 420px); height: 100%; float: right">
<div style="width: calc(100% - 360px); height: 100%; float: right">
<div class="border_box info_box">
<div class="title_box">
<div class="title">
<span class="line"></span>基本标签信息
</div>
<div class="title"><span class="line"></span>基本标签信息</div>
</div>
<div class="addFormBox">
@@ -43,6 +40,9 @@
class="form_item"
>
<el-switch
:disabled="
addForm && addForm.children && addForm.children.length != 0
"
v-model="addForm.isLast"
active-color="#13ce66"
:active-value="1"
@@ -57,43 +57,72 @@
</div>
</div>
<div class="border_box tree_content_box" v-if="addForm.isLast == 1">
<div class="title_box" style="margin-bottom:20px">
<div class="title_box" style="margin-bottom: 10px; height: 40px">
<div class="title">
<span class="line"></span>已关联商品列表
<el-button
plain
type="primary"
style="margin-left:20px"
@click="dataFormSubmit('addForm')"
style="margin-left: 20px"
@click="openTable('addForm')"
size="mini"
>新增关联商品</el-button
>新增</el-button
>
</div>
<div style="" class="button_box">
<!-- <div style="" class="button_box"> -->
<el-button
plain
type="primary"
@click="dataFormSubmit('addForm')"
:type="isEdit ? 'primary' : ''"
@click="dataFormEdit()"
size="mini"
>修改</el-button
>{{ this.isEdit ? "退出修改" : "修改" }}</el-button
>
<!-- </div> -->
</div>
</div>
<commonShop
:currentId="addForm.id"
currentType="bookLabelId"
:dataList="associatedGoodsList"
:urlList="urlList"
:isEdit="isEdit"
ref="commonShop"
style="height: calc(100% - 100px); overflow: auto"
:style="`height: calc(100% - 50px); `"
></commonShop>
<div class="submitButton">
<div class="submitButtonBox" v-if="isEdit">
<el-checkbox
v-model="checkAll"
@change="handleCheckAllChange"
style="float: left"
>全选</el-checkbox
>
<!-- <el-button @click="handlereset" size="small">取消</el-button> -->
<el-button size="small" @click.stop="handlereset()"> 取消 </el-button>
<div class="submitButton">
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button
type="danger"
@click="dataFormDelete('addForm')"
size="small"
>删除</el-button
>
</div>
</div>
<!-- <div class="submitButtonBox" v-else> -->
<!-- <el-button @click="handlereset" size="small">取消</el-button> -->
<div class="submitButton submitButtonBox" v-else>
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> -->
</div>
</div>
</div>
@@ -106,7 +135,12 @@
</el-form> -->
<commonShopTable
ref="commonShopTable"
:currentId="addForm.id"
currentType="bookLabelId"
@submit="handleSubmitShopTable"
></commonShopTable>
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@@ -118,13 +152,21 @@
<script>
import AddOrUpdate from "./commonBookTags/bookTagsForm.vue";
import commonShop from "./commonBookTags/shopproduct.vue";
import commonShopTable from "./commonBookTags/shopproductTable.vue";
import commonTree from "./commonBookTags/tags.vue";
import debounce from "lodash/debounce"; //导入lodash中的debounce
// import dialogComponent from './seckillprodrelation'
export default {
data() {
return {
isEdit: false,
checkAll: false,
isIndeterminate: true,
urlList: {
treeList: "/book/labelAndMarket/labelTree",
delete: "/book/labelAndMarket/delLabel",
deleteShop: "/book/labelAndMarket/delToLable",
saveShop: "/book/labelAndMarket/saveToLabel",
add: "/book/labelAndMarket/saveOrUpdateLabel",
getAssociatedGoodsList: "/book/labelAndMarket/getToLabelList",
},
@@ -170,6 +212,7 @@ export default {
AddOrUpdate,
commonShop,
commonTree,
commonShopTable,
},
watch: {
filterText(val) {
@@ -177,55 +220,71 @@ export default {
},
},
activated() {
this.isEdit = false;
this.getDataList();
},
methods: {
dataFormEdit() {
this.checkAll = false;
this.isEdit = !this.isEdit;
},
handleCheckAllChange(val) {
this.$nextTick(() => {
this.$refs.commonShop.handleCheckAllChange(val);
});
},
handleSubmitShopTable: debounce(async function (ids) {
await this.$http({
url: this.$http.adornUrl(`${this.urlList.saveShop}`),
method: "post",
data: this.$http.adornData({
productId: ids,
bookLabelId: this.addForm.id,
}),
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success(data.msg);
this.$refs.commonShop.getAssociatedGoodsList({
bookLabelId: this.addForm.id,
});
this.$refs.commonShopTable.close();
} else {
this.$message.error(data.msg);
}
});
},200),
openTable() {
this.isEdit = false;
this.$nextTick(() => {
this.$refs.commonShopTable.open(this.addForm.id);
});
},
handleChangeIsLast(e) {
console.log("🚀 ~ handleChangeIsLast ~ e:", e);
this.$nextTick(() => {
if (e == 1) {
this.$refs.commonShop.getAssociatedGoodsList(this.addForm.id);
this.$refs.commonShop.getAssociatedGoodsList({
bookLabelId: this.addForm.id,
});
}
});
},
getCommonShopDataList(type, id, form) {
this.isEdit = false;
console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
this.addForm = form;
this.$nextTick(() => {
// this.$refs.commonShop.clear();
this.$refs.commonShop.bookMarketId = null;
// this.$refs.commonShop.bookMarketId = null;
if (form.isLast == 1) {
this.$refs.commonShop.getAssociatedGoodsList(id);
this.$refs.commonShop.getAssociatedGoodsList();
}
});
},
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;
},
//新增修改
async dataFormSubmit(formName) {
dataFormSubmit: debounce(async function (formName) {
// return false
if (this.addForm.title == "") {
this.$message.error("请输入标签名称");
@@ -234,49 +293,63 @@ export default {
await this.$refs[formName].validate(async (valid) => {
if (valid) {
await this.$http({
url: this.$http.adornUrl(`/book/labelAndMarket/saveOrUpdateLabel`),
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);
});
this.$nextTick(async () => {
this.$refs.commonTree.setCurrentNodeShow(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),
//新增修改
dataFormDelete: debounce(async function (formName) {
// return false
var selectShopArr = this.$refs.commonShop.selectShopArr;
console.log(selectShopArr, "1111");
if (selectShopArr.length == 0) {
this.$message.error("请选择已关联的商品");
return false;
}
this.$refs.commonShop.dataListLoading = true;
await this.$http({
url: this.$http.adornUrl(
`${this.urlList.deleteShop}?lableIds=${selectShopArr.toString(",")}`
),
method: "post",
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success(data.msg);
this.$nextTick(() => {
this.$refs.commonShop.selectShopArr = [];
this.$refs.commonShop.getAssociatedGoodsList({
bookLabelId: this.addForm.id,
});
});
} else {
this.$message.error(data.msg);
}
});
},200),
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([0]);
},
@@ -286,6 +359,7 @@ export default {
this.isFresh = true;
},
handleClickNodes(node, data, type) {
this.isEdit = false;
this.addForm = {};
// console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
console.log(node, data, "当前选中节点");
@@ -316,7 +390,7 @@ export default {
this.$nextTick(() => {
this.$refs.commonShop.clear();
this.$refs.commonShop.bookMarketId = null;
// this.$refs.commonShop.bookMarketId = null;
this.$refs.commonShop.getDataList(type == "edit" ? form.id : "");
});
},
@@ -619,13 +693,9 @@ export default {
async getDataList() {
this.dataListLoading = true;
await this.$http({
url: this.$http.adornUrl("/book/labelAndMarket/labelTree"),
url: this.$http.adornUrl(this.urlList.treeList),
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) {
@@ -665,7 +735,7 @@ export default {
</script>
<style lang="less" scoped>
.tree_box {
width: 400px;
width: 350px !important;
height: 100%;
float: left;
border: 1px solid #bababa;
@@ -688,7 +758,8 @@ export default {
}
}
.title {
width: 100%;
width: 300px;
min-width: 200px;
float: left;
display: flex;
@@ -713,6 +784,7 @@ export default {
border-radius: 10px;
padding: 15px 15px;
box-sizing: border-box;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.tree_content_box {
height: calc(100% - 110px) !important;
@@ -761,9 +833,14 @@ p {
margin: 0;
margin-bottom: 10px;
}
.submitButtonBox {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.submitButton {
float: right;
margin-top: 20px;
}
// .el-tree-node__content .el-button {
// // width: 120px !important;
@@ -779,6 +856,7 @@ p {
// /deep/.el-table__row--level-1 {
// display: block !important;
// }
.addFormBox {
.form_item {
width: 33%;

574
src/views/modules/shop/commonBookTags/commonTags.vue Normal file
View File

@@ -0,0 +1,574 @@
<template>
<div>
<el-drawer
title=""
:with-header="false"
v-if="drawer"
:visible.sync="drawer"
destroy-on-close
direction="rtl"
size="80%"
>
<div
class="shop_drawer_box demo-drawer__content"
v-loading="dataListLoading"
>
<button
@click="close"
aria-label="close drawer"
type="button"
class="el-drawer__close-btn"
>
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
<!-- <div class="addFormBox">
<el-form ref="addForm" label-width="80px" :model="dataForm">
<el-form-item label="商品名称" prop="title" class="form_item">
<el-input
size="small"
placeholder="请输入商品名称"
style="width: 100%"
v-model="dataForm.key"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="商品类型" prop="goodsType" class="form_item">
<el-select
size="small"
v-model="dataForm.goodsType"
placeholder="请选择"
style="width: 100%"
clearable
>
<el-option
v-for="item in goodsTypeList"
:key="item.dictType"
:label="item.dictValue"
:value="item.dictType"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label=""
class="form_item"
label-width="20px"
style="width: 160px !important"
>
<el-button
@click="
pageIndex = 1;
getDataList(bookMarketId);
"
size="small"
>查询</el-button
>
<el-button @click="handleReset()" size="small">重置</el-button>
</el-form-item>
</el-form>
</div> -->
<div class="addFormBox commonTreeBox" style="overflow: hidden">
<commonTree
source="shop"
sourceType="bookLabelId"
ref="commonTree"
:productId="productId"
:dataList="treeDataList"
:urlList="urlList"
@submit="handleSubmitShop"
@delete="handleDeleteShop"
>
<div class="title_box" slot="center">
<div class="title"><span class="line"></span>关联图书标签</div>
</div>
</commonTree>
<commonTreeMarket
source="shop"
sourceType="bookMarketId"
:productId="productId"
ref="commonTreeMarket"
:dataList="treeDataMarketList"
:urlList="urlList"
@submit="handleSubmitShop"
@delete="handleDeleteShop"
>
<div class="title_box" slot="center">
<div class="title">
<span class="line"></span>关联图书营销标签
</div>
</div></commonTreeMarket
>
</div>
<!-- <div class="demo-drawer__footer">
<div style="float: right; margin-top: 20px">
<el-button @click="close" size="small">取 消</el-button>
<el-button
type="primary"
@click="submit"
:loading="loading"
size="small"
>{{ loading ? "提交中 ..." : "确 定" }}</el-button
>
</div>
</div> -->
<!-- 弹窗, 新增 / 修改 -->
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
<choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book> -->
</div>
</el-drawer>
</div>
</template>
<script>
// import chooseBook from './chooseBook.vue'
// import AddOrUpdate from './shopproduct-add-or-update'
import debounce from "lodash/debounce"; //导入lodash中的debounce
import commonTree from "./tags.vue";
import commonTreeMarket from "./tags.vue";
export default {
props: ["currentType", "currentId"],
data() {
return {
productId: null,
drawer: false,
loading: false,
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
dataForm: {
key: "",
},
bookMarketId: null,
dataList: [],
treeDataList: [],
treeDataMarketList: [],
publishStatus: false,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
chooseBookVisible: false,
bookIds: [],
goodsTypeList: [],
urlList: {
treeList: "/book/labelAndMarket/labelTree",
treeMarketList: "/book/labelAndMarket/marketTree",
deleteBookShop: "/book/labelAndMarket/delToLable",
deleteBookShopMarket: "/book/labelAndMarket/delToMarket",
saveBookShop: "/book/labelAndMarket/saveToLabel",
saveBookShopMarket: "/book/labelAndMarket/saveToMarket",
getToLabelList: "/book/labelAndMarket/getToLabelList",
getToMarketList: "/book/labelAndMarket/getToMarketList",
},
};
},
components: {
commonTree,
commonTreeMarket,
// chooseBook
},
async activated() {
await this.getDataList("treeList");
await this.getDataList("treeMarketList");
},
methods: {
handleSubmitShop: debounce(async function (ids, sourceType) {
this.dataListLoading = true;
console.log("🚀 ~ handleSubmitShop ~ ids:", ids);
var url;
var data={productId: this.productId,}
switch (sourceType) {
case "bookLabelId":
url = this.urlList.saveBookShop;
data.bookLabelId=ids
break;
case "bookMarketId":
url = this.urlList.saveBookShopMarket;
data.bookMarketId=ids
break;
}
await this.$http({
url: this.$http.adornUrl(`${url}`),
method: "post",
data: this.$http.adornData(data),
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success(data.msg);
} else {
this.$message.error(data.msg);
}
// this.dataListLoading = false;
});
this.$nextTick(async () => {
await this.$refs.commonTree.getAssociatedGoodsList(
this.urlList.getToLabelList,
"bookLabelId"
);
await this.$refs.commonTreeMarket.getAssociatedGoodsList(
this.urlList.getToMarketList,
"bookMarketId"
);
this.dataListLoading = false;
});
}, 200),
handleDeleteShop: debounce(async function (ids, sourceType) {
this.dataListLoading = true;
console.log("🚀 ~ handleSubmitShop ~ ids:", ids);
var url;
switch (sourceType) {
case "bookLabelId":
url = `${this.urlList.deleteBookShop}?lableId=${ids}&productId=${this.productId}`;
break;
case "bookMarketId":
url = `${this.urlList.deleteBookShopMarket}?marketId=${ids}&productId=${this.productId}`;
break;
}
await this.$http({
url: this.$http.adornUrl(url),
method: "post",
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success(data.msg);
} else {
this.$message.error(data.msg);
}
// this.dataListLoading = false;
});
this.$nextTick(async () => {
await this.$refs.commonTree.getAssociatedGoodsList(
this.urlList.getToLabelList,
"bookLabelId"
);
await this.$refs.commonTreeMarket.getAssociatedGoodsList(
this.urlList.getToMarketList,
"bookMarketId"
);
this.dataListLoading = false;
});
}, 200),
async getDataList(type) {
await this.$http({
url: this.$http.adornUrl(this.urlList[type]),
method: "get",
}).then(({ data }) => {
console.log("🚀 ~ getDataList ~ data:", data);
if (data && data.code === 0) {
if (type == "treeList") {
this.treeDataList = data.result;
} else if (type == "treeMarketList") {
this.treeDataMarketList = data.result;
}
// this.totalPage = data.page.totalCount
} else {
if (type == "treeList") {
this.treeDataList = [];
} else if (type == "treeMarketList") {
this.treeDataMarketList = [];
}
// this.totalPage = 0
}
});
},
handleReset() {
this.dataForm = {};
this.pageIndex = 1;
this.getDataList();
},
submit() {
var ids = this.multipleSelection.map((e) => e.productId).toString(",");
this.$emit("submit", ids);
console.log(
"🚀 ~ submit ~ this.multipleSelection:",
this.multipleSelection
);
},
// 获取商品类型
getGoodsTypeList() {
this.$http({
url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
method: "get",
}).then(({ data }) => {
// console.log(data.dataList)
this.goodsTypeList = data.dataList;
});
},
handleClose(done) {
done();
// this.$confirm("确认关闭？")
// .then((_) => {
// done();
// })
// .catch((_) => {});
},
async getTreeList() {
this.dataListLoading = true;
this.$nextTick(async () => {
await this.$refs.commonTree.getAssociatedGoodsList(
this.urlList.getToLabelList,
"bookLabelId"
);
await this.$refs.commonTreeMarket.getAssociatedGoodsList(
this.urlList.getToMarketList,
"bookMarketId"
);
await this.getDataList("treeList");
await this.getDataList("treeMarketList");
this.dataListLoading = false;
});
},
async open(id) {
this.productId = id;
this.drawer = true;
this.dataForm = {};
await this.getTreeList();
// this.pageIndex = 1;
// await this.getGoodsTypeList();
},
close() {
this.drawer = false;
},
getRowKeys(row) {
return row.productId;
},
handleSelectionChange(val) {
console.log("🚀 ~ handleSelectionChange ~ val:", val);
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
this.multipleSelection = val;
// this.changePageCoreRecordData();
},
closeBookf() {
this.chooseBookVisible = false;
},
showchooseBookf(e) {
// 显示图书列表
this.chooseBookVisible = true;
// console.log(this.bookIds,'this.bookIds')
// this.$nextTick(() => {
// this.$refs.chooseBook.getBookList()
// this.bookIds = e.bookIds
// })
},
// 获取数据列表
// async getDataList() {
// var form = {
// ...this.dataForm,
// current: this.pageIndex,
// limit: this.pageSize,
// productId: "",
// };
// // this.multipleSelection=[]
// if (this.currentType == "bookLabelId") {
// form.bookLabelId = this.currentId;
// console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
// } else if (this.currentType == "bookMarketId") {
// form.bookMarketId = this.currentId;
// console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
// }
// this.dataListLoading = true;
// this.clear();
// await this.$http({
// url: this.$http.adornUrl(`/book/labelAndMarket/getNotToLabelList`),
// method: "post",
// data: this.$http.adornData(form),
// }).then(({ data }) => {
// if (data && data.code === 0) {
// this.dataList = data.result.records;
// this.totalPage = data.result.total;
// } else {
// this.dataList = [];
// this.totalPage = 0;
// }
// // setTimeout(async () => {
// // await this.setSelectRow();
// // }, 200);
// this.dataListLoading = false;
// });
// },
clear() {
// this.$refs.table.clearSelection();
this.multipleSelection = [];
},
// 每页数
sizeChangeHandle(val) {
// this.changePageCoreRecordData();
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
// 改变页的时候调用一次
// this.changePageCoreRecordData();
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val;
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},
// 删除
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map((item) => {
return item.productId;
});
this.$confirm(
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
this.$http({
url: this.$http.adornUrl("/book/shopproduct/delete"),
method: "post",
data: this.$http.adornData(ids, false),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.$message.error(data.msg);
}
});
});
},
SwitchChange(event) {
/*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
var parms = {
publishStatus: event.publishStatus,
productId: event.productId,
};
// console.log(parms)
this.$http({
url: this.$http.adornUrl("/book/shopproduct/update"),
method: "post",
data: parms,
})
.then((res) => {
this.$message({
message: "成功",
type: "success",
});
this.loading = false;
this.getDataList();
})
.catch((error) => {
this.loading = false;
console.log(error);
});
console.log(event);
},
},
};
</script>
<style lang="less" scoped>
.shop_drawer_box {
padding: 20px !important;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.addFormBox {
width: 100%;
// overflow: hidden;
.form_item {
width: 33%;
float: left;
}
}
::v-deep.el-drawer__header {
margin-bottom: 10px !important;
}
.commonTreeBox {
height: calc(100% - 10px) !important;
}
/deep/.tree_box {
width: 48% !important;
border: none !important;
border-radius: 10px;
padding: 15px;
padding-top: 0px !important ;
box-sizing: border-box;
.custom-tree-container {
border-radius: 4px !important;
height: calc(100% - 30px);
border: 1px solid #ebeef5 !important;
background-color: #fff !important;
overflow: hidden !important;
color: #303133 !important;
padding: 15px;
transition: 0.3s !important;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
// background: #fafafa;
}
/deep/.shop_drawer_box {
// padding-top: 0px !important ;
}
.title_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
.button_box {
// width: 200px;
float: right;
}
}
.title {
width: 300px;
min-width: 200px;
float: left;
display: flex;
align-items: center;
font-weight: 600;
font-size: 16px;
// color: #17b3a3;
.line {
width: 4px;
height: 20px;
margin-right: 8px;
background: #17b3a3;
}
}
.el-drawer__close-btn {
position: absolute;
right: 10px;
top: 10px;
}
</style>

274
src/views/modules/shop/commonBookTags/shopproduct.vue
View File

@@ -1,6 +1,8 @@
<template>
<div style="width: 100%; height: 100%" v-loading="dataListLoading">
<div
style="width: 100%; height: 100%; margin-top: -50px"
v-loading="dataListLoading"
>
<!-- <el-form
:inline="true"
:model="dataForm"
@@ -26,21 +28,107 @@
>
</el-form-item>
</el-form> -->
<div class="search_form">
<div class="addFormBox shopFormBox">
<el-form ref="addForm" label-width="80px" :model="dataForm">
<el-form-item label="商品名称" prop="title" class="form_item">
<el-input
size="small"
placeholder="请输入商品名称"
style="width: 100%"
v-model="dataForm.productName"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="商品类型" prop="goodsType" class="form_item">
<el-select
size="small"
v-model="dataForm.goodsType"
placeholder="请选择"
style="width: 100%"
clearable
>
<el-option
v-for="item in goodsTypeList"
:key="item.dictType"
:label="item.dictValue"
:value="item.dictType"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label=""
class="form_item"
label-width="20px"
style="width: 80px !important"
>
<el-button @click="getAssociatedGoodsList(dataForm)" size="mini"
>查询</el-button
>
<!-- <el-button @click="handleCommonShopReset()" size="mini"
>重置</el-button
> -->
</el-form-item>
</el-form>
</div>
</div>
<div class="shop_box">
<li v-for="(v, i) in associatedGoodsList" class="shop_box_item">
<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_title">
<el-tooltip placement="top">
<div class="shop_box_item_content">
<li class="shop_box_item_title">
<span></span><span>{{ v.product.productName }}</span>
<!-- <el-tooltip placement="top" sty>
<div slot="content">{{ v.product.productName }}</div>
<div class="title-text">{{ v.product.productName }}</div>
</el-tooltip>
</el-tooltip> -->
</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>
<!-- <div class="price-con">
<span class="coupon-price-title">¥</span
><span class="coupon-price-afterCoupon">356</span>
@@ -58,15 +146,14 @@
// import chooseBook from './chooseBook.vue'
// import AddOrUpdate from './shopproduct-add-or-update'
export default {
props: ["urlList"],
props: ["urlList", "isEdit", "currentId", "currentType"],
data() {
return {
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
goodsTypeList: [], // goodsTypeList
multipleSelection: [], // 当前页选中的数据
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
dataForm: {
key: "",
},
bookMarketId: null,
dataList: [],
associatedGoodsList: [],
@@ -79,16 +166,66 @@ export default {
addOrUpdateVisible: false,
chooseBookVisible: false,
bookIds: [],
selectShopArr: [],
dataForm: {
productName: "",
},
};
},
watch: {
// 只要通过this.的方式拿到的值都可以使用watch进行监听
isEdit: {
deep: true,
immediate: true,
handler(val) {
console.log("🚀 ~ handler ~ val:", val);
this.selectShopArr = [];
this.$forceUpdate();
},
},
},
components: {
// AddOrUpdate,
// chooseBook
},
activated() {
this.getDataList();
async activated() {
this.multipleSelection = [];
await this.getAssociatedGoodsList({ ...this.dataForm });
// await this.getGoodsTypeList();
},
methods: {
// 获取商品类型
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.$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;
},
@@ -116,6 +253,7 @@ export default {
async getDataList(bookMarketId) {
this.bookMarketId = bookMarketId;
this.dataListLoading = true;
this.getDataList = [];
this.clear();
// if (bookMarketId) {
// await this.getCorrelationArr(bookMarketId);
@@ -144,11 +282,26 @@ export default {
});
},
clear() {
this.$refs.table.clearSelection();
this.multipleSelection = [];
// this.$refs.table.clearSelection();
// this.multipleSelection = [];
},
// 获取关联数据列表
async getAssociatedGoodsList(bookLabelId) {
async getAssociatedGoodsList() {
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
// :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}`),
@@ -158,29 +311,15 @@ export default {
limit: 99999999,
// productName: "",
productId: "",
bookLabelId: bookLabelId,
...form,
// bookLabelId: bookLabelId,
}),
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.associatedGoodsList = [...data.result.records,...data.result.records,...data.result.records,...data.result.records,...data.result.records];
this.associatedGoodsList = [...data.result.records];
this.dataListLoading = false;
console.log(
"🚀 ~ getAssociatedGoodsList ~ this.associatedGoodsList:",
this.associatedGoodsList
);
// if (this.multipleSelection.length > 0) {
// this.multipleSelection.forEach((row) => {
// this.$refs.table.toggleRowSelection(row);
// });
// } else {
// this.clear();
// }
// } else {
// this.multipleSelection = [];
}
// await this.changePageCoreRecordData();
});
},
// 每页数
@@ -283,47 +422,90 @@ li {
}
.shop_box {
width: 100%;
height: 100%;
height: calc(100% - 40px);
overflow: auto;
// margin-left: -10px;
padding-bottom: 20px;
// margin-top: 20px;
.shop_box_item {
width: 80px;
height: 120px;
width: 23.7%;
min-width: 200px;
height: 95px;
padding: 6px;
box-sizing: border-box;
margin-left: 10px;
margin-bottom: 20px;
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: 50px;
height: 70px;
// 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;
.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>

429
src/views/modules/shop/commonBookTags/shopproductTable.vue Normal file
View File

@@ -0,0 +1,429 @@
<template>
<div>
<el-drawer
title="新增关联商品"
v-if="drawer"
:wrapperClosable="false"
:visible.sync="drawer"
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="title" class="form_item">
<el-input
size="small"
placeholder="请输入商品名称"
style="width: 100%"
v-model="dataForm.key"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="商品类型" prop="goodsType" class="form_item">
<el-select
size="small"
v-model="dataForm.goodsType"
placeholder="请选择"
style="width: 100%"
clearable
>
<el-option
v-for="item in goodsTypeList"
:key="item.dictType"
:label="item.dictValue"
:value="item.dictType"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label=""
class="form_item"
label-width="20px"
style="width: 160px !important"
>
<el-button
@click="
pageIndex = 1;
getDataList(bookMarketId);
"
size="small"
>查询</el-button
>
<el-button @click="handleReset()" size="small">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-table
ref="table"
height="80%"
:data="dataList"
:row-key="getRowKeys"
border
size="mini"
v-loading="dataListLoading"
@selection-change="handleSelectionChange"
style="width: 100%"
>
<el-table-column
:reserve-selection="true"
type="selection"
header-align="center"
align="center"
width="50"
>
</el-table-column>
<!-- -->
<el-table-column
label="商品ID"
width="70"
align="center"
prop="productId"
>
<!-- <template slot-scope="scope">
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
</template> -->
</el-table-column>
<el-table-column
prop="productName"
header-align="center"
align="center"
label="商品名称"
>
</el-table-column>
<el-table-column
prop="price"
width="120"
header-align="center"
align="center"
sortable
label="价格"
>
</el-table-column>
<el-table-column
prop="activityPrice"
width="120"
header-align="center"
align="center"
sortable
label="活动价"
>
</el-table-column>
<el-table-column
prop="productStock"
width="120"
header-align="center"
align="center"
sortable
label="库存"
>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="商品图"
width="120"
>
<template slot-scope="scope">
<img
v-if="scope.row.productImages != ''"
:src="scope.row.productImages"
width="25"
height="35"
class="tableImg"
/>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
<div class="demo-drawer__footer">
<div style="float: right; margin-top: 20px">
<el-button @click="close" size="small">取 消</el-button>
<el-button
type="primary"
@click="submit"
:loading="loading"
size="small"
>{{ loading ? "提交中 ..." : "确 定" }}</el-button
>
</div>
</div>
<!-- 弹窗, 新增 / 修改 -->
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
<choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book> -->
</div>
</el-drawer>
</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: {
key: "",
},
bookMarketId: null,
dataList: [],
publishStatus: false,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
chooseBookVisible: false,
bookIds: [],
goodsTypeList: [],
};
},
components: {
// AddOrUpdate,
// chooseBook
},
activated() {
this.getDataList();
},
methods: {
handleReset() {
this.dataForm = {};
this.pageIndex = 1;
this.getDataList();
},
submit() {
var ids = this.multipleSelection.map((e) => e.productId).toString(",");
this.$emit("submit", ids);
console.log(
"🚀 ~ submit ~ this.multipleSelection:",
this.multipleSelection
);
},
// 获取商品类型
getGoodsTypeList() {
this.$http({
url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
method: "get",
}).then(({ data }) => {
// console.log(data.dataList)
this.goodsTypeList = data.dataList;
});
},
handleClose(done) {
done();
// this.$confirm("确认关闭？")
// .then((_) => {
// done();
// })
// .catch((_) => {});
},
async open() {
this.drawer = true;
this.dataForm = {};
this.pageIndex = 1;
await this.getGoodsTypeList();
await this.getDataList();
},
close() {
this.drawer = false;
},
getRowKeys(row) {
return row.productId;
},
handleSelectionChange(val) {
console.log("🚀 ~ handleSelectionChange ~ val:", val);
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
this.multipleSelection = val;
// this.changePageCoreRecordData();
},
closeBookf() {
this.chooseBookVisible = false;
},
showchooseBookf(e) {
// 显示图书列表
this.chooseBookVisible = true;
// console.log(this.bookIds,'this.bookIds')
// this.$nextTick(() => {
// this.$refs.chooseBook.getBookList()
// this.bookIds = e.bookIds
// })
},
// 获取数据列表
async getDataList() {
var form = {
...this.dataForm,
current: this.pageIndex,
limit: this.pageSize,
productId: "",
};
// this.multipleSelection=[]
if (this.currentType == "bookLabelId") {
form.bookLabelId = this.currentId;
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
} else if (this.currentType == "bookMarketId") {
form.bookMarketId = this.currentId;
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
}
this.dataListLoading = true;
this.clear();
await this.$http({
url: this.$http.adornUrl(`/book/labelAndMarket/getNotToLabelList`),
method: "post",
data: this.$http.adornData(form),
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.result.records;
this.totalPage = data.result.total;
} else {
this.dataList = [];
this.totalPage = 0;
}
// setTimeout(async () => {
// await this.setSelectRow();
// }, 200);
this.dataListLoading = false;
});
},
clear() {
// this.$refs.table.clearSelection();
this.multipleSelection = [];
},
// 每页数
sizeChangeHandle(val) {
// this.changePageCoreRecordData();
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
// 改变页的时候调用一次
// this.changePageCoreRecordData();
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val;
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},
// 删除
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map((item) => {
return item.productId;
});
this.$confirm(
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
this.$http({
url: this.$http.adornUrl("/book/shopproduct/delete"),
method: "post",
data: this.$http.adornData(ids, false),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.$message.error(data.msg);
}
});
});
},
SwitchChange(event) {
/*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
var parms = {
publishStatus: event.publishStatus,
productId: event.productId,
};
// console.log(parms)
this.$http({
url: this.$http.adornUrl("/book/shopproduct/update"),
method: "post",
data: parms,
})
.then((res) => {
this.$message({
message: "成功",
type: "success",
});
this.loading = false;
this.getDataList();
})
.catch((error) => {
this.loading = false;
console.log(error);
});
console.log(event);
},
},
};
</script>
<style lang="less" scoped>
.shop_drawer_box {
padding: 20px !important;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.addFormBox {
width: 100%;
// overflow: hidden;
.form_item {
width: 33%;
float: left;
}
}
::v-deep.el-drawer__header {
margin-bottom: 10px !important;
}
</style>

195
src/views/modules/shop/commonBookTags/tags.vue
View File

@@ -1,8 +1,11 @@
<template>
<div class="tree_box">
<div style="overflow: hidden">
<p class="info_bg">
当前选中标签：<span style="color: #17b3a3; font-weight: 600">{{
<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>
@@ -14,6 +17,19 @@
>新增顶级标签</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" -->
@@ -35,15 +51,29 @@
<span
class="custom-tree-node"
slot-scope="{ node, data }"
@click="handleClickNodes(node, data, 'edit')"
@click="
source == 'tags'
? handleClickNodes(node, data, 'edit')
: ''
"
>
<span>{{ node.label }}</span>
<span>
<!-- @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"
@click.stop="handleClickNodes(node, data, 'addChildren')"
v-if="data.isLast == 1"
>
添加下级
</el-button>
@@ -68,12 +98,15 @@
<script>
// import dialogComponent from './seckillprodrelation'
import debounce from "lodash/debounce"; //导入lodash中的debounce
export default {
props: ["dataList","urlList"],
props: ["dataList", "urlList", "source", "productId",'sourceType'],
data() {
return {
currentNode: null,
checkAll: false,
treeDataList: [],
selectArr: [],
defaultProps: {
children: "children",
label: "title",
@@ -90,9 +123,122 @@ export default {
},
},
activated() {
console.log("🚀 ~ activated ~ this.currentNode:", this.currentNode, "9999");
if (this.source == "tags") {
if (this.currentNode) {
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) {
var newNodeData = await this.$refs.tree.getNode(id);
this.$emit("handleClickNodes", newNodeData, newNodeData.data, "edit");
this.currentNode = newNodeData;
this.$forceUpdate();
this.$refs.tree.setCurrentKey(id);
this.$refs.tree.setCheckedKeys([id]);
},
allowDrop(draggingNode, dropNode, type) {
console.log(draggingNode.level, dropNode.level);
//注掉的是同级拖拽
@@ -127,7 +273,7 @@ export default {
return status;
},
//新增修改
async dataFormSubmit(formName) {
dataFormSubmit: debounce(async function (formName) {
// return false
if (this.addForm.title == "") {
this.$message.error("请输入标签名称");
@@ -178,7 +324,7 @@ export default {
});
}
});
},
},200),
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([0]);
},
@@ -187,7 +333,7 @@ export default {
this.isFresh = false;
this.isFresh = true;
},
handleClickNodes(node, data, type) {
async handleClickNodes(node, data, type) {
this.addForm = {};
// console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
console.log(node, data, "当前选中节点");
@@ -196,6 +342,10 @@ export default {
this.isFresh = true;
var form = {};
if (this.source == "shop") {
await this.selectShop(data);
} else if (this.source == "tags") {
switch (type) {
case "add":
form = { ...data };
@@ -217,11 +367,17 @@ export default {
this.addForm = { ...form };
this.$nextTick(() => {
this.$emit('getCommonShopDataList',type,type == "edit" ? form.id : null,this.addForm)
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 = {
@@ -247,9 +403,7 @@ export default {
})
.then(async () => {
this.$http({
url: this.$http.adornUrl(
`${urlList.delete}?id=` + data.id
),
url: this.$http.adornUrl(`${urlList.delete}?id=` + data.id),
method: "post",
data: {},
}).then(async ({ data }) => {
@@ -568,13 +722,14 @@ export default {
</script>
<style lang="less" scoped>
.tree_box {
width: 400px;
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 {
@@ -636,6 +791,11 @@ export default {
overflow: hidden;
}
}
.select_box {
position: absolute;
right: 20px;
top: 0px;
}
.custom-tree-node {
flex: 1;
display: flex;
@@ -676,7 +836,8 @@ p {
}
}
.custom-tree-container {
height: calc(100% - 100px);
height: calc(100% - 60px);
.filter-tree {
height: 100%;
}

318
src/views/modules/shop/commonStore/add.vue Normal file
View File

@@ -0,0 +1,318 @@
<template>
<el-dialog
:title="!dataForm.id ? '新增' : '修改'"
: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="name">
<el-input
v-model="dataForm.name"
placeholder="商品名称"
clearable=""
></el-input>
</el-form-item>
<el-form-item label="商品图" prop="images">
<el-upload
:limit="1"
class="el-uploadfeng"
:class="{
uoloadSty: dataForm.showBtnDealImg,
disUoloadSty: dataForm.noneBtnImg,
}"
:action="baseUrl + '/oss/fileoss'"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:file-list="fileList"
:on-success="handlePicSuccess"
accept=".jpeg,.jpg,.gif,.png"
: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.images" alt="" />
</el-dialog>
</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 "@/views/common/common.vue"; //引入共用组间
import debounce from "lodash/debounce"; //导入lodash中的debounce
export default {
props: ["urlList"],
data() {
return {
baseUrl: global.baseUrl,
visible: false,
fileList: [], // 封面图
dialogVisible: false,
dataForm: {
name: "",
},
bookidsd: [],
dataRule: {
name: [
{
required: true,
message: "商品名称不能为空",
trigger: "blur",
},
],
// images: [{
// required: true,
// message: '商品图不能为空',
// trigger: 'blur'
// }],
},
};
},
created() {},
methods: {
handleCheckedCitiesChange(value) {
// console.log(value, 'value')
},
init(id) {
this.visible = true;
this.$nextTick(() => {
this.$refs["dataForm"].resetFields();
if (id) {
this.dataForm.id = id;
this.$http({
url: this.$http.adornUrl(`${this.urlList.info}?id=${id}`),
method: "get",
params: this.$http.adornParams(),
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm = { id: data.result.id, name: data.result.name };
if (data.result.productImages != "") {
var img = {
name: "",
url: data.result.images,
};
var attr = [];
attr.push(img);
this.fileList = attr;
}
}
});
}
});
},
// 表单提交
dataFormSubmit: debounce(function() {
this.$refs["dataForm"].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(this.urlList.add),
method: "post",
data: this.$http.adornData({
...this.dataForm,
images: this.dataForm.images,
}),
}).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);
}
});
}
});
}, 200),
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.images = 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.images = res.url;
this.fileList.push({
name: file.name,
url: res.url,
});
// console.log(this.dataForm.images,'images')
this.$message.success("上传成功");
} else {
this.$message.error("上传失败");
}
},
bannerHandleRemove(file, fileList) {
// 轮播图删除操作
this.swiperfileList = fileList;
},
handleRemove(file, fileList) {
this.dataForm.images = "";
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>

276
src/views/modules/shop/shopproduct.vue
View File

@@ -1,13 +1,38 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
<el-input
v-model="dataForm.key"
placeholder="参数名"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button @click="pageIndex = 1;getDataList()">查询</el-button>
<el-button v-if="isAuth('book:shopproduct:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('book:shopproduct:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
<el-button
@click="
pageIndex = 1;
getDataList();
"
>查询</el-button
>
<el-button
v-if="isAuth('book:shopproduct:save')"
type="primary"
@click="addOrUpdateHandle()"
>新增</el-button
>
<el-button
v-if="isAuth('book:shopproduct:delete')"
type="danger"
@click="deleteHandle()"
:disabled="dataListSelections.length <= 0"
>批量删除</el-button
>
</el-form-item>
</el-form>
<el-table
@@ -15,14 +40,21 @@
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
width="50"
>
</el-table-column>
<el-table-column label="商品ID" width="70" align="center" prop="productId">
<el-table-column
label="商品ID"
width="70"
align="center"
prop="productId"
>
<!-- <template slot-scope="scope">
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
</template> -->
@@ -31,17 +63,25 @@
prop="productName"
header-align="center"
align="center"
label="商品名称">
label="商品名称"
>
</el-table-column>
<el-table-column
prop="price"
header-align="center"
align="center"
label="商品价格">
label="商品价格"
>
</el-table-column>
<el-table-column header-align="center" align="center" label="商品图">
<template slot-scope="scope">
<img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="70" height="100" class="tableImg" />
<img
v-if="scope.row.productImages != ''"
:src="scope.row.productImages"
width="70"
height="100"
class="tableImg"
/>
</template>
</el-table-column>
<el-table-column
@@ -49,10 +89,27 @@
header-align="center"
align="center"
width="150"
label="操作">
label="操作"
>
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.productId)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.productId)">删除</el-button>
<el-button
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.productId)"
>修改</el-button
>
<el-button
type="text"
size="small"
@click="handleEditTags(scope.row.productId)"
>修改标签</el-button
>
<el-button
type="text"
size="small"
@click="deleteHandle(scope.row.productId)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@@ -63,22 +120,36 @@
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<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>
<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>
<commonTags ref="commonTags" ></commonTags>
</div>
</template>
<script>
import chooseBook from './chooseBook.vue'
import AddOrUpdate from './shopproduct-add-or-update'
export default {
data () {
import chooseBook from "./chooseBook.vue";
import AddOrUpdate from "./shopproduct-add-or-update";
import commonTags from "./commonBookTags/commonTags.vue";
export default {
data() {
return {
dataForm: {
key: ''
key: "",
},
dataList: [],
publishStatus: false,
@@ -89,128 +160,141 @@
dataListSelections: [],
addOrUpdateVisible: false,
chooseBookVisible: false,
bookIds:[]
}
bookIds: [],
};
},
components: {
AddOrUpdate,
chooseBook
chooseBook,
commonTags,
},
activated () {
this.getDataList()
activated() {
this.getDataList();
},
methods: {
handleEditTags (id) {
this.$nextTick(() => {
this.$refs.commonTags.open(id);
});
},
closeBookf() {
this.chooseBookVisible = false
this.chooseBookVisible = false;
},
showchooseBookf(e) {
// 显示图书列表
this.chooseBookVisible = true
this.chooseBookVisible = true;
// console.log(this.bookIds,'this.bookIds')
// this.$nextTick(() => {
// this.$refs.chooseBook.getBookList()
// this.bookIds = e.bookIds
// })
},
// 获取数据列表
getDataList () {
this.dataListLoading = true
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl('/book/shopproduct/list'),
method: 'get',
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}) => {
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
this.dataList = data.page.list;
this.totalPage = data.page.totalCount;
} else {
this.dataList = []
this.totalPage = 0
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false
})
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
selectionChangeHandle(val) {
this.dataListSelections = val;
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
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(() => {
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}) => {
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',
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList()
}
})
this.getDataList();
},
});
} else {
this.$message.error(data.msg)
this.$message.error(data.msg);
}
})
})
});
});
},
SwitchChange(event) {
/*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
var parms = {
publishStatus: event.publishStatus,
productId: event.productId
}
productId: event.productId,
};
// console.log(parms)
this.$http({
url: this.$http.adornUrl('/book/shopproduct/update'),
method: 'post',
data: parms
}).then(res => {
url: this.$http.adornUrl("/book/shopproduct/update"),
method: "post",
data: parms,
})
.then((res) => {
this.$message({
message: '成功',
type: 'success'
message: "成功",
type: "success",
});
this.loading = false;
this.getDataList();
})
this.loading = false
this.getDataList()
}).catch(error => {
this.loading = false
console.log(error)
})
console.log(event)
.catch((error) => {
this.loading = false;
console.log(error);
});
console.log(event);
},
}
}
},
};
</script>

218
src/views/modules/shop/commonBookTags/shopproduct copy.vue → src/views/modules/shop/smallstore.vue
View File

@@ -1,93 +1,98 @@
<template>
<div style="width: 100%; height: 100%; margin-top: -30px">
<div class="mod-config">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
style="float: right"
>
<el-form-item>
<el-input
v-model="dataForm.key"
placeholder="商品名称"
v-model="dataForm.name"
placeholder="店铺名称"
clearable
size="small"
></el-input>
</el-form-item>
<el-form-item>
<el-button
@click="
pageIndex = 1;
getDataList(bookMarketId);
getDataList();
"
size="small"
>查询</el-button
>
<el-button
v-if="isAuth('book:shopproduct:save')"
type="primary"
@click="addOrUpdateHandle()"
>新增</el-button
>
<!-- <el-button
v-if="isAuth('book:shopproduct:delete')"
type="danger"
@click="deleteHandle()"
:disabled="dataListSelections.length <= 0"
>批量删除</el-button
> -->
</el-form-item>
</el-form>
<!-- {{ multipleSelectionAll }} -->
<el-table
ref="table"
height="82%"
size="small"
:data="dataList"
:row-key="getRowKeys"
border
size="mini"
v-loading="dataListLoading"
@selection-change="handleSelectionChange"
@selection-change="selectionChangeHandle"
style="width: 100%"
>
<el-table-column
:reserve-selection="true"
<!-- <el-table-column
type="selection"
header-align="center"
align="center"
width="50"
>
</el-table-column>
<!-- -->
</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"
prop="name"
header-align="center"
align="center"
label="商品名称"
label="店铺名称"
>
</el-table-column>
<el-table-column
prop="price"
width="120"
header-align="center"
align="center"
sortable
label="商品价格"
>
</el-table-column>
<el-table-column
header-align="center"
align="center"
label="商品图"
width="120"
>
<el-table-column header-align="center" align="center" label="商品图">
<template slot-scope="scope">
<img
v-if="scope.row.productImages != ''"
:src="scope.row.productImages"
width="25"
height="35"
v-if="scope.row.images != ''"
:src="scope.row.images"
width="40"
height="60"
class="tableImg"
/>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>修改</el-button
>
<el-button
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@@ -100,24 +105,33 @@
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<!-- <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> -->
<add
:urlList="urlList"
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
@showchooseBookf="showchooseBookf"
></add>
</div>
</template>
<script>
// import chooseBook from './chooseBook.vue'
// import AddOrUpdate from './shopproduct-add-or-update'
<script>
import add from "./commonStore/add.vue";
export default {
data() {
return {
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
dataForm: {
key: "",
urlList:{
list:'/book/shopStore/getStoreList',
add:'/book/shopStore/saveOrUpdateStore',
info:'/book/shopStore/getStoreById',
delete:'/book/shopStore/delStore',
},
dataForm: {
name: "",
},
bookMarketId:null,
dataList: [],
publishStatus: false,
pageIndex: 1,
@@ -131,23 +145,18 @@ export default {
};
},
components: {
// AddOrUpdate,
// chooseBook
add,
},
activated() {
this.getDataList();
},
methods: {
getRowKeys(row) {
return row.productId;
handleEditTags (id) {
this.$nextTick(() => {
this.$refs.commonTags.open(id);
});
},
handleSelectionChange(val) {
console.log("🚀 ~ handleSelectionChange ~ val:", val);
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
this.multipleSelection = val;
// this.changePageCoreRecordData();
},
closeBookf() {
this.chooseBookVisible = false;
},
@@ -161,80 +170,36 @@ export default {
// })
},
// 获取数据列表
async getDataList(bookMarketId) {
this.bookMarketId=bookMarketId
getDataList() {
this.dataListLoading = true;
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,
this.$http({
url: this.$http.adornUrl(`${this.urlList.list}`),
method: "post",
data: this.$http.adornData({
current: this.pageIndex,
limit: this.pageSize,
key: this.dataForm.key,
...this.dataForm
}),
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.page.list;
this.totalPage = data.page.totalCount;
this.dataList = data.result.records;
this.totalPage = data.result.total;
} else {
this.dataList = [];
this.totalPage = 0;
}
// setTimeout(async () => {
// await this.setSelectRow();
// }, 200);
this.dataListLoading = false;
});
},
clear() {
this.$refs.table.clearSelection();
this.multipleSelection=[]
},
// 获取关联数据列表
async getCorrelationArr(bookLabelId) {
await this.$http({
url: this.$http.adornUrl("/book/labelAndMarket/getToLabelList"),
method: "post",
data: this.$http.adornData({
current: 1,
limit: 99999999,
// productName: "",
productId: "",
bookLabelId: bookLabelId,
}),
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.multipleSelection = data.result.records;
if (this.multipleSelection.length > 0) {
this.multipleSelection.forEach((row) => {
this.$refs.table.toggleRowSelection(row);
});
} else {
this.clear();
}
} else {
this.multipleSelection = [];
}
// await this.changePageCoreRecordData();
});
},
// 每页数
sizeChangeHandle(val) {
// this.changePageCoreRecordData();
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
// 改变页的时候调用一次
// this.changePageCoreRecordData();
this.pageIndex = val;
this.getDataList();
},
@@ -254,7 +219,7 @@ export default {
var ids = id
? [id]
: this.dataListSelections.map((item) => {
return item.productId;
return item.id;
});
this.$confirm(
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
@@ -266,7 +231,7 @@ export default {
}
).then(() => {
this.$http({
url: this.$http.adornUrl("/book/shopproduct/delete"),
url: this.$http.adornUrl(`${this.urlList.delete}?id=${ids}`),
method: "post",
data: this.$http.adornData(ids, false),
}).then(({ data }) => {
@@ -314,4 +279,3 @@ export default {
},
};
</script>

4
static/config/index.js
View File

@@ -5,10 +5,10 @@
window.SITE_CONFIG = {};
// api接口请求地址
// window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';//张川川
window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';//张川川
// window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
// window.SITE_CONFIG['baseUrl'] = 'https://testapi.nuttyreading.com'; // 线上测试环境11
window.SITE_CONFIG['baseUrl'] = 'https://api.nuttyreading.com'; // 线上正式环境
// window.SITE_CONFIG['baseUrl'] = 'https://api.nuttyreading.com'; // 线上正式环境
// window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.110:9200/pb';
// window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
// window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';