fix
This commit is contained in:
parent
b7f559e88f
commit
6d6911a2ef
|
|
@ -41,6 +41,7 @@ exports.default = OakComponent({
|
||||||
selected: -1,
|
selected: -1,
|
||||||
// 根据 size 不同,计算的图片显示大小不同
|
// 根据 size 不同,计算的图片显示大小不同
|
||||||
itemSizePercentage: '',
|
itemSizePercentage: '',
|
||||||
|
newUploadFiles: [],
|
||||||
},
|
},
|
||||||
externalClasses: ['l-class', 'l-item-class'],
|
externalClasses: ['l-class', 'l-item-class'],
|
||||||
properties: {
|
properties: {
|
||||||
|
|
@ -185,7 +186,7 @@ exports.default = OakComponent({
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onWebPick: function (uploadFiles) {
|
onWebPick: function (uploadFiles, callback) {
|
||||||
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
return tslib_1.__generator(this, function (_a) {
|
return tslib_1.__generator(this, function (_a) {
|
||||||
|
|
@ -199,7 +200,7 @@ exports.default = OakComponent({
|
||||||
fileType: fileType,
|
fileType: fileType,
|
||||||
size: size,
|
size: size,
|
||||||
extra1: raw,
|
extra1: raw,
|
||||||
});
|
}, callback);
|
||||||
return [2 /*return*/];
|
return [2 /*return*/];
|
||||||
});
|
});
|
||||||
}); }))];
|
}); }))];
|
||||||
|
|
@ -210,7 +211,7 @@ exports.default = OakComponent({
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
pushExtraFile: function (options) {
|
pushExtraFile: function (options, callback) {
|
||||||
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
var _a, type, origin, tag1, tag2, entity, entityId, autoUpload, name, extra1, fileType, size, extension, filename, updateData, bucket, _b, _c, _d, ele, error_1, err_2, ele;
|
var _a, type, origin, tag1, tag2, entity, entityId, autoUpload, name, extra1, fileType, size, extension, filename, updateData, bucket, _b, _c, _d, ele, error_1, err_2, ele;
|
||||||
var _e, _f;
|
var _e, _f;
|
||||||
|
|
@ -264,6 +265,10 @@ exports.default = OakComponent({
|
||||||
return [4 /*yield*/, this.addExtraFile(updateData)];
|
return [4 /*yield*/, this.addExtraFile(updateData)];
|
||||||
case 6:
|
case 6:
|
||||||
_g.sent();
|
_g.sent();
|
||||||
|
if (callback) {
|
||||||
|
callback(updateData);
|
||||||
|
}
|
||||||
|
;
|
||||||
ele = {
|
ele = {
|
||||||
updateData: updateData,
|
updateData: updateData,
|
||||||
};
|
};
|
||||||
|
|
@ -303,6 +308,18 @@ exports.default = OakComponent({
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
setNewUploadFiles: function (file) {
|
||||||
|
var filename = file.filename, size = file.size, id = file.id;
|
||||||
|
var newUploadFiles = this.state.newUploadFiles;
|
||||||
|
var file2 = newUploadFiles.find(function (ele) { return ele.filename = filename && ele.size === size; });
|
||||||
|
Object.assign(file2, {
|
||||||
|
status: 'success',
|
||||||
|
id: id,
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
newUploadFiles: tslib_1.__spreadArray([], tslib_1.__read(newUploadFiles), false),
|
||||||
|
});
|
||||||
|
},
|
||||||
onItemTapped: function (event) {
|
onItemTapped: function (event) {
|
||||||
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
var _a, files, systemConfig, index, imageUrl, urls, detail, result;
|
var _a, files, systemConfig, index, imageUrl, urls, detail, result;
|
||||||
|
|
@ -361,6 +378,20 @@ exports.default = OakComponent({
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
customDelete: function (index) {
|
||||||
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
|
var newUploadFiles, arr;
|
||||||
|
return tslib_1.__generator(this, function (_a) {
|
||||||
|
newUploadFiles = this.state.newUploadFiles;
|
||||||
|
arr = tslib_1.__spreadArray([], tslib_1.__read(newUploadFiles), false);
|
||||||
|
arr.splice(index, 1);
|
||||||
|
this.setState({
|
||||||
|
newUploadFiles: arr,
|
||||||
|
});
|
||||||
|
return [2 /*return*/];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
onWebDelete: function (value, index) {
|
onWebDelete: function (value, index) {
|
||||||
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||||
var id, confirm_2;
|
var id, confirm_2;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"waiting": "等待中",
|
||||||
|
"success": "上传成功"
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
var tslib_1 = require("tslib");
|
||||||
var jsx_runtime_1 = require("react/jsx-runtime");
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
||||||
var tdesign_react_1 = require("tdesign-react");
|
var tdesign_react_1 = require("tdesign-react");
|
||||||
var extraFile_1 = require("../../../utils/extraFile");
|
var extraFile_1 = require("../../../utils/extraFile");
|
||||||
|
|
@ -12,17 +13,73 @@ function extraFileToUploadFile(extraFile, systemConfig) {
|
||||||
function render() {
|
function render() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
var _a = this.props, mediaType = _a.mediaType, _b = _a.maxNumber, maxNumber = _b === void 0 ? 100 : _b, _c = _a.multiple, multiple = _c === void 0 ? true : _c, _d = _a.useMockProgress, useMockProgress = _d === void 0 ? false : _d, _e = _a.draggable, draggable = _e === void 0 ? false : _e, _f = _a.showUploadProgress, showUploadProgress = _f === void 0 ? false : _f, _g = _a.theme, theme = _g === void 0 ? 'image' : _g, tips = _a.tips, placeholder = _a.placeholder, beforeUpload = _a.beforeUpload, disabled = _a.disabled, style = _a.style, className = _a.className, sizeLimit = _a.sizeLimit;
|
var _a = this.props, mediaType = _a.mediaType, _b = _a.maxNumber, maxNumber = _b === void 0 ? 100 : _b, _c = _a.multiple, multiple = _c === void 0 ? true : _c, _d = _a.useMockProgress, useMockProgress = _d === void 0 ? false : _d, _e = _a.draggable, draggable = _e === void 0 ? false : _e, _f = _a.showUploadProgress, showUploadProgress = _f === void 0 ? false : _f, _g = _a.theme, theme = _g === void 0 ? 'image' : _g, tips = _a.tips, placeholder = _a.placeholder, beforeUpload = _a.beforeUpload, disabled = _a.disabled, style = _a.style, className = _a.className, sizeLimit = _a.sizeLimit;
|
||||||
var _h = this.state, files = _h.files, systemConfig = _h.systemConfig;
|
var _h = this.state, files = _h.files, systemConfig = _h.systemConfig, newUploadFiles = _h.newUploadFiles;
|
||||||
return ((0, jsx_runtime_1.jsx)(tdesign_react_1.Upload, { sizeLimit: sizeLimit, className: className, style: style, disabled: disabled, beforeUpload: beforeUpload, placeholder: placeholder, tips: tips, multiple: multiple, autoUpload: false, draggable: draggable, useMockProgress: useMockProgress, max: maxNumber, accept: mediaType, showUploadProgress: showUploadProgress, theme: theme, files: (files || []).map(function (ele) {
|
return ((0, jsx_runtime_1.jsxs)(tdesign_react_1.Space, tslib_1.__assign({ direction: "vertical" }, { children: [(0, jsx_runtime_1.jsx)(tdesign_react_1.Upload, tslib_1.__assign({ sizeLimit: sizeLimit, className: className, style: style, disabled: disabled, beforeUpload: beforeUpload, placeholder: placeholder, tips: tips, multiple: multiple, autoUpload: false, draggable: draggable, useMockProgress: useMockProgress, max: maxNumber, accept: mediaType, showUploadProgress: showUploadProgress, theme: theme, files: theme === 'custom' ? [] : (files || []).map(function (ele) {
|
||||||
return extraFileToUploadFile(ele, systemConfig);
|
return extraFileToUploadFile(ele, systemConfig);
|
||||||
}), onChange: function (uploadFiles) {
|
}), onChange: function (uploadFiles) {
|
||||||
var newUploadFiles = (uploadFiles === null || uploadFiles === void 0 ? void 0 : uploadFiles.filter(function (ele) { return !ele.id; })) || [];
|
var arr = (uploadFiles === null || uploadFiles === void 0 ? void 0 : uploadFiles.filter(function (ele) { return !ele.id; })) || [];
|
||||||
_this.onWebPick(newUploadFiles);
|
_this.setState({
|
||||||
|
newUploadFiles: arr,
|
||||||
|
});
|
||||||
|
if (theme !== 'custom') {
|
||||||
|
_this.onWebPick(arr);
|
||||||
|
}
|
||||||
}, onRemove: function (_a) {
|
}, onRemove: function (_a) {
|
||||||
var file = _a.file, index = _a.index, e = _a.e;
|
var file = _a.file, index = _a.index, e = _a.e;
|
||||||
_this.onWebDelete(file, index);
|
_this.onWebDelete(file, index);
|
||||||
}, onPreview: function (_a) {
|
}, onPreview: function (_a) {
|
||||||
var file = _a.file, e = _a.e;
|
var file = _a.file, e = _a.e;
|
||||||
} }));
|
} }, { children: theme === 'custom' && ((0, jsx_runtime_1.jsx)(tdesign_react_1.Button, tslib_1.__assign({ variant: "outline", theme: "default" }, { children: "\u9009\u62E9\u6587\u4EF6" }))) })), theme === 'custom' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tdesign_react_1.Table, { data: newUploadFiles || [], rowKey: "id", columns: [
|
||||||
|
{
|
||||||
|
align: 'center',
|
||||||
|
colKey: 'tableIndex',
|
||||||
|
title: '序号',
|
||||||
|
cell: function (_a) {
|
||||||
|
var row = _a.row, rowIndex = _a.rowIndex;
|
||||||
|
return rowIndex + 1;
|
||||||
|
},
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
colKey: 'name',
|
||||||
|
title: '文件名',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
colKey: 'size',
|
||||||
|
title: '文件大小',
|
||||||
|
cell: function (_a) {
|
||||||
|
var row = _a.row;
|
||||||
|
var b = (row === null || row === void 0 ? void 0 : row.size) / 1024;
|
||||||
|
return (0, extraFile_1.bytesToSize)(b);
|
||||||
|
},
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
colKey: 'status',
|
||||||
|
title: '状态',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
colKey: 'op',
|
||||||
|
width: 300,
|
||||||
|
title: '操作',
|
||||||
|
align: 'center',
|
||||||
|
cell: function (_a) {
|
||||||
|
var row = _a.row, rowIndex = _a.rowIndex;
|
||||||
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !row.id && ((0, jsx_runtime_1.jsx)(tdesign_react_1.Button, tslib_1.__assign({ theme: "primary", variant: "text", onClick: function () {
|
||||||
|
_this.customDelete(rowIndex);
|
||||||
|
} }, { children: "\u5220\u9664" }))) }));
|
||||||
|
},
|
||||||
|
fixed: 'right',
|
||||||
|
},
|
||||||
|
] }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsxs)(tdesign_react_1.Space, { children: [(0, jsx_runtime_1.jsx)(tdesign_react_1.Button, tslib_1.__assign({ theme: "default", onClick: function () {
|
||||||
|
_this.setState({
|
||||||
|
newUploadFiles: [],
|
||||||
|
});
|
||||||
|
} }, { children: "\u5168\u90E8\u6E05\u7A7A" })), (0, jsx_runtime_1.jsx)(tdesign_react_1.Button, tslib_1.__assign({ onClick: function () {
|
||||||
|
_this.onWebPick(newUploadFiles, function (file) {
|
||||||
|
_this.setNewUploadFiles(file);
|
||||||
|
});
|
||||||
|
} }, { children: "\u4E0A\u4F20" }))] }) }))] }))] })));
|
||||||
}
|
}
|
||||||
exports.default = render;
|
exports.default = render;
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ export declare type Schema = {
|
||||||
role: Role.Schema;
|
role: Role.Schema;
|
||||||
} & {
|
} & {
|
||||||
[A in ExpressionKey]?: any;
|
[A in ExpressionKey]?: any;
|
||||||
};
|
};
|
||||||
declare type AttrFilter = {
|
declare type AttrFilter = {
|
||||||
id: Q_StringValue | SubQuery.UserRoleIdSubQuery;
|
id: Q_StringValue | SubQuery.UserRoleIdSubQuery;
|
||||||
$$createAt$$: Q_DateValue;
|
$$createAt$$: Q_DateValue;
|
||||||
|
|
@ -155,4 +155,4 @@ export declare type EntityDef = {
|
||||||
CreateSingle: CreateSingleOperation;
|
CreateSingle: CreateSingleOperation;
|
||||||
CreateMulti: CreateMultipleOperation;
|
CreateMulti: CreateMultipleOperation;
|
||||||
};
|
};
|
||||||
export {};
|
export { };
|
||||||
|
|
|
||||||
|
|
@ -3,3 +3,4 @@ import { SystemConfig } from '../general-app-domain/System/Schema';
|
||||||
export declare function composeFileUrl(extraFile: Pick<ExtraFile, 'type' | 'bucket' | 'filename' | 'origin' | 'extra1' | 'objectId' | 'extension' | 'entity'>, systemConfig?: SystemConfig): any;
|
export declare function composeFileUrl(extraFile: Pick<ExtraFile, 'type' | 'bucket' | 'filename' | 'origin' | 'extra1' | 'objectId' | 'extension' | 'entity'>, systemConfig?: SystemConfig): any;
|
||||||
export declare function decomposeFileUrl(url: string): Pick<ExtraFile, 'bucket' | 'filename' | 'origin' | 'type' | 'extra1'>;
|
export declare function decomposeFileUrl(url: string): Pick<ExtraFile, 'bucket' | 'filename' | 'origin' | 'type' | 'extra1'>;
|
||||||
export declare function getFileURL(file: File): any;
|
export declare function getFileURL(file: File): any;
|
||||||
|
export declare function bytesToSize(sizes: any): any;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
exports.getFileURL = exports.decomposeFileUrl = exports.composeFileUrl = void 0;
|
exports.bytesToSize = exports.getFileURL = exports.decomposeFileUrl = exports.composeFileUrl = void 0;
|
||||||
function composeFileUrl(extraFile, systemConfig) {
|
function composeFileUrl(extraFile, systemConfig) {
|
||||||
var type = extraFile.type, bucket = extraFile.bucket, filename = extraFile.filename, origin = extraFile.origin, extra1 = extraFile.extra1, objectId = extraFile.objectId, extension = extraFile.extension, entity = extraFile.entity;
|
var type = extraFile.type, bucket = extraFile.bucket, filename = extraFile.filename, origin = extraFile.origin, extra1 = extraFile.extra1, objectId = extraFile.objectId, extension = extraFile.extension, entity = extraFile.entity;
|
||||||
if (extra1) {
|
if (extra1) {
|
||||||
|
|
@ -58,3 +58,22 @@ function getFileURL(file) {
|
||||||
return getUrl;
|
return getUrl;
|
||||||
}
|
}
|
||||||
exports.getFileURL = getFileURL;
|
exports.getFileURL = getFileURL;
|
||||||
|
function bytesToSize(sizes) {
|
||||||
|
var mYsize = sizes;
|
||||||
|
if (mYsize === 0)
|
||||||
|
return 0 + 'B';
|
||||||
|
if (mYsize < 0.1) { // 小于0.1KB转换为B
|
||||||
|
mYsize = parseFloat((mYsize * 1024).toFixed(2)) + 'B';
|
||||||
|
}
|
||||||
|
else if (mYsize > (0.1 * 1024)) { // 大于0.1MB转换为MB
|
||||||
|
mYsize = parseFloat((mYsize / 1024).toFixed(2)) + 'MB';
|
||||||
|
}
|
||||||
|
else if (mYsize > (0.1 * 1024 * 1024)) { // 大于0.1GB转换为GB
|
||||||
|
mYsize = parseFloat((mYsize / 1024 / 1024).toFixed(2)) + 'GB';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
mYsize = (mYsize).toFixed(2) + 'KB';
|
||||||
|
}
|
||||||
|
return mYsize;
|
||||||
|
}
|
||||||
|
exports.bytesToSize = bytesToSize;
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ export default OakComponent({
|
||||||
selected: -1,
|
selected: -1,
|
||||||
// 根据 size 不同,计算的图片显示大小不同
|
// 根据 size 不同,计算的图片显示大小不同
|
||||||
itemSizePercentage: '',
|
itemSizePercentage: '',
|
||||||
|
newUploadFiles: [],
|
||||||
},
|
},
|
||||||
externalClasses: ['l-class', 'l-item-class'],
|
externalClasses: ['l-class', 'l-item-class'],
|
||||||
properties: {
|
properties: {
|
||||||
|
|
@ -155,7 +156,7 @@ export default OakComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async onWebPick(uploadFiles: any[]) {
|
async onWebPick(uploadFiles: any[], callback?: (file: any) => void) {
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
uploadFiles.map(async (uploadFile) => {
|
uploadFiles.map(async (uploadFile) => {
|
||||||
const { name, type: fileType, size, raw } = uploadFile;
|
const { name, type: fileType, size, raw } = uploadFile;
|
||||||
|
|
@ -164,7 +165,7 @@ export default OakComponent({
|
||||||
fileType,
|
fileType,
|
||||||
size,
|
size,
|
||||||
extra1: raw,
|
extra1: raw,
|
||||||
});
|
}, callback);
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
@ -173,7 +174,7 @@ export default OakComponent({
|
||||||
extra1: any;
|
extra1: any;
|
||||||
fileType: string;
|
fileType: string;
|
||||||
size: number;
|
size: number;
|
||||||
}) {
|
}, callback?: (file:any) => void) {
|
||||||
const { type, origin, tag1, tag2, entity, entityId, autoUpload } = this.props;
|
const { type, origin, tag1, tag2, entity, entityId, autoUpload } = this.props;
|
||||||
const { name, extra1, fileType, size } = options;
|
const { name, extra1, fileType, size } = options;
|
||||||
const extension = name.substring(name.lastIndexOf('.') + 1);
|
const extension = name.substring(name.lastIndexOf('.') + 1);
|
||||||
|
|
@ -206,6 +207,9 @@ export default OakComponent({
|
||||||
entityId,
|
entityId,
|
||||||
});
|
});
|
||||||
await this.addExtraFile(updateData);
|
await this.addExtraFile(updateData);
|
||||||
|
if (callback) {
|
||||||
|
callback(updateData);
|
||||||
|
};
|
||||||
const ele: Parameters<typeof this['pushNode']>[1] = {
|
const ele: Parameters<typeof this['pushNode']>[1] = {
|
||||||
updateData,
|
updateData,
|
||||||
};
|
};
|
||||||
|
|
@ -232,6 +236,18 @@ export default OakComponent({
|
||||||
this.pushNode(undefined, ele);
|
this.pushNode(undefined, ele);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setNewUploadFiles(file: any) {
|
||||||
|
const { filename, size, id } = file;
|
||||||
|
const { newUploadFiles } = this.state;
|
||||||
|
const file2 = newUploadFiles.find((ele: any) => ele.filename = filename && ele.size === size) as any;
|
||||||
|
Object.assign(file2, {
|
||||||
|
status: 'success',
|
||||||
|
id,
|
||||||
|
})
|
||||||
|
this.setState({
|
||||||
|
newUploadFiles: [...newUploadFiles],
|
||||||
|
})
|
||||||
|
},
|
||||||
async onItemTapped(event: WechatMiniprogram.Touch) {
|
async onItemTapped(event: WechatMiniprogram.Touch) {
|
||||||
const { files, systemConfig } = this.state;
|
const { files, systemConfig } = this.state;
|
||||||
const { index } = event.currentTarget.dataset;
|
const { index } = event.currentTarget.dataset;
|
||||||
|
|
@ -243,7 +259,7 @@ export default OakComponent({
|
||||||
const detail = {
|
const detail = {
|
||||||
all: files,
|
all: files,
|
||||||
index,
|
index,
|
||||||
urls: urls,
|
urls,
|
||||||
current: imageUrl,
|
current: imageUrl,
|
||||||
};
|
};
|
||||||
this.triggerEvent('tap', detail);
|
this.triggerEvent('tap', detail);
|
||||||
|
|
@ -272,6 +288,14 @@ export default OakComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
async customDelete(index: number) {
|
||||||
|
const { newUploadFiles } = this.state;
|
||||||
|
const arr = [...newUploadFiles];
|
||||||
|
arr.splice(index, 1);
|
||||||
|
this.setState({
|
||||||
|
newUploadFiles: arr,
|
||||||
|
})
|
||||||
|
},
|
||||||
async onWebDelete(value: any, index: number) {
|
async onWebDelete(value: any, index: number) {
|
||||||
const { id } = value;
|
const { id } = value;
|
||||||
if (isMockId(id)) {
|
if (isMockId(id)) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
|
||||||
|
{
|
||||||
|
"waiting": "等待中",
|
||||||
|
"success": "上传成功",
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Upload, UploadFile } from 'tdesign-react';
|
import { Space, Upload, UploadFile, Table, Button } from 'tdesign-react';
|
||||||
import { composeFileUrl } from '../../../utils/extraFile';
|
import { composeFileUrl, bytesToSize } from '../../../utils/extraFile';
|
||||||
|
|
||||||
function extraFileToUploadFile(extraFile: any, systemConfig: any) {
|
function extraFileToUploadFile(extraFile: any, systemConfig: any) {
|
||||||
return Object.assign({}, extraFile, {
|
return Object.assign({}, extraFile, {
|
||||||
|
|
@ -30,9 +30,10 @@ export default function render(this: any) {
|
||||||
className,
|
className,
|
||||||
sizeLimit,
|
sizeLimit,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const { files, systemConfig } = this.state;
|
const { files, systemConfig, newUploadFiles } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Space direction="vertical">
|
||||||
<Upload
|
<Upload
|
||||||
sizeLimit={sizeLimit}
|
sizeLimit={sizeLimit}
|
||||||
className={className}
|
className={className}
|
||||||
|
|
@ -49,18 +50,107 @@ export default function render(this: any) {
|
||||||
accept={mediaType}
|
accept={mediaType}
|
||||||
showUploadProgress={showUploadProgress}
|
showUploadProgress={showUploadProgress}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
files={(files || []).map((ele: any) =>
|
files={theme === 'custom' ? [] : (files || []).map((ele: any) =>
|
||||||
extraFileToUploadFile(ele, systemConfig)
|
extraFileToUploadFile(ele, systemConfig)
|
||||||
)}
|
)}
|
||||||
onChange={(uploadFiles) => {
|
onChange={(uploadFiles) => {
|
||||||
const newUploadFiles =
|
const arr =
|
||||||
uploadFiles?.filter((ele: ExtraFile) => !ele.id) || [];
|
uploadFiles?.filter((ele: ExtraFile) => !ele.id) || [];
|
||||||
this.onWebPick(newUploadFiles);
|
this.setState({
|
||||||
|
newUploadFiles: arr,
|
||||||
|
})
|
||||||
|
if (theme !== 'custom') {
|
||||||
|
this.onWebPick(arr);
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
onRemove={({ file, index, e }) => {
|
onRemove={({ file, index, e }) => {
|
||||||
this.onWebDelete(file, index);
|
this.onWebDelete(file, index);
|
||||||
}}
|
}}
|
||||||
onPreview={({ file, e }) => {}}
|
onPreview={({ file, e }) => {}}
|
||||||
|
>
|
||||||
|
{theme === 'custom' && (
|
||||||
|
<Button variant="outline" theme="default">选择文件</Button>
|
||||||
|
)}
|
||||||
|
</Upload>
|
||||||
|
{theme === 'custom' && (
|
||||||
|
<>
|
||||||
|
<Table
|
||||||
|
data={newUploadFiles || []}
|
||||||
|
rowKey="id"
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
align: 'center',
|
||||||
|
colKey: 'tableIndex',
|
||||||
|
title: '序号',
|
||||||
|
cell: ({row, rowIndex}) => rowIndex + 1,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
colKey: 'name',
|
||||||
|
title: '文件名',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
colKey: 'size',
|
||||||
|
title: '文件大小',
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const b = row?.size / 1024;
|
||||||
|
return bytesToSize(b)
|
||||||
|
},
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
colKey: 'status',
|
||||||
|
title: '状态',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
colKey: 'op',
|
||||||
|
width: 300,
|
||||||
|
title: '操作',
|
||||||
|
align: 'center',
|
||||||
|
cell: ({ row, rowIndex }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{!row.id && (
|
||||||
|
<Button
|
||||||
|
theme="primary"
|
||||||
|
variant="text"
|
||||||
|
onClick={() => {
|
||||||
|
this.customDelete(rowIndex);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
fixed: 'right',
|
||||||
|
},
|
||||||
|
]}
|
||||||
/>
|
/>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
|
<Space>
|
||||||
|
<Button theme="default" onClick={() => {
|
||||||
|
this.setState({
|
||||||
|
newUploadFiles: [],
|
||||||
|
})
|
||||||
|
}}>
|
||||||
|
全部清空
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
this.onWebPick(newUploadFiles, (file: any) => {
|
||||||
|
this.setNewUploadFiles(file);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
上传
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -71,3 +71,19 @@ export function getFileURL(file: File) {
|
||||||
}
|
}
|
||||||
return getUrl;
|
return getUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function bytesToSize(sizes: any) {
|
||||||
|
let mYsize = sizes;
|
||||||
|
if (mYsize === 0) return 0 + 'B';
|
||||||
|
if (mYsize < 0.1) { // 小于0.1KB转换为B
|
||||||
|
mYsize = parseFloat((mYsize * 1024).toFixed(2)) + 'B'
|
||||||
|
} else if (mYsize > (0.1 * 1024)) { // 大于0.1MB转换为MB
|
||||||
|
mYsize = parseFloat((mYsize / 1024).toFixed(2)) + 'MB'
|
||||||
|
} else if (mYsize > (0.1 * 1024 * 1024)) {// 大于0.1GB转换为GB
|
||||||
|
mYsize = parseFloat((mYsize / 1024 / 1024).toFixed(2)) + 'GB'
|
||||||
|
} else {
|
||||||
|
mYsize = (mYsize).toFixed(2) + 'KB'
|
||||||
|
}
|
||||||
|
|
||||||
|
return mYsize;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue