From 207c65de19374b5caf9c64cf441c65cb24593386 Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Tue, 7 Apr 2026 16:29:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mobile/src/components/PanelItem.vue  |   2 +-
 packages/mobile/src/router/index.js           |   5 +
 packages/mobile/src/views/Rebuild/Rebuild.vue |  12 ++
 .../mobile/src/views/Rebuild/RebuildAdd.vue   | 123 +++++++++++++++---
 .../src/views/Rebuild/RebuildDetails.vue      | 104 +++++++++++++++
 5 files changed, 229 insertions(+), 17 deletions(-)
 create mode 100644 packages/mobile/src/views/Rebuild/RebuildDetails.vue

diff --git a/packages/mobile/src/components/PanelItem.vue b/packages/mobile/src/components/PanelItem.vue
index 17df11b..c652726 100644
--- a/packages/mobile/src/components/PanelItem.vue
+++ b/packages/mobile/src/components/PanelItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-item">
-    <slot name="header">
+    <slot v-if="title" name="header">
       <div class="header">
         <div class="header-title">{{ title }}</div>
         <div class="header-extra" v-if="$slots.headerExtra">
diff --git a/packages/mobile/src/router/index.js b/packages/mobile/src/router/index.js
index fc0be53..c902cb7 100644
--- a/packages/mobile/src/router/index.js
+++ b/packages/mobile/src/router/index.js
@@ -91,6 +91,11 @@ const routes = [
     name: 'RebuildAdd',
     component: () => import('../views/Rebuild/RebuildAdd.vue')
   },
