You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.3 KiB
121 lines
3.3 KiB
<template>
|
|
<div class="container">
|
|
<div style="padding: 0px 20px">
|
|
<div ref="lxHeader">
|
|
<LxHeader icon="md-apps" text="道路信息" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
|
<div slot="content"></div>
|
|
<slot>
|
|
<div>
|
|
<Input style="width: 200px; margin-right: 10px" v-model="searchFields.KeyWord" placeholder="关键字搜索" />
|
|
<Button type="primary" @click="onsearch" style="margin-left: 10px">查询</Button>
|
|
</div>
|
|
</slot>
|
|
</LxHeader>
|
|
</div>
|
|
<div ref="lxTable">
|
|
<el-table :data="tableData" class="v-table" :height="tableHeight" style="width: 100%">
|
|
<el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
|
|
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columns"
|
|
:label="column.title" :width="column.width">
|
|
<template slot-scope="scope">
|
|
|
|
<div>{{scope.row[column.field]}}</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pagination">
|
|
<el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
|
|
:page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
listroad
|
|
} from '../../api/basic/road.js'
|
|
import LxHeader from "@/components/LxHeader/index.vue";
|
|
|
|
export default {
|
|
components: {
|
|
LxHeader
|
|
},
|
|
data() {
|
|
return {
|
|
tableHeight: 0,
|
|
dialogFormVisible: false,
|
|
formLabelWidth: "120px",
|
|
tableData: [],
|
|
tableHeight: 0,
|
|
searchFields: {
|
|
KeyWord: ""
|
|
},
|
|
paginations: {
|
|
page: 1,
|
|
page_size: 15,
|
|
total: 0
|
|
},
|
|
|
|
columns: [{
|
|
field: "name",
|
|
title: "街道名称",
|
|
type: "string",
|
|
align: "left"
|
|
}
|
|
],
|
|
}
|
|
},
|
|
created() {
|
|
this.initLoad();
|
|
this.load();
|
|
|
|
},
|
|
methods: {
|
|
initLoad() {
|
|
var that = this;
|
|
var clientHeight = document.documentElement.clientHeight
|
|
var lxHeader_height = 96.5; //查询 头部
|
|
var paginationHeight = 37; //分页的高度
|
|
var topHeight = 50; //页面 头部
|
|
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
|
|
that.tableHeight = tableHeight;
|
|
},
|
|
handleCurrentChange(page) {
|
|
this.paginations.page = page;
|
|
this.load();
|
|
},
|
|
load() {
|
|
listroad({
|
|
page: this.paginations.page,
|
|
page_size: this.paginations.page_size,
|
|
name: this.searchFields.KeyWord
|
|
}).then(response => {
|
|
this.tableData = response.data;
|
|
this.paginations.total = response.total;
|
|
}).catch(error => {
|
|
console.log(error)
|
|
reject(error)
|
|
});
|
|
|
|
},
|
|
onsearch(){
|
|
this.paginations.page = 1
|
|
this.load();
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dialogConcent {
|
|
overflow-y: auto;
|
|
}
|
|
.width100{
|
|
width:100%;
|
|
}
|
|
</style>
|