imatrix-ui 2.8.5-tmp2 → 2.8.5-tmp4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imatrix-ui",
-  "version": "2.8.5-tmp2",
+  "version": "2.8.5-tmp4",
   "description": "前端组件库：表格、表单、组织结构树等",
   "main": "lib/super-ui.umd.min.js",
   "private": false,

package/src/router/index.js

@@ -69,6 +69,16 @@ export const publicRouterMap = [
     path: '/show-sub-wf-history',
     component: () => import('../views/wf-history/tache-subprocess-history'),
     hidden: true
+  },
+  {
+    path: '/tab-content-index',
+    component: () => import('../views/layout/tab-content-index'),
+    hidden: true
+  },
+  {
+    path: '/tab-content-iframe-index',
+    component: () => import('../views/layout/tab-content-iframe-index'),
+    hidden: true
   }
 
 ]

package/src/store/modules/tab-content.js

@@ -22,6 +22,12 @@ const tabContent = {
     // 设置当前激活的tab
     set_active_index(state, index) {
       state.activeIndex = index
+    },
+    // 清空tabs
+    clear_tabs(state, route) {
+      if (state.openTab.length > 0) {
+        state.openTab.splice(0, state.openTab.length)
+      }
     }
   },
   actions: {

package/src/styles/theme/dark-blue/button.scss

@@ -0,0 +1,9 @@
+@import "./dark-blue-var.scss";
+
+.dark-blue {
+  .operation-area .el-button--primary {
+    border-radius: 4px;
+    background: $--button-opt-background-color;
+    border-color: $--button-opt-background-color;
+  }
+}

package/src/styles/theme/dark-blue/{card-style.scss → card.scss}

@@ -40,7 +40,7 @@
   }
 
 
-  .platform {
+  .platform-card {
     .el-card__header {
       height: 40px;
       background: #F0F8FE;
@@ -51,6 +51,14 @@
       text-align: left;
       padding: 9px 0px 9px 20px;
     }
+
+    .el-card__header>div {
+      line-height: 22px;
+    }
+
+    .card-style {
+      margin-top: 20px;
+    }
   }
 
 }

package/src/styles/theme/dark-blue/checkbox.scss

@@ -0,0 +1,10 @@
+@import "./dark-blue-var.scss";
+
+.dark-blue {
+
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: $--color-primary;
+    border-color: $--color-primary;
+  }
+}

package/src/styles/theme/dark-blue/dark-blue-var.scss

@@ -0,0 +1,8 @@
+  /* 改变主题色变量 */
+  $--color-primary: #005EBA;
+  $--button-default-border-color: $--color-primary;
+  $--button-default-font-color: $--color-primary;
+  $--button-font-weight: regular;
+  $--button-default-font-color: $--color-primary;
+  $--button-opt-background-color:#0780ED;
+  $th-cell-background: #F0F8FE;

package/src/styles/theme/dark-blue/dialog.scss

@@ -0,0 +1,21 @@
+.dark-blue {
+  .el-dialog__header {
+    padding: 22px 0px 0px 24px;
+  }
+
+  .el-dialog__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;
+  }
+
+
+}

package/src/styles/theme/dark-blue/element-variables.scss

@@ -1,10 +1,7 @@
-/* 改变主题色变量 */
-$--color-primary: #0780ED;
-$--button-default-border-color: #005EBA;
-$--button-default-font-color: #005EBA;
-$--button-font-weight: regular;
+@import "./dark-blue-var.scss";
 
-/* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-@import "~element-ui/packages/theme-chalk/src/index";
+.dark-blue {
+  /* 改变 icon 字体路径变量，必需 */
+  $--font-path: '~element-ui/lib/theme-chalk/fonts';
+  @import "~element-ui/packages/theme-chalk/src/index";
+}

package/src/styles/theme/dark-blue/index.scss

@@ -1,10 +1,17 @@
-@import './sidebar.scss';
-@import './font-style.scss';
-@import './card-style.scss';
-@import './tab-style.scss';
-@import './input-style.scss';
-@import './form-style.scss';
 @import './element-variables.scss';
