eoss-ui 0.5.81-beta2 → 0.5.81-beta20

package/packages/main/src/simplicity/sub-menu.vue

@@ -1,31 +1,97 @@
 <template>
-  <div class="es-simplicity-menus">
-    <div class="es-simplicity-menus-box">
-      <div class="es-simplicity-menus-title">{{ text }}</div>
-      <menu-list
-        ref="menus"
-        :data="menus"
-        :menuIcon="menuIcon"
-        :color="color"
-        :backgroundColor="backgroundColor"
-        @command="handleCommand"
-      ></menu-list>
-    </div>
+  <el-drawer
+    class="es-simplicity-subMenus"
+    direction="ltr"
+    modal-class="es-simplicity-apps-modal"
+    size="auto"
+    :modal-append-to-body="false"
+    :close-on-press-escape="false"
+    :modal="false"
+    :with-header="false"
+    :wrapperClosable="false"
+    :visible.sync="show"
+  >
     <div
-      class="es-simplicity-menus-box"
-      v-if="subMenus.length"
-      v-for="(item, index) in subMenus"
-      :key="item.id"
+      class="es-simplicity-menus"
+      :class="{ 'es-simplicity-menus-plus': mode == 'plus' }"
     >
-      <div class="es-simplicity-menus-title">{{ item.text || item.name }}</div>
-      <menu-list
-        :index="index"
-        :data="item.data"
-        :menuIcon="menuIcon"
-        @command="handleCommand"
-      ></menu-list>
+      <div class="es-simplicity-menus-box" :style="{ width: width + 'px' }">
+        <div class="es-simplicity-menus-title">
+          <span class="es-simplicity-menus-title-text" v-if="!fold">{{
+            title || text
+          }}</span>
+          <i
+            class="es-icon-shouqicaidan es-simplicity-menus-title-icon"
+            v-show="!fold"
+            @click="handleFold(true)"
+          ></i>
+          <i
+            class="es-icon-shouqicaidan-right es-simplicity-menus-title-icon"
+            v-show="fold"
+            @click="handleFold(false)"
+          ></i>
+        </div>
+        <menu-list
+          :active="actives[0]"
+          :data="menus"
+          :menuIcon="menuIcon"
+          :color="color"
+          :backgroundColor="backgroundColor"
+          :fold="fold"
+          :width="size"
+          @menter="
+            (res) => {
+              this.getData(res, 0, true);
+            }
+          "
+          @mleave="
+            (res) => {
+              this.getData(res, 0, false);
+            }
+          "
+          @hover="handleHover"
+          @command="handleCommand"
+        ></menu-list>
+      </div>
+      <div
+        class="es-simplicity-menus-view"
+        @mouseleave="handleLeave"
+        @mouseenter="handleEnter"
+        v-show="subMenus.length"
+      >
+        <div
+          class="es-simplicity-menus-box"
+          v-for="(item, index) in subMenus"
+          :key="item.id"
+        >
+          <div class="es-simplicity-menus-title">
+            <span class="es-simplicity-menus-title-text">{{
+              item.name || item.text || item.title
+            }}</span>
+          </div>
+          <menu-list
+            :active="actives[index + 1]"
+            :data="[...item.children, ...item.fourthTabs]"
+            :menuIcon="menuIcon"
+            :color="color"
+            :backgroundColor="backgroundColor"
+            :width="size"
+            @menter="
+              (res) => {
+                getData(res, index + 1, true);
+              }
+            "
+            @mleave="
+              (res) => {
+                getData(res, index + 1, false);
+              }
+            "
+            @command="handleCommand"
+          ></menu-list>
+        </div>
+      </div>
     </div>
-  </div>
+  </el-drawer>
 </template>
 
 <script>
