最近需求资源加一

找到相关字段，进行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();">&times;</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}} &lt;{{advisor.address_city}} {{advisor.mobile}}&gt;
            <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 (继续模态框)