angularjs之html中弹出一个页面显示框

Posted 2020-08-30 宋赟鑫 https://meilishiyan-song.t

<a ng-href="#">后退</a>
<div ng-controller="itEquipmentCreatController">
<div class="panelSelf panel panel-primary">
<div class="panel-heading">{{titleText}}</div>
<div class="panel-body">
<form class="form-horizontal fromSelf" role="from">
<div class="row">
<div class="col-xs-3">
<label class="control-label">项目编号：</label> <span class="colorSelf">*</span>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">项目名称：</label> <span class="colorSelf">*</span>
</div>
<div class="col-xs-3 col-xs-offset-1" >
<label class="control-label">项目负责人</label>
</div>
</div>

<div class="form-group row divRow">
<div class="col-xs-3">
<ui-select ng-model="pro.selected" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" ng-disabled="disabled" style="width: 150px;" title="Choose a proNo">
<ui-select-match placeholder="Please select">{{$select.selected.purchaseNo}}</ui-select-match>
<ui-select-choices repeat="pro in proNoesList | propsFilter: {purchaseNo: $select.search, purchaseName: $select.search}">
<div ng-bind-html="pro.purchaseNo +‘-‘+pro.purchaseName | highlight: $select.search"></div>
<!-- <small> -->
<!-- {{pro.purchaseNo +‘-‘+pro.purchaseName}} -->
<!-- </small> -->
</ui-select-choices>
</ui-select>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label ng-model="name" ng-disabled="isDisable" type="text" class="form-control">{{pro.selected.purchaseName}}</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label ng-model="address" ng-disabled="isDisable" type="text" class="form-control">{{pro.selected.projectLeader}}</label>
</div>
</div>

<div class="row divRow">
<div class="col-xs-3">
<label class="control-label">项目类别：</label>
</div>

<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">生效时间</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">结束时间</label>
</div>
</div>

<div class="row divRow">
<div class="col-xs-3 radio-inline">
<label class="col-xs-4"><input ng-disabled="radioAble" name="optionRadio" type="radio" value="1" />设备</label>
<label class="col-xs-4"><input ng-disabled="radioAble" name="optionRadio" type="radio" value="2"/>工程</label>
<label class="col-xs-4"><input ng-disabled="radioAble" name="optionRadio" type="radio" value="3" checked="checked"/>IT</label>
</div>

<div class="col-xs-3 col-xs-offset-1">
<label type="text" class="form-control">{{pro.selected.startTime |date:‘yyyy-MM-dd‘}}</label>
</div>

<div class="col-xs-3 col-xs-offset-1">
<label type="text" class="form-control">{{pro.selected.endTime |date:‘yyyy-MM-dd‘}}</label>
</div>
</div>

<div class="row divRow">
<div class="col-xs-3">
<label class="control-label">备注：</label>
</div>
</div>

<div class="row divRow">
<div class="col-xs-7">
<textarea class="form-control" rows="4" placeholder="填写备注" name="checkInfo" value="pro.selected.remark">{{pro.selected.remark}}</textarea>
</div>
</div>

<div class="row divRow form-inline">
<div class="col-xs-6">
<!-- 上传文件标签 <label for="file" class="btnSelf btn btn-info">上传文件</label>
<input type="file" id="file" style="display: none" file-upload multiple/><br/> -->

<label class="control-label">已上传附件：</label>
<label ng-model="name" class="control-label">{{file}}*****</label>
<button ng-disabled="disableFlag" type="button" class="btnSelf btn btn-info">下载文件</button>
</div>
</div>

<div class="row">
<div class="col-xs-3">
<label class="control-label">SI工程师人数：</label>
<span class="colorSelf">*</span>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label" >差旅无住宿天数：</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">差旅住宿天数：</label>
</div>
</div>
<div class="row divRow">
<div class="col-xs-3">
<input type="text" ng-model="siEngineerNumber" class="form-control" placeholder=""/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<input type="text" ng-model="travelDaysExcludeHotel" class="form-control" placeholder=""/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<input type="text" ng-model="travelDaysIncludeHotel" class="form-control" placeholder=""/>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<label class="control-label">餐饮次数：</label>
<span class="colorSelf">*</span>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label" >大工程运输费：</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">standby工时：</label>
</div>
</div>
<div class="row divRow">
<div class="col-xs-3">
<input type="text" ng-model="reparstTimes"" class="form-control" placeholder=""/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<input type="text" ng-model="trafficExpense" class="form-control" placeholder=""/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<input type="text" ng-model="standBy" class="form-control" placeholder=""/>
</div>
</div>
<div ng-controller="itEquipmentCreatController">
<div class="row divRow col-xs-offset-7">
<button ng-disabled="disableFlag" data-toggle="modal" data-target="#chooseGoods" type="button" class="btnSelf btn btn-info" ng-click="clearData()">挑选商品</button>
<button ng-disabled="disableFlag" ng-click="removeData(false)" type="button" class="btnSelf btn btn-info">移除</button>
</div>
</div>