@@ -34,6 +100,10 @@ export default {
   name: 'SubMenu',
   components: { MenuList },
   props: {
+    mode: String,
+    title: String,
+    active: String,
+    closed: Boolean,
     color: {
       type: [String, Array],
       default: '#fff'
@@ -51,6 +121,11 @@ export default {
         ];
       }
     },
+    size: {
+      type: Number,
+      default: 220
+    },
+    visible: Boolean,
     text: String,
     menuIcon: String,
     children: {
@@ -68,56 +143,96 @@ export default {
   },
   data() {
     return {
-      active: '',
-      subMenus: []
+      fold: this.closed,
+      width: this.size,
+      subMenus: [],
+      isEnter: false,
+      timer: null,
+      actives: []
     };
   },
   computed: {
     menus() {
       return [...this.children, ...this.fourthTabs];
+    },
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+        return val;
+      }
+    }
+  },
+  watch: {
+    closed(val) {
+      this.fold = val;
+      if (val) {
+        this.width = 48;
+      } else {
+        this.width = this.size;
+      }
     }
   },
-  watch: {},
   created() {},
   mounted() {},
   methods: {
-    handleCommand(res, num) {
-      if (res.url) {
-        if (res.urlopenmode == 1) {
-          util.win.open(res.url);
-        } else if (res.urlopenmode == 2) {
-          util.win.location.href = res.url;
-        } else {
-          this.$emit('command', res);
-        }
-      } else if (this.active !== res.id) {
-        this.active = res.id;
-        this.subMenus = [];
+    handleFold(res) {
+      this.fold = res;
+      if (res) {
+        this.width = 48;
+      } else {
+        this.width = this.size;
       }
-      let data = [...(res.children || []), ...(res.fourthTabs || [])];
-      if (data.length) {
-        if (num === undefined) {
-          this.subMenus = [{ ...res, data: data }];
+      this.$emit('update:closed', res);
+    },
+    handleCommand(res) {
+      this.$emit('command', res);
+    },
+    getData(res, n, is) {
+      this.isEnter = is;
+      if (is) {
+        this.actives.splice(n);
+        if (this.actives[n]) {
+          this.actives[n] = res.id;
         } else {
-          this.subMenus.push({ ...res, data: data });
+          this.actives.push(res.id);
+        }
+        this.subMenus.splice(n);
+        let { children, fourthTabs } = res;
+        if (
+          (children && children.length) ||
+          (fourthTabs && fourthTabs.length)
+        ) {
+          this.subMenus = this.subMenus.concat(res);
         }
-        this.$emit(
-          'command',
-          num === undefined ? 2 : 2 + parseInt(num, 10) + 1
-        );
       } else {
-        if (num === undefined) {
-          this.$emit('command', 1);
-          this.subMenus = [];
-        } else {
-          this.subMenus.splice(parseInt(num, 10) + 1, 1);
-          this.$emit('command', 2 + parseInt(num, 10));
+        if (n == 0) {
+          clearTimeout(this.timer);
+          this.timer = setTimeout(() => {
+            if (res && !this.isEnter) {
+              this.subMenus = [];
+              this.actives = [];
+            }
+          }, 300);
         }
       }
     },
+    handleHover(res) {
+      this.isEnter = res;
+      //if(this)
+    },
     clearSubmenu() {
       this.$refs.menus.clearActive();
       this.subMenus = [];
+    },
+    handleLeave() {
+      this.subMenus = [];
+      this.actives = [];
+    },
+    handleEnter() {
+      this.isEnter = true;
     }
   }
 };

package/packages/main/src/simplicity/user.vue

@@ -42,7 +42,11 @@
     </div>
     <div class="es-simplicity-notice-type" v-if="userScanBindImgUrl">
       <div class="es-simplicity-notice-title">微信公众号：</div>
-      <img class="es-simplicity-qrcode" @click="getQrcode" :src="qrcode" />
+      <el-image
+        class="es-simplicity-qrcode"
+        @click="getQrcode"
+        :src="qrcode"
+      ></el-image>
     </div>
     <div class="es-simplicity-notice-type">
       <div class="es-simplicity-notice-title">接收消息类型：</div>
@@ -58,15 +62,15 @@
       修改密码 <i class="es-icon-arrow-right"></i>
     </div>
     <es-dialog title="修改密码" :visible.sync="visible">
-      <userinfo v-if="visible" :contents="contents" :value="userInfo">
-      </userinfo>
+      <user-info v-if="visible" :contents="contents" :value="userInfo">
+      </user-info>
     </es-dialog>
   </div>
 </template>
 
 <script>
 import avatar from './avatar.vue';
-import userinfo from './userinfo.vue';
+import userInfo from './userinfo.vue';
 import util from 'eoss-ui/src/utils/util';
 import { debounce } from 'throttle-debounce';
 import {
@@ -76,7 +80,7 @@ import {
 } from 'eoss-ui/src/config/api.js';
 export default {
   name: 'User',
-  components: { avatar, userinfo },
+  components: { avatar, userInfo },
   props: {
     notify: String,
     notifyList: Array,
@@ -133,6 +137,7 @@ export default {
             this.checkPassword = results.checkPassword;
             this.checkPasswordMsg = results.checkPasswordMsg;
             this.headImgCode = results.headImgCode || undefined;
+            this.$emit('success', results);
           } else {
             let msg = res.msg || '系统错误，请联系管理员！';
             this.$message.error(msg);

package/packages/main/src/simplicity/userinfo.vue

@@ -16,6 +16,7 @@ import { updateUserInfo } from 'eoss-ui/src/config/api.js';
 import util from 'eoss-ui/src/utils/util';
 
 export default {
+  name: 'UserInfo',
   props: {
     showNotify: {
       type: Boolean,

package/packages/menu/src/main.vue

@@ -109,9 +109,10 @@ export default {
       } else {
         this.$nextTick(() => {
           let w = 0;
-          Array.from(this.$refs.menu.$el.children).forEach((item) => {
-            w += item.getBoundingClientRect().width;
-          });
+          this.$refs.menu &&
+            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) {

package/packages/pagination/src/main.vue

@@ -1,6 +1,7 @@
 <template>
   <el-pagination
     class="es-pagination"
+    :class="{ 'es-pagination-complete': isComplete && position != 'center' }"
     v-bind="$attrs"
     :current-page="pageNum"
     :page-size="pageSize"
@@ -18,10 +19,28 @@
   </el-pagination>
 </template>
 <script>
+import util from 'eoss-ui/src/utils/util';
+const paginationLayout =
+  util.win.top.tableLayout ||
+  util.win.tableLayout ||
+  'prev, pager, next, sizes, total';
 export default {
   name: 'EsPagination',
   inheritAttrs: false,
+  computed: {
+    isComplete() {
+      return (
+        this.layout.indexOf('total') > -1 &&
+        this.layout.indexOf('sizes') > -1 &&
+        this.layout.indexOf('prev') > -1 &&
+        this.layout.indexOf('pager') > -1 &&
+        this.layout.indexOf('next') > -1 &&
+        this.layout.indexOf('jumper') > -1
+      );
+    }
+  },
   props: {
+    position: String,
     // 当前页码
     pageNum: {
       type: Number,
@@ -46,7 +65,7 @@ export default {
     // 自定义排版
     layout: {
       type: String,
-      default: 'prev, pager, next, sizes, total'
+      default: paginationLayout
     },
     // 只有一页时是否隐藏
     hideOnSinglePage: {

package/packages/select/src/main.vue

@@ -498,7 +498,10 @@ export default {
             }
           }
         } else {
-          if (typeof data === 'string' || !data.length) {
+          if (
+            typeof data === 'string' ||
+            (!data.length && !this.sysCode && !this.url)
+          ) {
             return value;
           }
           if (Array.isArray(data) && data.length) {