@quansitech/antd-admin 1.0.0

package/components/Layout.tsx

@@ -0,0 +1,237 @@
+import {MenuDataItem, PageContainer, ProLayout} from "@ant-design/pro-components";
+import {App, 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 global from "../lib/global";
+import assign from "lodash/assign";
+
+export default function ({children}: {
+    children: React.ReactNode
+}) {
+
+    const pageProps = usePage<{
+        layoutProps: LayoutProps,
+    }>().props
+
+    const layoutProps = pageProps.layoutProps
+    const {modal, notification, message} = App.useApp()
+    const contentRef = useRef<HTMLDivElement>(null)
+
+    const [props, setProps] = useState<LayoutProps>({
+        title: '',
+        metaTitle: '',
+        topMenuActiveKey: '',
+        menuActiveKey: '',
+        loading: false,
+        topMenu: [],
+        menuList: [],
+        logo: '',
+        userMenu: [],
+    })
+
+    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 [pageTitle, setPageTitle] = 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) {
+            setPageTitle(pageProps.layoutProps.metaTitle + ' - ' + title)
+            assignProps({
+                metaTitle: pageProps.layoutProps.metaTitle + ' - ' + title
+            })
+        } else {
+            setPageTitle(title as string)
+            assignProps({
+                metaTitle: title
+            })
+        }
+    }, [pageProps]);
+
+
+    useEffect(() => {
+        console.log(pageProps)
+
+        global.modal = modal
+        global.notification = notification
+        global.message = message
+
+        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)
+
+        // 设置内容高度
+        if (contentRef.current) {
+            contentRef.current.style.minHeight = (window.innerHeight - 200) + 'px'
+        }
+
+    }, [])
+
+
+    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
+                    })
+                }
+            })
+        }
+    }
+
+    return <>
+        <LayoutContext.Provider value={{
+            assignProps,
+            props,
+        }}>
+            <ProLayout title={props.title}
+                       loading={props.loading}
+                       layout="mix"
+                       route={route}
+                       fixSiderbar={true}
+                       logo={props.logo}
+                       headerContentRender={headerContentRender}
+                       pageTitleRender={p => pageTitle}
+                       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={props.metaTitle}>
+                    <div ref={contentRef}>{children}</div>
+                </PageContainer>
+            </ProLayout>
+        </LayoutContext.Provider>
+    </>
+}

package/components/LayoutContext.ts

@@ -0,0 +1,26 @@
+import {createContext} from "react";
+import {MenuDataItem} from "@ant-design/pro-components";
+
+declare type LayoutContextValue = {
+    assignProps: (props: LayoutProps) => void,
+    props: LayoutProps,
+}
+
+export declare type LayoutProps = {
+    title?: string,
+    metaTitle?: string,
+    topMenuActiveKey?: string,
+    menuActiveKey?: string,
+    loading?: boolean,
+    topMenu?: { name: string, key: string }[],
+    menuList?: MenuDataItem[],
+    logo?: string,
+    userMenu?: {
+        title: string,
+        url: string,
+        type: string,
+
+    }[]
+}
+
+export const LayoutContext = createContext<LayoutContextValue>({} as LayoutContextValue)

package/components/ModalContext.ts

@@ -0,0 +1,16 @@
+import {createContext} from "react";
+
+export type ModalContextProps = {
+    inModal: boolean,
+    closeModal: () => void,
+    contexts?: Record<string, any>
+    setAfterClose(callback: () => void): void
+}
+
+export const ModalContext = createContext<ModalContextProps>({
+    inModal: false,
+    closeModal: () => {
+    },
+    setAfterClose: (fn: Function) => {
+    },
+})

package/components/Table/Action/Button.tsx

