功能模块总结

权限管理模块

1、先对路由进行定义，创建一个路由对象，一般都是 login，其他路由都挂载在 admin 路由之下。

import {useRouter} from 'vue-router'

2、然后用户登录，登录成功之后得到 token，会进行本地存储，跳转到admin，会进入路由拦截根据 token 获取用户权限列表。

3、全局路由拦截，没有权限的用户进入不到他不对应的菜单。

   router.addRoute({
                        name: 'admin',
                        path: '/admin',
                        component: ()=>import('@/views/admin/AdminView.vue'),
                        children  
                      })

4、用户权限，在 module 定义一个模块 permission.js，把用户权限列表、菜单列表都放在这个模块里；

// 导入获取菜单的api
import  {GetUserMenu} from '@/api/permission'
// 导入路由
import router from '@/router/index.js'
export default {
    state:{
        // 全局菜单数组
        menus:[],
    },
    mutations:{
        // 更新菜单
        setMenu(state,data){
            state.menus = data;
        }
    },
    actions:{
        getMenu(context,data){
            // 获取当前的菜单
            GetUserMenu(data)
            .then(res=>{
                if(res.data.code==0){
                    // 更新store中的menus
                    context.commit("setMenu",res.data.list);
                    // 把菜单映射为路由配置
                    // 定义子路由数组
                    let children =[];
                    // 把菜单进行遍历
                    res.data.list.forEach(item=>{
                        // 如果当前对象没有children子元素
                        if(!item.children){
                            // 直接转换为路由配置添加到children数组里面
                           children.push({
                                name:item.name,
                                path:item.linkname,
                                component:()=>import('@/views'+item.component)
                            })
                        }else{
                            // 如果有子元素
                            for(let i=0;i<item.children.length;i++){
                                // 遍历子元素并报所有的子元素转为路由配置 添加到children数组里面
                                children.push({
                                    name:item.children[i].name,
                                    path:item.children[i].linkname,
                                    component:()=>import('@/views'+item.children[i].component)
                                })
                            }
                        }
                        
                    })
                    // 动态的配置路由 admin路由（没有权限的用户进入不到他不对应的菜单）
                    router.addRoute({
                        name: 'admin',
                        path: '/admin',
                        component: ()=>import('@/views/admin/AdminView.vue'),
                        children  
                      })
                }
            })
        }
    }
}

 

搜索功能模块

1. 先获取订单列表的所有信息

 getOrderList() {
      // 修正el的bug
      if (this.searchObj.status == 0 || this.searchObj.status == "全部") {
        this.searchObj.status = "";
      }
      GetOrderList(this.searchObj)
        .then((res) => {
          console.log("订单列表信息", res.data);
          this.orderList = res.data.data;
          // 更新导出的数据
          this.DetailsForm = res.data.data;
          this.$refs.tab.toggleAllSelection();
        })
        .catch((err) => {
          console.log("获取订单信息失败", err);
        });

2、还可以监听来进行搜索

watch: {
    searchObj: {
      handler() {
        this.getOrderList();
      },
      deep: true,
    },
  },

 

3、将用户输入值与所有列表数据进行遍历匹配，若匹配，则展示所搜索的相关内容，然后还有就是是否点击删除，清空历史记录，最后完成搜索。