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

<div id="authorization" class="plg-tab-container">
  <div class="layui-carousel" id="authorization-carousel1">
    <div carousel-item>
      <div id="authorization-grid-1" style="min-height:500px;"></div>

      <div style="min-height:500px;">
        <blockquote class="layui-elem-quote layui-text plg-elem-quote" style="background:#fff;">
          给客户端<span id="clientId" class="plg-mark"></span>授权<a href="javascript:void(0)" style="margin-left: 15px;" id="authorization_cancel">关闭</a>
        </blockquote>
        <blockquote class="layui-elem-quote layui-text plg-elem-quote plg-authorization-style" style="background:#fff;">
          <div class="layui-form-item" style="margin-bottom: 0px;">
            <label class="layui-form-label" style="width:60px;padding:9px 0px;">授权类型</label>
            
              <!-- <div class="layui-form plg-authorization-list"> -->
              <form class="layui-form layui-input-block" id="plg-authorization-list" lay-filter="authorization" style="margin-left: 80px">
                <div class="layui-input-block layui-form">
                  <input type="checkbox" name="client_credentials" lay-skin="primary" title="客户端模式">
                  <div data-id="0406eec9-4c7c-4655-99ae-79d9d7813d3a" data-name="client_credentials" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><span>客户端模式</span><i class="layui-icon layui-icon-ok"></i></div>
                
                  <input type="checkbox" name="password" lay-skin="primary" title="密码模式" >
                  <div data-id="0406eec9-4c7c-4655-99ae-79d9d7813d3a" data-name="password" class="layui-unselect layui-form-checkbox " lay-skin="primary"><span>密码模式</span><i class="layui-icon layui-icon-ok"></i></div>
                
                  <input type="checkbox" name="authorization_code" lay-skin="primary" title="授权码模式" >
                  <div data-id="0406eec9-4c7c-4655-99ae-79d9d7813d3a" data-name="authorization_code" class="layui-unselect layui-form-checkbox " lay-skin="primary"><span>授权码模式</span><i class="layui-icon layui-icon-ok"></i></div>
                
                  <input type="checkbox" name="implicit" lay-skin="primary" title="授权码简化模式" >
                  <div data-id="0406eec9-4c7c-4655-99ae-79d9d7813d3a" data-name="implicit" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><span>授权码简化模式</span><i class="layui-icon layui-icon-ok"></i></div>
                
                </div>
              </form>
            
          </div>
        </blockquote>

        <div class="layui-row layui-col-space5" id="plg-main-zone">
          <div class="layui-col-xs6">
            <div class="layui-card">
              <div class="layui-card-header">权限组</div>
              <div class="layui-card-body" style="height:500px;">
                <div id="plg-authorization-group" class="layui-form"></div>
              </div>
            </div>
          </div>
          <div class="layui-col-xs6">
            <div class="layui-card">
              <div class="layui-card-header">权限</div>
              <div class="layui-card-body" style="height:500px;">
                <div id="plg-authorization" class="layui-form"></div>
              </div>
            </div>
          </div>
        </div>

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