@@ -0,0 +1,89 @@
+import {Button, Popconfirm} from "antd";
+import {useContext, useEffect, useState} from "react";
+import {TableContext} from "../../TableContext";
+import http from "../../../lib/http";
+import {modal, routerNavigateTo} from "../../../lib/helpers";
+import {TableActionProps} from "./types";
+
+export default function (props: TableActionProps & {
+    props: Record<string, any>,
+    link?: {
+        url: string,
+    },
+    request?: RequestOptions,
+    modal?: ModalOptions,
+}) {
+    const tableContext = useContext(TableContext)
+
+    const onClick = async () => {
+        const rowKey = tableContext.getTableProps().rowKey
+        if (props.link) {
+            routerNavigateTo(props.link.url)
+            return
+        }
+
+        if (props.request) {
+            setLoading(true)
+            const data = props.request.data || {}
+            if (props.relateSelection) {
+                data.selection = props.selectedRows?.map(item => item[rowKey])
+                for (const key in data) {
+                    if (typeof data[key] !== 'string') {
+                        continue
+                    }
+                    const matches = data[key].match(/^__(\w+)__$/)
+                    if (!matches) {
+                        continue
+                    }
+                    data[key] = props.selectedRows?.map(item => item[matches[1]])
+                }
+            }
+            try {
+                await http({
+                    url: props.request.url,
+                    method: props.request.method,
+                    headers: props.request.headers || {},
+                    data: data,
+                })
+            } finally {
+                setLoading(false)
+            }
+            return
+        }
+
+        if (props.modal) {
+            await modal(props.modal)
+            return
+        }
+
+        await tableContext.actionRef?.reload()
+    }
+
+    const [loading, setLoading] = useState(false)
+
+    const [disabled, setDisabled] = useState(props.props.disabled)
+
+    useEffect(() => {
+        if (!props.relateSelection) {
+            return
+        }
+        setDisabled(props.selectedRows?.length === 0)
+
+    }, [props.selectedRows]);
+
+
+    const ButtonComponent = () => {
+        if (props.request?.confirm) {
+            return <Popconfirm title={props.request.confirm} onConfirm={onClick}>
+                <Button loading={loading} {...props.props} disabled={disabled}>{props.title}</Button>
+            </Popconfirm>
+        } else {
+            return <Button loading={loading} onClick={onClick} {...props.props}
+                           disabled={disabled}>{props.title}</Button>
+        }
+    }
+
+    return <>
+        <ButtonComponent></ButtonComponent>
+    </>
+}

package/components/Table/Action/StartEditable.tsx

@@ -0,0 +1,59 @@
+import {Button, ButtonProps, Space} from "antd";
+import {TableContext} from "../../TableContext";
+import {useContext, useState} from "react";
+import http from "../../../lib/http";
+import {TableActionProps} from "./types";
+
+export default function (props: TableActionProps & {
+    props: ButtonProps,
+    saveRequest: {
+        url: string,
+        method: string,
+    },
+}) {
+    const tableContext = useContext(TableContext)
+
+    const onStartClick = () => {
+        const rowKey = tableContext.getTableProps().rowKey
+        tableContext.getTableProps().dataSource.map(item => {
+            tableContext.actionRef?.startEditable(item[rowKey], item)
+        })
+    }
+
+    const onCancelClick = () => {
+        const rowKey = tableContext.getTableProps().rowKey
+        tableContext.getTableProps().dataSource.map(item => {
+            tableContext.actionRef?.cancelEditable(item[rowKey])
+        })
+    }
+
+    const [loading, setLoading] = useState(false)
+
+    const onSaveClick = async () => {
+        setLoading(true)
+
+        try {
+            await http({
+                method: props.saveRequest.method,
+                url: props.saveRequest.url,
+                data: tableContext.getEditedValues(),
+            })
+
+            await tableContext.actionRef?.reload()
+        } finally {
+            setLoading(false)
+        }
+        onCancelClick()
+    }
+
+    return <>
+        {tableContext.editableKeys.length > 0
+            ?
+            <Space>
+                <Button loading={loading} type={'primary'} onClick={onSaveClick}>保存</Button>
+                <Button danger={true} onClick={onCancelClick}>取消</Button>
+            </Space>
+            : <Button {...props.props} onClick={onStartClick}>{props.title}</Button>
+        }
+    </>
+}

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

@@ -0,0 +1,7 @@
+export type TableActionProps = {
+    type: string,
+    title: string,
+    props?: Record<string, any>,
+    relateSelection?: boolean,
+    selectedRows?: any[],
+}

package/components/Table/Option/Link.tsx

@@ -0,0 +1,68 @@
+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>
+    </>
+}

package/components/Table/Option/types.d.ts

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

package/components/Table/ToolbarActions.tsx

@@ -0,0 +1,39 @@
+import {lazy, useEffect, useState} from "react";
+import container from "../../lib/container";
+import {ReactComponentLike} from "prop-types";
+import {Space} from "antd";
+import {TableActionProps} from "./Action/types";
+import upperFirst from "lodash/upperFirst";
+
+export default function ({
+                             actions,
+                             selectedRows,
+                         }: {
+    actions: TableActionProps[],
+    selectedRows?: any[]
+}) {
+    const [components, setComponents] = useState<{
+        Component: ReactComponentLike,
+        props: TableActionProps,
+    }[]>([])
+
+    useEffect(() => {
+        setComponents(actions.map(a => {
+            return {
+                Component: lazy(container.get('Table.Action.' + upperFirst(a.type))),
+                props: {
+                    ...a,
+                },
+            }
+        }))
+
+    }, []);
+
+    return <>
+        <Space wrap={true}>
+            {components.map(c => (
+                <c.Component key={c.props.title} {...c.props} selectedRows={selectedRows}></c.Component>
+            ))}
+        </Space>
+    </>
+}

package/components/Table.scss

@@ -0,0 +1,7 @@
+//.qs-antd-table {
+//  table thead {
+//    position: sticky;
+//    top: 50px;
+//    z-index: 1;
+//  }
+//}