关于服务启动按钮页面的优化

原则

1. 同一个服务器只允许启动一个按钮,也就是只能触发一个启动/关闭/重启的功能。不同的服务器是可以同时异步触发的。
2. 启动或关闭是异步进行的。
3. 启动或关闭的时候，同一个服务器的上按钮变灰色，并且不能点击。

问题

由于妹子ui的模态框在数据传输存在bug,详情撮: https://amazeui.org/javascript/modal
所以在多个异步并发执行的时候出现各种Bug.

$(function() {
  $('#doc-modal-list').find('.am-icon-close').add('#doc-confirm-toggle').
    on('click', function() {
      $('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
          var $link = $(this.relatedTarget).prev('a');
          var msg = $link.length ? '你要删除的链接 ID 为 ' + $link.data('id') :
            '确定了，但不知道要整哪样';
          alert(msg);
        },
        // closeOnConfirm: false,
        onCancel: function() {
          alert('算求，不弄了');
        }
      });
    });
});

通过 relatedTarget 这个钩子获取数据，如上面的演示，以该元素为桥梁获取想要的数据（2.1 开始支持）；

最初代码的引用

$('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {

            if (start_store != undefined) {
              $("#msgtips").html('[服务器名称:' + start_store.alias + '] 正在启动,请等待启动完成或使用批量启动.');  
              $('#my-alert').modal('open');
              return;
            }else{
              store.set('start_store', { code: '1', alias: dename })  
            };

            my_this = this.relatedTarget;
            $.ajax({
             type: "POST",
             async:true,
             url: "/api/service",
             cache: false,
             data: data,
             dataType: "json",
             success: function(res){
                var alias =  res.data.data[0].alias;             
                var code =  res.data.data[0].code;             
                var reskey =  res.data.data[0].key;             
                var msg =  res.data.data[0].msg;             
                var resnetwork_ip =  res.data.data[0].network_ip;             
                console.log(res);

                if ( code == 1 ) {
                    $("#msgtips").html('[服务器名称:'+alias+'启动成功!');  
                    $('#my-alert').modal('open');
                    closeloading(my_this);
                }else{
                    $("#msgtips").html('[服务器名称:'+alias+']启动失败,'+msg+'!');  
                    $('#my-alert').modal('open');
                    closeloading(my_this);
                }
                store.remove('start_store');
                closeloading(my_this);

            },
            error:function(){     
                $("#msgtips").html('[服务器名称:'+$(my_this).attr("dename")+'] 请求失败,请联系管理员!');  
                $('#my-alert').modal('open');
                closeloading(my_this);
                store.remove('start_store');     
            } 
        });

        },

        onCancel: function() {
          my_this = this.relatedTarget; 
          closeloading(my_this);
          // var store = $.AMUI.store;
          store.remove('start_store');
        }

  });

改进后代码的引用

 $('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
            var my_this ;
            my_this = this.relatedTarget;
            if (start_store != undefined) {
              $("#msgtips").html('[服务器名称:' + start_store.alias + '] 正在启动,请等待启动完成或使用批量启动.');  
              $('#my-alert').modal('open');
              closeloading(my_this);
              return;
            }else{
              store.set('run_service_allow_one', { code: '1', alias: dename })  
            };
            data = store.get('data');

            $.ajax({
             type: "POST",
             async:true,
             url: "/api/service",
             cache: false,
             data: data,
             dataType: "json",
             success: function(res){
                console.log('get res result:');
                console.log(res);
                // 
                var code =  res.data.data[0].code; 
                console.log(code);
                if (code == 10020) {
                    $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + '<br/> 最后时间: '+ res.get_status.data.data[0].updated_time + '<br/> 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation );  
                    $('#my-alert').modal('open');
                    closeloading(my_this);
                } else if (code == 10041){                   
                    $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + '<br/> 最后时间: '+ res.get_status.data.data[0].updated_time + '<br/> 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation );  
                    $('#my-alert').modal('open');
                    closeloading(my_this);
                }else if (code == 10042){
                    $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + '<br/> 最后时间: '+ res.get_status.data.data[0].updated_time + '<br/> 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation );  
                    $('#my-alert').modal('open');
                    closeloading(my_this);                
                }else if (code == 1 ){
                    var alias =  res.data.data[0].alias;           
                    var reskey =  res.data.data[0].key;             
                    var msg =  res.data.data[0].msg;             
                    var resnetwork_ip =  res.data.data[0].network_ip;                                     
                    $("#msgtips").html('[服务器名称:'+alias+'启动成功!');  
                    $('#my-alert').modal('open');
                    closeloading(my_this);
                }else{
                    var alias =  res.data.data[0].alias;           
                    var reskey =  res.data.data[0].key;             
                    var msg =  res.data.data[0].msg;             
                    var resnetwork_ip =  res.data.data[0].network_ip; 
                    console.log(my_this);                   
                    $("#msgtips").html('[服务器名称:'+alias+']启动失败,'+msg+'!');  
                    $('#my-alert').modal('open');
                    closeloading(my_this);                  
                }

                store.remove('run_service_allow_one');
                closeloading(my_this);

            },
            error:function(){     
                $("#msgtips").html('[服务器名称:'+$(my_this).attr("dename")+'] 请求失败,请联系管理员!');  
                $('#my-alert').modal('open');
                closeloading(my_this);
                store.remove('run_service_allow_one');     
            } 
        });

        },

        onCancel: function() {
          var my_this ;
          my_this = this.relatedTarget; 
          closeloading(my_this);
          // var store = $.AMUI.store;
          store.remove('run_service_allow_one');
        }

  });

• 我这边的主要的问题现象:

  1. 同一个页面点击启动，再次点击启动或关闭，还是上一次的post传参。
  2. 正在启动中或者关闭中的那个提示在点击多次时后面不能正常返回。比如我同时点击了启动和关闭，然后页面显示启动中和关闭中，然后返回数据后，启动中按钮变回启动，但是关闭中一直没返回。

解决

针对以上的问题后面的代码已经解决，主要是妹子ui模态框传参的Bug问题，调用多次模态框模块框只会保存第一次运行时的数据。

第1个问题: 通过store存储传参，每点击一次覆盖前一次的参数。(可能存在的问题: 如果启用无缝浏览则无法传data参数，如果点击过快参数赋值就会错乱，但是这种情况应该很少，参数赋值那块也就微妙级别，人的手工基本不会达到那种地步) 还有种方法就是通过relatedTarget钩子重新获取数据。推荐这个方法。

第2个问题: 其实使用了relatedTarget钩子，但变量初始化的时候存在问题，之前没有var 定义局部变量，导致后面点击有可能获取全局变量的数据，导致my_this对象串了。重新初始化变量就OK了。

上图: