bxztApp/packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReport.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>

        <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 label="高速公路" value="高速公路" />
                <el-option label="国道" value="国道" />
                <el-option label="省道" value="省道" />
                <el-option label="县道" value="县道" />
                <el-option label="乡道" value="乡道" />
                <el-option label="村道" 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 label="是" :value="true" />
                <el-option label="否" :value="false" />
              </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 label="未抢修" value="未抢修" />
                <el-option label="抢修中" value="抢修中" />
                <el-option label="已完成" value="已完成" />
              </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="请填写" />
              <span class="unit-suffix">处</span>
            </el-form-item>
          </el-col>

          <!-- 阻断里程 -->
          <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="请填写" />
              <span class="unit-suffix">公里</span>
            </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-col :span="8">
            <el-form-item label="线路编号" prop="routeNo">
              <el-input v-model="formData.routeNo" placeholder="请填写" />
            </el-form-item>
          </el-col>

          <!-- 填报单位（新增字段） -->
          <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-col :span="8">
            <el-form-item label="所属区县" prop="event.district">
              <el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%">
                <el-option label="万州区" value="万州区" />
                <el-option label="开州区" value="开州区" />
                <el-option label="黔江区" value="黔江区" />
                <el-option label="涪陵区" value="涪陵区" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 位置信息区块 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-header">
            <span class="section-title">位置信息</span>
          </div>
        </template>

        <el-row :gutter="24">
          <!-- 起点桩号 -->
          <el-col :span="8">
            <el-form-item label="起点桩号(K)" prop="event.startStakeNo">
              <el-input v-model="formData.event.startStakeNo" placeholder="请填写" />
            </el-form-item>
          </el-col>

          <!-- 起点经度 -->
          <el-col :span="8">
            <el-form-item label="起点经度" prop="event.startStakeLng">
              <el-input v-model="formData.event.startStakeLng" placeholder="经度" />
            </el-form-item>
          </el-col>

          <!-- 起点纬度 -->
          <el-col :span="8">
            <el-form-item label="起点纬度" prop="event.startStakeLat">
              <el-input v-model="formData.event.startStakeLat" placeholder="纬度" />
            </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="请填写" />
            </el-form-item>
          </el-col>

          <!-- 止点经度 -->
          <el-col :span="8">
            <el-form-item label="止点经度" prop="event.endStakeLng">
              <el-input v-model="formData.event.endStakeLng" placeholder="经度" />
            </el-form-item>
          </el-col>

          <!-- 止点纬度 -->
          <el-col :span="8">
            <el-form-item label="止点纬度" prop="event.endStakeLat">
              <el-input v-model="formData.event.endStakeLat" placeholder="纬度" />
            </el-form-item>
          </el-col>

          <!-- 路况位置 -->
          <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-card>

      <!-- 处置情况区块 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-header">
            <span class="section-title">处置情况</span>
          </div>
        </template>

        <el-row :gutter="24">
          <!-- 处置措施（多选） -->
          <el-col :span="24">
            <el-form-item label="处置措施" prop="report.disposalMeasures">
              <el-checkbox-group v-model="disposalMeasuresArray">
                <el-checkbox label="halfClose">半幅封闭</el-checkbox>
                <el-checkbox label="fullClose">全副封闭</el-checkbox>
                <el-checkbox label="bypass">便道通行</el-checkbox>
                <el-checkbox label="normal">正常通行</el-checkbox>
              </el-checkbox-group>
            </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>
      </el-card>

      <!-- 人员车辆区块 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-header">
            <span class="section-title">人员车辆</span>
          </div>
        </template>

        <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%" />
              <span class="unit-suffix">人</span>
            </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%" />
              <span class="unit-suffix">人</span>
            </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%" />
              <span class="unit-suffix">人</span>
            </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%" />
              <span class="unit-suffix">辆</span>
            </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%" />
              <span class="unit-suffix">辆</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 灾毁损失区块 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-header">
            <span class="section-title">灾毁损失</span>
          </div>
        </template>

        <!-- 灾毁损失列表组件（需要根据实际业务实现） -->
        <el-row :gutter="24">
          <el-col :span="24">
            <LossList v-model="formData.lossList" />
          </el-col>

          <!-- 处理情况 -->
          <el-col :span="12">
            <el-form-item label="处理情况" prop="report.remark">
              <el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" />
            </el-form-item>
          </el-col>

          <!-- 损失总金额 -->
          <el-col :span="12">
            <el-form-item label="损失总金额" prop="report.totalLossAmount">
              <el-input-number v-model="formData.report.totalLossAmount" :min="0" :precision="2" style="width: 100%" placeholder="请填写（选填）" />
              <span class="unit-suffix">万元</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 投入资源区块 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-header">
            <span class="section-title">投入资源</span>
          </div>
        </template>

        <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%" />
              <span class="unit-suffix">台/班</span>
            </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%" />
              <span class="unit-suffix">人次</span>
            </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%" />
              <span class="unit-suffix">万元</span>
            </el-form-item>
          </el-col>

          <!-- 现场描述 -->
          <el-col :span="24">
            <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>
      </el-card>

      <!-- 附件上传区块 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-header">
            <span class="section-title">附件上传</span>
          </div>
        </template>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="图片上传" prop="fileList">
              <el-upload
                v-model:file-list="imageFileList"
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :limit="9"
                :on-preview="handlePicturePreview"
                :on-remove="handlePictureRemove"
                :before-upload="beforeImageUpload"
                accept="image/jpeg,image/png"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <div class="upload-tip">只能上传jpg/png格式，且不超过500kb</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频上传" prop="fileList">
              <el-upload v-model:file-list="videoFileList" action="#" :auto-upload="false" :limit="1" :before-upload="beforeVideoUpload" accept="video/*">
                <el-button type="primary"
                  ><el-icon><Upload /></el-icon> 选择文件</el-button
                >
              </el-upload>
              <div class="upload-tip">仅支持20s内的视频，不超过20MB</div>
              <div v-if="videoFileList.length > 0 && videoFileList[0].url" class="video-preview">
                <video :src="videoFileList[0].url" controls style="width: 100%; max-height: 200px"></video>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 恢复重建区块 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-header">
            <span class="section-title">恢复重建</span>
          </div>
        </template>

        <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 label="是" :value="true" />
                <el-option label="否" :value="false" />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 恢复重建预估费用 -->
          <el-col :span="8" v-if="!isContinue">
            <el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
              <el-input-number v-model="formData.event.estimatedRecoveryCost" :min="0" :precision="2" style="width: 100%" />
              <span class="unit-suffix">万元</span>
            </el-form-item>
          </el-col>
        </el-row>
      </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 './LossList.vue'

