useSync.hook.ts 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import { getUUID } from '@/utils'
  2. import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  3. import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
  4. import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
  5. import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
  6. import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
  7. // 请求处理
  8. export const useSync = () => {
  9. const chartEditStore = useChartEditStore()
  10. const chartHistoryStore = useChartHistoryStore()
  11. /**
  12. * * 组件动态注册
  13. * @param projectData 项目数据
  14. * @param isSplace 是否替换数据
  15. * @returns
  16. */
  17. const updateComponent = async (projectData: ChartEditStorage, isSplace = false) => {
  18. if (isSplace) {
  19. // 清除列表
  20. chartEditStore.componentList = []
  21. // 清除历史记录
  22. chartHistoryStore.clearBackStack()
  23. chartHistoryStore.clearForwardStack()
  24. }
  25. // 列表组件注册
  26. projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
  27. // 排除分组
  28. if (e.isGroup) return
  29. const target = e as CreateComponentType
  30. if (!window['$vue'].component(target.chartConfig.chartKey)) {
  31. window['$vue'].component(
  32. target.chartConfig.chartKey,
  33. fetchChartComponent(target.chartConfig)
  34. )
  35. window['$vue'].component(
  36. target.chartConfig.conKey,
  37. fetchConfigComponent(target.chartConfig)
  38. )
  39. }
  40. })
  41. // 数据赋值
  42. for (const key in projectData) {
  43. // 组件
  44. if (key === ChartEditStoreEnum.COMPONENT_LIST) {
  45. for (const comItem of projectData[key]) {
  46. // 补充 class 上的方法
  47. let newComponent: CreateComponentType = await createComponent(
  48. comItem.chartConfig as ConfigType
  49. )
  50. chartEditStore.addComponentList(
  51. Object.assign(newComponent, {...comItem, id: getUUID()}),
  52. false,
  53. true
  54. )
  55. }
  56. } else {
  57. // 非组件(顺便排除脏数据)
  58. if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
  59. Object.assign((chartEditStore as any)[key], projectData[key])
  60. }
  61. }
  62. }
  63. return {
  64. updateComponent
  65. }
  66. }