@quansitech/antd-admin 1.0.0 → 1.1.0

package/components/Column/Cascader.tsx

@@ -1,79 +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>
+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

@@ -1,168 +1,166 @@
-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"}/>
-            </>
-        }
-    </>
+import {Alert, Button, Spin, Tooltip, Upload, UploadFile, UploadProps} from "antd";
+import React, {ReactNode, useContext, useEffect, useState} from "react";
+import {beforeUpload, customRequest} from "../../lib/upload";
+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";
+import {FormContext} from "../FormContext";
+import {TableContext} from "../TableContext";
+
+
+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,
+    }
+
+    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 formContext = useContext(FormContext);
+    const tableContext = useContext(TableContext);
+
+    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(() => {
+        let extraRenderValue = [];
+        if (formContext && formContext.extraRenderValues) {
+            extraRenderValue = formContext.extraRenderValues[props.dataIndex as string] ?? []
+        } else if (tableContext && tableContext.extraRenderValues) {
+            console.log(111)
+            extraRenderValue = tableContext.extraRenderValues[props.index as number]?.[props.schema.dataIndex as string] ?? []
+        }
+
+        setFileList(extraRenderValue.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)
+    }, []);
+
+    useEffect(() => {
+        props.form?.setFieldValue(props.dataIndex, 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
+        {...props.fieldProps}
+        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

@@ -1,77 +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}
-            />
-        )}
-    </>
+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}
+            />
+        )}
+    </>
 }