fix: 处理组件图片路径会报错的问题

This commit is contained in:
奔跑的面条
2023-01-09 19:32:09 +08:00
parent 462a613bd3
commit f82cde2faf
60 changed files with 128 additions and 129 deletions
+30 -14
View File
@@ -2,15 +2,11 @@ import { ChartList } from '@/packages/components/Charts/index'
import { DecorateList } from '@/packages/components/Decorates/index'
import { InformationList } from '@/packages/components/Informations/index'
import { TableList } from '@/packages/components/Tables/index'
import {
PackagesCategoryEnum,
PackagesType,
ConfigType,
FetchComFlagType
} from '@/packages/index.d'
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
const configModules = import.meta.globEager("./components/**/config.vue")
const indexModules = import.meta.globEager("./components/**/index.vue")
const configModules = import.meta.globEager('./components/**/config.vue')
const indexModules = import.meta.globEager('./components/**/index.vue')
const imagesModules = import.meta.globEager('../assets/images/chart/**')
// * 所有图表
export let packagesList: PackagesType = {
@@ -24,7 +20,7 @@ export let packagesList: PackagesType = {
* * 获取目标组件配置信息
* @param targetData
*/
export const createComponent = async (targetData: ConfigType) => {
export const createComponent = async (targetData: ConfigType) => {
const { category, key } = targetData
const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
return new chart.default()
@@ -36,10 +32,10 @@ export let packagesList: PackagesType = {
* @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
*/
const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
const module = flag === FetchComFlagType.VIEW ? indexModules: configModules
const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
for (const key in module) {
const urlSplit = key.split('/')
if(urlSplit[urlSplit.length -2 ] === chartName) {
if (urlSplit[urlSplit.length - 2] === chartName) {
return module[key]
}
}
@@ -49,7 +45,7 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
* * 获取展示组件
* @param {ConfigType} dropData 配置项
*/
export const fetchChartComponent = (dropData: ConfigType) => {
export const fetchChartComponent = (dropData: ConfigType) => {
const { key } = dropData
return fetchComponent(key, FetchComFlagType.VIEW)?.default
}
@@ -58,7 +54,27 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
* * 获取配置组件
* @param {ConfigType} dropData 配置项
*/
export const fetchConfigComponent = (dropData: ConfigType) => {
export const fetchConfigComponent = (dropData: ConfigType) => {
const { key } = dropData
return fetchComponent(key, FetchComFlagType.CONFIG)?.default
}
}
/**
* * 获取图片内容
* @param {ConfigType} targetData 配置项
*/
export const fetchImages = async (targetData: ConfigType) => {
// 新数据动态处理
const { image, package: targetDataPackage } = targetData
// 兼容旧数据
if (image.includes('@') || image.includes('base64')) return image
const imageName = image.substring(image.lastIndexOf('/') + 1)
for (const key in imagesModules) {
const urlSplit = key.split('/')
if (urlSplit[urlSplit.length - 1] === imageName) {
return imagesModules[key]?.default
}
}
return ''
}