From db10d94b1611b140f9559af7eb22a3b93712f5d8 Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Wed, 6 May 2026 09:10:20 +0800
Subject: [PATCH] =?UTF-8?q?style:=20H5=E6=81=A2=E5=A4=8D=E9=87=8D=E5=BB=BA?=
 =?UTF-8?q?=E5=A1=AB=E6=8A=A5=20=E5=8E=BB=E6=8E=89=E5=BF=85=E5=A1=AB?=
 =?UTF-8?q?=E5=B0=8F=E7=BA=A2=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/src/views/Rebuild/RebuildAdd.vue   | 346 ++++++++++--------
 1 file changed, 196 insertions(+), 150 deletions(-)

diff --git a/packages/mobile/src/views/Rebuild/RebuildAdd.vue b/packages/mobile/src/views/Rebuild/RebuildAdd.vue
index 1e57e7b..1f749c7 100644
--- a/packages/mobile/src/views/Rebuild/RebuildAdd.vue
+++ b/packages/mobile/src/views/Rebuild/RebuildAdd.vue
@@ -1,59 +1,109 @@
 <template>
-    <PageContainer title="项目填报" @click-back="handleClickBack">
-        <div class="content">
-            <PanelItem>
-                <van-form ref="formRef" label-align="left" colon>
-                    <van-field v-model="form.project.districtName" label="区县名称" center placeholder="请填写" required
-                        :rules="[{ required: true, message: '请填写区县名称' }]" />
-                    <RoadRoutesPicker v-model="form.project.routeNo" label="线路编号" center placeholder="请选择" required
-                        :rules="[{ required: true, message: '请选择线路编号' }]" @change="handleRouteNoChange" />
-                    <van-field v-model="form.project.startStakeNo" label="起点桩号" disabled center placeholder="请选择线路编号"
-                        required :rules="[{ required: true, message: '请填写起点桩号' }]" />
-                    <van-field v-model="form.project.endStakeNo" label="止点桩号" disabled center placeholder="请选择线路编号"
-                        required :rules="[{ required: true, message: '请填写止点桩号' }]" />
-                    <van-field v-model="form.project.implementMileage" label="实施里程" center placeholder="单位:公里" required
-                        type="number" :rules="[{ required: true, message: '请填写实施里程' }]">
-                        <template #extra>
-                            公里
-                        </template>
-                    </van-field>
-                    <van-field v-model="form.project.earthworkLoss" label="塌方及损失" center placeholder="(方/万元)" required
-                        :rules="[{ required: true, message: '请填写塌方及损失' }]" />
-                    <van-field v-model="form.project.disasterType" label="灾害类型" center placeholder="请填写" required
-                        :rules="[{ required: true, message: '请填写灾害类型' }]" />
-                    <van-field v-model="form.project.locationRoute" label="地点路线" center placeholder="请填写" required
-                        :rules="[{ required: true, message: '请填写地点路线' }]" />
-                    <van-field v-model="form.project.roadLocation" label="路况位置" center placeholder="请填写" required
-                        :rules="[{ required: true, message: '请填写路况位置' }]" />
-                    <van-field v-model="form.project.blockedPointName" label="阻断点小地名" center placeholder="请填写" required
-                        :rules="[{ required: true, message: '请填写阻断点小地名' }]" />
-                    <van-field v-model="form.project.estimatedCost" label="恢复重建预估费用" center placeholder="请填写" required
-                        :rules="[{ required: true, message: '请填写恢复重建预估费用' }]">
-                        <template #extra>
-                            万元
-                        </template>
-                    </van-field>
-                    <DisasterFileUpload label="附件上传" v-model="form.fileList"></DisasterFileUpload>
-                </van-form>
-
-            </PanelItem>
-        </div>
-
-        <van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
-            提交
-        </van-button>
-    </PageContainer>
+  <PageContainer title="项目填报" @click-back="handleClickBack">
+    <div class="content">
+      <PanelItem>
+        <van-form ref="formRef" label-align="left" colon>
+          <van-field
+            v-model="form.project.districtName"
+            label="区县名称"
+            center
+            placeholder="请填写"
+            :rules="[{ required: true, message: '请填写区县名称' }]"
+          />
+          <RoadRoutesPicker
+            v-model="form.project.routeNo"
+            label="线路编号"
+            center
+            placeholder="请选择"
+            :rules="[{ required: true, message: '请选择线路编号' }]"
+            @change="handleRouteNoChange"
+          />
+          <van-field
+            v-model="form.project.startStakeNo"
+            label="起点桩号"
+            disabled
+            center
+            placeholder="请选择线路编号"
+            :rules="[{ required: true, message: '请填写起点桩号' }]"
+          />
+          <van-field
+            v-model="form.project.endStakeNo"
+            label="止点桩号"
+            disabled
+            center
+            placeholder="请选择线路编号"
+            :rules="[{ required: true, message: '请填写止点桩号' }]"
+          />
+          <van-field
+            v-model="form.project.implementMileage"
+            label="实施里程"
+            center
+            placeholder="单位:公里"
+            type="number"
+            :rules="[{ required: true, message: '请填写实施里程' }]"
+          >
+            <template #extra> 公里 </template>
+          </van-field>
+          <van-field
+            v-model="form.project.earthworkLoss"
+            label="塌方及损失"
+            center
+            placeholder="(方/万元)"
+            :rules="[{ required: true, message: '请填写塌方及损失' }]"
+          />
+          <van-field
+            v-model="form.project.disasterType"
+            label="灾害类型"
+            center
+            placeholder="请填写"
+            :rules="[{ required: true, message: '请填写灾害类型' }]"
+          />
+          <van-field
+            v-model="form.project.locationRoute"
+            label="地点路线"
+            center
+            placeholder="请填写"
+            :rules="[{ required: true, message: '请填写地点路线' }]"
+          />
+          <van-field
+            v-model="form.project.roadLocation"
+            label="路况位置"
+            center
+            placeholder="请填写"
+            :rules="[{ required: true, message: '请填写路况位置' }]"
+          />
+          <van-field
+            v-model="form.project.blockedPointName"
+            label="阻断点小地名"
+            center
+            placeholder="请填写"
+            :rules="[{ required: true, message: '请填写阻断点小地名' }]"
+          />
+          <van-field
+            v-model="form.project.estimatedCost"
+            label="恢复重建预估费用"
+            center
+            placeholder="请填写"
+            :rules="[{ required: true, message: '请填写恢复重建预估费用' }]"
+          >
+            <template #extra> 万元 </template>
+          </van-field>
+          <DisasterFileUpload label="附件上传" v-model="form.fileList"></DisasterFileUpload>
+        </van-form>
+      </PanelItem>
+    </div>
 
