前端框架层

建设管理平台框架层，主要负责路由跳转，请求拦截，状态管理等基本功能，是作为一个应用基座的存在。

# 安装

npm i @suit/promis-front-framework -S

# 构建应用

框架层最为核心的功能是为了构建建设管理平台应用。

import { createPromisApp } from '@suit/promis-front-framework'
// 
const app = {
  routes:[],
  moduleStore:{}
}
// main.js
createPromisApp({
  el: '#app',
  baseURL: 'https://tech.suitbim.com/promis-web-bimrun/',
  subApps: [app],
  remoteApps: true
})

# 参数

名称	说明
`el`	应用挂载节点，默认为`#app`
`constantRoutes`	静态路由列表示例：`[{path,component,beforeCreateApp}]`
`routes`	路由列表，示例：`[{filePath,component}]`
`moduleStore`	`vuex`
`beforeMount`	钩子函数，应用挂载前
`mounted`	钩子函数，应用挂载后
`move`	钩子函数，在应用内切换路由
`beforeUnMount`	钩子函数，应用卸载前
`unMount`	钩子函数，应用卸载后
`remoteApps`	远程应用是否开启，默认为关闭
`manifestURL`	当`remoteApps`为`true`，也就是开启远端应用时，会利用到资源清单，资源清单地址，默认为：`https://tech.suitbim.com/suit-promis-front-assets/JSLib/manifest.json`
`libURL`	js库地址，默认为： `https://tech.suitbim.com/suit-promis-front-assets/JSLib`
`unpkg`	当`remoteApps`为`true`，也就是开启远端应用时，默认情况下会使用`unpkg = 'https://tech.suitbim.com/@suit/'` 去解析公司仓库中的包，当将`unpkg`设置为`false`时,会尝试从`libURL`指向路径下的`@suit`目录下去找包。
`baseURL`	后台接口请求地址，默认为：`https://tech.suitbim.com/promis-web-dev/`
`defaultTheme`	默认主题，一开始进入应用时，并未登录时的主题，如果是使用到正式环境中，通常是需要设置的
`subApps`	数据类型为数组，用来承接多个子应用，每个子应用的数据结构为`{ move,beforeMount,mounted,beforeUnMount,unMount,routes,constantRoutes,moduleStore}`
`topBarRightIconList`	用来配置顶部栏右侧图标列表

# constantRoutes

主要用来处理，不需要登录的，可以直接访问的页面，基本使用如下：

import { createPromisApp } from '@suit/promis-front-framework'

const app = {
   constantsRoutes:[
        {
            path:'', // 注意为路径名
            component:()=>import('...'),
            beforeCreateApp({setToken,params}){
                // 创建应用的前置处理 params为当前路径           
            }                    
        }    
    ],
    routes:[]
}
createPromisApp({
   subApps:[app]
})

# topBarRightIconList

属性	说明
`title`	字符串类型，标题
`isProject`	Boolean类型，当不填写时，在项目级与系统级均出现，当明确指定为false时，只在系统级出现，当明确指定为true时，只在项目级出现
`icon`	`iconfont`中图标类名
`goUrl`	要跳转的地址，实际会调用`this.$router.push({filePath:goUrl})`,
`privilege`	权限可以用来控制是否呈现
`click`	点击时会进行触发

topBarRightIconList

使用示例:

import { createPromisApp } from '@suit/promis-front-framework'
// 
const app = {
  routes:[],
  moduleStore:{}
}
// main.js
createPromisApp({
  el: '#app',
  baseURL: 'https://tech.suitbim.com/promis-web-bimrun/',
  subApps: [app],
  remoteApps: true,
  topBarRightIconList: [{
   title: '测试图标',
  // isProject: true, // 默认项目级 系统级都是可以看到的
  icon: 'iconerweima',
  goUrl: 'moduleCoreManager/view/projectRole/index',
  //   privilege: '',
  click: router => {
    console.log(router);
  }
}]
})

# 请求

框架层进行了请求的统一处理，主要进行了token的拦截，路由的处理等，在外部如何调用接口。

// 方式一，在子应用中目前不推荐使用，会与框架层深度绑定
import { request } from  '@suit/promis-front-framework'

// 方式二，利用原型链上的$request
import Vue from 'vue'
export const getRequest  = () => Vue.prototype.$request

# 状态管理

