<!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> 
 |