+    <van-button type="primary" class="add-btn" icon="plus" @click="handleAdd"> 提交 </van-button>
+  </PageContainer>
 </template>
 
-
 <script setup>
 import { ref, onMounted, watch, reactive, toRaw } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import PageContainer from '@/components/PageContainer.vue'
-import { showToast, showLoadingToast } from "vant";
+import { showToast, showLoadingToast } from 'vant'
 import PanelItem from '@/components/PanelItem.vue'
-import { request } from "../../../../shared/utils/request";
+import { request } from '../../../../shared/utils/request'
 import RoadRoutesPicker from '../DisasterManagement/components/RoadRoutesPicker.vue'
 import DisasterFileUpload from '../DisasterManagement/components/DisasterFileUpload.vue'
 
@@ -61,136 +111,132 @@ const router = useRouter()
 const route = useRoute()
 
 const form = reactive({
-    project: {
-        districtName: null,
-        routeNo: null,
-        startStakeNo: null,
-        endStakeNo: null,
-        implementMileage: null,
-        earthworkLoss: null,
-        disasterType: null,
-        locationRoute: null,
-        roadLocation: null,
-        blockedPointName: null,
-        estimatedCost: null,
-    },
-    fileList: []
+  project: {
+    districtName: null,
+    routeNo: null,
+    startStakeNo: null,
+    endStakeNo: null,
+    implementMileage: null,
+    earthworkLoss: null,
+    disasterType: null,
+    locationRoute: null,
+    roadLocation: null,
+    blockedPointName: null,
+    estimatedCost: null,
+  },
+  fileList: [],
 })
