TMS/plg-tms-std-web-vue/public/jq/pages/microservice/microservice.html

<div class="plg-tab-container">
  <div id="grid" class="grid-container-full"></div>
</div>

<script>
  (function () {
    // cSpell:ignore layui api microservice multiselect newcolumn prologui fdata cindex layero
    // var BASE_URL = '/api/';
    var BASE_URL = '/api/service-microservice/';
    var RUN_STATUS = {
      '0': {
        text: '待发布',
        className: 'plg-edit'
      },
      '1': {
        text: '发布',
        className: 'plg-public'
      },
      '2': {
        text: '运行',
        className: 'plg-run'
      },
      '3': {
        text: '禁用',
        className: 'plg-stop'
      },
      '4': {
        text: '启动中...',
        className: 'plg-starting'
      },
      '5': {
        text: '失败',
        className: 'plg-start-fail'
      },
      '6': {
        text: '待上传',
        className: 'plg-wait-upload'
      }
    };
    
    // 【0】基础服务，【1】公共服务，【2】行业服务，【3】物流服务 
    var SERVER_CATEGORY = {
      '0': '基础服务',
      '1': '公共服务',
      '2': '行业服务',
      '3': '物流服务'
    };

    var opts = {
      skin: "terrace",
      multiselect: false,
      columns: [{
          id: "id",
          name: "id",
          type: 'txt',
          width: "40",
          align: "center",
          hidden: true
        },
        {
          id: "name",
          name: "名称",
          type: 'txt',
          width: "120",
          align: "center"

        },
        {
          id: "instanceId",
          name: "实例",
          type: 'txt',
          width: "120",
          align: "center"
        },
        {
          id: "host",
          name: "地址",
          type: 'txt',
          width: "200",
          align: "center",
          hidden: true
        },
        {
          id: "port",
          name: "端口",
          type: 'txt',
          width: "80",
          align: "center",
          hidden: true
        },
        {
          id: "status",
          name: "状态",
          type: 'txt',
          width: "100",
          align: "center",
          render:function(v,record){
            return `<span class="${RUN_STATUS[v].className}"> ${RUN_STATUS[v].text} </span>`;
          }
        },
        {
          id: "currentVersion",
          name: "版本",
          type: 'txt',
          width: "80",
          align: "center"
        },
        {
          id: "category",
          name: "服务分类",
          type: 'txt',
          width: "120",
          align: "center",
          render:function(v,record){
            return SERVER_CATEGORY[v];
          }
        },
        {
          id: "creator",
          name: "服务创建者",
          type: 'txt',
          width: "100",
          align: "center",
          hidden: true
        },
        {
          id: "createTime",
          name: "服务创建时间",
          type: 'txt',
          width: "120",
          align: "center",
          hidden: true
        },
        {
          id: "lastModifier",
          name: "服务变更人",
          type: 'txt',
          width: "120",
          align: "center",
          hidden: true
        },
        {
          id: "lastModifiedTime",
          name: "服务变更时间",
          type: 'txt',
          width: "120",
          align: "center",
          hidden: true
        },
        {id:"op",name:"操作",type:'button',align:"center",width:"250",render: function(v,record){
          
          switch(record.status){
            case 0:
   				    return "发布^microservice_publish,<span class='layui-disabled'>启动</span>^,<span class='layui-disabled'>下载日志</span>^,<span class='layui-disabled'>查看日志</span>^";
            case 1: 
   				    return "<span class='layui-disabled'>发布</span>^,启动^microservice_start,<span class='layui-disabled'>下载日志</span>^,<span class='layui-disabled'>查看日志</span>^";
            case 2: 
   				    return "<span class='layui-disabled'>发布</span>^,停止^microservice_uninstall,下载日志^microservice_downloadlog,<span>查看日志</span>^microservice_readlog";
            case 3: 
   				    return "<span class='layui-disabled'>发布</span>^,启动^microservice_start,下载日志^microservice_downloadlog,<span>查看日志</span>^microservice_readlog";
            case 4: 
   				    return "<span class='layui-disabled'>发布</span>^,<span class='layui-disabled'>停止</span>^,下载日志^microservice_downloadlog,<span>查看日志</span>^microservice_readlog";
            case 5:
   				    return "<span class='layui-disabled'>发布</span>^,停止^microservice_uninstall,<span>下载日志</span>^microservice_downloadlog,<span>查看日志</span>^microservice_readlog";
            case 6:
   				    return "<span class='layui-disabled'>发布</span>^,<span class='layui-disabled'>启动</span>^,<span class='layui-disabled'>下载日志</span>^,<span class='layui-disabled'>查看日志</span>^";
          }

   			}},
        {
          id: "description",
          name: "描述",
          type: 'txt',
          width: "200",
          align: "left"
        }

      ],
      toolbar: [
        {type:"block", blockOffset:0, offsetTop:10, list:[
          {
            type: "input",
            name: 'name',
            label: '服务名称:',
            placeholder:"请输入服务名称",
            width:300
          },
          {
            type: "newcolumn"
          },
					{
            type: "select",
            name: "category",
            label: "服务分类:",
            width:300,
            options: [
              {
                value: '',
                text: '请选择服务分类'
              },
              {
                value: '0',
                text: '基础服务'
              },
              {
                value: '1',
                text: '公共服务'
              },
              {
                value: '2',
                text: '行业服务'
              },
              {
                value: '3',
                text: '物流服务'
              }
            ]
          },
          {
            type: "newcolumn"
          },
          {
            type: "input",
            name: "creator",
            label: "服务创建者:",
            placeholder:"请输入服务创建者",
            width:300,
            hidden: true
          },
          {
            type: "newcolumn"
          },
          {
            type: "input",
            name: "status",
            label: "服务状态:",
            placeholder:"请输入服务状态",
            width:300,
            hidden: true,
            offsetLeft: 10
          },
          {
            type: "newcolumn"
          },
          {
            type: "button",
            name: "searchBtn",
            className: "",
            value: "查询"
          },
          {
            type: "newcolumn"
          },
          {
            type: "button",
            name: "all",
            className: "normal",
            value: "所有"
          },
          {
            type: "newcolumn"
          },
          {type:"button", name:"more2", value:"展开",className:"link toggle"},
        ]},
        {type:"block", blockOffset:0,offsetTop:10,list:[{
          type: "button",
          name: "deleteBtn",
          className: "danger plg-toolbar-right",
          value: "<i class='layui-icon layui-icon-delete'></i>删除"
        }, {
          type: "newcolumn"
        },
        
        
        {
          type: "button",
          name: "downFile",
          className: "normal plg-toolbar-right download",
          value: "<i class='layui-icon layui-icon-download-circle'></i>下载"
        }, {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "upFile",
          offsetLeft: 10,
          className: "normal plg-toolbar-right upload",
          value: "<i class='layui-icon layui-icon-upload'></i>上传"
        },
        {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "updateBtn",
          className: "normal plg-toolbar-right",
          value: "<i class='layui-icon layui-icon-edit'></i>编辑"
        }, 
        {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "addBtn",
          className: "plg-toolbar-right",
          value: "<i class='layui-icon layui-icon-add-1'></i>添加"
        }
        ]}
      ],
      formData: [{
          type: "settings",
          inputWidth: 300,
          width: 400,
          labelWidth: 80,
          position: "label-left",
          labelAlign: "left"
        },
        {
          type: "input",
          name: 'name',
          label: '服务名',
          placeholder:"请输入服务名",
          editable: false,
          validate: 'NotEmpty',
          required: true
        },
        {
          type: "input",
          name: "instanceId",
          label: "实例",
          placeholder:"请输入实例名",
          validate: 'NotEmpty',
          required: true
        },
        {
          type: "input",
          name: "port",
          label: "端口",
          placeholder:"请输入端口号",
          validate: 'NotEmpty,ValidNumeric',
          required: true
        },
        {
          type: "select",
          name: "category",
          label: "服务分类",
          options: [{
              value: '0',
              text: '基础服务'
            },
            {
              value: '1',
              text: '公共服务'
            },
            {
              value: '2',
              text: '行业服务'
            },
            {
              value: '3',
              text: '物流服务'
            }
          ],
          validate: 'NotEmpty',
          required: true
        },
        {
          type: "input",
          name: "lastModifier",
          label: "变更人名称",
          placeholder:"请输入变更人名称"
        },
        {
          type: "input",
          name: "description",
          label: "服务变更描述",
          placeholder:"请输入服务变更描述",
          rows: 3,
          validate: 'NotEmpty',
          required: true
        }

      ],
      imagePath: "../../prologui/assets/PlgGrid/",
      url: BASE_URL + 'microservice', //数据接口
      type: "get", //数据提交方式，默认为get
      params: {}, //查询提交参数，分页参数默认为pageNum,pageSize
      page: true, //是否启用分页
      totalCount: "totalCount" //总记录数字段，默认totalCount
    };

    //分页参数 pageSize pageNum
    var grid = new PlgGrid(opts);
    grid.renderTo("grid");
    grid.loadData();

    grid.on("onRowDblClicked", function () {
      grid.showDialog(1, "编辑", 430, 350, {
        url: BASE_URL + 'microservice',
        type: "PUT"
      });
    });
    

    // 【操作--发布】
    window.microservice_publish = function (id, data) {
      // 发布之前要先判断用户是否已经上传了Jar包
      //console.log('发布之前要先判断用户是否已经上传了Jar包');
      //console.log(data);
      //console.log('发布之前要先判断用户是否已经上传了Jar包');


      // 前置条件，需要拿到版本号列表
      // String host,String microId,String version,String regServer,String packagePort)
      // 1. id  【microId】
      // 2. 版本号列表   【version】-- 传递给后台的属性名
      // 3. 服务地址 【host】
      // 4. 注册地址地址 【regServer】
      // 5. 端口号。默认值是添加的时候的端口号 【packagePort】

      // 此处是一个弹窗
      var type = 'auto';
      var microVersionList = data.microVersionList;
      var temStr = '';

      microVersionList.map(function(val){
        temStr +=`<option value="${val.version_}">${val.version_}</option>`
      })
      
      var text = `
      <form class="layui-form layui-form-pane1 plg-form-public">
        <div class="layui-form-item">
          <label class="layui-form-label plg-unset-box-sizing">服务地址</label>
          <div class="layui-input-block">
            <input type="text" name="host" lay-filter="host" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label plg-unset-box-sizing">启动后缀</label>
          <div class="layui-input-block">
            <input type="text" name="packagePort" lay-filter="packagePort" lay-verify="required" placeholder="例:--server.port=1234,注意空格" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label plg-unset-box-sizing">版本号</label>
          <div class="layui-input-block">
            <select name="version" lay-filter="version">
              <option value=""></option>
              ${temStr}
            </select>
          </div>
        </div>    
      </form>
      `;
      
      var currentVersion,  // 用户选择的版本号
        host, // 用户的服务器地址
        regServer, // 用户的注册服务器地址
        packagePort; // 用户的注册服务器端口号
           
      layer.open({
        type: 1,
        title: '发布【' + data.name + '】' //不显示标题栏
        ,offset: type //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo'+ type //防止重复弹出
        ,content: '<div>'+ text +'</div>'
        ,btn: '确认'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,success: function(){
          layui.use('form', function(){
              var form = layui.form;
              form.render('select'); //刷新select选择框渲染
              form.on('select(version)', function(data){
                currentVersion = data.value;
              });
            });
        }
        ,yes: function(){
          var obj = {
            host: $("input[name='host']").val(),
//          regServer: $("input[name='regServer']").val(),		这里注册地址不要同意填在packagePort里面，要注意格式。
            variable: $("input[name='packagePort']").val(),
            microId: data.id,
            version: currentVersion
          }
          // //console.log('传递给后台的参数');
          // //console.log(obj);
          // //console.log('传递给后台的参数');

          var loading = Prolog.loading2();
          Prolog.ajax({
            url: BASE_URL + 'microservice/public',
            type: 'post',
            data: obj,
            dataType: 'json',
            success: function (data) {
              loading();

              if (data.success) {
                grid.reload();

                layer.closeAll(); 
              } else {
                PlgDialog.alert(data.message);
              }
            }
          });
        }

      });
    }

    // XXX 
    // 【操作--启动】
    window.microservice_start = function (id, data) {
      // 此处是一个弹窗
      // 1. id  【microId】

      var type = 'auto';
      
      var microVersionList = data.microVersionList;
      
      var temStr = '';
      microVersionList.map(function(val){
        temStr +=`<option value="${val.version_}">${val.version_}</option>`
      })
      
      var text = `
      <form class="layui-form layui-form-pane1">
        <div class="layui-form-item">
          <label class="layui-form-label">选择框</label>
          <div class="layui-input-block">
            <select name="version" lay-filter="version">
              <option value=""></option>
              ${temStr}
            </select>
          </div>
        </div>
      </form>
      `;
      
      var currentVersion;
      layer.open({
        type: 1,
        title: '部署【' + data.name + '】' //不显示标题栏
        ,offset: type //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo'+type //防止重复弹出
        ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
        ,btn: '确认'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,success: function(){
          layui.use('form', function(){
              var form = layui.form;
              form.render('select'); //刷新select选择框渲染
              form.on('select(version)', function(data){
                currentVersion = data.value;
              });
                
            });

        }
        ,yes: function(){
          // //console.log('currentVersion::' + currentVersion);
          // //console.log('点击确认了');
          var obj = {
            microId: data.id,
            version: currentVersion
          }
          var loading = Prolog.loading2();
          Prolog.ajax({
            url: BASE_URL + 'microservice/deploy',
            type: 'post',
            data: obj,
            dataType: 'json',
            success: function (data) {
              loading();

              if (data.success) {
                grid.reload();

                layer.closeAll(); 
              } else {
                PlgDialog.alert(data.message);
              }
            }
          });

        }
      });
    }

    // 【操作--卸载】
    window.microservice_uninstall = function (rid, data) {
      
      //console.log('卸载之前要先判断用户是否已经上传了Jar包');
      //console.log(data);
      //console.log('卸载之前要先判断用户是否已经上传了Jar包');

      // 【microId】
      var obj = {
        microId: data.id,
        version: data.currentVersion
      }
      var loading = Prolog.loading2();
      Prolog.ajax({
        url: BASE_URL + 'microservice/undeploy',
        type: 'post',
        data: obj,
        dataType: 'json',
        success: function (data) {
          loading();

          if (data.success) {
            grid.reload();
          } else {
            PlgDialog.alert(data.message);
          }
        }
      });

    }

    window.microservice_downloadlog = function(id, data){
      // //console.log('下载日志之前要先判断用户是否已经上传了Jar包');
      // //console.log(data);
      // //console.log('下载日志之前要先判断用户是否已经上传了Jar包');
      window.location.href = BASE_URL + 'microservice/downLoadLogInfo?microId=' + id;
    }

    window.microservice_readlog = function(id, data){
      // //console.log('下载日志之前要先判断用户是否已经上传了Jar包');
      // //console.log(data);
      // //console.log('下载日志之前要先判断用户是否已经上传了Jar包');
      
      var aId = 'plg' + id;
      var temTemplate = `<a id="${aId}" target="_blank"; style="display: none;">点击跳转</a>`;
      $('body').append(temTemplate);

      var openwin = function (url) {   
        var obj = document.getElementById(aId);
        obj.href = url;   
        obj.click();   
      }
      openwin(BASE_URL + 'microservice/downLoadLogInfoOnline?microId=' + id);
      // window.location.href = BASE_URL + 'microservice/downLoadLogInfoOnline?microId=' + id;
    }

    grid.attachToolBarEvent("onButtonClick", function (name) {

      // 用户点击右上角的操作按钮组对应的事件
      var operationGroup = {
        _getIds: function () {
          var ids = grid.getCheckedIds() || grid.getSelectedRowData("id");

          if (!ids) {

            PlgDialog.msg("请选择行!");

          }

          return ids;
        },
        searchBtn: function () {
          var fdata = grid.getToolBarForm().getFormData();
          grid.setParams(fdata);
          grid.reload();
        },
        all: function () {
          grid.setParams({});
          grid.reload();
        },
        downFile: function () {
          
          var version = grid.getSelectedRowData('currentVersion');
          
          var ids = this._getIds();
          if (!ids) {
            return;
          }

          // 这里是文件下载并非跳转
          window.location.href = BASE_URL + 'microservice/downLoad?microId=' + ids+'&version=' + version;

        },
        upFile: function () {
          var ids = this._getIds();

          if (!ids) {
            return;
          }

          //console.log('>>>>>>');
          //console.log(Boolean($('.upload').attr('id')));
          //console.log('>>>>>>');

          if (!$('.upload').attr('id')) {
            $('.upload').attr({
              'id': 'upload'
            });
          }
         
          var loading;
          layui.upload.render({
            elem: '#upload',
            url: BASE_URL + 'microservice/upload',
            accept: 'file', //普通文件
            data: {
              microId: ids
            },
            before: function () {
              loading = Prolog.loading2();
            },
            done: function (res) {
              console.log('done ....');
              loading();
              layer.msg(res.message);
              //console.log(res);
              grid.setParams({});
              grid.reload();
            },
            error: function (res) {
              console.log('error ....');
              loading();
              //console.log('请求异常');
              layer.msg(res.message);
            }
          });

        },
        addBtn: function () {
          grid.showDialog(0, "添加", 430, 450, {
            url: BASE_URL + 'microservice',
            type: "POST"
          });
        },
        updateBtn: function () {
          grid.showDialog(1, "编辑", 430, 450, {
            url: BASE_URL + 'microservice',
            type: "PUT"
          });
        },
        deleteBtn: function () {
          var ids = this._getIds();
          var currentStatus = grid.getSelectedRowData().status;
          console.log('currentStatus::' + currentStatus);
          var canDeleteStatus = [0, 3, 6];

          if(!(canDeleteStatus.indexOf(currentStatus) > -1)){

            PlgDialog.alert('当前状态不可删除!');

            return false;
          }

          if (!ids) {

            return;

          }
          
          var confirmText = `<div style="padding: 10px; line-height: 22px; font-size: 18px; color: red; font-weight: 500;">
            <span class="layui-icon layui-icon-tips"></span>是否确认删除么？<br>
            </div>`;

          var dialog = layer.open({
            type: 1
            ,title: false //不显示标题栏
            ,closeBtn: false
            ,area: '300px;'
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['确认', '取消']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: confirmText
            ,yes: function() {
              //console.log('确认删除');
              layer.close(dialog); //关闭信息框
              var loading = Prolog.loading2();
              Prolog.ajax({
                url: BASE_URL + 'microservice' + '/' + ids,
                type: 'DELETE',
                dataType: 'json',
                success: function (data) {
                  loading();

                  if (data.success) {
                    grid.reload();
                  } else {
                    PlgDialog.alert(data.message);
                  }
                }
              });
            }
            ,btn2: function() {
              //console.log('取消删除');
            }
          });
        
        }

      };

      if (name && operationGroup.hasOwnProperty(name)) {
        operationGroup[name]();
      }


    });

  }());
</script>