261 lines
9.0 KiB
JavaScript
261 lines
9.0 KiB
JavaScript
import { generateNewId } from 'oak-domain/lib/utils/uuid';
|
||
import { assert } from 'oak-domain/lib/utils/assert';
|
||
import { isEqual } from 'oak-domain/lib/utils/lodash';
|
||
export default OakComponent({
|
||
entity: 'extraFile',
|
||
isList: true,
|
||
projection: {
|
||
id: 1,
|
||
tag1: 1,
|
||
tag2: 1,
|
||
origin: 1,
|
||
bucket: 1,
|
||
objectId: 1,
|
||
filename: 1,
|
||
extra1: 1,
|
||
extra2: 1,
|
||
extension: 1,
|
||
type: 1,
|
||
entity: 1,
|
||
entityId: 1,
|
||
fileType: 1,
|
||
sort: 1,
|
||
isBridge: 1,
|
||
uploadState: 1,
|
||
size: 1,
|
||
applicationId: 1,
|
||
},
|
||
features: ['extraFile'],
|
||
filters: [
|
||
{
|
||
filter() {
|
||
const { tag1, tag2 } = this.props;
|
||
const filter1 = {};
|
||
if (tag1) {
|
||
Object.assign(filter1, { tag1 });
|
||
}
|
||
if (tag2) {
|
||
Object.assign(filter1, { tag2 });
|
||
}
|
||
return filter1;
|
||
},
|
||
},
|
||
],
|
||
formData({ data: originalFiles, features }) {
|
||
let file;
|
||
const notDeleteFiles = originalFiles?.filter((ele) => !ele.$$deleteAt$$);
|
||
if (this.props.tag1) {
|
||
file = notDeleteFiles?.filter((ele) => ele?.tag1 === this.props.tag1)?.[0];
|
||
}
|
||
if (this.props.tag2) {
|
||
file = notDeleteFiles?.filter((ele) => ele?.tag2 === this.props.tag2)?.[0];
|
||
}
|
||
return {
|
||
file,
|
||
src: features.extraFile.getUrl(file),
|
||
isBridge: file?.isBridge,
|
||
};
|
||
},
|
||
data: {
|
||
isModalOpen: false,
|
||
isModalOpen1: false,
|
||
renderImgs: [], // 读取的原文图片，在modal使用
|
||
methodsType: '',
|
||
bridgeUrl: '', // 通过桥接方式获得的url
|
||
selectedId: -1,
|
||
},
|
||
properties: {
|
||
type: '',
|
||
tag1: '',
|
||
tag2: '',
|
||
entity: '',
|
||
entityId: '',
|
||
imgUrls: [],
|
||
origin: null,
|
||
},
|
||
lifetimes: {},
|
||
listeners: {
|
||
async imgUrls(prev, next) {
|
||
// 所以此处增加前后项imgUrls里都有值且不等的条件再去clean
|
||
if (prev?.imgUrls.length && next?.imgUrls.length && !isEqual(prev.imgUrls, next.imgUrls)) {
|
||
this.clean();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
async chooseMethod(method) {
|
||
switch (method) {
|
||
case 'uploadLocalImg':
|
||
const fileInput = document.createElement('input');
|
||
const imgElement = document.getElementById('previewImg');
|
||
fileInput.type = 'file';
|
||
fileInput.accept = 'image/png, image/jpeg';
|
||
fileInput.style.display = 'none';
|
||
fileInput.addEventListener('change', (e) => {
|
||
if (!fileInput.files || fileInput.files.length === 0) {
|
||
return;
|
||
}
|
||
this.myUpdateItem(fileInput.files[0]);
|
||
});
|
||
fileInput.click();
|
||
this.setState({
|
||
methodsType: method
|
||
});
|
||
this.setSelectedId(-1);
|
||
break;
|
||
case 'url':
|
||
this.setState({
|
||
isModalOpen: true,
|
||
methodsType: method
|
||
});
|
||
break;
|
||
case 'original':
|
||
this.setState({
|
||
isModalOpen1: true,
|
||
methodsType: method
|
||
});
|
||
const { imgUrls } = this.props;
|
||
const { renderImgs } = this.state;
|
||
let renderImgs2 = new Array(...renderImgs);
|
||
if (imgUrls && imgUrls.length) {
|
||
for (let i = 0; i < imgUrls.length; i++) {
|
||
if (renderImgs2[i] && renderImgs2[i].originUrl === imgUrls[i]) {
|
||
return;
|
||
}
|
||
else if (renderImgs2[i] && renderImgs2[i].originUrl !== imgUrls[i]) {
|
||
renderImgs2 = [];
|
||
}
|
||
let renderUrl;
|
||
const isWechatUrl = this.isWechatUrlFn(imgUrls[i]);
|
||
if (isWechatUrl) {
|
||
renderUrl = this.features.extraFile.getUrl({ isBridge: true, extra1: imgUrls[i] });
|
||
}
|
||
else {
|
||
renderUrl = imgUrls[i];
|
||
}
|
||
renderImgs2.push({
|
||
renderUrl,
|
||
originUrl: imgUrls[i],
|
||
id: i,
|
||
isBridge: isWechatUrl
|
||
});
|
||
}
|
||
this.setState({
|
||
renderImgs: renderImgs2,
|
||
});
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
closeModal() {
|
||
this.setState({
|
||
isModalOpen: false,
|
||
});
|
||
},
|
||
closeModal1() {
|
||
this.setState({
|
||
isModalOpen1: false,
|
||
});
|
||
},
|
||
createExtraFileData(file) {
|
||
const { methodsType } = this.state;
|
||
const { tag1, tag2, entity, entityId, origin } = this.props;
|
||
let extension = '';
|
||
let filename = '';
|
||
const applicationId = this.features.application.getApplicationId();
|
||
const createData = {
|
||
applicationId,
|
||
extra1: file,
|
||
entity,
|
||
entityId,
|
||
type: 'image',
|
||
tag1,
|
||
tag2,
|
||
bucket: '',
|
||
id: generateNewId(),
|
||
objectId: generateNewId(), // 这个域用来标识唯一性
|
||
};
|
||
assert(entity, '必须传入entity');
|
||
switch (methodsType) {
|
||
case 'uploadLocalImg':
|
||
const { name, size, type } = file;
|
||
extension = name.substring(name.lastIndexOf('.') + 1);
|
||
filename = name.substring(0, name.lastIndexOf('.'));
|
||
Object.assign(createData, {
|
||
origin,
|
||
extension,
|
||
filename,
|
||
size,
|
||
fileType: type,
|
||
});
|
||
break;
|
||
case 'url':
|
||
Object.assign(createData, {
|
||
origin: 'unknown',
|
||
extension,
|
||
filename: 'unknown',
|
||
isBridge: this.isWechatUrlFn(file),
|
||
uploadState: 'success'
|
||
});
|
||
break;
|
||
case 'original':
|
||
Object.assign(createData, {
|
||
origin: 'unknown',
|
||
extension,
|
||
filename: 'unknown',
|
||
isBridge: this.isWechatUrlFn(file),
|
||
uploadState: 'success'
|
||
});
|
||
break;
|
||
}
|
||
return createData;
|
||
},
|
||
async myAddItem(createData) {
|
||
// 目前只支持七牛上传
|
||
if (createData.origin === 'unknown') {
|
||
this.addItem(createData);
|
||
}
|
||
else {
|
||
const file = createData.extra1;
|
||
const id = this.addItem(Object.assign(createData, {
|
||
extra1: null,
|
||
uploadState: 'uploading',
|
||
}));
|
||
this.features.extraFile.addLocalFile(id, file);
|
||
}
|
||
},
|
||
async myUpdateItem(params) {
|
||
const { file } = this.state;
|
||
if (file) {
|
||
this.removeItem(file.id);
|
||
}
|
||
if (!!params) {
|
||
const createData = this.createExtraFileData(params);
|
||
this.myAddItem(createData);
|
||
}
|
||
},
|
||
onModalConfirm(value) {
|
||
const reg = new RegExp(/(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/);
|
||
if (!reg.test(value)) {
|
||
return;
|
||
}
|
||
this.myUpdateItem(value);
|
||
this.setSelectedId(-1);
|
||
},
|
||
onModal1Confirm(value) {
|
||
const { renderImgs } = this.state;
|
||
const img = renderImgs.find((ele) => ele.id === value);
|
||
this.myUpdateItem(img?.originUrl);
|
||
this.closeModal1();
|
||
},
|
||
isWechatUrlFn(url) {
|
||
return (url.startsWith('https://mmbiz.qpic.cn') || url.startsWith('http://mmbiz.qpic.cn'));
|
||
},
|
||
setSelectedId(id) {
|
||
this.setState({
|
||
selectedId: id
|
||
});
|
||
}
|
||
}
|
||
});
|