imatrix-ui 2.8.7 → 2.8.8-boe10

package/src/styles/theme/gray/card-style.scss

@@ -38,5 +38,17 @@
 
 
   }
-
+  .gray_card_box {
+    border-radius: 6px;
+    background: #FFFFFF;
+    padding: 20px;
+    box-shadow: 0px 1px 8px 0px #00000019;
+    box-sizing: border-box;
+    overflow-y: scroll;
+  }
+  .gray_buttomBtn_box{
+    position: fixed;
+    bottom: 0;
+    right: 4%;
+  }
 }

package/src/styles/theme/gray/font-style.scss

@@ -29,4 +29,42 @@
       color: rgba(0, 13, 31, 0.85);
     }
   }
+
+  .page-layout__title {
+    width: 46px;
+    height: 16px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 13px;
+  }
+
+  .component-type-name__title {
+    width: 40px;
+    height: 14px;
+    font-size: 10px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 12px;
+    // -webkit-background-clip: text;
+    // -webkit-text-fill-color: transparent;
+  }
+
+  .page-layout__title::before {
+    content: "";
+    text-align: center;
+    background: #1A6BF3;
+    float: left;
+    position: relative;
+    border-radius: 3px;
+    /** 定义成 block 元素 **/
+    display: block;
+    // height: 21px;
+    // width: 4px;
+    margin-right: 12px;
+
+    width: 2px;
+    height: 16px;
+
+  }
 }

package/src/styles/theme/gray/index.scss

@@ -3,7 +3,7 @@
 @import './card-style.scss';
 @import './tab-style.scss';
 @import './input-style.scss';
-@import './form-style.scss';
+@import './scrollbar-style.scss';
 
 .gray {
   font-family: microsoft yahei, Arial, Helvetica, sans-serif;
@@ -76,8 +76,9 @@
   }
 
   .app-container {
-    // padding: 20px;
-    padding: 0px;
+    padding: 20px;
+    border-radius: 6px;
+    box-shadow: 0px 1px 8px 0px #00000019;
 
     .box-card {
       margin: 16px 24px;
@@ -95,26 +96,6 @@
   }
 
 
-  .form-container {
-    height: calc(100vh - 82px);
-    overflow: auto;
-  }
-
-  .form-container .el-form .el-card {
-    margin-bottom: 10px;
-  }
-
-  .form-container .el-form .el-card:last-child {
-    margin-bottom: 0;
-  }
-
-  // 带有tab页签的表单高度
-  .tab-form-container {
-    height: calc(100vh - 190px);
-    overflow: auto;
-  }
-
-
   // 解决tab页签中内容多时没有滚动条问题
   .el-tabs__content {
     flex-grow: 1;
@@ -173,12 +154,19 @@
   .el-table th {
     padding: 0;
   }
+
   /**表格内容纵向分隔线去掉**/
-  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
+  .el-table--border td,
+  .el-table--border th,
+  .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
     border-right: 0px
   }
+
   /**表格标题纵向分隔线颜色调浅点儿**/
-  .el-table--border td, .el-table--border th,.el-table--border th.is-leaf, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
+  .el-table--border td,
+  .el-table--border th,
+  .el-table--border th.is-leaf,
+  .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
     border-right: 1px solid #fefefe;
   }
 }

package/src/styles/theme/gray/scrollbar-style.scss

@@ -0,0 +1,32 @@
+.dark-blue {
+
+  // 滚动条基础样式
+  ::-webkit-scrollbar {
+    width: 6px; // 纵向的宽度
+    height: 8px; // 横向的高度
+  }
+
+  // 默认下滚动条的样式
+  ::-webkit-scrollbar-thumb {
+    background: #eaeaea;
+    border: none;
+    border-radius: 4px;
+  }
+
+  // 鼠标悬停在滚动条时的样式
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(157, 165, 183, 0.7)
+  }
+
+  // 滚动条区域 空白地方的样式
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border: none;
+  }
+
+  // 鼠标悬停在滚动条时 滚动条区域 空白地方的样式
+  ::-webkit-scrollbar-track:hover {
+    background-color: #eaeaea;
+    border: none;
+  }
+}

package/src/styles/theme/gray/sidebar.scss

@@ -8,6 +8,11 @@
       transition: margin-left .28s;
       margin-left: 224px;
       position: relative;
+
+      .nav-tab {
+        padding-top: 5px;
+        padding-left: 5px;
+      }
     }
 
     // 侧边栏

package/src/utils/common-util.js

