bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: H5恢复重建填报 去掉必填小红点

Browse Source
This commit is contained in:
huangchenhao 2026-05-06 09:10:20 +08:00
parent a8f8f311b3
commit db10d94b16
1 changed files with 196 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

346
packages/mobile/src/views/Rebuild/RebuildAdd.vue
View File

@ -1,59 +1,109 @@
<template> <template>
<PageContainer title="项目填报" @click-back="handleClickBack"> <PageContainer title="项目填报" @click-back="handleClickBack">
<div class="content"> <div class="content">
<PanelItem> <PanelItem>
<van-form ref="formRef" label-align="left" colon> <van-form ref="formRef" label-align="left" colon>
<van-field v-model="form.project.districtName" label="区县名称" center placeholder="请填写" required <van-field
:rules="[{ required: true, message: '请填写区县名称' }]" /> v-model="form.project.districtName"
<RoadRoutesPicker v-model="form.project.routeNo" label="线路编号" center placeholder="请选择" required label="区县名称"
:rules="[{ required: true, message: '请选择线路编号' }]" @change="handleRouteNoChange" /> center
<van-field v-model="form.project.startStakeNo" label="起点桩号" disabled center placeholder="请选择线路编号" placeholder="请填写"
required :rules="[{ required: true, message: '请填写起点桩号' }]" /> :rules="[{ required: true, message: '请填写区县名称' }]"
<van-field v-model="form.project.endStakeNo" label="止点桩号" disabled center placeholder="请选择线路编号" />
required :rules="[{ required: true, message: '请填写止点桩号' }]" /> <RoadRoutesPicker
<van-field v-model="form.project.implementMileage" label="实施里程" center placeholder="单位:公里" required v-model="form.project.routeNo"
type="number" :rules="[{ required: true, message: '请填写实施里程' }]"> label="线路编号"
<template #extra> center
公里 placeholder="请选择"
</template> :rules="[{ required: true, message: '请选择线路编号' }]"
</van-field> @change="handleRouteNoChange"
<van-field v-model="form.project.earthworkLoss" label="塌方及损失" center placeholder="(方/万元)" required />
:rules="[{ required: true, message: '请填写塌方及损失' }]" /> <van-field
<van-field v-model="form.project.disasterType" label="灾害类型" center placeholder="请填写" required v-model="form.project.startStakeNo"
:rules="[{ required: true, message: '请填写灾害类型' }]" /> label="起点桩号"
<van-field v-model="form.project.locationRoute" label="地点路线" center placeholder="请填写" required disabled
:rules="[{ required: true, message: '请填写地点路线' }]" /> center
<van-field v-model="form.project.roadLocation" label="路况位置" center placeholder="请填写" required placeholder="请选择线路编号"
:rules="[{ required: true, message: '请填写路况位置' }]" /> :rules="[{ required: true, message: '请填写起点桩号' }]"
<van-field v-model="form.project.blockedPointName" label="阻断点小地名" center placeholder="请填写" required />
:rules="[{ required: true, message: '请填写阻断点小地名' }]" /> <van-field
<van-field v-model="form.project.estimatedCost" label="恢复重建预估费用" center placeholder="请填写" required v-model="form.project.endStakeNo"
:rules="[{ required: true, message: '请填写恢复重建预估费用' }]"> label="止点桩号"
<template #extra> disabled
万元 center
</template> placeholder="请选择线路编号"
</van-field> :rules="[{ required: true, message: '请填写止点桩号' }]"
<DisasterFileUpload label="附件上传" v-model="form.fileList"></DisasterFileUpload> />
</van-form> <van-field
v-model="form.project.implementMileage"
</PanelItem> label="实施里程"
</div> center
placeholder="单位:公里"
<van-button type="primary" class="add-btn" icon="plus" @click="handleAdd"> type="number"
提交 :rules="[{ required: true, message: '请填写实施里程' }]"
</van-button> >
</PageContainer> <template #extra> 公里 </template>
</van-field>
<van-field
v-model="form.project.earthworkLoss"
label="塌方及损失"
center
placeholder="(方/万元)"
:rules="[{ required: true, message: '请填写塌方及损失' }]"
/>
<van-field
v-model="form.project.disasterType"
label="灾害类型"
center
placeholder="请填写"
:rules="[{ required: true, message: '请填写灾害类型' }]"
/>
<van-field
v-model="form.project.locationRoute"
label="地点路线"
center
placeholder="请填写"
:rules="[{ required: true, message: '请填写地点路线' }]"
/>
<van-field
v-model="form.project.roadLocation"
label="路况位置"
center
placeholder="请填写"
:rules="[{ required: true, message: '请填写路况位置' }]"
/>
<van-field
v-model="form.project.blockedPointName"
label="阻断点小地名"
center
placeholder="请填写"
:rules="[{ required: true, message: '请填写阻断点小地名' }]"
/>
<van-field
v-model="form.project.estimatedCost"
label="恢复重建预估费用"
center
placeholder="请填写"
:rules="[{ required: true, message: '请填写恢复重建预估费用' }]"
>
<template #extra> 万元 </template>
</van-field>
<DisasterFileUpload label="附件上传" v-model="form.fileList"></DisasterFileUpload>
</van-form>
</PanelItem>
</div>
<van-button type="primary" class="add-btn" icon="plus" @click="handleAdd"> 提交 </van-button>
</PageContainer>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, watch, reactive, toRaw } from 'vue' import { ref, onMounted, watch, reactive, toRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import PageContainer from '@/components/PageContainer.vue' import PageContainer from '@/components/PageContainer.vue'
import { showToast, showLoadingToast } from "vant"; import { showToast, showLoadingToast } from 'vant'
import PanelItem from '@/components/PanelItem.vue' import PanelItem from '@/components/PanelItem.vue'
import { request } from "../../../../shared/utils/request"; import { request } from '../../../../shared/utils/request'
import RoadRoutesPicker from '../DisasterManagement/components/RoadRoutesPicker.vue' import RoadRoutesPicker from '../DisasterManagement/components/RoadRoutesPicker.vue'
import DisasterFileUpload from '../DisasterManagement/components/DisasterFileUpload.vue' import DisasterFileUpload from '../DisasterManagement/components/DisasterFileUpload.vue'
@ -61,136 +111,132 @@ const router = useRouter()
const route = useRoute() const route = useRoute()
const form = reactive({ const form = reactive({
project: { project: {
districtName: null, districtName: null,
routeNo: null, routeNo: null,
startStakeNo: null, startStakeNo: null,
endStakeNo: null, endStakeNo: null,
implementMileage: null, implementMileage: null,
earthworkLoss: null, earthworkLoss: null,
disasterType: null, disasterType: null,
locationRoute: null, locationRoute: null,
roadLocation: null, roadLocation: null,
blockedPointName: null, blockedPointName: null,
estimatedCost: null, estimatedCost: null,
}, },
fileList: [] fileList: [],
}) })
const formRef = ref(); const formRef = ref()
// 获取灾害事件详情 // 获取灾害事件详情
const getDetail = async (id) => { const getDetail = async (id) => {
try { try {
const res = await request({ const res = await request({
url: '/snow-ops-platform/water-damage/getById', url: '/snow-ops-platform/water-damage/getById',
method: 'GET', method: 'GET',
params: { params: {
id id,
} },
}) })
if (res.code === '00000') { if (res.code === '00000') {
form.project.districtName = res.data.event.district form.project.districtName = res.data.event.district
form.project.routeNo = res.data.routeNo form.project.routeNo = res.data.routeNo
form.project.startStakeNo = res.data.event.startStakeNo form.project.startStakeNo = res.data.event.startStakeNo
form.project.endStakeNo = res.data.event.endStakeNo form.project.endStakeNo = res.data.event.endStakeNo
form.project.implementMileage = res.data.event.blockedMileage form.project.implementMileage = res.data.event.blockedMileage
form.project.earthworkLoss = Array.isArray(res.data.lossList) ? res.data.lossList.reduce((sum, item) => sum + (item.totalAmount || 0), 0) : 0 form.project.earthworkLoss = Array.isArray(res.data.lossList) ? res.data.lossList.reduce((sum, item) => sum + (item.totalAmount || 0), 0) : 0
form.project.disasterType = res.data.roadConditionType form.project.disasterType = res.data.roadConditionType
form.project.locationRoute = res.data.occurLocation form.project.locationRoute = res.data.occurLocation
form.project.roadLocation = res.data.event.blockedPointName form.project.roadLocation = res.data.event.blockedPointName
form.project.blockedPointName = res.data.event.blockedPointName form.project.blockedPointName = res.data.event.blockedPointName
form.project.estimatedCost = res.data.event.estimatedRecoveryCost form.project.estimatedCost = res.data.event.estimatedRecoveryCost
form.fileList = res.data.fileList || [] form.fileList = res.data.fileList || []
} else { } else {
throw new Error(res.message) throw new Error(res.message)
}
} catch (error) {
showToast({
type: "fail",
message: error.message,
});
} }
} catch (error) {
showToast({
type: 'fail',
message: error.message,
})
}
} }
onMounted(() => { onMounted(() => {
if (route.params.data) { if (route.params.data) {
const data = JSON.parse(decodeURIComponent(route.params.data)); const data = JSON.parse(decodeURIComponent(route.params.data))
// console.log('@@@@data', data); // console.log('@@@@data', data);
// 在有传参的时候 调用接口去获取数据 并且初始化表单 // 在有传参的时候 调用接口去获取数据 并且初始化表单
getDetail(data); getDetail(data)
} else { } else {
// console.log('无传入数据'); // console.log('无传入数据');
} }
}) })
const handleClickBack = () => { const handleClickBack = () => {
if (route.params.data) { if (route.params.data) {
router.push('/') router.push('/')
} else { } else {
router.push('/rebuild') router.push('/rebuild')
} }
} }
const handleAdd = async () => { const handleAdd = async () => {
// 先进行表单校验 // 先进行表单校验
if (!formRef.value) { if (!formRef.value) {
showToast('表单初始化失败'); showToast('表单初始化失败')
return; return
} }
try { try {
const isValid = await formRef.value.validate(); const isValid = await formRef.value.validate()
// 表单校验通过，继续处理提交逻辑 // 表单校验通过，继续处理提交逻辑
const toast = showLoadingToast({ const toast = showLoadingToast({
message: "上报中...", message: '上报中...',
forbidClick: true, forbidClick: true,
duration: 0, // 设置为0表示不会自动关闭 duration: 0, // 设置为0表示不会自动关闭
}); })
console.log('表单校验通过，提交数据:', form); console.log('表单校验通过，提交数据:', form)
const res = await request({ const res = await request({
url: '/snow-ops-platform/recovery/add', url: '/snow-ops-platform/recovery/add',
method: 'POST', method: 'POST',
data: form data: form,
}) })
toast.close(); toast.close()
if (res.code === '00000') { if (res.code === '00000') {
showToast('提交成功'); showToast('提交成功')
handleClickBack(); handleClickBack()
} else { } else {
showToast('提交失败, 请稍后重试或联系管理员'); showToast('提交失败, 请稍后重试或联系管理员')
}
} catch (error) {
// console.log('表单校验失败:', error);
showToast('请检查并完善表单信息');
} }
} catch (error) {
// console.log('表单校验失败:', error);
showToast('请检查并完善表单信息')
}
} }
const handleRouteNoChange = (item) => { const handleRouteNoChange = (item) => {
form.project.startStakeNo = item.startStakeNo form.project.startStakeNo = item.startStakeNo
form.project.endStakeNo = item.endStakeNo form.project.endStakeNo = item.endStakeNo
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
padding: 20px 0px 80px 0px; padding: 20px 0px 80px 0px;
} }
.add-btn { .add-btn {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
left: 16px; left: 16px;
right: 16px; right: 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
margin: 0 auto; margin: 0 auto;
border-radius: 24px; border-radius: 24px;
font-size: 16px; font-size: 16px;
height: 44px; height: 44px;
z-index: 999; z-index: 999;
} }
</style> </style>