estate/src/views/system/houseRental/houseMain.vue

<template>
  <div class="AddBuildingBox">
    <PageHeader title="房屋租赁管理"></PageHeader>
    <div class="AddBuildingBody" v-loading="loading">
      <div class="title flex flex-items-center flex-justify-between">
        <div>
          <span>基础资料 </span>
          <span class="ml-20px color-blue cursor-pointer" @click="hanlededit">编辑</span>
        </div>
        <el-button @click="handlBack" class="mr-10px">返回</el-button>
      </div>
      <div class="addBuildingFormBody">
        <div class="descriptionsbox">
          <div class="label">房屋:</div>
          <div class="value">{{ HouseInfo.name }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">业主姓名:</div>
          <div class="value">{{ HouseInfo.rentalName }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">租金:</div>
          <div class="value">{{ HouseInfo.rent }}元</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">租赁方式:</div>
          <div class="value">
            <DictTag :options="com_rental_method" :value="HouseInfo.rentalType"></DictTag>
          </div>
        </div>
        <div class="descriptionsbox">
          <div class="label">房屋朝向:</div>
          <div class="value">{{ HouseInfo.houseFace }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">房屋面积:</div>
          <div class="value">{{ HouseInfo.houseArea }}㎡</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">房屋楼层:</div>
          <div class="value">{{ HouseInfo.floorNo }}层</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">入住时间:</div>
          <div class="value">{{ HouseInfo.inTime }}</div>
        </div>
      </div>
      <div class="descriptionsbox">
        <div class="label">房屋设施:</div>
        <div class="value">
          <span style="margin-right: 10px" v-for="item in HouseInfo.facilitieslist" :key="item">{{ handlefacilities(item) }} </span>
        </div>
      </div>
      <el-row :span="24">
        <el-col :span="24">
          <div class="descriptionsbox">
            <div class="label">房屋照片:</div>
            <div class="value">
              <el-image
                v-for="(item, index) in HouseInfo.houseImageUrls"
                :key="index"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :src="item"
                :preview-src-list="HouseInfo.houseImageUrls"
                show-progress
                :initial-index="index"
                class="houseImage"
              ></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="descriptionsbox">
        <div class="label">租房信息:</div>
        <div class="value">{{ HouseInfo.supInfo }}</div>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="descriptionsbox">
            <div class="label">租房电话:</div>
            <div class="value">{{ HouseInfo.phone }}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="descriptionsbox">
            <div class="label">微信:</div>
            <div class="value">{{ HouseInfo.vx }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import DictTag from '@/components/DictTag/index.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getHouseRental } from '@/api/system/houseRental';
import { useHouseStore } from '@/store/modules/house';
import { getHousePathById } from '@/utils/house';
import { listHouseFacilities } from '@/api/system/HouseFacilities';

const houseStore = useHouseStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_rental_method } = toRefs<any>(proxy?.useDict('com_rental_method'));

const route = useRoute();
const router = useRouter();
const houseRentalid = ref(null);
const HouseInfo = ref({
  'id': null,
  'house': '',
  'name': null,
  'rentalStatus': null,
  'rentalName': '',
  'rent': null,
  'rentalType': '',
  'houseFace': '',
  'houseArea': null,
  'floorNo': null,
  'inTime': '',
  'facilities': '',
  'houseImageUrl': '',
  'supInfo': '',
  'phone': null,
  'vx': '',
  'email': '',
  'houseId': null,
  'houseUse': '',
  'pubBy': null,
  'pubTime': '',
  'facilitieslist': [],
  'houseImageUrls': []
});
const loading = ref(false);
const housefacilities = ref([]);
async function init() {
  if (route.query.id) {
    houseRentalid.value = route.query.id;
  }
  loading.value = true;
  const reslist = await listHouseFacilities();
  housefacilities.value = reslist.rows;
  await houseStore.getCurrentVilageTreeHouse();
  getHouseRental(houseRentalid.value)
    .then((res) => {
      HouseInfo.value = res.data;
      HouseInfo.value.facilitieslist = res.data.facilities.split(',').filter((item) => item);
      HouseInfo.value.houseImageUrls = HouseInfo.value.houseImageUrl.split(',').filter((item) => item);
    })
    .finally(() => (loading.value = false));
}
init();

function handlefacilities(id: string) {
  const find = housefacilities.value.find((item) => item.id === id);
  return find ? find.name : '';
}

function hanlededit() {
  router.push({
    path: '/house/edithouseRental',
    query: {
      id: HouseInfo.value.id
    }
  });
}

function handlBack() {
  router.push({
    path: '/house/houseRental'
  });
}
</script>

<style scoped lang="scss">
.AddBuildingBox {
  padding: 15px;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
.AddBuildingBody {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  padding: 15px;
  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    border-bottom: 1px solid #bbbbbb;
    margin-bottom: 20px;
  }
  .addBuildingFormBody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .houseImage {
    width: 200px;
    height: 100px;
    margin: 10px 5px;
    object-fit: cover;
  }
  .descriptionsbox {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    font-size: 15px;
    .label {
      width: 100px;
      text-align: right;
      font-weight: 800;
    }
    .value {
      flex: 1;
      margin-left: 20px;
    }
  }
}
</style>