zyedu/application/admin/view/study/plan/createsteps.php

{extend name="public/container"}
{block name='head_top'}
<style>
    .layui-form-item .study-label i{display: inline-block;width: 18px;height: 18px;font-size: 18px;color: #fff;}
    .layui-form-item .label-box p{line-height: inherit;}
    .m-t-5{margin-top:5px;}
    #app .layui-barrage-box{margin-bottom: 10px;margin-top: 10px;margin-left: 10px;border: 1px solid #0092DC;border-radius: 5px;cursor: pointer;position: relative;}
    #app .layui-barrage-box.border-color{border-color: #0bb20c;}
    #app .layui-barrage-box .del-text{position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.5);color: #ffffff;width: 92%;text-align: center;}
    #app .layui-barrage-box p{padding:5px 5px; }
    #app .layui-empty-text{text-align: center;font-size: 18px;}
    #app .layui-empty-text p{padding: 10px 10px;}
    .edui-default .edui-for-image .edui-icon {background-position: -380px 0px;}
    .layui-form-item .label-box {border: 1px solid;border-radius: 10px;position: relative;padding: 10px;height: 30px;color: #fff;background-color: #393D49;text-align: center;cursor: pointer;display: inline-block;line-height: 10px;}
    .layui-form-item .label-box p {line-height: inherit;}
</style>
{/block}
{block name="content"}
<div class="layui-fluid" id="app" v-cloak>
    <div class="layui-card">
        <div class="layui-card-header">{{id ? '编辑学习计划':'添加学习计划'}}</div>
        <div class="layui-card-body">
            <form action="" class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-form-item submit">
                        <label class="layui-form-label">排序：</label>
                        <div class="layui-input-inline">
                            <input type="number" name="sort" v-model="formData.sort" min="0" max="9999" class="layui-input" v-sort>
                        </div>
                    </div>
                    <div class="layui-form-item required">
                        <label class="layui-form-label">步骤名称：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="stepname" v-model.trim="formData.stepname" required autocomplete="off" placeholder="请输入学习计划名称" maxlength="8" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item required">
                        <label class="layui-form-label">步骤介绍：</label>
                        <div class="layui-input-block">
                            <textarea name="introduction" style="width: 80%;" rows="5" v-model="formData.introduction">{{formData.introduction}}</textarea>
                        </div>
                    </div>
                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label">状态：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_show" value="1" title="显示" v-model="formData.is_show" lay-filter="is_show" >
                            <input type="radio" name="is_show" value="0" title="隐藏" v-model="formData.is_show" lay-filter="is_show">
                        </div>
                    </div> -->
                    
            </form>
        </div>
        <div class="layui-card-header">步骤关联课程管理</div>
        <div>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="addcouse">
                <i class="layui-icon layui-icon-add-1"></i>添加课程
            </button>
        </div>
        <table class="layui-table">
            <tr>
                <td align="center">课程ID</td>
                <td>图片</td>
                <td>名称</td>
                <td>类型</td>
                <td align="center">单价</td>
                <td align="center">操作</td>
            </tr>
            <tr v-for="(item, index) in courselist" :key="index">
                <td align="center">{{item.id}}</td>
                <td><img :src="item.image" height="50" /></td>
                <td>{{item.title}}</td>
                <td>课程</td>
                <td align="center">￥{{item.money}}</td>
                <td align="center"><a @click="delitem(item.id)" href="javascript:void(0);" style="color:red;"><i class="iconfont icon-shanchu"></i>删除</a></td>
            </tr>
        </table>
        </script>
        <div class="layui-form-item submit">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" type="button" @click="save">{{id ? '立即修改':'立即提交'}}</button>
                <button class="layui-btn layui-btn-primary clone" type="button" @click="clone_form">取消</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}
{block name='script'}
<script>
    var id={$id}, pid={$pid}, plan=<?php echo isset($plan) ? $plan : []?>;
    var $ = layui.jquery;
    var layer = layui.layer;
    var coursechecked = <?php echo (isset($coulist) &&  $coulist != '[]')? $coulist : '{}'?>;
    //加载列表
    require(['vue','helper','zh-cn','request','plupload','aliyun-oss','OssUpload'],function(Vue,$h) {
        new Vue({
            el: "#app",
            directives: {
                sort: {
                    bind: function (el, binding, vnode) {
                        var vm = vnode.context;
                        el.addEventListener('change', function () {
                            if (!this.value || this.value < 0) {
                                vm.formData.sort = 0;
                            } else if (this.value > 9999) {
                                vm.formData.sort = 9999;
                            } else {
                                vm.formData.sort = parseInt(this.value);
                            }
                        });
                    }
                }
            },
            data: {
                formData:{
                    stepname:plan.stepname || '',
                    pid:pid || 0,
                    plan_head: plan.plan_head || '',
                    introduction: plan.introduction || '',
                    sort:Number(plan.sort) || 0,
                    courseids:[]
                },
                courselist: [],
            },
            methods:{
                addcouse:function(e){
                    that = this
                    layer.open({
                        type: 2,
                        title: '添加课程',
                        content:'{:Url('addcouse')}?id=' + id + "&pid=" + pid,
                        area: ['80%', '80%'],
                        maxmin: true,
                        btn:['确定', '取消'],
                        btn1: function (index, layero) {
                            that.formData.courseids = []
                            that.courselist = []
                            for(i in coursechecked){
                                that.courselist.push(coursechecked[i]);
                                that.formData.courseids.push(i);
                            }
                            //console.log(that.courselist);
                            layer.close(index)
                            //return false;
                        },
                        btn2: function (index, layero) {
                            coursechecked = {};
                            layer.close(index)
                        },
                        end: function () {
                            //console.log(courseids);
                            //location.reload();
                        }
                    });
                    
                },
                delitem:function (id){
                    that = this
                    that.formData.courseids = []
                    that.courselist = []
                    delete coursechecked[id];
                    for(i in coursechecked){
                        that.courselist.push(coursechecked[i]);
                        that.formData.courseids.push(i);
                    }
                },
                clone_form: function () {
                    var that = this;
                    if (parseInt(id) == 0) {
                        parent.layer.closeAll();
                    }
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                },
                save:function () {
                    var that=this;
                    that.$nextTick(function () {
                        if (!that.formData.stepname) return layList.msg('请输入学习步骤名称');
                        if (!that.formData.introduction) return layList.msg('请输入学习步骤介绍');
                        if (that.formData.courseids.length == 0) return layList.msg('没有选择如任何课程，至少选择一个课程');
                        layList.loadFFF();
                        layList.basePost(layList.U({a: 'savesteps', q: {id: id}}), that.formData, function (res) {
                            layList.loadClear();
                            if (parseInt(id) == 0) {
                                layList.layer.confirm('添加成功,您要继续添加吗?', {
                                    btn: ['继续添加', '立即提交']
                                }, function (index) {
                                    layList.layer.close(index);
                                }, function (index) {
                                    layList.layer.close(index);
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                });
                            } else {
                                layList.msg('修改成功', function () {
                                    parent.layer.closeAll();
                                })
                            }
                        }, function (res) {
                            layList.msg(res.msg);
                            layList.loadClear();
                        });
                    })
                },
                delect:function(key){
                    var that=this;
                    that.formData[key]='';
                },
                changeIMG: function (key, value, multiple) {
                    if (multiple) {
                        var that = this;
                        value.map(function (v) {
                            that.formData[key].push({pic: v, is_show: false});
                        });
                        this.$set(this.formData, key, this.formData[key]);
                    } else {
                        this.$set(this.formData, key, value);
                    }
                },
            },
            mounted:function () {
                var that=this;
                this.$nextTick(function () {
                    layList.form.render();
                    
                });

                if (coursechecked) {
                    for(i in coursechecked) {
                        that.courselist.push(coursechecked[i]);
                        that.formData.courseids.push(i);
                    }
                }
                
            }
        })
    });
    layList.tool(function (event,data,obj) {
        switch (event) {
            case 'open_image':
                $eb.openImage(data.image);
                break;
        }
    })
    
</script>
{/block}