vue3版本初版上线自测已可用

2021-08-26 12:45:41 +08:00
parent adc7f567f9
commit 265e42f513
81 changed files with 4478 additions and 18639 deletions
@@ -1,11 +1,11 @@
 <template>
-  <el-submenu ref="subMenu" :popper-append-to-body="false" :index="routerInfo.name">
-    <template slot="title">
+  <el-sub-menu ref="subMenu" :index="routerInfo.name">
+    <template #title>
      <i :class="'el-icon-'+routerInfo.meta.icon" />
-      <span slot="title">{{ routerInfo.meta.title }}</span>
+      <span>{{ routerInfo.meta.title }}</span>
    </template>
    <slot />
-  </el-submenu>
+  </el-sub-menu>
 </template>

 <script>
@@ -1,7 +1,9 @@
 <template>
  <el-menu-item :index="routerInfo.name" :route="{parameters:routerInfo.parameters}">
    <i :class="'el-icon-'+routerInfo.meta.icon" />
-    <span slot="title">{{ routerInfo.meta.title }}</span>
+    <template #title>
+      <span>{{ routerInfo.meta.title }}</span>
+    </template>
  </el-menu-item>
 </template>

@@ -2,9 +2,9 @@
  <div class="router-history">
    <el-tabs
      v-model="activeValue"
-      :closable="!(historys.length===1&&this.$route.name===defaultRouter)"
+      :closable="!(historys.length===1&&$route.name===defaultRouter)"
      type="card"
-      @contextmenu.prevent.native="openContextMenu($event)"
+      @contextmenu.prevent="openContextMenu($event)"
      @tab-click="changeTab"
      @tab-remove="removeTab"
    >
@@ -16,7 +16,9 @@
        :tab="item"
        class="gva-tab"
      >
-        <span slot="label" :style="{color: activeValue===name(item)?activeColor:'#333'}"><i class="dot" :style="{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span>
+        <template #label>
+          <span :style="{color: activeValue===name(item)?activeColor:'#333'}"><i class="dot" :style="{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span>
+        </template>
      </el-tab-pane>
    </el-tabs>

@@ -32,6 +34,8 @@

 <script>
 import { mapGetters } from 'vuex'
