feat: 恢复重建app 项目详情

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

@@ -4,33 +4,38 @@
             <PanelItem>
                 <div class="detail">
                     <div class="header">
-                        <div class="header-title">{{ `${data.area} ${data.rNumber} ${data.type}` }}</div>
+                        <div class="header-title">{{ data.projectName }}</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>
+                            <van-tag v-if="data.approvalStatus === 3 || data.approvalStatus === 1" type="success" plain
+                                size="medium">审批通过</van-tag>
+                            <van-tag v-else-if="data.approvalStatus === 2 || data.approvalStatus === 4" type="danger"
+                                plain size="medium">审批驳回</van-tag>
+                            <van-tag v-else type="warning" plain size="medium">待审批</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 class="item">区县名称： {{ data.districtName }}</div>
+                    <div class="item">线路编号： {{ data.routeNo }}</div>
+                    <div class="item">起点桩号： {{ data.startStakeNo }}</div>
+                    <div class="item">止点桩号： {{ data.endStakeNo }}</div>
+                    <div class="item">实施里程： {{ `${data.implementMileage} 公里` }}</div>
+                    <div class="item">塌方及损失： {{ data.earthworkLoss }}</div>
+                    <div class="item">灾害类型： {{ data.disasterType }}</div>
+                    <div class="item">地点路线： {{ data.locationRoute }}</div>
+                    <div class="item">阻断点小地名： {{ data.blockedPointName }}</div>
+                    <div class="item">提交时间： {{ data.submitTime }}</div>
+                    <div class="item">恢复重建预估费用： {{ data.estimatedCost }}</div>
                 </div>
             </PanelItem>
             <PanelItem title="附件">
-                <!-- 附件 -->
+                <div class="fileArea">
+                    <van-image v-for="(item, index) in data?.fileList" :key="index" :src="item.fileUrl" fit="cover"
+                        width="100px" height="100px" style="margin: 10px" @click="showImage(item.fileUrl)"></van-image>
+                </div>
             </PanelItem>
-            <PanelItem v-if="data.xxx">
-                <!-- 驳回理由 -->
+            <PanelItem v-if="data.rejectReason">
+                <div class="detail">
+                    <div class="item">驳回理由： {{ data.rejectReason }}</div>
+                </div>
             </PanelItem>
         </div>
 
@@ -43,32 +48,50 @@
 import { ref, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import PageContainer from '@/components/PageContainer.vue'
-import { showToast, showLoadingToast } from "vant";
+import { showToast, showLoadingToast, showImagePreview } from "vant";
 import PanelItem from '@/components/PanelItem.vue'
+import { request } from "../../../../shared/utils/request";
 
 const router = useRouter()
 const route = useRoute()
 
-const data = ref({
-    area: '',
-    rNumber: '',
-    type: '',
-    status: '审批通过',
-})
+const data = ref({})
 
 onMounted(() => {
     if (route.params.data) {
         const data = JSON.parse(decodeURIComponent(route.params.data));
-        console.log('@@@@data', data);
-        // todo 在有传参的时候 调用接口去获取数据 并且初始化表单
+        getDetaillData(data)
+
     } else {
         console.log('无传入数据');
     }
 })
 
+const getDetaillData = async (id) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/recovery/getById',
+            method: 'GET',
+            params: {
+                id: id
+            }
+        })
+        if (res.code === '00000') {
+            data.value = res.data
+        }
+    } catch (error) {
+        showToast('获取详情失败，请稍后重试')
+        console.log('error', error);
+    }
+}
+
 const handleClickBack = () => {
     router.push('/rebuild')
 }
+
+const showImage = (url) => {
+    showImagePreview([url]);
+};
 </script>
 
 <style scoped lang="scss">
@@ -101,4 +124,10 @@ const handleClickBack = () => {
 .item {
     margin-bottom: 18px;
 }
+
+.fileArea {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
 </style>