<template>
|
<div class="zz-inverting-storages-list-box">
|
<div class="box-top">
|
<div class="check-all-box">
|
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onAllChange">{{checkAll?'全部取消':'全部选择'}}</a-checkbox>
|
</div>
|
<div class="checked-des auto-wrap">已选择库位数：<a style="cursor:default;">{{checkedNum}}</a></div>
|
</div>
|
<div class="list-group">
|
<div class="lsit-item" v-for="(item,index) in list" :key="'lsit-item-'+index">
|
<a-checkbox :checked="item.checked" @change="onSingleChange(index,item,$event)" /><a class="space-link" @click.stop="openDetail(item)">{{item.placecode}}</a>
|
</div>
|
</div>
|
|
<detail-drawer :visible.sync="detailVisible" :row="detailRow" />
|
</div>
|
</template>
|
|
<script>
|
import DetailDrawer from './DetailDrawer.vue'
|
export default {
|
name:'zzInvertingStorageListBox',
|
components:{DetailDrawer},
|
data(){
|
return {
|
checkAll:false,
|
indeterminate:false,
|
list:[],
|
checkedNum:0,
|
detailVisible:false,
|
detailRow:{}
|
}
|
},
|
methods:{
|
setList(arr){
|
this.list = [...arr]
|
this.restCheckAll()
|
},
|
emptyChoosen(){
|
this.restCheckAll()
|
this.linkSetCheckList(false)
|
},
|
restCheckAll(){
|
this.checkAll = false
|
this.indeterminate = false
|
this.checkedNum = 0
|
},
|
onSingleChange(index,obj,e){
|
obj.checked = e.target.checked
|
if (obj.checked) {
|
this.checkedNum++;
|
} else {
|
this.checkedNum--;
|
}
|
this.linkSetCheckAll()
|
},
|
onAllChange(e){
|
let _temp = e.target.checked
|
if (_temp) {
|
this.checkAll = true
|
this.checkedNum = this.list.length
|
} else {
|
this.checkAll = false
|
this.checkedNum = 0
|
}
|
this.indeterminate = false
|
this.linkSetCheckList(_temp)
|
},
|
linkSetCheckAll(){
|
let c = 0 , n = this.list.length;
|
this.list.forEach((listitem)=>{
|
if (listitem.checked) {
|
c++
|
}
|
})
|
if (c===0) {
|
this.checkAll = false;
|
this.indeterminate = false
|
} else if (c===n) {
|
this.checkAll = true;
|
this.indeterminate = false
|
} else {
|
this.checkAll = false;
|
this.indeterminate = true
|
}
|
},
|
linkSetCheckList(__empty) {
|
this.list.forEach((listitem)=>{
|
listitem.checked = __empty
|
})
|
},
|
openDetail(obj){
|
this.detailRow = obj
|
this.detailVisible = true;
|
},
|
getChoosen(){
|
let arr = [];
|
this.list.forEach((listitem)=>{
|
if (listitem.checked) {
|
arr.push(listitem)
|
}
|
})
|
return arr
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.zz-inverting-storages-list-box {
|
height:100%;
|
display: flex;
|
flex-direction: column;
|
background-color: #fff;
|
.box-top {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
border-bottom: 1px solid #dcdcdc;
|
.check-all-box{
|
flex-shrink: 0;
|
padding: 0 12px;
|
}
|
.checked-des{
|
flex-grow: 1;
|
width: 1px;
|
padding: 6px 6px 6px 0;
|
}
|
}
|
.list-group{
|
height: 1px;
|
flex-grow: 1;
|
overflow: auto;
|
.lsit-item{
|
border-bottom: 1px dashed #dcdcdc;
|
padding: 6px 12px;
|
.space-link{
|
margin-left: 8px;
|
}
|
&:last-child{
|
border-bottom: 0;
|
}
|
}
|
}
|
}
|
</style>
|
