406 lines
12 KiB
JavaScript
406 lines
12 KiB
JavaScript
/**
|
|
* Admin Framework - 閫氱敤鍚庡彴绠＄悊绯荤粺妗嗘灦
|
|
* 鐗堟湰: 1.0.0
|
|
*
|
|
* 鍔熻兘鍖呭惈:
|
|
* - 绯荤粺绠＄悊鍔熻兘 (sys_*)
|
|
* - 鐢ㄦ埛鐧诲綍鍜屾潈闄愮鐞? * - 鍔ㄦ€佽矾鐢辩鐞? * - 涓诲竷灞€鍜岄〉闈㈠竷灞€
|
|
* - 鍏ㄥ眬缁勪欢
|
|
* - 宸ュ叿搴? * - Vuex 鐘舵€佺鐞? */
|
|
|
|
// ==================== 鏍峰紡鏂囦欢 ====================
|
|
import './assets/css/animate.css'
|
|
import './assets/css/base.less'
|
|
import './assets/css/ivewExpand.less'
|
|
import './assets/icons/iconfont.css'
|
|
|
|
// ==================== 宸ュ叿搴?====================
|
|
import uiTool from './utils/uiTool'
|
|
import http from './utils/http'
|
|
import * as tools from './utils/tools'
|
|
|
|
// ==================== Store 妯″潡 ====================
|
|
import storeModules, { userModule, appModule } from './store'
|
|
|
|
// ==================== 璺敱閰嶇疆 ====================
|
|
import routerConfig, { createBaseRoutes, setupRouterGuards } from './router'
|
|
|
|
// ==================== 绯荤粺椤甸潰 ====================
|
|
// 涓婚〉
|
|
import HomePage from './views/home/index.vue'
|
|
|
|
// system 椤甸潰
|
|
import SysLog from './views/system/sys_log.vue'
|
|
import SysParamSetup from './views/system/sys_param_setup.vue'
|
|
import SysRole from './views/system/sys_role.vue'
|
|
import SysUser from './views/system/sys_user.vue'
|
|
|
|
// system_high 椤甸潰
|
|
import SysControl from './views/system_high/sys_control.vue'
|
|
import SysMenu from './views/system_high/sys_menu.vue'
|
|
import SysTitle from './views/system_high/sys_title.vue'
|
|
|
|
// 鐧诲綍鍜岄敊璇〉闈?import LoginPage from './views/login/login.vue'
|
|
import Page401 from './views/error-page/401.vue'
|
|
import Page404 from './views/error-page/404.vue'
|
|
import Page500 from './views/error-page/500.vue'
|
|
|
|
// 甯冨眬缁勪欢
|
|
import Main from './components/main'
|
|
import ParentView from './components/parent-view'
|
|
|
|
|
|
|
|
// ==================== 鍏ㄥ眬缁勪欢 ====================
|
|
import Tables from './components/tables'
|
|
import UploadSingle from './components/upload/Single.vue'
|
|
import UploadMultiple from './components/upload/Multiple.vue'
|
|
import TreeGrid from './components/treeGrid'
|
|
import AsyncModal from './components/asyncModal'
|
|
import InfoCard from './components/info-card'
|
|
import LoadFlower from './components/load-flower'
|
|
import SplitPane from './components/split-pane'
|
|
import TextArea from './components/text-area'
|
|
import CommonIcon from './components/common-icon'
|
|
|
|
// ==================== 绯荤粺 API ====================
|
|
// system API
|
|
import * as systemApi from './api/system'
|
|
// system_high API
|
|
import * as systemHighApi from './api/system_high'
|
|
|
|
// ==================== 妗嗘灦绫?====================
|
|
class AdminFramework {
|
|
constructor() {
|
|
this.version = '1.0.0'
|
|
this.installed = false
|
|
this.config = {}
|
|
this.store = null
|
|
this.router = null
|
|
|
|
// 瀵煎嚭宸ュ叿
|
|
this.tools = tools
|
|
this.uiTool = uiTool
|
|
this.http = http
|
|
|
|
// 瀵煎嚭 Store 妯″潡
|
|
this.storeModules = storeModules
|
|
this.userModule = userModule
|
|
this.appModule = appModule
|
|
|
|
// 瀵煎嚭璺敱閰嶇疆
|
|
this.createBaseRoutes = createBaseRoutes
|
|
this.setupRouterGuards = setupRouterGuards
|
|
|
|
// 瀵煎嚭缁勪欢
|
|
this.Main = Main
|
|
this.ParentView = ParentView
|
|
this.LoginPage = LoginPage
|
|
this.Page401 = Page401
|
|
this.Page404 = Page404
|
|
this.Page500 = Page500
|
|
|
|
// 瀵煎嚭绯荤粺椤甸潰
|
|
this.HomePage = HomePage
|
|
this.SysLog = SysLog
|
|
this.SysParamSetup = SysParamSetup
|
|
this.SysRole = SysRole
|
|
this.SysUser = SysUser
|
|
this.SysControl = SysControl
|
|
this.SysMenu = SysMenu
|
|
this.SysTitle = SysTitle
|
|
|
|
// 瀵煎嚭 API
|
|
this.systemApi = systemApi
|
|
this.systemHighApi = systemHighApi
|
|
}
|
|
|
|
/**
|
|
* Vue 鎻掍欢瀹夎鏂规硶 - 鑷姩瀹屾垚鎵€鏈夊垵濮嬪寲
|
|
* @param {Object} Vue - Vue 瀹炰緥
|
|
* @param {Object} options - 閰嶇疆閫夐」
|
|
* @param {Object} options.config - 搴旂敤閰嶇疆
|
|
* @param {Object} options.ViewUI - ViewUI 瀹炰緥锛堝彲閫夛紝妗嗘灦浼氳嚜鍔ㄥ鐞嗭級
|
|
* @param {Object} options.VueRouter - VueRouter 瀹炰緥锛堝彲閫夛級
|
|
* @param {Object} options.Vuex - Vuex 瀹炰緥锛堝彲閫夛級
|
|
* @param {Function} options.createPersistedState - vuex-persistedstate锛堝彲閫夛級
|
|
* @param {Object} options.componentMap - 鑷畾涔夌粍浠舵槧灏勮〃锛堝彲閫夛級
|
|
*/
|
|
install(Vue, options = {}) {
|
|
if (this.installed) return
|
|
this.installed = true
|
|
|
|
const { config = {}, ViewUI, VueRouter, Vuex, createPersistedState, componentMap } = options
|
|
this.config = config
|
|
|
|
// 鑷姩娉ㄥ唽 ViewUI
|
|
if (ViewUI) {
|
|
Vue.use(ViewUI)
|
|
}
|
|
|
|
// 鑷姩娉ㄥ唽 VueRouter
|
|
if (VueRouter) {
|
|
Vue.use(VueRouter)
|
|
}
|
|
|
|
// 鑷姩娉ㄥ唽 Vuex
|
|
if (Vuex) {
|
|
Vue.use(Vuex)
|
|
}
|
|
|
|
// 鎸傝浇鍏ㄥ眬閰嶇疆鍜屽伐鍏? Vue.prototype.$config = config
|
|
Vue.prototype.$http = http
|
|
Vue.prototype.$tools = tools
|
|
Vue.prototype.$uiTool = uiTool
|
|
|
|
// 鑷姩娉ㄥ唽鍏ㄥ眬缁勪欢
|
|
this.registerGlobalComponents(Vue)
|
|
|
|
// 鑷姩璁剧疆缁勪欢鏄犲皠琛紙鍖呭惈澶栭儴浼犲叆鐨勬槧灏勶級
|
|
this.setupComponentMap(componentMap)
|
|
|
|
// 濡傛灉鎻愪緵浜?Vuex锛岃嚜鍔ㄥ垱寤?Store
|
|
if (Vuex && !this.store) {
|
|
this.store = this.createStore(Vuex, {}, createPersistedState)
|
|
// 鑷姩鍒濆鍖?HTTP
|
|
http.init(config, this.store)
|
|
}
|
|
|
|
// 濡傛灉鎻愪緵浜?VueRouter锛岃嚜鍔ㄥ垱寤?Router
|
|
if (VueRouter && !this.router) {
|
|
// 鑾峰彇涓昏矾鐢遍厤缃紙浠庡悗绔潈闄愯彍鍗曠敓鎴愶級
|
|
const mainRoute = this.getRoutes({ Main, ParentView, Page404 })
|
|
|
|
this.router = this.createRouter(VueRouter, {
|
|
Main,
|
|
ParentView,
|
|
LoginPage,
|
|
Page401,
|
|
Page404,
|
|
Page500
|
|
}, mainRoute ? [mainRoute] : [], ViewUI)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 鑷姩娉ㄥ唽鍏ㄥ眬缁勪欢
|
|
*/
|
|
registerGlobalComponents(Vue) {
|
|
// 娉ㄥ唽甯冨眬缁勪欢
|
|
Vue.component('Main', Main)
|
|
Vue.component('ParentView', ParentView)
|
|
|
|
// 娉ㄥ唽閿欒椤甸潰
|
|
Vue.component('Page401', Page401)
|
|
Vue.component('Page404', Page404)
|
|
Vue.component('Page500', Page500)
|
|
|
|
// 娉ㄥ唽鐧诲綍椤甸潰
|
|
Vue.component('LoginPage', LoginPage)
|
|
|
|
// ==================== 娉ㄥ唽鍏ㄥ眬涓氬姟缁勪欢 ====================
|
|
Vue.component('Tables', Tables)
|
|
Vue.component('UploadSingle', UploadSingle)
|
|
Vue.component('UploadMultiple', UploadMultiple)
|
|
Vue.component('TreeGrid', TreeGrid)
|
|
Vue.component('AsyncModal', AsyncModal)
|
|
Vue.component('InfoCard', InfoCard)
|
|
Vue.component('LoadFlower', LoadFlower)
|
|
Vue.component('SplitPane', SplitPane)
|
|
Vue.component('TextArea', TextArea)
|
|
Vue.component('CommonIcon', CommonIcon)
|
|
|
|
// ==================== 娉ㄥ唽鍏ㄥ眬涓氬姟缁勪欢 ====================
|
|
Vue.component('Tables', Tables)
|
|
Vue.component('Editor', Editor)
|
|
Vue.component('UploadSingle', UploadSingle)
|
|
Vue.component('UploadMultiple', UploadMultiple)
|
|
Vue.component('TreeGrid', TreeGrid)
|
|
Vue.component('AsyncModal', AsyncModal)
|
|
Vue.component('CronInput', CronInput)
|
|
Vue.component('Cropper', Cropper)
|
|
Vue.component('InfoCard', InfoCard)
|
|
Vue.component('LoadFlower', LoadFlower)
|
|
Vue.component('Markdown', Markdown)
|
|
Vue.component('MdIcons', MdIcons)
|
|
Vue.component('PasteEditor', PasteEditor)
|
|
Vue.component('SplitPane', SplitPane)
|
|
Vue.component('TextArea', TextArea)
|
|
Vue.component('CommonIcon', CommonIcon)
|
|
}
|
|
|
|
/**
|
|
* 璁剧疆缁勪欢鏄犲皠琛紙灏嗗悗绔繑鍥炵殑璺緞鏄犲皠鍒板疄闄呯粍浠讹級
|
|
* @param {Object} customMap - 澶栭儴浼犲叆鐨勮嚜瀹氫箟缁勪欢鏄犲皠
|
|
*/
|
|
setupComponentMap(customMap = {}) {
|
|
// 妗嗘灦鍐呯疆缁勪欢鍒楄〃锛氳矾寰?=> 缁勪欢
|
|
const components = {
|
|
'home/index': HomePage,
|
|
'system/sys_log': SysLog,
|
|
'system/sys_param_setup': SysParamSetup,
|
|
'system/sys_role': SysRole,
|
|
'system/sys_user': SysUser,
|
|
'system_high/sys_control': SysControl,
|
|
'system_high/sys_menu': SysMenu,
|
|
'system_high/sys_title': SysTitle,
|
|
// 鍚堝苟澶栭儴浼犲叆鐨勭粍浠舵槧灏? ...customMap
|
|
}
|
|
|
|
// 鑷姩鐢熸垚甯?.vue 鍜屼笉甯?.vue 鐨勬槧灏? const map = {}
|
|
Object.keys(components).forEach(path => {
|
|
const cleanPath = path.replace(/\.vue$/, '')
|
|
map[cleanPath] = components[path]
|
|
map[cleanPath + '.vue'] = components[path]
|
|
})
|
|
|
|
uiTool.setComponentMap(map)
|
|
}
|
|
|
|
/**
|
|
* 娣诲姞鑷畾涔夌粍浠舵槧灏? * @param {Object} customMap - 鑷畾涔夌粍浠舵槧灏勫璞? * @example
|
|
* AdminFramework.addComponentMap({
|
|
* 'ball/games.vue': GamesComponent,
|
|
* 'order/pay_orders.vue': PayOrdersComponent
|
|
* })
|
|
*/
|
|
addComponentMap(customMap) {
|
|
uiTool.setComponentMap(customMap)
|
|
}
|
|
|
|
/**
|
|
* 鍒濆鍖?HTTP 閰嶇疆
|
|
* @param {Object} config - HTTP 閰嶇疆
|
|
* @param {Object} store - Vuex Store 瀹炰緥
|
|
*/
|
|
initHttp(config, store) {
|
|
http.init(config, store)
|
|
this.store = store
|
|
}
|
|
|
|
/**
|
|
* 鍒涘缓璺敱瀹炰緥
|
|
* @param {Object} Router - VueRouter 绫? * @param {Object} components - 缁勪欢瀵硅薄
|
|
* @param {Array} customRoutes - 鑷畾涔夎矾鐢? * @param {Object} ViewUI - ViewUI 瀹炰緥
|
|
* @param {String} homeName - 棣栭〉鍚嶇О
|
|
* @returns {Object} router 瀹炰緥
|
|
*/
|
|
createRouter(Router, components = {}, customRoutes = [], ViewUI, homeName = 'home') {
|
|
const { LoginPage, Page401, Page404, Page500 } = components
|
|
|
|
if (!LoginPage || !Page401 || !Page404 || !Page500) {
|
|
console.error('Missing required page components')
|
|
return null
|
|
}
|
|
|
|
const baseRoutes = createBaseRoutes(LoginPage, Page401, Page404, Page500)
|
|
|
|
const router = new Router({
|
|
routes: [...baseRoutes, ...customRoutes],
|
|
mode: 'hash'
|
|
})
|
|
|
|
if (ViewUI) {
|
|
setupRouterGuards(router, ViewUI, homeName)
|
|
}
|
|
|
|
return router
|
|
}
|
|
|
|
/**
|
|
* 鍒涘缓 Store 瀹炰緥
|
|
* @param {Object} Vuex - Vuex 绫? * @param {Object} customModules - 鑷畾涔夋ā鍧? * @param {Object} createPersistedState - vuex-persistedstate 鎻掍欢
|
|
* @returns {Object} store 瀹炰緥
|
|
*/
|
|
createStore(Vuex, customModules = {}, createPersistedState) {
|
|
const store = new Vuex.Store({
|
|
modules: {
|
|
user: userModule,
|
|
app: appModule,
|
|
...customModules
|
|
},
|
|
plugins: createPersistedState ? [
|
|
createPersistedState({
|
|
storage: window.localStorage
|
|
})
|
|
] : []
|
|
})
|
|
|
|
this.store = store
|
|
return store
|
|
}
|
|
|
|
/**
|
|
* 鑾峰彇鍔ㄦ€佽矾鐢? * @param {Object} components - 缁勪欢瀵硅薄
|
|
* @returns {Object} 涓昏矾鐢遍厤缃? */
|
|
getRoutes(components = {}) {
|
|
const { Main, ParentView, Page404 } = components
|
|
|
|
if (!Main || !ParentView || !Page404) {
|
|
console.error('Missing required layout components')
|
|
return null
|
|
}
|
|
|
|
return uiTool.getRoutes(Main, ParentView, Page404)
|
|
}
|
|
|
|
/**
|
|
* 娉ㄥ唽鍏ㄥ眬缁勪欢
|
|
* @param {Object} Vue - Vue 瀹炰緥
|
|
* @param {Object} components - 缁勪欢瀵硅薄
|
|
*/
|
|
registerComponents(Vue, components = {}) {
|
|
Object.keys(components).forEach(name => {
|
|
Vue.component(name, components[name])
|
|
})
|
|
}
|
|
}
|
|
|
|
// ==================== 鍒涘缓瀹炰緥骞跺鍑?====================
|
|
const framework = new AdminFramework()
|
|
|
|
// 榛樿瀵煎嚭妗嗘灦瀹炰緥
|
|
export default framework
|
|
|
|
// 鎸夐渶瀵煎嚭
|
|
export {
|
|
// 宸ュ叿搴? tools,
|
|
uiTool,
|
|
http,
|
|
|
|
// Store 妯″潡
|
|
storeModules,
|
|
userModule,
|
|
appModule,
|
|
|
|
// 璺敱閰嶇疆
|
|
createBaseRoutes,
|
|
setupRouterGuards,
|
|
|
|
// 绯荤粺椤甸潰
|
|
HomePage,
|
|
SysLog,
|
|
SysParamSetup,
|
|
SysRole,
|
|
SysUser,
|
|
SysControl,
|
|
SysMenu,
|
|
SysTitle,
|
|
|
|
// 鐧诲綍鍜岄敊璇〉闈? LoginPage,
|
|
Page401,
|
|
Page404,
|
|
Page500,
|
|
|
|
// 甯冨眬缁勪欢
|
|
Main,
|
|
ParentView,
|
|
|
|
// 绯荤粺 API
|
|
systemApi,
|
|
systemHighApi,
|
|
|
|
// 妗嗘灦绫? AdminFramework
|
|
}
|
|
|