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
1 <template> 1 <template>
2 <div> 2 <div class="main">
3 <el-dialog 3 <el-dialog
4 title="选择宗地" 4 title="选择宗地"
5 :visible.sync="isVisible" 5 :visible.sync="isVisible"
6 width="50%" 6 width="50%"
7 @close="close" 7 @close="close"
8 :modal-append-to-body="false" 8 :modal-append-to-body="false"
9 > 9 >
10 <div class="search"> 10 <div class="search">
11 <el-button type="primary" @click="search">查询</el-button> 11 <el-button type="primary" @click="search">查询</el-button>
12 <el-button type="primary" @click="result">重置</el-button> 12 <el-button type="primary" @click="result">重置</el-button>
...@@ -74,9 +74,18 @@ ...@@ -74,9 +74,18 @@
74 <td>{{item.qlr}}</td> 74 <td>{{item.qlr}}</td>
75 <td>{{item.zl}}</td> 75 <td>{{item.zl}}</td>
76 </tr> 76 </tr>
77
78 </table> 77 </table>
79 </div> 78 </div>
79 <div class="page">
80 <el-pagination
81 background
82 layout="prev, pager, next,total"
83 :page-size="queryData.pageSize"
84 :total="total"
85 @current-change="currentChange"
86 >
87 </el-pagination>
88 </div>
80 <div class="footer-button"> 89 <div class="footer-button">
81 <el-button type="primary" @click="save">确认</el-button> 90 <el-button type="primary" @click="save">确认</el-button>
82 <el-button type="primary" @click="close">取消</el-button> 91 <el-button type="primary" @click="close">取消</el-button>
...@@ -94,6 +103,7 @@ ...@@ -94,6 +103,7 @@
94 name: "cxlzQueryData", 103 name: "cxlzQueryData",
95 data() { 104 data() {
96 return { 105 return {
106 total: 1,
97 queryData: { 107 queryData: {
98 bdcdyh: "", 108 bdcdyh: "",
99 bdcqzh: "", 109 bdcqzh: "",
...@@ -102,11 +112,13 @@ ...@@ -102,11 +112,13 @@
102 qszt: "2", 112 qszt: "2",
103 xmmc: "", 113 xmmc: "",
104 zddm: "", 114 zddm: "",
105 zl: "" 115 zl: "",
116 pageNo: 1,
117 pageSize: 10,
106 }, 118 },
107 Data: [], 119 Data: [],
108 isVisible: false, 120 isVisible: false,
109 zdbsm:'' 121 zdbsm: ''
110 } 122 }
111 }, 123 },
112 props: { 124 props: {
...@@ -132,12 +144,14 @@ ...@@ -132,12 +144,14 @@
132 created() { 144 created() {
133 }, 145 },
134 methods: { 146 methods: {
147 currentChange: function (val) {
148 this.queryData.pageNo = val;
149 this.getData(this.queryData);
150 },
135 select: function (val) { 151 select: function (val) {
136 this.zdbsm = val.glbsm 152 this.zdbsm = val.glbsm
137 }, 153 },
138 save: function () { 154 save: function () {
139
140
141 zrzcxlz({ 155 zrzcxlz({
142 zdBsm: this.zdbsm, 156 zdBsm: this.zdbsm,
143 zrzBsm: this.zrzbsm 157 zrzBsm: this.zrzbsm
...@@ -157,7 +171,9 @@ ...@@ -157,7 +171,9 @@
157 qszt: "2", 171 qszt: "2",
158 xmmc: "", 172 xmmc: "",
159 zddm: "", 173 zddm: "",
160 zl: "" 174 zl: "",
175 pageNo: 1,
176 pageSize: 10,
161 }; 177 };
162 this.getData(this.queryData) 178 this.getData(this.queryData)
163 }, 179 },
...@@ -165,6 +181,7 @@ ...@@ -165,6 +181,7 @@
165 data['dylxs'] = this.dylxs; 181 data['dylxs'] = this.dylxs;
166 getSearchList(data).then(res => { 182 getSearchList(data).then(res => {
167 this.Data = res.result.records 183 this.Data = res.result.records
184 this.total = res.result.total;
168 }) 185 })
169 }, 186 },
170 search: function () { 187 search: function () {
...@@ -187,10 +204,11 @@ ...@@ -187,10 +204,11 @@
187 <style scoped lang="less"> 204 <style scoped lang="less">
188 205
189 .main { 206 .main {
190 box-sizing: border-box; 207 /*box-sizing: border-box;*/
191 padding: 18px; 208 padding: 18px;
192 height: auto; 209 height: 800px;
193 width: 80%; 210 width: 80%;
211 position: absolute;
194 } 212 }
195 213
196 table { 214 table {
...@@ -226,9 +244,12 @@ ...@@ -226,9 +244,12 @@
226 color: #b2b2b2; 244 color: #b2b2b2;
227 } 245 }
228 246
247 .search {
248 height: 650px;
249 }
250
229 .footer-button { 251 .footer-button {
230 text-align: center; 252 text-align: center;
231 margin-top: 20px; 253 margin-top: 20px;
232 } 254 }
233
234 </style> 255 </style>
......
1 <template> 1 <template>
2 <div class="main"> 2 <div class="main">
3 <div class="search"> 3 <div class="search">
4 <el-button type="primary" @click="search">查询</el-button> 4 <el-button type="primary" @click="search">查询</el-button>
5 <el-button type="primary" @click="result">重置</el-button> 5 <el-button type="primary" @click="result">重置</el-button>
6 <el-row :gutter="10" class="shop"> 6 <el-row :gutter="10" class="shop">
7 <el-col :span="4" class="inputtitle"> 7 <el-col :span="4" class="inputtitle">
8 宗地编码: 8 宗地编码:
9 </el-col> 9 </el-col>
10 <el-col :span="8" class=""> 10 <el-col :span="8" class="">
11 <el-input v-model="queryData.zddm"></el-input> 11 <el-input v-model="queryData.zddm"></el-input>
12 </el-col> 12 </el-col>
13 <el-col :span="4" class="inputtitle"> 13 <el-col :span="4" class="inputtitle">
14 不动产权证号: 14 不动产权证号:
15 </el-col> 15 </el-col>
16 <el-col :span="8" class=""> 16 <el-col :span="8" class="">
17 <el-input v-model="queryData.bdcqzh"></el-input> 17 <el-input v-model="queryData.bdcqzh"></el-input>
18 </el-col> 18 </el-col>
19 </el-row> 19 </el-row>
20 <el-row :gutter="10"> 20 <el-row :gutter="10">
21 <el-col :span="4" class="inputtitle"> 21 <el-col :span="4" class="inputtitle">
22 不动产权单元号: 22 不动产权单元号:
23 </el-col> 23 </el-col>
24 <el-col :span="8"> 24 <el-col :span="8">
25 <el-input v-model="queryData.bdcdyh"></el-input> 25 <el-input v-model="queryData.bdcdyh"></el-input>
26 </el-col> 26 </el-col>
27 <el-col :span="4" class="inputtitle"> 27 <el-col :span="4" class="inputtitle">
28 权利人: 28 权利人:
29 </el-col> 29 </el-col>
30 <el-col :span="8"> 30 <el-col :span="8">
31 <el-input v-model="queryData.qlrmc"></el-input> 31 <el-input v-model="queryData.qlrmc"></el-input>
32 </el-col> 32 </el-col>
33 </el-row> 33 </el-row>
34 <el-row :gutter="10"> 34 <el-row :gutter="10">
35 <el-col :span="4" class="inputtitle"> 35 <el-col :span="4" class="inputtitle">
36 坐落: 36 坐落:
37 </el-col> 37 </el-col>
38 <el-col :span="8"> 38 <el-col :span="8">
39 <el-input v-model="queryData.zl"></el-input> 39 <el-input v-model="queryData.zl"></el-input>
40 </el-col> 40 </el-col>
41 </el-row> 41 </el-row>
42 <table border="1"> 42 <table border="1">
43 <tr> 43 <tr>
44 <td>序号</td> 44 <td>序号</td>
45 <td>操作</td> 45 <td>操作</td>
46 <td>宗地代码</td> 46 <td>宗地代码</td>
47 <td>不动产单元号</td> 47 <td>不动产单元号</td>
48 <td>项目名称</td> 48 <td>项目名称</td>
49 <td>不动产权证号</td> 49 <td>不动产权证号</td>
50 <td>权利人</td> 50 <td>权利人</td>
51 <td>坐落</td> 51 <td>坐落</td>
52 </tr> 52 </tr>
53 <tr v-if="Data.length == 0"> 53 <tr v-if="Data.length == 0">
54 <td colspan="8"> 54 <td colspan="8">
55 <span class="noData">暂无数据</span> 55 <span class="noData">暂无数据</span>
56 </td> 56 </td>
57 </tr> 57 </tr>
58 <tr v-else v-for="(item, index) in Data" :key="index"> 58 <tr v-else v-for="(item, index) in Data" :key="index">
59 <td>{{ index + 1 }}</td> 59 <td>{{ index + 1 }}</td>
60 <td @click="xzzrz(item)" class="xz"> 60 <td @click="xzzrz(item)" class="xz">
61 <span>选择</span> 61 <span>选择</span>
62 </td> 62 </td>
63 <td>{{ item.zddm }}</td> 63 <td>{{ item.zddm }}</td>
64 <td>{{ item.bdcdyh }}</td> 64 <td>{{ item.bdcdyh }}</td>
65 <td>{{ item.xmmc }}</td> 65 <td>{{ item.xmmc }}</td>
66 <td>{{ item.bdcqzh }}</td> 66 <td>{{ item.bdcqzh }}</td>
67 <td>{{ item.qlr }}</td> 67 <td>{{ item.qlr }}</td>
68 <td>{{ item.zl }}</td> 68 <td>{{ item.zl }}</td>
69 </tr> 69 </tr>
70 </table> 70 </table>
71 </div> 71 </div>
72 <span slot="footer" class="dialog-footer"> </span> 72 <span slot="footer" class="dialog-footer"> </span>
73 <cxlz-query-data 73 <cxlz-query-data
74 :centerDialogVisible="centerDialogVisible" 74 :centerDialogVisible="centerDialogVisible"
75 :dylxs="dylxs" 75 :dylxs="dylxs"
76 @close="close" 76 @close="close"
77 :zrzbsm="zrzbsm" 77 :zrzbsm="zrzbsm"
78 ></cxlz-query-data> 78 ></cxlz-query-data>
79 <div> 79 <div class="page">
80 <el-pagination 80 <el-pagination
81 background 81 background
82 layout="prev, pager, next,total" 82 layout="prev, pager, next,total"
83 :total="total" 83 :page-size="queryData.pageSize"
84 @current-change="currentChange" 84 :total="total"
85 > 85 @current-change="currentChange"
86 </el-pagination> 86 >
87 </div> 87 </el-pagination>
88 </div> 88 </div>
89 </div>
89 </template> 90 </template>
90 91
91 <script> 92 <script>
92 import { getSearchList } from "./../../../../api/search"; 93 import {getSearchList} from "./../../../../api/search";
93 import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData"; 94 import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData";
94 95
95 export default { 96 export default {
96 name: "", 97 name: "",
97 components: { cxlzQueryData }, 98 components: {cxlzQueryData},
98 props: {}, 99 props: {},
99 data() { 100 data() {
100 return { 101 return {
101 total: 1, 102 total: 1,
102 centerDialogVisible: false, 103 centerDialogVisible: false,
103 zrzbsm: "", 104 zrzbsm: "",
104 queryData: { 105 queryData: {
105 bdcdyh: "", 106 bdcdyh: "",
106 bdcqzh: "", 107 bdcqzh: "",
107 dylxs: ["zrz"], 108 dylxs: ["zrz"],
108 qlrmc: "", 109 qlrmc: "",
109 qszt: "", 110 qszt: "",
110 xmmc: "", 111 xmmc: "",
111 zddm: "", 112 zddm: "",
112 zl: "", 113 zl: "",
113 pageNo: 1, 114 pageNo: 1,
114 pageSize: 5, 115 pageSize: 12,
115 }, 116 },
116 Data: [], 117 Data: [],
117 dylxs: ["zd"], 118 dylxs: ["zd"],
118 }; 119 };
119 }, 120 },
120 created() {}, 121 created() {
121 mounted() { 122 },
122 this.getData(this.queryData); 123 mounted() {
123 }, 124 this.getData(this.queryData);
124 methods: { 125 },
125 sizeChange: function(val) { 126 methods: {
126 console.log(`每页 ${val} 条`); 127 currentChange: function (val) {
127 this.queryData.pageSize = val; 128 console.log(`当前页: ${val}`);
128 }, 129 this.queryData.pageNo = val;
129 currentChange: function(val) { 130 this.getData(this.queryData);
130 console.log(`当前页: ${val}`); 131 },
131 this.queryData.pageNo = val; 132 xzzrz: function (item) {
132 this.getData(this.queryData); 133 this.centerDialogVisible = true;
133 }, 134 this.zrzbsm = item.glbsm;
134 xzzrz: function(item) { 135 },
135 this.centerDialogVisible = true; 136 close: function () {
136 this.zrzbsm = item.glbsm; 137 this.centerDialogVisible = false;
137 }, 138 },
138 close: function() { 139 result: function () {
139 this.centerDialogVisible = false; 140 this.queryData = {
140 }, 141 bdcdyh: "",
141 result: function() { 142 bdcqzh: "",
142 this.queryData = { 143 dylxs: ["zrz"],
143 bdcdyh: "", 144 qlrmc: "",
144 bdcqzh: "", 145 qszt: "",
145 dylxs: ["zrz"], 146 xmmc: "",
146 qlrmc: "", 147 zddm: "",
147 qszt: "", 148 zl: "",
148 xmmc: "", 149 pageNo: 1,
149 zddm: "", 150 pageSize: 12,
150 zl: "", 151 };
151 pageNo: 1, 152 this.getData(this.queryData);
152 pageSize: 10, 153 },
153 }; 154 getData: function (data) {
154 this.getData(this.queryData); 155 getSearchList(data).then((res) => {
155 }, 156 this.Data = res.result.records;
156 getData: function(data) { 157 this.total = res.result.total;
157 getSearchList(data).then((res) => { 158 });
158 this.Data = res.result.records; 159 },
159 this.total = res.result.total; 160 search: function () {
160 }); 161 this.getData(this.queryData);
161 }, 162 },
162 search: function() { 163 },
163 this.getData(this.queryData); 164 computed: {},
164 }, 165 watch: {},
165 }, 166 };
166 computed: {},
167 watch: {},
168 };
169 </script> 167 </script>
170 <style scoped lang="less"> 168 <style scoped lang="less">
171 .main { 169 .main {
172 box-sizing: border-box; 170 box-sizing: border-box;
173 padding: 18px; 171 padding: 18px;
174 height: auto; 172 height: auto;
175 width: 80%; 173 width: 80%;
176 } 174 }
177 175
178 table { 176 table {
179 margin-top: 10px; 177 margin-top: 10px;
180 background-color: #fff; 178 background-color: #fff;
181 font-size: 14px; 179 font-size: 14px;
182 width: 100%; 180 width: 100%;
183 } 181 }
184 182
185 td { 183 td {
186 text-align: center; 184 text-align: center;
187 height: 36px; 185 height: 36px;
188 min-width: 50px; 186 min-width: 50px;
189 } 187 }
190 188
191 table:hover { 189 table:hover {
192 cursor: pointer; 190 cursor: pointer;
193 } 191 }
194 192
195 .inputtitle { 193 .inputtitle {
196 line-height: 40px; 194 line-height: 40px;
197 } 195 }
198 196
199 .shop { 197 .shop {
200 margin-top: 20px; 198 margin-top: 20px;
201 } 199 }
202 200
203 .xz { 201 .xz {
204 color: blue; 202 color: blue;
205 } 203 }
206 204
207 .noData { 205 .noData {
208 color: #b2b2b2; 206 color: #b2b2b2;
209 } 207 }
208
209 .page {
210 position: fixed;
211 bottom: 20px;
212 width: auto;
213 height: auto;
214 }
210 </style> 215 </style>
......