Angular.js(出库查看)

最新推荐文章于 2025-10-12 04:49:24 发布

原创最新推荐文章于 2025-10-12 04:49:24 发布 · 842 阅读

0 ·

CC 4.0 BY-SA版权

Angular.js项目专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的采购入库管理系统，展示了如何通过控制器获取并展示特定的入库记录详情，包括供应商信息、仓库信息及商品明细等。

查看就非常简单了，直接贴代码吧。
1、控制器

app.controller("search", ['$scope', 'app_settings', 'SystemParam', '$http', 'Post', 'Get', '$state', '$stateParams',
function ($scope, app_settings, SystemParam, $http, Post, Get, $state, $stateParams) {
    //页面参数
    console.log(SystemParam.dict())
    //页面跳转查询数据
    console.log($stateParams.SearchID)
    var parameters = { 'ids': $stateParams.SearchID };
    var RtnData = Get.get(app_settings.api_host_url + 'api/instock/SingleStock', parameters);

    RtnData.then(function (resultMessage) {
        if (resultMessage.StateCode == "0") {

            $scope.InStockEntity = resultMessage.Data;

        }

    });

}]);

2、对应的html页面。平时很少去看代码的编译规范，对于提行缩进几个格子，何时该打分号没有太多去探究。没事儿的时候就按照自己的喜好将写过的代码整理，贴出来的代码肯定有多处不规范的地方，恩，先贴出来，需要注意的规范在敲代码的过程中自然就学会了。

<style>
    .change.active {
        background-color: #F5F5F5;        
    }
</style>
<script>
    console.log("当前页")
    console.log(window.location.href);
    if (window.location.href == window.location.href) {
        console.log("进入判断");
        $("#bread a:eq(1)").css({ 'color': '#3B73AF', 'font-weight': '600', });
    };
    $("#bread").find("a:first").on({
        'mouseover': function () {

            $(this).css({ 'color': '#3B73AF', 'font-weight': '600', });
        },
        'mouseleave': function () {

            $(this).css({ 'color': '#3B73AF', 'font-weight': '400', });
        }
    });
</script>
<div class="hbox hbox-auto-lg bg-light m-t-md no-padder container " ng-init="
  app.settings.asideFixed = false;
  app.settings.asideDock = true;
  app.settings.container = false;
  app.hideAside = false;
  app.hideFooter = false;
  " ng-controller="search" style="height: auto;margin-top:0px;">
    <!-- column -->
    <div class="container-fluid">

        <div class="col w-xs">
            <p class=""> <h4 class=" text-dark   font-bold  w-xs ">采购入库</h4></p>
        </div>
        <!--Breadcrumb-->
        <div class="col" style="padding-top:5px;">
            <ol id="bread" class="breadcrumb">
                <li><i class="fa fa-university"></i>&nbsp;<a href="" ui-sref="app.instock" style="color:#3B73AF">列表</a></li>
                <li><i class="fa fa-plus"></i>&nbsp;<a href="">查看</a></li>

            </ol>
        </div>
        <!--Breadcrumb End-->
        <!--<div class="col col-lg-2 m-t">
            <span>入库人员：</span><span>{{mode.operUserName}}</span>
            <span>入库日期：</span><span class="m-r-xl">{{ today | date:'yyyy-MM-dd HH:mm:ss' }}</span>

        </div>-->
        <div class="bg-light lter wrapper">          
            <div class="hbox m-l">
                <span class="w-xs" >供应商：</span>
                <span style="height:34px;">{{InStockEntity.pvName}}</span>
                 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span class="w-xs" >仓库：</span>
                <span style="height:34px;">{{InStockEntity. whName}}</span>
            </div>
        </div>
        <div class="Normal-center col-lg-12   b-light  no-padder ">
            <div class=" r r-2x ">
                <div class=" r r-2x  ">
                    <div class="vbox ">
                        <div class="">
                            <div class="panel panel-default lter m-t col-lg-12 w-full">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th width="8%" class="text-center ">
                                                <label class="i-checks m-b-none " style="margin-left:-3px"><input type="checkbox" name="post[]" class="group-checkable"><i></i></label>
                                            </th>
                                            <th width="32%" class="">商品代码</th>
                                            <th width="32&">商品名称</th>
                                            <th width="32%">数量</th>

                                        </tr>
                                    </thead>
                                    <tbody ng-repeat="table in InStockEntity.inStockDetails">
                                        <tr class="change" ng-class="{true:'active',false:''}[inStockDetails.focus]" ng-mouseover ="inStockDetails.focus=true" ng-mouseleave ="inStockDetails.focus=false ">
                                            <td width="8%" class="text-center ">
                                                <label class="i-checks m-b-none " style="margin-left:-3px"><input type="checkbox" name="post[]" class="group-checkable"><i></i></label>
                                            </td>
                                            <td>{{table.pSKU}}</td>
                                            <td>{{table.pName}}</td>
                                            <td>{{table.isNum }}</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td class="text-center">
                                                <span >总计：</span>
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                {{InStockEntity.proNum}}
                                            </td>
                                        </tr>
                                    </tfoot>                        
                                </table>                      
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">           
            <div class="bg-light lter  col-lg-12  wrapper lter r r-3x ">
                <div class="navbar-right m-r">

                    <button class="btn  btn-info  btn-sm m-l-md ">确&nbsp;&nbsp;定</button>
                    <button class="btn  btn-info  btn-sm m-l-md ">取&nbsp;&nbsp;消</button>
                </div>
            </div>
        </div>
    </div>
</div>