<!-- 显示选中的商品 table list-->
<div ng-hide="visibles">
<div ui-grid="gridOptionsShow" class="grid" ui-grid-pagination ui-grid-cellNav ui-grid-selection ui-grid-auto-resize></div>
</div>

<div class="form-group row">
<div class="col-xs-12 ">
<button ng-click="" type="button" class="btnSelf btn btn-info" ng-hide="visible">保存</button>
<button ng-click="" type="button" class="btnSelf btn btn-info">取消</button>
</div>
</div>
</div>

<!-- 挑选商品 -->
<div id="chooseGoods" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="chooseGoodsLabel" aria-hidden="true">
<div style="margin-top: 30px;"></div>
<div class="modal-dialog" style="width: 70%; margin: auto;">
<div class="modal-content" style="padding: 20px;background-color: #EFEFEF;">
<div class="panel panel-primary">
<div class="panel-heading modal-title" id="chooseGoodsLabel">挑选设备</div>
<div class="panel-body">
<form class="form-horizontal fromSelf" role="from">
<div class="row divRow">
<div class="col-xs-3">
<label class="control-label">设备名称：</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">设备所用区域：</label>
</div>
<div class="col-xs-3 col-xs-offset-1">
<label class="control-label">设备分类：</label>
</div>
</div>
<div class="form-group row divRow">
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="" ng-model="equipmentName"/>
</div>
<div class="col-xs-3 col-xs-offset-1">
<ui-select ng-model="areaType.id" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" style="width: 150px;" title="Choose a areaType">
<ui-select-match placeholder="Please select">{{$select.selected.area}}</ui-select-match>
<ui-select-choices repeat="areaType in areaTypes | propsFilter: {id: $select.search, area: $select.search}">
<div ng-bind-html=" areaType.area | highlight: $select.search "></div>
<!-- <small> -->
<!-- {{areaType.area +‘-‘+areaType.id}} -->
<!-- </small> -->
</ui-select-choices>
</ui-select>
</div>
<div class="col-xs-3 col-xs-offset-1">
<ui-select ng-model="equipmenttype.id" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" style="width: 150px;" title="Choose a equipmenttype">
<ui-select-match placeholder="Please select">{{$select.selected.type}}</ui-select-match>
<ui-select-choices repeat="equipmenttype in equipmenttypes | propsFilter: {id: $select.search, code :$select.search, type: $select.search}">
<div ng-bind-html=" equipmenttype.type | highlight: $select.search "></div>
<!-- <small> -->
<!-- {{areaType.area +‘-‘+areaType.id}} -->
<!-- </small> -->
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="row divRow">
<div class="col-xs-12">
<button ng-click="showData(false)" type="button" class="btnSelf btn btn-info">查询</button>
<button data-dismiss="modal" type="button" class="btnSelf btn btn-info">取消</button>
<button ng-click="backShowData(false)" data-dismiss="modal" ng-hide="visible" type="button" class="btnSelf btn btn-info">确认选择</button>
</div>
</div>
</form>
</div>
</div>
<!-- 挑选商品table list-->
<div ng-hide="visibles2">
<div ui-grid="gridOptionsGoods" class="grid" ui-grid-pagination ui-grid-cellNav ui-grid-selection ui-grid-auto-resize></div>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="divRow"><a ng-href="#/">back up</a></div>

 

 

 

 

‘use strict‘;

