<template>
|
<square-box minHeight="300px" title="电池充电记录" icon="md-battery-charging">
|
<div class="collapse-content" style="height: 300px; margin-left: -12px; margin-right: -12px;">
|
<Collapse theme="dark">
|
<Panel v-for="(obj, key) in data" :key="key">
|
{{obj.name}}
|
<Badge
|
show-zero
|
:count="obj.items.length"></Badge>
|
<div slot="content">
|
<ul v-if="obj.items.length" class="item-content">
|
<li
|
v-for="(item, item_key) in obj.items"
|
:key="item_key"
|
@click="handleClick(item, key, item_key)">
|
<a>{{item.txt}}</a>
|
</li>
|
</ul>
|
<div v-else class="no-item item-content">暂无{{obj.name}}</div>
|
</div>
|
</Panel>
|
</Collapse>
|
</div>
|
</square-box>
|
</template>
|
<script>
|
import SquareBox from './SquareBox'
|
import HList from './HList'
|
import $ from 'jquery'
|
export default {
|
components: {
|
SquareBox
|
},
|
props:{
|
data: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
max: {
|
type: Number,
|
default: 99
|
}
|
},
|
data() {
|
return {
|
initData: this.data,
|
}
|
},
|
watch: {
|
initData: {
|
handler: function() {
|
var root = $(this.$el);
|
var $lis = root.find('.item-content').find('li');
|
$lis.removeClass('item-active');
|
},
|
deep: true
|
}
|
},
|
methods: {
|
getItemsLen: function(items) {
|
var len, result = items;
|
if(len > this.max) {
|
result = this.max+'+';
|
}
|
return result;
|
},
|
handleClick: function(data, key, item_key) {
|
var root = $(this.$el);
|
var $allLis = root.find('.item-content').find('li');
|
var $lis = root.find('.item-content').eq(key).find('li');
|
// 根据key和item_key定位道点击的元素
|
var $li = $lis.eq(item_key);
|
if(!$li.hasClass('item-active')) {
|
$allLis.removeClass('item-active');
|
$li.addClass('item-active');
|
this.$emit('on-select-change', data)
|
}
|
|
},
|
},
|
mounted() {
|
|
},
|
}
|
</script>
|
<style scoped>
|
.collapse-content {
|
padding: 0 8px;
|
overflow-y: auto;
|
}
|
.ivu-badge {
|
position: absolute;
|
top: 10px;
|
right: 16px;
|
}
|
.no-item {
|
font-weight: bold;
|
text-align: center;
|
}
|
.item-content li {
|
list-style: none;
|
}
|
.item-content li:hover {
|
background-color: #DDDDDD;
|
}
|
.item-content li.item-active {
|
background-color: #2db7f5;
|
}
|
.item-content a{
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
display: block;
|
text-indent: .5em;
|
line-height: 32px;
|
color: #000000;
|
}
|
</style>
|
