angularJS学习（二）

1、实现列表

思路：

accessCtrl.js

  1 let AccessCtrl = function($scope, AlertService, DialogService, BigDataService, AdminBigDataService) {
  2   let vm = $scope;
  3   vm.pager = {
  4       pageNo:1,
  5       pageSize: 10,
  6       totalCount: 0
  7   };
  8   vm.dataSourceTypeList=[
  9     {
 10       id:"1",
 11       name:"DB2"
 12     },
 13     {
 14       id:"2",
 15       name:"Sybase"
 16     },
 17     {
 18       id:"3",
 19       name:"MySql"
 20     },
 21     {
 22       id:"4",
 23       name:"Oracle"
 24     },
 25     {
 26       id:"5",
 27       name:"FTP"
 28     },
 29     {
 30       id:"6",
 31       name:"HDFS"
 32     },
 33     {
 34       id:"7",
 35       name:"HIVE"
 36     },
 37     {
 38       id:"8",
 39       name:"HBase"
 40     }
 41   ];
 42   let queryData = {
 43     isDataSourceSet:'1',//仅作为列表展示类别所用，不需要传给后台
 44     systemId: '',
 45     dataSourceName: '',
 46     dataSourceType: '',
 47     ipAddress: '',
 48     userName: ''
 49   };
 50 
 51   //获取 数据源 访问管理列表,并分页
 52   function getAccessMngList(pageNo){
 53     BigDataService.getAccessMngList({pageNo: pageNo, pageSize: vm.pager.pageSize, systemId: queryData.systemId, dataSourceName: queryData.dataSourceName,
 54       dataSourceType: queryData.dataSourceType, ipAddress: queryData.ipAddress, userName: queryData.userName}).then(function(result){
 55       if(result){
 56         vm.dataList = result.list;
 57         vm.pager.totalCount = result.totalCount | 0;
 58         vm.pager.pageNo = result.pageNo;
 59         $scope.$broadcast('sn.controls.pager:toPage', vm.pager.pageNo);
 60       } 
 61     }); 
 62   }
 63 
 64     //获取 数据源集 访问管理列表,并分页
 65     function getAccessMngSetList(pageNo){
 66         BigDataService.getAccessMngSetList({pageNo: pageNo, pageSize: vm.pager.pageSize, dataSourceGroupName: queryData.dataSourceName,
 67             dataSourceGroupType: queryData.dataSourceType, ipAddress: queryData.ipAddress, userName: queryData.userName}).then(function(result){
 68             if(result){
 69                 // console.log(result);
 70                 vm.dataSetList = result.list;
 71                 vm.pager.totalCount = result.totalCount | 0;
 72                 vm.pager.pageNo = result.pageNo;
 73                 $scope.$broadcast('sn.controls.pager:toPage', vm.pager.pageNo);
 74             }
 75         });
 76     }
 77 
 78     $scope.$on("sn.controls.pager:pageIndexChanged", function (evt, page) {
 79         evt.stopPropagation();
 80         if(vm.isDataSourceSet=="1"){
 81             getAccessMngList(page.pageIndex + 1);
 82         }
 83         if(vm.isDataSourceSet=="2"){
 84             getAccessMngSetList(page.pageIndex + 1);
 85         }
 86     });
 87 
 88     //数据源查询列表,并分页（设置查询条件）
 89     vm.queryAccessList = function () {
 90         queryData.isDataSourceSet = vm.isDataSourceSet;
 91         queryData.dataSourceName = vm.dataSourceName;
 92         queryData.dataSourceType = vm.dataSourceType;
 93         queryData.ipAddress = vm.ipAddress;
 94         queryData.userName = vm.userName;
 95         if(vm.isDataSourceSet=="1"){
 96             getAccessMngList(1);
 97         }
 98         if(vm.isDataSourceSet=="2"){
 99             getAccessMngSetList(1);
100         }
101     };
102 
103   //获取所属系统列表
104   function getSystemList(){
105     BigDataService.getSystemList().then(function(result){
106       vm.systemList = result;
107     }); 
108   };
109 
110 
111 
112   //监控所属系统下拉框的值的变化，取对应数据源访问管理列表
113   vm.$watch("query.systemId", function(newVal, oldVal) {
114     if (newVal !== oldVal) {
115       console.log("newVal*******"+newVal);
116         queryData.systemId = vm.query.systemId;
117         getAccessMngList(vm.pager.pageNo);
118     }
119   });
120 
121   //查看明细
122   vm.detail = function (dataSourceId, dataSourceName, dataSourceType) {
123       // 弹出对话框
124       DialogService.modal({
125         key: "BigData.DataResource.DetailDialog",
126         url: "business/template/dataResource/detail-dialog.html"
127       }, {
128         data: {
129           dataSourceId: dataSourceId, 
130           dataSourceType: dataSourceType
131         }
132       });
133   };
134   //查看引用
135   vm.lookLink = function (dataSourceId, dataSourceName, dataSourceType) {
136       DialogService.modal({
137           key: "BigData.DataResource.LinkDialog",
138           url: "business/template/dataResource/link-dialog.html"
139       },{
140           linkData: {
141               dataSourceId: dataSourceId,
142               dataSourceName: dataSourceName,
143               dataSourceType: dataSourceType
144           }
145       });
146   }
147 
148   //数据源访问申请
149   vm.TipDialog=function(){
150     // 弹出对话框
151     DialogService.modal({
152       key: "BigData.DataResource.TipDialog",
153       url: "business/template/dataResource/tip-dialog.html"
154     });
155   };
156 
157     //添加数据源集
158     vm.createDataSet = function () {
159         // 弹出对话框
160         DialogService.modal({
161             key: "BigData.DataResource.CreateSetDialog",
162             url: "business/template/dataResource/create-set-dialog.html",
163             /*accept: function (dataSourceGroupType) {
164                 console.log(dataSourceGroupType);
165                 if (dataSourceGroupType) {
166                     // 弹出对话框
167                     DialogService.modal({
168                         key: "BigData.DataResource.CreateSetDialogNew",
169                         url: "business/template/dataResource/create-set-dialog-new.html",
170                     }, {
171                         data: {
172                             dataSourceGroupType: dataSourceGroupType
173                         }
174                     });
175                 }
176             }*/
177         });
178 
179        /* DialogService.modal({
180             key: "BigData.DataResource.CreateSetDialogNew",
181             url: "business/template/dataResource/create-set-dialog-new.html",
182         });*/
183     };
184 
185     //改变数据源、数据源集展示列表
186     vm.changeDataSourceList=function(obj){
187         if(obj.isDataSourceSet=='1'){
188             vm.dataSourceTypeList=[
189                 {
190                     id:"1",
191                     name:"DB2"
192                 },
193                 {
194                     id:"2",
195                     name:"Sybase"
196                 },
197                 {
198                     id:"3",
199                     name:"MySql"
200                 },
201                 {
202                     id:"4",
203                     name:"Oracle"
204                 },
205                 {
206                     id:"5",
207                     name:"FTP"
208                 },
209                 {
210                     id:"6",
211                     name:"HDFS"
212                 },
213                 {
214                     id:"7",
215                     name:"HIVE"
216                 },
217                 {
218                     id:"8",
219                     name:"HBase"
220                 }
221             ];
222             getAccessMngList(vm.pager.pageNo);
223         }
224         if(obj.isDataSourceSet=='2'){
225             vm.dataSourceTypeList=[
226                 {
227                     id:"1",
228                     name:"DB2"
229                 },
230                 {
231                     id:"2",
232                     name:"Sybase"
233                 },
234                 {
235                     id:"3",
236                     name:"MySql"
237                 },
238                 {
239                     id:"4",
240                     name:"Oracle"
241                 },
242                 {
243                     id:"5",
244                     name:"FTP"
245                 }
246             ];
247             getAccessMngSetList(vm.pager.pageNo);
248         }
249     };
250 
251     //修改数据源集
252     vm.updateSet = function (dataSourceGroupId, dataSourceGroupName, dataSourceGroupType) {
253         // 弹出对话框
254         DialogService.modal({
255             key: "BigData.DataResource.UpdateSetDialogNew",
256             url: "business/template/dataResource/update-set-dialog-new.html",
257             accept: function(formData) {
258                 vm.isDataSourceSet = '2';
259                 getAccessMngSetList(vm.pager.pageNo);
260             }
261         }, {
262             updateData: {
263                 dataSourceGroupId: dataSourceGroupId,
264                 dataSourceGroupName: dataSourceGroupName,
265                 dataSourceGroupType: dataSourceGroupType,
266             }
267         });
268     };
269 
270     //删除数据源集
271     vm.deleteSet = function (dataSourceGroupId,dataSourceGroupName) {
272         AlertService.confirm({
273             title: "确认",
274             content: "确定要删除"+dataSourceGroupName+"吗？"
275         }).then(function() {
276             //调用删除的接口
277             AdminBigDataService.deleteDataResourceGroups({dataSourceGroupId: dataSourceGroupId}).then(function(result){
278                 vm.isDataSourceSet='2';
279                 getAccessMngSetList(vm.pager.pageNo);
280             });
281         });
282     };
283 
284   (function init(){
285     getAccessMngList(vm.pager.pageNo);
286     getSystemList();
287   })();
288  
289 }
290 
291 // AccessCtrl.$inject = ['$scope', 'DialogService'];
292 export default app => app.controller('AccessCtrl', AccessCtrl);

