eoss-ui 0.5.81-beta4 → 0.5.81-beta6

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

@@ -1,24 +1,93 @@
 <template>
-  <el-scrollbar>
-    <div
-      class="es-simplicity-menus-item"
-      v-for="(item, index) in data"
-      :key="item.id"
-      :class="{ 'is-active': active === item.id }"
-      @click="handleClick(item)"
-    >
-      <es-icon
-        class="es-simplicity_apps-icon"
-        :style="setStyle(index)"
-        :contents="item.icons || item.icon || menuIcon"
-      ></es-icon>
-      <div class="es-simplicity-menus-tips" v-if="item.tips">
-        {{ item.tips > 99 ? '99+' : item.tips }}
+  <el-scrollbar :class="{ 'is-fold': fold }" ref="scrollbar">
+    <template v-for="(item, index) in data">
+      <el-popover
+        v-if="
+          (item.children && item.children.length) ||
+          (item.fourthTabs, item.fourthTabs.length)
+        "
+        placement="right"
+        trigger="hover"
+        popper-class="es-simplicity-menus-sub"
+        :width="width"
+        :key="item.id"
+        @show="show = true"
+        @hide="show = false"
+      >
+        <menu-list
+          ref="menus"
+          :active="active"
+          :popover="show"
+          :data="[...(item.children || []), ...(item.fourthTabs || [])]"
+          :menuIcon="menuIcon"
+          :color="color"
+          :backgroundColor="backgroundColor"
+          :width="width"
+          @command="handleClick"
+        ></menu-list>
+        <div
+          slot="reference"
+          class="es-simplicity-menus-item"
+          :key="item.id"
+          :class="{ 'is-active': defaultActive === item.id, 'is-fold': fold }"
+          :title="fold ? item.text || item.name : ''"
+        >
+          <template v-if="fold">
+            <el-badge is-dot :hidden="!item.tips">
+              <es-icon
+                class="es-simplicity_apps-icon"
+                :style="setStyle(index)"
+                :contents="item.icons || item.icon || menuIcon"
+              ></es-icon>
+            </el-badge>
+          </template>
+          <template v-else>
+            <es-icon
+              class="es-simplicity_apps-icon"
+              :style="setStyle(index)"
+              :contents="item.icons || item.icon || menuIcon"
+            ></es-icon>
+            <div class="es-simplicity-menus-tips" v-if="item.tips">
+              {{ item.tips > 99 ? '99+' : item.tips }}
+            </div>
+          </template>
+          <div class="es-simplicity_apps-text" v-show="!fold">
+            {{ item.text || item.name }}
+          </div>
+        </div>
+      </el-popover>
+      <div
+        v-else
+        class="es-simplicity-menus-item"
+        :key="item.id"
+        :class="{ 'is-active': defaultActive === item.id, 'is-fold': fold }"
+        :title="fold ? item.text || item.name : ''"
+        @click="handleClick(item)"
+      >
+        <template v-if="fold">
+          <el-badge is-dot :hidden="!item.tips">
+            <es-icon
+              class="es-simplicity_apps-icon"
+              :style="setStyle(index)"
+              :contents="item.icons || item.icon || menuIcon"
+            ></es-icon>
+          </el-badge>
+        </template>
+        <template v-else>
+          <es-icon
+            class="es-simplicity_apps-icon"
+            :style="setStyle(index)"
+            :contents="item.icons || item.icon || menuIcon"
+          ></es-icon>
+          <div class="es-simplicity-menus-tips" v-if="item.tips">
+            {{ item.tips > 99 ? '99+' : item.tips }}
+          </div>
+        </template>
+        <div class="es-simplicity_apps-text" v-show="!fold">
+          {{ item.text || item.name }}
+        </div>
       </div>
-      <div class="es-simplicity_apps-text">
-        {{ item.text || item.name }}
-      </div>
-    </div>
+    </template>
   </el-scrollbar>
 </template>
 
