elink-star
/
epmet-apartment-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

同步选房 入住 退房记录

wyx
mk 3 months ago
parent
93143112a5
commit
cfc2360e19
3 changed files with 904 additions and 901 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1063
      src/views/records/checkin/index.vue
  2. 336
      src/views/records/checkout/index.vue
  3. 316
      src/views/records/roomselection/index.vue

1063
src/views/records/checkin/index.vue
View File

File diff suppressed because it is too large

336
src/views/records/checkout/index.vue
View File

@ -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>

316
src/views/records/roomselection/index.vue
View File

@ -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,
};
},
methods: {
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>

Write Preview
Loading…
Cancel
Save