crm-app-vue3/components/group-select/group-select.vue

<template>
	<scroll-view class="main">
		<view class="input" :class="{ disabledColor: disabled }">
			<view @click="showModal">
				<input v-model="_value" :class="{ disabledFontColor: disabled }" :placeholder="placeholder"
					style="pointer-events: none !important" />
			</view>
			<text v-if="clearable && !disabled" @click="empty" class="selectIcon iconcross"></text>
		</view>
		<view class="select-modal" :class="{ show: isShowModal }" @tap="hideModal">
			<view class="select-dialog" @tap.stop="" :style="{ backgroundColor: bgColor }">
				<view class="select-bar bg-white">
					<view class="action text-blue" @tap="cancelClick">{{ cancelText }}</view>
					<view class="action text-green" @tap="confirmClick">{{ confirmText }}</view>
				</view>
				<view class="select-content" v-if="list && list.length > 0" :style="{ maxHeight : scrollHeight }">
					<scroll-view scroll-y :style="{ height: scrollHeight }" @touchmove.stop="() => {}">
						<view v-for="(group, groupIndex) in list" :key="groupIndex">
							<view class="group-name">{{ group[groupName] }}</view>
							<view v-for="(item, index) in group[groupChild]" :key="index"
								:class="['select-item', valueIndexOf(item) ? 'select-active-item' : '']"
								@click="select(item)">
								<view class="title">{{ getLabelKeyValue(item) }}</view>
								<u-icon name="checkbox-mark" v-if="valueIndexOf(item)" class="checkboxMark"
									color="#108cff"></u-icon>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="empty_wrap" v-else>
					{{ emptyText }}
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				isShowModal: false,
				scrollTop: 0 // 添加滚动位置状态
			};
		},
		watch: {
			value(val) {
				if (val) {
					const data = this.list.find((v) => v.dictValue == val);
					if (data) {
						const {
							dictLabel
						} = data;
						this.$emit("update:name", dictLabel);
					}
				} else {
					this.$emit("update:name", undefined)
				}
			},
		},
		props: {
			// Vue3 v-model 使用 modelValue
			modelValue: {
				type: [Number, String, Array, Object],
				default: undefined
			},
			value: {
				type: [Number, String, Array, Object],
				default: null
			},
			scrollHeight : {
				default : "420rpx",
				type : String
			},
			groupName: {
				type: String
			},
			groupChild: {
				type: String
			},
			name: {
				type: String,
				default: undefined
			},
			placeholder: { // 占位符
				default: "",
				type: String
			},
			emptyText: {
				default: "暂无数据",
				type: String
			},
			multiple: { // 是否多选
				default: false,
				type: Boolean
			},
			list: {
				default: () => [],
				type: Array
			},
			valueKey: { // 指定list中valueKey的值作为下拉框绑定内容
				default: 'value',
				type: String
			},
			labelKey: { // 指定list中labelKey的值作为下拉框显示内容
				default: 'label',
				type: String
			},
			disabled: {
				default: false,
				type: Boolean
			},
			clearable: {
				default: false,
				type: Boolean
			},
			cancelText: {
				default: "取消",
				type: String
			},
			confirmText: {
				default: "确定",
				type: String
			},
			color: {
				default: "#000000",
				type: String
			},
			selectColor: {
				default: "#0081ff",
				type: String
			},
			bgColor: {
				default: "#FFFFFF",
				type: String
			},
			selectBgColor: {
				default: "#FFFFFF",
				type: String
			}
		},
		computed: {
			// Vue3 传 modelValue，Vue2 传 value，统一用 boundValue 读
			boundValue() {
				const v = this.modelValue !== undefined && this.modelValue !== null ? this.modelValue : this.value;
				return v;
			},
			_value: {
				get() {
					return this.boundValue != null ? this.get_value(this.boundValue) : "";
				},
				set(val) {
					this.$emit('input', val);
					// 仅 select/empty 会更新实际值并 emit update:modelValue，此处为展示用不 emit
				}
			}
		},
		created() {},
		methods: {
			get_value(val) {
				if (val || val === 0) {
					if (Array.isArray(val)) {
						let chooseAttr = [];
						this.list.forEach(group => {
							group[this.groupChild].forEach(item => {
								let val_val = this.getValueKeyValue(item);
								if (val.includes(val_val)) {
									chooseAttr.push(item);
								}
							});
						});
						let values = chooseAttr.map(temp => this.getLabelKeyValue(temp)).join(',');
						return values;
					} else {
						let choose = null;
						this.list.forEach(group => {
							let found = group[this.groupChild].find(temp => {
								let val_val = this.getValueKeyValue(temp);
								return val === val_val;
							});
							if (found != null) {
								choose = found;
							}
						});
						return choose ? this.getLabelKeyValue(choose) : "";
					}
				} else {
					return "";
				}
			},
			select(item) {
				let val = this.getValueKeyValue(item);
				if (this.multiple) {
					// Vue3 下 v-model 传 modelValue，可能为 null/undefined，需保证为数组再操作
					let _value = Array.isArray(this.boundValue) ? this.boundValue.slice() : [];

					let index = _value.indexOf(val);
					if (index != -1) {
						_value.splice(index, 1);
						this.$emit('input', _value);
						this.$emit('update:modelValue', _value);
						this.$emit("change", item);
					} else {
						_value.push(val);
						this.$emit('input', _value);
						this.$emit('update:modelValue', _value);
						this.$emit("change", item);
					}
				} else {
					this.$emit('input', val);
					this.$emit('update:modelValue', val);
					this.$emit("update:name", item[this.labelKey]);
					this.$emit("change", item);
					this.hideModal();
				}
			},
			valueIndexOf(item) {
				let val = this.getValueKeyValue(item);
				const v = this.boundValue;
				if (Array.isArray(v)) {
					return v.indexOf(val) != -1;
				} else {
					return v === val;
				}
			},
			getLabelKeyValue(item) { // 获取label
				return item[this.labelKey]
			},
			getValueKeyValue(item) { // 获取value
				return item[this.valueKey]
			},
			empty() { // 清空
				if (this.multiple) {
					this.$emit('input', []);
					this.$emit('update:modelValue', []);
				} else {
					this.$emit("update:name", '');
					this.$emit('input', '');
					this.$emit('update:modelValue', '');
				}
				this.$emit("change", null);
			},
			cancelClick() { // 点击取消
				this.$emit('cancel', this._value)
				this.hideModal()
			},
			confirmClick() { // 点击确定
				this.$emit('confirm', this._value)
				this.hideModal()
			},
			showModal() { // 显示model
				if (!this.disabled) {
					this.isShowModal = true;
				}
			},
			hideModal() { // 隐藏model
				this.isShowModal = false;
			}
		}
	}
