提交 98973db5 authored 作者: zgy's avatar zgy

标签管理优化

上级 c8981712
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
#jdbc.username=root #jdbc.username=root
#jdbc.password=root #jdbc.password=root
#jdbc.url=jdbc:mysql://47.106.242.175:3306/platform?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8 jdbc.url=jdbc:mysql://47.106.242.175:3306/chinafrica?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8
#jdbc.username=root jdbc.username=root
#jdbc.password=diaoyun666 jdbc.password=diaoyun666
jdbc.url: jdbc:mysql://159.138.48.71:3306/chinafrica?useUnicode=true&characterEncoding=UTF-8&rewriteBatchedStatements=true&autoReconnect=true&failOverReadOnly=false&zeroDateTimeBehavior=convertToNull&useSSL=false #jdbc.url: jdbc:mysql://159.138.48.71:3306/chinafrica?useUnicode=true&characterEncoding=UTF-8&rewriteBatchedStatements=true&autoReconnect=true&failOverReadOnly=false&zeroDateTimeBehavior=convertToNull&useSSL=false
jdbc.username: root #jdbc.username: root
jdbc.password: Diaoyunnuli.8 #jdbc.password: Diaoyunnuli.8
jdbc.initialSize=5 jdbc.initialSize=5
jdbc.maxActive=30 jdbc.maxActive=30
......
...@@ -147,6 +147,118 @@ ...@@ -147,6 +147,118 @@
.default-price > h4 { .default-price > h4 {
margin-bottom: 5px; margin-bottom: 5px;
} }
/* commnstyle */
.pp-text-center{
text-align: center;
margin:10px;
}
.pp-flex-sb{
display: flex;
justify-content: space-between;
align-items: center;
}
.pp-flex-start{
display: flex;
justify-content: start;
align-items: center;
}
/* 标签弹窗*/
.pp-popup-wrapper{
width:100vw;
height:100vh;
position:fixed;
top:0;
left:0;
z-index: 100;
}
.pp-popup-mask{
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
z-index: -1;
background: #000;
opacity: 0.5;
}
.pp-popup-container{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
height: 400px;
min-width:600px;
background: #fff;
border-radius: 6px;
overflow-y: scroll;
padding:10px;
}
.pp-tags-section{
margin-bottom:22px;
}
.pp-popup-close{
position: absolute;
bottom: 10px;
left:50%;
transform: translateY(-50%);
}
.pp-tags-subtag{
margin-left:10px;
margin-top:10px;
}
/*标签展示*/
.item-tag-container{
margin-bottom: 24px;
}
.item-tag-container>span{
width:80px;
text-align: right;
vertical-align: middle;
float: left;
font-size: 12px;
color: #495060;
line-height: 1;
padding: 10px 12px 10px 0;
box-sizing: border-box;
font-weight: bold;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.item-tag-container>div{
width:720px;
min-height:32px;
background: white;
border-radius: 2px;
border: 1px solid #dddee1;
}
.tag-preview{
position: relative;
}
.add-tag-btn{
position: absolute;
right: 0;
top:50%;
transform: translateY(-50%);
}
.pp-tag{
margin:5px;
display: inline-block;
min-width:50px;
height:30px;
background: #f9f9f9;
border-radius: 4px;
border:1px solid #eee;
line-height:30px;
text-align: center;
justify-content: space-between;
padding: 0 4px;
}
.pp-tag>i{
padding:0 12px;
cursor: pointer;
color: black;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -258,9 +370,49 @@ ...@@ -258,9 +370,49 @@
<Form-item label="搜索关键字" prop="itemTags" style="width: 800px"> <Form-item label="搜索关键字" prop="itemTags" style="width: 800px">
<i-input v-model="tbCfStationItem.itemTags" placeholder="搜索关键字"/> <i-input v-model="tbCfStationItem.itemTags" placeholder="搜索关键字"/>
</Form-item> </Form-item>
<Form-item label="商品标签" prop="itemLabel" style="width: 800px"> <div class="item-tag-container pp-flex-start">
<i-input v-model="tbCfStationItem.itemLabel" placeholder="商品标签"/> <span>标签</span>
</Form-item> <div class="tag-preview">
<transition-group tag="div" name="slide">
<div class="pp-tag" v-for="(element,index) in isSelectedArr" :key="index">
<span>{{element.labelName}}</span>
<i @click="deleteTag(element,index)">x</i>
</div>
</transition-group>
<div class="add-tag-btn" @click="showTagPopup()">
<i-button type="success" shape="circle" size="small">添加标签</i-button>
</div>
</div>
</div>
<div class="pp-popup-wrapper" v-if="tagshow">
<div class="pp-popup-mask"></div>
<div class="pp-popup-container">
<h3 class="pp-text-center">数据选择</h3>
<div class="pp-tags-section" v-for="(element,index) in tagLists" :key="index">
<i-button
size="large"
:type="element.isSelected?'success':'info'"
@click="selectTag(element,index)"
>{{element.labelName}}</i-button>
<transition-group tag="div" name="slide">
<i-button
class="pp-tags-subtag"
v-for="(subElement,subIndex) in subtaglist[index]" :key="subIndex"
size="small"
:type="subElement.isSelected?'success':''"
@click="selectSubTag(subElement,subIndex,index)"
>{{subElement.labelName}}</i-button>
</transition-group>
</div>
<div class="pp-popup-close" @click="hideTagPopup">
<i-button type="ghost">关闭</i-button>
</div>
</div>
</div>
<!-- <Form-item label="商品标签" prop="itemLabel" style="width: 800px">-->
<!-- <i-input v-model="tbCfStationItem.itemLabel" placeholder="商品标签"/>-->
<!-- <div>123</div>-->
<!-- </Form-item>-->
<Form-item label="原价" prop="itemPrice" style="width: 800px"> <Form-item label="原价" prop="itemPrice" style="width: 800px">
<i-input v-model="tbCfStationItem.itemPrice" placeholder="原价(可不填)"/> <i-input v-model="tbCfStationItem.itemPrice" placeholder="原价(可不填)"/>
</Form-item> </Form-item>
......
...@@ -116,6 +116,7 @@ let vm = new Vue({ ...@@ -116,6 +116,7 @@ let vm = new Vue({
created(){ created(){
$.get('../tbcflabel/queryParentLabels', res => { $.get('../tbcflabel/queryParentLabels', res => {
this.labelList = JSON.parse(res).list; this.labelList = JSON.parse(res).list;
console.log()
this.labelList.unshift({ this.labelList.unshift({
id: "0", id: "0",
labelName: "标签组", labelName: "标签组",
......
...@@ -64,9 +64,18 @@ let vm = new Vue({ ...@@ -64,9 +64,18 @@ let vm = new Vue({
setDefaultValue: false, setDefaultValue: false,
tmdSkudata: null, tmdSkudata: null,
isDisabled: false, isDisabled: false,
disabled: false disabled: false,
itemLabel: null,
tagLists: [],//标签列表
subtaglist: [],//子便签
tagshow: false,
isSelectedArr: [] //选中标签的数组
}, },
methods: { methods: {
//获取二级分类 //获取二级分类
changeGoodstype() { changeGoodstype() {
let url = "../tbcfstationitem/queryByItemType?typeId=" + this.tbCfStationItem.itemCategory; let url = "../tbcfstationitem/queryByItemType?typeId=" + this.tbCfStationItem.itemCategory;
...@@ -129,6 +138,8 @@ let vm = new Vue({ ...@@ -129,6 +138,8 @@ let vm = new Vue({
this.prevItem.forEach(item => { this.prevItem.forEach(item => {
resArr.push(item) resArr.push(item)
}) })
let label = null;
vm.tbCfStationItem.itemLabel = this.isSelectedArr.map(item=>item.id).join(',');
vm.tbCfStationItem.prevItem = resArr vm.tbCfStationItem.prevItem = resArr
vm.tbCfStationItem.putaway = this.putaway vm.tbCfStationItem.putaway = this.putaway
this.$set(vm.tbCfStationItem, 'tree', this.attrItem) this.$set(vm.tbCfStationItem, 'tree', this.attrItem)
...@@ -250,7 +261,7 @@ let vm = new Vue({ ...@@ -250,7 +261,7 @@ let vm = new Vue({
}, },
importExcel: function () { importExcel: function () {
this.modal='' this.modal = ''
}, },
exportExcel: function () { exportExcel: function () {
...@@ -515,9 +526,73 @@ let vm = new Vue({ ...@@ -515,9 +526,73 @@ let vm = new Vue({
save() { save() {
console.log(this.prevItem) //sku组合数组 console.log(this.prevItem) //sku组合数组
console.log(this.putaway) //是否立即上架 console.log(this.putaway) //是否立即上架
},
/* 获取标签数据*/
getTagsData() {
//一级
$.get('../tbcflabel/queryParentLabels', res => {
this.tagLists = JSON.parse(res).list;
this.tagLists.forEach((item, index) => {
this.$set(this.tagLists[index], 'isSelected', false)
this.subtaglist.push([])
})
})
},
/*子标签*/
async getSubTagsData(id) {
let result = null;
await $.get('../tbcflabel/queryParentLabels?parentId=' + id, res => {
result = res;
})
return result
},
async selectTag(e, i) {
this.tagLists[i].isSelected = !this.tagLists[i].isSelected;
if (this.subtaglist[i].length === 0) {
let subtagData = await this.getSubTagsData(e.id);
this.subtaglist[i] = JSON.parse(subtagData).list;
this.subtaglist[i].forEach((item, index) => {
this.$set(this.subtaglist[i][index], 'isSelected', true);
})
this.$forceUpdate();
} else {
//单纯选中
if (this.tagLists[i].isSelected) {
this.subtaglist[i].forEach((item, index) => {
item.isSelected = true;
})
}
}
},
// 选中子标签
selectSubTag(element, index, parentIndex) {
this.tagLists[parentIndex].isSelected = false;
this.subtaglist[parentIndex][index].isSelected = !this.subtaglist[parentIndex][index].isSelected;
let allSelected = this.subtaglist[parentIndex].every(item => item.isSelected === true);
allSelected ? this.tagLists[parentIndex].isSelected = true : null;
this.$forceUpdate();
},
showTagPopup() {
this.tagshow = true;
},
hideTagPopup() {
this.tagshow = false;
this.isSelectedArr = [];
this.subtaglist.forEach(item => {
item.forEach(_item => {
_item.isSelected ? this.isSelectedArr.push(_item) : null;
})
})
console.log(this.isSelectedArr)
},
deleteTag(e, i) {
this.$delete(this.isSelectedArr, i)
} }
}, },
created() { created() {
this.getTagsData();
//数据初始化 //数据初始化
if (!localStorage.getItem('option')) { if (!localStorage.getItem('option')) {
localStorage.setItem('option', JSON.stringify(this.attrItem[0].option)) localStorage.setItem('option', JSON.stringify(this.attrItem[0].option))
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论