| <!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"/> | 
|     <!-- 本框架基本脚本和样式 --> | 
|     <script type="text/javascript" | 
|             th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> | 
|     <script type="text/javascript" | 
|             th:src="@{/js/systools/MBase.js}"></script> | 
|     <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> | 
|     <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="@{/js/systools/MJsBase.js}"></script> | 
| </head> | 
| <body class="container-fluid"> | 
| <div id="app" class="pd-10"> | 
|     <!-- 搜索框部分start --> | 
|     <div class="row form-head"> | 
|         <form class="form-inline" id="serchform"> | 
|         </form> | 
|     </div> | 
|   | 
|     <div class="row mt-10" style="padding: 20px;"> | 
|         <el-table ref="multipleTable" :data="tableData" border style="width: 100%"> | 
|             <el-table-column type="selection" width="55"> | 
|             </el-table-column> | 
|             <el-table-column type="expand"> | 
|                 <template slot-scope="props"> | 
|                     <el-form label-position="left" inline class="demo-table-expand"> | 
|                         <el-form-item v-for="(item, index) in props.row.salonAttr" :label="item.attrName"> | 
|                             <span>{{ item.attrValue }}</span> | 
|                         </el-form-item> | 
|                     </el-form> | 
|                 </template> | 
|             </el-table-column> | 
|             <el-table-column prop="shopName" label="门店"></el-table-column> | 
|             <el-table-column prop="createTime" label="报名时间"></el-table-column> | 
|             <el-table-column prop="nickName" label="会员名称"></el-table-column> | 
|             <el-table-column prop="phone" label="联系电话"></el-table-column> | 
|             <el-table-column prop="status" :formatter="statusFormatter" label="报名状态"></el-table-column> | 
|             <el-table-column prop="status" label="操作"> | 
|                 <template slot-scope="scope"> | 
|                     <el-button type="text" size="small" @click="verifyStatus(scope.row.id, 2)">报名通过</el-button> | 
|                     <el-button type="text" size="small" @click="verifyStatus(scope.row.id, 3)">报名不通过</el-button> | 
|                 </template> | 
|             </el-table-column> | 
|         </el-table> | 
|   | 
|         <el-pagination | 
|                 @size-change="handleSizeChange" | 
|                 @current-change="handleCurrentChange" | 
|                 :current-page="pageVo.pageNum" | 
|                 :page-sizes="[10, 20, 30, 50]" | 
|                 :page-size="pageVo.limit" | 
|                 layout="total, sizes, prev, pager, next, jumper" | 
|                 :total="pageVo.total"> | 
|         </el-pagination> | 
|     </div> | 
| </div> | 
| <script type="text/javascript"> | 
|     var vue = new Vue({ | 
|         el: "#app", | 
|         data: { | 
|             id: "", | 
|             tableData: [], | 
|             pageVo: { | 
|                 pageNum : 1, | 
|                 offset: 0, | 
|                 limit: 10, | 
|                 total: 0 | 
|             } | 
|         }, | 
|         created: function () { | 
|             var id = $.query.get("id"); | 
|             this.id = id; | 
|             this.initTableData(id, this.pageVo.limit, this.pageVo.offset); | 
|         }, | 
|         methods: { | 
|             initTableData: function (id, limit, offset) { | 
|                 var _this = this; | 
|                 var data = {}; | 
|                 data.offset = offset; | 
|                 data.limit = limit; | 
|                 data.actId = id; | 
|                 AjaxProxy.requst({ | 
|                     app: _this, | 
|                     data: data, | 
|                     url: basePath + '/admin/shopActivitiesSalon/findSalonRecord', | 
|                     callback: function (data) { | 
|                         _this.pageVo.total = data.total; | 
|                         for (var i = 0, length = data.rows.length; i < length; i++) { | 
|                             _this.tableData = []; | 
|                             _this.tableData.push(data.rows[i]); | 
|                         } | 
|                         console.log(data); | 
|                     } | 
|                 }) | 
|             }, | 
|             statusFormatter: function (row, column) { | 
|                 switch (row.status) { | 
|                     case 1 : | 
|                         return "报名中"; | 
|                     case 2 : | 
|                         return "报名通过"; | 
|                     case 3: | 
|                         return "报名不通过"; | 
|                     default: | 
|                         return "-"; | 
|                 } | 
|             }, | 
|             handleCurrentChange: function (val) { | 
|                 console.log("handleCurrentChange", val); | 
|                 this.pageVo.offset = (val - 1) * this.pageVo.limit; | 
|                 this.pageVo.pageNum = val; | 
|                 this.initTableData(this.id, this.pageVo.limit, this.pageVo.offset); | 
|             }, | 
|             handleSizeChange: function (val) { | 
|                 console.log("handleSizeChange", val); | 
|                 this.pageVo.limit = val; | 
|                 this.initTableData(this.id, this.pageVo.limit, this.pageVo.offset); | 
|             }, | 
|             verifyStatus: function (id, val) { | 
|                 var _this = this; | 
|                 $.AjaxProxy().invoke(basePath + '/admin/shopActivitiesSalon/verifyStatus/' + id + "/" + val, function (loj) { | 
|                     _this.initTableData(_this.id, _this.pageVo.limit, _this.pageVo.offset); | 
|                 }) | 
|             } | 
|         } | 
|     }); | 
| </script> | 
| </body> | 
| </html> |