@quansitech/antd-admin 1.0.0

package/components/Table.tsx

@@ -0,0 +1,279 @@
+import React, {lazy, Suspense, useContext, useEffect, useRef, useState} from "react";
+import {
+    ActionType,
+    FormInstance,
+    ProColumnType,
+    ProSkeleton,
+    ProTable,
+    ProTableProps
+} from "@ant-design/pro-components";
+import type {SortOrder} from "antd/lib/table/interface";
+import {TablePaginationConfig} from "antd/es/table";
+import isArray from "lodash/isArray"
+import upperFirst from "lodash/upperFirst"
+import {TableContext} from "./TableContext";
+import ToolbarActions from "./Table/ToolbarActions";
+import container from "../lib/container";
+import {TableActionProps} from "./Table/Action/types";
+import http from "../lib/http";
+import {Spin} from "antd";
+import "./Table.scss"
+import {ModalContext} from "./ModalContext";
+import cloneDeep from "lodash/cloneDeep";
+import uniqueId from "lodash/uniqueId";
+import {commonHandler} from "../lib/schemaHandler";
+
+export type TableProps = ProTableProps<any, any> & {
+    columns: ProColumnType[],
+    dataSource: any[],
+    pagination: TablePaginationConfig & {
+        paramName?: string,
+    },
+    rowKey: string,
+    defaultSearchValue?: Record<string, any>,
+    actions: TableActionProps[],
+    searchUrl: string,
+    search?: boolean,
+}
+
+export default function (props: TableProps) {
+
+
+    const request = async (params: Record<string, any> & {
+        pageSize: number,
+        current: number
+    }, sort: Record<string, SortOrder>, filter: Record<string, (string | number)[] | null>) => {
+        setLoading(true)
+        const data: Record<string, any> = {
+            ...params,
+            ...filter,
+            sort,
+        }
+        if (props.pagination) {
+            data[props.pagination.paramName || 'page'] = data.current
+            delete data.current
+            delete data.pageSize
+        }
+
+        setEditableKeys([])
+        setEditableValues([])
+
+        try {
+            const res = await http.get(props.searchUrl, {
+                params: data,
+                headers: {
+                    'X-Table-Search': '1'
+                }
+            })
+
+            if (res.data.pagination) {
+                setPagination({
+                    ...res.data.pagination,
+                    current: params.current,
+                })
+            }
+            return {
+                data: res.data.dataSource || [],
+                success: true,
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const formRef = useRef<FormInstance>()
+    const actionRef = useRef<ActionType>()
+    const [editableKeys, setEditableKeys] = useState<React.Key[]>(() => [])
+    const [columns, setColumns] = useState<ProColumnType[]>([])
+    const [selectedRows, setSelectedRows] = useState<any[]>([])
+    const [editableValues, setEditableValues] = useState<Record<string, any>[]>([])
+    const [loading, setLoading] = useState(false)
+    const [initialized, setInitialized] = useState(false)
+    const [pagination, setPagination] = useState<TablePaginationConfig>()
+    const [dataSource, setDataSource] = useState<any[]>([])
+    const [sticky, setSticky] = useState<TableProps['sticky']>(true)
+
+    const modalContext = useContext(ModalContext)
+
+    useEffect(() => {
+        setPagination(props.pagination as TablePaginationConfig || false)
+        setDataSource(postData(props.dataSource))
+
+        // 重新定义列
+        setColumns(cloneDeep(props.columns)?.map((c: ProColumnType) => {
+            c.key = c.dataIndex as string
+
+            // 列render
+            const renderComponent = 'Column.Readonly.' + upperFirst(c.valueType as string)
+            if (container.check(renderComponent)) {
+                const Component = lazy(container.get(renderComponent))
+                c.render = (dom, record, _, action) =>
+                    <Suspense fallback={<Spin/>}>
+                        <Component {...c}
+                                   key={c.title as string}
+                                   record={record}
+                        ></Component>
+                    </Suspense>
+            }
+
+            // 列查询及编辑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}
+                                   schema={schema}
+                                   fieldProps={c.fieldProps}
+                                   key={c.title as string}
+                        ></Component>
+                    </Suspense>
+                )
+            }
+
+            if (props.defaultSearchValue?.[c.dataIndex as string] !== undefined) {
+                c.initialValue = props.defaultSearchValue[c.dataIndex as string]
+            }
+
+            commonHandler(c)
+            if (container.schemaHandler[c.valueType as string]) {
+                return container.schemaHandler[c.valueType as string](c) as ProColumnType
+            }
+
+            return c
+        }))
+
+        setLoading(false)
+        setInitialized(true)
+
+        if (!modalContext.inModal) {
+            setSticky({
+                offsetHeader: document.querySelector('.ant-layout-header')?.clientHeight || 56,
+            })
+        }
+
+    }, []);
+
+    const postData = (data: any[]) => {
+        if (!isArray(data)) {
+            return data
+        }
+
+        props.columns.map(column => {
+            switch (column.valueType) {
+                case 'dateTime':
+                    data = data.map(row => {
+                        const v = row[column.dataIndex]
+                        if (parseInt(v) == v && v < 4102444800) {
+                            row[column.dataIndex] *= 1000
+                        }
+                        return row
+                    })
+                    break;
+            }
+        })
+
+        return data.map(row => {
+            if (typeof row[props.rowKey] === 'undefined') {
+                row[props.rowKey] = uniqueId('row_')
+            }
+            return row
+        })
+    }
+
+
+    return <>
+        <TableContext.Provider value={{
+            getTableProps: () => props,
+            getEditedValues: () => editableValues,
+            editableKeys: editableKeys,
+            actionRef: actionRef.current,
+            formRef: formRef.current,
+        }}>
+            {!initialized && <ProSkeleton type={"list"} list={2}></ProSkeleton>}
+            <ProTable rowKey={props.rowKey}
+                      style={{display: initialized ? 'block' : 'none'}}
+                      tableClassName={'qs-antd-table'}
+                      columns={columns}
+                      onDataSourceChange={setDataSource}
+                      dataSource={dataSource}
+                      pagination={pagination}
+                      loading={loading}
+                      scroll={{x: true}}
+                      postData={postData}
+                      sticky={sticky}
+                      form={{
+                          onValuesChange(changedValues) {
+                              const key = Object.keys(changedValues)[0]
+                              const c = columns.find(c => c.dataIndex === key) as ProColumnType & {
+                                  searchOnChange: boolean
+                              }
+                              if (!c) {
+                                  return
+                              }
+                              // 是否立即搜索
+                              if (c.searchOnChange) {
+                                  formRef.current?.submit()
+                              }
+                          }
+                      }}
+                      rowSelection={props.rowSelection && {
+                          alwaysShowAlert: false,
+                          selectedRowKeys: selectedRows.map(item => item[props.rowKey]),
+                          onSelect(record, selected) {
+                              if (selected) {
+                                  setSelectedRows([...selectedRows, record])
+                              } else {
+                                  setSelectedRows(selectedRows.filter(item => item[props.rowKey] !== record[props.rowKey]))
+                              }
+                          },
+                          onChange(selectedRowKeys, newSelectedRows, info) {
+                              switch (info.type) {
+                                  case 'all':
+                                      if (newSelectedRows.length) {
+                                          setSelectedRows([
+                                              ...selectedRows,
+                                              ...newSelectedRows.filter(item => !selectedRows.find(s => s[props.rowKey] == item[props.rowKey]))
+                                          ])
+                                      } else {
+                                          setSelectedRows(selectedRows.filter(item => !props.dataSource.find(dr => dr[props.rowKey] == item[props.rowKey])))
+                                      }
+                                      break;
+                                  case 'none':
+                                      setSelectedRows([])
+                                      break;
+                              }
+                          },
+                      }}
+                      toolbar={{
+                          filter: true,
+                      }}
+                      toolBarRender={(action) => [
+                          <ToolbarActions key={'actions'} actions={props.actions}
+                                          selectedRows={selectedRows}></ToolbarActions>
+                      ]}
+                      editable={{
+                          type: 'multiple',
+                          editableKeys: editableKeys,
+                          onChange: setEditableKeys,
+                          onValuesChange(record) {
+                              setEditableValues([
+                                  ...editableValues.filter(item => item[props.rowKey] !== record[props.rowKey]),
+                                  record
+                              ])
+                          }
+                      }}
+                      cardBordered
+                      manualRequest={true}
+                      request={request}
+                      formRef={formRef}
+                      actionRef={actionRef}
+                      search={props.search}
+                      dateFormatter={props.dateFormatter}
+            ></ProTable>
+
+        </TableContext.Provider>
+    </>
+}
+

package/components/TableContext.ts

@@ -0,0 +1,14 @@
+import React, {createContext} from "react";
+import {ActionType} from "@ant-design/pro-components";
+import {TableProps} from "./Table";
+import {FormInstance} from "antd/lib/form";
+
+type TableContextValue = {
+    getTableProps: () => TableProps,
+    getEditedValues: () => Record<string, any>[],
+    editableKeys: React.Key[],
+    actionRef?: ActionType,
+    formRef?: FormInstance,
+}
+
+export const TableContext = createContext({} as TableContextValue)

package/components/Tabs.tsx

@@ -0,0 +1,72 @@
+import {Tabs} from "antd";
+import {lazy, Suspense, useEffect, useState} from "react";
+import type {Tab} from 'rc-tabs/lib/interface';
+import container from "../lib/container";
+import {routerNavigateTo} from "../lib/helpers";
+import upperFirst from "lodash/upperFirst";
+import {ProSkeleton} from "@ant-design/pro-components";
+
+type TabProps = {
+    title: string,
+    url?: string,
+    pane?: {
+        component: 'form' | 'table',
+        props: any,
+    }
+}
+
+export type TabsPageType = {
+    tabs: Record<string, TabProps>,
+    defaultActiveKey?: string,
+}
+
+export default function (props: TabsPageType) {
+    const [items, setItems] = useState<Tab[]>([]);
+    const [activeKey, setActiveKey] = useState<string>();
+
+    useEffect(() => {
+        setActiveKey(props.defaultActiveKey || Object.keys(props.tabs)[0])
+
+        setItems(Object.keys(props.tabs).map(key => {
+            const t = props.tabs[key]
+
+            if (!t.pane) {
+                return {
+                    key,
+                    label: t.title,
+                    children: <>
+                        <ProSkeleton list={2}></ProSkeleton>
+                    </>
+                }
+            }
+
+            const Component = lazy(() => container.get('Tab.Pane.' + upperFirst(t.pane?.component)))
+
+            return {
+                key,
+                label: t.title,
+                children: <>
+                    <Suspense>
+                        <Component {...t.pane.props}></Component>
+                    </Suspense>
+                </>
+            }
+        }))
+    }, []);
+
+    const onChange = (key: string) => {
+        setActiveKey(key)
+
+        const tab = props.tabs[key]
+        if (tab.url) {
+            routerNavigateTo(tab.url)
+        }
+    }
+
+    return <>
+        <Tabs items={items}
+              onChange={onChange}
+              activeKey={activeKey}
+        ></Tabs>
+    </>
+}

package/lib/container.ts

@@ -0,0 +1,82 @@
+import {schemaHandler} from "./schemaHandler";
+
+const components: Record<string, any> = {}
+
+const container = {
+    register(name: string, componentLoader: any) {
+        if (this.check(name)) {
+            throw new Error(`Component ${name} already registered`)
+        }
+        components[name] = componentLoader
+    },
+    get(name: string) {
+        if (!this.check(name)) {
+            throw new Error(`Component ${name} is not registered`)
+        }
+        return components[name]
+    },
+    check(name: string) {
+        return !!components[name]
+    },
+    schemaHandler,
+};
+
+function autoRegister(prefix: string, components: Record<string, () => Promise<any>>) {
+    for (const [key, value] of Object.entries(components)) {
+        const name = key.split('/').pop()?.split('.').shift()
+        container.register(prefix + name, value)
+    }
+}
+
+// -------- 通用 -----------
+{
+    const columnRender = import.meta.glob('../components/Column/*.tsx')
+    autoRegister('Column.', columnRender)
+
+    // readonly render
+    const columnReadonlyRender = import.meta.glob('../components/Column/Readonly/*.tsx')
+    autoRegister('Column.Readonly.', columnReadonlyRender)
+}
+
+// -------- 弹窗 -----------
+{
+    container.register('Modal.Table', import('../components/Table'))
+    container.register('Modal.Form', import('../components/Form'))
+}
+
+// -------- Tabs -----------
+{
+    container.register('Tab.Pane.Table', import('../components/Table'))
+    container.register('Tab.Pane.Form', import('../components/Form'))
+}
+
+// -------- 表格 -----------
+{
+    // options render
+    const optionsRender = import.meta.glob('../components/Table/Option/*.tsx')
+    autoRegister('Table.Option.', optionsRender)
+
+    // action render
+    const actionRender = import.meta.glob('../components/Table/Action/*.tsx')
+    autoRegister('Table.Action.', actionRender)
+}
+
+// -------- 表单 -----------
+{
+
+    // formAction render
+    const formActionRender = import.meta.glob('../components/Form/Action/*.tsx')
+    autoRegister('Form.Action.', formActionRender)
+}
+
+
+;((globalThis: any) => {
+    if (globalThis.$qsContainer) {
+        return;
+    }
+
+    globalThis.$qsContainer = container
+
+})(window)
+
+export default container

package/lib/customRule.ts

@@ -0,0 +1,10 @@
+import {RuleObject, StoreValue} from "rc-field-form/lib/interface";
+
+const customRule: Record<string, (rule: RuleObject, value: StoreValue, callback: (error?: string) => void) => any> = {
+    notInEnum(rule, value) {
+        return !rule.enum?.includes(value);
+
+    }
+}
+
+export default customRule

package/lib/global.ts

@@ -0,0 +1,11 @@
+import {MessageInstance} from "antd/es/message/interface";
+import {ModalStaticFunctions} from "antd/es/modal/confirm";
+import {NotificationInstance} from "antd/es/notification/interface";
+
+const global = {} as {
+    message: MessageInstance,
+    modal: Omit<ModalStaticFunctions, 'warn'>,
+    notification: NotificationInstance,
+}
+
+export default global

package/lib/helpers.tsx

@@ -0,0 +1,150 @@
+import {router} from "@inertiajs/react";
+import {VisitOptions} from "@inertiajs/core/types/types";
+import Schema from '@rc-component/async-validator';
+import {Rules, ValidateError, ValidateFieldsError, Values} from "@rc-component/async-validator/lib/interface";
+import {Spin} from "antd";
+import http from "./http";
+import container from "./container";
+import upperFirst from "lodash/upperFirst";
+import {lazy, Suspense} from "react";
+import global from "./global";
+import {ModalContext} from "../components/ModalContext";
+
+export function replaceUrl(url: string, params: any) {
+    return url.replace(/__([\w]+)__/g, (match, key) => {
+        return params[key] || match;
+    })
+}
+
+export function replaceParams(params: Record<string, any>, data: Record<string, any>) {
+    if (typeof params !== 'object') {
+        return params;
+    }
+    const res = Object.assign({}, params);
+    Object.keys(params).forEach(key => {
+        if (typeof params[key] === 'string') {
+            const m = params[key].match(/^__(\w+)__$/)
+            if (m) {
+                res[key] = data[m[1]];
+            }
+        }
+    })
+    return res;
+}
+
+export function routerNavigateTo(url: string, config?: VisitOptions) {
+    return router.visit(url, {
+        ...config,
+    })
+}
+
+export function handleRules(dataRules: Rules, data: any) {
+    return new Promise(resolve => {
+        const validator = new Schema(dataRules);
+        validator.validate(data, (errors: ValidateError[] | null, fields: ValidateFieldsError | Values) => {
+            if (errors) {
+                resolve(false);
+                return;
+            }
+            resolve(true);
+        })
+
+    })
+
+}
+
+export async function asyncFilter(arr: any[], predicate: (item: any) => PromiseLike<any>) {
+    return await Promise.all(arr.map(predicate))
+        .then((results) => arr.filter((_v, index) => results[index]))
+}
+
+export function modalShow(type: string, props: any) {
+
+}
+
+export function filterObjectKeys(obj: Record<string, any>, keysToKeep: string[]) {
+    if (typeof obj !== 'object' || !obj) {
+        return obj;
+    }
+    return Object.keys(obj)
+        .filter(key => !keysToKeep.includes(key))
+        .reduce((newObj, key) => {
+            newObj[key] = obj[key];
+            return newObj;
+        }, {} as Record<string, any>);
+}
+
+
+export function createScript(url: string) {
+    let scriptTags = window.document.querySelectorAll('script')
+    let len = scriptTags.length
+    let i = 0
+    let _url = window.location.origin + url
+    return new Promise((resolve, reject) => {
+        for (i = 0; i < len; i++) {
+            var src = scriptTags[i].src
+            if (src && src === _url) {
+                scriptTags[i].parentElement?.removeChild(scriptTags[i])
+            }
+        }
+
+        let node = document.createElement('script')
+        node.src = url
+        node.onload = resolve
+        document.body.appendChild(node)
+    })
+}
+
+export async function modal(options: ModalOptions) {
+    let props = options.content.props
+    if (options.content.url) {
+        const res = await http({
+            method: 'get',
+            url: options.content.url,
+            headers: {
+                'X-Modal': '1',
+            }
+        })
+        if (typeof res.data === 'string') {
+            throw new Error('modal response is not vail')
+        }
+        props = res.data
+    }
+    if (!props) {
+        throw new Error('modal props is empty')
+    }
+    const Component = lazy(() => container.get('Modal.' + upperFirst(options.content.type)))
+
+    let afterClose = () => {
+    }
+    const modal = global.modal.info({
+        ...options,
+        closable: true,
+        icon: null,
+        destroyOnClose: true,
+        footer: null,
+        content: (
+            <Suspense fallback={<Spin/>}>
+                <ModalContext.Provider value={{
+                    inModal: true,
+                    closeModal: () => {
+                        modal?.destroy()
+                    },
+                    contexts: options.contexts,
+                    setAfterClose(callback: () => void) {
+                        afterClose = callback
+                    }
+                }}>
+                    <Component {...props} />
+                </ModalContext.Provider>
+            </Suspense>
+        ),
+        afterClose: () => {
+            afterClose && afterClose()
+        },
+    })
+    return {
+        destroy: modal.destroy,
+        update: modal.update,
+    }
+}

package/lib/http.ts

@@ -0,0 +1,74 @@
+import axios, {AxiosError} from "axios";
+import {routerNavigateTo} from "./helpers";
+import global from "./global";
+
+/**
+ * fetchOptions.noHandle 成功时不处理 url 和 info
+ */
+
+const http = axios.create({})
+
+http.interceptors.request.use(config => {
+    config.headers['Accept'] = 'application/json'
+    // 设置异步模式
+    config.headers['X-Requested-With'] = 'XMLHttpRequest'
+    return config
+})
+
+http.interceptors.response.use(response => {
+    const checkInfo = (data: { status?: number, info?: string }) => {
+        if (!data?.info) {
+            return false
+        }
+        switch (data.status) {
+            case 0:
+                global.notification.warning({
+                    message: data.info
+                })
+                break
+            default:
+                global.notification.success({
+                    message: data.info
+                })
+        }
+        return true
+    }
+
+    if (response.config.fetchOptions?.noHandle) {
+        return response
+    }
+    const showInfo = checkInfo(response.data)
+
+    if (response.data.url) {
+        setTimeout(() => {
+            routerNavigateTo(response.data.url)
+        }, showInfo ? 2000 : 0)
+    }
+    if (response.data.status == 0) {
+        return Promise.reject(response.data.info)
+    }
+    return response
+}, error => {
+    if (error instanceof AxiosError) {
+        if (error.response?.headers['content-type'].includes('application/json')) {
+            global.notification.error({
+                message: error.response?.data?.info || '请求错误，请稍候重试'
+            })
+        } else if (error.response?.headers['content-type'].includes('text/html')) {
+            const parser = new DOMParser;
+            const doc = parser.parseFromString(error.response?.data, 'text/html');
+            const title = doc.querySelector('title')?.textContent;
+
+            global.notification.error({
+                message: title || '请求错误，请稍候重试'
+            })
+        }
+    } else {
+        global.notification.error({
+            message: '请求错误，请稍候重试'
+        })
+    }
+    return Promise.reject(error)
+})
+
+export default http