Angular.js(出库编辑)

最新推荐文章于 2025-03-10 11:04:50 发布

Edith.Liu

最新推荐文章于 2025-03-10 11:04:50 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/TUD2014/article/details/50616938

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

5 篇文章

订阅专栏

本文介绍了一个商品库存管理系统的编辑功能，包括表单提交、控制器配置、参数传递及编辑页面控制器代码实现。详细解释了如何通过扫描条码获取商品信息，并在编辑页面上进行商品数据的修改和更新。

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

编辑，编辑就是先请求一次将数据绑上，修改之后，再发送一次请求，将数据传给后台。编辑=查看+添加。
1、表单提交

<form class=" form-inline m-l m-b" ng-submit="save()">
  <div class="rows">
      <div class="hbox col-lg-12 no-padder">
         <div class="col col-lg-2">
             <input class="form-control w " value="" ng-model="pbarcode" tabindex="0" placeholder="条码">
          </div>

  <div class="col col-lg-2">
    <span class="m" ng-model="detailModel.pSKU"> 商品代码:{{detailModel.pSKU}}</span>
</div>
<div class="col col-lg-4">
   <span class="m" ng-model="detailModel.pName"> 商品名称：{{detailModel.pName}}</span>
  </div>
    </div>
     </div>
     <br />
  <div class="m-t-lg">
    <span>&nbsp;&nbsp;&nbsp;</span>
    <input class="form-control w " value="{{detailModel.pWeight}}" tabindex="0" ng-model="detailModel. pWeight" onkeyup="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" placeholder="重量（kg）">
   <input class="form-control w m-l " value="{{long}}" tabindex="0" ng-model="long" onkeyup="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" placeholder="长（cm）">
  <input class="form-control w m-l " value="{{width}}" tabindex="0" ng-model="width" onkeyup="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" placeholder="宽（cm）">
  <input class="form-control w m-l " value="{{height}}" tabindex="0" ng-model="height" onkeyup="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" placeholder="高（cm）">
<button class="btn  btn-info  btn-sm " ng-click="pbar()">测试</button>
<button class="btn  btn-info  btn-sm m-r  navbar-right" ng-click="updateData()">更&nbsp;&nbsp;新</button>
    </div>
 </form>

将表单的内容放在表单，用ng-submit提交。
2、控制器的配置

app.controller("alter", ['$scope', 'app_settings', 'SystemParam', '$http', 'Post', 'Get', '$state', '$stateParams',
     function ($scope, app_settings, SystemParam, $http, Post, Get, $state, $stateParams) {
     //业务逻辑
     }
     ])

在视图页面引入控制器

<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="alter" style="height: auto;margin-top:0px;">
  </div>

ng-init是框架内转换主题的设置。
3、参数在跳转页面之间的传递

//写在出库添加页面的路由跳转
 //编辑跳转页面
    window.jumpFunc = function (indexid) {

        $state.go('app.instock_alter', { AlterID: indexid })

    }

参数在路由中的配置，这个参数传递的调研是老大做的，那时候才入职，担心自己做的太少，使劲儿把页面给出了。老大说：“技术难点都没攻克，出那么多页面干嘛？”恩，说的对。工作是需要长脑子的，出页面一点都不难，有了模板之后只需要复制粘贴。如果我想要在程序员这行好好的干下去，我就需要多动脑子，解决技术问题而不是周而复始的解决早就会了的问题。这个传参数的调研我也是看着老大完成的，又一次被震撼了，他的做事效率。

        //采购入库编辑liurx
       .state('app.instock_alter', {
               url: '/instock_alter',
               params: { 'AlterID': null },
               templateUrl: 'pages/Purchase/Purchase_putaway_alter.html',
               resolve: load(['dataTableNoJquery', 'xeditable',
                  'js/controllers/Purchase/purchase_putaway_alter.js',
                  'js/controllers/ui/xeditable.min.js'
                ])
       })

将参数传递给了编辑页面。发送请求得到数据。

  //获取datatable的值(GET)
        var parameters = { 'ids': $stateParams.AlterID };
        var RtnData = Get.get(app_settings.api_host_url + 'api/instock/SingleStock', parameters);
        RtnData.then(function (resultMessage) {
            $scope.InStockEntity = resultMessage.Data;
            console.log($scope.InStockEntity);
        });

4、编辑页面的控制器代码，好想好想自恋一下，在vsstudio里面看着自己整理过的代码，觉得好整齐好整齐，激动激动，哈哈~

