faet: 项目详情

packages/screen/src/router/index.js

@@ -158,6 +158,16 @@ const routes = [
       parentRoute: 'projectManagement' // 用于在面包屑中建立父子关系
     }
   },
+  {
+    path: '/projectDetail/:data?',
+    name: 'projectDetail',
+    component: () => import('../views/ProjectManagement_Rebuild/projectDetailPage.vue'),
+    meta: {
+      title: '项目详情',
+      breadcrumb: true,
+      parentRoute: 'projectManagement' // 用于在面包屑中建立父子关系
+    }
+  },
   {
     path: '/disasterManagement',
     name: 'disasterManagement',

packages/screen/src/views/ProjectManagement_Rebuild/index.js

@@ -207,9 +207,11 @@ export default () => {
             label: "审批状态",
             formatter: (row) => {
                 const statusMap = {
-                    0: '待审批',
+                    0: '待区县审批',
-                    1: '审批通过',
+                    1: '区县审批通过(待业务部门审批)',
-                    2: '审批驳回'
+                    2: '区县审批驳回',
+                    3: '业务部门审批通过',
+                    4: '业务部门审批驳回',
                 };
                 return statusMap[row.approvalStatus] || '未知状态';
             }
@@ -242,6 +244,7 @@ export default () => {
                             link: true,
                             style: "margin-left: 10px;",
                             onClick: async () => {
+                                gotoDetaillPage(row);
                             },
                         },
                         () => "详情"
@@ -306,6 +309,16 @@ export default () => {
         modelVisible.value = true;
     }
 
+    // 跳转至详情页面
+    const gotoDetaillPage = (row) => {
+        router.push({
+            name: 'projectDetail',
+            params: {
+                data: encodeURIComponent(JSON.stringify(row.id)),
+            }
+        })
+    }
+
     onMounted(() => {
         getTableData();
     })

packages/screen/src/views/ProjectManagement_Rebuild/projectDetailPage.vue

@@ -0,0 +1,468 @@
+<template>
+    <div class="root">
+        <div class="form-box">
+            <el-form ref="formRef" :model="form" label-position="right" label-width="150px" style="padding-right: 50px"
+                :rules="rules">
+                <el-row>
+                    <el-col :span="20">
+                        <h4 style="margin:0 0 20px 50px;">基本信息</h4>
+                    </el-col>
+                    <el-col :span="4" style="display: flex; justify-content: center;">
+                        <el-tag :type="getApprovalStatusType(form.approvalStatus)">{{
+                            getApprovalStatusText(form.approvalStatus) }}</el-tag>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="区县名称" prop="区县名称">
+                            <el-input disabled v-model="form.districtName"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="路线编码" prop="路线编码">
+                            <el-input disabled v-model="form.routeNo"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="实施里程" prop="实施里程">
+                            <el-input-number disabled v-model="form.implementMileage" :controls="false">
+                                <template #suffix>
+                                    <span>公里</span>
+                                </template>
+                            </el-input-number>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="塌方及损失" prop="塌方及损失">
+                            <el-input-number disabled v-model="form.earthworkLoss" :controls="false">
+                                <template #suffix>
+                                    <span>方/万元</span>
+                                </template>
+                            </el-input-number>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="起点桩号" prop="起点桩号">
+                            <el-input disabled v-model="form.startStakeNo"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="止点桩号" prop="止点桩号">
+                            <el-input disabled v-model="form.endStakeNo"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="路况位置" prop="路况位置">
+                            <el-input disabled v-model="form.roadLocation"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="阻断点小地名" prop="阻断点小地名">
+                            <el-input disabled v-model="form.blockedPointName"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="灾害类型" prop="灾害类型">
+                            <el-input disabled v-model="form.disasterType"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="预估费用" prop="预估费用">
+                            <el-input-number disabled v-model="form.estimatedCost" :controls="false">
+                                <template #suffix>
+                                    <span>万元</span>
+                                </template>
+                            </el-input-number>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="技术等级" prop="技术等级">
+                            <el-select disabled v-model="form.technicalGrade">
+                                <el-option
+                                    v-for="item in [{ value: '三级', label: '三级' }, { value: '二级', label: '二级' }, { value: '一级', label: '一级' }]"
+                                    :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="资金来源" prop="资金来源">
+                            <el-input disabled v-model="form.fundingSource"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="处置灾毁处数" prop="处置灾毁处数">
+                            <el-input-number disabled v-model="form.disposalCount" :controls="false"></el-input-number>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="已完工处数" prop="已完工处数">
+                            <el-input-number disabled v-model="form.completedCount" :controls="false"></el-input-number>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="总投资" prop="总投资">
+                            <el-input-number disabled v-model="form.totalInvestment" :controls="false">
+                                <template #suffix>
+                                    <span>万元</span>
+                                </template>
+                            </el-input-number>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="项目费用类型" prop="项目费用类型">
+                            <el-radio-group disabled v-model="form.projectExpenseType">
+                                <el-radio value="自费重修">自费重修</el-radio>
+                                <el-radio value="申报重修">申报重修</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <h4 style="margin:0 0 20px 50px;">实施情况</h4>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="主要建设内容" prop="主要建设内容">
+                            <el-input disabled type="textarea" v-model="form.mainConstructionContent" clearable>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="开工或预计开工时间" prop="开工或预计开工时间">
+                            <el-date-picker disabled type="date" v-model="form.startTime" clearable format="YYYY-MM-DD"
+                                value-format="YYYY-MM-DD">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="完工或预计完工时间" prop="完工或预计完工时间">
+                            <el-date-picker disabled type="date" v-model="form.endTime" clearable format="YYYY-MM-DD"
+                                value-format="YYYY-MM-DD">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="是否在部交通统计报表管理系统报送投资" prop="是否在部交通统计报表管理系统报送投资" label-width="300px">
+                            <el-radio-group disabled v-model="form.isReportedToMinistry">
+                                <el-radio :value="0">是</el-radio>
+                                <el-radio :value="1">否</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="已报送投资额" prop="已报送投资额">
+                            <el-input-number disabled v-model="form.reportedInvestment" :controls="false">
+                                <template #suffix>
+                                    <span>万元</span>
+                                </template>
+                            </el-input-number>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="项目实施进度" prop="项目实施进度">
+                            <el-select disabled v-model="form.projectProgress">
+                                <el-option v-for="item in [
+                                    { value: '立项', label: '立项' },
+                                    { value: '财政评审', label: '财政评审' },
+                                    { value: '开展施工图设计', label: '开展施工图设计' },
+                                    { value: '完成施设于批复', label: '完成施设于批复' },
+                                ]" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="建设单位名称" prop="建设单位名称">
+                            <el-input disabled v-model="form.constructionUnit"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="建设单位联系人" prop="建设单位联系人">
+                            <el-input disabled v-model="form.constructionUnitContact"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="建设单位联系人电话" prop="建设单位联系人电话">
+                            <el-input disabled v-model="form.constructionUnitPhone"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="施工单位名称" prop="施工单位名称">
+                            <el-input disabled v-model="form.executionUnit"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="施工单位联系人" prop="施工单位联系人">
+                            <el-input disabled v-model="form.executionUnitContact"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="施工单位联系电话" prop="施工单位联系电话">
+                            <el-input disabled v-model="form.executionUnitPhone"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="设计单位名称" prop="设计单位名称">
+                            <el-input disabled v-model="form.designUnit"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="设计单位联系人" prop="设计单位联系人">
+                            <el-input disabled v-model="form.designUnitContact"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="设计单位联系人电话" prop="设计单位联系人电话">
+                            <el-input disabled v-model="form.designUnitPhone"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="监理单位名称" prop="监理单位名称">
+                            <el-input disabled v-model="form.supervisionUnit"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="监理单位联系人" prop="监理单位联系人">
+                            <el-input disabled v-model="form.supervisionUnitContact"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="监理单位联系电话" prop="监理单位联系电话">
+                            <el-input disabled v-model="form.supervisionUnitPhone"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="施工图批复时间" prop="施工图批复时间">
+                            <el-date-picker disabled type="date" v-model="form.designApprovalTime" clearable
+                                format="YYYY-MM-DD" value-format="YYYY-MM-DD">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="施工图设计批复文件(附件)" prop="施工图设计批复文件" label-width="200px">
+                            <FileUpload type="image" :limit="9" v-model="designApprovalFiles" :fileType=2 />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="施工合同时间" prop="施工合同时间">
+                            <el-date-picker disabled type="date" v-model="form.contractTime" clearable
+                                format="YYYY-MM-DD" value-format="YYYY-MM-DD">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="施工合同金额" prop="施工合同金额">
+                            <el-input-number disabled v-model="form.contractAmount" :controls="false">
+                                <template #suffix>
+                                    <span>万元</span>
+                                </template>
+                            </el-input-number>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="施工合同(附件)" prop="施工合同">
+                            <FileUpload type="image" :limit="9" v-model="contractFiles" :fileType=3 />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="建设完成投资" prop="建设完成投资">
+                            <el-input-number disabled v-model="form.completedInvestment" :controls="false">
+                                <template #suffix>
+                                    <span>万元</span>
+                                </template>
+                            </el-input-number>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="交竣工验收时间" prop="交竣工验收时间">
+                            <el-date-picker disabled type="date" v-model="form.acceptanceTime" clearable
+                                format="YYYY-MM-DD" value-format="YYYY-MM-DD">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="交竣工证书(附件)" prop="交竣工证书" label-width="200px">
+                            <FileUpload type="image" :limit="9" v-model="acceptanceFiles" :fileType=4 />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="其他佐证文件" prop="其他佐证文件">
+                            <FileUpload type="image" :limit="9" v-model="otherFiles" :fileType=6 />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="完工项目上传图片(附件)" prop="完工项目上传图片" label-width="200px">
+                            <FileUpload type="image" :limit="9" v-model="completedFiles" :fileType=5 />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div v-if="form.rejectReason">
+                    <el-row>
+                        <h4 style="margin:0 0 20px 50px;">驳回原因</h4>
+                    </el-row>
+                    <el-row>
+                        <span style="margin:0 0 20px 50px;"> {{form.rejectReason}} </span>
+                    </el-row>
+                </div>
+            </el-form>
+        </div>
+        <div class="button-box">
+            <el-button type="primary" @click="goback" size="large">返回</el-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, onMounted, watch, reactive, toRaw } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import FileUpload from '@/component/FileUpload/FileUpload.vue'
+import { request } from '../../../../shared/utils/request'
+import { ElLoading, ElMessage } from 'element-plus'
+const router = useRouter()
+const route = useRoute()
+const form = ref({})
+const formRef = ref(null)
+
+// 附件分类: 1-现场图片/视频 2-施工图设计批复文件 3-施工合同 4-交竣工证书 5-完工项目上传图片 6-其他佐证文件
+const designApprovalFiles = ref([]) // 施工图设计批复文件
+const contractFiles = ref([]) // 施工合同
+const acceptanceFiles = ref([]) // 交竣工证书
+const completedFiles = ref([]) // 完工项目上传图片
+const otherFiles = ref([]) // 其他佐证文件
+
+// 获取审批状态文本
+const getApprovalStatusText = (status) => {
+    const statusMap = {
+        0: '待区县审批',
+        1: '区县审批通过(待业务部门审批)',
+        2: '区县审批驳回',
+        3: '业务部门审批通过',
+        4: '业务部门审批驳回'
+    }
+    return statusMap[status] || '未知状态'
+}
+
+// 获取审批状态标签类型
+const getApprovalStatusType = (status) => {
+    const typeMap = {
+        0: 'warning', // 待区县审批 - 警告色
+        1: 'primary', // 区县审批通过 - 主要色
+        2: 'danger',  // 区县审批驳回 - 危险色
+        3: 'success', // 业务部门审批通过 - 成功色
+        4: 'danger'   // 业务部门审批驳回 - 危险色
+    }
+    return typeMap[status] || 'info'
+}
+
+
+
+// watch(() => designApprovalFiles.value, (data) => {
+//     console.log('@@@@@', data);
+// })
+
+// watch(() => form.value, (data) => {
+//     console.log('@@@@@form', data);
+// }, { deep: true })
+
+// 获取详情信息
+const getDetail = async (id) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/recovery/getById',
+            method: 'GET',
+            params: {
+                id: id
+            }
+        })
+        if (res.code === '00000') {
+            form.value = res.data
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error(error.message)
+        console.log('error', error);
+    }
+
+}
+
+onMounted(async() => {
+    if (route.params.data) {
+        const data = JSON.parse(decodeURIComponent(route.params.data));
+        await getDetail(data)
+    }
+})
+
+const goback = () => {
+    router.push({
+        name: 'projectManagement',
+    })
+}
+
+</script>
+
+<style scoped>
+.root {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.form-box {
+    width: 100%;
+    height: 90%;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+.button-box {
+    flex: 1;
+    padding: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+</style>