egg(72,73)–egg之商品curd的编辑

jiezi

6 年前

controller
app/controller/admin/goods.js
edit
async edit() {

// 获取修改数据的 id

var id=this.ctx.request.query.id;

// 获取所有的颜色值
var colorResult=await this.ctx.model.GoodsColor.find({});

// 获取所有的商品类型
var goodsType=await this.ctx.model.GoodsType.find({});

// 获取商品分类

var goodsCate=await this.ctx.model.GoodsCate.aggregate([

{
$lookup:{
from:’goods_cate’,
localField:’_id’,
foreignField:’pid’,
as:’items’
}
},
{
$match:{
“pid”:’0′
}
}

])

// 获取修改的商品

var goodsResult=await this.ctx.model.Goods.find({‘_id’:id});

// 获取当前商品的颜色
// 5bbb68dcfe498e2346af9e4a,5bbb68effe498e2346af9e4b,5bc067d92e5f889dc864aa96

var colorArrTemp=goodsResult[0].goods_color.split(‘,’);

// console.log(colorArrTemp);

var goodsColorArr=[];

colorArrTemp.forEach((value)=>{
goodsColorArr.push({“_id”:value})
})
var goodsColorReulst=await this.ctx.model.GoodsColor.find({
$or:goodsColorArr
})

// console.log(colorReulst);

// 获取规格信息

var goodsAttsResult=await this.ctx.model.GoodsAttr.find({“goods_id”:goodsResult[0]._id});

var goodsAttsStr=”;

goodsAttsResult.forEach(async (val)=>{

if(val.attribute_type==1){

goodsAttsStr+=`<li><span>${val.attribute_title}: </span><input type=”hidden” name=”attr_id_list” value=”${val.attribute_id}” /> <input type=”text” name=”attr_value_list” value=”${val.attribute_value}” /></li>`;
}else if(val.attribute_type==2){
goodsAttsStr+=`<li><span>${val.attribute_title}: </span><input type=”hidden” name=”attr_id_list” value=”${val.attribute_id}” /> <textarea cols=”50″ rows=”3″ name=”attr_value_list”>${val.attribute_value}</textarea></li>`;
}else{
// 获取 attr_value 获取可选值列表
var oneGoodsTypeAttributeResult=await this.ctx.model.GoodsTypeAttribute.find({
_id:val.attribute_id
})

var arr=oneGoodsTypeAttributeResult[0].attr_value.split(‘\n’);

goodsAttsStr+=`<li><span>${val.attribute_title}: </span><input type=”hidden” name=”attr_id_list” value=”${val.attribute_id}” />`;

goodsAttsStr+=`<select name=”attr_value_list”>`;

for(var j=0;j<arr.length;j++){

if(arr[j]==val.attribute_value){
goodsAttsStr+=`<option value=”${arr[j]}” selected >${arr[j]}</option>`;
}else{
goodsAttsStr+=`<option value=”${arr[j]}” >${arr[j]}</option>`;
}
}
goodsAttsStr+=`</select>`;
goodsAttsStr+=`</li>`;
}

})

// 商品的图库信息
var goodsImageResult=await this.ctx.model.GoodsImage.find({“goods_id”:goodsResult[0]._id});

console.log(goodsImageResult);

await this.ctx.render(‘admin/goods/edit’,{
colorResult:colorResult,
goodsType:goodsType,
goodsCate:goodsCate,
goods:goodsResult[0],
goodsAtts:goodsAttsStr,
goodsImage:goodsImageResult,
goodsColor:goodsColorReulst

});

}
doEdit
async doEdit() {
let parts = this.ctx.multipart({autoFields: true});
let files = {};
let stream;
while ((stream = await parts()) != null) {
if (!stream.filename) {
break;
}
let fieldname = stream.fieldname; //file 表单的名字

// 上传图片的目录
let dir=await this.service.tools.getUploadFile(stream.filename);
let target = dir.uploadDir;
let writeStream = fs.createWriteStream(target);

await pump(stream, writeStream);

files=Object.assign(files,{
[fieldname]:dir.saveDir
})

}

var formFields=Object.assign(files,parts.field);

// 修改商品的 id
var goods_id=parts.field.id;
// 修改商品信息
await this.ctx.model.Goods.updateOne({“_id”:goods_id},formFields);

// 修改图库信息（增加）

var goods_image_list=formFields.goods_image_list;
if(goods_id && goods_image_list){
if(typeof(goods_image_list)==’string’){

goods_image_list=new Array(goods_image_list);
}

for(var i=0;i<goods_image_list.length;i++){
let goodsImageRes =new this.ctx.model.GoodsImage({
goods_id:goods_id,
img_url:goods_image_list[i]
});

await goodsImageRes.save();
}
}

// 修改商品类型数据 1、删除以前的类型数据 2、重新增加新的商品类型数据

//1、删除以前的类型数据

await this.ctx.model.GoodsAttr.deleteOne({“goods_id”:goods_id});

//2、重新增加新的商品类型数据

var attr_value_list=formFields.attr_value_list;
var attr_id_list=formFields.attr_id_list;

if(goods_id && attr_id_list && attr_value_list){

// 解决只有一个属性的时候存在的 bug
if(typeof(attr_id_list)==’string’){
attr_id_list=new Array(attr_id_list);
attr_value_list=new Array(attr_value_list);
}

for(var i=0;i<attr_value_list.length;i++){
// 查询 goods_type_attribute
if(attr_value_list[i]){
var goodsTypeAttributeResutl=await this.ctx.model.GoodsTypeAttribute.find({“_id”:attr_id_list[i]})

let goodsAttrRes =new this.ctx.model.GoodsAttr({
goods_id:goods_id,
cate_id:formFields.cate_id,
attribute_id:attr_id_list[i],
attribute_type:goodsTypeAttributeResutl[0].attr_type,
attribute_title:goodsTypeAttributeResutl[0].title,
attribute_value:attr_value_list[i]
});

await goodsAttrRes.save();
}
}

}

await this.success(‘/admin/goods’,’ 修改商品数据成功 ’);

}
view
app/view/admin/goods/edit.html
<%- include ../public/page_header.html %>

