123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- import { defineAsyncComponent } from 'vue'
- import defaultInputComponentConfig from '../cip-form-input/component-config'
- import defaultLayoutComponentConfig from '../cip-form-layout/component-config'
- const generateAppendKey = (append) => {
- return append ? `-${append}` : ''
- }
- const analyseComponents = (dictionary, append) => {
- const result = {}
- const appendKey = generateAppendKey(append) // append ? `-${append}` : ''
- const appendPath = append ? `/${append}` : ''
- const errorComponent = defineAsyncComponent(dictionary.default(appendPath))
- Object.keys(dictionary).map(key => {
- const loader = dictionary[key](appendPath) || dictionary.default(appendPath)
- result[`${key}${appendKey}`] = defineAsyncComponent({
- loader,
- errorComponent,
- onError (error, retry, fail, attempts) {
- console.log(error)
- console.warn(`${key}${appendKey}组件加载失败,加载默认组件`)
- fail()
- }
- })
- })
- return result
- }
- const getComponentDictionary = (componentConfig) => {
- const result = {}
- Object.keys(componentConfig).forEach(key => {
- const config = componentConfig[key]
- const component = typeof config === 'function' ? config : componentConfig[key].component
- result[key] = component
- })
- return result
- }
- const getLayoutType = (componentConfig) => {
- const result = []
- Object.keys(componentConfig).forEach(key => {
- if (componentConfig[key].layout) {
- result.push(key)
- }
- })
- return result
- }
- /**
- * 贯穿整个数据渲染的单例对象
- */
- export class DRender {
- constructor () {
- if (!DRender.instance) {
- this.init()
- DRender.instance = this
- }
- return DRender.instance
- }
- defaultComponentConfig={}
- componentDictionary = {}
- layoutTypeList=[]
- // 初始化
- init () {
- const defaultComponentConfig = { ...defaultInputComponentConfig, ...defaultLayoutComponentConfig }
- this.defaultComponentConfig = defaultComponentConfig
- this.componentDictionary = getComponentDictionary(defaultComponentConfig)
- this.layoutTypeList = getLayoutType(defaultComponentConfig)
- }
- setConfig (renderConfig = {}) {
- const { components, plugins } = renderConfig
- const customComponentConfig = {}
- if (components) Object.assign(customComponentConfig, components)
- if (plugins) Object.assign(customComponentConfig, ...plugins)
- this.setCustomComponents(customComponentConfig)
- }
- setCustomComponents (customComponentsConfig) {
- const componentConfig = { ...this.defaultComponentConfig, ...customComponentsConfig }
- const componentDictionary = getComponentDictionary(componentConfig)
- this.componentDictionary = componentDictionary
- this.layoutTypeList = getLayoutType(componentConfig)
- }
- // 获取组件
- getComponent (type, append = '') {
- if (!this[`${append}Components`]) {
- // 如果是没有缓存过的组件组 分析一次
- this[`${append}Components`] = analyseComponents(this.componentDictionary, append)
- }
- return this[`${append}Components`][`${type}${generateAppendKey(append)}`]
- }
- isLayoutType (type) {
- return this.layoutTypeList.includes(type)
- }
- }
- // 必须直接实例化以防止数据为初始化导致的错误
- const dRender = new DRender()
- // 根据d-renderConfig
- let dRenderConfig
- try {
- dRenderConfig = require('../../../d-render.config').default
- dRender.setConfig(dRenderConfig)
- } catch (e) {
- process.env.NODE_ENV === 'development' && console.log(e)
- }
|