@quansitech/antd-admin 1.0.0

package/components/Column/Cascader.tsx

@@ -0,0 +1,79 @@
+import {ColumnProps} from "./types";
+import {Cascader} from "antd";
+import {useEffect, useState} from "react";
+import http from "../../lib/http";
+
+export default function (props: ColumnProps) {
+    const [options, setOptions] = useState<{ value: string, label: string }[]>();
+    const [values, setValues] = useState<any>()
+
+    useEffect(() => {
+        const value = props.config.value
+        setOptions(props.config.options as []);
+
+        // 远程获取数据
+        if (props.fieldProps.loadDataUrl) {
+            http({
+                url: props.fieldProps.loadDataUrl,
+                method: 'get',
+                params: {
+                    value,
+                }
+            }).then(res => {
+                setOptions(res.data)
+
+                if (value) {
+                    const findValue = (options: any[], value: any): any => {
+                        for (let i = 0; i < options.length; i++) {
+                            const option = options[i];
+                            if (option.value === value) {
+                                return [option.value]
+                            } else if (option.children) {
+                                return [option.value, ...findValue(option.children, value)]
+                            }
+                        }
+                    }
+
+                    setValues(findValue(res.data, value))
+                }
+
+            })
+        }
+
+    }, []);
+
+    const loadData = async (selectedOptions: any) => {
+        const targetOption = selectedOptions[selectedOptions.length - 1];
+        if (targetOption.children) {
+            return
+        }
+        targetOption.loading = true;
+        const res = await http(props.fieldProps.loadDataUrl, {
+            params: {
+                selected: targetOption.value
+            }
+        })
+        targetOption.loading = false;
+        targetOption.children = res.data;
+        setOptions([...options as []]);
+    }
+
+    const onChange = (values: any[]) => {
+        setValues(values)
+        if (!values?.length) {
+            props.form.setFieldValue(props.dataIndex, undefined)
+            return
+        }
+        const value = values[values.length - 1]
+        props.form.setFieldValue(props.dataIndex, value)
+    }
+
+    return <div className={props.className}>
+        <Cascader options={options}
+                  onChange={onChange}
+                  placeholder={'请选择'}
+                  value={values}
+                  loadData={props.fieldProps.loadDataUrl ? loadData : undefined}
+        ></Cascader>
+    </div>
+}

package/components/Column/File.tsx

