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

<div id="resourcegroup" class="plg-tab-container">
	 
	 <div class="layui-carousel plg-bgc-transparent" id="resourcegroup-carousel1">
		  <div carousel-item>
		  	<!--
          作者：chenyongchao1027@163.com
          时间：2018-11-29
          描述：主页面
        -->
        <div class="layui-row layui-col-space5" id="plg-main-zone">
          <div class="layui-col-xs8">
            <div class="layui-card">
                <div class="layui-card-header">权限组</div>
                <div class="layui-card-body" style="height:calc(100vh - 167px);">
                  <div id="resourcegroup-grid-1"></div>
                </div>
              </div>
          </div>
          <div class="layui-col-xs4">
            <div class="layui-card">
                <div class="layui-card-header">权限</div>
                <div class="layui-card-body" style="height:calc(100vh - 167px);">
                  <div id="resourcegroup-grid-2"></div>
                </div>
              </div>
          </div>
        </div>

        <div>
          <blockquote class="layui-elem-quote layui-text plg-elem-quote" style="background:#fff;">
          为权限组<span id="resourceGroupName" class="plg-mark">Plg</span>分配权限<a href="javascript:void(0)" style="margin-left: 15px;" id="resourcegroup_details_cancel">关闭</a>
          </blockquote>
          <div id="resourcegroup-resource-grid-1" style="height:500px;" class="layui-form">
          </div>
        </div>
		  	
		</div>
	</div>	
</div>

