JEECG-BOOT 2.0.2版本发布

ant-design-vue-jeecg/src/components/layouts/BasicLayout.vue

@@ -0,0 +1,60 @@
+<template>
+  <global-layout>
+    <transition name="page-transition">
+      <keep-alive v-if="keepAlive">
+        <router-view />
+      </keep-alive>
+      <router-view v-else />
+    </transition>
+  </global-layout>
+</template>
+
+<script>
+  import GlobalLayout from '@/components/page/GlobalLayout'
+
+  export default {
+    name: "BasicLayout",
+    components: {
+      GlobalLayout
+    },
+    data () {
+      return {
+
+      }
+    },
+    computed: {
+      keepAlive () {
+        return this.$route.meta.keepAlive
+      }
+    },
+    methods: {
+
+    },
+  }
+</script>
+
+<style lang="scss">
+
+  /*
+ * The following styles are auto-applied to elements with
+ * transition="page-transition" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the page transition by editing
+ * these styles.
+ */
+
+  .page-transition-enter {
+    opacity: 0;
+  }
+
+  .page-transition-leave-active {
+    opacity: 0;
+  }
+
+  .page-transition-enter .page-transition-container,
+  .page-transition-leave-active .page-transition-container {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+</style>

ant-design-vue-jeecg/src/components/layouts/BlankLayout.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "BlankLayout",
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-vue-jeecg/src/components/layouts/IframeFReportView.vue

@@ -0,0 +1,47 @@
+<template>
+
+    <iframe  :id="id" :src="url" frameborder="0" width="100%" height="800px" scrolling="auto" style="background-color: #fff;"></iframe>
+
+</template>
+
+<script>
+  import PageLayout from '../page/PageLayout'
+  import RouteView from './RouteView'
+
+  export default {
+    name: "IframePageContent",
+    data () {
+      return {
+        url: "",
+        id:""
+      }
+    },
+    created () {
+      this.goUrl()
+    },
+    updated () {
+      this.goUrl()
+    },
+    watch: {
+      $route(to, from) {
+        this.goUrl();
+      }
+    },
+    methods: {
+      goUrl () {
+        let url = this.$route.meta.url
+        let id = this.$route.path
+        this.id = id
+        //url = "http://www.baidu.com"
+        console.log("------url------"+url)
+        if (url !== null && url !== undefined) {
+          this.url = url;
+          //window.open(this.url);
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+</style>

ant-design-vue-jeecg/src/components/layouts/IframePageView.vue

@@ -0,0 +1,47 @@
+<template>
+
+    <iframe  :id="id" :src="url" frameborder="0" width="100%" height="800px" scrolling="auto"></iframe>
+
+</template>
+
+<script>
+  import PageLayout from '../page/PageLayout'
+  import RouteView from './RouteView'
+
+  export default {
+    name: "IframePageContent",
+    data () {
+      return {
+        url: "",
+        id:""
+      }
+    },
+    created () {
+      this.goUrl()
+    },
+    updated () {
+      this.goUrl()
+    },
+    watch: {
+      $route(to, from) {
+        this.goUrl();
+      }
+    },
+    methods: {
+      goUrl () {
+        let url = this.$route.meta.url
+        let id = this.$route.path
+        this.id = id
+        //url = "http://www.baidu.com"
+        console.log("------url------"+url)
+        if (url !== null && url !== undefined) {
+          this.url = url;
+          //window.open(this.url);
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+</style>

ant-design-vue-jeecg/src/components/layouts/PageView.vue

@@ -0,0 +1,85 @@
+<template>
+  <page-layout :desc="description" :title="getTitle" :link-list="linkList" :search="search" :tabs="tabs">
+    <div slot="extra" class="extra-img">
+      <img :src="extraImage"/>
+    </div>
+    <!-- keep-alive  -->
+    <route-view ref="content"></route-view>
+  </page-layout>
+</template>
+
+<script>
+  import PageLayout from '../page/PageLayout'
+  import RouteView from './RouteView'
+
+  export default {
+    name: "PageContent",
+    components: {
+      RouteView,
+      PageLayout
+    },
+    data () {
+      return {
+        title: '',
+        description: '',
+        linkList: [],
+        extraImage: '',
+        search: false,
+        tabs: {}
+      }
+    },
+    mounted () {
+      this.getPageHeaderInfo()
+    },
+    updated () {
+      this.getPageHeaderInfo()
+    },
+    computed: {
+
+      getTitle () {
+        return this.$route.meta.title
+      }
+
+    },
+    methods: {
+      getPageHeaderInfo () {
+        // eslint-disable-next-line
+        this.title = this.$route.meta.title
+        // 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
+        const content = this.$refs.content && this.$refs.content.$children[0]
+
+        if (content) {
+          this.description = content.description
+          this.linkList = content.linkList
+          this.extraImage = content.extraImage
+          this.search = content.search == true ? true : false
+          this.tabs = content.tabs
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .extra-img {
+    margin-top: -60px;
+    text-align: center;
+    width: 195px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .mobile {
+    .extra-img{
+      margin-top: 0;
+      text-align: center;
+      width: 96px;
+
+      img{
+        width: 100%;
+      }
+    }
+  }
+</style>

ant-design-vue-jeecg/src/components/layouts/RouteView.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="main">
+  <keep-alive>
+    <router-view v-if="keepAlive" />
+  </keep-alive>
+  <router-view v-if="!keepAlive" />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "RouteView",
+    computed: {
+      keepAlive () {
+        return this.$route.meta.keepAlive
+      }
+    },
+  }
+</script>

ant-design-vue-jeecg/src/components/layouts/TabLayout.vue

@@ -0,0 +1,299 @@
+<template>
+  <global-layout @dynamicRouterShow="dynamicRouterShow">
+    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect"/>
+    <a-tabs
+      @contextmenu.native="e => onContextmenu(e)"
+      v-if="multipage"
+      :active-key="activePage"
+      class="tab-layout-tabs"
+      style="height:52px"
+      :hide-add="true"
+      type="editable-card"
+      @change="changePage"
+      @edit="editPage">
+      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
+        <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
+      </a-tab-pane>
+    </a-tabs>
+    <div style="margin: 12px 12px 0;">
+      <transition name="page-toggle">
+        <keep-alive v-if="multipage">
+          <router-view/>
+        </keep-alive>
+        <router-view v-else/>
+      </transition>
+    </div>
+  </global-layout>
+</template>
+
+<script>
+  import GlobalLayout from '@/components/page/GlobalLayout'
+  import Contextmenu from '@/components/menu/Contextmenu'
+  import { mixin, mixinDevice } from '@/utils/mixin.js'
+
+  const indexKey = '/dashboard/analysis'
+
+  export default {
+    name: 'TabLayout',
+    components: {
+      GlobalLayout,
+      Contextmenu
+    },
+    mixins: [mixin, mixinDevice],
+    data() {
+      return {
+        pageList: [],
+        linkList: [],
+        activePage: '',
+        menuVisible: false,
+        menuItemList: [
+          { key: '1', icon: 'arrow-left', text: '关闭左侧' },
+          { key: '2', icon: 'arrow-right', text: '关闭右侧' },
+          { key: '3', icon: 'close', text: '关闭其它' }
+        ]
+      }
+    },
+    computed: {
+      multipage() {
+        //判断如果是手机模式，自动切换为单页面模式
+        if (this.isMobile()) {
+          return false
+        } else {
+          return this.$store.state.app.multipage
+        }
+      }
+    },
+    created() {
+      if (this.$route.path != indexKey) {
+        this.pageList.push({
+          name: 'dashboard-analysis',
+          path: indexKey,
+          fullPath: indexKey,
+          meta: {
+            icon: 'dashboard',
+            title: '首页'
+          }
+        })
+        this.linkList.push(indexKey)
+      }
+      this.pageList.push(this.$route)
+      this.linkList.push(this.$route.fullPath)
+      this.activePage = this.$route.fullPath
+    },
+    watch: {
+      '$route': function(newRoute) {
+        this.activePage = newRoute.fullPath
+        if (!this.multipage) {
+          this.linkList = [newRoute.fullPath]
+          this.pageList = [Object.assign({},newRoute)]
+        } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
+          this.linkList.push(newRoute.fullPath)
+          this.pageList.push(Object.assign({},newRoute))
+        } else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
+          let oldIndex = this.linkList.indexOf(newRoute.fullPath)
+          let oldPositionRoute = this.pageList[oldIndex]
+          this.pageList.splice(oldIndex, 1, Object.assign({},newRoute,{meta:oldPositionRoute.meta}))
+        }
+      },
+      'activePage': function(key) {
+        let index = this.linkList.lastIndexOf(key)
+        let waitRouter = this.pageList[index]
+        this.$router.push(Object.assign({},waitRouter));
+      },
+      'multipage': function(newVal) {
+        if (!newVal) {
+          this.linkList = [this.$route.fullPath]
+          this.pageList = [this.$route]
+        }
+      }
+    },
+    methods: {
+      changePage(key) {
+        this.activePage = key
+      },
+      editPage(key, action) {
+        this[action](key)
+      },
+      remove(key) {
+        if (key == indexKey) {
+          this.$message.warning('首页不能关闭!')
+          return
+        }
+        if (this.pageList.length === 1) {
+          this.$message.warning('这是最后一页，不能再关闭了啦')
+          return
+        }
+        this.pageList = this.pageList.filter(item => item.fullPath !== key)
+        let index = this.linkList.indexOf(key)
+        this.linkList = this.linkList.filter(item => item !== key)
+        index = index >= this.linkList.length ? this.linkList.length - 1 : index
+        this.activePage = this.linkList[index]
+      },
+      onContextmenu(e) {
+        const pagekey = this.getPageKey(e.target)
+        if (pagekey !== null) {
+          e.preventDefault()
+          this.menuVisible = true
+        }
+      },
+      getPageKey(target, depth) {
+        depth = depth || 0
+        if (depth > 2) {
+          return null
+        }
+        let pageKey = target.getAttribute('pagekey')
+        pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
+        return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
+      },
+      onMenuSelect(key, target) {
+        let pageKey = this.getPageKey(target)
+        switch (key) {
+          case '1':
+            this.closeLeft(pageKey)
+            break
+          case '2':
+            this.closeRight(pageKey)
+            break
+          case '3':
+            this.closeOthers(pageKey)
+            break
+          default:
+            break
+        }
+      },
+      closeOthers(pageKey) {
+        let index = this.linkList.indexOf(pageKey)
+        if (pageKey == indexKey) {
+          this.linkList = this.linkList.slice(index, index + 1)
+          this.pageList = this.pageList.slice(index, index + 1)
+          this.activePage = this.linkList[0]
+        } else {
+          let indexContent = this.pageList.slice(0, 1)[0]
+          this.linkList = this.linkList.slice(index, index + 1)
+          this.pageList = this.pageList.slice(index, index + 1)
+          this.linkList.unshift(indexKey)
+          this.pageList.unshift(indexContent)
+          this.activePage = this.linkList[1]
+        }
+      },
+      closeLeft(pageKey) {
+        if (pageKey == indexKey) {
+          return
+        }
+        let tempList = [...this.pageList]
+        let indexContent = tempList.slice(0, 1)[0]
+        let index = this.linkList.indexOf(pageKey)
+        this.linkList = this.linkList.slice(index)
+        this.pageList = this.pageList.slice(index)
+        this.linkList.unshift(indexKey)
+        this.pageList.unshift(indexContent)
+        if (this.linkList.indexOf(this.activePage) < 0) {
+          this.activePage = this.linkList[0]
+        }
+      },
+      closeRight(pageKey) {
+        let index = this.linkList.indexOf(pageKey)
+        this.linkList = this.linkList.slice(0, index + 1)
+        this.pageList = this.pageList.slice(0, index + 1)
+        if (this.linkList.indexOf(this.activePage < 0)) {
+          this.activePage = this.linkList[this.linkList.length - 1]
+        }
+      },
+      //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
+      dynamicRouterShow(key,title){
+        let keyIndex = this.linkList.indexOf(key)
+        if(keyIndex>=0){
+          let currRouter = this.pageList[keyIndex]
+          let meta = Object.assign({},currRouter.meta,{title:title})
+          this.pageList.splice(keyIndex, 1, Object.assign({},currRouter,{meta:meta}))
+        }
+      }
+      //update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
+    }
+  }
+</script>
+
+<style lang="scss">
+
+  /*
+ * The following styles are auto-applied to elements with
+ * transition="page-transition" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the page transition by editing
+ * these styles.
+ */
+
+  .page-transition-enter {
+    opacity: 0;
+  }
+
+  .page-transition-leave-active {
+    opacity: 0;
+  }
+
+  .page-transition-enter .page-transition-container,
+  .page-transition-leave-active .page-transition-container {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  /*美化弹出Tab样式*/
+  .ant-tabs-nav-container {
+    margin-top: 4px;
+  }
+
+  /* 修改 ant-tabs 样式 */
+  .tab-layout-tabs.ant-tabs {
+    border-bottom: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    background-color: white;
+    padding: 0 20px;
+
+    .ant-tabs-bar {
+      margin: 4px 0 0;
+      border: none;
+    }
+
+  }
+
+  .ant-tabs {
+
+    &.ant-tabs-card .ant-tabs-tab {
+
+      padding: 0 24px !important;
+      background-color: white !important;
+      margin-right: 10px !important;
+
+      .ant-tabs-close-x {
+        width: 12px !important;
+        height: 12px !important;
+        opacity: 0 !important;
+        cursor: pointer !important;
+        font-size: 12px !important;
+        margin: 0 !important;
+        position: absolute;
+        top: 36%;
+        right: 6px;
+      }
+
+      &:hover .ant-tabs-close-x {
+        opacity: 1 !important;
+      }
+
+    }
+
+  }
+
+  .ant-tabs.ant-tabs-card > .ant-tabs-bar {
+    .ant-tabs-tab {
+      border: none !important;
+      border-bottom: 1px solid transparent !important;
+    }
+    .ant-tabs-tab-active {
+      border-color: #1890ff !important;
+    }
+  }
+
+
+</style>

ant-design-vue-jeecg/src/components/layouts/UserLayout.vue

@@ -0,0 +1,150 @@
+<template>
+  <div id="userLayout" :class="['user-layout-wrapper', device]">
+    <div class="container">
+      <div class="top">
+        <div class="header">
+          <a href="/">
+            <img src="~@/assets/logo.svg" class="logo" alt="logo">
+            <span class="title">Jeecg Boot</span>
+          </a>
+        </div>
+        <div class="desc">
+          Jeecg Boot 是中国最具影响力的 企业级 快速开发平台
+        </div>
+      </div>
+
+      <route-view></route-view>
+
+      <div class="footer">
+        <div class="links">
+          <a href="http://jeecg-boot.mydoc.io" target="_blank">帮助</a>
+          <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>
+          <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">条款</a>
+        </div>
+        <div class="copyright">
+          Copyright &copy; 2019 <a href="http://www.jeecg.org" target="_blank">JEECG开源社区</a> 出品
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import RouteView from "@/components/layouts/RouteView"
+  import { mixinDevice } from '@/utils/mixin.js'
+
+  export default {
+    name: "UserLayout",
+    components: { RouteView },
+    mixins: [mixinDevice],
+    data () {
+      return {}
+    },
+    mounted () {
+      document.body.classList.add('userLayout')
+    },
+    beforeDestroy () {
+      document.body.classList.remove('userLayout')
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  #userLayout.user-layout-wrapper {
+    height: 100%;
+
+    &.mobile {
+      .container {
+        .main {
+          max-width: 368px;
+          width: 98%;
+        }
+      }
+    }
+
+    .container {
+      width: 100%;
+      min-height: 100%;
+      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+      background-size: 100%;
+      padding: 110px 0 144px;
+      position: relative;
+
+      a {
+        text-decoration: none;
+      }
+
+      .top {
+        text-align: center;
+
+        .header {
+          height: 44px;
+          line-height: 44px;
+
+          .badge {
+            position: absolute;
+            display: inline-block;
+            line-height: 1;
+            vertical-align: middle;
+            margin-left: -12px;
+            margin-top: -10px;
+            opacity: 0.8;
+          }
+
+          .logo {
+            height: 44px;
+            vertical-align: top;
+            margin-right: 16px;
+            border-style: none;
+          }
+
+          .title {
+            font-size: 33px;
+            color: rgba(0, 0, 0, .85);
+            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            font-weight: 600;
+            position: relative;
+            top: 2px;
+          }
+        }
+        .desc {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.45);
+          margin-top: 12px;
+          margin-bottom: 40px;
+        }
+      }
+
+      .main {
+        min-width: 260px;
+        width: 368px;
+        margin: 0 auto;
+      }
+
+      .footer {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        padding: 0 16px;
+        margin: 48px 0 24px;
+        text-align: center;
+
+        .links {
+          margin-bottom: 8px;
+          font-size: 14px;
+          a {
+            color: rgba(0, 0, 0, 0.45);
+            transition: all 0.3s;
+            &:not(:last-child) {
+              margin-right: 40px;
+            }
+          }
+        }
+        .copyright {
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 14px;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import UserLayout from '@/components/layouts/UserLayout'
+import BlankLayout from '@/components/layouts/BlankLayout'
+import BasicLayout from '@/components/layouts/BasicLayout'
+import RouteView from '@/components/layouts/RouteView'
+import PageView from '@/components/layouts/PageView'
+import TabLayout from '@/components/layouts/TabLayout'
+
+export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView, TabLayout }