View Code

access.html

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <div class="vertical-line"></div>
                <li class="vertical-top-5">
                    <a href="#/dataResource/access" class="controller-title color-black">数据源访问权限</a>
                </li>
                <div ng-show="dataList" class="pull-right vertical-top-5" style="190px; ">
                    <div style="display:inline-block;70px;">所属系统：</div>
                    <select style="display:inline-block;110px;margin-right:-10px;padding:5px 0px;"
                            ng-model="query.systemId">
                        <option value="">请选择</option>
                        <option value="{{item.systemId}}" ng-repeat="item in systemList">{{item.systemName}}</option>
                    </select>
                </div>
            </ol>
            <div class="box box-solid">
                <div class="box-body">
                    <div ng-show="dataList" class="col-md-12 padding-top-10">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <div class="col-md-12" style="margin-bottom: 15px">
                                    <label class="control-label customLargeLabel">已获得的访问授权：</label>
                                    <div class="vertical-top-5 pull-left margin-left-10">
                                        <button type="button" class="btn btn-query color-white" ng-click="TipDialog()">
                                            数据源访问申请
                                        </button>
                                    </div>
                                    <div class="vertical-top-5 pull-left padding-left-10">
                                            <button type="button" class="btn btn-query color-white" ng-click="createDataSet()">
                                                <img class="padding-left-10 padding-right-5" src="business/images/bigdata/ic_add_w.png" alt="添加数据源集">
                                                <span class="color-white padding-right-10">添加数据源集</span>
                                            </button>
                                    </div>
                                </div>
                                <div class="col-md-12" style="text-align: right">
                                    <label class="control-label customSmallLabel" style=" auto;">数据源展示类型：</label>
                                    <div class="col-sm-2" style="12%">
                                        <select class="form-control" ng-model="isDataSourceSet"
                                                ng-init="isDataSourceSet='1'" ng-change="changeDataSourceList(this)">
                                            <option value="1" selected>数据源</option>
                                            <option value="2">数据源集合</option>
                                        </select>
                                    </div>
                                    <label class="control-label customSmallLabel">名称：</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" maxlength="60"
                                               ng-model="dataSourceName">
                                    </div>
                                    <label class="control-label customSmallLabel">类型：</label>
                                    <div class="col-sm-2" style="12%">
                                        <select class="form-control" ng-model="dataSourceType">
                                            <option value="">全部</option>
                                            <option ng-repeat=" item in dataSourceTypeList" value="{{item.id}}">{{item.name}}</option>
                                        </select>
                                    </div>
                                    <label class="control-label customSmallLabel">IP：</label>
                                    <div class="col-sm-2" style="13%">
                                        <input type="text" class="form-control" maxlength="60" ng-model="ipAddress">
                                    </div>
                                    <label class="control-label customLabel">用户名：</label>
                                    <div class="col-sm-1">
                                        <input type="text" class="form-control" maxlength="60" ng-model="userName">
                                    </div>
                                    <button type="button" class="btn btn-query" ng-click="queryAccessList()">查询
                                    </button>
                                </div>
                            </div>
                        </form>
                        <table class="table table-striped table-hover border-bottom" ng-if="isDataSourceSet=='1'">
                            <thead>
                            <tr class="bg-lightgray border-left-right">
                                <th class="text-center">数据源ID</th>
                                <th class="text-center">数据源名称</th>
                                <th class="text-center">描述</th>
                                <th class="text-center">数据源修改时间</th>
                                <th class="text-center">最近修改人</th>
                                <th class="text-center">类型</th>
                                <th class="text-center" style="8%;">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-if="dataList.length < 1" class="border-left-right">
                                <td class="text-center" colspan="7">暂无对应数据</td>
                            </tr>
                            <tr ng-repeat="item in dataList" class="border-left-right">
                                <td class="text-center">{{item.dataSourceId}}</td>
                                <td class="text-center">{{item.dataSourceName}}</td>
                                <td class="text-center">{{item.dataSourceDesc}}</td>
                                <td class="text-center">{{item.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                <td class="text-center">{{item.updateUserName}}</td>
                                <td class="text-center">{{item.dataSourceType | DataSourceFilter}}</td>
                                <td class="text-center" style=" 12%">
                                    <a ng-href="" class="link-color cursor-p"
                                       ng-click="detail(item.dataSourceId, item.dataSourceName, item.dataSourceType)">查看明细</a>
                                   <!-- <a class="link-color cursor-p"
                                       ng-href="#/adminDataRes/accredit/{{item.dataSourceId}}">查看引用</a>-->
                                    <a class="link-color cursor-p"
                                       ng-click="lookLink(item.dataSourceId, item.dataSourceName, item.dataSourceType)">查看引用</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped table-hover border-bottom" ng-if="isDataSourceSet=='2'">
                            <thead>
                            <tr class="bg-lightgray border-left-right">
                                <th class="text-center">数据源集ID</th>
                                <th class="text-center">数据源集名称</th>
                                <th class="text-center">描述</th>
                                <th class="text-center">数据源集修改时间</th>
                                <th class="text-center">最近修改人</th>
                                <th class="text-center">类型</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="item in dataSetList" class="border-left-right">
                                <td class="text-center">{{item.dataSourceGroupId}}</td>
                                <td class="text-center">{{item.dataSourceGroupName}}</td>
                                <td class="text-center" title="{{item.dataSourceDesc}}">{{item.dataSourceDesc |
                                    limitTo:18}}
                                </td>
                                <td class="text-center">{{item.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                <td class="text-center">{{item.updateUserName}}</td>
                                <td class="text-center">{{item.dataSourceGroupType | DataSourceFilter}}</td>
                                <td class="text-center">
                                    <a class="link-color cursor-p"
                                       ng-click="updateSet(item.dataSourceGroupId, item.dataSourceGroupName, item.dataSourceGroupType)">修改</a>
                                    <a class="link-color cursor-p"
                                       ng-click="deleteSet(item.dataSourceGroupId, item.dataSourceGroupName)">删除</a>
                                    <!--<a class="link-color cursor-p"-->
                                    <!--ng-href="#/adminDataRes/accredit/{{item.dataSourceGroupId}}">授权</a>-->
                                </td>
                            </tr>
                            <tr ng-if="dataResSetList.length==0">
                                <td class="text-center" colspan="7">暂无数据</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pull-right" sn-pager itemsPerPage="{{pager.pageSize}}"
                             totalItems="{{pager.totalCount}}" listSize="10"></div>
                    </div>
                    <!-- <div ng-show="!dataList" class="col-md-12 padding-top-10">
                      <div class="text-center">
                        <div class="margin-top-30"><img src="business/images/bigdata/ic_bg.png" alt="Bg Picture"></div>
                        <div class="color-captions margin-top-30 margin-bottom-30">请先添加数据源访问权限数据</div>
                      </div>
                    </div> -->
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

View Code

2、添加数据源集(选择数据源集内容)

create-set-dialog.html

<div class="modal fade in" ng-controller="CreateSetDialogCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title controller-title">选择数据集类型&nbsp;&nbsp; <span class="area_warning" style="font-size: 14px;" ng-show="formCreate['dataSourceGroupType'].$error.required">必填</span></h4>
            </div>
            <form name="formCreate">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div class="col-sm-12">
                                    <div class="col-sm-1"></div>
                                    <div class="col-sm-2"><input type="radio" value="1" ng-model="create.dataSourceGroupType" name="dataSourceGroupType" ng-required="true" style="margin-right: 3px;vertical-align: text-bottom;">DB2</div>
                                    <div class="col-sm-2"><input type="radio" value="2" ng-model="create.dataSourceGroupType" name="dataSourceGroupType" ng-required="true" style="margin-right: 3px;vertical-align: text-bottom;">Sybase</div>
                                    <div class="col-sm-2"><input type="radio" value="3" ng-model="create.dataSourceGroupType" name="dataSourceGroupType" ng-required="true" style="margin-right: 3px;vertical-align: text-bottom;">MySql</div>
                                    <div class="col-sm-2"><input type="radio" value="4" ng-model="create.dataSourceGroupType" name="dataSourceGroupType" ng-required="true" style="margin-right: 3px;vertical-align: text-bottom;">Oracle</div>
                                    <div class="col-sm-2"><input type="radio" value="5" ng-model="create.dataSourceGroupType" name="dataSourceGroupType" ng-required="true" style="margin-right: 3px;vertical-align: text-bottom;">FTP</div>
                                    <div class="col-sm-1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-query" ng-click="confirm(formCreate)">确定</button>
                <button type="button" class="btn btn-operation" ng-click="cancel()">取消</button>
            </div>
        </div>
        </div>
    </div>
</div>

View Code

createSetDialogCtrl.js

let CreateSetDialogCtrl = function($scope, DialogService) {
  let vm = $scope;
  vm.create = {
    dataSourceGroupType:"1"
  };
  let dataSourceGroupType = {};
  //选择数据源集的类型
  vm.confirm = function(formCreate) {
    /*if(formCreate.$invalid){
        return;
    }*/
      if(formCreate.$invalid) {
          return;
      }
      dataSourceGroupType = vm.create.dataSourceGroupType;
      DialogService.modal({
          key: "BigData.DataResource.CreateSetDialogNew",
          url: "business/template/dataResource/create-set-dialog-new.html",
      }, {
          dataSourceGroupType: dataSourceGroupType,
          }
      );

   /* DialogService.accept("BigData.AdminDataRes.CreateSetDialog",vm.create.dataSourceGroupType);*/
  };

  vm.cancel = function() {
    DialogService.refuse("BigData.DataResource.CreateSetDialog", "");
  };

  vm.close = function() {
    DialogService.dismiss("BigData.DataResource.CreateSetDialog");
  };
    
}

export default app => app.controller('CreateSetDialogCtrl', CreateSetDialogCtrl);

View Code

3、数据源集

create-set-dialog-new.html

<div class="modal fade in" ng-controller="CreateSetDialogNewCtrl">
    <div class="modal-dialog" style="60%;">
        <!--添加数据源集-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title font-bold">数据源集</h4>
            </div>
            <div class="modal-body">
                <div class="col-sm-12 form-group">
                    <label class="control-label labelCenter" style="float: left">数据源名称：</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control pull-left" maxlength="30" ng-model="dataSourceGroupName01">
                    </div>
                </div>
                <div class="col-sm-12"  style="margin-bottom: 16px">
                    <label class="col-sm-4 control-label labelCenter">数据源列表：</label>
                    <div class="col-sm-8" >
                        <button class="btn btn-query color-white vertical-top-5 pull-right" style=" 60px" ng-click="dataSourceAdd()">添加</button>
                    </div>
                </div>
                <div class="col-sm-12">
                    <table class="table table-striped table-hover border-bottom">
                        <thead>
                        <tr class="bg-lightgray border-left-right">
                           <!-- <th class="text-center">数据源ID</th>-->
                            <th class="text-center">数据源名称</th>
                            <th class="text-center">数据源描述</th>
                            <th class="text-center">数据源类型</th>
                            <th class="text-center" style="8%;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in dataSetListNew" class="border-left-right">
                          <!--  <td class="text-center">{{item.dataSourceId}}</td>-->
                            <td class="text-center">{{item.dataSourceName}}</td>
                            <td class="text-center">{{item.dataSourceDesc}}</td>
                            <td class="text-center">{{item.dataSourceType | DataSourceFilter}}</td>
                            <td class="text-center" style=" 12%">
                                <a class="link-color cursor-p"
                                   ng-click="delete(item.dataSourceId, item.dataSourceName)">删除
                                </a>
                            </td>
                        </tr>
                        <tr ng-if="dataListNew.length < 1" class="border-left-right">
                            <td class="text-center" colspan="7">暂无对应数据</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pull-right" sn-pager itemsPerPage="{{pager.pageSize}}"
                         totalItems="{{pager.totalCount}}" listSize="5">
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button class="btn btn-query" style=" 130px" ng-click="confirmData()">确认新建数据源集</button>
            </div>
        </div>
    </div>
</div>

View Code

createSetDialogNewCtrl

let CreateSetDialogNewCtrl = function($scope, DialogService, BigDataService, AlertService, AdminBigDataService) {
    let vm = $scope;
    vm.pager = {
        pageNo:1,
        pageSize: 5,
        totalCount: 0
    };
    let queryData = {
        isDataSourceSet:'1',//仅作为列表展示类别所用，不需要传给后台
        systemId: '',
        dataSourceName: '',
        dataSourceType: '',
        ipAddress: '',
        userName: '',
        dataSourceGroupId: '',
    };
    //空的数组存选中的数据源的id
    vm.dataSourceIdsAll = [];
    vm.selectedOrderData = [];
    //传递的参数
    let dataSourceGroupType = vm.dataSourceGroupType;

    //获取 数据源 访问管理列表,并分页
    function getSingleDataResGroupDetailNew(pageNo){
        BigDataService.getSingleDataResGroupDetailNew({pageNo: pageNo, pageSize: vm.pager.pageSize, dataSourceGroupId: queryData.dataSourceGroupId}).then(function(result){
            if(result){
                vm.dataSetListNew = result;
                vm.pager.totalCount = result.totalCount | 0;
                vm.pager.pageNo = result.pageNo;
                $scope.$broadcast('sn.controls.pager:toPage', vm.pager.pageNo);
            }
        });
    };

    //新建数据源集，更新列表
    function getAccessMngSetList(pageNo){
        BigDataService.getAccessMngSetList({pageNo: pageNo, pageSize: vm.pager.pageSize, dataSourceGroupName: queryData.dataSourceName,
            dataSourceGroupType: queryData.dataSourceType, ipAddress: queryData.ipAddress, userName: queryData.userName}).then(function(result){
            if(result){
                // console.log(result);
                vm.dataSetList = result.list;
                vm.pager.totalCount = result.totalCount | 0;
                vm.pager.pageNo = result.pageNo;
                $scope.$broadcast('sn.controls.pager:toPage', vm.pager.pageNo);
            }
        });
    };

    $scope.$on("sn.controls.pager:pageIndexChanged", function (evt, page) {
        evt.stopPropagation();
        if(vm.isDataSourceSet=="1"){
            getAccessMngList(page.pageIndex + 1);
        }
        if(vm.isDataSourceSet=="2"){
            getAccessMngSetList(page.pageIndex + 1);
        }
    });

    //添加按钮
    vm.dataSourceAdd = function () {
        // 跳转到选择数据源弹窗
        DialogService.modal({
            key: "BigData.DataResource.CreateSetDialogAdd",
            url: "business/template/dataResource/create-set-dialog-add.html",
            accept:function(selectedOrder){
                // console.log(selectedOrder);
                //原始的数据源数组+选中数据源的数组，去除重复的
                for(var i=0;i<vm.selectedOrderData.length;i++){
                    for(var j=0;j<selectedOrder.length;j++){
                        if(vm.selectedOrderData[i].dataSourceId===selectedOrder[j].dataSourceId){
                            selectedOrder.splice(j,1);
                        }
                    }
                }
                for(var i=0; i<selectedOrder.length; i++){
                    vm.selectedOrderData.push(selectedOrder[i]);
                }
                //获取数据源id数组
                vm.selectedOrderData.forEach(function (value,index,array) {
                    vm.dataSourceIdsAll[index]=value.dataSourceId;
                });
                // console.log(vm.dataSourceIdsAll);
                //分页无效
                if(vm.selectedOrderData.length>0){
                    vm.dataSetListNew = vm.selectedOrderData;
                }
            }
        },{
            dataAdd:{
                dataSourceGroupType: dataSourceGroupType,
            }
        })
    }
    $scope.$on("sn.controls.pager:pageIndexChanged", function (evt, page) {
        evt.stopPropagation();
        getSingleDataResGroupDetailNew(page.pageIndex + 1);
    });

    //删除数据源
    vm.delete = function (dataSourceId, dataSourceName) {
        AlertService.confirm({
            title: "确认",
            content: "确定要删除"+dataSourceName+"吗？"
        }).then(function() {
            vm.selectedOrderData.forEach(function (value,index,array) {
                if(value.dataSourceId===dataSourceId){
                    vm.selectedOrderData.splice(index,1);
                }
            })
            vm.dataSetListNew = vm.selectedOrderData;
            // console.log( vm.selectedOrderData);
        });
    };

    //新建数据源集 button
    vm.confirmData =function () {
        if(!vm.dataSourceGroupName01){
            AlertService.alert({title: "温馨提示", content: "请填写数据源集名称。"});
            return;
        }
        //判断是否存在数据源
        if(vm.selectedOrderData.length===0){
            AlertService.alert({
                title: "温馨提示",
                content: "请选择数据源，请按“添加”按钮"
            });
            return;
        }
        //判断数据源集是否重名
        AdminBigDataService.getDataSourceSetName({dataSourceGroupName:vm.dataSourceGroupName01}).then(function(result2){
            if(result2==0) {
                BigDataService.addDataResGroup({ dataSourceGroupName: vm.dataSourceGroupName01, dataSourceGroupType: dataSourceGroupType, dataSourceIds: vm.dataSourceIdsAll });
                DialogService.dismiss("BigData.DataResource.CreateSetDialogNew");
                DialogService.dismiss("BigData.DataResource.CreateSetDialog");

            }else{
                AlertService.alert({title: "温馨提示", content: "请勿填写重复的数据源名称。"});
                return;
            }
        })
    };

    //关闭窗口
    vm.close = function() {
        DialogService.dismiss("BigData.DataResource.CreateSetDialogNew");
    };

};

export default app => app.controller('CreateSetDialogNewCtrl', CreateSetDialogNewCtrl);

View Code

4、添加数据源

create-set-dialog-add.html

<div class="modal fade in" ng-controller="CreateSetDialogAddCtrl">
    <div class="modal-dialog" style="60%;">
        <!--添加数据源集-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title font-bold">选择数据源</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12" style="text-align: right;margin-bottom: 10px">
                    <label class="control-label labelCenter" style="float: left">名称：</label>
                    <div class="col-sm-3">
                        <input type="text" id="getFocusName" class="form-control" maxlength="60" ng-model="dataSourceName" ng-change="dataSourceChange()"  style="padding-right: 28px">
                        <button type="button" class="close" ng-click="clearAll()" data-dismiss="modal" style="margin: -28px 10px"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    </div>
                    <label class="control-label labelCenter" style="float: left">类型：</label>
                    <div class="col-sm-2">
                        <select class="form-control" ng-model="queryData.dataSourceType" disabled>
                            <!--<option value="" selected>{{queryData.dataSourceType}}</option>-->
                            <!--<option ng-repeat=" item in suitTypeList" value="{{item.id}}">{{item.name}}</option>-->
                            <!--<option value="">全部</option>-->
                            <option selected>{{dataSourceTypeAdd | DataSourceSetFilter}}</option>
                        </select>
                    </div>
                    <label class="control-label labelCenter" style="float: left">IP：</label>
                    <div class="col-sm-2" >
                        <input type="text" id="getFocusIp" class="form-control" maxlength="60" ng-model="ipAddress" ng-change="dataSourceChange()">
                        <button type="button" class="close" ng-click="clearAllIP()" data-dismiss="modal" style="margin: -28px 10px"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    </div>
                    <label class="control-label labelCenter" style="float: left">用户名：</label>
                    <div class="col-sm-2">
                        <input type="text" id="getFocusUserName" class="form-control" maxlength="60" ng-model="userName" ng-change="dataSourceChange()">
                        <button type="button" class="close" ng-click="clearAllUserName()" data-dismiss="modal" style="margin: -28px 10px"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    </div>
                </div>
                <form name="formData">
                <div class="col-sm-12">
                    <table class="table table-striped table-hover border-bottom">
                        <thead>
                        <tr class="bg-lightgray border-left-right">
                            <th class="text-center"> <input type="checkbox" ng-model="select_all" ng-click="selectAll()"></th>
                            <th class="text-center">数据源名称</th>
                            <th class="text-center">数据源描述</th>
                            <th class="text-center">数据源类型</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-if="dataListNew.length < 1" class="border-left-right">
                            <td class="text-center" colspan="7">暂无对应数据</td>
                        </tr>
                        <tr ng-repeat="item in dataListNew" class="border-left-right">
                            <th class="text-center"> <input type="checkbox" value="option1" ng-model="item.checked" ng-click="selectOne()"></th>
                            <td class="text-center">{{item.dataSourceName}}</td>
                            <td class="text-center">{{item.dataSourceDesc}}</td>
                            <td class="text-center">{{item.dataSourceType | DataSourceFilter}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pull-right" sn-pager itemsPerPage="{{pager.pageSize}}"
                         totalItems="{{pager.totalCount}}" listSize="5"></div>
                </div>
                </form>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-query" ng-click="addData(formData)" style=" 100px">确定</button>
                <button type="button" class="btn btn-query" ng-click="close()" style=" 100px">取消</button>
            </div>
        </div>
    </div>
</div>

View Code

createSetDialogAddCtrl

let CreateSetDialogAddCtrl = function($scope, DialogService, BigDataService, AlertService) {
    let vm = $scope;

    vm.pager = {
        pageNo:1,
        pageSize: 5,
        totalCount: 0
    };
    let queryData = {
        isDataSourceSet:'1',//仅作为列表展示类别所用，不需要传给后台
        systemId: '',
        dataSourceName: '',
        dataSourceType: '',
        ipAddress: '',
        userName: ''
    };
    //获取传递的参数
    queryData.dataSourceType = vm.dataAdd.dataSourceGroupType;
    vm.dataSourceTypeAdd = queryData.dataSourceType;

   /* vm.dataSourceTypeList=[
        {
            id:"1",
            name:"DB2"
        },
        {
            id:"2",
            name:"Sybase"
        },
        {
            id:"3",
            name:"MySql"
        },
        {
            id:"4",
            name:"Oracle"
        },
        {
            id:"5",
            name:"FTP"
        },
    ];*/

    //获取数据源访问管理列表,并分页
    function getAccessMngList(pageNo){
        BigDataService.getAccessMngList({pageNo: pageNo, pageSize: vm.pager.pageSize, systemId: queryData.systemId, dataSourceName: queryData.dataSourceName,
            dataSourceType: queryData.dataSourceType, ipAddress: queryData.ipAddress, userName: queryData.userName}).then(function(result){
            if(result){
                vm.dataListNew = result.list;
                vm.pager.totalCount = result.totalCount | 0;
                vm.pager.pageNo = result.pageNo;
                $scope.$broadcast('sn.controls.pager:toPage', vm.pager.pageNo);
            }
        });
    };
    $scope.$on("sn.controls.pager:pageIndexChanged", function (evt, page) {
        evt.stopPropagation();
        getAccessMngList(page.pageIndex + 1);
    });


    //下拉框的类型值的变化，取对应数据源列表变化
    vm.$watch("query.dataSourceType", function(newVal, oldVal) {
        if (newVal !== oldVal) {
            console.log("newVal*******"+newVal);
            queryData.dataSourceType = vm.query.dataSourceType;
            getAccessMngList(1);
        }
    });

    //多选框
    vm.m = [];
    vm.selectedOrder = [];
    vm.selectAll = function () {
        if(vm.select_all){
            angular.forEach(vm.dataListNew, function (item) {
                item.checked = true;
                vm.selectedOrder.push(item);
            })
        }else{
            angular.forEach(vm.dataListNew, function (item) {
                item.checked = false;
                vm.selectedOrder = [];
            })
        }
        console.log(vm.selectedOrder);
    }
    vm.selectOne = function () {
        angular.forEach(vm.dataListNew, function (item) {
            let index = vm.selectedOrder.indexOf(item);
            if(item.checked && index === -1) {
                vm.selectedOrder.push(item);
            } else if (!item.checked && index !== -1){
                vm.selectedOrder.splice(index, 1);
            };
        });
        if(vm.dataListNew.length === vm.selectedOrder.length){
            vm.select_all = true;
        }else{
            vm.select_all = false;
        }
        console.log(vm.selectedOrder);
    };
    
    //确定按钮
    vm.addData = function () {
        if(vm.selectedOrder.length>0){
            // BigDataService.addDataResGroup({dataSourceGroupName: vm.dataSourceGroupName01, dataSourceGroupType: 1, dataSourceIds: vm.selectedOrder}).then(function () {
                DialogService.accept("BigData.DataResource.CreateSetDialogAdd", vm.selectedOrder);
            // })
        }else{
            AlertService.alert({title: "温馨提示", content: "请至少选择一项数据源。"});
            return;
        }

    }
    //单个查询，双向数据绑定
    vm.dataSourceChange = function () {
        queryData.dataSourceName = vm.dataSourceName;
        queryData.ipAddress = vm.ipAddress;
        queryData.userName = vm.userName;
        getAccessMngList(1);
    }

    vm.clearAll = function () {
        vm.dataSourceName = "";
        setTimeout(function(){document.getElementById("getFocusName").focus();},1000);
        queryData.dataSourceName = vm.dataSourceName;
        queryData.ipAddress = vm.ipAddress;
        queryData.userName = vm.userName;
        getAccessMngList(1);
    }

    vm.clearAllIP = function () {
        vm.ipAddress = "";
        setTimeout(function(){document.getElementById("getFocusIp").focus();},1000);
        queryData.dataSourceName = vm.dataSourceName;
        queryData.ipAddress = vm.ipAddress;
        queryData.userName = vm.userName;
        getAccessMngList(1);
    }
    vm.clearAllUserName = function () {
        vm.userName = "";
        setTimeout(function(){document.getElementById("getFocusUserName").focus();},1000);
        queryData.dataSourceName = vm.dataSourceName;
        queryData.ipAddress = vm.ipAddress;
        queryData.userName = vm.userName;
        getAccessMngList(1);
    }


    //关闭窗口
    vm.close = function() {
        DialogService.dismiss("BigData.DataResource.CreateSetDialogAdd");
    };

    (function init(){
        getAccessMngList(vm.pager.pageNo);
    })();

}

export default app => app.controller('CreateSetDialogAddCtrl', CreateSetDialogAddCtrl);

View Code

5、查看明细

detail-dialog.html

<div class="modal fade in" ng-controller="DetailDialogCtrl">
    <div class="modal-dialog">
        <!--数据库类detail-->
        <div ng-if="data.dataSourceType===1 || data.dataSourceType===2 || data.dataSourceType===3 || data.dataSourceType===4 || data.dataSourceType===8" class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title controller-title">数据库-数据源查看</h4>
            </div>
            <form name="form1">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">数据库名</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.dbName}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">字符编码</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.encoding}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">用户名</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.userName}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">密码</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control-static bg-lightgray word-wrap" value="{{detail.password}}" readonly style="border: 0px; 150px;"/>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">IP地址</label>
                            <div class="col-sm-10" style="padding-left: 10px;">
                                <table class="table table-hover border-bottom">
                                      <thead>
                                        <tr class="bg-lightgray border-left-right">
                                            <th class="text-center" style="20%">主/备</th>
                                            <th class="text-center" style="50%">IP地址</th>
                                            <th class="text-center" style="30%">权限类型</th>
                                        </tr>
                                      </thead>
                                      <tbody>
                                        <tr ng-repeat="item in detail.singleDatasource" class="border-left-right">
                                            <td class="text-center">{{item.masterOrSlave | MasterOrSlaveFilter}}</td>
                                            <td class="text-center">{{item.ip}}</td>
                                            <td class="text-center">{{item.permission | PermissionFilter}}</td>
                                        </tr>
                                      </tbody>
                                </table>  
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">数据源名</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.dataSourceName}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">端口号</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.port}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">描述</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.remark}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-query" ng-click="close()">关闭</button>
            </div>
        </div>
        <!--FTP类detail-->
        <div ng-if="data.dataSourceType===5" class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title font-bold">FTP-数据源查看</h4>
            </div>
            <form>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">IP地址</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.singleDatasource[0].ip}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">端口号</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.port}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">字符编码</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.encoding}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">用户名</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.userName}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">密码</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control-static bg-lightgray word-wrap" value="{{detail.password}}" readonly style="border: 0px; 150px;"/>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">数据源名</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.dataSourceName}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">描述</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.remark}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-query" ng-click="close()">关闭</button>
            </div>
        </div>
        <!--HDFS类detail-->
        <div ng-if="data.dataSourceType===6" class="modal-content">   
            <div class="modal-header">
              <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title font-bold">HDFS-数据源查看</h4>
            </div>
            <form name = "form1">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">数据源名</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.dataSourceName}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">字符编码</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.encoding}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">连接地址</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.fsdefaultname}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">描述</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.remark}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-query" ng-click="close()">关闭</button>
            </div>
        </div>
        <!--HIVE类detail-->
        <div ng-if="data.dataSourceType===7" class="modal-content">        
            <div class="modal-header">
              <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title font-bold">HIVE-数据源查看</h4>
            </div>
            <form name = "form1">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">数据库名</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.dbName}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-6">
                            <label class="col-sm-4 control-label labelCenter">字符编码</label>
                            <div class="col-sm-8">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.encoding}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">连接地址</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.fsdefaultname}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">数据源名</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.dataSourceName}}</p>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2 control-label labelCenter">描述</label>
                            <div class="col-sm-10"  style="padding-left: 10px;">
                                <p class="form-control-static bg-lightgray word-wrap">{{detail.remark}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-query" ng-click="close()">关闭</button>
            </div>
        </div>
    </div>
</div>

View Code

detailDialogCtrl.js

let DetailDialogCtrl = function($scope, DialogService, BigDataService) {
  let vm = $scope;

  let dataSourceId = vm.data.dataSourceId;
  //获取数据源明细
  function getDataResourceDetail(dataSourceId){
    BigDataService.getDataResourceDetail({dataSourceId: dataSourceId}).then(function(result){
      vm.detail = result;
    }); 
  };

  vm.close = function() {
      DialogService.dismiss("BigData.DataResource.DetailDialog");
  };

  (function init(){
    getDataResourceDetail(dataSourceId);
  })();
    
}

export default app => app.controller('DetailDialogCtrl', DetailDialogCtrl);

View Code

6、查看引用

link-dialog.html

<div class="modal fade in" ng-controller="LinkDialogCtrl">
    <div class="modal-dialog" style="60%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title font-bold">查看数据源引用</h4>
            </div>
            <div class="modal-body">
                    <div class="form-group col-sm-4">
                        <label class="col-sm-4 control-label labelCenter" >数据源名称：</label>
                         <div class="col-sm-8">
                            <p class="form-control-static bg-lightgray word-wrap">{{dataSourceName}}</p>
                         </div>
                    </div>
                    <div class="form-group col-sm-3">
                        <label class="col-sm-5 control-label labelCenter" >数据源类型：</label>
                        <div class="col-sm-7">
                            <p class="form-control-static bg-lightgray word-wrap">{{dataSourceType | DataSourceFilter}}</p>
                        </div>
                    </div>
                    <div class="form-group col-sm-3">
                        <label class="col-sm-5 control-label labelCenter" >套件类型：</label>
                        <div class="col-sm-7" >
                            <select class="form-control" ng-model="suitType" disabled>
                                <option value="" selected>数据开发</option>
                                <!--<option ng-repeat=" item in suitTypeList" value="{{item.id}}">{{item.name}}</option>-->
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button class="btn btn-query color-white pull-right" style=" 110px" ng-click="exportDataResource()">导出</button>
                    </div>
                <div class="col-sm-12"  style="margin-bottom: 16px">
                    <label class="control-label customLargeLabel">引用列表：</label>
                </div>
                <div class="col-sm-12">
                    <table class="table table-striped table-hover border-bottom">
                            <thead>
                            <tr class="bg-lightgray border-left-right">
                                <th class="text-center">任务名</th>
                                <th class="text-center">任务类型</th>
                                <th class="text-center">任务描述</th>
                                <th class="text-center">负责人</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="item in linkListNew" class="border-left-right">
                                <td class="text-center">{{item.jobName}}</td>
                                <td class="text-center">{{item.jobType | JobTypeFilter}}</td>
                                <td class="text-center">{{item.jobDesc}}</td>
                                <td class="text-center">{{item.responsibleUserName}}</td>
                            </tr>
                            <tr ng-if="linkListNew.length < 1" class="border-left-right">
                                <td class="text-center" colspan="7">暂无对应数据</td>
                            </tr>
                            </tbody>
                        </table>
                    <div class="pull-right" sn-pager itemsPerPage="{{pager.pageSize}}"
                          totalItems="{{pager.totalCount}}" listSize="5">
                     </div>
                 </div>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

View Code

linkDialog.js

let LinkDialogCtrl = function($scope, DialogService, BigDataService, AlertService) {
    let vm = $scope;
    vm.pager = {
        pageNo:1,
        pageSize: 5,
        totalCount: 0
    };
    vm.suitTypeList=[
        {
            id:"1",
            name:"数据开发"
        },
        {
            id:"2",
            name:"数据交换"
        },

    ];
    vm.dataSourceId = vm.linkData.dataSourceId;
    vm.dataSourceName = vm.linkData.dataSourceName;
    vm.dataSourceType = vm.linkData.dataSourceType;
    let suitType = 1;

    //获取查看引用列表,并分页
    function getJobLink(pageNo){
        BigDataService.getJobLink({pageNo: pageNo, pageSize: vm.pager.pageSize, dataSourceId: vm.dataSourceId, suitType: suitType}).then(function(result){
            if(result){
                vm.linkListNew = result;
                vm.pager.totalCount = result.totalCount | 0;
                vm.pager.pageNo = result.pageNo;
                $scope.$broadcast('sn.controls.pager:toPage', vm.pager.pageNo);
            }
        });
    };
    $scope.$on("sn.controls.pager:pageIndexChanged", function (evt, page) {
        evt.stopPropagation();
        getSingleDataResGroupDetailNew(page.pageIndex + 1);
    });

    //导出
    vm.exportDataResource = function () {
      BigDataService.downLoadJobInfos({dataSourceId: vm.dataSourceId, suitType: suitType}).then(function () {
          window.location.href = location.origin+baseUrl + "/dataResource/exportWorkConnectivity";
          window.location.target = "_blank";
      })
    };

    //关闭窗口
    vm.close = function() {
        DialogService.dismiss("BigData.DataResource.LinkDialog");
    };

    (function init(){
        getJobLink(vm.pager.pageNo);
    })();

}

export default app => app.controller('LinkDialogCtrl', LinkDialogCtrl);

View Code

7、数据源访问申请流程

tip-dialog.html

<div class="modal fade in" ng-controller="TipDialogCtrl" style="overflow:auto;">
    <div class="modal-dialog" style=" 50%;">
        <!--FTP类detail-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title font-bold">数据源访问申请流程</h4>
            </div>
            <form>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-sm-12">
                            <h5 style="line-height:20px;">
                               <i class="fa fa-circle fa-circle-green"></i> 步骤1：访问ITSM&nbsp;&nbsp;<a class="link-color" target="_blank" href="http://itsm.cnsuning.com">http://itsm.cnsuning.com；</a>
                            </h5>
                        </div>
                        <div class="line"></div>

                        <div class="form-group col-sm-12">
                            <h5 style="line-height:20px;">
                                <i class="fa fa-circle fa-circle-green"></i> 步骤2：点击菜单【服务目录】，选择服务请求类型为【数据库相关】，在查询列表里找到【数据库用户权限申请】并点击；
                            </h5>
                            <img class="tip" src="business/images/bigdata/tipBox_p1.png" alt="tipBox_step2"/>
                        </div>
                        <div class="line"></div>

                        <div class="form-group col-sm-12">
                            <h5 style="line-height:20px;">
                                <i class="fa fa-circle fa-circle-green"></i> 步骤3：进入【数据库用户权限申请】页面之后，填写申请信息，并且选择【用于大数据开发平台】，之后点击提交。
                            </h5>
                            <img class="tip" src="business/images/bigdata/tipBox_p2.png" alt="tipBox_step3"/>
                        </div>
                        <div class="line"></div>
                        <div class="form-group col-sm-12">
                            <h5 style="line-height:20px;">
                                <i class="fa fa-circle fa-circle-red"></i> 提示：大数据开发平台的worker&nbsp;ip地址名单&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-query" ng-click="download()">下载</button>
                            </h5>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-query" ng-click="close()">关闭</button>
            </div>
        </div>
    </div>
</div>

View Code

tipDialogCtrl.js

let TipDialogCtrl = function ($scope, DialogService,baseUrl) {
    let vm = $scope;

    //关闭窗口
    vm.close = function () {
        DialogService.dismiss("BigData.DataResource.TipDialog");
    };

    //下载worker ip
    vm.download = function () {
        console.log("location.origin******" + location.origin);
        window.location.href = location.origin+baseUrl + "/dataResource/downWorkConnectivity";
        window.location.target = "_blank";
    };


}

export default app => app.controller('TipDialogCtrl', TipDialogCtrl);

View Code

8、修改数据源集

update-set-dialog-new.html

<div class="modal fade in" ng-controller="UpdateSetDialogNewCtrl">
    <div class="modal-dialog" style="60%;">
        <!--添加数据源集-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title font-bold">数据源集</h4>
            </div>
            <div class="modal-body">
                <label class="control-label customLargeLabel">数据源集名称：</label>
                <div class="col-sm-8" style="margin-bottom: 16px">
                    <p class="form-control-static bg-lightgray word-wrap">{{dataSourceGroupName}}</p>
                </div>
                <div class="col-sm-12"  style="margin-bottom: 16px">
                    <label class="control-label customLargeLabel">数据源列表：</label>
                    <button class="btn btn-query color-white vertical-top-5 pull-right" style=" 60px" ng-click="dataSourceAdd()">添加</button>
                </div>
                <div class="col-sm-12">
                    <table class="table table-striped table-hover border-bottom">
                        <thead>
                        <tr class="bg-lightgray border-left-right">
                          <!--  <th class="text-center">数据源ID</th>-->
                            <th class="text-center">数据源名称</th>
                            <th class="text-center">数据源描述</th>
                            <th class="text-center">数据源类型</th>
                            <th class="text-center" style="8%;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in dataSetListNew" class="border-left-right">
                           <!-- <td class="text-center">{{item.dataSourceId}}</td>-->
                            <td class="text-center">{{item.dataSourceName}}</td>
                            <td class="text-center">{{item.dataSourceDesc}}</td>
                            <td class="text-center">{{item.dataSourceType | DataSourceFilter}}</td>
                            <td class="text-center" style=" 12%">
                                <a class="link-color cursor-p"
                                   ng-click="updateDelete(item.dataSourceId, item.dataSourceName)">删除
                                </a>
                            </td>
                        </tr>
                        <tr ng-if="dataListNew.length < 1" class="border-left-right">
                            <td class="text-center" colspan="7">暂无对应数据</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pull-right" sn-pager itemsPerPage="{{pager.pageSize}}"
                         totalItems="{{pager.totalCount}}" listSize="5">
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button class="btn btn-query" style=" 130px" ng-click="confirmData()">确认修改数据源集</button>
            </div>
        </div>
    </div>
</div>

View Code

updateSetDialogNew.js

let UpdateSetDialogNewCtrl = function($scope, DialogService, BigDataService, AlertService, AdminBigDataService) {
    let vm = $scope;
    vm.pager = {
        pageNo:1,
        pageSize: 5,
        totalCount: 0
    };
    //空的数组存选中的数据源的id
    vm.dataSourceIdsAll = [];
    vm.dataSourceGroupId = vm.updateData.dataSourceGroupId;
    vm.dataSourceGroupName = vm.updateData.dataSourceGroupName;
    vm.dataSourceGroupType = vm.updateData.dataSourceGroupType;

    //获取 数据源 访问管理列表,并分页
    function getSingleDataResGroupDetailNew(pageNo){
        BigDataService.getSingleDataResGroupDetailNew({pageNo: pageNo, pageSize: vm.pager.pageSize, dataSourceGroupId: vm.dataSourceGroupId}).then(function(result){
            if(result){
                vm.selectedOrderData = result;
                vm.dataSetListNew = vm.selectedOrderData;
                vm.pager.totalCount = result.totalCount | 0;
                vm.pager.pageNo = result.pageNo;
                $scope.$broadcast('sn.controls.pager:toPage', vm.pager.pageNo);
            }
        });
    };
    $scope.$on("sn.controls.pager:pageIndexChanged", function (evt, page) {
        evt.stopPropagation();
        getSingleDataResGroupDetailNew(page.pageIndex + 1);
    });

    //添加
    vm.dataSourceAdd = function () {
        // 跳转到选择数据源弹窗
        DialogService.modal({
            key: "BigData.DataResource.CreateSetDialogAdd",
            url: "business/template/dataResource/create-set-dialog-add.html",
            accept:function(selectedOrder){
               /* console.log('##############################');
                console.log(vm.selectedOrderData);
                console.log(selectedOrder);
                console.log('##############################');*/
                //原始的数据源数组+选中数据源的数组，去除重复的
                for(var i=0;i<vm.selectedOrderData.length;i++){
                    for(var j=0;j<selectedOrder.length;j++){
                        if(vm.selectedOrderData[i].dataSourceId===selectedOrder[j].dataSourceId){
                            selectedOrder.splice(j,1);
                        }
                    }
                }
                for(var i=0; i<selectedOrder.length; i++){
                    vm.selectedOrderData.push(selectedOrder[i]);
                }
                //数据源id数组
                vm.selectedOrderData.forEach(function (value,index,array) {
                    vm.dataSourceIdsAll[index]=value.dataSourceId;
                })
                // console.log(vm.dataSourceIdsAll);
                if(vm.selectedOrderData.length>0){
                    vm.dataSetListNew = vm.selectedOrderData;
                }
            }
        },{
            dataAdd:{
                dataSourceGroupType: vm.dataSourceGroupType,
            }
        });
    };

    //删除数据源
    vm.updateDelete = function (dataSourceId, dataSourceName) {
        AlertService.confirm({
            title: "确认",
            content: "确定要删除"+dataSourceName+"吗？"
        }).then(function() {
            vm.selectedOrderData.forEach(function (value,index,array) {
                if(value.dataSourceId===dataSourceId){
                    vm.selectedOrderData.splice(index,1);
                }
            })
            console.log( vm.selectedOrderData);
            vm.dataSetListNew = vm.selectedOrderData;
        });
    };

    //确认修改数据源集 button
    vm.confirmData =function () {
        //判断是否存在数据源
        if(vm.dataSetListNew.length>0){
            //数据源id数组
            vm.dataSetListNew.forEach(function (value,index,array) {
                vm.dataSourceIdsAll[index]=value.dataSourceId;
            })
            // console.log(vm.dataSourceIdsAll);
            BigDataService.addDataResGroup({ dataSourceGroupName:  vm.dataSourceGroupName, dataSourceGroupType: vm.dataSourceGroupType, dataSourceIds: vm.dataSourceIdsAll, dataSourceGroupId: vm.dataSourceGroupId});
            DialogService.dismiss("BigData.DataResource.UpdateSetDialogNew");
        }else{
            AlertService.alert({
                title: "温馨提示",
                content: "请选择数据源，请按“添加”按钮"
            })
            return;
        }
    }

    //关闭窗口
    vm.close = function() {
        DialogService.dismiss("BigData.DataResource.UpdateSetDialogNew");
    };

    (function init(){
        getSingleDataResGroupDetailNew(1);
    })();

}

export default app => app.controller('UpdateSetDialogNewCtrl', UpdateSetDialogNewCtrl);

View Code

10、删除

相关阅读:
k8s命令
 git绿色、红色图标不显示的问题
 Git下载
 文档（PDF Word Excel PPT）转HTML前端预览方案
 腾讯云生成临时访问链接
 cron表达式的双重人格：星期和数字到底如何对应？
Windows下nginx报错解决：CreateFile() "xxx/logs/nginx.pid" failed
Windows命令行在任意位置启动和退出nginx
解决博客园TinyMCE模式下内置插入代码块功能不支持Go语言的问题（两个并不完美的解决方案）
linux系统调用system()函数详解
原文地址：https://www.cnblogs.com/chengxs/p/7371453.html