feat:房间详情

apps/web-antd/src/api/property/room/model.d.ts

@@ -20,6 +20,7 @@ export interface RoomVO {
    * 房间类型('住宅','商铺','办公室','设备间','公共区域')
    */
   roomType: string;
+  roomTypeName: string;
 
   /**
    * 建筑面积(平方米)
@@ -50,6 +51,40 @@ export interface RoomVO {
    * 状态（'空置','已售','已租','自用'）
    */
   status: string;
+  /**
+   * 房间图片
+   */
+  imgUrl: string;
+  imgPath: string;
+
+
+  /**
+   * 是否重要
+   */
+  isMatter: string;
+  /**
+   * 状态
+   */
+  statusName: string;
+
+  /**
+   * 小区
+   */
+  communityText: string;
+
+  /**
+   * 建筑
+   */
+  buildingText: string;
+
+  /**
+   * 楼层
+   */
+  floorText: string;
+  /**
+   * 所属单位
+   */
+  residentUnitText: string;
 
 }
 

apps/web-antd/src/views/property/room/index.vue

@@ -3,6 +3,7 @@ import {Page, useVbenModal, type VbenFormProps} from '@vben/common-ui';
 import {getVxePopupContainer} from '@vben/utils';
 import {Modal, Popconfirm, Space} from 'ant-design-vue';
 import FloorTree from "./floor-tree.vue"
+import detailModal from "./room-detail.vue";
 
 import {
   useVbenVxeGrid,
@@ -20,7 +21,6 @@ import {commonDownloadExcel} from '#/utils/file/download';
 
 import roomModal from './room-modal.vue';
 import {columns, querySchema} from './data';
-import DeptTree from "#/views/system/user/dept-tree.vue";
 import {ref} from "vue";
 
 const formOptions: VbenFormProps = {
@@ -96,6 +96,9 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
 const [RoomModal, modalApi] = useVbenModal({
   connectedComponent: roomModal,
 });
+const [RoomDetail, detailApi] = useVbenModal({
+  connectedComponent: detailModal,
+});
 
 function handleAdd() {
   modalApi.setData({});
@@ -107,6 +110,11 @@ async function handleEdit(row: Required<RoomForm>) {
   modalApi.open();
 }
 
+async function handleInfo(row: Required<RoomForm>) {
+  detailApi.setData({id: row.id});
+  detailApi.open();
+}
+
 async function handleDelete(row: Required<RoomForm>) {
   await roomRemove(row.id);
   await tableApi.query();
@@ -176,6 +184,12 @@ function handleSelectFloor(nodeLevel: number) {
         </template>
         <template #action="{ row }">
           <Space>
+            <ghost-button
+              v-access:code="['property:room:query']"
+              @click.stop="handleInfo(row)"
+            >
+              {{ $t('pages.common.info') }}
+            </ghost-button>
             <ghost-button
               v-access:code="['property:room:edit']"
               @click.stop="handleEdit(row)"
@@ -201,5 +215,6 @@ function handleSelectFloor(nodeLevel: number) {
       </BasicTable>
     </div>
     <RoomModal @reload="tableApi.query()"/>
+    <RoomDetail/>
   </Page>
 </template>

apps/web-antd/src/views/property/room/room-detail.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem} from 'ant-design-vue';
+import {ossInfo} from "#/api/system/oss";
+import {roomInfo} from "#/api/property/room";
+import type {RoomVO} from "#/api/property/room/model";
+import {renderDict} from "#/utils/render";
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    roomDetail.value = null;
+  },
+});
+
+const roomDetail = shallowRef<null | RoomVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  roomDetail.value = await roomInfo(id);
+  try {
+    if (roomDetail.value.imgUrl) {
+      const res = await ossInfo([roomDetail.value.imgUrl]);
+      roomDetail.value.imgPath = res?.[0]?.url
+    }
+  } catch (e) {}
+
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="房间详情" class="w-[70%]">
+    <Descriptions v-if="roomDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'120px'}">
+      <DescriptionsItem label="社区">
+        {{ roomDetail.communityText }}
+      </DescriptionsItem>
+      <DescriptionsItem label="建筑名称">
+        {{ roomDetail.buildingText }}
+      </DescriptionsItem>
+      <DescriptionsItem label="楼栋号">
+        {{ roomDetail.floorText }}
+      </DescriptionsItem>
+      <DescriptionsItem label="房间号">
+        {{ roomDetail.roomNumber }}
+      </DescriptionsItem>
+      <DescriptionsItem label="房间类型">
+        {{ roomDetail.roomTypeName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="建筑面积">
+        {{ roomDetail.area }}
+      </DescriptionsItem>
+      <DescriptionsItem label="使用面积">
+        {{ roomDetail.insideInArea }}
+      </DescriptionsItem>
+
+      <DescriptionsItem label="是否重要">
+        <component v-if="roomDetail.isMatter != null"
+          :is="renderDict(roomDetail.isMatter,'wy_fjzydj')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="状态">
+        {{ roomDetail.statusName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="所属单位">
+        {{ roomDetail.residentUnitText ? roomDetail.residentUnitText : '-'}}
+      </DescriptionsItem>
+      <DescriptionsItem label="房间图片" :span="2">
+        <img v-if="roomDetail.imgPath" :src="roomDetail.imgPath" alt="图片加载失败"  class="w-[100px] h-[100px]"/>
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>