gaoyixia/application/mall/view/store_goods/form.html

{extend name='admin@main'}

{block name="content"}

{include file='mall@store_goods/form_style'}
<style>
    .layui-form-radio{

        margin: 0 !important;
        padding-right:0 !important;
    }
    .layui-form-select{
        margin-right: 10px !important;
    }
</style>
<form onsubmit="return false;" id="GoodsForm" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off">

    <div class="layui-card-body think-box-shadow padding-left-40">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">基础设置</li>
                <li>规格设置</li>
            </ul>
                <div class="layui-tab-content">
                    <!--基础设置-->
                    <div class="layui-tab-item layui-show">
                    <!--基础设置start-->
                        <div class="layui-form-item layui-row layui-col-space15">

                            <label class="layui-col-xs9 relative">
                                <span class="color-green">商品名称</span>
                                <input name="name" required class="layui-input" placeholder="请输入商品名称" value="{$vo.name|default=''}">
                            </label>
                        </div>

                        <div class="layui-form-item layui-row layui-col-space15">
                            <label class="layui-col-xs9 relative">
                                <span class="color-green">副标题</span>
                                <input name="desc" required class="layui-input" placeholder="请输入商品副标题" value="{$vo.desc|default=''}">
                            </label>
                        </div>

                        <div class="layui-form-item layui-row layui-col-space15">
                            <label class="layui-col-xs9 relative">
                                <span class="color-green">会员账号</span>
                                <input name="phone"  class="layui-input" placeholder="请输入会员账号" value="{$vo.phone|default=''}">
                            </label>
                        </div>
                       <!-- 商品分类-->
                        <div class="layui-form-item layui-row layui-col-space15">
                            <label class="layui-col-xs9 relative" style="width: 100%;">
                                <span class="color-green">商品分类</span>
                            </label>
                            <div style="width: 100%">
                                <div style="width: 15%;float: left;">
                                    <select class="layui-select"  id="first_classify" name="first_classify" lay-filter="first_classify" lay-search>
                                        <option selected data-first_key="-1" selected value="0">请选择</option>
                                        {if !empty($goods_cate)}
                                        {foreach $goods_cate as $ck=>$cv}
                                        {if isset_full_check($vo,'first_classify',$cv['id'])}
                                        <option selected data-first_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
                                        {else}
                                        <option data-first_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
                                        {/if}
                                        {/foreach}
                                        {/if}
                                    </select>
                                </div>
                                <div style="width: 15%;float: left">
                                    <select class="layui-select"  id="second_classify" name="second_classify" lay-filter="second_classify" lay-search>

                                    </select>
                                </div>
                                <input type="hidden" id="first"  value="{$vo.first_classify|default='-1'}"/>
                                <input type="hidden" id="second" value="{$vo.second_classify|default='-1'}"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <span class="color-green label-required-prev">商品LOGO及轮播展示图片</span>
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th class="text-center">LOGO</th>
                                    <th class="text-left">展示图片</th>
                                </tr>
                                <tr>
                                    <td width="90px" class="text-center"><input name="cover" type="hidden" value="{$vo.cover|default=''}"></td>
                                    <td width="auto" class="text-left"><input name="image" type="hidden" value="{$vo.image|default=''}"></td>
                                </tr>
                                </thead>
                            </table>
                            <script>$('[name="cover"]').uploadOneImage(), $('[name="image"]').uploadMultipleImage()</script>
                        </div>

                        <div class="layui-form-item">
                            <span class="color-green label-required-prev">商品详情图</span>
                            <table class="layui-table">
                                <thead>
                                <tr>

                                    <th class="text-left">展示图片</th>
                                </tr>
                                <tr>
                                    <td width="auto" class="text-left"><input name="content" type="hidden" value="{$vo.content|default=''}"></td>
                                </tr>
                                </thead>
                            </table>
                            <script>$('[name="content"]').uploadMultipleImage()</script>
                        </div>

                        <!--  运费设置-->
                        <div class="freight_box">

                            <div class="layui-form-item layui-row layui-col-space15">
                                <label class="layui-col-xs9 relative" style="width: 100%;">
                                    <span class="color-green">模板开关</span>
                                    <div class="layui-input-block margin-left-0 margin-top-15">
                                        <label >
                                            <input  type="radio"  class="layui-input" value="0" name="freight_type"  lay-filter="freight_type"   {if  !isset($vo.freight_type) || !$vo.freight_type}checked{/if} >
                                        </label>
                                        <span class="margin-right-10">固定运费</span>

                                        <label>
                                            <input type="radio" class="layui-input" value="1" name="freight_type"   lay-filter="freight_type" {if  isset($vo.freight_type) && $vo.freight_type}checked{/if} >
                                        </label>
                                        <span class="margin-right-10">运费模板</span>
                                    </div>
                                </label>
                            </div>


                            <div class="layui-form-item layui-row layui-col-space15 freight_mud" {if  !isset($vo.freight_type) || !$vo.freight_type}style="display:none"{/if}>
                            <label class="layui-col-xs9 relative" style="width: 100%;">
                                <span class="color-green">运费模板</span>
                                <select name="freight_id" class="layui-select" lay-filter ="freight_id">
                                    <option value="0" >请选择</option>
                                    {if !empty($express)}
                                    {foreach $express as $tk=>$tv}
                                    {if isset($vo.freight_id) &&  $vo.freight_id ==$tv['id'] }
                                    <option selected value="{$tv['id']}">{$tv['name']}</option>
                                    {else}
                                    <option value="{$tv['id']}">{$tv['name']}</option>
                                    {/if}
                                    {/foreach}
                                    {/if}
                                </select>
                            </label>
                        </div>

                        <div class="layui-form-item layui-row layui-col-space15 postage" {if isset($vo.freight_type) &&  $vo.freight_type}style="display:none"{/if}>
                        <label class="layui-col-xs9 relative" style="width: 100%;">
                            <span class="color-green">运费金额</span>
                            <input type="number" step="1" min="0" name="postage"   value="{$vo.postage|default=''}" class="layui-input">
                        </label>
                        <div class="layui-form-mid layui-word-aux" style="margin-left: 10px">不填（或0）表示包邮</div>
                    </div>


                </div>

            <!-- 运费设置 end-->


        </div>
                    <!--规格设置start-->
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <span class="color-green label-required-prev">商品规格及商品SKU绑定<span class="color-red font-s12">（规格填写后不允许再次修改）</span></span>
                            <div ng-repeat="x in specs track by $index" style="display:none" class="margin-bottom-10" ng-class="{true:'layui-show'}[isAddMode&&specs.length>0]">
                                <div class="goods-spec-box padding-10 margin-0 relative" style="background:#ddd">
                                    <span class="text-center goods-spec-title">分组</span>
                                    <label class="label-required-null inline-block"><input ng-blur="x.name=trimSpace(x.name)" ng-model="x.name" required placeholder="请输入分组名称"></label>
                                    <div class="pull-right">
                                        <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-btn" ng-click="addSpecVal(x.list)">增加</a>
                                        <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-btn" ng-class="{false:'layui-bg-gray'}[$index>0]" ng-click="upSpecRow(specs,$index)">上移</a>
                                        <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-btn" ng-class="{false:'layui-bg-gray'}[$index<specs.length-1]" ng-click="dnSpecRow(specs,$index)">下移</a>
                                        <a class="layui-btn layui-btn-sm layui-btn-primary goods-spec-btn" ng-click="delSpecRow(specs,$index)" ng-if="specs.length>1">删除</a>
                                    </div>
                                </div>
                                <div class="goods-spec-box padding-10 margin-0 layui-bg-gray block relative" ng-if="x.list && x.list.length > 0">
                                    <label class="label-required-null inline-block margin-right-10 margin-bottom-5 relative nowrap" ng-repeat="xx in x.list">
                                        <input type="checkbox" lay-ignore ng-model="xx.check" ng-click="xx.check=checkListChecked(x.list,$event.target.checked)">
                                        <input type="text" ng-blur="xx.name=trimSpace(xx.name)" ng-model="xx.name" ng-keyup="xx.name=$event.target.value" required placeholder="请输入规格">
                                        <a ng-if="x.list.length>1" ng-click="x.list=delSpecVal(x.list,$index)" class="layui-icon layui-icon-close font-s12 goods-spec-close"></a>
                                    </label>
                                </div>
                            </div>
                          <!--  <a ng-if="isAddMode&&specs.length<3" class="layui-btn layui-btn-sm layui-btn-primary" ng-click="addSpecRow(specs)">增加分组</a>
                         -->
                            <table class="layui-table margin-top-10">
                                <thead>
                                <tr>
                                    <th ng-repeat="x in specsTreeNava track by $index" class="nowrap" ng-bind="x"></th>
                                    <th width="10%" class="text-center nowrap">商品SKU <a ng-click="batchSet('sku',null)" data-tips-text="批量设置" class="layui-icon">&#xe63c;</a></th>
                                    <th width="10%" class="text-center nowrap">市场价格 <a ng-click="batchSet('original_price',2)" data-tips-text="批量设置" class="layui-icon">&#xe63c;</a></th>
                                    <th width="10%" class="text-center nowrap">销售价格 <a ng-click="batchSet('sell_price',2)" data-tips-text="批量设置" class="layui-icon">&#xe63c;</a></th>
                                    <th width="10%" class="text-center nowrap">虚拟销量 <a ng-click="batchSet('virtual',0)" data-tips-text="批量设置" class="layui-icon">&#xe63c;</a></th>
                                    <th width="10%" class="text-center nowrap">重量(KG)<a ng-click="batchSet('weight',2)" data-tips-text="批量设置" class="layui-icon">&#xe63c;</a></th>
                                    <th width="10%" class="text-center nowrap">销售状态</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="rows in specsTreeData track by $index">
                                    <td class="layui-bg-gray" ng-if="td.show" rowspan="{{td.span}}" ng-repeat="td in rows" ng-bind="td.name"></td>
                                    <td class="padding-0">
                                        <label class="padding-0 margin-0">
                                            <input ng-blur="rows[0].sku=setValue(rows[0].key,'sku',$event.target.value)" class="layui-input border-0 padding-left-0 text-center" ng-model="rows[0].sku">
                                        </label>
                                    </td>
                                    <td class="padding-0">
                                        <label class="padding-0 margin-0">
                                            <input ng-blur="rows[0].original_price=setValue(rows[0].key,'original_price',$event.target.value,'(parseFloat(_)||0).toFixed(2)')" class="layui-input border-0 padding-left-0 text-center" ng-model="rows[0].original_price">
                                        </label>
                                    </td>
                                    <td class="padding-0">
                                        <label class="padding-0 margin-0">
                                            <input ng-blur="rows[0].sell_price=setValue(rows[0].key,'sell_price',$event.target.value,'(parseFloat(_)||0).toFixed(2)')" class="layui-input border-0 padding-left-0 text-center" ng-model="rows[0].sell_price">
                                        </label>
                                    </td>
                                    <td class="padding-0">
                                        <label class="padding-0 margin-0">
                                            <input ng-blur="rows[0].virtual=setValue(rows[0].key,'virtual',$event.target.value,'(parseInt(_)||0)')" class="layui-input border-0 padding-left-0 text-center" ng-model="rows[0].virtual">
                                        </label>
                                    </td>
                                    <td class="padding-0">
                                        <label class="padding-0 margin-0">
                                            <input ng-blur="rows[0].weight=setValue(rows[0].key,'weight',$event.target.value,'(parseInt(_)||0).toFixed(2)')" class="layui-input border-0 padding-left-0 text-center" ng-model="rows[0].weight">
                                        </label>
                                    </td>
                                    <td class="text-center layui-bg-gray">
                                        <label class="think-checkbox margin-0 full-width full-height block"><input lay-ignore type="checkbox" ng-model="rows[0].status"></label>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <p class="color-desc">请从仓储平台获取商品SKU与商品条码，请注意尽量不要重复，也不能产生订单后再修改！</p>
                            <textarea class="layui-textarea layui-hide" name="specs">{{specs}}</textarea>
                            <textarea class="layui-textarea layui-hide" name="lists">{{specsTreeData}}</textarea>
                        </div>



                        <div class="layui-form-item layui-row layui-col-space15">
                            <label class="layui-col-xs15 relative">
                                <span class="color-green">详情</span>
                                <textarea name="detail">{$vo.detail|default=""}</textarea>
                            </label>
                        </div>


                        <div class="layui-form-item text-center">
                            {notempty name='vo.id'}<input type="hidden" name="id" value="{$vo.id}">{/notempty}
                            <button class="layui-btn" type="submit">保存商品</button>
                            <button class="layui-btn layui-btn-danger" type='button' onclick="history.go(-1)" data-close>返回</button>
                        </div>

                    </div>
                </div>
            </div>
     </div>
