From cfc2360e19f94a2faafe7b0dc1dbd9c06014cfbe Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Thu, 22 May 2025 15:49:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E9=80=89=E6=88=BF=20?=
 =?UTF-8?q?=E5=85=A5=E4=BD=8F=20=E9=80=80=E6=88=BF=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/records/checkin/index.vue       | 1149 +++++----------------
 src/views/records/checkout/index.vue      |  336 ++++++
 src/views/records/roomselection/index.vue |  320 +++++-
 3 files changed, 904 insertions(+), 901 deletions(-)
 create mode 100644 src/views/records/checkout/index.vue

diff --git a/src/views/records/checkin/index.vue b/src/views/records/checkin/index.vue
index 17dd187..35dfc54 100644
--- a/src/views/records/checkin/index.vue
+++ b/src/views/records/checkin/index.vue
@@ -1,783 +1,299 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <!--入住记录数据-->
-      <el-col :span="24" :xs="24">
-        <el-form
-          :model="queryParams"
-          ref="queryForm"
-          size="small"
-          :inline="true"
-          v-show="showSearch"
-          label-width="68px"
-        >
-          <!-- 所在区域 -->
-          <el-form-item label="所在区域" prop="area">
-            <treeselect
-              v-model="queryParams.deptId"
-              :options="deptOptions"
-              :show-count="true"
-              placeholder="请选择所在区域"
-              style="width: 220px"
-            />
-          </el-form-item>
-          <!-- 小区公寓 下拉选择框-->
-          <el-form-item label="小区公寓" prop="community">
-            <el-select
-              v-model="queryParams.community"
-              placeholder="请选择小区公寓"
-              style="width: 220px"
-              @keyup.enter.native="handleQuery"
-            >
-              <el-option
-                v-for="item in communityOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <!-- 楼栋  -->
-          <el-form-item label="楼栋" prop="building">
-            <el-select
-              v-model="queryParams.building"
-              placeholder="请选择楼栋"
-              style="width: 220px"
-              @keyup.enter.native="handleQuery"
-            >
-              <el-option
-                v-for="item in buildingOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <!-- 单元  -->
-          <el-form-item label="单元" prop="unit">
-            <el-select
-              v-model="queryParams.unit"
-              placeholder="请选择单元"
-              style="width: 220px"
-              @keyup.enter.native="handleQuery"
-            >
-              <el-option
-                v-for="item in unitOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <!-- 入住状态 -->
-          <el-form-item label="入住状态" prop="status">
-            <el-select
-              v-model="queryParams.status"
-              placeholder="请选择入住状态"
-              style="width: 220px"
-              @keyup.enter.native="handleQuery"
-            >
-              <el-option
-                v-for="item in statusOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="姓名" prop="name">
-            <el-input
-              v-model="queryParams.name"
-              placeholder="请输入姓名"
-              clearable
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="手机号" prop="phonenumber" label-width="100px">
-            <el-input
-              v-model="queryParams.phonenumber"
-              placeholder="请输入手机号码"
-              clearable
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <!-- 身份证 -->
-          <el-form-item label="身份证" prop="idCard">
-            <el-input
-              v-model="queryParams.idCard"
-              placeholder="请输入身份证号码"
-              clearable
-              style="width: 220px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <!-- 入住评价 -->
-          <el-form-item label="入住评价" prop="evaluation">
-            <el-select
-              v-model="queryParams.evaluation"
-              placeholder="请选择入住评价"
-              style="width: 220px"
-              @keyup.enter.native="handleQuery"
-            >
-              <el-option
-                v-for="item in evaluationOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item>
-            <el-button
-              type="primary"
-              icon="el-icon-search"
-              size="mini"
-              @click="handleQuery"
-              >搜索</el-button
-            >
-          </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['system:user:add']"
-              >新增</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="success"
-              plain
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-              v-hasPermi="['system:user:edit']"
-              >修改</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="danger"
-              plain
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-              v-hasPermi="['system:user:remove']"
-              >删除</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="info"
-              plain
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-              >导入</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="warning"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              v-hasPermi="['system:user:export']"
-              >导出</el-button
-            >
-          </el-col>
-          <right-toolbar
-            :showSearch.sync="showSearch"
-            @queryTable="getList"
-            :columns="columns"
-          ></right-toolbar>
-        </el-row>
-
-        <el-table
-          v-loading="loading"
-          :data="userList"
-          @selection-change="handleSelectionChange"
-        >
-          <!-- <el-table-column type="selection" width="50" align="center" /> -->
-          <el-table-column
-            label="序号"
-            align="center"
-            key="buildId"
-            prop="buildId"
-            v-if="columns[0].visible"
-          />
-          <!-- 所在区域 -->
-          <el-table-column
-            label="所在区域"
-            align="center"
-            key="address"
-            prop="address"
-            v-if="columns[1].visible"
-            :show-overflow-tooltip="true"
-          />
-          <el-table-column
-            label="小区/公寓"
-            align="center"
-            key="buildName"
-            prop="buildName"
-            v-if="columns[1].visible"
-            :show-overflow-tooltip="true"
-          />
-          <!-- 楼号 -->
-          <el-table-column
-            label="楼号"
-            align="center"
-            key="floor"
-            prop="floor"
-            v-if="columns[2].visible"
-          />
-          <!-- 单元 -->
-          <el-table-column
-            label="单元"
-            align="center"
-            key="unit"
-            prop="unit"
-            v-if="columns[3].visible"
-          />
-          <!-- 门牌号 -->
-          <el-table-column
-            label="房屋"
-            align="center"
-            key="doorplate"
-            prop="doorplate"
-            v-if="columns[4].visible"
-          />
-          <!-- 房间 -->
-          <el-table-column
-            label="房间"
-            align="center"
-            key="room"
-            prop="room"
-            v-if="columns[5].visible"
-          />
-          <!-- 入住人 -->
-          <el-table-column
-            label="居住人"
-            align="center"
-            key="name"
-            prop="name"
-            v-if="columns[6].visible"
-          />
-          <!-- 性别 -->
-          <el-table-column
-            label="性别"
-            align="center"
-            key="sex"
-            prop="sex"
-            v-if="columns[7].visible"
-            :formatter="formatSex"
-          />
-
-          <el-table-column
-            label="手机号"
-            align="center"
-            key="phonenumber"
-            prop="phonenumber"
-            v-if="columns[8].visible"
-          />
-          <!-- 居住状态 -->
-          <el-table-column
-            label="居住状态"
-            align="center"
-            key="status"
-            prop="status"
-            v-if="columns[9].visible"
-            :formatter="formatStatus"
-          />
-          <!-- 入住时间 -->
-          <el-table-column
-            label="入住时间"
-            align="center"
-            key="checkInTime"
-            prop="checkInTime"
-            v-if="columns[10].visible"
-            :formatter="formatDate"
-          />
-          退房时间
-          <el-table-column
-            label="退房时间"
-            align="center"
-            key="checkOutTime"
-            prop="checkOutTime"
-            v-if="columns[11].visible"
-            :formatter="formatDate"
-          />
-          <!-- 入住评价 -->
-          <el-table-column
-            label="入住评价"
-            align="center"
-            key="evaluation"
-            prop="evaluation"
-            v-if="columns[12].visible"
-            :formatter="formatEvaluation"
-          />
+    <!--入住记录数据-->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+      <!-- 所在区域 -->
+      <el-form-item label="所在区域" prop="deptId">
+        <treeselect 
+          v-model="queryParams.deptId" 
+          :options="deptOptions"  
+          :show-count="true" 
+          :normalizer="normalizer"
+          placeholder="请选择所在区域"  
+          style="width: 220px" 
+          @select="handleTreeSelect"
+          :disable-branch-nodes="true"
+        />
+      </el-form-item>
+      <!-- 公寓 -->
+      <el-form-item label="小区公寓" prop="apartmentId">
+        <el-select v-model="queryParams.apartmentId" placeholder="请选择小区" @change="handleChangeapartment">
+          <el-option v-for="item in apartmentOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 楼号 -->
+      <el-form-item label="楼栋" prop="building">
+        <el-select v-model="queryParams.buildingId" placeholder="请选择楼栋" @change="handleChangeBuildingId">
+          <el-option v-for="item in buildingOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 单元 -->
+      <el-form-item label="单元" prop="unit">
+        <el-select v-model="queryParams.unitId" placeholder="请选择单元" @change="handleChangeUnitId">
+          <el-option v-for="item in unitOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 门牌号 -->
+      <el-form-item label="房屋" prop="house">
+        <el-select v-model="queryParams.houseId" placeholder="请选择房屋" @change="handleChangeHouseId">
+          <el-option v-for="item in houseOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 房间 -->
+      <el-form-item label="房间" prop="houseName">
+        <el-input v-model="queryParams.houseName" placeholder="请输入房间名称" clearable style="width: 220px"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
 