+import { emitter } from '@/utils/bus.js'
+
 const getFmtString = (item) => {
  return item.name +
      JSON.stringify(item.query) +
@@ -75,15 +79,15 @@ export default {
      sessionStorage.setItem('historys', JSON.stringify(this.historys))
      this.activeValue = window.sessionStorage.getItem('activeValue')
      if (now && to && now.name === to.name) {
-        this.$bus.$emit('reload')
+        emitter.emit('reload')
      }
    }
  },
  created() {
-    this.$bus.on('mobile', isMobile => {
+    emitter.on('mobile', isMobile => {
      this.isMobile = isMobile
    })
-    this.$bus.on('collapse', isCollapse => {
+    emitter.on('collapse', isCollapse => {
      this.isCollapse = isCollapse
    })
    const initHistorys = [
@@ -107,8 +111,8 @@ export default {
  },

  beforeDestroy() {
-    this.$bus.off('collapse')
-    this.$bus.off('mobile')
+    emitter.off('collapse')
+    emitter.off('mobile')
  },
  methods: {
    name(item) {
@@ -120,7 +124,6 @@ export default {
      }
      let id = ''
      if (e.srcElement.nodeName === 'SPAN') {
-        console.log(e)
        id = e.srcElement.offsetParent.id
      } else {
        id = e.srcElement.id
@@ -236,7 +239,7 @@ export default {
      )
    },
    changeTab(component) {
-      const tab = component.$attrs.tab
+      const tab = component.instance.attrs.tab
      this.$router.push({
        name: tab.name,
        query: tab.query,
@@ -4,7 +4,7 @@
      <transition :duration="{ enter: 800, leave: 100 }" mode="out-in" name="el-fade-in-linear">
        <el-menu
          :collapse="isCollapse"
-          :collapse-transition="true"
+          :collapse-transition="false"
          :default-active="active"
          :background-color="sideMode"
          :active-text-color="activeColor"
@@ -25,6 +25,8 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent'
+import { emitter } from '@/utils/bus.js'
+
 export default {
  name: 'Aside',
  components: {
@@ -52,12 +54,12 @@ export default {
      this.isCollapse = !this.isCollapse
    }

-    this.$bus.on('collapse', item => {
+    emitter.on('collapse', item => {
      this.isCollapse = item
    })
  },
  beforeDestroy() {
-    this.$bus.off('collapse')
+    emitter.off('collapse')
  },
  methods: {
    ...mapMutations('history', ['addHistory']),
@@ -84,13 +86,13 @@ export default {
 </script>

 <style lang="scss">
-.el-submenu__title,.el-menu-item{
+.el-sub-menu__title,.el-menu-item{
  i{
    color: inherit !important;
  }
 }

-.el-submenu__title:hover,.el-menu-item:hover{
+.el-sub-menu__title:hover,.el-menu-item:hover{
  i{
    color: inherit !important;
  }
@@ -1,7 +1,7 @@
 <template>
  <el-container class="layout-cont">
    <el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
-      <el-row :class="[isShadowBg?'shadowBg':'']" @click.native="changeShadow()" />
+      <el-row :class="[isShadowBg?'shadowBg':'']" @click="changeShadow()" />
      <el-aside class="main-cont main-left">
        <div class="tilte" :style="{background: backgroundColor}">
          <img alt class="logoimg" :src="$GIN_VUE_ADMIN.appLogo">
@@ -18,52 +18,59 @@
          >
            <el-row>
              <!-- :xs="8" :sm="6" :md="4" :lg="3" :xl="1" -->
-              <el-header class="header-cont">
-                <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1">
-                  <div class="menu-total" @click="totalCollapse">
-                    <i v-if="isCollapse" class="el-icon-s-unfold" />
-                    <i v-else class="el-icon-s-fold" />
-                  </div>
-                </el-col>
-                <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14">
-                  <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-                    <el-breadcrumb-item
-                      v-for="item in matched.slice(1,matched.length)"
-                      :key="item.path"
-                    >{{ item.meta.title }}</el-breadcrumb-item>
-                  </el-breadcrumb>
-                </el-col>
-                <el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
-                  <div class="fl-right right-box">
-                    <Search />
-                    <Screenfull class="screenfull" :style="{cursor:'pointer'}" />
-                    <el-dropdown>
-                      <span class="header-avatar" style="cursor: pointer">
-                        <CustomPic />
-                        <span style="margin-left: 5px">{{ userInfo.nickName }}</span>
-                        <i class="el-icon-arrow-down" />
-                      </span>
-                      <el-dropdown-menu slot="dropdown" class="dropdown-group">
-                        <el-dropdown-item>
-                          <span style="font-weight: 600;">
-                            当前角色：{{ userInfo.authority.authorityName }}
-                          </span>
-                        </el-dropdown-item>
-                        <template v-if="userInfo.authorities">
-                          <el-dropdown-item v-for="item in userInfo.authorities.filter(i=>i.authorityId!==userInfo.authorityId)" :key="item.authorityId" @click.native="changeUserAuth(item.authorityId)">
-                            <span>
-                              切换为：{{ item.authorityName }}
+              <el-col>
+                <el-header class="header-cont">
+                  <el-row class="pd-0">
+                    <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1">
+                      <div class="menu-total" @click="totalCollapse">
+                        <i v-if="isCollapse" class="el-icon-s-unfold" />
+                        <i v-else class="el-icon-s-fold" />
+                      </div>
+                    </el-col>
+                    <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14">
+                      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+                        <el-breadcrumb-item
+                          v-for="item in matched.slice(1,matched.length)"
+                          :key="item.path"
+                        >{{ item.meta.title }}</el-breadcrumb-item>
+                      </el-breadcrumb>
+                    </el-col>
+                    <el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
+                      <div class="fl-right right-box">
+                        <Search />
+                        <Screenfull class="screenfull" :style="{cursor:'pointer'}" />
+                        <el-dropdown>
+                          <div class="dp-flex justify-content-center align-items height-full width-full">
+                            <span class="header-avatar" style="cursor: pointer">
+                              <CustomPic />
+                              <span style="margin-left: 5px">{{ userInfo.nickName }}</span>
+                              <i class="el-icon-arrow-down" />
                            </span>
-                          </el-dropdown-item>
-                        </template>
-                        <el-dropdown-item icon="el-icon-s-custom" @click.native="toPerson">个人信息</el-dropdown-item>
-                        <el-dropdown-item icon="el-icon-table-lamp" @click.native="LoginOut">登 出</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </el-dropdown>
-                  </div>
-                </el-col>
-
-              </el-header>
+                          </div>
+                          <template #dropdown>
+                            <el-dropdown-menu class="dropdown-group">
+                              <el-dropdown-item>
+                                <span style="font-weight: 600;">
+                                  当前角色：{{ userInfo.authority.authorityName }}
+                                </span>
+                              </el-dropdown-item>
+                              <template v-if="userInfo.authorities">
+                                <el-dropdown-item v-for="item in userInfo.authorities.filter(i=>i.authorityId!==userInfo.authorityId)" :key="item.authorityId" @click="changeUserAuth(item.authorityId)">
+                                  <span>
+                                    切换为：{{ item.authorityName }}
+                                  </span>
+                                </el-dropdown-item>
+                              </template>
+                              <el-dropdown-item icon="el-icon-s-custom" @click="toPerson">个人信息</el-dropdown-item>
+                              <el-dropdown-item icon="el-icon-table-lamp" @click="LoginOut">登 出</el-dropdown-item>
+                            </el-dropdown-menu>
+                          </template>
+                        </el-dropdown>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </el-header>
+              </el-col>
            </el-row>
            <!-- 当前面包屑用路由自动生成可根据需求修改 -->
            <!--
@@ -71,14 +78,19 @@
            <HistoryComponent />
          </div>
        </transition>
-        <transition mode="out-in" name="el-fade-in-linear">
-          <keep-alive>
-            <router-view v-if="$route.meta.keepAlive && reloadFlag" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" />
-          </keep-alive>
-        </transition>
-        <transition mode="out-in" name="el-fade-in-linear">
-          <router-view v-if="!$route.meta.keepAlive && reloadFlag" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" />
-        </transition>
+        <router-view v-if="$route.meta.keepAlive && reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
+          <transition mode="out-in" name="el-fade-in-linear">
+            <keep-alive>
+              <component :is="Component" />
+            </keep-alive>
+          </transition>
+        </router-view>
+        <router-view v-if="!$route.meta.keepAlive && reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
+          <transition mode="out-in" name="el-fade-in-linear">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+
        <BottomInfo />
        <setting />
      </el-main>
@@ -97,6 +109,7 @@ import { mapGetters, mapActions } from 'vuex'
 import CustomPic from '@/components/customPic'
 import Setting from './setting'
 import { setUserAuthority } from '@/api/user'
+import { emitter } from '@/utils/bus.js'
 export default {
  name: 'Layout',
  components: {
@@ -162,13 +175,13 @@ export default {
      this.isSider = true
      this.isCollapse = false
    }
-    this.$bus.emit('collapse', this.isCollapse)
-    this.$bus.emit('mobile', this.isMobile)
-    this.$bus.on('reload', this.reload)
-    this.$bus.on('showLoading', () => {
+    emitter.emit('collapse', this.isCollapse)
+    emitter.emit('mobile', this.isMobile)
+    emitter.on('reload', this.reload)
+    emitter.on('showLoading', () => {
      this.loadingFlag = true
    })
-    this.$bus.on('closeLoading', () => {
+    emitter.on('closeLoading', () => {
      this.loadingFlag = false
    })
    window.onresize = () => {
@@ -187,8 +200,8 @@ export default {
          this.isSider = true
          this.isCollapse = false
        }
-        this.$bus.emit('collapse', this.isCollapse)
-        this.$bus.emit('mobile', this.isMobile)
+        emitter.emit('collapse', this.isCollapse)
+        emitter.emit('mobile', this.isMobile)
      })()
    }
  },
@@ -212,7 +225,7 @@ export default {
      this.isCollapse = !this.isCollapse
      this.isSider = !this.isCollapse
      this.isShadowBg = !this.isCollapse
-      this.$bus.emit('collapse', this.isCollapse)
+      emitter.emit('collapse', this.isCollapse)
    },
    toPerson() {
      this.$router.push({ name: 'person' })
@@ -33,6 +33,7 @@

 <script>
 import { mapGetters } from 'vuex'
+import { emitter } from '@/utils/bus.js'

 export default {
  name: 'SearchComponent',
@@ -44,8 +45,9 @@ export default {
    }
  },
  computed: {
-    ...mapGetters('router', ['routerList'])
+    ...mapGetters('router', ['routerList']),
  },
+
  methods: {
    changeRouter() {
      this.$router.push({ name: this.value })
@@ -62,7 +64,7 @@ export default {
    },
    handleReload() {
      this.reload = true
-      this.$bus.$emit('reload')
+      emitter.emit('reload')
      setTimeout(() => {
        this.reload = false
      }, 500)
@@ -2,8 +2,8 @@
  <div>
    <el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawer" />
    <el-drawer
+      v-model="drawer"
      title="系统配置"
-      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >