跳转按钮
<el-button type="primary" size="medium" icon="el-icon-s-grid" @click="handleToAcreage(floorInfo)">房屋面积管理</el-button>
跳转新的页面方法
handleToAcreage(row){
// 获取参数，并路由到指定页面
let { id } = row;
this.$router.push({
path:'/floor/acreage',
query:{ building_id:id }
})
}
配置路由
{
path: '/floor',
component: Layout,
redirect: '/floor/index',
name: 'floor',
meta: {
title: '楼栋管理',
icon: 'el-icon-s-data'
},
children: [
...
{
path: 'acreage',
component: () => import('@/views/floor/acreage'),
name: 'FloorAcreage',
hidden: true,
meta: { title: '房屋面积' }
}
]
}
引入需要用到的接口
// 获取房屋，根据楼栋
export function getHouseListByBuildingId(data) {
return request({
url: '/VillageBuilding/getHouseListByBuildingId',
method: 'post',
data
})
}
// 设置房屋面积
export function setHouseAcreage(data) {
return request({
url: '/VillageBuilding/setHouseAcreage',
method: 'post',
data
})
}
接收参数，获取数据
created() {
let { building_id } = this.$route.query;
this.listQuery.building_id = building_id;
this.getHouseList();
}
页面完整代码
<template>
<div class="app-container">
<el-card>
<el-form :model="listQuery" class="flex-form-item" inline >
<el-form-item label="层数">
<el-input v-model="listQuery.floor_number" placeholder="请输入楼层" />
</el-form-item>
<el-form-item label="门牌号">
<el-input v-model="listQuery.house_name" maxlength="11" placeholder="请输入门牌号" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="listQuery.status" placeholder="请选择状态" clearable class="filter-item" style=" 140px;margin-right:10px">
<el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
<el-row style="display:flex">
<el-button type="primary" :loading="loading" @click="handleSearch">搜索</el-button>
<el-button @click="resetFilter">清空</el-button>
</el-row>
</el-card>
<el-table
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style=" 100%;margin-top:15px;"
>
<el-table-column label="ID" prop="id" align="center" width="80">
<template slot-scope="{row}">
<span>{{ row.id }}</span>
</template>
</el-table-column>
<el-table-column label="楼层" align="center" min-width="100">
<template slot-scope="{row}">
<span>{{ row.floor_name }}</span>
</template>
</el-table-column>
<el-table-column label="门牌号" align="center" min-width="180">
<template slot-scope="{row}">
<span>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="房屋面积(m²)" align="center" min-width="150">
<template slot-scope="{row}">
<span>{{ row.acreage }}</span>
</template>
</el-table-column>
<el-table-column label="房主" align="center" min-width="100">
<template slot-scope="{row}">
<span>{{ row.host_name }}</span>
</template>
</el-table-column>
<el-table-column label="手机号" align="center" min-width="180">
<template slot-scope="{row}">
<span>{{ row.host_phone }}</span>
</template>
</el-table-column>
<el-table-column label="面积添加时间" align="center" min-width="200px">
<template slot-scope="{row}">
<span>{{ row.acreage_create_time }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" min-width="100">
<template slot-scope="{row}">
<span>{{ row.is_set==0?'未添加':'已添加' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="200" class-name="small-padding fixed-width">
<template slot-scope="{row}">
<el-button v-if="row.is_set == 0" type="primary" size="mini" @click="handleUpdate(row)">添加</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getHouseList" />
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" center>
<el-form ref="acreageForm" :model="acreageForm" :rules="rules" label-position="left" label-width="100px" style=" 450px;">
<el-form-item label="面积" prop="phone">
<el-input v-model="acreageForm.acreage" maxlength="11" placeholder="请输入面积" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="updateData()">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
setHouseAcreage,
getHouseListByBuildingId
} from '@/api/village-api'
export default {
name: 'FloorAcreage',
data() {
return {
dialogFormVisible: false,
dialogTitle: '设置面积',
loading:false,
listQuery:{
page:1,
size:10,
building_id:undefined,
floor_number:undefined,
house_name:undefined,
status:undefined
},
listLoading:true,
list:[],
statusList:[
{
id:1,
name:'未添加'
},{
id:2,
name:'已添加'
}
],
total:0,
acreageForm:{
id:undefined,
acreage:undefined,
},
rules:{
acreage:[{ required: true, message: '请填写面积' , trigger: 'blur' }],
},
houseList:[],
}
},
created() {
let { building_id } = this.$route.query;
this.listQuery.building_id = building_id;
this.getHouseList();
},
methods: {
getHouseList(){
this.listLoading = true;
getHouseListByBuildingId(this.listQuery).then(({ data })=>{
this.list = data.content
this.total = data.totalElements?Number(data.totalElements):0;
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false;
this.loading = false;
}, 1.5 * 1000)
})
},
handleSearch(){
this.loading = true;
this.listQuery.page = 1;
this.getHouseList();
},
resetFilter(){
this.listQuery = {
page:1,
size:10,
floor_number:undefined,
house_name:undefined,
status:undefined
}
this.getHouseList();
},
resetAcreageForm(){
this.acreageForm = {
id:undefined,
acreage:undefined
}
},
handleUpdate(row){
this.acreageForm = Object.assign({}, row) // copy obj
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['acreageForm'].clearValidate()
})
},
updateData(){
this.$refs['acreageForm'].validate((valid)=>{
if(valid){
setHouseAcreage(this.acreageForm).then(()=>{
this.getHouseList();
this.dialogFormVisible = false
this.$message.success('设置成功');
})
}
})
},
},
}
</script>
<style scoped lang=''>
</style>