菜单排序

package.json

@@ -20,6 +20,7 @@
     "tinymce": "^4.8.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
+    "vuedraggable": "^2.16.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/weChat/index.vue

@@ -7,7 +7,7 @@
             唱唱启蒙英语
           </div>
           <div class="mobile_bd">
-            <ul class="pre_menu_list grid_line ui-sortable ui-sortable-disabled" style="margin-top:0; margin-bottom: 0">
+            <ul v-if="!showOrder" class="pre_menu_list grid_line ui-sortable ui-sortable-disabled" style="margin-top:0; margin-bottom: 0">
               <li v-for="(item, index) in buttonList" class="jsMenu pre_menu_item grid_item jslevel1 ui-sortable ui-sortable-disabled" :class="(selectedIndex === index && selectedChildIndex === -1) ? 'current selected' : ''">
                 <a href="javascript:void(0);" class="pre_menu_link" draggable="false" @click="clickMenu(index, item)">
                   <i class="icon_menu_dot js_icon_menu_dot dn"></i>
@@ -42,6 +42,37 @@
                 </a>
               </li>
             </ul>
+            <ul v-else class="pre_menu_list grid_line ui-sortable ui-sortable-disabled" style="margin-top:0; margin-bottom: 0">
+              <draggable v-model="buttonList">
+                <transition-group>
+                  <li v-for="(item, index) in buttonList" :key="index" class="jsMenu pre_menu_item grid_item jslevel1 ui-sortable ui-sortable-disabled">
+                    <a href="javascript:void(0);" class="pre_menu_link" draggable="false" @click="clickMenu(index, item)">
+                      <i class="icon_menu_dot js_icon_menu_dot dn"></i>
+                      <i class="icon20_common sort_gray"></i>
+                      <span class="js_l1Title">{{item.name}}</span>
+                    </a>
+                    <div class="sub_pre_menu_box js_l2TitleBox" :style="item.sub_button.length == 0 ? 'display: none' : ''" :class="selectedIndex === index ? '' : 'hideMenu'">
+                      <ul class="sub_pre_menu_list">
+                        <draggable v-model="item.sub_button">
+                          <transition-group>
+                            <li class="jslevel2" v-for="(child, childIndex) in item.sub_button" :key="childIndex" :class="(selectedIndex === index && selectedChildIndex === childIndex) ? 'current selected' : ''">
+                              <a href="javascript:void(0);" class="jsSubView" draggable="false">
+                          <span class="sub_pre_menu_inner js_sub_pre_menu_inner">
+                            <i class="icon20_common sort_gray"></i>
+                            <span class="js_l2Title">{{child.name}}</span>
+                          </span>
+                              </a>
+                            </li>
+                          </transition-group>
+                        </draggable>
+                      </ul>
+                      <i class="arrow arrow_out"></i>
+                      <i class="arrow arrow_in"></i>
+                    </div>
+                  </li>
+                </transition-group>
+              </draggable>
+            </ul>
           </div>
         </div>
       </div>
@@ -50,7 +81,7 @@
           点击左侧菜单进行编辑操作
         </div>
         <div id="js_rightBox" class="portable_editor to_left" style="display: block;">
-          <div class="editor_inner">
+          <div class="editor_inner" v-if="!showOrder">
             <div class="menu_form_hd flex-bt">
               <h4 class="global_info"> {{getName()}} </h4>
               <div class="global_extra">
@@ -136,28 +167,46 @@
               </div>
             </div>
           </div>
+          <div v-else class="order">请通过拖拽左边的菜单进行排序</div>
           <span class="editor_arrow_wrp"> <i class="editor_arrow editor_arrow_out"></i> <i class="editor_arrow editor_arrow_in"></i> </span>
         </div>
       </div>
     </div>
     <div class="tool_bar tc js_editBox">
-      <span id="pubBt" class="btn btn_input btn_primary">
-        <button @click="onSave">保存并发布</button></span>
+      <span class="btn btn_input btn_default" v-if="!showOrder">
+        <button @click="showOrder=true">排序</button>
+      </span>
+      <span class="btn btn_input btn_default" v-if="showOrder">
+        <button @click="onSave">完成</button>
+      </span>
+      <span class="btn btn_input btn_primary" v-if="!showOrder">
+        <button @click="onSave">保存并发布</button>
+      </span>
     </div>
   </div>
 </template>
 
 <script>
   import {getPublicMenuApi, savePublicMenuApi} from "../../service/api";
+  import draggable from 'vuedraggable'
   import { MessageBox } from 'element-ui';
   export default {
     name: "index",
+    components: {
+      draggable,
+    },
     data(){
       return {
-          buttonList: [],
+          buttonList: [{
+              name: '菜单名',
+              sub_button: [],
+              type: 'view',
+              url: ''
+          }],
           selectedIndex: 0,
           selectedChildIndex: -1,
-          showErrorTips: false
+          showErrorTips: false,
+          showOrder: false
       }
     },
     mounted(){
@@ -177,6 +226,7 @@
                 this.buttonList = res.menu.button
                 this.selectedIndex = 0
                 this.selectedChildIndex = -1
+                this.showOrder = false;
             }
         })
       },
@@ -280,6 +330,11 @@
   .hideMenu {
     display: none !important;
   }
+  .order {
+    text-align: center;
+    padding-top: 200px;
+    color: #8d8d8d;
+  }
   ul, ol {
     padding-left: 0;
     list-style-type: none;
@@ -430,6 +485,11 @@
   .btn {
     min-width: 60px;
   }
+  .btn_default {
+    background-color: #a6a9ad;
+    border-color: #a6a9ad;
+    color: #fff;
+  }
   .btn_primary {
     background-color: #44b549;
     background-image: -moz-linear-gradient(top,#44b549 0,#44b549 100%);
@@ -474,7 +534,7 @@
   }
   button, [type="button"], [type="reset"], [type="submit"], input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
-    background-color: transparent;
+    /*background-color: transparent;*/
     border-width: 0;
     cursor: pointer;
   }