105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<template>
|
|
<template v-if="mode === 'DESIGN'">
|
|
<el-button size="small" icon="Link" round>选择文件</el-button>
|
|
<ellipsis :row="1" :content="placeholder + sizeTip" hoverTip slot="tip"/>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="perm === 'E'">
|
|
<el-upload :file-list="_value" action="#" :limit="maxSize" with-credentials :multiple="maxSize > 0"
|
|
:data="uploadParams"
|
|
:auto-upload="false" :before-upload="beforeUpload">
|
|
<el-button size="small" icon="Link" round>选择文件</el-button>
|
|
<ellipsis :row="1" :content="placeholder + sizeTip" hoverTip slot="tip"/>
|
|
</el-upload>
|
|
</template>
|
|
<template v-else-if="perm === 'R'">
|
|
{{ _value }}
|
|
</template>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {defineProps,computed,ref} from "vue";
|
|
import {ElMessage} from "element-plus";
|
|
import Ellipsis from '../../process/common/Ellipsis.vue'
|
|
const disabled = ref(false)
|
|
const uploadParams = ref({})
|
|
const props = defineProps({
|
|
mode:{
|
|
type: String,
|
|
default: 'DESIGN'
|
|
},
|
|
required:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择附件'
|
|
},
|
|
value: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
perm: {
|
|
type: String,
|
|
default: 'E'
|
|
},
|
|
maxSize: {
|
|
type: Number,
|
|
default: 5
|
|
},
|
|
maxNumber: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
fileTypes: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
}
|
|
})
|
|
const emit = defineEmits(["input"])
|
|
const sizeTip = computed(() => {
|
|
if (props.fileTypes.length > 0) {
|
|
return ` | 只允许上传[${String(props.fileTypes).replaceAll(",", "、")}]格式的文件，且单个附件不超过${props.maxSize}MB`
|
|
}
|
|
return props.maxSize > 0 ? ` | 单个附件不超过${props.maxSize}MB` : ''
|
|
|
|
})
|
|
const _value = computed( {
|
|
get() {
|
|
return props.value;
|
|
},
|
|
set(val) {
|
|
emit("input", val);
|
|
}
|
|
})
|
|
|
|
const beforeUpload = (file) => {
|
|
const alows = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
|
|
if (alows.indexOf(file.type) === -1) {
|
|
ElMessage.warning("存在不支持的图片格式")
|
|
} else if (this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize) {
|
|
ElMessage.warning(`单张图片最大不超过 ${this.maxSize}MB`)
|
|
} else {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
const handleRemove = (file, fileList) => {
|
|
console.log(file, fileList);
|
|
}
|
|
const handlePictureCardPreview = (file) => {
|
|
console.log(file)
|
|
}
|
|
const handleDownload = (file) => {
|
|
console.log(file)
|
|
}
|
|
|
|
</script>
|
|
|