交接列表 新增加搜索功能,调试table样式
This commit is contained in:
+72
-11
@@ -3,14 +3,33 @@
|
|||||||
<scroll-view scroll-y class="page">
|
<scroll-view scroll-y class="page">
|
||||||
<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">交接列表</block></cu-custom>
|
<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">
|
<view v-if="!handDetailsInfo || handDetailsInfo.length === 0" class="empty-container">
|
||||||
<text class="empty-icon">📭</text>
|
<text class="empty-icon">📭</text>
|
||||||
<text class="empty-text">本日医废数据为空</text>
|
<text class="empty-text">本日医废数据为空</text>
|
||||||
</view>
|
</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="dept-summary-row">
|
||||||
<view class="summary-cell summary-cell-dept">
|
<view class="summary-cell summary-cell-dept">
|
||||||
@@ -63,7 +82,8 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
handDetailsInfo: [],
|
handDetailsInfo: [],
|
||||||
groupedHandData: []
|
groupedHandData: [],
|
||||||
|
searchKeyword: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -92,6 +112,15 @@
|
|||||||
totalCount: Math.round(group.totalCount),
|
totalCount: Math.round(group.totalCount),
|
||||||
totalWeight: group.totalWeight.toFixed(2)
|
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(){
|
mounted(){
|
||||||
@@ -133,6 +162,10 @@
|
|||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/plugin/sign?id=${item.id}&handName=${item.handName}`
|
url: `/pages/plugin/sign?id=${item.id}&handName=${item.handName}`
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
// 清空搜索
|
||||||
|
clearSearch() {
|
||||||
|
this.searchKeyword = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -181,6 +214,39 @@
|
|||||||
color: #999;
|
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 {
|
.data-wrapper {
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
@@ -317,40 +383,35 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-cell-type {
|
.table-cell-type {
|
||||||
flex: 1.8;
|
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
padding-left: 12rpx;
|
padding-left: 12rpx;
|
||||||
min-width: 120rpx;
|
flex: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-cell-count {
|
.table-cell-count {
|
||||||
flex: 0.7;
|
|
||||||
color: #2980b9;
|
color: #2980b9;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
min-width: 60rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-cell-weight {
|
.table-cell-weight {
|
||||||
flex: 0.7;
|
|
||||||
color: #c0392b;
|
color: #c0392b;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
min-width: 60rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-cell-hand {
|
.table-cell-hand {
|
||||||
flex: 1.2;
|
|
||||||
color: #666;
|
color: #666;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
min-width: 90rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-cell-action {
|
.table-cell-action {
|
||||||
flex: 0.8;
|
flex: 0.8;
|
||||||
min-width: 70rpx;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 类型图标 */
|
/* 类型图标 */
|
||||||
|
|||||||
Reference in New Issue
Block a user