vue-element-admin列表管理

跳轉按鈕

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