前端客制化的实现

前言 :
一个项目给多个公司使用时,可以配置个性化界面功能
配置客制化文件

//constructor是一个构造函数方法，创建对象时自动调用该方法
//类中声明的方法不能加function关键字
//法之间不要用逗号分隔，否则会报错
class TisCustom {
  constructor() {
    this.init();
  }

  init(params) {
    let userInfo = {};
    if( window.Tis_Store &&  window.Tis_Store.state){
      userInfo = window.Tis_Store.state.user.userInfo;
    }
    //替换系统标准的router，名字相同可以替换，名字不同会新增
    this.routers = [
      {
        path: "/login",
        name: "login",
        meta: {
          title: "Login - 登录",
          hideInMenu: true,
        },
        component: () => import("../src/cutsom/seres/login/login.vue"),
      },
    ];
    // 首页展示配置
    this.home = {
      // 卡片组 (展示轮播图这类的组件
      cards: [
        {id: 0, name: 'Serial Number Query', componentName: "CardSerialNumber", visible: true},
        {id: 1, name: 'Model Selection', componentName: "CardSelectModel", visible: true},
        {id: 2, name: 'Swiper', componentName: "CardSwiperSeres", visible: true},
      ]
    };
   };
}

替换或者新增路由

const router_addRouters=function(data,rs){
//用来判断是否有新增数组
  var hasReplaced = false;
  var needAddedList = [];
  //循环两个路由数组
  for(var i=0;i<data.length;i++){
    for(var j=0;j<rs.length;j++){
      var router = rs[j];
      //判断名称是否相同
      if(data[i].name == router.name){
        //如果都有children，递归children比较，否则替换掉
        if(router.children && data[i].children){
          hasReplaced = true;
          //递归
          router_addRouters(data[i].children,router.children );
        }else{
          hasReplaced = true;
          rs[j] = data[i];
        }
        break;
      }
    }
    if(hasReplaced == false){
      needAddedList.push(data[i]);
    }
  }
  //把新增的push到routers数组
  for(var i=0;i<needAddedList.length;i++){
    rs.push(needAddedList[i]);
  }
};

//添加数组路由 kenshao 20210929
const router_myAddRouters=function(data){
  var rs = data;
  if(typeof data === "object" && isNaN(data.length)){
    rs = [];
    rs.push(data);
  }
  router_addRouters(rs,routes);
};

//加载客制化
let custom = new TisCustom();
if(custom.routers){
  router_myAddRouters(custom.routers);
}

//其他组件 或者按钮客制化

getCompList() {
		//替换原有的数据
      let tisCustom = new TisCustom();
      if(tisCustom.home && tisCustom.home.cards){
        this.compList = tisCustom.home.cards;
      }

    },