feat: 解决拖动图表默认切换至动态请求tab

main
许宏杰 2 months ago
parent 3a74e224af
commit af9540fb21

@ -4,4 +4,4 @@ import FlowChart from './FlowChart'
import Three from './Three'
import Mores from './Mores'
export const DecorateList = [...Borders, ...Decorates,...FlowChart, ...Three, ...Mores]
export const DecorateList = [...Borders,]// ...Decorates,...FlowChart, ...Three, ...Mores

@ -210,5 +210,5 @@ export type PackagesType = {
// [PackagesCategoryEnum.TABLES]: ConfigType[]
// [PackagesCategoryEnum.PHOTOS]: ConfigType[]
// [PackagesCategoryEnum.ICONS]: ConfigType[]
// [PackagesCategoryEnum.DECORATES]: ConfigType[]
[PackagesCategoryEnum.DECORATES]: ConfigType[]
}

@ -23,18 +23,20 @@ export let packagesList: PackagesType = {
// [PackagesCategoryEnum.VCHART]: VChartList,
[PackagesCategoryEnum.INFORMATIONS]: InformationList,
// [PackagesCategoryEnum.TABLES]: TableList,
// [PackagesCategoryEnum.DECORATES]: DecorateList,
[PackagesCategoryEnum.DECORATES]: DecorateList,
// [PackagesCategoryEnum.PHOTOS]: PhotoList,
// [PackagesCategoryEnum.ICONS]: IconList
}
// 组件缓存, 可以大幅度提升组件加载速度
const componentCacheMap = new Map<string, any>()
const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
const key = packageName + categoryName + keyName
if (!componentCacheMap.has(key)) {
componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
}
return componentCacheMap.get(key)
}
@ -44,6 +46,7 @@ const loadConfig = (packageName: string, categoryName: string, keyName: string)
*/
export const createComponent = async (targetData: ConfigType) => {
const { redirectComponent, category, key } = targetData
// redirectComponent 是给图片组件库和图标组件库使用的
if (redirectComponent) {
const [packageName, categoryName, keyName] = redirectComponent.split('/')

@ -20,9 +20,9 @@ import cloneDeep from 'lodash/cloneDeep'
// 请求基础属性
export const requestConfig: RequestConfigType = {
requestDataType: RequestDataTypeEnum.AJAX,
requestHttpType: RequestHttpEnum.POST,
requestUrl: 'http://baijiahu.mynatapp.cc/',
requestDataType: RequestDataTypeEnum.STATIC,
requestHttpType: RequestHttpEnum.GET,
requestUrl: '',
requestInterval: undefined,
requestIntervalUnit: RequestHttpIntervalEnum.SECOND,
requestContentType: RequestContentTypeEnum.DEFAULT,

@ -219,6 +219,7 @@ export const useChartEditStore = defineStore({
// * 设置 editCanvas 数据项
setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
this.editCanvas[key] = value
// console.log('拖拽修改状态',this.editCanvas[key] )
},
// * 设置 editCanvasConfig需保存后端 数据项
setEditCanvasConfig<T extends keyof EditCanvasConfigType, K extends EditCanvasConfigType[T]>(key: T, value: K) {

@ -134,12 +134,12 @@ const chartsDefaultTabList = [
icon: ConstructIcon,
render: ChartSetting
},
{
key: TabsEnum.CHART_ANIMATION,
title: '动画',
icon: LeafIcon,
render: ChartAnimation
}
// {
// key: TabsEnum.CHART_ANIMATION,
// title: '',
// icon: LeafIcon,
// render: ChartAnimation
// }
]
const chartsTabList = [
@ -150,12 +150,12 @@ const chartsTabList = [
icon: FlashIcon,
render: ChartData
},
{
key: TabsEnum.CHART_EVENT,
title: '事件',
icon: RocketIcon,
render: ChartEvent
}
// {
// key: TabsEnum.CHART_EVENT,
// title: '',
// icon: RocketIcon,
// render: ChartEvent
// }
]
</script>

@ -14,6 +14,8 @@ const { onClickOutSide } = useContextMenu()
// * 拖拽到编辑区域里
export const dragHandle = async (e: DragEvent) => {
console.log('拖拽到编辑区')
e.preventDefault()
try {
@ -21,6 +23,7 @@ export const dragHandle = async (e: DragEvent) => {
// 获取拖拽数据
const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DRAG_KEY)
if (!drayDataString) {
loadingFinish()
return
@ -29,18 +32,23 @@ export const dragHandle = async (e: DragEvent) => {
// 修改状态
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
if (dropData.disabled) return
// 创建新图表组件
let newComponent: CreateComponentType = await createComponent(dropData)
if (dropData.redirectComponent) {
dropData.dataset && (newComponent.option.dataset = dropData.dataset)
newComponent.chartConfig.title = dropData.title
newComponent.chartConfig.chartFrame = dropData.chartFrame
}
//默认切换成动态请求
newComponent.request.requestDataType =1
console.log(newComponent,'创建新图表')
setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
chartEditStore.addComponentList(newComponent, false, true)
chartEditStore.setTargetSelectChart(newComponent.id)
loadingFinish()
} catch (error) {

Loading…
Cancel
Save