154 lines
4.2 KiB
JavaScript
154 lines
4.2 KiB
JavaScript
import {LoadingStatus} from "@/utils/enums";
|
|
import {isEmpty, parseLocalUrl} from "@/utils/index";
|
|
import {uploadFile} from "@/api/common";
|
|
|
|
export const $loadList = {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
computed: {
|
|
/**
|
|
* 加载状态
|
|
* loading: 是否加载中
|
|
* current: 当前值
|
|
* max: 最大值
|
|
*/
|
|
loadStatus() {
|
|
return (loading, current, max) => {
|
|
// console.log(loading, current, max)
|
|
if (current == null) {
|
|
current = 0;
|
|
}
|
|
console.log(`loading ${loading} current ${current} max ${max}`)
|
|
if (loading === true) {
|
|
return LoadingStatus.LOADING;
|
|
} else if (max != null && current >= max) {
|
|
return LoadingStatus.NO_MORE;
|
|
} else {
|
|
return LoadingStatus.MORE;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 加载更多
|
|
* @param func 加载方法回调
|
|
* @param loadStatus 加载状态
|
|
*/
|
|
loadMore(func, loadStatus) {
|
|
// console.log("loadStatus", loadStatus);
|
|
if (loadStatus !== LoadingStatus.MORE) {
|
|
return;
|
|
}
|
|
loadStatus = LoadingStatus.LOADING;
|
|
func.apply();
|
|
},
|
|
}
|
|
}
|
|
|
|
export const $upload = {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fileList: []
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(nv, ov) {
|
|
this.initFileList(nv);
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initFileList(this.value);
|
|
},
|
|
computed: {
|
|
previewFileList() {
|
|
return this.fileList.map(item => {
|
|
return {
|
|
...item,
|
|
url: parseLocalUrl(item.url),
|
|
}
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
// 初始化文件列表
|
|
initFileList(value) {
|
|
console.log('value', value )
|
|
if (isEmpty(value)) {
|
|
this.fileList = [];
|
|
} else {
|
|
let urls = value.split(",");
|
|
this.fileList = urls.map(url => {
|
|
return {
|
|
url: url,
|
|
status: 'success',
|
|
}
|
|
})
|
|
}
|
|
},
|
|
async afterRead(event) {
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file);
|
|
|
|
// 添加到fileList
|
|
this.fileList.push(
|
|
...lists.map(item => {
|
|
return {
|
|
url: item.url,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
}
|
|
})
|
|
)
|
|
|
|
// 依次上传
|
|
for (let i = 0; i < this.fileList.length; i ++) {
|
|
try {
|
|
await this.doUpload(this.fileList[i]);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
// 触发事件
|
|
this.emitInputValue();
|
|
},
|
|
async doUpload(file) {
|
|
try {
|
|
let res = await uploadFile(file.url, 60);
|
|
if (res.code === 200) {
|
|
file.url = res.fileName;
|
|
file.status = 'success';
|
|
file.message = '上传成功';
|
|
}
|
|
} catch (e) {
|
|
file.status = 'fail';
|
|
file.message = '上传失败';
|
|
}
|
|
},
|
|
onDelete(e) {
|
|
this.fileList.splice(e.index, 1);
|
|
this.emitInputValue();
|
|
},
|
|
emitInputValue() {
|
|
let successList = this.fileList.filter(item => item.status === 'success');
|
|
let nv = successList.map(item => item.url).join(",");
|
|
this.$emit('input', nv);
|
|
}
|
|
}
|
|
}
|