egg(60,61,62)--商品类型属性的curd,商品类型和商品类型属性关联

model

app/model/goods_type_attribute.js

goods_type_attribute通过cate_id关联goods_type

module.exports = app => {
    const mongoose = app.mongoose;
    const Schema = mongoose.Schema;
    var d=new Date();
   
    const GoodsTypeAttributeSchema = new Schema({
      cate_id:{ type:Schema.Types.ObjectId },
      title: { type: String  },
      attr_type: { type: String  },      //类型  1 input    2  textarea    3、select
      attr_value:{ type: String  },      //默认值： input  textarea默认值是空     select框有默认值  多个默认值以回车隔开
      status: { type: Number,default:1  },    
      add_time: {           
        type:Number,        
        default: d.getTime()    
      }
    }); 
    return mongoose.model('GoodsTypeAttribute', GoodsTypeAttributeSchema,'goods_type_attribute');
  }

router.js

    router.get('/admin/goodsTypeAttribute', controller.admin.goodsTypeAttribute.index);
    router.get('/admin/goodsTypeAttribute/add', controller.admin.goodsTypeAttribute.add);
    router.get('/admin/goodsTypeAttribute/edit', controller.admin.goodsTypeAttribute.edit); 
    router.post('/admin/goodsTypeAttribute/doEdit', controller.admin.goodsTypeAttribute.doEdit);
    router.post('/admin/goodsTypeAttribute/doAdd', controller.admin.goodsTypeAttribute.doAdd);

查找

controller

app/controller/admin/goodsTypeAttribute.js

goods_type_attribute`通过`cate_id`关联`goods_type

    async index() {
        var cate_id = this.ctx.request.query.id;
        var goodsType=await this.ctx.model.GoodsType.find({"_id":cate_id})
        var result = await this.ctx.model.GoodsTypeAttribute.aggregate([
            {
            $lookup: {
                from: 'goods_type',
                localField: 'cate_id',
                foreignField: '_id',
                as: 'goods_type'
            }
        },{
            $match:{
                "cate_id":this.app.mongoose.Types.ObjectId(cate_id)
            }
        }])
        await this.ctx.render('admin/goodsTypeAttribute/index', {
            list:result,
            cate_id: cate_id,
            goodsType:goodsType[0]
        });
    }

view

app/view/admin/goodsTypeAttribute/index.html

<%- include ../public/page_header.html %>


            <div class="panel panel-default">              
                    <div class="panel-heading clear">
                       <span>商品类型属性----<%=goodsType.title%></span> <a  href="/admin/goodsTypeAttribute/add?id=<%=cate_id%>" class="btn btn-primary fr">增加商品类型属性</a>
                    </div>
                    <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr class="th">
                                <th>属性名称</th>
                                <th>商品类型</th>
                                <th>属性值的录入方式</th>                                
                                <th>可选值列表</th>          
                                <th>增加时间</th>  
                                <th class="text-center">状态</th>                                                
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <%for(var i=0;i<list.length;i++){%>
                                    <tr>
                                            <td><%=list[i].title%></td>
                                            <td><%=list[i].goods_type[0].title%></td>
                                            <td>                                                
                                                <%if(list[i].attr_type==1){%>
                                                    单行文本框
                                                <%}else if(list[i].attr_type==2){%>
                                                    多行文本框                                                 
                                                <%}else if(list[i].attr_type==3){%>
                                                    select下拉框   
                                                <%}%>                                                
                                            </td>
                                            <td><%=list[i].attr_value%></td>
                                            <td><%=helper.formatTime(list[i].add_time)%></td>
                                            <td  class="text-center">
                                                    <%if(list[i].status==1){%>
                                                            <img src="/public/admin/images/yes.gif" onclick="app.changeStatus(this,'GoodsTypeAttribute','status','<%=list[i]._id%>')" />
                                                    <%}else{%>
                                                            <img src="/public/admin/images/no.gif" onclick="app.changeStatus(this,'GoodsTypeAttribute','status','<%=list[i]._id%>')" />
                                                    <%}%>
                                            </td>                 
                                            <td class="text-center"><a href="/admin/goodsTypeAttribute/edit?id=<%=list[i]._id%>">修改</a>　<a  class="delete" href="/admin/delete?model=GoodsTypeAttribute&id=<%=list[i]._id%>">删除</a></td>
                                        </tr>
                            <%}%>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
</body>
</html>

效果

1. 在商品类型列表中，点击查看手机的属性列表
2. 看到手机的属性的尺寸，大小，颜色

增加

controller

app/controller/admin/goodsTypeAttribute.js

    async add() {
        // 获取商品类型数据
        var cate_id = this.ctx.request.query.id;
        var goodsTypes = await this.ctx.model.GoodsType.find({});
        await this.ctx.render('admin/goodsTypeAttribute/add', {
            cate_id: cate_id,
            goodsTypes: goodsTypes
        })
    }

    async doAdd() {

        var res = new this.ctx.model.GoodsTypeAttribute(this.ctx.request.body);
        await res.save();
        await this.success('/admin/goodsTypeAttribute?id=' + this.ctx.request.body.cate_id, '增加商品类型属性成功');

    }

