8/13， dev

src/views/system/parking/parkMain.vue

@@ -45,12 +45,13 @@
                   <div class="label">添加时间：</div>
                   <div class="main">{{ parkingReviewInfo.parking.createTime }}</div>
                 </div>
-                <div class="carInfo_item" v-if="parkingReviewInfo.parking.residentName">
+                <div class="carInfo_item">
                   <div class="label">业主持有人：</div>
                   <div class="main">
                     <span>
                       {{ parkingReviewInfo.parking.residentName }}
                     </span>
+                    <el-button @click="getUserInfo" type="primary" link style="font-size: smaller; margin-left: 15px">详情</el-button>
                   </div>
                 </div>
               </div>
@@ -141,20 +142,97 @@
         </el-col>
       </el-row>
     </div>
+
+    <el-dialog width="500" @close="handleClose" v-model="MainForm.visible" title="车位持有人详情">
+      <div class="item">
+        <div class="label">姓名</div>
+        <div class="value">{{ MainFormInfo.name }}</div>
+      </div>
+      <div class="item">
+        <div class="label">类型</div>
+        <div class="value">
+          <DictTag :value="MainFormInfo.type" :options="com_resident_relationship"></DictTag>
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">状态</div>
+        <div class="value">
+          <DictTag :value="MainFormInfo.status" :options="com_review"></DictTag>
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">证件号码</div>
+        <div class="value">{{ MainFormInfo.idCard }}</div>
+      </div>
+      <div class="item">
+        <div class="label">手机号码</div>
+        <div class="value">{{ MainFormInfo.phone }}</div>
+      </div>
+      <div class="item">
+        <div class="label">房间</div>
+        <div class="value">{{ MainFormInfo.houseName }}</div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
-import { getParkingReviewInfo } from '@/api/system/parking';
+import { getParkingReviewInfo, getParkingResidentInfo } from '@/api/system/parking';
+import DictTag from '@/components/DictTag/index.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
-const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
+const { com_parking_status, com_parking_type, com_review, com_resident_relationship } = toRefs<any>(
+  proxy?.useDict('com_parking_status', 'com_parking_type', 'com_review', 'com_resident_relationship')
+);
 
 const route = useRoute();
 const id = ref('');
 
+const MainForm = ref({
+  visible: false
+});
+// 持有人信息
+const MainFormInfo = ref({
+  id: '',
+  name: '',
+  type: '',
+  status: '',
+  idCard: '',
+  phone: '',
+  houseName: ''
+});
+// 重置模态框
+function resetMainFormInfo() {
+  MainFormInfo.value = {
+    id: '',
+    name: '',
+    type: '',
+    status: '',
+    idCard: '',
+    phone: '',
+    houseName: ''
+  };
+}
+// 查询 持有人信息
+function getUserInfo() {
+  resetMainFormInfo();
+  getParkingResidentInfo(parkingReviewInfo.value.parking.residentId).then((res) => {
+    MainFormInfo.value = res.data;
+  });
+  MainForm.value.visible = true;
+}
+// 关闭模态框
+function handleClose() {
+  resetMainFormInfo();
+  MainForm.value.visible = false;
+}
+
 type parkingReviewType = {
   parking: {
     id: string;
@@ -273,6 +351,19 @@ getInfo();
 .ResidentMainBox {
   display: flex;
   flex-direction: column;
+
+  .item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    .label {
+      width: 120px;
+      text-align: right;
+      font-weight: bold;
+      margin-right: 10px;
+    }
+  }
+
   .ResidentMainBody {
     flex: 1;
     margin-top: 20px;
@@ -300,6 +391,7 @@ getInfo();
         }
       }
     }
+
     &:deep(div.el-step__head.is-process) {
       & > div.el-step__line {
         width: 0;