<!– 富文本编辑器 –>
<link href=”/public/admin/wysiwyg-editor/css/font-awesome.min.css” rel=”stylesheet” type=”text/css” />

<!– Include Editor style. –>
<link href=”/public/admin/wysiwyg-editor/css/froala_editor.pkgd.min.css” rel=”stylesheet” type=”text/css” />
<link href=”/public/admin/wysiwyg-editor/css/froala_style.min.css” rel=”stylesheet” type=”text/css” />

<!– 引入 jquery –>
<!– Include Editor JS files. –>
<script type=”text/javascript” src=”/public/admin/wysiwyg-editor/js/froala_editor.pkgd.min.js”></script>

<!– 批量上传图片插件 –>

<div class=”panel-body”>
<div class=”table-responsive input-form”>
<form action=”/admin/goods/doEdit?_csrf=<%=csrf%>” method=”post” class=”goods_content” enctype=”multipart/form-data”>

<!– Nav tabs –>
<ul class=”nav nav-tabs” role=”tablist”>
<li role=”presentation” class=”active”><a href=”#general” role=”tab” data-toggle=”tab”> 通用信息 </a></li>
<li role=”presentation”><a href=”#detail” role=”tab” data-toggle=”tab”> 详细描述 </a></li>
<li role=”presentation”><a href=”#mix” role=”tab” data-toggle=”tab”> 其他信息 </a></li>
<li role=”presentation”><a href=”#attribute” role=”tab” data-toggle=”tab”> 规格与包装 </a></li>
<li role=”presentation”><a href=”#photo” role=”tab” data-toggle=”tab”> 商品相册 </a></li>

</ul>

<!– Tab panes –>
<div class=”tab-content”>
<div role=”tabpanel” class=”tab-pane active” id=”general”>

