今日完成：

萝卜多后台总结：后台管理部分

后台管理

接口参考：公共接口-后台管理

模块管理：萝卜多后台每个功能都是一个模块，如：后台系统分为3大模块--信息管理、article管理、后台管理，每个模块下又有N个子模块，如：信息管理下的公司列表和职业列表。

相关参数：

id：该模块的id，必须；

父模块ID（parentID）：顶级父模块为根元素0，3大模块的父模块ID均为0，其他模块父模块id为这3大模块id，关系如下图；

名称（name）：模块的名称；

模块类型：类型。。。。

更新人id，创建者id：不同账号的id，后台生成；

模块对应url地址（url）：这个是路由配置的state，每个用户登录后的模块都是根据后台返回该用户的权限来加载的，url为跳转路由字段，如ui-sref。

流程：

图1.账号登录后，数据请求情况；图2.账号登录后查询所属的用户类型ID；

图3.根据该ID查询该用户权限情况，id为模块id，3大模块权限为空数组【】，子模块权限分为编辑、修改、删除、排序（后台暂无接口）；图4.根据模块ID查询模块具体信息（url，模块名称等）

数据处理、渲染

数据请求完成后对数据进行处理，因为请求回来的数据如图4，只有模块信息，尚未建立层级关系，所以这里需要把各个模块的层级格式化成父模块包含子模块的形式，以便在html中对数据进行处理，这里建立一个服务，用于根据返回的数组建立dom结构：

.factory('buildNodeList', function () {
   return function (arr) { //arr为返回的moduleList数组
       var parentNode = [];
       //父节点列表
       angular.forEach(arr, function (data) {//遍历数组拿出parentID为0的module
           data.parentID === 0 ? parentNode.push(data) : '';
       });
       //将子节点作为属性放入父节点对象
       angular.forEach(parentNode, function (parent) {
           parent.moduleList = [];//将子模块作为parent的一个属性值加入
           angular.forEach(arr, function (child) {//遍历数组，拿出parentID等于当前模块的元素，并加入modulelist中
               parent.id === child.parentID ? parent.moduleList.push(child) : '';
           });
       });
       return parentNode     //返回构建完的结构数组
   }

})

处理完成的数据：

html结构：将处理完的数据渲染（vm.sideBar为处理后的数据）

<div class="sidebar-nav ">
   <a ui-sref="field.welcome" class="nav-header"><i class="icon-briefcase"></i>欢迎页</a>
   <div ng-repeat="sides in vm.sideBar|orderBy:'createBy'">//////这里为3大模块
       <a class="nav-header" ng-click="msgCollapsed = !msgCollapsed"><i class="icon-dashboard"></i>{{sides.name}}        <i class="icon-chevron-down pull-right"></i></a>
       <ul class="nav nav-list text-center" ui-sref-active="in" uib-collapse="msgCollapsed">
           <li ui-sref-active="active" ng-repeat="side in sides.moduleList"><a ui-sref='{{side.url}}'>                           {{side.name}}</a></li>  ///////////////////这里为返回的数据子模块
       </ul>
   </div>
</div>

模块编辑：字段为以上介绍的参数，父元素ID决定当前模块率属于哪个模块；

url：这个参数不要改~~~~改了就没法用了

参数作为路由的state，改了意味着要改路由配置文件。。。测试环境整个就挂了，测试就自己新建一个模块进行编辑删除操作，同时要配置路由。

角色管理：增删改，重点是编辑，这里要配置每个用户的权限：加载的模块以及每个模块的增删改权限；如：

设置猎头权限只有信息和Article，没有删除权限：

现在用user账户登录后台，此时的界面只加载两个模块：

权限控制，无删除权限：

html中两次遍历出模块信息:

vm.moduleList为处理完后的节点层次数据；

<div class="form-group col-md-9 rest-pd-lr col-xs-offset-3 row" ng-repeat="items in vm.moduleList">
   <div class=" col-xs-">
       <label class="checkbox-inline">
==============================可通过all值设置选中========================
           <input type="checkbox" name={{items.id}} ng-checked="all" ng-model="moduleChecked">
           {{items.name}}
      </label>
       <div class="col-xs-12 " ng-repeat="item in items.moduleList">
           <div class="col-xs-offset-1 col-xs-3">
               <label class="checkbox-inline">
====================可通过moduleChecked值设置选中=============================
                   <input type="checkbox" name="{{item.id}}" ng-checked="moduleChecked"  ng-model="childNote[item.id]"> {{item.name}}
               </label>
           </div>
========================可通过childNote[item.id]值设置全部选中============
           <checkedbox ng-model="vm.role[item.id]" module-checked="moduleChecked" child-node-true="childNote[item.id]" it-name="item.id" ></checkedbox>
       </div>
   </div>
</div>

