Kirin
/
shenying


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html>
<head>
    <title>{$title|default=''} - {$powered|default=''}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <style>
        body {
            background-color: #f3f3f4;
            margin-top: 10px;
        }
        .centered {
            text-align: center;
        }
        .centered button {
            width: 200px;
            height: 60px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15" id="app" v-cloak="">
        <div class="layui-card">
            <div class="centered">
                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="100%"></div>
                </div>
            </div>
            <div class="layui-card-header">升级系统</div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <p style="font-size: 18px;">版本更迭: <span style="color: red">{$version_now} - {$version_new}</span></p>
                    <div class="layui-form-item" style="margin-top: 10px">
                        <label class="layui-form-label" style="font-size: 18px;padding-left: 0;">表前缀</label>
                        <div class="layui-input-block">
                            <input type="text" style="width: 10%" v-model="prefix" name="title" lay-verify="title"
                                   autocomplete="off" placeholder="请输入表前缀" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="centered">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" v-if="isUpgrade && executeIng">
                        正在升级中
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" v-if="isUpgrade && !executeIng"
                            @click="startUpgrade">立即升级
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" v-else-if="isUpgrade == false">无需升级</button>
                </div>
            </div>
            <div class="layui-card-body">
                <div class="layui-form">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>表名</th>
                            <th>执行状态</th>
                            <th width="40%">错误原因</th>
                            <th>执行时间</th>
                            <th width="12%">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in upgradeData">
                            <td>{{item.table}}</td>
                            <td>{{item.status ? '执行成功':'执行失败'}}</td>
                            <td>{{item.error}}</td>
                            <td>{{item.add_time}}</td>
                            <td>无操作</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="layui-form">

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" charset="utf-8">
    var isUpgrade = <?=$isUpgrade ? 'true' : 'false'?>;
    new Vue({
        el: '#app',
        data: {
            sleep: 0,
            prefix: 'eb_',
            upgradeData: [],
            isUpgrade: isUpgrade,
            executeIng: false,
            page: 1,
        },
        methods: {
            startUpgrade: function () {
                var that = this;
                if (!that.prefix) {
                    return that.showMsg('请填写表前缀');
                }
                this.requestGet('upgrade', {
                    sleep: this.sleep,
                    prefix: this.prefix,
                    page: this.page
                }).then(function (res) {
                    if (res.data.sleep !== -1) {
                        if (res.data.page) {
                            that.page = res.data.page;
                        }
                        that.sleep = res.data.sleep;
                        that.upgradeData.push(res.data);
                        that.executeIng = true;
                        setTimeout(function () {
                            that.startUpgrade();
                        }, 100);
                    } else {
                        that.isUpgrade = false;
                        that.nextAction = true;
                        that.executeIng = false;
                        return that.showMsg('执行完毕');
                    }
                }).catch(function (res) {
                    return that.showMsg(res.msg);
                });
            },
            requestGet: function (url, data) {
                var params = Object.keys(data).map(function (key) {
                    return key + '=' + data[key];
                }).join('&');
                return new Promise(function (resolve, reject) {
                    axios.get(url + (params ? '?' + params : '')).then(function (res) {
                        if (res.status == 200) {
                            resolve(res.data)
                        } else {
                            reject(res.data);
                        }
                    }).catch(function (err) {
                        reject({msg: err})
                    });
                })
            },
            showMsg: function (msg, success) {
                layui.use(['layer'], function () {
                    layui.layer.msg(msg, success);
                });
            },
        }
    })
</script>
</body>
</html>