</script>
<style>
	@font-face {
		font-family: "selectIcon";
		src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208');
		/* IE9 */
		src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMEAAsAAAAABvQAAAK4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBRIFCATYCJAMMCwgABCAFhQUHNRsfBsg+QCa3uoO0oAJTMwhxVu965keqWBy1hkbwtfzWb2Z279/shRhJisKF6FApKLI7oyBbpAaHo3w24k+ca9EUJbDmjaeznUdZ/FOUlkWdJ33rizZY/Pw6J5Xw0qKYxHTMesePHVT6EFpaC4zV70sKi2bYgNPc1w0WHnDVC/e/UnNTgyP+4Jq6BBpIHoisgypLaIAFEtU0wgeaIG8Yu4nAIZwnUK1QgFfOT6nUUoBpgXjj2lqplTMpiuXtCW3N2iK+aPTS2/Qdnzny8d+5IEiaDMy99exklra//FrKnX48pChmgrq5QcYRQCEe17ruqgqLAKv8WntwqwhpLms/nB5yW/iHRxJEC0QOgT3NnfgF01NBKvOuIzNoZdh5gJuAeGrsozE8vOJ7u5D832oz55039W5G+S52K0H+zNf1TJz07k26kqoQybRfwVFV4rjDS/K8EXUyuF1cXnT3weKS9Rvdm/xe7h8oA1hLwOR18R+Y4n4zwpr4z5SU089Vc+cpfWL+mn5APmT3Z39jeOs/GbWjK+DnmsuL/u6ehMX4j4yedSVkAUUuPh3TY022MtKZUEOtPqCb8Bkvnr5XT6imU0gGrEJW7aAL/gw0OhegVV2F6pC7uTOppirKIA4MFQhTrpCM+AbZlDu64L/QmAkQWlMhQXU75D07O9Gtl0PUYjTBLyAzOLNQYtypIEEjvsXtBLQTooV2nrQrGEau2gKmZlR4L8gwnGtBJbUn1diCOOQUnEkTkRAOeci9KHOQxvFro+tx3ZcGAaeljstCSBNDJuArgIyBYyy6OdZxAhHIELu1IC9AtgShCVtLltEKrSff1XoHJo3RC33hM63o3j6pSNkmqmIWEAtxFHB2OwoRBAfyeqE3r2ogHeF42dBhs7gvf7CukH5MmlUGOCpHihxFfs6TehDyKCqVAA==') format('woff2'),
			url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.woff?t=1590375117208') format('woff'),
			url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.ttf?t=1590375117208') format('truetype'),
			/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.svg?t=1590375117208#selectIcon') format('svg');
		/* iOS 4.1- */
	}

	.selectIcon {
		font-family: "selectIcon" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icongou:before {
		content: "\e61c";
	}

	.iconcross:before {
		content: "\e61a";
	}
</style>
<style lang="scss" scoped>
	
	/* 修改模态框样式 */
	.select-modal {
	  /* 添加防止穿透的样式 */
	  touch-action: none;
	  
	  .select-dialog {
	    /* 增加最大高度 */
	    max-height: 70vh;
	  }
	  
	  .select-content {
	    /* 使用弹性高度 */
	    height: auto;
	    max-height: 50vh;
	    
	    scroll-view {
	      /* 确保滚动区域正确 */
	      height: 100%;
	    }
	  }
	  
	  .select-item {
	    /* 增加触摸区域 */
	    padding: 25rpx 20rpx;
	  }
	}
	.group-name {
		font-size: 24rpx;
		color: #999;
		padding: 20rpx 0 10rpx 20rpx;
		background-color: #f8f8f8;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.disabledColor {
		background: #f5f7fa;
	}

	.disabledFontColor {
		color: #c0c4cc
	}

	.main {
		font-size: 28rpx;
		width: 100%;
	}

	.bg-white {
		background-color: #FFFFFF;
	}

	.text-blue {
		color: #0081ff;
	}

	.text-green {
		color: #39b54a;
	}

	.input {
		display: flex;
		align-items: center;
		font-size: 28rpx;

		// height: 60rpx;
		// padding: 10rpx 20rpx;
		// border-radius: 10rpx;
		// border-style: solid;
		// border-width: 1rpx;
		// border-color: rgba(0, 0, 0, 0.1);
		input {
			flex: 1;
		}
	}

	.select-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000rpx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
		margin-bottom: -1000rpx;

		&::before {
			content: "\200B";
			display: inline-block;
			height: 100%;
			vertical-align: bottom;
		}

		.select-dialog {
			display: inline-block;
			margin-left: auto;
			margin-right: auto;
			background-color: #f8f8f8;
			overflow: hidden;
			width: 100%;
			border-radius: 0;
			position: absolute;
			bottom: 0%;
			left: 50%;
			transform: translate(-50%, 0%);

			.empty_wrap {
				text-align: center;
				padding: 30rpx;
				color: #999;
			}

			.select-content {
				// background-color: #F1F1F1;
				overflow: auto;
				// padding: 0 60px;

				.group-name {
					margin-bottom: 20px;
					padding: 10px;
					font-size: 14px;
				}

				.select-item {
					padding: 20rpx;
					display: flex;
					position: relative;
					background: #f4f8fe;
					border-radius: 10rpx;
					margin: 20px 20px;

					.title {
						flex: 1;
					}

					.checkboxMark {
						position: absolute;
						right: 0%;
						top: 50%;
						transform: translate(-50%, -50%);
					}

					::v-deep .u-icon__icon {
						font-size: 40rpx !important;
						display: inline-block;
					}
				}

				.select-active-item {
					box-sizing: border-box;
					background: #FFFFFF;
					border: #0081ff 1px solid !important;
				}
			}
		}
	}

	.select-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
		margin-bottom: 0;
	}

	.select-bar {
		padding: 0 20rpx;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 80rpx;
		justify-content: space-between;

		.action {
			display: flex;
			align-items: center;
			height: 100%;
			justify-content: center;
			max-width: 100%;
		}
	}
</style>