670 lines
16 KiB
Vue
670 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 基本信息展示 -->
|
||
<view class="info-card" v-if="receivedParams.reportTitle">
|
||
<view class="info-header">
|
||
<u-icon name="info-circle" size="40" color="#409eff"></u-icon>
|
||
<text class="info-title">汇报概述信息</text>
|
||
</view>
|
||
<view class="info-content">
|
||
<view class="info-item">
|
||
<text class="info-label">汇报标题：</text>
|
||
<text class="info-value">{{ receivedParams.reportTitle }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">汇报人：</text>
|
||
<text class="info-value">{{ receivedParams.reporter }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">涉及项目：</text>
|
||
<text class="info-value">{{ receivedParams.projectName }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 数据列表 -->
|
||
<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="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>
|
||
<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>
|
||
|
||
<!-- 分页 -->
|
||
<u-loadmore
|
||
v-if="total > 0"
|
||
:status="loadMoreStatus"
|
||
@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">
|
||
<view class="popup-header">
|
||
<text class="popup-title">添加施工进度汇报详情</text>
|
||
<u-icon name="close" @click="cancel" size="40"></u-icon>
|
||
</view>
|
||
<scroll-view scroll-y class="form-content">
|
||
<u-form :model="form" ref="form" label-position="top" :rules="rules">
|
||
<u-form-item label="设备编号" prop="deviceCode">
|
||
<u-input v-model="form.deviceCode" placeholder="请输入设备唯一编号"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="设备类别" prop="category">
|
||
<u-input v-model="form.category" placeholder="请输入设备类别"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="详情内容" prop="reportDetail">
|
||
<u-textarea
|
||
v-model="form.reportDetail"
|
||
placeholder="请输入内容"
|
||
:height="200"
|
||
></u-textarea>
|
||
</u-form-item>
|
||
<u-form-item label="图像" prop="ossIds">
|
||
<view>
|
||
<u-button @click="handleChooseAndUpload">选择/拍照并上传图片</u-button>
|
||
<view class="image-list" v-if="fileList.length">
|
||
<image v-for="(item, idx) in fileList" :key="idx" :src="item.url" style="width: 80px; height: 80px; margin: 8px; border-radius: 8px;" />
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item label="备注" prop="remark">
|
||
<u-input v-model="form.remark" placeholder="请输入备注"></u-input>
|
||
</u-form-item>
|
||
</u-form>
|
||
</scroll-view>
|
||
<view class="popup-footer">
|
||
<u-button type="primary" @click="submitForm" :loading="buttonLoading">确定</u-button>
|
||
<u-button @click="cancel">取消</u-button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 图片详情抽屉 -->
|
||
<u-popup v-model="imageDrawer" mode="right" width="600rpx" height="100%">
|
||
<view class="image-drawer">
|
||
<view class="drawer-header">
|
||
<text class="drawer-title">图片列表</text>
|
||
<u-icon name="close" @click="imageDrawer = false" size="40"></u-icon>
|
||
</view>
|
||
<scroll-view scroll-y class="image-content">
|
||
<view class="image-grid">
|
||
<u-image
|
||
v-for="(img, index) in srcList"
|
||
:key="index"
|
||
:src="img"
|
||
width="150rpx"
|
||
height="150rpx"
|
||
@click="previewImage(img, index)"
|
||
></u-image>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { listReportDetail, addReportDetail, delReportDetail } from '@/api/oa/reportDetail'
|
||
import { uploadImage } from '@/api/common/upload'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
selectedIds: [],
|
||
// 全选状态
|
||
selectAll: false,
|
||
// 显示搜索条件
|
||
showSearch: false,
|
||
// 总条数
|
||
total: 0,
|
||
// 汇报详情表格数据
|
||
reportDetailList: [],
|
||
// 设备类别选项
|
||
categoryOptions: [
|
||
{ label: '挖掘机', value: '挖掘机' },
|
||
{ label: '推土机', value: '推土机' },
|
||
{ label: '装载机', value: '装载机' },
|
||
{ label: '起重机', value: '起重机' },
|
||
{ label: '混凝土泵车', value: '混凝土泵车' },
|
||
{ label: '其他', value: '其他' }
|
||
],
|
||
// 图片抽屉
|
||
imageDrawer: false,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
summaryId: undefined,
|
||
deviceCode: undefined,
|
||
category: undefined,
|
||
reportDetail: undefined,
|
||
},
|
||
// 表单参数
|
||
form: {},
|
||
// 文件列表
|
||
fileList: [],
|
||
// 图片列表
|
||
srcList: [],
|
||
// 加载更多状态
|
||
loadMoreStatus: 'loadmore',
|
||
// 接收到的参数
|
||
receivedParams: {},
|
||
// 表单校验规则
|
||
rules: {
|
||
deviceCode: [
|
||
{ required: true, message: "设备唯一编号不能为空", trigger: "blur" }
|
||
],
|
||
category: [
|
||
{ required: true, message: "设备类别不能为空", trigger: "blur" }
|
||
],
|
||
reportDetail: [
|
||
{ required: true, message: "汇报详情内容不能为空", trigger: "blur" }
|
||
],
|
||
ossIds: [
|
||
{ required: true, message: "请上传图片", trigger: "change" }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 获取路由参数
|
||
if (options.summaryId) {
|
||
this.queryParams.summaryId = options.summaryId;
|
||
this.form.summaryId = options.summaryId;
|
||
}
|
||
|
||
// 接收其他参数并设置页面标题
|
||
if (options.reportTitle) {
|
||
const title = decodeURIComponent(options.reportTitle);
|
||
uni.setNavigationBarTitle({
|
||
title: title || '施工进度详情'
|
||
});
|
||
}
|
||
|
||
// 保存接收到的参数到data中，方便后续使用
|
||
this.receivedParams = {
|
||
summaryId: options.summaryId,
|
||
reportTitle: options.reportTitle ? decodeURIComponent(options.reportTitle) : '',
|
||
reporter: options.reporter ? decodeURIComponent(options.reporter) : '',
|
||
projectName: options.projectName ? decodeURIComponent(options.projectName) : ''
|
||
};
|
||
|
||
this.getList();
|
||
|
||
if (this.form.ossIds) {
|
||
this.fileList = this.form.ossIds.split(',').map(url => ({
|
||
url,
|
||
status: 'success',
|
||
message: '上传成功'
|
||
}));
|
||
}
|
||
},
|
||
methods: {
|
||
/** 查询汇报详情列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
listReportDetail(this.queryParams).then(response => {
|
||
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;
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
// 切换搜索显示
|
||
toggleSearch() {
|
||
this.showSearch = !this.showSearch;
|
||
},
|
||
|
||
// 全选/取消全选
|
||
handleSelectAll(value) {
|
||
if (value) {
|
||
// 全选
|
||
this.selectedIds = this.reportDetailList.map(item => item.detailId);
|
||
} else {
|
||
// 取消全选
|
||
this.selectedIds = [];
|
||
}
|
||
},
|
||
|
||
// 选择变化
|
||
handleSelectionChange(value) {
|
||
// value 是选中的 ID 数组
|
||
this.selectedIds = value;
|
||
// 检查是否全选
|
||
this.selectAll = this.reportDetailList.length > 0 &&
|
||
this.selectedIds.length === this.reportDetailList.length;
|
||
},
|
||
|
||
// 取消按钮
|
||
cancel() {
|
||
this.$refs.formPopup.close();
|
||
this.reset();
|
||
},
|
||
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
summaryId: this.queryParams.summaryId,
|
||
deviceCode: undefined,
|
||
category: undefined,
|
||
reportDetail: undefined,
|
||
ossIds: undefined,
|
||
remark: undefined,
|
||
};
|
||
this.fileList = [];
|
||
this.$refs.form && this.$refs.form.resetFields();
|
||
},
|
||
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
summaryId: this.queryParams.summaryId,
|
||
deviceCode: undefined,
|
||
category: undefined,
|
||
reportDetail: undefined,
|
||
};
|
||
this.handleQuery();
|
||
},
|
||
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.reset();
|
||
this.$refs.formPopup.open();
|
||
},
|
||
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
console.log('[submitForm] called');
|
||
// 设备编号校验
|
||
if (!this.form.deviceCode) {
|
||
uni.showToast({ title: '设备唯一编号不能为空', icon: 'none' });
|
||
return;
|
||
}
|
||
// 设备类别校验
|
||
if (!this.form.category) {
|
||
uni.showToast({ title: '设备类别不能为空', icon: 'none' });
|
||
return;
|
||
}
|
||
// 详情内容校验
|
||
if (!this.form.reportDetail) {
|
||
uni.showToast({ title: '汇报详情内容不能为空', icon: 'none' });
|
||
return;
|
||
}
|
||
// 图片校验
|
||
if (!this.form.ossIds) {
|
||
uni.showToast({ title: '请上传图片', icon: 'none' });
|
||
return;
|
||
}
|
||
this.buttonLoading = true;
|
||
console.log('[submitForm] 手动校验通过，提交数据:', this.form);
|
||
addReportDetail(this.form).then(response => {
|
||
console.log('[submitForm] 新增成功:', response);
|
||
uni.showToast({ title: '新增成功', icon: 'success' });
|
||
this.$refs.formPopup.close();
|
||
this.getList();
|
||
}).catch((err) => {
|
||
console.error('[submitForm] 新增失败:', err);
|
||
uni.showToast({ title: '新增失败', icon: 'error' });
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
},
|
||
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const ids = row ? row.detailId : this.selectedIds;
|
||
if (!ids || (Array.isArray(ids) && ids.length === 0)) {
|
||
uni.showToast({
|
||
title: '请选择要删除的数据',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '确认删除',
|
||
content: '是否确认删除选中的数据？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.loading = true;
|
||
const deleteIds = Array.isArray(ids) ? ids.join(',') : ids;
|
||
delReportDetail(deleteIds).then(() => {
|
||
this.loading = false;
|
||
this.getList();
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'success'
|
||
});
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
uni.showToast({
|
||
title: '删除失败',
|
||
icon: 'error'
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/** 查看图片详情 */
|
||
handleImageDetail(row) {
|
||
if (row.ossIds) {
|
||
this.srcList = row.ossIds.split(',');
|
||
this.imageDrawer = true;
|
||
}
|
||
},
|
||
|
||
// 预览图片
|
||
previewImage(current, index) {
|
||
uni.previewImage({
|
||
current: current,
|
||
urls: this.srcList
|
||
});
|
||
},
|
||
|
||
// 加载更多
|
||
loadMore() {
|
||
if (this.loadMoreStatus === 'nomore') return;
|
||
|
||
this.loadMoreStatus = 'loading';
|
||
this.queryParams.pageNum += 1;
|
||
|
||
listReportDetail(this.queryParams).then(response => {
|
||
const newData = response.rows || [];
|
||
this.reportDetailList = [...this.reportDetailList, ...newData];
|
||
this.total = response.total || 0;
|
||
|
||
// 判断是否还有更多数据：当前获取的数据总数 >= 总数据量
|
||
if (this.reportDetailList.length >= this.total) {
|
||
this.loadMoreStatus = 'nomore';
|
||
} else {
|
||
this.loadMoreStatus = 'loadmore';
|
||
}
|
||
}).catch(() => {
|
||
this.loadMoreStatus = 'loadmore';
|
||
this.queryParams.pageNum -= 1;
|
||
});
|
||
},
|
||
|
||
async handleChooseAndUpload() {
|
||
try {
|
||
const { tempFilePaths } = await new Promise((resolve, reject) => {
|
||
uni.chooseImage({
|
||
count: 9,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: resolve,
|
||
fail: reject
|
||
});
|
||
});
|
||
console.log('[handleChooseAndUpload] 选择图片:', tempFilePaths);
|
||
const uploadResults = [];
|
||
for (const path of tempFilePaths) {
|
||
const res = await uploadImage(path);
|
||
uploadResults.push({ url: res.url });
|
||
console.log('[handleChooseAndUpload] 上传成功:', res);
|
||
}
|
||
this.fileList = uploadResults;
|
||
this.form.ossIds = uploadResults.map(f => f.url).join(',');
|
||
console.log('[handleChooseAndUpload] 最终ossIds:', this.form.ossIds);
|
||
} catch (e) {
|
||
uni.showToast({ title: '图片选择或上传失败', icon: 'none' });
|
||
console.error('[handleChooseAndUpload] 失败:', e);
|
||
}
|
||
},
|
||
|
||
deleteFile(event) {
|
||
const { index } = event;
|
||
this.fileList.splice(index, 1);
|
||
this.form.ossIds = this.fileList.map(f => f.url).join(',');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
padding: 20rpx;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.info-card {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.info-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.info-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-left: 20rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.info-content {
|
||
.info-item {
|
||
display: flex;
|
||
margin-bottom: 15rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
width: 160rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.list-wrapper {
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.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;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
.item-label {
|
||
color: #888;
|
||
min-width: 140rpx;
|
||
}
|
||
.item-value {
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-popup {
|
||
background-color: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
overflow: hidden;
|
||
width: 100vw;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.form-popup .popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
}
|
||
.form-popup .popup-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
.form-popup .form-content {
|
||
padding: 30rpx;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
min-height: 0;
|
||
max-height: 60vh;
|
||
}
|
||
.form-popup .popup-footer {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
padding: 30rpx;
|
||
border-top: 1rpx solid #e9ecef;
|
||
background: #fff;
|
||
position: sticky;
|
||
bottom: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.image-drawer {
|
||
background-color: #fff;
|
||
height: 100%;
|
||
|
||
.drawer-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
|
||
.drawer-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.image-content {
|
||
padding: 30rpx;
|
||
height: calc(100% - 100rpx);
|
||
|
||
.image-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-popup .u-form-item__label, .form-popup .u-form-item__label__text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
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> |