eoss-ui 0.5.68 → 0.5.70

package/packages/menu/src/main.vue

@@ -1,4 +1,5 @@
 <script>
+import { debounce } from 'throttle-debounce';
 export default {
   name: 'EsMenu',
   inheritAttrs: false,
@@ -38,6 +39,15 @@ export default {
     paddingLeft: {
       type: Number,
       default: 14
+    },
+    menuIcon: {
+      type: String,
+      default: 'es-icon-application'
+    },
+    icons: Object,
+    subIcon: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
@@ -45,37 +55,18 @@ export default {
       return this.height === undefined ? this.maxH : this.height;
     },
     maxWidth() {
-      if (this.mode === 'vertical') {
-        return this.width;
-      }
       return this.maxW;
     }
   },
   watch: {
     data: {
-      immediate: true,
       deep: true,
       handler() {
-        if (this.mode === 'vertical') {
-          this.$nextTick(() => {
-            this.maxH =
-              this.$refs.esMenu.$el.getBoundingClientRect().height + 'px';
-          });
-        } else {
-          this.$nextTick(() => {
-            let w = 0;
-            Array.from(this.$refs.menu.$el.children).forEach((item) => {
-              w += item.getBoundingClientRect().width;
-            });
-            const styles = window.getComputedStyle(this.$refs.menu.$el);
-            w +=
-              parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
-            if (w > this.$refs.esMenu.$el.getBoundingClientRect().width) {
-              this.maxW = w + 'px';
-            }
-          });
-        }
+        this.getMaxWidth();
       }
+    },
+    width() {
+      this.getMaxWidth();
     }
   },
   data() {
@@ -87,8 +78,45 @@ export default {
       isChange: false
     };
   },
-  mounted() {},
+  beforeCreate() {
+    this.getMaxWidth = debounce(300, () => {
+      this.getWidth();
+    });
+  },
+  created() {},
+  mounted() {
+    this.getMaxWidth();
+  },
   methods: {
+    getWidth() {
+      if (this.mode === 'vertical') {
+        this.$nextTick(() => {
+          this.maxH =
+            this.$refs.esMenu.$el.getBoundingClientRect().height + 'px';
+          const styles = window.getComputedStyle(
+            this.$refs.menu.$el.parentNode
+          );
+          this.maxW = this.width
+            ? parseInt(this.width, 10) -
+              parseInt(styles.marginLeft, 10) -
+              parseInt(styles.marginRight, 10) +
+              'px'
+            : '';
+        });
+      } else {
+        this.$nextTick(() => {
+          let w = 0;
+          Array.from(this.$refs.menu.$el.children).forEach((item) => {
+            w += item.getBoundingClientRect().width;
+          });
+          const styles = window.getComputedStyle(this.$refs.menu.$el);
+          w += parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
+          if (w > this.$refs.esMenu.$el.getBoundingClientRect().width) {
+            this.maxW = w + 'px';
+          }
+        });
+      }
+    },
     handleReady() {
       if (this.mode === 'horizontal') {
         this.$refs.esMenu.wrap.onmouseover = (e) => {
@@ -221,7 +249,7 @@ export default {
         mode: this.mode
       });
     },
-    getSub(item, h, popper, fourthTabs) {
+    getSub(item, h, popper, fourthTabs, subIcon) {
       if (popper) {
         popper +=
           this.popperClass !== undefined
@@ -233,21 +261,18 @@ export default {
             ? this.popperClass
             : ` es-menu-popper-${this.mode}`;
       }
-      const title = [
-        h('i', {
-          class: [
-            item.icons
-              ? this.unicode(item.icons)
-                ? item.icons
-                : 'es-icon iconfont'
-              : 'es-icon-application',
-            'es-menu-item-icon'
-          ],
-          domProps:
-            item.icons === '' || this.unicode(item.icons)
-              ? {}
-              : { innerHTML: item.icons }
-        }),
+      let title = [];
+      if (subIcon) {
+        title.push(
+          h('es-icon', {
+            props: {
+              contents: item.icons || this.menuIcon
+            },
+            class: ['es-menu-item-icon']
+          })
+        );
+      }
+      title.push(
         h(
           'div',
           {
@@ -284,7 +309,7 @@ export default {
             )
           ]
         )
-      ];
+      );
       let doms = [
         h('template', { slot: 'title' }, this.titleIcons ? title : [title[1]])
       ];
@@ -299,7 +324,7 @@ export default {
             if (!ele) {
               console.error(`对象子数据中第[${index}]条数据错误`, item);
             } else {
-              return this.getSub(ele, h, popper);
+              return this.getSub(ele, h, popper, false, this.subIcon);
             }
           })
         );
@@ -337,7 +362,7 @@ export default {
             if (!ele) {
               console.error(`对象子数据中第[${index}]条数据错误`, item);
             } else {
-              return this.getSub(ele, h, popper, true);
+              return this.getSub(ele, h, popper, true, this.subIcon);
             }
           })
         );
@@ -386,13 +411,6 @@ export default {
           )
         ];
       }
