131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<template>
|
||
<el-upload :file-list="_value"
|
||
:action="uploadFileUrl"
|
||
:headers="headers"
|
||
:limit="maxSize"
|
||
with-credentials
|
||
:multiple="maxSize > 0"
|
||
:data="uploadParams"
|
||
:show-file-list="false"
|
||
:auto-upload="true"
|
||
:before-upload="beforeUpload"
|
||
:on-success="handleUploadSuccess"
|
||
>
|
||
<el-button color="#DED0B2" :loading="loading">上传文件</el-button>
|
||
</el-upload>
|
||
<div v-if="showTable||fileList.length!==0">
|
||
<el-table :data="fileList" style="width: 100%">
|
||
<el-table-column label="序号" type="index" align="center" width="80"/>
|
||
<el-table-column prop="originalFilename" label="文件名" align="center"/>
|
||
<el-table-column prop="size" label="文件大小" align="center">
|
||
<template #default="scope">
|
||
{{ parseInt(scope.row.size / 1024) }}KB
|
||
<!-- {{ parseInt(scope.row.size / 1024) > 1024 ? 'MB' : 'KB' }}-->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<template #default="scope">
|
||
<el-button link type="primary" size="small" @click="beforeRemove(scope.row)">
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {defineProps, computed, ref} from "vue";
|
||
import {ElMessage, ElMessageBox} from "element-plus";
|
||
import {getToken} from '@/utils/auth'
|
||
import {deleteFile} from "@/api/project-demand";
|
||
|
||
const baseURL = import.meta.env.VITE_BASE_URL
|
||
const uploadFileUrl = ref(baseURL + "/workflow/process/file/upload")
|
||
const headers = reactive({
|
||
authorization: getToken()
|
||
})
|
||
const disabled = ref(false)
|
||
const loading = ref(false)
|
||
const showTable = ref(false)
|
||
const uploadParams = ref({})
|
||
const props = defineProps({
|
||
value: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
maxSize: {
|
||
type: Number,
|
||
default: 30
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(["input", "getFile"])
|
||
const fileList = ref([])
|
||
const _value = computed({
|
||
get() {
|
||
return props.value;
|
||
},
|
||
set(val) {
|
||
emit("input", val);
|
||
}
|
||
})
|
||
|
||
const beforeUpload = (file) => {
|
||
// const FileExt = file.name.replace(/.+\./, "");
|
||
// if (['zip', 'rar', 'pdf', 'doc', 'docx', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
|
||
// ElMessage.warning('请上传后缀名为pdf、doc、docx、xlsx、zip或rar的文件！');
|
||
// return false;
|
||
// } else
|
||
// if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) {
|
||
// ElMessage.warning(`每个文件最大不超过 ${props.maxSize}MB`)
|
||
// } else {
|
||
loading.value = true
|
||
return true
|
||
// }
|
||
}
|
||
const handleUploadSuccess = (res, file) => {
|
||
if (res.code !== 1000) {
|
||
loading.value = false
|
||
ElMessage.error("上传失败")
|
||
} else {
|
||
loading.value = false
|
||
ElMessage.success("上传成功")
|
||
}
|
||
showTable.value = true
|
||
let data = res.data
|
||
fileList.value.push(data)
|
||
emit("getFile", fileList.value)
|
||
}
|
||
const beforeRemove = (row) => {
|
||
ElMessageBox.confirm(`确认删除名称为${row.originalFilename}的表格吗?`, '系统提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
handleRemove(row)
|
||
}).catch(() => {
|
||
ElMessage.warning("用户取消删除! ");
|
||
})
|
||
}
|
||
|
||
const handleRemove = (row) => {
|
||
deleteFile(row.id).then(res => {
|
||
if (res.code === 1000) {
|
||
ElMessage.success("删除成功");
|
||
fileList.value.splice(fileList.value.findIndex((item) => item.id === row.id), 1);
|
||
}
|
||
});
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
a {
|
||
font-size: 12px;
|
||
color: #2a99ff;
|
||
}
|
||
</style>
|