You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
520 lines
14 KiB
520 lines
14 KiB
<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
|
|
clearable
|
|
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
|
|
clearable
|
|
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
|
|
clearable
|
|
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
|
|
clearable
|
|
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="roomName
|
|
"
|
|
>
|
|
<el-input
|
|
v-model="queryParams.roomName"
|
|
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 label="当前状态" prop="state">
|
|
<el-select
|
|
clearable
|
|
v-model="queryParams.state"
|
|
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>
|
|
<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="gender">
|
|
<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"
|
|
/>
|
|
<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)"
|
|
v-hasPermi="['apartment:admin:chooseRoomRecDetail']"
|
|
>查看</el-button
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
v-hasPermi="['mz:checkInAddRec']"
|
|
@click="handleEdit(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.roomTypeName }}</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.gender==1?'男':'女' }}</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",
|
|
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,
|
|
statusOptions: [
|
|
{ value: 0, label: "未入住" },
|
|
{ value: 1, label: "入住中" },
|
|
{ value: 5, label: "已退房" },
|
|
],
|
|
};
|
|
},
|
|
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() {
|
|
console.log("选房记录");
|
|
|
|
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);
|
|
});
|
|
},
|
|
handleEdit(row) {
|
|
this.$router.push({
|
|
path: "/residence/check_in",
|
|
query: { idCard: row.idCard },
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</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>
|
|
|