@@ -202,3 +202,7 @@ export function getOrignUrl() {
   }
   return orignUrl
 }
+
+export function isPromise(p) {
+  return p && Object.prototype.toString.call(p) === '[object Promise]'
+}

package/src/utils/request.js

@@ -112,6 +112,10 @@ service.interceptors.response.use(
         }
         console.log(message)
         let errorMsg = getI18n().t('imatrixUIMessage.internalServerError')
+        if (message && message !== 'Internal Server Error') {
+          // 表示显示原始异常
+          errorMsg = message
+        }
         if (message && (message === 'gateway.timeout' || message === 'gateway.callFailed')) {
           // 网关的fallback返回的异常信息“接口调用超时”、“接口调用失败”
           errorMsg = getI18n().t(message)
@@ -124,6 +128,15 @@ service.interceptors.response.use(
         })
         return Promise.reject(error)
       }
+    } else {
+      const errorMsg = getI18n().t('imatrixUIMessage.internalServerError')
+      Message({
+        showClose: true,
+        message: errorMsg,
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(error)
     }
   }
 )

package/src/views/layout/NewLayout.vue

@@ -1,77 +1,18 @@
 <template>
-  <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <menubar class="sidebar-container" />
-    <div class="main-container">
-      <breadcrumb v-if="showMenuRoute" />
+  <div class="app-wrapper">
+    <div class="tab-main-container">
+      <!-- <tab-content/> -->
       <app-main />
     </div>
   </div>
 </template>
-
 <script>
-import { Menubar, AppMain, Breadcrumb } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { isShowMenuRoute } from '../../../src/utils/common-util'
-
+import { AppMain } from './components'
 export default {
-  name: 'Layout',
+  name: 'EmptyLayout',
   components: {
-    Menubar,
-    AppMain,
-    Breadcrumb
-  },
-  mixins: [ResizeMixin],
-  data() {
-    // 是否显示菜单路径，默认是不显示
-    const showMenuRoute = isShowMenuRoute()
-    return {
-      showMenuRoute
-    }
-  },
-  computed: {
-    sidebar() {
-      return this.$store.state.app.sidebar
-    },
-    device() {
-      return this.$store.state.app.device
-    },
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('closeSidebar', { withoutAnimation: false })
-    }
+    AppMain
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "../../styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-</style>

package/src/views/layout/components/Menubar/Item.vue

@@ -14,20 +14,28 @@ export default {
     hasChildren: {
       type: Boolean,
       default: false
+    },
+    isRoot: {
+      type: Boolean,
+      default: false
     }
   },
   render(h, context) {
+    const { title, hasChildren, isRoot } = context.props
     let icon = context.props.icon
-    const { title, hasChildren } = context.props
     const vnodes = []
-
     if (icon) {
       if (icon.indexOf('fa-') === 0) {
         // 表示以“fa-”开头，使用font-awesome中的图标
         icon = 'fa ' + icon
+        vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon}/></div>)
+      } else if (icon.indexOf('svg-') === 0) {
+        icon = icon.substring(icon.indexOf('svg-') + 4)
+        vnodes.push(<div style='display: inline-block;overflow:hidden;'><svg-icon icon-class={icon}/></div>)
+      } else {
+        icon += ' svg-icon'
+        vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon} /></div>)
       }
-      icon += ' svg-icon'
-      vnodes.push(<div style='display: inline-block;'><i class={icon}/></div>)
     }
 
     if (title) {
@@ -36,9 +44,17 @@ export default {
         // 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
         width = '100px'
       }
-      vnodes.push(<div slot='title' style='display: inline-block'>
-        <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
-      </div>)
+      if (isRoot) {
+        // 是否是根目录，没有子菜单时
+        vnodes.push(<div style='display: inline-block'>
+          <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
+        </div>)
+      } else {
+        // 有子菜单时
+        vnodes.push(<div slot='title' style='display: inline-block'>
+          <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
+        </div>)
+      }
     }
     return vnodes
   }

package/src/views/layout/components/Menubar/Link.vue

@@ -6,9 +6,12 @@
     <slot />
   </a> -->
 
-    <router-link :to="to">
+    <router-link v-if="!isOpenNewTab" :to="to">
       <slot />
     </router-link>
+    <div v-else>
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -23,8 +26,14 @@ export default {
   },
   data() {
     const isExter = this.to.isExternal
+    const openWay = this.to.openWay
+    let isOpenNewTab = false
+    if (openWay && openWay === 'NEW_PAGE_OPEN') {
+      isOpenNewTab = true
+    }
     return {
-      isExter
+      isExter,
+      isOpenNewTab
     }
   }
 }

