element tpmplate admin 使用记录

1.关闭mock.js

进入目录下的vue.config.js

注释掉这一行

2.使用 EIconPicker 不显示图标

手动 package.json 里面修改vue的版本 同时修改 vue-template-compiler 为相同的版本.后者在devdepen....里面. 修改为2.1.14然后npm install

3.修改左上角logo和系统名

  mounted() {
    this.title = process.env.VUE_APP_SYSTEM_NAME
  }

require( '@/assets/logo.png' )

4有时管理员退出登陆 再次登陆普通用户 会加载上一次的页面 普通用户没有时会报404

找到 

 去掉划红线的部分 这样重新登陆就不会 跳转了

5.添加tagview

一、从vue-element-admin复制文件：

vue-admin-template\src\layout\components\TagsView  文件夹
vue-admin-template\src\store\modules\tagsView.js

二、修改 vue-admin-template\src\layout\components\AppMain.vue ：AppMain.vue文件，新增以下内容

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
     <!-- <router-view :key="key" />-->
      <keep-alive :include="cachedViews">
        <router-view></router-view>
      </keep-alive>
    </transition>
  </section>
</template>

export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    }/*,
    key() {
      return this.$route.path
    }*/
  }
}

<style lang="scss" scoped>
  .app-main {
    /*50 = navbar  */
    min-height: calc(100vh - 50px);
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .fixed-header+.app-main {
    /*padding-top: 50px;*/

    /* 84 = navbar + tags-view = 50 + 34 */
    padding-top: 84px;
  }

  .hasTagsView {
    .app-main {
      /* 84 = navbar + tags-view = 50 + 34 */
      min-height: calc(100vh - 84px);
    }
  }
</style>

三、修改 vue-admin-template\src\store\getters.js，增加：

visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,

四、修改vue-admin-template\src\layout\components\index.js，新增如下行：

export { default as TagsView } from './TagsView'

五、vue-admin-template\src\layout\index.vue

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view />    <!-- 此处增加tag-->
      </div>
      <app-main />
    </div>
  </div>
</template>

import { Navbar, Sidebar, AppMain, TagsView } from './components'

components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView
  },

六、修改 vue-admin-template\src\store\index.js

import tagsView from './modules/tagsView'

const store = new Vuex.Store({
  modules: {
    app,
    permission,
    settings,
    tagsView,
    user
  },
  getters
})

七、修改vue-admin-template\src\store\modules\settings.js

const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings

const state = {
  showSettings: showSettings,
  tagsView: tagsView,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

八、修改vue-admin-template\src\settings.js  添加

tagsView: true,

九、f5刷新页面时保存所有的路由

        //防止刷新后tabview删除
    beforeUnload() {
      // 监听页面刷新
      window.addEventListener("beforeunload", () => {
        //这里证明是执行了 f5操作 删除用户的权限信息  可以进行重新缓存操作
        //deleteUserPerms()

        console.log('我缓存了tagview')
        // visitedViews数据结构太复杂无法直接JSON.stringify处理，先转换需要的数据
        let tabViews = this.visitedViews.map(item => {
          return {
            fullPath: item.fullPath,
            hash: item.hash,
            meta: { ...item.meta },
            name: item.name,
            params: { ...item.params },
            path: item.path,
            query: { ...item.query },
            title: item.title
          };
        });
        sessionStorage.setItem("tabViews", JSON.stringify(tabViews));
      });
      // 页面初始化加载判断缓存中是否有数据
      let oldViews = JSON.parse(sessionStorage.getItem("tabViews")) || [];
      if (oldViews.length > 0) {
        this.$store.state.tagsView.visitedViews = oldViews;
      }
    },

  mounted() {
      this.initTags()
      this.addTags()

      this.beforeUnload()
    },

十、退出登陆清空所有路由

修改 src\layout\components\Navbar.vue

    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push('/login')

      //退出登陆后删除全部tagview 避免重新登陆低权限账号显示菜单
      await this.$store.dispatch('tagsView/delAllViews')
      sessionStorage.removeItem('tabViews')
    }

6.打开弹窗时 页面顶部偏移 

在index.scss中添加如下代码

