This commit is contained in:
梁朝伟 2022-09-02 14:37:59 +08:00
parent b7f559e88f
commit 6d6911a2ef
10 changed files with 301 additions and 54 deletions

View File

@ -41,6 +41,7 @@ exports.default = OakComponent({
selected: -1,
// 根据 size 不同,计算的图片显示大小不同
itemSizePercentage: '',
newUploadFiles: [],
},
externalClasses: ['l-class', 'l-item-class'],
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 () {
var _this = this;
return tslib_1.__generator(this, function (_a) {
@ -199,7 +200,7 @@ exports.default = OakComponent({
fileType: fileType,
size: size,
extra1: raw,
});
}, callback);
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 () {
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;
@ -264,6 +265,10 @@ exports.default = OakComponent({
return [4 /*yield*/, this.addExtraFile(updateData)];
case 6:
_g.sent();
if (callback) {
callback(updateData);
}
;
ele = {
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) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
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) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var id, confirm_2;

View File

@ -0,0 +1,4 @@
{
"waiting": "等待中",
"success": "上传成功"
}

View File

@ -1,5 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var tdesign_react_1 = require("tdesign-react");
var extraFile_1 = require("../../../utils/extraFile");
@ -12,17 +13,73 @@ function extraFileToUploadFile(extraFile, systemConfig) {
function render() {
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 _h = this.state, files = _h.files, systemConfig = _h.systemConfig;
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 extraFileToUploadFile(ele, systemConfig);
}), onChange: function (uploadFiles) {
var newUploadFiles = (uploadFiles === null || uploadFiles === void 0 ? void 0 : uploadFiles.filter(function (ele) { return !ele.id; })) || [];
_this.onWebPick(newUploadFiles);
}, onRemove: function (_a) {
var file = _a.file, index = _a.index, e = _a.e;
_this.onWebDelete(file, index);
}, onPreview: function (_a) {
var file = _a.file, e = _a.e;
} }));
var _h = this.state, files = _h.files, systemConfig = _h.systemConfig, newUploadFiles = _h.newUploadFiles;
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);
}), onChange: function (uploadFiles) {
var arr = (uploadFiles === null || uploadFiles === void 0 ? void 0 : uploadFiles.filter(function (ele) { return !ele.id; })) || [];
_this.setState({
newUploadFiles: arr,
});
if (theme !== 'custom') {
_this.onWebPick(arr);
}
}, onRemove: function (_a) {
var file = _a.file, index = _a.index, e = _a.e;
_this.onWebDelete(file, index);
}, onPreview: function (_a) {
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;

View File

@ -27,8 +27,8 @@ export declare type Schema = {
user: User.Schema;
role: Role.Schema;
} & {
[A in ExpressionKey]?: any;
};
[A in ExpressionKey]?: any;
};
declare type AttrFilter = {
id: Q_StringValue | SubQuery.UserRoleIdSubQuery;
$$createAt$$: Q_DateValue;
@ -155,4 +155,4 @@ export declare type EntityDef = {
CreateSingle: CreateSingleOperation;
CreateMulti: CreateMultipleOperation;
};
export {};
export { };

View File

@ -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 decomposeFileUrl(url: string): Pick<ExtraFile, 'bucket' | 'filename' | 'origin' | 'type' | 'extra1'>;
export declare function getFileURL(file: File): any;
export declare function bytesToSize(sizes: any): any;

View File

@ -1,6 +1,6 @@
"use strict";
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) {
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) {
@ -58,3 +58,22 @@ function getFileURL(file) {
return getUrl;
}
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;

View File

@ -31,6 +31,7 @@ export default OakComponent({
selected: -1,
// 根据 size 不同,计算的图片显示大小不同
itemSizePercentage: '',
newUploadFiles: [],
},
externalClasses: ['l-class', 'l-item-class'],
properties: {
@ -155,7 +156,7 @@ export default OakComponent({
}
}
},
async onWebPick(uploadFiles: any[]) {
async onWebPick(uploadFiles: any[], callback?: (file: any) => void) {
await Promise.all(
uploadFiles.map(async (uploadFile) => {
const { name, type: fileType, size, raw } = uploadFile;
@ -164,7 +165,7 @@ export default OakComponent({
fileType,
size,
extra1: raw,
});
}, callback);
})
);
},
@ -173,7 +174,7 @@ export default OakComponent({
extra1: any;
fileType: string;
size: number;
}) {
}, callback?: (file:any) => void) {
const { type, origin, tag1, tag2, entity, entityId, autoUpload } = this.props;
const { name, extra1, fileType, size } = options;
const extension = name.substring(name.lastIndexOf('.') + 1);
@ -206,6 +207,9 @@ export default OakComponent({
entityId,
});
await this.addExtraFile(updateData);
if (callback) {
callback(updateData);
};
const ele: Parameters<typeof this['pushNode']>[1] = {
updateData,
};
@ -232,6 +236,18 @@ export default OakComponent({
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) {
const { files, systemConfig } = this.state;
const { index } = event.currentTarget.dataset;
@ -243,7 +259,7 @@ export default OakComponent({
const detail = {
all: files,
index,
urls: urls,
urls,
current: imageUrl,
};
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) {
const { id } = value;
if (isMockId(id)) {

View File

@ -0,0 +1,5 @@
{
"waiting": "等待中",
"success": "上传成功",
}

View File

@ -1,6 +1,6 @@
import React from 'react';
import { Upload, UploadFile } from 'tdesign-react';
import { composeFileUrl } from '../../../utils/extraFile';
import { Space, Upload, UploadFile, Table, Button } from 'tdesign-react';
import { composeFileUrl, bytesToSize } from '../../../utils/extraFile';
function extraFileToUploadFile(extraFile: any, systemConfig: any) {
return Object.assign({}, extraFile, {
@ -30,37 +30,127 @@ export default function render(this: any) {
className,
sizeLimit,
} = this.props;
const { files, systemConfig } = this.state;
const { files, systemConfig, newUploadFiles } = this.state;
return (
<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((ele: any) =>
extraFileToUploadFile(ele, systemConfig)
<Space direction="vertical">
<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={theme === 'custom' ? [] : (files || []).map((ele: any) =>
extraFileToUploadFile(ele, systemConfig)
)}
onChange={(uploadFiles) => {
const arr =
uploadFiles?.filter((ele: ExtraFile) => !ele.id) || [];
this.setState({
newUploadFiles: arr,
})
if (theme !== 'custom') {
this.onWebPick(arr);
}
}}
onRemove={({ file, index, e }) => {
this.onWebDelete(file, index);
}}
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>
</>
)}
onChange={(uploadFiles) => {
const newUploadFiles =
uploadFiles?.filter((ele: ExtraFile) => !ele.id) || [];
this.onWebPick(newUploadFiles);
}}
onRemove={({ file, index, e }) => {
this.onWebDelete(file, index);
}}
onPreview={({ file, e }) => {}}
/>
</Space>
);
}

View File

@ -70,4 +70,20 @@ export function getFileURL(file: File) {
getUrl = window.webkitURL.createObjectURL(file);
}
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;
}