github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 08:12:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 列表组件的image渲染支持url模式

Browse Source
This commit is contained in:
tnt group 2023-05-17 20:09:03 +08:00
parent 0c87b9ecac
commit 93714457ab
1 changed files with 89 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
src/packages/index.ts
View File

@ -1,87 +1,89 @@
import { ChartList } from '@/packages/components/Charts/index' import { ChartList } from '@/packages/components/Charts/index'
import { DecorateList } from '@/packages/components/Decorates/index' import { DecorateList } from '@/packages/components/Decorates/index'
import { InformationList } from '@/packages/components/Informations/index' import { InformationList } from '@/packages/components/Informations/index'
import { TableList } from '@/packages/components/Tables/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: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', { const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
eager: true eager: true
}) })
const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', { const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
eager: true eager: true
}) })
const imagesModules: Record<string, { default: string }> = import.meta.glob('../assets/images/chart/**', { const imagesModules: Record<string, { default: string }> = import.meta.glob('../assets/images/chart/**', {
eager: true eager: true
}) })
// * 所有图表 // * 所有图表
export let packagesList: PackagesType = { export let packagesList: PackagesType = {
[PackagesCategoryEnum.CHARTS]: ChartList, [PackagesCategoryEnum.CHARTS]: ChartList,
[PackagesCategoryEnum.INFORMATIONS]: InformationList, [PackagesCategoryEnum.INFORMATIONS]: InformationList,
[PackagesCategoryEnum.TABLES]: TableList, [PackagesCategoryEnum.TABLES]: TableList,
[PackagesCategoryEnum.DECORATES]: DecorateList [PackagesCategoryEnum.DECORATES]: DecorateList
} }
/** /**
* * 获取目标组件配置信息 * * 获取目标组件配置信息
* @param targetData * @param targetData
*/ */
export const createComponent = async (targetData: ConfigType) => { export const createComponent = async (targetData: ConfigType) => {
const { category, key } = targetData const { category, key } = targetData
const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`) const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
return new chart.default() return new chart.default()
} }
/** /**
* * 获取组件 * * 获取组件
* @param {string} chartName 名称 * @param {string} chartName 名称
* @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件 * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
*/ */
const fetchComponent = (chartName: string, flag: FetchComFlagType) => { 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) { for (const key in module) {
const urlSplit = key.split('/') const urlSplit = key.split('/')
if (urlSplit[urlSplit.length - 2] === chartName) { if (urlSplit[urlSplit.length - 2] === chartName) {
return module[key] return module[key]
} }
} }
} }
/** /**
* * 获取展示组件 * * 获取展示组件
* @param {ConfigType} dropData 配置项 * @param {ConfigType} dropData 配置项
*/ */
export const fetchChartComponent = (dropData: ConfigType) => { export const fetchChartComponent = (dropData: ConfigType) => {
const { key } = dropData const { key } = dropData
return fetchComponent(key, FetchComFlagType.VIEW)?.default return fetchComponent(key, FetchComFlagType.VIEW)?.default
} }
/** /**
* * 获取配置组件 * * 获取配置组件
* @param {ConfigType} dropData 配置项 * @param {ConfigType} dropData 配置项
*/ */
export const fetchConfigComponent = (dropData: ConfigType) => { export const fetchConfigComponent = (dropData: ConfigType) => {
const { key } = dropData const { key } = dropData
return fetchComponent(key, FetchComFlagType.CONFIG)?.default return fetchComponent(key, FetchComFlagType.CONFIG)?.default
} }
/** /**
* * 获取图片内容 * * 获取图片内容
* @param {ConfigType} targetData 配置项 * @param {ConfigType} targetData 配置项
*/ */
export const fetchImages = async (targetData?: ConfigType) => { export const fetchImages = async (targetData?: ConfigType) => {
if (!targetData) return '' if (!targetData) return ''
// 新数据动态处理 // 判断图片是否为 url，是则直接返回该 url
const { image, package: targetDataPackage } = targetData if (/^(?:https?):\/\/[^\s/.?#].[^\s]*/.test(targetData.image)) return targetData.image
// 兼容旧数据 // 新数据动态处理
if (image.includes('@') || image.includes('base64')) return image const { image, package: targetDataPackage } = targetData
// 兼容旧数据
const imageName = image.substring(image.lastIndexOf('/') + 1) if (image.includes('@') || image.includes('base64')) return image
for (const key in imagesModules) {
const urlSplit = key.split('/') const imageName = image.substring(image.lastIndexOf('/') + 1)
if (urlSplit[urlSplit.length - 1] === imageName) { for (const key in imagesModules) {
return imagesModules[key]?.default const urlSplit = key.split('/')
} if (urlSplit[urlSplit.length - 1] === imageName) {
} return imagesModules[key]?.default
return '' }
} }
return ''
}