bxztApp/packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue

<template>
  <div class="disaster-report">
    <!-- 基本信息 -->
    <PanelItem title="基本信息" v-if="!isContinue">
      <!-- 发生时间 (顶层 occurTime) -->
      <BaseDatePicker
        v-model="formData.event.occurTime"
        label="发生时间"
        placeholder="请选择时间"
        :columnsType="['year', 'month', 'day', 'hour', 'minute']"
      />
      <!-- 校准时间 -->
      <div class="calibrate-time-btn" @click="calibrateTime(true)">
        <van-icon name="replay" />
        <span>校准时间</span>
      </div>

      <!-- 线路编号 (顶层 routeNo) -->
      <RoadRoutesPicker
        v-model="formData.event.routeNo"
        label="线路编号"
        placeholder="请线路"
        @change="handleRouteNoChange"
      />

      <!-- 发生地点 (occurLocation) -->
      <van-field v-model="formData.event.occurLocation" label="发生地点" placeholder="请填写" />

      <!-- 起点桩号 (event.startStakeNo) -->
      <van-field v-model="formData.event.startStakeNo" label="起点桩号(K)" placeholder="请填写" />

      <!-- 止点桩号 (event.endStakeNo) -->
      <van-field v-model="formData.event.endStakeNo" label="止点桩号(K)" placeholder="请填写" />

      <!-- 受灾里程 (event.disasterMileage) -->
      <van-field
        v-model="formData.event.disasterMileage"
        label="受灾里程"
        placeholder="请填写"
        type="digit"
      >
        <template #button>
          <span class="field-unit">公里</span>
        </template>
      </van-field>
    </PanelItem>

    <PanelItem title="处置情况">
      <van-field label="处置措施" label-align="top">
        <template #input>
          <van-row :gutter="5">
            <van-col
              v-for="(item, index) in options['iceDisposalMeasures']"
              :span="8"
              :key="index"
            >
              <van-button
                block
                plain
                :type="item.value === formData.report.disposalMeasures ? 'primary' : 'default'"
                @click="formData.report.disposalMeasures = item.value"
              >
                {{ item.label }}
              </van-button>
            </van-col>
          </van-row>
        </template>
      </van-field>

      <BaseDatePicker
        v-model="formData.report.expectRecoverTime"
        label="预计恢复时间"
        placeholder="请选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        type="datetime"
      />
    </PanelItem>

    <PanelItem title="实施情况">
      <van-field
        v-model="formData.report.inputManpower"
        label="投入人力"
        placeholder="请填写"
        type="number"
      >
        <template #button>
          <span class="field-unit">人次</span>
        </template>
      </van-field>
      <van-field
        v-model="formData.report.inputFunds"
        label="投入资金"
        placeholder="请填写"
        type="digit"
      >
        <template #button>
          <span class="field-unit">万元</span>
        </template>
      </van-field>
      <van-field
        v-model="formData.report.inputEquipment"
        label="投入设备"
        placeholder="请填写"
        type="digit"
      >
        <template #button>
          <span class="field-unit">台/班</span>
        </template>
      </van-field>
      <!-- 物资选择 -->
      <MaterialPicker v-model="formData.yhzMaterialList" />

      <BasePicker
        v-model="formData.report.hasStrandedVehicles"
        :options="options['haveOrNot']"
        label="有无车辆滞留"
        placeholder="请选择"
      />

      <van-field
        v-if="formData.report.hasStrandedVehicles === 1"
        v-model="formData.report.strandedVehicleCount"
        type="number"
        label="滞留车辆数"
        center
        placeholder="请填写"
      />

      <BaseDatePicker
        v-model="formData.report.actualRecoverTime"
        label="实际恢复时间"
        placeholder="请选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        type="datetime"
      />
      <!-- 文件上传 -->
      <DisasterFileUpload label="附件上传" v-model="formData.fileList" />
    </PanelItem>

    <!-- 提交按钮 -->
    <van-button type="primary" class="footer-btn" @click="handleSubmit" :loading="submitting">
      提交
    </van-button>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import PanelItem from '@/components/PanelItem.vue';
import BasePicker from '@/components/BasePicker.vue';
import BaseDatePicker from '@/components/BaseDatePicker.vue';
import RoadRoutesPicker from '../components/RoadRoutesPicker.vue';
import MaterialPicker from '../components/MaterialPicker.vue';
import { useRoute } from 'vue-router';
import { request } from '@shared/utils/request';
import { useOptions } from '@shared/composables/useOptions';
import DisasterFileUpload from '../components/DisasterFileUpload.vue';
import { showToast, showFailToast, showLoadingToast, showSuccessToast } from 'vant';
import { formatDate } from '@shared/utils';