view

app/view/admin/goodsTypeAttribute/add.html

<%- include ../public/page_header.html %>



<div class="panel panel-default">
    <div class="panel-heading">
        增加商品类型属性
    </div>
    <div class="panel-body">
        <div class="table-responsive input-form">
            <form action="/admin/goodsTypeAttribute/doAdd" method="post">
                <ul>
                    <input type="hidden" name="_csrf" value="<%=csrf%>">
                    <li> 　属性名称： <input type="text" name="title" /></li>
                    <li> 　所属类型：
                        <select name="cate_id" id="cate_id">
                            <%for(var i=0;i<goodsTypes.length;i++){%>
                            <option <%if(cate_id.toString()==goodsTypes[i]._id.toString()){%>selected
                                <%}%> value="
                                <%=goodsTypes[i]._id%>" >
                                <%=goodsTypes[i].title%>
                            </option>
                            <%}%>
                        </select>
                    </li>
                    <li> 　录入方式：
                        <input type="radio" name="attr_type" value="1" checked="true" id="text" /><label for="text">单行文本框</label>                       　
                        <input type="radio" name="attr_type" value="2" id="textarea" /><label for="textarea">多行文本框</label>                       　
                        <input type="radio" name="attr_type" value="3" id="select" /><label for="select">从下面的列表中选择（一行代表一个可选值）</label>　
                    </li>
                    <li>
                        可选值列表：
                        <textarea name="attr_value" id="attr_value" cols="60" rows="8" disabled="disabled"></textarea>
                    </li>
                    <li>
                        <br />
                        <button type="submit" class="btn btn-primary">提交</button>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("input[name='attr_type']").change(function () {
            console.log($(this).val());
            if ($(this).val() == 3) {
                $('#attr_value').attr('disabled', false)
            } else {
                $('#attr_value').attr('disabled', true)
            }
        });
    })
</script>
</body>
</html>

效果

1. 所属类型，获取商品类型的所有数据
2. 录入方式，只有是列表，textarea才可以输入

编辑

controller

app/controller/admin/goodsTypeAttribute.js

    async edit() {
        var id=this.ctx.query.id;

        var result=await this.ctx.model.GoodsTypeAttribute.find({"_id":id});

        var goodsTypes=await this.ctx.model.GoodsType.find({});

        await this.ctx.render('admin/goodsTypeAttribute/edit',{

            list:result[0],
            goodsTypes:goodsTypes
        });
    }

    async doEdit() {
        var _id=this.ctx.request.body._id;
        await this.ctx.model.GoodsTypeAttribute.updateOne({"_id":_id},this.ctx.request.body);
        await this.success('/admin/goodsTypeAttribute?id='+this.ctx.request.body.cate_id,'修改商品类型属性成功');
    }

view

app/view/admin/goodsTypeAttribute/edit.html

<%- include ../public/page_header.html %>



<div class="panel panel-default">
    <div class="panel-heading">
        修改商品类型属性
    </div>
    <div class="panel-body">
        <div class="table-responsive input-form">
            <form action="/admin/goodsTypeAttribute/doEdit" method="post">
                <ul>
                    <input type="hidden" name="_csrf" value="<%=csrf%>">
                    <input type="hidden" name="_id" value="<%=list._id%>">
                    <li> 　属性名称： <input type="text" name="title" value=<%=list.title%> /></li>
                    <li> 　所属类型：
                        <select name="cate_id" id="cate_id">
                            <%for(var i=0;i<goodsTypes.length;i++){%>
                            <option <%if(list.cate_id.toString()==goodsTypes[i]._id.toString()){%>selected
                                <%}%> value="
                                <%=goodsTypes[i]._id%>" >
                                <%=goodsTypes[i].title%>
                            </option>
                            <%}%>
                        </select>
                    </li>
                    <li> 　录入方式：
                        <input type="radio" name="attr_type" value="1" <%if(list.attr_type==1){%> checked="true"
                        <%}%> id="text" /><label for="text">单行文本框</label> 　
                        <input type="radio" name="attr_type" value="2" <%if(list.attr_type==2){%> checked="true"
                        <%}%> id="textarea" /><label for="textarea">多行文本框</label> 　
                        <input type="radio" name="attr_type" value="3" <%if(list.attr_type==3){%> checked="true"
                        <%}%> id="select" /><label for="select">从下面的列表中选择（一行代表一个可选值）</label>　
                    </li>
                    <li>
                        可选值列表：
                        <textarea name="attr_value" id="attr_value" cols="60" rows="8" <%if(list.attr_type!=3){%>disabled="disabled <%}%>"><%=list.attr_value%></textarea>
                    </li>
                    <li>
                        <br />
                        <button type="submit" class="btn btn-primary">提交</button>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("input[name='attr_type']").change(function () {
            console.log($(this).val());
            if ($(this).val() == 3) {
                $('#attr_value').attr('disabled', false)
            } else {
                $('#attr_value').attr('disabled', true)
            }
        });
    })
</script>

</body>

</html>

效果

所属类型，默认选中