用Vue实现的Demo-商品管理

Myth丶恋晨 2021-07-25 14:17 385阅读 0赞

先看一下效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

实现代码如下:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>商品管理 v 1.0</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			Vue.filter('formatDate', function(value){
    				if(!value)
    					return '';
    				
    				if(value instanceof Date){
    					var d = value;
    					var y = d.getFullYear();
    					var m = d.getMonth() + 1;
    					var day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
    					var myDate = y + '-' + m + '-' + day;
    					return myDate;
    				}
    				else{
    					return value;
    				}
    				
    			});
    			window.onload = () => {
    				let vm = new Vue({
    					el : '.container',
    					data : {
    						imgUrl : '../res/images/',
    						imgName : 'logo.png',
    						goods : {
    							id : '',
    							name : '',
    							price : '',
    							num : '',
    							type : '',
    							addDate : ''		//2018-11-11
    						},
    						goodsType : ['零食', '电子产品', '生活用品'],
    						goodsArray : [
    							{id : '001', name : '可乐', price : 3.5, num : 10, type : '零食', addDate : '2017-11-10'},
    							{id : '002', name : 'GTX2080', price : 9999, num : 20, type : '电子产品', addDate : '2018-09-24'},
    							{id : '003', name : '牙刷', price : 5, num : 30, type : '生活用品', addDate : '2018-12-09'},
    						],
    						colNum : 8,
    						delArray : []  //删除选中的 索引
    					},
    					methods : {
    						addGoods(){
    							
    							this.goods.addDate = new Date();
    							
    							this.goodsArray.push(this.goods);
    							this.goods = {};
    						},
    						delGoods(index){
    							this.goodsArray.splice(index, 1);
    						},
    						clearGoodsArray(){
    							this.goodsArray = [];
    						},
    						delSelected(){
    							
    							this.delArray.sort((a, b)=>{
    								return a - b;
    							});
    							
    							for(var i=0; i<this.delArray.length; i++){
    								this.goodsArray.splice(this.delArray[i] - i, 1);
    							}
    							this.delArray = [];
    						}
    					}
    				});
    			}
    		</script>
    		<style type="text/css">
    			.container{
    				margin: 0 auto;
    				text-align: center;
    				width: 800px;
    				border: 2px solid gray;
    			}
    			.header{
    				margin: 10px;
    				border: 1px solid gray;
    			}
    			.header .title{
    				color: rgb(53, 73, 93);
    				background: rgb(65, 184, 131);
    			}
    			.logo{
    				position: relative;
    				top: 12px;
    			}
    			
    			.form-warp{
    				margin: 10px;
    				padding-bottom: 10px;
    				border: 1px solid gray;
    			}
    			.form-warp .content{
    				line-height: 35px;
    			}
    			.form-warp input{
    				width: 150px;
    				height: 18px;
    			}
    			.form-warp select{
    				width: 154px;
    				height: 24px;
    			} 
    			
    			.sub-title{
    				color: rgb(65, 184, 131);
    				background: rgb(53, 73, 93);
    			}
    			
    			.table-warp{
    				margin: 10px;
    				padding-bottom: 10px;
    				border: 1px solid gray;
    			}
    			.table-warp th{
    				width: 80px;
    				color: #FFF;
    				background-color: rgb(53, 73, 93);
    			}
    			.table-warp a{
    				text-decoration: none;
    			}
    			.clear-btn{
    				text-align: right;
    				padding-right: 10px;
    			}
    			
    			.fontColor{
    				color: gray;
    			}
    			.myBackgounrdColor{
    				background: rgb(65, 184, 131);
    			}
    			.myFontSize{
    				font-size: 200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			
    			<div class="header">
    				<img :src="imgUrl + imgName" class="logo" height="80px" />
    				<h1 class="title">商品管理 v1.0</h1>
    			</div>
    			
    			<div class="form-warp">
    				<h2 class="sub-title">添加商品</h2>
    				<div class="content">
    					商品编号：<input type="text" placeholder="请输入商品编号" v-model="goods.id"/><br />
    					商品名称：<input type="text" placeholder="请输入商品名称" v-model="goods.name"/><br />
    					商品价格：<input type="text" placeholder="请输入商品价格" v-model="goods.price"/><br />
    					商品数量：<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />
    					商品类型：<select v-model="goods.type">
    										<option value=""> -- 选择商品类型 --</option>
    										<option v-for="type in goodsType">{
       {type}}</option>
    									</select>
    				</div>
    				<div class="form-btn">
    					<button @click="addGoods">确认添加</button>
    					<button @click="goods = {}">重置信息</button>
    				</div>
    			</div>
    			
    			<div class="table-warp">
    				<h2 :class="{fontColor : goodsArray.length <= 0}" class="sub-title">商品列表</h2>
    				<div class="content">
    					<table border="1" align="center">
    						<tr>
    							<th>序号</th>
    							<th>编号</th>
    							<th>名称</th>
    							<th>价格</th>
    							<th>数量</th>
    							<th>类型</th>
    							<th style="width: 100px;">入库日期</th>
    							<th>删除</th>
    							<th>选择</th>
    						</tr>
    						<tr>
    							<td :colspan="colNum" height="150px" v-show="goodsArray.length <= 0">暂无商品</td>
    						</tr>
    						<tr v-for="(item, index) in goodsArray" :key="item.id">
    							<td>{
       {index}}</td>
    							<td>{
       {item.id}}</td>
    							<td>{
       {item.name}}</td>
    							<td>{
       {item.price}}</td>
    							<td style="display: flex;">
    								<a style="flex: 0.5;" href="#" @click.prevent="item.num = item.num-- <= 0 ? 0 : item.num--">-</a>
    								{
       {item.num}}
    								<a style="flex: 0.5;" href="#" @click.prevent="item.num++">+</a>
    							</td>
    							<td>{
       {item.type}}</td>
    							<td>{
       {item.addDate | formatDate}}</td>
    							<td>
    								<button @click="delGoods(index)">删除</button>
    							</td>
    							<td>
    								<input type="checkbox" :value="index" v-model="delArray"/>
    							</td>
    						</tr>
    					</table>
    				</div>
    				<div class="clear-btn">
    					<a href="#" @click.prevent="delSelected" v-show="delArray.length > 0">删除选中</a>
    					<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部</a>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/752a25d431bc45968b53c9ece23a9876.png