const router = useRouter()
const route = useRoute()
const formRef = ref(null)
const submitting = ref(false)

// 是否为续报
const isContinue = computed(() => route.query.isContinue === 'true')

// 处置措施数组（用于多选框组，需要转换为逗号分隔的字符串）
const disposalMeasuresArray = ref([])

// 附件列表
const imageFileList = ref([])
const videoFileList = ref([])

// 表单数据 - 按 H5 Request 接口结构定义
const formData = reactive({
  // 顶层字段
  occurLocation: '', // 发生地点/路况位置
  occurTime: '', // 发生时间
  roadConditionType: '', // 路况类别
  routeNo: '', // 线路编号

  // event 对象
  event: {
    blockedMileage: '', // 阻断里程
    blockedPointName: '', // 阻断点小地名
    contactPerson: '', // 联系人
    contactPhone: '', // 联系电话
    damageCount: '', // 水毁处数
    district: '', // 上报区县
    endStakeLat: '', // 止点纬度
    endStakeLng: '', // 止点经度
    endStakeNo: '', // 止点桩号
    estimatedRecoveryCost: '', // 恢复重建预估费用
    inspectionMileage: '', // 巡查里程
    isBlocked: '', // 是否阻断
    needsRecovery: '', // 是否需要恢复重建
    repairProgress: '', // 抢修进度
    reporterUnit: '', // 填报单位
    startStakeLat: '', // 起点纬度
    startStakeLng: '', // 起点经度
    startStakeNo: '' // 起点桩号
  },

  // report 对象
  report: {
    actualRecoverTime: '', // 实际恢复时间
    damagedVehicleCount: '', // 损坏车辆
    deadCount: '', // 死亡人员
    disposalMeasures: '', // 处置措施（逗号分隔）
    expectRecoverTime: '', // 预计恢复时间
    injuredCount: '', // 受伤人员
    investedFunds: '', // 已投资金
    investedMachinery: '', // 已投机械
    investedManpower: '', // 已投人力
    remark: '', // 处理情况/备注
    siteDescription: '', // 现场描述
    strandedPersonCount: '', // 滞留人员
    strandedVehicleCount: '', // 滞留车辆
    totalLossAmount: '' // 损失总金额
  },

  // lossList 数组
  lossList: [],

  // fileList 数组
  fileList: []
})

// 监听处置措施数组变化，转换为逗号分隔的字符串存到 report.disposalMeasures
watch(
  disposalMeasuresArray,
  (newVal) => {
    formData.report.disposalMeasures = newVal.join(',')
  },
  { deep: true }
)

// 监听图片附件变化，同步到 fileList
watch(
  imageFileList,
  (newVal) => {
    syncFileList()
  },
  { deep: true }
)

// 监听视频附件变化，同步到 fileList
watch(
  videoFileList,
  (newVal) => {
    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)
    }
  },
  { immediate: true }
)

// 表单校验规则
const formRules = {
  occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
  routeNo: [{ 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 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 (!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 () => {
  initFormData(mockData)
}

onMounted(() => {
  loadEditData()
})

// 暴露方法给父组件
defineExpose({
  validate,
  initFormData,
  getFormData
})
</script>

<style scoped lang="scss">
.disaster-form-page {
  padding: 20px;
  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-suffix {
      margin-left: 8px;
      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>