现场维修

src/pages/repair/tree-select/select-one.vue

@@ -0,0 +1,169 @@
+<template>
+	<view class="select-box">
+		<!-- 蒙版 -->
+		<view class="mask" v-show="show" @click="show = false"></view>
+
+		<!-- 输入框 -->
+		<view class="input-box" @click="openOptions">
+			<uni-easyinput v-model="showLabel" :placeholder="placeholder" maxlength="20" :disabled="disabled"
+				style="width: 100%; font-size: 28rpx;" @input="inputChange" @clear="handleClear" />
+		</view>
+
+		<!-- 下拉选项 -->
+		<view v-show="show" class="dropdown-wrap">
+			<scroll-view class="dropdown" scroll-y>
+				<view v-for="item in selectData" :key="item[valueKey]" class="option-item" @click="selectItem(item)">
+					{{ item[labelKey] }}
+				</view>
+				<view v-if="selectData.length === 0" class="option-no-data">无数据...</view>
+			</scroll-view>
+			<text class="triangle"></text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "SelectOne",
+		props: {
+			options: {
+				type: Array,
+				default: () => [],
+			},
+			value: [String, Number],
+			placeholder: {
+				type: String,
+				default: "请选择",
+			},
+			labelKey: {
+				type: String,
+				default: "label",
+			},
+			valueKey: {
+				type: String,
+				default: "id",
+			},
+			disabled: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		data() {
+			return {
+				show: false,
+				showLabel: "",
+				selectData: [],
+			};
+		},
+		watch: {
+			value: {
+				immediate: true,
+				handler(val) {
+					console.log(val)
+					if (!val) {
+						this.showLabel = '';
+					} else {
+						const match = this.options.find((item) => item[this.valueKey] === val);
+						this.showLabel = match ? match[this.labelKey] : '';
+					}
+					this.selectData = this.options;
+				}
+			},
+			options: {
+				immediate: true,
+				handler(val) {
+					this.selectData = val || [];
+				},
+			},
+		},
+		methods: {
+			openOptions() {
+				if (!this.disabled) this.show = true;
+			},
+			inputChange(val) {
+				this.selectData = this.options.filter((item) =>
+					item[this.labelKey].includes(val)
+				);
+			},
+			selectItem(item) {
+				this.show = false;
+				this.showLabel = item[this.labelKey];
+				this.$emit("change", item);
+				this.$emit("update:value", item[this.valueKey]); // 支持 v-model
+			},
+			handleClear() {
+				this.showLabel = "";
+				this.selectData = this.options;
+				this.$emit("clear");
+				this.$emit("update:value", "");
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	.select-box {
+		position: relative;
+		width: 100%;
+	}
+
+	.mask {
+		position: fixed;
+		z-index: 999;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+	}
+
+	.input-box {
+		cursor: pointer;
+	}
+
+	.dropdown-wrap {
+		max-height: 30vh;
+		width: 100%;
+		position: absolute;
+		top: 88rpx;
+		left: 0;
+		z-index: 1000;
+		padding-top: 6px;
+	}
+
+	.dropdown {
+		background-color: #fff;
+		padding: 3px 0;
+		box-shadow: 0 0 20rpx 5rpx rgba(0, 0, 0, 0.2);
+		border-radius: 5px;
+		max-height: 300rpx;
+	}
+
+	.option-item {
+		padding: 20rpx;
+		font-size: 28rpx;
+		/* border-bottom: 1px solid #eee; */
+	}
+
+	.option-item:last-child {
+		border-bottom: none;
+	}
+
+	.option-no-data {
+		text-align: center;
+		color: #999;
+		padding: 20rpx;
+	}
+
+	.triangle {
+		width: 0;
+		height: 0;
+		border-top: 6px solid transparent;
+		border-left: 6px solid transparent;
+		border-right: 6px solid transparent;
+		border-bottom: 6px solid #fff;
+		position: absolute;
+		top: -6px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+</style>