-          <el-table-column
-            label="操作"
-            align="center"
-            width="160"
-            class-name="small-padding fixed-width"
-            fixed="right"
-          >
-            <template slot-scope="scope" v-if="scope.row.buildId !== 1">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']"
-                >修改</el-button
-              >
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:remove']"
-                >删除</el-button
-              >
-              <el-dropdown
-                size="mini"
-                @command="(command) => handleCommand(command, scope.row)"
-                v-hasPermi="['system:user:resetPwd', 'system:user:edit']"
-              >
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
-                  >更多</el-button
-                >
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item
-                    command="handleResetPwd"
-                    icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']"
-                    >重置密码</el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    command="handleAuthRole"
-                    icon="el-icon-circle-check"
-                    v-hasPermi="['system:user:edit']"
-                    >分配角色</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </el-dropdown>
-            </template>
-          </el-table-column>
-        </el-table>
+      <el-form-item label="姓名" prop="graduateName">
+        <el-input v-model="queryParams.graduateName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="graduateTelephone">
+        <el-input v-model="queryParams.graduateTelephone" placeholder="请输入手机号码" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <!-- 身份证 -->
+      <el-form-item label="身份证" prop="graduateIdCard">
+        <el-input v-model="queryParams.graduateIdCard" placeholder="请输入身份证号码" clearable style="width: 220px"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+     
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="list">
+      <!-- <el-table-column type="selection" width="50" align="center" /> -->
+      <el-table-column label="序号" align="center" key="id" type="index" />
+      <!-- 所在区域 -->
+      <el-table-column label="所在区域" align="center" prop="parentName" :show-overflow-tooltip="true" />
+      <el-table-column label="小区/公寓" align="center" prop="apartmentName" :show-overflow-tooltip="true" />
+      <!-- 楼号 -->
+      <el-table-column label="楼号" align="center" prop="buildingName" />
+      <!-- 单元 -->
+      <el-table-column label="单元" align="center" prop="unitName" />
+      <!-- 门牌号 -->
+      <el-table-column label="房屋" align="center" prop="houseName" />
+      <!-- 房间 -->
+      <el-table-column label="房间" align="center" prop="roomTypeName" />
+      <!-- 入住人 -->
+      <el-table-column label="居主人" align="center" prop="graduateName" />
+      <!-- 性别 -->
+      <el-table-column label="性别" align="center" prop="genderName">
+        <template slot-scope="scope">
+          {{ scope.row.gender == '1'? '男' : '女' }}
+        </template>
+        </el-table-column> 
+      <el-table-column label="手机号" align="center" prop="telephone" width="160" />
+      <!-- 入住时间 -->
+      <el-table-column label="入住日期" align="center" prop="checkInDate" width="160" />
+      <el-table-column label="计划退房日期" align="center" prop="checkOutDate" width="160" />
 
-        <pagination
-          v-show="total > 0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
-      </el-col>
-    </el-row>
+      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
+        <template slot-scope="scope" >
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+    <el-dialog title="详情" :visible.sync="open" width="50%">
+      <el-row :gutter="60">
+        <el-col :span="8" class="mb-10">所在区域：{{ info.deptName }}</el-col>
+        <el-col :span="8" class="mb-10">小区/公寓：{{ info.apartmentName }}</el-col>
+        <el-col :span="8" class="mb-10">楼号：{{ info.buildingName }}</el-col>
 
