!116 团购修改,页面优化

Merge pull request !116 from develop

app/Http/Controllers/Goods/GoodsSkusController.php

@@ -24,6 +24,7 @@ use Illuminate\Validation\Rule;
 use Illuminate\Validation\ValidationException;
 use Maatwebsite\Excel\Facades\Excel;
 use App\Models\DailyStockRecord;
+use App\Models\Shop;
 
 class GoodsSkusController extends Controller
 {
@@ -107,11 +108,24 @@ class GoodsSkusController extends Controller
 
     public function show($id)
     {
-        return new GoodsSkuResource(GoodsSku::query()
+        $sku = GoodsSku::query()
             ->with(['goods' => function ($query) {
                 $query->with(['type:id,name', 'brand:id,name']);
             }])
-            ->find($id));
+            ->find($id)
+            ->toArray();
+        $shops = Shop::query()->get(['id', 'name'])->toArray();
+        if (empty($sku['thumb_url'])) {
+            foreach ($shops as $shop) {
+                $sku['thumb_url'][] = [
+                    'shop_id' => $shop['id'],
+                    'shop_name' => $shop['name'],
+                    'img_url' => '',
+                ];
+            }
+        }
+
+        return ['data' => $sku];
     }
 
     public function update($id, Request $request)

app/Http/Controllers/UploadController.php

@@ -3,8 +3,11 @@
 namespace App\Http\Controllers;
 
 use App\Models\Log as LogModel;
+use App\Models\Shop;
+use App\Services\Business\BusinessFactory;
 use App\Utils\UploadUtils;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
 
 class UploadController extends Controller
 {
@@ -27,8 +30,28 @@ class UploadController extends Controller
             ];
         }
         $this->addLog(0, 'add');
-        $this->res['resource'] = UploadUtils::putForUploadedFile('image', $request->uploadFile);
+//        $this->res['resource'] = UploadUtils::getFullImgUrl(UploadUtils::putForUploadedFile('image', $request->uploadFile));
+        $this->res['shop_id'] = $request->get('shop_id') ?: 0;
+        $path = $request->file('uploadFile')->store('ktt');
+        $url = config('app.url') . '/' . $path;
+        // 图片上传到花富贵儿 快团团图片库
+        $shop = Shop::query()->find(1);
+        $business = BusinessFactory::init()->make($shop->plat_id);
+        $business->setShop($shop);
+        $res = $business->uploadImage($url);
+        if (isset($res['response'])) {
+            $this->res['resource'] = $res['response']['result'];
+            Storage::delete($path);
+        } else {
+
+            $this->res['resource'] = $url;
+        }
 
         return response($this->res, $this->res['httpCode']);
     }
+
+    function browse($file_name)
+    {
+        return response()->file(storage_path() . '/app/ktt/' . $file_name);
+    }
 }

app/Models/GoodsSku.php

@@ -32,6 +32,7 @@ class GoodsSku extends Model
         'yesterday_num',
         'reference_price',
         'reserve',
+        'thumb_url'
     ];
 
     protected $hidden = ['created_at'];
@@ -52,6 +53,17 @@ class GoodsSku extends Model
         return $map[$value];
     }
 
+    public function setThumbUrlAttribute($value)
+    {
+        $this->attributes['thumb_url'] = json_encode($value, 256);
+    }
+
+    public function getThumbUrlAttribute($value)
+    {
+
+        return json_decode($value, true);
+    }
+
     /**
      * 此规格从属于一个商品
      */

app/Services/Business/KuaiTuanTuan/Goods.php

@@ -85,5 +85,15 @@ class Goods
 
         return [$type, $appendParams];
     }
+
+    public static function uploadImage($url)
+    {
+        $type = 'pdd.ktt.goods.upload.image';
+        $appendParams = [
+            'url' => $url
+        ];
+
+        return [$type, $appendParams];
+    }
 }
 

app/Services/Business/KuaiTuanTuan/Groups.php

@@ -4,6 +4,7 @@ namespace App\Services\Business\KuaiTuanTuan;
 
 use App\Models\Groups as GroupsModel;
 use App\Models\GroupGoods;
+use App\Utils\ArrayUtils;
 use App\Utils\DateTimeUtils;
 
 class Groups
@@ -14,13 +15,15 @@ class Groups
         $group = GroupsModel::query()->where('parent_id', $localGroupId)->where('shop_id', $shop->id)->first();
         $groupGoods = GroupGoods::query()
             ->where('group_id', $group->parent_id)
-            ->with(['goodsSku:id,stock'])
+            ->with(['goodsSku:id,stock,thumb_url'])
             ->orderBy('sort')
             ->get();
         $goodsSkus = [];
         $operator = substr($shop->ratio, 0, 1);
         $ratio = (float)trim(substr($shop->ratio, 1));
         foreach ($groupGoods as $item) {
+            $thumbUrls = $item['goodsSku']['thumb_url'];
+            $thumbUrls = $thumbUrls ? ArrayUtils::index($thumbUrls, 'shop_id') : [];
             $priceInFen = $item['price_in_fen']; // 常规数值
             switch ($operator) {
                 case '+':
@@ -37,7 +40,7 @@ class Groups
                     break;
             }
             $priceInFen *= 100;
-            $goodsSkus[] = [
+            $info = [
                 'category_name' => $item['category_name'],
                 'goods_desc' => $item['goods_name'],
                 'goods_name' => $item['goods_name'],
@@ -51,6 +54,10 @@ class Groups
                     'total_quantity' => $item['goodsSku']['stock'],
                 ]]
             ];
