|
@@ -1,20 +1,13 @@
|
|
|
<template>
|
|
|
- <el-upload ref="uploadRef" class="hc-upload-border approach" drag :action="action" :headers="getTokenHeader()" :data="uploadData" :accept="accept" :disabled="uploadDisabled" :limit="1" :show-file-list="false"
|
|
|
- :before-upload="beforeUpload" :on-exceed="uploadExceed" :on-progress="uploadprogress" :on-success="uploadSuccess" :on-error="uploadError" :on-change="uploadChange" :auto-upload="false">
|
|
|
-
|
|
|
- <div class="hc-upload-loading upload-file-info" v-loading="uploadDisabled" element-loading-text="上传中...">
|
|
|
- <template v-if="uploadFileInfo?.name">
|
|
|
- <HcIcon name="file-text" class="upload-file-icon"/>
|
|
|
- <div class="upload-file-name">{{uploadFileInfo?.name}}</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <HcIcon name="upload-cloud" class="upload-icon"/>
|
|
|
- <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
|
|
|
- </template>
|
|
|
+ <el-upload class="hc-upload-border" drag :action="action" :headers="getTokenHeader()" :data="uploadData" :accept="accept" :file-list="fileListData" :disabled="uploadDisabled"
|
|
|
+ :on-preview="uploadPreview" :on-success="uploadSuccess" :on-exceed="uploadExceed" :on-error="uploadError" :before-upload="beforeUpload"
|
|
|
+ :on-progress="uploadprogress" :limit="1" ref="upload">
|
|
|
+ <div class="hc-upload-loading" v-loading="uploadDisabled" :element-loading-text="loadingText">
|
|
|
+ <HcIcon name="backup" ui="text-5xl mt-4"/>
|
|
|
+ <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
|
|
|
</div>
|
|
|
-
|
|
|
<template #tip>
|
|
|
- <div class="el-upload__tip">允许格式:excel, 文件大小 小于 60MB</div>
|
|
|
+ <div class="el-upload__tip" style="font-size: 14px;">允许格式:jpg/png/pdf/excel/word, 文件大小 小于 60MB</div>
|
|
|
</template>
|
|
|
</el-upload>
|
|
|
</template>
|
|
@@ -22,131 +15,139 @@
|
|
|
<script setup>
|
|
|
import {ref,watch,onMounted} from "vue";
|
|
|
import {getTokenHeader} from '~src/api/request/header';
|
|
|
-import {getObjValue, isSize} from "vue-utils-plus"
|
|
|
-import {genFileId} from "element-plus";
|
|
|
+import wbsApi from "~api/data-fill/wbs"
|
|
|
+import {isSize} from "vue-utils-plus"
|
|
|
+import { genFileId } from 'element-plus'
|
|
|
const props = defineProps({
|
|
|
+ fileList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ([])
|
|
|
+ },
|
|
|
datas: {
|
|
|
type: Object,
|
|
|
default: () => ({})
|
|
|
},
|
|
|
+
|
|
|
})
|
|
|
|
|
|
//变量
|
|
|
-const uploadRef = ref(null)
|
|
|
const uploadData = ref(props.datas)
|
|
|
-const uploadFileInfo = ref({})
|
|
|
-const uploadDisabled = ref(false)
|
|
|
+const fileListData = ref(props.fileList);
|
|
|
|
|
|
-const action = '/api/blade-manager/exceltab/add-buss-file';
|
|
|
-const accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel';
|
|
|
+const action = '/api/blade-resource/oss/endpoint/put-file-attach';
|
|
|
+const accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
|
|
+const uploadDisabled = ref(false)
|
|
|
|
|
|
//监听
|
|
|
watch(() => [
|
|
|
+ props.fileList,
|
|
|
props.datas,
|
|
|
-], ([datas]) => {
|
|
|
+
|
|
|
+], ([fileList, datas]) => {
|
|
|
uploadData.value = datas
|
|
|
+ fileListData.value = fileList
|
|
|
+
|
|
|
})
|
|
|
|
|
|
+//渲染完成
|
|
|
+onMounted(()=> {
|
|
|
+ beforeFileNum.value = 0
|
|
|
+ finishFileNum.value = 0
|
|
|
+ errorFileNum.value = 0
|
|
|
+})
|
|
|
|
|
|
//事件
|
|
|
-const emit = defineEmits(['progress', 'finished', 'change'])
|
|
|
+const emit = defineEmits(['change'])
|
|
|
|
|
|
//上传前
|
|
|
+const beforeFileNum = ref(0)
|
|
|
const beforeUpload = async (file) => {
|
|
|
if (isSize(file?.size,60)) {
|
|
|
+ beforeFileNum.value ++;
|
|
|
return true;
|
|
|
} else {
|
|
|
window?.$message?.warning('文件大小, 不能过60M!');
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+const upload=ref('')
|
|
|
//超出限制时
|
|
|
const uploadExceed = (files) => {
|
|
|
- uploadRef.value?.clearFiles()
|
|
|
- const file = files[0]
|
|
|
- file.uid = genFileId()
|
|
|
- uploadRef.value?.handleStart(file)
|
|
|
+
|
|
|
+ window?.$message?.warning('只能上传一个文件,请删除原文件再上传');
|
|
|
+
|
|
|
+// const file = files[0]
|
|
|
+// file.uid = genFileId()
|
|
|
+// upload.value.handleStart(file)
|
|
|
}
|
|
|
|
|
|
//上传中
|
|
|
+const loadingText = ref('上传中...')
|
|
|
const uploadprogress = () => {
|
|
|
+ loadingText.value = '上传中...'
|
|
|
uploadDisabled.value = true
|
|
|
- emit('progress', true)
|
|
|
}
|
|
|
|
|
|
//上传完成
|
|
|
-const uploadSuccess = (res) => {
|
|
|
+const finishFileNum = ref(0)
|
|
|
+// const uploadSuccess = () => {
|
|
|
+// finishFileNum.value ++;
|
|
|
+// if (beforeFileNum.value === finishFileNum.value) {
|
|
|
+// uploadDisabled.value = false
|
|
|
+// emit('change', {type: 'success'})
|
|
|
+// }
|
|
|
+// }
|
|
|
+//上传完成
|
|
|
+const uploadSuccess = ({code, data}) => {
|
|
|
uploadDisabled.value = false
|
|
|
emit('progress', false)
|
|
|
- emit('finished', {
|
|
|
- type: 'success',
|
|
|
- data: getObjValue(res?.data)
|
|
|
- })
|
|
|
+ if (code === 200) {
|
|
|
+ window?.$message?.success('上传成功');
|
|
|
+ emit('finished', data)
|
|
|
+ } else {
|
|
|
+ window?.$message?.error('上传失败');
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-//上传失败
|
|
|
-const uploadError = (res) => {
|
|
|
- uploadDisabled.value = false
|
|
|
- emit('progress', false)
|
|
|
- emit('finished', {
|
|
|
- type: 'error',
|
|
|
- data: getObjValue(res?.data)
|
|
|
- })
|
|
|
- window?.$message?.error('导入失败');
|
|
|
-}
|
|
|
|
|
|
-//文件改变时
|
|
|
-const uploadChange = (file) => {
|
|
|
- console.log(file)
|
|
|
- uploadFileInfo.value = file
|
|
|
- emit('change', file)
|
|
|
+//上传失败
|
|
|
+const errorFileNum = ref(0)
|
|
|
+const uploadError = () => {
|
|
|
+ errorFileNum.value ++;
|
|
|
+ window?.$message?.error('上传失败');
|
|
|
+ const num = finishFileNum.value + errorFileNum.value;
|
|
|
+ if (beforeFileNum.value === num) {
|
|
|
+ uploadDisabled.value = false
|
|
|
+ emit('change', {type: 'success'})
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-const submit = () => {
|
|
|
- uploadRef.value?.submit()
|
|
|
+//预览
|
|
|
+const uploadPreview = ({url}) => {
|
|
|
+ if (url) {
|
|
|
+ window.open(url, '_blank')
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-const clearFiles = () => {
|
|
|
- uploadRef.value?.clearFiles()
|
|
|
+//删除文件
|
|
|
+const delUploadData = async ({id}) => {
|
|
|
+ loadingText.value = '删除中...'
|
|
|
+ uploadDisabled.value = true
|
|
|
+ const {error, code} = await wbsApi.removeBussFile({
|
|
|
+ ids: id
|
|
|
+ })
|
|
|
+ uploadDisabled.value = false
|
|
|
+ if (!error && code === 200) {
|
|
|
+ window?.$message?.success('删除成功')
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-// 暴露出去
|
|
|
-defineExpose({
|
|
|
- submit,
|
|
|
- clearFiles
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-.hc-upload-border.approach {
|
|
|
- .el-upload-dragger {
|
|
|
- padding: 24px;
|
|
|
- }
|
|
|
- .hc-upload-loading.upload-file-info {
|
|
|
- .hc-icon-i {
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
- .upload-icon {
|
|
|
- color: var(--el-text-color-placeholder);
|
|
|
- }
|
|
|
- .upload-file-icon {
|
|
|
- color: var(--el-color-primary-light-5);
|
|
|
- }
|
|
|
- .el-upload__text {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .upload-file-name {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- color: var(--el-color-primary);
|
|
|
- }
|
|
|
- }
|
|
|
- .el-upload__tip {
|
|
|
- font-size: 14px;
|
|
|
- margin-top: 16px;
|
|
|
- color: var(--el-text-color-placeholder);
|
|
|
+const uploadRemove = () => {
|
|
|
+ if(fileListData.value.length <= 0) {
|
|
|
+ emit('change', {type: 'del'})
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</script>
|