-    <!-- 添加或修改公寓配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="所在区域" prop="deptId">
-              <treeselect
-                v-model="form.deptId"
-                :options="deptOptions"
-                :show-count="true"
-                placeholder="请选择所在区域"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="公寓名称" prop="nickName">
-              <el-input
-                v-model="form.nickName"
-                placeholder="请输入公寓名称"
-                maxlength="30"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item
-              label="公寓联系电话"
-              prop="phonenumber"
-              label-width="100px"
-            >
-              <el-input
-                v-model="form.phonenumber"
-                placeholder="请输入联系电话，多个电话用‘、’隔开"
-                maxlength="36"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="关联物业" prop="email">
-              <el-select
-                v-model="form.postIds"
-                multiple
-                placeholder="请选择关联物业"
-              >
-                <el-option
-                  v-for="item in postOptions"
-                  :key="item.postId"
-                  :label="item.postName"
-                  :value="item.postId"
-                  :disabled="item.status == 1"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <!-- 标签 多选框 -->
-          <el-col :span="24">
-            <el-form-item label="标签" prop="tags">
-              <el-checkbox
-                v-for="tag in tagsList"
-                :label="tag"
-                :key="tag"
-                v-model="form.tags"
-                >{{ tag }}</el-checkbox
-              >
-            </el-form-item>
-          </el-col>
-        </el-row>
+        <el-col :span="8" class="mb-10">单元：{{ info.unitName }}</el-col>
+        <el-col :span="8" class="mb-10">房屋：{{ info.houseName }}</el-col>
+        <el-col :span="8" class="mb-10">房间：{{ info.roomName }}</el-col>
+        <el-col :span="24">
+          <div class="line"></div>
+        </el-col>
+        <el-col :span="8" class="mb-10">居住人：{{ info.graduateName }}</el-col>
+        <el-col :span="8" class="mb-10">性别：{{ info.genderName }}</el-col>
+        <el-col :span="8" class="mb-10">手机号：{{ info.telephone }}</el-col>
 
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="详细介绍">
-              <el-input
-                v-model="form.remark"
-                type="textarea"
-                placeholder="请输入内容"
-              ></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <!-- 上传图片 -->
-          <el-col :span="24">
-            <el-form-item label="上传图片">
-              <el-upload
-                action="#"
-                :on-change="handleAvatarSuccess"
-                :on-remove="handleAvatarRemove"
-                :auto-upload="false"
-                :file-list="avatarList"
-                list-type="picture-card"
-                :on-preview="handlePictureCardPreview"
-                :limit="3"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <!-- 地图 -->
-          <!-- 公寓详细地址及周边设施 -->
-          <el-col :span="24"> </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+        <el-col :span="8" class="mb-10">身份证号：{{ info.idCard }}</el-col>
+        <el-col :span="8" class="mb-10">入住日期：{{ info.checkInDate }}</el-col>
+        <el-col :span="8" class="mb-10">退房日期：{{ info.checkOutDate }}</el-col>
 
-    <!-- 公寓导入对话框 -->
-    <el-dialog
-      :title="upload.title"
-      :visible.sync="upload.open"
-      width="400px"
-      append-to-body
-    >
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        drag
-      >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" />
-            是否更新已经存在的公寓数据
-          </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link
-            type="primary"
-            :underline="false"
-            style="font-size: 12px; vertical-align: baseline"
-            @click="importTemplate"
-            >下载模板</el-link
-          >
-        </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
+        <el-col :span="8" class="mb-10">入住办理时间：{{ info.handleCheckInDate }}</el-col>
+        <el-col :span="8" class="mb-10">合同：{{ info.contract }} <el-button  @click="handleDownload" type="text" ><i class="el-icon-download"></i>下载</el-button></el-col>
+        <el-col :span="8" class="mb-10"></el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="open = false">确 定</el-button>
+      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import {
-  listUser,
-  getUser,
-  delUser,
-  addUser,
-  updateUser,
-  resetUserPwd,
-  changeUserStatus,
-  deptTreeSelect,
-} from "@/api/system/user";
-import { getToken } from "@/utils/auth";
+  listRecCheckin,
+  getRecCheckinInfo,
+  queryDeptDropdownList
+} from "@/api/mz/rec";
+import { listDept } from "@/api/system/dept";
+
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
-  name: "User",
+  name: "RoomSelection",
   dicts: ["sys_normal_disable", "sys_user_sex"],
   components: { Treeselect },
   data() {
     return {
       // 遮罩层
       loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
       // 总条数
       total: 0,
-      // 公寓表格数据
-      userList: null,
-      // 弹出层标题
-      title: "",
-      // 公寓树选项
-      deptOptions: undefined,
-      // 是否显示弹出层
-      open: false,
-      // 公寓名称
-      deptName: undefined,
-      // 默认密码
-      initPassword: undefined,
-      // 日期范围
-      dateRange: [],
-      // 岗位选项
-      postOptions: [],
-      // 角色选项
-      roleOptions: [],
-      // 标签
-      tagsList: ["停车场", "商业街", "写字楼", "公寓", "酒店", "学校", "政府"],
-      // 表单参数
-      form: {
-        tags: [],
-      },
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
-      // 公寓导入参数
-      upload: {
-        // 是否显示弹出层（公寓导入）
-        open: false,
-        // 弹出层标题（公寓导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的公寓数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
-      },
-      // 楼栋
-      buildingOptions: [
-        { value: "1", label: "1号楼" },
-        { value: "2", label: "2号楼" },
-      ],
-      // 单元
-      unitOptions: [
-        { value: "1", label: "1单元" },
-        { value: "2", label: "2单元" },
-        { value: "3", label: "3单元" },
-      ],
-      //  入住状态
-      statusOptions: [
-        { value: "0", label: "未入住" },
-        { value: "1", label: "入住中" },
-
-        { value: "2", label: "已退房" },
-      ],
-      //  入住评价
-      evaluationOptions: [
-        { value: "0", label: "未评价" },
-        { value: "1", label: "好评" },
-        { value: "2", label: "中评" },
-        { value: "3", label: "差评" },
-      ],
+      list: null,
+     
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        buildName: undefined,
-        phonenumber: undefined,
-        status: undefined,
-        deptId: undefined,
-      },
-
-      // 列信息
-      columns: [
-        { key: 0, label: `序号`, visible: true },
-        { key: 1, label: `所在区域`, visible: true },
-        { key: 2, label: `小区/公寓`, visible: true },
-        { key: 3, label: `楼号`, visible: true },
-        { key: 4, label: `单元`, visible: true },
-        { key: 5, label: `房屋`, visible: true },
-        { key: 6, label: `房间`, visible: true },
-        { key: 7, label: `居住人`, visible: true },
-        { key: 8, label: `性别`, visible: true },
-        { key: 9, label: `居住状态`, visible: true },
-        { key: 10, label: `入住时间`, visible: true },
-        { key: 11, label: `退房时间`, visible: true },
-        { key: 12, label: `入住评价`, visible: true },
-        { key: 13, label: `操作`, visible: true },
-
-      ],
-      // 表单校验
-      rules: {
-        buildName: [
-          { required: true, message: "公寓名称不能为空", trigger: "blur" },
-          {
-            min: 2,
-            max: 20,
-            message: "公寓名称长度必须介于 2 和 20 之间",
-            trigger: "blur",
-          },
-        ],
-        nickName: [
-          { required: true, message: "公寓昵称不能为空", trigger: "blur" },
-        ],
-        password: [
-          { required: true, message: "公寓密码不能为空", trigger: "blur" },
-          {
-            min: 5,
-            max: 20,
-            message: "公寓密码长度必须介于 5 和 20 之间",
-            trigger: "blur",
-          },
-          {
-            pattern: /^[^<>"'|\\]+$/,
-            message: "不能包含非法字符：< > \" ' \\\ |",
-            trigger: "blur",
-          },
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"],
-          },
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur",
-          },
-        ],
+        deptId:null,
+        apartmentId: null,
+        houseId: null,
+        houseName: null,
+        graduateName: null,
+        graduateTelephone: null,
+        graduateIdCard: null,
+        buildingId: null,
+        unitId: null,
+        houseId: null,
       },
