Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

extrafile 拖拽排序

This commit is contained in:
Wang Kejun 2023-10-10 15:49:03 +08:00
parent 2a04a8a121
commit a2487b4b95
22 changed files with 258 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
es/components/extraFile/commit/index.d.ts vendored
View File

@ -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<any, string | import("react").JSXElementConstructor<any>>;
export default _default;

2
es/components/extraFile/commit/index.js
View File

@ -25,7 +25,7 @@ export default OakComponent({
type: 'primary',
executeText: '',
buttonProps: {},
afterCommit: () => undefined,
afterCommit: () => { },
},
methods: {
getEfIds() {

1
es/components/extraFile/forUrl/index.js
View File

@ -163,7 +163,6 @@ export default OakComponent({
type: 'image',
tag1,
tag2,
objectId: generateNewId(),
bucket: '',
id: generateNewId(),
};

16
es/components/extraFile/upload/index.js
View File

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

3
es/components/extraFile/upload/locales/zh-CN.json
View File

@ -1,4 +1,5 @@
{
"choosePicture": "请选择图片",
"chooseFile": "请选择文件"
"chooseFile": "请选择文件",
"dragSort": "当前拖拽排序值超过上限范围"
}

1
es/components/extraFile/upload/web.d.ts vendored
View File

@ -25,4 +25,5 @@ export default function render(props: WebComponentProps<EntityDict, 'extraFile',
}, {
onRemove: (file: UploadFile) => void;
addFileByWeb: (file: UploadFile) => void;
checkSort: (sort: number) => boolean;
}>): import("react/jsx-runtime").JSX.Element;

37
es/components/extraFile/upload/web.js
View File

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

3
es/data/i18n.js
View File

@ -203,7 +203,8 @@ const i18ns = [
position: "src/components/extraFile/upload",
data: {
"choosePicture": "请选择图片",
"chooseFile": "请选择文件"
"chooseFile": "请选择文件",
"dragSort": "当前拖拽排序值超过上限范围"
}
},
{

2
lib/components/extraFile/commit/index.d.ts vendored
View File

@ -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<any, string | import("react").JSXElementConstructor<any>>;
export default _default;

2
lib/components/extraFile/commit/index.js
View File

@ -28,7 +28,7 @@ exports.default = OakComponent({
type: 'primary',
executeText: '',
buttonProps: {},
afterCommit: () => undefined,
afterCommit: () => { },
},
methods: {
getEfIds() {

1
lib/components/extraFile/forUrl/index.js
View File

@ -165,7 +165,6 @@ exports.default = OakComponent({
type: 'image',
tag1,
tag2,
objectId: (0, uuid_1.generateNewId)(),
bucket: '',
id: (0, uuid_1.generateNewId)(),
};

16
lib/components/extraFile/upload/index.js
View File

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

3
lib/components/extraFile/upload/locales/zh-CN.json
View File

@ -1,4 +1,5 @@
{
"choosePicture": "请选择图片",
"chooseFile": "请选择文件"
"chooseFile": "请选择文件",
"dragSort": "当前拖拽排序值超过上限范围"
}

1
lib/components/extraFile/upload/web.d.ts vendored
View File

@ -25,4 +25,5 @@ export default function render(props: WebComponentProps<EntityDict, 'extraFile',
}, {
onRemove: (file: UploadFile) => void;
addFileByWeb: (file: UploadFile) => void;
checkSort: (sort: number) => boolean;
}>): import("react/jsx-runtime").JSX.Element;

37
lib/components/extraFile/upload/web.js
View File

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

3
lib/data/i18n.js
View File

@ -205,7 +205,8 @@ const i18ns = [
position: "src/components/extraFile/upload",
data: {
"choosePicture": "请选择图片",
"chooseFile": "请选择文件"
"chooseFile": "请选择文件",
"dragSort": "当前拖拽排序值超过上限范围"
}
},
{

2
src/components/extraFile/commit/index.ts
View File

@ -32,7 +32,7 @@ export default OakComponent({
type: 'primary',
executeText: '',
buttonProps: {},
afterCommit: () => undefined,
afterCommit: () => {},
},
methods: {
getEfIds() {

1
src/components/extraFile/forUrl/index.ts
View File

@ -172,7 +172,6 @@ export default OakComponent({
type: 'image',
tag1,
tag2,
objectId: generateNewId(),
bucket: '',
id: generateNewId(),
} as EntityDict['extraFile']['CreateSingle']['data'];

51
src/components/extraFile/upload/index.ts
View File

@ -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 <ED2 extends EntityDict & BaseEntityDict, T2 extends keyof ED2>(
props: ReactComponentProps<

3
src/components/extraFile/upload/locales/zh-CN.json
View File

@ -1,4 +1,5 @@
{
"choosePicture": "请选择图片",
"chooseFile": "请选择文件"
"chooseFile": "请选择文件",
"dragSort": "当前拖拽排序值超过上限范围"
}

188
src/components/extraFile/upload/web.tsx
View File

@ -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<boolean>;
style?: Record<string, string>;
className?: string;
directory?: boolean;
onPreview?: (file: UploadFile<any>) => void;
onDownload?: (file: UploadFile<any>) => 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<boolean>;
style?: Record<string, string>;
className?: string;
directory?: boolean;
onPreview?: (file: UploadFile<any>) => void;
onDownload?: (file: UploadFile<any>) => 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 (
<div>
<PlusOutlined />
@ -134,65 +142,87 @@ export default function render(props: WebComponentProps<
return <Button type="default">{t('chooseFile')}</Button>;
};
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]
);

3
src/data/i18n.ts
View File

@ -205,7 +205,8 @@ const i18ns: I18n[] = [
position: "src/components/extraFile/upload",
data: {
"choosePicture": "请选择图片",
"chooseFile": "请选择文件"
"chooseFile": "请选择文件",
"dragSort": "当前拖拽排序值超过上限范围"
}
},
{