@quansitech/antd-admin 1.0.0 → 1.1.0

package/components/Form.tsx

@@ -1,171 +1,177 @@
-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>
-    </>
+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 {cloneDeep, upperFirst} from "lodash";
+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 customRule from "../lib/customRule";
+import {ModalContext} from "./ModalContext";
+import {TableContext} from "./TableContext";
+import {commonHandler} from "../lib/schemaHandler";
+import {Rule} from "antd/es/form";
+
+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,
+    extraRenderValues?: Record<string, any>,
+}) {
+
+    const [columns, setColumns] = useState<ProFormColumnsType[]>([])
+    const formRef = useRef<ProFormInstance>()
+    const [initialized, setInitialized] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const hiddenField = useRef<Record<string, any>>({})
+
+    useEffect(() => {
+        setColumns((cloneDeep(props.columns)?.map((c: ProFormColumnsType & {
+            formItemProps?: {
+                rules?: (Rule & {
+                    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 && customRule[rule.customType]) {
+                    rule.validator = customRule[rule.customType]
+                }
+                return rule
+            })
+
+            // hideInForm时增加
+            if (c.hideInForm) {
+                hiddenField.current[c.dataIndex as string] = props.initialValues?.[c.dataIndex as string]
+                return null
+            }
+
+            // 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
+        }).filter(c => !!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({}, hiddenField.current, 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,
+                    extraRenderValues: props.extraRenderValues,
+                }}>
+                    {!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

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

package/components/Layout/New.tsx

@@ -0,0 +1,252 @@
+import {MenuDataItem, PageContainer, ProConfigProvider, ProLayout} from "@ant-design/pro-components";
+import {Button, Dropdown, Menu, Space} from "antd";
+import type {LayoutProps} from "../LayoutContext";
+import {LayoutContext} from "../LayoutContext";
+import {useEffect, useRef, useState} from "react";
+import {usePage} from "@inertiajs/react";
+import {routerNavigateTo} from "../../lib/helpers";
+import {MenuInfo} from "rc-menu/lib/interface";
+import http from "../../lib/http";
+// @ts-ignore
+import {Route} from '@ant-design/pro-layout/lib/typing';
+import {assign} from "lodash";
+import {MoonOutlined, SunOutlined} from "@ant-design/icons";
+
+export default function ({children, pageTitle, siteTitle}: {
+    children: React.ReactNode,
+    pageTitle: string,
+    siteTitle: string,
+}) {
+
+    const pageProps = usePage<{
+        layoutProps: LayoutProps,
+    }>().props
+
+    const layoutProps = pageProps.layoutProps
+    const contentRef = useRef<HTMLDivElement>(null)
+
+    const [props, setProps] = useState<LayoutProps>({
+        title: '',
+        metaTitle: '',
+        topMenuActiveKey: '',
+        menuActiveKey: '',
+        loading: false,
+        topMenu: [],
+        menuList: [],
+        logo: '',
+        userMenu: [],
+    })
+    const [theme, setTheme] = useState<'light' | 'realDark'>('light')
+
+    const assignProps = (newProps: LayoutProps) => {
+        setProps(assign(props, newProps))
+    }
+
+    const headerContentRender = () => {
+        return <>
+            <Menu items={props.topMenu}
+                  mode={'horizontal'}
+                  activeKey={props.topMenuActiveKey}
+            />
+        </>
+    }
+
+    const [openKeys, setOpenKeys] = useState<string[]>([])
+    const [route, setRoute] = useState<Route>()
+
+    useEffect(() => {
+        function findKeyPath(key: string, list: MenuDataItem[]): string[] {
+            for (let i = 0; i < list.length; i++) {
+                const item = list[i];
+                if (item.key === key) {
+                    return [item.key]
+                } else if (item.children?.length) {
+                    const path = findKeyPath(key, item.children)
+                    if (path?.length) {
+                        return [item.key as string, ...path]
+                    }
+                }
+            }
+            return []
+        }
+
+        if (!props.menuActiveKey) {
+            return
+        }
+        setOpenKeys(findKeyPath(props.menuActiveKey, props.menuList || []))
+
+    }, [props.menuActiveKey]);
+
+    useEffect(() => {
+        if (pageProps.layoutProps?.menuActiveKey) {
+            assignProps({
+                menuActiveKey: pageProps.layoutProps.menuActiveKey
+            })
+        }
+
+        const title = props.title || layoutProps.title
+        if (pageProps.layoutProps?.metaTitle) {
+            assignProps({
+                metaTitle: pageProps.layoutProps.metaTitle + ' | ' + title
+            })
+        } else {
+            assignProps({
+                metaTitle: title
+            })
+        }
+    }, [pageProps.layoutProps]);
+
+
+    useEffect(() => {
+
+        setProps({
+            title: layoutProps.title || '',
+            metaTitle: '',
+            topMenuActiveKey: layoutProps.topMenuActiveKey,
+            menuActiveKey: layoutProps.menuActiveKey,
+            loading: false,
+            topMenu: layoutProps.topMenu,
+            menuList: layoutProps.menuList,
+            logo: layoutProps.logo,
+            userMenu: layoutProps.userMenu,
+        })
+
+        const r = {
+            key: '/',
+            routes: layoutProps.menuList?.map(menu => {
+                return {
+                    name: menu.name,
+                    key: menu.key,
+                    children: menu.children?.map(child => {
+                        return {
+                            name: child.name,
+                            key: child.key
+                        }
+                    })
+                }
+            })
+        }
+
+        setRoute(r)
+
+        // 设置内容高度
+        function onResize() {
+            if (contentRef.current) {
+                contentRef.current.style.minHeight = Math.max(window.innerHeight - 200, 200) + 'px'
+            }
+        }
+
+        onResize()
+        window.addEventListener('resize', onResize)
+        return () => {
+            window.removeEventListener('resize', onResize)
+        }
+
+    }, [])
+
+
+    const onMenuClick = (info: MenuInfo) => {
+        const keyPath = info.keyPath.reverse()
+        let menu: MenuDataItem | undefined = props.menuList?.find(menu => menu.key === keyPath[0]);
+        for (let i = 1; i < keyPath.length; i++) {
+            menu = menu?.children?.find(m => m.key === keyPath[i])
+        }
+        if (menu?.path) {
+            assignProps({
+                loading: true
+            })
+            routerNavigateTo(menu.path, {
+                onSuccess() {
+                    assignProps({
+                        menuActiveKey: info.key
+                    })
+                },
+                onFinish() {
+                    assignProps({
+                        loading: false
+                    })
+                }
+            })
+        }
+    }
+
+    const actionsRender = () => <>
+        <Space>
+            <Button type={'text'} onClick={() => {
+                setTheme(theme === 'light' ? 'realDark' : 'light')
+            }}>
+                {theme === 'realDark' ? <MoonOutlined/> : <SunOutlined/>}
+            </Button>
+        </Space>
+    </>
+
+    return <>
+        <LayoutContext.Provider value={{
+            assignProps,
+            props,
+        }}>
+            <ProConfigProvider dark={theme === 'realDark'}>
+                <ProLayout title={siteTitle}
+                           loading={props.loading}
+                           layout="mix"
+                           actionsRender={actionsRender}
+                           route={route}
+                           fixSiderbar={true}
+                           logo={props.logo}
+                           headerContentRender={headerContentRender}
+                           pageTitleRender={p => `${pageTitle} | ${siteTitle} 后台管理`}
+                           footerRender={() => <>
+                               <Space>
+                                   <a href="https://www.quansitech.com/" target={'_blank'}>全思科技</a>
+                                   <a href="https://github.com/quansitech/" target={'_blank'}>Github</a>
+                               </Space>
+                           </>}
+                           avatarProps={{
+                               title: 'admin',
+                               render(p, dom) {
+                                   return <>
+                                       <Dropdown menu={{
+                                           items: props.userMenu?.map(menu => {
+                                               return {
+                                                   label: menu.title,
+                                                   key: menu.url,
+                                                   onClick() {
+                                                       switch (menu.type) {
+                                                           case 'open':
+                                                               window.open(menu.url)
+                                                               break;
+                                                           case 'nav':
+                                                               routerNavigateTo(menu.url)
+                                                               break
+                                                           case 'ajax':
+                                                               http.get(menu.url).then(() => {
+                                                                   window.location.reload()
+                                                               })
+                                                               break
+                                                       }
+                                                   }
+                                               }
+                                           }) || [],
+                                       }}>
+                                           {dom}
+                                       </Dropdown>
+                                   </>
+                               }
+                           }}
+                           menuProps={{
+                               activeKey: props.menuActiveKey as string,
+                               selectedKeys: [props.menuActiveKey as string],
+                               openKeys: openKeys,
+                               onClick: onMenuClick,
+                               onOpenChange: setOpenKeys
+                           }}
+                >
+
+                    <PageContainer title={pageTitle}>
+                        <div ref={contentRef}>{children}</div>
+                    </PageContainer>
+                </ProLayout>
+            </ProConfigProvider>
+        </LayoutContext.Provider>
+    </>
+}