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

<div class="plg-flex">

  <div id="notclientRes" 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="notclientResBtn" href="javascript:void(0)" class="disable">
        <i class="layui-icon layui-icon-right" style="font-size: 28px;"></i>
      </a>
      <a id="clientResBtn" href="javascript:void(0)" class="disable">
        <i class="layui-icon layui-icon-left" style="font-size: 28px;"></i>
      </a>
    </div>
  </div>

  <div id="clientRes" class="plg-flex-item" style="flex:1;height: 100%;">2</div>

</div>


<script>
        window.global_fun.clientResource={}

  //分配资源权限
  !function () {

    var notGroupOpts = {
      renderer: "notclientRes",
      skin: 2,
      className: "flex_panel",
      header: {
        isShow: true,
        title: "未分配资源",
      },
      url: APIS.resource.notlistbyclient(),
      params: { clientId: window.global_fun.clientResource.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: "clientRes",
      url: APIS.resource.listbyclient(),
      params: { clientId: window.global_fun.clientResource.clientId },
      skin: 1,
      header: {
        isShow: true,
        title: "已分配资源",
      },
    });

    var notGroupList = new PlgPanel(notGroupOpts);
    var GroupList = new PlgPanel(GroupOpts);

    notGroupList.groupBtn = document.getElementById("notclientResBtn");
    notGroupList.groupBtnText = "添加资源";
    notGroupList.resUrl = APIS.client.addResource();

    GroupList.groupBtn = document.getElementById("clientResBtn");
    GroupList.groupBtnText = "删除资源";
    GroupList.resUrl = APIS.client.removeResource();




    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.serviceName,
                  },
                  {
                    className: "layui-col-md3",
                    name: "model",
                    type: "template",
                    value: item.method,
                    style: "text-align: center"
                  },
                  {
                    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.source,
                  }
                ]
              })
          });
          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,
          resourceIds: resIds
        },
        success: function (resource) {
          if (resource.success) {
            PlgDialog.msg("分配成功");
            GroupList.listReload();
            notGroupList.listReload();
          } else {
            PlgDialog.msg(resource.message);

          }
        }
      })
    }









  }()

</script>