TMS/plg-tms-std-web-vue/public/jq/pages/authorization/client.resourceGroup.html

<div class="plg-flex">

    <div id="notclientGrulp" class="plg-flex-item" style="flex:1; height: 100%"></div>
  
    <div class="plg-flex-item" style="height: 100%; flex: 0 0 auto;width:80px;">
  
      <div class="btnForm">
        <a id="notclientGrulpBtn" href="javascript:void(0)" class="disable">
          <i class="layui-icon layui-icon-right" style="font-size: 28px;"></i>
        </a>
        <a id="clientGroupBtn" href="javascript:void(0)" class="disable">
          <i class="layui-icon layui-icon-left" style="font-size: 28px;"></i>
        </a>
      </div>
    </div>
  
    <div id="clientGroup" class="plg-flex-item" style="flex:1;height: 100%;">2</div>
  
  </div>
  
  
  <script>
    //分配资源权限
    !function () {

      window.global_fun.clientResourceGroup={}
  
      var notGroupOpts = {
        renderer: "notclientGrulp",
        skin: 2,
        className: "flex_panel",
        header: {
          isShow: true,
          title: "未分配资源组",
        },
        url: APIS.groupResource.notlistbyclient(),
        params: { clientId: window.global_fun.clientResourceGroup.clientId },
        toolbar: [{
          type: "row",
          name: "tool",
          list: [
            {
              type: "row",
              className: "layui-col-md12",
              list: [
                {
                  className: "layui-col-md7",
                  type: "input",
                  name: "likeMap",
                  placeholder: "服务名/地址",
                },
                {
                  type: "button",
                  className: "left",
                  name: "selectAllBtn",
                  value: PLG_BUTTON.value.searchBtn(),
                },
                {
                  type: "checkbox",
                  className: "right",
                  name: "isAll",
                  labelWidth: "auto",
                  labelAlign: "left",
                  position: "label-right",
                  label: "全选",
                  disabled: true
  
                }
              ]
            }
          ]
        }],
        listFormData: [{
          type: "row",
          name: "res_panel_notgroup",
          list: [
            {
              name: "notData",
              type: "template",
              className: "layui-col-md12 ",
              format: function () {
                return `<span>暂无数据</span>`
              }
            }
  
          ]
        }
        ]
      }
  
  
      var GroupOpts = Object.assign({}, notGroupOpts, {
        renderer: "clientGroup",
        url: APIS.groupResource.listbyclient(),
        params: { clientId: window.global_fun.clientResourceGroup.clientId },
        skin: 1,
        header: {
          isShow: true,
          title: "已分配资源组",
        },
      });
  
      var notGroupList = new PlgPanel(notGroupOpts);
      var GroupList = new PlgPanel(GroupOpts);
  
      notGroupList.groupBtn = document.getElementById("notclientGrulpBtn");
      notGroupList.groupBtnText = "添加资源组";
      notGroupList.resUrl = APIS.client.addGroup();
  
      GroupList.groupBtn = document.getElementById("clientGroupBtn");
      GroupList.groupBtnText = "删除资源组";
      GroupList.resUrl = APIS.client.removeGroup();
  
  
  
  
      var grouparr = [notGroupList, GroupList];
  
      grouparr.forEach(function (groupitem) {
        //请求列表数据的回掉
        groupitem.done(function (self, data) {
  
          if (data.list.length > 0) {
  
            self.getListForm.hideItem("notData");
            self.getToolbar.getDForm().uncheckItem("isAll");
            self.page = true;
            self.getToolbar.enableItem("isAll");
            data.list.forEach(function (item) {
              self.getListForm.getDForm().addItem("res_panel_notgroup",
                {
                  type: "row",
                  className: "layui-col-md12 accr_list",
                  list: [
                    {
                      className: "layui-col-md7 lab-bold",
                      name: "_check-" + item.id,
                      type: "checkbox",
                      labelWidth: "auto",
                      labelAlign: "left",
                      position: "label-right",
                      label: item.name,
                    },
                  
                    {
                      className: "right link layui-col-md2",
                      type: "button",
                      value: groupitem.groupBtnText,
                      name: "id-" + item.id
                    },
                    {
                      className: "layui-col-md12 color-999 mt-10",
                      type: "template",
                      value: item.notes,
                    }
                  ]
                })
            });
            return setEventList(groupitem)
          }
  
          self.page = false;
          self.getToolbar.disableItem("isAll");
        });
  
  
        groupitem.getToolbar.on("onButtonClick", function (name) {
          if (name == "selectAllBtn") {
            var linkMap = groupitem.getToolbar.getItemValue("likeMap");
            groupitem.listReload({ serviceName: linkMap, source: linkMap, method: linkMap })
          }
        });
  
        groupitem.getToolbar.on("onChange", function (name) {
          if (name == "isAll") {
            this.checkIds = [];
            this.getListForm.forEachItem(function (names) {
              if (names.indexOf("_check") !== -1) {
                if (this.getToolbar.getDForm().isItemChecked(name)) {
                  this.getListForm.getDForm().checkItem(names);
                  this.checkIds.push(names.substr(7))
                  this.groupBtn.classList.remove("disable")
                } else {
                  this.getListForm.getDForm().uncheckItem(names);
                  this.groupBtn.classList.add("disable");
                }
              }
            }.bind(this))
          }
        }.bind(groupitem));
  
        groupitem.groupBtn.onclick = function (e) {
          if (this.classList.value == "disable" && groupitem.checkId.length > 0) return false
          addResByGroup(groupitem.resUrl,groupitem.params.clientId, groupitem.checkIds.join(","))
          groupitem.checkIds = [];
          groupitem.getToolbar.getDForm().uncheckItem("isAll");
          this.classList.add("disable");
        }
  
      })
  
  
  
      function setEventList(paramsGropu) {
        var getDForm = paramsGropu.getListForm.getDForm();
        paramsGropu.getListForm.on("onButtonClick", function (name) {
  
          if (name.indexOf("id") !== -1) {
  
            getDForm.checkItem("_check-" + name.substr(3));
  
            layer.confirm("是否" + paramsGropu.groupBtnText + "?", {
              btn: [_t("确定"), _t("取消")],
              btn1: function (index) { 
                addResByGroup(paramsGropu.resUrl, paramsGropu.params.clientId, name.substr(3));
              },
              btn2: function (index) {
                getDForm.uncheckItem("_check-" + name.substr(3));
  
              }
            })
          }
        });
        paramsGropu.getListForm.on("onChange", function (name) {
          paramsGropu.checkIds = [];
  
          if (name.indexOf("_check-") !== -1) {
            this.checkIds = [];
            var index = 0;
            this.getListForm.forEachItem(function (names) {
              if (names.indexOf("_check") !== -1) {
                index += 1
                var Checkname = names.substr(7);
                var checkItem = getDForm.isItemChecked(names)
                if (checkItem) {
                  this.checkIds.push(Checkname)
                }
              }
  
            }.bind(this))
  
            if (this.checkIds.length > 0) {
  
              if (this.checkIds.length === index) {
                this.getToolbar.getDForm().checkItem("isAll");
  
              } else {
                this.getToolbar.getDForm().uncheckItem("isAll");
  
              }
              this.groupBtn.classList.remove("disable")
  
            } else {
              this.groupBtn.classList.add("disable");
            }
          }
          //console.log(this.checkIds)
  
        }.bind(paramsGropu))
  
      }
  
  
  
  
  
      //分配资源给资源组方法
      function addResByGroup(url, ids, resIds) {
  
        Prolog.ajax({
          url: url,
          type: "post",
          data: {
            id: ids,
            groupIds: resIds
          },
          success: function (resource) {
            if (resource.success) {
              PlgDialog.msg("分配成功");
              GroupList.listReload();
              notGroupList.listReload();
            } else {
              PlgDialog.msg(resource.message);
  
            }
          }
        })
      }
  
  
  

  
    }()
  
  </script>