Qs-antd-admin

该项目作为qs-cmf的后台前端组件库，基于ant-design-pro

安装

npm install @quansitech/antd-admin

使用参考

valueType列表

参考 ant-design-pro#valueType

自定义组件

对外暴露 container 供外部调用

import container from "@quansitech/antd-admin/lib/container";

container.register('[组件名]', () => import('[组件路径]'));

通用

通用Column Schema

• 组件名前缀：Column.
• 用途：表单项组件（非只读模式）、表格列编辑组件、表格搜索项组件
• 示例：

// [组件.tsx]
import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/types";

export default function (props: ColumnProps) {

    return <>
        组件内容
    </>
}

// [app.tsx]
import container from "@quansitech/antd-admin/lib/container";

container.register('Column.组件名', () => import('[组件路径]'));

• 若要补充组件库，请把组件放compontents/Column/ 目录下

只读Column Schema

• 组件名前缀：Column.Readonly.
• 用途：表单项组件（只读模式）、表格列组件
• 示例：

// [组件.tsx]
import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/Readonly/types";

export default function (props: ColumnProps) {

    return <>
        组件内容
    </>
}

// [app.tsx]
import container from "@quansitech/antd-admin/lib/container";

container.register('Column.Readonly.组件名', () => import('[组件路径]'));

• 若要补充组件库，请把组件放compontents/Column/Readonly/ 目录下

表格Table

工具栏操作组件

• 组件名前缀：Table.Column.Action.
• 示例：

// [组件.tsx]

import {TableActionProps} from "@quansitech/antd-admin/compontents/Table/Action/types";

export default function (props: TableActionProps) {
    return <Button>{props.title}</Button>
}

// [app.tsx]

import container from "@quansitech/antd-admin/lib/container";

container.register('Table.Column.Action.组件名', () => import('[组件路径]'));

• 若要补充组件库，请把组件放compontents/Table/Action/ 目录下

行操作组件

• 组件名前缀：Table.Column.Option
• 示例：

// [组件.tsx]

import {TableColumnOptionProps} from "@quansitech/antd-admin/compontents/Column/Readonly/Action/types";

export default function (props: TableColumnOptionProps) {
    <a onClick={onClick}>{props.title}</a>
}

// [app.tsx]

import container from "@quansitech/antd-admin/lib/container";

container.register('Column.Readonly.Action.组件名', () => import('[组件路径]'));

• 若要补充组件库，请把组件放compontents/Column/Readonly/Action/ 目录下

更新日志

1.1.0

1.增加composer包注册组件机制

在包的composer.json中添加如下配置

{
    // 省略其它配置
    "extra": {
        "qscmf": {
            "antd-admin": {
                "component": {
                    "【container注册位置】": "【目标组件路径】",
                    "Column.Extra": "resourses/js/Component/Extra.tsx"
                }
            }
        }
  }
}