+@import './table.scss';
+@import './sidebar.scss';
+@import './font.scss';
+@import './card.scss';
+@import './tab.scss';
+@import './input.scss';
+@import './form.scss';
+@import './pagination.scss';
+@import './button.scss';
+@import './checkbox.scss';
+@import './dialog.scss';
+@import './scrollbar-style.scss';
+
 
 .dark-blue {
   font-family: cursive;
@@ -78,12 +85,15 @@
   .app-main {
     min-height: 100%;
     background: #f7f7f8;
-    padding-top: 12px;
+    padding: 11px 24px 11px 24px;
+    // padding-top: 12px;
   }
 
   .app-container {
     // padding: 20px;
-    padding: 0px;
+    // padding: 0px;
+    padding: 20px 24px;
+    background: #FFFFFF;
 
     .box-card {
       margin: 0px 24px 0px 0px;
@@ -92,6 +102,7 @@
 
   .operation-area {
     margin-bottom: 20px;
+
   }
 
   .operation-area-chart {
@@ -145,7 +156,11 @@
   }
 
   .el-tree-node.is-current>.el-tree-node__content {
-    background-color: #c2d6ea !important;
+    background: $th-cell-background;
+  }
+
+  .el-tree-node__content:hover {
+    background-color: $th-cell-background;
   }
 
   .menu-tab-container .el-tabs__item {
@@ -173,7 +188,7 @@
 
   .el-table td,
   .el-table th {
-    height: 48px;
+    height: 40px;
   }
 
   .el-table th {
@@ -194,4 +209,14 @@
   .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
     border-right: 1px solid #fefefe;
   }
+
+  .selectPeopleClass {
+    color: #313233;
+    font-family: Source Han Sans CN;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
 }

package/src/styles/theme/dark-blue/pagination.scss

@@ -0,0 +1,14 @@
+@import "./dark-blue-var.scss";
+
+.dark-blue {
+  .el-pager li:not(.disabled) {
+    &:hover {
+      //color: $--pagination-hover-color;
+    }
+
+    &.active {
+      color: #FFFFFF;
+      background-color: $--button-default-font-color;
+    }
+  }
+}

package/src/styles/theme/dark-blue/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/dark-blue/sidebar.scss

@@ -7,7 +7,7 @@
       height: 100%;
       transition: margin-left .28s;
       margin-left: 210px;
-      padding-left: 24px;
+      // padding-left: 24px;
       position: relative;
       background: #F8F9FA;
 

package/src/styles/theme/dark-blue/table.scss

@@ -0,0 +1,56 @@
+@import "./dark-blue-var.scss";
+
+.dark-blue {
+
+  $table-cell-font-color: #313233;
+
+  // 表头背景颜色
+  .el-table__header-wrapper {
+    background: $th-cell-background;
+  }
+
+  .el-table th.el-table__cell {
+    background: $th-cell-background;
+  }
+
+  .el-table thead.is-group th.el-table__cell {
+    background: $th-cell-background;
+  }
+
+  .el-table .el-table__cell {
+    padding: 0;
+  }
+
+  // 表头字体样式
+  .el-table th.el-table__cell>.cell {
+    color: $table-cell-font-color;
+    font-family: Source Han Sans CN;
+    font-weight: medium;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
+
+  // 表格内容颜色
+  .el-table .cell {
+    color: $table-cell-font-color;
+    font-family: Source Han Sans CN;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+
+  }
+
+  .el-button--text {
+    color: $--color-primary;
+    font-family: Source Han Sans CN;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: center;
+  }
+}

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

@@ -4,6 +4,7 @@
 @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;
@@ -173,12 +174,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/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,11 +14,15 @@ 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) {
@@ -35,14 +39,23 @@ export default {
     }
 
     if (title) {
+      debugger
       let width = '130px'
       if (hasChildren) {
         // 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
         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)
     }
   }
 }