<script lang="ts" setup>
|
import icon_upload_outlined from '@/assets/svg/icon_upload_outlined.svg'
|
import { ref, reactive } from 'vue'
|
import { uploadFontFile } from '@/api/font'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import FontInfo from './FontInfo.vue'
|
import { ElMessage } from 'element-plus-secondary'
|
import { edit } from '@/api/font'
|
import { cloneDeep } from 'lodash-es'
|
|
const state = reactive({
|
fileList: null
|
})
|
const loading = ref(false)
|
const upload = ref()
|
const { t } = useI18n()
|
const uploadExcel = () => {
|
const formData = new FormData()
|
formData.append('file', state.fileList.raw)
|
loading.value = true
|
return uploadFontFile(formData)
|
.then(res => {
|
ruleForm.name = res.data.name
|
ruleForm.size = res.data.size
|
ruleForm.sizeType = res.data.sizeType
|
ruleForm.fileTransName = res.data.fileTransName
|
ruleForm.fileName = state.fileList.raw.name
|
upload.value?.clearFiles()
|
})
|
.catch(error => {
|
if (error.code === 'ECONNABORTED') {
|
ElMessage({
|
type: 'error',
|
message: error.message,
|
showClose: true
|
})
|
}
|
})
|
.finally(() => {
|
loading.value = false
|
})
|
}
|
const dialogTitle = ref('')
|
const dialogVisible = ref(false)
|
const action = ref('')
|
const defaultForm = {
|
id: null,
|
name: '',
|
fileName: '',
|
fileTransName: '',
|
size: 0,
|
sizeType: '',
|
isDefault: 0,
|
isBuiltin: 0,
|
updateTime: 0
|
}
|
const ruleForm = reactive(cloneDeep(defaultForm))
|
|
const init = (val, type, item) => {
|
dialogTitle.value = val || t('system.add_font')
|
action.value = type
|
dialogVisible.value = true
|
Object.assign(ruleForm, cloneDeep(defaultForm))
|
Object.assign(ruleForm, JSON.parse(JSON.stringify(item)))
|
}
|
|
const fontDel = () => {
|
state.fileList = null
|
}
|
|
const ruleFormRef = ref()
|
const rules = {
|
name: [
|
{ required: true, message: t('system.the_font_name'), trigger: 'blur' },
|
{ min: 1, max: 50, message: t('system.character_length_1_50'), trigger: 'blur' }
|
]
|
}
|
defineExpose({
|
init
|
})
|
|
const beforeAvatarUpload = rawFile => {
|
if (!rawFile.name.toLocaleLowerCase().endsWith('.ttf')) {
|
ElMessage.error(t('system.in_ttf_format'))
|
return false
|
}
|
return true
|
}
|
const onChange = file => {
|
if (file.raw?.name?.toLocaleLowerCase().endsWith('.ttf')) {
|
state.fileList = file
|
}
|
}
|
|
const uploadFail = response => {
|
let myError = response.toString()
|
myError.replace('Error: ', '')
|
}
|
|
const emits = defineEmits(['finish'])
|
const cancel = () => {
|
Object.assign(ruleForm, cloneDeep(defaultForm))
|
ruleFormRef.value.clearValidate()
|
state.fileList = null
|
dialogVisible.value = false
|
}
|
const confirm = () => {
|
ruleFormRef.value.validate(val => {
|
if (val) {
|
if (action.value === 'uploadFile') {
|
if (ruleForm.fileTransName === '') {
|
ElMessage.error(t('system.upload_font_file_de'))
|
return
|
}
|
}
|
edit(ruleForm).then(() => {
|
ElMessage.success(dialogTitle.value + t('data_set.success'))
|
cancel()
|
emits('finish')
|
})
|
}
|
})
|
}
|
</script>
|
|
<template>
|
<el-dialog
|
class="create-dialog add-form_font_dialog"
|
v-model="dialogVisible"
|
:before-close="cancel"
|
:title="dialogTitle"
|
width="420"
|
>
|
<el-form
|
@submit.prevent
|
ref="ruleFormRef"
|
:model="ruleForm"
|
label-position="top"
|
:rules="rules"
|
label-width="auto"
|
class="demo-ruleForm"
|
>
|
<el-form-item v-if="action !== 'uploadFile'" :label="t('system.font_name')" prop="name">
|
<el-input :placeholder="t('system.the_font_name')" v-model.trim="ruleForm.name" />
|
</el-form-item>
|
<el-form-item
|
v-loading="loading"
|
v-if="action !== 'rename'"
|
:label="t('system.font_file_de')"
|
>
|
<el-upload
|
action=""
|
:multiple="false"
|
ref="uploadAgain"
|
:show-file-list="false"
|
accept=".ttf"
|
:on-change="onChange"
|
:before-upload="beforeAvatarUpload"
|
:http-request="uploadExcel"
|
:on-error="uploadFail"
|
name="file"
|
v-show="!state.fileList"
|
>
|
<template #trigger>
|
<el-button secondary>
|
<template #icon>
|
<Icon name="icon_upload_outlined"><icon_upload_outlined class="svg-icon" /></Icon>
|
</template>
|
{{ t('system.upload_font_file') }}
|
</el-button>
|
</template>
|
</el-upload>
|
<FontInfo
|
@del="fontDel"
|
v-show="state.fileList"
|
:size="ruleForm.size + ' ' + ruleForm.sizeType"
|
:name="ruleForm.fileName"
|
></FontInfo>
|
<el-upload
|
action=""
|
:multiple="false"
|
ref="uploadAgain"
|
:before-upload="beforeAvatarUpload"
|
:show-file-list="false"
|
accept=".ttf"
|
:on-change="onChange"
|
:http-request="uploadExcel"
|
:on-error="uploadFail"
|
name="file"
|
v-show="state.fileList"
|
>
|
<template #trigger>
|
<el-button text> {{ t('data_source.reupload') }} </el-button>
|
</template>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="cancel">{{ t('userimport.cancel') }}</el-button>
|
<el-button v-loading="loading" type="primary" @click="confirm">
|
{{ t('userimport.sure') }}
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<style lang="less">
|
.add-form_font_dialog {
|
.ed-dialog__footer {
|
border: none;
|
padding-top: 0;
|
margin-top: -2px;
|
}
|
}
|
</style>
|