<div>
<script>
  (function () {
    // cSpell:ignore layui api resourcegroup sourcegroup sourcegroup closetting pagebar confire makesure multiselect newcolumn prologui fdata cindex layero
    var BASE_URL = '/api/service-authorization/group';
    var myf = null;
    var opts = {
      columns: [{
          id: "id",
          name: "id",
          type: 'ro',
          width: "50",
          hidden: true
        },
        {
          id: "name",
          name: "权限组名称",
          type: 'ed',
          width: "300"
        },
        {
          id: "description",
          name: "备注",
          type: 'ed',
          width: "*"
        },
        {id:"op",name:"操作",type:'button',align:"center",width:"150",render:function(v,record){
   				return "选择权限^resourcegroup_detailClick";
   		}}
      ],
      multiselect: false,
      toolbar: [
        {
          type: "button",
          name: "deleteBtn",
          className: "danger plg-toolbar-right",
          value: "<i class='layui-icon layui-icon-delete'></i>删除"
        }, {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "updateBtn",
          className: "normal plg-toolbar-right",
          value: "<i class='layui-icon layui-icon-edit'></i>修改"
        }, {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "addBtn",
          offsetLeft: 10,
          className: "plg-toolbar-right",
          value: "<i class='layui-icon layui-icon-add-1'></i>添加"
        }, {
          type: "newcolumn"
        },
        {
          type: "input",
          name: 'name',
          label: '权限组名称:',
          width:300,
          placeholder:'请输入权限组名称'
        }, {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "searchBtn",
          value: "查询"
        }, {
          type: "newcolumn"
        },
        {
          type: "button",
          name: "all",
          className:'normal',
          value: "所有"
        }, {
          type: "newcolumn"
        }
      ],
      formData: [{
          type: "settings",
          inputWidth: 300,
          width: 400,
          labelWidth: 80,
          position: "label-left",
          labelAlign: "left"
        },
        {
          type: "hidden",
          name: "_method",
          value: "put"
        },
        {
          type: "hidden",
          name: "id",
          value: ""
        },
        {
          type: "input",
          name: 'name',
          label: '权限组名称:',
          placeholder: '请输入权限组名称',
          editable: false,
          validate: 'NotEmpty',
          required: true
        },
        {
          type: "hidden",
          name: 'resourceIds',
          value:" "
        },
        {
          type: "input",
          name: "description",
          label: "备注:",
          rows: 3,
          validate: 'NotEmpty',
          required: true,
          note: {text:"请尽可能以功能来命名"}
        }
      ],
      imagePath: "../../prologui/assets/PlgGrid",
      url: BASE_URL, //数据接口
      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 sourcegroup = new PlgGrid(opts);
    sourcegroup.renderTo("resourcegroup-grid-1");
    sourcegroup.loadData();

    sourcegroup.attachToolBarEvent("onButtonClick", function (name) {
      function deleteData() {

        var cindex = layer.confirm('确认要删除选中记录吗？', {
          title: "",
          btn: ['确认删除', '取消'] //可以无限个按钮
        }, function (index, layero) {
          
          var loading = PlgDialog.load();
          Prolog.ajax({
            url: BASE_URL+'/delete',
            data: {
              id: sourcegroup.getSelectedRowId()
            },
            type: "POST",
            success: function (data) {
              if (data.success) {
                sourcegroup.reload();
              } else {
                layer.msg(data.message);
              }
              PlgDialog.close(loading);
              PlgDialog.close(index);
            },
            error: function () {
              PlgDialog.close(loading);
              PlgDialog.close(index);
            }
          });
        }, function () {PlgDialog.close(index);});
      }

      var operationGroup = {
        searchBtn: function () {
          var fdata = sourcegroup.getToolBarForm().getFormData();
          sourcegroup.setParams(fdata);
          sourcegroup.reload();
        },
        all: function () {
          sourcegroup.getToolBarForm().clear();
          sourcegroup.setParams({});
          sourcegroup.reload();
        },
        addBtn: function () {
          //console.log('添加权限组');
          sourcegroup.showDialog(0, "添加", 430, 270, {
            url: BASE_URL+'/add',
            type: "post"
          });
          var gform = sourcegroup.getGridForm();
          gform.setItemValue("_method","post");
        },
        updateBtn: function () {
          sourcegroup.showDialog(1, "编辑", 430, 350, {
            url: BASE_URL+'/update',
            type: "post"
          });
        },
        deleteBtn: function () {
          deleteData();
        },
        columns: function () {
          sourcegroup.showColsSettingDialog(".closetting");
        }
      }

      if (name && operationGroup.hasOwnProperty(name)) {
        operationGroup[name]();
      }
    })

    // window.resource_editClick = function (rid, data) {
    //   ////console.log(JSON.stringify(data));
    //   sourcegroup.selectRowById(rid);
    //   sourcegroup.showDialog(1, "编辑", 430, 350, {
    //     url: BASE_URL,
    //     type: "put"
    //   });
    //   return false;
    // }

    //window.resource_deleteClick = deleteData;
   //权限
   var list_options={
	   		columns:[
	   				{id:"id",name:"序列",hidden:true},
	   	   			{id:"serviceName",name:"服务名"},
	   	   			{id:"resource",name:"权限"}
	   	   			],
			page:true,
			filters:["","#select_filter","#text_filter"],
			pagebar:{
	   			type:'simple' //full simple min
	   		},
			imagePath:"../codebase/images/",
			toolbar:[]
   	
   };
   var plgList = $("#resourcegroup-grid-2").initPlgGrid(list_options);
   //plgList.loadData();
   sourcegroup.on("onRowSelect",function(id){
       var rids = sourcegroup.getSelectedRowData()["resourceIds"];
       if(!rids){
         return;
       }
   		console.log("tttt",rids);
   		var res = rids.split(",");
   		var ay = new Array();
   		for(var i=0;i<res.length;i++){
   			var data ={};
   			var tp = res[i];
   			data["id"] = i+1;
   			data["serviceName"] = tp.substring(0,tp.indexOf(":"));
   			data["resource"] = tp.substring(tp.indexOf(":")+1);
   			ay.push(data);
   		}
   		plgList.setParams({pageSize: res.length,pageNum:1});
   		plgList.reload({"success":true,"message":"","data":{"list":ay,"totalCount":res.length}});
   });
   
   
  var tt = "add";
	function changePanel(){
		car.slide(tt);
		tt = tt=="sub"?"add":"sub";
  }
	$("#resourcegroup").on("click", "#resourcegroup_details_cancel", function(){
    //console.log('监听返回');
		sourcegroup.reload();
		changePanel();
  });
  
	window.resourcegroup_detailClick = function(id,data){
		sourcegroup.selectRowById(id);
		changePanel();
		var selectData = sourcegroup.getSelectedRowData();
		initResourcGrid(selectData);
    $('#resourceGroupName').html(selectData.name);
	}
	
	var carousel = layui.carousel;
  	var car = carousel.render({
    	elem: '#resourcegroup-carousel1',
    	autoplay:false,
    	index:0,
    	arrow:'none',
    	indicator:'none',
    	anim:"updown",
    	width: '100%', //设置容器宽度
    	height:'100%'
  	});
  	
  	function initResourcGrid(selectData){
  		var opts00 = {
			//title:"权限管理",
	   		columns:[
           {id:"id",name:"id",type:'ro',width:"50",hidden:true},
           {id:"op",name:"选择",width:"90",type:"ro",align:"center",render:function(v,record){
            // 选中的数据格式 001,002,20181203002test:002 
            var rids = selectData["resourceIds"];
            var checked = '';
            if(rids && rids.indexOf(record["id"])>-1){
              checked = 'checked=""';
            }
	   				return '<input type="checkbox" lay-filter="op" '+ checked +' value="'+(record["id"])+'" lay-skin="switch" lay-text="ON|OFF">';
	   			}},
	   			{id:"serviceName",name:"服务名",type:'ed',width:"200"},
	   			{id:"authNumber",name:"权限编号",type:'ed',width:"200"},
	   			{id:"source",name:"资源地址",type:'ed',width:"100"},
	   			{id:"method",name:"提交方式",type:'ed',width:"100"},
	   			{id:"notes",name:"备注",type:'ed',width:"*"}
	   			],
	   		multiselect:false,
	   		toolbar:[
	   			{type: "settings", labelAlign:'left', labelWidth: 65},
	   			{type:"block",id:"bk",blockOffset:0,list:[
	   				{type: "input", name: 'serviceName', label: '服务名称:',offsetLeft:5,placeholder:'请输入服务名称', width:300},{type: "newcolumn"},
			          {type:"input", name:"authNumber", label:"权限编号:",offsetLeft:10,placeholder:'请输入权限编号', width:300},{type: "newcolumn"},
			          {type:"input", name:"source", label:"资源地址:",offsetLeft:10,placeholder:'请输入资源地址', width:300,hidden:true},{type: "newcolumn"},
			          {type:"button", name:"searchBtn", value:"查询"}, {type: "newcolumn"},
			          {type:"button", name:"all", value:"重置",className:"normal"},{type: "newcolumn"},
			          {type:"button", name:"more2", value:"展开",className:"link toggle"}
	   			]}
	   		],
	   		imagePath:"../../prologui/assets/PlgGrid",
	   		url:"/api/service-authorization/resource/list",//数据接口
	   		type:"get",//数据提交方式，默认为get
	   		pagebar:{
	   			type:'full' //full simple min
	   		},
			params:{pageSize:10,pageNum:1},//查询提交参数，分页参数默认为pageNum,pageSize
			page:true, //是否启用分页
			pageNum:"pageNum",//设置分页参数页码key值，默认为pageNum
			totalCount:"totalCount" //总记录数字段，默认totalCount
	　　	};

      var augrid00 = new PlgGrid(opts00);
      augrid00.renderTo("resourcegroup-resource-grid-1");
      augrid00.loadData(null,function(){
        form.render();
      });
      augrid00.attachToolBarEvent("onButtonClick",function(name){
        if(name=="searchBtn"){
          var fdata = augrid00.getToolBarForm().getFormData();
          augrid00.setParams(fdata);
          augrid00.reload();
        }
      });
  	}
  	
  var form = layui.form;
  form.on('switch(op)', function(data){

      var sid = sourcegroup.getSelectedRowId();
      
      // //console.log('sid::' + sid);
      //console.log(data);
  		if(data.elem.checked){
  			var ld = PlgDialog.load();
  			Prolog.ajax({
  				url:"/api/service-authorization/group/recources/add",
  				type:"post",
  				data:{"id":sid,"resourceIds":data.value},
  				success:function(da){
  					PlgDialog.close(ld);
  					if(!da.success){
  						PlgDialog.alert("操作失败,"+da.message);
  					}
  				},
  				error:function(){
  					PlgDialog.close(ld);
  				}
  			});
  			////console.log(data.value); //开关value值，也可以通过data.elem.value得到
  		}else{
  			var ld = PlgDialog.load();
  			Prolog.ajax({
  				url:"/api/service-authorization/service-resource/resourcegroup/"+sid+"/removeresource ",
  				type:"post",
  				data:{"resource":data.value},
  				success:function(da){
  					PlgDialog.close(ld);
  					if(!da.success){
  						PlgDialog.alert("操作失败,"+da.message);
  					}
  				},
  				error:function(){
  					PlgDialog.close(ld);
  				}
  			});
  		}
	}); 
  	
  }());
</script>
</div>