车辆管理界面搭建

src/api/system/cars/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { CarVO, CarForm, CarQuery } from '@/api/system/cars/type';
+
+/**
+ * 查询车辆管理列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listCar = (query?: CarQuery): AxiosPromise<CarVO[]> => {
+  return request({
+    url: '/car/car/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询车辆管理详细
+ * @param id
+ */
+export const getCar = (id: string | number): AxiosPromise<CarVO> => {
+  return request({
+    url: '/car/car/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增车辆管理
+ * @param data
+ */
+export const addCar = (data: CarForm) => {
+  return request({
+    url: '/car/car',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改车辆管理
+ * @param data
+ */
+export const updateCar = (data: CarForm) => {
+  return request({
+    url: '/car/car',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除车辆管理
+ * @param id
+ */
+export const delCar = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/car/car/' + id,
+    method: 'delete'
+  });
+};

src/api/system/cars/type.ts

@@ -0,0 +1,170 @@
+export interface CarVO {
+  /**
+   * 车辆管理表id
+   */
+  id: string | number;
+
+  /**
+   * 区域id
+   */
+  areaId: string | number;
+
+  /**
+   * 车位id
+   */
+  parkingId: string | number;
+
+  /**
+   * 持有人id(住户表id)
+   */
+  residentId: string | number;
+
+  /**
+   * 车牌号
+   */
+  carNum: string;
+
+  /**
+   * 车辆品牌
+   */
+  carBrand: string;
+
+  /**
+   * 车辆型号
+   */
+  carModel: string;
+
+  /**
+   * 车身颜色
+   */
+  carColor: string;
+
+  /**
+   * 备注
+   */
+  remark: string;
+
+  /**
+   * 车辆图片url
+   */
+  carImageUrl: string;
+}
+
+export interface CarForm extends BaseEntity {
+  /**
+   * 车辆管理表id
+   */
+  id?: string | number;
+
+  /**
+   * 区域id
+   */
+  areaId?: string | number;
+
+  /**
+   * 车位id
+   */
+  parkingId?: string | number;
+
+  /**
+   * 持有人id(住户表id)
+   */
+  residentId?: string | number;
+
+  /**
+   * 车牌号
+   */
+  carNum?: string;
+
+  /**
+   * 车辆品牌
+   */
+  carBrand?: string;
+
+  /**
+   * 车辆型号
+   */
+  carModel?: string;
+
+  /**
+   * 车身颜色
+   */
+  carColor?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+
+  /**
+   * 车辆图片url
+   */
+  carImageUrl?: string;
+
+  /**
+   * 创建者
+   */
+  createBy?: number;
+
+  /**
+   * 创建时间
+   */
+  createTime?: string;
+
+  /**
+   * 修改者
+   */
+  updateBy?: number;
+
+  /**
+   * 修改时间
+   */
+  updateTime?: string;
+}
+
+export interface CarQuery extends PageQuery {
+  /**
+   * 区域id
+   */
+  areaId?: string | number;
+
+  /**
+   * 车位id
+   */
+  parkingId?: string | number;
+
+  /**
+   * 持有人id(住户表id)
+   */
+  residentId?: string | number;
+
+  /**
+   * 车牌号
+   */
+  carNum?: string;
+
+  /**
+   * 车辆品牌
+   */
+  carBrand?: string;
+
+  /**
+   * 车辆型号
+   */
+  carModel?: string;
+
+  /**
+   * 车身颜色
+   */
+  carColor?: string;
+
+  /**
+   * 车辆图片url
+   */
+  carImageUrl?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}

src/api/system/house/type.ts

@@ -87,5 +87,4 @@ export interface addHouseType {
   'internalArea': string;
   'shareArea': string;
   'houseType': string;
-  houseUse: number;
 }

src/components/Holder/index.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="residentBox" @click="choiceResidentFun">
+    <div class="defaultbox" v-if="multipleSelection.length === 0">
+      <span>请选择</span>
+      <el-icon><Search /></el-icon>
+    </div>
+    <div v-else>
+      <span>姓名：{{ multipleSelection[0] && multipleSelection[0].name }}</span>
+      <span class="ml-4 mr-4">电话：{{ multipleSelection[0] && multipleSelection[0].phone }}</span>
+      <span>住址：{{ multipleSelection[0] && multipleSelection[0].housePath }}</span>
+    </div>
+  </div>
+
+  <el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1050">
+    <nav class="flex flex-items-center mb-8">
+      <div class="flex flex-items-center mr-5 flex-1">
+        <div style="width: 120px">住户类型</div>
+        <el-select v-model="queryParams.ownerRelationship" placeholder="请选择" clearable>
+          <el-option v-for="dict in com_resident_relationship" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </div>
+      <div class="mr-5 flex-1">
+        <el-input clearable v-model.number="queryParams.name" placeholder="请输入住户姓名" />
+      </div>
+      <div>
+        <el-button type="primary" @click="getlist">查询</el-button>
+        <el-button>重置</el-button>
+      </div>
+    </nav>
+    <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="tableData" border>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" align="center" width="55" type="index" />
+      <el-table-column label="姓名" align="center" prop="name" />
+      <el-table-column label="类型" align="center" width="85" prop="type">
+        <template #default="{ row }">
+          <dict-tag :options="com_resident_type" :value="row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" width="85" prop="status">
+        <template #default="{ row }">
+          <dict-tag :options="com_certification_status" :value="row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="证件号码" align="center" prop="idCard" />
+      <el-table-column label="手机号码" align="center" prop="phone" />
+      <el-table-column label="房间" align="center">
+        <template #default="{ row }">
+          {{ row.housePath }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <template #footer>
+      <div class="dialog-footer flex flex-items-center flex-justify-between">
+        <pagination
+          style="margin-top: 0"
+          layout="total, prev, pager, next, jumper"
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getlist"
+        />
+        <div>
+          <el-button @click="conback">退出</el-button>
+          <el-button type="primary" @click="confim"> 确定 </el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { getCommunitylistAPI } from '@/api/system/community';
+import { getVillageTree } from '@/api/system/house';
+import { listResident } from '@/api/system/resident';
+import { ResidentVO } from '@/api/system/resident/type';
+import { convertBuildingToTree, getHousePathById } from '@/utils/house';
+import { ref } from 'vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { com_resident_type } = toRefs<any>(proxy?.useDict('com_resident_type'));
+const { com_certification_status } = toRefs<any>(proxy?.useDict('com_certification_status'));
+const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
+
+interface tableType extends ResidentVO {
+  housePath?: string;
+}
+const props = defineProps<{
+  isedit: boolean;
+}>();
+const emit = defineEmits<{
+  change: [value: tableType];
+}>();
+const dialog = ref({
+  dialogVisible: false,
+  dialogTitle: '添加'
+});
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+
+  date: null,
+  type: null,
+  status: null,
+  ownerRelationship: null,
+  name: null,
+  houseId: null,
+  villageId: null,
+  buildingId: null,
+  unitNo: null
+});
+const multipleTableRef = ref();
+const tableData = ref<tableType[]>([]);
+const multipleSelection = ref([]);
+const total = ref(100);
+const loading = ref(false);
+
+// ! 获取房屋==================================================================================
+const treedata = ref([]);
+function gettreedata() {
+  getCommunitylistAPI().then((res) => {
+    const currentviliage = res.rows.find((item) => item.choiceStatus === 0);
+    if (currentviliage.villageId) {
+      getVillageTree(currentviliage.villageId).then((res) => {
+        treedata.value = convertBuildingToTree(res.data.buildings);
+      });
+    }
+  });
+}
+gettreedata();
+
+//
+function choiceResidentFun() {
+  if (props.isedit) {
+    dialog.value.dialogTitle = '编辑车位';
+  } else {
+    dialog.value.dialogTitle = '添加车位';
+  }
+  getlist();
+  dialog.value.dialogVisible = true;
+}
+// 获取表格
+function getlist() {
+  // 查询住户
+  loading.value = true;
+  listResident(queryParams.value).then((res) => {
+    tableData.value = res.rows;
+    tableData.value.forEach((item) => {
+      if (item.houseId !== null) {
+        const houselist = getHousePathById(treedata.value, item.houseId, 'label');
+        item.housePath = houselist.join('-');
+      }
+    });
+    total.value = res.total;
+    loading.value = false;
+  });
+}
+
+// 返回
+function conback() {
+  dialog.value.dialogVisible = false;
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 10,
+    ownerRelationship: null,
+    name: null,
+    date: null,
+    type: null,
+    status: null,
+    houseId: null,
+    villageId: null,
+    buildingId: null,
+    unitNo: null
+  };
+}
+// 确定
+function confim() {
+  dialog.value.dialogVisible = false;
+  if (multipleSelection.value.length > 0) {
+    const pop = multipleSelection.value.pop();
+    multipleSelection.value = [pop];
+    emit('change', pop);
+  }
+}
+
+// 单选
+function handleSelectionChange(val) {
+  if (val && val.length > 0) {
+    const lastoptions = val.pop();
+    val.forEach((row) => {
+      multipleTableRef.value!.toggleRowSelection(row, false);
+    });
+    multipleTableRef.value!.toggleRowSelection(lastoptions, true);
+    multipleSelection.value = [lastoptions];
+  } else {
+    multipleTableRef.value!.clearSelection();
+    multipleSelection.value = [];
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.residentBox {
+  width: 500px;
+  height: 35px;
+  line-height: 35px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 20px;
+  .defaultbox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  cursor: pointer;
+  &:hover {
+    background-color: #f4f8ff;
+  }
+}
+</style>

src/views/system/carArea/addCarArea.vue

@@ -7,35 +7,35 @@
         <el-form label-position="right" class="formBody" ref="formRef" :model="form" :rules="rules" label-width="130px">
           <el-row>
             <el-col :span="11">
-              <el-form-item label="区域名称" prop="houseId">
+              <el-form-item label="区域名称" prop="areaName">
-                <el-input v-model.trim="form.areaName" placeholder="请输入住户姓名" />
+                <el-input v-model.trim="form.areaName" placeholder="请输入区域名称" />
               </el-form-item>
             </el-col>
             <el-col :span="2"></el-col>
             <el-col :span="11">
-              <el-form-item label="区域编号" prop="rentalName">
+              <el-form-item label="区域编号" prop="areaCode">
-                <el-input v-model.trim="form.areaCode" placeholder="请输入住户姓名" />
+                <el-input v-model.trim="form.areaCode" placeholder="请输入区域编号" />
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="11">
-              <el-form-item label="区域面积" prop="remark">
+              <el-form-item label="区域面积" prop="area">
-                <el-input v-model.number="form.area" placeholder="请输入补充房屋信息">
+                <el-input v-model.number="form.area" placeholder="请输入区域面积">
                   <template #suffix>㎡</template>
                 </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="2"></el-col>
             <el-col :span="11">
-              <el-form-item label="车位数量" prop="phone">
+              <el-form-item label="车位数量" prop="parkingCount">
-                <el-input v-model.number="form.parkingCount" placeholder="请输入手机号码" />
+                <el-input v-model.number="form.parkingCount" placeholder="请输入车位数量" />
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="24">
-              <el-form-item label="备注" prop="email">
+              <el-form-item label="备注" prop="remark">
                 <el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
               </el-form-item>
             </el-col>

src/views/system/carArea/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="p-2 flex w-full h-full flex-column">
+    <Pageheader title="区域管理"></Pageheader>
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
@@ -62,6 +63,7 @@
 </template>
 
 <script setup name="Area" lang="ts">
+import Pageheader from '@/components/Pageheader/index.vue';
 import { listArea, getArea, delArea, addArea, updateArea } from '@/api/system/carArea/index';
 import { AreaVO, AreaQuery, AreaForm } from '@/api/system/carArea/type';
 

src/views/system/cars/addCars.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="AddBuildingBox">
+    <PageHeader :title="userid ? '编辑房屋租赁' : '添加房屋租赁'"></PageHeader>
+    <div class="AddBuildingBody">
+      <div class="title">基本信息</div>
+      <div class="addBuildingFormBody">
+        <el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="130px">
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="车牌号" prop="houseId">
+                <el-input v-model.trim="form.rentalName" placeholder="请输入住户姓名" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="车辆品牌" prop="rentalName">
+                <el-input v-model.trim="form.rentalName" placeholder="请输入住户姓名" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="车辆型号" prop="remark">
+                <el-input v-model.trim="form.supInfo" placeholder="请输入补充房屋信息" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="车声颜色" prop="phone">
+                <el-input v-model.trim="form.phone" placeholder="请输入手机号码" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="车辆照片" prop="email"> </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="持有人">
+                <!-- 公共组件 持有人 -->
+                <Holder :isedit="userid === null" @change="handleChange"></Holder>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备注" prop="email">
+                <el-input type="textarea" :rows="5" v-model.trim="form.email" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item style="margin-top: 30px">
+            <el-button type="primary" @click="submitForm">提交</el-button>
+            <el-button @click="cancelForm">返回</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const router = useRouter();
+const route = useRoute();
+
+const formRef = ref();
+const form = ref({
+  id: null,
+  houseId: null,
+  rentalName: '', // 租户姓名
+  rent: null, // 租金
+  houseFace: '', // 房屋朝向
+  rentalType: 0, //  整租合租
+  phone: null, //手机号
+  houseArea: null, // 房屋面积
+  floorNo: null, //楼层号
+  inTime: '', //入住时间
+  facilities: '', //房屋设施
+  houseImageUrl: '', //房屋图片
+  supInfo: '', //补充租房信息
+  vx: '', //微信
+  houseUse: 0, //房屋用途
+  rentalStatus: 0, //租赁状态
+  email: '' //邮箱
+});
+const rules = ref({
+  houseId: [{ required: true, message: '请选择房屋', trigger: 'blur' }],
+  rentalName: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+});
+const userid = ref(null);
+
+// !== 提交 =============================================================================
+// 提交
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+    }
+  });
+};
+// 推出
+const cancelForm = () => {
+  router.push({
+    path: '/house/parkingList'
+  });
+};
+
+// 选择住户
+function handleChange(pop) {
+  console.log(pop);
+}
+</script>
+
+<style scoped lang="scss">
+.AddBuildingBox {
+  padding: 15px;
+  height: 100%;
+  width: 100%;
+}
+.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;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 60px;
+  }
+
+  .formBody {
+    width: 1050px;
+    margin: 0 auto;
+    &:deep(.el-form-item__content, .el-select, .el-input) {
+      width: 350px !important;
+      margin-right: 10px;
+      .el-cascader {
+        width: 100%;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 20px;
+      align-items: center;
+    }
+    .el-button {
+      width: 80px;
+      height: 35px;
+      margin-right: 20px;
+    }
+  }
+}
+</style>

src/views/system/cars/index.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="p-2">
+    <Pageheader title="添加房屋租赁"></Pageheader>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="持有人" prop="residentId">
+              <el-input v-model="queryParams.residentId" placeholder="请输入持有人id(住户表id)" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="车牌号" prop="carNum">
+              <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['car:car:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['car:car:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['car:car:remove']">删除</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="carList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="车牌号" align="center" prop="id" v-if="true" />
+        <el-table-column label="车辆品牌" align="center" prop="areaId" />
+        <el-table-column label="车辆型号" align="center" prop="parkingId" />
+        <el-table-column label="车身颜色" align="center" prop="residentId" />
+        <el-table-column label="持有人" align="center" prop="carNum" />
+        <el-table-column label="备注" align="center" prop="carBrand" />
+        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['car:car:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['car:car:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改车辆管理对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="carFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="区域id" prop="areaId">
+          <el-input v-model="form.areaId" placeholder="请输入区域id" />
+        </el-form-item>
+        <el-form-item label="车位id" prop="parkingId">
+          <el-input v-model="form.parkingId" placeholder="请输入车位id" />
+        </el-form-item>
+        <el-form-item label="持有人id(住户表id)" prop="residentId">
+          <el-input v-model="form.residentId" placeholder="请输入持有人id(住户表id)" />
+        </el-form-item>
+        <el-form-item label="车牌号" prop="carNum">
+          <el-input v-model="form.carNum" placeholder="请输入车牌号" />
+        </el-form-item>
+        <el-form-item label="车辆品牌" prop="carBrand">
+          <el-input v-model="form.carBrand" placeholder="请输入车辆品牌" />
+        </el-form-item>
+        <el-form-item label="车辆型号" prop="carModel">
+          <el-input v-model="form.carModel" placeholder="请输入车辆型号" />
+        </el-form-item>
+        <el-form-item label="车身颜色" prop="carColor">
+          <el-input v-model="form.carColor" placeholder="请输入车身颜色" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="车辆图片url" prop="carImageUrl">
+          <el-input v-model="form.carImageUrl" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="创建者" prop="createBy">
+          <el-input v-model="form.createBy" placeholder="请输入创建者" />
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          <el-date-picker clearable v-model="form.createTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择创建时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="修改者" prop="updateBy">
+          <el-input v-model="form.updateBy" placeholder="请输入修改者" />
+        </el-form-item>
+        <el-form-item label="修改时间" prop="updateTime">
+          <el-date-picker clearable v-model="form.updateTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择修改时间">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Car" lang="ts">
+import Pageheader from '@/components/Pageheader/index.vue';
+import { listCar, getCar, delCar, addCar, updateCar } from '@/api/system/cars/index';
+import { CarVO, CarQuery, CarForm } from '@/api/system/cars/type';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const router = useRouter();
+
+const carList = ref<CarVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const carFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: CarForm = {
+  id: undefined,
+  areaId: undefined,
+  parkingId: undefined,
+  residentId: undefined,
+  carNum: undefined,
+  carBrand: undefined,
+  carModel: undefined,
+  carColor: undefined,
+  remark: undefined,
+  carImageUrl: undefined,
+  createBy: undefined,
+  createTime: undefined,
+  updateBy: undefined,
+  updateTime: undefined
+};
+const data = reactive<PageData<CarForm, CarQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    areaId: undefined,
+    parkingId: undefined,
+    residentId: undefined,
+    carNum: undefined,
+    carBrand: undefined,
+    carModel: undefined,
+    carColor: undefined,
+    carImageUrl: undefined,
+    params: {}
+  },
+  rules: {
+    id: [{ required: true, message: '车辆管理表id不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询车辆管理列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listCar(queryParams.value);
+  carList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  carFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: CarVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  router.push({
+    path: '/carArea/addCars'
+  });
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: CarVO) => {
+  router.push({
+    path: '/carArea/addCars',
+    query: {
+      id: row.id
+    }
+  });
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  carFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateCar(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addCar(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: CarVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除车辆管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delCar(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'car/car/export',
+    {
+      ...queryParams.value
+    },
+    `car_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>

src/views/system/house/AddHouse.vue

@@ -20,11 +20,6 @@
               <el-option v-for="item in floors" :key="item.no" :label="item.name" :value="item.no" />
             </el-select>
           </el-form-item>
-          <el-form-item label="房屋类型" prop="houseUse">
-            <el-select v-model.number="form.houseUse" class="m-2" placeholder="请选择">
-              <el-option v-for="(item, index) in houseUselist" :key="index" :label="item" :value="index" />
-            </el-select>
-          </el-form-item>
           <el-form-item label="房间号" prop="houseNo">
             <el-input v-model="form.houseNo" placeholder="请输入房间号" />
           </el-form-item>
@@ -82,7 +77,6 @@ import PageHeader from '@/components/Pageheader/index.vue';
 import { useHouseStore } from '@/store/modules/house';
 import { addHouseAPI, EditHouseApi, getHouseApi, getHouselistAPI } from '@/api/system/house';
 import { addHouseType } from '@/api/system/house/type';
-import { houseUselist } from '@/utils/house';
 
 const router = useRouter();
 const route = useRoute();
@@ -96,7 +90,6 @@ const form = ref<addHouseType>({
   houseArea: '', //建筑面积
   internalArea: '', //套内面积
   shareArea: '', // 公摊面积
-  houseUse: 0, // 房屋类型
   houseType: '' // 房屋户型
 });
 const rules = ref({
@@ -123,7 +116,6 @@ if (route.query.id) {
       houseId: res.data.houseId, // 房屋id
       unitNo: res.data.unitNo,
       floorNo: res.data.floorNo,
-      houseUse: res.data.houseUse,
       houseNo: res.data.houseNo, // 房间号
       houseArea: res.data.houseArea, //建筑面积
       internalArea: res.data.internalArea, //套内面积

src/views/system/houseRental/index.vue

@@ -1,27 +1,30 @@
 <template>
-  <div class="p-2">
+  <div class="h-full p-2 flex flex-col">
+    <Pageheader title="房屋租赁"></Pageheader>
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
+        <el-card>
-          <el-form label-width="120px" ref="queryFormRef" :model="queryParams" :inline="true">
+          <div class="h-full flex flex-align-center">
-            <el-form-item label="房屋用途" prop="houseUse">
+            <el-form label-width="120px" ref="queryFormRef" :model="queryParams" :inline="true">
-              <el-select v-model="queryParams.houseUse" placeholder="选择房屋用途" style="width: 240px">
+              <el-form-item label="房屋用途" prop="houseUse">
-                <el-option v-for="item in com_house_use" :key="item.value" :label="item.label" :value="item.value" />
+                <el-select v-model="queryParams.houseUse" placeholder="选择房屋用途" style="width: 240px">
-              </el-select>
+                  <el-option v-for="item in com_house_use" :key="item.value" :label="item.label" :value="item.value" />
-            </el-form-item>
+                </el-select>
-            <el-form-item label="发布人" prop="houseId">
+              </el-form-item>
-              <el-input v-model="queryParams.rentalName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
+              <el-form-item label="发布人" prop="houseId">
-            </el-form-item>
+                <el-input v-model="queryParams.rentalName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
-            <el-form-item>
+              </el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-form-item>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            </el-form-item>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form>
+              </el-form-item>
+            </el-form>
+          </div>
         </el-card>
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card class="flex-1" shadow="never">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -41,7 +44,7 @@
         </el-row>
       </template>
 
-      <el-table v-loading="loading" border :data="houseRentalList" @selection-change="handleSelectionChange">
+      <el-table class="h-full" v-loading="loading" border :data="houseRentalList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="房屋信息" align="center" prop="rentalName" />
         <el-table-column label="租赁状态" align="center" prop="rent" />
@@ -86,6 +89,7 @@
 </template>
 
 <script setup name="HouseRental" lang="ts">
+import Pageheader from '@/components/Pageheader/index.vue';
 import { listHouseRental, delHouseRental, addHouseRental, updateHouseRental } from '@/api/system/houseRental/index';
 import { HouseRentalVO, HouseRentalQuery, HouseRentalForm } from '@/api/system/houseRental/type';
 import { getDictLabel } from '@/utils/house';
@@ -213,23 +217,6 @@ const handleUpdate = async (row?: HouseRentalVO) => {
   });
 };
 
-/** 提交按钮 */
-const submitForm = () => {
-  houseRentalFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateHouseRental(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addHouseRental(form.value).finally(() => (buttonLoading.value = false));
-      }
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
-    }
-  });
-};
-
 /** 删除按钮操作 */
 const handleDelete = async (row?: HouseRentalVO) => {
   const _ids = row?.id || ids.value;
@@ -243,3 +230,5 @@ onMounted(() => {
   getList();
 });
 </script>
+
+<style scoped lang="scss"></style>

src/views/system/parking/addParking.vue

@@ -9,7 +9,7 @@
             <el-col :span="11">
               <el-form-item label="区域" prop="areaId">
                 <el-select v-model="form.areaId" placeholder="请选择" clearable>
-                  <el-option v-for="dict in com_review" :key="dict.value" :label="dict.label" :value="dict.value" />
+                  <el-option v-for="dict in areaList" :key="dict.value" :label="`${dict.areaName}(${dict.areaCode})`" :value="dict.id" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -38,8 +38,7 @@
             <el-col :span="11">
               <el-form-item label="车位类型" prop="type">
                 <el-radio-group v-model="form.type">
-                  <el-radio :value="1">男</el-radio>
+                  <el-radio v-for="dict in com_parking_type" :key="dict.value" :value="parseInt(dict.value)">{{ dict.label }}</el-radio>
-                  <el-radio :value="0">女</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
@@ -54,7 +53,10 @@
           </el-row>
           <el-row>
             <el-col :span="24">
-              <el-form-item label="持有人" prop="remark">持有人 </el-form-item>
+              <el-form-item label="持有人" prop="residentId">
+                <!-- 公共组件 持有人 -->
+                <Holder :isedit="userid === null" @change="handleChange"></Holder>
+              </el-form-item>
             </el-col>
           </el-row>
           <el-row>
@@ -75,46 +77,91 @@
 </template>
 
 <script setup lang="ts">
+import Holder from '@/components/Holder/index.vue';
 import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
+import { addParking, getParking, updateParking } from '@/api/system/parking';
+import { listArea } from '@/api/system/carArea';
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
+const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
 const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
 
 const router = useRouter();
 const route = useRoute();
 
 const formRef = ref();
-const houseformat = ['东', '西', '南', '北'];
 const form = ref({
   id: null,
-  areaId: null,
+  areaId: null, // 区域id
-  parkingArea: null,
+  parkingArea: null, // 车位面积
-  parkingFloor: null,
+  parkingFloor: null, // 车位楼层
-  type: null,
+  type: 0, // 车位类型
-  parkingStatus: null,
+  resident_id: null, // 住户id
-  remark: null,
+  parkingStatus: null, // 车位状态
-  parkingCode: '' // 租户姓名
+  remark: '', // 备注
+  parkingCode: '' // 车位编码
 });
 const rules = ref({
   areaId: [{ required: true, message: '请选择车位区域', trigger: 'blur' }],
   type: [{ required: true, message: '请选择车位类型', trigger: 'blur' }],
   parkingCode: [{ required: true, message: '请输入车位编号', trigger: 'blur' }]
 });
+
 const userid = ref(null);
 
+if (route.query.id) {
+  userid.value = route.query.id;
+  getParking(userid.value).then((res) => {
+    console.log(res);
+    form.value = {
+      ...form.value,
+      ...res.data
+    };
+  });
+}
+// ! 获取区域==================================================================================
+const areaList = ref([]);
+const getAreaList = async () => {
+  const res = await listArea({
+    pageSize: 99999,
+    pageNum: 1
+  });
+  areaList.value = res.rows;
+};
+getAreaList();
+
+const holderInfo = ref();
+function handleChange(pop) {
+  console.log('获得数据');
+  console.log(pop);
+  holderInfo.value = pop;
+}
+
 // !== 提交 =============================================================================
 // 提交
 const submitForm = () => {
   formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
+      form.value.resident_id = holderInfo.value.id;
+      if (userid.value) {
+        updateParking(form.value).then((res) => {
+          ElMessage.success('编辑成功');
+          cancelForm();
+        });
+      } else {
+        addParking(form.value).then((res) => {
+          ElMessage.success('添加成功');
+          cancelForm();
+        });
+      }
     }
   });
 };
 // 推出
 const cancelForm = () => {
   router.push({
-    path: '/carArea/parkingList'
+    path: '/carArea/parking'
   });
 };
 </script>
@@ -145,6 +192,7 @@ const cancelForm = () => {
   .formBody {
     width: 1050px;
     margin: 0 auto;
+
     &:deep(.el-form-item__content, .el-select, .el-input) {
       width: 350px !important;
       margin-right: 10px;

src/views/system/parking/index.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="p-2">
+    <Pageheader title="车位管理"></Pageheader>
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="车位状态" prop="areaId">
+            <el-form-item label="车位状态" prop="parkingStatus">
-              <el-select v-model="queryParams.checkStatus" placeholder="请选择" clearable>
+              <el-select v-model="queryParams.parkingStatus" placeholder="请选择" clearable>
-                <el-option v-for="dict in com_parking_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+                <el-option v-for="dict in com_parking_status" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
               </el-select>
             </el-form-item>
 
@@ -51,11 +52,21 @@
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="区域" align="center" prop="areaId" />
         <el-table-column label="车位编号" align="center" prop="parkingCode" />
-        <el-table-column label="车位面积" align="center" prop="parkingArea" />
+        <el-table-column label="车位面积" align="center" prop="parkingArea">
-        <el-table-column label="楼层" align="center" prop="parkingArea" />
+          <template #default="scope"> {{ scope.row.parkingArea }}㎡ </template>
-        <el-table-column label="车位状态" align="center" prop="parkingStatus" />
+        </el-table-column>
-        <el-table-column label="车位类型" align="center" prop="type" />
+        <el-table-column label="楼层" align="center" prop="parkingFloor" />
-        <el-table-column label="持有人" align="center" prop="parkingArea" />
+        <el-table-column label="车位状态" align="center" prop="parkingStatus">
+          <template #default="scope">
+            <dict-tag :options="com_parking_status" :value="scope.row.parkingStatus" />
+          </template>
+        </el-table-column>
+        <el-table-column label="车位类型" align="center" prop="type">
+          <template #default="scope">
+            <dict-tag :options="com_parking_type" :value="scope.row.type" />
+          </template>
+        </el-table-column>
+        <el-table-column label="持有人" align="center" prop="residentName" />
         <el-table-column label="审核状态" align="center" prop="checkStatus">
           <template #default="scope">
             <dict-tag :options="com_review" :value="scope.row.checkStatus" />
@@ -77,11 +88,14 @@
 </template>
 
 <script setup name="Parking" lang="ts">
+import Pageheader from '@/components/Pageheader/index.vue';
+import { listArea } from '@/api/system/carArea';
 import { listParking, getParking, delParking, addParking, updateParking } from '@/api/system/parking/index';
 import { ParkingVO, ParkingQuery, ParkingForm } from '@/api/system/parking/type';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
+const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
 const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
 
 const router = useRouter();
@@ -136,9 +150,12 @@ const data = reactive<PageData<ParkingForm, ParkingQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
-
+const AreaList = ref([]);
 /** 查询车位管理列表 */
 const getList = async () => {
+  // 获取区域列表
+  const areaRes = await listArea(queryParams.value);
+  AreaList.value = areaRes.rows;
   loading.value = true;
   const res = await listParking(queryParams.value);
   parkingList.value = res.rows;

src/views/system/parking/parkMain.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="ResidentMainBox p-2 w-full h-full">
+    <PageHeader title="车位详情"></PageHeader>
+    <div class="ResidentMainBody">
+      <el-row :span="24" :gutter="20">
+        <el-col :span="16">
+          <!-- 车位信息 -->
+          <div class="mb-10">
+            <el-card>
+              <template #header>
+                <div class="card-header">
+                  <span>车位信息</span>
+                </div>
+              </template>
+              <div class="w-full h-full CarinfoBox gridbox">
+                <div class="carinfo_item">
+                  <div class="label">区域：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">车位编号：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">车位面积：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">楼层：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">车位类型：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">车位状态：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">持有人：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">添加时间：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">添加人：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+                <div class="carinfo_item">
+                  <div class="label">备注：</div>
+                  <div class="main">地下停车场A区</div>
+                </div>
+              </div>
+            </el-card>
+          </div>
+          <!-- 车辆信息 -->
+          <div class="mb-10">
+            <el-card>
+              <template #header>
+                <div class="card-header">
+                  <span>车辆信息</span>
+                </div>
+              </template>
+              <div class="w-full h-full CarinfoBox">
+                <el-row>
+                  <el-col :span="8">
+                    <div class="carinfo_item">
+                      <div class="label">车牌号：</div>
+                      <div class="main">浙B·N6688</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="carinfo_item">
+                      <div class="label">车辆品牌：</div>
+                      <div class="main">宝马</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="carinfo_item">
+                      <div class="label">车辆型号</div>
+                      <div class="main">X5</div>
+                    </div>
+                  </el-col>
+                </el-row>
+                <el-row class="mt-30px mb-30px">
+                  <el-col :span="8">
+                    <div class="carinfo_item">
+                      <div class="label">车身颜色：</div>
+                      <div class="main">白色</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="carinfo_item">
+                      <div class="label">备注：</div>
+                      <div class="main">无</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8"> </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="24">
+                    <div class="carinfo_item flex-items-start">
+                      <div class="label">车辆照片：</div>
+                      <div class="main">
+                        <el-image
+                          class="carinfoImage"
+                          src="https://ts1.tc.mm.bing.net/th?id=ORMS.76ee9c7ea9fe203b608f9048f54b3cbd&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0"
+                        ></el-image>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-card>
+          </div>
+          <div class="">
+            <el-card>
+              <template #header>
+                <div class="card-header">
+                  <span>审核</span>
+                </div>
+              </template>
+              <div class="w-full h-full flex mt-2">
+                <div class="title">审批意见</div>
+                <div class="preivewBodybox flex-1 ml-5">
+                  <el-input type="textarea" :rows="5"></el-input>
+                  <div class="actions mt-5">
+                    <el-button type="primary">审核通过</el-button>
+                    <el-button type="danger">审核不通过</el-button>
+                    <el-button>返回</el-button>
+                  </div>
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <el-card style="position: relative" class="h-full">
+            <template #header>
+              <div class="asideCardHeader w-full h-full">
+                <div class="cardSubtitle">
+                  <div class="line"></div>
+                  <div class="subtitle">审批流程</div>
+                </div>
+              </div>
+            </template>
+            <div class="w-full h-50%">
+              <el-steps space="200px" direction="vertical" :active="activeStop">
+                <el-step :description="reviewInfo.submitTime">
+                  <template #title>
+                    <span v-if="active === 0">未提交信息</span>
+                    <span v-if="active >= 1">已提交信息</span>
+                  </template>
+                </el-step>
+                <el-step :description="reviewInfo.propertyTime">
+                  <template #title>
+                    <span v-if="active <= 2">待审核</span>
+                    <span v-if="active === 3">物业审核不通过</span>
+                    <span v-if="active >= 4">物业审核通过</span>
+                  </template>
+                </el-step>
+                <el-step :description="reviewInfo.certificationTime">
+                  <template #title>
+                    <span v-if="active <= 5">未认证</span>
+                    <span v-if="active === 6">已认证</span>
+                  </template>
+                </el-step>
+                <el-step>
+                  <template #title>
+                    <span>审核完成</span>
+                  </template>
+                </el-step>
+              </el-steps>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+/** 住户审核状态 */
+enum reviewStatus {
+  /** 未提交 */
+  unSubmit = 0,
+  /** 已提交 */
+  Submited = 1,
+  /** 待认证 */
+  awaitReview = 2,
+  /** 认证不通过 */
+  unReviewPass = 3,
+  /** 认证通过 */
+  ReviewPass = 4,
+  /** 未认证 */
+  uncertification = 5,
+  /** 已认证 */
+  Certification = 6
+}
+type activeType = reviewStatus;
+const active = ref<activeType>(6);
+const activeStop = ref(4);
+
+function handleActivestaus(rews) {
+  if (rews.submitStatus === reviewStatus.unSubmit) {
+    activeStop.value = 0;
+    active.value = 0;
+  } else if (rews.submitStatus === reviewStatus.Submited) {
+    active.value = 1;
+    activeStop.value = 1;
+    // 待认证
+    if (rews.propertyStatus === 0) {
+      active.value = reviewStatus.awaitReview;
+    } else if (rews.propertyStatus === 1) {
+      active.value = reviewStatus.unReviewPass;
+    } else if (rews.propertyStatus === 2) {
+      active.value = reviewStatus.ReviewPass;
+      activeStop.value = 2;
+
+      if (rews.certificationStatus === 0) {
+        active.value = reviewStatus.uncertification;
+      } else if (rews.certificationStatus === 1) {
+        active.value = reviewStatus.Certification;
+        activeStop.value = 4;
+      }
+    }
+  }
+
+  console.log(active.value);
+}
+</script>
+
+<style scoped lang="scss">
+.ResidentMainBox {
+  display: flex;
+  flex-direction: column;
+  .ResidentMainBody {
+    flex: 1;
+    margin-top: 20px;
+    .CarinfoBox {
+      &.gridbox {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(4, 1fr);
+        gap: 20px;
+        row-gap: 40px;
+      }
+      .carinfo_item {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        .label {
+          font-weight: 600;
+          width: 80px;
+          text-align: right;
+          padding-right: 10px;
+        }
+        .carinfoImage {
+          width: 200px;
+          height: 100px;
+        }
+      }
+    }
+    &:deep(div.el-step__head.is-process) {
+      & > div.el-step__line {
+        width: 0;
+        border: 1px dashed gray;
+        background: transparent;
+      }
+    }
+    &:deep(.el-step.is-vertical .el-step__line) {
+      top: 20px;
+    }
+    &:deep(div.el-step__head.is-finish) {
+      & > div.el-step__line {
+        width: 0;
+        border: 1px solid var(--el-color-primary);
+        background: transparent;
+      }
+    }
+  }
+}
+</style>

src/views/system/resident/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="p-2 h-full">
+  <div class="p-2 h-full flex flex-col">
+    <Pageheader title="住户管理"></Pageheader>
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
@@ -32,7 +33,7 @@
       </div>
     </transition>
 
-    <el-card style="height: 100%" shadow="never">
+    <el-card style="flex: 1" shadow="never">
       <div class="residentBody h-full">
         <div class="treebox h-full">
           <div class="treeTitlebox">北境碧桂园小区</div>
@@ -95,6 +96,8 @@
 </template>
 
 <script setup name="Resident" lang="ts">
+import Pageheader from '@/components/Pageheader/index.vue';
+
 import { listResident, getResident, delResident, addResident, updateResident } from '@/api/system/resident/index';
 import { ResidentVO, ResidentQuery, ResidentForm } from '@/api/system/resident/type';
 import { getVillageTree } from '@/api/system/house/index';

src/views/system/storeroom/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="p-2 flex storeRoomBox">
+    <Pageheader title="储藏室管理"></Pageheader>
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
@@ -117,6 +118,7 @@
 </template>
 
 <script setup name="Storeroom" lang="ts">
+import Pageheader from '@/components/Pageheader/index.vue';
 import { listStoreroom, getStoreroom, delStoreroom, addStoreroom, updateStoreroom } from '@/api/system/storeroom/index';
 import { StoreroomVO, StoreroomQuery, StoreroomForm } from '@/api/system/storeroom/types';