@@ -0,0 +1,168 @@
+import {Alert, Button, Spin, Tooltip, Upload, UploadFile, UploadProps} from "antd";
+import React, {ReactNode, useEffect, useState} from "react";
+import {beforeUpload, customRequest} from "../../lib/upload";
+import http from "../../lib/http";
+import {ColumnProps} from "./types";
+import {UploadListType} from "antd/es/upload/interface";
+import {DndContext, DragEndEvent, PointerSensor, useSensor} from '@dnd-kit/core';
+import {arrayMove, SortableContext, useSortable, verticalListSortingStrategy,} from '@dnd-kit/sortable';
+import {CSS} from '@dnd-kit/utilities';
+import {RcFile} from "antd/lib/upload";
+
+
+interface DraggableUploadListItemProps {
+    originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    file: UploadFile<any>;
+}
+
+const DraggableUploadListItem = ({originNode, file}: DraggableUploadListItemProps) => {
+    const {attributes, listeners, setNodeRef, transform, transition, isDragging} = useSortable({
+        id: file.uid,
+    });
+
+    const style: React.CSSProperties = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+        cursor: 'move',
+        height: '100%',
+    };
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            // prevent preview event when drag end
+            className={isDragging ? 'is-dragging' : ''}
+            {...attributes}
+            {...listeners}
+        >
+            {/* hide error tooltip when dragging */}
+            {file.status === 'error' && isDragging ? originNode.props.children : originNode}
+        </div>
+    );
+};
+
+
+export default function (props: ColumnProps & {
+    fieldProps?: {
+        uploadRequest: {
+            policyGetUrl: string,
+        },
+        maxCount?: number,
+        loadUrl: string,
+    }
+
+    uploadButton?: (fileList: UploadFile[]) => ReactNode,
+    listType?: UploadListType,
+    onPreview?: (file: UploadFile) => Promise<void>,
+    renderUploader?: (attr: {
+        dom: JSX.Element,
+    }) => ReactNode
+}) {
+
+    const [loading, setLoading] = useState(true);
+    const [fileList, setFileList] = useState<UploadFile[]>([]);
+
+    const handlePreview = async (file: UploadFile) => {
+        if (!file.url && !file.preview) {
+            file.preview = URL.createObjectURL(file.originFileObj as RcFile);
+        }
+
+        window.open(file.url || (file.preview as string))
+    };
+
+    useEffect(() => {
+        const value = props.value || props.config.value
+        if (value && props.fieldProps.loadUrl) {
+            http({
+                url: props.fieldProps.loadUrl,
+                params: {
+                    ids: value
+                },
+                method: 'get',
+            }).then(res => {
+                setFileList(res.data.map((item: any) => {
+                    return {
+                        uid: item.id,
+                        status: 'done',
+                        url: item.url,
+                        name: item.name,
+                        hash_id: item.hash_id,
+                        response: {
+                            file_id: item.id,
+                            url: item.url,
+                        }
+                    }
+                }))
+                setLoading(false)
+            })
+
+        } else {
+            setLoading(false)
+        }
+    }, []);
+
+    useEffect(() => {
+        props.onChange && props.onChange(fileList.map(file => {
+            if (file.status === 'done') {
+                file.url = file.response.url || file.response.file_url
+            }
+            return file
+        }))
+    }, [fileList]);
+
+    const uploadButton = (
+        <Tooltip
+            title={fileList.length >= (props.fieldProps?.maxCount || 1) ? '最多只能上传' + (props.fieldProps?.maxCount || 1) + '个文件' : ''}>
+            <Button disabled={fileList.length >= (props.fieldProps?.maxCount || 1)}>上传文件</Button>
+        </Tooltip>
+    );
+
+    const sensor = useSensor(PointerSensor, {
+        activationConstraint: {distance: 10},
+    });
+
+    const onDragEnd = ({active, over}: DragEndEvent) => {
+        if (active.id !== over?.id) {
+            setFileList((prev) => {
+                const activeIndex = prev.findIndex((i) => i.uid === active.id);
+                const overIndex = prev.findIndex((i) => i.uid === over?.id);
+                return arrayMove(prev, activeIndex, overIndex);
+            });
+        }
+    };
+
+    const uploader = (<Upload
+        action={props.fieldProps.uploadRequest.policyGetUrl}
+        listType={props.listType || 'text'}
+        fileList={fileList}
+        itemRender={(originNode, file) => (
+            <DraggableUploadListItem originNode={originNode} file={file}/>
+        )}
+        onPreview={props.onPreview || handlePreview}
+        onChange={({fileList}) => setFileList(fileList)}
+        beforeUpload={(f, fl) => beforeUpload(f, fl, fileList)}
+        customRequest={customRequest as UploadProps['customRequest']}
+    >
+        {props.uploadButton ? props.uploadButton(fileList) : uploadButton}
+    </Upload>)
+
+    return <>
+        {props.fieldProps?.uploadRequest
+            ? <>
+                <Spin spinning={loading}>
+                    <DndContext sensors={[sensor]} onDragEnd={onDragEnd}>
+                        <SortableContext items={fileList.map((i) => i.uid)} strategy={verticalListSortingStrategy}>
+                            {props.renderUploader ? props.renderUploader({dom: uploader}) : uploader}
+                        </SortableContext>
+                    </DndContext>
+                    {<div style={{marginBottom: '16px'}}></div>}
+                </Spin>
+            </>
+            : <>
+                <Alert message={'缺少 uploadRequest 属性'}
+                       type={"error"}/>
+            </>
+        }
+    </>
+}

package/components/Column/Image.tsx

