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

<template>
	<u-popup mode="left" :show="show" @close="close">
		<u-collapse ref="refCollapse" :value="showIndex" @change="changeItem" @open="openItem" @close="closeItem"
			accordion>
			<u-collapse-item v-for="(item,i) in indexData.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="showId[item.id]">
					<u-list>
						<u-list-item v-for="item2 in item.children">
							<u-cell @click="select(i,item2)">
								<template v-slot:icon>
									<view class="iconfont icon-ditu icon"></view>
								</template>
								<template v-slot:title>
									<view :class="[item2.id == indexData.selectItem.id ? 'checked':'']">
										{{item2.name}}
									</view>
								</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,
				showIndex: null,
				showId: {},
				indexData: getApp().indexData,
			}
		},
		created() {
			this.indexData.getList(this.user.userId);
			if (this.indexData.selectItem) {
				this.showId[this.indexData.selectItem.companyId] = true;
			} else {
				this.showId[this.indexData.list.id] = true;
			}
		},
		methods: {
			//打开弹窗 
			open() {
				this.showIndex = this.indexData.showIndex;
				if (this.indexData.list.length > 0) {
					this.show = true;
				} else {
					this.$toast("无数据");
				}
			},
			//关闭弹窗
			close() {
				this.show = false;
			},
			//选中数据
			select(index, item) {
				let oldItem = this.indexData.selectItem;
				this.indexData.selectItem = item;
				this.indexData.showIndex = index;
				if (item.id != oldItem.id) {
					/*
					1.设置缓存
					2.回调的方式通知改变
					3.全局订阅的方式通知改变
					4.组件回调的方式通知改变
					*/
					this.indexData.setStorage(2, item);
					this.indexData.onEventHandler(this.indexData.eventType.land, item);
					uni.$emit("notify-update-land", item);
					this.$emit("select", item);
				}
				this.close();
			},
			//打开行变化
			changeItem(e) {},
			//打开行
			openItem(e) {
				this.showIndex = e;
				this.showId[this.indexData.list[e].id] = true;
				this.$nextTick(() => {
					this.$refs.refCollapse.init();
				})
			},
			closeItem(e) { //折叠行
				this.showIndex = 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;
			}
		}

		.checked {
			border-bottom: 2px solid #66ccff;
		}
	}
</style>