feat: base sc filed回显
This commit is contained in:
parent
35b3064a1b
commit
902c8fb65a
|
|
@ -0,0 +1,178 @@
|
||||||
|
<template>
|
||||||
|
<div class="sc-upload-file">
|
||||||
|
<el-upload
|
||||||
|
:disabled="disabled"
|
||||||
|
:auto-upload="autoUpload"
|
||||||
|
:action="action"
|
||||||
|
:name="name"
|
||||||
|
:data="data"
|
||||||
|
:http-request="request"
|
||||||
|
v-model:file-list="defaultFileList"
|
||||||
|
:show-file-list="showFileList"
|
||||||
|
:drag="drag"
|
||||||
|
:accept="accept"
|
||||||
|
:multiple="multiple"
|
||||||
|
:limit="limit"
|
||||||
|
:before-upload="before"
|
||||||
|
:on-success="success"
|
||||||
|
:on-error="error"
|
||||||
|
:on-preview="handlePreview"
|
||||||
|
:on-exceed="handleExceed">
|
||||||
|
<slot>
|
||||||
|
<el-button type="primary" :disabled="disabled">上传</el-button>
|
||||||
|
</slot>
|
||||||
|
<template #tip>
|
||||||
|
<div v-if="tip" class="el-upload__tip">{{tip}}</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import config from "@/config/upload"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
modelValue: { type: [String, Array], default: "" },
|
||||||
|
tip: { type: String, default: "" },
|
||||||
|
action: { type: String, default: "" },
|
||||||
|
apiObj: { type: Object, default: () => {} },
|
||||||
|
name: { type: String, default: config.filename },
|
||||||
|
data: { type: Object, default: () => {} },
|
||||||
|
accept: { type: String, default: "" },
|
||||||
|
maxSize: { type: Number, default: config.maxSizeFile },
|
||||||
|
limit: { type: Number, default: 0 },
|
||||||
|
autoUpload: { type: Boolean, default: true },
|
||||||
|
showFileList: { type: Boolean, default: true },
|
||||||
|
drag: { type: Boolean, default: false },
|
||||||
|
multiple: { type: Boolean, default: true },
|
||||||
|
disabled: { type: Boolean, default: false },
|
||||||
|
onSuccess: { type: Function, default: () => { return true } },
|
||||||
|
file_: {type: [Array, Object], default: () => { return [] } }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
defaultFileList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
file_: {
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (Array.isArray(newVal)) {
|
||||||
|
this.defaultFileList = this.formatArr(newVal)
|
||||||
|
} else if (newVal) { // 修复：改为 newVal
|
||||||
|
// 如果是单个文件对象，包装成数组
|
||||||
|
this.defaultFileList = this.formatArr([newVal])
|
||||||
|
} else {
|
||||||
|
// 处理空值情况
|
||||||
|
this.defaultFileList = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true // 添加立即执行，确保初始值被处理
|
||||||
|
},
|
||||||
|
defaultFileList: {
|
||||||
|
handler(newVal) {
|
||||||
|
let val = null;
|
||||||
|
if (this.multiple) {
|
||||||
|
val = [];
|
||||||
|
newVal.forEach(item => {
|
||||||
|
if(item.id) {
|
||||||
|
val.push(item.id);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
if(newVal.length > 0) {
|
||||||
|
val = newVal[0].id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$emit('update:modelValue', val)
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//格式化数组值
|
||||||
|
formatArr(arr){
|
||||||
|
var _arr = []
|
||||||
|
arr.forEach(item => {
|
||||||
|
if(item){
|
||||||
|
_arr.push({
|
||||||
|
name: item.name,
|
||||||
|
url: item.path,
|
||||||
|
id: item.id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return _arr
|
||||||
|
},
|
||||||
|
before(file){
|
||||||
|
const maxSize = file.size / 1024 / 1024 < this.maxSize;
|
||||||
|
if (!maxSize) {
|
||||||
|
this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
success(res, file){
|
||||||
|
var os = this.onSuccess(res, file)
|
||||||
|
if(os!=undefined && os==false){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
file.name = res.name
|
||||||
|
file.url = res.path
|
||||||
|
file.id = res.id
|
||||||
|
},
|
||||||
|
error(err){
|
||||||
|
this.$notify.error({
|
||||||
|
title: '上传文件未成功',
|
||||||
|
message: err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeRemove(uploadFile){
|
||||||
|
return this.$confirm(`是否移除 ${uploadFile.name} ?`, '提示', {
|
||||||
|
type: 'warning',
|
||||||
|
}).then(() => {
|
||||||
|
return true
|
||||||
|
}).catch(() => {
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleExceed(){
|
||||||
|
this.$message.warning(`当前设置最多上传 ${this.limit} 个文件，请移除后上传!`)
|
||||||
|
},
|
||||||
|
handlePreview(uploadFile){
|
||||||
|
window.open(uploadFile.url)
|
||||||
|
},
|
||||||
|
request(param){
|
||||||
|
var apiObj = config.apiObjFile;
|
||||||
|
if(this.apiObj){
|
||||||
|
apiObj = this.apiObj;
|
||||||
|
}
|
||||||
|
const data = new FormData();
|
||||||
|
data.append(param.filename, param.file);
|
||||||
|
for (const key in param.data) {
|
||||||
|
data.append(key, param.data[key]);
|
||||||
|
}
|
||||||
|
apiObj.post(data, {
|
||||||
|
onUploadProgress: e => {
|
||||||
|
const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
|
||||||
|
param.onProgress({percent: complete})
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
config.parseData(res);
|
||||||
|
param.onSuccess(res)
|
||||||
|
}).catch(err => {
|
||||||
|
param.onError(err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.el-form-item.is-error .sc-upload-file:deep(.el-upload-dragger) {border-color: var(--el-color-danger);}
|
||||||
|
.sc-upload-file {width: 100%;}
|
||||||
|
.sc-upload-file:deep(.el-upload-list__item) {transition: none !important;}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue