108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import { ref, nextTick } from 'vue'
|
|
import { UploadCustomRequestOptions } from 'naive-ui'
|
|
import { FileTypeEnum } from '@/enums/fileTypeEnum'
|
|
import { fetchChartComponent } from '@/packages/index'
|
|
import { CreateComponentType } from '@/packages/index.d'
|
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
|
import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
|
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
|
|
import { readFile, goDialog } from '@/utils'
|
|
import { createComponent } from '@/packages'
|
|
|
|
// 更新函数
|
|
const updateComponent = async (fileData: any, isSplace = false) => {
|
|
const chartEditStore = useChartEditStore()
|
|
const chartHistoryStore = useChartHistoryStore()
|
|
if (isSplace) {
|
|
// 清除列表
|
|
chartEditStore.componentList = []
|
|
// 清除历史记录
|
|
chartHistoryStore.clearBackStack()
|
|
chartHistoryStore.clearForwardStack()
|
|
}
|
|
// 列表组件注册
|
|
fileData.componentList.forEach(async (e: CreateComponentType) => {
|
|
if (!window['$vue'].component(e.chartConfig.chartKey)) {
|
|
window['$vue'].component(
|
|
e.chartConfig.chartKey,
|
|
fetchChartComponent(e.chartConfig)
|
|
)
|
|
}
|
|
})
|
|
// 数据赋值
|
|
for (const key in fileData) {
|
|
// 组件
|
|
if (key === ChartEditStoreEnum.COMPONENT_LIST) {
|
|
for (const comItem of fileData[key]) {
|
|
// 补充 class 上的方法
|
|
let newComponent: CreateComponentType = await createComponent(
|
|
comItem.chartConfig
|
|
)
|
|
// 不保存到记录
|
|
chartEditStore.addComponentList(
|
|
Object.assign(newComponent, comItem),
|
|
false,
|
|
true
|
|
)
|
|
}
|
|
} else {
|
|
// 非组件
|
|
Object.assign((chartEditStore as any)[key], fileData[key])
|
|
}
|
|
}
|
|
}
|
|
|
|
export const useFile = () => {
|
|
const importUploadFileListRef = ref()
|
|
const chartEditStore = useChartEditStore()
|
|
|
|
// 上传-前置
|
|
//@ts-ignore
|
|
const importBeforeUpload = ({ file }) => {
|
|
importUploadFileListRef.value = []
|
|
const type = file.file.type
|
|
if (type !== FileTypeEnum.JSON && type !== FileTypeEnum.TXT) {
|
|
window['$message'].warning('仅支持上传 【JSON】 格式文件，请重新上传！')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
// 上传-导入
|
|
const importCustomRequest = (options: UploadCustomRequestOptions) => {
|
|
const { file } = options
|
|
nextTick(() => {
|
|
if (file.file) {
|
|
readFile(file.file).then((fileData: any) => {
|
|
goDialog({
|
|
message: '请选择导入方式:',
|
|
positiveText: '新增（可撤回）',
|
|
negativeText: '覆盖（不可撤回）',
|
|
negativeButtonProps: { type: 'info', ghost: false },
|
|
// 新增
|
|
onNegativeCallback: async () => {
|
|
fileData = JSON.parse(fileData)
|
|
await updateComponent(fileData, true)
|
|
window['$message'].success('导入成功！')
|
|
},
|
|
// 覆盖
|
|
onPositiveCallback: async () => {
|
|
fileData = JSON.parse(fileData)
|
|
await updateComponent(fileData)
|
|
window['$message'].success('导入成功！')
|
|
}
|
|
})
|
|
})
|
|
} else {
|
|
window['$message'].error('导入失败，请检查数据或联系管理员！')
|
|
}
|
|
})
|
|
}
|
|
|
|
return {
|
|
importUploadFileListRef,
|
|
importBeforeUpload,
|
|
importCustomRequest
|
|
}
|
|
}
|