<%for(var i=0;i<goodsCate.length;i++){%>

<option value=”<%=goodsCate[i]._id%>” <%if(goods.cate_id.toString()==goodsCate[i]._id.toString()){%>selected<%}%> ><%=goodsCate[i].title%></option>
<%for(var j=0;j<goodsCate[i].items.length;j++){%>
<option value=”<%=goodsCate[i].items[j]._id%>” <%if(goods.cate_id.toString()==goodsCate[i].items[j]._id.toString()){%>selected<%}%>>—-<%=goodsCate[i].items[j].title%></option>

<%}%>

</select>

</li>
<li> <span> 商品图片:</span> <input type=”file” name=”goods_img”/>
<span> </span> <img class=”pic” src=”<%=goods.goods_img%>” />
</li>
<li> <span> 商品价格:</span> <input type=”text” name=”shop_price” value=”<%=goods.shop_price%>”/></li>
<li> <span> 商品原价:</span> <input type=”text” name=”market_price” value=”<%=goods.market_price%>”/></li>

<input type=”radio” name=”status” <%if(goods.status==1){%> checked <%}%> value=”1″ id=”a”/> <label for=”a”> 显示 </label>

<input type=”radio” name=”status” <%if(goods.status==0){%> checked <%}%> value=”0″ id=”b”/><label for=”b”> 隐藏 </label>

</li>

<li> <span> 加入推荐:</span> <input type=”checkbox” value=”1″ <%if(goods.is_best==1){%> checked <%}%> name=”is_best”/> 精品
<input type=”checkbox” value=”1″ name=”is_hot” <%if(goods.is_hot==1){%> checked <%}%> /> 热销
<input type=”checkbox” value=”1″ name=”is_new” <%if(goods.is_new==1){%> checked <%}%> /> 新品
</li>
</ul>

</div>
<div role=”tabpanel” class=”tab-pane” id=”detail”>

<%for(var i=0;i<colorResult.length;i++){%>

<%if(goods.goods_color.indexOf(colorResult[i]._id.toString())!=-1){%>

<input type=”checkbox” checked name=”goods_color” value=”<%=colorResult[i]._id%>” id=”color_<%=colorResult[i]._id%>” /> <label for=”color_<%=colorResult[i]._id%>”><%=colorResult[i].color_name%></label>

<%}else{%>
<input type=”checkbox” name=”goods_color” value=”<%=colorResult[i]._id%>” id=”color_<%=colorResult[i]._id%>” /> <label for=”color_<%=colorResult[i]._id%>”><%=colorResult[i].color_name%></label>
<%}%>

<%}%>

</li>

<input type=”text” name=”relation_goods” class=”relation_goods” value=”<%=goods.relation_goods%>”/> <i> 填写关联商品的 id 多个以逗号隔开格式：23,24,39</i>

</li>

<input type=”text” name=”goods_gift” class=”goods_gift” value=”<%=goods.goods_gift%>”/> <i> 可为空格式：23-2,39-5 说明：例如 23-2 中的 23 表示商品 id,2 表示商品数量 </i>

</li>
<li> <span> 关联配件:</span>

<input type=”text” name=”goods_fitting” class=”goods_fitting” value=”<%=goods.goods_fitting%>”/> <i> 可为空格式：23-2,39-5 说明：例如 23-2 中的 23 表示商品 id,2 表示商品数量 </i>

</li>

</li>

</li>

</li>

</ul>
</div>
<div role=”tabpanel” class=”tab-pane” id=”attribute”>

<option value=”0″>– 请选择商品类型 –</option>

<%for(var i=0;i<goodsType.length;i++){%>
<option value=”<%=goodsType[i]._id%>” <%if(goods.goods_type_id.toString()==goodsType[i]._id.toString()){%>selected<%}%> ><%=goodsType[i].title%></option>
<%}%>

</select>

</li>

</ul>

<%-goodsAtts%>

</ul>

</div>
<div role=”tabpanel” class=”tab-pane” id=”photo”>

<%for(var i=0;i<goodsImage.length;i++){%>
<li>
<img class=”pic” src=”<%=goodsImage[i].img_url%>” />

<%for(var j=0;j<goodsColor.length;j++){%>

<option value=”<%=goodsColor[j]._id%>” <%if(goodsImage[i].color_id.toString()==goodsColor[j]._id){%>selected<%}%> ><%=goodsColor[j].color_name%></option>
<%}%>
</select>
</div>

</div>
</div>
</div>

</form>
</div>
</div>

</div>

<!– 缓存当前的属性信息 –>
<div id=”goods_attr_value” style=”display:none”>

<%-goodsAtts%>
</div>

$(function(){

// 关联商品类型
$(‘#goods_type_id’).change(function(){

// alert($(this).val());

var cate_id=$(this).val();

if(cate_id=='<%=goods.goods_type_id.toString()%>’){

$(‘#goods_type_attribute’).html($(‘#goods_attr_value’).html());
}else{

var data=”;
$.get(‘/admin/goods/goodsTypeAttribute?cate_id=’+cate_id,function(response){

data=response.result;
var str=””;
for(var i=0;i<data.length;i++){

if(data[i].attr_type==1){
str+='<li><span>’+data[i].title+’: </span><input type=”hidden” name=”attr_id_list” value=”‘+data[i]._id+'” /> <input type=”text” name=”attr_value_list” /></li>’
}else if(data[i].attr_type==2){
str+='<li><span>’+data[i].title+’: </span> <input type=”hidden” name=”attr_id_list” value=”‘+data[i]._id+'”> <textarea cols=”50″ rows=”3″ name=”attr_value_list”></textarea></li>’
}else{
var arr=data[i].attr_value.split(‘\n’);

str+='<li><span>’+data[i].title+’: </span><input type=”hidden” name=”attr_id_list” value=”‘+data[i]._id+'”>’;

str+='<select name=”attr_value_list”>’;

for(var j=0;j<arr.length;j++){

str+='<option value=”‘+arr[j]+'”>’+arr[j]+'</option>’;
}
str+='</select>’;
str+='</li>’;
}

}

$(‘#goods_type_attribute’).html(str);
})

}
})
})
// 富文本编辑器

$(function() {
$(‘#content’).froalaEditor({
height: 300, // 给编辑器设置默认的高度
language: ‘zh_cn’,
imageUploadURL: ‘/admin/goods/goodsUploadImage’,
// 根据不同的分辨率加载不同的配置
toolbarButtons: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-‘, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’],
toolbarButtonsMD: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-‘, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’],
toolbarButtonsSM: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-‘, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’]
});
});

