光圣科技IQC质量管理模块

本文分享了作者花费一个月时间开发公司质量管理模块的经验,包括使用angular-ui-route处理路由、angularStrap实现候选列表及多级菜单、CSS3绘制图形、以及封装指令实现自动分页等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

花了一个月,差不多把公司的质量管理模块写好了,有过一些坑,所以要总结一下。
第一:由于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>

这里写图片描述

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值