| <!DOCTYPE HTML> | 
| <html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> | 
| <head> | 
|     <meta charset="utf-8"> | 
|     <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> | 
|     <meta name="renderer" content="webkit|ie-comp|ie-stand"> | 
|     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 
|     <meta name="viewport" | 
|           content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> | 
|     <meta http-equiv="Cache-Control" content="no-siteapp"/> | 
|     <LINK rel="Bookmark" href="../images/favicon.ico"> | 
|     <!-- 本框架基本脚本和样式 --> | 
|     <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script> | 
|     <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> | 
|     <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/> | 
|     <title></title> | 
|     <style> | 
|         .panel-body{ | 
|             overflow: hidden; | 
|         } | 
|         .buttonPanel{ | 
|             background: #ffffff; | 
|             padding: 10px 10px ; | 
|             margin: 0px 0px 10px 0px; | 
|         } | 
|         .rowPanel{ | 
|             background: #ffffff; | 
|             padding: 0px 10px ; | 
|             padding-top: 10px; | 
|             margin: 0px 0px 10px 0px; | 
|         } | 
|         .paginationStyle{ | 
|             background: #ffffff; | 
|             padding: 10px 10px; | 
|             margin: 0px 0px 10px 0px; | 
|             text-align: right; | 
|         } | 
|     </style> | 
| </head> | 
| <body> | 
| <div class="panel-body" id="app"> | 
|   | 
|     <el-row class="table-style"  > | 
|   | 
|         <el-table id="proj" :data="table.rows"  :height="height" stripe @sort-change="sortChange"> | 
|             <el-table-column | 
|                     prop="vipName" | 
|                     label="客户名称" | 
|                     width="180"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="staffName" | 
|                     label="员工名称"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="orderAbstract" | 
|                     label="订单摘要信息" | 
|                     show-overflow-tooltip | 
|                     width="240"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="content" | 
|                     label="跟进内容" | 
|                     show-overflow-tooltip | 
|                     width="340"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="createTime" | 
|                     label="填写时间" | 
|                     width="180"> | 
|             </el-table-column> | 
|   | 
|             <el-table-column | 
|                     prop="nextNotifyTime" | 
|                     label="下次跟进时间"> | 
|             </el-table-column> | 
|             <el-table-column label="效果图片"> | 
|                 <template slot-scope="scope"> | 
|                     <el-image | 
|                             style="width: 100px; height: 100px" | 
|                             :src="scope.row.showImg" | 
|                             :preview-src-list="scope.row.imgList"> | 
|                     </el-image> | 
|   | 
|                 </template> | 
|             </el-table-column> | 
|         </el-table> | 
|     </el-row> | 
|     <el-row class="paginationStyle"  > | 
|         <el-pagination background | 
|                        @size-change="changePageSize" | 
|                        @current-change="changeCurrentPage" | 
|                        :current-page="table.currentPage" | 
|                        :page-sizes="[10, 20, 30, 50]" | 
|                        :page-size="table.pageSize" | 
|                        layout="total, sizes, prev, pager, next, jumper" | 
|                        :total="table.total"> | 
|         </el-pagination> | 
|     </el-row> | 
|   | 
| </div> | 
| </body> | 
| <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> | 
| <script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script> | 
| <script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script> | 
| <script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script> | 
| <script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script> | 
| <script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script> | 
| <script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script> | 
| <script type="text/javascript" th:inline="javascript"> | 
|   | 
|     var vipId = $.query.get('vipId'); | 
|   | 
|     var vue = new Vue({ | 
|         el: '#app', | 
|         data: { | 
|             table:{ | 
|                 rows:[], | 
|                 total:0, | 
|                 pageSize:10, | 
|                 currentPage:1, | 
|             }, | 
|             form:{ | 
|                 vipId:vipId, | 
|                 order:'', | 
|                 sort:'' | 
|             }, | 
|             height:'calc(100vh - 240px)', | 
|         }, | 
|         created: function () { | 
|   | 
|             let _this=this; | 
|            this.loadData(); | 
|             window.addEventListener("keydown", this.keydown); | 
|   | 
|         }, | 
|         methods: { | 
|             changePageSize(val) { | 
|                 this.table.pageSize = val; | 
|                 this.loadData(); | 
|             }, | 
|             changeCurrentPage(val) { | 
|                 this.table.currentPage = val; | 
|                 this.loadData(); | 
|             }, | 
|             resetForm(formName) { | 
|                 this.$refs[formName].resetFields(); | 
|             }, | 
|             sortChange:function (column){ | 
|                 if(column.order){ | 
|                     if(column.order.indexOf("desc")){ | 
|                         this.form.order="desc"; | 
|                     }else{ | 
|                         this.form.order="asc"; | 
|                     } | 
|                     this.form.sort=column.prop; | 
|                     this.loadData(); | 
|                 } | 
|             }, | 
|             loadData:function(){ | 
|                 let _this = this; | 
|                 let data=_this.getRequestParam(); | 
|                 data.limit=_this.table.pageSize; | 
|                 data.offset=_this.table.pageSize*(_this.table.currentPage-1); | 
|                 AjaxProxy.requst({ | 
|                     app: _this, | 
|                     data:data, | 
|                     url: basePath + '/admin/followu/showList', | 
|                     callback: function (data) { | 
|                         data.rows.forEach(e=>{ | 
|                            e.showImg= e.albums[0].img; | 
|                            e.imgList=[]; | 
|                            e.albums.forEach(album=>{ | 
|                                e.imgList.push(album.img); | 
|                            }) | 
|                         }) | 
|                         _this.table.rows = data.rows; | 
|                         _this.table.total=data.total; | 
|                     } | 
|                 }); | 
|             }, | 
|             getRequestParam(){ | 
|                 let _this = this; | 
|                 return   { | 
|                     vipId:_this.form.vipId, | 
|                     order:_this.form.order, | 
|                     sort:_this.form.sort | 
|   | 
|                 } | 
|             }, | 
|             search:function(){ | 
|                 this.table.currentPage=1; | 
|                 this.loadData(); | 
|             }, | 
|             keydown(evt){ | 
|                 if(evt.keyCode==13) { | 
|                     this.search(); | 
|                 } | 
|             }, | 
|         } | 
|     }); | 
|   | 
|   | 
| </script> | 
| </body> | 
| </html> |