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