@@ -0,0 +1,77 @@
+import {Col, Image, Row, UploadFile} from "antd";
+import React, {useState} from "react";
+import {PlusOutlined} from '@ant-design/icons';
+import {FileType, getBase64} from "../../lib/upload";
+import {ColumnProps} from "./types";
+import File from "./File";
+import ImgCrop from 'antd-img-crop';
+
+export default function (props: ColumnProps & {
+    fieldProps?: {
+        maxCount?: number,
+        crop?: {
+            ratio: string,
+        }
+    }
+}) {
+
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewImage, setPreviewImage] = useState('');
+
+    const handlePreview = async (file: UploadFile) => {
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj as FileType);
+        }
+
+        setPreviewImage(file.url || (file.preview as string));
+        setPreviewOpen(true);
+    };
+
+    const uploadButton = (fileList: UploadFile[]) => (
+        fileList.length < (props.fieldProps?.maxCount || 1) ?
+            <Row justify={'center'}>
+                <Col flex={1}>
+                    <PlusOutlined size={18}/>
+                    <div style={{marginTop: 8}}>上传</div>
+                </Col>
+            </Row> : null
+    );
+
+    const renderUploader = ({dom}: { dom: JSX.Element }) => {
+        if (props.fieldProps?.crop) {
+            const aspects = props.fieldProps.crop.ratio.split(/[\/:]/)
+            let aspect = Number(aspects)
+            if (aspects.length === 2) {
+                aspect = parseInt(aspects[0]) / parseInt(aspects[1])
+            }
+            return <>
+                <ImgCrop rotationSlider aspect={aspect}>
+                    {dom}
+                </ImgCrop>
+            </>
+        } else {
+            return dom
+        }
+    }
+
+    return <>
+        <File {...props}
+
+              uploadButton={uploadButton}
+              listType={'picture-card'}
+              onPreview={handlePreview}
+              renderUploader={renderUploader}
+        ></File>
+        {previewImage && (
+            <Image
+                wrapperStyle={{display: 'none'}}
+                preview={{
+                    visible: previewOpen,
+                    onVisibleChange: (visible) => setPreviewOpen(visible),
+                    afterOpenChange: (visible) => !visible && setPreviewImage(''),
+                }}
+                src={previewImage}
+            />
+        )}
+    </>
+}

package/components/Column/Readonly/Cascader.tsx

@@ -0,0 +1,51 @@
+import {ColumnReadonlyProps} from "./types";
+import {ReactNode, useEffect, useState} from "react";
+import http from "../../../lib/http";
+
+export default function (props: ColumnReadonlyProps & {
+    schema: {
+        fieldProps: {
+            loadDataUrl: string
+        }
+    }
+}) {
+    const [text, setText] = useState<ReactNode>('-');
+
+    useEffect(() => {
+        setText(props.dom)
+        const value = props.entity.value
+
+        // 远程获取数据
+        if (props.schema.fieldProps?.loadDataUrl) {
+            http({
+                url: props.schema.fieldProps.loadDataUrl,
+                method: 'get',
+                params: {
+                    value,
+                }
+            }).then(res => {
+                if (!value) {
+                    return
+                }
+                const findValue = (options: any[], value: any): any => {
+                    for (let i = 0; i < options.length; i++) {
+                        const option = options[i];
+                        if (option.value === value) {
+                            return [option.label]
+                        } else if (option.children) {
+                            return [option.label, ...findValue(option.children, value)]
+                        }
+                    }
+                }
+
+                setText(findValue(res.data, value).join(' / '))
+
+            })
+        }
+
+    }, []);
+
+    return <div className={props.entity.className}>
+        {text}
+    </div>
+}

package/components/Column/Readonly/File.tsx

@@ -0,0 +1,54 @@
+import {ColumnReadonlyProps} from "./types";
+import {Spin, Upload, UploadFile} from "antd";
+import React, {useEffect, useState} from "react";
+import http from "../../../lib/http";
+
+export default function (props: ColumnReadonlyProps & {
+    schema: {
+        fieldProps?: {
+            loadUrl: string,
+        }
+    },
+}) {
+
+    const [loading, setLoading] = useState(true);
+    const [fileList, setFileList] = useState<UploadFile[]>([]);
+
+    useEffect(() => {
+        if (props.entity.value && props.schema.fieldProps?.loadUrl) {
+            http({
+                url: props.schema.fieldProps.loadUrl,
+                params: {
+                    ids: props.entity.value
+                },
+                method: 'get',
+            }).then(res => {
+                setFileList(res.data.map((item: any) => {
+                    return {
+                        uid: item.id,
+                        status: 'done',
+                        url: item.url,
+                        name: item.name,
+                        response: {
+                            file_id: item.id,
+                        }
+                    }
+                }))
+                setLoading(false)
+            })
+        } else {
+            setLoading(false)
+        }
+    }, []);
+
+
+    return <>
+        <Spin spinning={loading}>
+            <Upload
+                disabled={true}
+                listType="text"
+                fileList={fileList}
+            ></Upload>
+        </Spin>
+    </>
+}

