–交接列表 新增加搜索功能,调试table样式

This commit is contained in:
2026-03-13 19:12:17 +08:00
parent 3401de1a0d
commit 95d75f76a8
+72 -11
View File
@@ -3,14 +3,33 @@
<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="search-box">
<input
class="search-input"
type="text"
v-model="searchKeyword"
placeholder="请输入科室名称"
placeholder-class="search-placeholder"
/>
<text class="search-icon" v-if="!searchKeyword">🔍</text>
<text class="clear-icon" v-else @click="clearSearch"></text>
</view>
<!-- 空数据提示 -->
<view v-if="!handDetailsInfo || handDetailsInfo.length === 0" class="empty-container">
<text class="empty-icon">📭</text>
<text class="empty-text">本日医废数据为空</text>
</view>
<!-- 搜索无结果提示 -->
<view v-else-if="filteredGroupedData.length === 0" class="empty-container">
<text class="empty-icon">📭</text>
<text class="empty-text">未找到匹配的科室</text>
</view>
<!-- 表格展示 -->
<view v-else class="data-wrapper" v-for="(deptData, deptIndex) in groupedHandData" :key="deptIndex">
<view v-else class="data-wrapper" v-for="(deptData, deptIndex) in filteredGroupedData" :key="deptIndex">
<!-- 科室汇总行 -->
<view class="dept-summary-row">
<view class="summary-cell summary-cell-dept">
@@ -63,7 +82,8 @@
data() {
return {
handDetailsInfo: [],
groupedHandData: []
groupedHandData: [],
searchKeyword: ''
}
},
computed: {
@@ -92,6 +112,15 @@
totalCount: Math.round(group.totalCount),
totalWeight: group.totalWeight.toFixed(2)
}));
},
// 过滤后的分组数据
filteredGroupedData() {
if (!this.searchKeyword) {
return this.groupedHandData;
}
return this.groupedHandData.filter(dept => {
return dept.department && dept.department.includes(this.searchKeyword);
});
}
},
mounted(){
@@ -133,6 +162,10 @@
uni.navigateTo({
url: `/pages/plugin/sign?id=${item.id}&handName=${item.handName}`
})
},
// 清空搜索
clearSearch() {
this.searchKeyword = '';
}
}
}
@@ -181,6 +214,39 @@
color: #999;
}
/* 搜索框 */
.search-box {
margin: 12rpx;
padding: 0 24rpx;
background-color: #fff;
border-radius: 30rpx;
display: flex;
align-items: center;
box-shadow: 0 2rpx 12rpx rgba(74, 144, 226, 0.15);
border: 1px solid #e1e8f0;
}
.search-input {
flex: 1;
height: 70rpx;
font-size: 26rpx;
color: #333;
}
.search-placeholder {
color: #999;
}
.search-icon, .clear-icon {
font-size: 28rpx;
margin-left: 10rpx;
}
.clear-icon {
color: #999;
padding: 10rpx;
}
/* 数据包裹层 */
.data-wrapper {
margin-bottom: 40rpx;
@@ -317,40 +383,35 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.table-cell-type {
flex: 1.8;
justify-content: flex-start;
padding-left: 12rpx;
min-width: 120rpx;
flex: 1.5;
}
.table-cell-count {
flex: 0.7;
color: #2980b9;
font-weight: 600;
min-width: 60rpx;
}
.table-cell-weight {
flex: 0.7;
color: #c0392b;
font-weight: 600;
min-width: 60rpx;
}
.table-cell-hand {
flex: 1.2;
color: #666;
font-weight: 500;
font-size: 20rpx;
min-width: 90rpx;
}
.table-cell-action {
flex: 0.8;
min-width: 70rpx;
justify-content: center;
}
/* 类型图标 */