jeecg-boot 1.0版本发布

ant-design-jeecg-vue/src/components/menu/Contextmenu.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-menu :style="style" class="contextmenu" v-show="visible" @click="handleClick" :selectedKeys="selectedKeys">
+    <a-menu-item :key="item.key" v-for="item in itemList">
+      <a-icon role="menuitemicon" v-if="item.icon" :type="item.icon" />{{ item.text }}
+    </a-menu-item>
+  </a-menu>
+</template>
+
+<script>
+export default {
+  name: 'Contextmenu',
+  props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    itemList: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      left: 0,
+      top: 0,
+      target: null,
+      selectedKeys: []
+    }
+  },
+  computed: {
+    style () {
+      return {
+        left: this.left + 'px',
+        top: this.top + 'px'
+      }
+    }
+  },
+  created () {
+    window.addEventListener('mousedown', e => this.closeMenu(e))
+    window.addEventListener('contextmenu', e => this.setPosition(e))
+  },
+  methods: {
+    closeMenu (e) {
+      if (['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
+        this.$emit('update:visible', false)
+      }
+    },
+    setPosition (e) {
+      this.left = e.clientX
+      this.top = e.clientY
+      this.target = e.target
+    },
+    handleClick ({key}) {
+      this.$emit('select', key, this.target)
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .contextmenu{
+    position: fixed;
+    z-index: 1;
+    border: 1px solid #9e9e9e;
+    border-radius: 4px;
+    box-shadow: 2px 2px 10px #aaaaaa !important;
+  }
+</style>

ant-design-jeecg-vue/src/components/menu/SideMenu.vue

@@ -0,0 +1,62 @@
+<template>
+  <a-layout-sider
+    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
+    width="248px"
+    :collapsible="collapsible"
+    v-model="collapsed" 
+    :trigger="null">
+    <logo />
+    <s-menu
+      :collapsed="collapsed"
+      :menu="menus"
+      :theme="theme"
+      @select="onSelect"
+      :mode="mode"
+      style="padding: 16px 0px;"></s-menu>
+  </a-layout-sider>
+
+</template>
+
+<script>
+  import ALayoutSider from "ant-design-vue/es/layout/Sider"
+  import Logo from '../tools/Logo'
+  import SMenu from './index'
+  import { mixin, mixinDevice } from '@/utils/mixin.js'
+
+  export default {
+    name: "SideMenu",
+    components: { ALayoutSider, Logo, SMenu },
+    mixins: [mixin, mixinDevice],
+    props: {
+      mode: {
+        type: String,
+        required: false,
+        default: 'inline'
+      },
+      theme: {
+        type: String,
+        required: false,
+        default: 'dark'
+      },
+      collapsible: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      collapsed: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      menus: {
+        type: Array,
+        required: true
+      }
+    },
+    methods: {
+      onSelect (obj) {
+        this.$emit('menuSelect', obj)
+      }
+    }
+  }
+</script>

ant-design-jeecg-vue/src/components/menu/index.js

@@ -0,0 +1,162 @@
+import Menu from 'ant-design-vue/es/menu'
+import Icon from 'ant-design-vue/es/icon'
+
+const { Item, SubMenu } = Menu
+
+export default {
+  name: 'SMenu',
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      openKeys: [],
+      selectedKeys: [],
+      cachedOpenKeys: []
+    }
+  },
+  computed: {
+    rootSubmenuKeys: (vm) => {
+      let keys = []
+      vm.menu.forEach(item => keys.push(item.path))
+      return keys
+    }
+  },
+  created () {
+    this.updateMenu()
+  },
+  watch: {
+    collapsed (val) {
+      if (val) {
+        this.cachedOpenKeys = this.openKeys
+        this.openKeys = []
+      } else {
+        this.openKeys = this.cachedOpenKeys
+      }
+    },
+    '$route': function () {
+      this.updateMenu()
+    }
+  },
+  methods: {
+    renderIcon: function (h, icon) {
+      return icon === 'none' || icon === undefined ? null
+        : h(Icon, { props: { type: icon !== undefined ? icon : '' } })
+    },
+    renderMenuItem: function (h, menu, pIndex, index) {
+      return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index },
+        [
+          h(
+            'router-link',
+            { attrs: { to: { name: menu.name } } },
+            [
+              this.renderIcon(h, menu.meta.icon),
+              h('span', [ menu.meta.title ])
+            ]
+          )
+        ]
+      )
+    },
+    renderSubMenu: function (h, menu, pIndex, index) {
+      const this2_ = this;
+      let subItem = [ h('span',
+        { slot: 'title' },
+        [
+          this.renderIcon(h, menu.meta.icon),
+          h('span', [ menu.meta.title ])
+        ]
+      ) ]
+      let itemArr = []
+      let pIndex_ = pIndex + '_' + index
+      if (!menu.alwaysShow) {
+        menu.children.forEach(function (item, i) {
+          itemArr.push(this2_.renderItem(h, item, pIndex_, i))
+        })
+      }
+      return h(
+        SubMenu,
+        { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index },
+        subItem.concat(itemArr)
+      )
+    },
+    renderItem: function (h, menu, pIndex, index) {
+      if (!menu.hidden) {
+        return menu.children && !menu.alwaysShow ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
+      }
+    },
+    renderMenu: function (h, menuTree) {
+      const this2_ = this
+      let menuArr = []
+      menuTree.forEach(function (menu, i) {
+        if (!menu.hidden) {
+          menuArr.push(this2_.renderItem(h, menu, '0', i))
+        }
+      })
+      return menuArr
+    },
+    onOpenChange (openKeys) {
+      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
+      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+        this.openKeys = openKeys
+      } else {
+        this.openKeys = latestOpenKey ? [ latestOpenKey ] : []
+      }
+    },
+    updateMenu () {
+      let routes = this.$route.matched.concat()
+      if (routes.length >= 4 && this.$route.meta.hidden) {
+        routes.pop()
+        this.selectedKeys = [ routes[2].path ]
+      } else {
+        this.selectedKeys = [ routes.pop().path ]
+      }
+
+      let openKeys = []
+      if (this.mode === 'inline') {
+        routes.forEach((item) => {
+          openKeys.push(item.path)
+        })
+      }
+
+      this.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
+    }
+  },
+  render (h) {
+    return h(
+      Menu,
+      {
+        props: {
+          theme: this.$props.theme,
+          mode: this.$props.mode,
+          openKeys: this.openKeys,
+          selectedKeys: this.selectedKeys
+        },
+        on: {
+          openChange: this.onOpenChange,
+          select: (obj) => {
+            this.selectedKeys = obj.selectedKeys
+            this.$emit('select', obj)
+          }
+        }
+      }, this.renderMenu(h, this.menu)
+    )
+  }
+}