@@ -27,19 +96,33 @@ export default {
   name: 'MenuList',
   components: {},
   props: {
-    index: [Number, String],
+    active: String,
     menuIcon: String,
     color: [String, Array],
     backgroundColor: [String, Array],
-    data: Array
+    data: Array,
+    fold: Boolean,
+    width: Number,
+    popover: Boolean
   },
   data() {
     return {
-      active: ''
+      defaultActive: this.active,
+      show: false,
+      height: document.body.offsetHeight - 44
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    popover() {
+      if (this.$el.offsetHeight > this.height) {
+        this.$el.style.height = this.height + 'px';
+        this.$refs.scrollbar.update();
+      } else {
+        this.$el.style.height = '';
+      }
+    }
+  },
   created() {},
   mounted() {},
   methods: {
@@ -64,15 +147,17 @@ export default {
       return obj;
     },
     handleClick(res) {
-      this.active = res.id;
-      this.$emit(
-        'command',
-        res,
-        this.index !== undefined ? this.index + 1 : this.index
-      );
-    },
-    clearActive() {
-      this.active = '';
+      this.defaultActive = res.id;
+      if (res.url) {
+        if (res.urlopenmode == 1) {
+          util.win.open(res.url);
+          return;
+        } else if (res.urlopenmode == 2) {
+          util.win.location.href = res.url;
+          return;
+        }
+      }
+      this.$emit('command', res);
     }
   }
 };

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

@@ -1,49 +1,59 @@
 <template>
   <el-drawer
-    class="es-msgs-box"
-    custom-class="es-msgs-main"
+    class="es-simplicity-message"
+    modal-class="es-simplicity-message-modal"
     direction="rtl"
-    size="200px"
-    :modal="false"
+    size="648px"
     :withHeader="false"
     :visible.sync="show"
+    :modal-append-to-body="false"
   >
-    <div class="es-msg-header">
-      <span class="es-msg-title">消息提示</span>
-      <span class="es-overlook" @click="handleIgnoreAll">全部忽略</span>
+    <div class="es-simplicity-message-header">
+      <span class="es-simplicity-message-title">消息提示</span>
+      <span class="es-simplicity-message-overlook" @click="handleIgnoreAll"
+        >全部忽略</span
+      >
     </div>
-    <div class="es-msg-lists-box">
-      <div class="es-msg-lists">
+    <div class="es-simplicity-message-lists-box">
+      <div class="es-simplicity-message-lists">
         <el-scrollbar class="es-scrollbar">
           <div v-infinite-scroll="getMsg" :infinite-scroll-disabled="disabled">
-            <el-card
+            <div
               v-for="(item, index) in msgs"
               :key="item.id"
-              class="es-msg-item"
+              class="es-simplicity-message-item"
             >
-              <i
-                class="el-icon-circle-close"
-                title="忽略"
-                @click="handleIgnore(item, index)"
-              ></i>
-              <div class="es-msg-item-title">{{ item.title }}</div>
+              <div class="es-simplicity-message-item-title">
+                {{ item.title }}
+              </div>
               <div>
-                <span class="es-msg-item-time">{{ item.time }}</span>
+                <span class="es-simplicity-message-item-time">
+                  {{ item.time }}
+                </span>
                 <span
-                  class="es-overlook"
+                  class="es-simplicity-message-handler"
                   v-show="item.handlerUrl"
                   @click="handleMessage(item, index)"
-                  >处理</span
                 >
+                  处理
+                </span>
+                <span
+                  class="es-simplicity-message-overlook"
+                  @click="handleIgnore(item, index)"
+                >
+                  忽略
+                </span>
               </div>
-            </el-card>
-            <p class="es-msg-tips" v-if="loading">加载中...</p>
-            <p class="es-msg-tips" v-if="noMore && count > 0">没有更多了</p>
+            </div>
+            <p class="es-simplicity-message-tips" v-if="loading">加载中...</p>
+            <p class="es-simplicity-message-tips" v-if="noMore && count > 0">
+              没有更多了
+            </p>
           </div>
         </el-scrollbar>
       </div>
     </div>
-    <div class="es-msg-total">当前共有{{ count }}条消息记录</div>
+    <div class="es-simplicity-message-total">共有 {{ count }} 条消息记录</div>
     <es-dialog
       title="处理"
       name="manage"
@@ -63,7 +73,7 @@ import {
 } from 'eoss-ui/src/config/api.js';
 import util from 'eoss-ui/src/utils/util';
 export default {
-  name: 'message',
+  name: 'Message',
   provide() {
     return {
       deleteMessage: this.handleRemove

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

@@ -1,44 +1,53 @@
 <template>
   <transition name="el-drawer-fade" @after-enter="handleMouse(false)">
     <div
-      class="es-notice-box"
-      v-show="data.length"
+      class="es-simplicity-notice-box"
+      :class="{ 'es-in': msgs.length }"
+      v-show="msgs.length"
       @mouseover="handleMouse(true)"
       @mouseout="handleMouse(false)"
     >
-      <div class="es-msgs-box" :class="{ 'es-in': data.length }">
-        <div class="es-msg-header">
-          <span class="es-notice-title">通知消息</span>
-        </div>
-        <div class="es-msg-lists-box">
-          <div class="es-msg-lists">
-            <el-scrollbar class="es-scrollbar">
-              <el-card
-                v-for="(item, index) in data"
-                :key="item.id"
-                class="es-msg-item"
-              >
-                <div class="es-msg-item-title">{{ item.title }}</div>
-                <div>
-                  <span class="es-msg-item-time">{{ item.time }}</span>
-                  <span
-                    class="es-overlook"
-                    v-show="item.handlerUrl"
-                    @click="handleMessage(item, index)"
-                    >处理</span
-                  >
-                </div>
-              </el-card>
-            </el-scrollbar>
-          </div>
-        </div>
+      <div class="es-simplicity-notice-header">
+        <span class="es-notice-title">通知消息</span>
+      </div>
+      <el-scrollbar
+        class="es-simplicity-notice-lists es-simplicity-message-lists"
+      >
         <div
-          class="es-notice-footer"
-          style="display:flex;justify-content: space-between;"
+          v-for="(item, index) in msgs"
+          :key="item.id"
+          class="es-simplicity-message-item"
         >
-          <span @click="handleIgnoreAll">忽略全部</span
-          ><span @click="afterEnter">我知道了</span>
+          <div class="es-simplicity-message-item-title">
+            {{ item.title }}
+          </div>
+          <div>
+            <span class="es-simplicity-message-item-time">
+              {{ item.time }}
+            </span>
+            <span
+              class="es-simplicity-message-handler"
+              v-show="item.handlerUrl"
+              @click="handleMessage(item, index)"
+            >
+              处理
+            </span>
+            <span
+              class="es-simplicity-message-overlook"
+              @click="handleIgnore(item, index)"
+            >
+              忽略
+            </span>
+          </div>
         </div>
+      </el-scrollbar>
+      <div class="es-notice-footer">
+        <span class="es-simplicity-message-overlook" @click="handleIgnoreAll"
+          >忽略全部</span
+        >
+        <span class="es-simplicity-message-handler" @click="afterEnter"
+          >我知道了</span
+        >
       </div>
       <es-dialog
         title="处理"
@@ -53,10 +62,10 @@
   </transition>
 </template>
 <script>
-import { ignoreAllSysMsg } from 'eoss-ui/src/config/api.js';
+import { ignoreSysMsg, ignoreAllSysMsg } from 'eoss-ui/src/config/api.js';
 import util from 'eoss-ui/src/utils/util';
 export default {
-  name: 'notice',
+  name: 'Notice',
   provide() {
     return {
       deleteNotice: this.handleRemove
@@ -73,12 +82,19 @@ export default {
     }
   },
   computed: {},
+  watch: {
+    data: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.msgs = val;
+      }
+    }
+  },
   data() {
     return {
       //加载数据
       loading: false,
-      //消息页码
-      pageNum: 1,
       //消息数据,
       msgs: [],
       //即时消息
@@ -98,19 +114,36 @@ export default {
     handleMouse(flag) {
       this.$emit('opened', flag);
     },
+    //忽略
+    handleIgnore(res, i) {
+      util
+        .ajax({
+          url: ignoreSysMsg,
+          params: {
+            id: res.id
+          }
+        })
+        .then((res) => {
+          if (res.rCode == 0) {
+            this.msgs.splice(i, 1);
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        });
+    },
     //全部忽略
     handleIgnoreAll() {
       util
         .ajax({
           url: ignoreAllSysMsg
         })
-        .then(res => {
-          this.count = 0;
+        .then((res) => {
           this.msgs = [];
           this.$emit('ignore', { type: 'ignore', value: 'all' });
           this.$emit('opened', false);
         })
-        .catch(err => {
+        .catch((err) => {
           if (err.message && err.message !== 'canceled') {
             this.$message.error(err.message);
           }

package/packages/main/src/simplicity/router-page.vue

@@ -0,0 +1,53 @@
+<template>
+  <keep-alive>
+    <router-view :name="appCode" />
+  </keep-alive>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'RouterPage',
+  components: {},
+  props: {
+    appCode: String,
+    path: String,
+    url: String,
+    query: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    show: Boolean
+  },
+  data() {
+    return {
+      params: {}
+    };
+  },
+  computed: {},
+  watch: {
+    show(val) {
+      if (val) {
+        this.jump();
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    this.params = util.getParams({ url: this.url });
+    this.jump();
+  },
+  methods: {
+    jump() {
+      this.$router.push({
+        path: this.path,
+        query: { ...this.query, ...this.params }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -38,7 +38,7 @@
 <script>
 import util from 'eoss-ui/src/utils/util';
 export default {
-  name: 'message',
+  name: 'Message',
   props: {
     visible: Boolean,
     //主题颜色选择颜色集合

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

@@ -1,31 +1,47 @@
 <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>
+  <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">
+      <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
+          ref="menus"
+          :active="active"
+          :data="menus"
+          :menuIcon="menuIcon"
+          :color="color"
+          :backgroundColor="backgroundColor"
+          :fold="fold"
+          :width="size"
+          @command="handleCommand"
+        ></menu-list>
+      </div>
     </div>
-    <div
-      class="es-simplicity-menus-box"
-      v-if="subMenus.length"
-      v-for="(item, index) in subMenus"
-      :key="item.id"
-    >
-      <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>
-  </div>
+  </el-drawer>
 </template>
 
 <script>
@@ -34,6 +50,8 @@ export default {
   name: 'SubMenu',
   components: { MenuList },
   props: {
+    title: String,
+    active: String,
     color: {
       type: [String, Array],
       default: '#fff'
@@ -51,6 +69,11 @@ export default {
         ];
       }
     },
+    size: {
+      type: Number,
+      default: 220
+    },
+    visible: Boolean,
     text: String,
     menuIcon: String,
     children: {
@@ -68,63 +91,40 @@ export default {
   },
   data() {
     return {
-      active: '',
+      fold: false,
+      width: this.size,
       subMenus: []
     };
   },
   computed: {
     menus() {
       return [...this.children, ...this.fourthTabs];
+    },
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+        return val;
+      }
     }
   },
   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);
-        }
-      }
-      let data = [...(res.children || []), ...(res.fourthTabs || [])];
-      if (data.length) {
-        if (num === undefined) {
-          this.subMenus = [{ ...res, data: data }];
-        } else {
-          let item = this.subMenus[num];
-          if (item) {
-            if (item.id !== res.id) {
-              this.subMenus.splice(
-                parseInt(num, 10),
-                this.subMenus.length - 1,
-                {
-                  ...res,
-                  data: data
-                }
-              );
-            }
-          } else {
-            this.subMenus.push({
-              ...res,
-              data: data
-            });
-          }
-        }
-        this.$emit('command', num === undefined ? 2 : 2 + parseInt(num, 10));
+    handleFold(res) {
+      this.fold = res;
+      if (res) {
+        this.width = 48;
       } else {
-        if (num === undefined) {
-          this.$emit('command', 1);
-          this.subMenus = [];
-        } else {
-          this.subMenus.splice(parseInt(num, 10));
-          this.$emit('command', 1 + parseInt(num, 10));
-        }
+        this.width = this.size;
       }
+      this.$emit('update:fold', res);
+    },
+    handleCommand(res) {
+      this.$emit('command', res);
     },
     clearSubmenu() {
       this.$refs.menus.clearActive();