+  {
+    path: '/rebuild-details/:data?',
+    name: 'RebuildDetails',
+    component: () => import('../views/Rebuild/RebuildDetails.vue')
+  },
   {
     path: '/disasterManagement',
     name: 'DisasterManagement',
diff --git a/packages/mobile/src/views/Rebuild/Rebuild.vue b/packages/mobile/src/views/Rebuild/Rebuild.vue
index d4ec84f..ce40740 100644
--- a/packages/mobile/src/views/Rebuild/Rebuild.vue
+++ b/packages/mobile/src/views/Rebuild/Rebuild.vue
@@ -60,6 +60,7 @@ const searchValue = ref('')
 // 预警列表数据
 const list = ref([
     {
+        id: 1,
         area: '彭水',
         rNumber: 'G211',
         type: '发生水毁道路崩塌恢复重建',
@@ -69,6 +70,7 @@ const list = ref([
         status: '审批通过'
     },
     {
+        id: 2,
         area: '巴南',
         rNumber: 'S303',
         type: '道路发生边坡坍塌',
@@ -78,6 +80,7 @@ const list = ref([
         status: '审批驳回'
     },
     {
+        id: 3,
         area: '彭水',
         rNumber: 'G211',
         type: '道路崩塌改造工程',
@@ -93,6 +96,15 @@ const handleClickBack = () => {
     router.push('/')
 }
 
+const handleClickItem = (item) => {
+    router.push({
+        name: 'RebuildDetails',
+        params: {
+            data: encodeURIComponent(JSON.stringify(item.id))
+        }
+    })
+}
+
 const handleAddDevice = () => {
     router.push('/rebuild-add')
     // router.push({
diff --git a/packages/mobile/src/views/Rebuild/RebuildAdd.vue b/packages/mobile/src/views/Rebuild/RebuildAdd.vue
index ffd64c0..cc0295e 100644
--- a/packages/mobile/src/views/Rebuild/RebuildAdd.vue
+++ b/packages/mobile/src/views/Rebuild/RebuildAdd.vue
@@ -1,7 +1,50 @@
 <template>
     <PageContainer title="项目填报" @click-back="handleClickBack">
         <div class="content">
-            
+            <PanelItem>
+                <van-form label-align="left" colon>
+                    <van-field v-model="form.name" label="区县名称" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写区县名称' }]" />
+                    <van-field v-model="form.name" label="线路编号" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写线路编号' }]" />
+                    <van-field v-model="form.name" label="起点桩号" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写起点桩号' }]" />
+                    <van-field v-model="form.name" label="止点桩号" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写止点桩号' }]" />
+                    <van-field v-model="form.name" label="止点桩号" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写止点桩号' }]" />
+                    <van-field v-model="form.number" label="实施里程" center placeholder="单位:公里" required type="number"
+                        :rules="[{ required: true, message: '请填写实施里程' }]">
+                        <template #extra>
+                            公里
+                        </template>
+                    </van-field>
+                    <van-field v-model="form.name" label="塌方及损失" center placeholder="(方/万元)" required
+                        :rules="[{ required: true, message: '请填写塌方及损失' }]" />
+                    <van-field v-model="form.name" label="灾害类型" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写灾害类型' }]" />
+                    <van-field v-model="form.name" label="地点路线" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写地点路线' }]" />
+                    <van-field v-model="form.name" label="路况位置" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写路况位置' }]" />
+                    <van-field v-model="form.name" label="阻断点小地名" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写阻断点小地名' }]" />
+                    <van-field v-model="form.name" label="恢复重建预估费用" center placeholder="请填写" required
+                        :rules="[{ required: true, message: '请填写恢复重建预估费用' }]">
+                        <template #extra>
+                            万元
+                        </template>
+                    </van-field>
+                    <van-field label="附件" center>
+                        <template #input>
+                            <van-uploader v-model="fileList" @delete="handleDelete" name="photos" :file-list="fileList"
+                                :file-type="['image/jpeg', 'image/png']" :after-read="afterRead" multiple
+                                :max-count="6" />
+                        </template>
+                    </van-field>
+                </van-form>
+
+            </PanelItem>
         </div>
 
         <van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
@@ -16,14 +59,15 @@
 import { ref, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import PageContainer from '@/components/PageContainer.vue'
-import SearchInput from '@/components/SearchInput.vue'
-import CurrentSite from '@/components/CurrentSite.vue'
-import CardItem from '@/components/CardItem.vue'
-import EmptyBox from '@/components/EmptyBox.vue'
+import { showToast, showLoadingToast } from "vant";
+import PanelItem from '@/components/PanelItem.vue'
 
 const router = useRouter()
 const route = useRoute()
 
+const form = ref({})
+const fileList = ref([]);
+
 onMounted(() => {
     if (route.params.data) {
         const data = JSON.parse(decodeURIComponent(route.params.data));
@@ -41,23 +85,70 @@ const handleClickBack = () => {
         router.push('/rebuild')
     }
 }
+
+// 文件删除
+const handleDelete = (file) => {
+    if (file.serverUrl) {
+        const index = form.photos.findIndex((p) => p.photoUrl === file.serverUrl);
+        if (index !== -1) {
+            form.photos.splice(index, 1);
+        }
+    }
+};
+
+// 文件上传
+const afterRead = async (file) => {
+    try {
+        const toast = showLoadingToast({
+            message: "上传中...",
+            forbidClick: true,
+            duration: 0, // 设置为0表示不会自动关闭
+        });
+        const formData = new FormData();
+        formData.append("file", file.file);
+        const res = await request({
+            url: "/snow-ops-platform/file/upload",
+            method: "post",
+            data: formData,
+        });
+        toast.close();
+        if (res.code === "00000") {
+            form.photos.push({ photoUrl: res.data });
+            const index = fileList.value.findIndex((f) => f.file === file.file);
+            if (index !== -1) {
+                fileList.value[index].serverUrl = res.data;
+            }
+
+            console.log("form.photos", toRaw(form.photos));
+            console.log("fileList.value", fileList.value);
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        toast.close();
+        showToast({
+            type: "fail",
+            message: error.message,
+        });
+    }
+};
 </script>
 
 <style scoped lang="scss">
 .content {
-    padding: 16px 16px 80px 16px;
+    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>
diff --git a/packages/mobile/src/views/Rebuild/RebuildDetails.vue b/packages/mobile/src/views/Rebuild/RebuildDetails.vue
new file mode 100644
index 0000000..eded6ee
--- /dev/null
+++ b/packages/mobile/src/views/Rebuild/RebuildDetails.vue
@@ -0,0 +1,104 @@
+<template>
+    <PageContainer title="项目填报" @click-back="handleClickBack">
+        <div class="content">
+            <PanelItem>
+                <div class="detail">
+                    <div class="header">
+                        <div class="header-title">{{ `${data.area} ${data.rNumber} ${data.type}` }}</div>
+                        <div class="header-extra">
+                            <van-tag v-if="data.status === '审批通过'" type="success" plain size="medium">{{ data.status
+                            }}</van-tag>
+                            <van-tag v-else-if="data.status === '审批驳回'" type="danger" plain size="medium">{{ data.status
+                            }}</van-tag>
+                            <van-tag v-else type="warning" plain size="medium">{{ data.status }}</van-tag>
+                        </div>
+                    </div>
+                    <div class="item">区县名称： {{ data.area }}</div>
+                    <div class="item">线路编号： {{ data.area }}</div>
+                    <div class="item">起点桩号： {{ data.area }}</div>
+                    <div class="item">止点桩号： {{ data.area }}</div>
+                    <div class="item">实施里程： {{ data.area }}</div>
+                    <div class="item">塌方及损失： {{ data.area }}</div>
+                    <div class="item">灾害类型： {{ data.area }}</div>
+                    <div class="item">地点路线： {{ data.area }}</div>
+                    <div class="item">阻断点小地名： {{ data.area }}</div>
+                    <div class="item">提交时间： {{ data.area }}</div>
+                    <div class="item">恢复重建预估费用： {{ data.area }}</div>
+                </div>
+            </PanelItem>
+            <PanelItem title="附件">
+                <!-- 附件 -->
+            </PanelItem>
+            <PanelItem v-if="data.xxx">
+                <!-- 驳回理由 -->
+            </PanelItem>
+        </div>
+
+    </PageContainer>
+
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import PageContainer from '@/components/PageContainer.vue'
+import { showToast, showLoadingToast } from "vant";
+import PanelItem from '@/components/PanelItem.vue'
+
+const router = useRouter()
+const route = useRoute()
+
+const data = ref({
+    area: '',
+    rNumber: '',
+    type: '',
+    status: '审批通过',
+})
+
+onMounted(() => {
+    if (route.params.data) {
+        const data = JSON.parse(decodeURIComponent(route.params.data));
+        console.log('@@@@data', data);
+        // todo 在有传参的时候 调用接口去获取数据 并且初始化表单
+    } else {
+        console.log('无传入数据');
+    }
+})
+
+const handleClickBack = () => {
+    router.push('/rebuild')
+}
+</script>
+
+<style scoped lang="scss">
+.content {
+    padding: 20px 0px 0px 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.detail {
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 18px;
+}
+
+.header-title {
+    font-weight: 500;
+    font-size: 20px;
+    color: #4a4a4a;
+    line-height: 16px;
+}
+
+.item {
+    margin-bottom: 18px;
+}
+</style>