163 lines
3.1 KiB
Vue
163 lines
3.1 KiB
Vue
<template>
|
||
<u-popup mode="left" :show="show" @close="close">
|
||
<u-collapse ref="refCollapse" :value="showValue" @change="changeItem" @open="openItem" @close="closeItem"
|
||
accordion>
|
||
<u-collapse-item v-for="(item,i) in list" :name="i">
|
||
<template v-slot:icon>
|
||
<view class="iconfont icon-qiye icon"></view>
|
||
</template>
|
||
<template v-slot:title>
|
||
{{item.name}}
|
||
</template>
|
||
<template v-slot:right-icon>
|
||
<u-badge numberType="overflow" type="primary" max="999" :value="item.children.length" />
|
||
</template>
|
||
<view class="u-collapse-content" v-if="item.isShow">
|
||
<u-list>
|
||
<u-list-item v-for="item2 in item.children">
|
||
<u-cell @click="select(item2)">
|
||
<template v-slot:icon>
|
||
<view class="iconfont icon-ditu icon"></view>
|
||
</template>
|
||
<template v-slot:title>
|
||
（{{item2.name}}
|
||
</template>
|
||
<template v-slot:right-icon>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="item2.valueNum" />
|
||
</template>
|
||
</u-cell>
|
||
</u-list-item>
|
||
</u-list>
|
||
</view>
|
||
</u-collapse-item>
|
||
|
||
</u-collapse>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'custom-select-land',
|
||
emits: ["select"],
|
||
props: {
|
||
// selectItem: {
|
||
// type: Object,
|
||
// default: null,
|
||
// required: true
|
||
// }
|
||
},
|
||
watch: {},
|
||
data() {
|
||
return {
|
||
show: false,
|
||
showValue: null,
|
||
list: [],
|
||
}
|
||
},
|
||
created() {
|
||
this.getLandData();
|
||
},
|
||
methods: {
|
||
getLandData() {
|
||
if (!this.list.length) {
|
||
let arr = [];
|
||
for (var i = 0; i < 20; i++) {
|
||
let obj = {
|
||
id: i,
|
||
name: "公司" + i,
|
||
isShow: false,
|
||
children: []
|
||
}
|
||
for (var j = 0; j < 50; j++) {
|
||
obj.children.push({
|
||
id: j,
|
||
name: "地块" + j,
|
||
})
|
||
}
|
||
arr.push(obj);
|
||
}
|
||
this.list = arr;
|
||
}
|
||
return this.list;
|
||
},
|
||
open() {
|
||
if (this.list.length > 0) {
|
||
this.show = true;
|
||
} else {
|
||
uni.showToast({
|
||
title: "无数据",
|
||
icon: 'none'
|
||
})
|
||
}
|
||
// console.error("selectItem:", this.selectItem)
|
||
},
|
||
close() {
|
||
const that = this;
|
||
that.show = false;
|
||
that.list.forEach((item, index) => {
|
||
if (index == that.showValue) {
|
||
item.isShow = true;
|
||
} else {
|
||
item.isShow = false;
|
||
}
|
||
})
|
||
},
|
||
select(item) {
|
||
this.$emit("select", item);
|
||
this.close();
|
||
},
|
||
changeItem(e) {
|
||
console.log("changeItem:", e);
|
||
},
|
||
openItem(e) {
|
||
this.showValue = e;
|
||
this.list[e].isShow = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.refCollapse.init();
|
||
})
|
||
},
|
||
closeItem(e) {
|
||
this.showValue = null;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$list-height: 100px;
|
||
|
||
::v-deep.u-popup__content {
|
||
min-width: 240px;
|
||
|
||
.u-collapse {
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
|
||
}
|
||
|
||
.u-cell__right-icon-wrap--down,
|
||
.u-cell__right-icon-wrap--up {
|
||
transform: none;
|
||
}
|
||
|
||
.u-collapse-item__content__text {
|
||
padding: 0;
|
||
}
|
||
|
||
.u-cell__body__content {
|
||
.icon {
|
||
color: #3c9cff;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.u-collapse-content {
|
||
font-size: 28rpx;
|
||
|
||
.icon {
|
||
color: #39ac4f;
|
||
}
|
||
}
|
||
}
|
||
</style> |