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

迁移oa部分页面：施工进度和每日报工

Browse Source
This commit is contained in:
砂糖
2025-07-05 18:37:20 +08:00
parent 3b556ce46a
commit 043c95667b
59 changed files with 10247 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
<template>
<view class="container">
<!-- 操作按钮 -->
<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 class="operation-tip">
<u-icon name="info-circle" color="#007bff" size="16"></u-icon>
<text class="tip-text">点击对应的行可以查看详情</text>
</view>
<!-- 数据列表 -->
@@ -11,9 +11,6 @@
<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>
<view class="header-cell">汇报标题</view>
<view class="header-cell">最近汇报时间</view>
<view class="header-cell">汇报日期</view>
@@ -21,29 +18,21 @@
<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 reportSummaryList"
:key="item.summaryId"
class="table-row"
@click="handleRowClick(item)"
>
<view class="table-cell checkbox" @click.stop>
<u-checkbox
:name="item.summaryId"
:value="item.summaryId"
></u-checkbox>
</view>
<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="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>
</u-checkbox-group>
</view>
</view>
</scroll-view>
</view>
@@ -55,68 +44,21 @@
@loadmore="loadMore"
></u-loadmore>
<!-- 新增弹窗 -->
<u-popup v-model="showForm" mode="center" width="600rpx" height="700rpx">
<view class="form-popup">
<view class="popup-header">
<text class="popup-title">{{ 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-width="160rpx">
<u-form-item label="汇报标题" prop="reportTitle">
<u-input v-model="form.reportTitle" placeholder="请输入汇报标题"></u-input>
</u-form-item>
<u-form-item label="汇报日期" prop="reportDate">
<u-datetime-picker
v-model="form.reportDate"
type="datetime"
placeholder="请选择汇报日期"
></u-datetime-picker>
</u-form-item>
<u-form-item label="汇报人" prop="reporter">
<u-input v-model="form.reporter" placeholder="请输入汇报人"></u-input>
</u-form-item>
<u-form-item label="涉及项目" prop="projectId">
<u-select
v-model="form.projectId"
:list="projectList"
label-name="projectName"
value-name="projectId"
placeholder="请选择涉及项目"
></u-select>
</u-form-item>
<u-form-item label="备注" prop="remark">
<u-input v-model="form.remark" type="textarea" 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>
</u-popup>
</view>
</template>
<script>
import { listProject } from '@/api/oa/project'
import { addReportSummary, delReportSummary, listReportSummary } from '@/api/oa/reportSummary'
import { listReportSummary } from '@/api/oa/reportSummary'
export default {
data() {
return {
projectList: [],
buttonLoading: false,
loading: true,
selectedIds: [],
selectAll: false,
showSearch: false,
total: 0,
reportSummaryList: [],
title: '',
showForm: false,
queryParams: {
pageNum: 1,
pageSize: 10,
@@ -126,22 +68,7 @@ export default {
projectId: undefined,
type: 1
},
form: {},
loadMoreStatus: 'loadmore',
rules: {
reportTitle: [
{ required: true, message: '汇报标题不能为空', trigger: 'blur' }
],
reportDate: [
{ required: true, message: '汇报日期不能为空', trigger: 'blur' }
],
reporter: [
{ required: true, message: '汇报人不能为空', trigger: 'blur' }
],
projectId: [
{ required: true, message: '涉及项目不能为空', trigger: 'blur' }
],
}
loadMoreStatus: 'loadmore'
}
},
onLoad() {
@@ -162,121 +89,27 @@ export default {
});
},
getProjectList() {
listProject({ pageSize: 999 }).then(({ rows }) => {
this.projectList = rows || [];
});
},
toggleSearch() {
this.showSearch = !this.showSearch;
},
handleSelectAll(value) {
if (value) {
// 全选
this.selectedIds = this.reportSummaryList.map(item => item.summaryId);
} else {
// 取消全选
this.selectedIds = [];
}
},
handleSelectionChange(value) {
// value 是选中的 ID 数组
this.selectedIds = value;
// 检查是否全选
this.selectAll = this.reportSummaryList.length > 0 &&
this.selectedIds.length === this.reportSummaryList.length;
},
cancel() {
this.showForm = false;
this.reset();
},
reset() {
this.form = {
reportTitle: undefined,
reportDate: undefined,
reporter: undefined,
projectId: undefined,
remark: undefined,
type: 1
};
this.$refs.form && this.$refs.form.resetFields();
},
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
reportTitle: undefined,
reportDate: undefined,
reporter: undefined,
projectId: undefined,
type: 1
};
this.handleQuery();
},
handleAdd() {
this.reset();
this.showForm = true;
this.title = '添加汇报概述';
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.buttonLoading = true;
addReportSummary(this.form).then(response => {
uni.showToast({
title: '新增成功',
icon: 'success'
});
this.showForm = false;
this.getList();
}).catch(() => {
uni.showToast({
title: '新增失败',
icon: 'error'
});
}).finally(() => {
this.buttonLoading = false;
});
}
});
},
handleDelete(row) {
const ids = row ? row.summaryId : this.selectedIds;
if (!ids || (Array.isArray(ids) && ids.length === 0)) {
listProject({ pageNum: 1, pageSize: 9999 }).then(res => {
const rawData = res.rows || [];
// 按照 uni-data-select 的标准格式处理数据
this.projectList = rawData.map(item => ({
value: item.projectId,
text: item.projectName,
// 保留原始数据用于提交
projectId: item.projectId,
projectName: item.projectName,
projectNum: item.projectNum,
projectCode: item.projectCode
}));
}).catch(err => {
console.error('获取项目列表失败:', err);
uni.showToast({
title: '请选择要删除的数据',
title: '获取项目列表失败',
icon: 'none'
});
return;
}
uni.showModal({
title: '确认删除',
content: '是否确认删除选中的数据？',
success: (res) => {
if (res.confirm) {
this.loading = true;
const deleteIds = Array.isArray(ids) ? ids.join(',') : ids;
delReportSummary(deleteIds).then(() => {
this.loading = false;
this.getList();
uni.showToast({
title: '删除成功',
icon: 'success'
});
}).catch(() => {
this.loading = false;
uni.showToast({
title: '删除失败',
icon: 'error'
});
});
}
}
});
},
formatDate(date) {
if (!date) return '-';
const d = new Date(date);
@@ -306,23 +139,48 @@ export default {
uni.navigateTo({
url: `/pages/workbench/construction/detail?summaryId=${item.summaryId}&reportTitle=${encodeURIComponent(item.reportTitle || '')}&reporter=${encodeURIComponent(item.reporter || '')}&projectName=${encodeURIComponent(item.projectName || '')}`
});
}
},
// 项目选择变化处理
handleProjectChange(value) {
this.form.projectId = value;
// 根据选择的项目ID获取项目名称
const selectedProject = this.projectList.find(item => item.projectId === value);
if (selectedProject) {
this.selectedProjectName = selectedProject.projectName;
}
},
}
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.container {
padding: 20rpx;
background-color: #f5f5f5;
min-height: 100vh;
}
.action-buttons {
.operation-tip {
display: flex;
gap: 20rpx;
align-items: center;
gap: 10rpx;
padding: 20rpx;
background-color: #e3f2fd;
border-radius: 8rpx;
margin-bottom: 20rpx;
border-left: 4rpx solid #007bff;
.tip-text {
font-size: 28rpx;
color: #007bff;
font-weight: 500;
}
}
.table-wrapper {
background-color: #fff;
border-radius: 10rpx;
@@ -382,10 +240,16 @@ export default {
}
}
}
.form-popup {
.form-popup-content {
background-color: #fff;
border-radius: 20rpx;
border-radius: 20rpx 20rpx 0 0;
overflow: hidden;
width: 100%;
max-height: 80vh;
display: flex;
flex-direction: column;
.popup-header {
display: flex;
justify-content: space-between;
@@ -399,7 +263,8 @@ export default {
}
.form-content {
padding: 30rpx;
max-height: 500rpx;
flex: 1;
overflow-y: auto;
}
.popup-footer {
display: flex;

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

@@ -74,11 +74,6 @@
</view>
<view class="table-cell">{{ item.remark || '-' }}</view>
<view class="table-cell">
<u-button
type="primary"
size="mini"
@click="handleUpdate(item)"
>修改</u-button>
<u-button
type="error"
size="mini"
@@ -99,24 +94,21 @@
@loadmore="loadMore"
></u-loadmore>
<!-- 新增/修改弹窗 -->
<u-popup v-model="showForm" mode="center" width="600rpx" height="800rpx">
<!-- 新增弹窗 -->
<uni-popup ref="formPopup" type="bottom" :mask-click="false">
<view class="form-popup">
<view class="popup-header">
<text class="popup-title">{{ title }}</text>
<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-width="180rpx">
<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"
@@ -124,30 +116,25 @@
:height="200"
></u-textarea>
</u-form-item>
<u-form-item label="图像" prop="ossIds">
<u-upload
v-model="form.ossIds"
:file-list="fileList"
@after-read="afterRead"
@delete="deleteFile"
:max-count="9"
multiple
></u-upload>
<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>
</u-popup>
</uni-popup>
<!-- 图片详情抽屉 -->
<u-popup v-model="imageDrawer" mode="right" width="600rpx" height="100%">
@@ -174,7 +161,8 @@
</template>
<script>
import { listReportDetail, addReportDetail, delReportDetail, getReportDetail, updateReportDetail } from '@/api/oa/reportDetail'
import { listReportDetail, addReportDetail, delReportDetail } from '@/api/oa/reportDetail'
import { uploadImage } from '@/api/common/upload'
export default {
data() {
@@ -193,10 +181,15 @@ export default {
total: 0,
// 汇报详情表格数据
reportDetailList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
showForm: false,
// 设备类别选项
categoryOptions: [
{ label: '挖掘机', value: '挖掘机' },
{ label: '推土机', value: '推土机' },
{ label: '装载机', value: '装载机' },
{ label: '起重机', value: '起重机' },
{ label: '混凝土泵车', value: '混凝土泵车' },
{ label: '其他', value: '其他' }
],
// 图片抽屉
imageDrawer: false,
// 查询参数
@@ -229,6 +222,9 @@ export default {
reportDetail: [
{ required: true, message: "汇报详情内容不能为空", trigger: "blur" }
],
ossIds: [
{ required: true, message: "请上传图片", trigger: "change" }
]
}
}
},
@@ -256,6 +252,14 @@ export default {
};
this.getList();
if (this.form.ossIds) {
this.fileList = this.form.ossIds.split(',').map(url => ({
url,
status: 'success',
message: '上传成功'
}));
}
},
methods: {
/** 查询汇报详情列表 */
@@ -300,14 +304,13 @@ export default {
// 取消按钮
cancel() {
this.showForm = false;
this.$refs.formPopup.close();
this.reset();
},
// 表单重置
reset() {
this.form = {
detailId: undefined,
summaryId: this.queryParams.summaryId,
deviceCode: undefined,
category: undefined,
@@ -341,77 +344,44 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.showForm = true;
this.title = "添加施工进度汇报详情";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const id = row.detailId;
getReportDetail(id).then(response => {
this.loading = false;
this.form = response.data || {};
// 处理图片文件列表
if (this.form.ossIds) {
this.fileList = this.form.ossIds.split(',').map((url, index) => ({
url: url,
status: 'success',
message: '上传成功'
}));
}
this.showForm = true;
this.title = "修改施工进度汇报详情";
}).catch(() => {
this.loading = false;
});
this.$refs.formPopup.open();
},
/** 提交按钮 */
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.buttonLoading = true;
// 处理图片数据
if (this.fileList.length > 0) {
this.form.ossIds = this.fileList.map(file => file.url).join(',');
}
if (this.form.detailId != null) {
updateReportDetail(this.form).then(response => {
uni.showToast({
title: '修改成功',
icon: 'success'
});
this.showForm = false;
this.getList();
}).catch(() => {
uni.showToast({
title: '修改失败',
icon: 'error'
});
}).finally(() => {
this.buttonLoading = false;
});
} else {
addReportDetail(this.form).then(response => {
uni.showToast({
title: '新增成功',
icon: 'success'
});
this.showForm = false;
this.getList();
}).catch(() => {
uni.showToast({
title: '新增失败',
icon: 'error'
});
}).finally(() => {
this.buttonLoading = false;
});
}
}
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;
});
},
@@ -468,24 +438,6 @@ export default {
});
},
// 文件上传后
afterRead(event) {
const { file } = event;
// 这里可以调用上传接口
// 暂时使用本地路径
this.fileList.push({
url: file.url,
status: 'success',
message: '上传成功'
});
},
// 删除文件
deleteFile(event) {
const { index } = event;
this.fileList.splice(index, 1);
},
// 加载更多
loadMore() {
if (this.loadMoreStatus === 'nomore') return;
@@ -507,6 +459,39 @@ export default {
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(',');
}
}
}
@@ -564,8 +549,6 @@ export default {
}
}
.action-buttons {
display: flex;
gap: 20rpx;
@@ -642,33 +625,40 @@ export default {
.form-popup {
background-color: #fff;
border-radius: 20rpx;
border-radius: 20rpx 20rpx 0 0;
overflow: hidden;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #e9ecef;
.popup-title {
font-size: 32rpx;
font-weight: bold;
}
}
.form-content {
padding: 30rpx;
max-height: 600rpx;
}
.popup-footer {
display: flex;
gap: 20rpx;
padding: 30rpx;
border-top: 1rpx solid #e9ecef;
}
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 {
@@ -699,4 +689,11 @@ export default {
}
}
}
.form-popup .u-form-item__label, .form-popup .u-form-item__label__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
</style>