1.报事报修

components/SelectUser.vue

@@ -13,7 +13,8 @@
 
 			<view class="search-bar">
 				<image class="search-icon" src="/static/ic_search_gray.png" />
-				<input class="search-input" placeholder="姓名、工号" />
+				<input class="search-input" placeholder="姓名" v-model="keyword" @confirm="handleSearch" confirm-type="search" />
+				<view class="search-btn" @click="handleSearch">搜索</view>
 			</view>
 
 
@@ -24,7 +25,7 @@
 					<text>{{ item.name }}（{{ item.department }}）</text>
 				</view>
 			</scroll-view>
-
+
 			<button class="footer" @click="confirm">{{ confirmText }}</button>
 		</view>
 	</view>
@@ -58,13 +59,18 @@
 		data() {
 			return {
 				keyword: '',
-				selected: []
+				selected: [],
+				allList: [], // 存放所有数据
+				filteredList: []
 			}
 		},
-		computed: {
-			filteredList() {
-				if (!this.keyword) return this.list;
-				return this.list.filter(item => item.name.includes(this.keyword) || item.value.includes(this.keyword));
+		watch: {
+			list: {
+				handler(newVal) {
+					this.allList = [...newVal];
+					this.filteredList = [...newVal];
+				},
+				immediate: true
 			}
 		},
 		methods: {
@@ -89,7 +95,18 @@
 				this.$emit('confirm', this.selected);
 				this.close();
 			},
-			onSearch() {}
+			// 搜索方法
+			handleSearch() {
+				if (!this.keyword) {
+					this.filteredList = [...this.allList];
+					return;
+				}
+				
+				this.filteredList = this.allList.filter(item => 
+					item.name.includes(this.keyword) || 
+					(item.department && item.department.includes(this.keyword))
+				);
+			}
 		}
 	}
 </script>
@@ -147,38 +164,48 @@
 		right: 30rpx;
 	}
 
-	.search-bar {
-		display: flex;
-		align-items: center;
-		background: #F7F7F7;
-		border-radius: 29rpx;
-		height: 58rpx;
-		padding-left: 20rpx;
-		margin-left: 34rpx;
-		margin-right: 34rpx;
-		margin-top: 26rpx;
-	}
-	.search-icon {
-		width: 27rpx;
-		height: 27rpx;
-		margin-right: 8rpx;
-	}
-	.search-input {
-		border: none;
-		font-size: 26rpx;
-		flex: 1;
-		color: #000;
+	.search-bar {
+		display: flex;
+		align-items: center;
+		background: #F7F7F7;
+		border-radius: 29rpx;
+		height: 58rpx;
+		padding-left: 20rpx;
+		margin-left: 34rpx;
+		margin-right: 34rpx;
+		margin-top: 26rpx;
+	}
+	.search-icon {
+		width: 27rpx;
+		height: 27rpx;
+		margin-right: 8rpx;
+	}
+	.search-input {
+		border: none;
+		font-size: 26rpx;
+		flex: 1;
+		color: #000;
+		background: transparent;
+	}
+	.search-btn {
+		font-size: 26rpx;
+		color: #0090FF;
+		padding: 0 20rpx;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.user-list {
 		flex: 1;
-		overflow-y: auto;
-		margin-top: 20rpx;
-		padding-left: 52rpx;
+		overflow-y: auto;
+		margin-top: 20rpx;
+		padding-left: 52rpx;
 		padding-right: 52rpx;
 	}
 
-	.user-item {
+	.user-item {
 		height: 88rpx;
 		display: flex;
 		align-items: center;
@@ -207,8 +234,8 @@
 		background: #0090FF;
 		color: #fff;
 		border-radius: 44rpx;
-		font-size: 36rpx;
-		margin-top: 50rpx;
+		font-size: 36rpx;
+		margin-top: 50rpx;
 		margin-bottom: 50rpx;
 	}
 </style>