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()
        }
    } 
})