// 批量上传图片

$(function(){

var photoStr=”;
$(‘#photoLib’).diyUpload({
url:’/admin/goods/goodsUploadPhoto’,
success:function(response) {
// console.info(data);
photoStr='<input type=”hidden” name=”goods_image_list” value=’+response.link+’ />’;

$(‘#photoList’).append(photoStr);
},
error:function(err) {
console.info(err);
}
});
})

$(function(){

// 改变颜色
$(‘.relation_goods_color’).change(function(){

var color_id=$(this).val();
var goods_image_id=$(this).attr(‘goods_image_id’);

console.log(color_id,goods_image_id);

$.post(‘/admin/goods/changeGoodsImageColor?_csrf=<%=csrf%>’,{color_id:color_id,goods_image_id:goods_image_id},function(response){

console.log(response);
})

})

// 删除图片

$(‘.goods_image_delete’).click(function(){

var _that=this;

var flag=confirm(‘ 您确定要删除吗?’);

if(flag){
var goods_image_id=$(this).attr(‘goods_image_id’);

$.post(‘/admin/goods/goodsImageRemove?_csrf=<%=csrf%>’,{goods_image_id:goods_image_id},function(response){

console.log(response);

if(response.success){

$(_that).parent().remove();

}
})
}

})

})
</script>
</body>
</html>
效果