@quansitech/antd-admin 1.0.0

package/components/Column/Ueditor.tsx

@@ -0,0 +1,314 @@
+import {ColumnProps} from "./types";
+import {Component} from "react";
+import {createScript, filterObjectKeys} from "../../lib/helpers";
+import {Spin} from "antd";
+import {ModalContext, ModalContextProps} from "../ModalContext";
+import uniqueId from "lodash/uniqueId";
+import {FormContext, FormContextProps} from "../FormContext";
+
+declare global {
+    interface Window {
+        UE: any,
+        UE_LOADING_PROMISE: Promise<any>,
+    }
+}
+
+export default class Ueditor extends Component<ColumnProps & {
+    fieldProps: {
+        ueditorPath: string,
+    }
+}, any> {
+    modalContext = {} as ModalContextProps
+    formContext = {} as FormContextProps
+
+    editor: any = null
+    catching = false
+    containerRef: HTMLElement | null = null
+    state = {
+        loading: true,
+        containerId: uniqueId('ueditor_'),
+        width: '',
+    }
+
+
+    componentDidMount() {
+        this.setState({
+            width: this.containerRef?.offsetWidth ? `${this.containerRef?.offsetWidth}px` : '100%'
+        })
+
+        this.props.rules?.push({
+            validator: async (rule: any, value: any) => {
+                if (this.catching) {
+                    throw new Error('正在抓取图片')
+                }
+                return true
+            },
+        })
+
+        if (!window.UE && !window.UE_LOADING_PROMISE) {
+            window.UE_LOADING_PROMISE =
+                createScript(this.props.fieldProps.configJsPath || this.props.fieldProps.ueditorPath + '/ueditor.config.js')
+                    .then(() => {
+                        return createScript(this.props.fieldProps.ueditorPath + '/ueditor.all.js')
+                    })
+                    .then(() => {
+                        return createScript(this.props.fieldProps.ueditorPath + '/lang/zh-cn/zh-cn.js')
+                    })
+        }
+
+        window.UE_LOADING_PROMISE.then(() => {
+            let that = this
+            window.UE.plugins['forceCatchRemoteImg'] = function () {
+                if (this.options.forcecatchremote) {
+                    this.addListener("afterpaste", function (t: any, a: any) {
+                        const load_src = that.props.fieldProps.ueditorPath + '/img/load.gif';
+                        const domUtils = window.UE.dom.domUtils;
+
+                        const parser = new DOMParser();
+                        const pasteDom = parser.parseFromString(a.html, "text/html");
+
+                        // @ts-ignore
+                        const allImgs = domUtils.getElementsByTagName(this.document, "img");
+                        const imgs = domUtils.getElementsByTagName(pasteDom, "img");
+
+                        let notCatch = (src: string) => {
+                            if (src.indexOf(location.host) !== -1) {
+                                return true;
+                            }
+                            if (/(^\.)|(^\/)/.test(src)) {
+                                return true;
+                            }
+                            return src.indexOf('img_catch_success') !== -1;
+
+                        }
+
+                        let catchGo = false;
+                        for (let i = 0; i < imgs.length; i++) {
+                            if (notCatch(imgs[i].src)) {
+                                continue
+                            }
+                            for (let l = 0; l < allImgs.length; l++) {
+                                if (allImgs[l].src == imgs[i].src) {
+                                    catchGo = true;
+                                    domUtils.setAttributes(allImgs[l], {
+                                        "src": load_src,
+                                        "_src": allImgs[l].src
+                                    });
+                                }
+                            }
+                        }
+
+                        if (catchGo) {
+                            //     $('.submit').trigger('startHandlePostData', '正在抓取图片');
+                            that.catching = true
+                            that.props.dataIndex && that.props.form?.validateFields([that.props.dataIndex])
+                        }
+                    });
+
+                    this.addListener("catchremotesuccess", function () {
+                        that.catching = false
+                        that.props.dataIndex && that.props.form?.validateFields([that.props.dataIndex])
+                        //     $('.submit').trigger('endHandlePostData');
+                    });
+                }
+
+            }
+
+            // plugins/insert_richtext.js
+            /**
+             * 抓取微信富文本
+             */
+            window.UE.plugin.register('insert_richtext', function () {
+                // @ts-ignore
+                const me = this;
+
+                function filter(div: HTMLElement) {
+                    const domUtils = window.UE.dom.domUtils;
+                    const browser = window.UE.browser;
+                    const utils = window.UE.utils;
+
+                    let html;
+                    let ci;
+                    if (div.firstChild) {
+                        //去掉cut中添加的边界值
+                        const nodes = domUtils.getElementsByTagName(div, 'span');
+                        for (let i = 0, ni; ni = nodes[i++];) {
+                            if (ni.id == '_baidu_cut_start' || ni.id == '_baidu_cut_end') {
+                                domUtils.remove(ni);
+                            }
+                        }
+
+                        if (browser.webkit) {
+
+                            let brs = div.querySelectorAll('div br');
+                            for (let i = 0, bi; bi = brs[i++];) {
+                                const pN = bi.parentNode as HTMLElement;
+                                if (pN) {
+                                    if (pN.tagName == 'DIV' && pN.childNodes.length == 1) {
+                                        pN.innerHTML = '<p><br/></p>';
+                                        domUtils.remove(pN);
+                                    }
+                                }
+                            }
+                            const divs = div.querySelectorAll('#baidu_pastebin');
+                            for (let i = 0, di; di = divs[i++];) {
+                                const tmpP = me.document.createElement('p');
+                                di.parentNode?.insertBefore(tmpP, di);
+                                while (di.firstChild) {
+                                    tmpP.appendChild(di.firstChild);
+                                }
+                                domUtils.remove(di);
+                            }
+
+                            const metas = div.querySelectorAll('meta');
+                            for (let i = 0, ci; ci = metas[i++];) {
+                                domUtils.remove(ci);
+                            }
+
+                            brs = div.querySelectorAll('br');
+                            for (let i = 0; ci = brs[i++];) {
+                                if (/^apple-/i.test(ci.className)) {
+                                    domUtils.remove(ci);
+                                }
+                            }
+                        }
+                        if (browser.gecko) {
+                            const dirtyNodes = div.querySelectorAll('[_moz_dirty]');
+                            for (let i = 0; ci = dirtyNodes[i++];) {
+                                ci.removeAttribute('_moz_dirty');
+                            }
+                        }
+                        if (!browser.ie) {
+                            const spans = div.querySelectorAll('span.Apple-style-span');
+                            for (let i = 0, ci; ci = spans[i++];) {
+                                domUtils.remove(ci, true);
+                            }
+                        }
+
+                        //ie下使用innerHTML会产生多余的\r\n字符，也会产生&nbsp;这里过滤掉
+                        html = div.innerHTML;//.replace(/>(?:(\s|&nbsp;)*?)</g,'><');
+
+                        //过滤word粘贴过来的冗余属性
+                        html = window.UE.filterWord(html);
+                        //取消了忽略空白的第二个参数，粘贴过来的有些是有空白的，会被套上相关的标签
+                        var root = window.UE.htmlparser(html);
+
+                        //如果给了过滤规则就先进行过滤
+                        if (me.options.filterRules) {
+                            window.UE.filterNode(root, me.options.filterRules);
+                        }
+                        //执行默认的处理
+                        me.filterInputRule(root);
+                        //针对chrome的处理
+                        if (browser.webkit) {
+                            var br = root.lastChild();
+                            if (br && br.type == 'element' && br.tagName == 'br') {
+                                root.removeChild(br)
+                            }
+                            utils.each(me.body.querySelectorAll('div'), function (node: HTMLElement) {
+                                if (domUtils.isEmptyBlock(node)) {
+                                    domUtils.remove(node, true)
+                                }
+                            })
+                        }
+                        html = {'html': root.toHtml()};
+                        me.fireEvent('beforepaste', html, root);
+                        //抢了默认的粘贴，那后边的内容就不执行了，比如表格粘贴
+                        if (!html.html) {
+                            return;
+                        }
+                        root = window.UE.htmlparser(html.html, true);
+                        //如果开启了纯文本模式
+                        if (me.queryCommandState('pasteplain') === 1) {
+                            me.execCommand('insertHtml', window.UE.filterNode(root, me.options.filterTxtRules).toHtml(), true);
+                        } else {
+                            //文本模式
+                            window.UE.filterNode(root, me.options.filterTxtRules);
+                            const txtContent = root.toHtml();
+                            //完全模式
+                            const htmlContent = html.html;
+
+                            const address = me.selection.getRange().createAddress(true);
+                            // @ts-ignore
+                            me.execCommand('insertHtml', me.getOpt('retainOnlyLabelPasted') === true ? getPureHtml(htmlContent) : htmlContent, true);
+                        }
+
+                        me.fireEvent("afterpaste", html);
+                    }
+                }
+
+
+                return {
+                    bindEvents: {
+                        'afterInsertRichText': function (e: Event, html: HTMLElement) {
+                            me.execCommand('cleardoc');
+                            filter.call(me, html);
+                            me.document.body.innerHTML = `<section>${html}</section>`;
+
+                            me.fireEvent('catchremoteimage');
+
+                            that.catching = true
+                            that.props.dataIndex && that.props.form?.validateFields([that.props.dataIndex])
+                            // $('.submit').trigger('startHandlePostData', '正在抓取图片');
+                        },
+                    },
+                    commands: {}
+                }
+            });
+
+
+            const config = {
+                ...this.props.fieldProps?.config,
+                forcecatchremote: typeof this.props.fieldProps?.config?.forcecatchremote === 'undefined' ? true : this.props.fieldProps.config.forcecatchremote,
+            }
+            if (this.modalContext?.inModal) {
+                config.zIndex = 2000
+                config.topOffset = 0
+            }
+
+            this.editor = window.UE.getEditor(this.state.containerId, config)
+            this.editor?.ready(() => {
+                this.editor?.addListener('contentChange', () => {
+                    this.formContext.formRef?.current?.setFieldValue(this.props.dataIndex, this.editor?.getContent())
+                })
+                this.setState({loading: false})
+            })
+        })
+
+    }
+
+    componentWillUnmount() {
+        this.editor?.destroy()
+    }
+
+    render() {
+        return <ModalContext.Consumer>
+            {
+                modalContext =>
+                    <FormContext.Consumer>
+                        {
+                            formContext => {
+                                this.modalContext = modalContext
+                                this.formContext = formContext
+                                return <div {...filterObjectKeys(this.props, [
+                                    'id',
+                                    'fieldProps',
+                                    'onChange',
+                                    'value',
+                                    'form',
+                                    'config',
+                                    'rules',
+                                    'ueditorPath',
+                                    'dataIndex',
+                                ])} ref={el => this.containerRef = el}>
+                                    <Spin spinning={this.state.loading}>
+                                        <div id={this.state.containerId} style={{width: this.state.width}}/>
+                                    </Spin>
+                                </div>
+                            }
+                        }
+                    </FormContext.Consumer>
+            }
+        </ModalContext.Consumer>
+    }
+}

