no message
Showing
2 changed files
with
85 additions
and
60 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div class="upload-file" style="width: 100%"> | 2 | <div class="upload-file" style="width: 100%"> |
| 3 | <el-upload | 3 | <el-upload |
| 4 | v-if="!disabled" | 4 | v-if="!disabled" |
| 5 | ref="fileUpload" | 5 | ref="fileUpload" |
| 6 | :disabled="props.disabled" | 6 | :disabled="props.disabled" |
| 7 | multiple | 7 | multiple |
| 8 | :action="uploadFileUrl" | 8 | :action="uploadFileUrl" |
| 9 | :before-upload="handleBeforeUpload" | 9 | :before-upload="handleBeforeUpload" |
| 10 | :file-list="fileList" | 10 | :file-list="fileList" |
| 11 | :limit="limit" | 11 | :limit="limit" |
| 12 | :on-error="handleUploadError" | 12 | :on-error="handleUploadError" |
| 13 | :on-exceed="handleExceed" | 13 | :on-exceed="handleExceed" |
| 14 | :on-success="handleUploadSuccess" | 14 | :on-success="handleUploadSuccess" |
| 15 | :show-file-list="false" | 15 | :show-file-list="false" |
| 16 | :headers="headers" | 16 | :headers="headers" |
| 17 | class="upload-file-uploader" | 17 | class="upload-file-uploader" |
| 18 | :accept="accept" | 18 | :accept="accept" |
| 19 | > | 19 | > |
| 20 | <!-- 上传按钮 --> | 20 | <!-- 上传按钮 --> |
| 21 | <el-button type="primary" v-if="buttonType=0" :disabled="props.disabled">{{ buttonText }}</el-button> | 21 | <el-button type="primary" v-if="buttonType=0" :disabled="props.disabled">{{ buttonText }}</el-button> |
| ... | @@ -45,16 +45,17 @@ | ... | @@ -45,16 +45,17 @@ |
| 45 | <!-- >--> | 45 | <!-- >--> |
| 46 | <ul class="upload-file-list el-upload-list el-upload-list--text"> | 46 | <ul class="upload-file-list el-upload-list el-upload-list--text"> |
| 47 | <li | 47 | <li |
| 48 | v-for="(file, index) in fileList" | 48 | v-for="(file, index) in fileList" |
| 49 | :key="file.uid" | 49 | :key="file.uid" |
| 50 | class="el-upload-list__item ele-upload-list__item-content" | 50 | class="el-upload-list__item ele-upload-list__item-content" |
| 51 | > | 51 | > |
| 52 | <el-link :href="`${ download + encodeURIComponent(file.url)}`" :underline="false" target="_blank"> | 52 | <el-link :href="`${ download + encodeURIComponent(file.url)}`" :underline="false" target="_blank"> |
| 53 | <span class="el-icon-document"> {{ getFileName(file.name) }} </span> | 53 | <span class="el-icon-document"> {{ getFileName(file.name) }} </span> |
| 54 | </el-link> | 54 | </el-link> |
| 55 | <div v-if="!disabled" class="ele-upload-list__item-content-action"> | 55 | <div v-if="!disabled" class="ele-upload-list__item-content-action"> |
| 56 | <el-link :disabled="props.disabled" :underline="false" type="danger" @click="handleDelete(index)"> | 56 | <el-link :disabled="props.disabled" :underline="false" type="danger" @click="handleDelete(index)"> |
| 57 | {{ language==0?'删除':'Delete' }}</el-link> | 57 | {{ language == 0 ? '删除' : 'Delete' }} |
| 58 | </el-link> | ||
| 58 | </div> | 59 | </div> |
| 59 | </li> | 60 | </li> |
| 60 | </ul> | 61 | </ul> |
| ... | @@ -63,11 +64,12 @@ | ... | @@ -63,11 +64,12 @@ |
| 63 | </template> | 64 | </template> |
| 64 | 65 | ||
| 65 | <script setup> | 66 | <script setup> |
| 66 | import { getToken } from '@/utils/auth' | 67 | import {getToken} from '@/utils/auth' |
| 67 | import { computed } from 'vue' | 68 | import {computed, watch} from 'vue' |
| 68 | import _ from 'lodash' | 69 | import _ from 'lodash' |
| 69 | import cache from "@/plugins/cache"; | ||
| 70 | import {useStorage} from "@vueuse/core/index"; | 70 | import {useStorage} from "@vueuse/core/index"; |
| 71 | // import cache from "@/plugins/cache"; | ||
| 72 | |||
| 71 | const language = useStorage('language', 0) | 73 | const language = useStorage('language', 0) |
| 72 | 74 | ||
| 73 | const props = defineProps({ | 75 | const props = defineProps({ |
| ... | @@ -85,7 +87,7 @@ const props = defineProps({ | ... | @@ -85,7 +87,7 @@ const props = defineProps({ |
| 85 | // 文件类型, 例如['png', 'jpg', 'jpeg'] | 87 | // 文件类型, 例如['png', 'jpg', 'jpeg'] |
| 86 | fileType: { | 88 | fileType: { |
| 87 | type: Array, | 89 | type: Array, |
| 88 | default: () => ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'zip', 'rar','png', 'jpg', 'jpeg'] | 90 | default: () => ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'zip', 'rar', 'png', 'jpg', 'jpeg'] |
| 89 | }, | 91 | }, |
| 90 | // 是否显示提示 | 92 | // 是否显示提示 |
| 91 | isShowTip: { | 93 | isShowTip: { |
| ... | @@ -100,11 +102,11 @@ const props = defineProps({ | ... | @@ -100,11 +102,11 @@ const props = defineProps({ |
| 100 | type: Boolean, | 102 | type: Boolean, |
| 101 | default: false | 103 | default: false |
| 102 | }, | 104 | }, |
| 103 | buttonText:{ | 105 | buttonText: { |
| 104 | type: String, | 106 | type: String, |
| 105 | default: '上传文件' | 107 | default: '上传文件' |
| 106 | }, | 108 | }, |
| 107 | buttonType:{ | 109 | buttonType: { |
| 108 | type: Number, | 110 | type: Number, |
| 109 | default: 0 | 111 | default: 0 |
| 110 | } | 112 | } |
| ... | @@ -120,7 +122,7 @@ const accept = computed(() => { | ... | @@ -120,7 +122,7 @@ const accept = computed(() => { |
| 120 | }) | 122 | }) |
| 121 | 123 | ||
| 122 | 124 | ||
| 123 | const { proxy } = getCurrentInstance() | 125 | const {proxy} = getCurrentInstance() |
| 124 | const emit = defineEmits() | 126 | const emit = defineEmits() |
| 125 | const number = ref(0) | 127 | const number = ref(0) |
| 126 | const uploadList = ref([]) | 128 | const uploadList = ref([]) |
| ... | @@ -128,33 +130,33 @@ const baseUrl = import.meta.env.VITE_APP_BASE_API | ... | @@ -128,33 +130,33 @@ const baseUrl = import.meta.env.VITE_APP_BASE_API |
| 128 | const uploadFileUrl = ref(baseUrl + '/upload/uploadFileToLocalServer') // 上传文件服务器地址 | 130 | const uploadFileUrl = ref(baseUrl + '/upload/uploadFileToLocalServer') // 上传文件服务器地址 |
| 129 | const download = ref(baseUrl + '/upload/getFile?fileUrl=') // 下载地址 | 131 | const download = ref(baseUrl + '/upload/getFile?fileUrl=') // 下载地址 |
| 130 | 132 | ||
| 131 | const headers = ref({ Authorization: 'Bearer ' + getToken() }) | 133 | const headers = ref({Authorization: 'Bearer ' + getToken()}) |
| 132 | const fileList = ref([]) | 134 | const fileList = ref([]) |
| 133 | const showTip = computed( | 135 | const showTip = computed( |
| 134 | () => props.isShowTip && (props.fileType || props.fileSize) | 136 | () => props.isShowTip && (props.fileType || props.fileSize) |
| 135 | ) | 137 | ) |
| 136 | 138 | ||
| 137 | watch( | 139 | watch( |
| 138 | () => props.modelValue, | 140 | () => props.modelValue, |
| 139 | async(val) => { | 141 | async (val) => { |
| 140 | if (val) { | 142 | if (val) { |
| 141 | let temp = 1 | 143 | let temp = 1 |
| 142 | // 首先将值转为数组 | 144 | // 首先将值转为数组 |
| 143 | const list = Array.isArray(val) ? val : props.modelValue.split(',') | 145 | const list = Array.isArray(val) ? val : props.modelValue.split(',') |
| 144 | // 然后将数组转为对象数组 | 146 | // 然后将数组转为对象数组 |
| 145 | fileList.value = list.map((item) => { | 147 | fileList.value = list.map((item) => { |
| 146 | if (typeof item === 'string') { | 148 | if (typeof item === 'string') { |
| 147 | item = { name: item, url: item } | 149 | item = {name: item, url: item} |
| 148 | } | 150 | } |
| 149 | item.uid = item.uid || new Date().getTime() + temp++ | 151 | item.uid = item.uid || new Date().getTime() + temp++ |
| 150 | return item | 152 | return item |
| 151 | }) | 153 | }) |
| 152 | } else { | 154 | } else { |
| 153 | fileList.value = [] | 155 | fileList.value = [] |
| 154 | return [] | 156 | return [] |
| 155 | } | 157 | } |
| 156 | }, | 158 | }, |
| 157 | { deep: true, immediate: true } | 159 | {deep: true, immediate: true} |
| 158 | ) | 160 | ) |
| 159 | 161 | ||
| 160 | // 上传前校检格式和大小 | 162 | // 上传前校检格式和大小 |
| ... | @@ -166,7 +168,9 @@ function handleBeforeUpload(file) { | ... | @@ -166,7 +168,9 @@ function handleBeforeUpload(file) { |
| 166 | const isTypeOk = props.fileType.indexOf(fileExt) >= 0 | 168 | const isTypeOk = props.fileType.indexOf(fileExt) >= 0 |
| 167 | if (!isTypeOk) { | 169 | if (!isTypeOk) { |
| 168 | proxy.$modal.msgError( | 170 | proxy.$modal.msgError( |
| 169 | `文件格式不正确, 请上传${props.fileType.join('/')}格式文件!` | 171 | language.value == '0' |
| 172 | ? `文件格式不正确, 请上传${props.fileType.join('/')}格式文件!` | ||
| 173 | : `File format error, please upload ${props.fileType.join('/')} format file!` | ||
| 170 | ) | 174 | ) |
| 171 | return false | 175 | return false |
| 172 | } | 176 | } |
| ... | @@ -175,29 +179,40 @@ function handleBeforeUpload(file) { | ... | @@ -175,29 +179,40 @@ function handleBeforeUpload(file) { |
| 175 | if (props.fileSize) { | 179 | if (props.fileSize) { |
| 176 | const isLt = file.size / 1024 / 1024 < props.fileSize | 180 | const isLt = file.size / 1024 / 1024 < props.fileSize |
| 177 | if (!isLt) { | 181 | if (!isLt) { |
| 178 | proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`) | 182 | proxy.$modal.msgError(language.value == 0 |
| 183 | ? `上传文件大小不能超过 ${props.fileSize} MB!` | ||
| 184 | : `The file size cannot exceed ${props.fileSize} MB!`) | ||
| 179 | return false | 185 | return false |
| 180 | } | 186 | } |
| 181 | } | 187 | } |
| 182 | proxy.$modal.loading('正在上传文件,请稍候...') | 188 | proxy.$modal.loading(language.value == 0 |
| 189 | ? '正在上传文件,请稍候...' | ||
| 190 | : 'Uploading file, please wait...' | ||
| 191 | ) | ||
| 183 | number.value++ | 192 | number.value++ |
| 184 | return true | 193 | return true |
| 185 | } | 194 | } |
| 195 | |||
| 186 | // 文件个数超出 | 196 | // 文件个数超出 |
| 187 | function handleExceed() { | 197 | function handleExceed() { |
| 188 | proxy.$modal.msgError(language=='0'?`上传文件数量不能超过 ${props.limit} 个!`:`Maximum file count: ${props.limit}`) | 198 | proxy.$modal.msgError(language == '0' |
| 199 | ? `上传文件数量不能超过 ${props.limit} 个!` | ||
| 200 | : `Maximum file count: ${props.limit}`) | ||
| 189 | } | 201 | } |
| 190 | 202 | ||
| 191 | // 上传失败 | 203 | // 上传失败 |
| 192 | function handleUploadError(err) { | 204 | function handleUploadError(err) { |
| 193 | proxy.$modal.msgError('上传文件失败') | 205 | proxy.$modal.msgError(language.value == 0 |
| 206 | ? '上传文件失败' | ||
| 207 | : 'Upload failed' | ||
| 208 | ) | ||
| 194 | proxy.$modal.closeLoading() | 209 | proxy.$modal.closeLoading() |
| 195 | } | 210 | } |
| 196 | 211 | ||
| 197 | // 上传成功回调 | 212 | // 上传成功回调 |
| 198 | function handleUploadSuccess(res, file) { | 213 | function handleUploadSuccess(res, file) { |
| 199 | if (res.code === 200) { | 214 | if (res.code === 200) { |
| 200 | uploadList.value.push({ name: file.name, url: res.msg }) | 215 | uploadList.value.push({name: file.name, url: res.msg}) |
| 201 | uploadedSuccessfully() | 216 | uploadedSuccessfully() |
| 202 | } else { | 217 | } else { |
| 203 | number.value-- | 218 | number.value-- |
| ... | @@ -218,8 +233,8 @@ function handleDelete(index) { | ... | @@ -218,8 +233,8 @@ function handleDelete(index) { |
| 218 | function uploadedSuccessfully() { | 233 | function uploadedSuccessfully() { |
| 219 | if (number.value > 0 && uploadList.value.length === number.value) { | 234 | if (number.value > 0 && uploadList.value.length === number.value) { |
| 220 | fileList.value = fileList.value | 235 | fileList.value = fileList.value |
| 221 | .filter((f) => f.url !== undefined) | 236 | .filter((f) => f.url !== undefined) |
| 222 | .concat(uploadList.value) | 237 | .concat(uploadList.value) |
| 223 | uploadList.value = [] | 238 | uploadList.value = [] |
| 224 | number.value = 0 | 239 | number.value = 0 |
| 225 | emit('update:modelValue', listToString(fileList.value)) | 240 | emit('update:modelValue', listToString(fileList.value)) |
| ... | @@ -247,18 +262,22 @@ function listToString(list, separator) { | ... | @@ -247,18 +262,22 @@ function listToString(list, separator) { |
| 247 | .upload-file-uploader { | 262 | .upload-file-uploader { |
| 248 | margin-bottom: 5px; | 263 | margin-bottom: 5px; |
| 249 | } | 264 | } |
| 265 | |||
| 250 | .upload-file-list .el-upload-list__item { | 266 | .upload-file-list .el-upload-list__item { |
| 251 | border: 1px solid #e4e7ed; | 267 | border: 1px solid #e4e7ed; |
| 252 | line-height: 2;padding: 0 10px; | 268 | line-height: 2; |
| 269 | padding: 0 10px; | ||
| 253 | margin-bottom: 10px; | 270 | margin-bottom: 10px; |
| 254 | position: relative; | 271 | position: relative; |
| 255 | } | 272 | } |
| 273 | |||
| 256 | .upload-file-list .ele-upload-list__item-content { | 274 | .upload-file-list .ele-upload-list__item-content { |
| 257 | display: flex; | 275 | display: flex; |
| 258 | justify-content: space-between; | 276 | justify-content: space-between; |
| 259 | align-items: center; | 277 | align-items: center; |
| 260 | color: inherit; | 278 | color: inherit; |
| 261 | } | 279 | } |
| 280 | |||
| 262 | .ele-upload-list__item-content-action .el-link { | 281 | .ele-upload-list__item-content-action .el-link { |
| 263 | margin-right: 10px; | 282 | margin-right: 10px; |
| 264 | } | 283 | } | ... | ... |
| ... | @@ -334,6 +334,7 @@ const {proxy} = getCurrentInstance() | ... | @@ -334,6 +334,7 @@ const {proxy} = getCurrentInstance() |
| 334 | const language = useStorage('language', 0) | 334 | const language = useStorage('language', 0) |
| 335 | const form = ref({ | 335 | const form = ref({ |
| 336 | gender: '0', | 336 | gender: '0', |
| 337 | chinese:'0', | ||
| 337 | cptVisaInfoBos: [], | 338 | cptVisaInfoBos: [], |
| 338 | email: user?.email, | 339 | email: user?.email, |
| 339 | }) | 340 | }) |
| ... | @@ -362,9 +363,14 @@ const open = (params) => { | ... | @@ -362,9 +363,14 @@ const open = (params) => { |
| 362 | if (!cptId.value) { | 363 | if (!cptId.value) { |
| 363 | proxy.$modal.msgError('参数有误'); | 364 | proxy.$modal.msgError('参数有误'); |
| 364 | } | 365 | } |
| 365 | 366 | form.value = { | |
| 366 | form.value.userId = user.userId | 367 | gender: '0', |
| 367 | form.value.cptId = params.cptId | 368 | chinese:'0', |
| 369 | cptVisaInfoBos: [], | ||
| 370 | email: user?.email, | ||
| 371 | userId: user?.userId, | ||
| 372 | cptId: params.cptId | ||
| 373 | } | ||
| 368 | getCountryList() | 374 | getCountryList() |
| 369 | getMNAList() | 375 | getMNAList() |
| 370 | // getVisa() | 376 | // getVisa() | ... | ... |
-
Please register or sign in to post a comment