feat(项目详情): 添加今日检查项和问题整改反馈功能

- 新增TodayExamine和ReformFeedback页面
- 在ControlView组件中添加跳转逻辑
- 完善项目详情页的tab切换功能
- 添加BasicView和RecordView组件展示项目基本信息和整改记录
- 更新pages.json配置路由
This commit is contained in:
liangbin 2026-01-20 11:29:45 +08:00
parent 8821c01725
commit 005ce674db
8 changed files with 647 additions and 8 deletions

View File

@ -42,6 +42,20 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{
"path": "pages/TodayExamine/index",
"style": {
"navigationBarTitleText": "今日检查项",
"navigationStyle": "custom"
}
},
{
"path": "pages/ReformFeedback/index",
"style": {
"navigationBarTitleText": "问题整改反馈",
"navigationStyle": "custom"
}
},
{ {
"path": "pages/user/index", "path": "pages/user/index",
"style": { "style": {

View File

@ -1 +1,127 @@
<!-- 项目详情-基本项目信息 --> <!-- 项目详情-基本项目信息 -->
<template>
<view class="MainBox">
<view class="labebBox">申请单位</view>
<view class="fw-600">{{ progectInfo.applyUnit }}</view>
<view class="labebBox">施工单位</view>
<view class="fw-600">{{ progectInfo.constructUnit }}</view>
<view class="labebBox">施工地点</view>
<view class="fw-600">{{ progectInfo.site }}</view>
<view class="labebBox">附件资料</view>
<view class="ListBox">
<u-virtual-list :list-data="dataSource" :item-height="80" height="100%">
<template #default="{ item, index }">
<view class="CardBox" :key="item.id">
<view class="FlexBox">
<img class="CardImg" src="@/static/icon/file-icon.png">
<view class="CardTxt">{{ item.name }}</view>
</view>
<view>
<u-icon name="download" size="30"></u-icon>
</view>
</view>
</template>
</u-virtual-list>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const progectInfo = ref({
Id: 1,
applyUnit: '北京CBD改造项目管理有限公司',
constructUnit: '北京CBD改造项目施工有限公司',
site: '北京市海淀区',
})
const dataSource = ref([
{
id: 1,
name: '项目合同.pdf'
},
{
id: 2,
name: '项目进度表.xlsx'
},
{
id: 3,
name: '项目成本表.xlsx'
},
{
id: 4,
name: '项目风险卡.xlsx'
},
{
id: 5,
name: '项目整改记录.xlsx'
},
{
id: 6,
name: '项目风险管控类型.xlsx'
}
])
</script>
<style lang="scss" scoped>
.labebBox {
font-size: 28rpx;
color: #666;
margin-top: 20rpx;
}
.mt-20 {
margin-top: 20rpx;
}
.fw-600 {
font-size: 28rpx;
font-weight: 600;
color: #333;
}
.FlexBox {
display: flex;
align-items: center;
gap: 20rpx;
}
.MainBox {
height: 100%;
overflow: hidden;
padding: 20rpx;
background-color: #fff;
.ListBox {
margin-top: 20rpx;
height: calc(100% - 384rpx);
padding: 20rpx;
.CardBox {
width: 100%;
height: 100rpx;
background-color: #fff;
padding: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
border: 1rpx solid #c7c7c7;
border-radius: 10rpx;
.CardImg {
width: 50rpx;
height: 50rpx;
}
.CardTxt {
width: 400rpx;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
</style>

View File

@ -13,7 +13,7 @@
</u-col> </u-col>
</u-row> </u-row>
<view style="margin-top: 20rpx;"> <view style="margin-top: 20rpx;">
<u-button type="primary" size="medium">提交今日风险检查项</u-button> <u-button type="primary" size="medium" @click="submitCheck">提交今日风险检查项</u-button>
</view> </view>
</view> </view>
<view class="BoxB"> <view class="BoxB">
@ -31,7 +31,7 @@
<u-tag type="warning" plain text="待整改" shape="circle"></u-tag> <u-tag type="warning" plain text="待整改" shape="circle"></u-tag>
</view> </view>
<view> <view>
<u-button text="整改反馈" color="#2979ff" size="small"></u-button> <u-button text="整改反馈" color="#2979ff" size="small" @click="goFeedback(index)"></u-button>
</view> </view>
</view> </view>
@ -53,6 +53,18 @@ const dataSource = ref([
{ id: 6, name: 'AI返现安全帽佩戴不规范', time: '2023-08-06 10:00:00' }, { id: 6, name: 'AI返现安全帽佩戴不规范', time: '2023-08-06 10:00:00' },
{ id: 7, name: 'AI返现安全帽佩戴不规范', time: '2023-08-07 10:00:00' }, { id: 7, name: 'AI返现安全帽佩戴不规范', time: '2023-08-07 10:00:00' },
]) ])
//
const submitCheck = () => {
uni.navigateTo({
url: '/pages/TodayExamine/index',
})
}
//
const goFeedback = (index) => {
uni.navigateTo({
url: '/pages/ReformFeedback/index',
})
}
</script> </script>

View File

@ -1 +1,129 @@
<!-- 项目详情-整改记录 --> <!-- 项目详情-整改记录 -->
<template>
<view class="MainBox">
<u-virtual-list :list-data="dataSource" :item-height="260" height="100%">
<template #default="{ item }">
<view class="CardBox">
<view class="fw-600">{{ item.name }}</view>
<view class="FlexBox">
<view class="LableBox">整改内容</view>
<view class="TxtBox">{{ item.details }}</view>
</view>
<view class="FlexBox">
<view class="imgBox" v-for="(img, index) in item.imgUrl" :key="index">
<image :src="img" mode="aspectFill"></image>
</view>
</view>
<view class="FlexBox">
<view>审核意见</view>
<view>{{ item.details }}</view>
</view>
<view class="fb-gray">{{ item.time }}</view>
</view>
</template>
</u-virtual-list>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const dataSource = ref([
{
id: 1,
name: '消防器械摆放不当',
time: '2023-08-01 10:00:00',
details: '已重新规划消防器械摆区域,并设置标识',
opinion: '整改到位,符合项目要求',
imgUrl: ['https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg', 'https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg']
},
{
id: 2,
name: '项目风险管控类型',
time: '2023-08-02 10:00:00',
details: '已重新规划消防器械摆区域,并设置标识',
opinion: '整改到位,符合项目要求',
imgUrl: ['https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg']
},
{
id: 3,
name: '项目风险管控类型',
time: '2023-08-02 10:00:00',
details: '已重新规划消防器械摆区域,并设置标识',
opinion: '整改到位,符合项目要求',
imgUrl: ['https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg']
},
])
</script>
<style lang="scss" scoped>
.FlexBox {
display: flex;
// align-items: flex-start;
gap: 20rpx;
}
.fb-gray {
color: #999;
}
.fw-600 {
font-weight: bold;
color: #333;
}
.MainBox {
height: 100%;
overflow: hidden;
padding: 20rpx;
background-color: #fff;
padding: 20rpx;
.CardBox {
width: 100%;
height: 380rpx;
background-color: #fff;
padding: 20rpx;
display: flex;
flex-direction: column;
border: 1rpx solid #c7c7c7;
// box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
gap: 20rpx;
.LableBox {
width: 160rpx;
font-size: 24rpx;
color: #666;
}
.TxtBox {
width: calc(100% - 160rpx);
font-size: 24rpx;
color: #333;
font-weight: bold;
overflow: hidden;
/* 隐藏溢出内容 */
white-space: nowrap;
/* 强制不换行 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.imgBox {
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
}
</style>

View File

@ -3,7 +3,7 @@
<view class="PageBox"> <view class="PageBox">
<view class="TopBox FlexBox"> <view class="TopBox FlexBox">
<view class="iconBox FlexBox"> <view class="iconBox FlexBox">
<!-- 返回上一--> <!-- 返回列表-->
<u-icon name="arrow-leftward" size="24" @click="goBack"></u-icon> <u-icon name="arrow-leftward" size="24" @click="goBack"></u-icon>
</view> </view>
<view class="Title">{{ progectInfo.name }}</view> <view class="Title">{{ progectInfo.name }}</view>
@ -44,7 +44,9 @@
<up-tabs :list="list1" @click="click"></up-tabs> <up-tabs :list="list1" @click="click"></up-tabs>
</view> </view>
<view class="displayCase"> <view class="displayCase">
<ControlView></ControlView> <ControlView v-if="currentTab === 1"></ControlView>
<BasicView v-if="currentTab === 2" ></BasicView>
<RecordView v-if="currentTab === 3"></RecordView>
</view> </view>
</view> </view>
<view class="FootBox"> <view class="FootBox">
@ -58,6 +60,8 @@
</template> </template>
<script setup> <script setup>
import ControlView from './components/ControlView.vue' import ControlView from './components/ControlView.vue'
import BasicView from './components/BasicView.vue'
import RecordView from './components/RecordView.vue'
import { ref } from 'vue' import { ref } from 'vue'
const progectInfo = ref({ const progectInfo = ref({
Id: 1, Id: 1,
@ -68,7 +72,9 @@ const progectInfo = ref({
riskControlType: '动火作业风险卡', riskControlType: '动火作业风险卡',
percentage: 30 percentage: 30
}) })
// tabs
const currentTab = ref(1)
// tabs
const list1 = ref([ const list1 = ref([
{ {
name: '风险管控实施', name: '风险管控实施',
@ -83,7 +89,16 @@ const list1 = ref([
id: 3 id: 3
} }
]) ])
// tabs
const click = (e) => {
currentTab.value = e.id
}
//
const goBack = () => {
uni.switchTab({
url: '/pages/ProgectList/index'
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.FlexBox { .FlexBox {
@ -112,8 +127,6 @@ const list1 = ref([
.PageBox { .PageBox {
background-color: #ff9900; background-color: #ff9900;
height: 100vh; height: 100vh;

View File

@ -0,0 +1,193 @@
<!-- 问题整改反馈 -->
<template>
<view class="PageBox">
<view class="TopBox FlexBox">
<view class="iconBox FlexBox">
<u-icon name="arrow-leftward" size="24" @click="goBack"></u-icon>
</view>
<view class="Title">问题整改反馈</view>
<view class="informBox"> </view>
</view>
<view class="ContentBox">
<view class="ListBox">
<view class="h2Box">问题详情</view>
<view class="ListItem">
<view class="LabelBox">问题描述</view>
<view class="ValueBox">
<u-input v-model="problemDesc" placeholder="请输入问题描述" disabled></u-input>
</view>
</view>
<view class="ListItem">
<view class="LabelBox">反馈人</view>
<view class="ValueBox">
<u-input v-model="feedbackPerson" placeholder="请输入反馈人" disabled></u-input>
</view>
</view>
<view class="ListItem">
<view class="LabelBox">反馈时间</view>
<view class="ValueBox">
<u-input v-model="feedbackTime" placeholder="请输入反馈时间" disabled></u-input>
</view>
</view>
<view class="ListItem">
<view class="LabelBox">现场照片</view>
<view class="ValueBox FlexBox">
<u-image url="https://img.yzcdn.cn/vant/user-avatar.png" width="100rpx"
height="100rpx"></u-image>
</view>
</view>
<view class="ListItem">
<view class="LabelBox">反馈时间</view>
<view class="ValueBox">
<u-input v-model="feedbackTime" placeholder="请输入反馈时间" disabled></u-input>
</view>
</view>
<view class="h2Box">整改内容</view>
<view class="ListItem">
<view class="LabelBox mustBox">整改措施描述</view>
<view class="ValueBox">
<u-textarea v-model="reformDesc" placeholder="请输入整改措施描述"></u-textarea>
</view>
</view>
<view class="ListItem">
<view class="LabelBox mustBox">整改完成照片</view>
<view class="ValueBox">
<u-upload v-model="reformPhoto" :max-count="1" :auto-upload="false" :preview-size="100"
@change="handleChange"></u-upload>
</view>
</view>
<view class="ListItem">
<view class="LabelBox mustBox">整改完成时间</view>
<view class="ValueBox">
<up-datetime-picker hasInput :show="showTimePicker" v-model="reformTime"
mode="datetime" @change="handleTimePicker"></up-datetime-picker>
</view>
</view>
</view>
</view>
<view class="FootBox">
<u-button type="primary" plain>保存草稿</u-button>
<u-button type="primary">提交检查项</u-button>
</view>
</view>
</template>
<script setup>
import dayjs from 'dayjs'
import { ref } from 'vue'
//
const reformDesc = ref('')
//
const reformPhoto = ref([])
//
const reformTime = ref('')
//
const showTimePicker = ref(false)
//
const handleTimePicker = (e) => {
showTimePicker.value = false
reformTime.value = dayjs(e.detail).format('YYYY-MM-DD HH:mm')
}
//
const goBack = () => {
uni.navigateBack({
delta: 1
})
}
</script>
<style lang="scss" scoped>
.h2Box {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-top: 20rpx;
}
.mustBox::after {
content: '*';
color: red;
margin-left: 5rpx;
}
.FlexBox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.PageBox {
background-color: #ff9900;
height: 100vh;
overflow: hidden;
.TopBox {
height: 100rpx;
padding: 20rpx;
background-color: #fff;
.iconBox {
font-size: 32rpx;
}
.Title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.informBox {
.MsgTxt {
padding: 8rpx;
background-color: hsla(17, 100%, 50%, 0.849);
color: #fff;
position: absolute;
top: 16rpx;
right: 16rpx;
border-radius: 50%;
}
}
}
.ContentBox {
background-color: #c5d5d6;
height: calc(100vh - 250rpx);
overflow: hidden;
}
.FootBox {
display: flex;
align-items: center;
justify-content: space-between;
height: 150rpx;
gap: 20rpx;
padding: 20rpx;
background-color: #fff;
font-weight: bold;
}
}
.ListBox {
height: 100%;
padding: 20rpx;
background-color: #fff;
overflow: auto;
.ListItem {
margin-bottom: 20rpx;
.LabelBox {
font-weight: bold;
font-size: 28rpx;
color: #333;
margin-bottom: 10rpx;
}
}
}
</style>

View File

@ -0,0 +1,153 @@
<!-- 今日检查项 -->
<template>
<view class="PageBox">
<view class="TopBox FlexBox">
<view class="iconBox FlexBox">
<!-- 返回列表页 -->
<u-icon name="arrow-leftward" size="24" @click="goBack"></u-icon>
</view>
<view class="Title">今日风险检查项</view>
<view class="informBox">
<u-icon name="bell-fill" size="24"></u-icon>
<view class="MsgTxt"></view>
</view>
</view>
<view class="ContentBox">
<view class="ListBox">
<view class="ListItem" v-for="item in checkItemList" :key="item.id">
<view class="LabelBox">{{ item.checkItemName }}</view>
<view class="ValueBox">
<u-radio-group v-model="item.value" @change="change(item)">
<u-radio label="合格" :border-color="item.value === '' ? '#ff9900' : '#c5d5d6'"></u-radio>
<u-radio label="不合格" :border-color="item.value === '' ? '#ff9900' : '#c5d5d6'"></u-radio>
</u-radio-group>
</view>
</view>
</view>
</view>
<view class="FootBox">
<u-button type="primary" plain>保存草稿</u-button>
<u-button type="primary">提交检查项</u-button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
//
const checkItemList = ref([
{
id: 1,
checkItemName: '作业人员是否持证上岗',
value: '是'
},
{
id: 2,
checkItemName: '作业人员是否有安全装备',
value: '是'
},
{
id: 3,
checkItemName: '作业人员是否有安全工具',
value: '是'
}
])
//
const goBack = () => {
uni.navigateBack({
delta: 1
})
}
</script>
<style lang="scss" scoped>
.FlexBox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.PBasicBox {
padding: 20rpx;
background-color: #fff;
.LabelBox {
font-size: 24rpx;
color: #666;
margin-top: 20rpx;
}
.LabelBoxTxt {
font-size: 24rpx;
color: #333;
font-weight: bold;
}
}
.PageBox {
background-color: #ff9900;
height: 100vh;
overflow: hidden;
.TopBox {
height: 100rpx;
padding: 20rpx;
background-color: #fff;
.iconBox {
font-size: 32rpx;
}
.Title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.informBox {
.MsgTxt {
padding: 8rpx;
background-color: hsla(17, 100%, 50%, 0.849);
color: #fff;
position: absolute;
top: 16rpx;
right: 16rpx;
border-radius: 50%;
}
}
}
.ContentBox {
background-color: #c5d5d6;
height: calc(100vh - 250rpx);
overflow: hidden;
}
.FootBox {
display: flex;
align-items: center;
justify-content: space-between;
height: 150rpx;
gap: 20rpx;
padding: 20rpx;
background-color: #fff;
font-weight: bold;
}
}
.ListBox {
height: 100%;
padding: 20rpx;
background-color: #fff;
overflow: auto;
.ListItem {
margin-bottom: 20rpx;
.LabelBox {
font-weight: bold;
font-size: 28rpx;
color: #333;
margin-top: 20rpx;
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 645 B