<template>
|
<div class="rentManage-container">
|
<!-- 房屋出租状态 -->
|
<div class="rentManage-status-content">
|
<span
|
class="fz-10 cp"
|
@click="houseTypeCheck(2)"
|
:class="[houseType === 2 ? 'fc-170 fw-bold' : '']"
|
>待出租</span>
|
<span
|
class="fz-10 mr-l-20 cp"
|
@click="houseTypeCheck(1)"
|
:class="[houseType === 1 ? 'fc-170 fw-bold' : '']"
|
>待发布</span>
|
<span
|
class="fz-10 mr-l-20 cp"
|
@click="houseTypeCheck(3)"
|
:class="[houseType === 3 ? 'fc-170 fw-bold' : '']"
|
>出租中</span>
|
</div>
|
<!-- 房屋租售搜索 -->
|
<div class="rentManage-search-content mr-t-10 fl-co">
|
<el-input
|
class="search-input"
|
v-model="searchValue.keyword"
|
clearable
|
placeholder="请输入小区名称、房屋地址等关键词进行查找"
|
></el-input>
|
<div class="fl-co" v-if="houseType === 2">
|
<div class="fl-al mr-t-10">
|
<div class="label-text">户型：</div>
|
<div class="fl-fw">
|
<div
|
class="label-value cp mr-r-10"
|
v-for="(item,index) in hxType"
|
:class="[searchValue.brn === item.value ? 'label-check' : '']"
|
:key="index"
|
@click="labelCheck(item, 'hx')"
|
>{{ item.label }}</div>
|
</div>
|
</div>
|
<div class="fl-al mr-t-10">
|
<div class="label-text">装修情况：</div>
|
<div class="fl-fw">
|
<div
|
class="label-value cp mr-r-10"
|
v-for="(item,index) in zxType"
|
:class="[searchValue.decoration === item.value ? 'label-check' : '']"
|
:key="index"
|
@click="labelCheck(item, 'zx')"
|
>{{ item.label }}</div>
|
</div>
|
</div>
|
<div class="fl-al mr-t-10">
|
<div class="label-text">朝向：</div>
|
<div class="fl-fw">
|
<div
|
class="label-value cp mr-r-10"
|
v-for="(item,index) in cxType"
|
:class="[searchValue.orientation === item.value ? 'label-check' : '']"
|
:key="index"
|
@click="labelCheck(item, 'cx')"
|
>{{ item.label }}</div>
|
</div>
|
</div>
|
<div class="fl-al mr-t-10">
|
<div class="label-text">面积：</div>
|
<div class="fl-fw">
|
<div
|
class="label-value cp mr-r-10"
|
v-for="(item,index) in mjType"
|
:class="[searchValue.area === item.value ? 'label-check' : '']"
|
:key="index"
|
@click="labelCheck(item, 'mj')"
|
>{{ item.label }}</div>
|
</div>
|
</div>
|
<div class="fl-al mr-t-10">
|
<div class="label-text">租金：</div>
|
<div class="fl-fw">
|
<div
|
class="label-value cp mr-r-10"
|
v-for="(item,index) in zjType"
|
:class="[searchValue.money === item.value ? 'label-check' : '']"
|
:key="index"
|
@click="labelCheck(item, 'zj')"
|
>{{ item.label }}</div>
|
</div>
|
</div>
|
<div class="fl-al mr-t-10">
|
<div class="label-text">房屋状态：</div>
|
<div class="fl-fw">
|
<div
|
class="label-value cp mr-r-10"
|
v-for="(item,index) in fwType"
|
:class="[searchValue.detailStatus === item.value ? 'label-check' : '']"
|
:key="index"
|
@click="labelCheck(item, 'fw')"
|
>{{ item.label }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="fl-al mr-t-10" v-if="houseType === 1">
|
<div class="label-text">房屋状态：</div>
|
<div class="fl-fw">
|
<div
|
class="label-value cp mr-r-10"
|
v-for="(item,index) in fwdType"
|
:class="[searchValue.detailStatus === item.value ? 'label-check' : '']"
|
:key="index"
|
@click="labelCheck(item, 'fw')"
|
>{{ item.label }}</div>
|
</div>
|
</div>
|
<div class="fl-al mr-t-10" v-if="houseType === 3">
|
<div class="fl-al">
|
<div class="label-text">房屋状态：</div>
|
<div class="fl-fw">
|
<div
|
class="label-value cp mr-r-10"
|
v-for="(item,index) in fwcType"
|
:class="[searchValue.detailStatus === item.value ? 'label-check' : '']"
|
:key="index"
|
@click="labelCheck(item, 'fw')"
|
>{{ item.label }}</div>
|
</div>
|
</div>
|
<div class="fl-al mr-l-20">
|
<span class="fc-170">到期时间：</span>
|
<el-date-picker
|
style="width:300px"
|
type="datetimerange"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="small"
|
v-model="time"
|
value-format="yyyy-MM-dd"
|
format="yyyy-MM-dd"
|
>
|
</el-date-picker>
|
</div>
|
</div>
|
<div class="search-btn-content">
|
<el-button type="primary" v-if="houseType === 1" @click="clickHandle('add')">新增</el-button>
|
<el-button type="primary" plain @click="clickHandle('search')">搜索</el-button>
|
<el-button @click="clickHandle('reset')">重置</el-button>
|
</div>
|
</div>
|
<!-- 房屋列表 -->
|
<div class="rentManage-list-content mr-t-10">
|
<div class="rentManage-item-box" v-for="(item,index) in tableList" :key="index">
|
<div class="rentManage-item-center">
|
<img class="item-img-style" :src="item.url ?item.url : default_src" />
|
<div class="item-right-content mr-l-20">
|
<div class="item-title fz-9">{{item.title}}</div>
|
<div class="fc-999 mr-t-10">{{item.brn}}室-{{item.constructArea}}㎡-{{item.floor}}</div>
|
<div class="fl-fw mr-t-10">
|
<div class="item-tyle" v-if="item.orientation">{{orient[item.orientation].text}}</div>
|
<template v-if="item.label">
|
<div class="item-tyle" v-for="(i,index) in tags[index]" :key="index">{{i}}</div>
|
</template>
|
</div>
|
<div class="mr-t-10 item-address-text">
|
<img class="item-address-img" src="../../../assets/position.png" />
|
<span>{{item.address}}</span>
|
</div>
|
<div class="fl-sb mr-t-10">
|
<span class="fc-red">{{item.monthlyRentMoney}}元/月</span>
|
<span class="fc-red" v-if="item.detailStatus">{{statusList[item.detailStatus].text}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="rentManage-mask fz-14">
|
<span
|
class="fc-fff cp mr-r-30"
|
v-if="houseType === 2"
|
@click="clickHandle('cfb', item)"
|
>取消发布</span>
|
<span
|
class="fc-fff cp mr-r-30"
|
v-if="houseType === 1&&item.detailStatus==2"
|
@click="clickHandle('fb', item)"
|
>发布</span>
|
<span
|
class="fc-fff cp mr-r-30"
|
v-if="houseType === 1 && item.detailStatus ===1"
|
@click="clickHandle('rzm', item)"
|
>认证码</span>
|
<span
|
class="fc-fff cp mr-r-30"
|
v-if="houseType === 1"
|
@click="clickHandle('del', item)"
|
>删除</span>
|
<span
|
class="fc-fff cp mr-r-30"
|
v-if="houseType !== 1"
|
@click="clickHandle('details', item)"
|
>详情</span>
|
<span
|
class="fc-fff cp"
|
v-if="houseType === 1 || houseType === 2"
|
@click="clickHandle('edit', item)"
|
>编辑</span>
|
<span class="fc-fff" v-if="houseType === 3">2019-09-09到期</span>
|
</div>
|
</div>
|
</div>
|
<!-- 分页 -->
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
|
<el-dialog
|
title="认证码"
|
:visible.sync="dialogVisible"
|
width="30%"
|
center
|
append-to-body
|
>
|
<div class="fl-cen">
|
<el-image class="code-img" :src="code" :preview-src-list="[code]">
|
</el-image>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="saveImgHandle">下载保存</el-button>
|
<el-button size="mini" @click="dialogVisible = false">关 闭</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import { hxType, zxType, cxType, mjType, zjType, fwType, fwdType, fwcType } from '../../../utils/keys';
|
export default {
|
data() {
|
return {
|
default_src:require('../../../assets/image/default.png'),
|
dialogVisible:false,
|
code:'',
|
houseType: 2, // 房屋出租状态
|
searchValue: {
|
brn:'', //户型
|
decoration:'',//装修
|
orientation:'',//朝向
|
area:'', //面积
|
money:'', //租金
|
detailStatus:'', //状态
|
keyword: '',
|
status:'2' //房屋状态 1：待发布 2，待出租 3 出租中
|
},
|
statusList:[
|
{
|
text:''
|
},
|
{
|
text:'待认证'
|
},
|
{
|
text:'待发布'
|
},
|
{
|
text:'待出租'
|
},
|
{
|
text:'保留中'
|
},
|
{
|
text:'出租中'
|
},
|
{
|
text:'已超时'
|
},
|
{
|
text:'已到期'
|
}
|
|
],
|
time:[],
|
tableList:[],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
hxType: hxType(), // 户型
|
zxType: zxType(), // 装修情况
|
cxType: cxType(), // 朝向
|
mjType: mjType(), // 面积
|
zjType: zjType(), // 租金
|
fwType: fwType(), // 房屋状态
|
fwdType: fwdType(), // 房屋状态
|
fwcType: fwcType(), // 房屋状态
|
orient:[
|
{
|
text:'无'
|
},
|
{
|
text:'朝东'
|
},
|
{
|
text:'朝南'
|
},
|
{
|
text:'朝西'
|
},
|
{
|
text:'朝北'
|
},
|
{
|
text:'东南'
|
},
|
{
|
text:'东北'
|
},
|
{
|
text:'西南'
|
},
|
{
|
text:'西北'
|
},
|
// {
|
// text:'南北'
|
// },
|
// {
|
// text:'东西'
|
// },
|
],
|
areaList:[
|
{
|
value:'',
|
maxArea:'',
|
minArea:''
|
},
|
{
|
value:1,
|
maxArea:'40',
|
minArea:''
|
},
|
{
|
value:2,
|
maxArea:'70',
|
minArea:'40'
|
},
|
{
|
value:3,
|
maxArea:'90',
|
minArea:'70'
|
},
|
{
|
value:4,
|
maxArea:'120',
|
minArea:'90'
|
},
|
{
|
value:5,
|
maxArea:'',
|
minArea:'120'
|
},
|
],
|
moneyList:[
|
{
|
value:'',
|
maxRentMoney:'',
|
minRentMoney:''
|
},
|
{
|
value:1,
|
maxRentMoney:'1000',
|
minRentMoney:''
|
},
|
{
|
value:2,
|
maxRentMoney:'1500',
|
minRentMoney:'1000'
|
},
|
{
|
value:3,
|
maxRentMoney:'2000',
|
minRentMoney:'1500'
|
},
|
{
|
value:4,
|
maxRentMoney:'2500',
|
minRentMoney:'2000'
|
},
|
{
|
value:5,
|
maxRentMoney:'3000',
|
minRentMoney:'2500'
|
},
|
{
|
value:6,
|
maxRentMoney:'',
|
minRentMoney:'3000'
|
}
|
],
|
tags:[]
|
}
|
},
|
mounted() {
|
this.getTable();
|
},
|
methods: {
|
onPage(v) {
|
//分页
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.getTable();
|
},
|
// 获取数据
|
getTable() {
|
console.log("dddd")
|
// this.tableList = [];
|
let v = demo.copy(
|
Object.assign(this.searchValue, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
})
|
);
|
this.$api.post("renting/houses/page", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
|
this.tags = e.records.map(d=> {
|
if(d.label) {
|
return d.label.split(",")
|
}else {
|
return []
|
}
|
|
|
})
|
this.tableList = e.records || [];
|
// this.tags = e.records.label.split(",");
|
console.log(this.tags)
|
|
});
|
},
|
// 房屋状态切换
|
houseTypeCheck(t) {
|
if (t === this.houseType) return;
|
this.houseType = t;
|
this.searchValue.status = t;
|
this.getTable();
|
console.log(this.houseType)
|
this.clickHandle('reset')
|
},
|
|
// 保存图片
|
saveImgHandle() {
|
let a = document.createElement("a");
|
a.href = this.code;
|
a.setAttribute("download", "chart-download");
|
a.click();
|
},
|
// 搜索状态切换
|
labelCheck(row, type) {
|
switch (type) {
|
case 'hx': {
|
this.searchValue.brn = row.value;
|
break
|
}
|
case 'zx': {
|
this.searchValue.decoration = row.value;
|
break
|
}
|
case 'cx': {
|
this.searchValue.orientation = row.value;
|
break
|
}
|
case 'mj': {
|
this.searchValue.area = row.value;
|
break
|
}
|
case 'zj': {
|
this.searchValue.money = row.value;
|
break
|
}
|
case 'fw': {
|
this.searchValue.detailStatus = row.value;
|
break
|
}
|
default: {
|
break
|
}
|
}
|
},
|
//搜索
|
search() {
|
//面积
|
let a = this.areaList.map((d)=> {
|
if(this.searchValue.area === d.value) {
|
return {
|
maxArea :d.maxArea,
|
minArea :d.minArea
|
}
|
}
|
});
|
this.searchValue.minArea = this.searchValue.area ? a[this.searchValue.area].minArea : '';
|
this.searchValue.maxArea = this.searchValue.area ? a[this.searchValue.area].maxArea : '';
|
//租金
|
let b = this.moneyList.map((d)=> {
|
if(this.searchValue.money === d.value) {
|
return {
|
maxRentMoney :d.maxRentMoney,
|
minRentMoney :d.minRentMoney
|
}
|
}
|
});
|
this.searchValue.minRentMoney = this.searchValue.money ? b[this.searchValue.money].minRentMoney : '';
|
this.searchValue.maxRentMoney = this.searchValue.money ? b[this.searchValue.money].maxRentMoney : '';
|
//到期时间
|
console.log(this.time.length)
|
if(this.time.length) {
|
this.searchValue.expireDateBegin = this.time[0]
|
this.searchValue.expireDateEnd = this.time[1]
|
}
|
this.getTable();
|
},
|
//重置
|
reset() {
|
this.searchValue= {
|
brn:'', //户型
|
decoration:'',//装修
|
orientation:'',//朝向
|
area:'', //面积
|
money:'', //租金
|
detailStatus:'', //状态
|
keyword: '',
|
time: '',
|
status:this.searchValue.status //房屋状态 1：待发布 2，待出租 3 出租中
|
},
|
this.time = [];
|
this.getTable();
|
|
},
|
//取消发布
|
cfbClick(id) {
|
this.$confirm('确定要取消发布该套房源信息吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$api.put("renting/houses/releaseOrCancel", {registerId:id,type:2}, (e) => {
|
demo.toast("取消发布成功");
|
this.getTable();
|
});
|
});
|
|
},
|
//发布
|
fbClick(id) {
|
this.$confirm('确定要发布该套房源信息吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$api.put("renting/houses/releaseOrCancel", {registerId:id,type:1}, (e) => {
|
demo.toast("发布成功");
|
this.getTable();
|
});
|
});
|
|
},
|
//删除
|
delClick(id) {
|
this.$confirm('确定要删除该套房源信息吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$api.del(`renting/houses/delete?registerId=${id}`, {registerId:id}, (e) => {
|
demo.toast("删除成功");
|
this.getTable();
|
});
|
});
|
|
},
|
// 页面操作
|
clickHandle(type, row) {
|
switch (type) {
|
case 'add': {
|
this.$router.push('/addRent')
|
break
|
}
|
case 'search': {
|
this.search()
|
break
|
}
|
case 'reset': {
|
this.reset();
|
break
|
}
|
case 'fb': {
|
this.fbClick(row.id);
|
break
|
}
|
case 'rzm': {
|
this.dialogVisible = true;
|
this.code = row.authCode;
|
break
|
}
|
case 'cfb': {
|
this.cfbClick(row.id);
|
break
|
}
|
case 'details': {
|
this.$router.push({path:'/rentDetails',query:{id:row.id}})
|
break
|
}
|
case 'del': {
|
this.delClick(row.id);
|
break
|
}
|
case 'edit': {
|
this.$router.push({path:'/addRent',query:{id:row.id}})
|
break
|
}
|
default: {
|
break
|
}
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.rentManage-container {
|
overflow: auto;
|
color: #333;
|
}
|
.rentManage-status-content {
|
padding-top: 20px;
|
}
|
.rentManage-search-content {
|
position: relative;
|
}
|
.search-input {
|
width: 500px;
|
}
|
.label-text {
|
width: 80px;
|
}
|
.label-value {
|
padding: 6px 10px;
|
border: 1px solid #333;
|
}
|
.label-check {
|
color: #409EFF !important;
|
border: 1px solid #409EFF !important;
|
}
|
.search-btn-content {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
text-align: right;
|
}
|
.rentManage-list-content {
|
position: relative;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.rentManage-item-box {
|
margin: 0 10px 10px 0;
|
position: relative;
|
width: 468px;
|
border: 1px solid #666;
|
border-radius: 6px;
|
}
|
.rentManage-item-center {
|
padding: 20px;
|
display: flex;
|
}
|
.item-img-style {
|
width: 148px;
|
height: 148px;
|
border-radius: 50%;
|
}
|
.item-right-content {
|
display: flex;
|
flex-direction: column;
|
}
|
.item-title {
|
width: 260px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.item-tyle {
|
margin-right: 10px;
|
padding: 4px 7px;
|
border: 1px solid #409EFF !important;
|
color: #409EFF !important;
|
margin-bottom: 5px;
|
}
|
.item-address-text {
|
width: 258px;
|
line-height: 1.3;
|
}
|
.item-address-img {
|
width: 16px;
|
height: 16px;
|
line-height: 1.3;
|
}
|
.rentManage-mask {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 470px;
|
border-radius: 6px;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.6);
|
z-index: 9;
|
display: none;
|
}
|
.rentManage-item-box:hover .rentManage-mask {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.time-width {
|
width: 250px;
|
}
|
</style>
|
