运维平台: 作业中心前端页面设计及填坑经验

HTML

界面设计

<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row">
            <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            {#树状展示主机列表#}
                            <div id="treeHost" class="demo-tree-more"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md10">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            {#终端展示，用于输出命令执行结果#}
                            <div id="terminal" style="background-color: black;height: 500px;width: 1358px;color: #f6f6f6;font-family: 黑体">选择左侧主机，批量执行命令</div>
                            <hr>
                            {#ssh命令输入框#}
                            <textarea style="width: 1358px;height: 180px" placeholder="请输入命令"></textarea>
                            <div class="layui-btn-container">
                              <button type="button" class="layui-btn" lay-demo="getChecked">执行</button>
                            </div>
                        </div>
                    </div>
                </div>
          </div>
        </div>
    </div>
</div>

JS代码

获取主机数据

//获取接口host_type_tree_api的主机类型数据，直接用该函数就可以获取
function getData() {
    var data = [];
    $.ajax({
        url: '{% url 'host_type_tree_api' %}',    //后台数据请求地址
        type: "GET",
        async: false,
        success: function (res) {
            data = res.data;
        }
    });
    return data;
}

说明:

使用layui的tree 组件 一定要给数组(父节点和子节点)里面添加id字段 不然得到的是空数组;

比如:host_type_tree_api接口输出数据为:{"title":"test-yunwei-service","id":4,"children":[{"title":"test-jenkins-213","id":4}]};

children( 子节点)里面也得定义id字段,在host_type_tree_api接口里面定义即可。

主机选择与后端交互

layui.use(['table','form','layer','tree','util'], function(){
  var layer = layui.layer;
  var form = layui.form;
  var $ = layui.jquery;
  var tree = layui.tree;
  var util = layui.util;


  $.ajax({
      url: '{% url 'host_type_tree_api' %}',
      type: "GET",
      async:false,
      success: function (res) {
          if (res.code ==0){
              //树形主机树状使用tree组件
              tree.render({
                elem: '#treeHost'
                ,data: getData()
                ,showCheckbox: true  //是否显示复选框
                ,id: 'treeType'
                ,isJump: true //是否允许点击节点时弹出新窗口跳转
                ,click: function(obj){
                  var data = obj.data;  //获取当前点击的节点数据
                  layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                }
                //oncheck复选框被点击的时候回调
                ,oncheck: function (obj){
                    checkedData = tree.getChecked('treeType') //获取选中节点的数据
                    var oldhtml = document.getElementById("terminal");
                    //jquery的方法，清除该元素的所有内容
                    $("#terminal").empty();
                    oldhtml.innerHTML = "已选资产:"
                    $.each(checkedData,function (index,value){ //遍历选中的主机类别，其中index是指数组的下标，value指相对应的值,obj.data.children是数组
                            if (value.children.length > 0){ //如果为节点为空，不参与子节点遍历
                                $.each(value.children,function (index,value){ //遍历子节点中的列表（主机）
                                    oldhtml.append(value.title + ",")
                              })
                         }
                    })
                  }
              });


              //执行按钮事件
              util.event('lay-demo', {
                getChecked: function(othis){
                  var checkedData = tree.getChecked('treeType'); //获取选中节点的数据
                    task_info = {
                        'host_name': JSON.stringify(checkedData)
                    };
                    $.ajax({
                        url: '{% url 'commandexec_api' %}',
                        type: "POST",
                        data: task_info,
                        dataType: "json",
                        async:false,
                        success: function (res) {
                            if (res.code == 0){
                                var oldhtml = document.getElementById("terminal")
                                oldhtml.append(res.msg)
                            }
                        }
                    });
                }
              });


          }else{
              layer.msg(res.msg,{icon:5})
          }
      },
      error: function () {
          layer.msg("服务器接口异常",{icon: 5})
      }
  });
});

说明: 目前只完成到与后端接口commandexec_api交互

效果

当选中左侧主机时，会自动添加到右侧的终端上面

点击执行，终端返回执行成功，说明接口commandexec_api已接收数据，并返回

更多文章请扫一扫