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