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

<div class="plg-tab-container ">
  <div class="plg-flex" style="height: 100%">
    <div class="layui-card plg-flex-item" style="flex: 0 0 auto;width: 33vw;">
      <div class="layui-card-header">资源组列表</div>
      <div class="layui-card-body" style="height: calc(100% - 0.42rem);">
        <div id="group_list"></div>
      </div>
    </div>

    <div class="layui-card plg-flex-item">
      <div class="layui-card-header">分配资源信息</div>
      <div class="layui-card-body plg-flex" style="height: calc(100% - 0.42rem); overflow: auto;">

        <div id="notGrouplist" class="plg-flex-item" style="flex:1; height: 100%"></div>
        <div class="plg-flex-item" style="height: 100%; flex: 0 0 auto;width:50px;">

          <div class="btnForm">
            <a id="notGroupListBtn" href="javascript:void(0)" class="disable">
              <i class="layui-icon layui-icon-right"></i>
            </a>
            <a id="GroupListBtn" href="javascript:void(0)" class="disable">
              <i class="layui-icon layui-icon-left"></i>
            </a>
          </div>
        </div>

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

      </div>
    </div>




  </div>


</div>


<style>
</style>

<script>

  (function () {
     window.global_fun.groupResource = {};

    var res_opts = {
      fixedLast: true,
      renderer: "group_list",
      url: APIS.groupResource.getList(),
      type: "get",
      formDataArea: [430, 250]
      //pageNum: "pageNo",//设置分页参数页码key值，默认为pageNum
    };


    res_opts.columns = [
      {
        name: "id",
        id: "id",
        hidden: true
      },
      {
        name: "资源组",
        id: "name",
        align: "left",
        type: "ro"
      },
      {
        name: "说明",
        id: "notes",
        align: "left",
        type: "ro"
      },
      {
        id: "op",
        name: "操作",
        type: 'button',
        width: "120",
        align: "center",
        render: function (v, d) {
          return '修改^global_fun.groupResource.editClick,删除^global_fun.groupResource.deleteClick';
        }
      }
    ];



    res_opts.toolbar = [{
      type: 'row',
      blockOffset: 0,
      className: "layui-col-md12",
      list: [
        {
          type: "row",
          className: "layui-col-md7",
          blockOffset: 0,
          list: [{
            className: "layui-col-md8",
            type: "input",
            name: "likeMap",
            label: "",
            placeholder: "服务名/地址"
          },
          {
            type: "button",
            className: "left",
            name: "selectAllBtn",
            value: PLG_BUTTON.value.searchBtn()
          },
          ]
        },
        {
          type: "block",
          className: "layui-col-md5 right",
          blockOffset: 0,
          list: [
            {
              type: "button",
              name: "addBtn",
              value: PLG_BUTTON.value.addBtn()
            },
            {
              type: "newcolumn"
            },
            {
              type: "button",
              name: "delBtn",
              className: "danger",
              value: PLG_BUTTON.value.alldelBtn(),
              disabled: true
            }
          ]
        }]
    }];
    res_opts.formData = [{
      type: "row",
      list: [{
        type: "settings",
        labelWidth: 90,
        position: "label-left",
        labelAlign: "right"
      },
      {
        type: "hidden",
        name: "id",
        label: "id",
        value: 0,
      },
      {
        type: "input",
        name: "name",
        label: "资源组",
        //    disable:true,
        required: true,
        validate: 'NotEmpty',
        placeholder: _t("请输入资源组名称")
      },
      { type: "input", name: "notes", validate: 'NotEmpty', required: true, label: "说明:", rows: 3, labelTop: -20, placeholder: "请填写这个服务是干什么用的" }
      ]
    }
    ]


    var res_inst = new GridPlant({
      instance: new PlgGrid(setConfig(res_opts)).loadData(),
      addBtnUrl: APIS.groupResource.groupAdd(),
      editBtnUrl: APIS.groupResource.update(),
      delBtnUrl: APIS.groupResource.groupDelete(),
      downBtnUrl: APIS.resource.download(),
      importBtnUrl: APIS.resource.import(),
    }).init();

    res_inst.delBtn = function (paramsObj = { ids: res_inst.idS }) {
      res_inst.formatForm(3, "POST", _t("是否删除数据"), res_inst.delBtnUrl, paramsObj)
    };

    res_inst.selectAllBtnAfter(function (obj) {
      var likeMap = res_inst.PlgGridInstance.getToolBarForm().getItemValue("likeMap");
      obj.name = likeMap
      obj.notes = likeMap
      delete obj.likeMap

    })
    //单击行分配资源
    res_inst.PlgGridInstance.on("onRowSelect",function(id){

      
      res_inst.PlgGridInstance.selectRowById(id);

      notGroupList.url = APIS.resource.listnotingroup(),
      notGroupList.params.groupId =id;
      notGroupList.listReload();



      GroupList.url = APIS.resource.listbygroup();
      GroupList.params.groupId =id;
      GroupList.listReload();
      

    })
    res_inst.editBtnAfter(function (dform) {
      dform.disableItem("name")
    });


    window.global_fun.groupResource.deleteClick = function () {
      res_inst.PlgGridInstance.selectRowById(arguments[0]);
      res_inst.delBtn()
    };
    window.global_fun.groupResource.editClick = function () {
      res_inst.PlgGridInstance.selectRowById(arguments[0]);
      res_inst.editBtn();
    };



    //分配资源给资源组方法
    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);

          }
        }
      })
    }


    var notGroupOpts = {
      renderer: "notGrouplist",
      skin: 2,
      className: "flex_panel",
      header: {
        isShow: true,
        title: "未分配资源",
      },
      // defaultBody: `<div id="listFrom_A"></div>`,
      //page: true,
      //  url: APIS.resource.getList(),
      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: "Grouplist",
      skin: 1,
      header: {
        isShow: true,
        title: "已分配资源",
      },
    });
    var notGroupList = new PlgPanel(notGroupOpts);
    var GroupList = new PlgPanel(GroupOpts);


    notGroupList.groupBtn = document.getElementById("notGroupListBtn");
    notGroupList.groupBtnText = "添加资源";
    notGroupList.resUrl = APIS.groupResource.addRes();

    GroupList.groupBtn = document.getElementById("GroupListBtn");
    GroupList.groupBtnText = "删除资源";
    GroupList.resUrl = APIS.groupResource.removeRes();

    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))
          console.log(this.checkIds)
        }
      }.bind(groupitem));



      groupitem.groupBtn.onclick = function (e) {
        if (this.classList.value == "disable" && groupitem.checkId.length > 0) return false
        addResByGroup(groupitem.resUrl, groupitem.params.groupId, 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.groupId, 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))

    }









  })()


</script>