+            if (isset($thumbUrls[$shop->id]) && $thumbUrls[$shop->id]['img_url']) {
+                $info['pic_url_list'] = [$thumbUrls[$shop->id]['img_url']];
+            }
+            $goodsSkus[] = $info;
         }
         $appendParams = [
             'end_time' => $group->getOriginal('end_time'),

app/Services/Business/KuaiTuanTuan/KuaiTuanTuan.php

@@ -220,4 +220,11 @@ class KuaiTuanTuan extends BusinessClient
 
         return $res;
     }
+
+    public function uploadImage($url)
+    {
+        [$type, $appendParams] = Goods::uploadImage($url);
+
+        return $this->doRequest($type, $appendParams);
+    }
 }

config/app.php

@@ -52,7 +52,7 @@ return [
     |
     */
 
-    'url' => env('APP_URL', 'http://erp.ii090.com'),
+    'url' => env('APP_URL', 'http://erp.chutang66.com/'),
 
     'asset_url' => env('ASSET_URL', null),
 

public/dist/css/chunk-38b35ffa.1005fa16.css

@@ -1 +0,0 @@
-.table[data-v-2cd57a1e]{margin-top:20px;position:relative}.btn[data-v-2cd57a1e]{float:right}[data-v-2cd57a1e] .cell{display:flex;align-items:center}.commodityimg[data-v-2cd57a1e]{width:59px;height:59px;background:hsla(0,0%,89%,.39);opacity:1;display:block;margin-right:12px}.Img[data-v-2cd57a1e]{width:100%;height:100%}.confirmbtn[data-v-2cd57a1e]{width:114px;height:44px;border-radius:3px;margin-top:21px;margin-bottom:8px}.import-right[data-v-2cd57a1e]{margin-top:30px}.import-right a[data-v-2cd57a1e]{text-decoration:none;color:#000}[data-v-2cd57a1e] .btn11{padding:0;width:14px;height:14px}[data-v-2cd57a1e] .btn11 img{width:100%;height:100%}.page[data-v-2cd57a1e]{margin-top:20px}

public/dist/css/chunk-4f15b41a.2cf53495.css

@@ -1 +0,0 @@
-.el-upload--picture-card[data-v-4e813208]{width:50px;height:50px}.el-form-item[data-v-4e813208]{margin-left:60px}.addto[data-v-4e813208]{display:inline-block;width:30px;height:30px;background-color:#00f;color:#fff;font-size:25px;text-align:center;line-height:30px;border-radius:5px;margin-top:4px}.avatar-uploader .el-upload[data-v-4e813208]{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.avatar-uploader .el-upload[data-v-4e813208]:hover{border-color:#409eff}.avatar-uploader-icon[data-v-4e813208]{font-size:28px;color:#8c939d;width:148px;height:148px;line-height:148px;text-align:center}.avatar[data-v-4e813208]{width:148px;height:148px;display:block}

public/dist/css/chunk-743f0316.fb5066fb.css

@@ -0,0 +1 @@
+.el-upload--picture-card[data-v-49170b11]{width:50px;height:50px}.el-form-item[data-v-49170b11]{margin-left:40px}.avatar-uploader .el-upload[data-v-49170b11]{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.avatar-uploader .el-upload[data-v-49170b11]:hover{border-color:#409eff}.avatar-uploader-icon[data-v-49170b11]{font-size:28px;color:#8c939d;width:148px;height:148px;line-height:148px;text-align:center}.avatar[data-v-49170b11]{width:148px;height:148px;display:block}

public/dist/css/chunk-ab4d3e40.d941d6ef.css

@@ -0,0 +1 @@
+#nprogress{pointer-events:none}#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.el-upload--picture-card[data-v-0509b8a0]{width:50px;height:50px}.avatar-uploader .el-upload[data-v-0509b8a0]{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.avatar-uploader .el-upload[data-v-0509b8a0]:hover{border-color:#409eff}.avatar-uploader-icon[data-v-0509b8a0]{font-size:28px;color:#8c939d;width:148px;height:148px;line-height:148px;text-align:center}.avatar[data-v-0509b8a0]{width:148px;height:148px;display:block}.shop-sku-img[data-v-0509b8a0]{display:flex}.shop-sku-img .shop[data-v-0509b8a0]{margin-right:20px;margin-bottom:20px}.shop-sku-img .shop .shop-name[data-v-0509b8a0]{text-align:center}

public/dist/css/chunk-f0b6f0d4.a3b83cc4.css

@@ -0,0 +1 @@
+.table[data-v-65f2cb04]{margin-top:20px;position:relative}.btn[data-v-65f2cb04]{float:right}[data-v-65f2cb04] .cell{display:flex;align-items:center}.commodityimg[data-v-65f2cb04]{width:59px;height:59px;background:hsla(0,0%,89%,.39);opacity:1;display:block;margin-right:12px}.Img[data-v-65f2cb04]{width:100%;height:100%}.confirmbtn[data-v-65f2cb04]{width:114px;height:44px;border-radius:3px;margin-top:21px;margin-bottom:8px}.import-right[data-v-65f2cb04]{margin-top:30px}.import-right a[data-v-65f2cb04]{text-decoration:none;color:#000}[data-v-65f2cb04] .btn11{padding:0;width:14px;height:14px}[data-v-65f2cb04] .btn11 img{width:100%;height:100%}.page[data-v-65f2cb04]{margin-top:20px}

public/dist/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>erp</title><link href="css/chunk-088acbde.902ebb66.css" rel="prefetch"><link href="css/chunk-0cbcaa56.e05858e7.css" rel="prefetch"><link href="css/chunk-0f6f9608.b3153d73.css" rel="prefetch"><link href="css/chunk-10d9ee19.84a6683c.css" rel="prefetch"><link href="css/chunk-26daa808.62429343.css" rel="prefetch"><link href="css/chunk-35db73ce.1f9c10ff.css" rel="prefetch"><link href="css/chunk-38b35ffa.1005fa16.css" rel="prefetch"><link href="css/chunk-4caed774.ad94328f.css" rel="prefetch"><link href="css/chunk-4f15b41a.2cf53495.css" rel="prefetch"><link href="css/chunk-52fcdd7c.51e3ffbd.css" rel="prefetch"><link href="css/chunk-6ae0a0d3.84a02b23.css" rel="prefetch"><link href="css/chunk-75426f71.902ebb66.css" rel="prefetch"><link href="css/chunk-904e5abc.902ebb66.css" rel="prefetch"><link href="css/chunk-a3ddd952.902ebb66.css" rel="prefetch"><link href="css/chunk-e35186f0.902ebb66.css" rel="prefetch"><link href="css/chunk-f35dfe36.ea52b615.css" rel="prefetch"><link href="js/chunk-088acbde.46503dcc.js" rel="prefetch"><link href="js/chunk-0cbcaa56.46e3dd42.js" rel="prefetch"><link href="js/chunk-0f6f9608.540fa080.js" rel="prefetch"><link href="js/chunk-10d9ee19.6bc719ae.js" rel="prefetch"><link href="js/chunk-26daa808.a340b60b.js" rel="prefetch"><link href="js/chunk-35db73ce.e1ffc5fa.js" rel="prefetch"><link href="js/chunk-38b35ffa.6daa44bc.js" rel="prefetch"><link href="js/chunk-4caed774.92751344.js" rel="prefetch"><link href="js/chunk-4f15b41a.8943bdec.js" rel="prefetch"><link href="js/chunk-52fcdd7c.0f505f93.js" rel="prefetch"><link href="js/chunk-63c1eac8.59f3df74.js" rel="prefetch"><link href="js/chunk-6ae0a0d3.b08743d0.js" rel="prefetch"><link href="js/chunk-75426f71.1a12b5c7.js" rel="prefetch"><link href="js/chunk-904e5abc.3cea2bdf.js" rel="prefetch"><link href="js/chunk-a3ddd952.dc1ed0be.js" rel="prefetch"><link href="js/chunk-e35186f0.efed2a2b.js" rel="prefetch"><link href="js/chunk-f35dfe36.e7038b09.js" rel="prefetch"><link href="css/app.6c30acd7.css" rel="preload" as="style"><link href="css/chunk-vendors.9181e156.css" rel="preload" as="style"><link href="js/app.d5be9b64.js" rel="preload" as="script"><link href="js/chunk-vendors.13743003.js" rel="preload" as="script"><link href="css/chunk-vendors.9181e156.css" rel="stylesheet"><link href="css/app.6c30acd7.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but erp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.13743003.js"></script><script src="js/app.d5be9b64.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>erp</title><link href="css/chunk-088acbde.902ebb66.css" rel="prefetch"><link href="css/chunk-0cbcaa56.e05858e7.css" rel="prefetch"><link href="css/chunk-0f6f9608.b3153d73.css" rel="prefetch"><link href="css/chunk-10d9ee19.84a6683c.css" rel="prefetch"><link href="css/chunk-26daa808.62429343.css" rel="prefetch"><link href="css/chunk-35db73ce.1f9c10ff.css" rel="prefetch"><link href="css/chunk-4caed774.ad94328f.css" rel="prefetch"><link href="css/chunk-52fcdd7c.51e3ffbd.css" rel="prefetch"><link href="css/chunk-6ae0a0d3.84a02b23.css" rel="prefetch"><link href="css/chunk-743f0316.fb5066fb.css" rel="prefetch"><link href="css/chunk-75426f71.902ebb66.css" rel="prefetch"><link href="css/chunk-904e5abc.902ebb66.css" rel="prefetch"><link href="css/chunk-a3ddd952.902ebb66.css" rel="prefetch"><link href="css/chunk-ab4d3e40.d941d6ef.css" rel="prefetch"><link href="css/chunk-e35186f0.902ebb66.css" rel="prefetch"><link href="css/chunk-f0b6f0d4.a3b83cc4.css" rel="prefetch"><link href="css/chunk-f35dfe36.ea52b615.css" rel="prefetch"><link href="js/chunk-088acbde.46503dcc.js" rel="prefetch"><link href="js/chunk-0cbcaa56.46e3dd42.js" rel="prefetch"><link href="js/chunk-0f6f9608.540fa080.js" rel="prefetch"><link href="js/chunk-10d9ee19.6bc719ae.js" rel="prefetch"><link href="js/chunk-26daa808.a340b60b.js" rel="prefetch"><link href="js/chunk-35db73ce.e1ffc5fa.js" rel="prefetch"><link href="js/chunk-4caed774.92751344.js" rel="prefetch"><link href="js/chunk-52fcdd7c.0f505f93.js" rel="prefetch"><link href="js/chunk-63c1eac8.59f3df74.js" rel="prefetch"><link href="js/chunk-6ae0a0d3.b08743d0.js" rel="prefetch"><link href="js/chunk-743f0316.503949a4.js" rel="prefetch"><link href="js/chunk-75426f71.1a12b5c7.js" rel="prefetch"><link href="js/chunk-904e5abc.3cea2bdf.js" rel="prefetch"><link href="js/chunk-a3ddd952.dc1ed0be.js" rel="prefetch"><link href="js/chunk-ab4d3e40.1f5f6d89.js" rel="prefetch"><link href="js/chunk-e35186f0.efed2a2b.js" rel="prefetch"><link href="js/chunk-f0b6f0d4.e264ca96.js" rel="prefetch"><link href="js/chunk-f35dfe36.e7038b09.js" rel="prefetch"><link href="css/app.6c30acd7.css" rel="preload" as="style"><link href="css/chunk-vendors.9181e156.css" rel="preload" as="style"><link href="js/app.a48f0419.js" rel="preload" as="script"><link href="js/chunk-vendors.524d6b36.js" rel="preload" as="script"><link href="css/chunk-vendors.9181e156.css" rel="stylesheet"><link href="css/app.6c30acd7.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but erp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.524d6b36.js"></script><script src="js/app.a48f0419.js"></script></body></html>

resources/frontend/src/router/list.js

@@ -56,6 +56,11 @@ const list = [
         name: "新建商品",
         component: () => import("../views/goods/addgoods/addgoods.vue"),
       },
+      {
+        path: "EDIT_GOODS",
+        name: "修改商品规格",
+        component: () => import("../views/goods/editgoods.vue"),
+      },
       {
         path: "/",
         redirect: "GOODS_LIST",

resources/frontend/src/views/goods/addgoods/addgoods.vue

@@ -1,178 +1,99 @@
 <template>
     <div>
         <el-card class="box-card">
-            <div class="goods" style="margin: 20px">
+            <!-- 新建商品进入显示 -->
-                <div class="add-item-info" style="margin-bottom: 10px; margin-left: 52px">
+            <el-form ref="form" :inline="true" :model="form">
-                    <div>
+                <div>
-                        <div style="font-size: 14px">商品列表：</div>
+                    <el-form-item label="商品列表：">
                         <el-select v-model="lid" placeholder="选择商品" @change="onchange" filterable>
                             <el-option v-for="item in goodschoose" :key="item.id" :label="item.title" :value="item.id">
                             </el-option>
                         </el-select>
-                    </div>
+                    </el-form-item>
-                    <span style="font-size: 14px">商品图片：
+                </div>
-                        <el-upload class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
+                <div>
-                            :show-file-list="true" list-type="picture-card" :on-change="handleAvatarSuccess">
+                    <el-form-item label="商品图片：">
-                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                        <el-image v-if="disabled" style="width: 148px; height: 148px" :src="form.img_url" fit="cover">
+                        </el-image>
+                        <el-upload v-else class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
+                            :show-file-list="false" list-type="picture-card" :on-change="handleAvatarSuccess">
+                            <img v-if="form.img_url" :src="form.img_url" class="avatar" />
                             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                         </el-upload>
-                    </span>
+                    </el-form-item>
                 </div>
-
+                <div>
-                <!-- 编辑按钮进入显示 -->
+                    <el-form-item label="商品名称：">
-                <el-form ref="form" :inline="true" :model="form" v-if="goodsData != ''">
+                        <el-input placeholder="商品名称" v-model="form.title" :disabled="disabled"></el-input>
+                    </el-form-item>
+                    <el-form-item label="商品编码：">
+                        <el-input placeholder="商品编码" v-model="form.goods_code" :disabled="disabled"></el-input>
+                    </el-form-item>
+                    <el-form-item label="商品种类：">
+                        <el-select v-model="form.type_id" placeholder="商品种类" filterable :disabled="disabled">
+                            <el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="商品品牌：">
+                        <el-select v-model="form.brand_id" placeholder="商品品牌" filterable :disabled="disabled">
+                            <el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div v-for="(item, i) in skus" :key="i">
+                    <div>{{ i + 1 }}.</div>
+                    <el-form-item label="商品规格：">
+                        <el-input placeholder="商品规格" v-model="skus[i].title"></el-input>
+                    </el-form-item>
+                    <el-form-item label="规格编码：">
+                        <el-input v-model="skus[i].sku_code" placeholder="商品编码">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="商品状态：">
+                        <el-select v-model="skus[i].reserve" placeholder="下架（默认）">
+                            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
                     <div>
-                        <el-form-item label="商品名称：">
+                        <el-form-item label="商品数量：">
-                            <el-input placeholder="商品名称" v-model="goodsData.goods.title"></el-input>
+                            <el-input v-model="skus[i].num" placeholder="商品数量">
-                        </el-form-item>
-                        <el-form-item label="商品编码：">
-                            <el-input placeholder="商品编码" v-model="goodsData.goods.goods_code"></el-input>
-                        </el-form-item>
-                        <el-form-item label="商品种类：">
-                            <el-select v-model="goodsData.goods.type_id" placeholder="商品种类" filterable>
-                                <el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="商品品牌：">
-                            <el-select v-model="goodsData.goods.brand_id" placeholder="商品品牌" filterable>
-                                <el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                    </div>
-                    <div>
-                        <el-form-item label="商品规格：">
-                            <el-input placeholder="商品规格" v-model="goodsData.title"></el-input>
-                        </el-form-item>
-                        <el-form-item label="规格编码：">
-                            <el-input v-model="goodsData.sku_code" placeholder="商品编码">
                             </el-input>
                         </el-form-item>
-                        <el-form-item label="商品状态：">
+                        <el-form-item label="商品成本：">
-                            <el-select v-model="goodsData.status">
+                            <el-input v-model="skus[i].cost" placeholder="商品成本">
-                                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                        <div>
-                            <el-form-item label="商品数量：">
-                                <el-input v-model="goodsData.num" placeholder="商品数量">
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item label="商品成本：">
-                                <el-input v-model="goodsData.cost" placeholder="商品成本">
-                                </el-input>
-                            </el-form-item>
-                        </div>
-                    </div>
-                    <div class="btn">
-                        <el-form-item>
-                            <el-button type="primary" @click="Edititem()">保存</el-button>
-                            <el-button plain @click="cancel()">取消</el-button>
-                        </el-form-item>
-                    </div>
-                </el-form>
-
-                <!-- 新建商品进入显示 -->
-                <el-form ref="form" :inline="true" :model="form" v-if="goodsData == ''">
-                    <div>
-                        <el-form-item label="商品名称：">
-                            <el-input placeholder="商品名称" v-model="form.title" :disabled="true" v-if="isShow"></el-input>
-                            <el-input placeholder="商品名称" v-model="form.title" v-else></el-input>
-                        </el-form-item>
-                        <el-form-item label="商品编码：">
-                            <el-input placeholder="商品编码" v-model="form.goods_code" :disabled="true" v-if="isShow">
-                            </el-input>
-                            <el-input placeholder="商品编码" v-model="form.goods_code" v-else></el-input>
-                        </el-form-item>
-                        <el-form-item label="商品种类：">
-                            <el-select v-model="form.type_id" placeholder="商品种类" filterable>
-                                <el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="商品品牌：">
-                            <el-select v-model="form.brand_id" placeholder="商品品牌" filterable>
-                                <el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                    </div>
-                    <div v-for="(item, i) in skus" :key="i">
-                        <span style="margin-right: -15px">{{ i + 1 }}.</span>
-                        <el-form-item label="商品规格：">
-                            <el-input placeholder="商品规格" v-model="skus[i].title"></el-input>
-                        </el-form-item>
-                        <span class="addto" @click="handleAdd()">+</span>
-                        <el-form-item label="规格编码：">
-                            <el-input v-model="skus[i].sku_code" placeholder="商品编码">
                             </el-input>
                         </el-form-item>
-                        <el-form-item label="商品状态：">
+                        <el-button type="danger" @click="handleDelete(i)">删除</el-button>
-                            <el-select v-model="skus[i].reserve" placeholder="下架（默认）">
-                                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                        <div>
-                            <el-form-item label="商品数量：">
-                                <el-input v-model="skus[i].num" placeholder="商品数量">
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item label="商品成本：">
-                                <el-input v-model="skus[i].cost" placeholder="商品成本">
-                                </el-input>
-                            </el-form-item>
-                            <el-button type="primary" @click="handleDelete(i)">删除</el-button>
-                        </div>
                     </div>
-                    <div class="btn">
+                </div>
-                        <el-form-item>
+                <div class="btn">
-                            <el-button type="primary" @click="handleSave()">保存</el-button>
+                    <el-form-item>
-                            <el-button plain @click="cancel()">取消</el-button>
+                        <el-button type="primary" @click="handleSave()">保存</el-button>
-                        </el-form-item>
+                        <el-button plain @click="cancel()">取消</el-button>
-                    </div>
+                        <el-button type="success" @click="handleAdd()">增加规格</el-button>
-                </el-form>
+                    </el-form-item>
-            </div>
+                </div>
+            </el-form>
         </el-card>
     </div>
 </template>
 
 <script>
-import {
+import { addGoods, goodsList, imgUpload } from "../../../api/goods.js";
-    addGoods,
-    checkGoods,
-    goodsList,
-    updateGoods,
-    imgUpload,
-} from "../../../api/goods.js";
 import { goods_types, Brand_goods_types } from "../../../api/rankingData.js";
 export default {
     data() {
         return {
-            imgs: [],
-            gallery: "",
-            imageUrl: "",
             lid: "", // 选择的商品列表id
             gid: "", // 商品id
             brand: [], // 品牌列表
             cate: [], // 种类列表
             goodschoose: [], // 商品列表
-            goodsID: "", //进入页面是否有商品id
-            goodsData: [], //编辑按钮进入获取的商品数据
             // 规格列表
-            skus: [
+            skus: [],
-                {
-                    title: "",
-                    sku_code: "",
-                    status: "0",
-                    num: "0",
-                    cost: "0",
-                    reserve: "0",
-                },
-            ],
-
             // 增加商品表单
             form: {
                 goods_id: "",
@@ -198,11 +119,24 @@ export default {
                 },
             ],
             file: [],
-            isShow: false,
+            disabled: false,
-            URL: "",
         };
     },
-
+    mounted() {
+        let page = {
+            per_page: 999,
+        };
+        // 获取商品种类
+        goods_types(page).then((res) => {
+            this.cate = res.data.data;
+        });
+        // 获取商品品牌
+        Brand_goods_types(page).then((res) => {
+            this.brand = res.data.data;
+        });
+        this.handleList();
+        this.handleAdd();
+    },
     watch: {
         lid: {
             handler(newVal, oldVal) {
@@ -218,7 +152,6 @@ export default {
             immediate: true, // 第一次改变就执行
         },
     },
-
     methods: {
         //图片上传
         handleAvatarSuccess(res, files) {
@@ -226,7 +159,6 @@ export default {
             files.forEach((file) => {
                 formData.append("uploadFile", file.raw); //文件
             });
-
             let requestConfig = {
                 headers: {
                     "Content-Type": "multipart/form-data",
@@ -234,31 +166,8 @@ export default {
             };
             imgUpload(formData, requestConfig).then((res) => {
                 this.form.img_url = res.data.resource;
-                if (this.goodsData.length !== 0) {
-                    this.goodsData.goods.img_url = res.data.resource;
-                }
             });
         },
-
-        // 查看一个商品
-        handleUpdate() {
-            this.gid = this.$route.query;
-            if (this.gid.id) {
-                checkGoods(this.gid.id).then((res) => {
-                    const data = res.data.data;
-                    const sku = this.skus[0];
-                    const list = {};
-                    Object.keys(data).map((key) => {
-                        Object.keys(sku).map((i) => {
-                            if (key == i) {
-                                list[i] = data[key];
-                            }
-                        });
-                    });
-                });
-            }
-        },
-
         // 商品列表
         handleList() {
             goodsList().then((res) => {
@@ -272,7 +181,6 @@ export default {
                 ];
             });
         },
-
         // 添加商品
         handleSave() {
             const goods = this.form;
@@ -288,138 +196,38 @@ export default {
                         message: "商品添加成功！",
                         type: "success",
                     });
-                    this.updateForm();
                     this.$router.push("/GOODS_LIST");
                 }
             });
         },
-
-        // 修改成功后重置表单
-        updateForm() {
-            this.form = {
-                title: "",
-                img_url: "abc.jpg",
-                type_id: "",
-                brand_id: "",
-                goods_code: "",
-            };
-            this.skus = [
-                {
-                    title: "",
-                    sku_code: "",
-                    status: "",
-                    num: "",
-                    cost: "",
-                },
-            ];
-        },
-
         // 增加一个商品规格
         handleAdd() {
-            this.skus.push({
+            let sku = {
                 title: "",
                 sku_code: "",
                 status: "0",
-                num: "",
+                num: "0",
-                cost: "",
+                cost: "0",
-            });
+                reserve: "0",
+            };
+            this.skus.push(sku);
         },
-
         // 删除一个商品规格
         handleDelete(index) {
             this.skus.splice(index, 1);
         },
-
-
-        // 商品列表页进入带数据表单
-        getgoodsidData() {
-            let id = this.bigID;
-            checkGoods(id).then((res) => {
-                this.goodsData = res.data.data;
-            });
-        },
-
-        // 编辑确认请求
-        Edititem() {
-            let id = this.bigID;
-            let goods = {
-                title: this.goodsData.goods.title,
-                img_url: this.goodsData.goods.img_url,
-                type_id: this.goodsData.goods.type_id,
-                brand_id: this.goodsData.goods.brand_id,
-                goods_code: this.goodsData.goods.goods_code,
-            };
-            let sku = {
-                title: this.goodsData.title,
-                sku_code: this.goodsData.sku_code,
-                status: this.goodsData.status,
-                num: this.goodsData.num,
-                cost: this.goodsData.cost,
-            };
-            if (sku.status == "下架") {
-                sku.status = 0;
-            } else if (sku.status == "在售") {
-                sku.status = 1;
-            } else if (sku.status == "预警") {
-                sku.status = 2;
-            }
-            let updateData = {
-                goods_id: this.goodsData.goods_id,
-                goods,
-                sku,
-            };
-            updateGoods(id, updateData).then((res) => {
-                this.$router.push("/GOODS_LIST");
-                this.$message({
-                    message: "商品编辑成功！",
-                    type: "success",
-                });
-            });
-        },
-
         // 取消按钮
         cancel() {
             this.$router.push("/GOODS_LIST");
         },
-
         onchange(value) {
-            if (value !== "") {
+            this.disabled = value !== "";
-                this.isShow = true;
+            if (!this.disabled) {
-            }
+                this.disabled = false;
-            if (value === "") {
-                this.isShow = false;
                 this.form = {};
             }
         },
     },
-
-    created() {
-        this.goodsID = sessionStorage.getItem("商品ID");
-        this.bigID = sessionStorage.getItem("ID");
-    },
-
-    mounted() {
-        this.gid = this.$route.query;
-        let page = {
-            per_page: 999,
-        };
-        // 获取商品种类
-        goods_types(page).then((res) => {
-            this.cate = res.data.data;
-        });
-        // 获取商品品牌
-        Brand_goods_types(page).then((res) => {
-            this.brand = res.data.data;
-        });
-        this.handleList();
-        this.handleUpdate();
-        this.getgoodsidData();
-    },
-
-    beforeDestroy() {
-        sessionStorage.removeItem("商品ID"); //销毁内存中的商品ID
-        sessionStorage.removeItem("ID"); //销毁内存中的ID
-    },
 };
 </script>
 
@@ -430,20 +238,7 @@ export default {
 }
 
 .el-form-item {
-    margin-left: 60px;
+    margin-left: 40px;
-}
-
-.addto {
-    display: inline-block;
-    width: 30px;
-    height: 30px;
-    background-color: blue;
-    color: #fff;
-    font-size: 25px;
-    text-align: center;
-    line-height: 30px;
-    border-radius: 5px;
-    margin-top: 4px;
 }
 
 /* 分割 */

resources/frontend/src/views/goods/editgoods.vue

@@ -0,0 +1,309 @@
+<template>
+    <div>
+        <el-card class="box-card">
+            <el-form ref="form" :inline="true" :model="goodsData">
+                <div>
+                    <el-form-item label="商品列表：">
+                        <el-select v-model="goodsData.goods_id" placeholder="选择商品" filterable :disabled="true">
+                            <el-option v-for="item in goodschoose" :key="item.id" :label="item.title" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div>
+                    <el-form-item label="商品图片：">
+                        <el-upload class="avatar-uploader" action="#" :limit="1" :auto-upload="false"
+                            :show-file-list="true" list-type="picture-card" :on-change="handleAvatarSuccess">
+                            <img v-if="goodsData.goods.img_url" :src="goodsData.goods.img_url" class="avatar" />
+                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                        </el-upload>
+                    </el-form-item>
+                </div>
+                <div>
+                    <el-form-item label="商品名称：">
+                        <el-input placeholder="商品名称" v-model="goodsData.goods.title"></el-input>
+                    </el-form-item>
+                    <el-form-item label="商品编码：">
+                        <el-input placeholder="商品编码" v-model="goodsData.goods.goods_code"></el-input>
+                    </el-form-item>
+                    <el-form-item label="商品种类：">
+                        <el-select v-model="goodsData.goods.type_id" placeholder="商品种类" filterable>
+                            <el-option v-for="item in cate" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="商品品牌：">
+                        <el-select v-model="goodsData.goods.brand_id" placeholder="商品品牌" filterable>
+                            <el-option v-for="item in brand" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div>
+                    <el-form-item label="商品规格：">
+                        <el-input placeholder="商品规格" v-model="goodsData.title"></el-input>
+                    </el-form-item>
+                    <el-form-item label="规格编码：">
+                        <el-input v-model="goodsData.sku_code" placeholder="商品编码">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="商品状态：">
+                        <el-select v-model="goodsData.status">
+                            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <div>
+                        <el-form-item label="商品数量：">
+                            <el-input v-model="goodsData.num" placeholder="商品数量">
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item label="商品成本：">
+                            <el-input v-model="goodsData.cost" placeholder="商品成本">
+                            </el-input>
+                        </el-form-item>
+                    </div>
+                </div>
+                <div>
+                    <el-form-item label="规格图片：">
+                        <div class="shop-sku-img">
+                            <div class="shop" v-for="item in goodsData.thumb_url" :key="item.shop_id">
+                                <div class="shop-name">{{ item.shop_name }}</div>
+                                <div>
+                                    <el-upload class="avatar-uploader" action="/api/upload" :limit="1"
+                                        accept="image/png,image/jpg,image/jpeg" :show-file-list="false"
+                                        list-type="picture-card" :data="{ shop_id: item.shop_id }" name="uploadFile"
+                                        :on-success="handleShopImgSuccess" :before-upload="beforeAvatarUpload">
+                                        <img v-if="item.img_url" :src="item.img_url" class="avatar" />
+                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                                    </el-upload>
+                                </div>
+                            </div>
+                        </div>
+                    </el-form-item>
+                </div>
+                <div class="btn">
+                    <el-form-item>
+                        <el-button type="primary" @click="Edititem()">保存</el-button>
+                        <el-button plain @click="cancel()">取消</el-button>
+                    </el-form-item>
+                </div>
+            </el-form>
+        </el-card>
+    </div>
+</template>
+
+<script>
+import { checkGoods, goodsList, updateGoods, imgUpload } from "../../api/goods.js";
+import { goods_types, Brand_goods_types } from "../../api/rankingData.js";
+export default {
+    data() {
+        return {
+            brand: [], // 品牌列表
+            cate: [], // 种类列表
+            goodschoose: [], // 商品列表
+            skuId: 0, // 商品id
+            // 增加商品表单
+            goodsData: {
+                goods_id: "",
+                title: "",
+                status: "",
+                num: "",
+                cost: "",
+                sku_code: "",
+                thumb_url: [],
+                goods: {
+                    img_url: "",
+                    title: "",
+                    type_id: "",
+                    brand_id: "",
+                    goods_code: "",
+                }
+            },
+            // 商品状态
+            options: [
+                {
+                    id: "0",
+                    label: "下架",
+                },
+                {
+                    id: "1",
+                    label: "在售",
+                },
+                {
+                    id: "2",
+                    label: "预警",
+                },
+            ],
+            file: [],
+            shopList: []
+        };
+    },
+    methods: {
+        //图片上传
+        handleAvatarSuccess(res, files) {
+            let formData = new FormData();
+            files.forEach((file) => {
+                formData.append("uploadFile", file.raw); //文件
+            });
+            let requestConfig = {
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                },
+            };
+            imgUpload(formData, requestConfig).then((res) => {
+                this.goodsData.goods.img_url = res.data.resource;
+            });
+        },
+        handleShopImgSuccess(res) {
+            this.goodsData.thumb_url.forEach((val, key) => {
+                if (val.shop_id == res.shop_id) {
+                    this.goodsData.thumb_url[key].img_url = res.resource;
+                }
+            })
+        },
+        beforeAvatarUpload(file) {
+            const isLt1M = file.size / 1024 / 1024 < 1;
+            if (!isLt1M) {
+                this.$message.error('上传头像图片大小不能超过 1MB!');
+                return false;
+            }
+            const isSize = new Promise(function (resolve, reject) {
+                let width = 1200;
+                let height = 1200;
+                let _URL = window.URL || window.webkitURL;
+                let img = new Image();
+                img.onload = function () {
+                    let valid = img.width <= width && img.height <= height;
+                    valid ? resolve() : reject();
+                }
+                img.src = _URL.createObjectURL(file);
+            }).then(() => {
+                return file;
+            }, () => {
+                this.$message.error('图片尺寸限制为1200 x 1200，大小不可超过1MB')
+                return Promise.reject();
+            });
+
+            return isSize;
+        },
+        // 商品列表
+        handleList() {
+            goodsList().then((res) => {
+                this.goodschoose = res.data.data;
+            });
+        },
+        // 商品列表页进入带数据表单
+        getGoodsSkuData() {
+            checkGoods(this.skuId).then((res) => {
+                this.goodsData = res.data.data;
+            });
+        },
+        // 编辑确认请求
+        Edititem() {
+            let goods = {
+                title: this.goodsData.goods.title,
+                img_url: this.goodsData.goods.img_url,
+                type_id: this.goodsData.goods.type_id,
+                brand_id: this.goodsData.goods.brand_id,
+                goods_code: this.goodsData.goods.goods_code,
+            };
+            let sku = {
+                title: this.goodsData.title,
+                sku_code: this.goodsData.sku_code,
+                status: this.goodsData.status,
+                num: this.goodsData.num,
+                cost: this.goodsData.cost,
+                thumb_url: this.goodsData.thumb_url
+            };
+            if (sku.status == "下架") {
+                sku.status = 0;
+            } else if (sku.status == "在售") {
+                sku.status = 1;
+            } else if (sku.status == "预警") {
+                sku.status = 2;
+            }
+            let updateData = {
+                goods_id: this.goodsData.goods_id,
+                goods,
+                sku,
+            };
+            updateGoods(this.skuId, updateData).then((res) => {
+                this.$message(res.data.message);
+                this.$router.push("/GOODS_LIST");
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.$router.push("/GOODS_LIST");
+        },
+    },
+    created() {
+        this.skuId = parseInt(this.$route.query.id);
+    },
+    mounted() {
+        let page = {
+            per_page: 999,
+        };
+        // 获取商品种类
+        goods_types(page).then((res) => {
+            this.cate = res.data.data;
+        });
+        // 获取商品品牌
+        Brand_goods_types(page).then((res) => {
+            this.brand = res.data.data;
+        });
+        this.handleList();
+        this.getGoodsSkuData();
+    }
+};
+</script>
+
+<style scoped>
+.el-upload--picture-card {
+    width: 50px;
+    height: 50px;
+}
+
+/* 分割 */
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 148px;
+    height: 148px;
+    line-height: 148px;
+    text-align: center;
+}
+
+.avatar {
+    width: 148px;
+    height: 148px;
+    display: block;
+}
+
+.shop-sku-img {
+    display: flex;
+
+}
+
+.shop-sku-img .shop {
+    margin-right: 20px;
+    margin-bottom: 20px;
+}
+
+.shop-sku-img .shop .shop-name {
+    text-align: center;
+}
+</style>

resources/frontend/src/views/goods/goods.vue

@@ -246,7 +246,7 @@
                     <el-table-column label="操作" width="130">
                         <template slot-scope="scope">
                             <el-button type="text" @click="ejectstock(scope.row)">库存</el-button>
-                            <el-button type="text" @click="handleEdit(scope.row.goods_id, scope.row.id)">编辑</el-button>
+                            <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
                             <el-button type="text" @click="goodslog(scope.row)">记录</el-button>
                             <!-- <el-button type="text" @click="deleteSku(scope.row)">删除</el-button> -->
                         </template>
@@ -497,10 +497,8 @@ export default {
     },
     methods: {
         // 列表编辑
-        handleEdit(goodsid, id) {
+        handleEdit(id) {
-            sessionStorage.setItem("商品ID", goodsid);
+            this.$router.push({path:"EDIT_GOODS",query:{id:id}});
-            sessionStorage.setItem("ID", id);
-            this.$router.push("/ADDGOODS");
         },
 
         // 获取商品列表

routes/api.php

@@ -44,12 +44,11 @@ Route::middleware(['auth:api', 'check.permissions'])->group(function () {
     Route::resource('permissions', 'Permission\PermissionsController', ['only' => ['index',
 //        'store', 'show', 'update', 'destroy'
     ]]);
-    Route::post('upload', [UploadController::class, 'store'])->name('upload.file');
     // 平台
     Route::resource('plat_goods', 'Business\BusinessGoodsSkusController', ['only' => ['index', 'update', 'destroy']]);
     Route::post('plat/sync/{id}/stock', [BusinessGoodsSkusController::class, 'syncStock'])->name('plat.sync.stock');
     // 团购
-//    Route::resource('group', 'Group\GroupsController', ['only' => ['index', 'store', 'show', 'update', 'destroy']]);
+    Route::resource('group', 'Group\GroupsController', ['only' => ['index', 'store', 'show', 'update', 'destroy']]);
 });
 // 登录
 Route::post('/auth/login', [LoginController::class, 'login'])->name('auth.login');
@@ -67,10 +66,12 @@ Route::get('goodsList', [GroupsController::class, 'goodsList'])->name('goods.lis
 Route::get('groupGoods', [GroupsController::class, 'getGoods'])->name('group.get_goods')->middleware('auth:api');
 Route::post('groupGoods', [GroupsController::class, 'addGroupGoods'])->name('group.add_goods')->middleware('auth:api');
 Route::get('addGoods', [GroupsController::class, 'addGoods'])->name('group.add_goods')->middleware('auth:api');
-Route::resource('group', 'Group\GroupsController', ['only' => ['index', 'store', 'show', 'update', 'destroy']]);
 
 // 妙选商城数据推送
 Route::post('business', [ShopsController::class, 'business'])->name('shop.put.business');
 
 // 盘点导入
 Route::post('inventory/goods_skus', [GoodsSkusController::class, 'inventoryImport'])->name('goods_sku.inventory');
+
+
+Route::post('upload', [UploadController::class, 'store'])->name('upload.file');

routes/web.php

@@ -24,3 +24,5 @@ Route::get('goods_skus/export', [GoodsSkusController::class, 'export'])->name('g
 Route::get('goods/import/template', [GoodsController::class, 'download'])->name('download.goods_import.template');
 
 Route::get('callback', [ShopsController::class, 'authBind'])->name('shop.auth_bind.callback');
+
+Route::get("ktt/{file_name}","UploadController@browse");