laravel-admin 结合搭配商品sku

本文章基于jade 的基础上，完善部分功能。多谢jade提供sku方案

1. 多个规格名，只显示2个
2. 添加规则值，保留已有的信息
3. 保存数据库后，json数据会自动排序 (2020-09-21 新增)
   

Form 扩展 – 商品Sku

1.安装：

composer require jadekun/sku
php artisan vendor:publish --provider="JadeKun\Sku\SkuServiceProvider"

2. 路由规则

给上传图片使用

// sku 上传图片
$router->post('upload_file', 'GoodsController@uploadFile');	

// 方法
// 上传图片
    public function uploadFile(Request $request)
    {
   
        if($request->hasFile('file')) {
   
            $file = $request->file('file');
            // 文件是否上传成功
            if ($file->isValid()) {
   
                // 获取文件相关信息
                $originalName = $file->getClientOriginalName(); // 文件原名
                $ext = $file->getClientOriginalExtension();     // 扩展名
                $realPath = $file->getRealPath();   //临时文件的绝对路径
                $type = $file->getClientMimeType();     // image/jpeg
                // 上传文件
                $filename = uniqid() . '.' . $ext;
                $data['pic_path'] = '/skus/'.$filename;
                // 使用我们新建的uploads本地存储空间（目录） uploads是配置文件的名称
                $bool = Storage::disk(config('admin.upload.disk'))->put('/'.$data['pic_path'], file_get_contents($realPath));
                //判断是否创建成功
                if (!$bool)
                {
   
                    return $this->responseError('添加图片失败', $this->status_blackvirus_insert_img_error);
                }
                return ['url'=> '/upload'.$data['pic_path']];
            }
            return [];
        }
    }

3. 数据库字段设置

数据类型： json

4. 使用方法

$form->sku('good_sku','商品SKU');

5. 原始数据展示

{
   
"type": "many", 
"attrs": {
   "尺寸": ["L"], "颜色": ["红色", "黑色", "白色"]}, 
"sku": [{
   
	"pic": "/upload/skus/5f62fbdbc87f1.png", 
	"price": "30", 
	"stock": "1000", 
	"尺寸": "L", 
	"颜色": "红色"
	}, 
	{
   "pic": "/upload/skus/5f62fbde2f99c.png", "price": "30", "stock": "1000", "尺寸": "L", "颜色": "黑色"}, 
	{
   "pic": "/upload/skus/5f62fbe08bc28.png", "price": "30", "stock": "1000", "尺寸": "L", "颜色": "白色"}]
}

修改处理

（不足之处请指正  ！！！ ）

1. 超过2条规则名，只会展示2条

# 文件位置 /public/vendor/jadekun/sku/sku.js

···
	// 大概145行
	if(index < attr_keys_len - 1) {
   
		// 加载数据时，超过2条规则名时，只展示2条规则名
        tbody.find('tr').eq(0).find('td:eq(2) .Js_add_attr_name').trigger('click');
	}
···

2. 新增规则名，会清空已填写的信息

···
	// 大概在183行
	if (JSON.stringify(_this.attrs) !== JSON.stringify(attr)) {
   
      	_this.attrs = attr;
      	// 1. 获取历史数据，渲染数据，
      	let old_val = _this.warp.find('.Js_sku_input').val();
      	old_val = JSON.parse(old_val);
      	_this.SKUForm(old_val.sku, 1)
    }
	
	// 2. SKUForm方法  生成具体的SKU配置表单type=0 第一次加载渲染
    SKU.prototype.SKUForm = function (default_sku, type=0) {
   
    
    	···
    	// 大概在223行
		// 根据计算的笛卡尔积渲染tbody
        let tbody_html = '';
        cartesianProductOf.forEach(function (sku_item) {
   
            tbody_html += '<tr>';
            sku_item.forEach(function (attr_val, index) {
   
                let attr_name = attr_names[index];
                tbody_html += '<td data-field="' + attr_name + '">' + attr_val + '</td>';
            });
            // 3. 添加新的规则值时，保留历史信息
            if(default_sku && type == 1) {
   
                let back_img = ' ';
                let sku_price = _this.commonPrice;
                let sku_stock = _this.commonStock;
                default_sku.forEach(function(item_sku, index) {
   
                    let skus = Object.values(item_sku);
                    if (sku_item.every(val => skus.includes(val))) {
   
                        back_img = item_sku.pic;
                        sku_price = item_sku.price;
                        sku_stock = item_sku.stock;
                    }
                })
                tbody_html += '<td data-field="pic"><input value="'+ back_img +'" type="hidden" class="form-control">'+
                    '<span class="Js_sku_upload" style="background-image: url('+ back_img +') "> </span> '+
                    &#