fix

lib/components/extraFile/gallery/index.js

@@ -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;

lib/components/extraFile/gallery/locales/zh_CN.json

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

lib/components/extraFile/gallery/web.js

@@ -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;
+    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);
                 }), 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) {
                     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;

lib/utils/extraFile.d.ts

@@ -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;

lib/utils/extraFile.js

@@ -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;

src/components/extraFile/gallery/index.ts

@@ -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)) {

src/components/extraFile/gallery/locales/zh_CN.json

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

src/components/extraFile/gallery/web.tsx

@@ -1,6 +1,6 @@
 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) {
     return Object.assign({}, extraFile, {
@@ -30,9 +30,10 @@ export default function render(this: any) {
         className,
         sizeLimit,
     } = this.props;
-    const { files, systemConfig } = this.state;
+    const { files, systemConfig, newUploadFiles } = this.state;
 
     return (
+        <Space direction="vertical">
             <Upload
                 sizeLimit={sizeLimit}
                 className={className}
@@ -49,18 +50,107 @@ export default function render(this: any) {
                 accept={mediaType}
                 showUploadProgress={showUploadProgress}
                 theme={theme}
-            files={(files || []).map((ele: any) =>
+                files={theme === 'custom' ? [] : (files || []).map((ele: any) =>
                     extraFileToUploadFile(ele, systemConfig)
                 )}
                 onChange={(uploadFiles) => {
-                const newUploadFiles =
+                    const arr =
                         uploadFiles?.filter((ele: ExtraFile) => !ele.id) || [];
-                this.onWebPick(newUploadFiles);
+                    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>
+                </>
+            )}
+        </Space>
     );
 }

src/utils/extraFile.ts

@@ -71,3 +71,19 @@ export function getFileURL(file: 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;
+}