@quansitech/antd-admin 1.0.0 → 1.1.0

package/components/{Table/Option → Column/Readonly/Action}/Link.tsx

@@ -1,68 +1,78 @@
-import React, {useContext, useState} from "react";
-import {modal, replaceParams, replaceUrl, routerNavigateTo} from "../../../lib/helpers";
-import {Button, Popconfirm, Spin} from "antd";
-import {TableContext} from "../../TableContext";
-import http from "../../../lib/http";
-import {TableColumnOptionProps} from "./types";
-
-type Props = TableColumnOptionProps & {
-    href?: string,
-    request?: RequestOptions,
-    modal?: ModalOptions,
-    danger?: boolean
-}
-
-export default function (props: Props) {
-
-    const [loading, setLoading] = useState(false)
-    const tableContext = useContext(TableContext)
-
-    const onClick = async (e: any) => {
-        setLoading(true)
-        try {
-            if (props.href) {
-                routerNavigateTo(replaceUrl(props.href, props.record))
-                return
-            }
-            if (props.request) {
-                await http({
-                    method: props.request.method,
-                    url: replaceUrl(props.request.url, props.record),
-                    headers: props.request.headers || {},
-                    data: props.request.data ? replaceParams(props.request.data, props.record) : null,
-                })
-
-                await tableContext.actionRef?.reload()
-            }
-            if (props.modal) {
-                let url
-                if (props.modal.content.url) {
-                    url = replaceUrl(props.modal.content.url, props.record)
-                }
-                await modal({
-                    ...props.modal,
-                    contexts: {
-                        tableContext,
-                    },
-                    content: {
-                        ...props.modal.content,
-                        url,
-                    },
-                })
-            }
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    return <>
-        <Spin spinning={loading}>
-            {props.request?.confirm
-                ? <Popconfirm title={props.request?.confirm} onConfirm={onClick}>
-                    <Button type={"link"} danger={props.danger} onClick={() => {
-                    }}>{props.title}</Button>
-                </Popconfirm> : <Button type={"link"} danger={props.danger} onClick={onClick}>{props.title}</Button>
-            }
-        </Spin>
-    </>
+import React, {useContext, useState} from "react";
+import {modalShow, replaceParams, replaceUrl, routerNavigateTo} from "../../../../lib/helpers";
+import {Button, Popconfirm, Spin} from "antd";
+import {TableContext} from "../../../TableContext";
+import http from "../../../../lib/http";
+import {TableColumnOptionProps} from "./types";
+
+type Props = TableColumnOptionProps & {
+    href?: string,
+    request?: RequestOptions,
+    modal?: ModalOptions,
+    modalByField?: string,
+    danger?: boolean
+}
+
+export default function (props: Props) {
+
+    const [loading, setLoading] = useState(false)
+    const tableContext = useContext(TableContext)
+
+    const onClick = async (e: any) => {
+        setLoading(true)
+        try {
+            if (props.href) {
+                routerNavigateTo(replaceUrl(props.href, props.record))
+                return
+            }
+            if (props.request) {
+                await http({
+                    method: props.request.method,
+                    url: replaceUrl(props.request.url, props.record),
+                    headers: props.request.headers || {},
+                    data: props.request.data ? replaceParams(props.request.data, props.record) : null,
+                })
+
+                await tableContext.actionRef?.reload()
+            }
+            if (props.modal) {
+                let url
+                if (props.modal.content.url) {
+                    url = replaceUrl(props.modal.content.url, props.record)
+                }
+                await modalShow({
+                    ...props.modal,
+                    contexts: {
+                        tableContext,
+                    },
+                    content: {
+                        ...props.modal.content,
+                        url,
+                    },
+                })
+            }
+            if (props.modalByField) {
+                const m = props.record[props.modalByField]
+                await modalShow({
+                    ...m,
+                    contexts: {
+                        tableContext,
+                    },
+                })
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return <>
+        <Spin spinning={loading}>
+            {props.request?.confirm
+                ? <Popconfirm title={props.request?.confirm} onConfirm={onClick}>
+                    <Button type={"link"} danger={props.danger} onClick={() => {
+                    }}>{props.title}</Button>
+                </Popconfirm> : <Button type={"link"} danger={props.danger} onClick={onClick}>{props.title}</Button>
+            }
+        </Spin>
+    </>
 }

package/components/{Table/Option → Column/Readonly/Action}/types.d.ts

@@ -1,5 +1,6 @@
-export type TableColumnOptionProps = {
-    type: string,
-    title: string,
-    record: Record<string, any>,
+export type TableColumnActionProps = {
+    type: string,
+    title: string,
+    record: Record<string, any>,
+    badge?: string,
 }

package/components/Column/Readonly/Action.tsx

@@ -0,0 +1,80 @@
+import {Component, lazy, useEffect, useState} from "react";
+import {ReactComponentLike} from "prop-types";
+import container from "../../../lib/container";
+import {Badge, 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";
+import {TableColumnActionProps} from "./Action/types";
+
+type ComponentType = {
+    component: ReactComponentLike,
+    props: any,
+}
+
+export default ({actions, record}: ColumnReadonlyProps & {
+    actions?: {
+        type: string,
+        title: string,
+        showRules?: Rules,
+        badge?: any,
+    }[],
+}) => {
+
+    const [Components, setComponents] = useState<ComponentType[]>([]);
+
+    useEffect(() => {
+        if (actions) {
+            asyncFilter(actions, async (Component) => {
+                if (!Component.showRules) {
+                    return true
+                }
+                return await handleRules(Component.showRules, record)
+            }).then((Components: TableColumnActionProps[]) => setComponents(Components.map(a => {
+                let badge = a.badge
+                const matches = (badge + '').match(/^__(\w+)__$/)
+                if (matches) {
+                    badge = record[matches[1]]
+                }
+
+                const c = `Column.Readonly.Action.${upperFirst(a.type)}`
+                return {
+                    props: {
+                        ...a,
+                        record,
+                        badge,
+                    },
+                    component: lazy(container.get(c)),
+                }
+            })))
+        }
+    }, []);
+
+
+    return <>
+        {
+            <Flex wrap={true}>
+                {
+                    Components.map(Component => (
+                        Component.props.badge ?
+                            <Badge key={Component.props.title}
+                                   count={Component.props.badge}
+                                   offset={[-12, 6]}
+                                   size={'small'}
+                                   styles={{
+                                       indicator: {
+                                           zIndex: 100,
+                                           padding: '0 4px',
+                                       }
+                                   }}>
+                                <Component.component
+                                    key={Component.props.title} {...Component.props}></Component.component>
+                            </Badge> :
+                            <Component.component key={Component.props.title} {...Component.props}></Component.component>
+                    ))
+                }
+            </Flex>
+        }
+    </>
+}

package/components/Column/Readonly/Cascader.tsx

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

@@ -1,54 +1,53 @@
-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>
-    </>
+import {ColumnReadonlyProps} from "./types";
+import {Spin, Upload, UploadFile} from "antd";
+import React, {useContext, useEffect, useState} from "react";
+import {FormContext} from "../../FormContext";
+import {UploadListType} from "antd/es/upload/interface";
+import {TableContext} from "../../TableContext";
+
+export default function (props: ColumnReadonlyProps & {
+    listType?: UploadListType,
+    onPreview?: (file: UploadFile) => void,
+}) {
+
+    const [loading, setLoading] = useState(true);
+    const [fileList, setFileList] = useState<UploadFile[]>([]);
+    const formContext = useContext(FormContext);
+    const tableContext = useContext(TableContext);
+
+    useEffect(() => {
+        let extraRenderValue = [];
+        if (formContext && formContext.extraRenderValues) {
+            extraRenderValue = formContext.extraRenderValues[props.schema.dataIndex as string] ?? []
+        } else if (tableContext && tableContext.extraRenderValues) {
+            extraRenderValue = tableContext.extraRenderValues[props.index]?.[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)
+    }, []);
+
+
+    return <>
+        <Spin spinning={loading}>
+            <Upload
+                disabled={true}
+                listType={props.listType || 'text'}
+                fileList={fileList}
+                onPreview={props.onPreview}
+            ></Upload>
+        </Spin>
+    </>
 }

package/components/Column/Readonly/Image.tsx

@@ -1,78 +1,39 @@
-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>
-    </>
+import {ColumnReadonlyProps} from "./types";
+import {Image, UploadFile} from "antd";
+import {FileType, getBase64} from "../../../lib/upload";
+import React, {useState} from "react";
+import File from "./File";
+
+export default function (props: ColumnReadonlyProps) {
+
+    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);
+    };
+
+
+    return <>
+        <File {...props}
+              listType="picture-card"
+              onPreview={handlePreview}
+        ></File>
+        {previewImage && (
+            <Image
+                wrapperStyle={{display: 'none'}}
+                preview={{
+                    visible: previewOpen,
+                    onVisibleChange: (visible) => setPreviewOpen(visible),
+                    afterOpenChange: (visible) => !visible && setPreviewImage(''),
+                }}
+                src={previewImage}
+            />
+        )}
+    </>
 }

package/components/Column/Readonly/Ueditor.tsx

@@ -0,0 +1,18 @@
+import {ColumnReadonlyProps} from "./types";
+import {useEffect, useState} from "react";
+
+export default function (props: ColumnReadonlyProps) {
+
+    const [value, setValue] = useState(props.entity.value);
+
+    useEffect(() => {
+        const div = document.createElement('div');
+        div.innerHTML = props.entity.value;
+        setValue(div.innerText);
+    }, []);
+
+
+    return <>
+        <div className={'article-content'} dangerouslySetInnerHTML={{__html: value}}/>
+    </>
+}

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

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