找到相关字段,进行bi操作列的添加
if (Auth.getCurrentUser().permission.do_add_one) {
fields.push(new ResourceField('操作', 'sham', {
filterType: null,
template: '<button type="button" class="btn btn-default btn-xs" style="padding-left: 15px; padding-right: 15px;" type="button" class="btn btn-default btn-xs" ng-click="field.display(entity)">+1</button>',
display: function(entity) {
return $modal.open({
controller: 'BorderAddOneCtrl',
templateUrl: 'app/pa/board/borderAddOne.html',
windowClass: 'selection-scheme-preview-modal',
resolve: {
businessLine: function() {
return entity;
},
AddOneId: function() {
return entity;
}
},
size: 'school-apply'
});
}
}));
}
首先是找到列表,发现是循环,真正的js是单独写的。模仿了一个一列。template模版里面有一个按钮,按钮里面有一个display方法,用来显示和隐藏,实参和形参都是为resolve里面的函数准备的,controller:是一个控制器,核心还是js,templateUrl:要打开的模版文件,
resolve:里面是通过函数的返回值来传递参数的,在controller里面用的时候要先将函数在控制器里面定义一下(函数里面传的参数一般是在内部可以获取到的),后来要加通过接口加权限,就调用了$http.get('/add-one',{}).then((res)=>{let add = res.data.data.code} if (add === 0 {才会执行添加操作这列})),但是后来有个按钮需要解决,而且有专门的方法封装了授权接口,所以直接调了封装的一个方法,将需要授权的操作的字段传入就ok。还有就是要放到最后一列,这个时候数组的push,splice...就得熟练
$modalInstance扩展了两个方法$close(result)、$dismiss(reason),这些方法很容易关闭窗口并且不需要额外的控制器
windowClass:窗口尺寸,
模版内容
<div>
<div class="modal-header" style="border: none;">
<h4 class="modal-title" ng-click="vm.searchAdvisors()">
请选择"加1"资源要签约的产品类型
<a class="close" ng-click="$dismiss();">×</a>
</h4>
</div>
<div class="modal-body">
<p style="margin-left: 47px">
<label for="studyAbroad" style="margin-right: 43px">
<input type="radio"
name="type"
id="studyAbroad"
ng-model="vm.to_bus"
ng-value="'留学'">
<span>留学</span>
</label>
<label for="enjoyable" style="margin-right: 43px">
<input type="radio"
name="type"
id="enjoyable"
ng-model="vm.to_bus"
ng-value="'尊享'">
<span>尊享</span>
</label>
<label for="languageCultivate" style="margin-right: 43px">
<input type="radio"
name="type"
id="languageCultivate"
ng-model="vm.to_bus"
ng-value="'语培'">
<span>语培</span>
</label>
<label for="activity">
<input type="radio"
name="type"
id="activity"
ng-model="vm.to_bus"
ng-value="'活动'">
<span>活动</span>
</label>
</p>
<span class="bg-danger text-danger" style="margin-left: 45px">注意留学和尊享分开哦, 签证也属于留学的</span>
<div class="form-group col-sm-10" style="margin-top: 30px">
<div class="form-group col-xs-6 timestylevisit" style="margin-bottom: 23px;">
<label class="control-label">申请国家</label>
<div class="form-group">
<select class="form-control"
ng-model="vm.selectValue"
ng-change="vm.selectedChange(vm.selectValue)"
ng-options="o.text as o.value for o in vm.country"></select>
</div>
</div>
<div class="form-group col-xs-6 timestylevisit" style="margin-bottom: 23px;">
<label class="control-label">申请项目</label>
<div class="form-group">
<select class="form-control"
ng-model="vm.educationValue"
ng-change="vm.educationChange(vm.educationValue)"
ng-options="o.text as o.value for o in vm.education"></select>
</div>
</div>
<div class="form-group col-xs-6 timestylevisit">
<label class="control-label">请选择顾问</label>
<ui-select ng-model="vm.approveInfo.zhongduanAdvisor" required>
<ui-select-match placeholder="请选择顾问">
{{$select.selected.first_name + $select.selected.last_name}}
</ui-select-match>
<ui-select-choices
repeat="advisor in vm.advisors track by advisor.id"
refresh="vm.searchAdvisors($select.search)"
refresh-delay="1000"
title="{{advisor}}">
{{advisor.first_name + advisor.last_name}} <{{advisor.address_city}} {{advisor.mobile}}>
<br>
<span style="word-wrap: break-all; white-space: normal;">
{{advisor.strength_program}}
</span>
</ui-select-choices>
</ui-select>
</div>
</div>
</div>
<div class="modal-footer" style="margin-top: 180px">
<button type="button"
class="btn btn-primary btn-o"
ng-click="vm.approve()"
ng-disabled="!(vm.approveInfo.zhongduanAdvisor && vm.to_bus && vm.selectValue && vm.educationValue)"
style="background: #3487e2"> 确定 </button>
<button type="button" class="btn btn-default btn-default" ng-click="$dismiss();"> 取消 </button>
</div>
</div>
这个点击资源+1的按钮,弹框倒是做好这的代码页基本是复制的,就是点击框,会出现选择的这几项不会做:
在js里面新键了一个控制器,来写模版的js,copy了一个searchadvisors,就好使了
模版控制器
angular.module('BI').controller('BorderAddOneCtrl', function($scope, $state, AddOneId, businessLine, $modal, toastr, $http, Restangular, Auth, Config, $modalInstance) {
var vm;
$scope.vm = {};
vm = $scope.vm;
vm.isZhongduan = true;
vm.country = angular.copy(Config.planning_countries);
vm.education = angular.copy(Config.planning_programs);
vm.advisors = [];
vm.approveInfo = {};
vm.searchAdvisors = function(search) {
if (search) {
return Restangular.all('searchadvisors/').getList({
keywords: search,
order_by: '',
page: 0,
length: 20
}).then(function(advisors) {
return vm.advisors = advisors;
});
}
};
vm.approve = function() {
$http.get('/bi/push_potential_to_business/',{
params: {
potential_id: AddOneId.id,
from_bus: businessLine.business_line || '留学',
to_bus: vm.to_bus,
country: vm.selectValue,
education: vm.educationValue,
advisor: Number(vm.approveInfo.zhongduanAdvisor.uid)
}
}).then(function(res) {
vm.addOneData = res.data.result;
$modalInstance.close();
$modal.open({
templateUrl: 'app/pa/board/borderAddOneModel.html',
controller: function($scope, $modalInstance, $state) {
$scope.addOneData = vm.addOneData
$scope.full_name = vm.approveInfo.zhongduanAdvisor.full_name
$scope.sumbit = function() {
$http.post('/bi/push_potential_to_business/', $scope.addOneData).then(function(val) {
$modalInstance.close();
$state.reload();
}, function(err) {
$modalInstance.close();
toastr.error('提交失败', '😣');
});
}
}
});
})
};
return this;
});
实现的是:填完数据,点击按钮,get调用接口,将后端需要的字段都传进去,成功以后,获取接口里面的数据,将数据传给下一个要弹框的里面,vm.data = data.data.result.但是点击完确定按钮,需要关闭当前弹框,这卡住了,原来在此处调用$modalInstance.close();就可以了。然后再开一个模版用来展示刚才提交的数据,$model.open({templateUrl,controller,然后再将post里面得到的数据,传递过来,$scope.dataOnedata= vm.dataOne,})由于已经进入了最后确定按钮,所以在按钮中调用的方法,此时可以用。这次是向服务器提交数据,所以用post方法,$http.post(''///,).then() ,之后将弹框关掉,$modalInstance.close()
但是页面没有实现自动刷新,我又蒙蔽了,但是细心的话,会从别的代码看到 $state.reload() 就是会自动刷新当前页面
至此完毕
总结,就是模态框$model.open 和 接口 $http.get post .then (继续模态框)