139 lines
3.2 KiB
Vue
139 lines
3.2 KiB
Vue
<template>
|
|
<PageContainer title="灾毁填报" @click-back="handleClickBack" class="page-container">
|
|
<!-- 当前站点信息 -->
|
|
<CurrentSite />
|
|
|
|
<!-- 事件类型 -->
|
|
<PanelItem title="事件类型">
|
|
<van-radio-group v-model="eventType" direction="horizontal" class="event-type-group">
|
|
<van-radio name="water">水毁灾害</van-radio>
|
|
<van-radio name="ice">冰雪灾害</van-radio>
|
|
</van-radio-group>
|
|
</PanelItem>
|
|
|
|
<!-- 根据事件类型渲染不同表单 -->
|
|
<WaterDisaster
|
|
v-if="eventType === 'water'"
|
|
ref="waterDisasterRef"
|
|
v-model="waterDisasterData"
|
|
/>
|
|
|
|
<!-- 冰雪灾害表单（待实现） -->
|
|
<div v-else class="coming-soon">
|
|
<van-empty description="冰雪灾害表单开发中..." />
|
|
</div>
|
|
|
|
<!-- 提交按钮 -->
|
|
<van-button type="primary" class="footer-btn" @click="handleSubmit" :loading="submitting">
|
|
提交
|
|
</van-button>
|
|
</PageContainer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { showToast, showSuccessToast, showFailToast } from 'vant'
|
|
import PageContainer from '@/components/PageContainer.vue'
|
|
import CurrentSite from '@/components/CurrentSite.vue'
|
|
import PanelItem from '@/components/PanelItem.vue'
|
|
import WaterDisaster from './WaterDisaster/WaterDisaster.vue'
|
|
|
|
const router = useRouter()
|
|
|
|
// 事件类型
|
|
const eventType = ref('water')
|
|
|
|
// 表单数据
|
|
const waterDisasterData = ref({})
|
|
const waterDisasterRef = ref(null)
|
|
const submitting = ref(false)
|
|
|
|
// 返回上一页
|
|
const handleClickBack = () => {
|
|
router.replace('/disasterManagement')
|
|
}
|
|
|
|
// 提交表单
|
|
const handleSubmit = async () => {
|
|
// 验证表单
|
|
if (eventType.value === 'water') {
|
|
if (!waterDisasterRef.value.validate()) {
|
|
return
|
|
}
|
|
}
|
|
|
|
submitting.value = true
|
|
try {
|
|
// 获取表单数据
|
|
let formData = {}
|
|
if (eventType.value === 'water') {
|
|
formData = waterDisasterRef.value.getFormData()
|
|
}
|
|
|
|
// 添加事件类型和站点信息
|
|
const submitData = {
|
|
eventType: eventType.value,
|
|
...formData,
|
|
// 可以在这里添加站点信息等其他数据
|
|
}
|
|
|
|
console.log('提交数据:', submitData)
|
|
|
|
// 模拟提交接口
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
showSuccessToast('提交成功')
|
|
|
|
// 提交成功后返回列表页
|
|
setTimeout(() => {
|
|
router.replace('/disasterManagement')
|
|
}, 1500)
|
|
} catch (error) {
|
|
showFailToast('提交失败，请重试')
|
|
console.error('提交失败:', error)
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-container {
|
|
padding-bottom: 80px;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.event-type-group {
|
|
display: flex;
|
|
gap: 24px;
|
|
:deep(.van-radio) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.coming-soon {
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.footer-btn {
|
|
position: fixed;
|
|
bottom: 15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: calc(100% - 32px);
|
|
max-width: 340px;
|
|
border-radius: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
transform: translateX(-50%) scale(0.98);
|
|
}
|
|
}
|
|
</style> |