5.7总结

今天完成了五一极限测试最后一部分------将政策的分类用树状结构展示出来，执行对应的查询（其本质就是在条件查询的基础上，通过该组件按钮，多加了一个条件进行查询，其中还需要在分页功能上有所体现）

代码量：300

遇到的困难：

①不懂如何获取树形控件对应的key值（也就是在点击控件中的不同按钮，得到对应的key）

②分页功能不太熟练（使用Mybatis自带的PageHelper插件完成了分页的操作）

前端vue的代码

  1 <template>
  2   <el-container>
  3 
  4   <div style="background-color:  #f7eaea;">
  5     
  6       <!-- //头部 -->
  7     <div class="container" >
  8       <div class="content">
  9         <img src="/img/LOGO.png" alt="image" class="image" style="display: inline-block;">
 10         &nbsp;
 11         &nbsp;
 12         <p class="text" style="display: inline-block; vertical-align: top;">科技政策查询系统</p>
 13       </div>
 14     </div>
 15     <!-- //头部 -->
 16   
 17   <el-container>
 18     <!-- //side -->
 19     <el-aside width="160px" >
 20 
 21       <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" node-key="id" ></el-tree>
 22 
 23     </el-aside>
 24 
 25 
 26 
 27     <!-- //main -->
 28     
 29     <el-main>
 30 
 31       <el-row style="display: flex;">
 32         <el-col :span="6">
 33           <el-input v-model="chaxun.name" placeholder="政策名称"></el-input>
 34         </el-col>
 35         &nbsp;
 36         <el-col :span="6">
 37           <el-input v-model="chaxun.document" placeholder="发文字号"></el-input>
 38         </el-col>
 39         &nbsp;
 40         <el-col :span="6">
 41           <el-input v-model="chaxun.organ" placeholder="发布机构"></el-input>
 42         </el-col>
 43         &nbsp;
 44         <el-col :span="6">
 45           <el-input v-model="chaxun.text" placeholder="全文检索"></el-input>
 46         </el-col>
 47         &nbsp;
 48         <el-col :span="6">
 49           <el-button type="primary" @click="handleSearch">查询</el-button>
 50         </el-col>
 51       </el-row>
 52 
 53 
 54       <div class="form-container">
 55         <el-table :data="nowData" border style="width: 100%" class="responsive-table" >
 56           <el-table-column fixed prop="name" label="政策名称" width="250">
 57           </el-table-column>
 58           <el-table-column prop="organ" label="发文机构" width="250">
 59           </el-table-column>
 60           <el-table-column prop="pubdata" label="发布日期" width="250">
 61           </el-table-column>
 62           <el-table-column prop="type" label="政策分类" width="250">
 63           </el-table-column>
 64     
 65           <el-table-column label="操作" width="150">
 66             <template slot-scope="scope">
 67               <el-button @click="handleClick(scope)" type="text" size="small">
 68                 <i class="el-icon-view"></i> 查看
 69               </el-button>
 70             </template>
 71           </el-table-column>
 72         </el-table>
 73         </div>
 74 
 75     </el-main>
 76 
 77 
 78     
 79   </el-container>
 80 
 81 
 82   
 83     <div>
 84       
 85 
 86 
 87     
 88 
 89       <!-- <el-col :span="6">
 90         <el-tree :props="props" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange">
 91         </el-tree>
 92       </el-col> -->
 93 
 94 
 95 
 96 
 97       <!-- <el-container>
 98         <el-aside width="200px">Aside</el-aside>
 99         <el-container>