paading-right body{padding-right:0px!important} .el-popup-parent--hidden { overflow: initial !important; }

7.页面缓存 当vue文件的name 和路由name相同时 页面刷新会保留当前 操作信息

如果想每次进入页面都显示最新数据 则添加如下代码 或后台返回

meta: {
  noCache: true // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
}

8.header显示用户名和用户当前机构

修改 src\store\modules\user.js

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    roles: [],
    user: {},
    perms: [],
    settings:[]
  }
}

  SET_USER: (state, user) => {
    state.user = user
  }

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        console.log(data)
        const { name, avatar, roles } = data

        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        commit('SET_ROLES', 'ADMIN')
        commit('SET_USER', data)

        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

修改 src\store\getters.js

  user: state => state.user.user,

修改src\layout\components\Navbar.vue

  <img :src="require( '@/assets/xiaoxin.jpeg' )" class="user-avatar">
          <span style="cursor: pointer;">{{user.username}}({{user.deptName}})</span>
          <i class="el-icon-caret-bottom" />

9.按钮权限管理

添加下面文件 web\src\utils\directive.js

import Vue from 'vue'
import store from '../store'
/**
 * @export 自定义指令 https://juejin.cn/post/6844903824704929799
 */
export function directive() {
  Vue.directive('hasPerms', {
    //inserted  dom渲染后再执行删除节点
    inserted(el, binding) {
      // 一行三目运算符就可
      !store.getters.perms.includes(binding.value) ? el.parentNode.removeChild(el) : {}
    }
  })
}

修改文件web\src\store\getters.js

  perms: state => state.user.perms,

修改文件 web\src\store\modules\user.js

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    roles: [],
    user: {},
    perms: [],
    settings:[]
  }
}
  

SET_PERMS: (state, roles) => {
    state.perms = roles
  },

        commit('SET_PERMS', authorities.map(item=>{
          return item.authority;
        }))

修改main.js

//执行权限指令
directive()

在需要权限管理的地方使用自定义指令

      v-hasPerms="'user:add'"

10 解决密码框输入时会显示历史密码提示问题

在css评级创建密码字体文件

 在index.scss中添加代码

@font-face {
  font-family: 'password';
  src: url(./ttf/PasswordEntry.ttf);
}

.pw input{
  font-family: 'password';
}

在input 上加上class="pw" 即可使用

11.在post请求上统一加上loading和返回提示阿斯顿

import { Loading } from 'element-ui';

let loadingCount = 0;
let loading;

const startLoading = () => {
  loading = Loading.service({
    lock: true,
    text: '请求中……',
    background: 'hsla(0,0%,100%,.9)'
  });
};

const endLoading = () => {
  setTimeout(()=>{
    loading.close();
  },500)

};

export const showLoading = () => {
  if (loadingCount === 0) {
    startLoading();
  }
  loadingCount += 1;

};

export const hideLoading = () => {
  if (loadingCount <= 0) {
    return;
  }
  loadingCount -= 1;
  if (loadingCount === 0) {
    endLoading();
  }
};

创建文件至 web\src\utils\loading.js

在request.js中添加如下代码

import {hideLoading, showLoading} from "@/utils/loading";

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if(config.method == 'post'){
      showLoading()
    }

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['Authorization'] =  'Bearer ' + getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

  error => {
    console.log(error.config.method )
    if(error.config.method == 'post'){
      hideLoading()
    }
}

  response => {
    if(response.config.method == 'post'){
      hideLoading()
    }
}

11 多标签下不新增tab跳转

我在试卷列表页面 点击添加 因为数据过多 所以不想使用弹窗 想直接跳转值 试卷添加页

实际情况是 

          this.$router.push({ path: '/paperEdit' })

 执行这段代码 新增tab并跳转到了另外页面  

我想实现的一直在当前页面 添加成功当前页面再返回 最后的解决办法是 先删除当前页面 然后路由跳转 见如下代码

          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.push({ path: '/paperEdit' })

添加成功后 删除当前路由并返回

          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.go(-1);

注意：如果你在执行添加前 跳转别的页面 那添加成功后不再返回 列表页 返回你上一个访问的页面 此时 修改为           this.$router.push({ path: '/ 你要跳转的页面' })