科室汇总上方添加搜索框使用模糊查询

pages/main/inventory.vue

@@ -2,27 +2,29 @@
 	<view>
 		<scroll-view scroll-y class="page">
 			<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">科室汇总</block></cu-custom>
-			<!-- <view class="cu-bar bg-white">
+			
-				<view class="action">
+			<!-- 搜索框 -->
-					<text class="cuIcon-title text-green" style="color:#2CC9EA;"></text>
+			<view class="search-container">
-					<text style="color:#73828B;">科室汇总</text>
+				<view class="search-box">
+					<text class="search-icon">🔍</text>
+					<input
+						class="search-input"
+						v-model="searchKeyword"
+						placeholder="请输入科室名称"
+						@input="onSearchInput"
+					/>
+					<text v-if="searchKeyword" class="clear-icon" @click="clearSearch">✕</text>
 				</view>
-			</view> -->
-			<!-- <view class="cu-bar bg-white margin-top solid-bottom">
-				<view class="action">
-					<text class="cuIcon-title text-blue" style="color:#4a90e2;"></text>
-					<text style="color:#73828B;">本日医废明细数据</text>
 			</view>
-			</view> -->
 			
 			<!-- 空数据提示 -->
-			<view v-if="!stockDetailsInfo || stockDetailsInfo.length === 0" class="empty-container">
+			<view v-if="!filteredData || filteredData.length === 0" class="empty-container">
 				<text class="empty-icon">📭</text>
-				<text class="empty-text">本日医废数据为空</text>
+				<text class="empty-text">{{searchKeyword ? '未找到匹配的科室' : '本日医废数据为空'}}</text>
 			</view>
 			
 			<!-- 数据展示 -->
-			<view v-else class="data-wrapper" v-for="(value,index) in stockDetailsInfo" :key="index">
+			<view v-else class="data-wrapper" v-for="(value,index) in filteredData" :key="index">
 				<!-- 科室汇总行 -->
 				<view class="dept-summary-row">
 					<view class="summary-cell summary-cell-dept">
@@ -74,7 +76,19 @@
 				name: '',
 				duty: '',
 				stockBasisInfo: [],
-				stockDetailsInfo: []
+				stockDetailsInfo: [],
+				searchKeyword: ''
+			}
+		},
+		computed: {
+			// 过滤后的数据
+			filteredData() {
+				if (!this.searchKeyword) {
+					return this.stockDetailsInfo
+				}
+				return this.stockDetailsInfo.filter(item => 
+					item.department && item.department.includes(this.searchKeyword)
+				)
 			}
 		},
 		mounted(){
@@ -95,11 +109,19 @@
 					this.itemShow = true
 				}
 			},
+			// 搜索输入事件
+			onSearchInput() {
+				// 通过计算属性自动过滤
+			},
+			// 清除搜索
+			clearSearch() {
+				this.searchKeyword = ''
+			},
 			// 获取库存的基本信息
 			getStockBasisInfo(){
 				let that = this;
 				uni.request({
-					url: 'https://lekapi.opmonitor.com/?c=app_api&a=getStockBasisInfo',
+					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getStockBasisInfo',
 					data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
 					header: {
 						'Content-type': 'application/json'
@@ -116,7 +138,7 @@
 			getStockDetailsInfo(){
 				let that = this;
 				uni.request({
-					url: 'https://lekapi.opmonitor.com/?c=app_api&a=getStockDetailsInfo',
+					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getStockDetailsInfo',
 					data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
 					header: {
 						'Content-type': 'applicaation/json'
@@ -139,6 +161,37 @@
 		height: 100Vh;
 	}
 	
+	/* 搜索容器 */
+	.search-container {
+		padding: 20rpx;
+		background-color: #fff;
+	}
+	
+	.search-box {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		background-color: #f5f5f5;
+		border-radius: 50rpx;
+	}
+	
+	.search-icon {
+		font-size: 32rpx;
+		margin-right: 16rpx;
+	}
+	
+	.search-input {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333;
+	}
+	
+	.clear-icon {
+		font-size: 32rpx;
+		color: #999;
+		padding: 10rpx;
+	}
+	
 	.show {
 		display: block;
 	}