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学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Creating Services
原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一 ...
随机推荐
- UOJ#103. 【APIO2014】Palindromes PAM模板题
原文链接www.cnblogs.com/zhouzhendong/p/UOJ103.html 前言 我终于会PAM啦 感谢CLY大佬手把手教我PAM 题解 建个 PAM. 统计一下每一个节点的 Rig ...
- Scrapy：Python实现scrapy框架爬虫两个网址下载网页内容信息——Jason niu
import scrapy class DmozSpider(scrapy.Spider): name ="dmoz" allowed_domains = ["dmoz. ...
- 变量前缀__device__以及__managed__
1.__device__ 作为变量前缀时,__device__限定符声明位于设备上的变量.如果此限定符单独使用,则变量具有以下特征: a.位于全局存储器空间中: b.与应用程序具有相同的生命周期: 可 ...
- 用OleDb导入Excel时提示驱动错误问题解决办法
导入格式为xls的excel文件,发生了错误 未处理System.Data.OleDb.OleDbException HResult=-2147467259 Message=外部数据库驱动程序 (1) ...
- mpvue-docs基于vue来开发微信小程序
http://mpvue.com/和https://tencent.github.io/wepy/
- 批量删除Excel里面的换行符
关于批量删除excel里面的换行符,应该说写程序的遇上excel大体都会有这么个问题,在解决这个问题前,我的解决办法是把excel 的数据全部复制到txt里面, 因为操作txt比操作excel更为简单 ...
- HBase MVCC 机制介绍
关键词:MVCC HBase 一致性 本文最好结合源码进行阅读 什么是MVCC ? MVCC(MultiVersionConsistencyControl , 多版本控制协议),是一种通过数据的多版本 ...
- 在Codeblocks下配置GoogleTest单元测试工具
开发工具 我和我的组员的都是使用的是大一老师推荐的codeblocks,所以,就愉快的决定了工具统一为codeblocks,语言C++. 测试单元 老师推荐的是JUnit和VSTS工具,但同学们从大一 ...
- 20175324王陈峤宇 《Java程序设计》第六周学习总结
教材学习内容总结 第七章 一.内部类与外部类的关系 1.内部类可以使用外嵌类的成员变量和方法.2.类体中不可以声明类变量和类方法,外部类可以用内部类声明对象.3.内部类仅供外嵌类使用.4.类声明可以使 ...
- 方便快捷的求导求积分解方程在线工具sage介绍
有时候我们需要进行一些复杂的数学计算,比如求导, 求积分,解方程,还是用abcd字母代表变量的方程等,这就需要进行复杂的数学运算还需要具备良好的数学基础.不过现在有一个非常方便的在线工具,只需要几 ...