743 lines
26 KiB
Vue
743 lines
26 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="事件类型">
|
||
<el-select v-model="eventType" placeholder="请选择" style="width: 100%" @change="handleEventTypeChange">
|
||
<el-option v-for="(option, idx) in options['eventType']" :label="option.label" :value="option.value" :key="idx" />
|
||
</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 v-for="(option, idx) in options['waterRoadConditionType']" :label="option.label" :value="option.value" :key="idx" />
|
||
</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 v-for="(option, idx) in options['yesNoBool']" :label="option.label" :value="option.value" :key="idx" />
|
||
</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 v-for="(option, idx) in options['repairProgress']" :label="option.label" :value="option.value" :key="idx" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 处理措施-->
|
||
<el-col :span="8">
|
||
<el-form-item label="处理措施" prop="report.disposalMeasures">
|
||
<el-select v-model="formData.report.disposalMeasures" placeholder="请选择" style="width: 100%">
|
||
<el-option v-for="(option, idx) in options['disposalMeasures']" :label="option.label" :value="option.value" :key="idx" />
|
||
</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="路线类型">
|
||
<el-select v-model="filterForm.routeType" placeholder="请选择" style="width: 100%">
|
||
<el-option v-for="(option, idx) in options['roadType']" :label="option.label" :value="option.value" :key="idx" />
|
||
</el-select>
|
||
</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%" @change="handleDistrictChange">
|
||
<el-option v-for="(option, idx) in options['area']" :label="option.label" :value="option.value" :key="idx" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item label="地点路线" prop="routeNo">
|
||
<RoadRoutesSelect v-model="formData.routeNo" @change="handleRouteNoChange" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" />
|
||
</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.longitude">
|
||
<el-input v-model="formData.event.longitude" placeholder="经度"> </el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 纬度 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="纬度" prop="event.latitude">
|
||
<el-input v-model="formData.event.latitude" placeholder="纬度"> </el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="8">
|
||
<el-form-item label="图片上传" prop="fileList">
|
||
<FileUpload type="image" :limit="9" v-model="formData.fileList" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="视频上传" prop="fileList">
|
||
<FileUpload type="video" :limit="9" v-model="formData.fileList" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</BlockItem>
|
||
</el-card>
|
||
|
||
<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="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-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 v-for="(option, idx) in options['yesNoBool']" :label="option.label" :value="option.value" :key="idx" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- 恢复重建预估费用 -->
|
||
<el-col :span="8" v-if="formData?.event.needsRecovery">
|
||
<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 './WaterDisasterLossListPC.vue'
|
||
import BlockItem from '@/component/BlockItem.vue'
|
||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||
import { useOptions } from '@shared/composables/useOptions'
|
||
import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const { options, getAreaOptions } = useOptions()
|
||
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 eventType = ref('水毁事件')
|
||
|
||
const filterForm = reactive({
|
||
routeType: ''
|
||
})
|
||
|
||
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, // 上报区县
|
||
endStakeNo: null, // 止点桩号
|
||
estimatedRecoveryCost: null, // 恢复重建预估费用
|
||
inspectionMileage: null, // 巡查里程
|
||
isBlocked: null, // 是否阻断
|
||
needsRecovery: null, // 是否需要恢复重建
|
||
repairProgress: null, // 抢险进度
|
||
reporterUnit: 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: []
|
||
})
|
||
|
||
const handleEventTypeChange = () => {
|
||
router.replace({ path: '/iceDisasterReport' })
|
||
}
|
||
|
||
// 监听处置措施数组变化，转换为逗号分隔的字符串存到 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 = {
|
||
roadConditionType: [{ required: true, message: '请选择路况类别', trigger: 'change' }],
|
||
'event.isBlocked': [{ required: true, message: '请选择是否阻断', trigger: 'change' }],
|
||
'event.repairProgress': [{ required: true, message: '请选择抢险进度', trigger: 'change' }],
|
||
'report.disposalMeasures': [{ required: true, message: '请选择处置措施', trigger: 'change' }],
|
||
'event.damageCount': [{ required: true, message: '请输入水毁处数', trigger: 'blur' }],
|
||
'event.blockedMileage': [{ required: true, message: '请输入阻断里程', trigger: 'blur' }],
|
||
occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
|
||
'report.expectRecoverTime': [{ required: true, message: '请输入预计恢复时间', trigger: 'blur' }],
|
||
routeNo: [{ required: true, message: '请输入线路编号', trigger: 'blur' }],
|
||
'event.startStakeNo': [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
|
||
'event.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
|
||
occurLocation: [{ required: true, message: '请输入路况位置', trigger: 'blur' }],
|
||
'event.blockedPointName': [{ required: true, message: '请输入阻断点小地名', trigger: 'blur' }],
|
||
'event.longitude': [{ required: true, message: '请输入经度', trigger: 'blur' }],
|
||
'event.latitude': [{ required: true, message: '请输入纬度', trigger: 'blur' }],
|
||
'event.needsRecovery': [{ required: true, message: '请选择是否需要恢复重建', trigger: 'change' }],
|
||
'event.estimatedRecoveryCost': [{ 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 handleDistrictChange = () => {
|
||
formData.routeNo = null
|
||
}
|
||
|
||
const handleRouteNoChange = (item) => {
|
||
formData.event.startStakeNo = item.startStakeNo
|
||
formData.event.endStakeNo = item.endStakeNo
|
||
}
|
||
|
||
// 获取表单数据
|
||
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 () => {
|
||
if (route.query.mock) {
|
||
initFormData(mockData)
|
||
} else {
|
||
initFormData({})
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 获取区县下拉列表
|
||
getAreaOptions()
|
||
|
||
loadEditData()
|
||
})
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
validate,
|
||
initFormData,
|
||
getFormData
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.disaster-form-page {
|
||
padding: 20px;
|
||
background-color: #f5f7fa;
|
||
height: 100%;
|
||
overflow: auto;
|
||
|
||
.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>
|