2 changed files with 468 additions and 1 deletions
@ -0,0 +1,467 @@ |
|||
<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=""> |
|||
<el-select |
|||
v-model="queryParams.checkInState" |
|||
placeholder="请选择入住状态" |
|||
> |
|||
<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="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="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="当前状态" prop="state"> |
|||
<template slot-scope="scope"> |
|||
<span |
|||
:style="{ |
|||
color: |
|||
scope.row.state === 1 |
|||
? '#08b3b3' |
|||
: scope.row.state === 5 |
|||
? '#000' |
|||
: '#000', |
|||
}" |
|||
>{{ |
|||
scope.row.state === 1 |
|||
? "已入住" |
|||
: scope.row.state === 5 |
|||
? "已退房" |
|||
: "" |
|||
}}</span |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- 入住时间 --> |
|||
<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" |
|||
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.pageNo" |
|||
: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.parentName }}</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="8" class="mb-10" |
|||
>办理入住时间：{{ info.handleCheckInDate }}</el-col |
|||
> |
|||
<el-col :span="8" class="mb-10" |
|||
>当前状态： |
|||
<span |
|||
:style="{ |
|||
color: |
|||
info.state === 1 |
|||
? '#08b3b3' |
|||
: info.state === 5 |
|||
? '#000' |
|||
: '#000', |
|||
}" |
|||
>{{ |
|||
info.state === 1 |
|||
? "已入住" |
|||
: info.state === 5 |
|||
? "已退房" |
|||
: "" |
|||
}}</span |
|||
></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 { |
|||
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: "RoomSelection", |
|||
dicts: ["sys_normal_disable", "sys_user_sex"], |
|||
components: { Treeselect }, |
|||
data() { |
|||
return { |
|||
// 遮罩层 |
|||
loading: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 公寓表格数据 |
|||
list: null, |
|||
|
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNo: 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: [], |
|||
open: false, |
|||
statusOptions: [ |
|||
{ 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 = []; |
|||
}, |
|||
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.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.buildingOptions = await this.getListByParentId("2", val); |
|||
}, |
|||
// 三级联动 |
|||
async handleChangeBuildingId(val) { |
|||
this.queryParams.buildingId = val; |
|||
this.queryParams.unitId = null; |
|||
this.queryParams.houseId = null; |
|||
this.unitOptions = await this.getListByParentId("3", val); |
|||
}, |
|||
async handleChangeUnitId(val) { |
|||
this.queryParams.unitId = val; |
|||
this.queryParams.houseId = null; |
|||
}, |
|||
|
|||
// 三级联动通用接口 |
|||
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; |
|||
listRecCheckin(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.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.resetForm("queryForm"); |
|||
this.queryParams.deptId = undefined; |
|||
this.$refs.tree.setCurrentKey(null); |
|||
this.handleQuery(); |
|||
}, |
|||
handleView(row) { |
|||
getRecCheckinInfo(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> |
|||
Loading…
Reference in new issue