a3845a45 by 杨威

分页显示

1 parent 73b5e427
<template>
<div class="main">
<div class="search">
<el-button type="primary" @click="search">查询</el-button>
<el-button type="primary" @click="result">重置</el-button>
<el-row :gutter="10" class="shop">
<el-col :span="4" class="inputtitle">
宗地编码:
</el-col>
<el-col :span="8" class="">
<el-input v-model="queryData.zddm"></el-input>
</el-col>
<el-col :span="4" class="inputtitle">
不动产权证号:
</el-col>
<el-col :span="8" class="">
<el-input v-model="queryData.bdcqzh"></el-input>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="4" class="inputtitle">
不动产权单元号:
</el-col>
<el-col :span="8">
<el-input v-model="queryData.bdcdyh"></el-input>
</el-col>
<el-col :span="4" class="inputtitle">
权利人:
</el-col>
<el-col :span="8">
<el-input v-model="queryData.qlrmc"></el-input>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="4" class="inputtitle">
坐落:
</el-col>
<el-col :span="8">
<el-input v-model="queryData.zl"></el-input>
</el-col>
</el-row>
<table border="1">
<tr>
<td>序号</td>
<td>操作</td>
<td>宗地代码</td>
<td>不动产单元号</td>
<td>项目名称</td>
<td>不动产权证号</td>
<td>权利人</td>
<td>坐落</td>
</tr>
<tr v-if="Data.length==0">
<td colspan="8">
<span class="noData">暂无数据</span>
</td>
</tr>
<tr v-else v-for="(item,index) in Data" :key="index">
<td>{{index+1}}</td>
<td @click="xzzrz(item)" class="xz">
<span>选择</span>
</td>
<td>{{item.zddm}}</td>
<td>{{item.bdcdyh}}</td>
<td>{{item.xmmc}}</td>
<td>{{item.bdcqzh}}</td>
<td>{{item.qlr}}</td>
<td>{{item.zl}}</td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer">
</span>
<cxlz-query-data :centerDialogVisible="centerDialogVisible" :dylxs="dylxs" @close="close"
:zrzbsm="zrzbsm"></cxlz-query-data>
<div>
<el-pagination
background
@size-change="sizeChange"
@current-change="currentChange"
:current-page.sync="queryData.pageNo"
:page-size="queryData.pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<div class="main">
<div class="search">
<el-button type="primary" @click="search">查询</el-button>
<el-button type="primary" @click="result">重置</el-button>
<el-row :gutter="10" class="shop">
<el-col :span="4" class="inputtitle">
宗地编码:
</el-col>
<el-col :span="8" class="">
<el-input v-model="queryData.zddm"></el-input>
</el-col>
<el-col :span="4" class="inputtitle">
不动产权证号:
</el-col>
<el-col :span="8" class="">
<el-input v-model="queryData.bdcqzh"></el-input>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="4" class="inputtitle">
不动产权单元号:
</el-col>
<el-col :span="8">
<el-input v-model="queryData.bdcdyh"></el-input>
</el-col>
<el-col :span="4" class="inputtitle">
权利人:
</el-col>
<el-col :span="8">
<el-input v-model="queryData.qlrmc"></el-input>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="4" class="inputtitle">
坐落:
</el-col>
<el-col :span="8">
<el-input v-model="queryData.zl"></el-input>
</el-col>
</el-row>
<table border="1">
<tr>
<td>序号</td>
<td>操作</td>
<td>宗地代码</td>
<td>不动产单元号</td>
<td>项目名称</td>
<td>不动产权证号</td>
<td>权利人</td>
<td>坐落</td>
</tr>
<tr v-if="Data.length == 0">
<td colspan="8">
<span class="noData">暂无数据</span>
</td>
</tr>
<tr v-else v-for="(item, index) in Data" :key="index">
<td>{{ index + 1 }}</td>
<td @click="xzzrz(item)" class="xz">
<span>选择</span>
</td>
<td>{{ item.zddm }}</td>
<td>{{ item.bdcdyh }}</td>
<td>{{ item.xmmc }}</td>
<td>{{ item.bdcqzh }}</td>
<td>{{ item.qlr }}</td>
<td>{{ item.zl }}</td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer"> </span>
<cxlz-query-data
:centerDialogVisible="centerDialogVisible"
:dylxs="dylxs"
@close="close"
:zrzbsm="zrzbsm"
></cxlz-query-data>
<div>
<el-pagination
background
layout="prev, pager, next,total"
:total="total"
@current-change="currentChange"
>
</el-pagination>
</div>
</div>
</template>
<script>
import {getSearchList} from './../../../../api/search'
import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData";
import { getSearchList } from "./../../../../api/search";
import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData";
export default {
name: "",
components: {cxlzQueryData},
props: {},
data() {
return {
total: 1,
centerDialogVisible: false,
zrzbsm: "",
queryData: {
bdcdyh: "",
bdcqzh: "",
dylxs: ['zrz'],
qlrmc: "",
qszt: "",
xmmc: "",
zddm: "",
zl: "",
pageNo: 1,
pageSize: 5
},
Data: [],
dylxs: ['zd']
}
},
created() {
},
mounted() {
this.getData(this.queryData)
},
methods: {
sizeChange: function (val) {
console.log(`每页 ${val} 条`);
this.queryData.pageSize = val
},
currentChange: function (val) {
console.log(`当前页: ${val}`);
this.queryData.pageNo = val
this.getData(this.queryData)
},
xzzrz: function (item) {
this.centerDialogVisible = true;
this.zrzbsm = item.glbsm;
},
close: function () {
this.centerDialogVisible = false;
},
result: function () {
this.queryData = {
bdcdyh: "",
bdcqzh: "",
dylxs: ['zrz'],
qlrmc: "",
qszt: "",
xmmc: "",
zddm: "",
zl: "",
pageNo: 1,
pageSize: 10
};
this.getData(this.queryData)
},
getData: function (data) {
getSearchList(data).then(res => {
this.Data = res.result.records
this.total = res.total
})
},
search: function () {
this.getData(this.queryData)
},
},
computed: {},
watch: {},
}
export default {
name: "",
components: { cxlzQueryData },
props: {},
data() {
return {
total: 1,
centerDialogVisible: false,
zrzbsm: "",
queryData: {
bdcdyh: "",
bdcqzh: "",
dylxs: ["zrz"],
qlrmc: "",
qszt: "",
xmmc: "",
zddm: "",
zl: "",
pageNo: 1,
pageSize: 5,
},
Data: [],
dylxs: ["zd"],
};
},
created() {},
mounted() {
this.getData(this.queryData);
},
methods: {
sizeChange: function(val) {
console.log(`每页 ${val} 条`);
this.queryData.pageSize = val;
},
currentChange: function(val) {
console.log(`当前页: ${val}`);
this.queryData.pageNo = val;
this.getData(this.queryData);
},
xzzrz: function(item) {
this.centerDialogVisible = true;
this.zrzbsm = item.glbsm;
},
close: function() {
this.centerDialogVisible = false;
},
result: function() {
this.queryData = {
bdcdyh: "",
bdcqzh: "",
dylxs: ["zrz"],
qlrmc: "",
qszt: "",
xmmc: "",
zddm: "",
zl: "",
pageNo: 1,
pageSize: 10,
};
this.getData(this.queryData);
},
getData: function(data) {
getSearchList(data).then((res) => {
this.Data = res.result.records;
this.total = res.result.total;
});
},
search: function() {
this.getData(this.queryData);
},
},
computed: {},
watch: {},
};
</script>
<style scoped lang="less">
.main {
box-sizing: border-box;
padding: 18px;
height: auto;
width: 80%;
}
.main {
box-sizing: border-box;
padding: 18px;
height: auto;
width: 80%;
}
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
}
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
}
td {
text-align: center;
height: 36px;
min-width: 50px;
}
td {
text-align: center;
height: 36px;
min-width: 50px;
}
table:hover {
cursor: pointer;
}
table:hover {
cursor: pointer;
}
.inputtitle {
line-height: 40px;
}
.inputtitle {
line-height: 40px;
}
.shop {
margin-top: 20px;
}
.shop {
margin-top: 20px;
}
.xz {
color: blue;
}
.xz {
color: blue;
}
.noData {
color: #b2b2b2;
}
.noData {
color: #b2b2b2;
}
</style>
......