app.controller("alter", ['$scope', 'app_settings', 'SystemParam', '$http', 'Post', 'Get', '$state', '$stateParams',
     function ($scope, app_settings, SystemParam, $http, Post, Get, $state, $stateParams) {

        //获取datatable的值(GET)
        var parameters = { 'ids': $stateParams.AlterID };
        var RtnData = Get.get(app_settings.api_host_url + 'api/instock/SingleStock', parameters);

        RtnData.then(function (resultMessage) {
            $scope.InStockEntity = resultMessage.Data;
            console.log($scope.InStockEntity);
        });

         //更新商品数据(POST)
        $scope.updateData = function () {

            if ($(".code").val() == "") {

                var inforData = { code: "400", data: "请扫入条码o(╯□╰)o" }

                $scope.toaster(inforData, "warning")

            };
            //长宽高进行转化
            $scope.detailModel.pWHL = $scope.long + "*" + $scope.width + "*" + $scope.height;


            var data = {
                "ids": $scope.detailModel.IndexID,
                "others": $scope.detailModel.pWHL,
                "other": $scope.detailModel.pWeight
            };

            $scope.updateProduct = data;

            var RtnData = Post.post(app_settings.api_host_url + 'api/product/UpdateProductPull', $scope.updateProduct);//功能实现，地址来源于excel表中，

            /*then结构得到两个函数，第一个成功返回，第二个是失败返回*/
            RtnData.then(function (resultMessage) {
                if (resultMessage.StateCode == "0") {
                    var inforData = { code: "", data: "数据已更新到商品库(づ￣3￣)づ╭❤～" };
                    $scope.toaster(inforData, "success");


                } 
            });
        };


       //扫条码
       $scope.pbarcode = "";

       $scope.TableDetail = [];//用于循环的数组
       $scope.filterDetail = [];
       $scope.pbarcode = "";
         //测试按钮函数
       $scope.pbar = function () {
           ///检测数组有没有这个对象
           var querResult = $linq($scope.InStockEntity.inStockDetails)
                   .where(function (x) { return x.pBarCode == $scope.pbarcode; }).toArray();

           if (querResult.length != 0) {
               //存在             
               querResult[0].isNum++;              
               //获取商品数据
                       var RtnData = Get.get(app_settings.api_host_url + '/api/product/SingleProductPull', { ids: $scope.pbarcode });

                       RtnData.then(function (resultMessage) {
                           resultMessage.Data.pNum = 1;
                           $scope.detailModel = resultMessage.Data;

                           //处理长宽高
                           $scope.long = $scope.detailModel.pWHL.split("*")[0];
                           $scope.width = $scope.detailModel.pWHL.split("*")[1];
                           $scope.height = $scope.detailModel.pWHL.split("*")[2];
                       });

           } else {

               var inforData = { code: "", data: "该商品下没有此明细，无法修改(* ￣︿￣)" }

               $scope.toaster(inforData, "warning")             
           }
       };
         //修改入库详情（POST）
       $scope.updateStockData = function () {
           var data = {
               'inStockDetails': [],
               'IndexID': $stateParams.AlterID,
               'WareHouseID': $scope.InStockEntity.WareHouseID,
               'ProviderID': $scope.InStockEntity.ProviderID,
               'proNum': $scope.num,
               "Remark": $scope.InStockEntity.Remark,
           }
           console.log($scope.InStockEntity);
           for (var i = 0; i < $scope.InStockEntity.inStockDetails.length; i++){
               if (!$scope.InStockEntity.inStockDetails[i].is_delete) {
                   data['inStockDetails'].push({
                       'productID': $scope.InStockEntity.inStockDetails[i].ProductID,
                       'isNum': $scope.InStockEntity.inStockDetails[i].isNum,
                       'IndexID': $scope.InStockEntity.inStockDetails[i].IndexID,
                   })
               }
           }
           //$scope.InStockEntity = data;


           var RtnData = Post.post(app_settings.api_host_url + 'api/instock/UpdateStock', data);

           RtnData.then(function (resultMessage) {
               if (resultMessage.StateCode == "0") {
                   console.log(resultMessage);
                   console.log(data);
                   var inforData = { code: "", data: "入库信息信息修改成功\(≧▽≦)/" };
                   $scope.toaster(inforData, "success");
                   $state.go('app.instock');
               } 
           })      
       };
    //计算数据(ng)
    $scope.calculate_total = function () {
        var num = 0;
        angular.forEach($scope.InStockEntity.inStockDetails, function (table) {
            if (!table.is_delete) {
                num = num + table.isNum;
                 }
             })
        $scope.num = num;      
        return num;
    };
         //删除数据(ng)
    $scope.del_rows = function () {
        for (var i = 0; i < $scope.InStockEntity.inStockDetails.length; i++) {
            var table = $scope.InStockEntity.inStockDetails[i]
                 if (table.is_selected) {
                     table.is_delete = true;
                }
             }
   };
}]);