fix: 抽离update hook

This commit is contained in:
MTrun 2022-03-22 11:41:43 +08:00
parent 2d36600e3b
commit 890dd88b5f
7 changed files with 61 additions and 49 deletions

View File

@ -18,7 +18,7 @@ import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
import { AppProvider } from '@/components/AppProvider'
import { I18n } from '@/components/I18n'
import { useDarkThemeHook, useThemeOverridesHook, useHook } from '@/hooks'
import { useDarkThemeHook, useThemeOverridesHook, useCode } from '@/hooks'
//
const darkTheme = useDarkThemeHook()
@ -27,5 +27,5 @@ const darkTheme = useDarkThemeHook()
const overridesTheme = useThemeOverridesHook()
//
const hljsTheme = useHook()
const hljsTheme = useCode()
</script>

View File

@ -1,3 +1,3 @@
export * from '@/hooks/theme.hook'
export * from '@/hooks/previewScale.hook'
export * from '@/hooks/code.hook'
export * from '@/hooks/useTheme.hook'
export * from '@/hooks/usePreviewScale.hook'
export * from '@/hooks/useCode.hook'

View File

@ -2,7 +2,7 @@ import hljs from 'highlight.js/lib/core'
import json from 'highlight.js/lib/languages/json'
import typescript from 'highlight.js/lib/languages/typescript'
export const useHook = () => {
export const useCode = () => {
hljs.registerLanguage('json', json)
hljs.registerLanguage('typescript', typescript)
return hljs

View File

@ -64,13 +64,11 @@
</template>
<script setup lang="ts">
import { ref, computed, watch, nextTick, PropType } from 'vue'
import { UploadCustomRequestOptions } from 'naive-ui'
import { FileTypeEnum } from '@/enums/fileTypeEnum'
import { readFile, downloadFile } from '@/utils'
import { ref, computed, watch, PropType } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { icon } from '@/plugins'
import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
import { useFile } from '../../hooks/useFile.hooks'
const props = defineProps({
targetData: {
@ -88,11 +86,12 @@ const props = defineProps({
const tableTitle = ['字段', '映射', '状态']
const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
const uploadFileListRef = ref()
const source = ref()
const dimensions = ref()
const dimensionsAndSource = ref()
const { uploadFileListRef, customRequest, beforeUpload, download} = useFile(props.targetData)
//
const getSource = computed(() => {
return JSON.stringify(source.value)
@ -139,41 +138,6 @@ watch(() => props.targetData?.option?.dataset, (newData) => {
}, {
immediate: true
})
//@ts-ignore
const beforeUpload = ({ file }) => {
uploadFileListRef.value = []
const type = file.file.type
if (type !== FileTypeEnum.JSON && type !== FileTypeEnum.TXT) {
window['$message'].warning('仅支持上传 【JSON】 格式文件,请重新上传!')
return false
}
return true
}
//
const customRequest = (options: UploadCustomRequestOptions) => {
const { file } = options
nextTick(() => {
if (file.file) {
readFile(file.file).then((fileData: any) => {
props.targetData.option.dataset = JSON.parse(fileData)
});
} else {
window['$message'].error('导入数据失败,请稍后重试或联系管理员!')
}
})
}
//
const download = () => {
try {
window['$message'].success('下载中,请耐心等待...')
downloadFile(JSON.stringify(props.targetData?.option?.dataset), undefined, 'json')
} catch (error) {
window['$message'].success('下载失败,数据错误!')
}
}
</script>
<style lang="scss" scoped>

View File

@ -1,3 +1,51 @@
const useFile = () => {
}
import { ref, toRef, nextTick } from 'vue'
import { UploadCustomRequestOptions } from 'naive-ui'
import { FileTypeEnum } from '@/enums/fileTypeEnum'
import { readFile, downloadFile } from '@/utils'
export const useFile = (targetData: any) => {
const uploadFileListRef = ref()
const option = toRef(targetData, 'option')
console.log(option)
//@ts-ignore
const beforeUpload = ({ file }) => {
uploadFileListRef.value = []
const type = file.file.type
if (type !== FileTypeEnum.JSON && type !== FileTypeEnum.TXT) {
window['$message'].warning('仅支持上传 【JSON】 格式文件,请重新上传!')
return false
}
return true
}
// 自定义上传操作
const customRequest = (options: UploadCustomRequestOptions) => {
const { file } = options
nextTick(() => {
if (file.file) {
readFile(file.file).then((fileData: any) => {
option.value.dataset = JSON.parse(fileData)
console.log(option.value.dataset)
})
} else {
window['$message'].error('导入数据失败,请稍后重试或联系管理员!')
}
})
}
// 下载文件
const download = () => {
try {
window['$message'].success('下载中,请耐心等待...')
downloadFile(JSON.stringify(option.value.dataset), undefined, 'json')
} catch (error) {
window['$message'].success('下载失败,数据错误!')
}
}
return {
uploadFileListRef,
beforeUpload,
customRequest,
download
}
}