前端

184 阅读1分钟

bf-admin-standard 是在vue-admin-template的基础上深入优化得到,主要是针对信息化的特点集成了通用的登录登出,鉴权等功能,扩展了路由权限,Api接口等功能。

路由

路由权限是由在standard里的routes/index控制,会把默认的/路由请求转发redirectTopRouter函数,然后通过用户的权限判断具体的跳转位置。在项目代码中,meta: { title: '用户权限管理', roles: ['system'] } roles属性设置用户权限,
路由meta还支持
> hideHeader: true  隐藏头部
> showBack: true 针对详情页 设置返回头部

服务

store

import Storage from '@/services/storage/index'
Storage.get('structurepermisson')
Storage.set('structurepermisson', defaultStructurePermission)

像一些需要用户记忆的东西都可以通过Storage来缓存 vuex global 全局的应用数据的状态存放在项目里的store/global.js里,如果有这个文件,standard会加载并执行里面的setup方法

Api请求

在standard项目中通过request文件处理所有的请求,通过getToken方法取出存放在cookie中的token设置进axios中。 之后判断code为0代表成功,4012代表重新登录。如果返回的结果不存在data属性,则返回本身 return res.data ? res.data : res

mixins

  1. emitter

element自带的通信触发机制 this.broadcast('business', 'post') 触发所有子组件componentName为business的组件的post的方法 在子组件中除了设置componentName还需要注册属性

created() {
    this.$on('post', () => {
    })
},
>2. resetTableHeader

表格自动扩展函数。有时候需要根据后端的接口动态设置表格字段。


<FeedTable
    ref="feedtable"
    class="mt16"
    v-bind="table"
    style="width:100% "
    @fetchTableDataLoaded="(tableData, context)=>fetchTableDataLoaded(tableData, context)"
 />

     fetchTableDataLoaded(tableData, context) {
      this.loading = false
      if (!_.isEmpty(tableData)) {
        this.upcomingDisplay = 'block'
        const { business_data } = tableData[0]
        this.upcomingexpansionColumnsData = business_data
        const tishiIndex = business_data.findIndex(child => child.field_name === '提示')
        if (tishiIndex > -1) {
          this.table.tableSchema[1].name = business_data[tishiIndex].guard_name
          // business_data[0] = business_data[tishiIndex]
          // delete business_data[tishiIndex]
        }
        this.resetTableHeader(tableData, context, false, -1, false)
        this.$refs.feedtable.refreshTable()
      }
    },
    getExpansionColumnsData() {
      if (!_.isEmpty(this.upcomingexpansionColumnsData)) {
        const FixedSalaryFieldMap = []
        this.upcomingexpansionColumnsData.forEach((current) => {
          }
        })
        return FixedSalaryFieldMap
      }
      return []
    },

指令

无限滚动