</form>
{/block}

{block name='script'}
<textarea class="layui-hide" id="goods-specs">{$vo.specs|raw|default=''}</textarea>
<textarea class="layui-hide" id="goods-value">{$defaultValues|raw|default=''}</textarea>
<script>
    window.form.render();
    layui.use('form', function () {
        var form = layui.form;
        //日期时间范围
        laydate.render({
            elem: '#sell_time'
            ,type: 'datetime'
        });

        //监听指定开关
        form.on('radio(freight_type)', function(data) {
            if (data.value == 1) {
                $(".freight_mud").show();
                $(".postage").hide();
            } else {
                $(".freight_mud").hide();
                $(".postage").show();
            }
        })
        //监听指定开关

    })

    require(['ckeditor', 'angular'], function () {
        //window.createEditor('[name="content"]', {height: 500});

        var app = angular.module("GoodsForm", []).run(callback);
        angular.bootstrap(document.getElementById(app.name), [app.name]);
        function getRand(length, prefix) {
            return (function (time, code) {
                code += parseInt(time.substr(0, 1)) + parseInt(time.substr(1, 1)) + time.substr(2, 8);
                while (code.length < length) code += Math.round(Math.random() * 10);
                return code;
            })(Date.now().toString(), prefix || '' + '')
        }

        function callback($rootScope) {
            $rootScope.isAddMode = parseInt('{$isAddMode|default=0}');
            $rootScope.maps = JSON.parse(angular.element('#goods-value').val() || '[]') || {};
            $rootScope.specs = JSON.parse(angular.element('#goods-specs').val() || '[{"name":"默认分组","list":[{"name":"默认规格","check":true}]}]');
            // 批量设置数值
            $rootScope.batchSet = function (type, fixed) {
                layer.prompt({title: '请输入数值', formType: 0}, function (value, index) {
                    $rootScope.$apply(function () {
                        var val = (parseFloat(value) || 0).toFixed(fixed);
                        for (var i in $rootScope.specsTreeData) for (var j in $rootScope.specsTreeData[i]) {
                            $rootScope.specsTreeData[i][j][type] = val;
                        }
                    });
                    layer.close(index);
                });
            };
            // 返回商品列表
            $rootScope.hsitoryBack = function () {
                $.msg.confirm('确定要取消编辑吗？', function (index) {
                    history.back(), $.msg.close(index);
                });
            };
            // 设置默认值
            $rootScope.setValue = function (key, type, value, call) {
                $rootScope.maps[key] || ($rootScope.maps[key] = {});
                return $rootScope.maps[key][type] = eval(call.replace('_', "'" + value + "'"));
            };
            // 读取默认值
            $rootScope.getValue = function (key, callback) {
                if (typeof callback === 'function') {
                    return callback($rootScope.maps[key] || {});
                }
                return {};
            };
            // 去除空白字符
            $rootScope.trimSpace = function (value) {
                return (value + '').replace(/\s*/ig, '');
            };
            // 生成交叉表格数据
            $rootScope.specsTreeData = [];
            $rootScope.specsTreeNava = [];
            // 当前商品规格发生变化时重新计算规格列表
            $rootScope.$watch('specs', function () {
                var data = $rootScope.specs, list = [], navs = [], table = [[]];
                // 过滤无效记录
                for (var i in data) {
                    var tmp = [];
                    for (var j in data[i].list) if (data[i].list[j].check && data[i].list[j].name.length > 0) {
                        data[i].list[j].span = 1, data[i].list[j].show = true, data[i].list[j].group = data[i].name;
                        tmp.push(data[i].list[j]);
                    }
                    list.push(tmp), navs.push(data[i].name);
                }
                $rootScope.specsTreeNava = navs;
                // 表格交叉
                for (var i in list) {
                    var tmp = [];
                    for (var j in table) for (var k in list[i]) tmp.push(table[j].concat(list[i][k]));
                    table = tmp;
                }
                // 表格合并
                list = angular.fromJson(angular.toJson(table));
                for (var i in list) {
                    var key = [], _key = '';
                    for (var td in list[i]) key.push(list[i][td].group + '::' + list[i][td].name);
                    for (var td in list[i]) if (_key.length === 0) {
                        list[i][0].key = _key = key.join(';;');
                        list[i][0].sku = $rootScope.getValue(_key, function (data) {
                            return data.sku || getRand(14, 'D')
                        });
                        list[i][0].virtual = $rootScope.getValue(_key, function (data) {
                            return data.virtual || '0';
                        });
                        list[i][0].express = $rootScope.getValue(_key, function (data) {
                            return data.express || '1';
                        });
                        list[i][0].original_price = $rootScope.getValue(_key, function (data) {
                            return data.original_price || '0.00';
                        });
                        list[i][0].sell_price = $rootScope.getValue(_key, function (data) {
                            return data.sell_price || '0.00';
                        });
                        list[i][0].status = $rootScope.getValue(_key, function (data) {
                            return !!(typeof data.status !== 'undefined' ? data.status : true);
                        });
                        list[i][0].weight = $rootScope.getValue(_key, function (data) {
                            return data.weight || '0.00';
                        });
                        list[i][0].goods_no = $rootScope.getValue(_key, function (data) {
                            return data.goods_no || '';
                        });
                    }
                }
                $rootScope.specsTreeData = list;
            }, true);
            // 判断规则是否能取消选择
            $rootScope.checkListChecked = function (list, check) {
                for (var i in list) if (list[i].check) return check;
                return true;
            };
            // 增加整行规格分组
            $rootScope.addSpecRow = function (data) {
                data.push({name: '规格分组', list: [{name: '规格属性', check: true}]})
            };
            // 下移整行规格分组
            $rootScope.dnSpecRow = function (data, $index) {
                var tmp = [], cur = data[$index];
                if ($index > data.length - 2) return false;
                for (var i in data) {
                    (parseInt(i) !== parseInt($index)) && tmp.push(data[i]);
                    (parseInt(i) === parseInt($index) + 1) && tmp.push(cur);
                }
                return $rootScope.specs = tmp;
            };
            // 上移整行规格分组
            $rootScope.upSpecRow = function (data, $index) {
                var tmp = [], cur = data[$index];
                if ($index < 1) return false;
                for (var i in data) {
                    (parseInt(i) === parseInt($index) - 1) && tmp.push(cur);
                    (parseInt(i) !== parseInt($index)) && tmp.push(data[i]);
                }
                return $rootScope.specs = tmp;
            };
            // 移除整行规格分组
            $rootScope.delSpecRow = function (data, $index) {
                var tmp = [];
                for (var i in data) if (parseInt(i) !== parseInt($index)) tmp.push(data[i]);
                return $rootScope.specs = tmp;
            };
            // 增加分组的属性
            $rootScope.addSpecVal = function (list) {
                list.push({name: '规格属性', check: true});
            };
            // 移除分组的属性
            $rootScope.delSpecVal = function (data, $index) {
                var temp = [];
                for (var i in data) if (parseInt(i) !== parseInt($index)) temp.push(data[i]);
                return temp;
            };
        }
    })


    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element;
        var active = {
            tabAdd: function(){
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0)
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime()
                })
            }
            ,tabDelete: function(othis){
                element.tabDelete('demo', '44');
                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                element.tabChange('demo', '22');
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });

    // 分类联动 start
    var sel_second  = {:isset($vo['second_classify']) ? $vo['second_classify']:0};
    var goods_spec  = {:json_encode($goods_cate)};
    first(1);
    function first(source){
        // 将其他选择框置空
        var first_key = $("select[name='first_classify']").find("option:selected").data("first_key")
        $("#first").val(first_key);
        $("select[name='second_classify']").html('');
        // 没有下级不继续
        if(first_key == -1 || !("children" in goods_spec[first_key])){
            $("#second").val(-1);
            window.form.render();
            return true;
        }else{
            var second_html = '<option data-second_key="-1" selected value="0">请选择分类</option>';
            var to_each =  goods_spec[first_key]['children'];
            $.each(to_each,function (ck,cv) {
                if(source == 1 && sel_second == cv.id){
                    second_html +='<option selected data-second_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
                    $("#second").val(ck);
                }else{
                    second_html +='<option data-second_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
                }
            })
            $("select[name='second_classify']").html(second_html);
            window.form.render();
        }
    }
    // 一级分类监听
    form.on('select(first_classify)', function(data){
        var first_key =  data.elem[data.elem.selectedIndex].dataset.first_key;
        //与之前选择的一样不处理
        if($("#first").val() == first_key){
            return true;
        }
        first(2);
    })
    // 分类end
    require(['ckeditor', 'angular'], function () {
        window.createEditor('[name="detail"]', {
            height: 500,
        });
    })
</script>
{/block}