商品入库管理系统-CSDN博客

本文链接：https://blog.csdn.net/qq_41946491/article/details/79798518
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
		<!--样式-->
		<style type="text/css">
		}
		</style>
		<script type="text/javascript">
			var app = angular.module("myapp", []).controller("myctrl", function($scope) {
				//1.初始化下拉选项的数据
				$scope.order = ["请选择排序方式", "按照库存数量正序", "按照库存数量倒序", "按照货品单价正序", "按照货品单价倒序"];
				//2.定义状态值--隐藏
				$scope.flag = false;
				//3.定义表格内部数据
				$scope.goods = [{
					"name": "云南白药",
					"num": 100,
					"produce": "云南",
					"price": "19.9",
					"date1": "1371120093221"
				}, {
					"name": "999感冒灵",
					"num": 30,
					"produce": "北京",
					"price": "12.5",
					"date1": "1371399948599"
				}, {
					"name": "感康",
					"num": 20,
					"produce": "河北",
					"price": "16.6",
					"date1": "1371394846499"
				}];
				//点击提交按钮,,,获取输入的内容
				$scope.save = function() {
					//清空输入框的数据
					$(".ipt").val("");
					//获取输入的内容
					var name = $scope.name;
					var num = $scope.num;
					var produce = $scope.produce;
					var price = $scope.price;
					//alert(name+"-"+num+"-"+produce+"-"+price);
					var date = new Date();
					var y = date.getFullYear();
					var m = date.getMonth();
					var d = date.getDay();
					var h = date.getHours();
					var mm = date.getMinutes();
					var s = date.getSeconds();
					var date1 = y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
					//添加到表格数据中
					$scope.goods.push({
						name: name,
						num: num,
						produce: produce,
						price: price,
						date1: date1
					})
					//隐藏表单
					$scope.flag = false;
				}
				//删除
				$scope.del = function(position) {
					$scope.goods.splice(position, 1);
				}
				//排序
				$scope.change = function() {
					//获取到下拉选项的内容
					var value = $scope.selectName;
					//alert(value);
					//可以根据这个内容进行判断
					switch(value) {
						case "按照库存数量正序":
							$scope.goods.sort(function(a, b) {
								return a.num - b.num;
							});
							break;
						case "按照库存数量倒序":
						$scope.goods.sort(function(a, b) {
								return b.num - a.num;
							});
							break;
						case "按照货品单价正序":
						$scope.goods.sort(function(a, b) {
								return a.price - b.price;
							});
							break;
						case "按照货品单价倒序":
						$scope.goods.sort(function(a, b) {
								return b.price - a.price;
							});
							break;
						default:
							break;
					}
				}
			})
		</script>
	</head>

	<body ng-app="myapp" ng-controller="myctrl">
		<h2>商品入库管理</h2>
		<div class="tab">
			<input type="text" placeholder="请输入关键字" ng-model="selectValue" />
			<select ng-model="selectName" ng-init="selectName=order[0]" ng-options="s for s in order" ng-change="change()">{{s}}</select>
			<button ng-click="flag=true">入库</button>
		</div>
		<table border="1px" cellspacing="0" cellpadding="0">
			<tr>
				<td>名称</td>
				<td>数量</td>
				<td>产地</td>
				<td>价格</td>
				<td>入库时间</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="s in goods|filter:selectValue">
				<td>{{s.name}}</td>
				<td>{{s.num}}</td>
				<td>{{s.produce}}</td>
				<td>{{s.price|currency:"¥"}}</td>
				<td>{{s.date1|date:"yyyy-MM-dd hh-mm-ss"}}</td>
				<td><button ng-click="del($index)">删除</button></td>
			</tr>
		</table>
		<form ng-show="flag">
			名称:<input type="text" ng-model="name" class="ipt" /><br /> 数量:
			<input type="text" ng-model="num" class="ipt" /><br /> 产地:
			<input type="text" ng-model="produce" class="ipt" /><br /> 价格:
			<input type="text" ng-model="price" class="ipt" /><br /> 入库时间:
			<input type="text" ng-model="date" class="ipt" /><br />
			<button ng-click="save()">提交</button>
		</form>
	</body>

</html>