iviewui-admin框架的一些坑

2019年08月01日发布阅读(5346) 作者：Jerman

1、菜单根据路由来生成，左侧菜单一级栏目要如下设置，纠结不。。。一个路由我还得虚拟一个父路由出来，命名都纠结

  {
    path: '/',
    name: '_home',
    redirect: '/home',
    component: Main,
    meta: {
      hideInMenu: false,
      notCache: true
    },
    children: [
      {
        path: '/home',
        name: 'home',
        meta: {
          title: '首页',
          notCache: true,
          icon: 'md-home'
        },
        component: () => import('@/view/home/index.vue')
      }
    ]
  }

解决：后台所有路由配置在manage的children里。这样也便于区分一些其他路由，如注册 登录页面，这些页面并不需要登录后才可以访问

export default [
  {
    path: '/manage',
    name: 'manage',
    meta: {
      title: '后台管理',
      hideInBread: true
    },
    component: Main,
    children: [
      {
        path: 'home',
        name: 'home',
        meta: {
          title: '首页',
          sideMenu: true,
          icon: 'md-home'
        },
        component: () => import('@/view/home/index.vue')
      },
     ]
   }
]

2、菜单权限控制，iviewui是根据 access:[‘super_admin’, ‘admin’]用户角色来控制的，如下设置路由的access，再根据后台返回的 access，来判断当前路由是否有访问权限。相当于路由是否有权限访问必须提前在前端配置死。不方便后台系统动态配置权限~

{
    path: 'level_2_2',
    name: 'level_2_2',
    meta: {
        access: ['super_admin'],
        icon: 'md-funnel',
        showAlways: true,
        title: '二级-2'
    },
}

解决

把前端路由名称同步给后台，由后台根据角色返回相应的路由名称列表，再根据当前路由名称是否在后台返回的路由名称列表中，判断当前路由是否有权限。
非左侧菜单的内页由接口层的权限判断值来判断是否有权限
静态的页面，只能在路由里设置角色权限了

{
    "code":"00000000",
    "msg":"成功",
    "data":{    
         menuName:["home","member"]
     }
}

3、Modal弹层的问题：异步提交时，不管点取消还是确定，都会把层关掉，没有回调处理函数
解决

自定义底部按钮，有异步提交时，在回调函数中处理是否关闭弹层

4、table的render函数，没官方文档可查，点开竟然是收费的链接，估计官方想创点收入

解决这个不是什么大问题，摸索解决，网上也有资料

5、使用了Mockjs来模拟数据开发，由于Mockjs只用来输出数据，并没有发送真实的请求，调试起来非常麻烦，要使用console.log输出才知道发送的是啥，到底有没有发送请求，有没有重复发送请求等等
解决更改为Mocker-api做为项目模拟数据输出，直接读取模拟的JSON数据文件

6、省份城市选择插件iview-area(https://github.com/iview/iview-area)，通过表单reset()的时候，数据不能清空

解决通过refs手动清空

this.$refs.area.select = []

7、针对IE的兼容

需要安装babel-polyfill，在main.js里全局引入
```
import 'babel-polyfill'
```
main.js里的tree-table-vue需要注释掉，这个插件不支持IE11。如果你的项目没有用到它的树状列表，完全可以不引入
```
// 注释这两行
import TreeTable from 'tree-table-vue'
Vue.use(TreeTable)
```

上面两点只能解决IE11的问题，IE10怎么办？
在vue.config.js文件里添加如下代码。从下可以看到tree-table-vue,v-org-tree,locale都需要重新编译

// webpack配置
configureWebpack: {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        // exclude用上面配置的话，默认是过滤不编译node_modules 路径下的文件
        // exclude: /(node_modules|bower_components)/,
        // include 指定需要编译的文件路径
        include: [
          resolve('src'),
          resolve('node_modules/tree-table-vue/lib'),
          resolve('node_modules/v-org-tree/dist'),
          resolve('node_modules/iview/src/locale')
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

IE10没问题了，IE9又暴出了AnimationFrame的兼容问题

在main.js里添加如下代码:

(function() {
  var lastTime = 0
  var vendors = ['ms', 'moz', 'webkit', 'o']
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
                                 window[vendors[x] + 'CancelRequestAnimationFrame']
  }
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime()
      var timeToCall = Math.max(0, 16 - (currTime - lastTime))
      var id = window.setTimeout(function() { callback(currTime + timeToCall) },
        timeToCall)
      lastTime = currTime + timeToCall
      return id
    }
  }
  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id)
    }
  }
}())

github: https://gist.github.com/paulirish/1579671