package/src/views/layout/components/Menubar/SidebarItem.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="menu-wrapper">
     <template v-if="!item.children || item.children.lenght === 0">
-      <app-link :to="toPath(item)">
+      <app-link :to="toPath(item)" @click.native="clickMenu(toPath(item))">
         <el-menu-item :index="item.fullPath+'~~'+item.i18nValue" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="item.iconName" :title="item.i18nValue" />
+          <item :icon="item.iconName" :title="getI18nName(item)" :is-root="true" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else :index="item.fullPath+'~~'+item.i18nValue">
       <template slot="title">
-        <item :icon="item.iconName" :title="item.i18nValue" :has-children="item.children.length > 0?true:false" />
+        <item :icon="item.iconName" :title="getI18nName(item)" :has-children="item.children.length > 0?true:false" />
       </template>
 
       <template v-for="child in item.children">
@@ -21,9 +21,9 @@
           :item="child"
           class="nest-menu"
         />
-        <app-link v-else :key="child.code" :to="toPath(child)">
+        <app-link v-else :key="child.code" :to="toPath(child)" @click.native="clickMenu(toPath(child))">
           <el-menu-item :index="child.fullPath+'~~'+child.i18nValue">
-            <item :icon="child.iconName" :title="child.i18nValue" />
+            <item :icon="child.iconName" :title="getI18nName(child)" />
           </el-menu-item>
         </app-link>
       </template>
@@ -34,6 +34,9 @@
 <script>
 import Item from './Item'
 import AppLink from './Link'
