VUE后台管理系统中增加和编辑页面逻辑
本文解决两个问题:1、 增加\编辑功能弹框效果和单独页面共用代码的实现2 、根据权限动态生成了功能菜单,但功能对应的增删改查连接或路由未注册,如何自动注册我司为便于代码统一,开发规范的要求是,每个列表对应单独的增加和编辑页面,不得写在列表界面。这样的好处是分块开发代码清晰,初始表单内容少,可以使用弹框,后期表单项增多后,可以快速分隔成单页面操作,便于扩展。这些在VUE下实现
本文解决两个问题:
1、 增加\编辑功能弹框效果和单独页面共用代码的实现
2 、根据权限动态生成了功能菜单,但功能对应的增删改查连接或路由未注册,如何自动注册
我司为便于代码统一,开发规范的要求是,每个列表对应单独的增加和编辑页面,不得写在列表界面。
这样的好处是分块开发代码清晰,初始表单内容少,可以使用弹框,后期表单项增多后,可以快速分隔成单页面操作,便于扩展。这些在VUE下实现起来就很容易了。
1、如何实现弹框与单页面共用代码,如何切换
A、使用弹框
在列表页面中增加弹框代码,通过dialogFormVisible控制是否显示,引用client-from组件
<el-dialog
title="111"
:visible.sync="dialogFormVisible"
:modal="false"
:lock-scroll="true"
>
<client-from :is-edit='false'></client-from>
</el-dialog>
B、使用单页面
在列表页面中增加路由连接,通过client/client_add 路由,在单页面中打开
列表页面
<router-link to="/client/client_add">
添加
</router-link>
增加页面,通过引用和弹框功能里一样的组件,实现功能
<template>
<div>
<client-from :is-edit='false'></client-from>
</div>
</template>
<script>
import clientFrom from './clientFrom_components'
export default {
name: 'add',
components: {clientFrom},
}
</script>
通过以上AB两种功能切换,可以很方便的在弹框和单页面中切换,但实际功能代码只需要在client-from组件中修改一次就可以。同时client-from组件还可以引用参数,判断增加还是编辑,实现增加和编辑页面代码的利用。
2、上面的B方案中,使用了单页面来实现增加功能,这就引出一个问题,我们在前面的功能中实现了根据权限动态增加路由,但后端传过来的只是功能菜单,没有功能列表所包含动作文件(增删改查)的细颗粒菜单路由;这些细分功能,后端无法判断前端是弹框实现还是单页面实现,而且从程序上细分判断这些颗粒功能,对后端来说太臃肿;
所以说我们的要求是后端只需要判断有无增删改查权限, 而增删改查的展现形式,具体是弹框还是单页这个由前端来控制。
那我们下面就来实现:如何在增删改查打开页面的同时,实时注册路由。
src/store/getters.js
new_action: state => state.store_permission.new_action,//当前访问的动作文件的路由,
all_action_array: state => state.store_permission.all_action_array,//所有已经注册 的动作文件,用于重复判断
src/store/modules/permission.js
state: {
all_routers: constantRouterMap,//默认先是基本的路由菜单
service_return_routers: [],
new_action: [],
all_action_array: []
},
mutations: {
SET_ACTION_ARRAY: (state, info_array) => {
let path = info_array.path
let new_action_routers = info_array.routesTemplate
state.all_action_array.push(path)
state.new_action = new_action_routers
}
},
actions: {
//实时注册 动作文件的路由
ActionRoutes({commit}, path, all_action_array) {
return new Promise((resolve, reject) => {
//路由模板
let routesTemplate = [
{
path: '',
hidden: true,
component: 'layout/Layout',
redirect: 'dashboard',
children: [{
path: path,
component: path,
name: '',
meta: {noCache: true}
}]
}
]
let routers_temp_newitem = []
//引入组件
routesTemplate.map(function (item, itemIndex) {
//第一层主菜单
try {
item.component = _import(item.component)
} catch (error) {
}
//第二层
let routers_temp_newChild = []//保存组件可以使用的菜单
item.children.map(function (child, childIndex) {
try {
//如果可以使用,则存入新数组
child.component = _import(child.component)
routers_temp_newChild.push(child)
} catch (error) {
console.log('组件不存在:' + child.component)// for debug
}
})
item.children = routers_temp_newChild
if (item.children.length > 0) routers_temp_newitem.push(item)
})
// console.log(path)
if (routers_temp_newitem) commit('SET_ACTION_ARRAY', {routesTemplate, path})
resolve()
})
}
}
src\permission.js
/*导航守卫
* /
router.beforeEach((to, from, next) => {
if (getToken()) { // determine if there has token
let action_path = to.path.substr(1)
if (store.getters.service_return_routers.length === 0) {
//动态注册 菜单 的路由
} else if (
(action_path.indexOf("_")) > 0 &&
!contains(store.getters.store_all_action_array, action_path)
) {
//如果带有下下划线,并且没有注册过,则实时注册这个动作过程文件的路由
let store_all_action_array = []
if (store.getters.store_all_action_array) store_all_action_array = store.getters.store_all_action_array
//判断是否注册路由,并注册路由
store.dispatch('Store_ActionRoutes', action_path, store_all_action_array).then(res => {
router.addRoutes(store.getters.new_action)
next({...to, replace: true})
}).catch(err => {
console.log(err)
})
} else {
next()
}
}
})
更多推荐
所有评论(0)