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:
@fawn-nine
2024-05-28 09:23:04 +08:00
parent df1a867db0
commit a8f12d22ef
1 changed files with 233 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
src/views/modules/shop/smallstore.vue
View File

@@ -1,9 +1,19 @@
<template> <template>
<div class="mod-config"> <div class="mod-config">
<commonTree source="tags" @changeCurrentNode="changeCurrentNode" ref="commonTree" :dataList="treeDataList" @getCommonShopDataList="getCommonShopDataList" <commonTree
@handleClickNodes="handleClickNodes" :urlList="urlList"></commonTree> source="tags"
<div v-if="isFresh" v-loading="!isFresh" @changeCurrentNode="changeCurrentNode"
style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"> ref="commonTree"
:dataList="treeDataList"
@getCommonShopDataList="getCommonShopDataList"
@handleClickNodes="handleClickNodes"
:urlList="urlList"
></commonTree>
<div
v-if="isFresh"
v-loading="!isFresh"
style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"
>
<div class="border_box info_box"> <div class="border_box info_box">
<div class="title_box"> <div class="title_box">
<div class="title"><span class="line"></span>基本小店信息</div> <div class="title"><span class="line"></span>基本小店信息</div>
@@ -12,15 +22,27 @@
<div class="addFormBox"> <div class="addFormBox">
<el-form :model="addForm" ref="addForm" label-width="80px"> <el-form :model="addForm" ref="addForm" label-width="80px">
<el-form-item label="小店名称" prop="name" class="form_item"> <el-form-item label="小店名称" prop="name" class="form_item">
<el-input placeholder="请输入小店名称" style="width: 100%" v-model="addForm.name" clearable> <el-input
placeholder="请输入小店名称"
style="width: 100%"
v-model="addForm.name"
clearable
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="sort" class="form_item"> <el-form-item label="排序" prop="sort" class="form_item">
<el-input-number placeholder="请输入小店排序" style="width: 100%" v-model="addForm.sort" :min="0" clearable <el-input-number
@keyup.native="UpNumber" @keydown.native="UpNumber"> placeholder="请输入小店排序"
style="width: 100%"
v-model="addForm.sort"
:min="0"
clearable
@keyup.native="UpNumber"
@keydown.native="UpNumber"
>
</el-input-number> </el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="封面图" prop="images" label-width="120px" > <el-form-item label="封面图" prop="images" label-width="120px">
<div style="display:flex; align-items:center"> <div style="display:flex; align-items:center">
<div> <div>
<el-upload <el-upload
@@ -30,21 +52,41 @@
:on-success="handlePicSuccess" :on-success="handlePicSuccess"
> >
<!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> --> <!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> -->
<img v-if="fimages" :src="fimages" class="avatar"> <img v-if="fimages" :src="fimages" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload></div> </el-upload>
<div> <el-tag v-if="fimages != ''" class="delImgBtn" @click="delImg()" type="danger">清空图片</el-tag></div></div> </div>
<div>
<div v-if="fimages != ''">
<el-tag class="delImgBtn" @click="delImg()" type="danger"
>清空图片</el-tag
>
</div>
</div>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div style=" border: 1px dashed #bababa;" v-if="currentNode && currentNode.data.isLast == 1"></div> <div
style=" border: 1px dashed #bababa;"
v-if="currentNode && currentNode.data.isLast == 1"
></div>
</div> </div>
<div class="border_box tree_content_box" v-if="addForm.id" > <div class="border_box tree_content_box" v-if="addForm.id">
<div class="title_box" style="margin-bottom: 10px; height: 80px; display:block;"> <div
class="title_box"
style="margin-bottom: 10px; height: 80px; display:block;"
>
<div class="title"> <div class="title">
<span class="line"></span>已关联商品列表 <span class="line"></span>已关联商品列表
<el-button plain type="primary" style="margin-left: 20px" @click="openTable('addForm')" <el-button
size="mini">新增</el-button> plain
type="primary"
style="margin-left: 20px"
@click="openTable('addForm')"
size="mini"
>新增</el-button
>
<!-- <div style="" class="button_box"> --> <!-- <div style="" class="button_box"> -->
<!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> --> <!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
@@ -52,22 +94,45 @@
<!-- </div> --> <!-- </div> -->
</div> </div>
</div> </div>
<commonShop :currentId="addForm.id ? addForm.id : ''" currentType="bookMarketId" :dataList="associatedGoodsList" <commonShop
:urlList="urlList" @delete="dataFormDelete" :isEdit="isEdit" :oprateType="oprateType" ref="commonShop" :style="`height: calc(100% - 50px); `"></commonShop> :currentId="addForm.id ? addForm.id : ''"
currentType="bookMarketId"
:dataList="associatedGoodsList"
:urlList="urlList"
@delete="dataFormDelete"
:isEdit="isEdit"
:oprateType="oprateType"
ref="commonShop"
:style="`height: calc(100% - 50px); `"
></commonShop>
<div class="submitButton submitButtonBox" > <div class="submitButton submitButtonBox">
<!-- <el-button size="small" @click.stop="dataFormEdit()"> <!-- <el-button size="small" @click.stop="dataFormEdit()">
取消 取消
</el-button> --> </el-button> -->
<el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button> <el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> --> <!-- </div> -->
</div> </div>
</div> </div>
<div class="submitButton submitButtonBox" style="position: absolute;bottom: 13px;right: 15px;" v-if="!isEdit"> <div
class="submitButton submitButtonBox"
style="position: absolute;bottom: 13px;right: 15px;"
v-if="!isEdit"
>
<!-- <el-button size="small" @click.stop="dataFormEdit()"> <!-- <el-button size="small" @click.stop="dataFormEdit()">
取消 取消
</el-button> --> </el-button> -->
<el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button> <el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> --> <!-- </div> -->
</div> </div>
</div> </div>
@@ -80,9 +145,17 @@
</el-form> --> </el-form> -->
<commonShopTable ref="commonShopTable" :currentId="addForm.id" currentType="bookMarketId" <commonShopTable
@submit="handleSubmitShopTable"></commonShopTable> ref="commonShopTable"
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> :currentId="addForm.id"
currentType="bookMarketId"
@submit="handleSubmitShopTable"
></commonShopTable>
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div> </div>
</template> </template>
@@ -107,19 +180,19 @@ export default {
deleteShop: "/master/shopStore/delStore", deleteShop: "/master/shopStore/delStore",
saveShop: "/master/shopStore/saveOrUpdateStore", saveShop: "/master/shopStore/saveOrUpdateStore",
add: "/master/shopStore/saveOrUpdateStore", add: "/master/shopStore/saveOrUpdateStore",
getAssociatedGoodsList: "/master/shopStore/getStoreProductList", getAssociatedGoodsList: "/master/shopStore/getStoreProductList"
}, },
oprateType:"yingxiao", // yingxiao：类型是营销 fenlei:类型是分类 oprateType: "yingxiao", // yingxiao：类型是营销 fenlei:类型是分类
addForm: {}, addForm: {},
isFresh: false, isFresh: false,
dataRule: { dataRule: {
name: [ name: [
{ {
required: true, required: true,
message: "小店名称不能为空", message: "小店名称不能为空"
// trigger: "change", // trigger: "change",
}, }
], ]
}, },
currentNode: {}, currentNode: {},
treeDataList: [], treeDataList: [],
@@ -134,10 +207,10 @@ export default {
isBreak: false, //是否结束循环 isBreak: false, //是否结束循环
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "title", label: "title"
}, },
dataForm: { dataForm: {
key: "", key: ""
}, },
dataList: [], dataList: [],
pageIndex: 1, pageIndex: 1,
@@ -146,21 +219,21 @@ export default {
dataListLoading: false, dataListLoading: false,
dataListSelections: [], dataListSelections: [],
addOrUpdateVisible: false, addOrUpdateVisible: false,
fileList:[], fileList: [],
refreshImg:true, refreshImg: true,
fimages:"" fimages: ""
}; };
}, },
components: { components: {
AddOrUpdate, AddOrUpdate,
commonShop, commonShop,
commonTree, commonTree,
commonShopTable, commonShopTable
}, },
watch: { watch: {
filterText(val) { filterText(val) {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
}, }
}, },
activated() { activated() {
this.isEdit = false; this.isEdit = false;
@@ -175,17 +248,17 @@ export default {
// console.log(this.addForm) // console.log(this.addForm)
// // this.dialogVisible = true; // // this.dialogVisible = true;
// }, // },
delImg(){ delImg() {
this.fimages = '' this.fimages = "";
this.addForm.images = ''; this.addForm.images = "";
}, },
handlePicSuccess(res, file) { handlePicSuccess(res, file) {
// console.log(res,'res') // console.log(res,'res')
// if (res.msg == "success") { // if (res.msg == "success") {
this.fimages = res.url; this.fimages = res.url;
this.addForm.images = res.url this.addForm.images = res.url;
this.$message.success("上传成功"); this.$message.success("上传成功");
console.log(this.fimages,this.addForm.images,'上传') console.log(this.fimages, this.addForm.images, "上传");
// } else { // } else {
// this.$message.error("上传失败"); // this.$message.error("上传失败");
// } // }
@@ -202,23 +275,23 @@ export default {
// this.$refs.commonShop.handleCheckAllChange(val); // this.$refs.commonShop.handleCheckAllChange(val);
// }); // });
// }, // },
handleSubmitShopTable: debounce(async function (ids) { handleSubmitShopTable: debounce(async function(ids) {
await this.$http({ await this.$http({
url: this.$http.adornUrl(`${this.urlList.saveShop}`), url: this.$http.adornUrl(`${this.urlList.saveShop}`),
method: "post", method: "post",
data: this.$http.adornData({ data: this.$http.adornData({
productId: ids, productId: ids,
bookMarketId: this.addForm.id, bookMarketId: this.addForm.id
}), })
}).then(async ({ data }) => { }).then(async ({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.$message.success(data.msg); this.$message.success(data.msg);
if (this.$refs.commonShop) { if (this.$refs.commonShop) {
if(addForm.id != ''){ if (addForm.id != "") {
// console.log(addForm.id,'addForm.id') // console.log(addForm.id,'addForm.id')
this.$refs.commonShop.getAssociatedGoodsList({ this.$refs.commonShop.getAssociatedGoodsList({
bookMarketId: this.addForm.id, bookMarketId: this.addForm.id
}); });
} }
} }
@@ -242,7 +315,7 @@ export default {
if (e == 1) { if (e == 1) {
if (this.$refs.commonShop) { if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({ this.$refs.commonShop.getAssociatedGoodsList({
bookMarketId: this.addForm.id ? this.addForm.id : null, bookMarketId: this.addForm.id ? this.addForm.id : null
}); });
} }
} }
@@ -254,9 +327,9 @@ export default {
this.isEdit = false; this.isEdit = false;
this.isFresh = true; this.isFresh = true;
console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id); console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
this.currentNode = { data: { ...form } } this.currentNode = { data: { ...form } };
this.addForm = form; this.addForm = form;
this.fimages = form.images this.fimages = form.images;
await this.getDataList(); await this.getDataList();
// this.$refs.commonTree.setCurrentNodeShow(); // this.$refs.commonTree.setCurrentNodeShow();
@@ -270,32 +343,31 @@ export default {
}, },
//新增修改 //新增修改
dataFormSubmit: debounce(async function (formName) { dataFormSubmit: debounce(async function(formName) {
// return false // return false
if (this.addForm.name == "" || !this.addForm.name) { if (this.addForm.name == "" || !this.addForm.name) {
this.$message.error("请输入小店名称"); this.$message.error("请输入小店名称");
return false; return false;
} }
var form={...this.addForm} var form = { ...this.addForm };
delete form.children delete form.children;
await this.$refs[formName].validate(async (valid) => { await this.$refs[formName].validate(async valid => {
if (valid) { if (valid) {
await this.$http({ await this.$http({
url: this.$http.adornUrl(`${this.urlList.add}`), url: this.$http.adornUrl(`${this.urlList.add}`),
method: "post", method: "post",
data: this.$http.adornData({ data: this.$http.adornData({
...form, ...form
}), })
}).then(async ({ data }) => { }).then(async ({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
await this.getDataList(); await this.getDataList();
this.$nextTick(async () => { this.$nextTick(async () => {
this.$refs.commonTree.setCurrentNodeShow(data.result.id); this.$refs.commonTree.setCurrentNodeShow(data.result.id);
this.addForm = data.result; this.addForm = data.result;
this.currentNode = { data: { ...data.result } } this.currentNode = { data: { ...data.result } };
this.fimages= data.result.images this.fimages = data.result.images;
// this.currentNode = { data: { ...data.list } } // this.currentNode = { data: { ...data.list } }
this.$message({ this.$message({
message: "操作成功", message: "操作成功",
@@ -303,7 +375,7 @@ export default {
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.visible = false; this.visible = false;
}, }
}); });
}); });
} else { } else {
@@ -314,12 +386,16 @@ export default {
}); });
}, 200), }, 200),
//删除关联商品 //删除关联商品
dataFormDelete: debounce(async function (row, deleteType) { dataFormDelete: debounce(async function(row, deleteType) {
this.$confirm(`确定要删除${deleteType != 'all' ? '该' : '所有'}关联商品嘛?`, "提示", { this.$confirm(
`确定要删除${deleteType != "all" ? "该" : "所有"}关联商品嘛?`,
"提示",
{
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}) }
)
.then(async () => { .then(async () => {
// var lableIds = row[0].bookLabelId // var lableIds = row[0].bookLabelId
// var productIds = row.map(e => e.productId) // var productIds = row.map(e => e.productId)
@@ -335,12 +411,10 @@ export default {
this.$refs.commonShop.dataListLoading = true; this.$refs.commonShop.dataListLoading = true;
await this.$http({ await this.$http({
url: this.$http.adornUrl( url: this.$http.adornUrl(`${this.urlList.delete}`),
`${this.urlList.delete}`
),
method: "post", method: "post",
data: { data: {
id:row[0].id id: row[0].id
}, },
header: { header: {
//默认 无 说明：请求头 //默认 无 说明：请求头
@@ -349,29 +423,27 @@ export default {
}).then(async ({ data }) => { }).then(async ({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.$message.success("删除成功"); this.$message.success("删除成功");
} else { } else {
this.$message.error(data.msg); this.$message.error(data.msg);
}this.$nextTick(() => { }
this.$nextTick(() => {
// this.$refs.commonShop.selectShopArr = []; // this.$refs.commonShop.selectShopArr = [];
if (this.$refs.commonShop) { if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({ this.$refs.commonShop.getAssociatedGoodsList({
bookLabelId: this.addForm.id, bookLabelId: this.addForm.id
}); });
} }
}); });
}); });
}) })
.catch(() => { }); .catch(() => {});
}, 200), }, 200),
setCheckedKeys() { setCheckedKeys() {
this.$refs.tree.setCheckedKeys([0]); this.$refs.tree.setCheckedKeys([0]);
}, },
changeCurrentNode(val) { changeCurrentNode(val) {
this.changeCurrentNode = val; this.changeCurrentNode = val;
this.$forceUpdate() this.$forceUpdate();
}, },
handlereset() { handlereset() {
this.currentNode = null; this.currentNode = null;
@@ -419,7 +491,7 @@ export default {
images: 0, images: 0,
sort: 0, sort: 0,
name: "", name: "",
id:null id: null
}; };
this.handleClickNodes({ data: addform }, addform, "add"); this.handleClickNodes({ data: addform }, addform, "add");
}, },
@@ -522,10 +594,10 @@ export default {
const children = parent.data.nodes || parent.data; const children = parent.data.nodes || parent.data;
//若parent.data是对象，操作的是子级；如果是数组，操作的是最外层 //若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
if (Array.isArray(parent.data)) { if (Array.isArray(parent.data)) {
const parentIndex = parent.data.findIndex((d) => d.id === data.id); const parentIndex = parent.data.findIndex(d => d.id === data.id);
parent.data.splice(parentIndex, 1); parent.data.splice(parentIndex, 1);
} else { } else {
const childIndex = children.findIndex((d) => d.id === data.id); const childIndex = children.findIndex(d => d.id === data.id);
children.splice(childIndex, 1); children.splice(childIndex, 1);
} }
this.curNode = undefined; this.curNode = undefined;
@@ -546,7 +618,7 @@ export default {
return; return;
} }
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
( (
c ^ c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4))) (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
@@ -558,7 +630,7 @@ export default {
nodes: [], nodes: [],
id: id, id: id,
typeName: "模板组", typeName: "模板组",
temporaryData: "1", //用来区分临时数据 temporaryData: "1" //用来区分临时数据
}; };
/* 如果模版深度最多两层，以下条件改成该部分注释 /* 如果模版深度最多两层，以下条件改成该部分注释
this.curNode && this.curNode.depth == 1 this.curNode && this.curNode.depth == 1
@@ -658,7 +730,7 @@ export default {
this.isUpdateGroup = false; this.isUpdateGroup = false;
const parent = node.parent; const parent = node.parent;
const children = parent.data.nodes || parent.data; const children = parent.data.nodes || parent.data;
const index = children.findIndex((d) => d.id === data.id); const index = children.findIndex(d => d.id === data.id);
let temp = data; let temp = data;
temp.text = this.isactTitle; temp.text = this.isactTitle;
children.splice(index, 1, temp); children.splice(index, 1, temp);
@@ -680,8 +752,8 @@ export default {
url: this.$http.adornUrl(this.urlList.treeList), url: this.$http.adornUrl(this.urlList.treeList),
method: "post", method: "post",
data: this.$http.adornData({ data: this.$http.adornData({
"current": 1, current: 1,
"limit": 10 limit: 10
}) })
}).then(({ data }) => { }).then(({ data }) => {
console.log("🚀 ~ getDataList ~ data:", data); console.log("🚀 ~ getDataList ~ data:", data);
@@ -709,7 +781,7 @@ export default {
// 多选 // 多选
selectionChangeHandle(val) { selectionChangeHandle(val) {
this.dataListSelections = val; this.dataListSelections = val;
}, }
// // 新增 / 修改 // // 新增 / 修改
// addOrUpdateHandle(row) { // addOrUpdateHandle(row) {
// this.addOrUpdateVisible = true; // this.addOrUpdateVisible = true;
@@ -717,35 +789,45 @@ export default {
// this.$refs.addOrUpdate.init(row); // this.$refs.addOrUpdate.init(row);
// }); // });
// }, // },
}, }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.delImgBtn{cursor: pointer; display: inline-block; margin-left: 10px;} .delImgBtn {
cursor: pointer;
display: inline-block;
margin-left: 10px;
}
.imageTxt {
font-size: 12px;
}
.el-upload { .el-upload {
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.avatar-uploader .el-upload:hover { .avatar-uploader .el-upload:hover {
border-color: #409EFF; border-color: #409eff;
} }
.avatar-uploader-icon { .avatar-uploader-icon {
border: 1px dashed #d9d9d9; border-color: #409EFF; border: 1px dashed #d9d9d9;
border-color: #409eff;
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;
width: 70px; width: 70px;
height: 70px; height: 70px;
line-height: 70px; line-height: 70px;
text-align: center; text-align: center;
} }
.avatar { .avatar {
width: 70px; width: 70px;
border: 1px dashed #409eff;
// border-color: #409eff;
height: 70px; height: 70px;
display: block; display: block;
} }
.tree_box { .tree_box {
width: 350px !important; width: 350px !important;
height: 100%; height: 100%;
@@ -758,8 +840,8 @@ export default {
} }
.border_box { .border_box {
margin-bottom: 10px;
margin-bottom: 10px; height: 138px; height: 138px;
.title_box { .title_box {
display: flex; display: flex;
@@ -801,7 +883,6 @@ export default {
border-radius: 10px; border-radius: 10px;
padding: 15px 15px; padding: 15px 15px;
box-sizing: border-box; box-sizing: border-box;
} }
.tree_content_box { .tree_content_box {
@@ -826,7 +907,7 @@ export default {
} }
} }
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #eaebed; background-color: #eaebed;
color: #4796ec; color: #4796ec;
font-weight: bold; font-weight: bold;
@@ -852,7 +933,6 @@ export default {
padding-right: 8px; padding-right: 8px;
} }
p { p {
margin: 0; margin: 0;
margin-bottom: 10px; margin-bottom: 10px;