eoss-mobiles 0.2.38 → 0.2.40

package/lib/grid.js

@@ -199,14 +199,21 @@ function normalizeComponent(
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/grid/src/main.vue?vue&type=template&id=74623ee7&
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/grid/src/main.vue?vue&type=template&id=683d1686&
 var render = function () {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c(
     "div",
-    { staticClass: "em-grid" },
+    {
+      staticClass: "em-grid",
+      on: {
+        click: function ($event) {
+          _vm.showHide = false
+        },
+      },
+    },
     [
       _c(
         "van-grid",
@@ -220,7 +227,7 @@ var render = function () {
           _vm.$listeners
         ),
         [
-          _vm._l(_vm.$attrs.data, function (item, index) {
+          _vm._l(_vm.newData, function (item, index) {
             return _c(
               "van-grid-item",
               _vm._b(
@@ -229,8 +236,8 @@ var render = function () {
                     {
                       name: "show",
                       rawName: "v-show",
-                      value: _vm.$attrs.data && _vm.$attrs.data.length > 0,
-                      expression: "$attrs.data && $attrs.data.length > 0",
+                      value: _vm.newData && _vm.newData.length > 0,
+                      expression: "newData && newData.length > 0",
                     },
                   ],
                   key: index,
@@ -238,6 +245,7 @@ var render = function () {
                   style: "width:" + 100 / _vm.columnNum + "%;",
                   on: {
                     click: function ($event) {
+                      $event.stopPropagation()
                       _vm.goView($event, item)
                     },
                   },
@@ -245,13 +253,184 @@ var render = function () {
                 "van-grid-item",
                 item,
                 false
-              )
+              ),
+              [
+                _c(
+                  "i",
+                  {
+                    staticClass: "van-icon  van-grid-item__icon",
+                    class:
+                      item.icon.startsWith("http") &&
+                      item.icon.indexOf("/") != -1
+                        ? ""
+                        : "van-icon-" + item.icon,
+                    style: { size: item.iconSize ? item.iconSize : "" },
+                  },
+                  [
+                    item.icon.startsWith("http") || item.icon.indexOf("/") != -1
+                      ? _c("img", {
+                          staticClass: "van-icon__image",
+                          style: {
+                            width: item.iconSize ? item.iconSize : "",
+                            height: item.iconSize ? item.iconSize : "",
+                          },
+                          attrs: { src: item.icon },
+                        })
+                      : _vm._e(),
+                    _c("div", {
+                      directives: [
+                        {
+                          name: "show",
+                          rawName: "v-show",
+                          value: item.dot,
+                          expression: "item.dot",
+                        },
+                      ],
+                      staticClass: "van-info van-info--dot",
+                      style: { background: item.dotColor || "" },
+                    }),
+                    _c(
+                      "div",
+                      {
+                        directives: [
+                          {
+                            name: "show",
+                            rawName: "v-show",
+                            value: item.badge,
+                            expression: "item.badge",
+                          },
+                        ],
+                        staticClass: "van-info",
+                        style: { background: _vm.badgeColor || "" },
+                      },
+                      [
+                        _vm._v(
+                          "\n          " +
+                            _vm._s(
+                              _vm.maxBadge &&
+                                !isNaN(item.badge) &&
+                                Number(_vm.maxBadge) < Number(item.badge)
+                                ? _vm.maxBadge + "+"
+                                : item.badge
+                            ) +
+                            "\n        "
+                        ),
+                      ]
+                    ),
+                  ]
+                ),
+                _c("span", { staticClass: "van-grid-item__text" }, [
+                  _vm._v(_vm._s(item.text)),
+                ]),
+                _vm.showHide && item.menuType != "add"
+                  ? _c("van-icon", {
+                      staticClass: "em-grid-del",
+                      attrs: { name: "clear", size: "20px" },
+                      on: {
+                        click: function ($event) {
+                          $event.stopPropagation()
+                          _vm.handleHide(item)
+                        },
+                      },
+                    })
+                  : _vm._e(),
+                item.showMenu
+                  ? _c(
+                      "div",
+                      { staticClass: "em-grid-select-box" },
+                      [
+                        _c("van-icon", {
+                          attrs: {
+                            size: "30px",
+                            color: "#fff",
+                            name: "success",
+                          },
+                        }),
+                      ],
+                      1
+                    )
+                  : _vm._e(),
+              ],
+              1
             )
           }),
           _vm._t("default"),
         ],
         2
       ),
+      _vm.show
+        ? _c(
+            "em-popup",
+            {
+              staticStyle: { width: "80%", height: "50%" },
+              model: {
+                value: _vm.show,
+                callback: function ($$v) {
+                  _vm.show = $$v
+                },
+                expression: "show",
+              },
+            },
+            [
+              _c(
+                "div",
+                { staticClass: "em-grid-popup" },
+                [
+                  _c("p", { staticClass: "em-grid-popup-label" }, [
+                    _vm._v("添加菜单"),
+                  ]),
+                  _c(
+                    "em-grid",
+                    _vm._b(
+                      {
+                        staticClass: "em-grid-popup-content",
+                        attrs: {
+                          data: _vm.hideMenuList,
+                          border: false,
+                          "column-num": _vm.$attrs.columnNum,
+                        },
+                        on: { click: _vm.selectMenu },
+                      },
+                      "em-grid",
+                      _vm.$attrs,
+                      false
+                    )
+                  ),
+                  _c(
+                    "div",
+                    { staticClass: "em-grid-popup-button" },
+                    [
+                      _c(
+                        "em-button",
+                        {
+                          staticStyle: { width: "49%" },
+                          attrs: { round: "" },
+                          on: {
+                            click: function ($event) {
+                              _vm.show = false
+                            },
+                          },
+                        },
+                        [_vm._v("取消")]
+                      ),
+                      _c(
+                        "em-button",
+                        {
+                          staticStyle: { width: "49%" },
+                          attrs: { round: "", type: "primary" },
+                          on: { click: _vm.handleShowMenu },
+                        },
+                        [_vm._v("确认")]
+                      ),
+                    ],
+                    1
+                  ),
+                ],
+                1
+              ),
+            ]
+          )
+        : _vm._e(),
     ],
     1
   )
@@ -260,7 +439,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/grid/src/main.vue?vue&type=template&id=74623ee7&
+// CONCATENATED MODULE: ./packages/grid/src/main.vue?vue&type=template&id=683d1686&
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/grid/src/main.vue?vue&type=script&lang=js&
 //
@@ -280,11 +459,91 @@ render._withStripped = true
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 /* harmony default export */ var mainvue_type_script_lang_js_ = ({
   name: 'EmGrid',
   inheritAttrs: false,
   props: {
+    data: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
     columnNum: {
       type: [Number, String],
       default: 4
@@ -296,12 +555,187 @@ render._withStripped = true
     targetStop: {
       type: Boolean,
       default: true
+    },
+    badgeColor: {
+      type: String,
+      default: ''
+    },
+    maxBadge: {
+      type: String,
+      default: ''
+    },
+    isHideMenu: {
+      type: Boolean,
+      default: false
+    },
+    hideMenuKey: {
+      type: String,
+      default: 'id'
+    },
+    hideMenu: {
+      type: [String, Array],
+      default: function _default() {
+        return [];
+      }
+    },
+    addMenuIcon: {
+      type: String,
+      default: 'plus'
+    },
+    addMenuIconSize: {
+      type: String,
+      default: ''
+    }
+  },
+  data: function data() {
+    return {
+      lastTapTime: 0,
+      timer: null,
+      showHide: false,
+      newData: [],
+      show: false,
+      selectMenuArr: [],
+      hideMenuList: []
+    };
+  },
+
+  watch: {
+    hideMenu: {
+      handler: function handler(val) {
+        this.defaultHide(val);
+      },
+
+      deep: true,
+      immediate: true
+    },
+    data: {
+      handler: function handler(val) {
+        this.newData = JSON.parse(JSON.stringify(val));
+        this.defaultHide(this.hideMenu);
+      },
+
+      deep: true,
+      immediate: true
     }
   },
   methods: {
+    hideDelIcon: function hideDelIcon() {
+      this.showHide = false;
+    },
+    handleShowMenu: function handleShowMenu() {
+      var _this = this;
+
+      var str = this.selectMenuArr.join(',');
+      if (Array.isArray(this.hideMenu)) {
+        var hideArr = this.hideMenuList.filter(function (x) {
+          return str.indexOf(x[_this.hideMenuKey]) == -1;
+        });
+        this.$emit('hide', hideArr);
+      } else {
+        var hide = this.hideMenuList.filter(function (x) {
+          return str.indexOf(x[_this.hideMenuKey]) == -1;
+        });
+        hide = hide.map(function (x) {
+          return x[_this.hideMenuKey];
+        });
+        this.$emit('hide', hide.join(','));
+      }
+      this.selectMenuArr = [];
+      this.show = false;
+    },
+    selectMenu: function selectMenu(val) {
+      var _this2 = this;
+
+      if (val.showMenu) {
+        this.selectMenuArr = this.selectMenuArr.filter(function (x) {
+          return x != val[_this2.hideMenuKey];
+        });
+      } else {
+        this.selectMenuArr.push(val[this.hideMenuKey]);
+      }
+      this.$set(val, 'showMenu', !val.showMenu);
+    },
+    defaultHide: function defaultHide(val) {
+      var _this3 = this;
+
+      if (this.isHideMenu && val != undefined) {
+        if (Array.isArray(val)) {
+          var menuKey = val.map(function (x) {
+            return x.id;
+          }).join(',');
+          this.newData = this.data.filter(function (x) {
+            return menuKey.indexOf(x[_this3.hideMenuKey]) == -1;
+          });
+          this.hideMenuList = this.data.filter(function (x) {
+            return menuKey.indexOf(x[_this3.hideMenuKey]) != -1;
+          });
+        } else {
+          val = val + '';
+          this.newData = this.data.filter(function (x) {
+            return val.indexOf(x[_this3.hideMenuKey]) == -1;
+          });
+          this.hideMenuList = this.data.filter(function (x) {
+            return val.indexOf(x[_this3.hideMenuKey]) != -1;
+          });
+        }
+      }
+      if (this.isHideMenu != undefined && (this.newData.length > 0 && this.newData[this.newData.length - 1].menuType === 'add' ? this.newData.length - 1 < this.data.length : this.newData.length < this.data.length)) {
+        this.newData.push({
+          icon: this.addMenuIcon || 'plus',
+          iconSize: this.addMenuIconSize,
+          menuType: 'add'
+        });
+      }
+    },
+    handleHide: function handleHide(item) {
+      var _this4 = this;
+
+      this.$dialog.confirm({
+        message: '\u786E\u5B9A\u8981\u9690\u85CF<span style="color:red;font-weight:bold;margin:0px 5px">' + item.text + '</span>\u83DC\u5355\u5417\uFF1F'
+      }).then(function () {
+        if (Array.isArray(_this4.hideMenu)) {
+          var hideArr = [].concat(_this4.hideMenu, [item]);
+          _this4.$emit('hide', hideArr);
+        } else {
+          var hideStr = _this4.hideMenu ? _this4.hideMenu + ',' + item[_this4.hideMenuKey] : item[_this4.hideMenuKey];
+          _this4.$emit('hide', hideStr);
+        }
+      });
+    },
     goView: function goView(event, val) {
-      this.$emit('click', val);
-      this.targetStop && event.stopPropagation();
+      var _this5 = this;
+
+      if (val.menuType === 'add') {
+        this.show = true;
+        return;
+      }
+      var currentTime = new Date().getTime();
+      var tapLength = currentTime - this.lastTapTime;
+      this.lastTapTime = currentTime;
+      if (this.isHideMenu) {
+        if (tapLength < 500) {
+          this.handleDoubleClick(val);
+          clearTimeout(this.timer);
+          return;
+        }
+        if (this.showHide) {
+          this.showHide = false;
+          return;
+        }
+        this.timer = setTimeout(function () {
+          _this5.$emit('click', val, event);
+          _this5.targetStop && event.stopPropagation();
+        }, 500);
+      } else {
+        this.$emit('click', val, event);
+        this.targetStop && event.stopPropagation();
+      }
+    },
+    handleDoubleClick: function handleDoubleClick(val) {
+      if (this.isHideMenu) {
+        this.showHide = true;
+      }
+      this.$emit('dbclick', val);
     }
   }
 });