jsy-app/components/custom-select-land/custom-select-land.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.label}}
				</template>
				<template v-slot:right-icon>
					<u-badge numberType="overflow" type="primary" max="999" :showZero="true"
						:value="item.children.length" />
				</template>
				<view class="u-collapse-content" v-if="item.id == selectCId">
					<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" :showZero="true"
										:value="item2.valueNum" />
								</template>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</u-collapse-item>

		</u-collapse>
	</u-popup>
</template>

<script>
	import store from "@/store"
	import {
		deptTreeSelectByRole,
		getManagerGroundList,
	} from "@/api/index.js"

	export default {
		name: 'custom-select-land',
		emits: ["select"],
		props: {},
		watch: {},
		data() {
			return {
				user: store.state.user.user,
				show: false,
				showValue: null,
				list: getApp().land.list,
				selectCId: getApp().land.selectCId,
				selectItem: getApp().land.selectItem,
			}
		},
		created() {
			const that = this;
			getApp().land.getList(that.user.userId);
			that.list = getApp().land.list;
			that.selectCId = getApp().land.selectCId;
			that.selectItem = getApp().land.selectItem;
		},
		methods: {
			open() {
				console.log("open:", this.list);
				if (this.list.length > 0) {
					this.show = true;
				} else {
					this.$toast("无数据");
				}
			},
			close() {
				this.show = false;
			},
			select(item) {
				this.selectItem = item;
				getApp().land.setStorage(2, item);
				this.$emit("select", item);
				this.close();
			},
			changeItem(e) {
				console.log("changeItem:", e);
			},
			openItem(e) {
				this.showValue = e;
				this.selectCId = this.list[e].id;
				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>