myApp.controller(
‘itEquipmentCreatController‘, [
‘ItEquipmentCommonService‘,
‘$scope‘,
‘$location‘,
‘$http‘,
function(ItEquipmentCommonService,$scope,$location,$http,$timeout) {
$scope.titleText="设置项目-IT设备清单";//title show
//$scope.proNo="001";//项目编号
$scope.pro = {};//与页面上的对象要匹配
$scope.areaType={};//与页面上的对象要匹配
$scope.equipmenttype={};//与页面上的对象要匹配
$scope.proText="---选项目编号--";
/**
* 注：所有调用service的，不能写在事件中，如果写在事件中，会造成取值取不到的情况
*/
//查询项目编号==新增页面
ItEquipmentCommonService.queryProNoes($scope);
console.log("===========controller proNoesList============"+$scope.proNoesList);
$scope.visibles=true;
$scope.visibles2 = true;
// 查询所有设备所用区域
ItEquipmentCommonService.queryAreaTypes($scope);
console.log("===========controller areaTypes============"+$scope.areaTypes);
// 查询所有设备分类
ItEquipmentCommonService.queryItEquipmentTypes($scope);


//新增页面点击【挑选商品】弹出挑选商品页面，显示区域与类别下拉列表
$scope.clearData = function() {
$scope.areaTypes = {};//与页面上的对象要匹配
// 查询所有设备分类
//ItEquipmentCommonService.queryItType($scope);
// $scope.search.searchData1 = "";
// $scope.search.searchData2 = "";
// $scope.search.searchData3 = "";
// $scope.search.searchData4 = "";
};
//挑选商品页面点击【查询】按钮
$scope.showData = function(flag) {
//查询被挑选的商品
ItEquipmentCommonService.queryGoodsByPage($scope);
$scope.visibles2 = flag;//列表table显示
};

/**
* 挑选商品页面的list table
*/
$scope.page = {
curPage : 1,
pageSize : 10,
sortColumn : ‘id‘,
sortDirection : true
};
$scope.gridOptionsGoods = {
paginationPageSizes: [10, 20, 30, 40, 50],
paginationPageSize: 10,
enableColumnMenus: false,
rowEditWaitInterval: -1,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 0,
useExternalPagination: true,
useExternalSorting: true,
expandableRowTemplate:‘angularjsMVC/master-data/it-equipment-list-maintenance/template/it-equipment-list-maintenance-common.html‘,
expandableRowHeight : 150,
columnDefs : [
{name : ‘id‘,displayName: ‘序号‘,enableCellEdit : false,cellTooltip:function(row) { return row.entity.purchaseNo ;}},
{name : ‘equipmentNo‘,displayName: ‘IT设备编号‘,enableCellEdit : false,cellTooltip:function(row) { return row.entity.purchaseName ;}},
{name : ‘areaType‘,displayName: ‘设备所用区域分类‘,enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}},
{name : ‘areaType‘,displayName: ‘设备分类‘,enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}},
{name : ‘equipmentName‘,displayName: ‘设备名称‘,enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}}

],

onRegisterApi : function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope,$scope.page,function(grid, sortColumns) {
if (sortColumns.length != 0) {
if (sortColumns[0].sort.direction == ‘asc‘)
$scope.page.sortDirection = true;
if (sortColumns[0].sort.direction == ‘desc‘)
$scope.page.sortDirection = false;
$scope.page.sortColumn = sortColumns[0].displayName;
ItEquipmentCommonService.queryGoodsByPage($scope,$scope.page);
}
});
gridApi.pagination.on.paginationChanged($scope,function(newPage, pageSize) {
$scope.page.curPage = newPage;
$scope.page.pageSize = pageSize;
ItEquipmentCommonService.queryGoodsByPage($scope,$scope.page);
});
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
var msg = ‘row selected ‘+ row.isSelected;
});
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows) {
var msg = ‘rows changed ‘+ rows.length;
});
}
};












