diff --git a/es/components/extraFile/commit/index.d.ts b/es/components/extraFile/commit/index.d.ts index e7ce30865..8a9d10b05 100644 --- a/es/components/extraFile/commit/index.d.ts +++ b/es/components/extraFile/commit/index.d.ts @@ -7,6 +7,6 @@ declare const _default: (props: import("oak-frontend-base").ReactComponentProps< type: string; executeText: string; buttonProps: {}; - afterCommit: () => undefined; + afterCommit: () => void; }>) => import("react").ReactElement>; export default _default; diff --git a/es/components/extraFile/commit/index.js b/es/components/extraFile/commit/index.js index eee180f9c..99eda6de8 100644 --- a/es/components/extraFile/commit/index.js +++ b/es/components/extraFile/commit/index.js @@ -25,7 +25,7 @@ export default OakComponent({ type: 'primary', executeText: '', buttonProps: {}, - afterCommit: () => undefined, + afterCommit: () => { }, }, methods: { getEfIds() { diff --git a/es/components/extraFile/forUrl/index.js b/es/components/extraFile/forUrl/index.js index ddfbcd0e5..c1dbc1596 100644 --- a/es/components/extraFile/forUrl/index.js +++ b/es/components/extraFile/forUrl/index.js @@ -163,7 +163,6 @@ export default OakComponent({ type: 'image', tag1, tag2, - objectId: generateNewId(), bucket: '', id: generateNewId(), }; diff --git a/es/components/extraFile/upload/index.js b/es/components/extraFile/upload/index.js index d9c5185de..72fc85967 100644 --- a/es/components/extraFile/upload/index.js +++ b/es/components/extraFile/upload/index.js @@ -97,7 +97,9 @@ export default OakComponent({ }, features: ['extraFile2'], formData({ data, features }) { - const files = data.map((ele) => { + const files = data + ?.sort((ele1, ele2) => ele1.sort - ele2.sort) + .map((ele) => { const url = features.extraFile2.getUrl(ele); const thumbUrl = features.extraFile2.getUrl(ele, 'thumbnail'); const fileState = features.extraFile2.getFileState(ele.id); @@ -270,5 +272,17 @@ export default OakComponent({ this.triggerEvent('onPreview', detail); } }, + //检查排序是否超过上限 + checkSort(sort) { + const reg = /^\d+\.(?:9+)$/; + if (reg.test(sort.toString())) { + this.setMessage({ + type: 'warning', + content: this.t('dragSort'), + }); + return false; + } + return true; + }, }, }); diff --git a/es/components/extraFile/upload/locales/zh-CN.json b/es/components/extraFile/upload/locales/zh-CN.json index b62b4ff66..7ad006a46 100644 --- a/es/components/extraFile/upload/locales/zh-CN.json +++ b/es/components/extraFile/upload/locales/zh-CN.json @@ -1,4 +1,5 @@ { "choosePicture": "请选择图片", - "chooseFile": "请选择文件" + "chooseFile": "请选择文件", + "dragSort": "当前拖拽排序值超过上限范围" } diff --git a/es/components/extraFile/upload/web.d.ts b/es/components/extraFile/upload/web.d.ts index b097c7c00..6f74f1de5 100644 --- a/es/components/extraFile/upload/web.d.ts +++ b/es/components/extraFile/upload/web.d.ts @@ -25,4 +25,5 @@ export default function render(props: WebComponentProps void; addFileByWeb: (file: UploadFile) => void; + checkSort: (sort: number) => boolean; }>): import("react/jsx-runtime").JSX.Element; diff --git a/es/components/extraFile/upload/web.js b/es/components/extraFile/upload/web.js index f5a922d68..b02617cc7 100644 --- a/es/components/extraFile/upload/web.js +++ b/es/components/extraFile/upload/web.js @@ -48,14 +48,14 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList, }) => { return (_jsx("div", { ref: ref, className: `ant-upload-draggable-list-item ${isOver ? dropClassName : ""}`, style: { cursor: "move", height: "100%" }, children: originNode })); }; export default function render(props) { - const { accept = "image/*", maxNumber = 20, multiple = maxNumber !== 1, draggable = false, theme = "image", tips, beforeUpload, style, className, directory = false, onPreview, onDownload, children, showUploadList = true, files = [], disableInsert = false, disableDownload = false, disableDelete = false, disablePreview = false, } = props.data; - const { t, onRemove, addFileByWeb } = props.methods; + const { accept = 'image/*', maxNumber = 20, multiple = maxNumber !== 1, draggable = false, theme = 'image', tips, beforeUpload, style, className, directory = false, onPreview, onDownload, children, showUploadList = true, files = [], disableInsert = false, disableDownload = false, disableDelete = false, disablePreview = false, } = props.data; + const { t, updateItem, onRemove, addFileByWeb, checkSort } = props.methods; const listType = getListType(theme); const getUploadButton = () => { if (children) { return children; } - if (listType === "picture-card") { + if (listType === 'picture-card') { return (_jsxs("div", { children: [_jsx(PlusOutlined, {}), _jsx("div", { style: { marginTop: 8 }, children: t('choosePicture') })] })); } return _jsx(Button, { type: "default", children: t('chooseFile') }); @@ -114,7 +114,36 @@ export default function render(props) { }); }; const moveRow = useCallback((dragIndex, hoverIndex) => { - console.log('dragIndex', dragIndex, 'hoverIndex', hoverIndex); + const dragRow = files[dragIndex]; + let sort; + if (hoverIndex === dragIndex) { + return; + } + else if (hoverIndex > dragIndex) { + if (hoverIndex === files.length - 1) { + sort = files[hoverIndex].sort + 100; + } + else { + sort = + (files[hoverIndex].sort + + files[hoverIndex + 1].sort) / + 2; + } + } + else { + if (hoverIndex === 0) { + sort = files[hoverIndex].sort / 2; + } + else { + sort = + (files[hoverIndex].sort + + files[hoverIndex - 1].sort) / + 2; + } + } + if (checkSort(sort)) { + updateItem({ sort }, dragRow.id); + } }, [files]); return (_jsxs(Space, { direction: "vertical", className: Style['oak-upload'], style: { width: '100%' }, children: [_jsx(DndProvider, { backend: isPc ? HTML5Backend : TouchBackend, children: _jsx(Upload, { className: classNames(Style['oak-upload__upload'], className), style: style, directory: directory, showUploadList: showUploadList ? { diff --git a/es/data/i18n.js b/es/data/i18n.js index 0f6376476..e7bfb659f 100644 --- a/es/data/i18n.js +++ b/es/data/i18n.js @@ -203,7 +203,8 @@ const i18ns = [ position: "src/components/extraFile/upload", data: { "choosePicture": "请选择图片", - "chooseFile": "请选择文件" + "chooseFile": "请选择文件", + "dragSort": "当前拖拽排序值超过上限范围" } }, { diff --git a/lib/components/extraFile/commit/index.d.ts b/lib/components/extraFile/commit/index.d.ts index e7ce30865..8a9d10b05 100644 --- a/lib/components/extraFile/commit/index.d.ts +++ b/lib/components/extraFile/commit/index.d.ts @@ -7,6 +7,6 @@ declare const _default: (props: import("oak-frontend-base").ReactComponentProps< type: string; executeText: string; buttonProps: {}; - afterCommit: () => undefined; + afterCommit: () => void; }>) => import("react").ReactElement>; export default _default; diff --git a/lib/components/extraFile/commit/index.js b/lib/components/extraFile/commit/index.js index 5ab4d2cd4..ff1826a46 100644 --- a/lib/components/extraFile/commit/index.js +++ b/lib/components/extraFile/commit/index.js @@ -28,7 +28,7 @@ exports.default = OakComponent({ type: 'primary', executeText: '', buttonProps: {}, - afterCommit: () => undefined, + afterCommit: () => { }, }, methods: { getEfIds() { diff --git a/lib/components/extraFile/forUrl/index.js b/lib/components/extraFile/forUrl/index.js index c7785f41b..77f1be97c 100644 --- a/lib/components/extraFile/forUrl/index.js +++ b/lib/components/extraFile/forUrl/index.js @@ -165,7 +165,6 @@ exports.default = OakComponent({ type: 'image', tag1, tag2, - objectId: (0, uuid_1.generateNewId)(), bucket: '', id: (0, uuid_1.generateNewId)(), }; diff --git a/lib/components/extraFile/upload/index.js b/lib/components/extraFile/upload/index.js index 7d14b53a3..19853f8f4 100644 --- a/lib/components/extraFile/upload/index.js +++ b/lib/components/extraFile/upload/index.js @@ -99,7 +99,9 @@ exports.default = OakComponent({ }, features: ['extraFile2'], formData({ data, features }) { - const files = data.map((ele) => { + const files = data + ?.sort((ele1, ele2) => ele1.sort - ele2.sort) + .map((ele) => { const url = features.extraFile2.getUrl(ele); const thumbUrl = features.extraFile2.getUrl(ele, 'thumbnail'); const fileState = features.extraFile2.getFileState(ele.id); @@ -272,5 +274,17 @@ exports.default = OakComponent({ this.triggerEvent('onPreview', detail); } }, + //检查排序是否超过上限 + checkSort(sort) { + const reg = /^\d+\.(?:9+)$/; + if (reg.test(sort.toString())) { + this.setMessage({ + type: 'warning', + content: this.t('dragSort'), + }); + return false; + } + return true; + }, }, }); diff --git a/lib/components/extraFile/upload/locales/zh-CN.json b/lib/components/extraFile/upload/locales/zh-CN.json index b62b4ff66..7ad006a46 100644 --- a/lib/components/extraFile/upload/locales/zh-CN.json +++ b/lib/components/extraFile/upload/locales/zh-CN.json @@ -1,4 +1,5 @@ { "choosePicture": "请选择图片", - "chooseFile": "请选择文件" + "chooseFile": "请选择文件", + "dragSort": "当前拖拽排序值超过上限范围" } diff --git a/lib/components/extraFile/upload/web.d.ts b/lib/components/extraFile/upload/web.d.ts index b097c7c00..6f74f1de5 100644 --- a/lib/components/extraFile/upload/web.d.ts +++ b/lib/components/extraFile/upload/web.d.ts @@ -25,4 +25,5 @@ export default function render(props: WebComponentProps void; addFileByWeb: (file: UploadFile) => void; + checkSort: (sort: number) => boolean; }>): import("react/jsx-runtime").JSX.Element; diff --git a/lib/components/extraFile/upload/web.js b/lib/components/extraFile/upload/web.js index e5c6cc3f8..a51e7d198 100644 --- a/lib/components/extraFile/upload/web.js +++ b/lib/components/extraFile/upload/web.js @@ -51,14 +51,14 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList, }) => { return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: `ant-upload-draggable-list-item ${isOver ? dropClassName : ""}`, style: { cursor: "move", height: "100%" }, children: originNode })); }; function render(props) { - const { accept = "image/*", maxNumber = 20, multiple = maxNumber !== 1, draggable = false, theme = "image", tips, beforeUpload, style, className, directory = false, onPreview, onDownload, children, showUploadList = true, files = [], disableInsert = false, disableDownload = false, disableDelete = false, disablePreview = false, } = props.data; - const { t, onRemove, addFileByWeb } = props.methods; + const { accept = 'image/*', maxNumber = 20, multiple = maxNumber !== 1, draggable = false, theme = 'image', tips, beforeUpload, style, className, directory = false, onPreview, onDownload, children, showUploadList = true, files = [], disableInsert = false, disableDownload = false, disableDelete = false, disablePreview = false, } = props.data; + const { t, updateItem, onRemove, addFileByWeb, checkSort } = props.methods; const listType = getListType(theme); const getUploadButton = () => { if (children) { return children; } - if (listType === "picture-card") { + if (listType === 'picture-card') { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 8 }, children: t('choosePicture') })] })); } return (0, jsx_runtime_1.jsx)(antd_1.Button, { type: "default", children: t('chooseFile') }); @@ -117,7 +117,36 @@ function render(props) { }); }; const moveRow = (0, react_1.useCallback)((dragIndex, hoverIndex) => { - console.log('dragIndex', dragIndex, 'hoverIndex', hoverIndex); + const dragRow = files[dragIndex]; + let sort; + if (hoverIndex === dragIndex) { + return; + } + else if (hoverIndex > dragIndex) { + if (hoverIndex === files.length - 1) { + sort = files[hoverIndex].sort + 100; + } + else { + sort = + (files[hoverIndex].sort + + files[hoverIndex + 1].sort) / + 2; + } + } + else { + if (hoverIndex === 0) { + sort = files[hoverIndex].sort / 2; + } + else { + sort = + (files[hoverIndex].sort + + files[hoverIndex - 1].sort) / + 2; + } + } + if (checkSort(sort)) { + updateItem({ sort }, dragRow.id); + } }, [files]); return ((0, jsx_runtime_1.jsxs)(antd_1.Space, { direction: "vertical", className: web_module_less_1.default['oak-upload'], style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: utils_1.isPc ? react_dnd_html5_backend_1.HTML5Backend : react_dnd_touch_backend_1.TouchBackend, children: (0, jsx_runtime_1.jsx)(antd_1.Upload, { className: (0, classnames_1.default)(web_module_less_1.default['oak-upload__upload'], className), style: style, directory: directory, showUploadList: showUploadList ? { diff --git a/lib/data/i18n.js b/lib/data/i18n.js index 7c409bd99..9efcc5caf 100644 --- a/lib/data/i18n.js +++ b/lib/data/i18n.js @@ -205,7 +205,8 @@ const i18ns = [ position: "src/components/extraFile/upload", data: { "choosePicture": "请选择图片", - "chooseFile": "请选择文件" + "chooseFile": "请选择文件", + "dragSort": "当前拖拽排序值超过上限范围" } }, { diff --git a/src/components/extraFile/commit/index.ts b/src/components/extraFile/commit/index.ts index 4cc0e4e3b..d66426848 100644 --- a/src/components/extraFile/commit/index.ts +++ b/src/components/extraFile/commit/index.ts @@ -32,7 +32,7 @@ export default OakComponent({ type: 'primary', executeText: '', buttonProps: {}, - afterCommit: () => undefined, + afterCommit: () => {}, }, methods: { getEfIds() { diff --git a/src/components/extraFile/forUrl/index.ts b/src/components/extraFile/forUrl/index.ts index 57e86cbf7..544b58fa8 100644 --- a/src/components/extraFile/forUrl/index.ts +++ b/src/components/extraFile/forUrl/index.ts @@ -172,7 +172,6 @@ export default OakComponent({ type: 'image', tag1, tag2, - objectId: generateNewId(), bucket: '', id: generateNewId(), } as EntityDict['extraFile']['CreateSingle']['data']; diff --git a/src/components/extraFile/upload/index.ts b/src/components/extraFile/upload/index.ts index e0c0b15f6..40aff4e93 100644 --- a/src/components/extraFile/upload/index.ts +++ b/src/components/extraFile/upload/index.ts @@ -123,23 +123,27 @@ export default OakComponent({ }, features: ['extraFile2'], formData({ data, features }) { - const files = data.map((ele) => { - const url = features.extraFile2.getUrl(ele as ExtraFile); - const thumbUrl = features.extraFile2.getUrl( - ele as ExtraFile, - 'thumbnail' - ); - const fileState = features.extraFile2.getFileState(ele.id!); - const filename = features.extraFile2.getFileName(ele as ExtraFile); - return { - url, - thumbUrl, - filename, - fileState: fileState?.state, - percentage: fileState?.percentage, - ...ele, - } as EnhancedExtraFile; - }); + const files = data + ?.sort((ele1, ele2) => ele1.sort! - ele2.sort!) + .map((ele) => { + const url = features.extraFile2.getUrl(ele as ExtraFile); + const thumbUrl = features.extraFile2.getUrl( + ele as ExtraFile, + 'thumbnail' + ); + const fileState = features.extraFile2.getFileState(ele.id!); + const filename = features.extraFile2.getFileName( + ele as ExtraFile + ); + return { + url, + thumbUrl, + filename, + fileState: fileState?.state, + percentage: fileState?.percentage, + ...ele, + } as EnhancedExtraFile; + }); return { files, }; @@ -326,6 +330,19 @@ export default OakComponent({ this.triggerEvent('onPreview', detail); } }, + + //检查排序是否超过上限 + checkSort(sort: number) { + const reg = /^\d+\.(?:9+)$/; + if (reg.test(sort.toString())) { + this.setMessage({ + type: 'warning', + content: this.t('dragSort'), + }); + return false; + } + return true; + }, }, }) as ( props: ReactComponentProps< diff --git a/src/components/extraFile/upload/locales/zh-CN.json b/src/components/extraFile/upload/locales/zh-CN.json index e692b45be..8e58177c6 100644 --- a/src/components/extraFile/upload/locales/zh-CN.json +++ b/src/components/extraFile/upload/locales/zh-CN.json @@ -1,4 +1,5 @@ { "choosePicture": "请选择图片", - "chooseFile": "请选择文件" + "chooseFile": "请选择文件", + "dragSort": "当前拖拽排序值超过上限范围" } \ No newline at end of file diff --git a/src/components/extraFile/upload/web.tsx b/src/components/extraFile/upload/web.tsx index a9f486f5a..5baa4f77b 100644 --- a/src/components/extraFile/upload/web.tsx +++ b/src/components/extraFile/upload/web.tsx @@ -69,37 +69,45 @@ const DragableUploadListItem = ({ ); }; -export default function render(props: WebComponentProps< - EntityDict, 'extraFile', true, { - files: EnhancedExtraFile[]; - accept?: string; - maxNumber?: number; - multiple?: boolean; - draggable?: boolean; - theme?: Theme; - tips?: string; - beforeUpload?: (file: File) => Promise; - style?: Record; - className?: string; - directory?: boolean; - onPreview?: (file: UploadFile) => void; - onDownload?: (file: UploadFile) => void; - showUploadList?: boolean; - children?: JSX.Element; - disableInsert?: boolean; - disableDownload?: boolean; - disableDelete?: boolean; - disablePreview?: boolean; - }, { - onRemove: (file: UploadFile) => void; - addFileByWeb: (file: UploadFile) => void; - }>) { +export default function render( + props: WebComponentProps< + EntityDict, + 'extraFile', + true, + { + files: EnhancedExtraFile[]; + accept?: string; + maxNumber?: number; + multiple?: boolean; + draggable?: boolean; + theme?: Theme; + tips?: string; + beforeUpload?: (file: File) => Promise; + style?: Record; + className?: string; + directory?: boolean; + onPreview?: (file: UploadFile) => void; + onDownload?: (file: UploadFile) => void; + showUploadList?: boolean; + children?: JSX.Element; + disableInsert?: boolean; + disableDownload?: boolean; + disableDelete?: boolean; + disablePreview?: boolean; + }, + { + onRemove: (file: UploadFile) => void; + addFileByWeb: (file: UploadFile) => void; + checkSort: (sort: number) => boolean; + } + > +) { const { - accept = "image/*", + accept = 'image/*', maxNumber = 20, multiple = maxNumber !== 1, draggable = false, - theme = "image", + theme = 'image', tips, beforeUpload, style, @@ -116,14 +124,14 @@ export default function render(props: WebComponentProps< disablePreview = false, } = props.data; - const { t, onRemove, addFileByWeb } = props.methods; + const { t, updateItem, onRemove, addFileByWeb, checkSort } = props.methods; const listType = getListType(theme); const getUploadButton = () => { if (children) { return children; } - if (listType === "picture-card") { + if (listType === 'picture-card') { return (
@@ -134,65 +142,87 @@ export default function render(props: WebComponentProps< return ; }; - const transformToUploadFile: () => (EnhancedExtraFile & UploadFile)[] = () => { - return files.map( - (file) => { - let status = undefined as UploadFile['status']; - if (file.$$deleteAt$$) { - status = 'removed'; - } - else if (file.fileState) { - switch (file.fileState) { - case 'failed': { - status = 'error'; - break; - } - case 'local': { - break; - } - case 'uploaded': { - status = 'done'; - break; - } - case 'uploading': { - status = 'uploading'; - break; - } - default: { - break; - } + const transformToUploadFile: () => (EnhancedExtraFile & + UploadFile)[] = () => { + return files.map((file) => { + let status = undefined as UploadFile['status']; + if (file.$$deleteAt$$) { + status = 'removed'; + } else if (file.fileState) { + switch (file.fileState) { + case 'failed': { + status = 'error'; + break; + } + case 'local': { + break; + } + case 'uploaded': { + status = 'done'; + break; + } + case 'uploading': { + status = 'uploading'; + break; + } + default: { + break; } } - else { - switch (file.uploadState) { - case 'uploading': { - status = 'uploading'; - break; - } - case 'failed': { - status = 'error'; - break; - } - case 'success': { - status = 'done'; - break; - } + } else { + switch (file.uploadState) { + case 'uploading': { + status = 'uploading'; + break; + } + case 'failed': { + status = 'error'; + break; + } + case 'success': { + status = 'done'; + break; } } - return { - ...file, - status, - name: file.filename, - uid: file.id, - size: file.size!, - }; } - ); + return { + ...file, + status, + name: file.filename, + uid: file.id, + size: file.size!, + }; + }); }; const moveRow = useCallback( (dragIndex: number, hoverIndex: number) => { - console.log('dragIndex', dragIndex, 'hoverIndex', hoverIndex); + const dragRow = files[dragIndex]; + let sort; + if (hoverIndex === dragIndex) { + return; + } else if (hoverIndex > dragIndex) { + if (hoverIndex === files.length - 1) { + sort = files[hoverIndex]!.sort! + 100; + } else { + sort = + (files[hoverIndex]!.sort! + + files[hoverIndex + 1]!.sort!) / + 2; + } + } else { + if (hoverIndex === 0) { + sort = files[hoverIndex]!.sort! / 2; + } else { + sort = + (files[hoverIndex]!.sort! + + files[hoverIndex - 1]!.sort!) / + 2; + } + } + if (checkSort(sort)) { + updateItem({ sort }, dragRow.id); + } }, [files] ); diff --git a/src/data/i18n.ts b/src/data/i18n.ts index 030528626..5a7a03a0b 100644 --- a/src/data/i18n.ts +++ b/src/data/i18n.ts @@ -205,7 +205,8 @@ const i18ns: I18n[] = [ position: "src/components/extraFile/upload", data: { "choosePicture": "请选择图片", - "chooseFile": "请选择文件" + "chooseFile": "请选择文件", + "dragSort": "当前拖拽排序值超过上限范围" } }, {