|
@@ -5,22 +5,23 @@
|
|
<div v-if="uploadValue" class="text-hover" @click.stop="previewClick">预览文件</div>
|
|
<div v-if="uploadValue" class="text-hover" @click.stop="previewClick">预览文件</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <!--上传-->
|
|
|
|
- <HcDialog :loading="uploadDisabled" :show="importModal" saveText="确认上传" title="上传文件" widths="38rem"
|
|
|
|
- @close="importModalClose" @save="importModalYesClick">
|
|
|
|
- <el-upload ref="uploadRef" :accept="accept" :action="api + action" :auto-upload="false"
|
|
|
|
- :before-upload="beforeUpload" :data="uploadData" :disabled="uploadDisabled"
|
|
|
|
- :headers="getTokenHeader()" :limit="1"
|
|
|
|
- :on-change="uploadChange"
|
|
|
|
- :on-error="uploadError" :on-exceed="uploadExceed" :on-progress="uploadprogress"
|
|
|
|
- :on-success="uploadSuccess" :show-file-list="false" class="hc-upload-border approach" drag>
|
|
|
|
|
|
+ <!-- 上传 -->
|
|
|
|
+ <hc-new-dialog v-model="importModal" :loading="uploadDisabled" save-text="确认上传" title="上传文件" widths="38rem" @close="importModalClose" @save="importModalYesClick">
|
|
|
|
+ <el-upload
|
|
|
|
+ ref="uploadRef" :accept="accept" :action="api + action" :auto-upload="false"
|
|
|
|
+ :before-upload="beforeUpload" :data="uploadData" :disabled="uploadDisabled"
|
|
|
|
+ :headers="getTokenHeader()" :limit="1"
|
|
|
|
+ :on-change="uploadChange"
|
|
|
|
+ :on-error="uploadError" :on-exceed="uploadExceed" :on-progress="uploadprogress"
|
|
|
|
+ :on-success="uploadSuccess" :show-file-list="false" class="hc-upload-border approach" drag
|
|
|
|
+ >
|
|
<div v-loading="uploadDisabled" class="hc-upload-loading upload-file-info" element-loading-text="上传中...">
|
|
<div v-loading="uploadDisabled" class="hc-upload-loading upload-file-info" element-loading-text="上传中...">
|
|
<template v-if="uploadFileInfo?.name">
|
|
<template v-if="uploadFileInfo?.name">
|
|
- <HcIcon class="upload-file-icon" name="file-text"/>
|
|
|
|
|
|
+ <HcIcon class="upload-file-icon" name="file-text" />
|
|
<div class="upload-file-name">{{ uploadFileInfo?.name }}</div>
|
|
<div class="upload-file-name">{{ uploadFileInfo?.name }}</div>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-else>
|
|
- <HcIcon class="upload-icon" name="upload-cloud"/>
|
|
|
|
|
|
+ <HcIcon class="upload-icon" name="upload-cloud" />
|
|
<div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
|
|
<div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
@@ -28,63 +29,65 @@
|
|
<div class="el-upload__tip">允许格式:{{ formatTip }}, 文件大小 小于 {{ size }}MB</div>
|
|
<div class="el-upload__tip">允许格式:{{ formatTip }}, 文件大小 小于 {{ size }}MB</div>
|
|
</template>
|
|
</template>
|
|
</el-upload>
|
|
</el-upload>
|
|
- </HcDialog>
|
|
|
|
|
|
+ </hc-new-dialog>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import {ref, watch, onMounted} from "vue";
|
|
|
|
-import {getTokenHeader} from '~src/api/request/header';
|
|
|
|
-import {isFileSize} from "js-fast-way"
|
|
|
|
-import {genFileId} from "element-plus";
|
|
|
|
|
|
+import { onMounted, ref, watch } from 'vue'
|
|
|
|
+import { getTokenHeader } from '~src/api/request/header'
|
|
|
|
+import { isFileSize } from 'js-fast-way'
|
|
|
|
+import { genFileId } from 'element-plus'
|
|
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
modelValue: {
|
|
modelValue: {
|
|
type: String,
|
|
type: String,
|
|
- default: ''
|
|
|
|
|
|
+ default: '',
|
|
},
|
|
},
|
|
datas: {
|
|
datas: {
|
|
type: Object,
|
|
type: Object,
|
|
- default: () => ({})
|
|
|
|
|
|
+ default: () => ({}),
|
|
},
|
|
},
|
|
action: {
|
|
action: {
|
|
type: String,
|
|
type: String,
|
|
- default: "upload-file"
|
|
|
|
|
|
+ default: 'upload-file',
|
|
},
|
|
},
|
|
accept: {
|
|
accept: {
|
|
type: String,
|
|
type: String,
|
|
- default: "image/png,image/jpg,image/jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword"
|
|
|
|
|
|
+ default: 'image/png,image/jpg,image/jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword',
|
|
},
|
|
},
|
|
size: {
|
|
size: {
|
|
type: Number,
|
|
type: Number,
|
|
- default: 20
|
|
|
|
|
|
+ default: 20,
|
|
},
|
|
},
|
|
formatTip: {
|
|
formatTip: {
|
|
type: String,
|
|
type: String,
|
|
- default: "png/jpg/jpeg/excel/pdf/doc/docx"
|
|
|
|
|
|
+ default: 'png/jpg/jpeg/excel/pdf/doc/docx',
|
|
},
|
|
},
|
|
fileName:{
|
|
fileName:{
|
|
type: String,
|
|
type: String,
|
|
- default: ''
|
|
|
|
- }
|
|
|
|
|
|
+ default: '',
|
|
|
|
+ },
|
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
+//事件
|
|
|
|
+const emit = defineEmits(['progress', 'change', 'update:modelValue'])
|
|
//变量
|
|
//变量
|
|
const uploadRef = ref(null)
|
|
const uploadRef = ref(null)
|
|
const uploadData = ref(props.datas)
|
|
const uploadData = ref(props.datas)
|
|
const uploadFileInfo = ref({})
|
|
const uploadFileInfo = ref({})
|
|
const uploadDisabled = ref(false)
|
|
const uploadDisabled = ref(false)
|
|
const uploadValue = ref(props.modelValue)
|
|
const uploadValue = ref(props.modelValue)
|
|
-const fileNameVal=ref(props.fileName)
|
|
|
|
-const api = '/api/blade-resource/oss/endpoint/';
|
|
|
|
|
|
+const fileNameVal = ref(props.fileName)
|
|
|
|
+const api = '/api/blade-resource/oss/endpoint/'
|
|
|
|
|
|
//监听
|
|
//监听
|
|
watch(() => [
|
|
watch(() => [
|
|
props.datas,
|
|
props.datas,
|
|
props.modelValue,
|
|
props.modelValue,
|
|
- props.fileName
|
|
|
|
-
|
|
|
|
-], ([datas, val,name]) => {
|
|
|
|
|
|
+ props.fileName,
|
|
|
|
+
|
|
|
|
+], ([datas, val, name]) => {
|
|
uploadData.value = datas
|
|
uploadData.value = datas
|
|
uploadValue.value = val
|
|
uploadValue.value = val
|
|
// getFileName(val)
|
|
// getFileName(val)
|
|
@@ -93,12 +96,9 @@ watch(() => [
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
// getFileName(props.modelValue)
|
|
// getFileName(props.modelValue)
|
|
-
|
|
|
|
- fileNameValue.value=fileNameVal.value
|
|
|
|
-})
|
|
|
|
|
|
|
|
-//事件
|
|
|
|
-const emit = defineEmits(['progress', 'change', 'update:modelValue'])
|
|
|
|
|
|
+ fileNameValue.value = fileNameVal.value
|
|
|
|
+})
|
|
|
|
|
|
//上传弹窗
|
|
//上传弹窗
|
|
const importModal = ref(false)
|
|
const importModal = ref(false)
|
|
@@ -132,10 +132,10 @@ const getFileName = (url) => {
|
|
//上传前
|
|
//上传前
|
|
const beforeUpload = async (file) => {
|
|
const beforeUpload = async (file) => {
|
|
if (isFileSize(file?.size, props.size)) {
|
|
if (isFileSize(file?.size, props.size)) {
|
|
- return true;
|
|
|
|
|
|
+ return true
|
|
} else {
|
|
} else {
|
|
- window?.$message?.warning('文件大小, 不能过' + props.size + 'M!');
|
|
|
|
- return false;
|
|
|
|
|
|
+ window?.$message?.warning('文件大小, 不能过' + props.size + 'M!')
|
|
|
|
+ return false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -154,23 +154,23 @@ const uploadprogress = () => {
|
|
}
|
|
}
|
|
|
|
|
|
//上传完成
|
|
//上传完成
|
|
-const uploadSuccess = ({code, data}) => {
|
|
|
|
|
|
+const uploadSuccess = ({ code, data }) => {
|
|
uploadDisabled.value = false
|
|
uploadDisabled.value = false
|
|
emit('progress', false)
|
|
emit('progress', false)
|
|
// const pdfUrl = data?.pdfUrl ?? ''
|
|
// const pdfUrl = data?.pdfUrl ?? ''
|
|
const pdfUrl = data
|
|
const pdfUrl = data
|
|
if (code === 200 && pdfUrl) {
|
|
if (code === 200 && pdfUrl) {
|
|
uploadValue.value = pdfUrl
|
|
uploadValue.value = pdfUrl
|
|
- window?.$message?.success('上传成功');
|
|
|
|
|
|
+ window?.$message?.success('上传成功')
|
|
importModal.value = false
|
|
importModal.value = false
|
|
// getFileName(pdfUrl)
|
|
// getFileName(pdfUrl)
|
|
- fileNameValue.value=data?.originalName
|
|
|
|
|
|
+ fileNameValue.value = data?.originalName
|
|
//事件
|
|
//事件
|
|
- emit('update:modelValue', data?.pdfUrl)
|
|
|
|
|
|
+ emit('update:modelValue', data?.pdfUrl)
|
|
emit('change', data?.pdfUrl)
|
|
emit('change', data?.pdfUrl)
|
|
-
|
|
|
|
|
|
+
|
|
} else {
|
|
} else {
|
|
- window?.$message?.error('上传失败');
|
|
|
|
|
|
+ window?.$message?.error('上传失败')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -178,7 +178,7 @@ const uploadSuccess = ({code, data}) => {
|
|
const uploadError = () => {
|
|
const uploadError = () => {
|
|
uploadDisabled.value = false
|
|
uploadDisabled.value = false
|
|
emit('progress', false)
|
|
emit('progress', false)
|
|
- window?.$message?.error('上传失败');
|
|
|
|
|
|
+ window?.$message?.error('上传失败')
|
|
}
|
|
}
|
|
|
|
|
|
//文件改变时
|
|
//文件改变时
|