商品库存管理

最新推荐文章于 2024-04-09 21:25:59 发布

xiaozi_11

最新推荐文章于 2024-04-09 21:25:59 发布

阅读量906

点赞数 1

本文链接：https://blog.csdn.net/xiaozi_11/article/details/78610304

版权

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
	h1 {
	text-align: center;
	}

	#cha {
	border-radius: 50px;
	}

	#px {
	margin-left: 400px;
	width: 150px;
	height: 26px;
	}

	#add {
	margin-left: 20px;
	background: #67B168;
	}

	table {
	margin-top: 20px;
	width: 950px;
	}

	#ruku {
	margin-top: 50px;
	}
	</style>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
	<h1>商品库存管理系统</h1>
	<div id="tou">
	<input type="text" id="cha" placeholder="输入关键字搜索" ng-model="query" />
	<select ng-model="px" ng-options="x for x in names" ng-init="px=names[0]" ng-change="change()" id="px"></select>
	<input type="button" id="add" value="入库" ng-click="add()" />
	<input type="button" id="delAll" value="批量删除" ng-click="delAll()" />
	</div>
	<table border="1px" cellspacing="0" cellpadding="0" class="table-striped">
	<tr style="background: gray;">
	<td><input type="checkbox" ng-click="all()" /></td>
	<td>货物名称</td>
	<td>货物数量</td>
	<td>货物产地</td>
	<td>货物单价</td>
	<td>货物入库时间</td>
	<td>操作</td>
	</tr>
	<tr ng-repeat="a in goods\|filter:query">
	<td><input type="checkbox" id="zcb" /></td>
	<td>{{a.name}}</td>
	<td>{{a.count}}</td>
	<td>{{a.addr}}</td>
	<td>{{a.price\|currency:"￥："}}</td>
	<td>{{a.data1\| date:'yyyy-MM-dd HH:mm:ss'}}</td>
	<td>
	<a href="#" ng-click="del($index)">删除</a>
	</td>
	</tr>
	</table>
	<div id="ruku" ng-show="shows">
	货物名称:<input type="text" id="name" ng-model="name" /><br /> 货物数量:
	<input type="text" id="count" ng-model="count" /><br /> 货物产地:
	<input type="text" id="addr" ng-model="addr" /><br /> 货物单价:
	<input type="text" id="price" ng-model="price" /><br /> 货物入库日期:
	<input type="text" id="data" ng-model="data1" /><br />
	<input type="button" id="bc" value="保存" ng-click="bc()" />
	</div>
	<script type="text/javascript">
	var mo = angular.module("myApp", []);
	mo.controller("myCtrl", function($scope) {
	$scope.shows = false;
	$scope.names = ["按照库存数量正序排序", "按照库存数量倒序排序", "按照入库时间正序排序", "按照入库时间倒序排序"];
	$scope.goods = [{
	"name": "云南白药",
	"count": 100,
	"addr": "云南",
	"price": 19.9,
	"data1": "2017-11-20 11:31:32"
	}, {
	"name": "999感冒灵",
	"count": 30,
	"addr": "北京",
	"price": 12.6,
	"data1": "2017-11-19 11:31:32"
	}, {
	"name": "感康",
	"count": 20,
	"addr": "河北",
	"price": 10.5,
	"data1": "2017-10-20 11:31:32"
	}];
	$scope.add = function() {
	$scope.shows = true;
	}
	$scope.bc = function() {
	$scope.goods.push({
	name: $scope.name,
	count: $scope.count,
	addr: $scope.addr,
	price: $scope.price,
	data1: $scope.data1
	});
	$scope.shows = false;
	}
	$scope.del = function(index) {
	if(confirm("确认是否删除?")) {
	$scope.goods.splice(index, 1);
	}
	}
	$scope.change = function() {
	var xx = $scope.px;
	if(xx == "按照库存数量正序排序") {
	$scope.goods.sort(function(a, b) {
	if(a.count > b.count) {
	return 1;
	} else if(a.count < b.count) {
	return -1;
	}
	return 0;
	});
	} else if(xx == "按照库存数量倒序排序") {
	$scope.goods.sort(function(a, b) {
	if(a.count < b.count) {
	return 1;
	} else if(a.count > b.count) {
	return -1;
	}
	return 0;
	});
	}
	}
	var flag = false;
	$scope.all = function() {
	var cbs = $("input[type=checkbox]");
	if(flag == false) {
	for(var i = 0; i < cbs.length; i++) {
	var cb = cbs[i];
	cb.checked = true;
	}
	flag = true;
	} else {
	for(var i = 0; i < cbs.length; i++) {
	var cb = cbs[i];
	cb.checked = false;
	}
	flag = false;
	}
	}
	$scope.delAll = function() {
	if(confirm("确认删除吗?")) {
	var cbs = $("input[type=checkbox][id=zcb]:checked");
	for(var i = 0; i < cbs.length; i++) {
	var cb = cbs[i];
	var tr = cb.parentNode.parentNode;
	tr.remove();
	}
	}
	}
	});
	</script>
	</body>

	</html>

xiaozi_11

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商品库存管理

charset="UTF-8"> rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> src="js/jquery-3.2.1.min.js"type="text/javascript"charset="utf-8"> src=
复制链接

扫一扫