tianyunperfect
/
shellExec


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exe_cmd</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.all.js"></script>
    <script src="axios.min.js"></script>
    <style>

    </style>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">用户设置</li>
        <li>命令执行</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">IP</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="IP"
                               class="layui-input" id="host">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">端口</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="端口"
                               class="layui-input" id="port">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="用户名"
                               class="layui-input" id="username">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="title" lay-verify="title" autocomplete="off" class="layui-input"
                               id="password">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">超时时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="timeout" lay-verify="title" autocomplete="off" class="layui-input"
                               id="timeout">
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" action="">

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">前置命令</label>
                        <div class="layui-input-block">
                            <textarea placeholder="前置命令" class="layui-textarea" autoHeight="true" id="exec_str_before" style="min-height: 35px"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">命令</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea" autoHeight="true" id="exec_str"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" lay-filter="demo1" id="exec">执行选中内容</button>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">返回结果</label>
                        <div class="layui-input-block">
                            <textarea disabled style="height:500px" class="layui-textarea" autoHeight="true" id="return_str"></textarea>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    let form = layui.form
    let layer = layui.layer;
    let $ = layui.jquery;
    layui.code();
    let historyList = [];
    $(function () {
        let hostInfo = localStorage.getItem('hostInfo');
        if (hostInfo) {
            hostInfo = JSON.parse(hostInfo);
            $("#host").val(hostInfo["host"]);
            $("#port").val(hostInfo["port"]);
            $("#username").val(hostInfo["username"]);
            $("#password").val(hostInfo["password"]);
            $("#timeout").val(hostInfo["timeout"]);
            $("#exec_str").val(hostInfo["exec_str"]);
            $("#exec_str_before").val(hostInfo["exec_str_before"]);
        }

        // 设置高度
        $("#return_str").css('height','500px');

    });

    // 文本域自动扩充，参考：https://fly.layui.com/jie/64353/
    $.fn.autoHeight = function () {
        function autoHeight(elem) {
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }

        this.each(function () {
            autoHeight(this);
            $(this).on('keyup', function () {
                autoHeight(this);
            });
        });
    };
    $('textarea[autoHeight]').autoHeight();

    function getSelectText() {
        var txt = "";
        if (document.selection) {
            txt = document.selection.createRange().text;
        } else {
            txt = document.getSelection();
            //txt = window.getSelection();
        }
        return $.trim(txt.toString());
    }

    $("#exec_str").on('change',function () {
        let data = {
            "host": $("#host").val(),
            "port": $("#port").val(),
            "username": $("#username").val(),
            "password": $("#password").val(),
            "timeout": $("#timeout").val(),
            "exec_str": $("#exec_str").val(),
            "exec_str_before": $("#exec_str_before").val(),
        };
        localStorage.setItem('hostInfo', JSON.stringify(data));
    });

    $("#exec").click(function () {
        let selectText = getSelectText();
        if (selectText.length <= 0) {
            return;
        }
        let data = {
            "host": $("#host").val(),
            "port": $("#port").val(),
            "username": $("#username").val(),
            "password": $("#password").val(),
            "timeout": $("#timeout").val(),
            "exec_str_before": $("#exec_str_before").val(),
            "exec_str": selectText,
        };
        $("#exec").addClass('layui-btn-disabled');
        axios.post("/exec", data).then(function (res) {
            data = res.data;

            if (historyList.length >= 50) {
                historyList.pop();
            }
            historyList.unshift(data);
            $("#return_str").val(historyList.join('\n'));
            $("#exec").removeClass('layui-btn-disabled');
        });

    });

</script>
</body>
</html>