bxztApp/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue

<template>
  <div class="disaster-form-page">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" 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" disabled />
              </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" 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="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-row>

          <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 v-for="(option, idx) in options['waterRoadConditionType']" :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.repairProgress">
                <el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
                  <el-option v-for="(option, idx) in options['repairProgress']" :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.isBlocked">
                <el-select v-model="formData.event.isBlocked" placeholder="请选择" style="width: 100%">
                  <el-option v-for="(option, idx) in options['yesNoBool']" :key="idx" :label="option.label" :value="option.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="受灾里程" prop="event.blockedMileage">
                <el-input v-model="formData.event.blockedMileage" placeholder="请填写">
                  <template #append>公里</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="水毁处数" prop="event.damageCount">
                <el-input v-model="formData.event.damageCount" placeholder="请填写">
                  <template #append>处</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </BlockItem>

        <BlockItem title="位置信息">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="路线类型">
                <el-input :model-value="routeTypeLabel" readonly />
              </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="routeNo">
                <RoadRoutesSelect v-model="formData.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="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.blockedPointName">
                <el-input v-model="formData.event.blockedPointName" placeholder="请填写" />
              </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.startStakeLongitude">
                <el-input v-model="formData.event.startStakeLongitude" placeholder="请填写" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起点桩纬度" prop="event.startStakeLatitude">
                <el-input v-model="formData.event.startStakeLatitude" 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.endStakeLongitude">
                <el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="止点桩纬度" prop="event.endStakeLatitude">
                <el-input v-model="formData.event.endStakeLatitude" placeholder="请填写" />
              </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['disposalMeasures']" :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 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-row>

          <el-row :gutter="24">
            <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.lossList" />

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="投入机械" prop="report.investedMachinery">
                <el-input v-model="formData.report.investedMachinery" placeholder="请填写">
                  <template #append>台/班</template>
                </el-input>
              </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%">
                  <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 v-model="formData.report.investedFunds" placeholder="请填写">
                  <template #append>万元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <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="附件">
                <FileUpload v-model="formData.fileList" type="image" :limit="9" />
              </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']" :key="idx" :label="option.label" :value="option.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="showEstimatedRecoveryCost" :span="8">
              <el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
                <el-input v-model="formData.event.estimatedRecoveryCost" placeholder="请填写">
                  <template #append>万元</template>
                </el-input>
              </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 RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
import YHZSelect from '../components/YHZSelect.vue'
import LossList from './WaterDisasterLossListPC.vue'
import { useWaterDisasterReport } from './useWaterDisasterReport'

const {
  eventType,
  filterForm,
  formData,
  formRef,
  formRules,
  handleBack,
  handleDistrictChange,
  handleEventTypeChange,
  handleRouteNoChange,
  handleSubmit,
  initFormData,
  getFormData,
  options,
  routeTypeLabel,
  showEstimatedRecoveryCost,
  submitting,
  validate
} = useWaterDisasterReport()

defineExpose({
  validate,
  initFormData,
  getFormData
})
</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: #909399;
  font-size: 12px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 0 32px;
}
</style>