imatrix-ui 2.9.15-dw-tmp2 → 2.9.16-boe10

package/src/views/layout/tab-content-index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <menubar :system-code="systemCode" :collapse="true" class="sidebar-container" />
+    <div class="main-container">
+      <breadcrumb v-if="showMenuRoute" />
+      <tab-content />
+      <!-- <app-main /> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menubar, Breadcrumb } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { isShowMenuRoute } from 'imatrix-ui/src/utils/common-util'
+import TabContent from './components/tabs/tab-content'
+import Vue from 'vue'
+
+export default {
+  name: 'Layout',
+  components: {
+    Menubar,
+    Breadcrumb,
+    TabContent
+  },
+  mixins: [ResizeMixin],
+  data() {
+    // 是否显示菜单路径，默认是不显示
+    const showMenuRoute = isShowMenuRoute()
+    return {
+      showMenuRoute,
+      systemCode: null
+    }
+  },
+  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'
+      }
+    }
+  },
+  created() {
+    this.systemCode = Vue.prototype.customSystem
+    console.log('新菜单组件-----systemCode====', this.systemCode)
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSidebar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "imatrix-ui/src/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/login/index.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { Message } from '@gcommon/gcommon-ui'
+import { Message } from 'element-ui'
 export default {
   name: 'Login',
   data() {

package/packages/breadcrumb/index.js

@@ -1,6 +0,0 @@
-import Breadcrumb from './src/breadcrumb.vue'
-Breadcrumb.install = function(Vue) {
-  Vue.component(Breadcrumb.name, Breadcrumb)
-}
-
-export default Breadcrumb

package/packages/breadcrumb/src/breadcrumb.vue

@@ -1,71 +0,0 @@
-<template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelListWithTitle" :key="item.path">
-        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">
-          {{ item.meta.title }}
-        </span>
-        <router-link v-else :to="item.redirect||item.path">
-          {{ item.meta.title }}
-        </router-link>
-      </el-breadcrumb-item>
-    </transition-group>
-  </el-breadcrumb>
-</template>
-
-<script>
-import pathToRegexp from 'path-to-regexp'
-
-export default {
-  name: 'Breadcrumb',
-  data() {
-    return {
-      levelList: null
-    }
-  },
-  computed: {
-    levelListWithTitle() {
-      return this.levelList.filter(item => item.meta.title !== undefined && item.meta.title !== null)
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  },
-  created() {
-    this.getBreadcrumb()
-  },
-  methods: {
-    getBreadcrumb() {
-      const { params } = this.$route
-      let matched = this.$route.matched.filter(item => {
-        if (item.name) {
-          // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-          var toPath = pathToRegexp.compile(item.path)
-          item.path = toPath(params)
-          return true
-        }
-      })
-      const first = matched[0]
-      if (first && first.name !== 'Dashboard') {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
-      }
-      this.levelList = matched
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 10px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
-  }
-</style>

package/packages/department-tree/index.js

@@ -1,6 +0,0 @@
-import DepartmentTree from './src/department-tree.vue'
-DepartmentTree.install = function(Vue) {
-  Vue.component(DepartmentTree.name, DepartmentTree)
-}
-
-export default DepartmentTree

package/packages/department-tree/src/department-tree.vue

@@ -1,108 +0,0 @@
-<template>
-  <div>
-    <el-dialog
-      class="user-tree"
-      visible
-      :title="myTitle"
-      :close-on-click-modal="false"
-      append-to-body
-      :width="multiple?'50%':'30%'"
-      @open="$emit('open')"
-      @opend="$emit('opend')"
-      @close="$emit('close')"
-      @closed="$emit('closed')"
-    >
-      <inline-department-tree
-        ref="inlineDeparmentTree"
-        :check-strictly="checkStrictly"
-        :multiple="multiple"
-        :height="height"
-        :department-info="departmentInfo"
-        :select-department-info="selectDepartmentInfo"
-        :search-field="searchField"
-        :separator="separator"
-        @result="result"
-      />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="small" @click="$emit('close')">
-          {{ $t('imatrixUIPublicModel.cancel') }}
-        </el-button>
-        <el-button size="small" type="primary" @click="selectDepartment">
-          {{ $t('imatrixUIPublicModel.sure') }}
-        </el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import InlineDepartmentTree from '../../department-tree-inline/src/department-tree-inline.vue'
-export default {
-  name: 'DepartmentTree',
-  components: {
-    InlineDepartmentTree
-  },
-  props: {
-    // 是否是多选树，默认是true
-    multiple: {
-      type: Boolean,
-      default: true
-    },
-    checkStrictly: {
-      type: Boolean,
-      default: false
-    },
-    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
-    departmentInfo: {
-      type: Array,
-      default: null
-    },
-    // 弹框的标题
-    title: {
-      type: String,
-      default: null
-    },
-    // 弹框的宽度
-    width: {
-      type: String,
-      default: '30%'
-    },
-    // 弹框的高度
-    height: {
-      type: String,
-      default: '300px'
-    },
-    // 多选部门树时，已选择部门id或部门名称或编码集合，多个之间以逗号隔开
-    selectDepartmentInfo: {
-      type: [String, Number],
-      default: null
-    },
-    // 移除部门时，部门属性名称：id、name、code，默认是id
-    searchField: {
-      type: String,
-      default: 'id'
-    },
-    // 多选树时结果之间的分隔符，默认是逗号分隔
-    separator: {
-      type: String,
-      default: ','
-    }
-  },
-  data() {
-    let myTitle = this.$t('imatrixUIMessage.pleaseSelectDepartment')
-    if (this.title) {
-      myTitle = this.title
-    }
-    return {
-      myTitle
-    }
-  },
-  methods: {
-    result(selectNodeInfo) {
-      this.$emit('close', selectNodeInfo)
-    },
-    selectDepartment() {
-      this.$refs.inlineDeparmentTree.selectDepartment()
-    }
-  }
-}
-</script>

package/packages/department-tree-inline/index.js

@@ -1,6 +0,0 @@
-import InlineDepartmentTree from './src/department-tree-inline.vue'
-InlineDepartmentTree.install = function(Vue) {
-  Vue.component(InlineDepartmentTree.name, InlineDepartmentTree)
-}
-
-export default InlineDepartmentTree