<script type="text/javascript">
  (function () {
    // cSpell:ignore layui api authmgr augrid microservice multiselect newcolumn prologui fdata cindex layero
    var BASE_URL = '/api/service-authorization/';
    var form = layui.form;

    var opts = {
      columns: [{
          id: "id",
          name: "id",
          type: 'txt',
          width: "50",
          hidden: true
        },
        {
          id:"op",
          name:"操作",
          type:"button",
          width:"80",
          align:"center",
          render:function(){return "授权^authorization_grant";}
        },
        {
          id: "clientId",
          name: "客户端",
          type: 'txt',
          width: "150"
        },
        {
          id: "clientSecret",
          name: "密码",
          type: 'txt',
          width: "150"
        },

        {
          id: "authorizedGrantTypes",
          name: "授权类型",
          type: 'txt',
          width: "100"
        },
        {
          id: "scopes",
          name: "作用域",
          type: 'txt',
          align:'center',
          width: "120"
        },
        {
          id: "resourceIds",
          name: "资源",
          type: 'txt',
          width: "*"
        },
        {
          id: "authorities",
          name: "权限",
          type: 'txt',
          hidden: true
        },
        {
          id: "authorityGroups",
          name: "权限组",
          type: 'txt',
          hidden: true
        }
      ],
      multiselect: false,
      toolbar: [ {
          type: "newcolumn"
        },
        {
          type: "input",
          name: 'clientId',
          label: '客户端:',
          width: 300,
          placeholder: '请输入客户端名称'
        },
        {
          type: "newcolumn"
        },
        {
          type: "input",
          name: "authorities",
          label: "权限:",
          width: 300,
          placeholder: '请输入权限名称',
          offsetLeft: 10
        },
        {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "searchBtn",
          className: "",
          value: "查询"
        },
        {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "all",
          className: "normal",
          value: "所有"
        },
        {
          type: "newcolumn"
        }
      ],
      imagePath: "../../prologui/assets/PlgGrid",
      url: BASE_URL + 'authmgr/like', //数据接口
      type: "get", //数据提交方式，默认为get
      params: {}, //查询提交参数，分页参数默认为pageNum,pageSize
      page: true, //是否启用分页
      pageNum: "pageNo",
      totalCount: "totalCount" //总记录数字段，默认totalCount
    };


    var augrid = new PlgGrid(opts);
    augrid.renderTo("authorization-grid-1");
    augrid.loadData();

    var carousel = layui.carousel;
    var car = carousel.render({
      elem: '#authorization-carousel1',
      autoplay: false,
      index: 0,
      arrow: 'none',
      indicator: 'none',
      anim: "updown",
      width: '100%', //设置容器宽度
      height: '100%'
    });
    // 用户点击授权中的
    var tt = "add";

    function changePanel() {
      car.slide(tt);
      tt = tt == "sub" ? "add" : "sub";
    }

    $("#authorization-carousel1").on("click", "#authorization_cancel", function () {
      // 点击关闭的时候需要重新刷新页面，在其他页面可能有操作，数据变动了
      augrid.reload();
      changePanel()
    });


    var operationGroup = {
        searchBtn: function () {

          var fdata = augrid.getToolBarForm().getFormData();
          augrid.setParams(fdata);
          augrid.reload();

        },
        all: function () {
          augrid.getToolBarForm().clear();
          augrid.setParams({});
          augrid.reload();

        },
        grant: function (id,currentData) {
          // //console.log('授权之前要先选定信息');
          authorizationInit(currentData);
          authorizationTypeInit(currentData)
          form.render();
          changePanel(); // 切换
        }

      };

    augrid.attachToolBarEvent("onButtonClick", function (name) {
      if (name && operationGroup.hasOwnProperty(name)) {
        operationGroup[name]();
      }
    });

    window.authorization_grant = operationGroup["grant"];
    /*
      给用户授权初始化信息, 主要是渲染【权限组】【权限】的两个模块
    */
    function authorizationInit(data) {
      //console.log('进入到页面的初始化中来.....');
      var groupConfig = {
        //title:"资源管理",
        columns: [{
            id: "id",
            name: "id",
            type: 'ro',
            width: "50",
            hidden: true
          },
          {
            id: "op",
            name: "操作",
            align:"center",
            width: "80",
            type: "ro",
            render: function (v, record) {
              var checked = data["authorityGroups"].indexOf(record["name"]) > -1 ? 'checked=""' : '';
              return '<input type="checkbox" lay-filter="operatingAuthorizationGroup" ' + checked + ' value="' + record["name"] + '" lay-skin="switch" lay-text="ON|OFF">';
            
            }
          },
          {
            id: "name",
            name: "权限组名称",
            type: 'ed',
            width: "120"
          },
          {
            id: "description",
            name: "备注",
            type: 'ed',
            width: "250"
          }
         
        ],
        multiselect: false,
        toolbar: [{
            type: "settings",
            labelAlign: 'left',
            labelWidth: 65
          },
          {
            type: "block",
            id: "bk",
            blockOffset: 0,
            list: [
              {
                type: "input",
                name: "name",
                label: "权限组名称:",
                offsetLeft: 10,
                placeholder: '请输入权限组名称',
                width: 200
              }, {
                type: "newcolumn"
              },
              {
                type: "button",
                name: "searchBtn",
                value: "查询"
              }, {
                type: "newcolumn"
              }
            ]
          }
        ],
        imagePath: "../../prologui/assets/PlgGrid",
        url: "/api/service-authorization/service-resource/resourcegroup", //数据接口
        type: "GET", //数据提交方式，默认为get
        //filters:["#text_filter", "#select_filter","#numeric_filter","#text_filter","#text_filter"],
        pagebar: {
          type: 'full' //full simple
        },
        params: {
          pageSize: 20,
          pageNum: 1
        }, //查询提交参数，分页参数默认为pageNum,pageSize
        page: true, //是否启用分页
        pageNum: "pageNum", //设置分页参数页码key值，默认为pageNum
        totalCount: "totalCount" //总记录数字段，默认totalCount
      };

      var augridGroup = new PlgGrid(groupConfig);
      augridGroup.renderTo("plg-authorization-group");
      augridGroup.loadData(null, function(){
            form.render();
      });
      
      /*
        操作权限
      */
      form.on('switch(operatingAuthorizationGroup)', function(data){
        // //console.log('进入操作权限组的阶段');
        // //console.log('op ....');
        // //console.log(data);
        // //console.log('op ....');


        var sid = augrid.getSelectedRowId();   // 此处的【id】应该是当前用户的选择进来的id
        // 进入【添加权限】的阶段
        if(data.elem.checked){
          var loading = Prolog.loading2();
          Prolog.ajax({
            url: BASE_URL + 'authmgr/authoritygroup/' + sid,
            type: "POST",
            data: {"authorityGroup": data.value},
            success:function(da){
              loading();
              if(!da.success){
                PlgDialog.alert("操作失败,"+da.message);
              } else {
                // data.elem.checked = false;
              }
            },
            error:function(){
              // data.elem.checked = false;
              loading();
            }
          });
        }
        // 进入【删除权限组】的阶段
        if(!data.elem.checked){
          var loading = Prolog.loading2();
          Prolog.ajax({
            url: BASE_URL + 'authmgr/authoritygroup/' + sid,
            type: "POST",
            data: {"authorityGroup": data.value, _method: 'delete' },
            success:function(da){
              loading();
              if(!da.success){
                PlgDialog.alert("操作失败,"+da.message);
              } else {
              }
            },
            error:function(){
              loading();
            }
          });
        }

      }); 

      augridGroup.attachToolBarEvent("onButtonClick", function (name) {
        if (name == "searchBtn") {
          var fdata = augridGroup.getToolBarForm().getFormData();
          augridGroup.setParams(fdata);
          augridGroup.reload();
        }
      });

      var cellConfig = {
        //title:"资源管理",
        columns: [{
            id: "id",
            name: "id",
            type: 'ro',
            width: "50",
            hidden: true
          },
          {
            id: "op",
            name: "操作",
            width: "80",
            align:"center",
            type: "ro",
            render: function (v, record) {
              var checked = '';
              if(data["authorities"]){
                  var checked = data["authorities"].indexOf(record["serviceName"] + ":" + record["authNumber"]) >
                  -1 ? 'checked=""' : '';
                }
                return '<input type="checkbox" lay-filter="operatingAuthorization" ' + checked + ' value="' + (record["serviceName"] +
                  ":" + record["authNumber"]) + '" lay-skin="switch" lay-text="ON|OFF">';
              }
          },
          {
            id: "serviceName",
            name: "服务名",
            type: 'ed',
            width: "120"
          },
          {
            id: "authNumber",
            name: "权限编号",
            type: 'ed',
            width: "100"
          },
          {
            id: "notes",
            name: "备注",
            type: 'ed',
            width: "200"
          }
          
        ],
        multiselect: false,
        toolbar: [{
            type: "settings",
            labelAlign: 'left',
            labelWidth: 65
          },
          {
            type: "block",
            id: "bk",
            blockOffset: 0,
            list: [
              {
                type: "input",
                name: "serviceName",
                label: "服务名:",
                offsetLeft: 10,
                placeholder: '服务名',
                width: 200
              }, {
                type: "newcolumn"
              },{
                type: "input",
                name: "authNumber",
                label: "权限编号:",
                offsetLeft: 10,
                placeholder: '请输入权限编号',
                width: 200
              }, {
                type: "newcolumn"
              },
              {
                type: "button",
                name: "searchBtn",
                value: "查询"
              }, {
                type: "newcolumn"
              }
            ]
          }
        ],
        imagePath: "../../prologui/assets/PlgGrid",
        url: "/api/service-resource/resource", //数据接口
        type: "get", //数据提交方式，默认为get
        pagebar: {
          type: 'full' //full simple min
        },
        params: {
          pageSize: 10,
          pageNo: 1
        }, //查询提交参数，分页参数默认为pageNum,pageSize
        page: true, //是否启用分页
        pageNum: "pageNo", //设置分页参数页码key值，默认为pageNum
        totalCount: "totalCount" //总记录数字段，默认totalCount
      };
      
      var augridCell = new PlgGrid(cellConfig);
      augridCell.renderTo("plg-authorization");
      augridCell.loadData(null, function(){
        form.render();
      });

      augridCell.attachToolBarEvent("onButtonClick", function (name) {
        if (name == "searchBtn") {
          var fdata = augridCell.getToolBarForm().getFormData();
          augridCell.setParams(fdata);
          augridCell.reload();
        }
      });  



      /*
        操作权限
      */
      form.on('switch(operatingAuthorization)', function(data){
        // //console.log('进入添加权限操作');
        // //console.log('op ....');
        // //console.log(data);
        // //console.log(data.value);
        // //console.log('op ....');

        // 此处获取的id应该是当前选中的id进来的
        var sid = augrid.getSelectedRowId();  
        // //console.log('sid::' + sid);
        // //console.log('data.elem.checked::' + data.elem.checked);
        // 进入【添加权限】的阶段
        if(data.elem.checked){
          var loading = Prolog.loading2();
          Prolog.ajax({
            url: BASE_URL + '/authmgr/authority/'+ sid,
            type: "POST",
            data: {"authority": data.value},
            success:function(da){
              loading();
              if(!da.success){
                PlgDialog.alert("操作失败,"+da.message);
              }
            },
            error:function(){
              loading();
            }
          });
        }
        // 进入【删除权限】的阶段
        if(!data.elem.checked){
          var loading = PlgDialog.loading2();
          Prolog.ajax({
            url: BASE_URL + '/authmgr/authority/'+ sid,
            type:"POST",
            data:{"authority": data.value, _method: 'delete'},
            success:function(da){
              loading();
              if(!da.success){
                PlgDialog.alert("操作失败,"+da.message);
              }
            },
            error:function(){
              loading();
            }
          });
        }

      });  
    }

    /*
      给用户授权类型初始化信息
    */
    function authorizationTypeInit(data) {

      // 显示用户信息
      $('#clientId').html(data.clientId);

      // 渲染授权类型
      var authorizationType = [
        {
          text: '客户端模式',
          name: 'client_credentials'
        },
        {
          text: '密码模式',
          name: 'password'
        },
        {
          text: '授权码模式',
          name: 'authorization_code'
        },
        {
          text: '授权码简化模式',
          name: 'implicit'
        }
      ];
      
      var authorizedGrantTypeArr =[];
      if(data.authorizedGrantTypes){
        authorizedGrantTypeArr = data.authorizedGrantTypes.split(',');
      }

      authorizationType = authorizationType.map(function (val) {
        if (authorizedGrantTypeArr.indexOf(val.name) > -1) {
          val.checked = true;
        } else {
          val.checked = false;
        }
        return val;
      });

      var temStr = '',
      formConfig = {}; // layui_form,初始化，配置参数
      authorizationType.map(function (val) {
        temStr +=
          `
          <input type="checkbox" name="${ val.name }" lay-skin="primary" title="${ val.text }" >
          <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>${ val.text }</span><i class="layui-icon layui-icon-ok"></i></div>
        `;
        formConfig[val.name] = val.checked;
      })

      $('#plg-authorization-list').html(temStr);
      
      //表单初始赋值
      form.val('authorization', formConfig);


      // 监听用户选择授权类型的事件
      $('.plg-authorization-style').on('click', '.layui-form-checkbox', function () {

        var self = $(this);
        var currentCell = self.find('span').text();
        
        authorizationType.forEach(function(val){

          if(currentCell === val.text){
            if(val.checked){
              val.checked = false;
              updateauthorizationType();
            } else {
              val.checked = true;
              // //console.log('当前元素是未选中的，需要做添加操作');
              updateauthorizationType();
            }
          }

        });
        
        // 更新用户的授权类型
        function updateauthorizationType(){
          // //console.log('更新用户的授权类型');
          var temArr = [];

          authorizationType.forEach(function(val){
            if(val.checked){
              temArr.push(val.name);
            }
          });

          data.authorizedGrantTypes = temArr.join(',');
          
          var obj = data,  // 请求更新API的数据

              loading = Prolog.loading2();

          Prolog.ajax({
            url: BASE_URL + 'authmgr/update',
            type: 'post',
            data: obj,
            dataType: 'json',
            success: function (data) {
              loading();

              if (data.success) {
                

                layer.closeAll(); 
              } else {
                PlgDialog.alert(data.message);
              }
            }
          });

        }

      });


    }

  }())
</script>