vue-element-admin列表管理

vue

跳转按钮

<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="width: 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="width: 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="width: 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>

以上是 vue-element-admin列表管理 的全部内容, 来源链接: utcz.com/z/378866.html

回到顶部