-const formRef = ref();
+const formRef = ref()
 
 // 获取灾害事件详情
 const getDetail = async (id) => {
-    try {
-        const res = await request({
-            url: '/snow-ops-platform/water-damage/getById',
-            method: 'GET',
-            params: {
-                id
-            }
-        })
-        if (res.code === '00000') {
-            form.project.districtName = res.data.event.district
-            form.project.routeNo = res.data.routeNo
-            form.project.startStakeNo = res.data.event.startStakeNo
-            form.project.endStakeNo = res.data.event.endStakeNo
-            form.project.implementMileage = res.data.event.blockedMileage
-            form.project.earthworkLoss = Array.isArray(res.data.lossList) ? res.data.lossList.reduce((sum, item) => sum + (item.totalAmount || 0), 0) : 0
-            form.project.disasterType = res.data.roadConditionType
-            form.project.locationRoute = res.data.occurLocation
-            form.project.roadLocation = res.data.event.blockedPointName
-            form.project.blockedPointName = res.data.event.blockedPointName
-            form.project.estimatedCost = res.data.event.estimatedRecoveryCost
-            form.fileList = res.data.fileList || []
-        } else {
-            throw new Error(res.message)
-        }
-    } catch (error) {
-        showToast({
-            type: "fail",
-            message: error.message,
-        });
+  try {
+    const res = await request({
+      url: '/snow-ops-platform/water-damage/getById',
+      method: 'GET',
+      params: {
+        id,
+      },
+    })
+    if (res.code === '00000') {
+      form.project.districtName = res.data.event.district
+      form.project.routeNo = res.data.routeNo
+      form.project.startStakeNo = res.data.event.startStakeNo
+      form.project.endStakeNo = res.data.event.endStakeNo
+      form.project.implementMileage = res.data.event.blockedMileage
+      form.project.earthworkLoss = Array.isArray(res.data.lossList) ? res.data.lossList.reduce((sum, item) => sum + (item.totalAmount || 0), 0) : 0
+      form.project.disasterType = res.data.roadConditionType
+      form.project.locationRoute = res.data.occurLocation
+      form.project.roadLocation = res.data.event.blockedPointName
+      form.project.blockedPointName = res.data.event.blockedPointName
+      form.project.estimatedCost = res.data.event.estimatedRecoveryCost
+      form.fileList = res.data.fileList || []
+    } else {
+      throw new Error(res.message)
     }
+  } catch (error) {
+    showToast({
+      type: 'fail',
+      message: error.message,
+    })
+  }
 }
 
 onMounted(() => {
-    if (route.params.data) {
-        const data = JSON.parse(decodeURIComponent(route.params.data));
-        // console.log('@@@@data', data);
-        //  在有传参的时候 调用接口去获取数据 并且初始化表单
-        getDetail(data);
-    } else {
-        // console.log('无传入数据');
-    }
+  if (route.params.data) {
+    const data = JSON.parse(decodeURIComponent(route.params.data))
+    // console.log('@@@@data', data);
+    //  在有传参的时候 调用接口去获取数据 并且初始化表单
+    getDetail(data)
+  } else {
+    // console.log('无传入数据');
+  }
 })
 
 const handleClickBack = () => {
-    if (route.params.data) {
-        router.push('/')
-    } else {
-        router.push('/rebuild')
-    }
+  if (route.params.data) {
+    router.push('/')
+  } else {
+    router.push('/rebuild')
+  }
 }
 
 const handleAdd = async () => {
-    // 先进行表单校验
-    if (!formRef.value) {
-        showToast('表单初始化失败');
-        return;
-    }
+  // 先进行表单校验
+  if (!formRef.value) {
+    showToast('表单初始化失败')
+    return
+  }
 
-    try {
-        const isValid = await formRef.value.validate();
-        // 表单校验通过，继续处理提交逻辑
-        const toast = showLoadingToast({
-            message: "上报中...",
-            forbidClick: true,
-            duration: 0, // 设置为0表示不会自动关闭
-        });
-        console.log('表单校验通过，提交数据:', form);
+  try {
+    const isValid = await formRef.value.validate()
+    // 表单校验通过，继续处理提交逻辑
+    const toast = showLoadingToast({
+      message: '上报中...',
+      forbidClick: true,
+      duration: 0, // 设置为0表示不会自动关闭
+    })
+    console.log('表单校验通过，提交数据:', form)
 
-        const res = await request({
-            url: '/snow-ops-platform/recovery/add',
-            method: 'POST',
-            data: form
-        })
-        toast.close();
-        if (res.code === '00000') {
-            showToast('提交成功');
-            handleClickBack();
-        } else {
-            showToast('提交失败, 请稍后重试或联系管理员');
-        }
-    } catch (error) {
-        // console.log('表单校验失败:', error);
-        showToast('请检查并完善表单信息');
+    const res = await request({
+      url: '/snow-ops-platform/recovery/add',
+      method: 'POST',
+      data: form,
+    })
+    toast.close()
+    if (res.code === '00000') {
+      showToast('提交成功')
+      handleClickBack()
+    } else {
+      showToast('提交失败, 请稍后重试或联系管理员')
     }
+  } catch (error) {
+    // console.log('表单校验失败:', error);
+    showToast('请检查并完善表单信息')
+  }
 }
 
-
 const handleRouteNoChange = (item) => {
-    form.project.startStakeNo = item.startStakeNo
-    form.project.endStakeNo = item.endStakeNo
+  form.project.startStakeNo = item.startStakeNo
+  form.project.endStakeNo = item.endStakeNo
 }
-
-
-
 </script>
 
 <style scoped lang="scss">
 .content {
-    padding: 20px 0px 80px 0px;
+  padding: 20px 0px 80px 0px;
 }
 
 .add-btn {
-    position: fixed;
-    bottom: 20px;
-    left: 16px;
-    right: 16px;
-    width: calc(100% - 32px);
-    margin: 0 auto;
-    border-radius: 24px;
-    font-size: 16px;
-    height: 44px;
-    z-index: 999;
+  position: fixed;
+  bottom: 20px;
+  left: 16px;
+  right: 16px;
+  width: calc(100% - 32px);
+  margin: 0 auto;
+  border-radius: 24px;
+  font-size: 16px;
+  height: 44px;
+  z-index: 999;
 }
 </style>