mcrm-mobile 2.0.0 → 2.0.1

package/lib/menus/index.js

@@ -9,6 +9,8 @@ var _create = _interopRequireDefault(require("../utils/create"));
 
 var _mcrmJsapi = _interopRequireDefault(require("mcrm-jsapi"));
 
+var _vuedraggable = _interopRequireDefault(require("vuedraggable"));
+
 var _session = _interopRequireDefault(require("../session"));
 
 var _menuIcon = _interopRequireDefault(require("../menu-icon"));
@@ -29,9 +31,78 @@ var _default = (0, _create.default)({
 
     return _c('div', {
       class: _vm.b()
-    }, [_c('div', {
+    }, [!_vm.draggable ? _c('div', {
       class: _vm.b('multiple')
-    }, [_vm._l(_vm.menus, function (menu) {
+    }, [_vm._l(_vm.sortedMenus, function (menu) {
+      return _c('Menu', {
+        key: menu[_vm.menuKey],
+        class: [_vm.b('multiple-cell')],
+        style: _vm.style,
+        attrs: {
+          "gray": _vm.gray || menu.gray,
+          "syb-info": _vm.sybInfo,
+          "menu": menu,
+          "disabled": _vm.disabled,
+          "disabled-text": _vm.disabledText,
+          "custom-event": _vm.isCustomEvent(menu.menuPageCode),
+          "is-route": _vm.routeList.includes(menu.menuPageCode),
+          "hide-header": _vm.hideHeaderList.includes(menu.menuPageCode)
+        },
+        on: {
+          "click": _vm.onClick,
+          "close": _vm.onClose,
+          "success": _vm.onSuccess,
+          "fail": _vm.onFail
+        }
+      }, [_vm._t("menu", function () {
+        return [_c('div', {
+          class: _vm.b('multiple-cell--div')
+        }, [_c('MenuIcon', {
+          class: _vm.b('multiple-cell-icon'),
+          attrs: {
+            "dot": menu.dot,
+            "badge": _vm.badgeText(_vm.showHot, menu),
+            "name": menu.iconUrl,
+            "text": menu.menuName,
+            "system": menu.system
+          }
+        }, [_vm._t("extra-icon", null, {
+          "slot": "extra-icon",
+          "menu": menu
+        })], 2), _c('span', {
+          class: _vm.b('multiple-cell-content')
+        }, [_vm._t("assist", null, {
+          "menu": menu
+        })], 2)], 1)];
+      }, {
+        "menu": menu
+      })], 2);
+    }), _vm._t("more", function () {
+      return [_vm.showMore ? _c('div', {
+        class: [_vm.b('multiple-cell'), _vm.b('multiple-cell--more')],
+        style: _vm.style,
+        on: {
+          "click": _vm.onMore
+        }
+      }, [_c('MenuIcon', {
+        class: _vm.b('multiple-cell-icon'),
+        attrs: {
+          "name": "mcrm-icon-more.svg",
+          "text": "更多业务"
+        }
+      })], 1) : _vm._e()];
+    })], 2) : _c('mm-draggable', {
+      class: _vm.b('multiple'),
+      attrs: {
+        "value": _vm.sortedMenus,
+        "tag": "div",
+        "animation": 150,
+        "move": _vm.onMove
+      },
+      on: {
+        "input": _vm.onSortChange
+      }
+    }, [_vm._l(_vm.sortedMenus, function (menu) {
       return _c('Menu', {
         key: menu[_vm.menuKey],
         class: [_vm.b('multiple-cell')],
@@ -77,7 +148,7 @@ var _default = (0, _create.default)({
       })], 2);
     }), _vm._t("more", function () {
       return [_vm.showMore ? _c('div', {
-        class: _vm.b('multiple-cell'),
+        class: [_vm.b('multiple-cell'), _vm.b('multiple-cell--more')],
         style: _vm.style,
         on: {
           "click": _vm.onMore
@@ -89,14 +160,29 @@ var _default = (0, _create.default)({
           "text": "更多业务"
         }
       })], 1) : _vm._e()];
-    })], 2)]);
+    })], 2)], 1);
   },
   components: {
     MenuIcon: _menuIcon.default,
-    Menu: _menu.default
+    Menu: _menu.default,
+    mmDraggable: _vuedraggable.default
   },
   name: "menus",
   mixins: [_menus.default],
+  data: function data() {
+    return {
+      // 本地维护顺序副本，避免直接修改 props.menus
+      sortedMenus: Array.isArray(this.menus) ? this.menus.slice() : []
+    };
+  },
+  watch: {
+    // 外部 menus 引用变化时同步本地副本
+    menus: {
+      handler: function handler(val) {
+        this.sortedMenus = Array.isArray(val) ? val.slice() : [];
+      }
+    }
+  },
   methods: {
     isCustomEvent: function isCustomEvent(pageCode) {
       var customEvent = this.customEvent,
@@ -123,6 +209,25 @@ var _default = (0, _create.default)({
     onFail: function onFail(data) {
       this.$emit("fail", data);
     },
+    onSortChange: function onSortChange(newMenus) {
+      // 更新本地副本
+      this.sortedMenus = newMenus; // 拖拽完成后抛出最新顺序
+
+      this.$emit("change", newMenus);
+    },
+    // 阻止将菜单拖到「更多业务」cell 附近，保持更多业务位置固定
+    // 同时阻止「更多业务」被拖拽
+    onMove: function onMove(evt) {
+      var dragged = evt && evt.dragged;
+      var related = evt && evt.related;
+      var moreClass = this.b("multiple-cell--more");
+
+      if (dragged && dragged.classList && dragged.classList.contains(moreClass) || related && related.classList && related.classList.contains(moreClass)) {
+        return false;
+      }
+
+      return true;
+    },
     // 菜单头标处理
     badgeText: function badgeText(show, menu) {
       if (show) {

package/lib/mixins/menus.js

@@ -66,6 +66,11 @@ var _default2 = {
       default: function _default() {
         return [];
       }
+    },
+    // 是否启用拖拽排序
+    draggable: {
+      type: Boolean,
+      default: false
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcrm-mobile",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "生意宝专用组件库",
   "author": "Wuner",
   "private": false,