DeXun/im-uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

施工页面样式修改

Browse Source
This commit is contained in:
砂糖
2025-07-08 13:45:04 +08:00
parent 7b74e7a331
commit 967b2d9a0b
4 changed files with 361 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
pages/workbench/construction/detail.vue
View File

@@ -22,69 +22,49 @@
</view>
</view>
<!-- 操作按钮 -->
<view class="action-buttons">
<u-button type="primary" @click="handleAdd" size="medium">新增</u-button>
<u-button type="error" @click="handleDelete" size="medium" :disabled="!selectedIds.length">删除</u-button>
</view>
<!-- 数据列表 -->
<view class="table-wrapper">
<scroll-view scroll-x class="table-scroll">
<view class="table-container">
<view class="table-header">
<view class="header-cell checkbox">
<u-checkbox v-model="selectAll" @change="handleSelectAll"></u-checkbox>
<view class="list-wrapper">
<u-swipe-action>
<u-swipe-action-item
v-for="(item, index) in reportDetailList"
:key="item.detailId"
:options="[{text: '删除', style: {background: '#ff4d4f', color: '#fff'}}]"
@click="handleDelete(item)"
>
<view class="detail-list-item">
<view class="item-row">
<text class="item-label">设备编号：</text>
<text class="item-value">{{ item.deviceCode || '-' }}</text>
</view>
<view class="header-cell">设备编号</view>
<view class="header-cell">设备类别</view>
<view class="header-cell">汇报详情内容</view>
<view class="header-cell">图片概况</view>
<view class="header-cell">备注</view>
<view class="header-cell">操作</view>
</view>
<u-checkbox-group v-model="selectedIds" @change="handleSelectionChange">
<view class="table-body">
<view
v-for="(item, index) in reportDetailList"
:key="item.detailId"
class="table-row"
>
<view class="table-cell checkbox">
<u-checkbox
:name="item.detailId"
:value="item.detailId"
></u-checkbox>
</view>
<view class="table-cell">{{ item.deviceCode || '-' }}</view>
<view class="table-cell">{{ item.category || '-' }}</view>
<view class="table-cell content-cell">
<text class="content-text">{{ item.reportDetail || '-' }}</text>
</view>
<view class="table-cell">
<u-image
v-if="item.ossIds"
:src="item.ossIds.split(',')[0]"
width="60rpx"
height="60rpx"
@click="handleImageDetail(item)"
></u-image>
<text v-else>-</text>
</view>
<view class="table-cell">{{ item.remark || '-' }}</view>
<view class="table-cell">
<u-button
type="error"
size="mini"
@click="handleDelete(item)"
>删除</u-button>
</view>
<view class="item-row">
<text class="item-label">设备类别：</text>
<text class="item-value">{{ item.category || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">汇报详情内容：</text>
<text class="item-value">{{ item.reportDetail || '-' }}</text>
</view>
<view class="item-row">
<text class="item-label">图片概况：</text>
<view v-if="item.ossIds">
<u-image
:src="item.ossIds.split(',')[0]"
width="60rpx"
height="60rpx"
@click.stop="handleImageDetail(item)"
></u-image>
</view>
<text v-else>-</text>
</view>
</u-checkbox-group>
</view>
</scroll-view>
<view class="item-row">
<text class="item-label">备注：</text>
<text class="item-value">{{ item.remark || '-' }}</text>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
<!-- 分页 -->
@@ -94,6 +74,13 @@
@loadmore="loadMore"
></u-loadmore>
<!-- 新增圆形按钮 -->
<view class="add-button-wrapper">
<view class="add-button" @click="handleAdd">
<u-icon name="plus" color="#fff" size="40"></u-icon>
</view>
</view>
<!-- 新增弹窗 -->
<uni-popup ref="formPopup" type="bottom" :mask-click="false">
<view class="form-popup">
@@ -269,6 +256,9 @@ export default {
this.reportDetailList = response.rows || [];
this.total = response.total || 0;
this.loading = false;
if (this.reportDetailList.length >= this.total) {
this.loadMoreStatus = 'nomore';
}
// 重置选中状态
this.selectedIds = [];
this.selectAll = false;
@@ -450,7 +440,8 @@ export default {
this.reportDetailList = [...this.reportDetailList, ...newData];
this.total = response.total || 0;
if (newData.length < this.queryParams.pageSize) {
// 判断是否还有更多数据：当前获取的数据总数 >= 总数据量
if (this.reportDetailList.length >= this.total) {
this.loadMoreStatus = 'nomore';
} else {
this.loadMoreStatus = 'loadmore';
@@ -549,76 +540,32 @@ export default {
}
}
.action-buttons {
display: flex;
gap: 20rpx;
margin-bottom: 20rpx;
}
.table-wrapper {
background-color: #fff;
.list-wrapper {
background: #fff;
border-radius: 10rpx;
overflow: hidden;
padding: 10rpx 0;
}
.table-scroll {
width: 100%;
}
.table-container {
min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩
.table-header {
.detail-list-item {
padding: 32rpx 24rpx;
background: #fff;
border-radius: 12rpx;
margin-bottom: 16rpx;
border: 1rpx solid #e9ecef;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
.item-row {
display: flex;
background-color: #f8f9fa;
border-bottom: 1rpx solid #e9ecef;
.header-cell {
width: 200rpx; // 固定列宽
padding: 20rpx 10rpx;
text-align: center;
font-weight: bold;
font-size: 28rpx;
flex-shrink: 0; // 防止列被压缩
&.checkbox {
width: 100rpx; // 复选框列宽度
}
align-items: center;
margin-bottom: 8rpx;
.item-label {
color: #888;
min-width: 140rpx;
}
}
.table-body {
.table-row {
display: flex;
border-bottom: 1rpx solid #e9ecef;
&:hover {
background-color: #f8f9fa;
}
.table-cell {
width: 200rpx; // 固定列宽
padding: 20rpx 10rpx;
text-align: center;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; // 防止列被压缩
word-break: break-all; // 长文本换行
&.checkbox {
width: 100rpx; // 复选框列宽度
}
&.content-cell {
.content-text {
max-width: 180rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.item-value {
color: #333;
flex: 1;
}
}
}
@@ -696,4 +643,28 @@ export default {
text-overflow: ellipsis;
display: block;
}
.add-button-wrapper {
position: fixed;
bottom: 40rpx;
right: 40rpx;
z-index: 999;
}
.add-button {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #007bff, #0056b3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 16rpx rgba(0, 123, 255, 0.3);
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(0, 123, 255, 0.4);
}
}
</style>