5b0da338 by 华明祺

no message

1 parent a76d2796
<template>
<div class="upload-file" style="width: 100%">
<el-upload
v-if="!disabled"
ref="fileUpload"
:disabled="props.disabled"
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
:accept="accept"
v-if="!disabled"
ref="fileUpload"
:disabled="props.disabled"
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
:accept="accept"
>
<!-- 上传按钮 -->
<el-button type="primary" v-if="buttonType=0" :disabled="props.disabled">{{ buttonText }}</el-button>
......@@ -45,16 +45,17 @@
<!-- >-->
<ul class="upload-file-list el-upload-list el-upload-list&#45;&#45;text">
<li
v-for="(file, index) in fileList"
:key="file.uid"
class="el-upload-list__item ele-upload-list__item-content"
v-for="(file, index) in fileList"
:key="file.uid"
class="el-upload-list__item ele-upload-list__item-content"
>
<el-link :href="`${ download + encodeURIComponent(file.url)}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div v-if="!disabled" class="ele-upload-list__item-content-action">
<el-link :disabled="props.disabled" :underline="false" type="danger" @click="handleDelete(index)">
{{ language==0?'删除':'Delete' }}</el-link>
{{ language == 0 ? '删除' : 'Delete' }}
</el-link>
</div>
</li>
</ul>
......@@ -63,11 +64,12 @@
</template>
<script setup>
import { getToken } from '@/utils/auth'
import { computed } from 'vue'
import {getToken} from '@/utils/auth'
import {computed, watch} from 'vue'
import _ from 'lodash'
import cache from "@/plugins/cache";
import {useStorage} from "@vueuse/core/index";
// import cache from "@/plugins/cache";
const language = useStorage('language', 0)
const props = defineProps({
......@@ -85,7 +87,7 @@ const props = defineProps({
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'zip', 'rar','png', 'jpg', 'jpeg']
default: () => ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'zip', 'rar', 'png', 'jpg', 'jpeg']
},
// 是否显示提示
isShowTip: {
......@@ -100,11 +102,11 @@ const props = defineProps({
type: Boolean,
default: false
},
buttonText:{
buttonText: {
type: String,
default: '上传文件'
},
buttonType:{
buttonType: {
type: Number,
default: 0
}
......@@ -120,7 +122,7 @@ const accept = computed(() => {
})
const { proxy } = getCurrentInstance()
const {proxy} = getCurrentInstance()
const emit = defineEmits()
const number = ref(0)
const uploadList = ref([])
......@@ -128,33 +130,33 @@ const baseUrl = import.meta.env.VITE_APP_BASE_API
const uploadFileUrl = ref(baseUrl + '/upload/uploadFileToLocalServer') // 上传文件服务器地址
const download = ref(baseUrl + '/upload/getFile?fileUrl=') // 下载地址
const headers = ref({ Authorization: 'Bearer ' + getToken() })
const headers = ref({Authorization: 'Bearer ' + getToken()})
const fileList = ref([])
const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize)
() => props.isShowTip && (props.fileType || props.fileSize)
)
watch(
() => props.modelValue,
async(val) => {
if (val) {
let temp = 1
// 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(',')
// 然后将数组转为对象数组
fileList.value = list.map((item) => {
if (typeof item === 'string') {
item = { name: item, url: item }
}
item.uid = item.uid || new Date().getTime() + temp++
return item
})
} else {
fileList.value = []
return []
}
},
{ deep: true, immediate: true }
() => props.modelValue,
async (val) => {
if (val) {
let temp = 1
// 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(',')
// 然后将数组转为对象数组
fileList.value = list.map((item) => {
if (typeof item === 'string') {
item = {name: item, url: item}
}
item.uid = item.uid || new Date().getTime() + temp++
return item
})
} else {
fileList.value = []
return []
}
},
{deep: true, immediate: true}
)
// 上传前校检格式和大小
......@@ -166,7 +168,9 @@ function handleBeforeUpload(file) {
const isTypeOk = props.fileType.indexOf(fileExt) >= 0
if (!isTypeOk) {
proxy.$modal.msgError(
`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`
language.value == '0'
? `文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`
: `File format error, please upload ${props.fileType.join('/')} format file!`
)
return false
}
......@@ -175,29 +179,40 @@ function handleBeforeUpload(file) {
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize
if (!isLt) {
proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
proxy.$modal.msgError(language.value == 0
? `上传文件大小不能超过 ${props.fileSize} MB!`
: `The file size cannot exceed ${props.fileSize} MB!`)
return false
}
}
proxy.$modal.loading('正在上传文件,请稍候...')
proxy.$modal.loading(language.value == 0
? '正在上传文件,请稍候...'
: 'Uploading file, please wait...'
)
number.value++
return true
}
// 文件个数超出
function handleExceed() {
proxy.$modal.msgError(language=='0'?`上传文件数量不能超过 ${props.limit} 个!`:`Maximum file count: ${props.limit}`)
proxy.$modal.msgError(language == '0'
? `上传文件数量不能超过 ${props.limit} 个!`
: `Maximum file count: ${props.limit}`)
}
// 上传失败
function handleUploadError(err) {
proxy.$modal.msgError('上传文件失败')
proxy.$modal.msgError(language.value == 0
? '上传文件失败'
: 'Upload failed'
)
proxy.$modal.closeLoading()
}
// 上传成功回调
function handleUploadSuccess(res, file) {
if (res.code === 200) {
uploadList.value.push({ name: file.name, url: res.msg })
uploadList.value.push({name: file.name, url: res.msg})
uploadedSuccessfully()
} else {
number.value--
......@@ -218,8 +233,8 @@ function handleDelete(index) {
function uploadedSuccessfully() {
if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value
.filter((f) => f.url !== undefined)
.concat(uploadList.value)
.filter((f) => f.url !== undefined)
.concat(uploadList.value)
uploadList.value = []
number.value = 0
emit('update:modelValue', listToString(fileList.value))
......@@ -247,18 +262,22 @@ function listToString(list, separator) {
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;padding: 0 10px;
line-height: 2;
padding: 0 10px;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}
......
......@@ -334,6 +334,7 @@ const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
gender: '0',
chinese:'0',
cptVisaInfoBos: [],
email: user?.email,
})
......@@ -362,9 +363,14 @@ const open = (params) => {
if (!cptId.value) {
proxy.$modal.msgError('参数有误');
}
form.value.userId = user.userId
form.value.cptId = params.cptId
form.value = {
gender: '0',
chinese:'0',
cptVisaInfoBos: [],
email: user?.email,
userId: user?.userId,
cptId: params.cptId
}
getCountryList()
getMNAList()
// getVisa()
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!