文章出處
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
View Code
文章列表
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);
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="width:190px; ">
<div style="display:inline-block;width:70px;">所屬系統：</div>
<select style="display:inline-block;width: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="width: auto;">數據源展示類型：</label>
<div class="col-sm-2" style="width: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="width: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="width: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="width: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="width: 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 -->
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">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title controller-title">選擇數據集類型 <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>
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);
3、數據源集
create-set-dialog-new.html
<div class="modal fade in" ng-controller="CreateSetDialogNewCtrl">
<div class="modal-dialog" style="width:60%;">
<!--添加數據源集-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">×</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="width: 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="width: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="width: 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="width: 130px" ng-click="confirmData()">確認新建數據源集</button>
</div>
</div>
</div>
</div>
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);
4、添加數據源
create-set-dialog-add.html
<div class="modal fade in" ng-controller="CreateSetDialogAddCtrl">
<div class="modal-dialog" style="width:60%;">
<!--添加數據源集-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">×</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">×</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">×</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">×</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="width: 100px">確定</button>
<button type="button" class="btn btn-query" ng-click="close()" style="width: 100px">取消</button>
</div>
</div>
</div>
</div>
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);
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">×</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;width: 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="width:20%">主/備</th>
<th class="text-center" style="width:50%">IP地址</th>
<th class="text-center" style="width: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">×</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;width: 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">×</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">×</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>
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);
6、查看引用
link-dialog.html
<div class="modal fade in" ng-controller="LinkDialogCtrl">
<div class="modal-dialog" style="width:60%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">×</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="width: 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>
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);
7、數據源訪問申請流程
tip-dialog.html
<div class="modal fade in" ng-controller="TipDialogCtrl" style="overflow:auto;">
<div class="modal-dialog" style="width: 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">×</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 <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 ip地址名單 <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>
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);
8、修改數據源集
update-set-dialog-new.html
<div class="modal fade in" ng-controller="UpdateSetDialogNewCtrl">
<div class="modal-dialog" style="width:60%;">
<!--添加數據源集-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal"><span aria-hidden="true">×</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="width: 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="width: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="width: 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="width: 130px" ng-click="confirmData()">確認修改數據源集</button>
</div>
</div>
</div>
</div>
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);
10、刪除
文章列表
全站熱搜
留言列表
