jsy-app-static/components/custom-select-land/custom-select-land.vue

163 lines
3.1 KiB
Vue
Raw Normal View History

2024-09-29 11:05:04 +08:00
<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>