+      info: {},
+      apartmentOptions: [],
+      deptOptions: [],
+      buildingOptions: [],
+      unitOptions: [],
+      houseOptions: [],
+      open: false,
     };
   },
   watch: {
-    // 根据名称筛选公寓树
-    deptName(val) {
-      this.$refs.tree.filter(val);
-    },
-   
+    'queryParams.deptId': {
+      handler(newVal, oldVal) {
+        console.log('newVal',newVal);
+        if(!newVal)
+        this.queryParams.apartmentId = null;
+        this.queryParams.buildingId = null;
+        this.queryParams.unitId = null; 
+        this.queryParams.houseId = null;
+        this.apartmentOptions = [];
+        this.buildingOptions = [];
+        this.unitOptions = [];
+        this.houseOptions = [];
+      },
+      deep: true,
+      immediate: true
+    }
   },
   created() {
     this.getList();
     this.getDeptTree();
-    this.getConfigKey("sys.user.initPassword").then((response) => {
-      this.initPassword = response.msg;
-    });
+
+  },
+  computed: {
+    
   },
   methods: {
+    async handleTreeSelect(value){
+      this.queryParams.deptId = value.deptId;
+      this.queryParams.apartmentId = '';
+      this.queryParams.buildingId = '';
+      this.queryParams.unitId = '';
+      this.queryParams.houseId = '';
+      this.buildingOptions = [];
+      this.unitOptions = [];
+      this.houseOptions = [];
+      this.apartmentOptions = await this.getListByParentId('1',value.deptId)
+    },
+    async handleChangeapartment(val) {
+      this.queryParams.apartmentId = val;
+      this.queryParams.buildingId = null;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.houseOptions = [];
+      this.buildingOptions = await this.getListByParentId('2',val);
+    },
+    // 三级联动
+   async handleChangeBuildingId(val) {
+      this.queryParams.buildingId = val;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.houseOptions = [];
+      this.unitOptions = await this.getListByParentId(3,val);
+    },
+   async handleChangeUnitId(val) {
+      this.queryParams.unitId = val;
+      this.queryParams.houseId = null;
+      this.houseOptions = await this.getListByParentId(4,val);
+    },
+    handleChangeHouseId(val) {
+      this.queryParams.houseId = val;
+    },
+    // 三级联动通用接口
+     getListByParentId(type,id) {
+      return new Promise((resolve, reject) => {
+        queryDeptDropdownList({type,id}).then((res) => {
+          resolve(res.data);
+        });
+      }); 
+    },
+    // 下载合同
+    handleDownload(){
+      this.info.contract = 'http://192.168.1.144:9000/mzjzf/%E6%88%BF%E5%B1%8B%E7%A7%9F%E8%B5%81%E5%90%88%E5%90%8C%E6%9B%B4%E6%94%B9%E5%90%8E.pdf'
+      if (this.info.contract) {
+        // 创建一个隐藏的 <a> 标签
+        const link = document.createElement('a');
+        link.href = this.info.contract;
+        // 设置下载的文件名，这里假设文件名可以从 URL 中获取
+        // 例如：https://example.com/files/example.pdf，获取到的文件名就是 example.pdf
+        const fileName = this.info.contract.split('/').pop(); 
+        link.setAttribute('download', fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } else {
+        this.$message.warning('没有可下载的文件地址');
+      }
+    },
+  
+    /** 转换公寓数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children,
+      };
+    },
     /** 查询公寓列表 */
     getList() {
       this.loading = true;
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
+      listRecCheckin(this.queryParams).then(
         (response) => {
-          this.userList = response.rows;
+          this.list = response.rows;
           this.total = response.total;
           this.loading = false;
         }
-      );
+      ).catch(err => {
+        this.loading = false;
+      })
     },
     /** 查询公寓下拉树结构 */
     getDeptTree() {
-      deptTreeSelect().then((response) => {
-        this.deptOptions = response.data;
+      listDept().then((response) => {
+        this.deptOptions = this.handleTree(response.data, "deptId", 'parentId', 'children', 2);
       });
     },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id;
-      this.handleQuery();
-    },
-    // 公寓状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
-      this.$modal
-        .confirm('确认要"' + text + '""' + row.buildName + '"公寓吗？')
-        .then(function () {
-          return changeUserStatus(row.buildId, row.status);
-        })
-        .then(() => {
-          this.$modal.msgSuccess(text + "成功");
-        })
-        .catch(function () {
-          row.status = row.status === "0" ? "1" : "0";
-        });
-    },
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -785,20 +301,6 @@ export default {
     },
     // 表单重置
     reset() {
-      this.form = {
-        buildId: undefined,
-        deptId: undefined,
-        buildName: undefined,
-        nickName: undefined,
-        password: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: [],
-      };
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -808,162 +310,27 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRange = [];
       this.resetForm("queryForm");
       this.queryParams.deptId = undefined;
       this.$refs.tree.setCurrentKey(null);
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.buildId);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleResetPwd":
-          this.handleResetPwd(row);
-          break;
-        case "handleAuthRole":
-          this.handleAuthRole(row);
-          break;
-        default:
-          break;
-      }
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      getUser().then((response) => {
-        this.postOptions = response.posts;
-        this.roleOptions = response.roles;
-        this.open = true;
-        this.title = "添加公寓";
-        this.form.password = this.initPassword;
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const buildId = row.buildId || this.ids;
-      getUser(buildId).then((response) => {
-        this.form = response.data;
-        this.postOptions = response.posts;
-        this.roleOptions = response.roles;
-        this.$set(this.form, "postIds", response.postIds);
-        this.$set(this.form, "roleIds", response.roleIds);
+    handleView(row) {
+      getRecCheckinInfo(row.chooseRecId).then((response) => {
+        this.info = response.data;
         this.open = true;
-        this.title = "修改公寓";
-        this.form.password = "";
-      });
-    },
-    /** 重置密码按钮操作 */
-    handleResetPwd(row) {
-      this.$prompt('请输入"' + row.buildName + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "公寓密码长度必须介于 5 和 20 之间",
-        inputValidator: (value) => {
-          if (/<|>|"|'|\||\\/.test(value)) {
-            return "不能包含非法字符：< > \" ' \\\ |";
-          }
-        },
-      })
-        .then(({ value }) => {
-          resetUserPwd(row.buildId, value).then((response) => {
-            this.$modal.msgSuccess("修改成功，新密码是：" + value);
-          });
-        })
-        .catch(() => {});
-    },
-    /** 分配角色操作 */
-    handleAuthRole: function (row) {
-      const buildId = row.buildId;
-      this.$router.push("/system/user-auth/role/" + buildId);
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.buildId != undefined) {
-            updateUser(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addUser(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
+      }).catch(err => {
+        this.$message.error(err.msg);
       });
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const buildIds = row.buildId || this.ids;
-      this.$modal
-        .confirm('是否确认删除公寓编号为"' + buildIds + '"的数据项？')
-        .then(function () {
-          return delUser(buildIds);
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download(
-        "system/user/export",
-        {
-          ...this.queryParams,
-        },
-        `user_${new Date().getTime()}.xlsx`
-      );
-    },
-    /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "公寓导入";
-      this.upload.open = true;
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      this.download(
-        "system/user/importTemplate",
-        {},
-        `user_template_${new Date().getTime()}.xlsx`
-      );
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert(
-        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
-          response.msg +
-          "</div>",
-        "导入结果",
-        { dangerouslyUseHTMLString: true }
-      );
-      this.getList();
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit();
-    },
   },
 };
 </script>
+<style scoped lang="scss">
+.line {
+  margin: 30px 0;
+  height: 2px;
+  border-top: 1px solid transparent;
+  background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
+} 
+</style>
diff --git a/src/views/records/checkout/index.vue b/src/views/records/checkout/index.vue
new file mode 100644
index 0000000..b29ab00
--- /dev/null
+++ b/src/views/records/checkout/index.vue
@@ -0,0 +1,336 @@
+<template>
+  <div class="app-container">
+    <!--入住记录数据-->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+      <!-- 所在区域 -->
+      <el-form-item label="所在区域" prop="deptId">
+        <treeselect 
+          v-model="queryParams.deptId" 
+          :options="deptOptions"  
+          :show-count="true" 
+          :normalizer="normalizer"
+          placeholder="请选择所在区域"  
+          style="width: 220px" 
+          @select="handleTreeSelect"
+          :disable-branch-nodes="true"
+        />
+      </el-form-item>
+      <!-- 公寓 -->
+      <el-form-item label="小区公寓" prop="apartmentId">
+        <el-select v-model="queryParams.apartmentId" placeholder="请选择小区" @change="handleChangeapartment">
+          <el-option v-for="item in apartmentOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 楼号 -->
+      <el-form-item label="楼栋" prop="building">
+        <el-select v-model="queryParams.buildingId" placeholder="请选择楼栋" @change="handleChangeBuildingId">
+          <el-option v-for="item in buildingOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 单元 -->
+      <el-form-item label="单元" prop="unit">
+        <el-select v-model="queryParams.unitId" placeholder="请选择单元" @change="handleChangeUnitId">
+          <el-option v-for="item in unitOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 门牌号 -->
+      <el-form-item label="房屋" prop="house">
+        <el-select v-model="queryParams.houseId" placeholder="请选择房屋" @change="handleChangeHouseId">
+          <el-option v-for="item in houseOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 房间 -->
+      <el-form-item label="房间" prop="houseName">
+        <el-input v-model="queryParams.houseName" placeholder="请输入房间名称" clearable style="width: 220px"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="姓名" prop="graduateName">
+        <el-input v-model="queryParams.graduateName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="graduateTelephone">
+        <el-input v-model="queryParams.graduateTelephone" placeholder="请输入手机号码" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <!-- 身份证 -->
+      <el-form-item label="身份证" prop="graduateIdCard">
+        <el-input v-model="queryParams.graduateIdCard" placeholder="请输入身份证号码" clearable style="width: 220px"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+     
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="list">
+      <!-- <el-table-column type="selection" width="50" align="center" /> -->
+      <el-table-column label="序号" align="center" key="id" type="index" />
+      <!-- 所在区域 -->
+      <el-table-column label="所在区域" align="center" prop="parentName" :show-overflow-tooltip="true" />
+      <el-table-column label="小区/公寓" align="center" prop="apartmentName" :show-overflow-tooltip="true" />
+      <!-- 楼号 -->
+      <el-table-column label="楼号" align="center" prop="buildingName" />
+      <!-- 单元 -->
+      <el-table-column label="单元" align="center" prop="unitName" />
+      <!-- 门牌号 -->
+      <el-table-column label="房屋" align="center" prop="houseName" />
+      <!-- 房间 -->
+      <el-table-column label="房间" align="center" prop="roomTypeName" />
+      <!-- 入住人 -->
+      <el-table-column label="居主人" align="center" prop="graduateName" />
+      <!-- 性别 -->
+      <el-table-column label="性别" align="center" prop="genderName">
+        <template slot-scope="scope">
+          {{ scope.row.gender == '1'? '男' : '女' }}
+        </template>
+        </el-table-column> 
+      <el-table-column label="手机号" align="center" prop="telephone" width="160" />
+      <!-- 入住时间 -->
+      <el-table-column label="办理退房日期" align="center" prop="handleCheckOutDate" width="160" />
+
+      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
+        <template slot-scope="scope" >
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+    <el-dialog title="详情" :visible.sync="open" width="50%">
+      <el-row :gutter="60">
+        <el-col :span="8" class="mb-10">所在区域：{{ info.deptName }}</el-col>
+        <el-col :span="8" class="mb-10">小区/公寓：{{ info.apartmentName }}</el-col>
+        <el-col :span="8" class="mb-10">楼号：{{ info.buildingName }}</el-col>
+
+        <el-col :span="8" class="mb-10">单元：{{ info.unitName }}</el-col>
+        <el-col :span="8" class="mb-10">房屋：{{ info.houseName }}</el-col>
+        <el-col :span="8" class="mb-10">房间：{{ info.roomName }}</el-col>
+        <el-col :span="24">
+          <div class="line"></div>
+        </el-col>
+        <el-col :span="8" class="mb-10">居住人：{{ info.graduateName }}</el-col>
+        <el-col :span="8" class="mb-10">性别：{{ info.genderName }}</el-col>
+        <el-col :span="8" class="mb-10">手机号：{{ info.telephone }}</el-col>
+
+        <el-col :span="8" class="mb-10">身份证号：{{ info.idCard }}</el-col>
+        <el-col :span="8" class="mb-10">入住日期：{{ info.checkInDate }}</el-col>
+        <el-col :span="8" class="mb-10">退房日期：{{ info.checkOutDate }}</el-col>
+
+        <el-col :span="24" class="mb-10" v-if="info.contract">交割单：{{ info.contract }} <el-button  @click="handleDownload" type="text" ><i class="el-icon-download"></i>下载</el-button></el-col>
+
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="open = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listCheckOutRec,
+  getRecCheckOutInfo,
+  queryDeptDropdownList
+} from "@/api/mz/rec";
+import { listDept } from "@/api/system/dept";
+
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "RoomSelection",
+  dicts: ["sys_normal_disable", "sys_user_sex"],
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      list: null,
+     
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deptId:null,
+        apartmentId: null,
+        houseId: null,
+        houseName: null,
+        graduateName: null,
+        graduateTelephone: null,
+        graduateIdCard: null,
+        buildingId: null,
+        unitId: null,
+        houseId: null,
+      },
+      info: {},
+      deptOptions: [],
+      apartmentOptions: [],
+      buildingOptions: [],
+      unitOptions: [],
+      houseOptions: [],
+      open: false,
+    };
+  },
+  watch: {
+    'queryParams.deptId': {
+      handler(newVal, oldVal) {
+        console.log('newVal',newVal);
+        if(!newVal)
+        this.queryParams.apartmentId = null;
+        this.queryParams.buildingId = null;
+        this.queryParams.unitId = null; 
+        this.queryParams.houseId = null;
+        this.apartmentOptions = [];
+        this.buildingOptions = [];
+        this.unitOptions = [];
+        this.houseOptions = [];
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    this.getList();
+    this.getDeptTree();
+
+  },
+  computed: {
+    
+  },
+  methods: {
+    async handleTreeSelect(value){
+      this.queryParams.deptId = value.deptId;
+      this.queryParams.apartmentId = null;
+      this.queryParams.buildingId = null;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.buildingOptions = [];
+      this.unitOptions = [];
+      this.houseOptions = [];
+      this.apartmentOptions = await this.getListByParentId('1',value.deptId)
+    },
+    async handleChangeapartment(val) {
+      this.queryParams.apartmentId = val;
+      this.queryParams.buildingId = null;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.houseOptions = [];
+      this.buildingOptions = await this.getListByParentId('2',val);
+    },
+    // 三级联动
+   async handleChangeBuildingId(val) {
+      this.queryParams.buildingId = val;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.houseOptions = [];
+      this.unitOptions = await this.getListByParentId(3,val);
+    },
+   async handleChangeUnitId(val) {
+      this.queryParams.unitId = val;
+      this.queryParams.houseId = null;
+      this.houseOptions = await this.getListByParentId(4,val);
+    },
+    handleChangeHouseId(val) {
+      this.queryParams.houseId = val;
+    },
+    // 三级联动通用接口
+     getListByParentId(type,id) {
+      return new Promise((resolve, reject) => {
+        queryDeptDropdownList({type,id}).then((res) => {
+          resolve(res.data);
+        });
+      }); 
+    },
+    // 下载合同
+    handleDownload(){
+      this.info.contract = 'http://192.168.1.144:9000/mzjzf/%E6%88%BF%E5%B1%8B%E7%A7%9F%E8%B5%81%E5%90%88%E5%90%8C%E6%9B%B4%E6%94%B9%E5%90%8E.pdf'
+      if (this.info.contract) {
+        // 创建一个隐藏的 <a> 标签
+        const link = document.createElement('a');
+        link.href = this.info.contract;
+        // 设置下载的文件名，这里假设文件名可以从 URL 中获取
+        // 例如：https://example.com/files/example.pdf，获取到的文件名就是 example.pdf
+        const fileName = this.info.contract.split('/').pop(); 
+        link.setAttribute('download', fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } else {
+        this.$message.warning('没有可下载的文件地址');
+      }
+    },
+    stateComp(val) {
+        return this.statusOptions.find((item) => item.value == val)?.label;
+    },
+    /** 转换公寓数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children,
+      };
+    },
+    /** 查询公寓列表 */
+    getList() {
+      this.loading = true;
+      listCheckOutRec(this.queryParams).then(
+        (response) => {
+          this.list = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      ).catch(err => {
+        this.loading = false;
+      })
+    },
+    /** 查询公寓下拉树结构 */
+    getDeptTree() {
+      listDept().then((response) => {
+        this.deptOptions = this.handleTree(response.data, "deptId", 'parentId', 'children', 2);
+      });
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.deptId = undefined;
+      this.$refs.tree.setCurrentKey(null);
+      this.handleQuery();
+    },
+    handleView(row) {
+      getRecCheckOutInfo(row.chooseRecId).then((response) => {
+        this.info = response.data;
+        this.open = true;
+      }).catch(err => {
+        this.$message.error(err.msg);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.line {
+  margin: 30px 0;
+  height: 2px;
+  border-top: 1px solid transparent;
+  background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
+} 
+</style>
diff --git a/src/views/records/roomselection/index.vue b/src/views/records/roomselection/index.vue
index b6591a4..d4a9387 100644
--- a/src/views/records/roomselection/index.vue
+++ b/src/views/records/roomselection/index.vue
@@ -1,24 +1,324 @@
 <template>
-  <div class="container">
-   选房记录
+  <div class="app-container">
+    <!--入住记录数据-->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+      <el-form-item label="所在区域" prop="deptId">
+        <treeselect 
+          v-model="queryParams.deptId" 
+          :options="deptOptions"  
+          :show-count="true" 
+          :normalizer="normalizer"
+          placeholder="请选择所在区域"  
+          style="width: 220px" 
+          @select="handleTreeSelect"
+          :disable-branch-nodes="true"
+        />
+      </el-form-item>
+      <!-- 公寓 -->
+      <el-form-item label="小区公寓" prop="apartmentId">
+        <el-select v-model="queryParams.apartmentId" placeholder="请选择小区" @change="handleChangeapartment">
+          <el-option v-for="item in apartmentOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="楼栋" prop="building">
+        <el-select v-model="queryParams.buildingId" placeholder="请选择楼栋" @change="handleChangeBuildingId">
+          <el-option v-for="item in buildingOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 单元 -->
+      <el-form-item label="单元" prop="unit">
+        <el-select v-model="queryParams.unitId" placeholder="请选择单元" @change="handleChangeUnitId">
+          <el-option v-for="item in unitOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 门牌号 -->
+      <el-form-item label="房屋" prop="house">
+        <el-select v-model="queryParams.houseId" placeholder="请选择房屋" @change="handleChangeHouseId">
+          <el-option v-for="item in houseOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <!-- 房间 -->
+      <el-form-item label="房间" prop="houseName">
+        <el-input v-model="queryParams.houseName" placeholder="请输入房间名称" clearable style="width: 220px"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+
+      <el-form-item label="姓名" prop="graduateName">
+        <el-input v-model="queryParams.graduateName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="graduateTelephone">
+        <el-input v-model="queryParams.graduateTelephone" placeholder="请输入手机号码" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <!-- 身份证 -->
+      <el-form-item label="身份证" prop="graduateIdCard">
+        <el-input v-model="queryParams.graduateIdCard" placeholder="请输入身份证号码" clearable style="width: 220px"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+     
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="list">
+      <!-- <el-table-column type="selection" width="50" align="center" /> -->
+      <el-table-column label="序号" align="center" key="buildId" type="index" />
+      <!-- 所在区域 -->
+      <el-table-column label="所在区域" align="center" prop="deptName" :show-overflow-tooltip="true" />
+      <el-table-column label="小区/公寓" align="center" prop="apartmentName" :show-overflow-tooltip="true" />
+      <!-- 楼号 -->
+      <el-table-column label="楼号" align="center" prop="buildingName" />
+      <!-- 单元 -->
+      <el-table-column label="单元" align="center" prop="unitName" />
+      <!-- 门牌号 -->
+      <el-table-column label="房屋" align="center" prop="houseName" />
+      <!-- 房间 -->
+      <el-table-column label="房间" align="center" prop="roomName" />
+      <!-- 入住人 -->
+      <el-table-column label="选房人" align="center" prop="graduateName" />
+      <!-- 性别 -->
+      <el-table-column label="性别" align="center" prop="genderName" />
+      <el-table-column label="手机号" align="center" prop="telephone" width="160" />
+      <!-- 入住时间 -->
+      <el-table-column label="入住日期" align="center" prop="checkInDate"  width="160" />
+      <el-table-column label="计划退房日期" align="center" prop="checkOutDate" width="160" />
+      <el-table-column label="办理入住时间" align="center" prop="handleCheckInDate" width="160" />
+      <!-- 居住状态 -->
+      <!-- <el-table-column label="当前状态" prop="state">
+        <template slot-scope="scope">
+          <span :style="{ 'color': scope.row.state === 0 ? '#08b3b3' : scope.row.state === 6 ? '#fa9e0a' : '#c5cbda' }">{{ stateComp(scope.row.state) }}</span>
+        </template>
+      </el-table-column> -->
+      <!-- 入住评价 -->
+      <el-table-column label="原因说明" align="center" prop="evaluation" />
+
+      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+    <el-dialog title="详情" :visible.sync="open" width="50%">
+      <el-row :gutter="60">
+        <el-col :span="8" class="mb-10">所在区域：{{ info.deptName }}</el-col>
+        <el-col :span="8" class="mb-10">小区/公寓：{{ info.apartmentName }}</el-col>
+        <el-col :span="8" class="mb-10">楼号：{{ info.buildingName }}</el-col>
+
+        <el-col :span="8" class="mb-10">单元：{{ info.unitName }}</el-col>
+        <el-col :span="8" class="mb-10">房屋：{{ info.houseName }}</el-col>
+        <el-col :span="8" class="mb-10">房间：{{ info.roomName }}</el-col>
+        <el-col :span="24">
+          <div class="line"></div>
+        </el-col>
+        <el-col :span="8" class="mb-10">居住人：{{ info.graduateName }}</el-col>
+        <el-col :span="8" class="mb-10">性别：{{ info.genderName }}</el-col>
+        <el-col :span="8" class="mb-10">手机号：{{ info.telephone }}</el-col>
+
+        <el-col :span="8" class="mb-10">身份证号：{{ info.idCard }}</el-col>
+        <el-col :span="8" class="mb-10">入住日期：{{ info.checkInDate }}</el-col>
+        <el-col :span="8" class="mb-10">退房日期：{{ info.checkOutDate }}</el-col>
+
+        <el-col :span="24" class="mb-10">入住办理时间：{{ info.handleCheckInDate }}</el-col>
+        <!-- <el-col :span="8" class="mb-10">当前状态：{{ stateComp(info.state) }}</el-col>
+        <el-col :span="8" class="mb-10"></el-col> -->
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="open = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import {
+  listRecselect,
+  getRecSelectInfo,
+  queryDeptDropdownList
+} from "@/api/mz/rec";
+import { listDept } from "@/api/system/dept";
+
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
 export default {
-  name: 'RoomSelection',
+  name: "RoomSelection",
+  dicts: ["sys_normal_disable", "sys_user_sex"],
+  components: { Treeselect },
   data() {
     return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 公寓表格数据
+      list: null,
+     
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deptId:null,
+        apartmentId: null,
+        houseId: null,
+        houseName: null,
+        graduateName: null,
+        graduateTelephone: null,
+        graduateIdCard: null,
+        status: null,
+        buildingId: null,
+        unitId: null,
+      },
+      info: {},
+      deptOptions: [],
+      apartmentOptions: [],
+      buildingOptions: [],
+      unitOptions: [],
+      houseOptions: [],
+      open: false,
     };
+  },
+  watch: {
+    'queryParams.deptId': {
+      handler(newVal, oldVal) {
+        console.log('newVal',newVal);
+        if(!newVal)
+        this.queryParams.apartmentId = null;
+        this.queryParams.buildingId = null;
+        this.queryParams.unitId = null; 
+        this.queryParams.houseId = null;
+        this.apartmentOptions = [];
+        this.buildingOptions = [];
+        this.unitOptions = [];
+        this.houseOptions = [];
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    this.getList();
+    this.getDeptTree();
+
+  },
+  computed: {
+    
   },
   methods: {
-   
-  }
+    async handleTreeSelect(value){
+      this.queryParams.deptId = value.deptId;
+      this.queryParams.apartmentId = '';
+      this.queryParams.buildingId = '';
+      this.queryParams.unitId = '';
+      this.queryParams.houseId = '';
+      this.buildingOptions = [];
+      this.unitOptions = [];
+      this.houseOptions = [];
+      this.apartmentOptions = await this.getListByParentId('1',value.deptId)
+    },
+    async handleChangeapartment(val) {
+      this.queryParams.apartmentId = val;
+      this.queryParams.buildingId = null;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.houseOptions = [];
+      this.buildingOptions = await this.getListByParentId('2',val);
+    },
+    // 三级联动
+   async handleChangeBuildingId(val) {
+      this.queryParams.buildingId = val;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.houseOptions = [];
+      this.unitOptions = await this.getListByParentId('3',val);
+    },
+   async handleChangeUnitId(val) {
+      this.queryParams.unitId = val;
+      this.queryParams.houseId = null;
+      this.houseOptions = await this.getListByParentId('4',val);
+    },
+    handleChangeHouseId(val) {
+      this.queryParams.houseId = val;
+    },
+    // 三级联动通用接口
+     getListByParentId(type,id) {
+      return new Promise((resolve, reject) => {
+        queryDeptDropdownList({type,id}).then((res) => {
+          resolve(res.data);
+        });
+      }); 
+    },
+    // stateComp(val) {
+    //     return this.statusOptions.find((item) => item.value == val)?.label;
+    // },
+    /** 转换公寓数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children,
+      };
+    },
+    /** 查询公寓列表 */
+    getList() {
+      this.loading = true;
+      listRecselect(this.queryParams).then(
+        (response) => {
+          this.list = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      ).catch(err => {
+        this.loading = false;
+      });
+    },
+    /** 查询公寓下拉树结构 */
+    getDeptTree() {
+      listDept().then((response) => {
+        this.deptOptions = this.handleTree(response.data, "deptId", 'parentId', 'children', 2);
+      });
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.deptId = undefined;
+      this.$refs.tree.setCurrentKey(null);
+      this.handleQuery();
+    },
+    handleView(row) {
+      getRecSelectInfo(row.chooseRecId).then((response) => {
+        this.info = response.data;
+        this.open = true;
+      }).catch(err => {
+        this.$message.error(err.msg);
+      });
+    },
+  },
 };
 </script>
-
-<style scoped>
-.container {
- 
-}
+<style scoped lang="scss">
+.line {
+  margin: 30px 0;
+  height: 2px;
+  border-top: 1px solid transparent;
+  background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
+} 
 </style>