100           <el-header>Header</el-header>
101           <el-main>Main</el-main>
102           <el-footer>Footer</el-footer>
103         </el-container>
104       </el-container> -->
105 
106 
107       <el-dialog title="政策详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
108         <!-- <span>{{todayText}}</span> -->
109         <div v-if="dialogVisible">
110           <div v-html="todayText"></div>
111         </div>
112         <span slot="footer" class="dialog-footer">
113           <el-button @click="dialogVisible = false">取 消</el-button>
114           <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
115         </span>
116       </el-dialog>
117 
118 
119 
120 
121 
122       
123       <!-- //main -->
124 
125     </div>
126 
127 
128 
129       <!-- //main -->
130 
131 
132     <!-- //footer -->
133     <!-- 分页 -->
134     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
135       :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
136       :total="total">
137     </el-pagination>
138     <div style="text-align: center; margin-top: 20px; color: #888;">
139       Copyright 1996-2022 All Rights Reserved 版权所有：河北省科学技术情报研究院 河北省科技创新战略研究院 技术支持：河北省科技信息处理实验室
140     </div>
141   </div>
142   <!-- //footer -->
143 </el-container>
144 </template>
145 
146 <script>
147   import axios from 'axios'
148   export default {
149     data() {
150 
151       return {
152 
153 
154         okName:'',
155         count:0,
156         // //树形结构
157         // props: {
158         //   label: 'type',
159         //   // children: 'zones'
160         // },
161         // count: 1,
162 
163 
164         treeData: [], // 用来存储从后端获取的树形数据
165       defaultProps: {
166         id:'',
167         children: 'children',
168         label: 'name'
169       },
170 
171 
172 
173         tableData: [], //保存全部数据
174         nowData: [], //当前页数据
175         todayText: '',
176         dialogVisible: false,
177         dialogVisible1: false, //用来控制展示html标签
178         currentPage: 1,
179         pageSize: 10,
180         total: 0,
181         item: {
182           id: '',
183           name: '',
184           organ: '',
185           pubdata: '',
186           type: '',
187           text: '',
188           document: ''
189         },
190         chaxun: {
191           name: '',
192           document: '',
193           organ: '',
194           text: ''
195         }
196       }
197     },
198     // created() {
199     //   this.fetchData();
200 
201     // },
202     mounted() {
203       this.getFormData();
204       this.fetchDepartmentTree();
205       // console.log(this.nowData);
206     },
207 
208     methods: {
209 
210       fetchDepartmentTree() {
211       // this.$http.get('/api/type/getTree')
212       //   .then(response => {
213       //     this.treeData = response.data;
214       //     alert("ok");
215       //   })
216       //   .catch(error => {
217       //     console.error(error);
218       //   });
219       //先在tree中获取到所有的type分类
220       axios.get("http://localhost:8080/api/type/getTree").then((result) => {
221         this.treeData=result.data.data;
222         console.log(result.data.data);
223       })
224       
225     },
226     //直接通过data就可以获取本行的id，这是element自带的
227     handleNodeClick(data) {
228       // 这里可以添加你的逻辑，例如导航到不同的页面或者执行某个操作
229       
230       //console.log(data.id);
231       axios.get("http://localhost:8080/policy/select?type="+data.name).then((result) => {
232         this.nowData = result.data.data.rows;
233         this.total = result.data.data.total;
234         this.okName=data.name;
235         console.log(result.data.data);
236       })
237     },
238 
239       
240       // //树形结构
241       // handleCheckChange(data, checked, indeterminate) {
242       //   console.log(data, checked, indeterminate);
243          
244       // },
245       // handleNodeClick(data) {
246       //   console.log(data);
247       //   alert("ok");
248       // },
249       // loadNode(node, resolve) {
250       //   if (node.level === 0) {
251       //     return resolve([{ name: 'region1' }, { name: 'region2' }]);
252       //   }
253       //   if (node.level > 3) return resolve([]);
254 
255       //   var hasChild;
256       //   if (node.data.name === 'region1') {
257       //     hasChild = true;
258       //   } else if (node.data.name === 'region2') {
259       //     hasChild = false;
260       //   } else {
261       //     hasChild = Math.random() > 0.5;
262       //   }
263 
264       //   setTimeout(() => {
265       //     var data;
266       //     if (hasChild) {
267       //       data = [{
268       //         name: 'zone' + this.count++
269       //       }, {
270       //         name: 'zone' + this.count++
271       //       }];
272       //     } else {
273       //       data = [];
274       //     }
275 
276       //     resolve(data);
277       //   }, 500);
278       // },
279 
280 
281 
282 
283 
284 
285 
286 
287       //获取所有的文件信息
288       fetchData() {
289         axios.get("http://localhost:8080/policy/select", this.item).then((result) => {
290           this.tableData = result.data.data;
291           this.nowData = result.data.data.rows;
292           console.log(this.nowData);
293         });
294       },
295       //获取当前行的政策的详细信息
296       handleClick(scope) {
297         axios.get("http://localhost:8080/policy/getText/" + scope.row.id).then((result) => {
298           console.log(result.data);
299           this.todayText = scope.row.text;
300           console.log("todayText" + this.todayText);
301         })
302         this.dialogVisible1 = true;
303         this.dialogVisible = true;
304 
305       },
306       //条件查询
307       handleSearch() {
308         axios.get("http://localhost:8080/policy/select?name=" + this.chaxun.name + "&document=" + this.chaxun.document +
309           "&organ=" + this.chaxun.organ + "&text=" + this.chaxun.text+"&type="+this.okName).then((result) => {
310           this.nowData = result.data.data.rows;
311           this.total = result.data.data.total;
312           console.log(result.data.data);
313         })
314       },
315       //获取当前页信息
316       getFormData() {
317         // axios.get('http://localhost:8080/policy/select', {
318         //   params: {
319         //     page: this.currentPage ,
320         //     size: this.pageSize
321         //   }
322         // }).then(response => {
323         //   this.nowData = response.data.rows;
324         //   this.total = response.data.totalElements;
325         //   console.log(this.total);
326         // }).catch(error => {
327         //   console.error(error);
328         // });
329         axios.get("http://localhost:8080/policy/select?page=" + this.currentPage + "&pageSize=" + this.pageSize+"&type="+this.okName).then((
330           result) => {
331           this.nowData = result.data.data.rows;
332           this.total = result.data.data.total;
333           console.log(this.total);
334           console.log(this.nowData);
335           
336         })
337       },
338       //改变size
339       handleSizeChange(size) {
340         this.pageSize = size;
341         this.getFormData();
342       },
343       //改变当前页
344       handleCurrentChange(page) {
345         this.currentPage = page;
346         this.getFormData();
347       }
348     }
349   }
350 </script>
351 <style>
352   .container {
353     display: flex;
354     justify-content: center;
355     align-items: center;
356     height: 100px;
357   }
358 
359   .content {
360     text-align: center;
361   }
362 
363   .image {
364     width: 100px;
365     /* 设置图片宽度 */
366     height: 100px;
367     /* 设置图片高度 */
368   }
369 
370   .text {
371     font-size: 30px;
372     /* 设置文字大小 */
373   }
374   .container {
375   display: flex;
376 }
377 
378 .tree-container {
379   flex: 1; /* Take up remaining space */
380   padding: 20px; /* Add padding for spacing */
381 }
382 
383 .form-container {
384   flex: 1; /* Take up remaining space */
385   padding: 20px; /* Add padding for spacing */
386 }
387 .el-header, .el-footer {
388     background-color: #B3C0D1;
389     color: #333;
390     text-align: center;
391     line-height: 5px;
392   }
393   
394   .el-aside {
395     background-color: #D3DCE6;
396     color: #333;
397     text-align: center;
398     line-height: 20px;
399   }
400   
401   .el-main {
402     background-color: #E9EEF3;
403     color: #333;
404     text-align: center;
405     line-height: 100px;
406   }
407   
408   body > .el-container {
409     margin-bottom: 40px;
410   }
411   
412   .el-container:nth-child(5) .el-aside,
413   .el-container:nth-child(6) .el-aside {
414     line-height: 260px;
415   }
416   
417   .el-container:nth-child(7) .el-aside {
418     line-height: 320px;
419   }
420 </style>