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

<!-- 配置服务器 -->
<div class="plg-tab-container">
  <div class="plg-flex" style="height: 100%">
    <div class="flex_item" id="instanseServe">
      配置实例
    </div>
  </div>
</div>
<style>
  .jdk-upload {
    position: absolute;

  }

  .jdk-upload .layui-upload-choose {
    position: absolute;
    top: 100px
  }

  .mt_15 {
    margin: 0;
    margin-top: 15px;
  }

  .validate_error .dhxform_label {}
</style>
<script>
  (function () {
    window.global_fun.instance = {};

    var comboList = [];

    var res_opts = {
      fixedLast: true,
      renderer: "instanseServe",
      url: APIS.settings.server.instanceInfo(),
      type: "get",
     
      // pageNum: "pageNo",//设置分页参数页码key值，默认为pageNum
    };
    var _typeLang = ["其它", "Java", "nodeJs", ".net"]
    res_opts.pagebar = {
      buttons: [
        { text: PLG_BUTTON.value.delBtn(), className: "layui-btn-danger plg-btn-height-auto", name: "delBtn" }
      ]
    },
      res_opts.columns = [
        {
          name: "id",
          id: "id",
          hidden: true
        },
        {
          name: "服务名",
          id: "servicename",
          align: "left",
          type: "ro",
          render: function (v) {
            return `<span style="color:#2F4056">${v}</span>`
          }
        },
        {
          name: "实例",
          id: "instancename",
          align: "left",
          type: "ro",
          render: function (v) {
            return `<span style="color:#2F4056">${v}</span>`
          }
        },
        {
          name: "容器名称",
          id: "containername",
          align: "left",
          type: "ro",
          render: function (v) {
            return `<span style="color:#2F4056">${v}</span>`
          }
        },
        {
          name: "服务器地址",
          id: "serverhost",
          align: "left",
          type: "ro",
          width: 180,
          render: function (v) {
            return `<span style="color:#2F4056">${v}</span>`
          }
        },
        {
          name: "应用类型",
          id: "type",
          align: "center",
          type: "ro",
          width: 100,
          render: function (v) {
            return _typeLang[v]
          }
        },
        {
          name: "端口",
          id: "port",
          align: "center",
          type: "ro",
          width: 100,
          render: function (v) {
            if (!v) {
              return `<span style="color:#888">无</span>`
            }
          }
        },
        {
          name: "容器状态",
          id: "status",
          align: "center",
          type: "ro",
          width: 120,
          render: function (v) {
            return v ? `<i class="layui-badge-dot layui-bg-blue"></i> 启动` : `<i class="layui-badge-dot"></i> 末启动`
          }
        },
        {
          name: "版本号",
          id: "version",
          align: "left",
          type: "ro",
          width: 120,
          render: function (v) {
            if (!v) {
              return `<span style="color:#888">末定义</span>`
            }
          }
        },
        {
          id: "op",
          name: "操作",
          type: 'button',
          width: 180,
          align: "center",
          render: function (v, d) {
            return `部署应用^global_fun.instance.arrangeClick,启动^global_fun.instance.toggleClick,删除^global_fun.instance.deleteClick`;
          }
        }
      ];

    res_opts.toolbar = [{
      type: 'row',
      blockOffset: 0,
      className: "layui-col-md12",
      list: [
        {
          type: "row",
          className: "layui-col-md6",
          blockOffset: 0,
          list: [
            {
              type: "combo",
              className: "layui-col-md4",
              name: "serverhost",
              label: "服务器IP:",
              placeholder: "选择或输入IP",
              options: [
                { value: '', text: '' },
              ]
            },
            {
              className: "layui-col-md4",
              type: "input",
              name: "servicename",
              label: "服务名:",
              placeholder: "跟踞服务名查询"
            },
            {
              type: "button",
              className: "left",
              name: "selectAllBtn",
              value: PLG_BUTTON.value.searchBtn()
            },
            {
              type: "button",
              name: "resetBtn",
              className: "left",
              value: PLG_BUTTON.value.resetBtn()
            },
          ]
        },
        {
          type: "block",
          className: "layui-col-md6 right",
          blockOffset: 0,
          list: [
            {
              type: "button",
              name: "addBtn",
              value: PLG_BUTTON.value.addBtn() + "服务实例"
            }
          ]
        }]
    }];

    function getAllServersList(combo, value) {
      if (!combo) return
      Prolog.ajax({
        url: APIS.settings.server.getAllServers(),
        type: "get",
        dataType: "json",
        success: function (data) {
          if (data.success) {
            var data = data.data;
            var opt = [];
            data.forEach(function (item, index) {
              opt.push([item.serverhost, item.serverhost + " - " + item.servername])
            });
            combo.addOption(opt);
            combo.setComboValue(value);
          } else {
            return console.error("获取服务器列表信息错误");
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          console.error("获取服务器列表信息错误:" + XMLHttpRequest.status);
        }
      });
    };
    res_opts.formData = [{
      type: "row",
      list: [{
        type: "settings",
        labelWidth: 90,
        position: "label-left",
        labelAlign: "right"
      },
      {
        type: "hidden",
        name: "id",
        label: "id",
      },
      {
        type: "combo",
        name: "serverhost",
        className: 'combo',
        label: "选择服务器:",
        inputWidth: "305",
        required: true,
        options: [
          { value: '', text: '请选择服务器IP' },
        ]
      },
      {
        type: "combo",
        name: "type",
        className: 'combo',
        label: "应用类型:",
        inputWidth: "305",
        required: true,
        options: [
          { value: '', text: '请选择' },
          { value: 1, text: _typeLang[1] },
          { value: 2, text: _typeLang[2] },
          { value: 3, text: _typeLang[3] },
          { value: 0, text: _typeLang[0] }
        ]
      },
      {
        type: "input",
        name: "containername",
        label: "容器名:",
        required: true,
        validate: 'NotEmpty',
        placeholder: _t("请输入容器名")
      },
      {
        type: "input",
        name: "servicename",
        label: "服务名:",
        required: true,
        validate: "NotEmpty",
        placeholder: _t("不允许包含中文，对应applicationName")
      },
      {
        type: "input",
        name: "instancename",
        label: "实例名:",
        required: true,
        validate: "NotEmpty",
        placeholder: _t("不允许包含中文，对应instanceId")
      },

      {
        type: "row",
        className: "layui-col-md12",
        list: [
          {
            type: "input",
            className: "layui-col-md6",
            name: "port",
            label: "端口:",
            required: true,
            validate: "NotEmpty,NotNegativeNume",
            placeholder: "例：9809"
          },
          {
            type: "input",
            className: "layui-col-md6",
            name: "version",
            label: "版本号:",
            placeholder: "例：1.0.0"
          }
        ]
      }

      ]
    }
    ];

    var res_inst = new AdminPlant({
      instance: new PlgGrid(setConfig(res_opts)).loadData(),
      addBtnUrl: APIS.settings.server.instanceInfo(),
      //  editBtnUrl: APIS.settings.server.update(),
      //   delBtnUrl: APIS.settings.server.deleteAll(),
      //   downBtnUrl: APIS.settings.server.download(),
      //   importBtnUrl: APIS.settings.server.import(),
    }).init();

    getAllServersList(res_inst.PlgGridInstance.getToolBarForm().getCombo("serverhost"), "");
    res_inst.showDialogAfter(function (gridForm, data) {
      getAllServersList(gridForm.getCombo("serverhost"), gridForm.getFormData().serverhost);
    })

    window.global_fun.instance.deleteClick = function (id) {
      res_inst.PlgGridInstance.selectRowById(id);
      res_inst.delBtnUrl = APIS.settings.server.instanceInfo() + '/' + id;

      res_inst.delBtn('DELETE', null);
    };



    //部署 
    window.global_fun.instance.arrangeClick = function (id) {
      // res_inst.PlgGridInstance.selectRowById(id);
      layer.confirm("是否部署应用", {
        title: '提示',
        btn: ["确定", "取消"] //按钮
      }, function (index) {
        layer.close(index);
        var _form = [{
          type: "row",
          list: [{
            type: "settings",
            labelWidth: 90,
            position: "label-left",
            labelAlign: "right"
          },
          {
            type: "hidden",
            name: "instanceId",
            value: id
          },
          {
            type: "combo",
            name: "applicationfile",
            label: "环境配置:",
            validate: "NotEmpty",
            required: true,
            placeholder: "",
            value: "prod",
            options: [
              { value: "pre", text: "pre" },
              { value: "prod", text: "prod" },
              { value: "test", text: "test" },
              { value: "dev", text: "dev" }
            ]
          },
          {
            type: "input",
            name: "command",
            label: "JVM参数:",
            required: true,
            validate: 'NotEmpty',
            rows: 3, labelTop: -20,
            value: "-Xms1g -Xmx2g -Xmn512m -Xss256k",
            placeholder: "例：-Xms1g -Xmx2g -Xmn512m -Xss256k"
          },

          {
            type: "block",
            className: "mt_15 right",
            list: [
              {
                type: "label",
                name: "fileName",
                label: "",
              },
              {
                type: "newcolumn"
              },
              {
                type: "button",
                name: "selectFile",
                value: '<i class="iconfont p-icon-daoru" style="color:#467cfd"></i> 选择文件',
              },
              {
                type: "newcolumn"
              },
              {
                type: "button",
                className: "btn-normal",
                name: "upload",
                value: '开始上传',
                disabled: true
              }
            ]
          },
          {
            type: "template",
            hidden: true,
            className: "jdk-upload left",
            format: function (name, value) {
              return `
                <button type="button" class="layui-btn layui-btn-primary" id="selectFile">
              `
            }
          }
          ]
        }
        ];
        var gridForm = new PlgForm({ items: _form });
        PlgDialog.open({
          title: '部署应用',
          content: `<div id="arrange"></div>`,
          closeBtn: 1,
          type: 1,
          area: ["400px", "250px"],
          resize: true,
          tipsMore: true,
          btn: null,
          // cancel: function(index, layero){ 
          //    gridForm=null
          //    return false; 
          // } ,
          success: function (ayero, index2) {
            gridForm.renderTo("arrange");
            var _selectFile = $("#selectFile");
            var _file_data = null;
            Prolog.upload({
              elem: _selectFile,
              auto: false,//不自动上传
              accept: 'file', //普通文件
              exts: '',
              multiple: false,
              acceptMime: "",
              choose: function (obj) {
                obj.preview(function (index, file, result) {
                  gridForm.setItemLabel("fileName", file.name);
                  gridForm.enableItem("upload");
                  _file_data = {
                    file: file,
                    command: gridForm.getItemValue("command"),
                    applicationfile: gridForm.getItemValue("applicationfile"),
                    instanceId: gridForm.getItemValue("instanceId")
                  };
                });
              }

            }, true);

            gridForm.on("onButtonClick", function (name) {
              if (name == "selectFile") {
                if (!gridForm.validate()) return false;
                _selectFile.click();

              } else if (name == "upload") {
                if (_file_data !== null) {
                  if (!gridForm.validate()) return false;
                  const formData = new FormData();
                  Object.keys(_file_data).forEach(key => {
                    formData.append(key, _file_data[key]);
                  });
                  var closeLoad = Prolog.loading2()
                  Prolog.ajax({
                    url: APIS.settings.server.setArrange(),
                    type: "post",
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (res) {
                      if (res.success) {
                        layer.closeAll()

                        layer.msg(res.message);
                      } else {
                        layer.open({
                          title: 'message'
                          , content: res.message || "上传错误"
                        });
                      }
                      closeLoad();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                      console.error("获取服务器列表信息错误:" + XMLHttpRequest.status);
                      layer.open({
                        title: 'message'
                        , content: XMLHttpRequest.status
                      });
                      closeLoad();

                    }
                  });
                }



              }
            })



          },

        });



      }, function () {
        close()
      });


    };

    //启动
    window.global_fun.instance.toggleClick = function (id, data) {

      layer.confirm("是否启动容器", {
        title: _t("提示"),
        btn: [_t("确定"), _t("取消")] //按钮
      }, function (index) {
        var close = PlgDialog.loading2();

        Prolog.ajax({
          url: APIS.settings.server.toggleContainer(),
          type: "post",
          data: {
            host: data.serverhost,
            containerName: data.containername,
            type: data.type
          },
          success: function (res) {

            if (res.success) {

              layer.msg(res.message);
              res_inst.PlgGridInstance.reload();

            } else {
              layer.open({
                title: 'message'
                , content: res.message || "启动错误"
              });
            }
            close();
            layer.close(index);
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.error("获取服务器列表信息错误:" + XMLHttpRequest.status);
            layer.open({
              title: 'message'
              , content: XMLHttpRequest.status
            });
            close();

          }
        });


      })





    }
    // //开始
    // window.global_fun.instance.startClick = function (id) {
    //   res_inst.PlgGridInstance.selectRowById(id);


    // };
    // //停止
    // window.global_fun.instance.stopClick = function (id) {
    //   res_inst.PlgGridInstance.selectRowById(id);


    // };


    res_inst.showDialogComplete(function (XMLHttpRequest, textStatus) {
      if (XMLHttpRequest.responseJSON.success) {
        global_fun.instance.arrangeClick(XMLHttpRequest.responseJSON.data)
      } else {
        layer.open({
          title: 'message',
          content: XMLHttpRequest.responseJSON.message || "上传错误"
        });

      }
    })





  })()
</script>