736 lines
25 KiB
Vue
736 lines
25 KiB
Vue
<template>
|
||
<div class="disaster-form-page">
|
||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
|
||
<!-- 基本信息区块 -->
|
||
<el-card class="form-section" shadow="never">
|
||
<template #header>
|
||
<div class="section-header">
|
||
<span class="section-title">基本信息</span>
|
||
</div>
|
||
</template>
|
||
|
||
<BlockItem title="填报人员信息">
|
||
<el-row :gutter="24">
|
||
<!-- 填报单位 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="填报单位" prop="event.reporterUnit">
|
||
<el-input v-model="formData.event.reporterUnit" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 联系人 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="联系人员" prop="event.contactPerson">
|
||
<el-input v-model="formData.event.contactPerson" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 联系电话 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="联系电话" prop="event.contactPhone">
|
||
<el-input v-model="formData.event.contactPhone" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</BlockItem>
|
||
|
||
<BlockItem title="路况事件信息">
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item label="事件类型" prop="roadConditionType">
|
||
<el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
|
||
<el-option label="水毁事件" value="水毁事件" />
|
||
<el-option label="冰雪事件" value="冰雪事件" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 路况类别 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="路况类别" prop="roadConditionType">
|
||
<el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
|
||
<el-option label="高速公路" value="高速公路" />
|
||
<el-option label="国道" value="国道" />
|
||
<el-option label="省道" value="省道" />
|
||
<el-option label="县道" value="县道" />
|
||
<el-option label="乡道" value="乡道" />
|
||
<el-option label="村道" value="村道" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 是否阻断 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="是否阻断" prop="event.isBlocked">
|
||
<el-select v-model="formData.event.isBlocked" placeholder="请选择" style="width: 100%">
|
||
<el-option label="是" :value="true" />
|
||
<el-option label="否" :value="false" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<!-- 抢险进度 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="抢险进度" prop="event.repairProgress">
|
||
<el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
|
||
<el-option label="未抢险" value="未抢险" />
|
||
<el-option label="抢险中" value="抢险中" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 处理措施-->
|
||
<el-col :span="8">
|
||
<el-form-item label="处理措施" prop="event.repairProgress">
|
||
<el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
|
||
<el-option label="全幅封闭" value="全幅封闭" />
|
||
<el-option label="半幅封闭" value="半幅封闭" />
|
||
<el-option label="正常通行" value="正常通行" />
|
||
<el-option label="限制通行" value="限制通行" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 水毁处数 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="水毁处数" prop="event.damageCount">
|
||
<el-input-number v-model="formData.event.damageCount" :min="0" :step="1" style="width: 100%" placeholder="请填写">
|
||
<template #suffix>
|
||
<span class="unit-text">处</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<!-- 阻断里程 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="阻断里程" prop="event.blockedMileage">
|
||
<el-input-number v-model="formData.event.blockedMileage" :min="0" :precision="3" style="width: 100%" placeholder="请填写">
|
||
<template #suffix>
|
||
<span class="unit-text">公里</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<!-- 发生时间 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="发生时间" prop="occurTime">
|
||
<el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 预计恢复时间 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="预计恢复时间" prop="report.expectRecoverTime">
|
||
<el-date-picker v-model="formData.report.expectRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<!-- 现场描述 -->
|
||
<el-col :span="16">
|
||
<el-form-item label="现场描述" prop="report.siteDescription">
|
||
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</BlockItem>
|
||
|
||
<BlockItem title="位置信息">
|
||
<el-row :gutter="24">
|
||
<!-- 线路编号 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="路线类型" prop="routeNo">
|
||
<el-input v-model="formData.routeNo" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 所属区县 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="所属区县" prop="event.district">
|
||
<el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%">
|
||
<el-option label="万州区" value="万州区" />
|
||
<el-option label="开州区" value="开州区" />
|
||
<el-option label="黔江区" value="黔江区" />
|
||
<el-option label="涪陵区" value="涪陵区" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item label="地点路线" prop="routeNo">
|
||
<el-input v-model="formData.routeNo" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 起点桩号 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="起点桩号(K)" prop="event.startStakeNo">
|
||
<el-input v-model="formData.event.startStakeNo" placeholder="请填写">
|
||
<template #append>K</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 止点桩号 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="止点桩号(K)" prop="event.endStakeNo">
|
||
<el-input v-model="formData.event.endStakeNo" placeholder="请填写">
|
||
<template #append>K</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<!-- 路况位置 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="路况位置" prop="occurLocation">
|
||
<el-input v-model="formData.occurLocation" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 阻断点小地名 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="阻断点小地名" prop="event.blockedPointName">
|
||
<el-input v-model="formData.event.blockedPointName" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<!-- 经度 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="经度" prop="event.startStakeLng">
|
||
<el-input v-model="formData.event.startStakeLng" placeholder="经度"> </el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 纬度 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="纬度" prop="event.startStakeLat">
|
||
<el-input v-model="formData.event.startStakeLat" placeholder="纬度"> </el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<el-form-item label="图片上传" prop="fileList">
|
||
<el-upload
|
||
v-model:file-list="imageFileList"
|
||
action="#"
|
||
list-type="picture-card"
|
||
:auto-upload="false"
|
||
:limit="9"
|
||
:on-preview="handlePicturePreview"
|
||
:on-remove="handlePictureRemove"
|
||
:before-upload="beforeImageUpload"
|
||
accept="image/jpeg,image/png"
|
||
>
|
||
<el-icon><Plus /></el-icon>
|
||
</el-upload>
|
||
<div class="upload-tip">只能上传jpg/png格式，且不超过500kb</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="视频上传" prop="fileList">
|
||
<el-upload v-model:file-list="videoFileList" action="#" :auto-upload="false" :limit="1" :before-upload="beforeVideoUpload" accept="video/*">
|
||
<el-button type="primary"
|
||
><el-icon><Upload /></el-icon> 选择文件</el-button
|
||
>
|
||
</el-upload>
|
||
<div class="upload-tip">仅支持20s内的视频，不超过20MB</div>
|
||
<div v-if="videoFileList.length > 0 && videoFileList[0].url" class="video-preview">
|
||
<video :src="videoFileList[0].url" controls style="width: 100%; max-height: 200px"></video>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</BlockItem>
|
||
</el-card>
|
||
|
||
<el-card title="灾毁损失">
|
||
<BlockItem title="路况事件信息">
|
||
<el-row :gutter="24">
|
||
<!-- 受伤人员 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="受伤人员" prop="report.injuredCount">
|
||
<el-input-number v-model="formData.report.injuredCount" :min="0" :step="1" style="width: 100%">
|
||
<template #suffix>
|
||
<span class="unit-text">人</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 死亡人员 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="死亡人员" prop="report.deadCount">
|
||
<el-input-number v-model="formData.report.deadCount" :min="0" :step="1" style="width: 100%">
|
||
<template #suffix>
|
||
<span class="unit-text">人</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 滞留人员 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="滞留人员" prop="report.strandedPersonCount">
|
||
<el-input-number v-model="formData.report.strandedPersonCount" :min="0" :step="1" style="width: 100%">
|
||
<template #suffix>
|
||
<span class="unit-text">人</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 损坏车辆 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="损坏车辆" prop="report.damagedVehicleCount">
|
||
<el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :step="1" style="width: 100%">
|
||
<template #suffix>
|
||
<span class="unit-text">辆</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 滞留车辆 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="滞留车辆" prop="report.strandedVehicleCount">
|
||
<el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :step="1" style="width: 100%">
|
||
<template #suffix>
|
||
<span class="unit-text">辆</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</BlockItem>
|
||
<BlockItem title="道路损失及其他">
|
||
<LossList v-model:model-value="formData.report.lossList" />
|
||
|
||
<el-row :gutter="24">
|
||
<!-- 已投入机械 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="已投入机械" prop="report.investedMachinery">
|
||
<el-input-number v-model="formData.report.investedMachinery" :min="0" :precision="1" style="width: 100%" placeholder="请填写">
|
||
<template #suffix>
|
||
<span class="unit-text">台/班</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 已投入人力 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="投入人力" prop="report.investedManpower">
|
||
<el-input-number v-model="formData.report.investedManpower" :min="0" :step="1" style="width: 100%" placeholder="请填写">
|
||
<template #suffix>
|
||
<span class="unit-text">人次</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 已投入资金 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="已投入资金" prop="report.investedFunds">
|
||
<el-input-number v-model="formData.report.investedFunds" :min="0" :precision="2" style="width: 100%" placeholder="请填写">
|
||
<template #suffix>
|
||
<span class="unit-text">万元</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 其他损失描述 -->
|
||
<el-col :span="24">
|
||
<el-form-item label="其他损失描述" prop="report.siteDescription">
|
||
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</BlockItem>
|
||
<BlockItem title="恢复重建预估费用">
|
||
<el-row :gutter="24">
|
||
<!-- 是否需要恢复重建 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="是否需要恢复重建" prop="event.needsRecovery">
|
||
<el-select v-model="formData.event.needsRecovery" placeholder="请选择" style="width: 100%">
|
||
<el-option label="是" :value="true" />
|
||
<el-option label="否" :value="false" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 恢复重建预估费用 -->
|
||
<el-col :span="8" v-if="!isContinue">
|
||
<el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
|
||
<el-input-number v-model="formData.event.estimatedRecoveryCost" :min="0" :precision="2" style="width: 100%" placeholder="请填写">
|
||
<template #suffix>
|
||
<span class="unit-text">万元</span>
|
||
</template>
|
||
</el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</BlockItem>
|
||
</el-card>
|
||
|
||
<!-- 提交按钮 -->
|
||
<div class="form-actions">
|
||
<el-button @click="handleBack">取消</el-button>
|
||
<el-button type="primary" @click="handleSubmit" :loading="submitting">提交</el-button>
|
||
</div>
|
||
</el-form>
|
||
|
||
<!-- 图片预览对话框 -->
|
||
<el-dialog v-model="previewDialogVisible" title="图片预览" width="600px">
|
||
<img :src="previewImageUrl" style="width: 100%" alt="预览图片" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, watch, onMounted } from 'vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { ElMessage } from 'element-plus'
|
||
import { Plus, Upload } from '@element-plus/icons-vue'
|
||
import mockData from './waterMockJson.json'
|
||
import { request } from '@/utils/request'
|
||
import LossList from './LossList.vue'
|
||
import BlockItem from '@/component/BlockItem.vue'
|
||
import { el } from 'element-plus/es/locale/index.mjs'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const formRef = ref(null)
|
||
const submitting = ref(false)
|
||
|
||
// 是否为续报
|
||
const isContinue = computed(() => route.query.isContinue === 'true')
|
||
|
||
// 处置措施数组（用于多选框组，需要转换为逗号分隔的字符串）
|
||
const disposalMeasuresArray = ref([])
|
||
|
||
// 附件列表
|
||
const imageFileList = ref([])
|
||
const videoFileList = ref([])
|
||
|
||
const formData = reactive({
|
||
// 顶层字段
|
||
occurLocation: null, // 发生地点/路况位置
|
||
occurTime: null, // 发生时间
|
||
roadConditionType: null, // 路况类别
|
||
routeNo: null, // 线路编号
|
||
|
||
// event 对象
|
||
event: {
|
||
blockedMileage: null, // 阻断里程
|
||
blockedPointName: null, // 阻断点小地名
|
||
contactPerson: null, // 联系人
|
||
contactPhone: null, // 联系电话
|
||
damageCount: null, // 水毁处数
|
||
district: null, // 上报区县
|
||
endStakeLat: null, // 止点纬度
|
||
endStakeLng: null, // 止点经度
|
||
endStakeNo: null, // 止点桩号
|
||
estimatedRecoveryCost: null, // 恢复重建预估费用
|
||
inspectionMileage: null, // 巡查里程
|
||
isBlocked: null, // 是否阻断
|
||
needsRecovery: null, // 是否需要恢复重建
|
||
repairProgress: null, // 抢修进度
|
||
reporterUnit: null, // 填报单位
|
||
startStakeLat: null, // 起点纬度
|
||
startStakeLng: null, // 起点经度
|
||
startStakeNo: null // 起点桩号
|
||
},
|
||
|
||
// report 对象
|
||
report: {
|
||
actualRecoverTime: null, // 实际恢复时间
|
||
damagedVehicleCount: null, // 损坏车辆
|
||
deadCount: null, // 死亡人员
|
||
disposalMeasures: null, // 处置措施（逗号分隔）
|
||
expectRecoverTime: null, // 预计恢复时间
|
||
injuredCount: null, // 受伤人员
|
||
investedFunds: null, // 已投资金
|
||
investedMachinery: null, // 已投机械
|
||
investedManpower: null, // 已投人力
|
||
remark: null, // 处理情况/备注
|
||
siteDescription: null, // 现场描述
|
||
strandedPersonCount: null, // 滞留人员
|
||
strandedVehicleCount: null, // 滞留车辆
|
||
totalLossAmount: null // 损失总金额
|
||
},
|
||
|
||
// lossList 数组
|
||
lossList: [],
|
||
|
||
// fileList 数组
|
||
fileList: []
|
||
})
|
||
|
||
// 监听处置措施数组变化，转换为逗号分隔的字符串存到 report.disposalMeasures
|
||
watch(
|
||
disposalMeasuresArray,
|
||
(newVal) => {
|
||
formData.report.disposalMeasures = newVal.length ? newVal.join(',') : null
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
// 监听图片附件变化，同步到 fileList
|
||
watch(
|
||
imageFileList,
|
||
() => {
|
||
syncFileList()
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
// 监听视频附件变化，同步到 fileList
|
||
watch(
|
||
videoFileList,
|
||
() => {
|
||
syncFileList()
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
// 同步附件到 fileList
|
||
const syncFileList = () => {
|
||
formData.fileList = [
|
||
...imageFileList.value.map((f) => ({
|
||
fileName: f.name || '',
|
||
fileSize: f.size || 0,
|
||
fileType: 1, // 1-图片
|
||
fileUrl: f.url || f.content || ''
|
||
})),
|
||
...videoFileList.value.map((f) => ({
|
||
fileName: f.name || '',
|
||
fileSize: f.size || 0,
|
||
fileType: 2, // 2-视频
|
||
fileUrl: f.url || f.content || ''
|
||
}))
|
||
]
|
||
}
|
||
|
||
// 从 report.disposalMeasures 初始化处置措施数组
|
||
watch(
|
||
() => formData.report.disposalMeasures,
|
||
(newVal) => {
|
||
if (newVal && typeof newVal === 'string') {
|
||
disposalMeasuresArray.value = newVal.split(',').filter(Boolean)
|
||
} else {
|
||
disposalMeasuresArray.value = []
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
// 表单校验规则
|
||
const formRules = {
|
||
occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
|
||
routeNo: [{ required: true, message: '请输入线路编号', trigger: 'blur' }],
|
||
'event.reporterUnit': [{ required: true, message: '请输入填报单位', trigger: 'blur' }],
|
||
'event.contactPerson': [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||
'event.contactPhone': [
|
||
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||
]
|
||
}
|
||
|
||
// 图片上传前校验
|
||
const beforeImageUpload = (file) => {
|
||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
||
const isLt500k = file.size / 1024 < 500
|
||
|
||
if (!isJpgOrPng) {
|
||
ElMessage.error('只能上传 JPG/PNG 格式的图片!')
|
||
return false
|
||
}
|
||
if (!isLt500k) {
|
||
ElMessage.error('图片大小不能超过 500KB!')
|
||
return false
|
||
}
|
||
return false // 返回false阻止自动上传，由提交时统一处理
|
||
}
|
||
|
||
// 视频上传前校验
|
||
const beforeVideoUpload = (file) => {
|
||
const isLt20M = file.size / 1024 / 1024 < 20
|
||
if (!isLt20M) {
|
||
ElMessage.error('视频大小不能超过 20MB!')
|
||
return false
|
||
}
|
||
return false
|
||
}
|
||
|
||
// 图片预览
|
||
const previewDialogVisible = ref(false)
|
||
const previewImageUrl = ref('')
|
||
|
||
const handlePicturePreview = (file) => {
|
||
previewImageUrl.value = file.url
|
||
previewDialogVisible.value = true
|
||
}
|
||
|
||
const handlePictureRemove = (file, fileList) => {
|
||
imageFileList.value = fileList
|
||
}
|
||
|
||
// 返回上一页
|
||
const handleBack = () => {
|
||
router.back()
|
||
}
|
||
|
||
// 初始化表单数据（用于编辑/续报）
|
||
const initFormData = (data) => {
|
||
Object.assign(formData, data)
|
||
}
|
||
|
||
// 获取表单数据
|
||
const getFormData = () => {
|
||
return { ...formData }
|
||
}
|
||
|
||
// 表单验证
|
||
const validate = async () => {
|
||
if (!formRef.value) return false
|
||
try {
|
||
await formRef.value.validate()
|
||
return true
|
||
} catch (error) {
|
||
ElMessage.warning('请完善表单信息')
|
||
return false
|
||
}
|
||
}
|
||
|
||
// 提交表单
|
||
const handleSubmit = async () => {
|
||
// 验证表单
|
||
if (!(await validate())) {
|
||
return
|
||
}
|
||
|
||
submitting.value = true
|
||
try {
|
||
// 获取表单数据
|
||
|
||
// 添加事件类型和站点信息
|
||
const submitData = {
|
||
...formData
|
||
// 可以在这里添加站点信息等其他数据
|
||
}
|
||
|
||
const res = await request({
|
||
url: '/snow-ops-platform/water-damage/addOrUpdate',
|
||
method: 'post',
|
||
data: submitData
|
||
})
|
||
|
||
if (res?.code === '00000') {
|
||
ElMessage.success('提交成功')
|
||
} else {
|
||
ElMessage.error(res.message)
|
||
}
|
||
|
||
// 提交成功后返回列表页
|
||
setTimeout(() => {
|
||
router.replace('/disasterManagement')
|
||
}, 1000)
|
||
} catch (error) {
|
||
ElMessage.error('提交失败，请重试')
|
||
console.error('提交失败:', error)
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
// 加载编辑数据
|
||
const loadEditData = async () => {
|
||
initFormData(mockData)
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadEditData()
|
||
})
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
validate,
|
||
initFormData,
|
||
getFormData
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.disaster-form-page {
|
||
background-color: #f5f7fa;
|
||
|
||
.disaster-form {
|
||
.form-section {
|
||
margin-bottom: 20px;
|
||
|
||
:deep(.el-card__header) {
|
||
padding: 12px 20px;
|
||
background-color: #fafafa;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
:deep(.el-card__body) {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
.section-header {
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
position: relative;
|
||
padding-left: 10px;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 3px;
|
||
height: 16px;
|
||
background-color: #409eff;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sub-section-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #606266;
|
||
margin: 8px 0 16px 0;
|
||
padding-left: 8px;
|
||
border-left: 3px solid #409eff;
|
||
}
|
||
|
||
.unit-text {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.upload-tip {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.video-preview {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
padding: 20px 0 40px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|