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

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

@@ -1,6 +1,7 @@
 <script type="text/x-template" id="flexiblevariant-uploaddialog-template">
     <el-dialog title="Image Upload" width="660" class="flexiblevariant-uploaddialog"
         :model-value="isShow" @update:model-value="$emit('update:isShow', $event)"
+        @closed="closeHandler"
     >
         <div>
              <el-upload
@@ -14,7 +15,7 @@
                 :on-change="uploadChange"
                 :on-exceed="uploadExceed"
                 :before-upload="beforeUpload"
-                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d1"
+                :before-remove="beforeRemove"
             >
                 
                 <template #trigger>
@@ -34,7 +35,7 @@
         <template #footer>
             <div class="dialog-footer">
                 <el-button @click="cancelHandler">Cancel</el-button>
-                <el-button type="primary" @click="confirmHandler">Confirm</el-button>
+                <el-button type="primary" @click="confirmHandler">Upload</el-button>
             </div>
         </template>
 
@@ -59,7 +60,7 @@
                 }
                 
             },
-            emits: ['update:isShow','confirm'], // 显式声明事件（推荐）
+            emits: ['update:isShow','confirm','cancel'], // 显式声明事件（推荐）
             data() {
                 return {
                     fileList: [],
@@ -68,13 +69,15 @@
             watch: {
                 'paramData.variantImages':{
                     handler(newVal, oldVal) {
-                        //console.log('paramData.variantIimages -- ',newVal, oldVal);
+                        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
                             }];
+                        } else {
+                            this.fileList = [];
                         }
                         
                     },
@@ -87,10 +90,28 @@
             },
 
             methods: {
+                async beforeRemove() {
+                    let res = await this.$confirm('This operation cannot be undone.',{
+                        title: 'Are you sure to delete?',
+                        showClose: false,
+                        confirmButtonText: 'Delete',
+                        cancelButtonText: 'Cancel',
+                        type: 'warning',
+                    }).then(() => true).catch(() => false);
+
+                    return res;
+                },
                 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) => {
+                        const formData = new FormData();
+                    
+                        this.paramData.variantIds.forEach((id) => {
+                            formData.append('variant_ids[]', id);
+                        });
+                        axios.delete(`/admin/flexible-variant/images/${file.id}`,formData, {
+                            headers: { 'Content-Type': 'multipart/form-data' }
+                        }).then((result) => {
                             console.log(result);
                             this.$message({
                                 message: 'Delete Success',
@@ -101,6 +122,7 @@
                     }
                 },
                 uploadExceed(files) {
+                    console.log('uploadExceed ---- ',files);
                     this.$refs.uploadRef.clearFiles();
                     const file = files[0];
                     file.uid = this.$genFileId();
@@ -110,6 +132,7 @@
                     console.log(addFile.size,addFile,fileList);
                 },
                 beforeUpload(rawFile) {
+                    console.log('beforeUpload ---- ',rawFile);
                     let res = true;
                     if(rawFile.size > 5000000) {
                         this.$message({
@@ -135,24 +158,23 @@
                     }).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,
-                        //     }]
-                        // });
-                        
+                        this.fileList = [{
+                            name: result.data.data.file_name,
+                            url: result.data.data.thumb_url
+                        }];
+                        this.$emit('confirm', {
+                            variantIds: this.paramData.variantIds,
+                            variant_images:[{
+                                file_name: result.data.data.file_name,
+                                original_url: result.data.data.url,
+                                id: result.data.data.id,
+                            }]
+                        });
+                        this.$emit('update:isShow', false);
                         loading.close();
 
                     }).catch((error) => {
@@ -171,6 +193,9 @@
                 cancelHandler() {
                     this.$emit('update:isShow', false);
                     this.$emit('cancel', {});
+                },
+                closeHandler() {
+                    this.fileList = [];
                 }
             },