bab-icon/resources/views/admins/banners/edit.blade.php

<div style="margin-top: 10px;" id="banners-app">
    <div style="text-align: center;margin-top: 5px;margin-bottom: 10px;font-size: 20px;">
        编辑 - 轮播
    </div>
    <el-form action="{{route('admin.banner.update',array('id'=>$model->id))}}" method="post" id="form-create">
        <!-- 图片 -->
        <ui-input-text label="轮播标题" name="title" value="{{$model->title}}" placeholder="请输入轮播标题" maxlength="255" tips="请输入轮播标题" autofocus="true"></ui-input-text>
        <ui-file label="轮播图" size="0.5" name="image" :data="{uploadName:'banners'}" imageurl="{{$model->image}}" tips="图片大小建议(686*128)"></ui-file>
        <ui-select label="链接类型："  @set-keys="setType" id="type_list" name="type" placeholder=""
                   :options="type_list" :free="true"></ui-select>
        <!-- link -->
        <ui-input-text v-if="type_num*1==4" label="外部链接" name="link" placeholder="请输入外部链接" maxlength="255" tips="请输入外部链接" autofocus="true"></ui-input-text>

        <ui-input-select label="绑定商品" button_title="选择商品"  tips="请选择需要跳转的商品" v-else-if="type_num*1==1"  send_url="{{route('admin.good.select')}}" name="to_id" title="{{$model->to_name}}" value="{{$model->to_id}}" :options="select_arr" ></ui-input-select>
        <ui-linkage v-else-if="type_num*1==2" label="商品分类"  :options="class_list" tips="请选择需要跳转的商品分类"></ui-linkage>
        <!-- 是否显示 -->
        <ui-radio label="是否开启" :params="params" tips="轮播显示"></ui-radio>
        <!-- 排序 -->
        <ui-input-number label="排序" checked="checked" name="sort" value="{{$model->sort}}" min="1" max="100" tips="控制前台显示顺序"></ui-input-number>
        <ui-submit></ui-submit>
    </el-form>
</div>

<script type="application/javascript">
    var edit_vm=null;
    $(function () {
        // 注意：Vue组件一定放在jQuery.validator前面验证
        edit_vm= new Vue({
            el: '#banners-app',
            data :function () {
                return {
                    'type_num':{{$model->type}},
                    'type_list':{!! $type_list !!},
                    'select_arr':{
                        'button_title':'选择商品',
                        'name':'to_id',
                        'title':'{{$model->to_name}}',
                        'value':'{{$model->to_id}}',
                    },
                    class_list: {
                        'tier_num': 2,
                        'one_id': '{{$model->class_id}}',
                        'two_id': '{{$model->to_id}}',
                        'send_url': '{{route('admin.goodsClass.class')}}',
                        'one_name': '',
                        'two_name':'to_id'
                    },
                    params: {
                        // 注意：group和attr连个属性都不能省略 就算为空
                        group: {},
                        attr: {
                            name: 'show',   // 当前checkbox框的name属性  【必填】
                            radioCheck:{{$model->show}},   // 当前选中项 int | string   【必填】
                            label: 'el-radio-button', // 当前样式 默认 el-radio 样式 【非必填】
                            radios: [ // 每个checkbox 就是一个json对象     【必填】
                                {
                                    value:0,      // 当前选中时值也就是value属性的值      【必填】
                                    label: '关闭',    // 当前提示文字                 【必填】
                                    disable: false   // 是否禁止点击 默认：false 不禁止
                                },
                                {
                                    value:1,      // 当前选中时值也就是value属性的值      【必填】
                                    label: '开启',    // 当前提示文字                 【必填】
                                    disable: false   // 是否禁止点击 默认：false 不禁止
                                }
                            ]
                        }
                    }
                };
            },
            methods: {
                setType: function (level) {
                    console.log('数据变化:' + level);
                    this.type_num = level*1;
                },
                setGoods:function (row){
                    this.select_arr.title=row.good_name;
                    this.select_arr.value=row.id;
                }
            },
        });
        jQuery.validator.setDefaults({
            debug: false,         // 调试模式true不会提交,false允许提交
            success: "success",   // 匹配成功的class样式名称
            errorElement: 'div'   // 兼容el标签时使用(兼容el Vue组件label.error标签问题)
        });
        // 前台数据验证 验证需要设置window.form全局变量
        window.form = $('#form-create').validate({
            rules: {
                image: {
                    required: true,
                    maxlength: 255,
                    normalizer: function ( value ) {
                        return $.trim(value);
                    }
                },
                // link: {
                //     required: true,
                //     maxlength: 255,
                //     normalizer: function ( value ) {
                //         return $.trim(value);
                //     }
                // },
                show: {
                    required: true
                },
                sort: {
                    required: true,
                    normalizer: function ( value ) {
                        return $.trim(value);
                    }
                }
            }
        });
        // 编辑保存变量
        window.formDatum = $('form').serialize();
    });
    window.top.editVmItem=function (row){
        edit_vm.setGoods(row);
    }
</script>
@include('layouts.admin.form_script')