添加商品图片拖拽排序功能

platform-admin/src/main/webapp/WEB-INF/page/sys/tbcfstationitem.html

@@ -627,8 +627,8 @@
                         :on-success="vhandleSuccess" :show-upload-list="false" accept="image/jpeg, image/png">
                     <i-button icon="ios-cloud-upload-outline">请选择图片</i-button>
                 </upload>
-                <div style="display: flex;position: relative;">
-                    <div v-for="item in uploadList" style="margin-left: 5px;">
+                <div id="imgWrapper" style="display: flex;position: relative;">
+                    <div v-for="item in uploadList" style="margin-left: 5px;" :data-img-path="item">
                         <img :src="item" width="100" height="100" id="itemImg">
                         <i class="ivu-icon ivu-icon-ios-trash-outline"
                            style="cursor:pointer;display: flex;font-size: 24px;position: relative;left:11px"
@@ -948,7 +948,7 @@
             </Form-item>
         </i-form>
     </Card>
-
+    <script src="${rc.contextPath}/js/plugins/Sortable.min.js"></script>
     <script src="${rc.contextPath}/statics/libs/iview.js"></script>
     <script src="${rc.contextPath}/js/sys/tbcfstationitem.js?_${date.systemTime}"></script>
     <script type="text/javascript">

platform-admin/src/main/webapp/js/sys/tbcfstationitem.js

@@ -876,4 +876,19 @@ let vm = new Vue({
             })
         })
     },
+    mounted(){
+        this.$nextTick(()=>{
+            new Sortable(imgWrapper, {
+                swapThreshold: 1,
+                animation: 150,
+                onEnd(evt){
+                    let _temArr = [];
+                    $('#imgWrapper').children().each((item,element)=>{
+                        _temArr.push($(element).attr('data-img-path'))
+                    })
+                    this.uploadList = _temArr;
+                }
+            });
+        })
+    }
 });
\ No newline at end of file