.directive('checkedbox', function (duplicateRemoval) {
   return {
       restrict: 'E',
       templateUrl: 'Pages/template/checkbox.html',
       scope: {
           childNodeTrue: '=',
           selecteAll: '=',
           selecteValue: '=ngModel',
           itName: '=',
           moduleChecked: '='
       },
       replace: 'true',
       link: function (scope, ele, attrs) {
           scope.selecteValue = [];
           //监听全选
           scope.$watch('selecteAll', function (n) {
               /* scope.moduleChecked=n?n:false*/
               scope.childNodeTrue = n ? n : false;
           });
           //监听当前父模块全选
           scope.$watch('moduleChecked', function (n) {
               scope.childNodeTrue = n ? n : false;
           })
           //监听当前子模块全選
           scope.$watch('childNodeTrue', function (n) {
               scope.selecteValue = n ? ['create', 'update', 'delete', 'sort'] : [];
           })
       }
   }
})

部分模板：直接输出值

<label class="checkbox-inline" for={{'a'+itName}}>
   <input type="checkbox" id={{'a'+itName}} name="{{itName}}" ng-checked="childNodeTrue"
          ng-true-value="'create'" ng-model="selecteValue[0]"> 新增
</label>

服务部分（提交更改时格式化数据）：

angular.module('admin')
   .factory('formatPermissions', function (LocalStorage) {

       var module = LocalStorage.get('module');//登陆时存储的模块列表

       return function (permisstion) {//permisstion：所选权限对象
           var permissionObj = {};
           //删除未选模块
           angular.forEach(permisstion, function (data, key) {
               data.length ? getParentID(key) : delete permisstion[key]//若有选择，则length>0
           });
           //删除该模块未选择权限，只保留所选权限
           function getParentID(key) {//key为已选
               var stop = false;//只做一次匹配遍历，取到parentID后不在执行遍历操作
               for (var i = permisstion[key].length; 0 < i; i--) {
                   permisstion[key][i - 1] ? '' : permisstion[key].splice(i - 1, 1)//从最后一个元素删起
               }
               //添加已选择项目的父元素，将其设置为[],否则无法加载后续子模块；
               angular.forEach(module, function (item) {
                   if (!stop) {
                       item.id == key ? (permissionObj[item.parentID] = [], permissionObj[key] = permisstion[key], stop = true) : '';
                   }
               })
           }
           return permissionObj
       }
   });

获取数据时设置数据展示：

/将请求返回的权限对象设置元素位置，返回展示
angular.module('admin')
   .factory('permissionValue', function () {
     
       return function (tpls, obj) {//tpls：初始化时的perssions对象 obj：返回的perssions对象
           angular.forEach(obj, function (data, key) {
               inArr('update', data, 1);//设置元素位置
               inArr('delete', data, 2);//设置元素位置
               inArr('sort', data, 3);//设置元素位置
               /* obj[key]=[]*/
               tpls[key] = obj[key]
           });
           return tpls
       };
       //对象中存在对应的值则按照设置的位置设置这个值
       function inArr(n, arr, i) {
           var x = arr.indexOf(n);
           if (x >= 0) {
               return arr.indexOf(n) === i ? '' : (arr[x] = null, arr[+i] = n)
           }

       }
   });

密码修改：修改当前账号的密码，字段oldPwd,newPwd

账号管理：登录账号增加修改删除，所有操作都是之前做过的，就不再重复；

ps：由于权限验证是后来加上的，所以就将验证权限写在指令里，在在每个有编辑操作的地方（需要验证的地方）添加属性，并设置相应的ng-if条件为该变量，就可以完成权限控制，这部分其实可以写在run（）中，添加$stateChangeStart事件，把设置$rootScope.del,$rootScope.edit,$rootScope.create后，每次改变state时都会执行，这样在添加好变量之后就可以控制了，不用写directive；

directive部分：

.directive('permissions', function (LocalStorage, $location, $state) {
   return {
       restrict: 'A',
       link: function (scope, ele, attrs, ctl) {
           var permissionCurrent = [];
           scope.permissions = LocalStorage.get('permissions');//登录后将模块信息和权限信息存如localstorage
           scope.module = LocalStorage.get('module');

           angular.forEach(scope.module, function (data) {//当前路由与模块url匹配后查询权限
               data.url === $state.current.name ? permissionCurrent = scope.permissions[data.id] : ''
           })
           //删除
           scope.del = inArr('delete');
           //编辑修改
           scope.edit = inArr('update');
           //添加
           scope.create = inArr('create');
           // console.log(permissionCurrent)
           //权限判断
           function inArr(n) {
               return permissionCurrent.indexOf(n) < 0 ? false : true; 设置权限
           }
       }
   }
})

html：

在页面中元素添加属性permissions即可；

<a ui-sref="field.managerDetail({id:item.id})" ng-if="edit">编辑</a>

=============================================================

萝卜多总结：前台部分

萝卜多总结：后台部分1

明日计划：

小课堂ppt，评审ppt

困惑：。。

收获：

如上