完成访客搭建，完善之前审核界面

src/views/system/Repair/repairMain.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ResidentMainBox p-2 w-full">
-    <PageHeader title="车位详情"></PageHeader>
+    <PageHeader title="报修详情"></PageHeader>
     <div class="ResidentMainBody">
       <el-row :span="24" :gutter="20">
         <el-col :span="16">
@@ -9,8 +9,8 @@
             <el-card>
               <template #header>
                 <div class="card-header">
-                  <span>车位信息</span>
-                  <el-button text type="primary">编辑</el-button>
+                  <span>报修房屋</span>
+                  <span class="ml-20px color-blue cursor-pointer" @click="handleEdit">编辑</span>
                 </div>
               </template>
               <div class="w-full h-full CarinfoBox">
@@ -18,59 +18,44 @@
                   <el-col :span="8">
                     <div class="carinfo_item">
                       <div class="label">报修房屋</div>
-                      <div class="main">地下停车场A区</div>
+                      <div class="main">{{ form.house }}</div>
                     </div>
                   </el-col>
                   <el-col :span="8">
                     <div class="carinfo_item">
                       <div class="label">维修项目</div>
-                      <div class="main">地下停车场A区</div>
-                    </div>
-                  </el-col>
-                  <el-col :span="8">
-                    <div class="carinfo_item">
-                      <div class="label">问题描述</div>
-                      <div class="main">地下停车场A区</div>
+                      <div class="main">{{ form.maintenanceItem }}</div>
                     </div>
                   </el-col>
                 </el-row>
+
                 <el-row class="mb-20px">
                   <el-col :span="8">
                     <div class="carinfo_item">
                       <div class="label">报修人</div>
-                      <div class="main">地下停车场A区</div>
+                      <div class="main">{{ form.residentName }}</div>
                     </div>
                   </el-col>
                   <el-col :span="8">
                     <div class="carinfo_item">
                       <div class="label">手机号码</div>
-                      <div class="main">地下停车场A区</div>
-                    </div>
-                  </el-col>
-                  <el-col :span="8">
-                    <div class="carinfo_item">
-                      <div class="label">预约日期</div>
-                      <div class="main">地下停车场A区</div>
+                      <div class="main">{{ form.phone }}</div>
                     </div>
                   </el-col>
                 </el-row>
                 <el-row class="mb-20px">
-                  <el-col :span="8">
-                    <div class="carinfo_item">
-                      <div class="label">提交人</div>
-                      <div class="main">地下停车场A区</div>
-                    </div>
-                  </el-col>
-                  <el-col :span="8">
-                    <div class="carinfo_item">
-                      <div class="label">提交时间</div>
-                      <div class="main">地下停车场A区</div>
-                    </div>
-                  </el-col>
-                  <el-col :span="8">
+                  <el-col>
                     <div class="carinfo_item">
                       <div class="label">预约日期</div>
-                      <div class="main">地下停车场A区</div>
+                      <div class="main">{{ form.orderDate }}</div>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row class="mb-20px">
+                  <el-col>
+                    <div class="carinfo_item">
+                      <div class="label">问题描述</div>
+                      <div class="main">{{ form.problem }}</div>
                     </div>
                   </el-col>
                 </el-row>
@@ -79,7 +64,19 @@
                     <div class="carinfo_item">
                       <div class="label">附件</div>
                       <div class="main fileImagebox">
-                        <el-image class="carinfoImage"></el-image>
+                        <el-image
+                          :preview-teleported="true"
+                          :zoom-rate="1.2"
+                          :max-scale="7"
+                          :min-scale="0.2"
+                          :preview-src-list="form.problemImageUrlList"
+                          show-progress
+                          :initial-index="0"
+                          v-for="(item, index) in form.problemImageUrlList"
+                          :key="index"
+                          :src="item"
+                          class="carinfoImage"
+                        ></el-image>
                       </div>
                     </div>
                   </el-col>
@@ -100,8 +97,7 @@
                   <repairUser :userid="userid"></repairUser>
                 </div>
                 <div class="actions mt-5">
