商品多规格生成

背景：

用于多规格商品的管理，点击多规格属性值时 组装sku属性值，生成对应的sku产品。

页面渲染

根据后台返回的sku数据，渲染到页面上，并且根据js来实现点击请求后台接口去组装数据的效果。

<div class="form-group multi">
  <label class="col-sm-2 control-label"></label>
  <div class="col-md-6 col-sm-10" id="skus">
    <foreach name="skus" item="vo">
      <span class="margin-right-20 input-width-100">{$vo.title}</span>
      <foreach name="vo.value" item="v">
        <label class="checkbox-inline">
          <input type="checkbox" name="rows[goods][skus][{$vo.title}]" data-sku-key="{$vo.title}" data-sku-val="{$v}" value="{$v}">{$v}
        </label>
      </foreach>
      <br><br>
    </foreach>
  </div>
</div>

$('#skus').change(function () {
    const skus = getSkusVal();
    if (skus.length > 0) {
        $('#sku_items').show()
    } else {
        $('#sku_items').hide()
    }

    $.ajax({
        url:"{:url('AdminGoods/getSkuHtml')}",
        type:'POST',
        dataType:"json",
        data:JSON.stringify(skus),
        success:function(res) {
            $('.sku_html').html(res.data.html)
        }
    })
})
function getSkusVal() {
    var val = []
    $("#skus input[type='checkbox']").each(function (index, item) {
        if ($(this).prop("checked")) {
            const sku_key = $(this).data('sku-key');
            const sku_val = $(this).data('sku-val');
            val.push({
                sku_key:sku_key,
                sku_val:sku_val
            });
        }
    });
    return val;
}

上面通过js实现点击sku属性值 请求后台接口，在后台接口进行数据的组装。

use think\facade\View;
public function getSkuHtml($info = null)
{
    View::engine()->layout(false);
    if ($this->request->isAjax()) {
        $params = file_get_contents('php://input');
        $params = Json::decode($params);

        $skuItems = (new GoodsFormatter())->formatterSkus($params);


        $this->assign('sku_items', $skuItems);

        $html = $this->fetch('admin_goods/get_sku_html');

        $data = [
            'html' => $html,
        ];

        $this->success('成功', null, $data);
    } 
}

public function formatterSkus($skuAttrs)
{
    $skuKeys = array_unique(array_column($skuAttrs, 'sku_key'));

    $_skus = [];
    foreach ($skuKeys as $key) {
        foreach ($skuAttrs as $skuAttrVal) {
            if ($key == $skuAttrVal['sku_key']) {
                $_skus[$key][] = $skuAttrVal['sku_val'];
            }
        }
    }

    return combination(array_column($_skus, null));
}

/**
 * 组装sku属性值
 * @param $array
 * @param $index
 * @param $skuItems
 * @return array
 */
function combination($array, $index = -1, $skuItems = [])
{
    global $totalItem;
    global $deepKey;

    $totalItem = [];

    if ($index < 0) {
        $deepKey = count($array) - 1;
        combination($array, 0, $skuItems);
    } else {
        if (0 == $index) {
            $first = $array[$index];
            foreach ($first as $key => $value) {
                $totalItem[$key] = $value;
            }
        } else {
            $first = $array[$index];

            if (count($skuItems) >= count($first)) {
                foreach ($first as $key => $value) {
                    foreach ($skuItems as $s => $v) {
                        $totalItem[] = $v.':'.$value;
                    }
                }
            } else {
                if ($skuItems) {
                    foreach ($skuItems as $s => $v) {
                        foreach ($first as $key => $value) {
                            $totalItem[] = $v.':'.$value;
                        }
                    }
                }
            }
        }
        if ($index < $deepKey) {
            combination($array, $index + 1, $totalItem);
        }
    }

    return $totalItem;
}

最终得到的skuItems

然后在get_sku_html.html文件中渲染。

<div class="form-group" id="sku_items">
    <label class="col-sm-2 control-label"></label>
    <div class="col-md-8 col-sm-10">
        <table class="table table-bordered table-hover">
            <tr>
                <td class="multi">规格</td>
                <td>售价</td>
                <td>市场价</td>
                <td>成本价</td>
                <td>库存</td>
                <td>重量</td>
                <td>体积</td>
                <td class="multi" width="100">操作</td>
            </tr>
            <tbody>
            <foreach name="sku_items" id="vo" key="k">
                <notempty name="vo.id">
                    <input type="hidden" name="rows[products][{$k}][id]" value="{$vo.id|default=0}">
                </notempty>
                <tr>
                    <td></td>
                    <td><input type="text" class="form-control"  data-key="price" name="rows[products][{$k}}][price]" value="{$vo.price|default=''}"></td>
                    <td><input type="text" class="form-control"  data-key="market_price" name="rows[products][{$k}][market_price]" value="{$vo.market_price|default=''}"></td>
                    <td><input type="text" class="form-control"  data-key="cost_price" name="rows[products][{$k}][cost_price]" value="{$vo.cost_price|default=''}"></td>
                    <td><input type="text" class="form-control"  data-key="stock" name="rows[products][{$k}][stock]" value="{$vo.stock|default=''}"></td>
                    <td><input type="text" class="form-control"  data-key="weight" name="rows[products][{$k}][weight]" value="{$vo.weight|default=''}"></td>
                    <td><input type="text" class="form-control"  data-key="volume" name="rows[products][{$k}][volume]" value="{$vo.volume|default=''}"></td>
                    <td>
                        <a class="del_value">删除</a>
                    </td>
                </tr>
            </foreach>

            </tbody>
        </table>
    </div>
</div>