-    },
-    unicode(res) {
-      if (!res) {
-        return false;
-      }
-      var reg = new RegExp(/^es-\S+/, 'g');
-      return res.match(reg) ? res.match(reg).length : 0;
     }
   },
   render(h) {
@@ -403,22 +421,14 @@ export default {
         item.children.length &&
         (!item.extendData || item.extendData.businessStatus != 0)
       ) {
-        doms = doms.concat(this.getSub(item, h, 'es-sub-menu'));
+        doms = doms.concat(this.getSub(item, h, 'es-sub-menu', false, true));
       } else {
         const title = [
-          h('i', {
-            class: [
-              item.icons
-                ? this.unicode(item.icons)
-                  ? item.icons
-                  : 'es-icon iconfont'
-                : 'es-icon-application',
-              'es-menu-item-icon'
-            ],
-            domProps:
-              item.icons === '' || this.unicode(item.icons)
-                ? {}
-                : { innerHTML: item.icons }
+          h('es-icon', {
+            props: {
+              contents: item.icons || this.menuIcon
+            },
+            class: ['es-menu-item-icon']
           }),
           h(
             'div',
@@ -501,7 +511,8 @@ export default {
               defaultActive: this.defaultActive,
               collapse: this.collapse,
               mode: this.mode,
-              uniqueOpened: this.uniqueOpened
+              uniqueOpened: this.uniqueOpened,
+              icons: this.icons
             },
             style: { width: this.maxWidth },
             attrs: { ...this.$attrs },

package/packages/nav/src/main.vue

@@ -14,11 +14,15 @@
         :deep="false"
         :default-active="subActive"
         :biserial="biserial"
+        :menu-icons="menuIcon"
+        :icons="icons"
+        :sub-icon="subIcon"
         @select="handleTrigger"
       ></es-menu>
     </div>
     <div
       class="es-nav-main"
+      :biserial="biserial"
       :style="{ width: biserial ? width : boxWidth }"
       v-show="biserial ? subMenu.length : menu.length"
     >
@@ -47,6 +51,10 @@
         :style="{ height: menuHeight }"
         :is-default="isDefault"
         :biserial="biserial"
+        :paddingLeft="paddingLeft"
+        :menu-icon="menuIcon"
+        :icons="icons"
+        :sub-icon="subIcon"
         @select="handleSelect"
         @open="handleOpen"
         @close="handleClose"
@@ -73,6 +81,10 @@ export default {
       type: String,
       default: '200px'
     },
+    navWidth: {
+      type: String,
+      default: '70px'
+    },
     showCollapse: {
       type: Boolean,
       default: true
@@ -84,7 +96,14 @@ export default {
     //是否双列导航
     biserial: Boolean,
     defaultActive: [String, Array],
-    isDefault: Boolean
+    isDefault: Boolean,
+    paddingLeft: Number,
+    menuIcon: String,
+    icons: Object,
+    subIcon: {
+      type: Boolean,
+      default: true
+    }
   },
   computed: {
     menu() {
@@ -119,12 +138,12 @@ export default {
         if (this.isShow) {
           return this.width;
         } else {
-          return '70px';
+          return this.navWidth;
         }
       }
       return this.subMenu && this.subMenu.length && this.isShow
-        ? parseInt(this.width, 10) + 70 + 'px'
-        : '70px';
+        ? parseInt(this.width, 10) + parseInt(this.navWidth, 10) + 'px'
+        : this.navWidth;
     }
   },
   watch: {

package/packages/radio-group/src/main.vue

@@ -56,6 +56,7 @@
 
 <script>
 import { findSysCode, getDictList } from 'eoss-ui/src/config/api.js';
+import { debounce } from 'throttle-debounce';
 import store from 'eoss-ui/src/utils/store';
 import util from 'eoss-ui/src/utils/util';
 import bus from 'eoss-ui/src/utils/bus';
@@ -228,12 +229,17 @@ export default {
       }
     }
   },
+  beforeCreate() {
+    this.getData = debounce(300, (url, sysCode) => {
+      this.getDatas(url, sysCode);
+    });
+  },
   created() {
     this.bindEventBus();
   },
   mounted() {},
   methods: {
-    getData(url, sysCode) {
+    getDatas(url, sysCode) {
       let params = {};
       if (this.results.length === 0) {
         params = util.extend(

package/packages/select/src/main.vue

@@ -1,5 +1,6 @@
 <script>
 import { findSysCode, getDictList } from 'eoss-ui/src/config/api.js';
+import { debounce } from 'throttle-debounce';
 import store from 'eoss-ui/src/utils/store';
 import util from 'eoss-ui/src/utils/util';
 import bus from 'eoss-ui/src/utils/bus';
@@ -231,6 +232,11 @@ export default {
       }
     }
   },
+  beforeCreate() {
+    this.getData = debounce(300, (sysCode, param, reload) => {
+      this.getDatas(sysCode, param, reload);
+    });
+  },
   created() {
     this.bindEventBus();
   },
@@ -327,7 +333,7 @@ export default {
       });
       return eles;
     },
-    getData(sysCode, param, reload) {
+    getDatas(sysCode, param, reload) {
       if (
         !reload &&
         (!this.ajax ||

package/packages/select-ganged/src/main.vue

@@ -1,5 +1,6 @@
 <script>
 import { findSysCode, getDictList } from 'eoss-ui/src/config/api.js';
+import { debounce } from 'throttle-debounce';
 import util from 'eoss-ui/src/utils/util';
 export default {
   name: 'EsSelectGanged',
@@ -233,12 +234,17 @@ export default {
       }
     }
   },
+  beforeCreate() {
+    this.getData = debounce(300, () => {
+      this.getDatas();
+    });
+  },
   created() {
     this.getData();
   },
   mounted() {},
   methods: {
-    getData() {
+    getDatas() {
       if (!this.integrality || !this.url) {
         return false;
       }

package/packages/selector-panel/src/main.vue

@@ -109,6 +109,7 @@ import {
   getSelectorOrgTree,
   getSelectorOrgDetail
 } from 'eoss-ui/src/config/api.js';
+import { debounce } from 'throttle-debounce';
 import util from 'eoss-ui/src/utils/util.js';
 export default {
   name: 'EsSelectorPanel',
@@ -601,12 +602,17 @@ export default {
       this.trees[this.activeName].value = val;
     }
   },
+  beforeCreate() {
+    this.ajaxActive = debounce(300, (active) => {
+      this.getAjaxActive(active);
+    });
+  },
   created() {},
   mounted() {
     this.ajaxActive(this.activeName);
   },
   methods: {
-    ajaxActive(active) {
+    getAjaxActive(active) {
       if (this.isShowTree) {
         if (
           (!this.trees[active].data ||

package/packages/steps/src/main.vue

@@ -66,6 +66,7 @@
 </template>
 <script>
 import util from 'eoss-ui/src/utils/util.js';
+import { debounce } from 'throttle-debounce';
 export default {
   name: 'EsSteps',
   inheritAttrs: false,
@@ -128,12 +129,17 @@ export default {
       }
     }
   },
+  beforeCreate() {
+    this.getData = debounce(300, () => {
+      this.getDatas();
+    });
+  },
   created() {
     this.getData();
   },
   mounted() {},
   methods: {
-    getData() {
+    getDatas() {
       if (this.url) {
         let param = this.param ? this.param : {};
         util
@@ -143,7 +149,7 @@ export default {
             data: param,
             params: param
           })
-          .then(res => {
+          .then((res) => {
             if (res.rCode === 0) {
               if (this.esForm) {
                 this.esForm.stepContent = JSON.parse(
@@ -154,7 +160,7 @@ export default {
               }
             }
           })
-          .catch(err => {
+          .catch((err) => {
             if (err.message && err.message !== 'canceled') {
               this.$message.error(err.message);
             }