//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// //rack
// $scope.backSearch = function(path){
// $location.path(path);
// };
// //显示动态表格
// $scope.showData = function(flag) {
// $scope.visible = flag;
// };
//
// // // 国际化；
// // i18nService.setCurrentLang("zh-cn");
// $scope.gridOptions = {
// data: ‘myData‘,
// columnDefs: [{ field: ‘name‘,
// displayName: ‘aaaaaaa‘,
// width: ‘10%‘,
// enableCellEdit: false // 是否可编辑
// },
// { field: "age"},
// { field: "birthday"},
// { field: "salary"}
// ],
//
// enableSorting: true, //是否排序
// useExternalSorting: true, //是否使用自定义排序规则
// enableGridMenu: true, //是否显示grid 菜单
// showGridFooter: true, //是否显示grid footer
// // enableHorizo??ntalScrollbar : 1, //grid水平滚动条是否显示, 0-不显示 1-显示
// enableVerticalScrollbar : 0, //grid垂直滚动条是否显示, 0-不显示 1-显示
//
// //-------- 分页属性 ----------------
// enablePagination: true, //是否分页，默认为true
// enablePaginationControls: true, //使用默认的底部分页
// paginationPageSizes: [10, 15, 20], //每页显示个数可选项
// paginationCurrentPage:1, //当前页码
// paginationPageSize: 10, //每页显示个数
// // paginationTemplate:" ", //自定义底部分页代码
// totalItems : 0, // 总数量
// useExternalPagination: true,//是否使用分页按钮
//
//
// //----------- 选中 ----------------------
// enableFooterTotalSelected: true, // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true
// enableFullRowSelection : true, //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中
// enableRowHeaderSelection : true, //是否显示选中checkbox框 ,默认为true
// enableRowSelection : true, // 行选择是否可用，默认为true;
// enableSelectAll : true, // 选择所有checkbox是否可用，默认为true;
// enableSelectionBatchEvent : true, //默认true
// isRowSelectable: function(row){ //GridRow
// if(row.entity.age > 45){
// row.grid.api.selection.selectRow(row.entity); // 选中行
// }
// },
// modifierKeysToMultiSelect: false ,//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true;
// multiSelect: true ,// 是否可以选择多个,默认为true;
// noUnselect: false,//默认false,选中后是否可以取消选中
// selectionRowHeaderWidth:30 ,//默认30 ，设置选择列的宽度；
//
// //--------------导出--------------------------------- -
// exporterAllDataFn: null,
// exporterCsvColumnSeparator: ‘,‘,
// exporterCsvFilename:‘download.csv‘,
// exporterFieldCallback : function ( grid, row, col, value ){
// if ( value == 50 ){
// value = "可以退休";
// }
// return value;
// },
// exporterHeaderFilter :function( displayName ){
// return ‘col: ‘ + name;
// },
// exporterHeaderFilterUseName : true,
// exporterMenuCsv : true,
// exporterMenuLabel : "Export",
// exporterMenuPdf : true,
// exporterOlderExcelCompatibility : false,
// exporterPdfCustomFormatter : function ( docDefinition ) {
// docDefinition.styles.footerStyle = { bold: true, fontSize: 10 };
// return docDefinition;
// },
// exporterPdfFooter :{
// text: ‘My footer‘,
// style: ‘footerStyle‘
// },
// exporterPdfDefaultStyle : {
// fontSize: 11
// },
// exporterPdfFilename:‘download.pdf‘,
// /* exporterPdfFooter : {
// columns: [
// ‘Left part‘,
// { text: ‘Right part‘, alignment: ‘right‘ }
// ]
// },
// 或 */
// exporterPdfFooter: function(currentPage, pageCount) {
// return currentPage.toString() + ‘ of ‘ + pageCount;
// },
// exporterPdfHeader : function(currentPage, pageCount) {
// return currentPage.toString() + ‘ of ‘ + pageCount;
// },
// exporterPdfMaxGridWidth : 720,
// exporterPdfOrientation : ‘landscape‘,// ‘landscape‘ 或 ‘portrait‘
// exporterPdfPageSize : ‘A4‘,// ‘A4‘ or ‘LETTER‘
// exporterPdfTableHeaderStyle : {
// bold: true,
// fontSize: 12,
// color: ‘black‘
// },
// exporterPdfTableLayout : null,
// exporterPdfTableStyle: {
// margin: [0, 5, 0, 15]
// },
// exporterSuppressColumns : [‘buttons‘],
// exporterSuppressMenu: false,
//
// //---------------api---------------------
// onRegisterApi: function(gridApi) {
// $scope.gridApi = gridApi;
// //分页按钮事件
// gridApi.pagination.on.paginationChanged($scope,function(newPage, pageSize) {
// if(getPage) {
// getPage(newPage, pageSize);
// }
// });
// //行选中事件
// $scope.gridApi.selection.on.rowSelectionChanged($scope,function(row,event){
// if(row){
// $scope.testRow = row.entity;
// alert($scope.testRow)
// }
// });
// }
// };
//
// var getPage = function(curPage, pageSize) {
// var firstRow = (curPage - 1) * pageSize;
// $scope.gridOptions.totalItems = mydefalutData.length;
// $scope.gridOptions.data = mydefalutData.slice(firstRow, firstRow + pageSize);
// //或者像下面这种写法
// //$scope.myData = mydefalutData.slice(firstRow, firstRow + pageSize);
// };
//
// var mydefalutData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
// { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
// { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
// { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
// { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
// { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
// { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
// { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
// { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
// { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
// { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
// { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
// { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
// { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
// { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];
//
// getPage(1, $scope.gridOptions.paginationPageSize);
//
//
//
/**设置第一个被选中，为默认值：以下设置方法不可取，会引起列表上出现默认数据被重复*/
//方法一：利用循环
// for(var i=0;i<=$scope.proNoes.length;i++ ){
// if($scope.proNoes.proNo==‘01‘){
// proText=$scope.proNoes[i].proNo+"-"+$scope.proNoes[i].proName;
// break;
// }
// }
// alert( $scope.proText)
//方法二：
//$scope.modelPro=$scope.proNoes[1].proNo+"-"+$scope.proNoes[1].proName;
}
]);

 