-                  <el-button type="primary">审核通过</el-button>
-                  <el-button type="danger">审核不通过</el-button>
+                  <el-button type="primary">确定派单</el-button>
                   <el-button>返回</el-button>
                 </div>
               </div>
@@ -109,7 +105,7 @@
           </el-card>
         </el-col>
         <el-col :span="8">
-          <el-card style="position: relative">
+          <el-card style="position: relative; height: 100%">
             <template #header>
               <div class="asideCardHeader w-full">
                 <div class="cardSubtitle">
@@ -118,7 +114,7 @@
                 </div>
               </div>
             </template>
-            <div class="w-full h-50%">
+            <div class="h-full w-full">
               <el-steps space="108px" direction="vertical" :active="activeStop">
                 <el-step>
                   <template #title>
@@ -156,14 +152,94 @@
 import { ref } from 'vue';
 import repairUser from '@/components/Holder/repairUser.vue';
 import PageHeader from '@/components/Pageheader/index.vue';
+import { getRepair } from '@/api/system/Repair';
+import { getCommunitylistAPI } from '@/api/system/community';
+import { getVillageTree } from '@/api/system/house';
+import { convertBuildingToTree, getHousePathById } from '@/utils/house';
+import { listRepairProject } from '@/api/system/RepairProject';
+import { listResident } from '@/api/system/resident';
+import { RepairVO } from '@/api/system/Repair/type';
+import { useHouseStore } from '@/store/modules/house';
+
+const houseStore = useHouseStore();
+const { treedata } = storeToRefs(houseStore);
 
 const route = useRoute();
+const router = useRouter();
 const active = ref(6);
 const activeStop = ref(4);
 
+interface formType extends RepairVO {
+  maintenanceItem?: string;
+  residentName?: string;
+  problemImageUrlList?: string[];
+  house?: string;
+}
+
+const form = ref<formType>({
+  'id': null,
+  'houseId': null,
+  'maintenanceItemId': null,
+  'problem': '',
+  'residentId': null,
+  'phone': null,
+  'orderDate': '',
+  'problemImageUrl': '',
+  'problemStatus': '0',
+  'repairDes': '',
+  'repairImageUrl': '',
+  'repairId': null
+});
 const userid = ref();
+
+// 维修项目
+const projectlist = ref([]);
+// 住户
+const residentList = ref([]);
+//  ! 房屋 ====================================================================================================
+async function init() {
+  // 项目
+  const projectres = await listRepairProject();
+  projectlist.value = projectres.rows;
+  // 住户
+  const residentlistres = await listResident();
+  residentList.value = residentlistres.rows;
+  // 报修详情
+  const res = await getRepair(userid.value);
+  form.value = res.data;
+  const find = projectlist.value.find((item) => item.id === form.value.maintenanceItemId);
+  if (find) {
+    if (find.parentId) {
+      const find2 = projectlist.value.find((item) => item.id === find.parentId);
+      form.value.maintenanceItem = find2.projectName + ' - ' + find.projectName;
+    } else {
+      form.value.maintenanceItem = find.projectName;
+    }
+  }
+
+  const houseinfo = getHousePathById(treedata.value, form.value.houseId, 'label');
+  console.log(treedata.value);
+
+  form.value.house = houseinfo.join(' - ');
+
+  const residentinfo = residentList.value.find((item) => item.id === form.value.residentId);
+  form.value.residentName = residentinfo.name;
+
+  form.value.problemImageUrlList = form.value.problemImageUrl.split(',').filter((item) => item);
+}
+
 if (route.query.id) {
   userid.value = route.query.id;
+  init();
+}
+
+function handleEdit() {
+  router.push({
+    path: '/repair/addRepair',
+    query: {
+      id: form.value.id
+    }
+  });
 }
 </script>
 
@@ -173,6 +249,7 @@ if (route.query.id) {
   flex-direction: column;
   .ResidentMainBody {
     margin-top: 20px;
+    flex: 1;
     .CarinfoBox {
       &.gridbox {
         display: grid;
@@ -192,8 +269,9 @@ if (route.query.id) {
           padding-right: 10px;
         }
         .carinfoImage {
+          margin: 10px;
           width: 200px;
-          height: 100px;
+          height: 150px;
         }
       }
     }