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
- 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 []
},
指令
无限滚动