发布商品，商品图片拖拽改变位置

seller/src/views/goods/goods-seller/addGoods.scss

@@ -423,7 +423,7 @@ div.base-info-item {
   display:flex;
 }
 .demo-upload-list-cover div {
-  margin: 10% 0;
+  margin-top: 50px;
   width: 100%;
 
   > i {

seller/src/views/goods/goods-seller/goodsOperation.vue

@@ -137,28 +137,34 @@
               <Input type="text" v-model="baseInfoForm.cost" placeholder="市场价格" clearable style="width: 260px"/>
             </FormItem>
             <FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles">
-              <!-- <div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index">
+              <vuedraggable
-                <template v-if="item.status === 'finished'">
+                :list="baseInfoForm.goodsGalleryFiles"
-                  <img :src="item.url"/>
+                :animation="200"
-
+                style="display:inline-block;"
-                  <div class="demo-upload-list-cover">
+                ghost-class="thumb-ghost"
-                    <div>
+              >
-                      <Icon type="ios-eye-outline" @click.native="handleViewGoodsPicture(item.url)"></Icon>
+                <div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index">
-                      <Icon type="ios-trash-outline" @click.native="handleRemoveGoodsPicture(item)"></Icon>
+                  <template v-if="item.status === 'finished'">
+                    <img :src="item.url"/>
+                    <div class="demo-upload-list-cover">
+                      <div>
+                        <Icon type="ios-eye-outline" size="30" @click.native="handleViewGoodsPicture(item.url)"></Icon>
+                        <Icon type="ios-trash-outline" size="30" @click.native="handleRemoveGoodsPicture(item)"></Icon>
+                      </div>
+                      <!-- <div>
+                        <Icon type="ios-arrow-dropleft" @click.native="
+                          handleGoodsPicRemoteUp(baseInfoForm.goodsGalleryFiles,__index)"/>
+                        <Icon type="ios-arrow-dropright" @click.native="
+                          handleGoodsPicRemoteDown(baseInfoForm.goodsGalleryFiles,__index)"/>
+                      </div> -->
                     </div>
-                    <div>
+                  </template>
-                      <Icon type="ios-arrow-dropleft" @click.native="
+                  <template v-else>
-                        handleGoodsPicRemoteUp(baseInfoForm.goodsGalleryFiles,__index)"/>
+                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
-                      <Icon type="ios-arrow-dropright" @click.native="
+                  </template>
-                        handleGoodsPicRemoteDown(baseInfoForm.goodsGalleryFiles,__index)"/>
+                </div>
-                    </div>
+              </vuedraggable>
-                  </div>
+              <Upload ref="upload" :show-upload-list="false" :default-file-list="baseInfoForm.goodsGalleryFiles"
-                </template>
-                <template v-else>
-                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
-                </template>
-              </div> -->
-              <!-- <Upload ref="upload" :show-upload-list="false" :default-file-list="baseInfoForm.goodsGalleryFiles"
                       :on-success="handleSuccessGoodsPicture" :format="['jpg', 'jpeg', 'png']"
                       :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
                       :before-upload="handleBeforeUploadGoodsPicture" multiple type="drag" :action="uploadFileUrl"
@@ -166,8 +172,8 @@
                 <div style="width: 80px; height: 80px; line-height: 80px">
                   <Icon type="ios-camera" size="20"></Icon>
                 </div>
-              </Upload> -->
+              </Upload>
-              <upload-pic-thumb v-model="baseInfoForm.goodsGalleryFiles" :multiple="true"></upload-pic-thumb>
+              <!-- <upload-pic-thumb v-model="baseInfoForm.goodsGalleryFiles" :multiple="true"></upload-pic-thumb> -->
 
               <Modal title="View Image" v-model="goodsPictureVisible">
                 <img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%"/>
@@ -429,18 +435,17 @@
 
 <script>
 import {regular} from "@/utils";
-import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
 import editor from "@/views/my-components/lili/editor";
 import * as API_GOODS from "@/api/goods";
 import * as API_Shop from "@/api/shops";
 
 import cloneObj from "@/utils/index";
-
+import vuedraggable from "vuedraggable";
 export default {
   name: "addGoods",
   components: {
-    uploadPicThumb,
     editor,
+    vuedraggable
   },
   watch: {
     selectGoodsType: {
@@ -839,7 +844,6 @@ export default {
      * @value 参数选项值
      */
     selectParams(paramsGroup, groupIndex, params, paramsIndex, value) {
-      console.log(params.id);
       if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) {
         this.baseInfoForm.goodsParamsDTOList[groupIndex] = {
           groupId:'',
@@ -873,9 +877,8 @@ export default {
 
     // 编辑sku图片
     editSkuPicture(row) {
-      console.log(row);
       if (row.images && row.images.length > 0) {
-        this.previewPicture = row.images[0];
+        this.previewPicture = row.images[0].url;
       }
       this.selectedSku = row;
       this.showSkuPicture = true;
@@ -939,7 +942,6 @@ export default {
       });
     },
     handleBeforeUploadGoodsPicture() {
-      console.log(this.baseInfoForm);
       const check = this.baseInfoForm.goodsGalleryFiles.length < 5;
       if (!check) {
         this.$Notice.warning({
@@ -1141,7 +1143,6 @@ export default {
               group.goodsParamsItemDTOList.forEach(param => {
                 param.groupId = group.groupId
                 paramsArr.push(param)
-                console.log(param);
               })
             })
             // 循环参数分组
@@ -1155,7 +1156,6 @@ export default {
                 })
               })
             });
-            console.log(this.goodsParams);
           } else {
             this.baseInfoForm.goodsParamsDTOList = []
           }
@@ -1306,7 +1306,6 @@ export default {
       );
 
       this.skuTableColumn = pushData;
-      console.log(this.skuTableColumn);
       //克隆所有渲染的数据
       let cloneTemp = cloneObj(this.skuInfo);
 
@@ -1326,7 +1325,6 @@ export default {
         cloneTemp.splice(0, 1);
         result = this.specIterator(result, cloneTemp);
         this.skuTableData = result;
-        console.log(this.skuTableData);
       }
     },
      /**
@@ -1456,7 +1454,6 @@ export default {
         this.GET_GoodData();
         return;
       }
-      console.log(this.baseInfoForm);
       this.GET_GoodsParams();
       /** 1级校验 */
       this.loading = true;
@@ -1579,7 +1576,6 @@ export default {
           }
           /** 参数校验 **/
           /* Object.keys(this.baseInfoForm.goodsParamsList).forEach((item) => {
-            console.warn(item.paramName)
           });*/
 
           if (this.goodsId) {