bxztApp/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.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="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>
        </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="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 strandedVehicleOptions" :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">
                  <div class="upload-title">图片上传</div>
                  <FileUpload v-model="formData.fileList" type="image" :limit="9" />
                </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,
  initFormData,
  getFormData,
  options,
  routeTypeLabel,
  strandedVehicleOptions,
  submitting,
  handleHasStrandedVehiclesChange,
  validate
} = useIceDisasterReport()

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: #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>