焊接首页

components/nbd-select-project.vue

@@ -12,9 +12,13 @@
 			</view>
 			<scroll-view scroll-y="true" class="project-select-inner">
 				<view class="project-select-inner-wrap">
-					<view class="li" v-for="(item,idx) in props.list" :key="idx"
-						:class="selectObj[props.valueKey] == item[props.valueKey]?'active':''" @click="handerChangList(item)">{{item[props.labelKey]}}
+					<view class="li" v-for="(item,idx) in filteredList" :key="idx"
+						:class="selectObj && selectObj[props.valueKey] == item[props.valueKey] ? 'active' : ''"
+						@click="handerChangList(item)"
+					>
+						{{ item[props.labelKey] }}
 					</view>
+					<view v-if="filteredList.length === 0" class="empty-tip">暂无匹配项目</view>
 				</view>
 			</scroll-view>
 		</view>
@@ -24,7 +28,8 @@
 <script setup>
 	import {
 		ref,
-		watch
+		watch,
+		computed
 	} from 'vue';
 
 	const props = defineProps({
@@ -61,6 +66,14 @@
 
 	const selectObj = ref(null)
 
+	// 过滤后的列表
+	const filteredList = computed(() => {
+		if (!props.searchKey) return props.list
+		return props.list.filter(item =>
+			item[props.labelKey]?.includes(props.searchKey)
+		)
+	})
+
 	watch(() => props.modelValue, (val) => {
 		visible.value = val
 		if(val){
@@ -68,7 +81,7 @@
 			if (selectedItem) {
 				selectObj.value = selectedItem
 			} else {
-				selectObj.value = {}
+				selectObj.value = null
 			}
 		}
 	})
@@ -91,4 +104,60 @@
 	const handleSearchKey = (val) => {
 		emit('searchChange', val)
 	}
-</script>
+</script>
+
+<style lang="scss" scoped>
+.project-select {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background: #fff;
+	border-radius: 24rpx 24rpx 0 0;
+
+	.project-select-btns {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 24rpx 32rpx;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+
+	.project-select-filter {
+		padding: 16rpx 32rpx;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+
+	.project-select-inner {
+		flex: 1;
+		overflow-y: auto;
+
+		.project-select-inner-wrap {
+			padding: 0 32rpx 32rpx;
+
+			.li {
+				padding: 28rpx 0;
+				border-bottom: 1rpx solid #f5f6f8;
+				font-size: 28rpx;
+				color: #333;
+				transition: all 0.2s;
+
+				&:last-child {
+					border-bottom: none;
+				}
+
+				&.active {
+					color: $u-type-primary;
+					font-weight: 500;
+				}
+			}
+
+			.empty-tip {
+				text-align: center;
+				padding: 80rpx 0;
+				color: #999;
+				font-size: 26rpx;
+			}
+		}
+	}
+}
+</style>