+import Vue from 'vue'
+import { getI18nName } from 'imatrix-ui/src/utils/menu'
+import tabJs from '../../../../api/tab'
 
 export default {
   name: 'SidebarItem',
@@ -59,6 +62,7 @@ export default {
     }
   },
   methods: {
+    ...tabJs,
     hasOneShowingChild(children, parent) {
       if (children && children.length > 0) {
         this.onlyOneChild = children[0]
@@ -80,13 +84,24 @@ export default {
     toPath(menu) {
       const toPathObj = {}
       const routePath = menu.fullPath
+      toPathObj.openWay = menu.openWay
       if (this.isExternalLink(menu.pageType)) {
-        toPathObj.path = '/iframe-page/page'
+        toPathObj.path = '/tab-content-iframe-index'
+        toPathObj.tabPath = '/iframe-page/page'
         toPathObj.query = {}
         toPathObj.query.src = routePath
         toPathObj.isExternal = true
+        // 如果路径中没有拼系统编码，才需要把系统编码放到参数中
+        toPathObj.query.customSystem = Vue.prototype.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
       } else {
-        toPathObj.path = routePath
+        toPathObj.path = '/tab-content-index'
+        toPathObj.tabPath = routePath
+        toPathObj.query = {}
+        toPathObj.query.customSystem = Vue.prototype.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
       }
       return toPathObj
     },
@@ -95,6 +110,34 @@ export default {
         return true
       }
       return false
+    },
+    clickMenu(toPathObj) {
+      // console.log('clickMenu----toPathObj=', toPathObj)
+      if (toPathObj.openWay && toPathObj.openWay === 'NEW_PAGE_OPEN' && toPathObj.query) {
+        // 新页签打开菜单
+        let url = toPathObj.query.src
+        if (url && url.indexOf('?') > 0) {
+          url += '&'
+        } else {
+          url += '?'
+        }
+        if (toPathObj.query.customSystem) {
+          url += 'customSystem=' + toPathObj.query.customSystem
+        }
+        if (toPathObj.query._menuCode) {
+          url += '_menuCode=' + toPathObj.query._menuCode
+        }
+        if (toPathObj.query._menuCode) {
+          url += '_menuName=' + toPathObj.query._menuName
+        }
+        window.open(url, toPathObj.query._menuCode)
+      } else {
+        // 刷新页签打开菜单
+        this.addTabs(toPathObj.query, this.$store.state.tabContent.openTab, toPathObj.tabPath)
+      }
+    },
+    getI18nName(menu) {
+      return getI18nName(menu)
     }
   }
 }

package/src/views/layout/components/Menubar/index.vue

@@ -24,6 +24,8 @@ import SidebarItem from './SidebarItem'
 import Vue from 'vue'
 import { getLanguageWithLocale } from '../../../../utils/util'
 import { isShowSystemMenu } from '../../../../utils/common-util'
+import tabJs from '../../../../api/tab'
+import { getI18nName } from '../../../../utils/menu'
 import Cookies from 'js-cookie'
 import { getMenus } from '../../../../utils/permissionAuth'
 export default {
@@ -31,6 +33,16 @@ export default {
   components: {
     SidebarItem
   },
+  props: {
+    systemCode: {
+      type: String,
+      default: null
+    },
+    collapse: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     let systemName
     if (isShowSystemMenu() === true) {
@@ -53,7 +65,10 @@ export default {
       'sidebar'
     ]),
     isCollapse() {
-      return !this.sidebar.opened
+      if (this.collapse === false) {
+        return !this.sidebar.opened
+      }
+      return true
     }
   },
   watch: {
@@ -77,13 +92,22 @@ export default {
       // 跳转到第一个页面
       if (this.firstLeafMenu.pageType && this.firstLeafMenu.pageType === 'iframe') {
         const iframeSrc = this.firstLeafMenu.fullPath
-        this.$router.push({ path: '/iframe-page/page', query: { src: iframeSrc }})
+        // this.$router.push({ path: '/iframe-page/page', query: { src: iframeSrc }})
+        const query = { src: iframeSrc, customSystem: this.systemCode, _menuCode: this.firstLeafMenu.code, _menuName: getI18nName(this.firstLeafMenu) }
+        this.addTabs(query, this.$store.state.tabContent.openTab, '/iframe-page/page', '/iframe-page/page')
+        // this.$router.push({ path: '/iframe-page/page', query: query })
+        this.$router.push({ path: '/tab-content-iframe-index', query: query })
       } else {
-        this.$router.push({ path: this.firstLeafMenu.fullPath })
+        const query = { customSystem: this.systemCode, _menuCode: this.firstLeafMenu.code, _menuName: getI18nName(this.firstLeafMenu) }
+        const path = this.firstLeafMenu.fullPath
+        this.addTabs(query, this.$store.state.tabContent.openTab, path, path)
+        this.$router.push({ path: '/tab-content-index', query: query })
+        // this.$router.push({ path: this.firstLeafMenu.fullPath })
       }
     }
   },
   methods: {
+    ...tabJs,
     toggleSideBar() {
       this.$store.dispatch('toggleSidebar')
     },
@@ -102,31 +126,42 @@ export default {
             break
           }
         }
-        if (!shouldSelectMenu) {
-          // 如果没有获得默认选中的菜单，则默认选中第一个菜单
-          shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
-        }
+        // if (!shouldSelectMenu) {
+        //   // 如果没有获得默认选中的菜单，则默认选中第一个菜单
+        //   shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
+        // }
         return shouldSelectMenu
       }
     },
     getShouldSelectMenu(menu) {
-      if (menu) {
-        const cookieMenu = Cookies.get('selectMenu')
-        let currentRoute = this.$route.path
-        if (cookieMenu && cookieMenu.indexOf('~~') > 0) {
-          // cookie中记录了选中的菜单路径
-          const path = cookieMenu.substring(0, cookieMenu.lastIndexOf('~~'))
-          currentRoute = path
-        }
+      const currentMenuCode = this.$route.query ? this.$route.query._menuCode : null
+      if (menu && currentMenuCode) {
         let shouldSelectMenu
         const children = menu.children
         if (children && children.length > 0) {
           shouldSelectMenu = this.getFirstMenu(children)
-        } else if (menu.fullPath && menu.fullPath === currentRoute) {
+        } else if (menu.code && menu.code === currentMenuCode) {
           shouldSelectMenu = menu
         }
         return shouldSelectMenu
       }
+      // if (menu) {
+      //   const cookieMenu = Cookies.get('selectMenu')
+      //   let currentRoute = this.$route.path
+      //   if (cookieMenu && cookieMenu.indexOf('~~') > 0) {
+      //     // cookie中记录了选中的菜单路径
+      //     const path = cookieMenu.substring(0, cookieMenu.lastIndexOf('~~'))
+      //     currentRoute = path
+      //   }
+      //   let shouldSelectMenu
+      //   const children = menu.children
+      //   if (children && children.length > 0) {
+      //     shouldSelectMenu = this.getFirstMenu(children)
+      //   } else if (menu.fullPath && menu.fullPath === currentRoute) {
+      //     shouldSelectMenu = menu
+      //   }
+      //   return shouldSelectMenu
+      // }
     },
     getSelectMenuWithFirstMenu(menu) {
       if (menu) {