新增    刷新

    <div class="row">
        <div  v-for="course in courses" class="col-md-4">
            <div class="thumbnail search-thumbnail">
                <img v-show="!course.image" class="media-object" src="/static/image/demo-course.jpg" />
                <img v-show="course.image" class="media-object" v-bind:src="course.image" />
                <div class="caption">
                    <div class="clearfix">
                        <span class="pull-right label label-primary info-label">
                            {{COURSE_LEVEL | optionKV(course.level)}}
                        </span>
                        <span class="pull-right label label-primary info-label">
                            {{COURSE_CHARGE | optionKV(course.charge)}}
                        </span>
                        <span class="pull-right label label-primary info-label">
                            {{COURSE_STATUS | optionKV(course.status)}}
                        </span>
                    </div>

                    <h3 class="search-title">
                        <a href="#" class="blue">{{course.name}}</a>
                    </h3>
                    <p>
                        <span class="blue bolder bigger-150">{{course.price}}&nbsp;<i class="fa fa-rmb"></i></span>
                    </p>
                    <p>{{course.summary}}</p>
                    <p>
                        <span class="badge badge-info">{{course.id}}</span>
                        <span class="badge badge-info">排序：{{course.sort}}</span>
                        <span class="badge badge-info">时长：{{course.time | formatSecond}}</span>
                    </p>
                    <p>
                        <button v-on:click="toChapter(course)" class="btn btn-white btn-xs btn-info btn-round">
                            大章
                        </button>
                        <button v-on:click="edit(course)" class="btn btn-white btn-xs btn-info btn-round">
                            编辑
                        </button>
                        <button v-on:click="del(course.id)" class="btn btn-white btn-xs btn-round btn-warning">
                            删除
                        </button>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">表单</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">分类</label>
                                    <div class="col-sm-10">
                                        <ul id="tree" class="ztree"></ul>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">名称</label>
                                        <div class="col-sm-10">
                                            <input v-model="course.name" class="form-control">
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">概述</label>
                                        <div class="col-sm-10">
                                            <input v-model="course.summary" class="form-control">
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">时长(秒)</label>
                                        <div class="col-sm-10">
                                            <input v-model="course.time" class="form-control">
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">价格（元）</label>
                                        <div class="col-sm-10">
                                            <input v-model="course.price" class="form-control">
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">封面</label>
                                        <div class="col-sm-10">
                                            <input v-model="course.image" class="form-control">
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">级别</label>
                                        <div class="col-sm-10">
                                            <select v-model="course.level" class="form-control">
                                                <option v-for="o in COURSE_LEVEL" v-bind:value="o.key">{{o.value}}}</option>
                                            </select>
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">收费</label>
                                        <div class="col-sm-10">
                                            <select v-model="course.charge" class="form-control">
                                                <option v-for="o in COURSE_CHARGE" v-bind:value="o.key">{{o.value}}</option>
                                            </select>
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">状态</label>
                                        <div class="col-sm-10">
                                            <select v-model="course.status" class="form-control">
                                                <option v-for="o in COURSE_STATUS" v-bind:value="o.key">
                                                    {{o.value}}
                                                </option>
                                            </select>
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">报名数</label>
                                        <div class="col-sm-10">
                                            <input v-model="course.enroll" class="form-control">
                                        </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">顺序</label>
                                        <div class="col-sm-10">
                                            <input v-model="course.sort" class="form-control">
                                        </div>
                                </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button v-on:click="save()" type="button" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>