forked from mt-fe-group/mt-yd-ui
124 lines
3.2 KiB
Vue
124 lines
3.2 KiB
Vue
<template>
|
||
<div class="base-upload" style="border-radius: 8px; margin-top: 38px; padding: 0; max-height: 500px;">
|
||
<el-upload class="yd-upload" action="#" :http-request="handleUpload" multiple :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove">
|
||
<!-- <el-upload class="yd-upload" :action="$http.adornUrl(url)" multiple name="files" :data="extraParams" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"> -->
|
||
<el-button size="small" type="primary">{{ buttonContent }}</el-button>
|
||
<div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
|
||
</el-upload>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { pick } from 'lodash/object'
|
||
|
||
export default {
|
||
name: 'BaseUpload',
|
||
props: {
|
||
url: String,
|
||
buttonContent: String,
|
||
tip: {
|
||
type: String,
|
||
default: null
|
||
},
|
||
extraParams: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
uploaderInjectFileList: {
|
||
// 从外部传进来 fileList，用于展示文件列表用
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
// inject: {
|
||
// parentDataForm: "_df"
|
||
// },
|
||
data() {
|
||
return {
|
||
fileList: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.fileList.splice(0)
|
||
|
||
this.$watch('uploaderInjectFileList', function(val) {
|
||
if (val && val.length) {
|
||
console.log('this.uploaderInjectFileList', this.uploaderInjectFileList)
|
||
/** uploaderInjectFileList 里关于文件的信息比较全，需要手动过滤一下 */
|
||
this.fileList = val.map(item => {
|
||
const name = item.fileUrl.split('/').pop()
|
||
return { ...pick(item, ['id', 'fileName', 'typeCode']), name }
|
||
})
|
||
}
|
||
console.log('fillist: ', this.fileList)
|
||
})
|
||
|
||
// if (this.parentDataForm) {
|
||
// console.log('parent dataform: ', this.parentDataForm)
|
||
// }
|
||
},
|
||
methods: {
|
||
/** 自定义上传行为 */
|
||
handleUpload(file) {
|
||
const formData = new FormData()
|
||
let files = file.file
|
||
formData.append('files', files)
|
||
|
||
this.$http({
|
||
url: this.$http.adornUrl(this.url),
|
||
method: 'POST',
|
||
data: formData,
|
||
params: {
|
||
typeCode: this.extraParams.typeCode
|
||
}
|
||
}).then(({ data: res }) => {
|
||
if (res && res.code === 0) {
|
||
res.data.forEach(item => {
|
||
const ext = item.fileUrl.split('.').reverse()[0]
|
||
const name = `${item.fileName}.${ext}`
|
||
this.fileList.push({ ...pick(item, ['id', 'fileName', 'typeCode']), name })
|
||
})
|
||
// TODO: 在新增和更新阶段，带入 fileIds[] 数组给后端，就可完成文件和设备类型的绑定、删除操作
|
||
this.$emit('uploader-update-filelist', this.fileList)
|
||
}
|
||
})
|
||
},
|
||
/** 大小验证 */
|
||
validateFile(file) {
|
||
this.extraUploadParams.typeCode = 'equipmentInfoFile'
|
||
|
||
const isRightSize = file.size / 1024 / 1024 < 10
|
||
if (!isRightSize) {
|
||
this.$message.error(this.$t('upload.picSizeAlarm'))
|
||
}
|
||
return isRightSize
|
||
},
|
||
|
||
beforeRemove(file, filelist) {
|
||
return this.$confirm(`确定移除 ${file.name}?`)
|
||
},
|
||
handleRemove(file, filelist) {
|
||
// 把更新后的 fileList 传递出去
|
||
this.$emit('uploader-update-filelist', filelist)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.base-upload >>> .yd-upload {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.base-upload >>> .el-upload--text {
|
||
width: 100px;
|
||
position: relative;
|
||
left: -72px;
|
||
}
|
||
|
||
.base-upload >>> .el-upload__tip {
|
||
margin-top: 0;
|
||
margin-left: 5px;
|
||
}
|
||
</style>
|