bxztApp/packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReportPC.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%">
                  <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['roadConditionType']" :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 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-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 './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: []
})

// 监听处置措施数组变化，转换为逗号分隔的字符串存到 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 {
  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>