Angular.js(出库编辑)
郦磊
编辑，编辑就是先请求一次将数据绑上，修改之后，再发送一次请求，将数据传给后台。编辑=查看+添加。
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> </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()">更 新</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;
}
}
};
}]);
类似资料：