panel/public/panel/views/task.html

<!--
Name: 任务中心
Author: 耗子
Date: 2023-07-22
-->

<title>任务中心</title>
<div class="layui-fluid" id="component-tabs">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">任务列表</div>
                <div class="layui-card-body">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">进行中</li>
                            <li>等待中</li>
                            <li>已完成</li>
                            <li>已失败</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <script type="text/html" template
                                        lay-url="/api/panel/task/list?status=running&page=1&limit=10"
                                        lay-done="layui.data.done(d);">
                                    {{# if(d.data.total != 0){ }}
                                    <blockquote class="layui-elem-quote">{{ d.data.items[0].name }}</blockquote>
                                    <pre id="plugin-install-log" class="layui-code">
                                        日志获取中...
                                    </pre>
                                    {{# } else { }}
                                    <blockquote class="layui-elem-quote">暂无任务</blockquote>
                                    {{# } }}
                                </script>
                            </div>
                            <div class="layui-tab-item">
                                <table id="panel-task-waiting" lay-filter="panel-task-waiting"></table>
                            </div>
                            <div class="layui-tab-item">
                                <table id="panel-task-finished" lay-filter="panel-task-finished"></table>
                                <script type="text/html" id="panel-task-finished-control-tpl">
                                    <a class="layui-btn layui-btn-xs" lay-event="remove">移除</a>
                                </script>
                            </div>
                            <div class="layui-tab-item">
                                <table id="panel-task-failed" lay-filter="panel-task-failed"></table>
                                <script type="text/html" id="panel-task-failed-control-tpl">
                                    <a class="layui-btn layui-btn-xs" lay-event="remove">移除</a>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function render_plugin_install_log(d) {
        layui.use(['admin', 'jquery'], function () {
            let admin = layui.admin
                , $ = layui.jquery;
            admin.req({
                url: "/api/panel/task/log?id=" + d.data.items[0].id
                , type: 'get'
                , success: function (result) {
                    if (result.code !== 0) {
                        $('#plugin-install-log').html('实时安装日志获取失败，请刷新重试！');
                        return false;
                    }
                    if (result.data.includes('完成') || result.data.includes('错误')) {
                        setTimeout(function () {
                            location.reload();
                        }, 2000);
                    }
                    $('#plugin-install-log').html(result.data);
                }
            })
        });
    }

    layui.data.done = function (d) {
        if (d.data.items[0] !== undefined) {
            render_plugin_install_log(d);
            setInterval(function () {
                render_plugin_install_log(d);
            }, 2000);
        }

    };

    layui.use(['admin', 'table', 'jquery'], function () {
        var table = layui.table
            , admin = layui.admin;

        table.render({
            elem: '#panel-task-waiting'
            , url: '/api/panel/task/list?status=waiting'
            , cols: [[
                {field: 'id', hide: true, title: 'ID', sort: true}
                , {field: 'name', fixed: 'left', title: '任务名'}
                , {field: 'created_at', title: '创建时间', width: 200}
            ]]
            , page: true
            , text: {
                none: '无数据'
            }
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.items
                };
            }
        });

        table.render({
            elem: '#panel-task-finished'
            , id: 'panel-task-finished-table'
            , url: '/api/panel/task/list?status=finished'
            , cols: [[
                {field: 'id', hide: true, title: 'ID', sort: true}
                , {field: 'name', fixed: 'left', title: '任务名'}
                , {field: 'created_at', title: '创建时间', width: 200}
                , {field: 'updated_at', title: '完成时间', width: 200}
                , {
                    field: 'control'
                    , title: '操作'
                    , width: 100
                    , templet: '#panel-task-finished-control-tpl'
                    , align: 'center'
                }
            ]]
            , page: true
            , text: {
                none: '无数据'
            }
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.items
                };
            }
        });
        table.on('tool(panel-task-finished)', function (obj) {
            let data = obj.data;
            if (obj.event === 'remove') {
                layer.confirm('确定移除该记录吗？', function (index) {
                    layer.close(index);
                    admin.req({
                        url: '/api/panel/task/delete',
                        type: 'post',
                        data: {
                            id: data.id
                        }
                        , success: function (res) {
                            if (res.code == 0) {
                                layer.msg('移除任务：' + data.name + ' 成功！', {icon: 1, time: 1000}, function () {
                                    table.reload('panel-task-finished-table');
                                });
                            } else {
                                layer.msg(res.message, {icon: 2, time: 1000});
                            }
                        }
                    });
                });
            }
        });

        table.render({
            elem: '#panel-task-failed'
            , id: 'panel-task-failed-table'
            , url: '/api/panel/task/list?status=failed'
            , cols: [[
                {field: 'id', hide: true, title: 'ID', sort: true}
                , {field: 'name', fixed: 'left', title: '任务名'}
                , {field: 'created_at', title: '创建时间', width: 200}
                , {field: 'updated_at', title: '完成时间', width: 200}
                , {
                    field: 'control'
                    , title: '操作'
                    , width: 100
                    , templet: '#panel-task-failed-control-tpl'
                    , fixed: 'right'
                    , align: 'center'
                }
            ]]
            , page: true
            , text: {
                none: '无数据'
            }
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.items
                };
            }
        });
        table.on('tool(panel-task-failed)', function (obj) {
            let data = obj.data;
            if (obj.event === 'remove') {
                layer.confirm('确定移除该记录吗？', function (index) {
                    layer.close(index);
                    admin.req({
                        url: '/api/panel/task/delete',
                        type: 'post',
                        data: {
                            id: data.id
                        }
                        , success: function (res) {
                            if (res.code == 0) {
                                layer.msg('移除任务：' + data.name + ' 成功！', {icon: 1, time: 1000}, function () {
                                    table.reload('panel-task-failed-table');
                                });
                            } else {
                                layer.msg(res.message, {icon: 2, time: 1000});
                            }
                        }
                    });
                });
            }
        });
    });
</script>