4 changed files with 231 additions and 412 deletions
@ -1,170 +0,0 @@ |
|||||
<template> |
|
||||
<div class="selector"> |
|
||||
<div class="el-input1"> |
|
||||
<el-input placeholder="搜索" @keyup.enter.native="onEnter" v-model="params.query" size="small" type="text" |
|
||||
class=""/> |
|
||||
</div> |
|
||||
<div class="selector-check" @scroll="scrollEvent"> |
|
||||
<ul> |
|
||||
<li v-for="(item,index) in list" :key="index"> |
|
||||
<el-checkbox @change="change(item.id,item.checked)" v-model="item.checked"> |
|
||||
<div class="lis"> |
|
||||
<div> |
|
||||
<p>{{item.name}}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-checkbox> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
|
|
||||
// import { |
|
||||
// GET_LOCATIONS |
|
||||
// } from '@/api/common' |
|
||||
|
|
||||
export default { |
|
||||
name: "elTransfer", |
|
||||
data() { |
|
||||
return { |
|
||||
list: [], |
|
||||
params: { |
|
||||
size: 10, |
|
||||
from: 0, |
|
||||
query: '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
props: { |
|
||||
locationIds: Array |
|
||||
}, |
|
||||
mounted() { |
|
||||
// this.getList(); |
|
||||
console.log(this.locationIds); |
|
||||
}, |
|
||||
watch: { |
|
||||
locationIds(val) { |
|
||||
console.log(val); |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
getList() { |
|
||||
GET_LOCATIONS(this.params).then(res => { |
|
||||
res.map((item) => { |
|
||||
item.checked = false; |
|
||||
if (this.locationIds.includes(item.id)){ |
|
||||
item.checked = true; |
|
||||
} |
|
||||
return item; |
|
||||
}); |
|
||||
this.list = [...this.list, ...res]; |
|
||||
}) |
|
||||
}, |
|
||||
change(id, checked) { |
|
||||
if (checked) { |
|
||||
let list = this.list.map((item) => { |
|
||||
if (id == item.id) { |
|
||||
item.checked = true |
|
||||
} |
|
||||
return item; |
|
||||
}); |
|
||||
this.list = list; |
|
||||
} else { |
|
||||
let list = this.list.map((item) => { |
|
||||
if (id == item.id) { |
|
||||
item.checked = false |
|
||||
} |
|
||||
return item; |
|
||||
}); |
|
||||
this.list = list; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
}, |
|
||||
scrollEvent(e) { |
|
||||
// if (e.srcElement.scrollTop + e.srcElement.offsetHeight > e.srcElement.scrollHeight) { |
|
||||
// this.params = { |
|
||||
// ...this.params, |
|
||||
// from: this.params.from + this.params.size, |
|
||||
// }; |
|
||||
// this.getList() |
|
||||
// } |
|
||||
|
|
||||
}, |
|
||||
onEnter() { |
|
||||
// this.params = { |
|
||||
// ...this.params, |
|
||||
// query: this.params.query |
|
||||
// }; |
|
||||
// this.getList() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
|
||||
* { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.selector { |
|
||||
margin-top: 10px; |
|
||||
border-radius: 4px; |
|
||||
height: 300px; |
|
||||
border: 1px solid #d9d9d9; |
|
||||
|
|
||||
.el-input1 { |
|
||||
margin: 10px; |
|
||||
} |
|
||||
|
|
||||
.selector-check { |
|
||||
height: calc(100% - 55px); |
|
||||
border-top: 1px solid #d9d9d9; |
|
||||
padding: 15px; |
|
||||
overflow: auto; |
|
||||
|
|
||||
ul { |
|
||||
padding: 0; |
|
||||
margin: 0; |
|
||||
|
|
||||
li { |
|
||||
list-style: none; |
|
||||
padding: 5px 0; |
|
||||
|
|
||||
.el-checkbox__input { |
|
||||
vertical-align: super; |
|
||||
} |
|
||||
|
|
||||
.lis { |
|
||||
display: flex; |
|
||||
|
|
||||
img, div { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
width: 80px; |
|
||||
height: 80px; |
|
||||
} |
|
||||
|
|
||||
div { |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.el-checkbox__input { |
|
||||
vertical-align: top; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue