Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
c22ff144 by weimo934
Options

style(plzl):增加分页显示

1 parent c4599391
Inline Side-by-side
Showing 2 changed files with 232 additions and 206 deletions
<template>
<div>
<div class="main">
<el-dialog
title="选择宗地"
:visible.sync="isVisible"
width="50%"
@close="close"
:modal-append-to-body="false"
>
>
<div class="search">
<el-button type="primary" @click="search">查询</el-button>
<el-button type="primary" @click="result">重置</el-button>
......@@ -74,9 +74,18 @@
<td>{{item.qlr}}</td>
<td>{{item.zl}}</td>
</tr>
</table>
</div>
<div class="page">
<el-pagination
background
layout="prev, pager, next,total"
:page-size="queryData.pageSize"
:total="total"
@current-change="currentChange"
>
</el-pagination>
</div>
<div class="footer-button">
<el-button type="primary" @click="save">确认</el-button>
<el-button type="primary" @click="close">取消</el-button>
......@@ -94,6 +103,7 @@
name: "cxlzQueryData",
data() {
return {
total: 1,
queryData: {
bdcdyh: "",
bdcqzh: "",
......@@ -102,11 +112,13 @@
qszt: "2",
xmmc: "",
zddm: "",
zl: ""
zl: "",
pageNo: 1,
pageSize: 10,
},
Data: [],
isVisible: false,
zdbsm:''
zdbsm: ''
}
},
props: {
......@@ -132,12 +144,14 @@
created() {
},
methods: {
currentChange: function (val) {
this.queryData.pageNo = val;
this.getData(this.queryData);
},
select: function (val) {
this.zdbsm = val.glbsm
},
save: function () {
zrzcxlz({
zdBsm: this.zdbsm,
zrzBsm: this.zrzbsm
......@@ -157,7 +171,9 @@
qszt: "2",
xmmc: "",
zddm: "",
zl: ""
zl: "",
pageNo: 1,
pageSize: 10,
};
this.getData(this.queryData)
},
......@@ -165,6 +181,7 @@
data['dylxs'] = this.dylxs;
getSearchList(data).then(res => {
this.Data = res.result.records
this.total = res.result.total;
})
},
search: function () {
......@@ -187,10 +204,11 @@
<style scoped lang="less">
.main {
box-sizing: border-box;
/*box-sizing: border-box;*/
padding: 18px;
height: auto;
height: 800px;
width: 80%;
position: absolute;
}
table {
......@@ -226,9 +244,12 @@
color: #b2b2b2;
}
.search {
height: 650px;
}
.footer-button {
text-align: center;
margin-top: 20px;
}
</style>
......
<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
layout="prev, pager, next,total"
:total="total"
@current-change="currentChange"
>
</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 class="page">
<el-pagination
background
layout="prev, pager, next,total"
:page-size="queryData.pageSize"
: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.result.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: 12,
},
Data: [],
dylxs: ["zd"],
};
},
created() {
},
mounted() {
this.getData(this.queryData);
},
methods: {
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: 12,
};
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;
}
.page {
position: fixed;
bottom: 20px;
width: auto;
height: auto;
}
</style>
......