vue2-client 1.3.19 → 1.3.20

package/src/layouts/AdminLayout.vue

@@ -1,174 +1,174 @@
-<template>
-  <a-layout :class="['admin-layout', 'beauty-scroll']">
-    <drawer v-if="isMobile" v-model="drawerOpen">
-      <side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
-    </drawer>
-    <side-menu
-      :class="[fixedSideBar ? 'fixed-side' : '']"
-      :theme="theme.mode"
-      v-else-if="layout === 'side' || layout === 'mix'"
-      :menuData="sideMenuData"
-      :collapsed="collapsed"
-      :collapsible="true" />
-    <div v-if="fixedSideBar && !isMobile" :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`" class="virtual-side"></div>
-    <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
-      <div class="setting" slot="handler">
-        <a-icon :type="showSetting ? 'close' : 'setting'"/>
-      </div>
-      <setting />
-    </drawer>
-    <a-layout class="admin-layout-main beauty-scroll">
-      <admin-header :class="[{'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" :style="headerStyle" :menuData="headMenuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
-      <a-layout-header :class="['virtual-header', {'fixed-tabs' : fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" v-show="fixedHeader"></a-layout-header>
-      <a-layout-content class="admin-layout-content" :style="`min-height: ${minHeight}px;`">
-        <div style="position: relative">
-          <slot></slot>
-        </div>
-      </a-layout-content>
-      <a-layout-footer style="padding: 0">
-        <page-footer :link-list="footerLinks" :copyright="copyright" />
-      </a-layout-footer>
-    </a-layout>
-  </a-layout>
-</template>
-
-<script>
-import AdminHeader from './header/AdminHeader'
-import PageFooter from './footer/PageFooter'
-import Drawer from '../components/tool/Drawer'
-import SideMenu from '../components/menu/SideMenu'
-import Setting from '../components/setting/Setting'
-import { mapState, mapMutations, mapGetters } from 'vuex'
-
-// const minHeight = window.innerHeight - 64 - 122
-
-export default {
-  name: 'AdminLayout',
-  components: { Setting, SideMenu, Drawer, PageFooter, AdminHeader },
-  data () {
-    return {
-      minHeight: window.innerHeight - 64 - 1,
-      collapsed: false,
-      showSetting: false,
-      drawerOpen: false
-    }
-  },
-  provide () {
-    return {
-      adminLayout: this
-    }
-  },
-  watch: {
-    $route (val) {
-      this.setActivated(val)
-    },
-    layout () {
-      this.setActivated(this.$route)
-    },
-    isMobile (val) {
-      if (!val) {
-        this.drawerOpen = false
-      }
-    }
-  },
-  computed: {
-    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar',
-      'fixedTabs', 'hideSetting', 'multiPage']),
-    ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
-    sideMenuWidth () {
-      return this.collapsed ? '80px' : '256px'
-    },
-    headerStyle () {
-      const width = (this.fixedHeader && this.layout !== 'head' && !this.isMobile) ? `calc(100% - ${this.sideMenuWidth})` : '100%'
-      const position = this.fixedHeader ? 'fixed' : 'static'
-      return `width: ${width}; position: ${position};`
-    },
-    headMenuData () {
-      const { layout, menuData, firstMenu } = this
-      return layout === 'mix' ? firstMenu : menuData
-    },
-    sideMenuData () {
-      const { layout, menuData, subMenu } = this
-      return layout === 'mix' ? subMenu : menuData
-    }
-  },
-  methods: {
-    ...mapMutations('setting', ['correctPageMinHeight', 'setActivatedFirst']),
-    toggleCollapse () {
-      this.collapsed = !this.collapsed
-    },
-    onMenuSelect () {
-      this.toggleCollapse()
-    },
-    setActivated (route) {
-      if (this.layout === 'mix') {
-        let matched = route.matched
-        matched = matched.slice(0, matched.length - 1)
-        const { firstMenu } = this
-        for (const menu of firstMenu) {
-          if (matched.findIndex(item => item.path === menu.fullPath) !== -1) {
-            this.setActivatedFirst(menu.fullPath)
-            break
-          }
-        }
-      }
-    }
-  },
-  created () {
-    this.correctPageMinHeight(this.minHeight - 24)
-    this.setActivated(this.$route)
-  },
-  beforeDestroy () {
-    this.correctPageMinHeight(-this.minHeight + 24)
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .admin-layout{
-    .side-menu{
-      &.fixed-side{
-        position: fixed;
-        height: 100vh;
-        left: 0;
-        top: 0;
-      }
-    }
-    .virtual-side{
-      transition: all 0.2s;
-    }
-    .virtual-header{
-      transition: all 0.2s;
-      opacity: 0;
-      &.fixed-tabs.multi-page:not(.fixed-header){
-        height: 0;
-      }
-    }
-    .admin-layout-main{
-      .admin-header{
-        top: 0;
-        right: 0;
-        overflow: hidden;
-        transition: all 0.2s;
-        &.fixed-tabs.multi-page:not(.fixed-header){
-          height: 0;
-        }
-      }
-    }
-    .admin-layout-content{
-      padding: 24px;
-      /*overflow-x: hidden;*/
-      /*min-height: calc(100vh - 64px - 122px);*/
-    }
-    .setting{
-      background-color: @primary-color;
-      color: @base-bg-color;
-      border-radius: 5px 0 0 5px;
-      line-height: 40px;
-      font-size: 22px;
-      width: 40px;
-      height: 40px;
-      box-shadow: -2px 0 8px @shadow-color;
-    }
-  }
-</style>
+<template>
+  <a-layout :class="['admin-layout', 'beauty-scroll']">
+    <drawer v-if="isMobile" v-model="drawerOpen">
+      <side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
+    </drawer>
+    <side-menu
+      :class="[fixedSideBar ? 'fixed-side' : '']"
+      :theme="theme.mode"
+      v-else-if="layout === 'side' || layout === 'mix'"
+      :menuData="sideMenuData"
+      :collapsed="collapsed"
+      :collapsible="true" />
+    <div v-if="fixedSideBar && !isMobile" :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`" class="virtual-side"></div>
+    <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
+      <div class="setting" slot="handler">
+        <a-icon :type="showSetting ? 'close' : 'setting'"/>
+      </div>
+      <setting />
+    </drawer>
+    <a-layout class="admin-layout-main beauty-scroll">
+      <admin-header :class="[{'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" :style="headerStyle" :menuData="headMenuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
+      <a-layout-header :class="['virtual-header', {'fixed-tabs' : fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" v-show="fixedHeader"></a-layout-header>
+      <a-layout-content class="admin-layout-content" :style="`min-height: ${minHeight}px;`">
+        <div style="position: relative">
+          <slot></slot>
+        </div>
+      </a-layout-content>
+      <a-layout-footer style="padding: 0">
+        <page-footer :link-list="footerLinks" :copyright="copyright" />
+      </a-layout-footer>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script>
+import AdminHeader from './header/AdminHeader'
+import PageFooter from './footer/PageFooter'
+import Drawer from '../components/tool/Drawer'
+import SideMenu from '../components/menu/SideMenu'
+import Setting from '../components/setting/Setting'
+import { mapState, mapMutations, mapGetters } from 'vuex'
+
+// const minHeight = window.innerHeight - 64 - 122
+
+export default {
+  name: 'AdminLayout',
+  components: { Setting, SideMenu, Drawer, PageFooter, AdminHeader },
+  data () {
+    return {
+      minHeight: window.innerHeight - 64 - 1,
+      collapsed: false,
+      showSetting: false,
+      drawerOpen: false
+    }
+  },
+  provide () {
+    return {
+      adminLayout: this
+    }
+  },
+  watch: {
+    $route (val) {
+      this.setActivated(val)
+    },
+    layout () {
+      this.setActivated(this.$route)
+    },
+    isMobile (val) {
+      if (!val) {
+        this.drawerOpen = false
+      }
+    }
+  },
+  computed: {
+    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar',
+      'fixedTabs', 'hideSetting', 'multiPage']),
+    ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
+    sideMenuWidth () {
+      return this.collapsed ? '80px' : '256px'
+    },
+    headerStyle () {
+      const width = (this.fixedHeader && this.layout !== 'head' && !this.isMobile) ? `calc(100% - ${this.sideMenuWidth})` : '100%'
+      const position = this.fixedHeader ? 'fixed' : 'static'
+      return `width: ${width}; position: ${position};`
+    },
+    headMenuData () {
+      const { layout, menuData, firstMenu } = this
+      return layout === 'mix' ? firstMenu : menuData
+    },
+    sideMenuData () {
+      const { layout, menuData, subMenu } = this
+      return layout === 'mix' ? subMenu : menuData
+    }
+  },
+  methods: {
+    ...mapMutations('setting', ['correctPageMinHeight', 'setActivatedFirst']),
+    toggleCollapse () {
+      this.collapsed = !this.collapsed
+    },
+    onMenuSelect () {
+      this.toggleCollapse()
+    },
+    setActivated (route) {
+      if (this.layout === 'mix') {
+        let matched = route.matched
+        matched = matched.slice(0, matched.length - 1)
+        const { firstMenu } = this
+        for (const menu of firstMenu) {
+          if (matched.findIndex(item => item.path === menu.fullPath) !== -1) {
+            this.setActivatedFirst(menu.fullPath)
+            break
+          }
+        }
+      }
+    }
+  },
+  created () {
+    this.correctPageMinHeight(this.minHeight - 24)
+    this.setActivated(this.$route)
+  },
+  beforeDestroy () {
+    this.correctPageMinHeight(-this.minHeight + 24)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .admin-layout{
+    .side-menu{
+      &.fixed-side{
+        position: fixed;
+        height: 100vh;
+        left: 0;
+        top: 0;
+      }
+    }
+    .virtual-side{
+      transition: all 0.2s;
+    }
+    .virtual-header{
+      transition: all 0.2s;
+      opacity: 0;
+      &.fixed-tabs.multi-page:not(.fixed-header){
+        height: 0;
+      }
+    }
+    .admin-layout-main{
+      .admin-header{
+        top: 0;
+        right: 0;
+        overflow: hidden;
+        transition: all 0.2s;
+        &.fixed-tabs.multi-page:not(.fixed-header){
+          height: 0;
+        }
+      }
+    }
+    .admin-layout-content{
+      padding: 24px;
+      /*overflow-x: hidden;*/
+      /*min-height: calc(100vh - 64px - 122px);*/
+    }
+    .setting{
+      background-color: @primary-color;
+      color: @base-bg-color;
+      border-radius: 5px 0 0 5px;
+      line-height: 40px;
+      font-size: 22px;
+      width: 40px;
+      height: 40px;
+      box-shadow: -2px 0 8px @shadow-color;
+    }
+  }
+</style>

package/src/layouts/header/AdminHeader.vue

@@ -1,104 +1,104 @@
-<template>
-  <a-layout-header :class="[headerTheme, 'admin-header']">
-    <div :class="['admin-header-wide', layout, pageWidth]">
-      <router-link v-if="isMobile || layout === 'head'" :class="['logo', isMobile ? null : 'pc', headerTheme]" to="/">
-        <img src="@vue2-client/assets/img/logo.png" width="32" alt=""/>
-        <h1 v-if="!isMobile">{{ systemName }}</h1>
-      </router-link>
-      <a-divider v-if="isMobile" type="vertical" />
-      <a-icon v-if="layout !== 'head'" :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggleCollapse"/>
-      <div v-if="layout !== 'side' && !isMobile" :style="`width: ${menuWidth};`" class="admin-header-menu">
-        <i-menu :options="menuData" :theme="headerTheme" class="head-menu" mode="horizontal" @select="onSelect"/>
-      </div>
-      <div :class="['admin-header-right', headerTheme]">
-        <header-search class="header-item" @active="val => searchActive = val" />
-        <a-tooltip class="header-item" placement="bottom" title="清理查询缓存" >
-          <a @click="handleToClearCache">
-            <a-icon type="reload" />
-          </a>
-        </a-tooltip>
-        <header-notice class="header-item"/>
-        <header-avatar class="header-item"/>
-        <a-dropdown class="lang header-item">
-          <div>
-            <a-icon type="global"/> {{ langAlias }}
-          </div>
-          <a-menu slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
-            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
-          </a-menu>
-        </a-dropdown>
-      </div>
-    </div>
-  </a-layout-header>
-</template>
-
-<script>
-import HeaderSearch from './HeaderSearch'
-import HeaderNotice from './HeaderNotice'
-import HeaderAvatar from './HeaderAvatar'
-import IMenu from '@vue2-client/components/menu/menu'
-import { mapState, mapMutations } from 'vuex'
-import { Modal } from 'ant-design-vue'
-import { indexedDB } from '@vue2-client/utils/indexedDB'
-
-export default {
-  name: 'AdminHeader',
-  components: { IMenu, HeaderAvatar, HeaderNotice, HeaderSearch },
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['collapsed', 'menuData'],
-  data () {
-    return {
-      langList: [
-        { key: 'CN', name: '简体中文', alias: '简体' },
-        { key: 'HK', name: '繁體中文', alias: '繁體' },
-        { key: 'US', name: 'English', alias: 'English' }
-      ],
-      searchActive: false
-    }
-  },
-  computed: {
-    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
-    headerTheme () {
-      if (this.layout === 'side' && this.theme.mode === 'dark' && !this.isMobile) {
-        return 'light'
-      }
-      return this.theme.mode
-    },
-    langAlias () {
-      const lang = this.langList.find(item => item.key === this.lang)
-      return lang.alias
-    },
-    menuWidth () {
-      const { layout, searchActive } = this
-      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
-      const extraWidth = searchActive ? '600px' : '400px'
-      return `calc(${headWidth} - ${extraWidth})`
-    }
-  },
-  methods: {
-    toggleCollapse () {
-      this.$emit('toggleCollapse')
-    },
-    onSelect (obj) {
-      this.$emit('menuSelect', obj)
-    },
-    handleToClearCache () {
-      Modal.confirm({
-        title: '信息',
-        content: '您确定要清除查询配置缓存吗？',
-        onOk: () => {
-          indexedDB.clear(() => {
-            location.reload()
-          })
-        },
-        onCancel () {}
-      })
-    },
-    ...mapMutations('setting', ['setLang'])
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import "index";
-</style>
+<template>
+  <a-layout-header :class="[headerTheme, 'admin-header']">
+    <div :class="['admin-header-wide', layout, pageWidth]">
+      <router-link v-if="isMobile || layout === 'head'" :class="['logo', isMobile ? null : 'pc', headerTheme]" to="/">
+        <img src="@vue2-client/assets/img/logo.png" width="32" alt=""/>
+        <h1 v-if="!isMobile">{{ systemName }}</h1>
+      </router-link>
+      <a-divider v-if="isMobile" type="vertical" />
+      <a-icon v-if="layout !== 'head'" :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggleCollapse"/>
+      <div v-if="layout !== 'side' && !isMobile" :style="`width: ${menuWidth};`" class="admin-header-menu">
+        <i-menu :options="menuData" :theme="headerTheme" class="head-menu" mode="horizontal" @select="onSelect"/>
+      </div>
+      <div :class="['admin-header-right', headerTheme]">
+        <header-search class="header-item" @active="val => searchActive = val" />
+        <a-tooltip class="header-item" placement="bottom" title="清理查询缓存" >
+          <a @click="handleToClearCache">
+            <a-icon type="reload" />
+          </a>
+        </a-tooltip>
+        <header-notice class="header-item"/>
+        <header-avatar class="header-item"/>
+        <a-dropdown class="lang header-item">
+          <div>
+            <a-icon type="global"/> {{ langAlias }}
+          </div>
+          <a-menu slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
+            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </div>
+    </div>
+  </a-layout-header>
+</template>
+
+<script>
+import HeaderSearch from './HeaderSearch'
+import HeaderNotice from './HeaderNotice'
+import HeaderAvatar from './HeaderAvatar'
+import IMenu from '@vue2-client/components/menu/menu'
+import { mapState, mapMutations } from 'vuex'
+import { Modal } from 'ant-design-vue'
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+
+export default {
+  name: 'AdminHeader',
+  components: { IMenu, HeaderAvatar, HeaderNotice, HeaderSearch },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['collapsed', 'menuData'],
+  data () {
+    return {
+      langList: [
+        { key: 'CN', name: '简体中文', alias: '简体' },
+        { key: 'HK', name: '繁體中文', alias: '繁體' },
+        { key: 'US', name: 'English', alias: 'English' }
+      ],
+      searchActive: false
+    }
+  },
+  computed: {
+    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
+    headerTheme () {
+      if (this.layout === 'side' && this.theme.mode === 'dark' && !this.isMobile) {
+        return 'light'
+      }
+      return this.theme.mode
+    },
+    langAlias () {
+      const lang = this.langList.find(item => item.key === this.lang)
+      return lang.alias
+    },
+    menuWidth () {
+      const { layout, searchActive } = this
+      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
+      const extraWidth = searchActive ? '600px' : '400px'
+      return `calc(${headWidth} - ${extraWidth})`
+    }
+  },
+  methods: {
+    toggleCollapse () {
+      this.$emit('toggleCollapse')
+    },
+    onSelect (obj) {
+      this.$emit('menuSelect', obj)
+    },
+    handleToClearCache () {
+      Modal.confirm({
+        title: '信息',
+        content: '您确定要清除查询配置缓存吗？',
+        onOk: () => {
+          indexedDB.clear(() => {
+            location.reload()
+          })
+        },
+        onCancel () {}
+      })
+    },
+    ...mapMutations('setting', ['setLang'])
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index";
+</style>