5b8682bb7c
* fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96 卸载路由时清除requestAnimationFrame * feat: ✨ 文件存储使用Blob格式 * style: 💄 修改部分类型any为具体类型 * feat: ✨ 界面设置中模块使用瀑布流布局 #96 * fix: 🐛 md文档更换文件夹解决控制台警告 * style: 💄 switch按钮改回使用daisyui组件 * refactor: ♻️ 所有人员列表提取tableColumn * style: 💄 奖项列表中的图片类型修复
76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<script setup lang='ts'>
|
||
import type { IFileData } from '@/components/FileUpload/type'
|
||
import localforage from 'localforage'
|
||
import { v4 as uuidv4 } from 'uuid'
|
||
import { computed, ref, watch } from 'vue'
|
||
import { useToast } from 'vue-toast-notification'
|
||
import CustomDialog from '@/components/Dialog/index.vue'
|
||
import FileUpload from '@/components/FileUpload/index.vue'
|
||
|
||
interface Props {
|
||
importAllConfigData: (data: any) => void
|
||
}
|
||
|
||
const props = defineProps<Props>()
|
||
const toast = useToast()
|
||
const limitType = ref('application/json')
|
||
const visible = defineModel('visible', {
|
||
type: Boolean,
|
||
required: true,
|
||
})
|
||
const jsonFileData = ref<IFileData | null>(null)
|
||
|
||
const uploadDialogRef = ref()
|
||
|
||
async function uploadFile(fileData: IFileData | null) {
|
||
if (!fileData) {
|
||
jsonFileData.value = null
|
||
return
|
||
}
|
||
const isJson = /application\/json/.test(fileData?.type || '')
|
||
if (!isJson) {
|
||
toast.open({
|
||
message: '不是json文件，请检查',
|
||
type: 'error',
|
||
position: 'top-right',
|
||
})
|
||
return
|
||
}
|
||
jsonFileData.value = fileData
|
||
}
|
||
|
||
function submitUpload() {
|
||
if (jsonFileData.value) {
|
||
// 把文件转化为json数据
|
||
const jsonData = jsonFileData.value.data
|
||
console.log('jsonData', jsonData)
|
||
props.importAllConfigData(jsonData)
|
||
}
|
||
}
|
||
watch(visible, (newVal) => {
|
||
if (newVal) {
|
||
uploadDialogRef.value.showDialog()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<CustomDialog
|
||
ref="uploadDialogRef"
|
||
v-model:visible="visible"
|
||
title="设置文件上传"
|
||
:submit-func="submitUpload"
|
||
class=""
|
||
>
|
||
<template #content>
|
||
<div class="flex flex-col items-center gap-6 w-full px-12">
|
||
<FileUpload v-if="visible" :limit-type="limitType" mode="json" @upload-file="uploadFile" />
|
||
</div>
|
||
</template>
|
||
</CustomDialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|