style: H5恢复重建填报 去掉必填小红点

packages/mobile/src/views/Rebuild/RebuildAdd.vue

@@ -3,57 +3,107 @@
     <div class="content">
       <PanelItem>
         <van-form ref="formRef" label-align="left" colon>
-                    <van-field v-model="form.project.districtName" label="区县名称" center placeholder="请填写" required
+          <van-field
-                        :rules="[{ required: true, message: '请填写区县名称' }]" />
+            v-model="form.project.districtName"
-                    <RoadRoutesPicker v-model="form.project.routeNo" label="线路编号" center placeholder="请选择" required
+            label="区县名称"
-                        :rules="[{ required: true, message: '请选择线路编号' }]" @change="handleRouteNoChange" />
+            center
-                    <van-field v-model="form.project.startStakeNo" label="起点桩号" disabled center placeholder="请选择线路编号"
+            placeholder="请填写"
-                        required :rules="[{ required: true, message: '请填写起点桩号' }]" />
+            :rules="[{ required: true, message: '请填写区县名称' }]"
-                    <van-field v-model="form.project.endStakeNo" label="止点桩号" disabled center placeholder="请选择线路编号"
+          />
-                        required :rules="[{ required: true, message: '请填写止点桩号' }]" />
+          <RoadRoutesPicker
-                    <van-field v-model="form.project.implementMileage" label="实施里程" center placeholder="单位:公里" required
+            v-model="form.project.routeNo"
-                        type="number" :rules="[{ required: true, message: '请填写实施里程' }]">
+            label="线路编号"
-                        <template #extra>
+            center
-                            公里
+            placeholder="请选择"
-                        </template>
+            :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="(方/万元)" required
+          <van-field
-                        :rules="[{ required: true, message: '请填写塌方及损失' }]" />
+            v-model="form.project.earthworkLoss"
-                    <van-field v-model="form.project.disasterType" label="灾害类型" center placeholder="请填写" required
+            label="塌方及损失"
-                        :rules="[{ required: true, message: '请填写灾害类型' }]" />
+            center
-                    <van-field v-model="form.project.locationRoute" label="地点路线" center placeholder="请填写" required
+            placeholder="(方/万元)"
-                        :rules="[{ required: true, message: '请填写地点路线' }]" />
+            :rules="[{ required: true, message: '请填写塌方及损失' }]"
-                    <van-field v-model="form.project.roadLocation" label="路况位置" center placeholder="请填写" required
+          />
-                        :rules="[{ required: true, message: '请填写路况位置' }]" />
+          <van-field
-                    <van-field v-model="form.project.blockedPointName" label="阻断点小地名" center placeholder="请填写" required
+            v-model="form.project.disasterType"
-                        :rules="[{ required: true, message: '请填写阻断点小地名' }]" />
+            label="灾害类型"
-                    <van-field v-model="form.project.estimatedCost" label="恢复重建预估费用" center placeholder="请填写" required
+            center
-                        :rules="[{ required: true, message: '请填写恢复重建预估费用' }]">
+            placeholder="请填写"
-                        <template #extra>
+            :rules="[{ required: true, message: '请填写灾害类型' }]"
-                            万元
+          />
-                        </template>
+          <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 type="primary" class="add-btn" icon="plus" @click="handleAdd"> 提交 </van-button>
-            提交
-        </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'
 
@@ -74,9 +124,9 @@ const form = reactive({
     blockedPointName: null,
     estimatedCost: null,
   },
-    fileList: []
+  fileList: [],
 })
-const formRef = ref();
+const formRef = ref()
 
 // 获取灾害事件详情
 const getDetail = async (id) => {
@@ -85,8 +135,8 @@ const getDetail = async (id) => {
       url: '/snow-ops-platform/water-damage/getById',
       method: 'GET',
       params: {
-                id
+        id,
-            }
+      },
     })
     if (res.code === '00000') {
       form.project.districtName = res.data.event.district
@@ -106,18 +156,18 @@ const getDetail = async (id) => {
     }
   } catch (error) {
     showToast({
-            type: "fail",
+      type: 'fail',
       message: error.message,
-        });
+    })
   }
 }
 
 onMounted(() => {
   if (route.params.data) {
-        const data = JSON.parse(decodeURIComponent(route.params.data));
+    const data = JSON.parse(decodeURIComponent(route.params.data))
     // console.log('@@@@data', data);
     //  在有传参的时候 调用接口去获取数据 并且初始化表单
-        getDetail(data);
+    getDetail(data)
   } else {
     // console.log('无传入数据');
   }
@@ -134,46 +184,42 @@ const handleClickBack = () => {
 const handleAdd = async () => {
   // 先进行表单校验
   if (!formRef.value) {
-        showToast('表单初始化失败');
+    showToast('表单初始化失败')
-        return;
+    return
   }
 
   try {
-        const isValid = await formRef.value.validate();
+    const isValid = await formRef.value.validate()
     // 表单校验通过，继续处理提交逻辑
     const toast = showLoadingToast({
-            message: "上报中...",
+      message: '上报中...',
       forbidClick: true,
       duration: 0, // 设置为0表示不会自动关闭
-        });
+    })
-        console.log('表单校验通过，提交数据:', form);
+    console.log('表单校验通过，提交数据:', form)
 
     const res = await request({
       url: '/snow-ops-platform/recovery/add',
       method: 'POST',
-            data: form
+      data: form,
     })
-        toast.close();
+    toast.close()
     if (res.code === '00000') {
-            showToast('提交成功');
+      showToast('提交成功')
-            handleClickBack();
+      handleClickBack()
     } else {
-            showToast('提交失败, 请稍后重试或联系管理员');
+      showToast('提交失败, 请稍后重试或联系管理员')
     }
   } catch (error) {
     // console.log('表单校验失败:', error);
-        showToast('请检查并完善表单信息');
+    showToast('请检查并完善表单信息')
   }
 }
 
-
 const handleRouteNoChange = (item) => {
   form.project.startStakeNo = item.startStakeNo
   form.project.endStakeNo = item.endStakeNo
 }
-
-
-
 </script>
 
 <style scoped lang="scss">