|
|
|
<style>
|
|
|
|
.multilevel{position: relative; font-family: 'microsoft yahei'; font-size:14px; color: #585858}
|
|
|
|
.multilevel a,.multilevel span{cursor: pointer; text-decoration: none; color:#585858; display: inline-block;}
|
|
|
|
|
|
|
|
.picker-data{display: inline-block; height: 34px; border: 1px solid #ccd0d4; padding:6px 12px; position: relative; border-radius: 3px}
|
|
|
|
.placeholder,.data{display: inline-block; width: 200px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
|
|
|
|
.placeholder{font-size: 14px; color: #9d9d9d}
|
|
|
|
.data a{font-size: 12px}
|
|
|
|
.select-item a{padding: 0 2px}
|
|
|
|
.select-item a:hover{background: #CCCCCC}
|
|
|
|
.clearData{display: inline-block; width: 30px; margin-left: 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
|
|
|
|
.clearData em{color: #999999; font-size: 12px; }
|
|
|
|
|
|
|
|
.picker-dropdown{position: absolute; top: 34px; left: 1px;}
|
|
|
|
.select-wrap{box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; width: 350px}
|
|
|
|
|
|
|
|
.select-tab{background: #f0f0f0; border-bottom: 1px solid #ccc;}
|
|
|
|
.select-tab a{display: inline-block; font-size: 12px; padding: 8px 15px; border-left: 1px solid #ccc; border-bottom: 1px solid transparent; margin-bottom: -1px}
|
|
|
|
.select-tab a:first-child {border-left: none}
|
|
|
|
.select-tab a:last-child {border-right: 1px solid #ccc}
|
|
|
|
.select-tab a.active{background: #FFFFFF; border-bottom: 1px solid #FFFFFF;}
|
|
|
|
|
|
|
|
.select-content{background: #FFFFFF;}
|
|
|
|
.levelContent,.noSort{clear: both; list-style: none; margin: 0; padding: 10px;}
|
|
|
|
.levelContent li,.noSort li{display: inline-block; padding: 5px 10px;}
|
|
|
|
.levelContent li.active{background: #5bc0de; border-radius: 4px}
|
|
|
|
.levelContent li.active a{color:#FFFFFF}
|
|
|
|
.noSort li span{color: #ff0000}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="region-picker">
|
|
|
|
<!-- <label class="province">
|
|
|
|
<slot name="province"></slot>
|
|
|
|
<select class="province-select" v-model="provinceSelected" :required="required" :disabled="disabled">
|
|
|
|
<option value="" v-text="placeholder.province"></option>
|
|
|
|
<option v-for="item in provinces" :value="item" v-text="item[1]"></option>
|
|
|
|
</select>
|
|
|
|
</label> -->
|
|
|
|
<template v-for="row in rows">
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<div class="multilevel">
|
|
|
|
<span class="picker-data">
|
|
|
|
<span v-show="dataList.length==0" class="placeholder" @click="showDropdown">请选择类目</span>
|
|
|
|
|
|
|
|
<span v-show="dataList.length>0" class="data" @click="showDropdown">
|
|
|
|
<span class="select-item" v-for="data in dataList">
|
|
|
|
<i v-if="$index>0">-</i>
|
|
|
|
<a href="javascript:" @click="selectTab($index)">{{data.sortName}}</a>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span class="clearData" @click="destroy">
|
|
|
|
<em v-show="dataList.length>0">清空</em>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<div class="picker-dropdown" v-show="isShowDropdown">
|
|
|
|
<div class="select-wrap">
|
|
|
|
<div class="select-tab">
|
|
|
|
<a v-for="tab in tabList" class="level {{$index==activeTab?'active':''}}" @click="selectTab($index)">{{tab}}</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="select-content">
|
|
|
|
<ul v-for="(index,content) in levelContent" class="levelContent" v-show="activeTab==index">
|
|
|
|
<li v-for="(key,item) in content" class="{{item.id==dataList[index].id?'active':''}}">
|
|
|
|
<a href="javascript:" @click="selectItem(item)">{{item.sortName}}</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<ul v-show="activeTab>=levelContent.length" class="noSort">
|
|
|
|
<li><span>请选择上级类目！</span></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name:'yoho-sort',
|
|
|
|
props:{
|
|
|
|
rows:{
|
|
|
|
type:Array,
|
|
|
|
default:[]
|
|
|
|
dataList: {type: Array, default: []}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
tabList:["一级目录","二级目录","三级目录","四级目录"],
|
|
|
|
levelContent:[],
|
|
|
|
isShowDropdown:false,
|
|
|
|
activeTab:0,
|
|
|
|
maxTab:3
|
|
|
|
}
|
|
|
|
},
|
|
|
|
ready() {
|
|
|
|
this.fetchAllSortList();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
showDropdown(){
|
|
|
|
this.isShowDropdown = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
closeDropdown(){
|
|
|
|
this.activeTab = 0;
|
|
|
|
this.isShowDropdown = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
selectTab(index){
|
|
|
|
this.showDropdown();
|
|
|
|
this.activeTab = index;
|
|
|
|
},
|
|
|
|
|
|
|
|
selectItem(item){
|
|
|
|
this.dataList.$set(this.activeTab,item);
|
|
|
|
this.dataList.splice(this.activeTab+1, this.dataList.length-this.activeTab-1);
|
|
|
|
|
|
|
|
if(this.activeTab < this.maxTab){
|
|
|
|
this.activeTab ++;
|
|
|
|
this.fetchSubSortList(item.id);
|
|
|
|
}else{
|
|
|
|
this.closeDropdown();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
destroy(){
|
|
|
|
this.dataList.splice(0,this.dataList.length);
|
|
|
|
this.activeTab = 0;
|
|
|
|
this.levelContent.splice(1, this.levelContent.length-1);
|
|
|
|
},
|
|
|
|
|
|
|
|
fetchAllSortList(){
|
|
|
|
this.$http.post("/product/class/queryAllProductSortList").then(function (response) {
|
|
|
|
var rs = response.data;
|
|
|
|
this.levelContent.$set(0,rs.data);
|
|
|
|
}, function (response) {
|
|
|
|
var rs = response.data;
|
|
|
|
console.log(rs.message);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
fetchSubSortList(sortId){
|
|
|
|
this.$http.post("/product/class/queryProductSortList",{
|
|
|
|
param:sortId
|
|
|
|
}).then(function (response) {
|
|
|
|
var rs = response.data;
|
|
|
|
if(rs.data.length>0){
|
|
|
|
this.levelContent.$set(this.activeTab,rs.data);
|
|
|
|
}else{
|
|
|
|
this.closeDropdown();
|
|
|
|
}
|
|
|
|
}, function (response) {
|
|
|
|
var rs = response.data;
|
|
|
|
console.log(rs.message);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
...
|
...
|
|
