350 lines
13 KiB
Vue
350 lines
13 KiB
Vue
<template>
|
|
<div class="disaster-form-page">
|
|
<el-form ref="formRef" :model="formData" :rules="formRules" 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.reportUnit">
|
|
<el-input v-model="formData.event.reportUnit" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="联系人员" prop="event.reporterName">
|
|
<el-input v-model="formData.event.reporterName" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="联系电话" prop="event.reporterPhone">
|
|
<el-input v-model="formData.event.reporterPhone" maxlength="11" 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" style="width: 100%" @change="handleEventTypeChange">
|
|
<el-option v-for="(option, idx) in options['eventType']" :key="idx" :label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="填报站点" prop="event.serviceStationId">
|
|
<YHZSelect v-model="formData.event.serviceStationId" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="发生时间" prop="event.occurTime">
|
|
<el-date-picker v-model="formData.event.occurTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
|
|
</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%" @change="handleDistrictChange">
|
|
<el-option v-for="(option, idx) in options['roadType']" :key="idx" :label="option.label" :value="option.value" />
|
|
</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']" :key="idx" :label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="线路编号" prop="event.routeNo">
|
|
<RoadRoutesSelect v-model="formData.event.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="发生地点" prop="event.occurLocation">
|
|
<el-input v-model="formData.event.occurLocation" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="路况位置" prop="occurLocation">
|
|
<el-input v-model="formData.occurLocation" placeholder="请选择">
|
|
<template #suffix>
|
|
<el-icon class="location-icon"><LocationFilled /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="起点桩号" prop="event.startStakeNo">
|
|
<el-input v-model="formData.event.startStakeNo" placeholder="请填写">
|
|
<template #prepend>K</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="起点桩经度" prop="event.startStakeLng">
|
|
<NumberInput v-model="formData.event.startStakeLng" :precision="6" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="起点桩纬度" prop="event.startStakeLat">
|
|
<NumberInput v-model="formData.event.startStakeLat" :precision="6" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="止点桩号" prop="event.endStakeNo">
|
|
<el-input v-model="formData.event.endStakeNo" placeholder="请填写">
|
|
<template #prepend>K</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="止点桩经度" prop="event.endStakeLng">
|
|
<NumberInput v-model="formData.event.endStakeLng" :precision="6" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="止点桩纬度" prop="event.endStakeLat">
|
|
<NumberInput v-model="formData.event.endStakeLat" :precision="6" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="受灾里程" prop="event.disasterMileage">
|
|
<NumberInput v-model="formData.event.disasterMileage" :precision="2" placeholder="请填写">
|
|
<template #append>公里</template>
|
|
</NumberInput>
|
|
</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>
|
|
<el-row :gutter="24">
|
|
<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['iceDisposalMeasures']" :key="idx" :label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</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-col :span="8">
|
|
<el-form-item label="实际预计恢复时间" prop="report.actualRecoverTime">
|
|
<el-date-picker v-model="formData.report.actualRecoverTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
|
|
</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>
|
|
<MaterialList v-model="formData.yhzMaterialList" :yhzId="formData.event.serviceStationId" />
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="投入人力" prop="report.inputManpower">
|
|
<NumberInput v-model="formData.report.inputManpower" :precision="0" placeholder="请填写" style="width: 100%">
|
|
<template #append>人次</template>
|
|
</NumberInput>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="投入资金" prop="report.inputFunds">
|
|
<NumberInput v-model="formData.report.inputFunds" :precision="2" placeholder="请填写" style="width: 100%">
|
|
<template #append>万元</template>
|
|
</NumberInput>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="投入设备" prop="report.inputEquipment">
|
|
<NumberInput v-model="formData.report.inputEquipment" :precision="1" placeholder="请填写" style="width: 100%">
|
|
<template #append>台班</template>
|
|
</NumberInput>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="有无滞留车辆" prop="report.hasStrandedVehicles">
|
|
<el-select v-model="formData.report.hasStrandedVehicles" placeholder="请选择" style="width: 100%" @change="handleHasStrandedVehiclesChange">
|
|
<el-option v-for="option in options['haveOrNot']" :key="option.value" :label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="滞留车辆" prop="report.strandedVehicleCount">
|
|
<NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" placeholder="请填写" style="width: 100%">
|
|
<template #append>辆</template>
|
|
</NumberInput>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="18">
|
|
<el-form-item label="现场情况描述" prop="report.siteDescription">
|
|
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="3" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="16">
|
|
<el-form-item label="附件上传" prop="fileList">
|
|
<div class="upload-wrapper">
|
|
<FileUpload v-model="formData.fileList" type="image" :limit="6" />
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</BlockItem>
|
|
</el-card>
|
|
|
|
<div class="form-actions">
|
|
<el-button @click="handleBack">取消</el-button>
|
|
<el-button type="primary" :loading="submitting" @click="handleSubmit">提交</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { LocationFilled } from '@element-plus/icons-vue'
|
|
import BlockItem from '@/component/BlockItem.vue'
|
|
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
|
import NumberInput from '@/component/NumberInput/NumberInput.vue'
|
|
import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
|
|
import YHZSelect from '../components/YHZSelect.vue'
|
|
import MaterialList from '../components/MaterialList.vue'
|
|
import { useIceDisasterReport } from './useIceDisasterReport'
|
|
|
|
const {
|
|
eventType,
|
|
filterForm,
|
|
formData,
|
|
formRef,
|
|
formRules,
|
|
handleBack,
|
|
handleDistrictChange,
|
|
handleEventTypeChange,
|
|
handleRouteNoChange,
|
|
handleSubmit,
|
|
getFormData,
|
|
options,
|
|
submitting,
|
|
handleHasStrandedVehiclesChange,
|
|
validate
|
|
} = useIceDisasterReport()
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.disaster-form-page {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.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-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;
|
|
border-radius: 2px;
|
|
background-color: #409eff;
|
|
}
|
|
}
|
|
|
|
.location-icon {
|
|
color: #909399;
|
|
}
|
|
|
|
.unit-text {
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.upload-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.upload-title {
|
|
margin-bottom: 12px;
|
|
color: #303133;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
padding: 8px 0 32px;
|
|
}
|
|
</style>
|