ufo / ufo-platform · Commits

Go to a project

Authored by 王水玲
Commit 88ef28ab7c2ec4b7b6a3828182b50078e0e2caf4 1 parent 98f97c6c

商品创建

Inline Side-by-side
Showing 1 changed file with 241 additions and 225 deletions
... ... @@ -6,26 +6,26 @@
<script src="/ufoPlatform/js/include.js"></script>
<script src="/ufoPlatform/js/ajaxfileupload.js"></script>
<style>
.product-detail-page ul, .product-detail-page li {
.product-detail-page ul, .product-detail-page li {
list-style: none;
padding: 0;
margin: 0;
}
}
.product-detail-page .container > li {
.product-detail-page .container > li {
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
}
.product-detail-page .container {
.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;
align-items: center;
margin-bottom: 10px;
}
.product-detail-page .label {
... ... @@ -34,23 +34,23 @@
text-align: right;
}
.product-detail-page .red {
color: red;
}
.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, .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;
float: left;
line-height: 30px;
margin-left: 5px;
padding: 0 5px;
position: relative;
}
.product-detail-page .group-color .actived:before {
... ... @@ -60,9 +60,9 @@
display: block;
position: absolute;
top: 0;
background: #000;
opacity: 0.5;
border-radius: 5px;
background: #000;
opacity: 0.5;
border-radius: 5px;
}
.product-detail-page .group-size .size {
... ... @@ -70,18 +70,18 @@
margin-left: 10px;
}
.product-detail-page .goods-image {
display: flex;
}
.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;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.product-detail-page .goods-image .img:hover:before {
... ... @@ -105,7 +105,7 @@
</script>
</div>
<div region="center" style="overflow-y: scroll; top: 65px; padding-top: 10px;">
<from id="productDetail">
<form id="productDetail">
<ul class="container">
<li>
<h2>基本信息</h2>
... ... @@ -159,7 +159,7 @@
<h2>颜色尺码</h2>
<div class="group-color">
<div class="label">*颜色</div>
<ul style="float:left; margin-left: 10px;">
<ul style="float: left; margin-left: 10px;">
</ul>
</div>
<div class="group-size">
... ... @@ -189,10 +189,10 @@
</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>
<a id="cancelBtn" class="easyui-linkbutton btn-default">取消</a>
</li>
</ul>
</from>
</form>
</div>
<script>
/* 新增，修改公用页面
... ... @@ -205,121 +205,135 @@
不可修改：品牌、分类、颜色、尺码、SKU（颜色展示名称除外：goodsName）
*/
var productDetail = {
initData: function(detail) {
$("#editBrandId").combobox('select', detail.brandId)
$("#editProductName").textbox('setValue', detail.productName);
$("#editSaleTime").myDatebox('setValue', detail.saleTime);
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');
$('#editMinPrice').textbox('setValue', detail.minPrice);
$('#editMaxPrice').textbox('setValue', detail.maxPrice);
$('#editProductCode').textbox('setValue', detail.productCode);
$("#editMaxSortId").combobox('select', detail.maxSortId);
$("#editMidSortId").combobox('select', detail.midSortId);
$("#editSeriesId").combobox('select', detail.seriesId);
$('.group-color li[data-id='+detail.colorId+']').addClass('actived');
$('.group-color li[data-id=' + detail.colorId + ']').addClass('actived');
if (detail.imageUrlList.length > 0) {
detail.imageUrlList.map(function(item) {
$('#imageUpload').before('<div class="img" data-url="' + item + '" style="background-image:url(' + item + ');">');
that.dom.imageUpload.before('<div class="img" data-url="' + item + '" style="background-image:url(' + item + ');">');
});
}
},
initForm: function() {
var that = this;
var that = this;
$("#editProductName").textbox({
this.dom.editProductName.textbox({
required: true,
missingMessage: "商品名称不能为空",
prompt: "商品名称",
width: 460
});
$('#keyword').textbox({
$('#keyword').textbox({
width: 700
});
$("#editBrandId").combobox({
});
this.dom.editBrandId.combobox({
editable: false,
prompt: "选择品牌",
width: 200,
valueField: "id",
textField: "text",
onSelect: function(data) {
$('#editSeriesId').combobox('enable');
$("#editSeriesId").myCombobox('reload', contextPath + '/brandSeries/querySeriesByBrandId?brandId=' + data.id);
$("#editSeriesId").combobox('select')
that.dom.editSeriesId.combobox('enable');
that.dom.editSeriesId.myCombobox('reload', contextPath + '/brandSeries/querySeriesByBrandId?brandId=' + data.id);
that.dom.editSeriesId.combobox('select')
}
});
$("#editSeriesId").myCombobox({
method: "get",
});
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) {
$("#editSeriesId").combobox('select', data.data[0].id);
}
if (data && data.code == 200 && data.data.length > 0) {
that.dom.editSeriesId.combobox('select', data.data[0].id);
}
return defaultLoadFilter(data);
}
});
$('#editMaxSortId').myCombobox({
this.dom.editMaxSortId.myCombobox({
editable: false,
valueField: 'id',
textField: 'text',
prompt:"一级分类",
onSelect: function (rec) {
$('#editMidSortId').combobox('clear');
$('#editMidSortId').combobox('reload', contextPath + "/productSort/getLevel2SortBySortId?sortId=" + rec.id);
if (!that.productId) {
$('#editMidSortId').combobox('enable');
}
that.dom.editMidSortId.combobox('clear');
that.dom.editMidSortId.combobox('reload', contextPath + "/productSort/getLevel2SortBySortId?sortId=" + rec.id);
if (!that.productId) {
that.dom.editMidSortId.combobox('enable');
}
}
});
$("#editSaleTime").myDatebox({
this.dom.editSaleTime.myDatebox({
prompt : "发售时间"
});
$('#editMidSortId').myCombobox({
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) {
$("#editMidSortId").combobox('select', data.data[0].id);
}
if (data && data.code == 200 && data.data.length > 0) {
that.dom.editMidSortId.combobox('select', data.data[0].id);
}
return defaultLoadFilter(data);
return defaultLoadFilter(data);
},
onSelect: function(opt) {
that.getSizeInfo(opt.id);
that.getSizeInfo(opt.id);
}
});
$("#editProductCode").textbox({
this.dom.editProductCode.textbox({
prompt : "请输入",
required: true,
missingMessage: "货号不能为空"
});
$("#editMinPrice").textbox({
this.dom.editMinPrice.textbox({
prompt : "最低价",
required: true,
missingMessage: "最低价不能为空"
});
$("#editMaxPrice").textbox({
this.dom.editMaxPrice.textbox({
prompt : "最高价",
required: true,
missingMessage: "最高价不能为空"
});
});
$('#colorSizeTable').myDatagrid({
fit: false,
fitColumns: true,
... ... @@ -356,34 +370,35 @@
singleSelect: false,
checkOnSelect: false,
onLoadSuccess: function() {
$('.goods-name').textbox({
width: 100
});
$('.goods-name').textbox({
width: 100
});
}
});
if (!this.productId) {
$('#editSeriesId').combobox('disable');
$('#editMidSortId').combobox('disable');
this.dom.editSeriesId.combobox('disable');
} else {
$("#editBrandId").combobox('disable');
$("#editMaxSortId").combobox('disable');
$("#editMidSortId").combobox('disable');
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.productId = this.getUrlParam('id');
this.detailData = {};
this.submitFlag = false;
this.colorSizeTableData = {
total: 0,
rows: []
};
this.initDom();
this.initForm();
$("#imageUpload").imageUpload({
this.dom.imageUpload.imageUpload({
width: 104,
height: 104,
realInputName: "goodsImage",
... ... @@ -410,7 +425,7 @@
onLoadSuccess: function (data) {
$.messager.progress("close");
$(document).find('.file-close').click();
$('#imageUpload').before('<div class="img" data-url="' + data.data.url + '" style="background-image:url(' + data.data.url + ');">');
that.dom.imageUpload.before('<div class="img" data-url="' + data.data.url + '" style="background-image:url(' + data.data.url + ');">');
return false;
}
});
... ... @@ -421,19 +436,19 @@
brand = brand[0];
maxSort = maxSort[0];
colors = colors[0] || [];
if (brand && brand.code == 200) {
$("#editBrandId").combobox({
that.dom.editBrandId.combobox({
data: brand.data || []
});
});
}
if (maxSort && maxSort.code == 200) {
$("#editMaxSortId").combobox({
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;
... ... @@ -441,14 +456,14 @@
$('.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('操作提示', "颜色不可修改！");
... ... @@ -478,7 +493,7 @@
$(this).addClass('actived');
}
});
$(document).on('click', '.group-size input', function() {
var colorName = goodsName = '';
... ... @@ -491,7 +506,7 @@
$.messager.alert('操作提示', '请先选择颜色！');
return false;
}
if (that.colorSizeTableData.rows.length > 0) {
colorName = that.colorSizeTableData.rows[0].colorName;
goodsName = that.colorSizeTableData.rows[0].goodsName;
... ... @@ -508,7 +523,7 @@
sku: '-'
});
});
if ($('.size-item:checked').length == 0 && colorName) {
that.colorSizeTableData.rows.push({
colorName: colorName,
... ... @@ -519,116 +534,116 @@
}
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 (this.submitFlag) {
return;
}
this.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: +$('#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: $('#editMaxPrice').textbox('getValue'),
maxSortId: +$('#editMaxSortId').combobox('getValue'),
midSortId: +$('#editMidSortId').combobox('getValue'),
minPrice: $('#editMinPrice').textbox('getValue'),
productCode: $('#editProductCode').textbox('getValue'),
productName: $('#editProductName').textbox('getValue'),
saleTime: $("#editSaleTime").myDatebox('getValue'),
seriesId: +$('#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({
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,
... ... @@ -636,8 +651,8 @@
});
$.ajax({
url: contextPath + '/product/addOrUpdate',
contentType: "application/json",
url: contextPath + '/product/addOrUpdate',
contentType: "application/json",
dataType: "json",
type: "POST",
data: JSON.stringify(ajaxData),
... ... @@ -645,10 +660,11 @@
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);
$.messager.alert('操作提示', err.message || '提交失败');
}
});
}
... ... @@ -680,7 +696,7 @@
if (ret && ret.code == 200) {
ret = ret.data || {};
that.initData(ret);
that.initFormData(ret);
that.detailData = ret;
}
});
... ... @@ -710,15 +726,15 @@
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: '-'
});
});
}
$('.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();
}
});
... ... @@ -730,7 +746,7 @@
};
$(function () {
productDetail.init();
productDetail.init();
});
</script>
... ...