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

<!-- 配置服务器 -->
<div class="plg-tab-container">
  <div class="plg-flex" style="height: 100%;">
    <div class="flex_item" id="settingSever">
      配置服务器
    </div>
  </div>
</div>
<style>
  .label-form-right .dhxform_txt_label2 {
    text-align: right;
    padding-right: 5px !important;
  }
</style>
<script>
  (function () {
    window.global_fun.setServer = {};

    var res_opts = {
      fixedLast: true,
      renderer: "settingSever",
      url: APIS.settings.server.serverinfo(),
      type: "get",
      params: {
        pageSize: 15
      }

      // pageNum: "pageNo",//设置分页参数页码key值，默认为pageNum
    };

    (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: "servername",
          align: "left",
          type: "ro",
          width: 400,
          render: function (v) {
            return `<b style="color:#2F4056">${v}</b>`;
          }
        },
        {
          type: "SSH端口",
          id: "sshport",
          hidden: true
        },
        {
          name: "IP地址",
          id: "serverhost",
          align: "center",
          type: "ro",
          width: 150
        },
        {
          name: "采集器安装",
          id: "collector",
          align: "center",
          type: "ro",
          width: 150,
          render: function (v) {
            return v ? `<i class="layui-badge-dot layui-bg-blue"></i> 已安装` : `<i class="layui-badge-dot"></i> 末安装`;
          }
        },
        {
          name: "说明",
          id: "description",
          align: "left",
          type: "ro"
        },
        {
          id: "op",
          name: "操作",
          type: "button",
          width: 120,
          align: "center",
          render: function (v, d) {
            return "修改^global_fun.setServer.editClick,删除^global_fun.setServer.deleteClick";
          }
        }
      ]);

    res_opts.toolbar = [
      {
        type: "row",
        blockOffset: 0,
        className: "layui-col-md12",
        list: [
          {
            type: "row",
            className: "layui-col-md6",
            blockOffset: 0,
            list: [
              {
                className: "layui-col-md4",
                type: "input",
                name: "servername",
                label: "服务器名称:",
                placeholder: "输入服务名称"
              },
              {
                className: "layui-col-md4",
                type: "input",
                name: "serverhost",
                label: "IP地址:",
                placeholder: "输入IP地址"
              },
              {
                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() + "服务器"
              }
            ]
          }
        ]
      }
    ];

    res_opts.formData = [
      {
        type: "row",
        list: [
          {
            type: "settings",
            labelWidth: 120,
            position: "label-left",
            labelAlign: "right"
          },
          {
            type: "hidden",
            name: "id",
            label: "id"
          },
          {
            type: "input",
            name: "servername",
            label: "服务名称:",
            required: true,
            validate: "NotEmpty",
            placeholder: _t("请输入服务名")
          },
          {
            type: "input",
            name: "serverhost",
            label: "服务器IP:",
            required: true,
            validate: "NotEmpty,ValidIPv4",
            placeholder: _t("请输入接口地址")
          },
          {
            type: "input",
            name: "sshport",
            label: "SSH端口",
            required: true,
            width: 100,
            validate: "NotEmpty,NotNegativeNume",
            placeholder: _t("请输入端口")
          },
          {
            type: "input",
            name: "username",
            label: "服务器登录用户名:",
            required: true,
            validate: "NotEmpty",
            placeholder: _t("请输入用户名")
          },
          {
            type: "password",
            name: "password",
            label: "服务器登录密码:",
            required: true,
            validate: "NotEmpty",
            placeholder: _t("请输入密码")
          },
          { type: "input", name: "description", label: "说明:", rows: 3, labelTop: -20, placeholder: "请填写这个服务器是干什么用的" },
          {
            type: "block",
            name: "isAotuCollector",
            blockOffset: 0,
            list: [
              {
                type: "label",
                className: "label-form-right",
                label: "采集器安装:",
                position: "label-right"
              },
              { type: "newcolumn" },
              {
                type: "block",
                blockOffset: 0,
                list: [
                  {
                    type: "settings",
                    labelWidth: 50,
                    position: "label-left",
                    labelAlign: "left"
                  },
                  { type: "radio", name: "_hasCollector", label: "已安装", value: true, position: "label-right" },
                  { type: "newcolumn" },
                  {
                    type: "radio",
                    name: "_hasCollector",
                    label: "未安装",
                    checked: true,
                    value: false,
                    position: "label-right"
                  }
                ]
              }
            ]
          },
          {
            type: "block",
            hidden: false,
            blockOffset: 0,
            name: "_content",
            list: [
              {
                type: "label",
                className: "label-form-right",
                label: "自动安装采集器:",
                position: "label-right"
              },
              { type: "newcolumn" },
              {
                type: "block",
                blockOffset: 0,
                list: [
                  {
                    type: "settings",
                    labelWidth: 50,
                    position: "label-left",
                    labelAlign: "left"
                  },
                  {
                    type: "radio",
                    name: "isAotuCollector",
                    label: "是",
                    value: true,
                    position: "label-right"
                  },
                  { type: "newcolumn" },
                  {
                    type: "radio",
                    value: false,
                    name: "isAotuCollector",
                    label: "否",
                    checked: true,
                    position: "label-right"
                  }
                ]
              }
            ]
          }
        ]
      }
    ];

    var res_inst = new AdminPlant({
      instance: new PlgGrid(setConfig(res_opts)).loadData(),
      rowDblClickedEdit: false,
      addBtnUrl: APIS.settings.server.serverinfo(),
      editBtnUrl: APIS.settings.server.serverinfo()
      //delBtnUrl: APIS.settings.server.serverinfo(),
      // downBtnUrl: APIS.settings.server.download(),
      // importBtnUrl: APIS.settings.server.import(),
    }).init();
    res_inst.PlgGridInstance.on("onchange", function (name) {});

    res_inst.showDialogSaveBtn(function (gridForm, data) {
      data.isAotuCollector = !!data.isAotuCollector;
      delete data._hasCollector;
      delete data._content;
      return data;
    });

    res_inst.showDialogAfter(function (gridForm) {
      gridForm.on("onChange", function (name, value) {
        if (name == "_hasCollector") {
          if (value) {
            gridForm.hideItem("_content");
            gridForm.setItemValue("isAotuCollector", false);
          } else {
            gridForm.showItem("_content");
          }
        } else if (name == "isAotuCollector") {
          //如果没有安装
          if (!gridForm.isItemHidden("_hasCollector")) {
            //是否安装
            gridForm.setItemValue("isAotuCollector", value);
          }
        }
      });
    });
    window.global_fun.setServer.editClick = function (id) {
      res_inst.PlgGridInstance.selectRowById(id);
      res_inst.editBtn();
    };
    window.global_fun.setServer.deleteClick = function (id) {
      res_inst.PlgGridInstance.selectRowById(id);
      res_inst.delBtnUrl = APIS.settings.server.serverinfo() + "/" + id;
      res_inst.delBtn("DELETE", null);
    };
  })();
</script>