|
|
<template>
|
|
|
<div class="list-component" v-show="showType">
|
|
|
<div class="list-component" v-show="showType" @click="hideClick">
|
|
|
<div class="list-bg">
|
|
|
<div class="list-item" v-if="list.length" v-for="(item, index) in list" :key="index">
|
|
|
<div class="item" @click="clickItem(item.itemId, item.itemName)">
|
|
|
<div class="item" @click="(e)=> clickItem(e, item.itemId, item.itemName)">
|
|
|
<span :class="selectParams.id.includes(item.itemId) ? 'active-span' : '' ">{{item.itemName}}</span>
|
|
|
<div v-if="selectParams.id.includes(item.itemId)" class="select-class"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list-bottom">
|
|
|
<div class="bottom-btn clear" @click="clear">重置</div>
|
|
|
<div class="bottom-btn submit" @click="submit">确定</div>
|
|
|
<div class="bottom-btn clear" @click="(e)=>clear(e)">重置</div>
|
|
|
<div class="bottom-btn submit" @click="(e)=>submit(e)">确定</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
...
|
...
|
@@ -36,22 +36,29 @@ export default { |
|
|
hide() {
|
|
|
this.showType = false;
|
|
|
},
|
|
|
hideClick() {
|
|
|
this.$parent.updateFilterParams({});
|
|
|
this.hide();
|
|
|
},
|
|
|
setFilterList(params) {
|
|
|
this.selectParams.id = params.id || [];
|
|
|
this.selectParams.name = params.name || [];
|
|
|
},
|
|
|
submit() {
|
|
|
submit(event) {
|
|
|
event.stopPropagation();
|
|
|
this.$parent.updateFilterParams(this.selectParams);
|
|
|
this.hide();
|
|
|
},
|
|
|
clear() {
|
|
|
clear(event) {
|
|
|
event.stopPropagation();
|
|
|
let params = {
|
|
|
id: [],
|
|
|
name: []
|
|
|
};
|
|
|
this.selectParams = params;
|
|
|
},
|
|
|
clickItem(itemId, itemName) {
|
|
|
clickItem(event, itemId, itemName) {
|
|
|
event.stopPropagation();
|
|
|
let idArray = [].concat(this.selectParams.id);
|
|
|
let nameArray = [].concat(this.selectParams.name);
|
|
|
|
...
|
...
|
@@ -72,7 +79,7 @@ export default { |
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.list-component {
|
|
|
position: fixed;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
top: 186px;
|
...
|
...
|
|