框架层进行了统一的状态管理，并允许子应用中正常的注册以及使用vuex。关于注册需要说明的是，是只作用于当前应用的生命周期的，同时需要在命名上遵循统一的规范，以组件库名缩写为开头，示例：moduleModelViewInfo,其中moduleModel为组件库名的缩写，ViewInfo是代表具体业务含义的名称。

# 获取`store`

// 方式一，在子应用中目前不推荐使用，会与框架层深度绑定
import { store } from  '@suit/promis-front-framework'

// 方式二，利用原型链上的$store
import Vue from 'vue'
export const getStore  = () => Vue.prototype.$store

# 利用vuex

正常的使用vuex

import {mapGetters,mapActions} from 'vuex'

export default {
   data(){
    return {}
   },
   computed:{
    ...mapGetters[]
   },
   methods:{
    ...mapActions([])
   }
}

# Getters

名称	说明
`appMainHeight`	主区域的高度，会动态监听浏览器的变化
`visitedViews`	访问过的页面
`cachedViews`	缓存的页面
`token`	token
`avatar`	用户头像
`name`	用户名称
`introduction`	用户介绍
`status`	用户状态
`roles`	用户角色
`privileges`	当前用户所拥有系统级权限
`buttonPrivileges`	当前用户的系统级按钮级权限，数据类型为数组
`buttonPrivilegesMap`	当前用户的系统级按钮级权限，数据类型为对象
`projectPrivileges`	当前用户的项目级权限，数据类型为对象
`projectButtonPrivileges`	当前用户的项目级按钮权限，数据类型为数组
`projectButtonPrivilegesMap`	当前用户的项目级按钮权限，数据类型为对象
`userOrg`	用户组织
`userId`	用户id
`userOrgId`	用户组织id
`userOrgName`	用户组织名称
`permissionRoutes`	当前用户所拥有的路由
`isProject`	是否为项目
`projectType`	项目类型
`fileUrl`	文档服务器地址
`dictMap`	字典
`currentProjectInfo`	当前项目信息

# actions

名称	说明
`toggleSideBar`	切换侧边栏展开与缩放
`setChangeSidebar`	设置侧边栏展开与缩放
`setHideLayout`	设置外层布局的显示与隐藏
`setTopBar`	设置顶部栏

# refreshRoutes

refreshRoutes用来进行整个应用的刷新，常用的场景是切换用户，切换项目，切换平台时会进行整个应用的刷新。

// 方式一
import { refreshRoutes } from  '@suit/promis-front-framework'

// 方式二
import Vue from 'vue'
const refreshRoutes = Vue.prototype.$refreshRoutes

# getManifestConfig

可以使用Vue.prototype.$getManifestConfig()获取配置清单，会获取Vue.prototype.$manifestURL对应的文件。

# fetchSuitLib

可以使用获取Vue.prototype.$fetchSuitLib(pkgName,version)模块库,会首先利用getManifestConfig拉取应用清单，根据Vue.prototype.$unpkg判断是否利用unpkg来解析公司组件库中的组件，如果Vue.prototype.$unpkg===false则会根据Vue.prototype.$libURL指向的目录下的@suit目录下的组件。

# SuitRemoteComponent

当使用createPromisApp创建应用实例时，当开启远端应用时，会自动全局注册SuitRemoteComponent。

# 使用示例

<template>
  <div>
    <SuitRemoteComponent  module-name=""  com-name=""/>
  </div>
</template>

# 属性

名称	说明
`module-name`	仓库名称
`version`	仓库版本，默认情况下会依赖清单配置文件中的`tag`
`com-name`	组件名称
其它	该组件的属性方法事件

# layoutUtil

框架层用来动态更改布局的方法，目前提供了setTopBar , setTopBarRightIconList 方法。createPromisApp中传入的topBar,topBarRightIconList 也是调用此方法。

import { layoutUtil } from '@suit/promis-front-framework'
import TopBar from './TopBar.vue' // 自定义的TopBar

layoutUtil.setTopBar(TopBar)

// 当进行了setTopBar后再进行setTopBarRightIconList,无效
layoutUtil.setTopBarRightIconList([{
   title: '测试图标',
  // isProject: true, // 默认项目级 系统级都是可以看到的
  icon: 'iconerweima',
  goUrl: 'moduleCoreManager/view/projectRole/index',
  //   privilege: '',
  click: router => {
    console.log(router);
  }
}])

主应用

建设管理平台