package/components/Column/Readonly/Image.tsx

@@ -0,0 +1,78 @@
+import {ColumnReadonlyProps} from "./types";
+import {Image, Spin, Upload, UploadFile} from "antd";
+import {FileType, getBase64} from "../../../lib/upload";
+import React, {useEffect, useState} from "react";
+import http from "../../../lib/http";
+
+export default function (props: ColumnReadonlyProps & {
+    schema: {
+        fieldProps?: {
+            loadUrl: string,
+        }
+    },
+}) {
+
+    const [loading, setLoading] = useState(true);
+    const [fileList, setFileList] = useState<UploadFile[]>([]);
+    const [previewImage, setPreviewImage] = useState('');
+    const [previewOpen, setPreviewOpen] = useState(false);
+
+    const handlePreview = async (file: UploadFile) => {
+        if (!file.url && !file.preview) {
+            file.preview = await getBase64(file.originFileObj as FileType);
+        }
+
+        setPreviewImage(file.url || (file.preview as string));
+        setPreviewOpen(true);
+    };
+
+    useEffect(() => {
+        if (props.entity.value && props.schema.fieldProps?.loadUrl) {
+            http({
+                url: props.schema.fieldProps.loadUrl,
+                params: {
+                    ids: props.entity.value
+                },
+                method: 'get',
+            }).then(res => {
+                setFileList(res.data.map((item: any) => {
+                    return {
+                        uid: item.id,
+                        status: 'done',
+                        url: item.url,
+                        name: '',
+                        response: {
+                            file_id: item.id,
+                        }
+                    }
+                }))
+                setLoading(false)
+            })
+        } else {
+            setLoading(false)
+        }
+    }, []);
+
+
+    return <>
+        <Spin spinning={loading}>
+            <Upload
+                disabled={true}
+                listType="picture-card"
+                fileList={fileList}
+                onPreview={handlePreview}
+            ></Upload>
+            {previewImage && (
+                <Image
+                    wrapperStyle={{display: 'none'}}
+                    preview={{
+                        visible: previewOpen,
+                        onVisibleChange: (visible) => setPreviewOpen(visible),
+                        afterOpenChange: (visible) => !visible && setPreviewImage(''),
+                    }}
+                    src={previewImage}
+                />
+            )}
+        </Spin>
+    </>
+}

package/components/Column/Readonly/Option.tsx

@@ -0,0 +1,58 @@
+import {Component, lazy, useEffect, useState} from "react";
+import {ReactComponentLike} from "prop-types";
+import container from "../../../lib/container";
+import {Flex} from "antd";
+import {ColumnReadonlyProps} from "./types";
+import {asyncFilter, handleRules} from "../../../lib/helpers";
+import {Rules} from "@rc-component/async-validator/lib/interface";
+import upperFirst from "lodash/upperFirst";
+
+type ComponentType = {
+    component: ReactComponentLike,
+    props: any,
+}
+
+export default ({options, record}: ColumnReadonlyProps & {
+    options?: {
+        type: string,
+        title: string,
+        showRules?: Rules,
+    }[],
+}) => {
+
+    const [Components, setComponents] = useState<ComponentType[]>([]);
+
+    useEffect(() => {
+        if (options) {
+            asyncFilter(options, async (Component) => {
+                if (!Component.showRules) {
+                    return true
+                }
+                return await handleRules(Component.showRules, record)
+            }).then((Components: { type: string }[]) => setComponents(Components.map(a => {
+                const c = `Table.Option.${upperFirst(a.type)}`
+                return {
+                    props: {
+                        ...a,
+                        record,
+                    },
+                    component: lazy(container.get(c)),
+                }
+            })))
+        }
+    }, []);
+
+
+    return <>
+        {
+            <Flex wrap={true}>
+                {
+                    Components.map(Component => {
+                        return <Component.component
+                            key={Component.props.title} {...Component.props}></Component.component>
+                    })
+                }
+            </Flex>
+        }
+    </>
+}

package/components/Column/Readonly/types.d.ts

@@ -0,0 +1,9 @@
+import {ProSchema} from "@ant-design/pro-components";
+import {ReactNode} from "react";
+
+export type ColumnReadonlyProps = {
+    dom: ReactNode,
+    entity: any,
+    schema: ProSchema,
+    record?: any,
+}