productEdit.html 23.1 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Yoho!Buy运营平台</title>
    <script src="/ufoPlatform/js/include.js"></script>
    <script src="/ufoPlatform/js/ajaxfileupload.js"></script>
    <style>
    	.product-detail-page ul, .product-detail-page li {
    		list-style: none;
    		padding: 0;
    		margin: 0;
    	}

    	.product-detail-page .container > li {
    		border-bottom: 1px solid #eee;
    		padding-bottom: 20px;
    	}

    	.product-detail-page .container {
    		padding: 0 30px;
    	}

    	.product-detail-page .base-info li,
    	.product-detail-page .keyword {
    		display: flex;
			align-items: center;
			margin-bottom: 10px;
    	}

    	.product-detail-page .label {
    		width: 120px;
    		font-size: 14px;
    		text-align: right;
    	}

		.product-detail-page .red {
			color: red;
		}

   		.product-detail-page .group-color, .product-detail-page .group-size {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
		}

    	.product-detail-page .group-color li {
    		margin-right: 5px;
			float: left;
			line-height: 30px;
			margin-left: 5px;
			padding: 0 5px;
			position: relative;
    	}

    	.product-detail-page .group-color .actived:before {
    		content: '';
    		width: 100%;
    		height: 100%;
    		display: block;
    		position: absolute;
    		top: 0;
			background: #000;
			opacity: 0.5;
			border-radius: 5px;
    	}

    	.product-detail-page .group-size .size {
    		float:left;
    		margin-left: 10px;
    	}

		.product-detail-page .goods-image {
			display: flex;
		}

    	.product-detail-page .goods-image .img {
    		width: 104px;
    		height: 104px;
    		margin-right: 10px;
    		background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			position: relative;
    	}

    	.product-detail-page .goods-image .img:hover:before {
    		content: "删除";
    		width: 100%;
    		display: block;
    		position: absolute;
    		top: 0;
    		background: #000;
    		opacity: 0.5;
    		color: #fff;
    		text-align: center;
    		line-height: 104px;
    	}
    </style>
</head>
<body class="easyui-layout product-detail-page" fit="true">
<div region="north">
    <script>
        document.write(addHead('商品管理 /基础商品 /商品创建', ''));
    </script>
</div>
<div region="center" style="overflow-y: scroll; top: 65px; padding-top: 10px;">
<form id="productDetail">
	<ul class="container">
		<li>
			<h2>基本信息</h2>
			<ul class="base-info">
				<li>
					<div class="label">品牌 <span class="red">*</span>：</div>
					<div class="base-info-item">
						<input id="editBrandId" type="text" name="brandId"> 系列：<input id="editSeriesId" name="seriesId" type="text">
					</div>
				</li>
				<li>
					<div class="label">商品名称 <span class="red">*</span>：</div>
					<div class="base-info-item">
						<input id="editProductName" type="text" name="productName"/>
					</div>
				</li>
				<li>
					<div class="label">发售日期 <span class="red">*</span>：</div>
					<div class="base-info-item">
						<input id="editSaleTime" type="text" name="saleTime"/>
					</div>
				</li>
				<li>
					<div class="label">性别 <span class="red">*</span>：</div>
					<div class="base-info-item">
						<label for="boy"><input id="boy" type="radio" value="1" name="gender" checked>男</label>
						<label for="girl"><input id="girl" type="radio" value="2" name="gender">女</label>
						<label for="all"><input id="all" type="radio" value="3" name="gender">通用</label>
					</div>
				</li>
				<li>
					<div class="label">分类 <span class="red">*</span>：</div>
					<div class="base-info-item">
						<input id="editMaxSortId" type="text" name="maxSortId"/>
						<input id="editMidSortId" type="text" name="midSortId"/>
						 货号 <span class="red">*</span>：<input id="editProductCode" type="text" name="productCode"/>
					</div>
				</li>
				<li>
					<div class="label">商品价格限制 <span class="red">*</span>：</div>
					<div class="base-info-item">
						<input id="editMinPrice" type="text" name="minPrice"/>
						<span style="margin-right: 20px;c">～</span>
						<input id="editMaxPrice" type="text" name="maxPrice"/>
					</div>
				</li>
			</ul>
		</li>

		<li>
			<h2>颜色尺码</h2>
			<div class="group-color">
				<div class="label">*颜色</div>
				<ul style="float: left; margin-left: 10px;">
				</ul>
			</div>
			<div class="group-size">
				<div class="label">*尺寸</div>
				<div class="size"></div>
			</div>

			<table id="colorSizeTable" style="width:100%;height:auto"></table>
		</li>

		<li>
			<h2>商品图片</h2>
			<div class="goods-image">
				<div id="imageUpload"></div>
			</div>
		</li>

		<li>
			<h2>商品关键词</h2>
			<div class="keyword">
				<div class="label" style="width: 120px;">商品关键词：</div>
				<div class="keyword-right">
					<input type="text" id="keyword" name="keyWords">
				</div>
			</div>
			<div class="red" style="margin-left:120px;">*每个关键词用英文逗号隔开</div>
		</li>
		<li style="text-align: center; margin-top: 20px;">
			<a id="submitBtn" class="easyui-linkbutton btn-success">提交</a>
			<a id="cancelBtn" class="easyui-linkbutton btn-default">取消</a>
		</li>
	</ul>