package/components/Column/types.d.ts

@@ -0,0 +1,29 @@
+import type {FormInstance} from "antd/lib/form";
+import {ProSchema} from "@ant-design/pro-components";
+import {Rule} from "rc-field-form/lib/interface";
+import {Key} from "react";
+
+export type ColumnProps = {
+    className: any,
+    onChange?: <T = any>(value: T) => void;
+    onBlur?: <T = any>(event: T) => void;
+    schema?: ProSchema<Entity, ExtraProps, ComponentsType, ValueType>,
+    config: {
+        onSelect?: (value: any) => void;
+        onChange?: <T = any>(value: T) => void;
+        value?: any;
+        type: ComponentsType;
+        recordKey?: React.Key | React.Key[];
+        record?: Entity;
+        isEditable?: boolean;
+        defaultRender: (newItem: ProSchema<Entity, ExtraProps, ComponentsType, ValueType>) => JSX.Element | null;
+        options?: any[];
+    }
+    form: FormInstance,
+    fieldProps: any,
+    rules?: Rule[],
+    dataIndex?: Key,
+    value?: any,
+
+    record?: any,
+}

package/components/Form/Action/Button.tsx

@@ -0,0 +1,125 @@
+import {FormActionType} from "./types";
+import {Button, Popconfirm} from "antd";
+import {useContext, useEffect, useState} from "react";
+import http from "../../../lib/http";
+import {FormContext} from "../../FormContext";
+import {modal, replaceParams, replaceUrl, routerNavigateTo} from "../../../lib/helpers";
+import {ModalContext} from "../../ModalContext";
+import {TableContext} from "../../TableContext";
+
+export default function (props: FormActionType & {
+    props: any,
+
+    // 操作
+    submit?: boolean | {
+        confirm?: string
+    },
+    request?: RequestOptions,
+    link?: {
+        url: string,
+    }
+    back?: boolean,
+    reset?: boolean,
+    modal?: ModalOptions,
+}) {
+
+    const [loading, setLoading] = useState(false)
+    const formContext = useContext(FormContext)
+    const tableContext = useContext(TableContext)
+    const modalContext = useContext(ModalContext)
+
+    const onClick = async () => {
+        try {
+            setLoading(true)
+            const handleAfterAction = async (req?: RequestOptions) => {
+                if (req?.afterAction?.includes('tableReload')) {
+                    if (modalContext.contexts) {
+                        modalContext.setAfterClose(() => {
+                            modalContext.contexts?.tableContext?.actionRef.reload()
+                        })
+                    }
+                    if (tableContext.actionRef) {
+                        await tableContext.actionRef.reload()
+                    }
+                }
+                if (req?.afterAction?.includes('closeModal') && modalContext.inModal) {
+                    modalContext.closeModal()
+                }
+            }
+
+            if (props.submit) {
+                formContext.formRef?.current?.submit()
+                return
+            }
+            if (props.request) {
+                await http({
+                    method: props.request.method,
+                    url: props.request.url,
+                    headers: props.request.headers || {},
+                    data: replaceParams(props.request.data || {}, {
+                        ...(await formContext.formRef?.current?.getFieldsValue()),
+                    })
+                })
+
+                await handleAfterAction(props.request)
+                return
+            }
+            if (props.modal) {
+                await modal({
+                    ...props.modal,
+                    content: {
+                        ...props.modal.content,
+                        url: replaceUrl(props.modal.content.url as string, formContext.formRef?.current?.getFieldsValue())
+                    }
+                })
+                return
+            }
+
+            if (props.link) {
+                routerNavigateTo(replaceUrl(props.link.url, await formContext.formRef?.current?.getFieldsValue()))
+                return
+            }
+            if (props.reset) {
+                formContext.formRef?.current?.resetFields()
+                return
+            }
+            if (props.back) {
+                history.back()
+                return
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        if (props.submit) {
+            setLoading(props.loading || false)
+        }
+    }, [props.loading]);
+
+    const MyButton = ({onClick}: {
+        onClick?: () => void,
+    }) => {
+
+        return <>
+            <Button {...props.props}
+                    onClick={onClick}
+                    loading={loading}
+            >{props.title}</Button>
+        </>
+    }
+
+    const confirm = (typeof props.submit === 'object' ? props.submit.confirm : null)
+        || props.request?.confirm
+
+    return <>
+        {
+            confirm ?
+                <Popconfirm title={confirm} onConfirm={onClick}>
+                    <MyButton></MyButton>
+                </Popconfirm>
+                : <MyButton onClick={onClick}></MyButton>
+        }
+    </>
+}

package/components/Form/Action/types.d.ts

@@ -0,0 +1,5 @@
+export type FormActionType = {
+    type: string,
+    title: string,
+    loading?: boolean,
+}

package/components/Form/Actions.tsx

@@ -0,0 +1,35 @@
+import {FormActionType} from "./Action/types";
+import {lazy, useEffect, useState} from "react";
+import {ReactComponentLike} from "prop-types";
+import {Space} from "antd";
+import container from "../../lib/container";
+import upperFirst from "lodash/upperFirst";
+
+export default function (props: {
+    actions?: FormActionType[]
+    loading?: boolean
+}) {
+    const [components, setComponents] = useState<{
+        Component: ReactComponentLike,
+        props: FormActionType,
+    }[]>([])
+
+    useEffect(() => {
+        setComponents(props.actions?.map(a => {
+            return {
+                Component: lazy(container.get('Form.Action.' + upperFirst(a.type))),
+                props: {
+                    ...a,
+                },
+            }
+        }) || [])
+    }, []);
+
+    return <>
+        <Space>
+            {components.map(item => (
+                <item.Component key={item.props.title} loading={props.loading} {...item.props}></item.Component>
+            ))}
+        </Space>
+    </>
+}

package/components/Form.tsx

@@ -0,0 +1,171 @@
+import {BetaSchemaForm, ProFormColumnsType, ProFormInstance, ProSkeleton} from "@ant-design/pro-components";
+import type {FormSchema} from "@ant-design/pro-form/es/components/SchemaForm/typing";
+import React, {lazy, Suspense, useContext, useEffect, useRef, useState} from "react";
+import upperFirst from "lodash/upperFirst";
+import container from "../lib/container";
+import {FormActionType} from "./Form/Action/types";
+import Actions from "./Form/Actions";
+import {FormContext} from "./FormContext";
+import {Col, Row, Spin} from "antd";
+import http from "../lib/http";
+import {RuleObject} from "rc-field-form/lib/interface";
+import customRule from "../lib/customRule";
+import cloneDeep from "lodash/cloneDeep";
+import {ModalContext} from "./ModalContext";
+import {TableContext} from "./TableContext";
+import {commonHandler} from "../lib/schemaHandler";
+
+type SubmitRequestType = {
+    url: string,
+    method?: string,
+    data?: any,
+    afterSubmit?: () => void,
+    headers?: Record<string, string>
+    afterAction?: string[],
+}
+
+
+export default function (props: FormSchema & {
+    actions?: FormActionType[]
+    metaTitle?: string,
+    columns?: ProFormColumnsType[],
+    submitRequest?: SubmitRequestType
+}) {
+
+    const [columns, setColumns] = useState<ProFormColumnsType[]>([])
+    const formRef = useRef<ProFormInstance>()
+    const [initialized, setInitialized] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        setColumns((cloneDeep(props.columns)?.map((c: ProFormColumnsType & {
+            formItemProps?: {
+                rules?: (RuleObject & {
+                    customType?: string
+                })[]
+            }
+        }) => {
+            // rules
+            if (!c.formItemProps) {
+                c.formItemProps = {}
+            }
+            if (!c.formItemProps?.rules) {
+                c.formItemProps.rules = []
+            }
+            c.formItemProps.rules = c.formItemProps.rules.map(rule => {
+                if (rule.customType) {
+                    if (customRule[rule.customType]) {
+                        rule.validator = customRule[rule.customType]
+                    }
+                }
+                return rule
+            })
+
+            // item render
+            const formItemComponent = 'Column.' + upperFirst(c.valueType as string)
+            if (container.check(formItemComponent)) {
+                const Component = lazy(container.get(formItemComponent))
+                c.renderFormItem = (schema, config, form) =>
+                    <Suspense fallback={<Spin/>}>
+                        <Component config={config}
+                                   form={form}
+                                   fieldProps={c.fieldProps}
+                                   key={c.title as string}
+                                   rules={c.formItemProps?.rules}
+                                   dataIndex={c.dataIndex}
+                        ></Component>
+                    </Suspense>
+            }
+            // readonly render
+            const readonlyComponent = 'Column.Readonly.' + upperFirst(c.valueType as string)
+            if (container.check(readonlyComponent)) {
+                const Component = lazy(container.get(readonlyComponent))
+                c.render = (dom, entity, index, action, schema) =>
+                    <Suspense fallback={<Spin/>}>
+                        <Component key={c.title as string}
+                                   entity={entity}
+                                   index={index}
+                                   action={action}
+                                   schema={schema}
+                                   dom={dom}
+                        ></Component>
+                    </Suspense>
+            }
+
+            commonHandler(c)
+            if (container.schemaHandler[c.valueType as string]) {
+                return container.schemaHandler[c.valueType as string](c)
+            }
+
+            return c
+        }) || []) as ProFormColumnsType[])
+
+        setInitialized(true)
+    }, []);
+
+    const modalContext = useContext(ModalContext)
+    const tableContext = useContext(TableContext)
+
+    const handleAfterAction = async (req?: SubmitRequestType) => {
+        if (req?.afterAction?.includes('tableReload')) {
+            if (modalContext.contexts) {
+                modalContext.setAfterClose(() => {
+                    modalContext.contexts?.tableContext?.actionRef.reload()
+                })
+            }
+            if (tableContext.actionRef) {
+                await tableContext.actionRef.reload()
+            }
+        }
+        if (req?.afterAction?.includes('closeModal') && modalContext.inModal) {
+            modalContext.closeModal()
+        }
+    }
+
+    const onFinish = async (values: any) => {
+        if (props.submitRequest) {
+            setLoading(true)
+            try {
+                await http({
+                    method: props.submitRequest.method,
+                    url: props.submitRequest.url,
+                    data: Object.assign({}, props.submitRequest.data, values),
+                    headers: props.submitRequest.headers,
+                })
+
+                handleAfterAction(props.submitRequest)
+            } finally {
+                setLoading(false)
+            }
+        }
+    }
+
+    return <>
+        <Row justify={'center'}>
+            <Col sm={24} md={22} lg={20}>
+                <FormContext.Provider value={{
+                    formRef: formRef,
+                }}>
+                    {!initialized
+                        ? <ProSkeleton type={"list"} list={2}></ProSkeleton>
+                        : <BetaSchemaForm columns={columns}
+                                          colProps={props.colProps}
+                                          readonly={props.readonly}
+                                          grid={true}
+                                          loading={loading}
+                                          formRef={formRef}
+                                          initialValues={props.initialValues}
+                                          onFinish={onFinish}
+                                          submitter={{
+                                              render: () => [
+                                                  <Actions key={'actions'} loading={loading}
+                                                           actions={props.actions}></Actions>
+                                              ]
+                                          }}
+                        ></BetaSchemaForm>
+                    }
+                </FormContext.Provider>
+            </Col>
+        </Row>
+    </>
+}

package/components/FormContext.ts

@@ -0,0 +1,8 @@
+import {ProFormInstance} from "@ant-design/pro-components";
+import {createContext, MutableRefObject} from "react";
+
+export type FormContextProps = {
+    formRef?: MutableRefObject<ProFormInstance | undefined>,
+}
+
+export const FormContext = createContext<FormContextProps>({})