const route = useRoute();
const { options } = useOptions();

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

const minDate = new Date();
const maxDate = new Date(2050, 11, 31);

const formData = ref({
  event: {},
  report: {},
  fileList: [],
  yhzMaterialList: [],
});

const parsePointValue = point => {
  if (!point) {
    return { longitude: null, latitude: null };
  }

  if (Array.isArray(point) && point.length >= 2) {
    return {
      longitude: point[0] ?? null,
      latitude: point[1] ?? null,
    };
  }

  if (typeof point === 'string') {
    try {
      const parsed = JSON.parse(point);
      if (Array.isArray(parsed) && parsed.length >= 2) {
        return {
          longitude: parsed[0] ?? null,
          latitude: parsed[1] ?? null,
        };
      }
    } catch (_error) {
      return { longitude: null, latitude: null };
    }
  }

  return { longitude: null, latitude: null };
};

const handleRouteNoChange = (item = {}) => {
  formData.event.routeNo = item.routeCode;
  formData.event.startStakeNo = item.startStakeNo;
  formData.event.endStakeNo = item.endStakeNo;

  const startPoint = parsePointValue(item.startPoint ?? item.startpoint);
  const endPoint = parsePointValue(item.endPoint ?? item.endpoint);

  formData.event.startStakeLng = startPoint.longitude;
  formData.event.startStakeLat = startPoint.latitude;
  formData.event.endStakeLng = endPoint.longitude;
  formData.event.endStakeLat = endPoint.latitude;
};

const calibrateTime = isShowToast => {
  formData.value.event.occurTime = formatDate(Date.now());
  if (isShowToast) showToast('时间已校准为当前时间');
};

const validate = () => {
  return true;
};

const submitting = ref(false);
const handleSubmit = async () => {
  // 验证表单
  if (!validate()) return;

  submitting.value = true;
  try {
    // 添加事件类型和站点信息
    const submitData = {
      ...formData.value,
      // 可以在这里添加站点信息等其他数据
    };
    
    let apiUrl = formData.id ? '/snow-ops-platform/event/dispose' : '/snow-ops-platform/event/report'
    const res = await request({
      url: apiUrl,
      method: 'post',
      data: submitData,
    });

    if (res?.code === '00000') {
      showSuccessToast('提交成功');
      let isRebuilded = false;
      if (isContinue && detail.value.event.needsRecovery) {
        // 如果之前已经进行了项目重建的流程，后续不再进行该流程
        isRebuilded = true;
      }
      if (!isRebuilded && submitData.event.needsRecovery) {
        router.replace({
          name: 'RebuildAdd',
          params: {
            data: res.data.id,
          },
        });
      } else {
        // 提交成功后返回列表页
        setTimeout(() => {
          if (isContinue) router.go(-1);
          else router.replace('/disasterManagement');
        }, 500);
      }
    } else {
      showFailToast(res.message);
    }
  } catch (error) {
    showFailToast('提交失败，请重试');
    console.error('提交失败:', error);
  } finally {
    submitting.value = false;
  }
};
const detailData = ref(null);
const getDisasterDetail = async () => {
  const id = route.query.id;
  if (!id) {
    ElMessage.warning('缺少灾毁ID');
    return;
  }

  try {
    const result = await request({
      url: `/snow-ops-platform/event/getById`,
      method: 'get',
      params: {
        id,
      },
    });

    if (result?.data) {
      const data = result.data;
      data.reportList = undefined;
      data.report = {};
      data.yhzMaterialList = [];
      data.fileList = [];
      detailData.value = data;
      formData.value = data;
    } else {
      ElMessage.warning(result.message || '获取详情失败');
    }
  } catch (error) {
    console.error('获取灾毁详情失败:', error);
    ElMessage.error('获取详情失败，请稍后重试');
  }
};

onMounted(() => {
  calibrateTime();

  if (isContinue.value) {
    getDisasterDetail();
  }
});
</script>
<style scoped lang="scss">
.calibrate-time-btn,
.calibrate-coord-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #1989fa;
  margin: 8px 0 8px 12px;
  padding: 4px 8px;
  background: #f0f7ff;
  border-radius: 20px;
  cursor: pointer;
  width: fit-content;
}
.footer-btn {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 340px;
  border-radius: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;

  &:active {
    opacity: 0.9;
    transform: translateX(-50%) scale(0.98);
  }
}
</style>