angularJS实战（一）
1、实现列表
思路：
accessCtrl.js
let AccessCtrl = function($scope, AlertService, DialogService, BigDataService, AdminBigDataService) {
let vm = $scope;
vm.pager = {
pageNo:1,
pageSize: 10,
totalCount: 0
};
vm.dataSourceTypeList=[
{
id:"1",
name:"DB2"
},
{
id:"2",
name:"Sybase"
},
{
id:"3",
name:"MySql"
},
{
id:"4",
name:"Oracle"
},
{
id:"5",
name:"FTP"
},
{
id:"6",
name:"HDFS"
},
{
id:"7",
name:"HIVE"
},
{
id:"8",
name:"HBase"
}
];
let queryData = {
isDataSourceSet:'1',//仅作为列表展示类别所用，不需要传给后台
systemId: '',
dataSourceName: '',
dataSourceType: '',
ipAddress: '',
userName: ''
};
//获取 数据源 访问管理列表,并分页
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.dataList = result.list;
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.queryAccessList = function () {
queryData.isDataSourceSet = vm.isDataSourceSet;
queryData.dataSourceName = vm.dataSourceName;
queryData.dataSourceType = vm.dataSourceType;
queryData.ipAddress = vm.ipAddress;
queryData.userName = vm.userName;
if(vm.isDataSourceSet=="1"){
getAccessMngList(1);
}
if(vm.isDataSourceSet=="2"){
getAccessMngSetList(1);
}
};
//获取所属系统列表
function getSystemList(){
BigDataService.getSystemList().then(function(result){
vm.systemList = result;
});
};
//监控所属系统下拉框的值的变化，取对应数据源访问管理列表
vm.$watch("query.systemId", function(newVal, oldVal) {
if (newVal !== oldVal) {
console.log("newVal*******"+newVal);
queryData.systemId = vm.query.systemId;
getAccessMngList(vm.pager.pageNo);
}
});
//查看明细
vm.detail = function (dataSourceId, dataSourceName, dataSourceType) {
// 弹出对话框
DialogService.modal({
key: "BigData.DataResource.DetailDialog",
url: "business/template/dataResource/detail-dialog.html"
}, {
data: {
dataSourceId: dataSourceId,
dataSourceType: dataSourceType
}
});
};
//查看引用
vm.lookLink = function (dataSourceId, dataSourceName, dataSourceType) {
DialogService.modal({
key: "BigData.DataResource.LinkDialog",
url: "business/template/dataResource/link-dialog.html"
},{
linkData: {
dataSourceId: dataSourceId,
dataSourceName: dataSourceName,
dataSourceType: dataSourceType
}
});
}
//数据源访问申请
vm.TipDialog=function(){
// 弹出对话框
DialogService.modal({
key: "BigData.DataResource.TipDialog",
url: "business/template/dataResource/tip-dialog.html"
});
};
//添加数据源集
vm.createDataSet = function () {
// 弹出对话框
DialogService.modal({
key: "BigData.DataResource.CreateSetDialog",
url: "business/template/dataResource/create-set-dialog.html",
/*accept: function (dataSourceGroupType) {
console.log(dataSourceGroupType);
if (dataSourceGroupType) {
// 弹出对话框
DialogService.modal({
key: "BigData.DataResource.CreateSetDialogNew",
url: "business/template/dataResource/create-set-dialog-new.html",
}, {
data: {
dataSourceGroupType: dataSourceGroupType
}
});
}
}*/
});
/* DialogService.modal({
key: "BigData.DataResource.CreateSetDialogNew",
url: "business/template/dataResource/create-set-dialog-new.html",
});*/
};
//改变数据源、数据源集展示列表
vm.changeDataSourceList=function(obj){
if(obj.isDataSourceSet=='1'){
vm.dataSourceTypeList=[
{
id:"1",
name:"DB2"
},
{
id:"2",
name:"Sybase"
},
{
id:"3",
name:"MySql"
},
{
id:"4",
name:"Oracle"
},
{
id:"5",
name:"FTP"
},
{
id:"6",
name:"HDFS"
},
{
id:"7",
name:"HIVE"
},
{
id:"8",
name:"HBase"
}
];
getAccessMngList(vm.pager.pageNo);
}
if(obj.isDataSourceSet=='2'){
vm.dataSourceTypeList=[
{
id:"1",
name:"DB2"
},
{
id:"2",
name:"Sybase"
},
{
id:"3",
name:"MySql"
},
{
id:"4",
name:"Oracle"
},
{
id:"5",
name:"FTP"
}
];
getAccessMngSetList(vm.pager.pageNo);
}
};
//修改数据源集
vm.updateSet = function (dataSourceGroupId, dataSourceGroupName, dataSourceGroupType) {
// 弹出对话框
DialogService.modal({
key: "BigData.DataResource.UpdateSetDialogNew",
url: "business/template/dataResource/update-set-dialog-new.html",
accept: function(formData) {
vm.isDataSourceSet = '2';
getAccessMngSetList(vm.pager.pageNo);
}
}, {
updateData: {
dataSourceGroupId: dataSourceGroupId,
dataSourceGroupName: dataSourceGroupName,
dataSourceGroupType: dataSourceGroupType,
}
});
};
//删除数据源集
vm.deleteSet = function (dataSourceGroupId,dataSourceGroupName) {
AlertService.confirm({
title: "确认",
content: "确定要删除"+dataSourceGroupName+"吗？"
}).then(function() {
//调用删除的接口
AdminBigDataService.deleteDataResourceGroups({dataSourceGroupId: dataSourceGroupId}).then(function(result){
vm.isDataSourceSet='2';
getAccessMngSetList(vm.pager.pageNo);
});
});
};
(function init(){
getAccessMngList(vm.pager.pageNo);
getSystemList();
})();
}
// AccessCtrl.$inject = ['$scope', 'DialogService'];
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、删除
angularJS实战（一）的更多相关文章
- AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...
- AngularJS实战项目（Ⅰ）--含源码
前言 钻研ABP框架的日子,遇到了很多新的知识,因为对自己而言是新知识,所以经常卡在很多地方,迟迟不能有所突破,作为一个稍有上进心的程序员,内心绝对是不服输的,也绝对是不畏困难的,心底必然有这样一股力 ...
- AngularJs学习笔记-慕课网AngularJS实战
第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3 ...
- AngularJS 实战讲义笔记
第一部分 快速上手 1.1 感受AngularJs四大核心特性(MVC, 模块化,指令系统,双向数据绑定)1.2 搭建自动化的前端开发,调试,测试环境 代码编辑工具 (sublime) 断点调试工具 ...
- [置顶] AngularJS实战之路由ui-sref-active使用
当我们使用angularjs的路由时,时常会出现一个需求,当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色) 接下来就看看Angular-UI-Router里的指令ui-sref-acti ...
- 《AngularJs实战》学习笔记(慕课网)
1. Controller使用过程中的注意点 不要试图去复用Controller, 一个控制器一般只负责一小块视图 不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要 ...
- angularjs实战
1.指令 transclude 保留原来的内容 replace 去掉<my-directive>指令 <script src="http://apps.bdimg.com ...
- AngularJS实战之cookie的读取
<!DOCTYPE html> <html ng-controller="cookies_controller"> <head> <tit ...
- AngularJS实战之ngAnimate插件实现轮播
第一步:引入angular-animate.js 第二步:注入ngAnimate var lxApp = angular.module("lxApp", [ 'ngAnimate' ...
随机推荐
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
php有一款插件叫做imagemagick,功能很强大,提供了图片的很多操作,图片剪切.压缩.合并.插入文本.背景色透明等.并且有api方法调用和命令行操作两种方式,如果只是简单处理的话建议api方法 ...
- bcp和load table
使用BCP和LOAD TABLE联合完成Sybase IQ 的数据导出和导入工作.说明: 表(视图)GN_TEST只有两个字段,TIMEID和MSISDN, 导出时我用'|'作为字段分隔符,'& ...
- VB6之截图
今天先把主要逻辑写出来,如果有时间就实现一个真正的截图工具. Private Declare Function BitBlt Lib "gdi32" (ByVal hDestDC ...
- linux可用更新源
Kali 2.0更新源kali-rolling:#中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contribde ...
- 真实记录我入门学习Linux系统的经历
我本身来说并不是计算机专业的学生,因此今天来谈及这个话题,对大家来说,有了更多的客观公正性.对我而言,linux给我最大的财富,并不是编程能力提高了多少,而是视野的开阔.心态的转变和自学能力的提高.我 ...
- 《javascript设计模式与开发实践》读书笔记之函数，this，闭包
一.函数基本理论 function compare(val1,val2){ return val1 - val2; }var result = compare(5,10); 1,函数的定义没什么意义, ...
- 修改tomcat编码方式
打开server.xml <Connector URIEncoding="UTF-8" connectionTimeout="20000" port=&q ...
- Hadoop-2.7.2集群的搭建——集群学习日记
前言 因为比赛的限制是使用Hadoop2.7.2,估在此文章下面的也是使用Hadoop2.7.2,具体下载地址为Hadoop2.7.2 开始的准备 目前在我的实验室上有三台Linux主机,因为需要参加 ...
- 全面理解SSD和NAND Flash
Flash Memory又叫做闪存,是一种非易失性存储器.非易失性是指断电之后数据不会丢失,这里就涉及到断电保护(后面详细讲解). 总体思路 1.NAND Flash的用途. 2.NAND Flash ...
- ant在持续集成的应用
一.Ant概述 Ant是一个Apache基金会下的跨平台的构建工具,它是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具. 在本文中,我主要让介绍Ant的命令.构建文件.最后部分以一个实 ...