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

<div class="plg-tab-container">

  <div class="layui-carousel" id="res-carousel">
    <div carousel-item>
      <div id="client"></div>
      <div id="newForm">


      </div>
    </div>
  </div>
</div>

<script>

  (function () {

    window.global_fun.client={}

    var car = layui.carousel.render({
      elem: '#res-carousel',
      autoplay: false,
      index: 0,
      arrow: 'none',
      indicator: 'none',
      anim: "updown",
      width: '100%', //设置容器宽度
      height: '100%'
    });


    /* 此处切换页面 */
    function changePanel(tt = true, callback) {
      //点切切换时
      car.slide(tt);
      if (tt) {
        callback && setTimeout(function () {
          callback()
        }, 60);
      } else {

        res_inst.PlgGridInstance.reload();
        $("#newForm").empty()



      }
      tt = !tt;
    }

    var res_opts = {
      fixedLast: true,
      renderer: "client",
      url: APIS.client.getAuthmgr(),
      type: "get",
    };

    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
        },
        {
          id: "clientId",
          name: "用户名称",
          align: "left",
          type: "ro",
          width: 170,
          render: function (v) {
            return `<b style="color:#2F4056">${v}</b>`
          }
        },
        {
          name: "状态",
          id: "status",
          align: "center",
          width: 70,
          type: "ro",
          render: function (v) {
            return getStatus(v)
          }
        },

        {
          name: "授权类型",
          id: "authorizedGrantTypes",
          align: "left",
          type: "ro",
          render: function (v) {

            var d = v.split(',');
            d = d.map(function (item) {
              return `<span style="color:#01AAED">${item}</span>`
            });
            return d.join(`<i style="color:#ddd;padding: 0 5px;">|</i>`)
          }
        },
        {
          name: "授权范围",
          id: "scopes",
          align: "center",
          width: 150,
          type: "ro"
        },
        {
          name: "接入过期时间",
          width: 120,
          id: "accessTokenValiditySeconds",
          align: "center",
          type: "ron",
          render: function (v) {
            return v + "秒"
          }
        },
        {
          name: " 刷新过期时间",
          width: 140,
          id: "refreshTokenValiditySeconds",
          align: "center",
          type: "ron",
          render: function (v) {
            return v + "秒"
          }
        },

        {
          name: "说明",
          id: "notes",
          align: "left",
          type: "ro",
          render: function (v) {
            return !v && `<span style="color:#999">暂无说明</span>`
          }
        },
        {
          id: "op",
          name: "操作",
          type: 'button',
          width: "180",
          align: "center",
          render: function (v, d) {
            return '授权^global_fun.client.accreditClick,详情^global_fun.client.detailsClick,删除^global_fun.client.deleteClick';
          }
        }
      ];

    function setMainPanel(callback) {

      var t = callback();
      var mainOpts = {
        renderr: "newForm",
        skin: 0,
        className: "flex_panel",
        header: {
          isShow: true,
          title: t.title,
          moreBtn: [
            {
              name: `返回 <i class="layui-icon layui-icon-right" style="color:#1E9FFF"></i>`,
              className: "",
              style: "margin-right: 10px;",
              onClick: function (e) {
                changePanel(false);
                return false
              }
            }
          ],
        }
      }
      var mainpanel = new PlgPanel(mainOpts);
      mainpanel.renderBefore(function () {
        this.appendPanelBody(t.html);
      });

      mainpanel.renderTo("newForm");
      mainpanel.getElement.find(".layui-card-body").addClass("plg-flex-column");
      return mainpanel

    }

    //授权页面
    window.global_fun.client.accreditClick = function (id) {

      window.global_fun.client.clientId = id;
      res_inst.PlgGridInstance.selectRowById(window.global_fun.client.clientId);

      changePanel(true, function () {

        window.global_fun.client.clientId = id;

        setMainPanel(function () {
          return {
            title: "用户授权",
            html: `<div class="tip cl">
                  <span class="text"> <i class="layui-icon layui-icon-about" style="color:#bbb"></i> 重置客户端权限后，所有资源中心将重新请求授权中进行鉴权! </span>
                      <a class="right layui-btn layui-btn-normal layui-btn-radius" onclick="window.global_fun.client.resetUser(this)" href="javascript:void(0)">
                      <i class="layui-icon layui-icon-refresh" style="vertical-align: middle;"></i> 重置权限
                      </a>
                  </div>
                  <div id="accreditListTabs" class="plg-flex-column"></div>
                  `
          }
        });


        new PlgTabs({
          renderer: "accreditListTabs",
          indexActive: 0,
          className: "flex_tabs",
          content: [
            {
              title: "分配资源权限",
              url: "./pages/authorization/client.resource.html"
            },
            {
              title: "分配资源组权限",
              url: "./pages/authorization/client.resourceGroup.html"
            }
          ]

        })
      })


    };

    //状态显示 
    function getStatus(status) {
      if (status === 1) {
        return `<span class="layui-badge-dot layui-bg-blue"></span> 正常 `
      } else if (status === 2) {
        return `<span class="layui-badge-dot"></span> 冻结`

      } else if (status === 0) {
        return `<span class="layui-badge-dot layui-bg-orange"></span> 未激活`
      }
      return
    }


    //通过状态显示不同的按扭 
    function resultBtnStatus(dform, status) {
      var s = ["active", "freeze", "unfreeze"];

      //0 未激活-- 显示激活账号-active
      //1 正常-- 显示冻结账号-freeze
      //2 冻结-- 显示解冻账号-unfreeze
      s.forEach(function (item) {
        dform.disableItem(item);
        dform.hideItem(item);
      });
      dform.enableItem(s[status]);
      dform.showItem(s[status]);

      $("#statustemplate").html(getStatus(status))


      return dform
    }

    
     
          var statusBtn = {
          event: function (param, url, callback) {
            var close = Prolog.loading2();
            Prolog.ajax({
              type: "post",
              url: url,
              data: param,
              success: function (response) {
                if (response) {
                  callback && callback(response);
                }
                PlgDialog.msg(response.message);

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

        };




    //详情
    window.global_fun.client.detailsClick = function (id, data) {
      window.global_fun.client.clientId = id;
      res_inst.PlgGridInstance.selectRowById(window.global_fun.client.clientId);
      changePanel(true, function () {
        setMainPanel(function () {
          return {
            title: "用户详情",
            html: `<div class="tip cl" style="border:0;padding: 16px 16px 8px;">  
                         <div id="client_details"></div>      
                  </div>
                  <div class="plg-flex-column">
                      <div id="detalisForm"></div>
                    </div>
                  `
          }
        });

        /**详情头部信息*****/
        var detailsToolbar = new PlgForm({
          renderer: "client_details",
          items: [{
            type: "row",
            list: [
              {
                type: "template",
                className: "layui-col-md12",
                format: function () {
                  return `
              <div class="avatar bg-secondary">${data.clientId.substring(0, 1).toLocaleUpperCase()}</div>   
            <div class="u-text" style="display: inline-block;padding-left: 0">
              <div class="text" style="padding-right:10px;font-size:20px">
                <b>${data.clientId}</b>
                </div>
            </div>`
                }
              },
              {

                label: "状态:",
                type: "template",
                className: "left f14 row_list",
                offsetLeft: 20,
                format: function (v) {
                  return `<div id="statustemplate"></div>`
                }
              },

              {
                className: "layui-col-md4 ",
                type: "block",
                list: [
                  {
                    type: "button",
                    value: "初始化密码",
                    name: "resetpassword",
                    className: " btn-radius"
                  },
                  {
                    type: "newcolumn"
                  },
                  {
                    type: "button",
                    value: "修改密码",
                    name: "updatepassword",
                    className: " btn-radius"
                  }
                ]
              },

              {
                type: "block",
                className: "layui-col-md4 right",
                list: [
                  {
                    type: "button",
                    value: "冻结账号",
                    className: "btn-danger btn-radius",
                    name: "freeze",
                    hidden: true,
                    diasbled: true
                  },

                  {
                    type: "button",
                    value: "解冻账号",
                    className: "btn-warm btn-radius",
                    name: "unfreeze",
                    hidden: true,
                    diasbled: true
                  },

                  {
                    type: "button",
                    value: "激活账号",
                    className: "btn-success btn-radius",
                    name: "active",
                    hidden: true,
                    diasbled: true
                  },
                ]
              },

            ]
          }]
        });
        
        //0 未激活-- 显示激活账号-active
        //1 正常-- 显示冻结账号-freeze
        //2 冻结-- 显示解冻账号-unfreeze

        statusBtn.active= function () {
            statusBtn.event({id:window.global_fun.client.clientId}, APIS.client.active(), function (data) {
              resultBtnStatus(detailsToolbar, 1);
            })
          };
        statusBtn.freeze= function () {
          statusBtn.event({id:window.global_fun.client.clientId}, APIS.client.freeze(), function (data) {
              resultBtnStatus(detailsToolbar, 2);
            })
          };
        statusBtn.unfreeze= function () {
          statusBtn.event({id:window.global_fun.client.clientId}, APIS.client.unfreeze(), function (data) {
              resultBtnStatus(detailsToolbar, 1);
            })
          };
        statusBtn.resetpassword= function () {
          statusBtn.event({id:window.global_fun.client.clientId}, APIS.client.resetpassword())
          };
        statusBtn.updatepassword= function () {
          var form1 = null;
            var winoptions = {
              id: "wnd_001",
              title: _t("修改用户密码"),
              type: 1,
              closeBtn: 1,
              resize: true,
              tipsMore: true,
              btnAlign: 'c',
              btn: [_t("保存"), _t("取消")],
              btn1: function (index, layero) {
                var b = form1.validate();
                if (!b) return false;
                var close = PlgDialog.loading2();
                var fd = form1.getFormData();
                if (fd.newPassword == fd.oldPassword) {
                  PlgDialog.msg("新密码与旧密码相同", {
                    type: 1
                  });
                  close()
                  return;
                }
                if (fd.newPassword != fd.conwPwd) {
                  PlgDialog.msg("两次输入的密码不相同", {
                    type: 1
                  });
                  close()
                  return;
                };
                statusBtn.event(fd , APIS.client.updatepassword(),function(){
                  PlgDialog.close(index);
                });

              },
              btn2: function (index, layero) {
                 PlgDialog.close(index);
              },
              area: ['400px', '300px'],
              content: '<div id="edit_password"></div>',
              success: function (layero, index) {
                var formcfg = {
                  renderer: "edit_password",
                  items: [
                    {
                      type: "row",
                      className: "row_list layui-col-md12",
                      list: [
                        { 
                          type: "settings",
                          labelAlign: "right",
                          labelWidth: 80
                        },
                        {
                          type: "hidden",
                          name: "id",
                          value:window.global_fun.client.clientId
                        },
                        {
                          type: "password",
                          name: "oldPassword",
                          label: "旧密码:",
                          validate: "NotEmpty",
                          required: true
                        },
                        {
                          type: "password",
                          name: "newPassword",
                          label: "新密码:",
                          validate: "NotEmpty",
                          required: true
                        },
                        {
                          type: "password",
                          name: "conwPwd",
                          label: "确认密码:",
                          validate: "NotEmpty",
                          required: true
                        },
                        {
                          type: "label",
                          name: "msg",
                          label: "温馨提示：密码为 8~20 位的字母和数字组成，区分大小写！",
                          labelWidth: 350,
                        }
                      ]
                    },
                  ]
                };
                form1 = new PlgForm(formcfg);
              }
            };
            PlgDialog.open(winoptions);
          };
      
      
      

        resultBtnStatus(detailsToolbar, data.status);

        detailsToolbar.on("onButtonClick", function (name) {
          if (statusBtn[name]) {
            statusBtn[name]()
          }
        })


     //下面的详情表单
        var baseForm = new PlgForm({
          renderer: "detalisForm",
          items: [{
            type: "row",
            width: 500,
            className: "row_list",
            list: [
              {
                type: "settings",
                labelAlign: "right",
                labelWidth: 100,
              },
              {
               type: "hidden",
                name: "id",
               value:window.global_fun.client.clientId
               },
               {
                type: "multiselect",
                name: "authorizedGrantTypes",
                label: "授权类型",
                inputHeight:100,
                value:data.authorizedGrantTypes,
                required: true,
                options: [{
                  value: "authorization_code",
                  text: "authorization_code"
                },
                {
                  value: "implicit",
                  text: "implicit"
                }, {
                  value: "password",
                  text: "password"
                },
                {
                  value: "client_credentials",
                  text: "client_credentials",
                  selected: true
                },
                {
                  value: "refresh_token",
                  text: "refresh_token"
                }
                ],
              },
              
              {
                className: "layui-col-md12",
                type: "input",
                name: "scopes",
                required: true,
                validate: "NotEmpty",
                label: "授权范围:",
                value: data.scopes,
                placeholder: _t("请输入授权范围"),
              },
              {
                className: "layui-col-md12",
                type: "input",
                name: "accessTokenValiditySeconds",
                label: "接入过期时间:",
                value: data.accessTokenValiditySeconds,
                required: true,
                validate: "NotEmpty,ValidNumeric",
                placeholder: _t("请输入过期时间秒"),
                numberFormat: ["0 秒", "."],
              },
              {
                className: "layui-col-md12",
                type: "input",
                name: "refreshTokenValiditySeconds",
                label: "刷新过期时间:",
                value: data.refreshTokenValiditySeconds,
                required: true,
                validate: "NotEmpty,ValidNumeric",
                placeholder: _t("请输入过期时间秒"),
                numberFormat: ["0 秒", "."]
              },
              {
                className: "layui-col-md12",
                type: "input",
                name: "notes",
                label: "说明:",
                rows: 3,
                labelTop: -20,
                value:data.notes
              
              },
              {
                offsetTop: 20,
                className: "btn-border-link btn-lx layui-col-md6 flex_item_right",
                type: "button",
                value: "返回",
                name: "back",
                width: 150
              },
              {
                offsetTop: 20,
                className: "btn-normal btn-lx layui-col-md6",
                type: "button",
                name: "save",
                value: "保存",
                width: 150
              }
            ]
          }
          ]
        });


        baseForm.on("onButtonClick", function (name) {
          if (name == "back") {
            changePanel(false);
          } else if (name == "save") {
            var dform=baseForm.getFormData();
            var d = dform.authorizedGrantTypes;
            if(d && d.length>0){
              dform.authorizedGrantTypes = d.join(",");
            }else{
              Prolog.message("授权类型不能为空")
              return;
            }
            
            statusBtn.event(dform, APIS.client.update(),function(data){
              changePanel(false);
            })

          }
        });


      })
    };



    window.global_fun.client.resetUser = function () {
      layer.confirm("是否重置权限?", function (index) { 
              statusBtn.event({id:window.global_fun.client.clientId}, APIS.client.refreshauths())
            });
     };

    window.global_fun.client.deleteClick = function (id) {
      res_inst.PlgGridInstance.selectRowById(id);
      res_inst.delBtn({ id: id });
    };

    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: "likeMap",
            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() + "用户"
            }
        
          ]
        }]
    }];


    res_opts.formData = [{
      type: "block",
      width: 680,
      list: [{
        type: "settings",
        labelWidth: 120,
        width:200,
        position: "label-left",
        labelAlign: "right"
      },
      {
        type: "hidden",
        name: "id",
        label: "id",
        value: 0,
      },
      {
        type: "input",
        name: "clientId",
        label: "用户名称",
        width:200,
        required: true,
        validate: 'NotEmpty',
        placeholder: _t("请输入用户名称")
      },
      {
        type: "password",
        name: "inPwd",
        label: "输入密码",
        width:200,
        required: true,
        validate: 'NotEmpty',
        placeholder: _t("请输入密码")
      },
      {
        type: "password",
        name: "clientSecret",
        width:200,
        label: "确认密码",
        required: true,
        validate: 'NotEmpty',
        placeholder: _t("请再次输入确认密码")
      },
      {
        type: "input",
        name: "accessTokenValiditySeconds",
        label: "接入过期时间",
        width:200,
        required: true,
        validate: "NotEmpty,ValidNumeric",
        value: 43200,
        placeholder: _t("请输入过期时间秒"),
        numberFormat: ["0 秒", "."],
      },
      {
        type: "input",
        name: "refreshTokenValiditySeconds",
        label: "刷新过期时间",
        width:200,
        required: true,
        validate: "NotEmpty,ValidNumeric",
        value: 2592000,
        placeholder: _t("请输入过期时间秒"),
        numberFormat: ["0 秒", "."],
      },
      {type: "newcolumn"},
      {
        type: "multiselect",
        name: "authorizedGrantTypes",
        label: "授权类型",
        inputHeight:100,
        width:200,
        required: true,
        options: [{
          value: "authorization_code",
          text: "authorization_code"
        },
        {
          value: "implicit",
          text: "implicit"
        }, {
          value: "password",
          text: "password"
        },
        {
          value: "client_credentials",
          text: "client_credentials",
          selected: true
        },
        {
          value: "refresh_token",
          text: "refresh_token"
        }
        ],
      },
      {
        type: "input",
        name: "scopes",
        label: "授权范围",
        required: true,
        width:200,
        validate: "NotEmpty",
        value: "all",
        placeholder: _t("授权范围,多个使用逗号分隔")
      },
      {
        type: "input",
        name: "notes",
        //  validate: 'NotEmpty',
        //   required: true, 
        label: "说明:",
        width:200,
        rows: 3,
        labelTop: -20,
        placeholder: "请填写说明"
      }

      ]
    }
    ]

    var res_inst = new GridPlant({
      instance: new PlgGrid(setConfig(res_opts)).loadData(null, function () {
        window.global_fun.client.clientId && res_inst.PlgGridInstance.selectRowById(window.global_fun.client.clientId);
      }),
      addBtnUrl: APIS.client.addAuthmgr(),
      editBtnUrl: APIS.client.addAuthmgr(),
      delBtnUrl: APIS.client.deleteAuthmgr(),
      downBtnUrl: APIS.client.addAuthmgr(),
      importBtnUrl: APIS.client.addAuthmgr(),
      onRowDblClicked: false,
    }).init();

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

    })

    res_inst.PlgGridInstance.attachPageBarEvent(function (v) {
      res_inst.delBtn();
    });

    //删除方法
    res_inst.delBtn = function (paramsObj = null) {
      this.formatForm(3, "POST", _t("是否删除数据"), this.delBtnUrl, paramsObj)
    };

    //新加用户弹出框的回调
    res_inst.showDialogAfter(function (gridForm) {
      var DForm = gridForm.getDForm();

      DForm.setValidation("clientSecret",function(v){

        var is = (v === gridForm.getItemValue("inPwd"));
        setTimeout(function () {
          if (!is) {
            DForm.setNote("clientSecret", { text: "两组密码不一致，请重新输入", width: "auto" });
            DForm.getInput("clientSecret").parentNode.parentNode.classList.add("validate_error")
          } else {
            DForm.clearNote("clientSecret");
            DForm.getInput("clientSecret").parentNode.parentNode.classList.remove("validate_error")
          }
        }, 0)
        return is
      })


      gridForm.attachEvent("onBlur", function (name, value) {
        if (name === "clientSecret") {
          DForm.validateItem(name);
        }
      })
      return gridForm
    })


    res_inst.showDialogSaveBtn(function (gridForm, data) {
      //    data.clientSecret=data.outPwd;
      delete data.inPwd


    })




  })()

</script>