</form>
</div>
<script>
	/* 新增，修改公用页面
	    editImage代表图片是否修改过，新增固定传1。修改的时候根据是否修改，修改传1，无修改传0
	    1.新增，所有参数之前为空值,
	                   提交地址：product/addOrUpdate
	                   提交参数：{"brandId":78,"colorId":1,"colorName":"红色","editImage":1,"gender":3,"goodsName":"自定义红色","imageUrlList":["https://img10.static.yhbimg.com/goodsimg/2018/08/25/16/01e99496407347514356e5fe327d1f661d.jpg","https://img12.static.yhbimg.com/goodsimg/2018/08/25/16/0292fcebd071444401e6de340bcf2d8c19.jpg"],"keyWords":"球鞋,adidas","maxPrice":"899","maxSortId":10,"midSortId":18,"minPrice":"599","productCode":"009-009-009","productName":"测试商品009","saleTime":"2018-11-11","seriesId":8,"sizeIdList":[28,29]}
	    2.修改：首先根据传进来的id，获取商品信息把页面控件填写好。hidden记录id、goodsId、等参数
	                  提交参数：{"brandId":78,"colorId":2,"colorName":"蓝色","editImage":1,"gender":3,"goodsId":6,"goodsName":"自定义蓝色","id":10000004,"imageUrlList":["https://img10.static.yhbimg.com/goodsimg/2018/08/25/16/01e99496407347514356e5fe327d1f661d.jpg","https://img12.static.yhbimg.com/goodsimg/2018/08/25/16/0292fcebd071444401e6de340bcf2d8c19.jpg"],"keyWords":"球鞋,adidas2","maxPrice":"898","maxSortId":10,"midSortId":18,"minPrice":"598","productCode":"009-009-009-e","productName":"测试商品009-e","saleTime":"2018-11-12","seriesId":8}
	                 不可修改：品牌、分类、颜色、尺码、SKU（颜色展示名称除外：goodsName）
	*/
	var productDetail = {
		initDom: function() {
			this.dom = {
				editBrandId: $('#editBrandId'),
				editProductName: $('#editProductName'),
				editSaleTime: $('#editSaleTime'),
				editMinPrice: $('#editMinPrice'),
				editMaxPrice: $('#editMaxPrice'),
				editProductCode: $('#editProductCode'),
				editMaxSortId: $('#editMaxSortId'),
				editMidSortId: $('#editMidSortId'),
				editSeriesId: $('#editSeriesId'),
				imageUpload: $('#imageUpload')
			};
		},
	    initFormData: function(detail) {
			var that = this;

			this.dom.editBrandId.combobox('select', detail.brandId)
			this.dom.editProductName.textbox('setValue', detail.productName);
			this.dom.editSaleTime.myDatebox('setValue', detail.saleTime);
			this.dom.editMinPrice.textbox('setValue', detail.minPrice);
			this.dom.editMaxPrice.textbox('setValue', detail.maxPrice);
			this.dom.editProductCode.textbox('setValue', detail.productCode);
			this.dom.editMaxSortId.combobox('select', detail.maxSortId);
			this.dom.editMidSortId.combobox('select', detail.midSortId);
			this.dom.editSeriesId.combobox('select', detail.seriesId);
			$('input[name=gender]').eq(detail.gender - 1).attr('checked','true');
			$('.group-color li[data-id=' + detail.colorId + ']').addClass('actived');

			if (detail.imageUrlList.length > 0) {
				detail.imageUrlList.map(function(item) {
					that.dom.imageUpload.before('<div class="img" data-url="' + item + '" style="background-image:url(' + item + ');">');
				});
			}
	    },
	    initForm: function() {
			var that = this;

			this.dom.editProductName.textbox({
                required: true,
                missingMessage: "商品名称不能为空",
                prompt: "商品名称",
                width: 460
         	});

			$('#keyword').textbox({
				width: 700
			});

			this.dom.editBrandId.combobox({
				editable: false,
		        prompt: "选择品牌",
		        width: 200,
		        valueField: "id",
		        textField: "text",
		        onSelect: function(data) {
					that.dom.editSeriesId.combobox('enable');
					that.dom.editSeriesId.myCombobox('reload', contextPath + '/brandSeries/querySeriesByBrandId?brandId=' + data.id);
					that.dom.editSeriesId.combobox('select')
		        }
			});

			this.dom.editSeriesId.myCombobox({
		        method: "get",
	            editable: false,
	            prompt: "请选择",
	            width: 200,
	            valueField: "id",
	            textField: "text",
	            loadFilter: function (data) {
					if (data && data.code == 200 && data.data.length > 0) {
						that.dom.editSeriesId.combobox('select', data.data[0].id);
					}

	                return defaultLoadFilter(data);
	            }
	        });

			this.dom.editMaxSortId.myCombobox({
                editable: false,
                valueField: 'id',
                textField: 'text',
                prompt:"一级分类",
                onSelect: function (rec) {
					that.dom.editMidSortId.combobox('clear');
					that.dom.editMidSortId.combobox('reload', contextPath + "/productSort/getLevel2SortBySortId?sortId=" + rec.id);
					if (!that.productId) {
						that.dom.editMidSortId.combobox('enable');
					}
                }
            });

			this.dom.editSaleTime.myDatebox({
				prompt : "发售时间"
			});

			this.dom.editMidSortId.myCombobox({
				method: 'get',
	            editable: false,
	            valueField: 'id',
	            textField: 'text',
	            prompt:"二级分类",
	            loadFilter: function(data) {
					if (data && data.code == 200 && data.data.length > 0) {
						that.dom.editMidSortId.combobox('select', data.data[0].id);
					}

					return defaultLoadFilter(data);
	            },
	            onSelect: function(opt) {
					that.getSizeInfo(opt.id);
	            }
	        });

	        this.dom.editProductCode.textbox({
				prompt : "请输入",
				required: true,
				missingMessage: "货号不能为空"
			});
	        this.dom.editMinPrice.textbox({
				prompt : "最低价",
				required: true,
				missingMessage: "最低价不能为空"
			});
	        this.dom.editMaxPrice.textbox({
				prompt : "最高价",
				required: true,
				missingMessage: "最高价不能为空"
			});
	        $('#colorSizeTable').myDatagrid({
	            fit: false,
	            fitColumns: true,
	            autoRowHeight: true,
	            nowrap: false,
	            columns: [[{
	                title: "色系名称",
	                field: "colorName",
	                width: 40,
	                align: "center"
	            }, {
	                title: "颜色展示名称",
	                field: "goodsName",
	                width: 80,
	                height: 50,
	                align: "center",
	                formatter: function(value) {
	                		return '<input type="text" class="goods-name" value="' + value + '">';
	                }
	            }, {
	                title: "尺码",
	                field: "size",
	                width: 100,
	                align: "center"
	            }, {
	                title: "SKU",
	                field: "sku",
	                width: 80,
	                align: "center"
	            }]],
	            cache: false,
	            pagination: false,
	            idField: "id",
	            singleSelect: false,
	            checkOnSelect: false,
	            onLoadSuccess: function() {
					$('.goods-name').textbox({
						width: 100
					});
	            }
	        });

	        if (!this.productId) {
				this.dom.editSeriesId.combobox('disable');

			} else {
				this.dom.editBrandId.combobox('disable');
				this.dom.editMaxSortId.combobox('disable');
			}
			this.dom.editMidSortId.combobox('disable');
	    },
		init: function() {
			var that = this;

			this.productId = this.getUrlParam('id');
			this.detailData = {};
			this.submitFlag = false;
			this.colorSizeTableData = {
				total: 0,
				rows: []
			};
			this.initDom();
			this.initForm();

			this.dom.imageUpload.imageUpload({
	            width: 104,
	            height: 104,
	            realInputName: "goodsImage",
	            url: contextPath + '/fileupload/uploadFile',
	            queryParams: {
	                bucket: "goodsimg"
	            },
	            onBeforeSubmit: function () {
	                $.messager.progress({
	                    title: "正在执行",
	                    msg: "正在执行，请稍后...",
	                    interval: 500,
	                    text: ""
	                });
	            },
	            filterFileName: function (data) {
	                if (!data || data.code != 200) {
	                    $.messager.progress("close");
	                    $.messager.alert("错误", data.message);
	                    return "";
	                }
	                return data.data.url;
	            },
	            onLoadSuccess: function (data) {
	                $.messager.progress("close");
	                $(document).find('.file-close').click();
	                that.dom.imageUpload.before('<div class="img" data-url="' + data.data.url + '" style="background-image:url(' + data.data.url + ');">');
	                return false;
	            }
	        });

			$.when(this.getBrandList(), this.getMaxSortList(), this.getColorInfo()).then(function(brand, maxSort, colors) {
				var brandId = '';

				brand = brand[0];
				maxSort = maxSort[0];
				colors = colors[0] || [];

				if (brand && brand.code == 200) {
					that.dom.editBrandId.combobox({
				        data: brand.data || []
					});
				}

				if (maxSort && maxSort.code == 200) {
					that.dom.editMaxSortId.combobox({
				        data: maxSort.data || []
					});
				}

				if (colors && colors.code == 200) {
					colors.data.map(function(item) {
						var color = item.colorValue ? 'background: url('+item.colorValue+')' : 'background:#' + item.colorCode;

     					$('.group-color ul').append('<li data-id="' + item.id + '"><i style="float: left;width: 30px; height: 30px;border-radius: 50%; margin-right: 3px;' + color + ';background-size: contain;"></i>' + item.colorName + '</li>');
					});
				}

				if (that.productId) {
					that.getDetailInfo();
				} else {
					that.getSizeInfo();
				}
			});

			$(document).on('click', '.group-color li', function() {
				if (that.productId) {
					$.messager.alert('操作提示', "颜色不可修改！");
					return;
				}

				if (!$(this).hasClass('actived')) {
					var colorName = $(this).text();

					if (that.colorSizeTableData.rows.length > 0) {
						that.colorSizeTableData.rows.map(function(item) {
							item.colorName = colorName;
							item.goodsName = colorName;
						});
					} else {
						that.colorSizeTableData.rows.push({
							colorName: colorName,
							goodsName: colorName,
							size: '',
							sku: '-'
						});
					}

					that.mergeCells();

					$(this).siblings().removeClass('actived');
					$(this).addClass('actived');
				}
			});

			$(document).on('click', '.group-size input', function() {
				var colorName = goodsName = '';

				if (that.productId) {
					$.messager.alert('操作提示', '尺码不可修改！');
					return false;
				}

				if ($('.group-color .actived').length == 0) {
					$.messager.alert('操作提示', '请先选择颜色！');
					return false;
				}

				if (that.colorSizeTableData.rows.length > 0) {
					colorName = that.colorSizeTableData.rows[0].colorName;
					goodsName = that.colorSizeTableData.rows[0].goodsName;
				} else {
					colorName = goodsName = $('.group-color .actived').text();
				}

				that.colorSizeTableData.rows = [];
				$('.size-item:checked').each(function(index, item) {
					that.colorSizeTableData.rows.push({
						colorName: colorName,
						goodsName: goodsName,
						size: $(item).parent().text(),
						sku: '-'
					});
				});

				if ($('.size-item:checked').length == 0 && colorName) {
					that.colorSizeTableData.rows.push({
						colorName: colorName,
						goodsName: goodsName,
						size: '',
						sku: '-'
					});
				}
				that.mergeCells();
			});

			$(document).on('click', '.goods-image .img', function() {
				$(this).remove();
			});

			$('#cancelBtn').linkbutton({
				onClick: function() {
					window.location.href = contextPath + "/html/product/productList.html";
				}
			});

			$('#submitBtn').linkbutton({
	            onClick: function () {
					var imageUrlList = [];
					var sizeIdList = [];
					var editImage = 0;

					if (that.submitFlag) {
						return;
					}

					that.submitFlag = true;

					$('.goods-image .img').each(function(index, item) {
						imageUrlList.push($(item).data('url'));
					});

					if (that.productId) {
						if (imageUrlList.length == that.detailData.imageUrlList.length) {
							$.each(imageUrlList, function(index, item) {
								if (item != that.detailData.imageUrlList[index]) {
									editImage = 1;
								}
							});
						} else {
							editImage = 1;
						}
					} else {
						editImage = 1;
						$('.group-size input:checked').each(function(index, item) {
							sizeIdList.push(+$(item).val());
						});
					}

					var ajaxData = {
						brandId: +that.dom.editBrandId.textbox('getValue'),
						colorId: +$('.group-color .actived').data('id'),
						colorName: $('.group-color .actived').text(),
						editImage: editImage,
						gender: +$('input[name="gender"]:checked').val(),
						goodsName: $('.goods-name').length>0 && $('.goods-name').textbox('getValue') || '',
						imageUrlList: imageUrlList,
						keyWords: $('#keyword').textbox('getValue'),
						maxPrice: that.dom.editMaxPrice.textbox('getValue'),
						maxSortId: +that.dom.editMaxSortId.combobox('getValue'),
						midSortId: +that.dom.editMidSortId.combobox('getValue'),
						minPrice: that.dom.editMinPrice.textbox('getValue'),
						productCode: that.dom.editProductCode.textbox('getValue'),
						productName: that.dom.editProductName.textbox('getValue'),
						saleTime: that.dom.editSaleTime.myDatebox('getValue'),
						seriesId: +that.dom.editSeriesId.combobox('getValue')
					};

					if (!ajaxData.brandId) {
						$.messager.alert('操作提示', '请选择品牌！');
						return false;
					}

					if (!ajaxData.saleTime) {
						$.messager.alert('操作提示', '请选择发售时间！');
						return false;
					}

					if (!ajaxData.maxSortId) {
						$.messager.alert('操作提示', '请选择一级分类！');
						return false;
					}

					if (!ajaxData.midSortId) {
						$.messager.alert('错误提示', '请选择二级分类！');
						return false;
					}

					if (imageUrlList.length == 0) {
						$.messager.alert('操作提示', '至少添加一张图片！');
						return false;
					}

					if (!$('#productDetail').form("validate")) {
						return false;
					}

					if (!that.productId) {
						ajaxData.sizeIdList = sizeIdList;

						if (!ajaxData.colorName) {
							$.messager.alert('错误提示', '请选择颜色！');
							return false;
						}

						if (sizeIdList.length ==0) {
							$.messager.alert('错误提示', '请选择尺码！');
							return false;
						}
					} else {
						ajaxData.id = that.detailData.id;
						ajaxData.goodsId = that.detailData.goodsId;
					}

					$.messager.progress({
                         title: "正在执行",
                         msg: "正在执行，请稍后...",
                         interval: 500,
                         text: ""
                     });

	                $.ajax({
						url: contextPath + '/product/addOrUpdate',
						contentType: "application/json",
						dataType: "json",
						type: "POST",
						data: JSON.stringify(ajaxData),
						success: function(data) {
							that.submitFlag = false;
							$.messager.progress("close");
							$.messager.alert('操作提示', '提交成功！');
							window.location.href = contextPath + "/html/product/productList.html";
						},
						error: function(err) {
							that.submitFlag = false;
							$.messager.alert('操作提示', err.message || '提交失败');
						}
	                });
	            }
	        });
		},
		mergeCells: function() {
			this.colorSizeTableData.total = this.colorSizeTableData.rows.length;

			$('#colorSizeTable').datagrid('loadData', this.colorSizeTableData);
			$('#colorSizeTable').datagrid('mergeCells', {index: 0, field: 'colorName', rowspan: this.colorSizeTableData.total});
			$('#colorSizeTable').datagrid('mergeCells', {index: 0, field: 'goodsName', rowspan: this.colorSizeTableData.total});
			$('#colorSizeTable').datagrid('resize');
		},
		getUrlParam: function(name) {
		    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		    var r = window.location.search.substr(1).match(reg);

		    if (r != null) {
		        return unescape(r[2]);
		    }

		    return null;
		},
		getDetailInfo: function() {
			var that = this;

			// 编辑的情况需要根据id查询商品信息
			$.get(contextPath + '/product/find?id=' + this.productId).then(function(ret) {
				if (ret && ret.code == 200) {
					ret = ret.data || {};

					that.initFormData(ret);
					that.detailData = ret;
				}
			});

		},
		getBrandList: function() {
			// 获取所有品牌
			return $.get(contextPath + '/brand/getBrandName');
		},
		getMaxSortList: function() {
			// 获取一级分类
			return $.get(contextPath + "/productSort/getLevel1SortIdAndName");
		},
		getSizeInfo: function(sortId) {
			var that = this;
			sortId = sortId || 0;

			// 获取所有尺寸
			$.get(contextPath + '/size/queryAllSize4Goods?sortId=' + sortId, function(ret) {
				if (ret && ret.code == 200) {
					$('.group-size .size').html('');
     				$.each(ret.data || [], function(index, item) {
     					if (item.id) {
     						$('.group-size .size').append('<label for="size" style="margin-right: 5px;" data-id="' + item.id + '"><input type="checkbox" value="' + item.id + '" class="size-item">'+item.text+'</label>');
     					}
     				});

     				if (that.detailData.sizeIdList) {
     					that.detailData.sizeIdList.map(function(item) {
							$('.group-size label[data-id=' + item + '] input').attr('checked','true');
							that.colorSizeTableData.rows.push({
								colorName: $('.group-color li[data-id='+that.detailData.colorId+']').text(),
								goodsName: that.detailData.goodsName,
								size: $('.group-size label[data-id=' + item + ']').text(),
								sku: '-'
							});
						});
					}
     				that.mergeCells();
     			}
			});
		},
		getColorInfo: function() {
			// 获取所有颜色
			return $.get(contextPath + '/productColor/getAllColor');
		}
	};

    $(function () {
		productDetail.init();
    });

</script>
</body>
</html>