微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

光圣科技IQC质量管理模块

花了一个月,差不多把公司的质量管理模块写好了,有过一些坑,所以要总结一下。
第一:由于angular自带的路由不能实现深层嵌套,所以采用的是angular-ui-route来控制路由,实现导航列表。

第二:根据输入的内容显示相符的候选列表
我是使用angularstrap中的typeahead插件来实现的,如果angularstrap版本高于2.2必须使用bs-option属性来实现候选框,而不能用ng-option

第三:实现多级二级菜单
同样使用了angularstrap中的collapse插件,用了两次ng-repeat生成一二级菜单,难度最大的在于如何控制他们各自的样式,在这里用了很多的逻辑

<div class="panel-group" ng-model="panels.activePanel" role="tablist" aria-multiselectable="true" bs-collapse> <div class="panel panel-default" ng-repeat="item in vmManager.panelDataSource"> <div class="panel-heading" role="tab" ng-click="vmManager.selectMaterialIdItem(item.materialIdItem)"> <a bs-collapse-toggle style="cursor:pointer;color:#000" title="{{item.productId}}"> {{item.productName}} </a> </div> <div class="panel-collapse list-group " role="tabpanel" bs-collapse-target cg-busy="{promise:searchPromise}"> <a class="panel-body list-group-item" ng-repeat="inspectionItem in item.inspectionItemDatas" ng-class="{'active':inspectionItem===vmManager.currentinspectionItem}" ng-click="vmManager.selectinspectionItem(inspectionItem)"> {{inspectionItem.inspectionItem}} <span class="pull-right"> <i class="fa fa-check badge-success" title="结果判定标志" ng-show="inspectionItem.inspectionItemResult==='OK' && inspectionItem.InsptecitonItemIsFinished===true"></i> <i class="fa fa-close badge-fail" title="结果判定标志" ng-show="inspectionItem.inspectionItemResult==='NG' && inspectionItem.InsptecitonItemIsFinished==true"></i> </span> <span class="pull-right" title="数量显示标志" ng-class="{true: 'badge-info',false: 'badge-fail'}[inspectionItem.NeedFinishDatanumber===inspectionItem.HaveFinishDatanumber]"> {{inspectionItem.NeedFinishDatanumber}}/{{inspectionItem.HaveFinishDatanumber}} </span> </a> </div> </div> </div> </div>

第四:使用到了css3的多种颜色渐变和透明属性,画出三角形

第五:实现分页效果
用指令封装的分页器,实现自动分页效果,这样只要一句话就能调用分页,实现代码复用

<div ng-if="vmManager.dataSource.length>0" yl-pagination data-       dataset="vmManager.dataSets" data-datasource="vmManager.dataSource">
</div>

错误欢迎指正,共同学习进步

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