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

4
pages/login/index.vue
View File

@@ -220,8 +220,8 @@ export default {
uni.switchTab({ uni.switchTab({
url: "/pages/conversation/conversationList/index", url: "/pages/conversation/conversationList/index",
}); });
await getSMSCodeFromOa(this.loginInfo.phoneNumber); await getSMSCodeFromOa(this.loginInfo.phoneNumber);
await loginOaByPhone(this.loginInfo.phoneNumber) await loginOaByPhone(this.loginInfo.phoneNumber)
this.loginInfo.password = ""; this.loginInfo.password = "";
this.loading = false; this.loading = false;

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

@@ -3,38 +3,53 @@
<!-- 操作说明 --> <!-- 操作说明 -->
<view class="operation-tip"> <view class="operation-tip">
<u-icon name="info-circle" color="#007bff" size="16"></u-icon> <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>
<!-- 数据列表 --> <!-- 数据列表 -->
<view class="table-wrapper"> <view class="masonry-list">
<scroll-view scroll-x class="table-scroll"> <view
<view class="table-container"> v-for="(item, index) in reportSummaryList"
<view class="table-header"> :key="item.summaryId"
<view class="header-cell">汇报标题</view> class="masonry-card"
<view class="header-cell">最近汇报时间</view> @click="handleRowClick(item)"
<view class="header-cell">汇报日期</view> >
<view class="header-cell">汇报人</view> <view class="card-title">{{ item.reportTitle || '-' }}</view>
<view class="header-cell">涉及项目</view> <view class="card-info">
<view class="header-cell">备注</view> <view class="info-row">
<text class="label">最近汇报时间：</text>
<text>{{ formatDate(item.lastUpdateTime) }}</text>
</view> </view>
<view class="table-body"> <view class="info-row">
<view <text class="label">汇报日期：</text>
v-for="(item, index) in reportSummaryList" <text>{{ formatDate(item.reportDate) }}</text>
:key="item.summaryId" </view>
class="table-row" <view class="info-row">
@click="handleRowClick(item)" <text class="label">汇报人：</text>
> <text>{{ item.reporter || '-' }}</text>
<view class="table-cell">{{ item.reportTitle || '-' }}</view> </view>
<view class="table-cell">{{ formatDate(item.lastUpdateTime) }}</view> <view class="info-row">
<view class="table-cell">{{ formatDate(item.reportDate) }}</view> <text class="label">涉及项目：</text>
<view class="table-cell">{{ item.reporter || '-' }}</view> <text>{{ item.projectName || '-' }}</text>
<view class="table-cell">{{ item.projectName || '-' }}</view> </view>
<view class="table-cell">{{ item.remark || '-' }}</view> <view class="info-row">
</view> <text class="label">备注：</text>
<text>{{ item.remark || '-' }}</text>
</view> </view>
</view> </view>
</scroll-view> </view>
</view> </view>
<!-- 分页 --> <!-- 分页 -->
@@ -44,13 +59,75 @@
@loadmore="loadMore" @loadmore="loadMore"
></u-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> </view>
</template> </template>
<script> <script>
import { listProject } from '@/api/oa/project' import { listProject } from '@/api/oa/project'
import { listReportSummary } from '@/api/oa/reportSummary' import { listReportSummary, addReportSummary } from '@/api/oa/reportSummary'
export default { export default {
data() { data() {
@@ -68,7 +145,43 @@ export default {
projectId: undefined, projectId: undefined,
type: 1 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() { onLoad() {
@@ -84,6 +197,9 @@ export default {
this.loading = false; this.loading = false;
this.selectedIds = []; this.selectedIds = [];
this.selectAll = false; this.selectAll = false;
if (this.reportSummaryList.length <= this.total) {
this.loadMoreStatus = 'nomore';
}
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
}); });
@@ -144,14 +260,77 @@ export default {
// 项目选择变化处理 // 项目选择变化处理
handleProjectChange(value) { handleProjectChange(value) {
this.form.projectId = 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> </script>
@@ -180,62 +359,48 @@ export default {
} }
} }
.add-button-container {
.table-wrapper { display: flex;
background-color: #fff; justify-content: center;
border-radius: 10rpx; margin-bottom: 30rpx;
overflow: hidden;
} }
.table-scroll { .masonry-list {
width: 100%; column-count: 2;
column-gap: 24rpx;
padding: 10rpx 0;
} }
.table-container { .masonry-card {
min-width: 1200rpx; // 设置最小宽度，确保表格内容不会被压缩 width: calc(100%% - 18rpx);
.table-header { margin-bottom: 24rpx;
display: flex; background: #fff;
background-color: #f8f9fa; border-radius: 16rpx;
border-bottom: 1rpx solid #e9ecef; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
.header-cell { display: inline-block;
width: 200rpx; // 固定列宽 break-inside: avoid;
padding: 20rpx 10rpx; padding: 32rpx 24rpx;
text-align: center; cursor: pointer;
font-weight: bold; transition: box-shadow 0.2s;
font-size: 28rpx; &:active {
flex-shrink: 0; // 防止列被压缩 box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
&.checkbox { background: #f8f9fa;
width: 100rpx; // 复选框列宽度
}
}
} }
.table-body { .card-title {
.table-row { font-size: 32rpx;
font-weight: bold;
margin-bottom: 16rpx;
color: #007bff;
}
.card-info {
display: flex;
flex-direction: column;
gap: 8rpx;
.info-row {
display: flex; display: flex;
border-bottom: 1rpx solid #e9ecef; .label {
cursor: pointer; color: #888;
transition: background-color 0.2s; min-width: 120rpx;
&: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; // 复选框列宽度
}
} }
} }
} }

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

@@ -22,69 +22,49 @@
</view> </view>
</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"> <view class="list-wrapper">
<scroll-view scroll-x class="table-scroll"> <u-swipe-action>
<view class="table-container"> <u-swipe-action-item
<view class="table-header"> v-for="(item, index) in reportDetailList"
<view class="header-cell checkbox"> :key="item.detailId"
<u-checkbox v-model="selectAll" @change="handleSelectAll"></u-checkbox> :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>
<view class="header-cell">设备编号</view> <view class="item-row">
<view class="header-cell">设备类别</view> <text class="item-label">设备类别：</text>
<view class="header-cell">汇报详情内容</view> <text class="item-value">{{ item.category || '-' }}</text>
<view class="header-cell">图片概况</view> </view>
<view class="header-cell">备注</view> <view class="item-row">
<view class="header-cell">操作</view> <text class="item-label">汇报详情内容：</text>
</view> <text class="item-value">{{ item.reportDetail || '-' }}</text>
</view>
<u-checkbox-group v-model="selectedIds" @change="handleSelectionChange"> <view class="item-row">
<view class="table-body"> <text class="item-label">图片概况：</text>
<view <view v-if="item.ossIds">
v-for="(item, index) in reportDetailList" <u-image
:key="item.detailId" :src="item.ossIds.split(',')[0]"
class="table-row" width="60rpx"
> height="60rpx"
<view class="table-cell checkbox"> @click.stop="handleImageDetail(item)"
<u-checkbox ></u-image>
: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> </view>
<text v-else>-</text>
</view> </view>
</u-checkbox-group> <view class="item-row">
</view> <text class="item-label">备注：</text>
</scroll-view> <text class="item-value">{{ item.remark || '-' }}</text>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view> </view>
<!-- 分页 --> <!-- 分页 -->
@@ -94,6 +74,13 @@
@loadmore="loadMore" @loadmore="loadMore"
></u-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"> <uni-popup ref="formPopup" type="bottom" :mask-click="false">
<view class="form-popup"> <view class="form-popup">
@@ -269,6 +256,9 @@ export default {
this.reportDetailList = response.rows || []; this.reportDetailList = response.rows || [];
this.total = response.total || 0; this.total = response.total || 0;
this.loading = false; this.loading = false;
if (this.reportDetailList.length >= this.total) {
this.loadMoreStatus = 'nomore';
}
// 重置选中状态 // 重置选中状态
this.selectedIds = []; this.selectedIds = [];
this.selectAll = false; this.selectAll = false;
@@ -450,7 +440,8 @@ export default {
this.reportDetailList = [...this.reportDetailList, ...newData]; this.reportDetailList = [...this.reportDetailList, ...newData];
this.total = response.total || 0; this.total = response.total || 0;
if (newData.length < this.queryParams.pageSize) { // 判断是否还有更多数据：当前获取的数据总数 >= 总数据量
if (this.reportDetailList.length >= this.total) {
this.loadMoreStatus = 'nomore'; this.loadMoreStatus = 'nomore';
} else { } else {
this.loadMoreStatus = 'loadmore'; 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; border-radius: 10rpx;
overflow: hidden; padding: 10rpx 0;
} }
.table-scroll { .detail-list-item {
width: 100%; padding: 32rpx 24rpx;
} background: #fff;
border-radius: 12rpx;
.table-container { margin-bottom: 16rpx;
min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩 border: 1rpx solid #e9ecef;
.table-header { box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
.item-row {
display: flex; display: flex;
background-color: #f8f9fa; align-items: center;
border-bottom: 1rpx solid #e9ecef; margin-bottom: 8rpx;
.item-label {
.header-cell { color: #888;
width: 200rpx; // 固定列宽 min-width: 140rpx;
padding: 20rpx 10rpx;
text-align: center;
font-weight: bold;
font-size: 28rpx;
flex-shrink: 0; // 防止列被压缩
&.checkbox {
width: 100rpx; // 复选框列宽度
}
} }
} .item-value {
color: #333;
.table-body { flex: 1;
.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;
}
}
}
} }
} }
} }
@@ -696,4 +643,28 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; 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> </style>

18
util/oaRequest.js
View File

@@ -1,6 +1,7 @@
import { getToken } from './auth' import { getToken } from './auth'
import errorCode from './errorCode' import errorCode from './errorCode'
import { toast, showConfirm, tansParams } from './common' import { toast, showConfirm, tansParams } from './common'
import { getSMSCodeFromOa, loginOaByPhone } from '../api/oa/login'
let timeout = 10000 let timeout = 10000
const baseUrl = 'http://110.41.139.73:8080' const baseUrl = 'http://110.41.139.73:8080'
@@ -42,8 +43,23 @@ const request = config => {
const code = res.data.code || 200 const code = res.data.code || 200
const msg = errorCode[code] || res.data.msg || errorCode['default'] const msg = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) { if (code === 401) {
showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => { showConfirm('登录状态已过期，是否刷新登录状态').then(async res => {
if (res.confirm) { if (res.confirm) {
// 从store中获取phoneNumber，并依次调用getSMSCodeFromOa和loginOaByPhone
const store = require('@/store').default
const phoneNumber = store.getters.storeSelfInfo?.phoneNumber
if (phoneNumber) {
try {
await getSMSCodeFromOa(phoneNumber)
await loginOaByPhone(phoneNumber)
} catch (e) {
console.log('OA自动登录失败', e)
toast('OA自动登录失败')
}
} else {
toast('无法获取手机号，OA自动登录失败')
}
// 登录
// store.dispatch('LogOut').then(res => { // store.dispatch('LogOut').then(res => {
// uni.reLaunch({ url: '/pages/login' }) // uni.reLaunch({ url: '/pages/login' })
// }) // })