a3845a45 by 杨威

分页显示

1 parent 73b5e427
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 70 </table>
71 </table> 71 </div>
72 </div> 72 <span slot="footer" class="dialog-footer"> </span>
73 <span slot="footer" class="dialog-footer"> 73 <cxlz-query-data
74 </span> 74 :centerDialogVisible="centerDialogVisible"
75 <cxlz-query-data :centerDialogVisible="centerDialogVisible" :dylxs="dylxs" @close="close" 75 :dylxs="dylxs"
76 :zrzbsm="zrzbsm"></cxlz-query-data> 76 @close="close"
77 <div> 77 :zrzbsm="zrzbsm"
78 <el-pagination 78 ></cxlz-query-data>
79 background 79 <div>
80 @size-change="sizeChange" 80 <el-pagination
81 @current-change="currentChange" 81 background
82 :current-page.sync="queryData.pageNo" 82 layout="prev, pager, next,total"
83 :page-size="queryData.pageSize" 83 :total="total"
84 layout="total, prev, pager, next" 84 @current-change="currentChange"
85 :total="total"> 85 >
86 </el-pagination> 86 </el-pagination>
87 </div> 87 </div>
88 88 </div>
89 </div>
90 </template> 89 </template>
91 90
92 <script> 91 <script>
93 import {getSearchList} from './../../../../api/search' 92 import { getSearchList } from "./../../../../api/search";
94 import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData"; 93 import cxlzQueryData from "../../../../components/cxlxQueryData/cxlzQueryData";
95 94
96 export default { 95 export default {
97 name: "", 96 name: "",
98 components: {cxlzQueryData}, 97 components: { cxlzQueryData },
99 props: {}, 98 props: {},
100 data() { 99 data() {
101 return { 100 return {
102 total: 1, 101 total: 1,
103 centerDialogVisible: false, 102 centerDialogVisible: false,
104 zrzbsm: "", 103 zrzbsm: "",
105 queryData: { 104 queryData: {
106 bdcdyh: "", 105 bdcdyh: "",
107 bdcqzh: "", 106 bdcqzh: "",
108 dylxs: ['zrz'], 107 dylxs: ["zrz"],
109 qlrmc: "", 108 qlrmc: "",
110 qszt: "", 109 qszt: "",
111 xmmc: "", 110 xmmc: "",
112 zddm: "", 111 zddm: "",
113 zl: "", 112 zl: "",
114 pageNo: 1, 113 pageNo: 1,
115 pageSize: 5 114 pageSize: 5,
116 }, 115 },
117 Data: [], 116 Data: [],
118 dylxs: ['zd'] 117 dylxs: ["zd"],
119 } 118 };
120 }, 119 },
121 created() { 120 created() {},
122 }, 121 mounted() {
123 mounted() { 122 this.getData(this.queryData);
124 this.getData(this.queryData) 123 },
125 }, 124 methods: {
126 methods: { 125 sizeChange: function(val) {
127 sizeChange: function (val) { 126 console.log(`每页 ${val} 条`);
128 console.log(`每页 ${val} 条`); 127 this.queryData.pageSize = val;
129 this.queryData.pageSize = val 128 },
130 }, 129 currentChange: function(val) {
131 currentChange: function (val) { 130 console.log(`当前页: ${val}`);
132 console.log(`当前页: ${val}`); 131 this.queryData.pageNo = val;
133 this.queryData.pageNo = val 132 this.getData(this.queryData);
134 this.getData(this.queryData) 133 },
135 }, 134 xzzrz: function(item) {
136 xzzrz: function (item) { 135 this.centerDialogVisible = true;
137 this.centerDialogVisible = true; 136 this.zrzbsm = item.glbsm;
138 this.zrzbsm = item.glbsm; 137 },
139 }, 138 close: function() {
140 close: function () { 139 this.centerDialogVisible = false;
141 this.centerDialogVisible = false; 140 },
142 }, 141 result: function() {
143 result: function () { 142 this.queryData = {
144 this.queryData = { 143 bdcdyh: "",
145 bdcdyh: "", 144 bdcqzh: "",
146 bdcqzh: "", 145 dylxs: ["zrz"],
147 dylxs: ['zrz'], 146 qlrmc: "",
148 qlrmc: "", 147 qszt: "",
149 qszt: "", 148 xmmc: "",
150 xmmc: "", 149 zddm: "",
151 zddm: "", 150 zl: "",
152 zl: "", 151 pageNo: 1,
153 pageNo: 1, 152 pageSize: 10,
154 pageSize: 10 153 };
155 }; 154 this.getData(this.queryData);
156 this.getData(this.queryData) 155 },
157 }, 156 getData: function(data) {
158 getData: function (data) { 157 getSearchList(data).then((res) => {
159 getSearchList(data).then(res => { 158 this.Data = res.result.records;
160 this.Data = res.result.records 159 this.total = res.result.total;
161 this.total = res.total 160 });
162 }) 161 },
163 }, 162 search: function() {
164 search: function () { 163 this.getData(this.queryData);
165 this.getData(this.queryData) 164 },
166 }, 165 },
167 }, 166 computed: {},
168 computed: {}, 167 watch: {},
169 watch: {}, 168 };
170 }
171 </script> 169 </script>
172 <style scoped lang="less"> 170 <style scoped lang="less">
173 .main { 171 .main {
174 box-sizing: border-box; 172 box-sizing: border-box;
175 padding: 18px; 173 padding: 18px;
176 height: auto; 174 height: auto;
177 width: 80%; 175 width: 80%;
178 } 176 }
179 177
180 table { 178 table {
181 margin-top: 10px; 179 margin-top: 10px;
182 background-color: #fff; 180 background-color: #fff;
183 font-size: 14px; 181 font-size: 14px;
184 width: 100%; 182 width: 100%;
185 } 183 }
186 184
187 td { 185 td {
188 text-align: center; 186 text-align: center;
189 height: 36px; 187 height: 36px;
190 min-width: 50px; 188 min-width: 50px;
191 } 189 }
192 190
193 table:hover { 191 table:hover {
194 cursor: pointer; 192 cursor: pointer;
195 } 193 }
196 194
197 .inputtitle { 195 .inputtitle {
198 line-height: 40px; 196 line-height: 40px;
199 } 197 }
200 198
201 .shop { 199 .shop {
202 margin-top: 20px; 200 margin-top: 20px;
203 } 201 }
204 202
205 .xz { 203 .xz {
206 color: blue; 204 color: blue;
207 } 205 }
208 206
209 .noData { 207 .noData {
210 color: #b2b2b2; 208 color: #b2b2b2;
211 } 209 }
212 </style> 210 </style>
......