‘use strict‘;

/**
* ItEquipmentCommonService
*/

myApp.factory(‘ItEquipmentCommonService‘, [ ‘$resource‘, ‘$http‘,
function($resource, $http) {
return new ItEquipmentCommonService($resource, $http);
} ]);

//使用resource进行访问
var actions = {
‘get‘ : {
method : ‘GET‘,
},
‘query‘ : {
method : ‘GET‘,
isArray : true
},
‘select‘:{
method:‘POST‘,
},
‘save‘ : {
method : ‘POST‘,
isArray : true,
},
‘update‘ : {
method : ‘PUT‘,
isArray : true,
},
‘remove‘ : {
method : ‘DELETE‘,
isArray : true
}
};

function ItEquipmentCommonService(resource, http) {

/**查询项目编号列表**/
this.queryProNoes = function(scope) {
var itEquipmentMaintenance = {};
itEquipmentMaintenance.equipmentName=scope.equipmentName;//设备名称
itEquipmentMaintenance.areaType=scope.areaType;//设备所选区域
itEquipmentMaintenance.equipmentType=scope.equipmentType;//设备分类
var FunctionResource = resource(‘purchaseItList/selectProNotes‘, {},actions);
FunctionResource.select(function(data) {
console.log("-------------"+data);
scope.proNoesList=data.resultData;
if(scope.proNoesList == null || scope.proNoesList == undefined || scope.proNoesList == ""){
scope.visible=true;//如果返回为空，保存按钮不显示
}else{
scope.visible=false;//如果返回不为空，保存按钮显示
}
}, function(error) {
alert(error)
});
};

/**查询所有设备所用区域**/
this.queryAreaTypes = function(scope) {
var FunctionResource = resource(‘purchaseItList/selectAreaTypes‘, {},actions);
FunctionResource.select(function(result) {
console.log("service result===="+result);
scope.areaTypes=result.resultData;
console.log("service areaTypes===="+scope.areaTypes);
}, function(error) {
alert(error)
});
};


/**查询所有IT设备分类**/
this.queryItEquipmentTypes = function(scope) {
var FunctionResource = resource(‘purchaseItList/selectItEquipmentTypes‘, {},actions);
FunctionResource.select(function(result) {
console.log("service result===="+result);
scope.equipmenttypes=result.resultData;
console.log("service areaTypes===="+scope.areaTypes);
}, function(error) {
alert(error)
});
};


/** 分页查询所有22. IT设备维护(eps_it_equipment_maintenance)**/
this.queryGoodsByPage = function(scope) {
var purchasemaintainData = {
‘equipmentName‘: scope.equipmentName,
‘areaType‘: scope.areaType.id,
‘equipmentType‘: scope.equipmenttype.id,
};
var pages = [];
pages.push(purchasemaintainData);
scope.page.pages = pages;
http({
method: ‘POST‘,
url: ‘purchaseItList/selectItEquipmentMaintenance‘,
data: scope.page,
}).success(function(data){
scope.gridOptionsGoods.totalItems = data.resultData.totalRow;
scope.gridOptionsGoods.data = data.resultData.pages;
scope.page = data.resultData;
}).error(function(data){
alert("fail");
});

};

};