解决跨页面粘贴，初始组件未展示问题
parent
8bc860fe2b
commit
c367b73442
|
|
@ -1,23 +1,37 @@
|
|||
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 { PhotoList } from '@/packages/components/Photos/index'
|
||||
import { IconList } from '@/packages/components/Icons/index'
|
||||
import { DiyList } from '@/packages/components/Diy/index'
|
||||
import { UnitsList } from '@/packages/components/Units/index'
|
||||
import { ZhiganList } from '@/packages/components/Zhigan/index'
|
||||
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
|
||||
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 { PhotoList } from '@/packages/components/Photos/index';
|
||||
import { IconList } from '@/packages/components/Icons/index';
|
||||
import { DiyList } from '@/packages/components/Diy/index';
|
||||
import { UnitsList } from '@/packages/components/Units/index';
|
||||
import { ZhiganList } from '@/packages/components/Zhigan/index';
|
||||
import {
|
||||
PackagesCategoryEnum,
|
||||
PackagesType,
|
||||
ConfigType,
|
||||
FetchComFlagType,
|
||||
} from '@/packages/index.d';
|
||||
|
||||
const configModules: Record<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
|
||||
eager: true
|
||||
})
|
||||
const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
|
||||
eager: true
|
||||
})
|
||||
const imagesModules: Record<string, { default: string }> = import.meta.glob('../assets/images/chart/**', {
|
||||
eager: true
|
||||
})
|
||||
const configModules: Record<string, { default: string }> = import.meta.glob(
|
||||
'./components/**/config.vue',
|
||||
{
|
||||
eager: true,
|
||||
},
|
||||
);
|
||||
const indexModules: Record<string, { default: string }> = import.meta.glob(
|
||||
'./components/**/index.vue',
|
||||
{
|
||||
eager: true,
|
||||
},
|
||||
);
|
||||
const imagesModules: Record<string, { default: string }> = import.meta.glob(
|
||||
'../assets/images/chart/**',
|
||||
{
|
||||
eager: true,
|
||||
},
|
||||
);
|
||||
|
||||
// * 所有图表
|
||||
export let packagesList: PackagesType = {
|
||||
|
|
@ -30,33 +44,36 @@ export let packagesList: PackagesType = {
|
|||
[PackagesCategoryEnum.DIY]: DiyList,
|
||||
[PackagesCategoryEnum.UNITS]: UnitsList,
|
||||
[PackagesCategoryEnum.ZHIGAN]: ZhiganList,
|
||||
}
|
||||
};
|
||||
|
||||
// 组件缓存, 可以大幅度提升组件加载速度
|
||||
const componentCacheMap = new Map<string, any>()
|
||||
const componentCacheMap = new Map<string, any>();
|
||||
const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
|
||||
const key = packageName + categoryName + keyName
|
||||
const key = packageName + categoryName + keyName;
|
||||
if (!componentCacheMap.has(key)) {
|
||||
componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
|
||||
componentCacheMap.set(
|
||||
key,
|
||||
import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`),
|
||||
);
|
||||
}
|
||||
return componentCacheMap.get(key)
|
||||
}
|
||||
return componentCacheMap.get(key);
|
||||
};
|
||||
|
||||
/**
|
||||
* * 获取目标组件配置信息
|
||||
* @param targetData
|
||||
*/
|
||||
export const createComponent = async (targetData: ConfigType) => {
|
||||
const { redirectComponent, category, key } = targetData
|
||||
const { redirectComponent, category, key } = targetData;
|
||||
// redirectComponent 是给图片组件库和图标组件库使用的
|
||||
if (redirectComponent) {
|
||||
const [packageName, categoryName, keyName] = redirectComponent.split('/')
|
||||
const redirectChart = await loadConfig(packageName, categoryName, keyName)
|
||||
return new redirectChart.default()
|
||||
const [packageName, categoryName, keyName] = redirectComponent.split('/');
|
||||
const redirectChart = await loadConfig(packageName, categoryName, keyName);
|
||||
return new redirectChart.default();
|
||||
}
|
||||
const chart = await loadConfig(targetData.package, category, key)
|
||||
return new chart.default()
|
||||
}
|
||||
const chart = await loadConfig(targetData.package, category, key);
|
||||
return new chart.default();
|
||||
};
|
||||
|
||||
/**
|
||||
* * 获取组件
|
||||
|
|
@ -64,52 +81,52 @@ export const createComponent = async (targetData: ConfigType) => {
|
|||
* @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('/')
|
||||
const urlSplit = key.split('/');
|
||||
if (urlSplit[urlSplit.length - 2] === chartName) {
|
||||
return module[key]
|
||||
return module[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* * 获取展示组件
|
||||
* @param {ConfigType} dropData 配置项
|
||||
*/
|
||||
export const fetchChartComponent = (dropData: ConfigType) => {
|
||||
const { key } = dropData
|
||||
return fetchComponent(key, FetchComFlagType.VIEW)?.default
|
||||
}
|
||||
const { key } = dropData;
|
||||
return fetchComponent(key, FetchComFlagType.VIEW)?.default;
|
||||
};
|
||||
|
||||
/**
|
||||
* * 获取配置组件
|
||||
* @param {ConfigType} dropData 配置项
|
||||
*/
|
||||
export const fetchConfigComponent = (dropData: ConfigType) => {
|
||||
const { key } = dropData
|
||||
return fetchComponent(key, FetchComFlagType.CONFIG)?.default
|
||||
}
|
||||
const { key } = dropData;
|
||||
return fetchComponent(key, FetchComFlagType.CONFIG)?.default;
|
||||
};
|
||||
|
||||
/**
|
||||
* * 获取图片内容
|
||||
* @param {ConfigType} targetData 配置项
|
||||
*/
|
||||
export const fetchImages = async (targetData?: ConfigType) => {
|
||||
if (!targetData) return ''
|
||||
if (!targetData) return '';
|
||||
// 正则判断图片是否为 url，是则直接返回该 url
|
||||
if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
|
||||
if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image;
|
||||
// 新数据动态处理
|
||||
const { image } = targetData
|
||||
const { image } = targetData;
|
||||
// 兼容旧数据
|
||||
if (image.includes('@') || image.includes('base64')) return image
|
||||
if (image.includes('@') || image.includes('base64')) return image;
|
||||
|
||||
const imageName = image.substring(image.lastIndexOf('/') + 1)
|
||||
const imageName = image.substring(image.lastIndexOf('/') + 1);
|
||||
for (const key in imagesModules) {
|
||||
const urlSplit = key.split('/')
|
||||
const urlSplit = key.split('/');
|
||||
if (urlSplit[urlSplit.length - 1] === imageName) {
|
||||
return imagesModules[key]?.default
|
||||
return imagesModules[key]?.default;
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
|
|
|||
|
|
@ -587,52 +587,7 @@ export const useChartEditStore = defineStore({
|
|||
loadingError();
|
||||
}
|
||||
},
|
||||
// 导入画布
|
||||
setCopyData(data: any) {
|
||||
try {
|
||||
loadingStart();
|
||||
const recordCharts = JSON.parse(data);
|
||||
|
||||
if (recordCharts === undefined) {
|
||||
loadingFinish();
|
||||
return;
|
||||
}
|
||||
const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
|
||||
e = cloneDeep(e);
|
||||
e.attr.x = this.getMousePosition.startX;
|
||||
e.attr.y = this.getMousePosition.startY;
|
||||
// 外层生成新 id
|
||||
e.id = getUUID();
|
||||
// 分组列表生成新 id
|
||||
if (e.isGroup) {
|
||||
(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
|
||||
item.id = getUUID();
|
||||
});
|
||||
}
|
||||
|
||||
return e;
|
||||
};
|
||||
const isCut = recordCharts.type === HistoryActionTypeEnum.CUT;
|
||||
const targetList = Array.isArray(recordCharts.charts)
|
||||
? recordCharts.charts
|
||||
: [recordCharts.charts];
|
||||
// 多项
|
||||
targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
|
||||
this.addComponentList(parseHandle(e), undefined, true);
|
||||
// 剪切需删除原数据
|
||||
if (isCut) {
|
||||
this.setTargetSelectChart(e.id);
|
||||
this.removeComponentList(undefined, true);
|
||||
}
|
||||
});
|
||||
if (isCut) this.setRecordChart(undefined);
|
||||
window['$message'].success('导入成功！');
|
||||
loadingFinish();
|
||||
} catch (value) {
|
||||
window['$message'].error('导入失败，请检查数据是否正确！');
|
||||
loadingError();
|
||||
}
|
||||
},
|
||||
// * 撤回/前进 目标处理
|
||||
setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
|
||||
// 处理画布
|
||||
|
|
|
|||
|
|
@ -17,13 +17,24 @@
|
|||
@click="clickHandle(item)"
|
||||
>
|
||||
<div class="list-header">
|
||||
<mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
|
||||
<mac-os-control-btn
|
||||
class="list-header-control-btn"
|
||||
:mini="true"
|
||||
:disabled="true"
|
||||
></mac-os-control-btn>
|
||||
<n-text class="list-header-text" depth="3">
|
||||
<n-ellipsis>{{ item.title }}</n-ellipsis>
|
||||
</n-text>
|
||||
</div>
|
||||
<div class="list-center go-flex-center go-transition" draggable="true">
|
||||
<GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" style="height: auto" />
|
||||
<GoIconify
|
||||
v-if="item.icon"
|
||||
class="list-img"
|
||||
:icon="item.icon"
|
||||
color="#999"
|
||||
width="48"
|
||||
style="height: auto"
|
||||
/>
|
||||
<chart-glob-image v-else class="list-img" :chartConfig="item" />
|
||||
</div>
|
||||
<div class="list-bottom">
|
||||
|
|
@ -34,7 +45,11 @@
|
|||
<!-- 遮罩 -->
|
||||
<div v-if="item.disabled" class="list-model"></div>
|
||||
<!-- 工具栏 -->
|
||||
<div v-if="isShowTools(item)" class="list-tools go-transition" @click="deleteHandle(item, index)">
|
||||
<div
|
||||
v-if="isShowTools(item)"
|
||||
class="list-tools go-transition"
|
||||
@click="deleteHandle(item, index)"
|
||||
>
|
||||
<n-button text type="default" color="#ffffff">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
|
|
@ -50,136 +65,148 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, ref, Ref, computed, nextTick } from 'vue'
|
||||
import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
|
||||
import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||
import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify, goDialog } from '@/utils'
|
||||
import { DragKeyEnum } from '@/enums/editPageEnum'
|
||||
import { createComponent } from '@/packages'
|
||||
import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
|
||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
||||
import { GoIconify } from '@/components/GoIconify'
|
||||
import { icon } from '@/plugins'
|
||||
import { PropType, watch, ref, Ref, computed, nextTick } from 'vue';
|
||||
import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index';
|
||||
import { ChartGlobImage } from '@/components/Pages/ChartGlobImage';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
|
||||
import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore';
|
||||
import {
|
||||
componentInstall,
|
||||
loadingStart,
|
||||
loadingFinish,
|
||||
loadingError,
|
||||
JSONStringify,
|
||||
goDialog,
|
||||
} from '@/utils';
|
||||
import { DragKeyEnum } from '@/enums/editPageEnum';
|
||||
import { createComponent } from '@/packages';
|
||||
import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d';
|
||||
import { ChatCategoryEnum } from '@/packages/components/Photos/index.d';
|
||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index';
|
||||
import { GoIconify } from '@/components/GoIconify';
|
||||
import { icon } from '@/plugins';
|
||||
|
||||
import omit from 'lodash/omit'
|
||||
import omit from 'lodash/omit';
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { TrashIcon } = icon.ionicons5
|
||||
const chartEditStore = useChartEditStore();
|
||||
const { TrashIcon } = icon.ionicons5;
|
||||
|
||||
const emit = defineEmits(['deletePhoto'])
|
||||
const props = defineProps({
|
||||
const emit = defineEmits(['deletePhoto']);
|
||||
const props = defineProps({
|
||||
menuOptions: {
|
||||
type: Array as PropType<ConfigType[]>,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const chartLayoutStore = useChartLayoutStore()
|
||||
const contentChartsItemBoxRef = ref()
|
||||
const chartLayoutStore = useChartLayoutStore();
|
||||
const contentChartsItemBoxRef = ref();
|
||||
|
||||
// 判断工具栏展示
|
||||
const isShowTools = (item: ConfigType) => {
|
||||
return !item.disabled && item.package === PackagesCategoryEnum.PHOTOS && item.category === ChatCategoryEnum.PRIVATE
|
||||
}
|
||||
// 判断工具栏展示
|
||||
const isShowTools = (item: ConfigType) => {
|
||||
return (
|
||||
!item.disabled &&
|
||||
item.package === PackagesCategoryEnum.PHOTOS &&
|
||||
item.category === ChatCategoryEnum.PRIVATE
|
||||
);
|
||||
};
|
||||
|
||||
// 组件展示状态
|
||||
const chartMode: Ref<ChartModeEnum> = computed(() => {
|
||||
return chartLayoutStore.getChartType
|
||||
})
|
||||
// 组件展示状态
|
||||
const chartMode: Ref<ChartModeEnum> = computed(() => {
|
||||
return chartLayoutStore.getChartType;
|
||||
});
|
||||
|
||||
// 拖拽处理
|
||||
const dragStartHandle = (e: DragEvent, item: ConfigType) => {
|
||||
if (item.disabled) return
|
||||
// 拖拽处理
|
||||
const dragStartHandle = (e: DragEvent, item: ConfigType) => {
|
||||
if (item.disabled) return;
|
||||
// 动态注册图表组件
|
||||
componentInstall(item.chartKey, fetchChartComponent(item))
|
||||
componentInstall(item.conKey, fetchConfigComponent(item))
|
||||
componentInstall(item.chartKey, fetchChartComponent(item));
|
||||
componentInstall(item.conKey, fetchConfigComponent(item));
|
||||
// 将配置项绑定到拖拽属性上
|
||||
e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])))
|
||||
e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])));
|
||||
// 修改状态
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
|
||||
}
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true);
|
||||
};
|
||||
|
||||
// 拖拽结束
|
||||
const dragendHandle = () => {
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
|
||||
}
|
||||
// 拖拽结束
|
||||
const dragendHandle = () => {
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false);
|
||||
};
|
||||
|
||||
// 双击添加
|
||||
const dblclickHandle = async (item: ConfigType) => {
|
||||
if (item.disabled) return
|
||||
// 双击添加
|
||||
const dblclickHandle = async (item: ConfigType) => {
|
||||
console.log('双击添加', item);
|
||||
if (item.disabled) return;
|
||||
try {
|
||||
loadingStart()
|
||||
loadingStart();
|
||||
// 动态注册图表组件
|
||||
componentInstall(item.chartKey, fetchChartComponent(item))
|
||||
componentInstall(item.conKey, fetchConfigComponent(item))
|
||||
componentInstall(item.chartKey, fetchChartComponent(item));
|
||||
componentInstall(item.conKey, fetchConfigComponent(item));
|
||||
// 创建新图表组件
|
||||
let newComponent: CreateComponentType = await createComponent(item)
|
||||
let newComponent: CreateComponentType = await createComponent(item);
|
||||
if (item.redirectComponent) {
|
||||
item.dataset && (newComponent.option.dataset = item.dataset)
|
||||
newComponent.chartConfig.title = item.title
|
||||
newComponent.chartConfig.chartFrame = item.chartFrame
|
||||
item.dataset && (newComponent.option.dataset = item.dataset);
|
||||
newComponent.chartConfig.title = item.title;
|
||||
newComponent.chartConfig.chartFrame = item.chartFrame;
|
||||
}
|
||||
// 添加
|
||||
chartEditStore.addComponentList(newComponent, false, true)
|
||||
chartEditStore.addComponentList(newComponent, false, true);
|
||||
// 选中
|
||||
chartEditStore.setTargetSelectChart(newComponent.id)
|
||||
loadingFinish()
|
||||
chartEditStore.setTargetSelectChart(newComponent.id);
|
||||
loadingFinish();
|
||||
} catch (error) {
|
||||
loadingError()
|
||||
console.log('chartItemBox-index')
|
||||
window['$message'].warning(`图表正在研发中, 敬请期待...`)
|
||||
loadingError();
|
||||
console.log('chartItemBox-index');
|
||||
window['$message'].warning(`图表正在研发中, 敬请期待...`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 单击事件
|
||||
const clickHandle = (item: ConfigType) => {
|
||||
item?.configEvents?.addHandle(item)
|
||||
}
|
||||
// 单击事件
|
||||
const clickHandle = (item: ConfigType) => {
|
||||
item?.configEvents?.addHandle(item);
|
||||
};
|
||||
|
||||
const deleteHandle = (item: ConfigType, index: number) => {
|
||||
const deleteHandle = (item: ConfigType, index: number) => {
|
||||
goDialog({
|
||||
message: '是否删除此图片？',
|
||||
transformOrigin: 'center',
|
||||
onPositiveCallback: () => {
|
||||
const packagesStore = usePackagesStore()
|
||||
emit('deletePhoto', item, index)
|
||||
packagesStore.deletePhotos(item, index)
|
||||
}
|
||||
})
|
||||
}
|
||||
const packagesStore = usePackagesStore();
|
||||
emit('deletePhoto', item, index);
|
||||
packagesStore.deletePhotos(item, index);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => chartMode.value,
|
||||
(newValue: ChartModeEnum) => {
|
||||
if (newValue === ChartModeEnum.DOUBLE) {
|
||||
nextTick(() => {
|
||||
contentChartsItemBoxRef.value.classList.add('miniAnimation')
|
||||
})
|
||||
contentChartsItemBoxRef.value.classList.add('miniAnimation');
|
||||
});
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 列表项宽度 */
|
||||
$itemWidth: 100%;
|
||||
$maxItemWidth: 180px;
|
||||
$halfItemWidth: 46%;
|
||||
/* 内容高度 */
|
||||
$centerHeight: 100px;
|
||||
$halfCenterHeight: 50px;
|
||||
/* 列表项宽度 */
|
||||
$itemWidth: 100%;
|
||||
$maxItemWidth: 180px;
|
||||
$halfItemWidth: 46%;
|
||||
/* 内容高度 */
|
||||
$centerHeight: 100px;
|
||||
$halfCenterHeight: 50px;
|
||||
|
||||
@include go('content-charts-item-animation-patch') {
|
||||
@include go('content-charts-item-animation-patch') {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include go('content-charts-item-box') {
|
||||
@include go('content-charts-item-box') {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
|
@ -310,5 +337,5 @@ $halfCenterHeight: 50px;
|
|||
&.miniAnimation {
|
||||
animation: miniAnimation 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -131,6 +131,11 @@
|
|||
import { BtnListType, TypeEnum } from './index.d';
|
||||
import { icon } from '@/plugins';
|
||||
import { MonacoEditor } from '@/components/Pages/MonacoEditor';
|
||||
import { getUUID, loadingStart, loadingFinish, loadingError, componentInstall } from '@/utils';
|
||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
|
||||
import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d';
|
||||
|
||||
const {
|
||||
DownloadIcon,
|
||||
|
|
@ -243,9 +248,69 @@
|
|||
};
|
||||
// 导入画布
|
||||
const saveCopyData = () => {
|
||||
chartEditStore.setCopyData(copyValue.value);
|
||||
setCopyData(copyValue.value);
|
||||
closeModel();
|
||||
};
|
||||
// 导入画布
|
||||
const setCopyData = (data: any) => {
|
||||
try {
|
||||
loadingStart();
|
||||
const recordCharts = JSON.parse(data);
|
||||
|
||||
if (recordCharts === undefined) {
|
||||
loadingFinish();
|
||||
return;
|
||||
}
|
||||
const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
|
||||
e = cloneDeep(e);
|
||||
e.attr.x = chartEditStore.getMousePosition.startX;
|
||||
e.attr.y = chartEditStore.getMousePosition.startY;
|
||||
// 外层生成新 id
|
||||
e.id = getUUID();
|
||||
// 分组列表生成新 id
|
||||
if (e.isGroup) {
|
||||
(e as CreateComponentGroupType).groupList.forEach(async (item: CreateComponentType) => {
|
||||
item.id = getUUID();
|
||||
});
|
||||
}
|
||||
|
||||
return e;
|
||||
};
|
||||
const createComponentInstall = (e) => {
|
||||
if (e.isGroup) {
|
||||
// 分组
|
||||
e.groupList.forEach(async (item) => {
|
||||
// // 动态注册图表组件
|
||||
componentInstall(item.chartConfig.chartKey, fetchChartComponent(item.chartConfig));
|
||||
componentInstall(item.chartConfig.conKey, fetchConfigComponent(item.chartConfig));
|
||||
});
|
||||
} else {
|
||||
componentInstall(e.chartConfig.chartKey, fetchChartComponent(e.chartConfig));
|
||||
componentInstall(e.chartConfig.conKey, fetchConfigComponent(e.chartConfig));
|
||||
}
|
||||
};
|
||||
const isCut = recordCharts.type === HistoryActionTypeEnum.CUT;
|
||||
const targetList = Array.isArray(recordCharts.charts)
|
||||
? recordCharts.charts
|
||||
: [recordCharts.charts];
|
||||
// 多项
|
||||
targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
|
||||
createComponentInstall(e);
|
||||
chartEditStore.addComponentList(parseHandle(e), undefined, true);
|
||||
// 剪切需删除原数据
|
||||
if (isCut) {
|
||||
chartEditStore.setTargetSelectChart(e.id);
|
||||
chartEditStore.removeComponentList(undefined, true);
|
||||
}
|
||||
});
|
||||
if (isCut) chartEditStore.setRecordChart(undefined);
|
||||
window['$message'].success('导入成功！');
|
||||
loadingFinish();
|
||||
} catch (value) {
|
||||
window['$message'].error('导入失败，请检查数据是否正确！');
|
||||
loadingError();
|
||||
}
|
||||
};
|
||||
// 配置列表
|
||||
const btnList: BtnListType[] = [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue