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

331
pages/workbench/construction/construction.vue
View File

@@ -3,38 +3,53 @@
<!-- 操作说明 -->
<view class="operation-tip">
<u-icon name="info-circle" color="#007bff" size="16"></u-icon>
<text class="tip-text">点击对应的行可以查看详情</text>
<text class="tip-text">点击对应的卡片可以查看详情</text>
</view>
<!-- 新增按钮 -->
<view class="add-button-container">
<u-button
type="primary"
@click="showAddForm"
:custom-style="{ borderRadius: '50rpx', height: '80rpx' }"
>
<u-icon name="plus" color="#fff" size="20" style="margin-right: 10rpx;"></u-icon>
新增汇报
</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">汇报标题</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="masonry-list">
<view
v-for="(item, index) in reportSummaryList"
:key="item.summaryId"
class="masonry-card"
@click="handleRowClick(item)"
>
<view class="card-title">{{ item.reportTitle || '-' }}</view>
<view class="card-info">
<view class="info-row">
<text class="label">最近汇报时间：</text>
<text>{{ formatDate(item.lastUpdateTime) }}</text>
</view>
<view class="table-body">
<view
v-for="(item, index) in reportSummaryList"
:key="item.summaryId"
class="table-row"
@click="handleRowClick(item)"
>
<view class="table-cell">{{ item.reportTitle || '-' }}</view>
<view class="table-cell">{{ formatDate(item.lastUpdateTime) }}</view>
<view class="table-cell">{{ formatDate(item.reportDate) }}</view>
<view class="table-cell">{{ item.reporter || '-' }}</view>
<view class="table-cell">{{ item.projectName || '-' }}</view>
<view class="table-cell">{{ item.remark || '-' }}</view>
</view>
<view class="info-row">
<text class="label">汇报日期：</text>
<text>{{ formatDate(item.reportDate) }}</text>
</view>
<view class="info-row">
<text class="label">汇报人：</text>
<text>{{ item.reporter || '-' }}</text>
</view>
<view class="info-row">
<text class="label">涉及项目：</text>
<text>{{ item.projectName || '-' }}</text>
</view>
<view class="info-row">
<text class="label">备注：</text>
<text>{{ item.remark || '-' }}</text>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 分页 -->
@@ -44,13 +59,75 @@
@loadmore="loadMore"
></u-loadmore>
<!-- 新增表单弹窗 -->
<uni-popup ref="formPopup" type="bottom" :mask-click="false">
<view class="form-popup-content">
<view class="popup-header">
<text class="popup-title">新增汇报</text>
<u-icon name="close" size="20" @click="closeForm"></u-icon>
</view>
<view class="form-content">
<u-form :model="form" ref="uForm" :rules="rules">
<u-form-item label="汇报标题" prop="reportTitle">
<u-input
v-model="form.reportTitle"
placeholder="请输入汇报标题"
:border="true"
/>
</u-form-item>
<u-form-item label="汇报日期" prop="reportDate">
<uni-datetime-picker
v-model="form.reportDate"
type="datetime"
:clear-icon="true"
placeholder="请选择汇报日期"
@change="onDateChange"
/>
</u-form-item>
<u-form-item label="汇报人" prop="reporter">
<u-input
v-model="form.reporter"
placeholder="请输入汇报人"
:border="true"
/>
</u-form-item>
<u-form-item label="涉及项目" prop="projectId">
<uni-data-select
v-model="form.projectId"
:localdata="projectList"
placeholder="请选择涉及项目"
@change="handleProjectChange"
/>
</u-form-item>
<u-form-item label="备注" prop="remark">
<u-textarea
v-model="form.remark"
placeholder="请输入内容"
:height="120"
:border="true"
/>
</u-form-item>
</u-form>
</view>
<view class="popup-footer">
<u-button @click="closeForm" :custom-style="{ flex: 1 }">取消</u-button>
<u-button type="primary" @click="submitForm" :custom-style="{ flex: 1 }">确定</u-button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { listProject } from '@/api/oa/project'
import { listReportSummary } from '@/api/oa/reportSummary'
import { listReportSummary, addReportSummary } from '@/api/oa/reportSummary'
export default {
data() {
@@ -68,7 +145,43 @@ export default {
projectId: undefined,
type: 1
},
loadMoreStatus: 'loadmore'
loadMoreStatus: 'loadmore',
// 表单数据
form: {
reportTitle: '',
reportDate: '',
reporter: '',
projectId: '',
remark: '',
type: 1
},
// 表单验证规则
rules: {
reportTitle: {
type: 'string',
required: true,
message: '请输入汇报标题',
trigger: ['blur', 'change']
},
reportDate: {
type: 'string',
required: true,
message: '请选择汇报日期',
trigger: ['blur', 'change']
},
reporter: {
type: 'string',
required: true,
message: '请输入汇报人',
trigger: ['blur', 'change']
},
projectId: {
type: 'string',
required: true,
message: '请选择涉及项目',
trigger: ['blur', 'change']
}
}
}
},
onLoad() {
@@ -84,6 +197,9 @@ export default {
this.loading = false;
this.selectedIds = [];
this.selectAll = false;
if (this.reportSummaryList.length <= this.total) {
this.loadMoreStatus = 'nomore';
}
}).catch(() => {
this.loading = false;
});
@@ -144,14 +260,77 @@ export default {
// 项目选择变化处理
handleProjectChange(value) {
this.form.projectId = value;
// 根据选择的项目ID获取项目名称
const selectedProject = this.projectList.find(item => item.projectId === value);
if (selectedProject) {
this.selectedProjectName = selectedProject.projectName;
},
// 日期选择变化处理
onDateChange(value) {
this.form.reportDate = value;
},
// 显示新增表单
showAddForm() {
this.resetForm();
this.$refs.formPopup.open();
},
// 关闭表单
closeForm() {
this.$refs.formPopup.close();
this.resetForm();
},
// 重置表单
resetForm() {
this.form = {
reportTitle: '',
reportDate: '',
reporter: '',
projectId: '',
remark: '',
type: 1
};
// 清除验证状态
if (this.$refs.uForm) {
this.$refs.uForm.clearValidate();
}
},
// 提交表单
submitForm() {
this.$refs.uForm.validate().then(valid => {
if (valid) {
this.submitData();
}
}).catch(errors => {
console.log('表单验证失败:', errors);
});
},
// 提交数据
submitData() {
uni.showLoading({
title: '提交中...'
});
addReportSummary(this.form).then(response => {
uni.hideLoading();
uni.showToast({
title: '添加成功',
icon: 'success'
});
this.closeForm();
// 刷新列表
this.queryParams.pageNum = 1;
this.getList();
}).catch(error => {
uni.hideLoading();
uni.showToast({
title: '添加失败',
icon: 'none'
});
console.error('添加汇报失败:', error);
});
}
}
}
</script>
@@ -180,62 +359,48 @@ export default {
}
}
.table-wrapper {
background-color: #fff;
border-radius: 10rpx;
overflow: hidden;
.add-button-container {
display: flex;
justify-content: center;
margin-bottom: 30rpx;
}
.table-scroll {
width: 100%;
.masonry-list {
column-count: 2;
column-gap: 24rpx;
padding: 10rpx 0;
}
.table-container {
min-width: 1200rpx; // 设置最小宽度，确保表格内容不会被压缩
.table-header {
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; // 复选框列宽度
}
}
.masonry-card {
width: calc(100%% - 18rpx);
margin-bottom: 24rpx;
background: #fff;
border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
display: inline-block;
break-inside: avoid;
padding: 32rpx 24rpx;
cursor: pointer;
transition: box-shadow 0.2s;
&:active {
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
background: #f8f9fa;
}
.table-body {
.table-row {
.card-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 16rpx;
color: #007bff;
}
.card-info {
display: flex;
flex-direction: column;
gap: 8rpx;
.info-row {
display: flex;
border-bottom: 1rpx solid #e9ecef;
cursor: pointer;
transition: background-color 0.2s;
&:hover {
background-color: #f8f9fa;
}
&:active {
background-color: #e9ecef;
}
.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; // 复选框列宽度
}
.label {
color: #888;
min-width: 120rpx;
}
}
}

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>