管理后台调试变体图片上传接口 --- 调试接口

packages/Longyi/Core/src/Resources/views/admin/catalog/products/edit/types/flexible_variant/mediaupload.blade.php

@@ -10,6 +10,7 @@
                 :http-request="submitUpload"
                 list-type="picture"
                 :limit="1"
+                :on-remove="removeImage"
                 :on-change="uploadChange"
                 :on-exceed="uploadExceed"
                 :before-upload="beforeUpload"
@@ -21,8 +22,8 @@
                 </template>
                 <template #tip>
                     <div class="el-upload__tip">
-                        <p>Image files with a size less than 500kb.</p>
-                        <p>Only one image is allowed to be uploaded.</p>
+                        <p class="text-xs">Image files with a size less than 500kb.</p>
+                        <p class="text-xs">Only one image is allowed to be uploaded.</p>
                     </div>
                 </template>
                 
@@ -46,7 +47,7 @@
 
             props: {
 
-                variant: {
+                paramData: {
                     type: Object,
                     default: function() {
                         return {};
@@ -62,24 +63,20 @@
             data() {
                 return {
                     fileList: [],
-                    form: {
-                        sku: '',
-                        name: '',
-                        price: 0,
-                        weight: 0,
-                        quantity: 0,
-                        // status: false,
-                    },
-              
-        
-    
                 };
             },
             watch: {
-                'variant.images':{
+                'paramData.variantImages':{
                     handler(newVal, oldVal) {
-                        this.fileList = [];
-                        console.log(newVal);
+                        //console.log('paramData.variantIimages -- ',newVal, oldVal);
+                        if(newVal.length) {
+                            this.fileList = [{
+                                id: newVal[0].id,
+                                name: newVal[0].file_name,
+                                url: newVal[0].original_url
+                            }];
+                        }
+                        
                     },
                     
                 }
@@ -90,23 +87,18 @@
             },
 
             methods: {
-               
-                getVariant(id) {
-                    let loading = this.$loading({
-                        target: '.flexiblevariant-eidtdialog'
-                    });
-                    axios.get(`/admin/flexible-variant/variants/${id}`).then((result) => {
-                        console.log(result);
+                removeImage(file,fileList) {
+                    console.log(file,fileList);
+                    if(file.status === 'success' && file.id) {
+                        axios.delete(`/admin/flexible-variant/variants/${this.variant.id}/images/${file.id}`).then((result) => {
+                            console.log(result);
+                            this.$message({
+                                message: 'Delete Success',
+                                type: 'success'
+                            });
 
-                        this.form = result.data.data;
-                        loading.close();
-                    }).catch((error) => {
-                        this.$message({
-                            message: error.message,
-                            type: 'error'
-                        });
-                        loading.close();
-                    });
+                        })
+                    }
                 },
                 uploadExceed(files) {
                     this.$refs.uploadRef.clearFiles();
@@ -135,13 +127,34 @@
                     });
                     const formData = new FormData();
                     formData.append('file', option.file);
-                    axios.post(`/admin/flexible-variant/variants/${this.variant.id}/images/upload`, formData, {
+                    this.paramData.variantIds.forEach((id) => {
+                        formData.append('variant_ids[]', id);
+                    });
+                    axios.post(`/admin/flexible-variant/variants/images`, formData, {
                         headers: { 'Content-Type': 'multipart/form-data' }
                     }).then((result) => {
                         console.log(result);
-
+                        /**
+                         * @todo 
+                         * 1.更新fileList
+                         * 2.触发confirm事件，把新的variant数据发给父组件
+                         * 3.关闭dialog
+                        */
+                        // this.fileList = [{
+                        //     name: result.data.data.file_name,
+                        //     url: result.data.data.thumb_url
+                        // }];
+                        // this.$emit('cancel', {
+                        //     ...this.variant,
+                        //     variant_images:[{
+                        //         file_name: result.data.data.file_name,
+                        //         original_url: result.data.data.url,
+                        //         id: result.data.data.id,
+                        //     }]
+                        // });
                         
                         loading.close();
+
                     }).catch((error) => {
                         this.$message({
                             message: error.message,
@@ -151,32 +164,7 @@
                     });
 
                 },
-                async saveVariant() {
-                    // /admin/flexible-variant/variants/{id}
-                    await this.$refs.variantFormRef.validate();
-                    let requestData = {
-                        sku: this.form.sku,
-                        name: this.form.name,
-                        price: this.form.price,
-                        weight: this.form.weight,
-                        quantity: this.form.quantity,
-                    }
-                    try {
-                        let res = await axios.put(`/admin/flexible-variant/variants/${this.variantId}`,requestData);
-                        this.$message({
-                            message: 'Save successfully.',
-                            type: 'success',
-                        });
-                        this.$emit('update:isShow', false);
-                        this.$emit('confirm', res.data.data);
-                    } catch(err) {
-                        this.$message({
-                            message: err.message,
-                            type: 'error',
-                        });
-                    }
-                    
-                },
+
                 confirmHandler() {
                     this.$refs.uploadRef.submit()
                 },

packages/Longyi/Core/src/Routes/admin-routes.php

@@ -33,8 +33,8 @@ Route::group(['middleware' => ['admin']], function () {
             Route::put('/{id}', [FlexibleVariantController::class, 'updateVariant'])->name('admin.flexible_variant.variants.update');
             Route::delete('/{id}', [FlexibleVariantController::class, 'deleteVariant'])->name('admin.flexible_variant.variants.destroy');
             Route::post('/images', [FlexibleVariantController::class, 'syncVariantImages'])->name('admin.flexible_variant.variants.images.sync');
-            Route::post('/images/upload', [FlexibleVariantController::class, 'uploadVariantImage'])->name('admin.flexible_variant.variants.images.upload');
-            Route::delete('/images/{mediaId}', [FlexibleVariantController::class, 'removeVariantImage'])->name('admin.flexible_variant.variants.images.remove');
+            Route::post('/{id}/images/upload', [FlexibleVariantController::class, 'uploadVariantImage'])->name('admin.flexible_variant.variants.images.upload');
+            Route::delete('/{id}/images/{mediaId}', [FlexibleVariantController::class, 'removeVariantImage'])->name('admin.flexible_variant.variants.images.remove');
 
             // Bulk operations
             Route::post('/bulk/quantities', [FlexibleVariantController::class, 'bulkUpdateQuantities'])->name('admin.flexible_variant.variants.bulk.quantities');

packages/Webkul/Admin/readme.md

@@ -46,6 +46,7 @@ v-form v-field 等参考 vee-validate 文档： https://vee-validate.logaretm.co
 php artisan config:clear
 php artisan cache:clear
 php artisan view:clear
+php artisan route:clear
 ```
 
 php artisan vendor:publish --provider="Longyi\Core\Providers\LongyiCoreServiceProvider" --force