标签删除
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<script type="text/javascript">
|
||||
const baseUrl = "http://192.168.110.100:9200/pb"; //张川川后端
|
||||
// const baseUrl = "http://192.168.110.100:9200/pb"; //张川川后端
|
||||
// const baseUrl = 'http://59.110.212.44:9100/pb'
|
||||
// const baseUrl = 'https://testapi.nuttyreading.com'
|
||||
const baseUrl = 'https://testapi.nuttyreading.com'
|
||||
// const baseUrl = 'https://api.nuttyreading.com'
|
||||
// function commonFun() {
|
||||
// console.log("公共方法")
|
||||
|
||||
@@ -1,14 +1,9 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<commonTree
|
||||
source="tags"
|
||||
ref="commonTree"
|
||||
:dataList="treeDataList"
|
||||
@getCommonShopDataList="getCommonShopDataList"
|
||||
@handleClickNodes="handleClickNodes"
|
||||
:urlList="urlList"
|
||||
></commonTree>
|
||||
<div style="width: calc(100% - 360px); height: 100%; float: right">
|
||||
<commonTree source="tags" @changeCurrentNode="changeCurrentNode" 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="title_box">
|
||||
<div class="title"><span class="line"></span>基本标签信息</div>
|
||||
@@ -17,115 +12,64 @@
|
||||
<div class="addFormBox">
|
||||
<el-form :model="addForm" ref="addForm" label-width="80px">
|
||||
<el-form-item label="标签名称" prop="title" class="form_item">
|
||||
<el-input
|
||||
placeholder="请输入标签名称"
|
||||
style="width: 100%"
|
||||
v-model="addForm.title"
|
||||
clearable
|
||||
>
|
||||
<el-input placeholder="请输入标签名称" style="width: 100%" v-model="addForm.title" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort" class="form_item">
|
||||
<el-input-number
|
||||
placeholder="请输入标签排序"
|
||||
style="width: 100%"
|
||||
v-model="addForm.sort"
|
||||
clearable
|
||||
>
|
||||
<el-input-number placeholder="请输入标签排序" style="width: 100%" v-model="addForm.sort" :min="0" clearable
|
||||
@keyup.native="UpNumber" @keydown.native="UpNumber">
|
||||
</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-form-item label="是否为最终级" prop="isLast" label-width="120px" class="form_item">
|
||||
<el-switch 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 style=" border: 1px dashed #bababa;" v-if="currentNode && currentNode.data.isLast == 1"></div>
|
||||
</div>
|
||||
<div class="border_box tree_content_box" v-if="addForm.isLast == 1">
|
||||
<div class="border_box tree_content_box" v-if="currentNode && currentNode.data.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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button>
|
||||
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<commonShop
|
||||
:currentId="addForm.id"
|
||||
currentType="bookMarketId"
|
||||
:dataList="associatedGoodsList"
|
||||
:urlList="urlList"
|
||||
:isEdit="isEdit"
|
||||
ref="commonShop"
|
||||
:style="`height: calc(100% - 50px); `"
|
||||
></commonShop>
|
||||
<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> -->
|
||||
<commonShop :currentId="addForm.id ? addForm.id : ''" currentType="bookMarketId" :dataList="associatedGoodsList"
|
||||
:urlList="urlList" @delete="dataFormDelete" :isEdit="isEdit" ref="commonShop" :style="`height: calc(100% - 50px); `"></commonShop>
|
||||
<!-- <div class="submitButtonBox" v-if="isEdit">
|
||||
<el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="float: left">全选</el-checkbox>
|
||||
|
||||
<div class="submitButton">
|
||||
<!-- <el-button size="small" @click.stop="dataFormEdit()">
|
||||
取消
|
||||
</el-button> -->
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="dataFormDelete('addForm')"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
|
||||
<el-button type="danger" @click="dataFormDelete('addForm')" size="small">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="submitButtonBox" v-else> -->
|
||||
|
||||
<!-- <el-button @click="handlereset" size="small">取消</el-button> -->
|
||||
<div class="submitButton submitButtonBox" v-else>
|
||||
<div class="submitButton submitButtonBox" >
|
||||
<!-- <el-button size="small" @click.stop="dataFormEdit()">
|
||||
取消
|
||||
</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 class="submitButton submitButtonBox" style="position: absolute;bottom: 13px;right: 15px;" v-if="!isEdit">
|
||||
<!-- <el-button size="small" @click.stop="dataFormEdit()">
|
||||
取消
|
||||
</el-button> -->
|
||||
<el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-form
|
||||
@@ -136,17 +80,9 @@
|
||||
|
||||
|
||||
</el-form> -->
|
||||
<commonShopTable
|
||||
ref="commonShopTable"
|
||||
:currentId="addForm.id"
|
||||
currentType="bookMarketId"
|
||||
@submit="handleSubmitShopTable"
|
||||
></commonShopTable>
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="getDataList"
|
||||
></add-or-update>
|
||||
<commonShopTable ref="commonShopTable" :currentId="addForm.id" currentType="bookMarketId"
|
||||
@submit="handleSubmitShopTable"></commonShopTable>
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -182,7 +118,7 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
currentNode: null,
|
||||
currentNode: {},
|
||||
treeDataList: [],
|
||||
associatedGoodsList: [], //已关联商品列表
|
||||
|
||||
@@ -225,6 +161,9 @@ export default {
|
||||
this.getDataList();
|
||||
},
|
||||
methods: {
|
||||
UpNumber(e) {
|
||||
e.target.value = e.target.value.replace(/[^\d]/g, "");
|
||||
},
|
||||
dataFormEdit() {
|
||||
this.checkAll = false;
|
||||
this.isEdit = !this.isEdit;
|
||||
@@ -234,7 +173,7 @@ export default {
|
||||
this.$refs.commonShop.handleCheckAllChange(val);
|
||||
});
|
||||
},
|
||||
handleSubmitShopTable: debounce(async function (ids) {
|
||||
handleSubmitShopTable: debounce(async function (ids) {
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`${this.urlList.saveShop}`),
|
||||
method: "post",
|
||||
@@ -245,15 +184,21 @@ export default {
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message.success(data.msg);
|
||||
|
||||
if (this.$refs.commonShop) {
|
||||
|
||||
this.$refs.commonShop.getAssociatedGoodsList({
|
||||
bookMarketId: this.addForm.id,
|
||||
});
|
||||
}
|
||||
if (this.$refs.commonShopTable) {
|
||||
this.$refs.commonShopTable.close();
|
||||
}
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
},200),
|
||||
}, 200),
|
||||
openTable() {
|
||||
this.isEdit = false;
|
||||
this.$nextTick(() => {
|
||||
@@ -264,28 +209,41 @@ export default {
|
||||
console.log("🚀 ~ handleChangeIsLast ~ e:", e);
|
||||
this.$nextTick(() => {
|
||||
if (e == 1) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList();
|
||||
if (this.$refs.commonShop) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList({
|
||||
bookMarketId: this.addForm.id ? this.addForm.id : null,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getCommonShopDataList(type, id, form) {
|
||||
async getCommonShopDataList(type, id, form) {
|
||||
this.isFresh = false;
|
||||
this.isEdit = false;
|
||||
this.isFresh = true;
|
||||
console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
|
||||
this.currentNode = { data: { ...form } }
|
||||
this.addForm = form;
|
||||
|
||||
await this.getDataList();
|
||||
// this.$refs.commonTree.setCurrentNodeShow();
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.commonShop.clear();
|
||||
// this.$refs.commonShop.bookMarketId = null;
|
||||
if (form.isLast == 1) {
|
||||
if (this.$refs.commonShop) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//新增修改
|
||||
dataFormSubmit: debounce(async function (formName) {
|
||||
dataFormSubmit: debounce(async function (formName) {
|
||||
// return false
|
||||
if (this.addForm.title == "") {
|
||||
if (this.addForm.title == "" || !this.addForm.title) {
|
||||
|
||||
this.$message.error("请输入标签名称");
|
||||
return false;
|
||||
}
|
||||
@@ -304,8 +262,9 @@ export default {
|
||||
|
||||
this.$nextTick(async () => {
|
||||
this.$refs.commonTree.setCurrentNodeShow(data.result.id);
|
||||
|
||||
|
||||
|
||||
this.addForm = data.result;
|
||||
this.currentNode = { data: { ...data.result } }
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
@@ -313,7 +272,7 @@ export default {
|
||||
onClose: () => {
|
||||
this.visible = false;
|
||||
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -323,38 +282,59 @@ export default {
|
||||
});
|
||||
}
|
||||
});
|
||||
},200),
|
||||
}, 200),
|
||||
//新增修改
|
||||
async dataFormDelete(formName) {
|
||||
// return false
|
||||
var selectShopArr = this.$refs.commonShop.selectShopArr;
|
||||
console.log(selectShopArr, "1111");
|
||||
dataFormDelete: debounce(async function (row, deleteType) {
|
||||
this.$confirm(`确定要删除${deleteType != 'all' ? '该' : '所有'}关联商品嘛?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(async () => {
|
||||
var lableIds = row[0].bookLabelId
|
||||
var productIds = row.map(e => e.productId)
|
||||
|
||||
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();
|
||||
// // 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}?marketId=${this.addForm.id}&productId=${productIds.toString(",")}`
|
||||
),
|
||||
method: "post",
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message.success("删除成功");
|
||||
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}this.$nextTick(() => {
|
||||
// this.$refs.commonShop.selectShopArr = [];
|
||||
if (this.$refs.commonShop) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList({
|
||||
bookLabelId: this.addForm.id,
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
})
|
||||
.catch(() => { });
|
||||
|
||||
}, 200),
|
||||
setCheckedKeys() {
|
||||
this.$refs.tree.setCheckedKeys([0]);
|
||||
},
|
||||
changeCurrentNode(val) {
|
||||
this.changeCurrentNode = val;
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handlereset() {
|
||||
this.currentNode = null;
|
||||
this.isFresh = false;
|
||||
@@ -365,7 +345,7 @@ export default {
|
||||
this.addForm = {};
|
||||
// console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
|
||||
console.log(node, data, "当前选中节点");
|
||||
this.currentNode = node;
|
||||
this.currentNode = node ? node : {};
|
||||
this.isFresh = false;
|
||||
this.isFresh = true;
|
||||
|
||||
@@ -411,7 +391,7 @@ export default {
|
||||
// return;
|
||||
// }
|
||||
},
|
||||
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.title.indexOf(value) !== -1;
|
||||
@@ -720,19 +700,23 @@ export default {
|
||||
box-sizing: border-box;
|
||||
// background: #fafafa;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -752,48 +736,57 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border_box {
|
||||
width: 100%;
|
||||
float: right;
|
||||
background: #fffefe;
|
||||
border: 1px solid #bababa;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.mod-config {
|
||||
width: 100%;
|
||||
height: 82vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
.el-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
.el-button {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #eaebed;
|
||||
color: #4796ec;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
height: 350px;
|
||||
overflow-y: auto !important;
|
||||
|
||||
.el-tree-node__content span {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -802,6 +795,7 @@ export default {
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
// .el-card {
|
||||
// background: none !important;
|
||||
// }
|
||||
@@ -809,15 +803,18 @@ p {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.submitButtonBox {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// .el-tree-node__content .el-button {
|
||||
// // width: 120px !important;
|
||||
|
||||
@@ -834,17 +831,22 @@ p {
|
||||
// }
|
||||
|
||||
.addFormBox {
|
||||
overflow: hidden;
|
||||
|
||||
.form_item {
|
||||
width: 33%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-container {
|
||||
height: calc(100% - 100px);
|
||||
|
||||
.filter-tree {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info_bg {
|
||||
background: #e0dede;
|
||||
height: 28px;
|
||||
|
||||
@@ -1,131 +1,71 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<commonTree
|
||||
source="tags"
|
||||
ref="commonTree"
|
||||
:dataList="treeDataList"
|
||||
@getCommonShopDataList="getCommonShopDataList"
|
||||
:urlList="urlList"
|
||||
></commonTree>
|
||||
<div style="width: calc(100% - 360px); height: 100%; float: right">
|
||||
<commonTree source="tags" ref="commonTree" :dataList="treeDataList" @getCommonShopDataList="getCommonShopDataList"
|
||||
@changeCurrentNode="changeCurrentNode" :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="title_box">
|
||||
|
||||
<div class="title"><span class="line"></span>基本标签信息</div>
|
||||
</div>
|
||||
|
||||
<div class="addFormBox">
|
||||
<el-form :model="addForm" ref="addForm" label-width="80px">
|
||||
<el-form-item label="标签名称" prop="title" class="form_item">
|
||||
<el-input
|
||||
placeholder="请输入标签名称"
|
||||
style="width: 100%"
|
||||
v-model="addForm.title"
|
||||
clearable
|
||||
>
|
||||
<el-input placeholder="请输入标签名称" style="width: 100%" v-model="addForm.title" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort" class="form_item">
|
||||
<el-input-number
|
||||
placeholder="请输入标签排序"
|
||||
style="width: 100%"
|
||||
v-model="addForm.sort"
|
||||
clearable
|
||||
@keyup.native="UpNumber"
|
||||
@keydown.native="UpNumber"
|
||||
>
|
||||
<el-input-number placeholder="请输入标签排序" style="width: 100%" v-model="addForm.sort" clearable :min="0"
|
||||
@keyup.native="UpNumber" @keydown.native="UpNumber">
|
||||
</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-form-item label="是否为最终级" prop="isLast" label-width="120px" class="form_item">
|
||||
<el-switch 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 style=" border: 1px dashed #bababa;" v-if="currentNode && currentNode.data.isLast == 1"></div>
|
||||
</div>
|
||||
<div class="border_box tree_content_box" v-if="addForm.isLast == 1">
|
||||
<div class="border_box tree_content_box" v-if="currentNode && currentNode.data.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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<commonShop
|
||||
:currentId="addForm.id"
|
||||
currentType="bookLabelId"
|
||||
:dataList="associatedGoodsList"
|
||||
:urlList="urlList"
|
||||
:isEdit="isEdit"
|
||||
ref="commonShop"
|
||||
:style="`height: calc(100% - 50px); `"
|
||||
></commonShop>
|
||||
<commonShop :currentId="addForm.id ? addForm.id : ''" currentType="bookLabelId" :dataList="associatedGoodsList"
|
||||
:urlList="urlList" :isEdit="isEdit" ref="commonShop" :style="`height: calc(100% - 50px); `"
|
||||
@delete="dataFormDelete"></commonShop>
|
||||
<div class="submitButtonBox" v-if="isEdit">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
@change="handleCheckAllChange"
|
||||
style="float: left"
|
||||
>全选</el-checkbox
|
||||
>
|
||||
<el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="float: left">全选</el-checkbox>
|
||||
<!-- <el-button @click="handlereset" size="small">取消</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
|
||||
>
|
||||
<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()">
|
||||
|
||||
</div>
|
||||
<div class="submitButton submitButtonBox" style="position: absolute;bottom: 13px;right: 15px;" v-if="!isEdit">
|
||||
<!-- <el-button size="small" @click.stop="dataFormEdit()">
|
||||
取消
|
||||
</el-button> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="dataFormSubmit('addForm')"
|
||||
size="small"
|
||||
>确定</el-button
|
||||
>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -137,17 +77,9 @@
|
||||
|
||||
|
||||
</el-form> -->
|
||||
<commonShopTable
|
||||
ref="commonShopTable"
|
||||
:currentId="addForm.id"
|
||||
currentType="bookLabelId"
|
||||
@submit="handleSubmitShopTable"
|
||||
></commonShopTable>
|
||||
<add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="getDataList"
|
||||
></add-or-update>
|
||||
<commonShopTable ref="commonShopTable" :currentId="addForm.id" currentType="bookLabelId"
|
||||
@submit="handleSubmitShopTable"></commonShopTable>
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -183,7 +115,7 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
currentNode: null,
|
||||
currentNode: {},
|
||||
treeDataList: [],
|
||||
associatedGoodsList: [], //已关联商品列表
|
||||
|
||||
@@ -250,10 +182,15 @@ export default {
|
||||
}).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();
|
||||
if (this.$refs.commonShop) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList({
|
||||
bookLabelId: this.addForm.id,
|
||||
});
|
||||
}
|
||||
if (this.$refs.commonShopTable) {
|
||||
this.$refs.commonShopTable.close();
|
||||
}
|
||||
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
@@ -269,30 +206,46 @@ export default {
|
||||
console.log("🚀 ~ handleChangeIsLast ~ e:", e);
|
||||
this.$nextTick(() => {
|
||||
if (e == 1) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList({
|
||||
bookLabelId: this.addForm.id,
|
||||
});
|
||||
|
||||
if (this.$refs.commonShop) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList({
|
||||
bookLabelId: this.addForm.id ? this.addForm.id : null,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getCommonShopDataList(type, id, form) {
|
||||
this.isEdit = false;
|
||||
async getCommonShopDataList(type, id, form) {
|
||||
this.isFresh = false;
|
||||
|
||||
this.isEdit = false; this.isFresh = true;
|
||||
console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
|
||||
this.currentNode = { data: { ...form } }
|
||||
this.addForm = form;
|
||||
|
||||
|
||||
await this.getDataList();
|
||||
// this.$refs.commonTree.setCurrentNodeShow();
|
||||
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.commonShop.clear();
|
||||
// this.$refs.commonShop.bookMarketId = null;
|
||||
if (form.isLast == 1) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList();
|
||||
if (this.$refs.commonShop) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//新增修改
|
||||
dataFormSubmit: debounce(async function (formName) {
|
||||
|
||||
// return false
|
||||
if (this.addForm.title == "") {
|
||||
if (this.addForm.title == "" || !this.addForm.title) {
|
||||
this.$message.error("请输入标签名称");
|
||||
return false;
|
||||
}
|
||||
@@ -309,7 +262,8 @@ export default {
|
||||
await this.getDataList();
|
||||
this.$nextTick(async () => {
|
||||
this.$refs.commonTree.setCurrentNodeShow(data.result.id);
|
||||
|
||||
this.addForm = data.result;
|
||||
this.currentNode = { data: { ...data.result } }
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
@@ -326,39 +280,58 @@ export default {
|
||||
}
|
||||
});
|
||||
}, 200),
|
||||
//新增修改
|
||||
dataFormDelete: debounce(async function (formName) {
|
||||
// return false
|
||||
var selectShopArr = this.$refs.commonShop.selectShopArr;
|
||||
console.log(selectShopArr, "1111");
|
||||
//删除关联图书
|
||||
dataFormDelete: debounce(async function (row, deleteType) {
|
||||
this.$confirm(`确定要删除${deleteType != 'all' ? '该' : '所有'}关联商品嘛?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(async () => {
|
||||
var lableIds = row[0].bookLabelId
|
||||
var productIds = row.map(e => e.productId)
|
||||
|
||||
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,
|
||||
});
|
||||
// // 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}?lableId=${this.addForm.id}&productId=${productIds.toString(",")}`
|
||||
),
|
||||
method: "post",
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message.success("删除成功");
|
||||
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}this.$nextTick(() => {
|
||||
// this.$refs.commonShop.selectShopArr = [];
|
||||
if (this.$refs.commonShop) {
|
||||
this.$refs.commonShop.getAssociatedGoodsList({
|
||||
bookLabelId: this.addForm.id,
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
|
||||
}, 200),
|
||||
setCheckedKeys() {
|
||||
this.$refs.tree.setCheckedKeys([0]);
|
||||
},
|
||||
changeCurrentNode(val) {
|
||||
this.changeCurrentNode = val;
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handlereset() {
|
||||
this.currentNode = null;
|
||||
this.isFresh = false;
|
||||
@@ -368,8 +341,8 @@ export default {
|
||||
this.isEdit = false;
|
||||
this.addForm = {};
|
||||
// console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
|
||||
console.log(node, data, "当前选中节点");
|
||||
this.currentNode = node;
|
||||
// console.log(node, data, "当前选中节点");
|
||||
this.currentNode = node ? node : {};
|
||||
this.isFresh = false;
|
||||
this.isFresh = true;
|
||||
|
||||
@@ -415,7 +388,7 @@ export default {
|
||||
// return;
|
||||
// }
|
||||
},
|
||||
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.title.indexOf(value) !== -1;
|
||||
@@ -719,19 +692,23 @@ export default {
|
||||
box-sizing: border-box;
|
||||
// background: #fafafa;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -751,48 +728,57 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border_box {
|
||||
width: 100%;
|
||||
float: right;
|
||||
background: #fffefe;
|
||||
border: 1px solid #bababa;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.mod-config {
|
||||
width: 100%;
|
||||
height: 82vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
.el-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
.el-button {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #eaebed;
|
||||
color: #4796ec;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
height: 350px;
|
||||
overflow-y: auto !important;
|
||||
|
||||
.el-tree-node__content span {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -801,6 +787,7 @@ export default {
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
// .el-card {
|
||||
// background: none !important;
|
||||
// }
|
||||
@@ -808,15 +795,18 @@ p {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.submitButtonBox {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// .el-tree-node__content .el-button {
|
||||
// // width: 120px !important;
|
||||
|
||||
@@ -833,17 +823,22 @@ p {
|
||||
// }
|
||||
|
||||
.addFormBox {
|
||||
overflow: hidden;
|
||||
|
||||
.form_item {
|
||||
width: 33%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-container {
|
||||
height: calc(100% - 100px);
|
||||
|
||||
.filter-tree {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info_bg {
|
||||
background: #e0dede;
|
||||
height: 28px;
|
||||
|
||||
@@ -198,7 +198,7 @@ export default {
|
||||
data: this.$http.adornData(data),
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message.success(data.msg);
|
||||
// this.$message.success(data.msg);
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
@@ -233,7 +233,7 @@ export default {
|
||||
method: "post",
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message.success(data.msg);
|
||||
// this.$message.success(data.msg);
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
@@ -513,7 +513,8 @@ export default {
|
||||
}
|
||||
|
||||
/deep/.tree_box {
|
||||
width: 48% !important;
|
||||
width: 32% !important;
|
||||
min-width: 400px;
|
||||
|
||||
border: none !important;
|
||||
border-radius: 10px;
|
||||
|
||||
511
src/views/modules/shop/commonBookTags/shopproduct copy.vue
Normal file
511
src/views/modules/shop/commonBookTags/shopproduct copy.vue
Normal file
@@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%; height: 100%; margin-top: -50px"
|
||||
v-loading="dataListLoading"
|
||||
>
|
||||
<!-- <el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
style="float: right"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="dataForm.key"
|
||||
placeholder="商品名称"
|
||||
clearable
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="
|
||||
pageIndex = 1;
|
||||
getDataList(bookMarketId);
|
||||
"
|
||||
size="small"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
<div class="search_form">
|
||||
<div class="addFormBox shopFormBox">
|
||||
<el-form ref="addForm" label-width="80px" :model="dataForm">
|
||||
<el-form-item label="商品名称" prop="title" class="form_item">
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入商品名称"
|
||||
style="width: 100%"
|
||||
v-model="dataForm.productName"
|
||||
clearable
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品类型" prop="goodsType" class="form_item">
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="dataForm.goodsType"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
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"
|
||||
@click="isEdit ? selectShop(v) : ''"
|
||||
:class="
|
||||
selectShopArr.includes(v.id)
|
||||
? 'isSelect shop_box_item'
|
||||
: 'shop_box_item'
|
||||
"
|
||||
>
|
||||
<el-checkbox
|
||||
v-if="isEdit"
|
||||
size="medium"
|
||||
@change="(e) => selectShop(v)"
|
||||
:value="selectShopArr.includes(v.id)"
|
||||
class="shop_box_item_check"
|
||||
></el-checkbox>
|
||||
<img
|
||||
class="shop_box_item_img img-loaded"
|
||||
style="object-fit: cover"
|
||||
data-lazy-collect="1"
|
||||
:src="v.product.productImages"
|
||||
/>
|
||||
|
||||
<div class="shop_box_item_content">
|
||||
<li class="shop_box_item_title">
|
||||
<span></span><span>{{ v.product.productName }}</span>
|
||||
<!-- <el-tooltip placement="top" sty>
|
||||
<div slot="content">{{ v.product.productName }}</div>
|
||||
<div class="title-text">{{ v.product.productName }}</div>
|
||||
</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>
|
||||
</div> -->
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
|
||||
<choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import chooseBook from './chooseBook.vue'
|
||||
// import AddOrUpdate from './shopproduct-add-or-update'
|
||||
export default {
|
||||
props: ["urlList", "isEdit", "currentId", "currentType"],
|
||||
data() {
|
||||
return {
|
||||
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
|
||||
goodsTypeList: [], // goodsTypeList
|
||||
multipleSelection: [], // 当前页选中的数据
|
||||
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
|
||||
|
||||
bookMarketId: null,
|
||||
dataList: [],
|
||||
associatedGoodsList: [],
|
||||
publishStatus: false,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false,
|
||||
chooseBookVisible: false,
|
||||
bookIds: [],
|
||||
selectShopArr: [],
|
||||
dataForm: {
|
||||
productName: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 只要通过this.的方式拿到的值都可以使用watch进行监听
|
||||
isEdit: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
console.log("🚀 ~ handler ~ val:", val);
|
||||
this.selectShopArr = [];
|
||||
this.$forceUpdate();
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
// AddOrUpdate,
|
||||
// chooseBook
|
||||
},
|
||||
async activated() {
|
||||
|
||||
this.multipleSelection = [];
|
||||
await this.getAssociatedGoodsList({ ...this.dataForm });
|
||||
// await this.getGoodsTypeList();
|
||||
},
|
||||
methods: {
|
||||
// 获取商品类型
|
||||
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;
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log("🚀 ~ handleSelectionChange ~ val:", val);
|
||||
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
|
||||
this.multipleSelection = val;
|
||||
// this.changePageCoreRecordData();
|
||||
},
|
||||
|
||||
closeBookf() {
|
||||
this.chooseBookVisible = false;
|
||||
},
|
||||
showchooseBookf(e) {
|
||||
// 显示图书列表
|
||||
this.chooseBookVisible = true;
|
||||
// console.log(this.bookIds,'this.bookIds')
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.chooseBook.getBookList()
|
||||
// this.bookIds = e.bookIds
|
||||
// })
|
||||
},
|
||||
|
||||
// 获取数据列表
|
||||
async getDataList(bookMarketId) {
|
||||
this.bookMarketId = bookMarketId;
|
||||
this.dataListLoading = true;
|
||||
this.getDataList = [];
|
||||
this.clear();
|
||||
// if (bookMarketId) {
|
||||
// await this.getCorrelationArr(bookMarketId);
|
||||
// }
|
||||
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl("/book/shopproduct/list"),
|
||||
method: "get",
|
||||
params: this.$http.adornParams({
|
||||
page: this.pageIndex,
|
||||
limit: this.pageSize,
|
||||
key: this.dataForm.key,
|
||||
}),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.page.list;
|
||||
this.totalPage = data.page.totalCount;
|
||||
} else {
|
||||
this.dataList = [];
|
||||
this.totalPage = 0;
|
||||
}
|
||||
// setTimeout(async () => {
|
||||
// await this.setSelectRow();
|
||||
// }, 200);
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
clear() {
|
||||
// this.$refs.table.clearSelection();
|
||||
// this.multipleSelection = [];
|
||||
},
|
||||
// 获取关联数据列表
|
||||
async getAssociatedGoodsList() {
|
||||
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
|
||||
// :currentId="addForm.id"
|
||||
// currentType="bookLabelId"
|
||||
var form = { ...this.dataForm };
|
||||
|
||||
if (this.currentType == "bookLabelId") {
|
||||
form.bookLabelId = this.currentId;
|
||||
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form)
|
||||
}
|
||||
else if (this.currentType == "bookMarketId") {
|
||||
form.bookMarketId = this.currentId;
|
||||
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form)
|
||||
}
|
||||
|
||||
await this.getGoodsTypeList();
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`${this.urlList.getAssociatedGoodsList}`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
current: 1,
|
||||
limit: 99999999,
|
||||
// productName: "",
|
||||
productId: "",
|
||||
...form,
|
||||
// bookLabelId: bookLabelId,
|
||||
}),
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.associatedGoodsList = [...data.result.records];
|
||||
|
||||
this.dataListLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
// this.changePageCoreRecordData();
|
||||
this.pageSize = val;
|
||||
this.pageIndex = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
// 改变页的时候调用一次
|
||||
// this.changePageCoreRecordData();
|
||||
this.pageIndex = val;
|
||||
this.getDataList();
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle(val) {
|
||||
this.dataListSelections = val;
|
||||
},
|
||||
// 新增 / 修改
|
||||
addOrUpdateHandle(id) {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id);
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id) {
|
||||
var ids = id
|
||||
? [id]
|
||||
: this.dataListSelections.map((item) => {
|
||||
return item.productId;
|
||||
});
|
||||
this.$confirm(
|
||||
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/shopproduct/delete"),
|
||||
method: "post",
|
||||
data: this.$http.adornData(ids, false),
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
SwitchChange(event) {
|
||||
/*点击时他会自动把你绑定的值变更,直接去请求数据就可以了*/
|
||||
var parms = {
|
||||
publishStatus: event.publishStatus,
|
||||
productId: event.productId,
|
||||
};
|
||||
// console.log(parms)
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/shopproduct/update"),
|
||||
method: "post",
|
||||
data: parms,
|
||||
})
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "成功",
|
||||
type: "success",
|
||||
});
|
||||
this.loading = false;
|
||||
this.getDataList();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
});
|
||||
console.log(event);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.shop_box {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: auto;
|
||||
// margin-left: -10px;
|
||||
padding-bottom: 20px;
|
||||
// margin-top: 20px;
|
||||
.shop_box_item {
|
||||
width: 23.7%;
|
||||
min-width: 200px;
|
||||
height: 95px;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
|
||||
float: left;
|
||||
// margin: 20px;
|
||||
// background: #f5f5f5;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
.shop_box_item_check {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
}
|
||||
.shop_box_item_img {
|
||||
margin: 0 auto;
|
||||
// display: flex;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
object-fit: contain;
|
||||
background: #bababa;
|
||||
}
|
||||
.shop_box_item_content {
|
||||
width: calc(100% - 70px);
|
||||
float: right;
|
||||
}
|
||||
.shop_box_item_title {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
.title-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isSelect {
|
||||
border: 1px solid rgb(19, 206, 102);
|
||||
box-shadow: 0 2px 12px 0 rgba(19, 206, 102);
|
||||
}
|
||||
.shop_box_item_info {
|
||||
font-weight: 500 !important;
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
.shopFormBox {
|
||||
float: right;
|
||||
min-width: 520px;
|
||||
.form_item {
|
||||
width: 240px !important;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.addFormBox {
|
||||
.form_item {
|
||||
width: 33%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.search_form {
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/deep/ .el-select-dropdown__list {
|
||||
padding: 6px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%; height: 100%; margin-top: -50px"
|
||||
v-loading="dataListLoading"
|
||||
|
||||
>
|
||||
<!-- <el-form
|
||||
:inline="true"
|
||||
@@ -46,10 +46,11 @@
|
||||
size="small"
|
||||
v-model="dataForm.goodsType"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
style="width: 100%;"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
style="padding:0 10px;box-sizing: border-box;"
|
||||
v-for="item in goodsTypeList"
|
||||
:key="item.dictType"
|
||||
:label="item.dictValue"
|
||||
@@ -77,7 +78,106 @@
|
||||
</div>
|
||||
|
||||
<div class="shop_box">
|
||||
<li
|
||||
<!-- @selection-change="handleSelectionChange" -->
|
||||
<el-table
|
||||
ref="table"
|
||||
height="100%"
|
||||
:data="associatedGoodsList"
|
||||
:row-key="getRowKeys"
|
||||
border
|
||||
size="mini"
|
||||
v-loading="dataListLoading"
|
||||
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- <el-table-column
|
||||
:reserve-selection="true"
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
>
|
||||
</el-table-column> -->
|
||||
<!-- -->
|
||||
<el-table-column
|
||||
label="商品ID"
|
||||
width="70"
|
||||
align="center"
|
||||
prop="productId"
|
||||
>
|
||||
<!-- <template slot-scope="scope">
|
||||
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="product.productName"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="商品名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="product.price"
|
||||
width="120"
|
||||
header-align="center"
|
||||
align="center"
|
||||
sortable
|
||||
label="价格"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="product.activityPrice"
|
||||
width="120"
|
||||
header-align="center"
|
||||
align="center"
|
||||
sortable
|
||||
label="活动价"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="product.productStock"
|
||||
width="120"
|
||||
header-align="center"
|
||||
align="center"
|
||||
sortable
|
||||
label="库存"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="商品图"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img
|
||||
v-if="scope.row.product.productImages != ''"
|
||||
:src="scope.row.product.productImages"
|
||||
width="25"
|
||||
height="35"
|
||||
class="tableImg"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="操作"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
style="color: red;"
|
||||
@click="shopDelete(scope.row)"
|
||||
size="mini"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <li
|
||||
v-for="(v, i) in associatedGoodsList"
|
||||
@click="isEdit ? selectShop(v) : ''"
|
||||
:class="
|
||||
@@ -103,10 +203,7 @@
|
||||
<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> -->
|
||||
|
||||
</li>
|
||||
<li class="shop_box_item_title shop_box_item_info">
|
||||
<span>价格:</span>
|
||||
@@ -129,11 +226,8 @@
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<!-- <div class="price-con">
|
||||
<span class="coupon-price-title">¥</span
|
||||
><span class="coupon-price-afterCoupon">356</span>
|
||||
</div> -->
|
||||
</li>
|
||||
|
||||
</li> -->
|
||||
</div>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
@@ -195,6 +289,9 @@ export default {
|
||||
// await this.getGoodsTypeList();
|
||||
},
|
||||
methods: {
|
||||
shopDelete(row){
|
||||
this.$emit('delete',[row])
|
||||
},
|
||||
// 获取商品类型
|
||||
getGoodsTypeList() {
|
||||
this.$http({
|
||||
@@ -206,11 +303,14 @@ export default {
|
||||
});
|
||||
},
|
||||
handleCheckAllChange(status) {
|
||||
if (status) {
|
||||
this.selectShopArr = this.associatedGoodsList.map((e) => e.id);
|
||||
} else {
|
||||
this.selectShopArr = [];
|
||||
}
|
||||
// if (status) {
|
||||
// this.selectShopArr = this.associatedGoodsList.map((e) => e.id);
|
||||
// } else {
|
||||
// this.selectShopArr = [];
|
||||
// }
|
||||
this.$emit('delete',this.associatedGoodsList,'all')
|
||||
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
selectShop(v) {
|
||||
@@ -422,7 +522,7 @@ li {
|
||||
}
|
||||
.shop_box {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
height: calc(100% - 50px);
|
||||
overflow: auto;
|
||||
// margin-left: -10px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
@@ -1,166 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
title="新增关联商品"
|
||||
v-if="drawer"
|
||||
:wrapperClosable="false"
|
||||
:visible.sync="drawer"
|
||||
destroy-on-close
|
||||
direction="rtl"
|
||||
size="70%"
|
||||
>
|
||||
<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 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-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 label="" class="form_item" label-width="20px" style="width: 160px !important">
|
||||
<el-button type="primary" plain @click="
|
||||
pageIndex = 1;
|
||||
getDataList(bookMarketId);
|
||||
" size="small">查询</el-button>
|
||||
<el-button @click="handleReset()" size="small" plain>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
height="80%"
|
||||
:data="dataList"
|
||||
:row-key="getRowKeys"
|
||||
border
|
||||
size="mini"
|
||||
v-loading="dataListLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
:reserve-selection="true"
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50"
|
||||
>
|
||||
<el-table 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"
|
||||
>
|
||||
<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 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 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 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 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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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 @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
|
||||
>
|
||||
<el-button type="primary" @click="submit" :loading="loading" size="small">{{ loading ? "提交中 ..." : "确 定"
|
||||
}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
@@ -170,8 +71,8 @@
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
<script>
|
||||
// import chooseBook from './chooseBook.vue'
|
||||
// import AddOrUpdate from './shopproduct-add-or-update'
|
||||
export default {
|
||||
@@ -185,7 +86,7 @@ export default {
|
||||
multipleSelection: [], // 当前页选中的数据
|
||||
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
|
||||
dataForm: {
|
||||
key: "",
|
||||
productName: "",
|
||||
},
|
||||
bookMarketId: null,
|
||||
dataList: [],
|
||||
@@ -346,8 +247,8 @@ export default {
|
||||
var ids = id
|
||||
? [id]
|
||||
: this.dataListSelections.map((item) => {
|
||||
return item.productId;
|
||||
});
|
||||
return item.productId;
|
||||
});
|
||||
this.$confirm(
|
||||
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
|
||||
"提示",
|
||||
@@ -413,6 +314,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.addFormBox {
|
||||
width: 100%;
|
||||
|
||||
@@ -422,8 +324,8 @@ export default {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.el-drawer__header {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
@@ -1,21 +1,13 @@
|
||||
<template>
|
||||
<div class="tree_box">
|
||||
<div style="overflow: hidden" v-if="source == 'tags'">
|
||||
<p
|
||||
class="info_bg"
|
||||
style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
<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>
|
||||
currentNode ? currentNode.data.title : ""
|
||||
}}</span>
|
||||
</p>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="addOrUpdateHandle()"
|
||||
style="float: right"
|
||||
size="mini"
|
||||
>新增顶级标签</el-button
|
||||
>
|
||||
<el-button type="primary" @click="addOrUpdateHandle()" style="float: right" size="mini">新增顶级标签</el-button>
|
||||
</div>
|
||||
<!-- <p v-if="source == 'shop'" class="select_box" style="">
|
||||
<el-checkbox
|
||||
@@ -34,47 +26,24 @@
|
||||
<!-- show-checkbox -->
|
||||
<!-- :allow-drop="allowDrop" -->
|
||||
<div class="custom-tree-container">
|
||||
<el-tree
|
||||
:highlight-current="true"
|
||||
class="filter-tree"
|
||||
node-key="id"
|
||||
:data="treeDataList"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
:draggable="true"
|
||||
@node-click="handleNodeClick"
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
<el-tree :highlight-current="true" class="filter-tree" node-key="id" :data="treeDataList" :props="defaultProps"
|
||||
default-expand-all :filter-node-method="filterNode" ref="tree" :draggable="true" @node-click="handleNodeClick"
|
||||
:expand-on-click-node="false">
|
||||
<!-- @click="handleClickNodes(node, data)" -->
|
||||
<span
|
||||
class="custom-tree-node"
|
||||
slot-scope="{ node, data }"
|
||||
@click="
|
||||
source == 'tags'
|
||||
? handleClickNodes(node, data, 'edit')
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" @click="
|
||||
source == 'tags'
|
||||
? handleClickNodes(node, data, 'edit')
|
||||
: ''
|
||||
" :class="`${currentNode&¤tNode.data.id==data.id?'isSelect':''}`" style=" padding-left: 5px;
|
||||
box-sizing: border-box;">
|
||||
<!-- @change="(e) => selectShop(data, e)" -->
|
||||
<span style="display: flex; align-items: center"
|
||||
><el-checkbox
|
||||
@change=" selectShop(data)"
|
||||
:value="selectArr.includes(data.id)"
|
||||
v-if="data.isLast == 1 && source == 'shop'"
|
||||
style="margin-right: 10px"
|
||||
></el-checkbox
|
||||
>{{ node.label }}</span
|
||||
>
|
||||
<span style="display: flex; align-items: center" ><el-checkbox @change=" selectShop(data)"
|
||||
:value="selectArr.includes(data.id)" v-if="data.isLast == 1 && source == 'shop'"
|
||||
style="margin-right: 10px"></el-checkbox>{{ node.label }}</span>
|
||||
<span v-if="source == 'tags'">
|
||||
<!-- v-if="node.level <= 1" -->
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click.stop="handleClickNodes(node, data, 'addChildren')"
|
||||
v-if="data.isLast == 1"
|
||||
>
|
||||
<el-button type="text" size="mini" @click.stop="handleClickNodes(node, data, 'addChildren')"
|
||||
v-if="data.isLast != 1">
|
||||
添加下级
|
||||
</el-button>
|
||||
<!-- <el-button
|
||||
@@ -86,7 +55,7 @@
|
||||
</el-button> -->
|
||||
|
||||
<!-- v-if="node.childNodes.length == 0" -->
|
||||
<el-button type="text" size="mini" @click.stop="remove(data)">
|
||||
<el-button type="text" size="mini" @click.stop="remove(data)" style="color: rgb(235 92 92);">
|
||||
删除
|
||||
</el-button>
|
||||
</span>
|
||||
@@ -95,12 +64,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
<script>
|
||||
// import dialogComponent from './seckillprodrelation'
|
||||
import debounce from "lodash/debounce"; //导入lodash中的debounce
|
||||
export default {
|
||||
props: ["dataList", "urlList", "source", "productId",'sourceType'],
|
||||
props: ["dataList", "urlList", "source", "productId", 'sourceType'],
|
||||
data() {
|
||||
return {
|
||||
currentNode: null,
|
||||
@@ -118,6 +87,14 @@ export default {
|
||||
dataList(val) {
|
||||
this.treeDataList = val;
|
||||
},
|
||||
currentNode: {
|
||||
handler(newVal, oldVal) {
|
||||
// this.$emit('changeCurrentNode',this.currentNode)
|
||||
},
|
||||
|
||||
deep: true
|
||||
},
|
||||
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
@@ -125,7 +102,7 @@ export default {
|
||||
activated() {
|
||||
console.log("🚀 ~ activated ~ this.currentNode:", this.currentNode, "9999");
|
||||
if (this.source == "tags") {
|
||||
if (this.currentNode) {
|
||||
if (this.currentNode && this.currentNode.data.id) {
|
||||
this.setCurrentNodeShow(this.currentNode.data.id);
|
||||
this.handleClickNodes(this.currentNode, this.currentNode.data, "edit");
|
||||
}
|
||||
@@ -202,7 +179,7 @@ export default {
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
selectShop : debounce(async function (v, status) {
|
||||
selectShop: debounce(async function (v, status) {
|
||||
console.log("🚀 ~ selectShop ~ status:", status);
|
||||
|
||||
// if (this.selectArr.includes(v.id)) {
|
||||
@@ -217,12 +194,12 @@ export default {
|
||||
console.log("🚀 ~ selectShop ~ this.selectShopArr999:", this.selectArr);
|
||||
|
||||
if (this.selectArr.includes(v.id)) {
|
||||
this.$emit("delete", v.id,this.sourceType);
|
||||
this.$emit("delete", v.id, this.sourceType);
|
||||
} else {
|
||||
this.$emit("submit", v.id,this.sourceType);
|
||||
this.$emit("submit", v.id, this.sourceType);
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},200),
|
||||
}, 200),
|
||||
// handleCheckAllChange(status) {
|
||||
// if (status) {
|
||||
// this.selectArr = this.treeDataList.map((e) => e.id);
|
||||
@@ -232,12 +209,25 @@ export default {
|
||||
// this.$forceUpdate();
|
||||
// },
|
||||
async setCurrentNodeShow(id) {
|
||||
var newNodeData = await this.$refs.tree.getNode(id);
|
||||
this.$emit("handleClickNodes", newNodeData, newNodeData.data, "edit");
|
||||
this.currentNode = newNodeData;
|
||||
console.log("🚀 ~ setCurrentNodeShow ~ id222:", id, this.currentNode)
|
||||
|
||||
var newNodeData = {}
|
||||
if (id) {
|
||||
newNodeData = await this.$refs.tree.getNode(id);
|
||||
} else {
|
||||
newNodeData = {
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
this.currentNode = newNodeData;
|
||||
this.$forceUpdate();
|
||||
this.$refs.tree.setCurrentKey(id);
|
||||
this.$refs.tree.setCheckedKeys([id]);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(id);
|
||||
this.$refs.tree.setCheckedKeys([id]);
|
||||
})
|
||||
await this.$emit("handleClickNodes", newNodeData, newNodeData.data, "edit");
|
||||
|
||||
|
||||
},
|
||||
allowDrop(draggingNode, dropNode, type) {
|
||||
console.log(draggingNode.level, dropNode.level);
|
||||
@@ -273,7 +263,7 @@ export default {
|
||||
return status;
|
||||
},
|
||||
//新增修改
|
||||
dataFormSubmit: debounce(async function (formName) {
|
||||
dataFormSubmit: debounce(async function (formName) {
|
||||
// return false
|
||||
if (this.addForm.title == "") {
|
||||
this.$message.error("请输入标签名称");
|
||||
@@ -324,7 +314,7 @@ export default {
|
||||
});
|
||||
}
|
||||
});
|
||||
},200),
|
||||
}, 200),
|
||||
setCheckedKeys() {
|
||||
this.$refs.tree.setCheckedKeys([0]);
|
||||
},
|
||||
@@ -334,13 +324,14 @@ export default {
|
||||
this.isFresh = true;
|
||||
},
|
||||
async handleClickNodes(node, data, type) {
|
||||
console.log("🚀 ~ handleClickNodes11111 ~ node, data, type:", node, data, type)
|
||||
this.addForm = {};
|
||||
// console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
|
||||
console.log(node, data, "当前选中节点");
|
||||
this.currentNode = node;
|
||||
this.isFresh = false;
|
||||
this.isFresh = true;
|
||||
|
||||
this.$forceUpdate()
|
||||
var form = {};
|
||||
|
||||
if (this.source == "shop") {
|
||||
@@ -380,6 +371,7 @@ export default {
|
||||
}
|
||||
},
|
||||
addOrUpdateHandle() {
|
||||
|
||||
var addform = {
|
||||
children: [],
|
||||
delFlag: 0,
|
||||
@@ -395,7 +387,7 @@ export default {
|
||||
// }
|
||||
},
|
||||
async remove(data) {
|
||||
var that=this;
|
||||
var that = this;
|
||||
var ids = { productId: data.productId };
|
||||
this.$confirm(`是否删除标签【${data.title}】?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
@@ -403,17 +395,23 @@ export default {
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
|
||||
|
||||
that.$http({
|
||||
url: that.$http.adornUrl(`${that.urlList.delete}?id=` + data.id),
|
||||
method: "post",
|
||||
data: {},
|
||||
}).then(async ({ data }) => {
|
||||
|
||||
that.$message({
|
||||
if (data && data.code === 0) {
|
||||
that.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
return false
|
||||
|
||||
}
|
||||
|
||||
that.currentNode = null;
|
||||
that.isFresh = false;
|
||||
that.addForm = {};
|
||||
@@ -424,7 +422,7 @@ export default {
|
||||
// this.expandedkey = [node.parent.data.catId]
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => { });
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
@@ -723,7 +721,32 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
<style lang="less" scoped>
|
||||
/deep/ .filter-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
// 设置颜色
|
||||
// background-color: #baf !important;
|
||||
}
|
||||
|
||||
/deep/ .filter-tree .el-tree-node:focus>.el-tree-node__content {
|
||||
background-color: transparent !important;
|
||||
// color: #17b3a3 !important;
|
||||
}
|
||||
|
||||
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: transparent !important;
|
||||
// color: #17b3a3 !important;
|
||||
}
|
||||
|
||||
|
||||
/deep/.filter-tree .el-tree-node__content .el-button {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
// /deep/.filter-tree .is-focusable {
|
||||
|
||||
// background-color: #17b3a3 !important;
|
||||
// }
|
||||
|
||||
.tree_box {
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
@@ -735,15 +758,18 @@ export default {
|
||||
position: relative;
|
||||
// background: #fafafa;
|
||||
}
|
||||
|
||||
.border_box {
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
// color: #17b3a3;
|
||||
.line {
|
||||
width: 4px;
|
||||
@@ -753,6 +779,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border_box {
|
||||
width: 100%;
|
||||
float: right;
|
||||
@@ -762,43 +789,52 @@ export default {
|
||||
padding: 15px 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tree_content_box {
|
||||
height: calc(100% - 110px) !important;
|
||||
}
|
||||
|
||||
.mod-config {
|
||||
width: 100%;
|
||||
height: 82vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
.el-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
.el-button {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #eaebed;
|
||||
color: #4796ec;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
height: 350px;
|
||||
overflow-y: auto !important;
|
||||
|
||||
.el-tree-node__content span {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.select_box {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -807,6 +843,7 @@ export default {
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
// .el-card {
|
||||
// background: none !important;
|
||||
// }
|
||||
@@ -814,10 +851,12 @@ p {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// .el-tree-node__content .el-button {
|
||||
// // width: 120px !important;
|
||||
|
||||
@@ -838,6 +877,7 @@ p {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-container {
|
||||
height: calc(100% - 60px);
|
||||
|
||||
@@ -845,6 +885,7 @@ p {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info_bg {
|
||||
background: #e0dede;
|
||||
height: 28px;
|
||||
@@ -858,5 +899,30 @@ p {
|
||||
width: calc(100% - 120px);
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
/* 去掉点击时的蓝色背景 */
|
||||
.el-tree .el-tree-node__content:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* 如果需要去掉所有hover效果 */
|
||||
.el-tree .el-tree-node__content:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
/* 针对被选中节点去掉背景色 */
|
||||
.el-tree .el-tree-node__content.is-checked {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* 如果需要去掉所有hover和active效果 */
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node__content:active {
|
||||
background-color: unset;
|
||||
}
|
||||
.isSelect{
|
||||
|
||||
/* 自定义角度渐变 */
|
||||
background-image: linear-gradient(-45deg, #fff, #b0f3ec);
|
||||
}
|
||||
</style>
|
||||
@@ -88,7 +88,7 @@
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
width="180"
|
||||
label="操作"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
|
||||
Reference in New Issue
Block a user