1
xiaoyong931011
2022-03-25 1ceabefb451912daa5dda7768b7ef0b89a56c08a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!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>