@zat-design/sisyphus-react 4.5.7-beta.1 → 4.5.7-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +9 -11
  2. package/package.json +10 -11
  3. package/dist/ai/components.json +0 -390
  4. package/dist/ai/examples.json +0 -2246
  5. package/dist/ai/manifest.json +0 -15
  6. package/dist/ai/props.json +0 -6256
  7. package/dist/ai/types.json +0 -18827
package/dist/ai/examples.json DELETED
@@ -1,2246 +0,0 @@
1
- {
2
- "schemaVersion": 2,
3
- "version": "4.5.7-beta.1",
4
- "examples": [
5
- {
6
- "id": "ProCollapse/demos/collapse.tsx",
7
- "component": "ProCollapse",
8
- "file": "demos/collapse.tsx",
9
- "title": "基本使用",
10
- "note": "",
11
- "source": "/**\n * iframe: 600\n */\n\nimport { ProLayout, ProCollapse } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n contentStyle={{\n padding: 16,\n }}\n >\n {children}\n <ProCollapse title=\"默认不折叠\">内容区域</ProCollapse>\n <ProCollapse title=\"默认折叠\" folding>\n 内容区域\n </ProCollapse>\n <ProCollapse>\n 卡片容器\n <ProCollapse title=\"可折叠标题\" level=\"2\" towCollapse>\n ProCollapse在level为2时，通过设置towCollapse可控制是否带收起功能\n </ProCollapse>\n </ProCollapse>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
12
- },
13
- {
14
- "id": "ProCollapse/demos/icon.tsx",
15
- "component": "ProCollapse",
16
- "file": "demos/icon.tsx",
17
- "title": "图标+title",
18
- "note": "",
19
- "source": "/**\n * iframe: 600\n */\n\nimport { ProLayout, ProCollapse } from '@zat-design/sisyphus-react';\nimport { HomeOutlined } from '@ant-design/icons';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n contentStyle={{\n padding: 16,\n }}\n >\n {children}\n <ProCollapse\n icon={\n <img src=\"https://www.logosc.cn/uploads/icon/2021/11/08//8ae39385-745f-4666-93b6-24370743dabe.png\" />\n }\n title=\"图片图标+标题\"\n >\n 内容区域\n </ProCollapse>\n <ProCollapse\n icon={<HomeOutlined style={{ color: '#4181FF' }} />}\n title=\"svg图标+标题\"\n folding\n >\n 内容区域\n </ProCollapse>\n <ProCollapse icon title=\"默认图标+标题\" folding>\n 内容区域\n </ProCollapse>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
20
- },
21
- {
22
- "id": "ProCollapse/demos/nested.tsx",
23
- "component": "ProCollapse",
24
- "file": "demos/nested.tsx",
25
- "title": "嵌套使用",
26
- "note": "",
27
- "source": "/**\n * iframe: 600\n */\n\nimport { ProLayout, ProCollapse } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n contentStyle={{\n padding: 16,\n }}\n >\n {children}\n <ProCollapse title=\"一级标题\">\n 内容区域1\n <ProCollapse title=\"二级标题\" level=\"2\">\n ProCollapse在level为2时，通过设置towCollapse可控制是否带收起功能\n </ProCollapse>\n </ProCollapse>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
28
- },
29
- {
30
- "id": "ProCollapse/demos/extension.tsx",
31
- "component": "ProCollapse",
32
- "file": "demos/extension.tsx",
33
- "title": "一级折叠扩展按钮",
34
- "note": "",
35
- "source": "/**\n * iframe: 600\n */\n\nimport { Button } from 'antd';\nimport { useSetState } from 'ahooks';\nimport { ProLayout, ProCollapse } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n const [{ open }, setState] = useSetState({\n open: true,\n });\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n contentStyle={{\n padding: 16,\n }}\n >\n {children}\n <ProCollapse\n title=\"带扩展按钮的标题3\"\n extra={\n <Button\n type=\"default\"\n onClick={(event) => {\n // 防止按钮收起\n event.stopPropagation();\n }}\n >\n 编辑按钮\n </Button>\n }\n >\n 默认手风琴\n </ProCollapse>\n <ProCollapse title=\"手动控制的折叠\" open={open}>\n 默认手风琴\n </ProCollapse>\n <Button\n type=\"default\"\n onClick={(event) => {\n setState({ open: !open });\n }}\n >\n 开关\n </Button>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
36
- },
37
- {
38
- "id": "ProCollapse/demos/twoCollapse.tsx",
39
- "component": "ProCollapse",
40
- "file": "demos/twoCollapse.tsx",
41
- "title": "二级折叠",
42
- "note": "",
43
- "source": "/**\n * iframe: 600\n * title: 二级折叠\n * desc: |\n * 二级折叠通常用于折叠组件的分层使用，通常被嵌套与 1 级标题内\n */\n\nimport { ProLayout, ProCollapse } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n const titleList = [\n {\n label: '损失项',\n value: '三者',\n },\n {\n label: '损失类型',\n value: '三者财产损失',\n },\n\n {\n label: '关联标的',\n value: '吴宁',\n },\n ];\n\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n contentStyle={{\n padding: 16,\n }}\n >\n {children}\n <ProCollapse title=\"外层容器\">\n <ProCollapse title=\"可折叠标题\" level=\"2\" towCollapse>\n ProCollapse在level为2时，通过设置towCollapse可控制是否带收起功能\n </ProCollapse>\n <ProCollapse title=\"不可折叠标题\" level=\"2\">\n ProCollapse在level为2时，通过设置towCollapse可控制是否带收起功能\n </ProCollapse>\n <ProCollapse titleList={titleList} level=\"2\">\n ProCollapse在level为2时，通过设置towCollapse可控制是否带收起功能\n </ProCollapse>\n </ProCollapse>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
44
- },
45
- {
46
- "id": "ProCollapse/demos/threeCollapse.tsx",
47
- "component": "ProCollapse",
48
- "file": "demos/threeCollapse.tsx",
49
- "title": "三级折叠",
50
- "note": "",
51
- "source": "/**\n * iframe: 600\n * title: 三级折叠\n * desc: |\n * 三级折叠通常用于折叠组件的分层使用，通常被嵌套与 2 级标题内\n */\n\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport ProCollapse from '../index'; // 直接导入本地组件以使用最新类型\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n const titleList = [\n {\n label: '损失项',\n value: '三者',\n },\n {\n label: '损失类型',\n value: '三者财产损失',\n },\n\n {\n label: '关联标的',\n value: '吴宁',\n },\n ];\n\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n contentStyle={{\n padding: 16,\n }}\n >\n {children}\n <ProCollapse title=\"一级标题\">\n <ProCollapse title=\"二级标题\" level=\"2\" towCollapse>\n ProCollapse在level为2时，通过设置towCollapse可控制是否带收起功能\n </ProCollapse>\n <ProCollapse title=\"二级标题\" level=\"2\" towCollapse>\n <ProCollapse title=\"可折叠三级标题\" level=\"3\" threeCollapse>\n 这是level3的内容区域，具有最小的字体大小（12px）和最紧凑的间距设计，适用于深层次的信息展示。\n </ProCollapse>\n <ProCollapse title=\"不可折叠三级标题\" level=\"3\">\n 这是另一个level3的内容区域，不带折叠功能，通过threeCollapse属性控制。\n </ProCollapse>\n <ProCollapse title=\"带扩展信息的三级标题\" level=\"3\" threeCollapse extra=\"状态：正常\">\n 这个level3面板带有右侧扩展信息，展示了更丰富的标题信息。\n </ProCollapse>\n </ProCollapse>\n </ProCollapse>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
52
- },
53
- {
54
- "id": "ProCollapse/demos/twoExtension.tsx",
55
- "component": "ProCollapse",
56
- "file": "demos/twoExtension.tsx",
57
- "title": "二级折叠扩展按钮",
58
- "note": "",
59
- "source": "/**\n * iframe: 600\n * title: 二级折叠扩展按钮\n * desc: |\n * `通过extra扩展的节点，点击不收起展开，可以通过event.stopPropagation()来阻止冒泡`\n */\n\nimport { Button } from 'antd';\nimport { ProLayout, ProCollapse } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n contentStyle={{\n padding: 16,\n }}\n >\n {children}\n <ProCollapse title=\"外层容器\">\n <ProCollapse\n title=\"带扩展按钮的二级菜单标题2\"\n level=\"2\"\n extra={\n <Button\n type=\"link\"\n onClick={(event) => {\n // 防止按钮收起\n event.stopPropagation();\n }}\n >\n 编辑按钮\n </Button>\n }\n towCollapse\n >\n 内容区域1\n </ProCollapse>\n </ProCollapse>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
60
- },
61
- {
62
- "id": "ProFooter/demos/footer.tsx",
63
- "component": "ProFooter",
64
- "file": "demos/footer.tsx",
65
- "title": "基本使用",
66
- "note": "",
67
- "source": "/**\n * iframe: 600\n * title: 基本使用\n * desc: |\n * 底部需要悬浮 footer 时使用\n * 1. 通过指定侧边菜单 sideDom 来计算悬浮底部的宽度，防止底部栏覆盖整行\n * 2. 通过指定 contentDom 来给内容区域追加 padding 64px, 防止内容区域被底部栏遮挡\n */\n\nimport { Button } from 'antd';\nimport { ProLayout, ProFooter } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n >\n {children}\n <div>\n 古巴比伦王颁布了汉谟拉比法典\n <br />\n 刻在黑色的玄武岩\n <br />\n 距今已经三千七百多年\n <br />\n 你在橱窗前 凝视碑文的字眼\n <br />\n 我却在旁静静欣赏你那张我深爱的脸\n <br />\n 祭司 神殿 征战 弓箭 是谁的从前\n <br />\n 喜欢在人潮中你只属于我的那画面\n <br />\n 经过苏美女神身边 我以女神之名许愿\n <br />\n 思念像底格里斯河般的蔓延\n <br />\n 当古文明只剩下难解的语言\n <br />\n 传说就成了永垂不朽的诗篇\n <br />\n 我给你的爱写在西元前\n <br />\n 深埋在美索不达米亚平原\n <br />\n 几十个世纪后出土发现\n <br />\n 泥板上的字迹依然清晰可见\n <br />\n 我给你的爱写在西元前\n <br />\n 深埋在美索不达米亚平原\n <br />\n 用楔形文字刻下了永远\n <br />\n 那已风化千年的誓言\n <br />\n 《爱在西元前》简谱\n <br />\n 《爱在西元前》简谱 [1] <br />\n 一切又重演\n <br />\n 祭司 神殿 征战 弓箭 是谁的从前\n <br />\n 喜欢在人潮中你只属于我的那画面\n <br />\n 经过苏美女神身边 我以女神之名许愿\n <br />\n 思念像底格里斯河般的蔓延\n <br />\n 当古文明只剩下难解的语言\n <br />\n 传说就成了永垂不朽的诗篇\n <br />\n 我给你的爱写在西元前\n <br />\n 深埋在美索不达米亚平原\n <br />\n 几十个世纪后出土发现\n <br />\n 泥板上的字迹依然清晰可见\n <br />\n <h2>我是底部啦~~~</h2>\n </div>\n <ProFooter>\n <Button type=\"primary\">完成配置</Button>\n <Button type=\"default\">撤回</Button>\n </ProFooter>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
68
- },
69
- {
70
- "id": "ProHeader/demos/base.tsx",
71
- "component": "ProHeader",
72
- "file": "demos/base.tsx",
73
- "title": "基本使用",
74
- "note": "",
75
- "source": "/**\n * iframe: 600\n */\n/* eslint-disable no-alert */\nimport { Button } from 'antd';\nimport { ProLayout, ProConfigProvider, ProHeader } from '@zat-design/sisyphus-react';\nimport { provideConfig } from '../../../../ProTable/demos/provide';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <ProConfigProvider value={provideConfig}>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n >\n {children}\n <ProHeader\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n actionRender={[\n <Button type=\"link\">分保意见</Button>,\n <Button type=\"link\">操作日志</Button>,\n ]}\n describeColumns={[\n {\n label: '报案号',\n value: 'T1306C01202200000211034',\n copyable: true,\n },\n {\n label: '链接号',\n value: 'PPT06C01202200000211034',\n link: 'https://procomponents.zhongan.tech/',\n },\n {\n label: '产品名称',\n value: '产品 06C3-综合意外New产品名称',\n tag: '版本号2.0',\n },\n ]}\n subDescribeColumns={[\n {\n label: '起保日期',\n value: '2022-08-30 00:00:00',\n },\n {\n label: '枚举name',\n valueType: 'enumName',\n code: 'serviceType',\n value: 23,\n },\n {\n label: '枚举code-name',\n valueType: 'enumCodeName',\n code: 'serviceType',\n value: 23,\n },\n {\n label: '年月日',\n valueType: 'date',\n value: new Date(),\n },\n {\n label: '年月日时分秒',\n valueType: 'dateTime',\n value: new Date(),\n },\n {\n label: '总保额',\n valueType: 'thousandth',\n value: 123,\n },\n {\n label: '总签单保费（含税）',\n valueType: 'thousandth',\n value: 943.4,\n },\n {\n label: '总签单保费',\n valueType: 'thousandth',\n precision: 4,\n value: '56123.1234',\n },\n ]}\n onBack={() => {\n alert('返回上一步');\n }}\n />\n </ProLayout>\n </ProConfigProvider>\n );\n};\n\nexport default Layout;\n"
76
- },
77
- {
78
- "id": "ProHeader/demos/title.tsx",
79
- "component": "ProHeader",
80
- "file": "demos/title.tsx",
81
- "title": "常规 title",
82
- "note": "",
83
- "source": "/**\n * iframe: 600\n */\n\nimport { ProLayout, ProHeader } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n >\n <ProHeader title=\"我是标题一\" />\n <ProHeader\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '我是标题二',\n },\n ]}\n />\n {children}\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
84
- },
85
- {
86
- "id": "ProHeader/demos/omit.tsx",
87
- "component": "ProHeader",
88
- "file": "demos/omit.tsx",
89
- "title": "多描述不换行展示",
90
- "note": "",
91
- "source": "/**\n * iframe: 600\n */\n/* eslint-disable no-alert */\nimport { Button } from 'antd';\nimport { ProLayout, ProConfigProvider, ProHeader } from '@zat-design/sisyphus-react';\nimport { provideConfig } from '../../../../ProTable/demos/provide';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <ProConfigProvider value={provideConfig}>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n >\n {children}\n <ProHeader\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n actionRender={[\n <Button type=\"link\">分保意见</Button>,\n <Button type=\"link\">操作日志</Button>,\n ]}\n describeColumns={[\n {\n label: '报案号',\n value: 'T1306C01202200000211034',\n copyable: true,\n width: 285,\n },\n {\n label: '产品名称',\n width: 'calc(100% - 333px)',\n items: [\n {\n value: '产品 06C3-综合意外New产品名称',\n tag: '版本号2.0',\n },\n {\n value: '产品 06C3-综合意外New产品名称1',\n tag: '版本号2.0',\n },\n {\n value: '产品 06C3-综合意外New产品名称2',\n tag: '版本号2.0',\n },\n {\n value: '产品 06C3-综合意外New产品名称3',\n tag: '版本号2.0',\n },\n ],\n },\n ]}\n subDescribeColumns={[\n {\n label: '起保日期',\n value: '2022-08-30 00:00:00',\n },\n {\n label: '枚举name',\n valueType: 'enumName',\n code: 'serviceType',\n value: 23,\n },\n {\n label: '枚举code-name',\n valueType: 'enumCodeName',\n code: 'serviceType',\n value: 23,\n },\n {\n label: '年月日',\n valueType: 'date',\n value: new Date(),\n },\n {\n label: '年月日时分秒',\n valueType: 'dateTime',\n value: new Date(),\n },\n {\n label: '总保额',\n valueType: 'thousandth',\n value: 123,\n },\n {\n label: '总签单保费（含税）',\n valueType: 'thousandth',\n value: 943.4,\n },\n {\n label: '总签单保费',\n valueType: 'thousandth',\n precision: 4,\n value: '56123.1234',\n },\n ]}\n onBack={() => {\n alert('返回上一步');\n }}\n />\n </ProLayout>\n </ProConfigProvider>\n );\n};\n\nexport default Layout;\n"
92
- },
93
- {
94
- "id": "ProHeader/demos/scroll.tsx",
95
- "component": "ProHeader",
96
- "file": "demos/scroll.tsx",
97
- "title": "滑动置顶",
98
- "note": "",
99
- "source": "/**\n * iframe: 600\n * title: 滑动置顶\n * desc: |\n * 通过 fixedTop 启用固定头部功能\n */\n\n/* eslint-disable no-alert */\nimport { useToggle } from 'ahooks';\nimport { Button } from 'antd';\nimport { ProHeader, ProLayout } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n const [state, { toggle }] = useToggle(false);\n\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={state}\n >\n {children}\n <ProHeader\n fixedTop={64}\n autoBack={1}\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n actionRender={[\n <Button type=\"link\">分保意见</Button>,\n <Button type=\"link\">操作日志</Button>,\n ]}\n describeColumns={[\n {\n label: '投保单号',\n value: 'T1306C01202200000211034',\n copyable: true,\n link: 'https://procomponents.zhongan.tech/',\n },\n {\n label: '产品名称',\n value: '产品 06C3-综合意外New产品名称',\n tag: '版本号2.0',\n },\n ]}\n subDescribeColumns={[\n {\n label: '起保日期',\n value: '2022-08-30 00:00:00',\n },\n {\n label: '终保日期',\n value: '2022-08-30 00:00:00',\n },\n {\n label: '总保额',\n value: '1,000,799,999.00',\n },\n {\n label: '总签单保费(含税)',\n value: '200,300.00',\n },\n {\n label: '总签单保费(不含税)',\n value: '200,300.00',\n },\n {\n label: '保单币种',\n value: 'CNY',\n },\n {\n label: '总投保人数',\n value: '1000',\n },\n ]}\n onBack={() => {\n alert('返回上一步');\n }}\n />\n <div>\n 古巴比伦王颁布了汉谟拉比法典\n <br />\n 刻在黑色的玄武岩\n <br />\n 距今已经三千七百多年\n <br />\n 你在橱窗前 凝视碑文的字眼\n <br />\n 我却在旁静静欣赏你那张我深爱的脸\n <br />\n 祭司 神殿 征战 弓箭 是谁的从前\n <br />\n 喜欢在人潮中你只属于我的那画面\n <br />\n 经过苏美女神身边 我以女神之名许愿\n <br />\n 思念像底格里斯河般的蔓延\n <br />\n 当古文明只剩下难解的语言\n <br />\n 传说就成了永垂不朽的诗篇\n <br />\n 我给你的爱写在西元前\n <br />\n 深埋在美索不达米亚平原\n <br />\n 几十个世纪后出土发现\n <br />\n 泥板上的字迹依然清晰可见\n <br />\n 我给你的爱写在西元前\n <br />\n 深埋在美索不达米亚平原\n <br />\n 用楔形文字刻下了永远\n <br />\n 那已风化千年的誓言\n <br />\n 《爱在西元前》简谱\n <br />\n 《爱在西元前》简谱 [1] <br />\n 一切又重演\n <br />\n 祭司 神殿 征战 弓箭 是谁的从前\n <br />\n 喜欢在人潮中你只属于我的那画面\n <br />\n 经过苏美女神身边 我以女神之名许愿\n <br />\n 思念像底格里斯河般的蔓延\n <br />\n 当古文明只剩下难解的语言\n <br />\n 传说就成了永垂不朽的诗篇\n <br />\n 我给你的爱写在西元前\n <br />\n 深埋在美索不达米亚平原\n <br />\n 几十个世纪后出土发现\n <br />\n 泥板上的字迹依然清晰可见\n <br />\n <h2>我是底部啦~~~</h2>\n </div>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
100
- },
101
- {
102
- "id": "ProHeader/demos/check.tsx",
103
- "component": "ProHeader",
104
- "file": "demos/check.tsx",
105
- "title": "返回再确认",
106
- "note": "",
107
- "source": "/**\n * iframe: 600\n * title: 返回再确认\n * desc: |\n * 用于编辑页面，未保存误操作返回的场景，通过 isConfirmBack 进行开关控制\n */\n\n/* eslint-disable no-alert */\nimport { ProLayout, ProHeader } from '@zat-design/sisyphus-react';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={false}\n >\n <ProHeader\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '我是标题二',\n },\n ]}\n isConfirmBack\n onBack={() => {\n alert('返回上一步');\n }}\n />\n {children}\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
108
- },
109
- {
110
- "id": "ProLayout/demos/base.tsx",
111
- "component": "ProLayout",
112
- "file": "demos/base.tsx",
113
- "title": "基本使用",
114
- "note": "",
115
- "source": "/**\n * iframe: 600\n * title: 基本使用\n * desc: |\n * 菜单保持效果依赖 URL 切换的变更,本 demo 中无法正常切换\n */\n\nimport { useToggle } from 'ahooks';\nimport { Avatar, Button, Dropdown } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n const userName = menusData.userInfo.simpleCname;\n const [state, { toggle }] = useToggle(false);\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n ];\n\n return (\n <>\n <ProLayout\n title=\"保险核心系统\"\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={state}\n pathPrefix=\"/property-frame-ui\"\n headerNotice={\n <>\n 您现在处理体验版，仅提供部分体验功能，想要了解更多请\n <a href=\"##\">联系我们</a>\n </>\n }\n onMenuClick={(data) => {\n console.log('data', data);\n }}\n rightContentRender={\n <>\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </>\n }\n >\n {children}\n 我是content内容区域，子应用显示区域\n <Button\n style={{ marginLeft: 16 }}\n onClick={() => {\n toggle();\n }}\n >\n 控制菜单的按钮\n </Button>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
116
- },
117
- {
118
- "id": "ProLayout/demos/logo.tsx",
119
- "component": "ProLayout",
120
- "file": "demos/logo.tsx",
121
- "title": "菜单图标",
122
- "note": "",
123
- "source": "/**\n * iframe: 600\n * title: 菜单图标\n * desc: |\n * 自定义 logo 和公司名称\n */\n\nimport { Avatar, Dropdown } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n const userName = menusData.userInfo.simpleCname;\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n ];\n return (\n <>\n <ProLayout\n title=\"公司名称\"\n logo={\n <img\n src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\"\n alt=\"logo\"\n />\n }\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={true}\n rightContentRender={\n <>\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </>\n }\n >\n {children}\n 我是content内容区域，子应用显示区域\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
124
- },
125
- {
126
- "id": "ProLayout/demos/notice.tsx",
127
- "component": "ProLayout",
128
- "file": "demos/notice.tsx",
129
- "title": "全局提示",
130
- "note": "",
131
- "source": "/**\n * iframe: 600\n * title: 全局提示\n * desc: |\n * 设置 headerNotice 的内容值，显示提示内容\n */\n\nimport { Avatar, Dropdown } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\n\nconst menusData = {\n // 人员信息\n userInfo: {\n id: 1,\n account: 'za-record',\n simpleCname: '刘机',\n },\n // 菜单信息\n menus: [\n {\n id: 100203,\n code: 'PR2', // 菜单唯一code\n name: '产品配置中心-产品配置中心', // 菜单名称\n url: '/productConfig', // 菜单路由\n redirectUrl: '', // 点击路由时，重定向地址\n parentId: null, // 父级id\n description: null, // 备注\n extraInfo: null, // 扩展备用字段\n sort: null, // 排序\n hideInMenu: false, // 是否隐藏菜单\n icon: 'tiaokuandingyi', // iconfont图标\n imgUrl: '', // 图片icon\n imgActiveUrl: '', // 激活图片icon\n type: 'PAGE', // 菜单类型 PAGE, BUTTON, 默认PAGE\n // 子集菜单信息\n children: [],\n },\n {\n id: 154,\n code: 'N1',\n name: '新契约',\n url: '/policy',\n redirectUrl: '',\n parentId: null,\n description: null,\n extraInfo: null,\n sort: null, // 排序\n hideInMenu: false,\n icon: 'xinqiyuechengbao',\n imgUrl: '', // 图片icon\n imgActiveUrl: '', // 激活图片icon\n type: 'PAGE',\n children: [],\n },\n ],\n};\n\nconst items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n];\n\nconst Layout = ({ children }: any) => {\n const userName = menusData.userInfo.simpleCname;\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={true}\n headerNotice={\n <>\n 您现在处理体验版，仅提供部分体验功能，想要了解更多请 <a href=\"##\">联系我们</a>\n </>\n }\n rightContentRender={\n <>\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </>\n }\n >\n {children}\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
132
- },
133
- {
134
- "id": "ProLayout/demos/rightHeader.tsx",
135
- "component": "ProLayout",
136
- "file": "demos/rightHeader.tsx",
137
- "title": "右侧自定义",
138
- "note": "",
139
- "source": "/**\n * iframe: 600\n * title: 右侧自定义\n * desc: |\n * 右侧自定义设置，登录信息等设置\n */\n\nimport { ProLayout } from '@zat-design/sisyphus-react';\n\nconst menusData = {\n // 人员信息\n userInfo: {\n id: 1,\n account: 'za-record',\n simpleCname: '刘机',\n },\n // 菜单信息\n menus: [\n {\n id: 100203,\n code: 'PR2', // 菜单唯一code\n name: '产品配置中心-产品配置中心', // 菜单名称\n url: '/productConfig', // 菜单路由\n redirectUrl: '', // 点击路由时，重定向地址\n parentId: null, // 父级id\n description: null, // 备注\n extraInfo: null, // 扩展备用字段\n sort: null, // 排序\n hideInMenu: false, // 是否隐藏菜单\n icon: '', // iconfont图标\n imgUrl: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', // 图片icon\n imgActiveUrl: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg', // 激活图片icon\n type: 'PAGE', // 菜单类型 PAGE, BUTTON, 默认PAGE\n // 子集菜单信息\n children: [],\n },\n ],\n};\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n dataSource={menusData}\n collapsed={true}\n rightContentRender={\n <>\n 自定义右侧\n <b style={{ marginLeft: 16 }}>星辰大海</b>\n </>\n }\n >\n {children}\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
140
- },
141
- {
142
- "id": "ProLayout/demos/appsFlat.tsx",
143
- "component": "ProLayout",
144
- "file": "demos/appsFlat.tsx",
145
- "title": "应用入口(扁平模式) （v4.1.0 新增）",
146
- "note": "",
147
- "source": "/**\n * title: 应用入口(扁平模式)\n * desc: |\n * 在 Header 中展示应用入口,支持扁平列表模式\n * iframe: 600\n */\n\nimport { useToggle } from 'ahooks';\nimport { Avatar, Button, Dropdown, message } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport type { AppsOption } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData';\n\nconst Layout = ({ children }: any) => {\n const userName = menusData.userInfo.simpleCname;\n const [state, { toggle }] = useToggle(false);\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n ];\n\n // 扁平应用列表配置\n const appsOptions: AppsOption[] = [\n {\n value: 'app1',\n label: '承保管理',\n icon: <span style={{ fontSize: 18 }}>📋</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app2',\n label: '理赔管理',\n icon: <span style={{ fontSize: 18 }}>💼</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app3',\n label: '财务管理',\n icon: <span style={{ fontSize: 18 }}>💰</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app4',\n label: '系统设置',\n icon: <span style={{ fontSize: 18 }}>⚙️</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n ];\n\n return (\n <>\n <ProLayout\n title=\"保险核心系统\"\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={state}\n pathPrefix=\"/property-frame-ui\"\n appsOptions={appsOptions}\n onMenuClick={(data) => {\n console.log('data', data);\n }}\n rightContentRender={\n <>\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </>\n }\n >\n {children}\n 我是content内容区域,子应用显示区域\n <Button\n style={{ marginLeft: 16 }}\n onClick={() => {\n toggle();\n }}\n >\n 控制菜单的按钮\n </Button>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
148
- },
149
- {
150
- "id": "ProLayout/demos/appsGroup.tsx",
151
- "component": "ProLayout",
152
- "file": "demos/appsGroup.tsx",
153
- "title": "应用入口(分组模式) （v4.1.0 新增）",
154
- "note": "",
155
- "source": "/**\n * title: 应用入口(分组模式)\n * desc: |\n * 在 Header 中展示应用入口,支持分组模式\n * iframe: 600\n */\n\nimport { useToggle } from 'ahooks';\nimport { Avatar, Button, Dropdown, message } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport type { AppsGroup } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData';\n\nconst Layout = ({ children }: any) => {\n const userName = menusData.userInfo.simpleCname;\n const [state, { toggle }] = useToggle(false);\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n ];\n\n // 分组应用列表配置\n const appsOptions: AppsGroup[] = [\n {\n value: 'business',\n label: '业务管理',\n options: [\n {\n value: 'app1',\n label: 'AI智检',\n icon: <span style={{ fontSize: 32 }}>📊</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app2',\n label: 'AI语音平台',\n icon: <span style={{ fontSize: 32 }}>🎙️</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app3',\n label: '智能代练机器人',\n icon: <span style={{ fontSize: 32 }}>🤖</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app4',\n label: 'AI中台',\n icon: <span style={{ fontSize: 32 }}>💼</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app5',\n label: 'AI质量中台',\n icon: <span style={{ fontSize: 32 }}>📈</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n ],\n },\n {\n value: 'system',\n label: '增长平台',\n options: [\n {\n value: 'app6',\n label: '事件中心',\n icon: <span style={{ fontSize: 32 }}>🎯</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app7',\n label: '客户数据...',\n icon: <span style={{ fontSize: 32 }}>👥</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app8',\n label: '营销策略...',\n icon: <span style={{ fontSize: 32 }}>📢</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app9',\n label: '社域运营...',\n icon: <span style={{ fontSize: 32 }}>🌐</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app10',\n label: '验证消息',\n icon: <span style={{ fontSize: 32 }}>✅</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app11',\n label: '活动工厂',\n icon: <span style={{ fontSize: 32 }}>🏭</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app12',\n label: '提质分析...',\n icon: <span style={{ fontSize: 32 }}>📊</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app13',\n label: '数据分析...',\n icon: <span style={{ fontSize: 32 }}>📉</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app14',\n label: '内容管理...',\n icon: <span style={{ fontSize: 32 }}>📝</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app15',\n label: '权益管理...',\n icon: <span style={{ fontSize: 32 }}>🎁</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n {\n value: 'app16',\n label: '数据决策AI...',\n icon: <span style={{ fontSize: 32 }}>🧠</span>,\n onChange: (value) => {\n message.success(`点击了应用: ${value}`);\n },\n },\n ],\n },\n ];\n\n return (\n <>\n <ProLayout\n title=\"保险核心系统\"\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={state}\n pathPrefix=\"/property-frame-ui\"\n appsOptions={appsOptions}\n onMenuClick={(data) => {\n console.log('data', data);\n }}\n rightContentRender={\n <>\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </>\n }\n >\n {children}\n 我是content内容区域,子应用显示区域\n <Button\n style={{ marginLeft: 16 }}\n onClick={() => {\n toggle();\n }}\n >\n 控制菜单的按钮\n </Button>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
156
- },
157
- {
158
- "id": "ProLayout/demos/pure.tsx",
159
- "component": "ProLayout",
160
- "file": "demos/pure.tsx",
161
- "title": "纯净模式",
162
- "note": "",
163
- "source": "/**\n * iframe: 600\n * title: 纯净模式\n * desc: |\n * 不带有菜单信息，只包含 Content 区域信息，部分信息查看和嵌入地方使用\n */\n\nimport { ProLayout } from '@zat-design/sisyphus-react';\n\nconst menusData = {\n // 人员信息\n userInfo: {\n id: 1,\n account: 'za-record',\n simpleCname: '刘机',\n },\n // 菜单信息\n menus: [\n {\n id: 100203,\n code: 'PR2', // 菜单唯一code\n name: '产品配置中心-产品配置中心', // 菜单名称\n url: '/productConfig', // 菜单路由\n redirectUrl: '', // 点击路由时，重定向地址\n parentId: null, // 父级id\n description: null, // 备注\n extraInfo: null, // 扩展备用字段\n sort: null, // 排序\n hideInMenu: false, // 是否隐藏菜单\n icon: '', // iconfont图标\n imgUrl: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', // 图片icon\n imgActiveUrl: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg', // 激活图片icon\n type: 'PAGE', // 菜单类型 PAGE, BUTTON, 默认PAGE\n // 子集菜单信息\n children: [],\n },\n ],\n};\n\nconst Layout = ({ children }: any) => {\n return (\n <>\n <ProLayout\n pure\n dataSource={menusData}\n collapsed={true}\n rightContentRender={\n <>\n 自定义右侧\n <b style={{ marginLeft: 16 }}>星辰大海</b>\n </>\n }\n >\n {children}\n 我是content内容区域，子应用显示区域\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
164
- },
165
- {
166
- "id": "ProLayout/demos/waterMark.tsx",
167
- "component": "ProLayout",
168
- "file": "demos/waterMark.tsx",
169
- "title": "水印模式",
170
- "note": "",
171
- "source": "/**\n * iframe: 600\n */\nimport { Avatar, Dropdown } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusData'; // 菜单数据源\n\nconst Layout = ({ children }: any) => {\n const userName = menusData.userInfo.simpleCname;\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n ];\n return (\n <>\n <ProLayout\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed\n waterMarkProps={{\n content: '众安信科前端团队',\n zIndex: 1001,\n font: {\n // 字体设置\n fontSize: 12,\n color: 'rgba(0,0,0,.1)',\n },\n }}\n rightContentRender={\n <>\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </>\n }\n >\n {children}\n <div style={{ height: 500 }}> 我是content内容区域，子应用显示区域</div>\n </ProLayout>\n </>\n );\n};\n\nexport default Layout;\n"
172
- },
173
- {
174
- "id": "ProLayout/demos/tabsAdvanced.tsx",
175
- "component": "ProLayout",
176
- "file": "demos/tabsAdvanced.tsx",
177
- "title": "标签页模式",
178
- "note": "",
179
- "source": "/**\n * iframe: 600\n * title: 标签页高级配置\n * desc: |\n * 展示标签页的高级配置选项和回调函数的使用\n */\n\nimport { useCallback } from 'react';\nimport { useToggle } from 'ahooks';\nimport { Avatar, Dropdown, Card } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusData from './data/menusTabsData'; // 菜单数据源\nimport { resolveTabComponent } from './tabsComponents';\n\nconst TabsAdvancedDemo = ({ children }: any) => {\n const userName = menusData.userInfo.simpleCname;\n const [collapsed, { toggle }] = useToggle(false);\n\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhonganinfo.com/\">\n 退出登录\n </a>\n ),\n },\n ];\n\n const handleTabChange = useCallback((activeKey, activeTabInfo, allTabs) => {\n console.log('标签页切换:', { activeKey, activeTabInfo, allTabs });\n }, []);\n\n return (\n <>\n <ProLayout\n title=\"标签页高级配置演示\"\n logo={\n <img\n src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\"\n alt=\"logo\"\n />\n }\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={collapsed}\n pathPrefix=\"/property-frame-ui\"\n // 开启标签页模式\n mode=\"tabs\"\n // 动态标签页配置\n tabs={{\n storage: 'localStorage',\n cacheKey: 'advanced-tabs-demo',\n onTabChange: handleTabChange,\n activeComponent: resolveTabComponent, // 激活组件解析器\n empty: (\n <Card title=\"标签页演示内容\" style={{ margin: '16px 0' }}>\n <p>欢迎使用 ProLayout 标签页功能！</p>\n <p>点击左侧菜单体验标签页功能：</p>\n <ul>\n <li>📌 点击菜单创建新标签页</li>\n <li>🖱️ 右键标签页查看更多操作</li>\n <li>❌ 点击 × 关闭标签页</li>\n <li>💾 标签页会自动缓存</li>\n </ul>\n </Card>\n ),\n }}\n rightContentRender={\n <>\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span onClick={() => {}}>登录</span>\n )}\n </>\n }\n >\n {children}\n </ProLayout>\n </>\n );\n};\n\nexport default TabsAdvancedDemo;\n"
180
- },
181
- {
182
- "id": "ProLayout/demos/tabsSubView.tsx",
183
- "component": "ProLayout",
184
- "file": "demos/tabsSubView.tsx",
185
- "title": "标签页内子视图（查询 → 详情 → 返回保留状态）",
186
- "note": "",
187
- "source": "/**\n * iframe: 640\n * title: 标签页内子视图（查询→详情→返回保留状态）\n * desc: |\n * 常驻 tab 内查询→详情钻取：点击「查看」调用 pushView 压入详情，ProHeader 返回调用 back。\n * 入口页隐藏但不卸载，返回后查询条件/分页/选中行/滚动位置完整保留且不重新请求；支持多层钻取，关闭 tab 自动清栈。\n */\nimport { useState } from 'react';\nimport { Avatar, Button, Form, Space, Tag, Descriptions } from 'antd';\nimport { ProTable, ProForm, ProLayout, ProHeader } from '@zat-design/sisyphus-react';\nimport type {\n ProTableColumnType,\n ProFormColumnType,\n ProTableListResponseType,\n} from '@zat-design/sisyphus-react';\nimport menusData from './data/menusSubViewData';\nimport { getUseAntdTableDemoData } from '../../ProTable/demos/data/useAntdTableDemoData';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n { type: 'Input', label: '产品代码', name: 'productCode' },\n { type: 'Input', label: '产品名称', name: 'productName' },\n { type: 'Input', label: '产品公司', name: 'companyName' },\n];\n\n/** 二级详情：验证子视图栈可多层钻取 */\nconst ProductSubDetail = ({ record }: { record: Record<string, any> }) => {\n const [layoutTabs] = ProLayout.useProLayoutTabs();\n return (\n <>\n <ProHeader title=\"关联条款\" showBack onBack={() => layoutTabs.back()} />\n <div style={{ padding: 16 }}>\n <Descriptions bordered column={2}>\n <Descriptions.Item label=\"产品代码\">{record.productCode}</Descriptions.Item>\n <Descriptions.Item label=\"条款版本\">V1.0</Descriptions.Item>\n <Descriptions.Item label=\"条款名称\" span={2}>\n {record.productName}（重大疾病保险条款）\n </Descriptions.Item>\n </Descriptions>\n <div style={{ height: 600, marginTop: 16, color: '#999' }}>\n 这是二级详情，点击左上角「返回」回到上一层详情——上一层详情的状态同样保留。\n </div>\n </div>\n </>\n );\n};\n\n/** 详情页：头部保留返回 + 标题，内容随便填充 */\nconst ProductDetail = ({ record }: { record: Record<string, any> }) => {\n const [layoutTabs] = ProLayout.useProLayoutTabs();\n const [form] = Form.useForm();\n\n return (\n <>\n {/* 用 breadcrumbColumns 承载标题+标签，避免与 title 同时使用导致标题重复渲染 */}\n <ProHeader\n showBack\n autoBack={0}\n onBack={() => layoutTabs.back()}\n breadcrumbColumns={[\n { type: 'breadcrumb', value: '编辑单证配置' },\n { type: 'tag', value: record.productCode, tag: record.productStatus },\n ]}\n />\n <ProForm\n form={form}\n footer={false}\n initialValues={{\n productName: record.productName,\n companyName: record.companyName,\n productStatus: record.productStatus,\n remark: '在此编辑单证配置，返回后查询列表的状态保持不变。',\n }}\n columns={[\n { type: 'Input', label: '产品名称', name: 'productName' },\n { type: 'Input', label: '产品公司', name: 'companyName' },\n { type: 'Input', label: '产品状态', name: 'productStatus' },\n { type: 'TextArea', label: '备注', name: 'remark' },\n ]}\n />\n <Space style={{ marginTop: 8 }}>\n <Button\n type=\"primary\"\n onClick={() => layoutTabs.pushView(<ProductSubDetail record={record} />)}\n >\n 查看关联条款（再钻一层）\n </Button>\n </Space>\n </>\n );\n};\n\n/** 入口页：查询列表。点击「查看」在当前 tab 内 pushView 详情 */\nconst ProductQueryList = () => {\n const [layoutTabs] = ProLayout.useProLayoutTabs();\n const [form] = Form.useForm();\n\n const getTableData = (data: any) =>\n new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n // @ts-ignore demo 数据\n data: {\n list: getUseAntdTableDemoData(data.pageNum),\n total: 50,\n pageNum: 1,\n pageSize: 10,\n },\n message: '',\n });\n }, 800);\n });\n\n const { onSearch, onReset, tableProps } = useAntdTable(getTableData, {\n form,\n rowKey: 'productId',\n rowSelections: true,\n transformResponse: (res: any) => ({ ...res.data }),\n });\n\n const columns: ProTableColumnType[] = [\n { title: '产品代码', dataIndex: 'productCode', width: 160 },\n { title: '产品名称', dataIndex: 'productName', width: 220 },\n { title: '产品公司', dataIndex: 'companyName', width: 160 },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 120,\n render: (text: string) => <Tag color=\"green\">{text}</Tag>,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n width: 120,\n fixed: 'right',\n render: (_: string, record: Record<string, any>) => (\n <Button type=\"link\" onClick={() => layoutTabs.pushView(<ProductDetail record={record} />)}>\n 查看\n </Button>\n ),\n },\n ];\n\n return (\n <>\n <ProHeader title=\"产品查询\" />\n <ProForm\n columns={searchColumn}\n confirmLoading={tableProps.loading}\n form={form}\n onCancel={onReset}\n onFinish={onSearch}\n />\n <ProTable\n tableId=\"tabs-subview-demo\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n />\n </>\n );\n};\n\n// 激活组件解析器：把菜单 code 映射到入口组件\nconst tabComponentMap: Record<string, React.FC> = {\n ProductQuery: ProductQueryList,\n};\nconst resolveTabComponent = (code?: string): React.FC =>\n tabComponentMap[code || ''] || ProductQueryList;\n\nconst TabsSubViewDemo = ({ children }: any) => {\n const [collapsed] = useState(false);\n const userName = menusData.userInfo.simpleCname;\n\n return (\n <ProLayout\n title=\"标签页内子视图\"\n logo={\n <img src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" alt=\"logo\" />\n }\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={collapsed}\n mode=\"tabs\"\n tabs={{\n storage: 'sessionStorage',\n cacheKey: 'tabs-subview-demo',\n activeComponent: resolveTabComponent,\n }}\n rightContentRender={\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n }\n >\n {children}\n </ProLayout>\n );\n};\n\nexport default TabsSubViewDemo;\n"
188
- },
189
- {
190
- "id": "ProLayout/demos/tabsRelationDetail.tsx",
191
- "component": "ProLayout",
192
- "file": "demos/tabsRelationDetail.tsx",
193
- "title": "详情标签页关联复用（查询 tab → 详情 tab）",
194
- "note": "",
195
- "source": "/**\n * iframe: 640\n * title: 详情标签页关联复用\n * desc: |\n * 详情作为独立 tab 打开：addTab 传入 relationKey，相同 key 复用已有 tab 并切换，不同 key 新开；forceNew 可强制新建。\n */\nimport { useState } from 'react';\nimport { Avatar, Button, Descriptions, Form, Tag } from 'antd';\nimport { ProForm, ProHeader, ProLayout, ProTable } from '@zat-design/sisyphus-react';\nimport type {\n ProFormColumnType,\n ProTableColumnType,\n ProTableListResponseType,\n} from '@zat-design/sisyphus-react';\nimport menusData from './data/menusSubViewData';\nimport { getUseAntdTableDemoData } from '../../ProTable/demos/data/useAntdTableDemoData';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n { type: 'Input', label: '产品代码', name: 'productCode' },\n { type: 'Input', label: '产品名称', name: 'productName' },\n { type: 'Input', label: '产品公司', name: 'companyName' },\n];\n\nconst ProductDetail = ({ record }: { record: Record<string, any> }) => {\n return (\n <>\n <ProHeader\n breadcrumbColumns={[\n { type: 'breadcrumb', value: '产品详情' },\n { type: 'tag', value: record.productCode, tag: record.productStatus },\n ]}\n />\n <Descriptions bordered column={2}>\n <Descriptions.Item label=\"产品代码\">{record.productCode}</Descriptions.Item>\n <Descriptions.Item label=\"产品名称\">{record.productName}</Descriptions.Item>\n <Descriptions.Item label=\"产品公司\">{record.companyName}</Descriptions.Item>\n <Descriptions.Item label=\"产品状态\">{record.productStatus}</Descriptions.Item>\n <Descriptions.Item label=\"更新日期\" span={2}>\n {record.updateDate}\n </Descriptions.Item>\n </Descriptions>\n <div style={{ marginTop: 16, color: '#666' }}>\n 当前详情是独立 tab。回到「产品查询」后再次点击同一产品的「查看」，会直接激活这个详情\n tab；点击其他产品会新开详情 tab。\n </div>\n </>\n );\n};\n\nconst ProductQueryList = () => {\n const [layoutTabs] = ProLayout.useProLayoutTabs();\n const [form] = Form.useForm();\n\n const getTableData = (data: any) =>\n new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n // @ts-ignore demo 数据\n data: {\n list: getUseAntdTableDemoData(data.pageNum),\n total: 50,\n pageNum: 1,\n pageSize: 10,\n },\n message: '',\n });\n }, 300);\n });\n\n const { onSearch, onReset, tableProps } = useAntdTable(getTableData, {\n form,\n rowKey: 'productId',\n rowSelections: true,\n transformResponse: (res: any) => ({ ...res.data }),\n });\n\n const handleView = (record: Record<string, any>) => {\n layoutTabs.addTab({\n code: 'ProductDetail',\n name: `产品详情-${record.productName}-${record.productCode}`,\n relationKey: `product-detail:${record.productId}`,\n extra: { record },\n });\n };\n\n const columns: ProTableColumnType[] = [\n { title: '产品代码', dataIndex: 'productCode', width: 160 },\n { title: '产品名称', dataIndex: 'productName', width: 220 },\n { title: '产品公司', dataIndex: 'companyName', width: 160 },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 120,\n render: (text: string) => <Tag color=\"green\">{text}</Tag>,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n width: 120,\n fixed: 'right',\n render: (_: string, record: Record<string, any>) => (\n <Button type=\"link\" onClick={() => handleView(record)}>\n 查看\n </Button>\n ),\n },\n ];\n\n return (\n <>\n <ProHeader title=\"产品查询\" />\n <ProForm\n columns={searchColumn}\n confirmLoading={tableProps.loading}\n form={form}\n onCancel={onReset}\n onFinish={onSearch}\n />\n <ProTable\n tableId=\"tabs-relation-detail-demo\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n />\n </>\n );\n};\n\nconst tabComponentMap: Record<string, React.FC<any>> = {\n ProductQuery: ProductQueryList,\n ProductDetail,\n};\n\nconst resolveTabComponent = (code?: string): React.FC<any> =>\n tabComponentMap[code || ''] || ProductQueryList;\n\nconst TabsRelationDetailDemo = ({ children }: any) => {\n const [collapsed] = useState(false);\n const userName = menusData.userInfo.simpleCname;\n\n return (\n <ProLayout\n title=\"详情标签页关联复用\"\n logo={\n <img src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" alt=\"logo\" />\n }\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n collapsed={collapsed}\n mode=\"tabs\"\n tabs={{\n storage: 'sessionStorage',\n cacheKey: 'tabs-relation-detail-demo',\n fixed: ['ProductQuery'],\n activeComponent: resolveTabComponent,\n }}\n rightContentRender={\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n }\n >\n {children}\n </ProLayout>\n );\n};\n\nexport default TabsRelationDetailDemo;\n"
196
- },
197
- {
198
- "id": "ProLayout/demos/tabsIframe.tsx",
199
- "component": "ProLayout",
200
- "file": "demos/tabsIframe.tsx",
201
- "title": "标签页模式 iframe 嵌入（v4.4.0 新增）",
202
- "note": "",
203
- "source": "/**\n * iframe: 600\n * title: 标签页 iframe 嵌入\n * desc: |\n * URL 上其余的 query 参数会自动作为 `extra` 透传给业务组件 props,\n * 业务方需保证 query 字段名与组件 props 名一致。\n */\n\nconst TabsIframeDemo = () => (\n <div style={{ padding: 16, background: '#f5f7fa', minHeight: 600 }}>\n <h3 style={{ margin: '0 0 8px' }}>外层第三方 host 系统</h3>\n <p style={{ margin: '0 0 16px', color: '#666', lineHeight: 1.6 }}>\n 下方 iframe 嵌入了 <code>tabsFixed</code> demo(配置了 <code>tabs.iframe.routes</code>)。\n iframe URL 上拼了 <code>?isIframe=1</code>,子系统检测到后进入 pure 模式, 隐藏 Header / Menu /\n TabsBar,只渲染 routes 命中的投保单录入内容。\n </p>\n <iframe\n title=\"投保单录入(iframe 嵌入 tabsFixed)\"\n src=\"/~demos/prolayout-tabsfixed?isIframe=1&taskId=7300041&taskNo=abc0098\"\n style={{\n width: '100%',\n height: 520,\n border: '1px solid #e5e7eb',\n borderRadius: 8,\n background: '#fff',\n display: 'block',\n }}\n />\n </div>\n);\n\nexport default TabsIframeDemo;\n"
204
- },
205
- {
206
- "id": "ProLayout/demos/tabsFixed.tsx",
207
- "component": "ProLayout",
208
- "file": "demos/tabsFixed.tsx",
209
- "title": "固定标签页",
210
- "note": "",
211
- "source": "/**\n * iframe: 600\n * title: 固定标签页（声明式 + 手动固定）\n * desc: |\n * 演示 tabs.fixed 声明式固定「工作台」+ 右键手动固定/取消固定。\n * 固定标签排在固定区、不可被批量关闭；声明式固定的「取消固定」为禁用，顺序变更写入缓存。\n */\nimport { useToggle } from 'ahooks';\nimport React, { useState, useEffect } from 'react';\nimport { Avatar, Dropdown } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProLayout } from '@zat-design/sisyphus-react';\nimport menusFixedTabsData from './data/menusFixedTabsData';\nimport { resolveTabComponent } from './tabsComponents';\n\nconst TabsFixedDemo = ({ children, ...res }: any) => {\n const [collapsed, { toggle }] = useToggle(false);\n\n // 模拟异步加载：初始菜单为空，800ms 后返回真实数据\n const [dataSource, setDataSource] = useState<typeof menusFixedTabsData>({\n ...menusFixedTabsData,\n menus: [],\n });\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setDataSource(menusFixedTabsData);\n }, 800);\n return () => clearTimeout(timer);\n }, []);\n\n const userName = dataSource.userInfo.simpleCname;\n const items: MenuProps['items'] = [{ key: '1', label: '退出登录' }];\n\n return (\n <ProLayout\n title=\"固定标签页演示\"\n logo={\n <img src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" alt=\"logo\" />\n }\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={dataSource}\n collapsed={collapsed}\n onCollapsedChange={toggle}\n mode=\"tabs\"\n tabs={{\n storage: 'sessionStorage',\n cacheKey: 'fixed-tabs-demo',\n activeComponent: resolveTabComponent,\n fixed: ['Workspace'],\n // iframe 嵌入支持:被第三方系统 iframe 嵌入(URL 带 ?isIframe)时进入 pure 模式,\n // 按 routes 命中后只渲染投保单录入内容,隐藏 Header / Menu / TabsBar\n iframe: {\n routes: [\n {\n path: '/~demos/prolayout-tabsfixed',\n code: 'PolicyInput',\n name: '投保单录入',\n },\n ],\n },\n }}\n rightContentRender={\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n }\n >\n {children}\n </ProLayout>\n );\n};\n\nexport default TabsFixedDemo;\n"
212
- },
213
- {
214
- "id": "ProStep/demos/basic.tsx",
215
- "component": "ProStep",
216
- "file": "demos/basic.tsx",
217
- "title": "基础使用",
218
- "note": "",
219
- "source": "/**\n * iframe: 600\n * title: 基础使用\n * desc: |\n * 不设置`activeKey`，步骤条控制的模块默认全部打开\n */\n\nimport { Button, Form } from 'antd';\nimport {\n ProStep,\n ProForm,\n ProLayout,\n ProCollapse,\n ProHeader,\n ProFooter,\n} from '@zat-design/sisyphus-react';\nimport menusData from './menusData';\n\nconst baseColumns = [];\n\nconst { useStep } = ProStep;\n\nfor (let index = 1; index <= 2; index++) {\n baseColumns.push({\n type: 'Input',\n label: `fieldKey${index}`,\n name: `fieldKey${index}`,\n rules: [{ required: true, message: '请输入' }],\n });\n}\n\nconst Holder = ({ form }) => {\n return (\n <ProStep.Item id=\"holder\" title=\"投保人信息\" form={form}>\n <ProCollapse icon title=\"投保人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Insured = ({ form }) => {\n return (\n <ProStep.Item id=\"insured\" title=\"被保人信息\" form={form}>\n <ProCollapse icon title=\"被保人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Beneficiary = ({ form }) => {\n const { triggerTo } = useStep();\n\n const handle = () => {\n triggerTo(['holder', 'insured']);\n };\n\n return (\n <ProStep.Item id=\"beneficiary\" title=\"受益人信息\" form={form}>\n <ProCollapse icon title=\"受益人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Demo = () => {\n const [holderForm] = Form.useForm();\n const [insuredForm] = Form.useForm();\n const [beneficiaryForm] = Form.useForm();\n\n const handleSave = async () => {};\n\n return (\n <ProLayout iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\" dataSource={menusData}>\n <ProStep fixedTop={64} targetOffset={138}>\n <ProHeader\n fixedTop={0}\n autoBack={1}\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n />\n <Holder form={holderForm} />\n <Insured form={insuredForm} />\n <Beneficiary form={beneficiaryForm} />\n <ProFooter>\n <ProStep.Listener>\n <Button type=\"primary\" onClick={handleSave}>\n 保存\n </Button>\n </ProStep.Listener>\n </ProFooter>\n </ProStep>\n </ProLayout>\n );\n};\n\nexport default Demo;\n"
220
- },
221
- {
222
- "id": "ProStep/demos/substep.tsx",
223
- "component": "ProStep",
224
- "file": "demos/substep.tsx",
225
- "title": "分步骤校验",
226
- "note": "",
227
- "source": "/**\n * iframe: 600\n * title: 分步骤校验\n * desc: |\n * 通过设置`activeKey`，步骤条渲染对应的 code 的模块\n */\n\nimport { Button, Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport {\n ProStep,\n ProForm,\n ProLayout,\n ProCollapse,\n ProHeader,\n ProFooter,\n} from '@zat-design/sisyphus-react';\nimport menusData from './menusData';\n\nconst dataSource = [\n {\n name: '投保人信息',\n code: 'holder',\n },\n {\n name: '被保人信息',\n code: 'insured',\n },\n {\n name: '受益人信息',\n code: 'beneficiary',\n },\n];\n\nconst baseColumns = [];\n\nfor (let index = 1; index <= 20; index++) {\n baseColumns.push({\n type: 'Input',\n label: `fieldKey${index}`,\n name: `fieldKey${index}`,\n rules: [{ required: true, message: '请输入' }],\n });\n}\n\nconst Holder = ({ form }) => {\n return (\n <ProStep.Item id=\"holder\" form={form}>\n <ProCollapse icon title=\"投保人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Insured = ({ form }) => {\n return (\n <ProStep.Item id=\"insured\" form={form}>\n <ProCollapse icon title=\"被保人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Beneficiary = ({ form }) => {\n return (\n <ProStep.Item id=\"beneficiary\" form={form}>\n <ProCollapse icon title=\"受益人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Demo = () => {\n const [holderForm] = Form.useForm();\n const [insuredForm] = Form.useForm();\n const [beneficiaryForm] = Form.useForm();\n const [{ step, activeKey }, setState] = useSetState({\n step: 1,\n activeKey: 'holder',\n });\n\n const handleSave = async (values) => {\n try {\n // console.log('values', values);\n const nextStep = step + 1;\n const nextActiveKey = dataSource[nextStep - 1].code;\n setState({\n step: nextStep,\n activeKey: nextActiveKey,\n });\n } catch (error) {\n // console.log('error', error);\n }\n };\n\n return (\n <ProLayout iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\" dataSource={menusData}>\n <ProStep dataSource={dataSource} fixedTop={64} targetOffset={138} activeKey={activeKey}>\n <ProHeader\n fixedTop={0}\n autoBack={1}\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n />\n {step >= 1 && <Holder form={holderForm} />}\n {step >= 2 && <Insured form={insuredForm} />}\n {step >= 3 && <Beneficiary form={beneficiaryForm} />}\n <ProFooter>\n <ProStep.Listener>\n <Button type=\"primary\" onClick={handleSave}>\n 保存并下一步\n </Button>\n </ProStep.Listener>\n </ProFooter>\n </ProStep>\n </ProLayout>\n );\n};\n\nexport default Demo;\n"
228
- },
229
- {
230
- "id": "ProStep/demos/lazyload.tsx",
231
- "component": "ProStep",
232
- "file": "demos/lazyload.tsx",
233
- "title": "延迟加载",
234
- "note": "",
235
- "source": "/**\n * iframe: 600\n * title: 延迟加载\n * desc: |\n * 通过设置`lazyload`，减少非可视区域的内容渲染\n */\n\nimport { Button, Form } from 'antd';\nimport { ProStep, ProForm, ProLayout, ProHeader, ProFooter } from '@zat-design/sisyphus-react';\nimport menusData from './menusData';\nimport { useEffect } from 'react';\n\nconst baseColumns = [];\n\nfor (let index = 1; index <= 3; index++) {\n baseColumns.push({\n type: 'Input',\n label: `fieldKey${index}`,\n name: `fieldKey${index}`,\n required: true,\n });\n}\n\nconst style = {\n background: '#acd2f0',\n height: 300,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n};\n\nconst Holder = ({ form }) => {\n return (\n <>\n <ProForm form={form} columns={baseColumns} footer={false} />\n <div style={style}>占位块300高度</div>\n </>\n );\n};\n\nconst Insured = ({ form }) => {\n return (\n <>\n <ProForm form={form} columns={baseColumns} footer={false} />\n <div style={style}>占位块300高度</div>\n </>\n );\n};\n\n/** 延迟加载的模块 */\nconst Beneficiary = ({ form }) => {\n useEffect(() => {\n console.log('BeneficiaryInfo模块加载');\n }, []);\n\n return <ProForm form={form} columns={baseColumns} footer={false} />;\n};\nconst Demo = () => {\n const [holderForm] = Form.useForm();\n const [insuredForm] = Form.useForm();\n const [beneficiaryForm] = Form.useForm();\n\n /**\n * 点击保存时默认会加载所有模块\n * @param values 表单收集的数据，多个form存储到数组中\n */\n const handleSave = async (values) => {\n console.log(values);\n };\n\n return (\n <ProLayout iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\" dataSource={menusData}>\n <ProStep fixedTop={64} targetOffset={114} collapse lazyLoad>\n <ProHeader\n fixedTop={0}\n autoBack={1}\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n />\n\n <ProStep.Item id=\"holder\" title=\"投保险人信息\" form={holderForm}>\n <Holder form={holderForm} />\n </ProStep.Item>\n <ProStep.Item id=\"insured\" title=\"被保人信息\" form={insuredForm}>\n <Insured form={insuredForm} />\n </ProStep.Item>\n <ProStep.Item id=\"beneficiary\" title=\"受益人信息\" form={beneficiaryForm}>\n <Beneficiary form={beneficiaryForm} />\n </ProStep.Item>\n <ProFooter>\n <ProStep.Listener>\n <Button type=\"primary\" onClick={handleSave}>\n 保存\n </Button>\n </ProStep.Listener>\n </ProFooter>\n </ProStep>\n </ProLayout>\n );\n};\n\nexport default Demo;\n"
236
- },
237
- {
238
- "id": "ProStep/demos/validator.tsx",
239
- "component": "ProStep",
240
- "file": "demos/validator.tsx",
241
- "title": "自定义校验",
242
- "note": "",
243
- "source": "/**\n * iframe: 600\n * title: 自定义校验\n * desc: |\n * 需要在`ProStep.Item`自定义`validator`方法，该方法校验结束后，必须返回一个 rejected 状态的 Promise，抛出异常的数据\n */\n\nimport { Button, Form, message } from 'antd';\nimport { useSetState } from 'ahooks';\nimport {\n ProStep,\n ProForm,\n ProLayout,\n ProFormColumnType,\n ProEditTableColumnType,\n ProCollapse,\n ProHeader,\n ProFooter,\n} from '@zat-design/sisyphus-react';\nimport menusData from './menusData';\n\nconst dataSource = [\n {\n name: '人员+投保人信息',\n code: 'holder',\n },\n {\n name: '被保人信息',\n code: 'insured',\n },\n {\n name: '受益人信息',\n code: 'beneficiary',\n },\n];\n\nconst baseColumns = [];\n\nfor (let index = 1; index <= 20; index++) {\n baseColumns.push({\n type: 'Input',\n label: `fieldKey${index}`,\n name: `fieldKey${index}`,\n rules: [{ required: true, message: '请输入' }],\n });\n}\n\nconst Holder = () => {\n const [holderForm] = Form.useForm();\n const [peopleForm] = Form.useForm();\n\n const tableColumns: ProEditTableColumnType[] = [\n {\n title: '姓名',\n dataIndex: 'name',\n width: '30%',\n required: true,\n },\n {\n title: '性别',\n dataIndex: 'sex',\n type: 'Select',\n width: '30%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n {\n title: '出生日期',\n dataIndex: 'birthday',\n type: 'DatePicker',\n width: '20%',\n required: true,\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'dataSource',\n fieldProps: {\n columns: tableColumns,\n },\n },\n ];\n\n const validator = async () => {\n const values = await peopleForm.validateFields();\n if (!values?.dataSource?.length) {\n const errorFields = [\n {\n name: 'dataSource',\n errors: '请添加人员',\n },\n ];\n message.error('请添加人员');\n // eslint-disable-next-line prefer-promise-reject-errors\n return Promise.reject({ errorFields }); // 自定义错误时必须手动抛出错误条数给proStep\n }\n await holderForm.validateFields();\n };\n\n return (\n <ProStep.Item id=\"holder\" validator={validator}>\n <ProCollapse icon title=\"人员信息\">\n <ProForm form={peopleForm} columns={formColumns} footer={false} />\n </ProCollapse>\n <ProCollapse icon title=\"投保人信息\">\n <ProForm form={holderForm} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Insured = ({ form }) => {\n return (\n <ProStep.Item id=\"insured\" form={form}>\n <ProCollapse icon title=\"被保人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Beneficiary = ({ form }) => {\n return (\n <ProStep.Item id=\"beneficiary\" form={form}>\n <ProCollapse icon title=\"受益人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Demo = () => {\n const [insuredForm] = Form.useForm();\n const [beneficiaryForm] = Form.useForm();\n const [{ step, activeKey }, setState] = useSetState({\n step: 1,\n activeKey: 'holder',\n });\n\n const handleSave = async () => {\n try {\n const nextStep = step + 1;\n const nextActiveKey = dataSource[nextStep - 1].code;\n setState({\n step: nextStep,\n activeKey: nextActiveKey,\n });\n } catch (error) {\n console.log('error', error);\n }\n };\n\n return (\n <ProLayout iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\" dataSource={menusData}>\n <ProStep dataSource={dataSource} fixedTop={64} targetOffset={138} activeKey={activeKey}>\n <ProHeader\n fixedTop={0}\n autoBack={1}\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n />\n {step >= 1 && <Holder />}\n {step >= 2 && <Insured form={insuredForm} />}\n {step >= 3 && <Beneficiary form={beneficiaryForm} />}\n <ProFooter>\n <ProStep.Listener>\n <Button type=\"primary\" onClick={handleSave}>\n 保存并下一步\n </Button>\n </ProStep.Listener>\n </ProFooter>\n </ProStep>\n </ProLayout>\n );\n};\n\nexport default Demo;\n"
244
- },
245
- {
246
- "id": "ProStep/demos/disabled.tsx",
247
- "component": "ProStep",
248
- "file": "demos/disabled.tsx",
249
- "title": "关闭校验",
250
- "note": "",
251
- "source": "/**\n * iframe: 600\n * title: 关闭校验\n * desc: |\n * 详情查看页面的场景下，在`ProStep.Item`设置`disabled`为 true，可关闭模块的校验\n */\n\nimport { Button, Form, message } from 'antd';\nimport { useSetState } from 'ahooks';\nimport {\n ProStep,\n ProForm,\n ProLayout,\n ProFormColumnType,\n ProEditTableColumnType,\n ProCollapse,\n ProHeader,\n ProFooter,\n} from '@zat-design/sisyphus-react';\nimport menusData from './menusData';\n\nconst dataSource = [\n {\n name: '人员+投保人信息',\n code: 'holder',\n },\n {\n name: '被保人信息',\n code: 'insured',\n },\n {\n name: '受益人信息',\n code: 'beneficiary',\n },\n];\n\nconst baseColumns = [];\n\nfor (let index = 1; index <= 20; index++) {\n baseColumns.push({\n type: 'Input',\n label: `fieldKey${index}`,\n name: `fieldKey${index}`,\n rules: [{ required: true, message: '请输入' }],\n });\n}\n\nconst Holder = () => {\n const [holderForm] = Form.useForm();\n const [peopleForm] = Form.useForm();\n\n const tableColumns: ProEditTableColumnType[] = [\n {\n title: '姓名',\n dataIndex: 'name',\n width: '30%',\n required: true,\n },\n {\n title: '性别',\n dataIndex: 'sex',\n type: 'Select',\n width: '30%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n {\n title: '出生日期',\n dataIndex: 'birthday',\n type: 'DatePicker',\n width: '20%',\n required: true,\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'dataSource',\n fieldProps: {\n columns: tableColumns,\n },\n },\n ];\n\n const validator = async () => {\n const values = await peopleForm.validateFields();\n if (!values?.dataSource?.length) {\n const errorFields = [\n {\n name: 'dataSource',\n errors: '请添加人员',\n },\n ];\n message.error('请添加人员');\n // eslint-disable-next-line prefer-promise-reject-errors\n return Promise.reject({ errorFields }); // 自定义错误时必须手动抛出错误条数给proStep\n }\n await holderForm.validateFields();\n };\n\n return (\n <ProStep.Item id=\"holder\" validator={validator} disabled>\n <ProCollapse icon title=\"人员信息\">\n <ProForm form={peopleForm} columns={formColumns} footer={false} />\n </ProCollapse>\n <ProCollapse icon title=\"投保人信息\">\n <ProForm form={holderForm} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Insured = ({ form }) => {\n return (\n <ProStep.Item id=\"insured\" form={form}>\n <ProCollapse icon title=\"被保人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Beneficiary = ({ form }) => {\n return (\n <ProStep.Item id=\"beneficiary\" form={form}>\n <ProCollapse icon title=\"受益人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Demo = () => {\n const [insuredForm] = Form.useForm();\n const [beneficiaryForm] = Form.useForm();\n const [{ step, activeKey }, setState] = useSetState({\n step: 1,\n activeKey: 'holder',\n });\n\n const handleSave = async () => {\n try {\n const nextStep = step + 1;\n const nextActiveKey = dataSource[nextStep - 1].code;\n setState({\n step: nextStep,\n activeKey: nextActiveKey,\n });\n } catch (error) {\n // console.log('error', error);\n }\n };\n\n return (\n <ProLayout iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\" dataSource={menusData}>\n <ProStep dataSource={dataSource} fixedTop={64} targetOffset={138} activeKey={activeKey}>\n <ProHeader\n fixedTop={0}\n autoBack={1}\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n />\n {step >= 1 && <Holder />}\n {step >= 2 && <Insured form={insuredForm} />}\n {step >= 3 && <Beneficiary form={beneficiaryForm} />}\n <ProFooter>\n <ProStep.Listener>\n <Button type=\"primary\" onClick={handleSave}>\n 保存并下一步\n </Button>\n </ProStep.Listener>\n </ProFooter>\n </ProStep>\n </ProLayout>\n );\n};\n\nexport default Demo;\n"
252
- },
253
- {
254
- "id": "ProStep/demos/proCollapse.tsx",
255
- "component": "ProStep",
256
- "file": "demos/proCollapse.tsx",
257
- "title": "结合 ProCollapse",
258
- "note": "",
259
- "source": "/**\n * iframe: 600\n * title: 结合 ProCollapse\n * desc: |\n * ProStep.Item 通过内置 ProCollapse 开启折叠关闭模块\n */\n\nimport { Button, Form } from 'antd';\nimport { useState } from 'react';\nimport {\n ProStep,\n ProForm,\n ProLayout,\n ProHeader,\n ProFooter,\n ProCollapse,\n} from '@zat-design/sisyphus-react';\nimport menusData from './menusData';\n\nconst baseColumns = [];\n\nfor (let index = 1; index <= 50; index++) {\n if (index === 49) {\n baseColumns.push({\n type: 'Input',\n label: `fieldKey${index}`,\n name: `fieldKey${index}`,\n rules: [{ required: true, message: '请输入' }],\n });\n } else {\n baseColumns.push({\n type: 'Input',\n label: `fieldKey${index}`,\n name: `fieldKey${index}`,\n initialValue: index,\n rules: [{ required: true, message: '请输入' }],\n });\n }\n}\n\nconst Holder = ({ form }) => {\n return (\n <ProStep.Item id=\"holder\" title=\"投保险人信息\" icon collapse={false} order={1} form={form}>\n <ProCollapse icon>\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Insured = ({ form }) => {\n return (\n <ProStep.Item id=\"insured\" title=\"被保人信息\" order={2} form={form}>\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProStep.Item>\n );\n};\n\nconst Beneficiary = ({ form }) => {\n return (\n <ProStep.Item id=\"beneficiary\" title=\"受益人信息\" order={3} form={form}>\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProStep.Item>\n );\n};\n\nconst Demo = () => {\n const [holderForm] = ProForm.useForm();\n const [insuredForm] = ProForm.useForm();\n const [beneficiaryForm] = ProForm.useForm();\n\n const handleSave = async (result) => {\n console.log(result);\n };\n\n return (\n <ProLayout iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\" dataSource={menusData}>\n <ProStep fixedTop={64} targetOffset={112} collapse>\n <ProHeader\n fixedTop={0}\n autoBack={1}\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n />\n <Holder form={holderForm} />\n <Insured form={insuredForm} />\n <Beneficiary form={beneficiaryForm} />\n <ProFooter>\n <ProStep.Listener>\n <Button type=\"primary\" onClick={handleSave}>\n 保存\n </Button>\n </ProStep.Listener>\n </ProFooter>\n </ProStep>\n </ProLayout>\n );\n};\n\nexport default Demo;\n"
260
- },
261
- {
262
- "id": "ProTabs/demos/base.tsx",
263
- "component": "ProTabs",
264
- "file": "demos/base.tsx",
265
- "title": "基础使用",
266
- "note": "",
267
- "source": "import { Space } from 'antd';\nimport { ProTabs } from '@zat-design/sisyphus-react';\nimport img1 from './images/1.png';\nimport img2 from './images/2.png';\nimport img3 from './images/3.png';\n\nconst Layout = ({ children }: any) => {\n const onChange = (key: string) => {\n console.log(key);\n };\n\n const data = [\n {\n key: '1',\n total: 100,\n label: '我的消息',\n icon: <img src={img1} />,\n children: 'Content of Tab Pane 1',\n },\n {\n key: '2',\n total: 789911,\n label: '当天审核通过',\n icon: <img src={img2} />,\n children: 'Content of Tab Pane 2',\n },\n {\n key: '3',\n total: 32,\n label: '当天已下发',\n icon: <img src={img3} />,\n children: 'Content of Tab Pane 3',\n },\n ];\n\n return (\n <Space orientation=\"vertical\">\n <h4>card模式</h4>\n <ProTabs onChange={onChange} defaultActiveKey=\"1\" dataSource={data} />\n <h4>card 小模式</h4>\n <ProTabs size=\"small\" onChange={onChange} defaultActiveKey=\"1\" dataSource={data} />\n <h4>tab模式</h4>\n <ProTabs mode=\"tab\" onChange={onChange} defaultActiveKey=\"1\" dataSource={data} />\n </Space>\n );\n};\n\nexport default Layout;\n"
268
- },
269
- {
270
- "id": "ProTabs/demos/refresh.tsx",
271
- "component": "ProTabs",
272
- "file": "demos/refresh.tsx",
273
- "title": "异步刷新",
274
- "note": "",
275
- "source": "import { FC, useRef } from 'react';\nimport { ProTabs } from '@zat-design/sisyphus-react';\nimport { Button, Space, message } from 'antd';\nimport img1 from './images/1.png';\nimport img2 from './images/2.png';\nimport img3 from './images/3.png';\n\nconst Layout: FC = () => {\n const ProTabsRef = useRef<any>(null);\n\n const onChange = (key: string) => {\n console.log(key);\n };\n\n const fetchData = () => {\n const dataSource = {\n status: 200,\n message: '请求成功',\n data: {\n recordingNum: Math.floor(Math.random() * 100000),\n pendingPaymentNum: Math.floor(Math.random() * 100000),\n dataCompletionNum: Math.floor(Math.random() * 100000),\n },\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(dataSource);\n }, 500);\n });\n };\n\n return (\n <Space orientation=\"vertical\">\n <Button\n type=\"primary\"\n onClick={() => {\n ProTabsRef?.current?.useRequestRef.refresh();\n message.success('刷新成功');\n }}\n >\n 刷新工作台数据\n </Button>\n <ProTabs\n ref={ProTabsRef}\n defaultActiveKey=\"1\"\n onChange={onChange}\n useRequest={{\n // 请求服务\n service: fetchData,\n }}\n transformResponse={(res) => {\n const { dataCompletionNum, pendingPaymentNum, recordingNum } = res.data;\n // Response数据转换, 需要转换成数组数字[100,111,20]\n return [dataCompletionNum, pendingPaymentNum, recordingNum];\n }}\n dataSource={[\n {\n key: '1',\n label: '我的消息',\n icon: <img src={img1} />,\n children: 'Content of Tab Pane 1',\n },\n {\n key: '2',\n label: '当天审核通过',\n icon: <img src={img2} />,\n children: 'Content of Tab Pane 2',\n },\n {\n key: '3',\n label: '当天已下发',\n icon: <img src={img3} />,\n children: 'Content of Tab Pane 3',\n },\n ]}\n />\n </Space>\n );\n};\n\nexport default Layout;\n"
276
- },
277
- {
278
- "id": "ProTabs/demos/async.tsx",
279
- "component": "ProTabs",
280
- "file": "demos/async.tsx",
281
- "title": "完整示例",
282
- "note": "",
283
- "source": "/**\n * iframe: 600\n * title: 完整示例\n * desc: |\n * 通过异步请求工作台数量，设置 tabSearch 为 true 开启 tab 切换查询\n */\n\nimport { ProTabs } from '@zat-design/sisyphus-react';\nimport img1 from './images/1.png';\nimport img2 from './images/2.png';\nimport img3 from './images/3.png';\n\nconst Layout = ({ children }: any) => {\n const onChange = (key: string) => {\n console.log(key);\n };\n\n const fetchData = () => {\n const dataSource = {\n status: 200,\n message: '请求成功',\n data: {\n recordingNum: Math.floor(Math.random() * 100000),\n pendingPaymentNum: Math.floor(Math.random() * 100000),\n dataCompletionNum: Math.floor(Math.random() * 100000),\n },\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(dataSource);\n }, 2000);\n });\n };\n\n return (\n <ProTabs\n defaultActiveKey=\"1\"\n onChange={onChange}\n tabSearch\n useRequest={{\n // 请求服务\n service: fetchData,\n }}\n transformResponse={(res) => {\n const { dataCompletionNum, pendingPaymentNum, recordingNum } = res.data;\n // Response数据转换, 需要转换成数组数字[100,111,20]\n return [dataCompletionNum, pendingPaymentNum, recordingNum];\n }}\n dataSource={[\n {\n key: '1',\n label: '我的消息',\n icon: <img src={img1} />,\n children: 'Content of Tab Pane 1',\n },\n {\n key: '2',\n label: '当天审核通过',\n icon: <img src={img2} />,\n children: 'Content of Tab Pane 2',\n },\n {\n key: '3',\n label: '当天已下发',\n icon: <img src={img3} />,\n children: 'Content of Tab Pane 3',\n },\n ]}\n />\n );\n};\n\nexport default Layout;\n"
284
- },
285
- {
286
- "id": "ProTable/demos/baseDemo.tsx",
287
- "component": "ProTable",
288
- "file": "demos/baseDemo.tsx",
289
- "title": "基本使用",
290
- "note": "",
291
- "source": "/**\n * title: 基本使用\n * desc: |\n * 支持 `antd table` api\n */\n\nimport React from 'react';\nimport { Button } from 'antd';\nimport { ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { baseDemoData } from './data/baseDemoData';\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst BaseDemo = () => {\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 200,\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 200,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 200,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n width: 100,\n render: () => <Button type=\"link\">编辑</Button>,\n },\n ];\n\n return (\n <>\n <ProTable\n rowKey=\"productId\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n dataSource={baseDemoData}\n pagination={false}\n />\n </>\n );\n};\n\nexport default BaseDemo;\n"
292
- },
293
- {
294
- "id": "ProTable/demos/draggable.tsx",
295
- "component": "ProTable",
296
- "file": "demos/draggable.tsx",
297
- "title": "拖拽排序",
298
- "note": "",
299
- "source": "/**\n * title: 拖拽排序\n * desc: |\n * 支持 `antd table` api\n */\n\nimport React from 'react';\nimport { Button } from 'antd';\nimport { ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { draggableDemoData } from './data/draggableDemoData';\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst BaseDemo = () => {\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 200,\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 200,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 200,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n width: 100,\n render: () => <Button type=\"link\">编辑</Button>,\n },\n ];\n\n return (\n <ProTable\n tableId=\"base-demo\"\n // rowKey=\"productId\"\n rowKey={(record) => {\n return record.productId;\n }}\n columns={columns}\n scroll={{ x: 'max-content' }}\n dataSource={draggableDemoData}\n pagination={false}\n draggable\n />\n );\n};\n\nexport default BaseDemo;\n"
300
- },
301
- {
302
- "id": "ProTable/demos/showColumns.tsx",
303
- "component": "ProTable",
304
- "file": "demos/showColumns.tsx",
305
- "title": "列头动态控制",
306
- "note": "",
307
- "source": "/**\n * title: 列头动态控制\n * desc: |\n * 适用于一个表格列头，在不同场景下列头需要动态显隐时\n */\n\nimport { useState } from 'react';\nimport { Form, Radio } from 'antd';\nimport { ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst ExtendRenderDemo = () => {\n const [state, setState] = useState('1');\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '场景1-列头1',\n dataIndex: 'scene1-1',\n show: () => {\n return state === '1';\n },\n },\n {\n title: '场景1-列头2',\n dataIndex: 'scene1-2',\n show: () => {\n return state === '1';\n },\n },\n {\n title: '场景1-列头3',\n dataIndex: 'scene1-3',\n show: () => {\n return state === '1';\n },\n },\n {\n title: '场景1-列头4',\n dataIndex: 'scene1-4',\n show: () => {\n return state === '1';\n },\n },\n {\n title: '场景1-列头5',\n dataIndex: 'scene1-5',\n show: () => {\n return state === '1';\n },\n },\n {\n title: '场景2-列头1',\n dataIndex: 'scene2-1',\n show: () => {\n return state === '2';\n },\n },\n {\n title: '场景2-列头2',\n dataIndex: 'scene2-2',\n show: () => {\n return state === '2';\n },\n },\n {\n title: '场景2-列头3',\n dataIndex: 'scene2-4',\n show: () => {\n return state === '2';\n },\n },\n {\n title: '场景2-列头4',\n dataIndex: 'scene2-5',\n show: () => {\n return state === '2';\n },\n },\n {\n title: '场景2-列头5',\n dataIndex: 'scene2-5',\n show: () => {\n return state === '2';\n },\n },\n ];\n\n const dataSource = [\n {\n 'scene1-1': '1-1',\n 'scene1-2': '1-2',\n 'scene1-3': '1-3',\n 'scene1-4': '1-4',\n 'scene1-5': '1-5',\n 'scene2-1': '2-1',\n 'scene2-2': '2-2',\n 'scene2-3': '2-3',\n 'scene2-4': '2-4',\n 'scene2-5': '2-5',\n },\n ];\n\n const handleStateChange = (val) => {\n setState(val);\n };\n\n return (\n <>\n <Form.Item label=\"表头场景切换\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"1\">场景1</Radio>\n <Radio value=\"2\">场景2</Radio>\n </Radio.Group>\n </Form.Item>\n <ProTable columns={columns} dataSource={dataSource} pagination={false} />\n </>\n );\n};\n\nexport default ExtendRenderDemo;\n"
308
- },
309
- {
310
- "id": "ProTable/demos/extendRenderDemo.tsx",
311
- "component": "ProTable",
312
- "file": "demos/extendRenderDemo.tsx",
313
- "title": "快捷展示类型",
314
- "note": "",
315
- "source": "/**\n * title: 快捷展示类型\n * desc: |\n * 支持`columns`中传入`valueType`快捷展示，`ellipsis`超过宽度自动省略使用 Tooltip 展示，`format`日期格式化，`precision`设置百分比、千分比、千分位精度， `code`为枚举 code，prefix 配置前缀，suffix 配置后缀\n */\n\nimport { useState } from 'react';\nimport { Form, Radio } from 'antd';\nimport { ProConfigProvider, ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { provideConfig } from './provide';\nimport { extendRenderDemoData } from './data/extendRenderDemoData';\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst ExtendRenderDemo = () => {\n const [state, setState] = useState('CNY');\n const [data, setData] = useState(extendRenderDemoData);\n const transformAddress = (value: any) => {\n const { province, city, county, address } = value || {};\n return [province, city, county, address];\n };\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 170,\n copyable: true,\n },\n {\n title: '币种前缀金额',\n dataIndex: 'premium',\n prefix: (value, record) => {\n return record.currency;\n },\n width: 150,\n valueType: 'thousandth',\n },\n {\n title: '千分位带CNY前缀',\n dataIndex: 'premium',\n width: 150,\n valueType: 'thousandthCNY',\n },\n {\n title: '过长自动省略',\n dataIndex: 'productName',\n width: 100,\n ellipsis: true,\n },\n {\n title: '百分比（%）',\n dataIndex: 'originalLossRatio',\n width: 100,\n valueType: 'percentage',\n },\n {\n title: '千分比（‰）',\n dataIndex: 'rate',\n width: 100,\n valueType: 'permillage',\n },\n {\n title: '千分位无精度',\n dataIndex: 'sumSignPremium',\n width: 120,\n valueType: 'thousandth',\n precision: 0,\n },\n {\n title: '千分位有精度',\n dataIndex: 'premium',\n width: 150,\n valueType: 'thousandth',\n suffix: '万元',\n precision: 3,\n },\n {\n title: '枚举code-name',\n dataIndex: 'serviceType',\n width: 120,\n valueType: 'enumCodeName',\n code: 'serviceType',\n },\n {\n title: '枚举name',\n dataIndex: 'status',\n width: 100,\n valueType: 'enumName',\n code: 'ruleStatus',\n },\n {\n title: '传入数据源枚举name',\n dataIndex: 'type',\n width: 200,\n valueType: 'enumName',\n codeValues: [\n { label: '启用', value: '1' },\n { label: '禁用', value: '0' },\n ],\n },\n {\n title: 'date',\n dataIndex: 'saleTime',\n width: 120,\n valueType: 'date',\n },\n {\n title: 'dateTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateTime',\n },\n {\n title: 'dateStartTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateStartTime',\n },\n {\n title: 'dateEndTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateEndTime',\n },\n {\n title: 'dateStartEndTime',\n dataIndex: 'startTime',\n width: 340,\n valueType: 'dateStartEndTime',\n },\n {\n title: '地址',\n dataIndex: 'address',\n width: 200,\n valueType: 'address',\n },\n {\n title: '对象地址',\n dataIndex: 'objAddress',\n width: 200,\n valueType: 'address',\n transform: transformAddress,\n },\n ];\n\n const handleStateChange = (val) => {\n setState(val);\n const array = data.map((item: any) => {\n return {\n ...item,\n currency: val,\n };\n });\n setData(array);\n };\n\n return (\n <ProConfigProvider value={provideConfig}>\n <Form.Item label=\"币种切换\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"CNY\">CNY-人民币元</Radio>\n <Radio value=\"CAD\">CAD-加元</Radio>\n <Radio value=\"USD\">USD-美元</Radio>\n </Radio.Group>\n </Form.Item>\n <ProTable\n tableId=\"extend-render-demo\"\n rowKey=\"productId\"\n columns={columns}\n scroll={{ x: 'max-content', y: 500 }}\n dataSource={data}\n pagination={false}\n />\n </ProConfigProvider>\n );\n};\n\nexport default ExtendRenderDemo;\n"
316
- },
317
- {
318
- "id": "ProTable/demos/contractNewRowDemo.tsx",
319
- "component": "ProTable",
320
- "file": "demos/contractNewRowDemo.tsx",
321
- "title": "行新增",
322
- "note": "",
323
- "source": "import { ProConfigProvider, ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { provideConfig } from './provide';\nimport {\n contractDemoOriginNewRowData,\n contractDemoCurrentNewRowData,\n} from './data/contractNewRowDemoData';\n\n/**\n * 标记有改变的值Demo\n *\n * @returns\n */\nconst contractNewRowDemo = () => {\n const transformAddress = (value: any) => {\n const { province, city, county, address } = value || {};\n return [province, city, county, address];\n };\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 170,\n copyable: true,\n },\n {\n title: '币种前缀金额',\n dataIndex: 'premium',\n prefix: (value, record) => {\n return record.currency;\n },\n width: 150,\n valueType: 'thousandth',\n precision: 2,\n },\n {\n title: '过长自动省略',\n dataIndex: 'productName',\n width: 100,\n ellipsis: true,\n },\n {\n title: '百分比（%）',\n dataIndex: 'originalLossRatio',\n width: 100,\n valueType: 'percentage',\n precision: 2,\n },\n {\n title: '千分比（‰）',\n dataIndex: 'rate',\n width: 100,\n valueType: 'permillage',\n precision: 2,\n suffix: '‰',\n },\n {\n title: '千分位无精度',\n dataIndex: 'sumSignPremium',\n width: 120,\n valueType: 'thousandth',\n precision: 0,\n },\n {\n title: '千分位有精度',\n dataIndex: 'premium1',\n width: 170,\n valueType: 'thousandth',\n suffix: '万元',\n },\n {\n title: '枚举code-name',\n dataIndex: 'serviceType',\n width: 120,\n valueType: 'enumCodeName',\n code: 'serviceType',\n },\n {\n title: '枚举name',\n dataIndex: 'status',\n width: 100,\n valueType: 'enumName',\n code: 'ruleStatus',\n },\n {\n title: 'date',\n dataIndex: 'saleTime',\n width: 130,\n valueType: 'date',\n },\n {\n title: 'dateTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateTime',\n },\n {\n title: 'dateStartTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateStartTime',\n },\n {\n title: 'dateEndTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateEndTime',\n },\n {\n title: 'dateStartEndTime',\n dataIndex: 'startTime',\n width: 340,\n valueType: 'dateStartEndTime',\n },\n {\n title: '地址',\n dataIndex: 'address',\n width: 100,\n valueType: 'address',\n ellipsis: true,\n },\n {\n title: '对象地址',\n dataIndex: 'objAddress',\n width: 200,\n valueType: 'address',\n transform: transformAddress,\n },\n ];\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProTable\n rowKey=\"productId\"\n columns={columns}\n scroll={{ x: 'max-content', y: 500 }}\n dataSource={contractDemoCurrentNewRowData}\n pagination={false}\n diffConfig={{\n originalDataSource: contractDemoOriginNewRowData,\n }}\n />\n </ProConfigProvider>\n );\n};\n\nexport default contractNewRowDemo;\n"
324
- },
325
- {
326
- "id": "ProTable/demos/contractNewBlockDemo.tsx",
327
- "component": "ProTable",
328
- "file": "demos/contractNewBlockDemo.tsx",
329
- "title": "块新增",
330
- "note": "",
331
- "source": "import { ProConfigProvider, ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { provideConfig } from './provide';\nimport {\n contractDemoOriginBlockNewData,\n contractDemoCurrentBlockNewData,\n} from './data/contractNewBlockDemoData';\n\n/**\n * 标记有改变的值Demo\n *\n * @returns\n */\nconst contractNewBlockDemo = () => {\n const transformAddress = (value: any) => {\n const { province, city, county, address } = value || {};\n return [province, city, county, address];\n };\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 170,\n copyable: true,\n },\n {\n title: '币种前缀金额',\n dataIndex: 'premium',\n prefix: (value, record) => {\n return record.currency;\n },\n width: 150,\n valueType: 'thousandth',\n precision: 2,\n },\n {\n title: '过长自动省略',\n dataIndex: 'productName',\n width: 100,\n ellipsis: true,\n },\n {\n title: '百分比（%）',\n dataIndex: 'originalLossRatio',\n width: 100,\n valueType: 'percentage',\n precision: 2,\n },\n {\n title: '千分比（‰）',\n dataIndex: 'rate',\n width: 100,\n valueType: 'permillage',\n precision: 2,\n suffix: '‰',\n },\n {\n title: '千分位无精度',\n dataIndex: 'sumSignPremium',\n width: 120,\n valueType: 'thousandth',\n precision: 0,\n },\n {\n title: '千分位有精度',\n dataIndex: 'premium1',\n width: 170,\n valueType: 'thousandth',\n suffix: '万元',\n },\n {\n title: '枚举code-name',\n dataIndex: 'serviceType',\n width: 120,\n valueType: 'enumCodeName',\n code: 'serviceType',\n },\n {\n title: '枚举name',\n dataIndex: 'status',\n width: 100,\n valueType: 'enumName',\n code: 'ruleStatus',\n },\n {\n title: 'date',\n dataIndex: 'saleTime',\n width: 130,\n valueType: 'date',\n },\n {\n title: 'dateTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateTime',\n },\n {\n title: 'dateStartTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateStartTime',\n },\n {\n title: 'dateEndTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateEndTime',\n },\n {\n title: 'dateStartEndTime',\n dataIndex: 'startTime',\n width: 340,\n valueType: 'dateStartEndTime',\n },\n {\n title: '地址',\n dataIndex: 'address',\n width: 100,\n valueType: 'address',\n ellipsis: true,\n },\n {\n title: '对象地址',\n dataIndex: 'objAddress',\n width: 200,\n valueType: 'address',\n transform: transformAddress,\n },\n ];\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProTable\n rowKey=\"productId\"\n columns={columns}\n scroll={{ x: 'max-content', y: 500 }}\n dataSource={contractDemoCurrentBlockNewData}\n pagination={false}\n diffConfig={{\n originalDataSource: contractDemoOriginBlockNewData,\n }}\n />\n </ProConfigProvider>\n );\n};\n\nexport default contractNewBlockDemo;\n"
332
- },
333
- {
334
- "id": "ProTable/demos/contractChangedBlockDemo.tsx",
335
- "component": "ProTable",
336
- "file": "demos/contractChangedBlockDemo.tsx",
337
- "title": "块改变",
338
- "note": "",
339
- "source": "import { ProConfigProvider, ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { provideConfig } from './provide';\n\nimport {\n contractDemoOriginBlockChangeData,\n contractDemoCurrentBlockChangeData,\n} from './data/contractChangedBlockDemoData';\n\n/**\n * 标记有改变的值Demo\n *\n * @returns\n */\nconst contractChangedBlockDemo = () => {\n const transformAddress = (value: any) => {\n const { province, city, county, address } = value || {};\n return [province, city, county, address];\n };\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 170,\n copyable: true,\n },\n {\n title: '币种前缀金额',\n dataIndex: 'premium',\n prefix: (value, record) => {\n return record.currency;\n },\n width: 150,\n valueType: 'thousandth',\n precision: 2,\n },\n {\n title: '过长自动省略',\n dataIndex: 'productName',\n width: 100,\n ellipsis: true,\n },\n {\n title: '百分比（%）',\n dataIndex: 'originalLossRatio',\n width: 100,\n valueType: 'percentage',\n precision: 2,\n },\n {\n title: '千分比（‰）',\n dataIndex: 'rate',\n width: 100,\n valueType: 'permillage',\n precision: 2,\n suffix: '‰',\n },\n {\n title: '千分位无精度',\n dataIndex: 'sumSignPremium',\n width: 120,\n valueType: 'thousandth',\n precision: 0,\n },\n {\n title: '千分位有精度',\n dataIndex: 'premium',\n width: 170,\n valueType: 'thousandth',\n suffix: '万元',\n },\n {\n title: '枚举code-name',\n dataIndex: 'serviceType',\n width: 120,\n valueType: 'enumCodeName',\n code: 'serviceType',\n },\n {\n title: '枚举name',\n dataIndex: 'status',\n width: 100,\n valueType: 'enumName',\n code: 'ruleStatus',\n },\n {\n title: 'date',\n dataIndex: 'saleTime',\n width: 130,\n valueType: 'date',\n },\n {\n title: 'dateTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateTime',\n },\n {\n title: 'dateStartTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateStartTime',\n },\n {\n title: 'dateEndTime',\n dataIndex: 'saleTime',\n width: 200,\n valueType: 'dateEndTime',\n },\n {\n title: 'dateStartEndTime',\n dataIndex: 'startTime',\n width: 340,\n valueType: 'dateStartEndTime',\n },\n {\n title: '地址',\n dataIndex: 'address',\n width: 100,\n valueType: 'address',\n ellipsis: true,\n },\n {\n title: '对象地址',\n dataIndex: 'objAddress',\n width: 200,\n valueType: 'address',\n transform: transformAddress,\n },\n ];\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProTable\n rowKey=\"productId\"\n columns={columns}\n scroll={{ x: 'max-content', y: 500 }}\n dataSource={contractDemoCurrentBlockChangeData}\n pagination={false}\n diffConfig={{\n originalDataSource: contractDemoOriginBlockChangeData,\n }}\n />\n </ProConfigProvider>\n );\n};\n\nexport default contractChangedBlockDemo;\n"
340
- },
341
- {
342
- "id": "ProTable/demos/contractDiyDiffDemo.tsx",
343
- "component": "ProTable",
344
- "file": "demos/contractDiyDiffDemo.tsx",
345
- "title": "自定义比较",
346
- "note": "",
347
- "source": "import { tools } from '@zat-design/utils';\nimport { Row } from 'antd';\nimport { ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { originalData, dataSource } from './data/contractDiyDiffDemoData';\n\n/** 费用类型 */\nexport const FEE_TYPE = {\n /** 共保保费 */\n coinsPremium: '0',\n /** 共保出单费 */\n coinsIssue: '1',\n /** 共保手续费 */\n coinsCharge: '2',\n};\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst contractDiyDiffDemo = () => {\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '共保人',\n dataIndex: 'coinsName',\n render(text, record) {\n const { coinsCode, coinsName } = record;\n return coinsCode ? `${coinsCode}-${coinsName}` : null;\n },\n },\n {\n title: '共保比例(%)',\n dataIndex: 'coinsRate',\n valueType: 'percentage',\n precision: 4,\n },\n {\n title: '共保保额',\n dataIndex: 'coinsSumInsured',\n valueType: 'thousandth',\n precision: 2,\n },\n {\n title: '共保保费',\n dataIndex: 'coinsPremium',\n valueType: 'thousandth',\n precision: 2,\n },\n {\n title: '共保保费变化量',\n dataIndex: 'chgCoinsPremium',\n valueType: 'thousandth',\n precision: 2,\n render: (chgCoinsPremium: any) => {\n return tools.formatAmount(chgCoinsPremium, 2);\n },\n viewRender: () => {\n return false;\n },\n },\n {\n title: '共保手续费',\n dataIndex: 'coinsurerFeeList',\n render(text: any, record) {\n const { coinsurerFeeList } = record;\n const chargeList = coinsurerFeeList?.filter?.(\n (item: any) => item.feeType === FEE_TYPE.coinsCharge,\n );\n if (chargeList?.length) {\n return (\n <div>\n {chargeList.map(({ extraInfo, feeAmount }: any) => (\n <Row justify=\"space-between\">\n {extraInfo?.agentName ? <span>{extraInfo?.agentName}&nbsp;</span> : null}\n {feeAmount ? <span>{tools.formatAmount(feeAmount)}</span> : '-'}\n </Row>\n ))}\n </div>\n );\n }\n },\n viewRender: ({ originValue, originRecord, value, record }: any) => {\n const chargeList1 = record?.coinsurerFeeList?.filter?.(\n (item: any) => item.feeType === FEE_TYPE.coinsCharge,\n );\n const chargeListOrigin = originRecord?.coinsurerFeeList?.filter?.(\n (item: any) => item.feeType === FEE_TYPE.coinsCharge,\n );\n if (\n (chargeListOrigin?.[0]?.feeAmount || chargeList1?.[0]?.feeAmount) &&\n chargeList1[0].feeAmount !== chargeListOrigin?.[0].feeAmount\n ) {\n return chargeListOrigin?.[0].feeAmount;\n }\n return false;\n },\n },\n {\n title: '共保手续费变化量',\n dataIndex: 'endoCoinsurerFeeList',\n width: '220px',\n render(endoCoinsurerFeeList: any) {\n const endoChargeListList = endoCoinsurerFeeList?.filter?.(\n (item: any) => item.feeType === FEE_TYPE.coinsCharge,\n );\n if (endoChargeListList?.length) {\n return (\n <>\n {endoChargeListList.map(({ extraInfo, chgFeeAmount }: any) => (\n <Row justify=\"space-between\">\n {extraInfo?.agentName ? <span>{extraInfo?.agentName}&nbsp;</span> : null}\n {chgFeeAmount ? <span>{tools.formatAmount(chgFeeAmount)}</span> : '-'}\n </Row>\n ))}\n </>\n );\n }\n },\n viewRender: () => {\n return false;\n },\n },\n {\n title: '共保出单费',\n dataIndex: 'coinsurerFeeList1',\n render(text, { coinsurerFeeList }) {\n const issueList = coinsurerFeeList?.filter?.(\n (item: any) => item.feeType === FEE_TYPE.coinsIssue,\n );\n if (issueList?.length) {\n return (\n <div>\n {issueList.map(({ extraInfo, feeAmount }: any) => (\n <Row justify=\"space-between\">\n {extraInfo?.agentName ? <span>{extraInfo?.agentName}&nbsp;</span> : null}\n {feeAmount ? <span>{tools.formatAmount(feeAmount)}</span> : '-'}\n </Row>\n ))}\n </div>\n );\n }\n },\n viewRender: ({ originRecord, record }: any) => {\n const chargeList1 = record?.coinsurerFeeList?.filter?.(\n (item: any) => item.feeType === FEE_TYPE.coinsIssue,\n );\n const chargeListOrigin = originRecord?.coinsurerFeeList?.filter?.(\n (item: any) => item.feeType === FEE_TYPE.coinsIssue,\n );\n if (\n (chargeListOrigin?.[0] || chargeList1?.[0]) &&\n chargeList1[0]?.feeAmount !== chargeListOrigin[0]?.feeAmount\n ) {\n // console.log('chargeListOrigin[0]?.feeAmount: ', chargeListOrigin[0]?.feeAmount);\n return chargeListOrigin[0]?.feeAmount;\n }\n return false;\n },\n },\n {\n title: '出单方',\n dataIndex: 'isIssue',\n code: 'CD001217',\n valueType: 'enumName',\n },\n {\n title: '是否首席承保人',\n dataIndex: 'isMainCoinsurer',\n code: 'CD001217',\n valueType: 'enumName',\n },\n {\n title: '是否首席理赔人',\n dataIndex: 'isMainClaimer',\n code: 'CD001217',\n valueType: 'enumName',\n },\n ];\n\n return (\n <>\n <ProTable\n rowKey=\"id\"\n diffConfig={{\n originalDataSource: originalData,\n }}\n columns={columns}\n scroll={{ x: 'max-content' }}\n dataSource={dataSource}\n pagination={false}\n />\n </>\n );\n};\n\nexport default contractDiyDiffDemo;\n"
348
- },
349
- {
350
- "id": "ProTable/demos/resizeTableDemo.tsx",
351
- "component": "ProTable",
352
- "file": "demos/resizeTableDemo.tsx",
353
- "title": "重置列宽",
354
- "note": "",
355
- "source": "/**\n * title: 重置列宽\n * desc: |\n * 支持传入 `resizeColumn` 开启调整列宽、重置列宽功能\n */\n\nimport { Button } from 'antd';\nimport { ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { resizeTableDemoData } from './data/resizeTableDemoData';\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst ConfigTableDemo = () => {\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 300,\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 300,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 300,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n render: () => <Button type=\"link\">编辑</Button>,\n },\n ];\n\n return (\n <ProTable\n tableId=\"resize-table-demo\"\n rowKey=\"productId\"\n resizeColumn\n columns={columns}\n scroll={{ x: 'max-content' }}\n dataSource={resizeTableDemoData}\n pagination={false}\n />\n );\n};\n\nexport default ConfigTableDemo;\n"
356
- },
357
- {
358
- "id": "ProTable/demos/fixedColumnTableDemo.tsx",
359
- "component": "ProTable",
360
- "file": "demos/fixedColumnTableDemo.tsx",
361
- "title": "自定义列、缓存配置",
362
- "note": "",
363
- "source": "/**\n * iframe: 500\n * title: 自定义列、缓存配置\n * desc: |\n * 支持传入 `columnConfig` 开启自定义列功能，`cacheTime`开启列配置缓存功能，开启列配置功能时默认开启缓存功能\n */\n\nimport { Button } from 'antd';\nimport { ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { fixedColumnTableDemoData } from './data/fixedColumnTableDemoData';\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst FixedColumnTableDemo = () => {\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n fixed: 'left',\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 250,\n ellipsis: true,\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 200,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 200,\n },\n {\n title: '修改时间',\n dataIndex: 'updateDate',\n width: 300,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n width: 100,\n fixed: 'right',\n render: () => <Button type=\"link\">编辑</Button>,\n },\n ];\n\n return (\n <ProTable\n rowKey=\"productId\"\n columnConfig\n scroll={{ x: 'max-content' }}\n columns={columns}\n dataSource={fixedColumnTableDemoData}\n pagination={false}\n />\n );\n};\n\nexport default FixedColumnTableDemo;\n"
364
- },
365
- {
366
- "id": "ProTable/demos/customRenderDemo.tsx",
367
- "component": "ProTable",
368
- "file": "demos/customRenderDemo.tsx",
369
- "title": "header、footer 左侧自定义",
370
- "note": "",
371
- "source": "/**\n * iframe: 600\n * title: header、footer 左侧自定义\n * desc: |\n * 支持传入 `headerRender` 自定义 header 左侧渲染，支持传入 `footerRender` 自定义 footer 左侧渲染\n */\n\nimport { Button } from 'antd';\nimport { ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { customRenderDemoData } from './data/customRenderDemoData';\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst customRenderDemo = () => {\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 300,\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 300,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 300,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n render: () => <Button type=\"link\">编辑</Button>,\n },\n ];\n\n return (\n <ProTable\n tableId=\"header-render-demo\"\n rowKey=\"productId\"\n columns={columns}\n dataSource={customRenderDemoData}\n headerRender={<Button type=\"primary\">新增</Button>}\n footerRender={<Button type=\"link\">删除</Button>}\n pagination={false}\n />\n );\n};\n\nexport default customRenderDemo;\n"
372
- },
373
- {
374
- "id": "ProTable/demos/totalTableDemo.tsx",
375
- "component": "ProTable",
376
- "file": "demos/totalTableDemo.tsx",
377
- "title": "合计",
378
- "note": "",
379
- "source": "/**\n * title: 合计\n * desc: |\n * 使用`@zat-design/utils`的`sumAmount`实现表格的合计功能\n */\n\nimport { ProTable } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProTableSummaryType } from '@zat-design/sisyphus-react';\nimport { totalTableDemoData } from './data/totalTableDemoData';\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst ExtendRenderDemo = () => {\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 150,\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 150,\n ellipsis: true,\n },\n {\n title: '赔付率（%）',\n dataIndex: 'originalLossRatio',\n width: 180,\n valueType: 'percentage',\n precision: 2,\n },\n {\n title: '保额',\n dataIndex: 'sumSignPremium',\n width: 180,\n valueType: 'thousandth',\n },\n {\n title: '保费',\n dataIndex: 'premium',\n width: 180,\n precision: 2,\n },\n {\n title: '创建时间',\n dataIndex: 'startTime',\n width: 200,\n valueType: 'datePicker',\n },\n ];\n\n const summary: ProTableSummaryType = {\n fixed: true,\n columns: [\n {\n index: 0,\n colSpan: 2,\n title: '总计',\n dataIndex: 'total',\n },\n {\n index: 2,\n dataIndex: 'originalLossRatio',\n valueType: 'percentage',\n },\n {\n index: 3,\n dataIndex: 'sumSignPremium',\n valueType: 'thousandth',\n },\n {\n index: 4,\n dataIndex: 'premium',\n colSpan: 2,\n valueType: 'thousandth',\n },\n ],\n };\n\n return (\n <ProTable\n tableId=\"total-table-demo\"\n rowKey=\"productId\"\n scroll={{ x: 'max-content' }}\n columns={columns}\n dataSource={totalTableDemoData}\n pagination={false}\n summary={summary}\n />\n );\n};\n\nexport default ExtendRenderDemo;\n"
380
- },
381
- {
382
- "id": "ProTable/demos/singleRadioCheckTableDemo.tsx",
383
- "component": "ProTable",
384
- "file": "demos/singleRadioCheckTableDemo.tsx",
385
- "title": "单选",
386
- "note": "",
387
- "source": "import { Button, Form, message, Space } from 'antd';\nimport { ProConfigProvider, ProTable, ProForm, ProLayout } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getUseAntdTableDemoData } from './data/useAntdTableDemoData';\nimport type { ProTableListResponseType } from '@zat-design/sisyphus-react';\n\nconst { useAntdTable } = ProTable;\nconst { ProHeader } = ProLayout;\n\nconst searchColumn: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '产品代码',\n name: 'productCode',\n },\n {\n type: 'Input',\n label: '产品名称',\n name: 'productName',\n },\n];\n\n// 列表列定义\nconst columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n tooltip: '产品代码提示',\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 300,\n tooltip: {\n title: '产品名称提示',\n },\n },\n {\n title: '操作',\n dataIndex: 'operate',\n render: (text: string, record: any) => (\n <Space size={8}>\n <Button type=\"link\" onClick={() => message.info(`查看${JSON.stringify(record)}`)}>\n 查看\n </Button>\n <Button type=\"link\" onClick={() => message.info(`编辑${JSON.stringify(record)}`)}>\n 编辑\n </Button>\n </Space>\n ),\n },\n];\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst UseAntdTableDemo = () => {\n const [form] = Form.useForm();\n\n const getTableData = (data: any) => {\n const { pageNum } = data;\n return new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n // @ts-ignore\n data: {\n productList: getUseAntdTableDemoData(pageNum),\n total: 50,\n pageNum: 1,\n pageSize: 10,\n },\n message: '',\n });\n }, 2000);\n });\n };\n\n const {\n params,\n selectedRowKeys,\n selectedRecords,\n selectedTip,\n clearSelected,\n onSearch,\n onReset,\n tableProps,\n } = useAntdTable(getTableData, {\n form,\n rowKey: 'productId',\n rowSelection: {\n type: 'radio',\n },\n transformResponse: (res: any) => {\n const { data } = res;\n return {\n ...data,\n list: data?.productList,\n };\n },\n });\n\n const provideConfig = {\n globalConfig: {\n storage: 'sessionStorage',\n },\n };\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProHeader title=\"我是标题\" />\n <ProForm\n columns={searchColumn}\n confirmLoading={tableProps.loading}\n form={form}\n onCancel={onReset}\n onFinish={onSearch}\n />\n <ProTable\n tableId=\"use-antd-table-demo\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n headerRender={() => (\n <Space>\n <Button type=\"primary\" onClick={clearSelected}>\n 清空勾选\n </Button>\n {selectedTip}\n </Space>\n )}\n />\n <div style={{ background: '#f5f5f5', padding: 8 }}>\n <p>请求参数: {JSON.stringify(params)}</p>\n <p>勾选数据: {JSON.stringify(selectedRecords)}</p>\n <p>勾选keys: {JSON.stringify(selectedRowKeys)}</p>\n </div>\n </ProConfigProvider>\n );\n};\n\nexport default UseAntdTableDemo;\n"
388
- },
389
- {
390
- "id": "ProTable/demos/useAntdTableDemo.tsx",
391
- "component": "ProTable",
392
- "file": "demos/useAntdTableDemo.tsx",
393
- "title": "完整功能",
394
- "note": "",
395
- "source": "/**\n * title: 完整功能\n * desc: |\n * 1. 使用 `ProConfigProvider` 的 `globalConfig` 全局配置: 缓存位置`storage`\n * 2. 使用 `ProConfigProvider` 进行 `ProTable` 的全局配置: `resizeColumn` 、 `columnConfig`、`cacheTime`\n * 3. 使用 `useAntdTable`，包含表格常见的`form` + `table`、新增、编辑、查看、选择等功能\n * 4. 支持 `useAntdTable` 暴露的`tableProps`直接透传给`ProTable`组件\n */\n\nimport { useState } from 'react';\nimport { Button, Form, message, Space } from 'antd';\nimport {\n ProConfigProvider,\n ProTable,\n ProForm,\n ProLayout,\n ProHeader,\n} from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getUseAntdTableDemoData } from './data/useAntdTableDemoData';\nimport type { ProTableListResponseType } from '@zat-design/sisyphus-react';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '产品代码',\n name: 'productCode',\n },\n {\n type: 'Input',\n label: '产品名称',\n name: 'productName',\n },\n {\n type: 'Input',\n label: '产品公司',\n name: 'companyName',\n },\n {\n type: 'Input',\n label: '产品状态',\n name: 'productStatus',\n },\n {\n type: 'Group',\n label: '紧凑表单带分隔',\n names: ['separator1', 'separator2'],\n fieldProps: {\n space: {\n compact: true,\n separator: '~',\n },\n children: [\n {\n type: 'Input',\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n];\n\n// 列表列定义\nconst columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n tooltip: '产品代码提示',\n // fixed: 'left',\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 300,\n tooltip: {\n title: '产品名称提示',\n },\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 300,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 300,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n render: (text: string, record: any) => (\n <Space size={8}>\n <Button type=\"link\" onClick={() => message.info(`查看${JSON.stringify(record)}`)}>\n 查看\n </Button>\n <Button type=\"link\" onClick={() => message.info(`编辑${JSON.stringify(record)}`)}>\n 编辑\n </Button>\n </Space>\n ),\n },\n];\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst UseAntdTableDemo = () => {\n const [form] = Form.useForm();\n const [extraParams, setExtraParams] = useState('TASK111');\n\n const getTableData = (data: any) => {\n console.log('search data', data);\n\n const { pageNum } = data;\n return new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n // @ts-ignore\n data: {\n productList: getUseAntdTableDemoData(pageNum),\n total: 50,\n pageNum: 1,\n pageSize: 10,\n },\n message: '',\n });\n }, 2000);\n });\n };\n\n const {\n params,\n selectedRowKeys,\n selectedRecords,\n selectedTip,\n clearSelected,\n onSearch,\n onReset,\n refresh,\n tableProps,\n } = useAntdTable(getTableData, {\n form,\n rowKey: 'productId',\n rowSelections: true, // 开启选择下拉-选择当前页、选择全部、取消选择\n extraParams: {\n // 表单之外的额外参数，此值变更时也会重新发起请求,重置表单不会被清空\n taskNo: extraParams,\n reportNo: 'REPORT111',\n },\n transformResponse: (res: any) => {\n const { data } = res;\n return {\n ...data,\n list: data?.productList,\n };\n },\n });\n\n const provideConfig = {\n globalConfig: {\n storage: 'sessionStorage',\n },\n ProTable: {\n resizeColumn: true,\n columnConfig: true,\n cacheTime: true,\n },\n ProEnum: {\n dataSource: {\n tabs: [\n {\n label: '全部',\n value: 'all',\n },\n {\n label: '待处理',\n value: 'pending',\n },\n {\n label: '处理中',\n value: 'processing',\n },\n {\n label: '已处理',\n value: 'processed',\n },\n ],\n },\n },\n };\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProHeader title=\"我是标题\" />\n <ProForm\n columns={searchColumn}\n confirmLoading={tableProps.loading}\n form={form}\n onCancel={onReset}\n onFinish={onSearch}\n />\n <ProTable\n tableId=\"use-antd-table-demo\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n headerRender={() => (\n <Space>\n <Button type=\"primary\" onClick={() => message.info('新增')}>\n 新增\n </Button>\n <Button type=\"primary\" onClick={() => refresh()}>\n 刷新\n </Button>\n <Button type=\"primary\" onClick={clearSelected}>\n 清空勾选\n </Button>\n <Button type=\"primary\" onClick={() => setExtraParams('TASK222')}>\n 变更extraParams\n </Button>\n {selectedTip}\n </Space>\n )}\n footerRender={() => <Button type=\"link\">删除</Button>}\n />\n <div style={{ background: '#f5f5f5', padding: 8 }}>\n <p>请求参数: {JSON.stringify(params)}</p>\n <p>勾选数据: {JSON.stringify(selectedRecords)}</p>\n <p>勾选keys: {JSON.stringify(selectedRowKeys)}</p>\n </div>\n </ProConfigProvider>\n );\n};\n\nexport default UseAntdTableDemo;\n"
396
- },
397
- {
398
- "id": "ProTable/demos/sorterAndFiltersDemo.tsx",
399
- "component": "ProTable",
400
- "file": "demos/sorterAndFiltersDemo.tsx",
401
- "title": "完整功能",
402
- "note": "",
403
- "source": "/**\n * title: 完整功能\n * desc: |\n * `支持antd的筛选和排序功能`\n */\n\nimport { useState } from 'react';\nimport { Button, Form, message, Space } from 'antd';\nimport { ProTable, ProForm, ProLayout, ProHeader, ProCollapse } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { sorterAndFiltersDemoData } from './data/sorterAndFiltersDemoData';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '产品代码加长字段码',\n name: 'productCode',\n required: true,\n },\n {\n type: 'Input',\n label: '产品名称',\n name: 'productName',\n },\n {\n type: 'Input',\n label: '产品公司',\n name: 'companyName',\n },\n {\n type: 'Input',\n label: '产品状态',\n name: 'productStatus',\n },\n];\n\n// 列表列定义\nconst columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'Jim',\n value: 'Jim',\n },\n ],\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 300,\n sorter: true,\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 300,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 300,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n fixed: 'right',\n render: (text: string, record: any) => (\n <Space size={8}>\n <Button type=\"link\" onClick={() => message.info(`查看${JSON.stringify(record)}`)}>\n 查看\n </Button>\n <Button type=\"link\" onClick={() => message.info(`编辑${JSON.stringify(record)}`)}>\n 编辑\n </Button>\n </Space>\n ),\n },\n];\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst UseAntdTableDemo = () => {\n const [form] = Form.useForm();\n const [extraParams, setExtraParams] = useState('TASK111');\n\n const getTableData = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n // @ts-ignore\n data: { productList: sorterAndFiltersDemoData, total: 50, pageNum: 1, pageSize: 10 },\n message: '',\n });\n }, 1000);\n });\n };\n\n const {\n params,\n selectedRowKeys,\n selectedRecords,\n clearSelected,\n tableProps,\n onSearch,\n onReset,\n refresh,\n } = useAntdTable(\n getTableData,\n {\n form,\n rowKey: 'productId',\n // rowSelection: true, // tableProps是否返回rowSelection\n extraParams: {\n // 表单之外的额外参数，此值变更时也会重新发起请求,重置表单不会被清空\n taskNo: extraParams,\n },\n transformResponse: (res: any) => {\n const { data } = res;\n return {\n ...data,\n list: data?.productList,\n };\n },\n },\n {\n defaultParams: [{ reportNo: 'REPORT111' }],\n },\n );\n\n return (\n <ProCollapse style={{ marginTop: 16 }}>\n <ProHeader title=\"我是标题\" />\n <ProForm\n columns={searchColumn}\n confirmLoading={tableProps.loading}\n form={form}\n onCancel={onReset}\n onFinish={onSearch}\n />\n <ProTable\n tableId=\"use-antd-table-demo\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n headerRender={() => (\n <Space>\n <Button type=\"primary\" onClick={() => message.info('新增')}>\n 新增\n </Button>\n <Button type=\"primary\" onClick={() => refresh()}>\n 刷新\n </Button>\n <Button type=\"primary\" onClick={clearSelected}>\n 清空勾选\n </Button>\n <Button type=\"primary\" onClick={() => setExtraParams('TASK222')}>\n 变更extraParams\n </Button>\n </Space>\n )}\n footerRender={() => <Button type=\"link\">删除</Button>}\n />\n <div style={{ background: '#f5f5f5', padding: 8 }}>\n <p>请求参数: {JSON.stringify(params)}</p>\n <p>勾选数据: {JSON.stringify(selectedRecords)}</p>\n <p>勾选keys: {JSON.stringify(selectedRowKeys)}</p>\n </div>\n </ProCollapse>\n );\n};\n\nexport default UseAntdTableDemo;\n"
404
- },
405
- {
406
- "id": "ProTable/demos/editableCellDemo.tsx",
407
- "component": "ProTable",
408
- "file": "demos/editableCellDemo.tsx",
409
- "title": "单元格编辑",
410
- "note": "",
411
- "source": "/**\n * title: 单元格编辑\n * desc: |\n * 通过在 `columns` 中配置 `editConfig`，支持对单元格进行内联编辑。\n * - hover 到单元格时，右侧显示编辑图标，点击切换为编辑态\n * - 失焦后，若值未变化则直接恢复展示态；若值有变化则调用 `fieldProps.onBlur`（支持异步 Promise）\n * - 配置 `rules` 校验失败时保持编辑态，不触发 `onBlur`\n * - `placeholder` 默认取列的 `title`，无需单独配置\n * - 配置了 `editConfig` 后，`render` 配置会被忽略；若需要展示自定义内容，请用 `valueType` + `editConfig` 组合\n */\n\nimport { useState } from 'react';\nimport { Button, Form, message } from 'antd';\nimport { ProTable, ProForm, ProHeader } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { sorterAndFiltersDemoData } from './data/sorterAndFiltersDemoData';\n\nconst { useAntdTable } = ProTable;\n\nconst statusOptions = [\n { label: '有效', value: '有效' },\n { label: '无效', value: '无效' },\n { label: '待审核', value: '待审核' },\n];\n\nconst searchColumn: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '产品代码',\n name: 'productCode',\n },\n {\n type: 'Input',\n label: '产品名称',\n name: 'productName',\n },\n];\n\nconst EditableCellDemo = () => {\n const [form] = Form.useForm();\n const [dataSource, setDataSource] = useState(() =>\n sorterAndFiltersDemoData.map((item) => ({ ...item })),\n );\n\n const handleBlur = (field: string) => async (value: any, record: any, index: number) => {\n console.log('handleBlur', value, record, index);\n\n await new Promise((resolve) => setTimeout(resolve, 500));\n setDataSource((prev) =>\n prev.map((item) =>\n item.productId === record.productId ? { ...item, [field]: value } : item,\n ),\n );\n message.success(`已更新 ${field}: ${value}`);\n };\n\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 160,\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 220,\n editConfig: {\n type: 'Input',\n fieldProps: {\n maxLength: 50,\n onBlur: handleBlur('productName'),\n },\n },\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 180,\n editConfig: {\n type: 'Input',\n fieldProps: {\n onBlur: handleBlur('companyName'),\n },\n },\n },\n {\n title: '金额',\n dataIndex: 'money',\n width: 200,\n valueType: 'thousandth',\n editConfig: {\n type: 'InputNumber',\n valueType: 'thousandth',\n fieldProps: {\n onBlur: handleBlur('money'),\n },\n },\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 160,\n editConfig: {\n type: 'ProSelect',\n fieldProps: {\n dataSource: statusOptions,\n onBlur: handleBlur('productStatus'),\n },\n },\n },\n {\n title: '操作',\n dataIndex: 'operate',\n fixed: 'right',\n width: 120,\n render: (_: string, record: any) => (\n <Button type=\"link\" onClick={() => message.info(`查看 ${record.productName}`)}>\n 查看\n </Button>\n ),\n },\n ];\n\n const getTableData = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: { productList: dataSource, total: dataSource.length, pageNum: 1, pageSize: 10 },\n message: '',\n });\n }, 300);\n });\n };\n\n const { tableProps, onSearch, onReset } = useAntdTable(getTableData, {\n form,\n rowKey: 'productId',\n transformResponse: (res: any) => {\n const { data } = res;\n return { ...data, list: data?.productList };\n },\n });\n\n return (\n <>\n <ProHeader title=\"单元格编辑\" />\n <ProForm\n columns={searchColumn}\n confirmLoading={tableProps.loading}\n form={form}\n onCancel={onReset}\n onFinish={onSearch}\n />\n <ProTable\n tableId=\"editable-cell-demo\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n dataSource={dataSource}\n />\n </>\n );\n};\n\nexport default EditableCellDemo;\n"
412
- },
413
- {
414
- "id": "ProTable/demos/crossPageSelectDemo.tsx",
415
- "component": "ProTable",
416
- "file": "demos/crossPageSelectDemo.tsx",
417
- "title": "单元格编辑",
418
- "note": "",
419
- "source": "/**\n * title: 单元格编辑\n * desc: |\n * `支持跨页勾选功能`\n */\n\nimport { useState } from 'react';\nimport { Button, Form, message, Space } from 'antd';\nimport {\n ProConfigProvider,\n ProTable,\n ProForm,\n ProLayout,\n ProHeader,\n} from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { crossPageSelectDemoData } from './data/crossPageSelectDemoData';\nimport type { ProTableListResponseType } from '@zat-design/sisyphus-react';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '产品代码',\n name: 'productCode',\n },\n {\n type: 'Input',\n label: '产品名称',\n name: 'productName',\n },\n {\n type: 'Input',\n label: '产品公司',\n name: 'companyName',\n },\n {\n type: 'Input',\n label: '产品状态',\n name: 'productStatus',\n },\n];\n\n// 列表列定义\nconst columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n tooltip: '产品代码提示',\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 300,\n tooltip: {\n title: '产品名称提示',\n },\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 300,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 300,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n fixed: 'right',\n render: (text: string, record: any) => (\n <Space size={8}>\n <Button type=\"link\" onClick={() => message.info(`查看${JSON.stringify(record)}`)}>\n 查看\n </Button>\n <Button type=\"link\" onClick={() => message.info(`编辑${JSON.stringify(record)}`)}>\n 编辑\n </Button>\n </Space>\n ),\n },\n];\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst crossPageSelectDemo = () => {\n const [form] = Form.useForm();\n const [extraParams, setExtraParams] = useState('TASK111');\n\n const getTableData = (values: any) => {\n console.log('values', values);\n\n return new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n // @ts-ignore\n data: {\n productList: crossPageSelectDemoData(values.pageNum),\n total: 50,\n pageNum: 1,\n pageSize: 10,\n },\n message: '',\n });\n }, 2000);\n });\n };\n\n const {\n params,\n selectedRowKeys,\n selectedRecords,\n selectedTip,\n clearSelected,\n onSearch,\n onReset,\n refresh,\n tableProps,\n searchValues,\n } = useAntdTable(\n getTableData,\n {\n form,\n rowKey: 'productId',\n rowSelection: true, // tableProps中返回rowSelection\n crossPageSelect: true, // 开启跨页勾选\n transformResponse: (res: any) => {\n const { data } = res;\n return {\n ...data,\n list: data?.productList,\n };\n },\n },\n {\n defaultParams: [{ reportNo: 'REPORT111', taskNo: extraParams }],\n },\n );\n\n const provideConfig = {\n globalConfig: {\n storage: 'sessionStorage',\n },\n ProTable: {\n resizeColumn: true,\n columnConfig: true,\n cacheTime: true,\n },\n };\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProHeader title=\"我是标题\" />\n <ProForm\n columns={searchColumn}\n confirmLoading={tableProps.loading}\n form={form}\n onCancel={onReset}\n onFinish={onSearch}\n />\n <ProTable\n tableId=\"use-antd-table-demo\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n headerRender={() => (\n <Space>\n <Button type=\"primary\" onClick={() => console.log('searchValues', searchValues)}>\n 新增\n </Button>\n <Button type=\"primary\" onClick={() => refresh()}>\n 刷新\n </Button>\n <Button type=\"primary\" onClick={clearSelected}>\n 清空勾选\n </Button>\n <Button type=\"primary\" onClick={() => setExtraParams('TASK222')}>\n 变更extraParams\n </Button>\n {selectedTip}\n </Space>\n )}\n footerRender={() => <Button type=\"link\">删除</Button>}\n />\n <div style={{ background: '#f5f5f5', padding: 8 }}>\n <p>请求参数: {JSON.stringify(params)}</p>\n <p>勾选数据: {JSON.stringify(selectedRecords)}</p>\n <p>勾选keys: {JSON.stringify(selectedRowKeys)}</p>\n </div>\n </ProConfigProvider>\n );\n};\n\nexport default crossPageSelectDemo;\n"
420
- },
421
- {
422
- "id": "ProTable/demos/tabsSearch.tsx",
423
- "component": "ProTable",
424
- "file": "demos/tabsSearch.tsx",
425
- "title": "单元格编辑",
426
- "note": "",
427
- "source": "/**\n * title: 单元格编辑\n * desc: |\n * `tabs 表格查询标签配置`\n */\n\nimport { useState } from 'react';\nimport { Button, Form, message, Space } from 'antd';\nimport {\n ProConfigProvider,\n ProTable,\n ProForm,\n ProLayout,\n ProHeader,\n} from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getUseAntdTableDemoData } from './data/useAntdTableDemoData';\nimport type { ProTableListResponseType } from '@zat-design/sisyphus-react';\n\nconst { useAntdTable } = ProTable;\n\nconst searchColumn: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '产品代码',\n name: 'productCode',\n },\n {\n type: 'Input',\n label: '产品名称',\n name: 'productName',\n },\n {\n type: 'Input',\n label: '产品公司',\n name: 'companyName',\n },\n {\n type: 'Group',\n label: '紧凑表单带分隔',\n names: ['separator1', 'separator2'],\n fieldProps: {\n space: {\n compact: true,\n separator: '~',\n },\n children: [\n {\n type: 'Input',\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n];\n\n// 列表列定义\nconst columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n tooltip: '产品代码提示',\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 300,\n tooltip: {\n title: '产品名称提示',\n },\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 300,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 300,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n render: (text: string, record: any) => (\n <Space size={8}>\n <Button type=\"link\" onClick={() => message.info(`查看${JSON.stringify(record)}`)}>\n 查看\n </Button>\n <Button type=\"link\" onClick={() => message.info(`编辑${JSON.stringify(record)}`)}>\n 编辑\n </Button>\n </Space>\n ),\n },\n];\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst UseAntdTableDemo = () => {\n const [form] = Form.useForm();\n const [extraParams, setExtraParams] = useState('TASK111');\n\n const getTableData = (data) => {\n console.log('data', data);\n\n return new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n // @ts-ignore\n data: {\n list: getUseAntdTableDemoData(data.pageNum),\n total: 50,\n pageNum: 1,\n pageSize: 10,\n },\n message: '',\n });\n }, 1000);\n });\n };\n\n const { params, selectedRowKeys, selectedRecords, onSearch, onReset, tableProps } = useAntdTable(\n getTableData,\n {\n form,\n rowKey: 'productId',\n rowSelections: true, // 开启选择下拉-选择当前页、选择全部、取消选择\n extraParams: {\n // 表单之外的额外参数，此值变更时也会重新发起请求,重置表单不会被清空\n taskNo: extraParams,\n },\n transformResponse: (res: any) => {\n const { data } = res;\n return {\n ...data,\n };\n },\n },\n );\n\n return (\n <>\n <ProHeader title=\"我是标题\" />\n <ProForm\n columns={searchColumn}\n confirmLoading={tableProps.loading}\n form={form}\n onCancel={onReset}\n onFinish={onSearch}\n />\n <ProTable\n tableId=\"use-antd-table-demo\"\n columns={columns}\n tabs={{\n name: 'status',\n // mode: 'Segmented', // 展示模式：'Tab' 卡片页签 / 'Segmented' 分段控制器，默认 'Segmented'\n // code: 'tabs', // 可取码表值，也可以直接传入数据源\n dataSource: [\n {\n label: '待处理',\n value: 'pending',\n },\n {\n label: '处理中',\n value: 'processing',\n },\n {\n label: '已处理',\n value: 'processed',\n },\n ],\n transformResponse: (res) => {\n const result = res;\n result.unshift({\n label: '全部',\n value: '',\n });\n return result;\n },\n }}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n footerRender={() => <Button type=\"link\">删除</Button>}\n />\n <div style={{ background: '#f5f5f5', padding: 8 }}>\n <p>请求参数: {JSON.stringify(params)}</p>\n <p>勾选数据: {JSON.stringify(selectedRecords)}</p>\n <p>勾选keys: {JSON.stringify(selectedRowKeys)}</p>\n </div>\n </>\n );\n};\n\nexport default UseAntdTableDemo;\n"
428
- },
429
- {
430
- "id": "ProTooltip/demos/demo.tsx",
431
- "component": "ProTooltip",
432
- "file": "demos/demo.tsx",
433
- "title": "默认宽度省略号",
434
- "note": "",
435
- "source": "import { FC } from 'react';\nimport { Divider } from 'antd';\nimport { ProTooltip } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n const flag = '';\n return (\n <div>\n <Divider style={{ width: '100%' }}>text支持ReactNode</Divider>\n <ProTooltip\n text={<div>数据展示数据展示数据展示数据展示数据展示</div>}\n line={1}\n width=\"140px\"\n />\n <Divider style={{ width: '100%' }}>text支持String</Divider>\n <ProTooltip\n text=\"数据展示数据展示数据展示数据展示数据展示数据展示测试\"\n line={2}\n width=\"140px\"\n />\n <ProTooltip\n text=\"数据展示数据展示数据展示数据展示数据展示数据展示测试\"\n line={2}\n isResponsiveWidth={!!flag}\n width=\"140px\"\n >\n 测试\n </ProTooltip>\n </div>\n );\n};\n\nexport default Demo;\n"
436
- },
437
- {
438
- "id": "ProTooltip/demos/AutoDemo.tsx",
439
- "component": "ProTooltip",
440
- "file": "demos/AutoDemo.tsx",
441
- "title": "自适应省略宽度",
442
- "note": "",
443
- "source": "import { FC } from 'react';\nimport { Divider } from 'antd';\nimport { ProTooltip } from '@zat-design/sisyphus-react';\n\nconst SingleAutoDemo: FC = () => {\n return (\n <div>\n <Divider style={{ width: '100%' }}>\n mode: auto 单或多行超出省略号，内容及 tip 宽度按当前盒子最大宽度自适应模式\n </Divider>\n <ProTooltip\n mode=\"auto\"\n text={\n <div>\n 数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示\n </div>\n }\n line={1}\n style={{\n marginBottom: 20,\n }}\n />\n <ProTooltip\n mode=\"auto\"\n text={\n <div>\n 数数数据展示数据展示数据展示数据展示数据展示数据展示数据数据展示数据展示数据展示数据展示数据展示数据展示数据展示数展示数据展示数数据展示数据展示数据展示数据展示数据展示数据数据展示数据展示数据展示数据展示数据展示数据展示数据展示数展示数据展示数数数数据展示数据展示数据展示数据展示数据展示数据展示数据数据展示数据展示数据展示数据展示数据展示数据展示数据展示数展示数据展示数数据展示数据展示数据展示数据展示数据展示数据数据展示数据展示数据展示数据展示数据展示数据展示数据展示数展示数据展示数数数数据展示数据展示数据展示数据展示数据展示数据展示数据数据展示数据展示数据展示数据展示数据展示数据展示数据展示数展示数据展示数数据展示数据展示数据展示数据展示数据展示数据数据展示数据展示数据展示数据展示数据展示数据展示数据展示数展示数据展示数\n </div>\n }\n line={2}\n lineHeight={22}\n style={{\n marginBottom: 20,\n }}\n />\n </div>\n );\n};\n\nexport default SingleAutoDemo;\n"
444
- },
445
- {
446
- "id": "ProTooltip/demos/tableDemo.tsx",
447
- "component": "ProTooltip",
448
- "file": "demos/tableDemo.tsx",
449
- "title": "自适应宽度",
450
- "note": "",
451
- "source": "/**\n * iframe: 600\n * title: 自适应宽度\n * desc: |\n * 常用在表格中使用,开启自适应宽度省略号\n */\n\nimport { Table } from 'antd';\nimport { FC } from 'react';\nimport { ProTooltip } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n const columns = [\n {\n title: '性别',\n dataIndex: 'sex',\n },\n {\n title: '姓名',\n dataIndex: 'index',\n width: 400,\n render: (text: string | undefined) => {\n return <ProTooltip text={text} width={400} />;\n },\n },\n {\n title: '不传入数据时',\n dataIndex: 'index',\n },\n ];\n return (\n <div>\n <Table\n columns={columns}\n rowKey=\"id\"\n pagination={false}\n dataSource={[\n {\n index: '表格内展示数据,表格内展示数据,表格内展示数据',\n sex: '男',\n id: '1',\n },\n ]}\n />\n </div>\n );\n};\n\nexport default Demo;\n"
452
- },
453
- {
454
- "id": "ProViewer/demos/page.tsx",
455
- "component": "ProViewer",
456
- "file": "demos/page.tsx",
457
- "title": "预览方式",
458
- "note": "",
459
- "source": "/**\n * title: 预览方式\n * desc: |\n * 提供 modal 弹窗方式与 page 新开页面方式预览\n */\n\nimport { HomeOutlined } from '@ant-design/icons';\nimport { Divider, Radio, Space } from 'antd';\nimport { useState } from 'react';\nimport { ProViewer } from '@zat-design/sisyphus-react';\n\nconst DownLoadButtonDemo = () => {\n const [mode, setMode] = useState('modal');\n return (\n <>\n <Space size={12} align=\"center\">\n <p style={{ margin: 0 }}>预览模式：</p>\n <Radio.Group\n value={mode}\n onChange={(e) => {\n setMode(e.target.value);\n }}\n >\n <Radio.Button value=\"modal\">弹窗模式</Radio.Button>\n <Radio.Button value=\"page\">新页面模式</Radio.Button>\n </Radio.Group>\n </Space>\n <Divider style={{ textAlign: 'center' }}>--图片预览--</Divider>\n <ProViewer\n mode={mode}\n fileType=\"img\"\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\"\n >\n 图片预览\n </ProViewer>\n <ProViewer\n disabled\n mode={mode}\n fileType=\"img\"\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\"\n >\n 图片预览\n </ProViewer>\n <ProViewer\n buttonProps={{\n icon: <HomeOutlined />,\n type: 'link',\n }}\n mode={mode}\n fileType=\"img\"\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\"\n >\n 带图标的预览\n </ProViewer>\n <ProViewer\n buttonProps={{\n icon: <HomeOutlined />,\n type: 'primary',\n }}\n mode={mode}\n fileType=\"img\"\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\"\n >\n 带图标的预览\n </ProViewer>\n <Divider style={{ textAlign: 'center' }}>--pdf预览--</Divider>\n <ProViewer\n mode={mode}\n fileType=\"pdf\"\n src=\"https://static.zhongan.com/upload/online/material/1614738240562.pdf\"\n >\n pdf预览\n </ProViewer>\n <Divider style={{ textAlign: 'center' }}>--word预览--</Divider>\n <ProViewer\n mode={mode}\n fileType=\"word\"\n src=\"https://test-open.oss-cn-hzfinance.aliyuncs.com/x-magnet/直营脚本审核-0919 (1)-20210310064513-20210315080022-20210318014211.docx\"\n >\n word预览\n </ProViewer>\n <Divider style={{ textAlign: 'center' }}>--excel预览--</Divider>\n <ProViewer\n mode={mode}\n fileType=\"excel\"\n src=\"https://api.zuifuli.com/api/bpmPlus/v5/attachment?encryptId=3IPFXZXHjZ%2FK47TxUNq7Ow2Pbu8ULonL6SO8JP0xNxojVavRLX%2FzKFjMNDk3LEfI.xlsx\"\n >\n excel预览\n </ProViewer>\n </>\n );\n};\n\nexport default DownLoadButtonDemo;\n"
460
- },
461
- {
462
- "id": "ProViewer/demos/api.tsx",
463
- "component": "ProViewer",
464
- "file": "demos/api.tsx",
465
- "title": "异步数据",
466
- "note": "",
467
- "source": "/**\n * title: 异步数据\n * desc: |\n * 通过自定义接口返回数据流预览（当后端返回的不是 URL，而是二进制流时的处理方式）\n */\n\n/* eslint-disable no-undef */\nimport { ProViewer } from '@zat-design/sisyphus-react';\n\nconst config: RequestInit = {\n method: 'GET',\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n accept: 'application/json;charset=UTF-8',\n 'X-Usercenter-Session': '3zEuLM71358aNE2%2BEl5x8zm1JVaZWnYhVpw0JlWlJ5WA12QvcOmu8Fvl%2BM7emz4u',\n },\n body: null,\n};\n\nconst url =\n '/api/v1/product/base/common/file/download?key=MjAyMTExMTgxNTAyMjYvZWI5MjI2MjYtZjBlNS00MDc2LWI4ZmQtNDgxYWM5ZGU5M2Nh&renameTo=%E6%9D%A1%E6%AC%BE%E4%BF%A1%E6%81%AF.pdf';\n\nconst DownLoadButtonDemo = () => {\n return (\n <>\n <ProViewer\n mode=\"modal\"\n fileType=\"pdf\"\n previewFile={() => {\n return fetch(url, config).then((response) => {\n if (response.ok) {\n return Promise.resolve(response);\n }\n return Promise.reject(new Error('请求失败！'));\n });\n }}\n >\n blob数据流预览\n </ProViewer>\n </>\n );\n};\n\nexport default DownLoadButtonDemo;\n"
468
- },
469
- {
470
- "id": "ProViewer/demos/data.tsx",
471
- "component": "ProViewer",
472
- "file": "demos/data.tsx",
473
- "title": "二进制流",
474
- "note": "",
475
- "source": "/**\n * title: 二进制流\n * desc: |\n * 取二进制数据流进行预览，不支持 base64 的预览（基于性能上的考虑，不适合将大文件转为 base64 进行处理，这样会额外增加渲染的压力），默认后端返回的数据结构直接是二进制流\n */\n\n/* eslint-disable no-undef */\nimport { useRequest } from 'ahooks';\nimport { Divider } from 'antd';\nimport { ProViewer } from '@zat-design/sisyphus-react';\n\nconst config: RequestInit = {\n method: 'GET',\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n accept: 'application/json;charset=UTF-8',\n 'X-Usercenter-Session': '3zEuLM71358aNE2%2BEl5x8zm1JVaZWnYhVpw0JlWlJ5WA12QvcOmu8Fvl%2BM7emz4u',\n },\n body: null,\n};\n\nconst url =\n '/api/v1/product/base/common/file/download?key=MjAyMTExMTgxNTAyMjYvZWI5MjI2MjYtZjBlNS00MDc2LWI4ZmQtNDgxYWM5ZGU5M2Nh&renameTo=%E6%9D%A1%E6%AC%BE%E4%BF%A1%E6%81%AF.pdf';\n\nconst DownLoadButtonDemo = () => {\n // 接口\n const getData = () => {\n return fetch(url, config).then((response) => {\n if (response.ok) {\n return Promise.resolve(response);\n }\n return Promise.reject(new Error('请求失败！'));\n });\n };\n\n const { data, loading } = useRequest(getData, {\n manual: false,\n });\n\n return (\n <>\n <Divider style={{ textAlign: 'center' }}>--数据流直接预览--</Divider>\n <ProViewer mode=\"page\" fileType=\"pdf\" previewData={data} disabled={loading}>\n blob数据流预览\n </ProViewer>\n </>\n );\n};\n\nexport default DownLoadButtonDemo;\n"
476
- },
477
- {
478
- "id": "ProEditTable/demos/multiple.tsx",
479
- "component": "ProEditTable",
480
- "file": "demos/multiple.tsx",
481
- "title": "多行编辑",
482
- "note": "",
483
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport dayjs from 'dayjs';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'Input',\n label: '受益人姓名',\n name: 'name',\n width: '20%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n width: '20%',\n required: true,\n isEditable: (values) => {\n return !values?.name;\n },\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n ],\n onFieldChange(val, record) {\n if (val === '1') {\n Object.assign(record, {\n birthday: '1995-01-01',\n gender: '1',\n });\n } else {\n Object.assign(record, {\n birthday: '',\n gender: '',\n });\n }\n },\n filterInList: true,\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '20%',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '出生日期不能为空',\n },\n ];\n },\n fieldProps(values) {\n return {\n disabled: values.certType === '1',\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n };\n },\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'gender',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '性别不能为空',\n },\n ];\n },\n fieldProps: (values) => {\n return {\n disabled: values.certType === '1',\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n showCodeName: true,\n };\n },\n },\n {\n type: 'ProSelect',\n label: '国籍',\n name: 'nativeplace',\n fieldProps: {\n dataSource: [\n {\n label: '中国',\n value: 'CHN',\n },\n ],\n showCodeName: true,\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'multipleList',\n fieldProps: {\n columns,\n max: 7,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n multipleList: [\n {\n nativeplace: 'CHN',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
484
- },
485
- {
486
- "id": "ProEditTable/demos/single.tsx",
487
- "component": "ProEditTable",
488
- "file": "demos/single.tsx",
489
- "title": "单行编辑",
490
- "note": "",
491
- "source": "import { Divider, Form, Button } from 'antd';\nimport dayjs from 'dayjs';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nexport const searchName = () => {\n return new Promise((resolve) => {\n resolve({\n status: 200,\n data: [\n {\n name: '身份证',\n code: '1',\n },\n {\n name: '护照',\n code: '2',\n },\n {\n name: '驾驶证',\n code: '3',\n },\n ],\n });\n });\n};\n\nexport const searchGender = (params) => {\n return new Promise((resolve) => {\n resolve({\n status: 200,\n data: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n });\n });\n};\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '受益人姓名',\n name: 'name',\n width: '20%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n width: '20%',\n required: true,\n fieldProps: {\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n useRequest: {\n service: searchName,\n },\n onFieldChange(val, record) {\n if (val === '1') {\n Object.assign(record, {\n disabled: val === '1',\n birthday: '1995-01-01',\n gender: '1',\n });\n }\n },\n },\n },\n {\n label: '出生日期',\n name: 'birthday',\n type: 'DatePicker',\n width: '20%',\n rules: (values: any) => {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '出生日期不能为空',\n },\n ];\n },\n fieldProps: (values: any) => {\n return {\n disabled: values?.certType === '1',\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n };\n },\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'gender',\n width: '15%',\n rules: (values: any) => {\n return [\n {\n required: values?.certType && values?.certType !== '1',\n message: '性别不能为空',\n },\n ];\n },\n fieldProps: (values: any) => {\n return {\n disabled: values?.certType === '1',\n useRequest: {\n service: searchGender,\n },\n showCodeName: true,\n };\n },\n },\n {\n type: 'ProSelect',\n label: '国籍',\n name: 'nativeplace',\n fieldProps: {\n dataSource: [\n {\n label: '中国',\n value: 'CHN',\n },\n ],\n showCodeName: true,\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'singleList',\n fieldProps: {\n columns,\n stripe: false,\n mode: 'single',\n actionWidth: '100px',\n requiredAlign: 'right',\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n singleList: [\n {\n name: '用户1',\n nativeplace: 'CHN',\n certType: '1',\n birthday: '1995-01-01',\n gender: '1',\n },\n {\n name: '用户2',\n nativeplace: 'CHN',\n certType: '1',\n birthday: '1996-01-01',\n gender: '2',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
492
- },
493
- {
494
- "id": "ProEditTable/demos/editable.tsx",
495
- "component": "ProEditTable",
496
- "file": "demos/editable.tsx",
497
- "title": "部分可编辑",
498
- "note": "",
499
- "source": "import { Divider, Form, Button } from 'antd';\nimport dayjs from 'dayjs';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '受益人姓名',\n name: 'name',\n width: '20%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n width: '20%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n ],\n onFieldChange(val, record) {\n if (val === '1') {\n Object.assign(record, {\n disabled: val === '1',\n birthday: '1995-01-01',\n gender: '1',\n });\n }\n },\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '20%',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '出生日期不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: {\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n },\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'gender',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '性别不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: (values) => {\n return {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n showCodeName: true,\n };\n },\n },\n {\n type: 'ProSelect',\n label: '国籍',\n name: 'nativeplace',\n isEditable: false,\n fieldProps: {\n dataSource: [\n {\n label: '中国',\n value: 'CHN',\n },\n ],\n showCodeName: true,\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'editableList',\n fieldProps: {\n columns,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n editableList: [\n {\n nativeplace: 'CHN',\n },\n {\n nativeplace: 'CHN',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
500
- },
501
- {
502
- "id": "ProEditTable/demos/information.tsx",
503
- "component": "ProEditTable",
504
- "file": "demos/information.tsx",
505
- "title": "表头辅助信息",
506
- "note": "",
507
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport dayjs from 'dayjs';\nimport { RedditOutlined } from '@ant-design/icons';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'Input',\n label: '受益人姓名',\n name: 'name',\n width: '20%',\n tooltip: '受益人姓名为必填项',\n after: <Button type=\"link\">查看详情</Button>,\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n width: '20%',\n before: <Button type=\"link\">查看详情</Button>,\n tooltip: {\n title: '证件类型选为身份证，自动带出出生日期及性别',\n },\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n ],\n onFieldChange(val, record) {\n if (val === '1') {\n Object.assign(record, {\n disabled: val === '1',\n birthday: '1995-01-01',\n gender: '1',\n name: 'caojialuo',\n });\n }\n },\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '20%',\n tooltip: {\n title: <h3>证件类型选为身份证，自动带出出生日期及性别</h3>,\n icon: <RedditOutlined />,\n },\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '出生日期不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: {\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n },\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'gender',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '性别不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: (values) => {\n return {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n showCodeName: true,\n };\n },\n },\n {\n type: 'ProSelect',\n label: '国籍',\n name: 'nativeplace',\n fieldProps: {\n dataSource: [\n {\n label: '中国',\n value: 'CHN',\n },\n ],\n showCodeName: true,\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'informationList',\n fieldProps: {\n columns,\n max: 7,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n informationList: [\n {\n nativeplace: 'CHN',\n },\n {\n nativeplace: 'CHN',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
508
- },
509
- {
510
- "id": "ProEditTable/demos/pagination.tsx",
511
- "component": "ProEditTable",
512
- "file": "demos/pagination.tsx",
513
- "title": "分页",
514
- "note": "",
515
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { validate } from '@zat-design/utils';\nexport const checkCert = (_, value) => {\n const [certType, certNo] = value || [];\n if (certType === '01' && !validate.isIdCard(certNo)) {\n return Promise.reject(new Error('请输入正确的身份证号码'));\n }\n if (!certType) {\n return Promise.reject(new Error('请选择证件类型'));\n }\n if (!certNo) {\n return Promise.reject(new Error('请输入的证件号码'));\n }\n return Promise.resolve();\n};\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = ProForm.useForm();\n\n const onFinish = async () => {\n // 仅适用表格单独校验时\n const values = await form.validateFields(['paginationList']);\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '受益人姓名',\n name: 'name',\n required: true,\n width: '200px',\n fieldProps: {\n maxLength: 50,\n },\n },\n {\n type: 'Group',\n label: '证件号码',\n required: true,\n rules: [{ validator: checkCert }],\n names: ['certType', 'certNo'],\n width: '360px',\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'ProSelect',\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: '01',\n },\n {\n label: '护照',\n value: '02',\n },\n {\n label: '驾驶证',\n value: '03',\n },\n ],\n showCodeName: true,\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n required: true,\n width: '200px',\n },\n ];\n\n const data = [];\n for (let index = 1; index < 7; index++) {\n data.push({\n certType: '02',\n certNo: '123456',\n birthday: '1990-02-01',\n name: null,\n id: index,\n });\n }\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'paginationList',\n fieldProps: {\n columns,\n rowKey: 'id',\n insertType: 'before',\n scroll: { x: 'max-content', y: 400 },\n pagination: {\n pageSize: 5,\n },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n paginationList: data,\n });\n }, []);\n\n // ProConfigProvider 真实场景注册在应用入口处即可全局使用，此处只做示例展示\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} />\n </>\n );\n};\n\nexport default Demo;\n"
516
- },
517
- {
518
- "id": "ProEditTable/demos/summary.tsx",
519
- "component": "ProEditTable",
520
- "file": "demos/summary.tsx",
521
- "title": "合计",
522
- "note": "",
523
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '共保公司',\n name: 'name',\n width: '15%',\n required: true,\n tooltip: '共保公司为必填项',\n },\n {\n label: '代收代缴方',\n name: 'isAgentFee',\n },\n {\n label: '出单方',\n name: 'isIssue',\n },\n {\n type: 'InputNumber',\n label: '共保比例(%)',\n name: 'feeRate',\n required: true,\n valueType: 'percentage',\n },\n {\n type: 'InputNumber',\n label: '共保手续费比例(‰)',\n name: 'rate',\n required: true,\n valueType: 'permillage',\n width: 160,\n },\n {\n type: 'InputNumber',\n label: '共保保额',\n name: 'sumInsured',\n required: true,\n valueType: 'thousandth',\n },\n {\n type: 'InputNumber',\n label: '共保保费',\n name: 'fee',\n required: true,\n valueType: 'thousandth',\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'summaryList',\n fieldProps: {\n columns,\n actionWidth: '100px',\n summary: {\n columns: [\n {\n index: 1,\n key: 'total',\n colSpan: 3,\n title: '总计',\n },\n {\n index: 4,\n key: 'feeRate',\n valueType: 'percentage',\n },\n {\n index: 5,\n key: 'rate',\n prefix: '$',\n valueType: 'permillage',\n },\n {\n index: 6,\n key: 'sumInsured',\n valueType: 'thousandth',\n },\n {\n index: 7,\n colSpan: 2,\n key: 'fee',\n prefix: '人民币',\n valueType: 'thousandth',\n },\n ],\n },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n summaryList: [\n {\n name: '用户1',\n feeRate: 0.1,\n rate: 0.111,\n sumInsured: 666.66,\n fee: 1000,\n },\n {\n name: '用户2',\n feeRate: 0.3,\n rate: 0.3333,\n sumInsured: 888.88,\n fee: 2000,\n },\n {\n name: '用户3',\n sumInsured: 999.99,\n fee: 3000,\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
524
- },
525
- {
526
- "id": "ProEditTable/demos/rowSpan.tsx",
527
- "component": "ProEditTable",
528
- "file": "demos/rowSpan.tsx",
529
- "title": "表格跨行",
530
- "note": "",
531
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const dataSource = [\n {\n brand: 'Apple',\n color: '黑色',\n type: '128G',\n inventory: 100,\n price: 6999,\n },\n {\n brand: 'Apple',\n color: '黑色',\n type: '256G',\n inventory: 100,\n price: 6999,\n },\n {\n brand: 'Apple',\n color: '黑色',\n type: '512G',\n inventory: 100,\n price: 6999,\n },\n ];\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'Input',\n label: '手机品牌',\n name: 'brand',\n width: '20%',\n isEditable: false,\n required: true,\n onCell: (record, index) => {\n if (index === 0) {\n return { rowSpan: 3 };\n }\n return { rowSpan: 0 };\n },\n },\n {\n type: 'Input',\n label: '颜色',\n name: 'color',\n width: '20%',\n isEditable: false,\n required: true,\n onCell: (record, index) => {\n if (index === 0) {\n return { rowSpan: 3 };\n }\n return { rowSpan: 0 };\n },\n },\n {\n type: 'Input',\n label: '规格',\n name: 'type',\n width: '15%',\n required: true,\n },\n {\n type: 'InputNumber',\n label: '库存',\n name: 'inventory',\n width: '15%',\n required: true,\n },\n {\n type: 'InputNumber',\n label: '销售价格',\n name: 'price',\n width: '15%',\n required: true,\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'rowSpanList',\n fieldProps: {\n columns,\n max: 7,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n rowSpanList: dataSource,\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} />\n </>\n );\n};\n\nexport default Demo;\n"
532
- },
533
- {
534
- "id": "ProEditTable/demos/renderMethod.tsx",
535
- "component": "ProEditTable",
536
- "file": "demos/renderMethod.tsx",
537
- "title": "内置组件类型",
538
- "note": "Column 支持配置type快速设置单元格组件类型，当前已内置的类型: > - Input 输入框 > - InputNumber 数字输入框 > - TextArea 文本输入框 > - ProSelect 异步加强选择器 > - ProEnum 枚举下拉选择器 > - Radio 单选框 > - Checkbox 多选框 > - DatePicker 时间选择器 > - RangePicker 范围时间选择器 > - Switch 开关 > - 也可以通过配置 component 自定义渲染编辑单元格内容区域（多行编辑模式下自定义渲染必须配置对应回显的viewRender）",
539
- "source": "import { useEffect, useState } from 'react';\nimport { Divider, Form, Button } from 'antd';\nimport dayjs from 'dayjs';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'Input',\n label: '输入框',\n name: 'input',\n width: '10%',\n },\n {\n type: 'InputNumber',\n label: '数字输入框',\n name: 'inputNumber',\n width: '10%',\n },\n {\n type: 'TextArea',\n label: '说明信息',\n name: 'textArea',\n width: '10%',\n },\n {\n type: 'ProSelect',\n label: '加强下拉框',\n name: 'proSelect',\n fieldProps: {\n dataSource: [\n {\n label: '选项一',\n value: '1',\n },\n {\n label: '选项一',\n value: '2',\n },\n {\n label: '选项三',\n value: '3',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '日期选择框',\n name: 'datePicker',\n fieldProps: {\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n },\n },\n {\n type: 'RangePicker',\n label: '日期范围选择框',\n names: ['start', 'end'],\n },\n {\n type: 'Radio',\n label: '单选框',\n name: 'radio',\n fieldProps: {\n dataSource: [\n {\n label: '选项一',\n value: '1',\n },\n {\n label: '选项二',\n value: '2',\n },\n ],\n },\n },\n {\n type: 'Checkbox',\n label: '多选框',\n name: 'checkbox',\n fieldProps: {\n dataSource: [\n {\n label: '选项一',\n value: '1',\n },\n {\n label: '选项二',\n value: '2',\n },\n ],\n },\n },\n {\n type: 'Switch',\n label: '开关',\n name: 'switch',\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'renderMethodList',\n fieldProps: {\n columns,\n scroll: { x: 'max-content' },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n renderMethodList: [\n {\n nativeplace: 'CHN',\n },\n {\n nativeplace: 'CHN',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
540
- },
541
- {
542
- "id": "ProEditTable/demos/group.tsx",
543
- "component": "ProEditTable",
544
- "file": "demos/group.tsx",
545
- "title": "组合类型",
546
- "note": "",
547
- "source": "/**\n * title: 组合类型\n * desc: |\n * `type`还提供了 `ProModalSelect` 弹框选择 `ProAddressBar`（地址）、`Group`（组合证件类型）、`ProNumberRange`（数字范围）、`ProTimeLimit` 证件有限期\n */\n\nimport { useSetState } from 'ahooks';\nimport { Form, Button, Divider } from 'antd';\nimport { useEffect } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressData } from './data/data';\n\nconst certTypeOptions = [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n];\n\nconst Demo = () => {\n const [form] = Form.useForm();\n const [jsonData, setJsonData] = useSetState({});\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'ProCascader',\n label: '地址',\n names: ['province', 'city', 'area', 'address'],\n required: true,\n width: '45%',\n fieldProps: {\n mode: 'address',\n dataSource: addressData,\n },\n },\n {\n type: 'Group',\n label: '证件号码',\n required: true,\n names: ['certType', 'certNo'],\n width: '360px',\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'ProSelect',\n fieldProps: {\n dataSource: certTypeOptions,\n showCodeName: true,\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n viewRender(text) {\n if (!text?.length) return '-';\n const [certType, certNo] = text || [];\n const certTypeName = certTypeOptions.find((item) => item.value === certType)?.label;\n return certType ? `${certTypeName}/${certNo}` : null;\n },\n },\n {\n type: 'ProNumberRange',\n label: '年龄范围',\n names: ['minAge', 'maxAge'],\n required: true,\n width: '20%',\n viewRender(text) {\n if (!text?.length) return '-';\n const [minAge, maxAge] = text || [];\n return minAge ? `${minAge}～${maxAge}` : null;\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'groupList',\n fieldProps: {\n mode: 'single',\n columns,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n groupList: [\n {\n minAge: 1,\n maxAge: 100,\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
548
- },
549
- {
550
- "id": "ProEditTable/demos/drag.tsx",
551
- "component": "ProEditTable",
552
- "file": "demos/drag.tsx",
553
- "title": "拖拽排序",
554
- "note": "",
555
- "source": "/**\n * title: 拖拽排序\n * desc: |\n * 支持排序功能，开启`draggable`，可拖动排序\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport dayjs from 'dayjs';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '受益人姓名',\n name: 'name',\n width: '20%',\n required: true,\n },\n {\n label: '证件类型',\n name: 'certType',\n type: 'ProSelect',\n width: '20%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n ],\n onFieldChange(val, record) {\n if (val === '1') {\n Object.assign(record, {\n disabled: val === '1',\n birthday: '1995-01-01',\n gender: '1',\n });\n }\n },\n },\n },\n {\n label: '出生日期',\n name: 'birthday',\n type: 'DatePicker',\n width: '20%',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '出生日期不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.certType === '1';\n },\n fieldProps: {\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n },\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'gender',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '性别不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: (values) => {\n return {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n showCodeName: true,\n };\n },\n },\n {\n type: 'ProSelect',\n label: '国籍',\n name: 'nativeplace',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '中国',\n value: 'CHN',\n },\n ],\n showCodeName: true,\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'dragList',\n fieldProps: {\n columns,\n draggable: true,\n mode: 'single',\n onDragEnd: (event, value, nextValue) => {\n console.log('onDragEnd', event, value, nextValue);\n return nextValue;\n },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n dragList: [\n {\n name: '用户1',\n },\n {\n name: '用户2',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
556
- },
557
- {
558
- "id": "ProEditTable/demos/virtualList.tsx",
559
- "component": "ProEditTable",
560
- "file": "demos/virtualList.tsx",
561
- "title": "虚拟表格",
562
- "note": "",
563
- "source": "/**\n * title: 虚拟表格\n * desc: |\n * 解决大表单渲染卡顿问题，开启虚拟列表，配置 scroll,x,y 必须为固定值\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProConfigProvider,\n ProEditTableColumnType,\n ProFormColumnType,\n} from '@zat-design/sisyphus-react';\nimport { validate } from '@zat-design/utils';\nimport { enumCodeConfig, formData } from './data/data';\n\nconst KEYS_WITH_INSURED = [\n 'name',\n 'certType',\n 'certNo',\n 'birthday',\n 'gender',\n 'certStartDate',\n 'certEndDate',\n 'nativeplace',\n 'occupationCode',\n 'mobile',\n 'province',\n 'city',\n 'county',\n 'address',\n];\n\nexport const checkCert = (_, value) => {\n const [certType, certNo] = value || [];\n if (certType === '01' && !validate.isIdCard(certNo)) {\n return Promise.reject(new Error('请输入正确的身份证号码'));\n }\n if (!certType) {\n return Promise.reject(new Error('请选择证件类型'));\n }\n if (!certNo) {\n return Promise.reject(new Error('请输入的证件号码'));\n }\n return Promise.resolve();\n};\n\nexport const checkAddress = (_rule, value) => {\n const [province, city, county, address] = value || [];\n if (value) {\n if (!province || !city || !county) {\n return Promise.reject(new Error('请选择省/市/区或直辖市'));\n }\n }\n if (!address) {\n return Promise.reject(new Error('请输入详细地址'));\n }\n return Promise.resolve();\n};\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'InputNumber',\n label: '受益比例(%)',\n name: 'percentOfBenefit',\n width: 120,\n required: true,\n fixed: 'left',\n fieldProps: {\n min: 1,\n max: 100,\n precision: 0,\n },\n },\n {\n type: 'ProEnum',\n label: '受益顺序',\n name: 'benefitSerialNo',\n width: '140px',\n required: true,\n fieldProps: {\n code: 'CD000867',\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n label: '与被保险人关系',\n name: 'relationToInsured',\n required: true,\n fieldProps: {\n code: 'CD000806',\n showCodeName: true,\n onFieldChange(val: string, record: any) {\n // 联动其他值\n if (val === '1') {\n const values = formData;\n record.disabled = true;\n KEYS_WITH_INSURED.forEach((key) => {\n record[key] = values[key];\n });\n } else {\n record.disabled = false;\n KEYS_WITH_INSURED.forEach((key) => {\n record[key] = undefined;\n });\n }\n },\n },\n },\n {\n label: '受益人姓名',\n name: 'name',\n required: true,\n fieldProps: {\n maxLength: 50,\n },\n },\n {\n type: 'Group',\n label: '证件号码',\n required: true,\n rules: [{ validator: checkCert }],\n names: ['certType', 'certNo'],\n width: '360px',\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'ProEnum',\n fieldProps: {\n style: {\n width: '150px',\n },\n code: 'CD000879',\n showCodeName: true,\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n required: true,\n fieldProps: {\n format: 'YYYY-MM-DD',\n },\n },\n {\n type: 'ProEnum',\n label: '性别',\n name: 'gender',\n required: true,\n fieldProps: {\n code: 'CD000060',\n showCodeName: true,\n },\n },\n {\n type: 'DatePicker',\n label: '证件有效起期',\n name: 'certStartDate',\n // 性能提示：函数型 fieldProps/rules 会触发整行 shouldCellUpdate，仅在确有跨字段联动时使用\n rules: (text: string, record: any) => {\n return [{ required: record.isIdCard, message: '请选择证件有效起期' }];\n },\n valueType: 'date',\n toCSTString: true,\n fieldProps: (text: string, record: any) => {\n const { certEndDate } = record;\n return {\n disabledDate: (current: any) => current && certEndDate && current.isAfter(certEndDate),\n onFieldChange(val: string, record: any) {\n if (record) {\n record.certStartDate = val;\n }\n },\n };\n },\n },\n {\n type: 'ProTimeLimit',\n label: '证件有效止期',\n name: 'certEndDate',\n required: true,\n fieldProps: (text: string, record: any) => {\n const { certStartDate } = record;\n return {\n disabledDate: (current: any) =>\n current && certStartDate && current.isBefore(certStartDate),\n };\n },\n },\n {\n type: 'ProEnum',\n label: '国籍',\n name: 'nativeplace',\n required: true,\n fieldProps: {\n code: 'CD000832',\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n label: '职业小类',\n name: 'occupationCode',\n required: true,\n fieldProps: {\n code: 'CD000862',\n showCodeName: true,\n },\n },\n {\n label: '联系方式',\n name: 'mobile',\n required: true,\n fieldProps: {\n maxLength: 11,\n },\n },\n {\n type: 'ProCascader',\n label: '联系地址',\n required: true,\n rules: [{ required: true, message: '请输入联系地址' }],\n names: ['province', 'city', 'county', 'address'],\n width: '360px',\n fieldProps: {\n mode: 'address',\n },\n },\n ];\n\n const data = [];\n for (let index = 1; index < 1000; index++) {\n // 虚拟滚动性能：行对象仅保留列实际用到的字段，避免整行比较/克隆携带无用数据\n data.push({\n id: index,\n percentOfBenefit: index,\n benefitSerialNo: formData.benefitSerialNo,\n relationToInsured: formData.relationToInsured,\n name: `杨杰${index}`,\n certType: formData.certType,\n certNo: formData.certNo,\n birthday: formData.birthday,\n gender: formData.gender,\n certStartDate: formData.certStartDate,\n certEndDate: formData.certEndDate,\n nativeplace: formData.nativeplace,\n occupationCode: formData.occupationCode,\n mobile: formData.mobile,\n province: formData.province,\n city: formData.city,\n county: formData.county,\n address: formData.address,\n });\n }\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'cyList',\n fieldProps: {\n columns,\n virtual: true,\n // 控制可见行数，减少滚动时每帧挂载的表单控件数量\n scroll: { x: 3000, y: 400 },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n cyList: data,\n });\n }, []);\n\n // ProConfigProvider 真实场景注册在应用入口处即可全局使用，此处只做示例展示\n return (\n <ProConfigProvider value={enumCodeConfig}>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </ProConfigProvider>\n );\n};\n\nexport default Demo;\n"
564
- },
565
- {
566
- "id": "ProEditTable/demos/dynamicMatch.tsx",
567
- "component": "ProEditTable",
568
- "file": "demos/dynamicMatch.tsx",
569
- "title": "动态表单",
570
- "note": "",
571
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProFormColumnType,\n Input,\n ProNumberRange,\n ProSelect,\n RangePicker,\n} from '@zat-design/sisyphus-react';\n\n// 组件映射表\nconst componentMap = {\n Input: Input,\n ProNumberRange: ProNumberRange,\n ProSelect: ProSelect,\n RangePicker: RangePicker,\n};\n\n// 表单类型配置\nconst formTypeOptions = [\n {\n label: '输入框',\n value: 'Input',\n },\n {\n label: '数字范围输入框',\n value: 'ProNumberRange',\n },\n {\n label: '单选下拉框',\n value: 'ProSelect',\n dataSource: [\n {\n label: '选项1',\n value: '1',\n },\n {\n label: '选项2',\n value: '2',\n },\n ],\n },\n {\n label: '日期范围输入框',\n value: 'RangePicker',\n },\n];\n\n// 动态表单组件\ninterface DynamicFormComponentProps {\n value?: any;\n onChange?: (value: any) => void;\n formType?: string;\n}\n\n/**\n * 动态表单组件\n * @param value 表单值\n * @param onChange 表单值改变回调，如果需要更新表单值，需要调用该回调\n * @param formType 表单类型\n */\nconst DynamicFormComponent: React.FC<DynamicFormComponentProps> = ({\n value,\n onChange,\n formType,\n}) => {\n // 找到对应的表单类型配置\n const targetFormField = formTypeOptions.find((item: any) => item.value === formType);\n\n // 获取对应的组件\n const Component = componentMap?.[targetFormField?.value];\n\n if (!Component) {\n return <>-</>;\n }\n\n // 处理ProSelect的特殊情况\n if (targetFormField?.value === 'ProSelect') {\n return <Component value={value} onChange={onChange} dataSource={targetFormField?.dataSource} />;\n }\n\n // 渲染其他组件\n return <Component value={value} onChange={onChange} />;\n};\n\nconst dynamicMatch = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'factorList',\n fieldProps: (values: any) => {\n return {\n columns: [\n {\n type: 'ProSelect',\n label: '表单类型',\n name: 'formType',\n required: true,\n fieldProps: (rowData: any, reactiveParams: any) => ({\n dataSource: formTypeOptions,\n onFieldChange: (_newFormType: any) => {\n const { form, namePath } = reactiveParams;\n // 只更新 formValue 子路径，避免整行展开时 formType 尚未写入 store 而被旧值覆盖\n form.setFieldValue([...(namePath as any[]), 'formValue'], undefined);\n },\n }),\n },\n {\n label: '表单',\n name: 'formValue',\n required: true,\n width: '50%',\n component: ({ formType }: any) => {\n return <DynamicFormComponent formType={formType} />;\n },\n },\n ],\n };\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n factorList: [\n {\n formType: 'Input',\n formValue: '1',\n },\n {\n formType: 'ProNumberRange',\n formValue: [1, 2],\n },\n {\n formType: 'ProSelect',\n formValue: '1',\n },\n {\n formType: 'RangePicker',\n formValue: ['2025-08-16', '2025-08-28'],\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} />\n </>\n );\n};\n\nexport default dynamicMatch;\n"
572
- },
573
- {
574
- "id": "ProEditTable/demos/transform.tsx",
575
- "component": "ProEditTable",
576
- "file": "demos/transform.tsx",
577
- "title": "多 name",
578
- "note": "",
579
- "source": "import { useSetState } from 'ahooks';\nimport { Form, Button, Divider } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getAddress } from './data/custom';\n\nconst certTypeOptions = [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n];\n\nconst Demo = () => {\n const [form] = Form.useForm();\n const [jsonData, setJsonData] = useSetState({});\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'ProCascader',\n label: '地址',\n required: true,\n width: '50%',\n names: [\n ['address', 'province'],\n ['address', 'city'],\n ['address', 'county'],\n ['address', 'address'],\n ],\n fieldProps: {\n mode: 'address',\n useRequest: {\n service: getAddress,\n },\n },\n },\n {\n type: 'Group',\n label: '证件号码',\n required: true,\n names: [\n ['cert', 'certType'],\n ['cert', 'certNo'],\n ],\n width: '360px',\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'ProSelect',\n fieldProps: {\n dataSource: certTypeOptions,\n showCodeName: true,\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'transformList',\n fieldProps: {\n columns,\n },\n },\n ];\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
580
- },
581
- {
582
- "id": "ProEditTable/demos/linkage.tsx",
583
- "component": "ProEditTable",
584
- "file": "demos/linkage.tsx",
585
- "title": "数据联动",
586
- "note": "",
587
- "source": "import { Divider, Form, Button } from 'antd';\nimport dayjs from 'dayjs';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '受益人姓名',\n name: 'name',\n width: '20%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n width: '20%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n ],\n onFieldChange(val, record) {\n if (val === '1') {\n Object.assign(record, {\n disabled: val === '1',\n birthday: '1995-01-01',\n gender: '1',\n });\n }\n },\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '20%',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '出生日期不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.certType === '1';\n },\n fieldProps: {\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n },\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'gender',\n disabled: (values) => {\n return values.certType === '1';\n },\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '性别不能为空',\n },\n ];\n },\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n showCodeName: true,\n },\n },\n {\n type: 'ProSelect',\n label: '国籍',\n name: 'nativeplace',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '中国',\n value: 'CHN',\n },\n ],\n showCodeName: true,\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 12,\n label: '被保险人姓名',\n name: 'insuredName',\n required: true,\n },\n {\n span: 12,\n type: 'ProSelect',\n label: '是否同步信息',\n name: 'isSame',\n fieldProps: {\n dataSource: [\n {\n label: '是',\n value: 'Y',\n },\n {\n label: '否',\n value: 'N',\n },\n ],\n },\n },\n {\n type: 'ProEditTable',\n span: 24,\n name: 'linkageList',\n fieldProps: {\n columns,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n linkageList: [\n {\n name: '用户1',\n },\n {\n name: '用户2',\n },\n ],\n });\n }, []);\n\n const onValuesChange = (value, allValues) => {\n const { insuredName, isSame, linkageList } = allValues;\n if (isSame === 'Y') {\n form.setFieldsValue({\n linkageList: linkageList?.map((item) => ({\n ...item,\n name: insuredName,\n })),\n });\n }\n };\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} onValuesChange={onValuesChange} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格 + 表单数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
588
- },
589
- {
590
- "id": "ProEditTable/demos/asyncLink.tsx",
591
- "component": "ProEditTable",
592
- "file": "demos/asyncLink.tsx",
593
- "title": "异步联动",
594
- "note": "",
595
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport dayjs from 'dayjs';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const getGenderOptions = async (val) => {\n const res = await new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ]);\n }, 50);\n });\n return res;\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '受益人姓名',\n name: 'name',\n width: '20%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n width: '20%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n ],\n onFieldChange: async (val, record) => {\n record.disabled = val === '1';\n if (val === '1') {\n Object.assign(record, {\n disabled: val === '1',\n birthday: '1995-01-01',\n gender: '1',\n });\n }\n const genderOptions = await getGenderOptions(val);\n record.genderOptions = genderOptions;\n },\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '20%',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '出生日期不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: {\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n },\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'gender',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '性别不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: (values) => {\n console.log('values',values.name, values)\n return {\n dataSource: values.genderOptions || [],\n showCodeName: true,\n };\n },\n },\n {\n type: 'ProSelect',\n label: '国籍',\n name: 'nativeplace',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '中国',\n value: 'CHN',\n },\n ],\n showCodeName: true,\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'asyncLinkList',\n fieldProps: {\n columns,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n asyncLinkList: [\n {\n name: '用户1',\n },\n {\n name: '用户2',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
596
- },
597
- {
598
- "id": "ProEditTable/demos/cacheList.tsx",
599
- "component": "ProEditTable",
600
- "file": "demos/cacheList.tsx",
601
- "title": "请求缓存",
602
- "note": "",
603
- "source": "/**\n * title: 请求缓存\n * desc: |\n * 用于解决可编辑表格中 ProSelect, ProTree 多次请求的问题（只适用于 cache 固定请求， 如果入参是动态的不适合）\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\nimport { getCertTypes, queryListCompany } from './data/cacheList';\n\nconst cacheListDemo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n required: true,\n fieldProps: {\n filterInList: true,\n useRequest: {\n service: getCertTypes,\n options: {\n cacheKey: 'cache-certType', // key需要唯一，默认缓存数据 5 分钟后回收\n // cacheTime: -1, // 如果设置为 -1, 则表示缓存数据永不过期\n // staleTime: -1, // 如果设置为 -1, 则表示缓存数据永不过期\n },\n },\n },\n },\n {\n type: 'ProTree',\n label: '机构',\n name: 'organizationCodeList',\n required: true,\n width: '50%',\n fieldProps: {\n mode: 'treeSelect',\n fieldNames: {\n label: 'cname',\n value: 'code',\n children: 'children',\n },\n useRequest: {\n service: queryListCompany,\n options: {\n cacheKey: 'cache-organizationCodeList', // key需要唯一，默认缓存数据 5 分钟后回收\n // cacheTime: -1, // 如果设置为 -1, 则表示缓存数据永不过期\n // staleTime: -1, // 如果设置为 -1, 则表示缓存数据永不过期\n },\n },\n transformResponse: (res: any) => {\n return res?.data || [];\n },\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'cacheList',\n fieldProps: {\n columns,\n max: 7,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n cacheList: [\n {\n certType: '01',\n },\n {\n certType: '02',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default cacheListDemo;\n"
604
- },
605
- {
606
- "id": "ProEditTable/demos/filterSelect.tsx",
607
- "component": "ProEditTable",
608
- "file": "demos/filterSelect.tsx",
609
- "title": "过滤下拉框已选值",
610
- "note": "",
611
- "source": "import { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\nimport { Button, Divider, Form } from 'antd';\nimport { useState } from 'react';\nimport ReactJson from 'react-json-view';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n required: true,\n fieldProps: {\n filterInList: true,\n dataSource: [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n ],\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'filterSelectList',\n fieldProps: {\n columns,\n max: 7,\n },\n },\n ];\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
612
- },
613
- {
614
- "id": "ProEditTable/demos/originalValues.tsx",
615
- "component": "ProEditTable",
616
- "file": "demos/originalValues.tsx",
617
- "title": "标记更新值",
618
- "note": "",
619
- "source": "/**\n * title: 标记更新值\n * desc: |\n * 表单值与 `originalValues` 不一致会被标记\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport dayjs from 'dayjs';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\nimport { addressData } from './data/data';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'ProCascader',\n label: '地址',\n names: ['province', 'city', 'area', 'address'],\n required: true,\n fieldProps: {\n mode: 'address',\n dataSource: addressData,\n },\n },\n {\n type: 'Input',\n label: '受益人姓名',\n name: 'name',\n tooltip: '受益人姓名为必填项',\n after: <Button type=\"link\">查看详情</Button>,\n },\n {\n type: 'DatePicker',\n label: '日期-自定义比较1',\n name: 'datePicker',\n onDiff: ({ originValue, originRecord, value, record, index }) => {\n if (dayjs.isDayjs(originValue) && dayjs.isDayjs(value)) {\n return originValue.format('YYYY-MM-DD') === value.format('YYYY-MM-DD')\n ? 'same'\n : 'changed';\n }\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'originalValuesList',\n fieldProps: {\n columns,\n max: 7,\n // mode: 'single',\n rowKey: 'id',\n scroll: { y: 300 },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n originalValuesList: [\n {\n id: '1',\n name: '11',\n province: '130000',\n city: '130100',\n area: '130102',\n address: '测试地址123',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm\n form={form}\n columns={formColumns}\n footer={false}\n diffConfig={{\n originalValues: {\n originalValuesList: [\n {\n id: '1',\n province: '130000',\n city: '130100',\n area: '130102',\n address: '123',\n nativeplace: 'CHN',\n },\n ],\n },\n }}\n />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
620
- },
621
- {
622
- "id": "ProEditTable/demos/dependencies.tsx",
623
- "component": "ProEditTable",
624
- "file": "demos/dependencies.tsx",
625
- "title": "依赖联动校验",
626
- "note": "",
627
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useState } from 'react';\nimport dayjs from 'dayjs';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'DatePicker',\n label: '证件起期',\n name: 'startTime',\n dependencies: ['endTime'],\n rules: (values) => [\n {\n validator: (_, value) => {\n if (value && values.endTime) {\n if (dayjs(value).isAfter(values.endTime)) {\n return Promise.reject(new Error('证件起期不能大于证件止期'));\n }\n }\n return Promise.resolve();\n },\n },\n ],\n },\n {\n type: 'DatePicker',\n label: '证件止期',\n name: 'endTime',\n dependencies: ['startTime'],\n rules: (values) => [\n {\n validator: (_, value) => {\n if (value && values.startTime) {\n if (dayjs(value).isBefore(values.startTime)) {\n return Promise.reject(new Error('证件止期不能大于证件起期'));\n }\n }\n return Promise.resolve();\n },\n },\n ],\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'dependenciesList',\n fieldProps: {\n columns,\n max: 7,\n },\n },\n ];\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
628
- },
629
- {
630
- "id": "ProEditTable/demos/valueType1.tsx",
631
- "component": "ProEditTable",
632
- "file": "demos/valueType1.tsx",
633
- "title": "转换(比例、千分位、开关)",
634
- "note": "",
635
- "source": "/**\n * title: 转换(比例、千分位、开关)\n * desc: |\n * Column 支持配置 `valueType`，快捷转换对应类型的值。 \n * 例如：百分比在表格中显示值为 100，转换后的值为 1；金额显示值千分位；开关显示是否，转换后为 Y/N；\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'InputNumber',\n label: '百分比（%）',\n name: 'percentage',\n valueType: 'percentage',\n },\n {\n type: 'InputNumber',\n label: '千分比（‰）',\n name: 'permillage',\n valueType: 'permillage',\n },\n {\n type: 'InputNumber',\n label: '千分位金额',\n name: 'amount',\n valueType: 'thousandth',\n },\n {\n type: 'ProNumberRange',\n label: '千分位金额范围',\n name: 'rangeAmount',\n valueType: 'thousandth',\n },\n {\n type: 'Switch',\n label: '开关',\n name: 'switch',\n valueType: 'switch',\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'valueType1List',\n fieldProps: {\n mode: 'single',\n columns,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n valueType1List: [\n {\n percentage: 0.698,\n permillage: 0.698,\n amount: 999999.99,\n rangeAmount: [111111.11, 999999.99],\n switch: 'Y',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
636
- },
637
- {
638
- "id": "ProEditTable/demos/valueType2.tsx",
639
- "component": "ProEditTable",
640
- "file": "demos/valueType2.tsx",
641
- "title": "转换(日期类型)",
642
- "note": "",
643
- "source": "/**\n * title: 转换(日期类型)\n * desc: |\n * Column 支持配置 `valueType`，快捷转换对应类型的值。\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProEditTableColumnType, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'DatePicker',\n label: '年月日',\n name: 'date',\n valueType: 'date',\n },\n {\n type: 'DatePicker',\n label: '年月日时分秒',\n name: 'dateTime',\n valueType: 'dateTime',\n },\n {\n type: 'DatePicker',\n label: '年月日 00:00:00',\n name: 'dateStartTime',\n valueType: 'dateStartTime',\n },\n {\n type: 'DatePicker',\n label: '年月日 23:59:59',\n name: 'dateEndTime',\n valueType: 'dateEndTime',\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'valueType2List',\n fieldProps: {\n mode: 'single',\n columns,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n valueType2List: [\n {\n date: '2000-01-01 12:00:00',\n dateTime: '2000-01-01 12:00:00',\n dateStartTime: '2000-01-01 12:00:00',\n dateEndTime: '2000-01-01 12:00:00',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
644
- },
645
- {
646
- "id": "ProEditTable/demos/diff.tsx",
647
- "component": "ProEditTable",
648
- "file": "demos/diff.tsx",
649
- "title": "数据差异对比",
650
- "note": "",
651
- "source": "import { Divider, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = ProForm.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'Input',\n label: '手机号码',\n name: 'phone',\n },\n {\n type: 'Input',\n label: '姓名(Input)',\n name: 'name',\n },\n {\n type: 'ProSelect',\n label: '性别(Select)',\n name: 'gender',\n fieldProps: {\n dataSource: [\n { value: 'male', label: '男' },\n { value: 'female', label: '女' },\n ],\n },\n },\n {\n type: 'InputNumber',\n label: '年龄(数字)',\n name: 'age',\n valueType: 'thousandth',\n },\n {\n type: 'DatePicker',\n label: '出生日期(时间)',\n name: 'birthday',\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'desensitizationList',\n fieldProps: {\n columns,\n max: 7,\n rowKey: 'id',\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n desensitizationList: [\n {\n id: 1,\n phone: '18130427392',\n name: '张三',\n gender: 'male',\n age: 25,\n birthday: '2024-01-15',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm\n form={form}\n columns={formColumns}\n footer={false}\n diffConfig={{\n originalValues: {\n desensitizationList: [\n {\n id: 1,\n phone: '19514621090',\n name: '李四',\n gender: 'female',\n age: 30,\n birthday: '2023-06-20',\n },\n ],\n },\n }}\n />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} />\n </>\n );\n};\n\nexport default Demo;\n"
652
- },
653
- {
654
- "id": "ProEditTable/demos/desensitization.tsx",
655
- "component": "ProEditTable",
656
- "file": "demos/desensitization.tsx",
657
- "title": "数据脱敏",
658
- "note": "",
659
- "source": "import { Divider, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProEditTableColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from '../../ProForm/demos/data/enum';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = ProForm.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'Input',\n label: '手机号码',\n name: 'phone',\n disabled: true, // desensitization 只有 disabled 时才生效\n width: '200px',\n desensitization: () => {\n return [3, 7];\n },\n },\n {\n type: 'ProCascader',\n label: '地址',\n names: ['province', 'city', 'county', 'address'],\n disabled: true,\n desensitization: () => [10, 18],\n fieldProps: {\n mode: 'address',\n dataSource: addressDataSource,\n },\n },\n {\n type: 'Group',\n label: '输入框',\n names: ['certType', 'certNo'],\n disabled: true,\n fieldProps: {\n children: [\n {\n type: 'Input',\n },\n {\n type: 'Input',\n desensitization: [6, 12],\n },\n ],\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n span: 24,\n type: 'ProEditTable',\n name: 'desensitizationList',\n disabled: true,\n fieldProps: {\n columns,\n max: 7,\n rowKey: 'id',\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n desensitizationList: [\n {\n id: 1,\n phone: '18130427392',\n province: '130000',\n city: '130100',\n county: '130102',\n address: '香洲街道新华路88号顺达楼5号楼2单元1103放门口',\n certType: '身份证',\n certNo: '342423199600238802',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm\n form={form}\n columns={formColumns}\n footer={false}\n diffConfig={{\n originalValues: {\n desensitizationList: [\n {\n id: 1,\n phone: '19514621090',\n province: '130000',\n city: '130100',\n county: '130102',\n address: '香洲街道新华路88号顺达楼5号楼2单元1103放门口',\n certType: '身份证',\n certNo: '342423199600238802',\n },\n ],\n },\n }}\n />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
660
- },
661
- {
662
- "id": "ProEditTable/demos/addValue.tsx",
663
- "component": "ProEditTable",
664
- "file": "demos/addValue.tsx",
665
- "title": "添加设置默认值",
666
- "note": "",
667
- "source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type {\n ProEditTableColumnType,\n ProFormColumnType,\n ProEditTableActionType,\n} from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const toolbarProps: ProEditTableActionType[] = [\n {\n type: 'add',\n onClick: async () => {\n return {\n name: '默认名称',\n };\n },\n },\n ];\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '姓名',\n name: 'name',\n width: '25%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'sex',\n width: '30%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '30%',\n required: true,\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'addValueList',\n fieldProps: {\n mode: 'single',\n columns,\n toolbarProps,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n addValueList: [\n {\n name: '用户1',\n birthday: '1995-02-02',\n sex: '1',\n },\n {\n name: '用户2',\n birthday: '1996-03-03',\n sex: '2',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
668
- },
669
- {
670
- "id": "ProEditTable/demos/customCom.tsx",
671
- "component": "ProEditTable",
672
- "file": "demos/customCom.tsx",
673
- "title": "自定义单元格渲染",
674
- "note": "",
675
- "source": "/**\n * title: 自定义单元格渲染\n * desc: |\n * 通过`component`渲染正在编辑中的自定义组件，通过`viewRender`渲染非编辑的展示组件\n */\n\n/* eslint-disable no-alert */\nimport { Divider, Form, Button, Input, Space } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProSelect,\n ProEditTableColumnType,\n ProFormColumnType,\n ProEditTableActionType,\n} from '@zat-design/sisyphus-react';\n\nconst Custom = ({ value, onChange }: any) => {\n const changeAddress = (val) => {\n onChange([val, value?.[1]]);\n };\n\n const changePostcode = (e) => {\n onChange([value?.[0], e.target.value]);\n };\n\n return (\n <Space.Compact>\n <ProSelect\n showSearch\n dataSource={[\n { label: '上海', value: '上海' },\n { label: '北京', value: '北京' },\n { label: '武汉', value: '武汉' },\n ]}\n placeholder=\"请选择省份\"\n value={value?.[0]}\n onChange={changeAddress}\n style={{ width: '50%' }}\n />\n <Input\n value={value?.[1]}\n onChange={changePostcode}\n style={{ width: '50%' }}\n placeholder=\"请输入邮编\"\n />\n </Space.Compact>\n );\n};\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const actionProps: ProEditTableActionType[] = [\n {\n type: 'custom',\n label: '复制',\n onClick: () => {\n alert('你触发了复制事件...');\n },\n },\n {\n type: 'delete',\n show: (record, { index, form, name, namePath, tableLength }) => record.sex === '1',\n },\n ];\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '姓名',\n name: 'name',\n width: '20%',\n required: true,\n },\n {\n label: '性别',\n name: 'sex',\n type: 'Select',\n width: '30%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n {\n component: <Custom />,\n label: '邮编',\n names: ['address', 'postcode'],\n width: '30%',\n required: true,\n viewRender: (value) => {\n return `${value?.[0]}-${value?.[1]}`;\n },\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'customComList',\n fieldProps: {\n mode: 'single',\n columns,\n actionProps,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n customComList: [\n {\n name: '用户1',\n sex: '1',\n address: '北京',\n postcode: '100000',\n },\n {\n name: '用户2',\n sex: '2',\n address: '上海',\n postcode: '200000',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
676
- },
677
- {
678
- "id": "ProEditTable/demos/action.tsx",
679
- "component": "ProEditTable",
680
- "file": "demos/action.tsx",
681
- "title": "自定义行操作",
682
- "note": "通过配置actionProps实现自定义编辑行操作</br> 单行编辑的场景下，默认为edit(编辑)、delete(删除)、save(保存)、cancel(取消)；多行编辑的场景下，默认为delete(删除)</br> 支持自定义类型按钮 type设置为 custom(自定义) **如何隐藏操作栏**</br>",
683
- "source": "/**\n * title: 自定义行操作\n * desc: |\n * 通过配置`actionProps`为`false`隐藏操作栏\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProEditTableColumnType,\n ProFormColumnType,\n ProEditTableActionType,\n} from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const actionProps: ProEditTableActionType[] = [\n {\n type: 'custom',\n label: '复制',\n onClick: () => {\n alert('你触发了复制事件...');\n },\n },\n {\n type: 'edit',\n show: false,\n },\n {\n type: 'delete',\n show: (record, { index, form, name, namePath, tableLength }) => record.sex === '1',\n },\n ];\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '姓名',\n name: 'name',\n width: '25%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'sex',\n width: '30%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '30%',\n required: true,\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'actionList',\n fieldProps: {\n mode: 'single',\n columns,\n actionProps,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n actionList: [\n {\n name: '用户1',\n birthday: '1995-02-02',\n sex: '1',\n },\n {\n name: '用户2',\n birthday: '1996-03-03',\n sex: '2',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
684
- },
685
- {
686
- "id": "ProEditTable/demos/toolbar.tsx",
687
- "component": "ProEditTable",
688
- "file": "demos/toolbar.tsx",
689
- "title": "自定义批量操作",
690
- "note": "通过配置toolbarProps实现自定义新增、批量删除操作</br> 默认为add(添加)、mulDelete(批量删除)，支持自定义类型按钮 type 设置为 custom(自定义)</br> 当批量删除mulDelete隐藏时，复选框也会跟着隐藏，可以手动设置rowSelection重置</br> **如何隐藏新增、批量删除的操作**</br> 通过配置toolbarProps为false隐藏 **如何单个批量删除的操作**</br> 通过修改type为mulDelete的配置项中的show为false隐藏 **如何默认按钮的文字**</br>",
691
- "source": "/**\n * title: 自定义批量操作\n * desc: |\n * 通过修改对应按钮的配置项中的`label`，支持传入`String`或者`ReactNode`,例如代码中的新增按钮\n */\n\nimport { Divider, Form, Button, message } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProEditTableColumnType,\n ProFormColumnType,\n ProEditTableActionType,\n} from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const toolbarProps: ProEditTableActionType[] = [\n {\n type: 'add',\n label: <Button type=\"primary\">新增</Button>,\n },\n {\n type: 'custom',\n label: '批量导出',\n onClick: () => {\n message.success('你触发了批量导出事件');\n },\n },\n {\n type: 'mulDelete',\n show: false,\n },\n ];\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '姓名',\n name: 'name',\n width: '30%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'sex',\n width: '30%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '30%',\n required: true,\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'toolbarList',\n fieldProps: {\n columns,\n toolbarProps,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n toolbarList: [\n {\n name: '用户1',\n birthday: '1995-02-02',\n sex: '1',\n },\n {\n name: '用户2',\n birthday: '1996-03-03',\n sex: '2',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
692
- },
693
- {
694
- "id": "ProEditTable/demos/event.tsx",
695
- "component": "ProEditTable",
696
- "file": "demos/event.tsx",
697
- "title": "自定义默认操作按钮事件",
698
- "note": "可以通过actionProps、toolbarProps的配置项中的onClick实现自定义事件</br> onClick函数签名： - 当配置在actionProps中时：(record: T, options: { form: FormInstance, namePath: NamePath, name: NamePath, index: number, tableLength: number, selectedRows: T[] }) => boolean | object | void，其中record是当前编辑行数据，options包含了表单实例、索引等信息 - 当配置在toolbarProps中时：(dataSource: T[], options: { form: FormInstance, namePath: NamePath, name: NamePath, tableLength: number, selectedRows: T[] }) => boolean | Promise<boolean> | object，其中dataSource是整个表格数据",
699
- "source": "/**\n * title: 自定义默认操作按钮事件\n * desc: |\n * 可以通过`actionProps`、`toolbarProps`的配置项中的`onClick`实现自定义事件\n * \n * 当 type 为 `add` 时，可以返回一个新增的对象，默认合并到新添加的那一行数据中，当做初始化数据使用\n */\n\nimport { Divider, Form, Button, message } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProEditTableColumnType,\n ProFormColumnType,\n ProEditTableActionType,\n} from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const onCheck = async (record, { index, form, name, namePath, tableLength }) => {\n const dataSource = form.getFieldValue('eventList');\n if (dataSource?.length <= 1) {\n message.error('表格里至少保留一条数据');\n return false;\n }\n };\n\n const onAsyncCheck = async (record, { index, form, name, namePath, tableLength }) => {\n const checkRes = await new Promise((resolve) => {\n setTimeout(() => {\n resolve(true);\n }, 2000);\n });\n return checkRes;\n };\n\n const onAdd = async (record, { index, form, name, namePath, tableLength }) => {\n const res = await new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n name: '名称初始化',\n });\n }, 100);\n });\n return res;\n };\n\n const actionProps: ProEditTableActionType[] = [\n {\n type: 'save',\n onClick: onAsyncCheck,\n },\n {\n type: 'delete',\n onClick: onCheck,\n },\n {\n type: 'edit',\n },\n ];\n\n const toolbarProps: ProEditTableActionType[] = [\n {\n type: 'add',\n onClick: onAdd,\n },\n ];\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '姓名',\n name: 'name',\n width: '25%',\n required: true,\n },\n {\n label: '性别',\n name: 'sex',\n type: 'Select',\n width: '30%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n {\n label: '出生日期',\n name: 'birthday',\n type: 'DatePicker',\n width: '30%',\n required: true,\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'eventList',\n fieldProps: {\n mode: 'single',\n columns,\n actionProps,\n toolbarProps,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n eventList: [\n {\n name: '用户1',\n birthday: '1995-02-02',\n sex: '1',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
700
- },
701
- {
702
- "id": "ProEditTable/demos/add.tsx",
703
- "component": "ProEditTable",
704
- "file": "demos/add.tsx",
705
- "title": "新增（弹框）",
706
- "note": "",
707
- "source": "/**\n * title: 新增（弹框）\n * desc: |\n * 可编辑表格存在这种特殊场景，点击添加，弹出新增弹框，通过勾选的形式在存在表格之中\n */\n\nimport { useState } from 'react';\nimport { Divider, Form, Button } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProModalSelect, ProEditTableColumnType } from '@zat-design/sisyphus-react';\nimport type {\n ProFormColumnType,\n ProTableColumnType,\n ProEditTableActionType,\n} from '@zat-design/sisyphus-react';\nimport { getMockUserPageList } from '../../ProForm/components/combination/ProModalSelect/demos/mock';\n\nconst addFormColumns: ProFormColumnType[] = [\n {\n type: 'Input',\n name: 'holderName',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n];\n\nconst addTableColumns: ProTableColumnType[] = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n];\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const toolbarProps: ProEditTableActionType[] = [\n {\n type: 'add',\n isSelectModal: true,\n label: (record, { form, name, tableLength }) => {\n return (\n <ProModalSelect\n customRender={<Button type=\"link\">{tableLength === 0 ? '点击添加' : '添加'}</Button>}\n title=\"选择客户\"\n placeholder=\"请输入客代码/名称\"\n labelInValue\n fieldNames={{\n label: 'name',\n value: 'code',\n }}\n configOption={{\n formColumns: addFormColumns,\n tableProps: {\n columns: addTableColumns,\n },\n useRequest: {\n service: getMockUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n // id: xxx\n },\n ],\n },\n },\n modalProps: {\n onOk: async (record) => {\n const tableData = form.getFieldValue(name) || [];\n form.setFieldValue(name, [...tableData, record]);\n },\n },\n }}\n />\n );\n },\n },\n ];\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '姓名',\n name: 'name',\n width: '30%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'sex',\n width: '30%',\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '30%',\n },\n ];\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'addList',\n fieldProps: {\n columns,\n toolbarProps,\n },\n },\n ];\n\n return (\n <>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
708
- },
709
- {
710
- "id": "ProEditTable/demos/formItem.tsx",
711
- "component": "ProEditTable",
712
- "file": "demos/formItem.tsx",
713
- "title": "Antd Form 中使用",
714
- "note": "",
715
- "source": "/**\n * title: Antd Form 中使用\n * desc: |\n * 不建议在 Antd 的 Form 下使用，可能会导致部分配置项失效\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport dayjs from 'dayjs';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProEditTable, ProEditTableColumnType } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n label: '受益人姓名',\n name: 'name',\n width: '20%',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n width: '20%',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: '1',\n },\n {\n label: '护照',\n value: '2',\n },\n {\n label: '驾驶证',\n value: '3',\n },\n ],\n onFieldChange(val, record) {\n if (val === '1') {\n Object.assign(record, {\n disabled: val === '1',\n birthday: '1995-01-01',\n gender: '1',\n });\n } else {\n Object.assign(record, {\n disabled: false,\n birthday: undefined,\n gender: undefined,\n });\n }\n },\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n width: '20%',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '出生日期不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: {\n disabledDate: (current: any) => current && current > dayjs().endOf('day'),\n },\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'gender',\n rules(values) {\n return [\n {\n required: values.certType && values.certType !== '1',\n message: '性别不能为空',\n },\n ];\n },\n disabled: (values) => {\n return values.disabled;\n },\n fieldProps: (values) => {\n return {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n showCodeName: true,\n };\n },\n },\n {\n type: 'ProSelect',\n label: '国籍',\n name: 'nativeplace',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '中国',\n value: 'CHN',\n },\n ],\n showCodeName: true,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n formItemList: [\n {\n name: '用户1',\n },\n {\n name: '用户2',\n },\n ],\n });\n }, []);\n\n return (\n <>\n <Form form={form} autoComplete=\"off\">\n <Form.Item name=\"formItemList\">\n <ProEditTable columns={columns} />\n </Form.Item>\n </Form>\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default Demo;\n"
716
- },
717
- {
718
- "id": "ProEditTable/demos/cy.tsx",
719
- "component": "ProEditTable",
720
- "file": "demos/cy.tsx",
721
- "title": "完整示例",
722
- "note": "",
723
- "source": "/**\n * title: 完整示例\n * desc: |\n * 结合真实场景，包含枚举，校验，联动，数据内部处理集合的案例\n */\n\nimport { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProConfigProvider,\n ProEditTableColumnType,\n ProFormColumnType,\n} from '@zat-design/sisyphus-react';\nimport { validate } from '@zat-design/utils';\nimport { enumCodeConfig, formData } from './data/data';\n\nconst KEYS_WITH_INSURED = [\n 'name',\n 'certType',\n 'certNo',\n 'birthday',\n 'gender',\n 'certStartDate',\n 'certEndDate',\n 'nativeplace',\n 'occupationCode',\n 'mobile',\n 'province',\n 'city',\n 'county',\n 'address',\n];\n\nexport const checkCert = (_, value) => {\n const [certType, certNo] = value || [];\n if (certType === '01' && !validate.isIdCard(certNo)) {\n return Promise.reject(new Error('请输入正确的身份证号码'));\n }\n if (!certType) {\n return Promise.reject(new Error('请选择证件类型'));\n }\n if (!certNo) {\n return Promise.reject(new Error('请输入的证件号码'));\n }\n return Promise.resolve();\n};\n\nexport const checkAddress = (_rule, value) => {\n const [province, city, county, address] = value || [];\n if (value) {\n if (!province || !city || !county) {\n return Promise.reject(new Error('请选择省/市/区或直辖市'));\n }\n }\n if (!address) {\n return Promise.reject(new Error('请输入详细地址'));\n }\n return Promise.resolve();\n};\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'InputNumber',\n label: '受益比例(%)',\n name: 'percentOfBenefit',\n width: 120,\n required: true,\n fixed: 'left',\n fieldProps: {\n min: 1,\n max: 100,\n precision: 0,\n },\n },\n {\n type: 'ProEnum',\n label: '受益顺序',\n name: 'benefitSerialNo',\n width: '140px',\n required: true,\n fieldProps: {\n code: 'CD000867',\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n label: '与被保险人关系',\n name: 'relationToInsured',\n required: true,\n fieldProps: {\n code: 'CD000806',\n showCodeName: true,\n onFieldChange(val: string, record: any) {\n // 联动其他值\n if (val === '1') {\n const values = formData;\n record.disabled = true;\n KEYS_WITH_INSURED.forEach((key) => {\n record[key] = values[key];\n });\n } else {\n record.disabled = false;\n KEYS_WITH_INSURED.forEach((key) => {\n record[key] = undefined;\n });\n }\n },\n },\n },\n {\n label: '受益人姓名',\n name: 'name',\n required: true,\n fieldProps: {\n maxLength: 50,\n },\n },\n {\n type: 'Group',\n label: '证件号码',\n required: true,\n rules: [{ validator: checkCert }],\n names: ['certType', 'certNo'],\n width: '360px',\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'ProEnum',\n fieldProps: {\n code: 'CD000879',\n showCodeName: true,\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n required: true,\n fieldProps: {\n format: 'YYYY-MM-DD',\n },\n },\n {\n type: 'ProEnum',\n label: '性别',\n name: 'gender',\n required: true,\n fieldProps: {\n code: 'CD000060',\n showCodeName: true,\n },\n },\n {\n type: 'DatePicker',\n label: '证件有效起期',\n name: 'certStartDate',\n rules: (record: any) => {\n return [{ required: record.isIdCard, message: '请选择证件有效起期' }];\n },\n fieldProps: (record: any) => {\n const { certEndDate } = record;\n return {\n format: 'YYYY-MM-DD',\n disabledDate: (current: any) => current && certEndDate && current.isAfter(certEndDate),\n onFieldChange(val: string, record: any) {\n if (record) {\n record.certStartDate = val;\n }\n },\n };\n },\n },\n {\n type: 'ProTimeLimit',\n label: '证件有效止期',\n name: 'certEndDate',\n required: true,\n fieldProps: (record: any) => {\n const { certStartDate } = record;\n return {\n disabledDate: (current: any) =>\n current && certStartDate && current.isBefore(certStartDate),\n };\n },\n },\n {\n type: 'ProEnum',\n label: '国籍',\n name: 'nativeplace',\n required: true,\n fieldProps: {\n code: 'CD000832',\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n label: '职业小类',\n name: 'occupationCode',\n required: true,\n fieldProps: {\n code: 'CD000862',\n showCodeName: true,\n },\n },\n {\n label: '联系方式',\n name: 'mobile',\n required: true,\n fieldProps: {\n maxLength: 11,\n },\n },\n {\n type: 'ProCascader',\n label: '联系地址',\n required: true,\n rules: [{ required: true, message: '请输入联系地址' }],\n names: ['province', 'city', 'county', 'address'],\n width: '360px',\n fieldProps: {\n mode: 'address',\n },\n },\n ];\n\n const data = [];\n for (let index = 1; index < 50; index++) {\n data.push({\n ...formData,\n name: `杨杰${index}`,\n percentOfBenefit: index,\n id: index,\n });\n }\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'cyList',\n fieldProps: {\n columns,\n rowKey: 'id',\n scroll: { x: 'max-content', y: 400 },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n cyList: data,\n });\n }, []);\n\n // ProConfigProvider 真实场景注册在应用入口处即可全局使用，此处只做示例展示\n return (\n <ProConfigProvider value={enumCodeConfig}>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </ProConfigProvider>\n );\n};\n\nexport default Demo;\n"
724
- },
725
- {
726
- "id": "ProDrawerForm/demos/basic.tsx",
727
- "component": "ProDrawerForm",
728
- "file": "demos/basic.tsx",
729
- "title": "基础使用",
730
- "note": "",
731
- "source": "/**\n * title: 基础使用\n * desc: |\n * 显示打开形式默认为 ProDrawer\n */\n\nimport { Button, Space, Select, DatePicker } from 'antd';\nimport { useToggle } from 'ahooks';\nimport { ProDrawerForm } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [open, { toggle }]: any = useToggle(false);\n const [modalOpen, { toggle: toggleModalOpen }]: any = useToggle(false);\n\n const onDrawerOk = (values: any) => {\n return new Promise<boolean>((resolve) => {\n setTimeout(() => {\n return resolve(true);\n }, 2000);\n });\n };\n\n const onModalOk = (values: any) => {\n return new Promise<boolean>((resolve) => {\n setTimeout(() => {\n return resolve(true);\n }, 2000);\n });\n };\n\n return (\n <>\n <Space>\n <Button type=\"primary\" onClick={toggle}>\n 打开抽屉\n </Button>\n <Button type=\"primary\" onClick={toggleModalOpen}>\n 打开弹框\n </Button>\n </Space>\n <ProDrawerForm\n title=\"基础抽屉\"\n mode=\"Drawer\"\n size=\"1200px\"\n open={open}\n onOk={onDrawerOk}\n onCancel={toggle}\n >\n <Select style={{ width: '200px', marginBottom: '16px' }} />\n <DatePicker style={{ width: '200px' }} />\n </ProDrawerForm>\n <ProDrawerForm\n title=\"基础弹框\"\n size=\"1200px\"\n mode=\"Modal\"\n open={modalOpen}\n onOk={onModalOk}\n onCancel={toggleModalOpen}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </ProDrawerForm>\n </>\n );\n};\n\nexport default Demo;\n"
732
- },
733
- {
734
- "id": "ProDrawerForm/demos/proForm.tsx",
735
- "component": "ProDrawerForm",
736
- "file": "demos/proForm.tsx",
737
- "title": "嵌套 ProForm",
738
- "note": "",
739
- "source": "/**\n * title: 嵌套 ProForm\n * desc: |\n * 传入配置 proFormProps 默认内容为 ProForm 组件\n */\n\nimport { Button, Form, Space, Divider } from 'antd';\nimport { useState } from 'react';\nimport { useToggle } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProDrawerForm, ProConfigProvider } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { enumCodeConfig } from '../../ProEditTable/demos/data/data';\n\nconst Demo = () => {\n const [open, { toggle }]: any = useToggle(false);\n const [modalOpen, { toggle: toggleModalOpen }]: any = useToggle(false);\n const [asyncOpen, { toggle: toggleAsyncOpen }]: any = useToggle(false);\n const [form] = Form.useForm();\n const [asyncForm] = Form.useForm();\n const [jsonData, setJsonData] = useState({});\n\n // 模拟打开抽屉后调详情接口并回填数据\n const openAsync = () => {\n toggleAsyncOpen();\n setTimeout(() => {\n const detail = Object.fromEntries(\n Array.from({ length: 20 }, (_, index) => [`test${index + 1}`, `回填值${index + 1}`]),\n );\n // setFieldsValue 回填不会触发 isFieldsTouched，关闭时不会误弹二次确认\n asyncForm.setFieldsValue(detail);\n }, 1500);\n };\n\n const columns: ProFormColumnType[] = [\n //循环20次\n ...Array.from({ length: 20 }, (_, index) => ({\n type: 'Input',\n label: `测试${index + 1}`,\n required: true,\n names: [`test${index + 1}`],\n })),\n ];\n\n const onOk = async (values: any) => {\n const res = await new Promise((resolve) => {\n setTimeout(() => {\n setJsonData(values);\n resolve(true);\n }, 3000);\n });\n return res;\n };\n\n return (\n <ProConfigProvider value={enumCodeConfig}>\n <Space>\n <Button type=\"primary\" onClick={toggle}>\n 打开抽屉\n </Button>\n <Button type=\"primary\" onClick={toggleModalOpen}>\n 打开弹框\n </Button>\n <Button type=\"primary\" onClick={openAsync}>\n 打开异步回填抽屉\n </Button>\n </Space>\n <ProDrawerForm\n title=\"基础抽屉\"\n open={open}\n form={form}\n onOk={onOk}\n onCancel={toggle}\n proFormProps={{\n span: 24,\n columns,\n }}\n />\n <ProDrawerForm\n title=\"基础弹框\"\n mode=\"Modal\"\n open={modalOpen}\n form={form}\n onOk={onOk}\n onCancel={toggleModalOpen}\n proFormProps={{\n span: 24,\n columns,\n }}\n />\n <ProDrawerForm\n title=\"异步回填抽屉（回填后直接关闭不弹二次确认）\"\n open={asyncOpen}\n form={asyncForm}\n onOk={onOk}\n onCancel={toggleAsyncOpen}\n proFormProps={{\n span: 24,\n columns,\n }}\n />\n <Divider style={{ textAlign: 'center' }}>保存后表单数据</Divider>\n <ReactJson src={jsonData} collapsed />\n </ProConfigProvider>\n );\n};\n\nexport default Demo;\n"
740
- },
741
- {
742
- "id": "ProDrawerForm/demos/disabled.tsx",
743
- "component": "ProDrawerForm",
744
- "file": "demos/disabled.tsx",
745
- "title": "查看模式",
746
- "note": "",
747
- "source": "/**\n * title: 查看模式\n * desc: |\n * 需要设置 isView 为 true\n */\n\nimport { Button, Space } from 'antd';\nimport { useToggle } from 'ahooks';\nimport { ProDrawerForm, ProBackBtn } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [open, { toggle }]: any = useToggle(false);\n const [modalOpen, { toggle: toggleModalOpen }]: any = useToggle(false);\n\n const onDrawerOk = (values: any) => {\n toggle();\n };\n\n const onModalOk = (values: any) => {\n toggleModalOpen();\n };\n\n const RenderTitle = <div style={{ display: 'flex', alignItems: 'center' }}>自定义标题</div>;\n\n const RenderArrayFooter = [\n <Button onClick={toggle}>取消</Button>,\n <Button type=\"primary\" onClick={onDrawerOk}>\n 确定\n </Button>,\n ];\n\n const RenderFooter = (\n <Space>\n <Button onClick={toggleModalOpen}>取消</Button>\n <Button type=\"primary\" onClick={onModalOk}>\n 确定\n </Button>\n </Space>\n );\n\n return (\n <>\n <Space>\n <Button type=\"primary\" onClick={toggle}>\n 打开抽屉\n </Button>\n <Button type=\"primary\" onClick={toggleModalOpen}>\n 打开弹框\n </Button>\n </Space>\n <ProDrawerForm\n title={RenderTitle}\n isView\n size=\"70%\"\n footer={RenderArrayFooter}\n open={open}\n onOk={onDrawerOk}\n onCancel={toggle}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </ProDrawerForm>\n <ProDrawerForm\n mode=\"Modal\"\n isView\n title={RenderTitle}\n footer={RenderFooter}\n open={modalOpen}\n onOk={onModalOk}\n onCancel={toggleModalOpen}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </ProDrawerForm>\n </>\n );\n};\n\nexport default Demo;\n"
748
- },
749
- {
750
- "id": "ProDrawerForm/demos/custom.tsx",
751
- "component": "ProDrawerForm",
752
- "file": "demos/custom.tsx",
753
- "title": "自定义头部、底部",
754
- "note": "",
755
- "source": "import { Button, Space } from 'antd';\nimport { useToggle } from 'ahooks';\nimport { ProDrawerForm, ProBackBtn } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [open, { toggle }]: any = useToggle(false);\n const [modalOpen, { toggle: toggleModalOpen }]: any = useToggle(false);\n\n const onDrawerOk = (values: any) => {\n toggle();\n };\n\n const onModalOk = (values: any) => {\n toggleModalOpen();\n };\n\n const RenderTitle = <div style={{ display: 'flex', alignItems: 'center' }}>自定义标题</div>;\n\n const RenderArrayFooter = [\n <Button onClick={toggle}>取消</Button>,\n <Button type=\"primary\" onClick={onDrawerOk}>\n 确定\n </Button>,\n ];\n\n const RenderFooter = (\n <Space>\n <Button onClick={toggleModalOpen}>取消</Button>\n <Button type=\"primary\" onClick={onModalOk}>\n 确定\n </Button>\n </Space>\n );\n\n return (\n <>\n <Space>\n <Button type=\"primary\" onClick={toggle}>\n 打开抽屉\n </Button>\n <Button type=\"primary\" onClick={toggleModalOpen}>\n 打开弹框\n </Button>\n </Space>\n <ProDrawerForm\n title={RenderTitle}\n size=\"70%\"\n footer={RenderArrayFooter}\n open={open}\n onOk={onDrawerOk}\n onCancel={toggle}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </ProDrawerForm>\n <ProDrawerForm\n mode=\"Modal\"\n title={RenderTitle}\n footer={RenderFooter}\n open={modalOpen}\n onOk={onModalOk}\n onCancel={toggleModalOpen}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </ProDrawerForm>\n </>\n );\n};\n\nexport default Demo;\n"
756
- },
757
- {
758
- "id": "ProDrawerForm/demos/resizable.tsx",
759
- "component": "ProDrawerForm",
760
- "file": "demos/resizable.tsx",
761
- "title": "拖拽改变尺寸",
762
- "note": "",
763
- "source": "/**\n * title: 拖拽改变尺寸\n * desc: |\n * 仅对 Drawer 有效。通过 `drawerProps.resizable` 启用拖拽改变宽度（需 antd ≥ 6.1.0）\n */\n\nimport { Button, Space } from 'antd';\nimport { useState } from 'react';\nimport { useToggle } from 'ahooks';\nimport { ProDrawerForm } from '@zat-design/sisyphus-react';\n\nconst Demo = () => {\n const [open, { toggle }]: any = useToggle(false);\n const [size, setSize] = useState(600);\n\n return (\n <>\n <Space>\n <Button type=\"primary\" onClick={toggle}>\n 打开抽屉\n </Button>\n <span>当前宽度：{size}px</span>\n </Space>\n <ProDrawerForm\n title=\"可拖拽改变尺寸抽屉\"\n mode=\"Drawer\"\n size={size}\n open={open}\n onOk={toggle}\n onCancel={toggle}\n drawerProps={{\n resizable: {\n onResize: (newSize) => setSize(newSize),\n },\n }}\n >\n <p>拖拽抽屉左边缘即可改变宽度</p>\n <p>当前宽度：{size}px</p>\n </ProDrawerForm>\n </>\n );\n};\n\nexport default Demo;\n"
764
- },
765
- {
766
- "id": "ProEditLabel/demos/current.tsx",
767
- "component": "ProEditLabel",
768
- "file": "demos/current.tsx",
769
- "title": "基本使用",
770
- "note": "",
771
- "source": "/* eslint-disable no-console */\nimport { Form, Radio } from 'antd';\nimport { FC, useState } from 'react';\nimport { ProEditLabel } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n const [text, setText] = useState('hhh');\n const [mode, setMode]: any = useState('current');\n const configProps: any = {};\n const onChange = (value: string) => {\n if (mode === 'current') {\n setText(value);\n }\n };\n\n const onConfirm = (value: string) => {\n setText(value);\n };\n\n if (mode === 'popup') {\n configProps.popupProps = {\n columns: [\n {\n type: 'Input',\n label: '输入内容',\n name: 'Input',\n required: true,\n fieldProps: {\n maxLength: 50,\n },\n },\n ],\n };\n }\n\n return (\n <>\n <Form>\n <Form.Item label=\"编辑模式\">\n <Radio.Group value={mode} onChange={(e) => setMode(e.target.value)}>\n <Radio value=\"current\">当前页编辑</Radio>\n <Radio value=\"popup\">弹窗编辑</Radio>\n </Radio.Group>\n </Form.Item>\n </Form>\n <ProEditLabel\n {...configProps}\n mode={mode}\n value={text}\n maxLength={10}\n onChange={onChange}\n onConfirm={onConfirm}\n />\n </>\n );\n};\n\nexport default Demo;\n"
772
- },
773
- {
774
- "id": "ProEditLabel/demos/popup.tsx",
775
- "component": "ProEditLabel",
776
- "file": "demos/popup.tsx",
777
- "title": "弹窗表单编辑",
778
- "note": "",
779
- "source": "/**\n * title: 弹窗表单编辑\n * desc: |\n * 默认支持 ProForm 内置的表单\n */\n\n/* eslint-disable no-console */\nimport { FC } from 'react';\nimport { ProEditLabel, ProConfigProvider } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\nimport { useSetState } from 'ahooks';\nimport dayjs from 'dayjs';\nimport { enumCodeConfig } from '../../ProEditTable/demos/data/data';\n\nconst Demo: FC = () => {\n const [\n { proEnumValue, inputValue, dateValue, rangeValue, selectValue, numberRangeValue },\n setState,\n ] = useSetState<any>({\n proEnumValue: '1',\n inputValue: '我是传奇',\n dateValue: dayjs('2015-01-01'),\n rangeValue: [dayjs('2015-01-01'), dayjs('2022-01-01')],\n selectValue: 'I',\n numberRangeValue: [1, 100],\n });\n const onChange = (value: string) => {\n console.log('====================================');\n console.log('onChange', value);\n console.log('====================================');\n };\n const onConfirm = (value: string, type: string) => {\n console.log('====================================');\n console.log('onConfirm', value);\n console.log('====================================');\n return new Promise((resolve) => {\n setTimeout(() => {\n setState({ [type]: value });\n resolve(null);\n }, 1000);\n });\n };\n\n return (\n <>\n <ProConfigProvider value={enumCodeConfig}>\n <Space orientation=\"vertical\" size=\"middle\">\n <h3>ProEnum枚举下拉框</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n columns: [\n {\n type: 'ProEnum',\n label: '结合表单使用',\n name: 'ProEnum',\n fieldProps: {\n code: 'CD000867',\n optionRender: (record) => {\n return `${record?.value}-${record?.label}`; // 自定义option\n },\n },\n },\n ],\n }}\n value={proEnumValue}\n onChange={onChange}\n onConfirm={(value) => onConfirm(value, 'proEnumValue')}\n />\n <h3>Input输入框</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n columns: [\n \n {\n type: 'Input',\n label: '输入内容',\n name: 'Input',\n required: true,\n fieldProps: {\n maxLength: 50,\n },\n },\n ],\n }}\n value={inputValue}\n onChange={onChange}\n onConfirm={(value) => onConfirm(value, 'inputValue')}\n />\n <h3>DatePicker日期选择</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n columns: [\n {\n type: 'DatePicker',\n label: '日期选择',\n name: 'DatePicker',\n required: true,\n valueType: 'date',\n fieldProps: {\n format: 'YYYY-MM-DD',\n },\n },\n ],\n }}\n value={dateValue}\n onChange={onChange}\n onConfirm={(value) => onConfirm(value, 'dateValue')}\n />\n <h3>RangePicker时间范围选择</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n columns: [\n {\n type: 'RangePicker',\n label: '时间范围选择',\n name: 'RangePicker',\n required: true,\n valueType: 'date',\n fieldProps: {\n format: 'YYYY-MM-DD',\n },\n },\n ],\n }}\n value={rangeValue}\n onChange={onChange}\n onConfirm={(value) => onConfirm(value, 'rangeValue')}\n />\n <h3>ProSelect 高级下拉框</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n tip: '修改风险等级，需重新读取合约进行分保试算，是否确认修改',\n columns: [\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'ProSelect',\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n optionRender: (record) => {\n return `${record.value}-${record.label}`; // 自定义option\n },\n },\n },\n ],\n }}\n value={selectValue}\n onChange={onChange}\n onConfirm={(value) => onConfirm(value, 'selectValue')}\n />\n <h3>ProNumberRange范围输入框</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n columns: [\n {\n type: 'ProNumberRange',\n label: '范围输入框',\n name: 'ProNumberRange',\n },\n ],\n }}\n value={numberRangeValue}\n onChange={onChange}\n onConfirm={(value) => onConfirm(value, 'numberRangeValue')}\n />\n </Space>\n </ProConfigProvider>\n </>\n );\n};\n\nexport default Demo;\n"
780
- },
781
- {
782
- "id": "ProEditLabel/demos/node.tsx",
783
- "component": "ProEditLabel",
784
- "file": "demos/node.tsx",
785
- "title": "按钮编辑",
786
- "note": "",
787
- "source": "/* eslint-disable jsx-a11y/anchor-is-valid */\n/* eslint-disable no-console */\nimport { FC } from 'react';\nimport { ProEditLabel, ProConfigProvider } from '@zat-design/sisyphus-react';\nimport { Space, Button } from 'antd';\nimport { enumCodeConfig } from '../../ProEditTable/demos/data/data';\n\nconst Demo: FC = () => {\n const onChange = (value: string) => {\n console.log('====================================');\n console.log('onChange', value);\n console.log('====================================');\n };\n const onConfirm = (value: string) => {\n console.log('====================================');\n console.log('onConfirm', value);\n console.log('====================================');\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(null);\n }, 1000);\n });\n };\n\n return (\n <>\n <ProConfigProvider value={enumCodeConfig}>\n <Space orientation=\"vertical\" size=\"middle\">\n <h3>自定义node多表单场景</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n title: '我是标题',\n tip: '修改风险等级，需重新读取合约进行分保试算，是否确认修改',\n placement: 'left',\n columns: [\n {\n type: 'Input',\n label: '内容',\n name: 'info',\n required: true,\n fieldProps: {\n maxLength: 50,\n },\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n show: (record) => {\n return record.info;\n },\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n ],\n }}\n onChange={onChange}\n onConfirm={onConfirm}\n >\n <a href=\"#\">删除</a>\n </ProEditLabel>\n <h3>按钮触发场景</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n columns: [\n {\n type: 'TextArea',\n label: '审核内容',\n name: 'TextArea',\n required: true,\n fieldProps: {\n maxLength: 500,\n },\n },\n ],\n }}\n onChange={onChange}\n onConfirm={onConfirm}\n >\n <Button type=\"primary\">审核</Button>\n </ProEditLabel>\n <h3>按钮disabled场景</h3>\n <ProEditLabel\n mode=\"popup\"\n popupProps={{\n columns: [\n {\n type: 'TextArea',\n label: '审核内容',\n name: 'TextArea',\n required: true,\n fieldProps: {\n maxLength: 500,\n },\n },\n ],\n }}\n disabled\n onChange={onChange}\n onConfirm={onConfirm}\n >\n <Button type=\"primary\" disabled>\n 审核\n </Button>\n </ProEditLabel>\n </Space>\n </ProConfigProvider>\n </>\n );\n};\n\nexport default Demo;\n"
788
- },
789
- {
790
- "id": "ProEditLabel/demos/disabled.tsx",
791
- "component": "ProEditLabel",
792
- "file": "demos/disabled.tsx",
793
- "title": "只读",
794
- "note": "",
795
- "source": "import { FC, useState } from 'react';\nimport { ProEditLabel } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n const [text, setText] = useState('测试disabled');\n\n return (\n <>\n <ProEditLabel disabled value={text} />\n </>\n );\n};\n\nexport default Demo;\n"
796
- },
797
- {
798
- "id": "ProStepTab/demos/StepTab.tsx",
799
- "component": "ProStepTab",
800
- "file": "demos/StepTab.tsx",
801
- "title": "基本使用",
802
- "note": "",
803
- "source": "import React, { useEffect } from 'react';\nimport { Tabs } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n { key: '1', name: '步骤1' },\n { key: '2', name: '步骤2' },\n { key: '3', name: '步骤3' },\n];\n\n/**\n * 实际内容组件\n */\nconst StepTabDemo: React.FC = () => {\n return (\n <ProStepTab>\n <StepTabContent />\n </ProStepTab>\n );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n // 使用 useStepTabInstance 获取StepTab实例\n const { activeKey, setCheckActiveKey, resetHandles } = ProStepTab.useStepTabInstance();\n\n // 组件卸载时重置handles\n useEffect(() => {\n return () => {\n resetHandles();\n };\n }, [resetHandles]);\n\n // 处理Tab切换\n const handleTabChange = (key: string) => {\n setCheckActiveKey(key);\n };\n\n // 根据key渲染对应的步骤组件\n const renderTabContent = (key: string) => {\n switch (key) {\n case '1':\n return <Step1 namePath=\"step\" />;\n case '2':\n return <Step2 namePath=\"step\" />;\n case '3':\n return <Step3 namePath=\"step\" />;\n default:\n return null;\n }\n };\n\n return (\n <Tabs\n activeKey={activeKey}\n onChange={handleTabChange}\n items={tabList.map((tab) => ({\n key: tab.key,\n label: tab.name,\n children: renderTabContent(tab.key),\n }))}\n />\n );\n};\n\nexport default StepTabDemo;\n"
804
- },
805
- {
806
- "id": "ProStepTab/demos/StepQueue.tsx",
807
- "component": "ProStepTab",
808
- "file": "demos/StepQueue.tsx",
809
- "title": "有序 tab 模式",
810
- "note": "",
811
- "source": "/**\n * title: 有序 tab 模式\n * desc: |\n * `场景：当需要按顺序完成前N步骤后，其余tab再放开，可以使用有序tab模式`\n */\n\nimport React, { useEffect } from 'react';\nimport { Tabs, Button, message, Form } from 'antd';\nimport { ProForm, ProStepTab } from '@zat-design/sisyphus-react';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n { key: '1', name: '步骤1' },\n { key: '2', name: '步骤2' },\n { key: '3', name: '步骤3' },\n { key: '4', name: '步骤4' },\n { key: '5', name: '步骤5' },\n];\n\n/**\n * 步骤1\n */\nconst Step1: React.FC = () => {\n const { saveHandle, step, setStep, registerHandle, loading } = ProStepTab.useStepTabInstance();\n const [form] = Form.useForm();\n const handleSave = async () => {\n // 执行表单校验或者异步请求\n await form.validateFields();\n // 模拟异步1s保存\n await new Promise((resolve) => setTimeout(resolve, 1000));\n if (step <= 1) {\n setStep(step + 1);\n }\n message.success(`保存步骤1成功`);\n return true;\n };\n useEffect(() => {\n registerHandle('1', handleSave);\n }, [registerHandle]);\n return (\n <div>\n <ProForm\n form={form}\n columns={[\n {\n type: 'Input',\n label: '步骤1-1',\n name: `queue_step1_1`,\n required: true,\n },\n {\n type: 'Input',\n label: '步骤1-2',\n name: `queue_step1_2`,\n required: true,\n },\n ]}\n span={24}\n footer={false}\n />\n <Button type=\"primary\" onClick={saveHandle} loading={loading} disabled={loading}>\n 保存并下一步\n </Button>\n </div>\n );\n};\n\n/**\n * 步骤2\n */\nconst Step2: React.FC = () => {\n const [form] = Form.useForm();\n const { saveHandle, step, setStep, registerHandle, loading } = ProStepTab.useStepTabInstance();\n const handleSave = async () => {\n // 执行表单校验或者异步请求\n await form.validateFields();\n // 模拟异步1s保存\n await new Promise((resolve) => setTimeout(resolve, 1000));\n if (step <= 2) {\n setStep(step + 1);\n }\n message.success(`保存步骤2成功`);\n return true;\n };\n useEffect(() => {\n registerHandle('2', handleSave);\n }, [registerHandle]);\n return (\n <div>\n <ProForm\n form={form}\n columns={[\n {\n type: 'Input',\n label: '步骤2-1',\n name: `queue_step2_1`,\n required: true,\n },\n {\n type: 'Input',\n label: '步骤2-2',\n name: `queue_step2_2`,\n required: true,\n },\n ]}\n span={24}\n footer={false}\n />\n <Button type=\"primary\" onClick={saveHandle} loading={loading} disabled={loading}>\n 保存并下一步\n </Button>\n </div>\n );\n};\n\n/**\n * 步骤3\n */\nconst Step3: React.FC = () => {\n const { saveHandle, registerHandle, loading } = ProStepTab.useStepTabInstance();\n const [form] = Form.useForm();\n const handleSave = async () => {\n // 执行表单校验或者异步请求\n await form.validateFields();\n // 模拟异步1s保存\n await new Promise((resolve) => setTimeout(resolve, 1000));\n message.success('保存步骤3成功');\n return true;\n };\n useEffect(() => {\n registerHandle('3', handleSave);\n }, [registerHandle]);\n return (\n <div>\n <ProForm\n form={form}\n columns={[\n {\n type: 'Input',\n label: '步骤3-1',\n name: `queue_step3_1`,\n required: true,\n },\n {\n type: 'Input',\n label: '步骤3-2',\n name: `queue_step3_2`,\n required: true,\n },\n ]}\n span={24}\n footer={false}\n />\n <Button type=\"primary\" onClick={saveHandle} loading={loading} disabled={loading}>\n 保存并下一步\n </Button>\n </div>\n );\n};\n/**\n * 实际内容组件\n */\nconst StepQueueDemo: React.FC = () => {\n // defaultStep需要根据接口读取默认值，默认1\n return (\n <ProStepTab autoNext={true} queueSteps={3} defaultStep={1}>\n <StepTabContent />\n </ProStepTab>\n );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n // 使用 useStepTabInstance 获取StepTab实例\n const { activeKey, setCheckActiveKey, step, queueSteps, resetHandles } =\n ProStepTab.useStepTabInstance();\n\n // 组件卸载时重置handles\n useEffect(() => {\n return () => {\n resetHandles();\n };\n }, [resetHandles]);\n\n // 处理Tab切换\n const handleTabChange = (key: string) => {\n setCheckActiveKey(key);\n };\n\n // 根据key渲染对应的步骤组件\n const renderTabContent = (key: string) => {\n switch (key) {\n case '1':\n return <Step1 />;\n case '2':\n return <Step2 />;\n case '3':\n return <Step3 />;\n case '4':\n return <div>步骤4内容</div>;\n case '5':\n return <div>步骤5内容</div>;\n default:\n return null;\n }\n };\n\n return (\n <Tabs\n activeKey={activeKey}\n onChange={handleTabChange}\n items={tabList.map((tab) => ({\n key: tab.key,\n label: tab.name,\n // 当step >= queueSteps时全部开启，否则只有小于等于当前step的tab可用\n disabled: step < Number(tab.key) && step < queueSteps,\n children: renderTabContent(tab.key),\n }))}\n />\n );\n};\n\nexport default StepQueueDemo;\n"
812
- },
813
- {
814
- "id": "ProStepTab/demos/StepRouterTab.tsx",
815
- "component": "ProStepTab",
816
- "file": "demos/StepRouterTab.tsx",
817
- "title": "路由保持模式",
818
- "note": "",
819
- "source": "import React, { useEffect } from 'react';\nimport { Tabs } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n { key: '1', name: '步骤1' },\n { key: '2', name: '步骤2' },\n { key: '3', name: '步骤3' },\n];\n\n/**\n * 实际内容组件\n */\nconst StepRouterTab: React.FC = () => {\n return (\n <ProStepTab routerKeep={true}>\n <StepTabContent />\n </ProStepTab>\n );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n // 使用 useStepTabInstance 获取StepTab实例\n const { activeKey, setCheckActiveKey, resetHandles } = ProStepTab.useStepTabInstance();\n\n // 组件卸载时重置handles\n useEffect(() => {\n return () => {\n resetHandles();\n };\n }, [resetHandles]);\n\n // 处理Tab切换\n const handleTabChange = (key: string) => {\n setCheckActiveKey(key);\n };\n\n // 根据key渲染对应的步骤组件\n const renderTabContent = (key: string) => {\n switch (key) {\n case '1':\n return <Step1 namePath=\"router\" />;\n case '2':\n return <Step2 namePath=\"router\" />;\n case '3':\n return <Step3 namePath=\"router\" />;\n default:\n return null;\n }\n };\n\n return (\n <Tabs\n activeKey={activeKey}\n onChange={handleTabChange}\n items={tabList.map((tab) => ({\n key: tab.key,\n label: tab.name,\n children: renderTabContent(tab.key),\n }))}\n />\n );\n};\n\nexport default StepRouterTab;\n"
820
- },
821
- {
822
- "id": "ProStepTab/demos/StepGlobal.tsx",
823
- "component": "ProStepTab",
824
- "file": "demos/StepGlobal.tsx",
825
- "title": "全局模式",
826
- "note": "",
827
- "source": "import React, { useEffect } from 'react';\nimport { Tabs, Button, message } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n { key: '1', name: '步骤1' },\n { key: '2', name: '步骤2' },\n { key: '3', name: '步骤3' },\n];\n\n/**\n * 实际内容组件\n */\nconst StepGlobal: React.FC = () => {\n return (\n <ProStepTab>\n <StepTabContent />\n </ProStepTab>\n );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n // 使用 ProStepTab.useStepTabInstance 获取StepTab实例\n const { activeKey, setCheckActiveKey, resetHandles, saveHandle } =\n ProStepTab.useStepTabInstance();\n\n // 组件卸载时重置handles\n useEffect(() => {\n return () => {\n resetHandles();\n };\n }, [resetHandles]);\n\n // 处理Tab切换\n const handleTabChange = (key: string) => {\n setCheckActiveKey(key);\n };\n\n // 根据key渲染对应的步骤组件\n const renderTabContent = (key: string) => {\n switch (key) {\n case '1':\n return <Step1 namePath=\"global\" />;\n case '2':\n return <Step2 namePath=\"global\" />;\n case '3':\n return <Step3 namePath=\"global\" />;\n default:\n return null;\n }\n };\n\n // 全局保存\n const handleGlobalSave = async () => {\n // 保存当前tab\n await saveHandle();\n // 模拟异步1s保存\n await new Promise((resolve) => setTimeout(resolve, 1000));\n message.success('全局保存成功');\n return true;\n };\n\n return (\n <Tabs\n tabBarExtraContent={{\n right: (\n <Button type=\"primary\" onClick={handleGlobalSave}>\n 全局保存\n </Button>\n ),\n }}\n activeKey={activeKey}\n onChange={handleTabChange}\n items={tabList.map((tab) => ({\n key: tab.key,\n label: tab.name,\n children: renderTabContent(tab.key),\n }))}\n />\n );\n};\n\nexport default StepGlobal;\n"
828
- },
829
- {
830
- "id": "ProStepTab/demos/StepNext.tsx",
831
- "component": "ProStepTab",
832
- "file": "demos/StepNext.tsx",
833
- "title": "自动跳转模式",
834
- "note": "",
835
- "source": "import React, { useEffect } from 'react';\nimport { Tabs } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n { key: '1', name: '步骤1' },\n { key: '2', name: '步骤2' },\n { key: '3', name: '步骤3' },\n];\n\n/**\n * 自动跳转Tab示例组件\n */\nconst StepNextDemo: React.FC = () => {\n // queueSteps 需要按顺序完成的步骤数量\n return (\n <ProStepTab autoNext={true} queueSteps={3}>\n <StepNextContent />\n </ProStepTab>\n );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepNextContent: React.FC = () => {\n // 使用 useStepTabInstance 获取StepTab实例\n const { activeKey, setCheckActiveKey, resetHandles } = ProStepTab.useStepTabInstance();\n\n // 组件卸载时重置handles\n useEffect(() => {\n return () => {\n resetHandles();\n };\n }, [resetHandles]);\n\n // 处理Tab切换\n const handleTabChange = (key: string) => {\n setCheckActiveKey(key);\n };\n\n // 根据key渲染对应的步骤组件\n const renderTabContent = (key: string) => {\n switch (key) {\n case '1':\n return <Step1 namePath=\"stepNext\" />;\n case '2':\n return <Step2 namePath=\"stepNext\" />;\n case '3':\n return <Step3 namePath=\"stepNext\" />;\n default:\n return null;\n }\n };\n\n return (\n <Tabs\n activeKey={activeKey}\n onChange={handleTabChange}\n items={tabList.map((tab) => ({\n key: tab.key,\n label: tab.name,\n children: renderTabContent(tab.key),\n }))}\n />\n );\n};\n\nexport default StepNextDemo;\n"
836
- },
837
- {
838
- "id": "ProStepTab/demos/StepDisable.tsx",
839
- "component": "ProStepTab",
840
- "file": "demos/StepDisable.tsx",
841
- "title": "禁用模式",
842
- "note": "",
843
- "source": "/**\n * title: 禁用模式\n * desc: |\n * `场景：查看或者审核模式下tab需要直接切换查看，不走校验保存时`\n */\n\nimport React, { useEffect } from 'react';\nimport { Tabs } from 'antd';\nimport { ProStepTab } from '@zat-design/sisyphus-react';\nimport { Step1, Step2, Step3 } from './steps';\n\n// 定义Tab列表\nconst tabList: { key: string; name: string }[] = [\n { key: '1', name: '步骤1' },\n { key: '2', name: '步骤2' },\n { key: '3', name: '步骤3' },\n];\n\n/**\n * 实际内容组件\n */\nconst StepDisable: React.FC = () => {\n return (\n <ProStepTab validate={false}>\n <StepTabContent />\n </ProStepTab>\n );\n};\n\n/**\n * 内容组件，使用StepTabInstance获取实例\n */\nconst StepTabContent: React.FC = () => {\n // 使用 useStepTabInstance 获取StepTab实例\n const { activeKey, setCheckActiveKey, resetHandles } = ProStepTab.useStepTabInstance();\n\n // 组件卸载时重置handles\n useEffect(() => {\n return () => {\n resetHandles();\n };\n }, [resetHandles]);\n\n // 处理Tab切换\n const handleTabChange = (key: string) => {\n setCheckActiveKey(key);\n };\n\n // 根据key渲染对应的步骤组件\n const renderTabContent = (key: string) => {\n switch (key) {\n case '1':\n return <Step1 namePath=\"stepDisable\" disabled={true} />;\n case '2':\n return <Step2 namePath=\"stepDisable\" disabled={true} />;\n case '3':\n return <Step3 namePath=\"stepDisable\" disabled={true} />;\n default:\n return null;\n }\n };\n\n return (\n <Tabs\n activeKey={activeKey}\n onChange={handleTabChange}\n items={tabList.map((tab) => ({\n key: tab.key,\n label: tab.name,\n children: renderTabContent(tab.key),\n }))}\n />\n );\n};\n\nexport default StepDisable;\n"
844
- },
845
- {
846
- "id": "ProCascader/demos/baseDemo.tsx",
847
- "component": "ProCascader",
848
- "file": "demos/baseDemo.tsx",
849
- "title": "基本使用",
850
- "note": "",
851
- "source": "/**\n * title: 基本使用\n * desc: |\n * 传入`dataSource`作为数据源\n */\n\n/* eslint-disable react/no-unescaped-entities */\nimport { Space } from 'antd';\nimport { ProForm, ProConfigProvider, ProCascader } from '@zat-design/sisyphus-react';\nimport { cascaderDataSource, addressDataSource } from './data';\nimport { codeConfig } from './allDemoProvide';\n\nconst BaseDemo = () => {\n return (\n <ProConfigProvider value={codeConfig}>\n <Space orientation=\"vertical\" size={16} style={{ display: 'flex' }}>\n 普通级联组件\n <ProCascader dataSource={cascaderDataSource} value={['100', '110']} />\n mode为\"address\"的地址组件\n <ProCascader\n mode=\"address\"\n dataSource={addressDataSource}\n value={['110000', '110100', '110101', '222']}\n />\n 不展示地址详情\n <ProCascader mode=\"address\" hasDetail={false} dataSource={addressDataSource} />\n </Space>\n </ProConfigProvider>\n );\n};\n\nexport default BaseDemo;\n"
852
- },
853
- {
854
- "id": "ProCascader/demos/useRequestDemo.tsx",
855
- "component": "ProCascader",
856
- "file": "demos/useRequestDemo.tsx",
857
- "title": "异步数据",
858
- "note": "",
859
- "source": "import { Space } from 'antd';\nimport { ProCascader, ProConfigProvider } from '@zat-design/sisyphus-react';\nimport { addressDataSource, cascaderDataSource } from './data';\nimport { codeConfig } from './allDemoProvide';\n\nconst UseRequestDemo = () => {\n const getAddressDataSource = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: addressDataSource,\n message: '',\n });\n }, 1000);\n });\n };\n\n const getCascaderDataSource = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: cascaderDataSource,\n message: '',\n });\n }, 1000);\n });\n };\n\n return (\n <ProConfigProvider value={codeConfig}>\n <Space orientation=\"vertical\" size={16} style={{ display: 'flex' }}>\n 普通级联组件\n <ProCascader\n useRequest={{\n service: getCascaderDataSource,\n }}\n fieldNames={{ label: 'label', value: 'value' }}\n value={['100', '110']}\n />\n 地址级联组件\n <ProCascader\n mode=\"address\"\n useRequest={{\n service: getAddressDataSource,\n }}\n fieldNames={{ label: 'label', value: 'value' }}\n value={['110000', '110100', '110101', '222']}\n />\n </Space>\n </ProConfigProvider>\n );\n};\n\nexport default UseRequestDemo;\n"
860
- },
861
- {
862
- "id": "ProCascader/demos/formItemDemo.tsx",
863
- "component": "ProCascader",
864
- "file": "demos/formItemDemo.tsx",
865
- "title": "结合 Form.Item 使用",
866
- "note": "",
867
- "source": "import { useState } from 'react';\nimport { ProCascader } from '@zat-design/sisyphus-react';\nimport { Button, Form, Space } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { addressDataSource, cascaderDataSource } from './data';\n\nconst FormItemDemo = () => {\n const initialValues = {\n cascader: ['100', '110'],\n address: ['130000', '130100', '130102', 'detail'],\n };\n const [formValues, setFormValues] = useState(initialValues);\n\n const getAddressDataSource = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: addressDataSource,\n message: '',\n });\n }, 1000);\n });\n };\n\n const getCascaderDataSource = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: cascaderDataSource,\n message: '',\n });\n }, 1000);\n });\n };\n\n const handleOk = (values: any) => {\n setFormValues(values);\n };\n\n return (\n <Space orientation=\"vertical\" size={16} style={{ display: 'flex' }}>\n <Form initialValues={initialValues} onFinish={handleOk}>\n <Form.Item name=\"cascader\" label=\"普通级联组件\">\n <ProCascader\n useRequest={{\n service: getCascaderDataSource,\n }}\n fieldNames={{ label: 'label', value: 'value' }}\n />\n </Form.Item>\n <Form.Item name=\"address\" label=\"地址级联组件\">\n <ProCascader\n mode=\"address\"\n useRequest={{\n service: getAddressDataSource,\n }}\n fieldNames={{ label: 'label', value: 'value' }}\n />\n </Form.Item>\n <Form.Item>\n <Button type=\"primary\" htmlType=\"submit\">\n 提交\n </Button>\n </Form.Item>\n </Form>\n <div>\n 表单数据：\n <ReactJson src={formValues} />\n </div>\n </Space>\n );\n};\n\nexport default FormItemDemo;\n"
868
- },
869
- {
870
- "id": "ProCascader/demos/proFormDemo.tsx",
871
- "component": "ProCascader",
872
- "file": "demos/proFormDemo.tsx",
873
- "title": "结合 ProForm 使用",
874
- "note": "",
875
- "source": "import { useState } from 'react';\nimport { ProForm, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { Button, Form, Space } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { addressDataSource } from './data';\n\nconst ProFormDemo = () => {\n const [form] = Form.useForm();\n const [formView] = Form.useForm();\n const initialValues = {\n province: '130000',\n city: '130100',\n detail: '海街日记',\n address: ['130000', '130100', '130102', '马尔代夫'],\n };\n\n const [formValues, setFormValues] = useState();\n\n const getAddressDataSource = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: addressDataSource,\n message: '',\n });\n }, 1000);\n });\n };\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProCascader',\n label: '普通级联组件',\n names: ['province', 'city', 'detail'],\n required: true,\n fieldProps: {\n mode: 'address',\n level: 2,\n useRequest: {\n service: getAddressDataSource,\n },\n onFieldChange: (val, record) => {\n console.log(val, record);\n },\n },\n },\n {\n type: 'ProCascader',\n label: '地址级联组件',\n name: 'address',\n span: 12,\n fieldProps: {\n mode: 'address',\n useRequest: {\n service: getAddressDataSource,\n },\n },\n },\n ];\n\n const handleFinish = (values: any) => {\n setFormValues(values);\n };\n\n return (\n <Space orientation=\"vertical\" size={16} style={{ display: 'flex' }}>\n <ProForm\n form={form}\n initialValues={initialValues}\n columns={columns}\n footer={\n <Button type=\"primary\" htmlType=\"submit\">\n 提交\n </Button>\n }\n onFinish={handleFinish}\n />\n <div>\n 表单数据：\n <ReactJson src={formValues} />\n </div>\n <h4>视图模式</h4>\n <ProForm\n initialValues={initialValues}\n form={formView}\n columns={columns}\n isView\n footer={false}\n />\n </Space>\n );\n};\n\nexport default ProFormDemo;\n"
876
- },
877
- {
878
- "id": "ProCascader/demos/transformDemo.tsx",
879
- "component": "ProCascader",
880
- "file": "demos/transformDemo.tsx",
881
- "title": "结合 ProForm 使用",
882
- "note": "",
883
- "source": "/**\n * title: 结合 ProForm 使用\n * desc: |\n * 数据转换：使用`transformResponse`对接口返回结构进行转换，或者使用 ProForm 的 names 功能\n */\n\nimport { useState } from 'react';\nimport { ProConfigProvider, ProForm } from '@zat-design/sisyphus-react';\nimport { Button, Form, Space } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { codeConfig } from './allDemoProvide';\n\nconst TransformDemo = () => {\n const [form] = Form.useForm();\n const initialValues = {\n address: {\n province: '130000',\n city: '130100',\n county: '130102',\n address: 'detail',\n },\n namesAddress: {\n province: '130000',\n city: '130100',\n county: '130102',\n address: 'detail',\n },\n eat: {\n level1: '100',\n level2: '110',\n },\n };\n\n const [formValues, setFormValues] = useState({});\n\n const transformAddress = {\n normalize: (value: string[]) => {\n if (!value || value?.length === 0) {\n return undefined;\n }\n const [province, city, county, address] = value || [];\n return { province, city, county, address };\n },\n getValueProps: (value: { [key: string]: string }) => {\n const { province, city, county, address } = value || {};\n return {\n value: [province, city, county, address],\n };\n },\n };\n\n const columns = [\n {\n type: 'ProCascader',\n label: '地址',\n name: 'address',\n required: true,\n span: '12',\n fieldProps: {\n mode: 'address',\n },\n ...transformAddress,\n },\n {\n type: 'ProCascader',\n label: '地址',\n names: [\n ['namesAddress', 'province'],\n ['namesAddress', 'city'],\n ['namesAddress', 'county'],\n ['namesAddress', 'address'],\n ],\n required: true,\n span: '12',\n fieldProps: {\n mode: 'address',\n },\n },\n {\n type: 'ProCascader',\n label: '普通级联组件',\n names: [\n ['eat', 'level1'],\n ['eat', 'level2'],\n ],\n required: true,\n fieldProps: {\n code: 'CD000050',\n },\n },\n ];\n\n const handleFinish = (values: any) => {\n setFormValues(values);\n };\n\n return (\n <ProConfigProvider value={codeConfig}>\n <Space orientation=\"vertical\" size={16} style={{ display: 'flex' }}>\n <ProForm\n initialValues={initialValues}\n form={form}\n columns={columns}\n footer={\n <Button type=\"primary\" htmlType=\"submit\">\n 提交\n </Button>\n }\n onFinish={handleFinish}\n />\n 表单数据：\n <ReactJson src={formValues} />\n </Space>\n </ProConfigProvider>\n );\n};\n\nexport default TransformDemo;\n"
884
- },
885
- {
886
- "id": "ProCascader/demos/allDemo.tsx",
887
- "component": "ProCascader",
888
- "file": "demos/allDemo.tsx",
889
- "title": "完整功能",
890
- "note": "",
891
- "source": "/**\n * title: 完整功能\n * desc: |\n * 使用 `ProConfigProvider` 进行 `ProAddressBar` 的全局配置: `useRequest` 、 `dataSource`、`transformResponse`，\n */\n\nimport { Space } from 'antd';\nimport { ProConfigProvider, ProCascader } from '@zat-design/sisyphus-react';\nimport { codeConfig, getAllAddress, cascaderDataSource } from './allDemoProvide';\n\nconst AllDemo = () => {\n const getCascaderDataSource = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: cascaderDataSource,\n message: '',\n });\n }, 1000);\n });\n };\n return (\n <>\n <span style={{ fontWeight: 500 }}>地址组件全局配置code和detailMaxLength:</span>\n <ProConfigProvider value={codeConfig}>\n <Space orientation=\"vertical\" size={16} style={{ display: 'flex' }}>\n 有详情地址： <ProCascader mode=\"address\" />\n 省市(level=2)： <ProCascader mode=\"address\" level={2} />\n 无详情地址： <ProCascader mode=\"address\" hasDetail={false} />\n 单独传入code：\n <ProCascader mode=\"address\" code=\"CD001310\" />\n 地址禁用并开启tooltip：\n <ProCascader\n mode=\"address\"\n value={[\n '130000',\n '130100',\n '130102',\n '有详情地址有详情地址有详情地址有详情地址有详情地址有详情地址',\n ]}\n disabled\n tooltip\n />\n 地址查看模式：\n <ProCascader tooltip value={['130000', '130100', '130102', 'detail']} isView />\n </Space>\n </ProConfigProvider>\n <span style={{ fontWeight: 500 }}>配置useRequest获取数据源:</span>\n <Space orientation=\"vertical\" size={16} style={{ display: 'flex' }}>\n 普通级联组件\n <ProCascader\n useRequest={{\n service: getCascaderDataSource,\n }}\n fieldNames={{ label: 'label', value: 'value' }}\n value={['100', '110']}\n />\n 地址级联组件\n <ProCascader\n mode=\"address\"\n useRequest={{\n service: getAllAddress,\n }}\n fieldNames={{ label: 'label', value: 'value' }}\n // value={['130000', '130100', '130102', 'detail']}\n />\n </Space>\n </>\n );\n};\n\nexport default AllDemo;\n"
892
- },
893
- {
894
- "id": "ProEnum/demos/demo1.tsx",
895
- "component": "ProEnum",
896
- "file": "demos/demo1.tsx",
897
- "title": "基本使用、tooltip 超长文字时显示",
898
- "note": "",
899
- "source": "/**\n * title: 基本使用、tooltip 超长文字时显示\n * desc: |\n * 使用全局 `ProConfigProvider` 进行 `ProEnum` 的初始化配置 `useRequest` 获取异步数据，组件传入 `code` 获取对应枚举的列表、`mode` 使用不同的组件类型、默认 `ProSelect`\n */\n\n// @ts-nocheck\nimport { FC, useState } from 'react';\nimport { ProEnum, ProSelect } from '@zat-design/sisyphus-react';\nimport { Cascader } from 'antd';\n\nimport ProvideComp from './provide1';\n\nconst { useEnum } = ProEnum;\nconst Demo: FC = () => {\n const [checkbox, setCheckbox] = useState();\n const [radio, setRadio] = useState();\n\n const Copm = () => {\n const [options] = useEnum('add');\n\n return (\n <div>\n <p style={{ margin: '16px 0' }}>使用 Select 枚举组件</p>\n <ProEnum code=\"serviceType\" style={{ width: '240px' }} />\n <p style={{ margin: '16px 0' }}>使用 Checkbox 枚举组件</p>\n <ProEnum\n value={checkbox}\n onChange={(v) => setCheckbox(v)}\n type=\"Checkbox\"\n code=\"ruleScope\"\n style={{ width: '240px' }}\n />\n <p style={{ margin: '16px 0' }}>使用 Radio 枚举组件</p>\n <ProEnum\n value={radio}\n onChange={(e) => setRadio(e.target.value)}\n type=\"Radio\"\n code=\"ruleScope\"\n style={{ width: '260px' }}\n />\n </div>\n );\n };\n\n return (\n <ProvideComp>\n <Copm />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
900
- },
901
- {
902
- "id": "ProEnum/demos/tag.tsx",
903
- "component": "ProEnum",
904
- "file": "demos/tag.tsx",
905
- "title": "tag 形式展示",
906
- "note": "",
907
- "source": "/**\n * title: tag 形式展示\n * desc: |\n * 使用 `type:Tag` 用来展示 tag 模式\n */\n\n// @ts-nocheck\nimport { FC, useState } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\n\nimport ProvideComp from './provide1';\n\nconst Demo: FC = () => {\n const [checkbox, setCheckbox] = useState('common');\n\n const Copm = () => {\n return (\n <div>\n <ProEnum value={checkbox} onChange={(v) => setCheckbox(v)} type=\"Tag\" code=\"ruleScope\" />\n </div>\n );\n };\n\n return (\n <ProvideComp>\n <Copm />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
908
- },
909
- {
910
- "id": "ProEnum/demos/group.tsx",
911
- "component": "ProEnum",
912
- "file": "demos/group.tsx",
913
- "title": "Group 形式展示",
914
- "note": "",
915
- "source": "/**\n * title: Group 形式展示\n * desc: |\n * 使用 `type:Group` 用来展示 Group 模式\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { Button } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nimport ProvideComp from './provide1';\n\nconst Demo: FC = () => {\n const [form] = ProForm.useForm();\n\n const Copm = () => {\n return (\n <div>\n <ProForm\n // footer={null}\n form={form}\n initialValues={{ serviceType: 100 }}\n onFinish={(values) => {\n console.log(values);\n }}\n columns={[\n {\n label: '是否',\n name: 'choose',\n type: 'ProEnum',\n // disabled: true,\n initialValue: 'no',\n fieldProps: {\n type: 'Group',\n code: 'choose',\n allowClear: false,\n onFieldChange(value, record, { form }) {\n form.setFieldValue('serviceType', 23);\n },\n },\n },\n {\n label: '渠道类型',\n name: 'ruleScope',\n type: 'ProEnum',\n span: 24,\n fieldProps: {\n type: 'Group',\n code: 'ruleScope',\n },\n },\n {\n label: '核保类型',\n name: 'serviceType',\n type: 'ProEnum',\n span: 24,\n show: (values) => {\n return values.choose === 'yes';\n },\n fieldProps: {\n type: 'Group',\n code: 'serviceType',\n },\n },\n ]}\n />\n <Button\n onClick={() => {\n form.setFieldValue('serviceType', 100);\n }}\n >\n 手动设置\n </Button>\n </div>\n );\n };\n\n return (\n <ProvideComp>\n <Copm />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
916
- },
917
- {
918
- "id": "ProEnum/demos/segmented.tsx",
919
- "component": "ProEnum",
920
- "file": "demos/segmented.tsx",
921
- "title": "Segmented 分段控制器展示",
922
- "note": "",
923
- "source": "/**\n * title: Segmented 分段控制器展示\n * desc: |\n * 使用 `type:Segmented` 展示分段控制器（Segmented）模式，接口与 `ProSelect`/`Radio` 一致，适合在少量互斥选项间快速切换\n */\n\n// @ts-nocheck\nimport { FC, useState } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\n\nimport ProvideComp from './provide1';\n\nconst dataSource = [\n { label: '待处理', value: 'pending' },\n { label: '处理中', value: 'processing' },\n { label: '已处理', value: 'processed' },\n];\n\nconst Demo: FC = () => {\n const [value, setValue] = useState('pending');\n\n // 注意：ProEnum 直接内联渲染，不要包在渲染函数内定义的子组件里，\n // 否则每次 setValue 会让子组件重新挂载，Segmented 的滑块（thumb）过渡动画会丢失\n return (\n <ProvideComp>\n <div>\n <ProEnum\n type=\"Segmented\"\n dataSource={dataSource}\n value={value}\n onChange={(v) => setValue(v)}\n />\n </div>\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
924
- },
925
- {
926
- "id": "ProEnum/demos/demo2.tsx",
927
- "component": "ProEnum",
928
- "file": "demos/demo2.tsx",
929
- "title": "使用默认数据",
930
- "note": "",
931
- "source": "/**\n * title: 使用默认数据\n * desc: |\n * 支持全局 `dataSource` 数据源、数据格式如上、在 AppProConfigProvider 进行初始化\n */\n\n// @ts-nocheck\nimport { FC, useState } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide';\n\nconst Demo: FC = () => {\n const [checkbox, setCheckbox] = useState();\n const [radio, setRadio] = useState();\n return (\n <ProvideComp>\n <p style={{ margin: '16px 0' }}>使用 Select 枚举组件</p>\n <ProEnum\n dataSource={[\n {\n label: '有效',\n value: '1',\n },\n {\n label: '无效',\n value: '0',\n },\n ]}\n style={{ width: '240px' }}\n />\n <p style={{ margin: '16px 0' }}>使用 Checkbox 枚举组件</p>\n <ProEnum\n value={checkbox}\n onChange={(v) => setCheckbox(v)}\n type=\"Checkbox\"\n dataSource={[\n {\n label: '有效',\n value: '1',\n },\n {\n label: '无效',\n value: '0',\n },\n ]}\n />\n <p style={{ margin: '16px 0' }}>使用 Radio 枚举组件</p>\n <ProEnum\n value={radio}\n onChange={(e) => setRadio(e.target.value)}\n type=\"Radio\"\n dataSource={[\n {\n label: '有效',\n value: '1',\n },\n {\n label: '无效',\n value: '0',\n },\n ]}\n style={{ width: '260px' }}\n />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
932
- },
933
- {
934
- "id": "ProEnum/demos/code.tsx",
935
- "component": "ProEnum",
936
- "file": "demos/code.tsx",
937
- "title": "使用多 code 组合",
938
- "note": "",
939
- "source": "/**\n * title: 使用多 code 组合\n * desc: |\n * `code` 支持传入数组、一次性用于获取多个枚举列表\n */\n\nimport { Form } from 'antd';\nimport { useEffect } from 'react';\n\nimport { ProForm, ProConfigProvider } from '@zat-design/sisyphus-react';\n\nconst asyncService = () =>\n new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: {\n tags: [\n {\n title: 'React',\n code: 'react',\n name: '小明',\n children: [\n {\n title: 'React-1',\n code: 'react-1',\n name: '小明-1',\n children: [\n {\n title: 'React-1-1',\n code: 'react-1-1',\n name: '小明-1-1',\n },\n ],\n },\n {\n title: 'React-2',\n code: 'react-2',\n name: '小明-2',\n },\n ],\n },\n {\n title: 'Vue',\n code: 'vue',\n name: '小红',\n children: [\n {\n title: 'Vue-1',\n code: 'Vue-1',\n name: '小红-1',\n children: [\n {\n title: 'Vue-1-1',\n code: 'Vue-1-1',\n name: '小红-1-1',\n },\n ],\n },\n {\n title: 'Vue-2',\n code: 'Vue-2',\n name: '小红-2',\n },\n ],\n },\n {\n title: 'Angule',\n code: 'angule',\n name: '小七',\n },\n ],\n category: [\n { title: 'PC', code: 'pc', author: 'xikun', description: '保险核心项目模版' },\n { title: 'H5', code: 'h5', author: 'zhangsan', description: '保险核心代码片段' },\n ],\n },\n status: 200,\n });\n }, 2000);\n });\n\nconst ProFormViewDemo = () => {\n const [form] = Form.useForm();\n\n const columns = [\n {\n type: 'ProEnum',\n name: 'proEnum',\n label: '结合表单使用',\n fieldProps: {\n code: ['tags', 'category'],\n showCodeName: true,\n },\n },\n\n {\n type: 'ProEnum',\n name: 'ProEnum2',\n label: '类别',\n fieldProps: {\n type: 'Checkbox',\n code: 'category',\n },\n },\n ];\n\n const initialConfig = {\n ProEnum: {\n useRequest: {\n service: asyncService,\n },\n transformResponse: (data) => {\n return data?.data;\n },\n main: true,\n fieldNames: {\n label: 'title',\n value: 'code',\n children: 'children',\n },\n cacheKey: 'zat-design-pro-component-cacheKey-code',\n },\n };\n\n useEffect(() => {}, []);\n\n return (\n <>\n <ProConfigProvider value={initialConfig}>\n <ProForm form={form} columns={columns} footer={false} />\n </ProConfigProvider>\n </>\n );\n};\n\nexport default ProFormViewDemo;\n"
940
- },
941
- {
942
- "id": "ProEnum/demos/demo3.tsx",
943
- "component": "ProEnum",
944
- "file": "demos/demo3.tsx",
945
- "title": "组件自定义请求",
946
- "note": "",
947
- "source": "/**\n * title: 组件自定义请求\n * desc: |\n * 使用 `useRequest` 自定义请求数据\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide1';\n\nexport const asyncService = () =>\n new Promise((resolve) => {\n setTimeout(() => {\n console.log('再次发送1');\n resolve({\n data: [\n {\n label: '共享',\n value: 'value',\n },\n {\n label: '共享1',\n value: 'value2',\n },\n ],\n status: 200,\n });\n }, 3000);\n });\n\nconst asyncService1 = () =>\n new Promise((resolve) => {\n setTimeout(() => {\n console.log('再次发送2');\n resolve({\n data: {\n ruleScope: [\n {\n label: '共享3',\n value: 'value3',\n },\n {\n label: '共享4',\n value: 'value4',\n },\n ],\n },\n status: 200,\n });\n }, 3000);\n });\n\nconst Demo: FC = () => {\n return (\n <ProvideComp>\n <p style={{ margin: '16px 0' }}>使用 Select 枚举组件</p>\n <ProEnum\n style={{ width: '240px' }}\n code=\"serviceType1\"\n useRequest={{\n service: asyncService,\n options: {\n manual: true,\n },\n }}\n />\n <p style={{ margin: '16px 0' }}>使用自定义请求进行数据转化</p>\n <ProEnum\n style={{ width: '240px' }}\n useRequest={{\n service: asyncService1,\n options: {\n manual: true,\n },\n }}\n code=\"ruleScope1\"\n transformResponse={(res) => {\n if (res.status === 200) {\n return res.data.ruleScope;\n }\n }}\n />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
948
- },
949
- {
950
- "id": "ProEnum/demos/demo4.tsx",
951
- "component": "ProEnum",
952
- "file": "demos/demo4.tsx",
953
- "title": "数据转换",
954
- "note": "",
955
- "source": "/**\n * title: 数据转换\n * desc: |\n * 支持全局数据转换、使用 `transformResponse` 方法、可将数据格式化成标准数据、在 AppProConfigProvider 进行初始化\n * 支持组件自定义请求、使用 `transformResponse` 修改异步接口的数据源、可以参考 ProSelect 格式化返回结果\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide2';\n\nexport const asyncService = () =>\n new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n resContent: {\n data: [\n { label: '产品名字1', value: 'code1' },\n { label: '产品名字2', value: 'code2' },\n ],\n },\n code: 200,\n });\n }, 1000);\n });\n\nconst Demo: FC = () => {\n return (\n <ProvideComp>\n <ProEnum\n style={{ width: '240px' }}\n useRequest={{\n service: asyncService,\n options: {\n manual: true,\n },\n }}\n transformResponse={(resp) => {\n if (resp.code === 200) {\n return resp.resContent.data;\n }\n }}\n />\n <p style={{ margin: '16px 0' }}>使用 Select 枚举组件</p>\n <ProEnum code=\"status\" style={{ width: '240px' }} />\n <p style={{ margin: '16px 0' }}>对缓存的枚举数据进行 transformResponse 使之禁用 </p>\n <ProEnum\n code=\"status\"\n style={{ width: '240px' }}\n transformResponse={(res: any) => {\n res = res.map((item) => {\n if (item.value === '0') {\n return { ...item, disabled: true };\n }\n return item;\n });\n return res;\n }}\n />\n <p style={{ margin: '16px 0' }}>对缓存的枚举数据进行 transformResponse 筛选掉对应的数据 </p>\n <ProEnum\n code=\"status\"\n style={{ width: '240px' }}\n transformResponse={(res: any) => {\n res = res.filter((item) => item.value !== '0');\n return res;\n }}\n />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
956
- },
957
- {
958
- "id": "ProEnum/demos/demo10.tsx",
959
- "component": "ProEnum",
960
- "file": "demos/demo10.tsx",
961
- "title": "缓存合并",
962
- "note": "",
963
- "source": "/**\n * title: 缓存合并\n * desc: |\n * 适用场景、在微前端架构下、子应用可以使用已经加载过的缓存枚举、并会自动合并到全局枚举。设置 `useRequest/options/codes` ProEnum 自动会根据传入的 code 进行 merge 合并等操作\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide4';\n\nconst Demo: FC = () => {\n return (\n <ProvideComp>\n <>\n <p style={{ margin: '16px 0' }}>自定义请求的 shared 枚举会自动合并到全局枚举</p>\n <ProEnum code=\"status\" style={{ width: '240px' }} />\n </>\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
964
- },
965
- {
966
- "id": "ProEnum/demos/demo11.tsx",
967
- "component": "ProEnum",
968
- "file": "demos/demo11.tsx",
969
- "title": "缓存合并",
970
- "note": "",
971
- "source": "/**\n * title: 缓存合并\n * desc: |\n * 当再次访问页面时(模拟触发其他子应用访问)、会再次触发新的枚举请求接口、并根据 `codes` 进行合并\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide5';\n\nconst Demo: FC = () => {\n return (\n <ProvideComp>\n <div>\n <p style={{ margin: '16px 0' }}>使用全局的 status</p>\n <ProEnum style={{ width: '240px' }} code=\"status\" />\n <p style={{ margin: '16px 0' }}>使用code1 </p>\n <ProEnum style={{ width: '240px' }} code=\"code1\" />\n <p style={{ margin: '16px 0' }}>使用code2 </p>\n <ProEnum style={{ width: '240px' }} code=\"code2\" />\n <p style={{ margin: '16px 0' }}>使用code3 </p>\n <ProEnum style={{ width: '240px' }} code=\"code3\" />\n </div>\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
972
- },
973
- {
974
- "id": "ProEnum/demos/proForm.tsx",
975
- "component": "ProEnum",
976
- "file": "demos/proForm.tsx",
977
- "title": "结合 ProForm 使用",
978
- "note": "",
979
- "source": "import { Form } from 'antd';\nimport { useEffect } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide';\n\nconst ProFormViewDemo = () => {\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProEnum',\n name: 'proEnum',\n label: '基本模式',\n fieldProps: {\n code: 'tags',\n },\n },\n {\n type: 'ProEnum',\n name: 'tag',\n label: 'Tag模式',\n fieldProps: {\n code: 'tags',\n type: 'Tag',\n },\n },\n {\n type: 'ProEnum',\n name: 'group',\n label: 'Group模式',\n fieldProps: {\n code: 'tags',\n type: 'Group',\n allowClear: false,\n },\n span: 12,\n },\n {\n type: 'ProEnum',\n name: 'ProEnum1',\n label: 'proEnum单选框',\n fieldProps: {\n type: 'Radio',\n code: 'ruleStatus',\n },\n },\n {\n type: 'ProEnum',\n name: 'ProEnum2',\n label: 'proEnum多选框',\n fieldProps: {\n type: 'Checkbox',\n code: 'serviceType',\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n name: '柳智敏',\n proEnum: 'react',\n ProEnum1: 1,\n ProEnum2: [88, 120],\n });\n }, []);\n\n return (\n <ProvideComp>\n <p style={{ margin: '16px 0' }}>使用配置形式渲染</p>\n <ProForm form={form} columns={columns} footer={false} />\n </ProvideComp>\n );\n};\n\nexport default ProFormViewDemo;\n"
980
- },
981
- {
982
- "id": "ProEnum/demos/demo8.tsx",
983
- "component": "ProEnum",
984
- "file": "demos/demo8.tsx",
985
- "title": "结合 ProForm 查看模式",
986
- "note": "",
987
- "source": "import { Form } from 'antd';\nimport { useEffect } from 'react';\nimport { ProForm, ProEnum } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide';\n\nconst ProFormViewDemo = () => {\n const [form] = Form.useForm();\n\n const [serviceType] = ProEnum.useEnum('serviceType');\n console.log(\"serviceType\", serviceType);\n\n const columns = [\n {\n type: 'ProEnum',\n name: 'proEnum',\n label: '结合表单使用',\n fieldProps: {\n code: 'tags',\n isView: true,\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n name: 'ProEnum1',\n label: 'proEnum单选框',\n fieldProps: {\n type: 'Radio',\n code: 'ruleStatus',\n isView: true,\n },\n },\n {\n type: 'ProEnum',\n name: 'ProEnum2',\n label: 'proEnum多选框',\n fieldProps: {\n type: 'Checkbox',\n code: 'serviceType',\n isView: true,\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n name: '柳智敏',\n proEnum: 'react',\n ProEnum1: '1',\n ProEnum2: ['88', '120'],\n });\n }, []);\n\n return (\n <ProvideComp>\n <p style={{ margin: '16px 0' }}>使用配置形式渲染</p>\n <ProForm form={form} columns={columns} footer={false} isView />\n </ProvideComp>\n );\n};\n\nexport default ProFormViewDemo;\n"
988
- },
989
- {
990
- "id": "ProEnum/demos/demo5.tsx",
991
- "component": "ProEnum",
992
- "file": "demos/demo5.tsx",
993
- "title": "useEnum 获取数据",
994
- "note": "",
995
- "source": "/* eslint-disable react/no-unescaped-entities */\n// @ts-nocheck\nimport { FC } from 'react';\nimport { Space } from 'antd';\nimport { ProEnum } from '@zat-design/sisyphus-react';\nimport ReactJson from 'react-json-view';\nimport ProvideComp from './provide4';\n\nconst { useEnum } = ProEnum;\n\nconst Demo: FC = () => {\n const Comp = () => {\n const [cityArray] = useEnum('city');\n const [label, option] = useEnum('city', 'sh');\n const [labelValue, option2] = useEnum('city', 'sh', true);\n const moreArray = useEnum(['status', 'city']);\n // 新增：数组值查询功能\n const [addressLabels, addressOptions] = useEnum('address', [130000, 130100, 130102]);\n const [addressLabelsWithCode, addressOptionsWithCode] = useEnum(\n 'address',\n [130000, 130100, 130102],\n true,\n );\n\n return (\n <Space orientation=\"vertical\">\n <h3>const [cityArray] = useEnum('city') 取枚举city的Array数据源</h3>\n <ReactJson src={cityArray} />\n <h3>\n const [label, option] = useEnum('city', 'sh');\n 取枚举city数据源中值为sh的中文名称（用于部分数据回显场景）\n </h3>\n <div>\n <div>\n label: <span style={{ color: 'red' }}> {label}</span>\n </div>\n option: <ReactJson src={option} />\n </div>\n <h3>const [labelValue, option2] = useEnum('city', 'sh', true); 取sh的label-value组合值</h3>\n <div>\n <div>\n labelValue: <span style={{ color: 'red' }}> {labelValue}</span>\n </div>\n option: <ReactJson src={option2} />\n </div>\n <h3> const moreArray = useEnum(['status', 'city']); 同时取多个枚举值</h3>\n <h3>\n const [addressLabels, addressOptions] = useEnum('address', [130000, 130100, 130102]);\n 根据数组值返回标签数组\n </h3>\n <div>\n <div>\n addressLabels: <span style={{ color: 'red' }}> {JSON.stringify(addressLabels)}</span>\n </div>\n <ReactJson src={addressLabels} />\n </div>\n <h3>\n const [addressLabelsWithCode, addressOptionsWithCode] = useEnum('address', [130000,\n 130100, 130102], true); 返回 value-label 组合值\n </h3>\n <div>\n <div>\n addressLabelsWithCode:{' '}\n <span style={{ color: 'red' }}> {JSON.stringify(addressLabelsWithCode)}</span>\n </div>\n <ReactJson src={addressLabelsWithCode} />\n </div>\n <div>\n moreArray: <ReactJson src={moreArray} />\n </div>\n </Space>\n );\n };\n\n return (\n <ProvideComp>\n <Comp />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
996
- },
997
- {
998
- "id": "ProEnum/demos/getEnum.tsx",
999
- "component": "ProEnum",
1000
- "file": "demos/getEnum.tsx",
1001
- "title": "getEnum 在函数中获取数据",
1002
- "note": "",
1003
- "source": "/**\n * title: getEnum 在函数中获取数据\n * desc: |\n * `getEnum` 是 `useEnum` 的函数版，功能完全一致，可在任意函数、事件回调、工具函数中调用，无需在 React 组件内部使用。\n * 枚举数据由 `ProConfigProvider` 初始化时写入存储并同步到内存缓存，`getEnum` 优先从内存读取，无需 `await`。仅在 indexedDB 数据尚未加载到内存时（如页面首次访问），才会返回 Promise。\n */\n\n/* eslint-disable react/no-unescaped-entities */\n// @ts-nocheck\nimport { FC, useEffect } from 'react';\nimport { useSetState } from 'ahooks';\nimport { Space } from 'antd';\nimport { ProEnum } from '@zat-design/sisyphus-react';\nimport ReactJson from 'react-json-view';\nimport ProvideGetEnum from './provideGetEnum';\n\nconst { getEnum } = ProEnum;\n\nconst config = { storage: 'indexedDB' as const, cacheKey: 'getEnum-demo' };\n\nconst Demo: FC = () => {\n const Comp = () => {\n const [state, setState] = useSetState({\n allEnums: {},\n cityArray: [],\n label: '',\n option: {},\n labelValue: '',\n option2: {},\n moreArray: {},\n addressLabels: [],\n addressOptions: [],\n addressLabelsWithCode: [],\n addressOptionsWithCode: [],\n });\n\n useEffect(() => {\n // ProvideGetEnum 已将数据预热到内存缓存，此处 getEnum 均为同步调用，无需 await\n const allEnums = getEnum(config);\n setState({ allEnums });\n\n const [cityOpts] = getEnum({ code: 'city', ...config });\n setState({ cityArray: cityOpts });\n\n const [label, option] = getEnum({ code: 'city', value: 'sh', ...config });\n setState({ label, option });\n\n const [labelValue, option2] = getEnum({\n code: 'city',\n value: 'sh',\n compose: true,\n ...config,\n });\n setState({ labelValue, option2 });\n\n const moreArray = getEnum({ codes: ['status', 'city'], ...config });\n setState({ moreArray });\n\n const [addressLabels, addressOptions] = getEnum({\n code: 'address',\n values: [130000, 130100, 130102],\n ...config,\n });\n setState({ addressLabels, addressOptions });\n\n const [addressLabelsWithCode, addressOptionsWithCode] = getEnum({\n code: 'address',\n values: [130000, 130100, 130102],\n compose: true,\n ...config,\n });\n setState({ addressLabelsWithCode, addressOptionsWithCode });\n }, [setState]);\n\n return (\n <Space direction=\"vertical\">\n <h3>const allEnums = getEnum(config) 不传 code 获取所有枚举数据源</h3>\n <ReactJson src={state.allEnums} collapsed={1} />\n <h3>const [cityArray] = getEnum({'{ code: \"city\" }'}) 取枚举city的Array数据源</h3>\n <ReactJson src={state.cityArray} />\n <h3>\n const [label, option] = getEnum({'{ code: \"city\", value: \"sh\" }'});\n 取枚举city数据源中值为sh的中文名称（用于部分数据回显场景）\n </h3>\n <div>\n <div>\n label: <span style={{ color: 'red' }}> {state.label}</span>\n </div>\n option: <ReactJson src={state.option} />\n </div>\n <h3>\n const [labelValue, option2] = getEnum(\n {'{ code: \"city\", value: \"sh\", compose: true }'}); 取sh的label-value组合值\n </h3>\n <div>\n <div>\n labelValue: <span style={{ color: 'red' }}> {state.labelValue}</span>\n </div>\n option: <ReactJson src={state.option2} />\n </div>\n <h3>\n const moreArray = getEnum({'{ codes: [\"status\", \"city\"] }'}); 同时取多个枚举值\n </h3>\n <div>\n moreArray: <ReactJson src={state.moreArray} />\n </div>\n <h3>\n const [addressLabels, addressOptions] = getEnum(\n {'{ code: \"address\", values: [130000, 130100, 130102] }'}); 根据数组值返回标签数组\n </h3>\n <div>\n <div>\n addressLabels:{' '}\n <span style={{ color: 'red' }}> {JSON.stringify(state.addressLabels)}</span>\n </div>\n <ReactJson src={state.addressLabels} />\n </div>\n <h3>\n const [addressLabelsWithCode, addressOptionsWithCode] = getEnum(\n {'{ code: \"address\", values: [...], compose: true }'}); 返回 value-label 组合值\n </h3>\n <div>\n <div>\n addressLabelsWithCode:{' '}\n <span style={{ color: 'red' }}> {JSON.stringify(state.addressLabelsWithCode)}</span>\n </div>\n <ReactJson src={state.addressLabelsWithCode} />\n </div>\n </Space>\n );\n };\n\n return (\n <ProvideGetEnum>\n <Comp />\n </ProvideGetEnum>\n );\n};\n\nexport default Demo;\n"
1004
- },
1005
- {
1006
- "id": "ProEnum/demos/proTable.tsx",
1007
- "component": "ProEnum",
1008
- "file": "demos/proTable.tsx",
1009
- "title": "结合 Table 使用",
1010
- "note": "",
1011
- "source": "// @ts-nocheck\nimport { FC } from 'react';\nimport { Table } from 'antd';\nimport { ProTable, ProEnum } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide7';\n\nconst { getEnumLabel } = ProEnum;\nconst Copm = () => {\n const columns = [\n {\n title: '来源',\n dataIndex: 'source',\n valueType: 'enumName',\n code: 'ruleScope',\n },\n {\n title: '姓名',\n dataIndex: 'name',\n valueType: 'enumName',\n code: 'tags',\n },\n {\n title: '分类',\n dataIndex: 'category',\n valueType: 'enumName',\n code: 'category',\n },\n ];\n\n const columns1 = [\n {\n title: '来源',\n dataIndex: 'source',\n render: (source) => getEnumLabel('ruleScope', source),\n },\n {\n title: '姓名',\n dataIndex: 'name',\n render: (name) => getEnumLabel('tags', name),\n },\n {\n title: '分类',\n dataIndex: 'category',\n render: (categorys) => getEnumLabel('category', categorys),\n },\n ];\n\n const data = [\n {\n source: 'common',\n name: 'vue',\n category: 'pc',\n id: '1',\n },\n {\n source: 'plan',\n name: 'react',\n category: 'h5',\n id: '2',\n },\n ];\n const data1 = [\n {\n source: 'common',\n name: 'vue',\n category: ['pc'],\n id: '1',\n },\n {\n source: 'plan',\n name: 'react',\n category: ['h5', 'pc'],\n id: '2',\n },\n ];\n return (\n <>\n <p style={{ margin: '16px 0' }}>结合 ProTable 使用</p>\n <ProTable\n tableId=\"extend-render-demo\"\n rowKey=\"id\"\n // @ts-ignore\n columns={columns}\n scroll={{ x: 1000 }}\n dataSource={data}\n pagination={false}\n />\n <p style={{ margin: '16px 0' }}>\n 使用 getEnumLabel 自定义渲染、当 values 为数组时支持多个自动转换\n </p>\n <Table\n tableId=\"extend-render-demo\"\n rowKey=\"id\"\n // @ts-ignore\n columns={columns1}\n scroll={{ x: 1000 }}\n dataSource={data1}\n pagination={false}\n />\n </>\n );\n};\n\nconst Demo: FC = () => {\n return (\n <ProvideComp>\n <Copm />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
1012
- },
1013
- {
1014
- "id": "ProEnum/demos/demo13.tsx",
1015
- "component": "ProEnum",
1016
- "file": "demos/demo13.tsx",
1017
- "title": "数据清洗",
1018
- "note": "",
1019
- "source": "/**\n * title: 数据清洗\n * desc: |\n * 当初始化配置 `clear` 设置为 `true`、默认会对数据进行清洗、根据配置 `fieldNames` 配置指定字段进行缓存、配置 `ignoreCodes` 忽略某些 code 数据清洗\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { ProEnum } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide6';\n\nconst { useEnum } = ProEnum;\n\nconst Copm = () => {\n const [options] = useEnum('tags');\n const [categoryOptions] = useEnum('category');\n\n return (\n <>\n <p style={{ margin: '16px 0' }}>使用 Select 枚举组件</p>\n <ProEnum code=\"tags\" style={{ width: '240px' }} />\n <p style={{ margin: '16px 0' }}>\n 枚举 tags 的 option 中的 name 被清洗了、缓存得到 options 为 {JSON.stringify(options)}\n </p>\n <h4>配置 ignoreCodes 指定部分枚举 code 不进行数据清洗 </h4>\n <p style={{ margin: '16px 0' }}>\n 枚举 category 里面的数据不被清洗、缓存得到 options 为 {JSON.stringify(categoryOptions)}\n </p>\n </>\n );\n};\n\nconst Demo: FC = () => {\n return (\n <ProvideComp>\n <Copm />\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
1020
- },
1021
- {
1022
- "id": "ProEnum/demos/testFrequentEnumTransform.tsx",
1023
- "component": "ProEnum",
1024
- "file": "demos/testFrequentEnumTransform.tsx",
1025
- "title": "频繁枚举",
1026
- "note": "",
1027
- "source": "/**\n * title: 频繁枚举\n * desc: |\n * 测试 frequentEnums 独立 transformResponse 功能，用于高频需要独立处理的枚举数据\n */\n\nimport React from 'react';\nimport { Form } from 'antd';\nimport { ProForm, ProConfigProvider } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\n// 模拟常规枚举数据\nconst mockRegularData = {\n regularTags: [\n { label: '常规标签1', value: 'regular1' },\n { label: '常规标签2', value: 'regular2' },\n ],\n regularStatus: [\n { label: '常规状态1', value: 'status1' },\n { label: '常规状态2', value: 'status2' },\n ],\n};\n\n// 模拟频繁枚举数据\nconst mockFrequentData = {\n dynamicTags: [\n { label: '动态标签1', value: 'dynamic1' },\n { label: '动态标签2', value: 'dynamic2' },\n ],\n tempStatus: [\n { label: '临时状态1', value: 'temp1' },\n { label: '临时状态2', value: 'temp2' },\n ],\n};\n\n// 模拟常规请求函数\nconst mockRegularService = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: mockRegularData,\n });\n }, 1000);\n });\n};\n\n// 模拟频繁枚举请求函数\nconst mockFrequentService = (data: any) => {\n // 第一次调用返回原始数据\n if (!localStorage.testFrequentEnumTransform) {\n console.log(`=== mockFrequentService 第${1}次调用 ===`);\n\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: mockFrequentData,\n });\n }, 1000);\n });\n }\n\n console.log(`=== mockFrequentService 第${2}次调用 ===`);\n\n // 第二次及后续调用返回更新后的数据（模拟缓存更新）\n const updatedFrequentData = {\n ...mockFrequentData,\n dynamicTags: [...mockFrequentData.dynamicTags, { label: '动态标签3', value: 'dynamic3' }],\n };\n\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: updatedFrequentData,\n });\n }, 1500);\n });\n};\n\n// 自定义ProvideComp，使用config配置\nconst CustomProvideComp: React.FC<any> = (props) => {\n // 保持原有的config配置\n const config = {\n ProEnum: {\n cacheKey: 'testFrequentEnumTransform',\n useRequest: {\n service: mockRegularService,\n },\n // 全局transformResponse，处理常规枚举\n transformResponse: (res: any) => {\n console.log('=== 全局 transformResponse 被调用 ===');\n console.log('常规枚举原始数据:', res);\n return res.data;\n },\n // 频繁枚举配置，有独立的transformResponse\n frequentEnums: {\n enums: ['dynamicTags', 'tempStatus'],\n service: mockFrequentService,\n options: {\n defaultParams: [{ codeTableCodes: ['dynamicTags', 'tempStatus'] }],\n },\n // 独立的transformResponse，专门处理频繁枚举\n transformResponse: (res: any) => {\n console.log('=== frequentEnums transformResponse 被调用 ===');\n console.log('频繁枚举原始数据:', res);\n return res.data;\n },\n },\n },\n };\n\n return <ProConfigProvider value={config}>{props.children}</ProConfigProvider>;\n};\n\nconst TestFrequentEnumTransform: React.FC = () => {\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProEnum',\n name: 'regularTags',\n label: '常规标签',\n fieldProps: {\n code: 'regularTags',\n },\n },\n {\n type: 'ProEnum',\n name: 'regularStatus',\n label: '常规状态',\n fieldProps: {\n code: 'regularStatus',\n },\n },\n {\n type: 'ProEnum',\n name: 'dynamicTags',\n label: '动态标签',\n fieldProps: {\n code: 'dynamicTags',\n },\n },\n {\n type: 'ProEnum',\n name: 'tempStatus',\n label: '临时状态',\n fieldProps: {\n code: 'tempStatus',\n },\n },\n ];\n\n return (\n <CustomProvideComp>\n <div style={{ padding: '20px' }}>\n <ProForm form={form} columns={columns} footer={false} />\n </div>\n </CustomProvideComp>\n );\n};\n\nexport default TestFrequentEnumTransform;\n"
1028
- },
1029
- {
1030
- "id": "ProForm/demos/base.tsx",
1031
- "component": "ProForm",
1032
- "file": "demos/base.tsx",
1033
- "title": "基本使用",
1034
- "note": "",
1035
- "source": "import { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('primary');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName',\n required: true,\n tooltip: '提示信息',\n },\n {\n type: 'ProCascader',\n label: '地址',\n names: ['p', 'c', 'a', 'address'],\n required: true,\n span: 16,\n fieldProps: {\n mode: 'address',\n dataSource: addressDataSource,\n },\n },\n {\n type: 'InputNumber',\n label: '算千分数字输入框',\n name: 'InputNumber',\n valueType: 'thousandth', // 输入可千分\n },\n {\n type: 'InputNumber',\n label: '正整数',\n name: 'Number',\n fieldProps: {\n precision: 0,\n min: 1,\n },\n },\n {\n type: 'ProNumberRange',\n label: '范围输入框',\n names: ['min', 'max'],\n valueType: 'thousandth', // 输入可千分\n },\n {\n type: 'Radio',\n label: '单选框',\n name: 'Radio',\n fieldProps: {\n dataSource: [\n { value: '1', label: '类型1' },\n { value: '2', label: '类型3' },\n ],\n },\n },\n {\n type: 'Checkbox',\n label: '多选框',\n name: 'Checkbox',\n fieldProps: {\n dataSource: [\n { value: '1', label: '类型1' },\n { value: '2', label: '类型3' },\n ],\n },\n },\n { type: 'Switch', label: '开关', name: 'switch' },\n {\n type: 'DatePicker',\n label: '日期选择',\n name: 'DatePicker',\n valueType: 'date',\n },\n {\n type: 'RangePicker',\n label: '时间范围选择',\n names: ['start', 'end'],\n valueType: 'dateStartEndTime',\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n ];\n\n const handleStateChange = (val) => {\n setState(val);\n };\n\n return (\n <>\n <Form.Item label=\"查看状态\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"primary\">正常</Radio>\n <Radio value=\"disabled\">禁用</Radio>\n <Radio value=\"view\">查看</Radio>\n </Radio.Group>\n </Form.Item>\n <ProForm\n form={form}\n submitOnEnter\n columns={columns}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n initialValues={{\n switch: true,\n }}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1036
- },
1037
- {
1038
- "id": "ProForm/demos/timeRange.tsx",
1039
- "component": "ProForm",
1040
- "file": "demos/timeRange.tsx",
1041
- "title": "时间范围控制",
1042
- "note": "",
1043
- "source": "import { Form } from 'antd';\nimport React from 'react';\nimport dayjs from 'dayjs';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst TimeRangeDemo: React.FC = () => {\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'DatePicker',\n label: '禁用今天之前的日期',\n name: 'beforeToday',\n valueType: 'date',\n fieldProps: {\n minDate: dayjs(),\n },\n },\n {\n type: 'DatePicker',\n label: '禁用今天之后的日期',\n name: 'afterToday',\n valueType: 'date',\n fieldProps: {\n maxDate: dayjs(),\n },\n },\n {\n type: 'DatePicker',\n label: '仅指定日期区间可选(当前月)',\n name: 'currentMonth',\n valueType: 'date',\n fieldProps: {\n minDate: dayjs().startOf('month'),\n maxDate: dayjs().endOf('month'),\n },\n },\n {\n type: 'DatePicker',\n label: '禁用多个日期区间',\n name: 'multipleRanges',\n valueType: 'date',\n fieldProps: {\n disabledDate: (current) => {\n const day = current.day();\n return day === 0 || day === 6;\n },\n },\n },\n {\n type: 'RangePicker',\n label: '时间范围-禁用今天之前的日期',\n names: ['rangeStart', 'rangeEnd'],\n valueType: 'dateStartEndTime',\n fieldProps: {\n minDate: dayjs(),\n },\n },\n {\n type: 'RangePicker',\n label: '时间范围-禁用今天之后的日期',\n names: ['rangeStart', 'rangeEnd'],\n valueType: 'dateStartEndTime',\n fieldProps: {\n maxDate: dayjs(),\n },\n },\n {\n type: 'RangePicker',\n label: '时间范围-仅可选择7天之内',\n names: ['range7Start', 'range7End'],\n valueType: 'dateStartEndTime',\n fieldProps: {\n disabledDate: (current, { from }) => {\n if (!from) return false;\n return Math.abs(current.diff(from, 'days')) >= 7;\n },\n },\n },\n {\n type: 'RangePicker',\n label: '时间范围-动态日期范围(一个月)',\n names: ['rangeMonthStart', 'rangeMonthEnd'],\n valueType: 'dateStartEndTime',\n fieldProps: {\n disabledDate: (current, { from }) => {\n if (!from) return false;\n return Math.abs(current.diff(from, 'months')) >= 1;\n },\n },\n },\n ];\n\n return <ProForm form={form} columns={columns} span={24} layout=\"vertical\" onFinish={() => {}} />;\n};\n\nexport default TimeRangeDemo;\n"
1044
- },
1045
- {
1046
- "id": "ProForm/demos/column.tsx",
1047
- "component": "ProForm",
1048
- "file": "demos/column.tsx",
1049
- "title": "表单列调整",
1050
- "note": "",
1051
- "source": "import { Form, Radio } from 'antd';\nimport { useState } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst ProFormExpandDemo = () => {\n const [form] = Form.useForm();\n const [num, setNum] = useState<string>('8');\n\n const expandColumns = [\n {\n type: 'RangePicker',\n label: '时间范围选择',\n name: 'RangePicker',\n },\n ];\n\n for (let i = 0; i < 7; i++) {\n expandColumns.push({\n type: 'Input',\n label: `姓名${i + 1}`,\n name: `name${i + 1}`,\n });\n }\n\n return (\n <>\n <div>\n <Form.Item label=\"表单列控制\">\n <Radio.Group onChange={(e) => setNum(e.target.value)} value={num}>\n <Radio value=\"24\">1列</Radio>\n <Radio value=\"12\">2列</Radio>\n <Radio value=\"8\">3列</Radio>\n <Radio value=\"6\">4列</Radio>\n </Radio.Group>\n </Form.Item>\n <ProForm span={num} form={form} columns={expandColumns} />\n </div>\n </>\n );\n};\n\nexport default ProFormExpandDemo;\n"
1052
- },
1053
- {
1054
- "id": "ProForm/demos/labelWidth.tsx",
1055
- "component": "ProForm",
1056
- "file": "demos/labelWidth.tsx",
1057
- "title": "label 宽度设定",
1058
- "note": "",
1059
- "source": "import React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { Form } from 'antd';\n\nconst BaseModule: React.FC = () => {\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: 'label120',\n labelWidth: 120,\n name: 'Input0',\n },\n {\n type: 'Input',\n label: 'label150',\n labelWidth: 150,\n name: 'Input1',\n },\n {\n type: 'Input',\n label: 'label200',\n labelWidth: 200,\n name: 'Input2',\n },\n ];\n\n return (\n <>\n <ProForm\n form={form}\n columns={columns}\n span={24}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} collapsed />\n </>\n );\n};\n\nexport default BaseModule;\n"
1060
- },
1061
- {
1062
- "id": "ProForm/demos/layout.tsx",
1063
- "component": "ProForm",
1064
- "file": "demos/layout.tsx",
1065
- "title": "表单跨列",
1066
- "note": "",
1067
- "source": "import React, { useState } from 'react';\nimport { Form, Radio } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [form] = Form.useForm();\n const [formLayout, setFormLayout] = useState('horizontal');\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '占1/3',\n name: 'typeName',\n },\n {\n type: 'Input',\n label: '占2/3',\n name: 'typeName1',\n span: 16,\n fieldProps: {\n maxLength: 500,\n },\n },\n {\n type: 'TextArea',\n label: '1行占1/3',\n name: 'typeName1',\n disabled: true,\n colProps: {\n span: 8,\n offset: 16,\n pull: 16,\n },\n fieldProps: {\n maxLength: 500,\n },\n },\n {\n type: 'TextArea',\n label: '1行占1/2',\n name: 'typeName2',\n colProps: {\n span: 12,\n offset: 12,\n pull: 12,\n },\n fieldProps: {\n maxLength: 500,\n },\n },\n {\n type: 'TextArea',\n label: '占1',\n name: 'typeName3',\n span: 24,\n fieldProps: {\n maxLength: 500,\n },\n },\n ];\n\n return (\n <>\n <Form.Item label=\"布局状态\">\n <Radio.Group onChange={(e) => setFormLayout(e.target.value)} value={formLayout}>\n <Radio.Button value=\"horizontal\">horizontal</Radio.Button>\n <Radio.Button value=\"vertical\">vertical</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <ProForm layout={formLayout} form={form} columns={columns} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1068
- },
1069
- {
1070
- "id": "ProForm/demos/align.tsx",
1071
- "component": "ProForm",
1072
- "file": "demos/align.tsx",
1073
- "title": "label 对齐方式",
1074
- "note": "",
1075
- "source": "import { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState<'left' | 'right'>('left');\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '输入框1',\n name: 'typeName1',\n required: true,\n },\n {\n type: 'Input',\n label: '输入框2',\n name: 'typeName2',\n },\n {\n type: 'Input',\n label: '输入框3',\n name: 'typeName3',\n required: true,\n },\n {\n type: 'Input',\n label: '输入框4',\n name: 'typeName4',\n },\n {\n type: 'Input',\n label: '输入框5',\n name: 'typeName5',\n required: true,\n },\n {\n type: 'Input',\n label: '输入框6',\n name: 'typeName6',\n },\n ];\n\n const handleStateChange = (val) => {\n setState(val);\n };\n\n return (\n <>\n <Form.Item label=\"label对齐方式\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"left\">左对齐</Radio>\n <Radio value=\"right\">右对齐</Radio>\n </Radio.Group>\n </Form.Item>\n <ProForm form={form} columns={columns} labelAlign={state} footer={false} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1076
- },
1077
- {
1078
- "id": "ProForm/demos/subsidiary.tsx",
1079
- "component": "ProForm",
1080
- "file": "demos/subsidiary.tsx",
1081
- "title": "表单辅助信息",
1082
- "note": "",
1083
- "source": "/* eslint-disable jsx-a11y/anchor-is-valid */\nimport { Form } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('primary');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '保单号',\n name: 'typeName',\n required: true,\n before: <a>左：辅助信息</a>,\n after: <a>右：辅助信息</a>,\n },\n {\n type: 'Input',\n label: '客户姓名',\n name: 'typeName1',\n required: true,\n above: '上：辅助信息',\n extra: '下：辅助信息',\n },\n {\n type: 'Input',\n label: '批单号',\n name: 'typeName2',\n required: true,\n fieldProps: {\n addonBefore: '表单内前缀',\n addonAfter: '表单内尾缀',\n },\n },\n ];\n\n return (\n <>\n <ProForm\n form={form}\n submitOnEnter\n columns={columns}\n initialValues={{\n switch: true,\n }}\n span={24}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} collapsed />\n </>\n );\n};\n\nexport default BaseModule;\n"
1084
- },
1085
- {
1086
- "id": "ProForm/demos/expand.tsx",
1087
- "component": "ProForm",
1088
- "file": "demos/expand.tsx",
1089
- "title": "展开收起",
1090
- "note": "",
1091
- "source": "import { Form } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst ProFormExpandDemo = () => {\n const [form] = Form.useForm();\n\n const columns = [\n { label: '名称1', name: 'name1' },\n { label: '名称2', name: 'name2' },\n { label: '名称3', name: 'name3' },\n { label: '名称4', name: 'name4' },\n { label: '名称5', name: 'name5' },\n { label: '名称6', name: 'name6', fixed: true },\n { label: '名称7', name: 'name7' },\n { label: '名称8', name: 'name8', fixed: true },\n { label: '名称9', name: 'name9' },\n ];\n\n return (\n <div>\n <h3>\n 前{'{expand}'}个和{'{fixed}'}字段不隐藏\n </h3>\n\n <ProForm columns={columns} expand={3} />\n\n <h3>仅{'{fixed}'}字段不隐藏</h3>\n\n <ProForm columns={columns} expand={true} />\n </div>\n );\n};\n\nexport default ProFormExpandDemo;\n"
1092
- },
1093
- {
1094
- "id": "ProForm/demos/validateRecursive.tsx",
1095
- "component": "ProForm",
1096
- "file": "demos/validateRecursive.tsx",
1097
- "title": "递归校验 validateFields recursive",
1098
- "note": "",
1099
- "source": "/**\n * title: 递归校验 validateFields recursive\n * desc: |\n * `form.validateFields(nameList, { recursive: true })` 用于递归校验前缀匹配的字段；同时支持 antd 5.5+ 的 `validateOnly`（仅校验不展示 UI 报错）与 5.11+ 的 `dirty`（校验已操作字段）。下面 demo 中的按钮可分别触发 ProCascader / ProNumberRange / RangePicker 等 names 复合字段的递归校验。\n */\n\nimport { Alert, Button, Form, Space, Typography } from 'antd';\nimport React, { useState } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\ntype ResultState = {\n ok: boolean;\n label: string;\n errorNames?: string[];\n values?: any;\n};\n\nconst ValidateRecursive: React.FC = () => {\n const [form] = Form.useForm();\n const [result, setResult] = useState<ResultState | null>(null);\n\n const columns: ProFormColumnType[] = [\n { type: 'Input', label: '输入框', name: 'typeName', required: true },\n {\n type: 'ProCascader',\n label: '地址',\n names: ['p', 'c', 'a', 'address'],\n required: true,\n span: 16,\n fieldProps: { mode: 'address', dataSource: addressDataSource },\n },\n {\n type: 'ProNumberRange',\n label: '范围输入框',\n names: ['min', 'max'],\n valueType: 'thousandth',\n },\n {\n type: 'RangePicker',\n label: '时间范围选择',\n names: ['start', 'end'],\n valueType: 'dateStartEndTime',\n },\n {\n type: 'FormList',\n name: 'list',\n fieldProps: {\n mode: 'block',\n title: (_record: any, index: number) => `子表单${index + 1}`,\n max: 3,\n toolbarProps: [{ type: 'add' }],\n actionProps: [{ type: 'delete' }],\n columns: [\n { type: 'Input', name: 'name', label: '名称', required: true },\n { type: 'InputNumber', name: 'age', label: '年龄' },\n ],\n },\n },\n ];\n\n const run = async (\n label: string,\n invoker: () => Promise<any>,\n ) => {\n try {\n const values = await invoker();\n setResult({ ok: true, label, values });\n } catch (err: any) {\n const errorNames = (err?.errorFields ?? []).map((f: any) =>\n Array.isArray(f.name) ? f.name.join('.') : String(f.name),\n );\n setResult({ ok: false, label, errorNames });\n }\n };\n\n return (\n <>\n <ProForm form={form} columns={columns} footer={null} />\n <Typography.Paragraph type=\"secondary\" style={{ marginTop: 12 }}>\n 说明：ProForm 的 <code>names: ['p','c','a','address']</code> 会注册 4 个隐藏字段\n <code>p</code>/<code>c</code>/<code>a</code>/<code>address</code>（无规则，仅供 useWatch\n 监听），以及一个 <code>-</code> 拼接的可见复合字段\n <code>p-c-a-address</code>（required 规则挂在这里）。\n sisyphus 的 recursive 用 <code>_</code> 前缀匹配，因此{' '}\n <code>validateFields(['p'], {`{ recursive: true }`})</code> 仅命中无规则的隐藏字段，会\n \"通过且无报错\"。要触发地址必填，请用按钮 2/3。\n </Typography.Paragraph>\n <Space wrap style={{ marginTop: 12 }}>\n <Button onClick={() => run('全量校验 validateFields()', () => form.validateFields())}>\n 全量校验\n </Button>\n <Button\n danger\n onClick={() =>\n run(\n \"误导性：validateFields(['p'], { recursive: true }) — 仅命中隐藏字段\",\n () => form.validateFields(['p'], { recursive: true }),\n )\n }\n >\n ProCascader recursive（误导）\n </Button>\n <Button\n type=\"primary\"\n onClick={() =>\n run(\n \"正确：validateFields(['p-c-a-address']) — 直接命中复合 key\",\n () => form.validateFields(['p-c-a-address']),\n )\n }\n >\n 地址复合名直接校验\n </Button>\n <Button\n type=\"primary\"\n onClick={() =>\n run(\n \"正确：validateFields([['list', 0, 'name']]) — antd 原生数组 namePath\",\n () => form.validateFields([['list', 0, 'name']]),\n )\n }\n >\n FormList 深度 namePath\n </Button>\n <Button\n onClick={() =>\n run(\n \"ProNumberRange recursive: validateFields(['min'], { recursive: true })\",\n () => form.validateFields(['min'], { recursive: true }),\n )\n }\n >\n ProNumberRange recursive\n </Button>\n <Button\n onClick={() =>\n run(\n \"RangePicker recursive: validateFields(['start'], { recursive: true })\",\n () => form.validateFields(['start'], { recursive: true }),\n )\n }\n >\n RangePicker recursive\n </Button>\n <Button\n onClick={() =>\n run(\"typeName 单字段: validateFields(['typeName'])\", () =>\n form.validateFields(['typeName']),\n )\n }\n >\n typeName 单字段\n </Button>\n <Button\n onClick={() =>\n run('validateOnly: 不展示 UI 报错', () =>\n form.validateFields(undefined, { validateOnly: true } as any),\n )\n }\n >\n validateOnly\n </Button>\n <Button\n onClick={() =>\n run('dirty: 校验已操作字段', () =>\n form.validateFields(undefined, { dirty: true } as any),\n )\n }\n >\n dirty\n </Button>\n </Space>\n {result && (\n <Alert\n style={{ marginTop: 12 }}\n type={result.ok ? 'success' : 'error'}\n message={result.label}\n description={\n result.ok\n ? `校验通过，values=${JSON.stringify(result.values)}`\n : `校验失败，errorFields=${JSON.stringify(result.errorNames)}`\n }\n />\n )}\n </>\n );\n};\n\nexport default ValidateRecursive;\n"
1100
- },
1101
- {
1102
- "id": "ProForm/demos/groupDemo_names.tsx",
1103
- "component": "ProForm",
1104
- "file": "demos/groupDemo_names.tsx",
1105
- "title": "组合表单",
1106
- "note": "",
1107
- "source": "/**\n * title: 组合表单\n * desc: |\n * `names配置是固定模式，不支持动态配置，单需要支持输入其中一项不做完整性校验，可以配置labelRequired: false`\n */\n\nimport { Space, Form } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst GroupDemo: React.FC = () => {\n const [data, setData] = useState();\n const [form] = Form.useForm();\n\n return (\n <Space orientation=\"vertical\">\n <h3>紧凑布局表单</h3>\n <ProForm\n span={24}\n form={form}\n columns={[\n {\n type: 'Group',\n label: '紧凑表单',\n names: ['compact1', 'compact2'],\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'Input',\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'Group',\n label: '紧凑表单带分隔',\n names: ['separator1', 'separator2'],\n fieldProps: {\n space: {\n compact: true,\n separator: '~',\n },\n children: [\n {\n type: 'Input',\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n ]}\n onFinish={(values) => {\n setData(values);\n }}\n footer={false}\n />\n <h3>间隔组合表单</h3>\n <ProForm\n span={24}\n form={form}\n columns={[\n {\n type: 'Group',\n label: '间隔表单',\n names: [\n ['policy', 'input1'],\n ['policy', 'input2'],\n ],\n fieldProps: {\n space: {\n size: 12, // 表单间隔\n },\n children: [\n {\n type: 'Input',\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'Group',\n label: '宽度调整',\n names: ['width1', 'width2'],\n fieldProps: {\n space: {\n size: 12, // 表单间隔\n },\n children: [\n {\n type: 'Input',\n fieldProps: {\n style: {\n width: 100,\n },\n },\n },\n {\n type: 'Input',\n fieldProps: {\n style: {\n width: 160,\n },\n },\n },\n ],\n },\n },\n {\n type: 'Group',\n label: '自定义标题',\n names: ['title1', 'title2'],\n fieldProps: {\n space: {\n size: 12, // 表单间隔\n },\n children: [\n {\n type: 'Input',\n before: <>标题1</>,\n fieldProps: {\n style: {\n width: 100,\n },\n },\n },\n {\n type: 'Input',\n before: <>标题2</>,\n fieldProps: {\n style: {\n width: 160,\n },\n },\n },\n ],\n },\n },\n {\n type: 'Group',\n label: '年龄范围',\n names: ['min', 'type1', 'max', 'type2'],\n rules: [\n { required: true },\n {\n validator: (rules, value) => {\n const [certType, certNo] = value;\n if (certType === 'I' && certNo?.length !== 5) {\n return Promise.reject(new Error('模拟校验：身份证号码必须为5位'));\n }\n return Promise.resolve();\n },\n },\n ],\n initialValue: [null, '2', null, '2'],\n fieldProps: {\n space: {\n compact: true,\n separator: '~',\n separatorIndex: [1],\n },\n children: [\n {\n type: 'InputNumber',\n fieldProps: {\n min: 0,\n max: 999999999,\n },\n },\n {\n type: 'ProEnum',\n fieldProps: {\n style: {\n width: 80,\n },\n showCodeName: false,\n allowClear: false,\n dataSource: [\n { label: '天', value: '1' },\n { label: '周岁', value: '2' },\n ],\n },\n },\n {\n type: 'InputNumber',\n fieldProps: {\n min: 0,\n max: 999999999,\n },\n },\n {\n type: 'ProEnum',\n fieldProps: {\n style: {\n width: 80,\n },\n showCodeName: false,\n allowClear: false,\n dataSource: [\n { label: '天', value: '1' },\n { label: '周岁', value: '2' },\n ],\n },\n },\n ],\n },\n },\n ]}\n footer={false}\n onFinish={() => setData(form.getFieldsValue(true))}\n />\n <h3>组合表单校验</h3>\n <ProForm\n span={24}\n columns={[\n {\n type: 'Group',\n label: '证件类型',\n names: ['certType', 'certNo'],\n rules: [\n { required: true },\n {\n validator: (rules, value) => {\n const [certType, certNo] = value;\n if (certType === 'I' && certNo?.length !== 5) {\n return Promise.reject(new Error('模拟校验：身份证号码必须为5位'));\n }\n return Promise.resolve();\n },\n },\n ],\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'Select',\n fieldProps: {\n style: {\n width: '60%',\n }, // 可以设置表单宽度占比，默认100%占一半\n dataSource: [\n {\n label: '身份证',\n value: 'I',\n },\n ],\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'Group',\n label: '单独校验每项',\n names: ['input1', 'input2'],\n rules: [\n {\n validator: (rules, value) => {\n const [input1, input2] = value || [];\n\n if (input1 && input1.length <= 5) {\n return Promise.reject(new Error('间隔表单第1项长度需要大于5位'));\n }\n if (input2 && input2.length <= 8) {\n return Promise.reject(new Error('间隔表单第2项长度需要大于8位'));\n }\n return Promise.resolve();\n },\n },\n ],\n labelRequired: false,\n fieldProps: {\n space: {\n size: 12, // 表单间隔\n },\n children: [\n {\n type: 'Input',\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n ]}\n form={form}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <ReactJson src={data} />\n </Space>\n );\n};\n\nexport default GroupDemo;\n"
1108
- },
1109
- {
1110
- "id": "ProForm/demos/groupDemo_name.tsx",
1111
- "component": "ProForm",
1112
- "file": "demos/groupDemo_name.tsx",
1113
- "title": "组合表单",
1114
- "note": "",
1115
- "source": "/**\n * title: 组合表单\n * desc: |\n * `4.0.0 版本支持，像正常写表单一样管理你的表单数据，无需配置names属性，每个表单可以单独管理，用于更灵活的联动场景，Group组件的children配置不支持再配置names的表单，只能是name的简单表单配置`\n */\n\nimport { Space, Form } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst ComparisonDemo: React.FC = () => {\n const [flexibleData, setFlexibleData] = useState<any>();\n const [form] = Form.useForm();\n\n return (\n <Space orientation=\"vertical\" style={{ width: '100%' }}>\n <h3>新灵活模式（无names属性）</h3>\n <ProForm\n span={24}\n form={form}\n columns={[\n {\n type: 'Group',\n label: '邮件发送',\n labelRequired: false,\n fieldProps: {\n space: {\n align: 'center',\n },\n children: [\n {\n type: 'Radio',\n name: 'Radio',\n fieldProps: {\n dataSource: [\n { value: '1', label: '手机号' },\n { value: '2', label: '邮箱' },\n ],\n onFieldChange: (value, record, { form }) => {\n if (value === '1') {\n form.setFieldsValue({ phone: '' });\n } else {\n form.setFieldsValue({ email: '' });\n }\n },\n },\n },\n {\n type: 'Input',\n name: 'phone',\n rules: [\n {\n type: 'isPhone',\n message: '请输入正确的电话',\n },\n ] as any,\n show: ({ Radio }) => {\n return Radio === '1';\n },\n fieldProps: {\n placeholder: '请输入电话',\n },\n },\n {\n type: 'Input',\n name: 'email',\n rules: [\n {\n type: 'isEmail',\n message: '请输入正确的邮箱',\n },\n ] as any,\n show: ({ Radio }) => Radio === '2',\n fieldProps: {\n placeholder: '请输入邮箱',\n },\n },\n ],\n },\n },\n ]}\n onFinish={(values) => {\n console.log('新模式提交值:', values);\n setFlexibleData(values);\n }}\n // footer={false}\n />\n\n <h4>新灵活模式数据结构</h4>\n <ReactJson src={flexibleData || {}} />\n <div style={{ marginTop: 8, fontSize: 14, color: '#666' }}>\n 数据以对象形式存储: {`{certType: 'I', certNo: '12345'}`}\n </div>\n </Space>\n );\n};\n\nexport default ComparisonDemo;\n"
1116
- },
1117
- {
1118
- "id": "ProForm/demos/container.tsx",
1119
- "component": "ProForm",
1120
- "file": "demos/container.tsx",
1121
- "title": "容器组件",
1122
- "note": "",
1123
- "source": "/**\n * title: 容器组件\n * desc: |\n * `用于表单需要归类，收起等场景`\n */\n\nimport { Form } from 'antd';\nimport React, { useState } from 'react';\nimport { HeartTwoTone } from '@ant-design/icons';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProCollapse',\n fieldProps: {\n title: '折叠容器1',\n children: [\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName1',\n required: true,\n },\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName2',\n required: true,\n },\n ],\n },\n },\n {\n type: 'ProCollapse',\n fieldProps: {\n title: '容器2',\n level: '2',\n children: [\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName3',\n },\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName4',\n },\n ],\n },\n },\n {\n type: 'Container',\n fieldProps: {\n container: (\n <div style={{ marginBottom: 16 }}>\n <HeartTwoTone twoToneColor=\"#eb2f96\" />\n 自定义容器\n </div>\n ),\n children: [\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName5',\n },\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName6',\n },\n ],\n },\n },\n ];\n\n return (\n <div style={{ padding: 20 }}>\n <ProForm\n form={form}\n span={8}\n columns={columns}\n requiredOnView={false}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} />\n </div>\n );\n};\n\nexport default BaseModule;\n"
1124
- },
1125
- {
1126
- "id": "ProForm/demos/formList.tsx",
1127
- "component": "ProForm",
1128
- "file": "demos/formList.tsx",
1129
- "title": "FormList",
1130
- "note": "",
1131
- "source": "import { Form, Radio } from 'antd';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport type { FormListMode } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n const [mode, setMode] = useState<FormListMode>('block');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n const formListRef = useRef(); // 使用内部函数\n\n const columns: ProFormColumnType[] = [\n {\n type: 'FormList',\n name: 'list',\n fieldProps: {\n // span: 12, // 控制所有内部表单元素的span\n ref: formListRef,\n draggable: true,\n towCollapse: true,\n mode,\n title: (record, index) => `标题${index + 1}`, // 块模式可定义标题\n max: 5,\n actionProps: [\n { type: 'moveUp' },\n { type: 'moveDown' },\n {\n type: 'delete',\n needConfirm: true,\n },\n ], // 每条数据的操作配置\n toolbarProps: [\n {\n type: 'add',\n onClick: () => {\n return { name: '123123' };\n },\n },\n ], // 左下角操作配置\n columns: [\n { type: 'Input', name: 'name', label: '文本', required: true },\n { type: 'InputNumber', name: 'age', label: '数字' },\n {\n type: 'DatePicker',\n label: '日期选择',\n name: 'DatePicker',\n },\n { type: 'Input', name: 'name1', label: '文本', required: true },\n {\n type: 'ProCascader',\n names: ['p', 'c', 'a', 'address'],\n label: '地址',\n span: 16,\n fieldProps: {\n mode: 'address',\n dataSource: addressDataSource,\n },\n },\n ],\n },\n },\n ];\n\n useEffect(() => {\n // 设置表单数据 驱动渲染\n form.setFieldsValue({\n list: [\n { name: '张三1', lick: 'boll' },\n { name: '张三2', lick: 'boll' },\n { name: '张三3', lick: 'boll' },\n ],\n });\n }, []);\n\n const handleValuesChange = (val) => {\n const values = form.getFieldsValue();\n setData(values);\n };\n\n return (\n <>\n <Form.Item>\n <Radio.Group value={mode} onChange={(e) => setMode(e.target.value)}>\n <Radio value=\"block\">块模式</Radio>\n <Radio value=\"line\">行模式</Radio>\n </Radio.Group>\n </Form.Item>\n <h3>基本功能</h3>\n <ProForm\n form={form}\n footer={false}\n columns={columns}\n onFinish={(values) => {\n setData(values);\n }}\n onValuesChange={(values) => {\n handleValuesChange(values);\n }}\n />\n <h3>自定义按钮</h3>\n <ProForm\n form={form}\n footer={false}\n initialValues={{ customList: [{}] }}\n columns={[\n {\n type: 'FormList',\n name: 'customList',\n fieldProps: {\n mode,\n columns: [\n { label: '名称', name: 'name' },\n { label: '名称1', name: 'name1' },\n { label: '名称2', name: 'name2' },\n ],\n toolbarProps: [\n {\n type: 'link',\n actionType: 'add',\n label: '自定义新增按钮',\n onClick: (record, { namePath, operation, form }) => {\n console.warn('🚀 ~~> props', record, namePath, operation);\n },\n },\n ],\n },\n },\n ]}\n />\n\n <h3>简易模式</h3>\n <ProForm\n footer={false}\n initialValues={{ customList: [{}] }}\n columns={[\n {\n type: 'FormList',\n name: 'customList',\n label: '简易模式',\n fieldProps: {\n min: 1,\n draggable: true,\n mode: 'less',\n columns: [{ name: 'name' }],\n actionProps: [{ type: 'delete' }],\n },\n },\n ]}\n />\n\n <h4>数据源</h4>\n <ReactJson src={data} collapsed />\n </>\n );\n};\n\nexport default BaseModule;\n"
1132
- },
1133
- {
1134
- "id": "ProForm/demos/startEndFormList.tsx",
1135
- "component": "ProForm",
1136
- "file": "demos/startEndFormList.tsx",
1137
- "title": "FormList 首尾操作配置",
1138
- "note": "",
1139
- "source": "import { Form, Radio } from 'antd';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport type { FormListMode } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n const [mode, setMode] = useState<FormListMode>('block');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n const formListRef = useRef(); // 使用内部函数\n\n const columns: ProFormColumnType[] = [\n {\n type: 'FormList',\n name: 'list',\n fieldProps: {\n // span: 12, // 控制所有内部表单元素的span\n ref: formListRef,\n // draggable: true,\n mode,\n title: (record, index) => `${index + 1}`, // 块模式可定义标题\n max: 5,\n // 新增功能演示\n hideStartEndActionProps: [true, true], // 隐藏首尾的 ActionButton\n titlePosition: 'left', // block 模式下标题在左侧\n actionProps: [\n {\n type: 'moveUp',\n },\n {\n type: 'moveDown',\n },\n {\n type: 'delete',\n needConfirm: true,\n },\n ], // 每条数据的操作配置\n toolbarProps: [\n {\n type: 'add',\n addIndex: (record, { form, namePath, index }) => {\n return index - 1;\n },\n onClick: () => {\n return { name: '工具栏新增' };\n },\n },\n ], // 左下角操作配置\n columns: [\n { type: 'Input', name: 'name', label: '文本', required: true },\n { type: 'InputNumber', name: 'age', label: '数字' },\n {\n type: 'DatePicker',\n label: '日期选择',\n name: 'DatePicker',\n },\n ],\n },\n },\n ];\n\n useEffect(() => {\n // 设置表单数据 驱动渲染\n form.setFieldsValue({\n list: [\n { name: '张三1', lick: 'boll' },\n { name: '张三2', lick: 'boll' },\n { name: '张三3', lick: 'boll' },\n ],\n });\n }, []);\n\n const handleValuesChange = (val) => {\n const values = form.getFieldsValue();\n setData(values);\n };\n\n return (\n <div style={{ padding: 20 }}>\n <h3>固定首尾，指定添加位置</h3>\n <ProForm\n form={form}\n footer={false}\n columns={columns}\n onFinish={(values) => {\n setData(values);\n }}\n onValuesChange={(values) => {\n handleValuesChange(values);\n }}\n />\n <ReactJson src={data} />\n </div>\n );\n};\n\nexport default BaseModule;\n"
1140
- },
1141
- {
1142
- "id": "ProForm/demos/filterFormList.tsx",
1143
- "component": "ProForm",
1144
- "file": "demos/filterFormList.tsx",
1145
- "title": "过滤 FormList 下拉值",
1146
- "note": "",
1147
- "source": "import { ProForm } from '@zat-design/sisyphus-react';\nimport { Form } from 'antd';\nimport React from 'react';\n\nconst BaseModule: React.FC = () => {\n const [form] = Form.useForm();\n\n return (\n <>\n <ProForm\n footer={false}\n form={form}\n columns={[\n {\n type: 'FormList',\n name: 'customList',\n label: '简易模式',\n fieldProps: {\n draggable: true,\n mode: 'less',\n columns: [\n {\n type: 'ProSelect',\n name: 'name',\n fieldProps: {\n filterInList: true,\n dataSource: [\n { label: '张三', value: '1' },\n { label: '李四', value: '2' },\n { label: '王五', value: '3' },\n ],\n },\n },\n ],\n },\n },\n ]}\n />\n </>\n );\n};\n\nexport default BaseModule;\n"
1148
- },
1149
- {
1150
- "id": "ProForm/demos/time.tsx",
1151
- "component": "ProForm",
1152
- "file": "demos/time.tsx",
1153
- "title": "年、季度、月、周选择器",
1154
- "note": "",
1155
- "source": "import { Form } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'DatePicker',\n label: '时间选择',\n name: 'time',\n valueType: 'date',\n },\n {\n type: 'DatePicker',\n label: '年选择',\n name: 'year',\n fieldProps: {\n picker: 'year',\n },\n },\n {\n type: 'DatePicker',\n label: '季度选择',\n name: 'quarter',\n fieldProps: {\n picker: 'quarter',\n },\n },\n {\n type: 'DatePicker',\n label: '月选择',\n name: 'month',\n fieldProps: {\n picker: 'month',\n },\n },\n {\n type: 'DatePicker',\n label: '周选择',\n name: 'week',\n fieldProps: {\n picker: 'week',\n },\n },\n ];\n\n return (\n <>\n <ProForm form={form} columns={columns} onFinish={(values) => setData(values)} />\n <h4>数据源</h4>\n <ReactJson src={data} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1156
- },
1157
- {
1158
- "id": "ProForm/demos/types.tsx",
1159
- "component": "ProForm",
1160
- "file": "demos/types.tsx",
1161
- "title": "内置组件列表",
1162
- "note": "所有的内置组件类型包含以下 Checkbox 多选框 DatePicker 时间选择器 Input 输入框 InputNumber 数字输入框 Radio 单选框 RangePicker 范围时间选择器 Switch 开关 TextArea 文本输入框 仅时间选择器 TimePicker 步进器 Stepper ProAddressBar 地址栏 ProCombination 组合组件，支持 select 与 input 的随机组合 ProModalSelect 弹框选择 ProNumberRange 范围输入框 ProTimeLimit 证件有限期 ProSelect 异步加强选择器 ProEnum 枚举下拉选择器 ProTree 树 ProTreeSelect 下拉选择树，demo 参考 ProEnum",
1163
- "source": "import { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProConfigProvider } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getMockUserPageList } from './data/mock';\nimport { addressDataSource } from './data/enum';\nimport ProTreeModalDataList from '../../ProTreeModal/demos/data/datasource';\nimport { treeRequest } from '../../ProTreeModal/demos/data/mock';\n\nconst serviceName = () =>\n new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n status: 200,\n });\n }, 1000);\n });\n\nconst BaseModule: React.FC = () => {\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProModalSelect',\n name: 'holderCode',\n label: '投保人姓名',\n span: 12,\n fieldProps: {\n title: '选择投保人',\n placeholder: '请输入投保人姓名',\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n optionRender: ({ code, name }) => `${code}-${name}`,\n configOption: {\n useRequest: {\n service: getMockUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n policyId: 12,\n },\n ],\n },\n },\n formColumns: [\n {\n type: 'Input',\n name: 'holderName',\n label: '姓名',\n labelWidth: 40,\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n labelWidth: 70,\n },\n ],\n tableProps: {\n rowKey: 'code',\n columns: [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ],\n },\n },\n },\n },\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName',\n },\n {\n type: 'ProCascader',\n label: '地址',\n name: 'ProAddressBar',\n span: 16,\n fieldProps: {\n mode: 'address',\n fieldNames: { label: 'name', value: 'code' },\n dataSource: addressDataSource,\n },\n },\n {\n type: 'InputNumber',\n label: '数字输入框',\n name: 'InputNumber',\n },\n {\n type: 'ProNumberRange',\n label: '范围输入框',\n name: 'ProNumberRange',\n },\n {\n type: 'Radio',\n label: '单选框',\n name: 'Radio',\n fieldProps: {\n fieldNames: { label: 'name', value: 'code' },\n dataSource: [\n { code: '1', name: '类型1' },\n { code: '2', name: '类型3' },\n ],\n },\n },\n {\n type: 'Checkbox',\n label: '多选框',\n name: 'Checkbox',\n fieldProps: {\n fieldNames: { label: 'name', value: 'code' },\n dataSource: [\n { code: '1', name: '类型1' },\n { code: '2', name: '类型3' },\n ],\n },\n },\n { type: 'Switch', label: '开关', name: 'switch' },\n {\n type: 'TimePicker',\n label: '时间选择',\n name: 'timepicker',\n },\n {\n type: 'ProSelect',\n label: '异步下拉选择器',\n name: 'ProSelect',\n fieldProps: {\n useRequest: {\n service: serviceName,\n options: {\n manual: true,\n },\n },\n },\n },\n {\n type: 'ProSelect',\n label: '静态下拉选择器',\n name: 'ProSelect2',\n fieldProps: {\n fieldNames: {\n label: 'address',\n value: 'code',\n }, // 转换dataSource值\n dataSource: [\n { address: '上海', code: 'sh' },\n { address: '北京', code: 'bj' },\n { address: '武汉', code: 'wh' },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '日期选择',\n name: 'DatePicker',\n },\n {\n type: 'RangePicker',\n label: '时间范围选择',\n name: 'RangePicker',\n },\n { type: 'ProTimeLimit', label: '证件有效期', name: 'ProTimeLimit' },\n { type: 'ProRangeLimit', label: '证件有效范围', name: 'ProRangeLimit' },\n {\n type: 'Group',\n label: '组合组件',\n names: ['Group1', 'Group2'],\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'Select',\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: 'I',\n },\n ],\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'SwitchCheckbox',\n name: 'SwitchCheckbox',\n span: 8,\n fieldProps: {\n label: '符合投保资料要求',\n },\n },\n {\n type: 'ProCascader',\n name: 'ProCascader',\n label: '级联下拉',\n fieldProps: {\n dataSource: addressDataSource,\n },\n },\n {\n type: 'ProTreeModal',\n label: '弹框 List 模式',\n name: 'proTreeModalList',\n span: 8,\n fieldProps: {\n dataSource: ProTreeModalDataList,\n mode: 'list',\n },\n },\n {\n type: 'ProTreeModal',\n label: '弹框Tree 模式',\n name: 'proTreeModalTree',\n span: 8,\n fieldProps: {\n placeholder: '请输入名字进行搜索',\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n {\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n span: '24',\n fieldProps: {\n title: '树一级标题',\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n tags: ['一级', '二级', '三级'],\n },\n },\n {\n type: 'TextArea',\n label: '文本域',\n name: 'TextArea',\n span: '24',\n fieldProps: {\n maxLength: 500,\n },\n },\n ];\n\n const [state, setState] = useState('primary');\n\n const handleStateChange = (val) => {\n setState(val);\n };\n\n return (\n <ProConfigProvider\n value={{\n ProEnum: {\n dataSource: {\n tags: [\n {\n label: 'React',\n value: '1',\n },\n {\n label: 'Vue',\n value: '2',\n },\n {\n label: 'Angule',\n value: '3',\n },\n ],\n },\n },\n }}\n >\n <>\n <Form.Item label=\"查看状态\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"primary\">正常</Radio>\n <Radio value=\"disabled\">禁用</Radio>\n <Radio value=\"view\">查看</Radio>\n </Radio.Group>\n </Form.Item>\n <ProForm\n form={form}\n columns={columns}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} collapsed />\n </>\n </ProConfigProvider>\n );\n};\n\nexport default BaseModule;\n"
1164
- },
1165
- {
1166
- "id": "ProForm/demos/linkage.tsx",
1167
- "component": "ProForm",
1168
- "file": "demos/linkage.tsx",
1169
- "title": "组件联动（推荐）",
1170
- "note": "**防抖控制** 当使用 show, disabled, required, rules, fieldProps, desensitization 等回调函数时，可以通过 shouldUpdateDebounce 属性设置字段值更新时的防抖时间（默认 200 毫秒）。设置为 0 时禁用防抖，适用于需要实时响应的场景。在高频变动的表单场景下，合理设置防抖时间可以优化性能。",
1171
- "source": "/* eslint-disable no-console */\nimport { Form } from 'antd';\nimport React, { useEffect } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst Linkage: React.FC = () => {\n const [form] = Form.useForm();\n\n const columns = [\n { span: 24, component: <h3>动态控制表单组件</h3> },\n {\n label: '证件类型枚举源',\n name: 'certEnum',\n type: 'ProSelect',\n fieldProps: {\n dataSource: [\n { label: '证件类型枚举源1', value: '1' },\n { label: '证件类型枚举源2', value: '2' },\n ],\n },\n },\n {\n label: '证件类型',\n name: 'certType',\n type: 'ProSelect',\n fieldProps: (record) => {\n return {\n dataSource:\n record.certEnum === '1'\n ? [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n ]\n : [\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n };\n },\n },\n { span: 24, component: <h3>动态控制显隐&必填</h3> },\n {\n label: '控制显隐',\n name: 'switch1',\n type: 'Switch',\n },\n {\n label: '输入框1',\n name: 'showControl',\n type: 'Input',\n required: (record) => {\n return record.switch1;\n },\n show: (record) => {\n return record.switch1;\n },\n },\n {\n component: <h3>自定义组件显示</h3>,\n show: (values) => {\n return values.switch1;\n },\n },\n { span: 24, component: <h3>动态控制disabled</h3> },\n {\n label: '控制disabled',\n name: 'switch2',\n type: 'Switch',\n },\n {\n label: '输入框2',\n name: 'input',\n type: 'Input',\n disabled: (record) => {\n return record.switch2;\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n certEnum: '1',\n switch1: true,\n switch2: true,\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={columns} footer={false} />\n </>\n );\n};\n\nexport default Linkage;\n"
1172
- },
1173
- {
1174
- "id": "ProForm/demos/formWatch.tsx",
1175
- "component": "ProForm",
1176
- "file": "demos/formWatch.tsx",
1177
- "title": "组件联动 hook",
1178
- "note": "",
1179
- "source": "import { Form, Space } from 'antd';\nimport React from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [form] = Form.useForm();\n\n // 1) 路径数组形式：监听多个字段，返回对应字段值的对象\n const formValues = ProForm.useWatch(['number', 'certType'], form, 500);\n\n // 2) selector 函数形式（与 antd 5.12+ 一致）：接收所有表单值，返回派生值\n // selector 结果用 isEqual 深比较，结果未变则不触发渲染\n const certTypeLabel = ProForm.useWatch<string>((values) => {\n const map: Record<string, string> = {\n I: '身份证',\n J: '军官证',\n K: '户口本',\n O: '医保卡',\n };\n return values?.certType ? map[values.certType] || '未知' : '未选择';\n }, form);\n\n const columns: ProFormColumnType[] = [\n {\n type: 'InputNumber',\n label: '千分数字输入框',\n name: 'number',\n valueType: 'thousandth', // 输入可千分\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n {\n type: 'Radio',\n label: '单选框',\n name: 'Radio',\n fieldProps: {\n dataSource: [\n { value: '1', label: '禁用' },\n { value: '2', label: '不禁用' },\n ],\n },\n },\n ];\n\n return (\n <Space orientation=\"vertical\">\n <ProForm form={form} columns={columns} footer={false} />\n <h4>数据源（路径数组形式）</h4>\n <ReactJson src={formValues} />\n <h4>selector 派生值（证件类型名称）</h4>\n <div>{certTypeLabel}</div>\n </Space>\n );\n};\n\nexport default BaseModule;\n"
1180
- },
1181
- {
1182
- "id": "ProForm/demos/formWatchDebounce.tsx",
1183
- "component": "ProForm",
1184
- "file": "demos/formWatchDebounce.tsx",
1185
- "title": "组件联动 hook",
1186
- "note": "",
1187
- "source": "/**\n * title: 组件联动 hook\n * desc: |\n * 联动增加防抖\n * 对于监听高频变动的值, useWatch 的刷新次数过多会导致性能问题, 可以配置第三个参数启用防抖\n */\n\nimport { Form, Space } from 'antd';\nimport React from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [form] = Form.useForm();\n\n // 增加300ms的防抖\n const formValues = ProForm.useWatch(['number', 'certType'], form, 300);\n\n const columns: ProFormColumnType[] = [\n {\n type: 'InputNumber',\n label: '千分数字输入框',\n name: 'number',\n valueType: 'thousandth', // 输入可千分\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n {\n type: 'Radio',\n label: '单选框',\n name: 'Radio',\n fieldProps: {\n dataSource: [\n { value: '1', label: '禁用' },\n { value: '2', label: '不禁用' },\n ],\n },\n },\n ];\n\n return (\n <Space orientation=\"vertical\">\n <ProForm form={form} columns={columns} footer={false} />\n <h4>数据源</h4>\n <ReactJson src={formValues} />\n </Space>\n );\n};\n\nexport default BaseModule;\n"
1188
- },
1189
- {
1190
- "id": "ProForm/demos/formGroup.tsx",
1191
- "component": "ProForm",
1192
- "file": "demos/formGroup.tsx",
1193
- "title": "form 实例共享",
1194
- "note": "",
1195
- "source": "/**\n * title: form 实例共享\n * desc: |\n * 通过设置`ProForm`的`formKey`属性，被`ProConfigProvider`包裹后，组件内部可通过`ProForm.useContextForms()`获取到不同 form 的示例用于跨组件与页面的表单交互\n */\n\nimport { ProForm, FormsProvider } from '@zat-design/sisyphus-react';\nimport { Button, Card, Space } from 'antd';\n\nconst Holder = () => {\n // 获取当前上下文中的所有表单实例\n const forms = ProForm.useContextForms();\n // { holderForm: FormInstance, insuranceForm: FormInstance }\n\n const [holderForm] = ProForm.useForm({ formKey: 'holderForm' });\n const [insuranceForm] = ProForm.useForm({ formKey: 'insuranceForm' });\n\n const setInsurance = () => {\n const holderValues = holderForm.getFieldsValue();\n insuranceForm.setFieldsValue(holderValues);\n };\n\n return (\n <>\n <ProForm\n footer={false}\n form={holderForm}\n columns={[\n { label: '投保人姓名', name: 'name' },\n { type: 'InputNumber', label: '投保人年龄', name: 'age' },\n ]}\n />\n <Button type=\"primary\" onClick={setInsurance}>\n 同步给被保人\n </Button>\n </>\n );\n};\n\nconst Insured = () => {\n // 获取当前上下文中的所有表单实例\n const forms = ProForm.useContextForms();\n // { holderForm: FormInstance, insuranceForm: FormInstance }\n\n const [insuranceForm] = ProForm.useForm({ formKey: 'insuranceForm' });\n const [holderForm] = ProForm.useForm({ formKey: 'holderForm' });\n\n const getHolder = () => {\n const holderValues = holderForm.getFieldsValue();\n insuranceForm.setFieldsValue(holderValues);\n };\n\n return (\n <>\n <ProForm\n form={insuranceForm}\n footer={false}\n columns={[\n { label: '被保人姓名', name: 'name' },\n { type: 'InputNumber', label: '被保人年龄', name: 'age' },\n ]}\n />\n <Button type=\"primary\" onClick={getHolder}>\n 获取投保人信息\n </Button>\n </>\n );\n};\n\nconst Wrapper = () => {\n // 使用FormsProvider 包裹子表单\n // 圈定表单实例共享范围\n return (\n <FormsProvider>\n <Space orientation=\"vertical\" size={16}>\n <Card title=\"投保人信息\">\n <Holder />\n </Card>\n <Card title=\"被保险人信息\">\n <Insured />\n </Card>\n </Space>\n </FormsProvider>\n );\n};\n\nexport default Wrapper;\n"
1196
- },
1197
- {
1198
- "id": "ProForm/demos/confirm.tsx",
1199
- "component": "ProForm",
1200
- "file": "demos/confirm.tsx",
1201
- "title": "二次确认",
1202
- "note": "",
1203
- "source": "import { Form, message, Select } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nlet int = 0;\nconst service = () => {\n int += 1;\n return Promise.resolve(int % 2);\n};\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('primary');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Switch',\n label: '开启二次确认',\n name: 'switch',\n initialValue: false,\n confirm: { title: '自定义标题', content: '自定义提示信息内容' },\n },\n {\n type: 'ProSelect',\n name: 'certType',\n label: '条件开启',\n confirm: (value, values, { form }) => !!values.switch,\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n {\n component: <Select />,\n label: '支持自定义组件',\n name: 'certType1',\n confirm: { title: '自定义组件的二次确认' },\n fieldProps: {\n options: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n {\n type: 'ProSelect',\n name: 'asyncCertType',\n label: '调用接口',\n confirm: async (value, values, { form, preValue }) => {\n if (!preValue) return false;\n\n const res = await service();\n if (res) {\n return {\n title: '确认修改?',\n content: '接口调用成功, 是否确认修改?',\n onOk: () => {\n console.log('修改成功');\n },\n };\n }\n message.error('接口调用失败, 不做值变更');\n },\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n ];\n\n return (\n <>\n <ProForm\n form={form}\n submitOnEnter\n columns={columns}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} collapsed />\n </>\n );\n};\n\nexport default BaseModule;\n"
1204
- },
1205
- {
1206
- "id": "ProForm/demos/debounce.tsx",
1207
- "component": "ProForm",
1208
- "file": "demos/debounce.tsx",
1209
- "title": "表单防抖",
1210
- "note": "",
1211
- "source": "import { Form } from 'antd';\nimport React from 'react';\nimport { useSetState } from 'ahooks';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Debounce: React.FC = () => {\n const [{ input, textarae, inpurtNumber }, setState] = useSetState({\n input: '',\n textarae: '',\n inpurtNumber: null,\n });\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '输入框',\n name: 'input',\n fieldProps: {\n debounceWait: 500,\n onFieldChange: (e) => {\n setState({\n input: e.target.value,\n });\n },\n },\n },\n {\n type: 'TextArea',\n label: '文本域',\n name: 'textarae',\n fieldProps: {\n debounceWait: 500,\n onFieldChange: (e) => {\n setState({\n textarae: e.target.value,\n });\n },\n },\n },\n {\n type: 'InputNumber',\n label: '数字输入框',\n name: 'inpurtNumber',\n fieldProps: {\n precision: 0,\n min: 1,\n debounceWait: 500,\n onFieldChange: (value) => {\n setState({\n inpurtNumber: value,\n });\n },\n },\n },\n ];\n\n return (\n <>\n <ProForm form={form} columns={columns} />\n <div>输入框: {input}</div>\n <div>文本域: {textarae}</div>\n <div>数字输入框: {inpurtNumber}</div>\n </>\n );\n};\n\nexport default Debounce;\n"
1212
- },
1213
- {
1214
- "id": "ProForm/demos/names.tsx",
1215
- "component": "ProForm",
1216
- "file": "demos/names.tsx",
1217
- "title": "多 name",
1218
- "note": "",
1219
- "source": "/* eslint-disable no-console */\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport dayjs from 'dayjs';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { Form } from 'antd';\nimport { dataSource } from './data/reigon';\n\nconst BaseModule: React.FC = () => {\n const [contrastForm] = Form.useForm();\n const [form] = Form.useForm(); // 需要使用ProForm的useForm\n const [contrastState, setContrastState] = useState({});\n const [state, setState] = useState({});\n\n const contrastColumns: ProFormColumnType[] = [\n {\n type: 'ProCascader',\n label: '地址选择',\n name: 'region',\n fieldProps: {\n mode: 'address',\n dataSource,\n },\n },\n {\n type: 'RangePicker',\n label: '日期选择',\n name: 'date',\n },\n {\n type: 'ProNumberRange',\n label: '范围输入框',\n name: 'rangeNum',\n },\n ];\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Group',\n label: '组合组件',\n names: [\n ['test', 'certType'],\n ['test', 'certNo'],\n ],\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'Select',\n fieldProps: {\n dataSource: [\n {\n label: '身份证',\n value: 'I',\n },\n ],\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'ProCascader',\n label: '地址选择',\n names: ['province', 'city', 'area', 'address'],\n fieldProps: {\n mode: 'address',\n dataSource,\n },\n },\n {\n type: 'RangePicker',\n label: '日期选择',\n names: ['startTime', 'endTime'],\n getValueProps: (values) => {\n const [start, end] = values || [];\n\n return { value: [start ? dayjs(start) : null, end ? dayjs(end) : null] };\n },\n normalize: (values) => {\n const [start, end] = values || [];\n return [start?.format(), end?.format()];\n },\n },\n {\n type: 'ProNumberRange',\n label: '范围输入框',\n names: ['mix', 'max'],\n },\n ];\n\n const handleUpdateValue1 = () => {\n setContrastState(contrastForm.getFieldsValue());\n };\n const handleEcho1 = () => {\n contrastForm.setFieldsValue({ cert: ['1', '1231231'] });\n setContrastState(contrastForm.getFieldsValue());\n };\n\n const handleUpdateValue = () => {\n setState(form.getFieldsValue());\n };\n const handleEcho = () => {\n form.setFieldsValue({ test: { certType: '1', certNo: '1231231' } });\n setState(form.getFieldsValue());\n };\n\n return (\n <>\n <h3>不使用names</h3>\n <ProForm\n form={contrastForm}\n columns={contrastColumns}\n okText=\"获取\"\n onOk={handleUpdateValue1}\n cancelText=\"回显\"\n onCancel={handleEcho1}\n />\n <ReactJson src={contrastState} />\n <br />\n <h3>使用names</h3>\n {/* 表单域中的使用方法, 仅供参考 */}\n <ProForm.Provider\n onFormChange={(...rest) => {\n console.log('🚀 onFormChange ~~> rest', rest);\n }}\n >\n <ProForm\n name=\"names\"\n form={form}\n columns={columns}\n okText=\"获取\"\n onOk={handleUpdateValue}\n cancelText=\"回显\"\n onCancel={handleEcho}\n onValuesChange={(...rest) => {\n console.log('🚀 onValuesChange ~~> rest', rest);\n }}\n />\n\n <ReactJson src={state} />\n </ProForm.Provider>\n </>\n );\n};\n\nexport default BaseModule;\n"
1220
- },
1221
- {
1222
- "id": "ProForm/demos/valueType.tsx",
1223
- "component": "ProForm",
1224
- "file": "demos/valueType.tsx",
1225
- "title": "valueType 转换",
1226
- "note": "",
1227
- "source": "/**\n * title: valueType 转换\n * desc: |\n * 通过 valueType 的设置快速完成以下表单的转换时间表单：DatePicker, RangePicker 数字表单：InputNumber, ProNumberRanger 开关表单：Switch\n */\n\n/* eslint-disable react/no-unescaped-entities */\nimport { Form, Space, Radio } from 'antd';\nimport React from 'react';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [{ data1, data2, data3, data4, state }, setState] = useSetState({\n data1: {},\n data2: {},\n data3: {},\n data4: {},\n state: 'primary',\n });\n const [form1] = Form.useForm();\n const [form2] = Form.useForm();\n const [form3] = Form.useForm();\n const [form4] = Form.useForm();\n\n const handleStateChange = (val) => {\n setState({ state: val });\n };\n\n return (\n <Space orientation=\"vertical\" size=\"middle\" style={{ display: 'flex' }}>\n <Form.Item label=\"查看状态\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"primary\">正常</Radio>\n <Radio value=\"disabled\">禁用</Radio>\n <Radio value=\"view\">查看</Radio>\n </Radio.Group>\n </Form.Item>\n <h3>\n DatePicker值转换，设置toCSTString: true可返回ISOstring（date）格式 ,默认返回'YYYY-MM-DD'格式\n </h3>\n <ProForm\n form={form1}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n columns={[\n {\n type: 'DatePicker',\n label: '年月日',\n name: 'date',\n valueType: 'date',\n },\n {\n type: 'DatePicker',\n label: '年月日时分秒',\n name: 'dateTime',\n valueType: 'dateTime',\n },\n {\n type: 'DatePicker',\n label: '年月日 00:00:00',\n name: 'dateStartTime',\n valueType: 'dateStartTime',\n },\n {\n type: 'DatePicker',\n label: '年月日 23:59:59',\n name: 'dateEndTime',\n valueType: 'dateEndTime',\n },\n ]}\n onFinish={(values) => {\n setState({\n data1: values,\n });\n }}\n />\n <ReactJson src={data1} />\n <h3>\n RangePicker值转换，设置toCSTString: true可返回CSTString（date）格式 ,\n 默认返回'YYYY-MM-DD'格式\n </h3>\n <ProForm\n form={form2}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n columns={[\n {\n type: 'RangePicker',\n label: '时间范围',\n name: 'RangePicker1',\n valueType: 'date',\n toCSTString: true,\n },\n {\n type: 'RangePicker',\n label: '多name平铺',\n names: ['form', 'to'],\n valueType: 'dateTime',\n toCSTString: true,\n },\n {\n type: 'RangePicker',\n label: '多name嵌套对象',\n names: [\n ['time', 'form'],\n ['time', 'to'],\n ],\n valueType: 'dateStartEndTime',\n toCSTString: true,\n },\n ]}\n onFinish={(values) => {\n setState({\n data2: values,\n });\n }}\n />\n <ReactJson src={data2} />\n <h3>InputNumber & ProNumberRange 值转换</h3>\n <ProForm\n form={form3}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n columns={[\n {\n type: 'InputNumber',\n label: '千分位输入框',\n name: 'thousandth',\n valueType: 'thousandth',\n },\n {\n type: 'InputNumber',\n label: '百分比%输入框',\n name: 'percentage',\n valueType: 'percentage',\n fieldProps: {\n precision: 4,\n },\n },\n {\n type: 'InputNumber',\n label: '千分比‰输入框',\n name: 'permillage',\n valueType: 'permillage',\n fieldProps: {\n precision: 4,\n },\n },\n {\n type: 'ProNumberRange',\n label: '千分位输入框',\n names: ['form', 'to'],\n valueType: 'thousandth',\n fieldProps: {\n precision: 2,\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n data3: values,\n });\n }}\n />\n <ReactJson src={data3} />\n <h3>\n Switch & SwitchCheckbox值转换, 可通过switchValue: ['Y', 'N']设置需要转换的值，默认为YN, Y:\n true, N: false\n </h3>\n <ProForm\n form={form4}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n columns={[\n {\n type: 'Switch',\n label: 'YN转换',\n name: 'Switch1',\n valueType: 'switch',\n },\n {\n type: 'Switch',\n label: '10转换',\n name: 'Switch2',\n valueType: 'switch',\n switchValue: [1, 0],\n },\n {\n type: 'SwitchCheckbox',\n name: 'SwitchCheckbox',\n valueType: 'switch',\n switchValue: [2, 1],\n fieldProps: {\n label: 'SwitchCheckbox',\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n data4: values,\n });\n }}\n />\n <ReactJson src={data4} />\n </Space>\n );\n};\n\nexport default BaseModule;\n"
1228
- },
1229
- {
1230
- "id": "ProForm/demos/convertValue.tsx",
1231
- "component": "ProForm",
1232
- "file": "demos/convertValue.tsx",
1233
- "title": "表单数据转化",
1234
- "note": "",
1235
- "source": "/**\n * title: 表单数据转化\n * desc: |\n * 很多时候表单需要的数据和后端需要的数据之间不能完全匹配，通过 normalize 和 getValueProps 两个 API 来处理这种情况\n * > - normalize 组件内部值转成外部值\n * > - getValueProps 外部值转成组件内部值\n */\n\nimport React from 'react';\nimport ReactJson from 'react-json-view';\nimport { useSetState } from 'ahooks';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { Divider } from 'antd';\n\nconst BaseModule: React.FC = () => {\n const [form1] = ProForm.useForm();\n const [form2] = ProForm.useForm();\n const [{ data1, data2 }, setState] = useSetState({\n data1: {\n switchBoolean: true,\n switchYN: 'Y',\n },\n data2: {\n addressArray: ['1', '1-1', '1-1-1'],\n addressObject: {\n province: '1',\n city: '1-1',\n county: '1-1-1',\n },\n province: '1',\n city: '1-1',\n county: '1-1-1',\n },\n });\n\n /** 转换switchYN */\n const transformSwitch = (keys: [any, any] = ['Y', 'N']) => {\n const [key1, key2] = keys;\n return {\n // 组件内部值转成外部值 true => Y\n normalize: (value: boolean) => {\n return value ? key1 : key2;\n },\n // 外部值转成组件内部值 Y => true\n getValueProps: (value: any) => {\n const checked = value === key1;\n return {\n checked,\n value,\n };\n },\n };\n };\n\n /** 转换Object */\n const transformObject = (names: [string, string, string]) => {\n const [name1, name2, name3] = names;\n return {\n // 组件内部值转成外部值 ['1', '1-1', '1-1-1'] => {province: '1', 'city': '1-1', 'county': '1-1-1'}\n normalize: (value) => {\n if (!value) {\n return {};\n }\n return {\n [name1]: value?.[0] ?? null,\n [name2]: value?.[1] ?? null,\n [name3]: value?.[2] ?? null,\n };\n },\n // 外部值转成组件内部值\n getValueProps: (value: { [key: string]: string }) => {\n if (!value) {\n return {};\n }\n return {\n value: [value?.[name1] ?? null, value?.[name2] ?? null, value?.[name3] ?? null],\n };\n },\n };\n };\n\n return (\n <>\n <Divider plain>基本类型数据转换</Divider>\n <ProForm\n form={form1}\n initialValues={data1}\n columns={[\n {\n type: 'Switch',\n label: 'Boolean开关',\n name: 'switchBoolean',\n },\n {\n type: 'Switch',\n label: 'YN开关',\n name: 'switchYN',\n ...transformSwitch(['Y', 'N']),\n },\n ]}\n onFinish={(values) => {\n setState({\n data1: values,\n });\n }}\n />\n <ReactJson src={data1} />\n <Divider plain>引用类型数据转换</Divider>\n <ProForm\n form={form2}\n initialValues={data2}\n columns={[\n {\n type: 'ProCascader',\n label: '数组地址',\n name: 'addressArray',\n fieldProps: {\n dataSource: [\n {\n label: '浙江省',\n value: '1',\n children: [\n {\n label: '杭州市',\n value: '1-1',\n children: [\n {\n label: '西湖区',\n value: '1-1-1',\n },\n ],\n },\n ],\n },\n ],\n },\n },\n {\n type: 'ProCascader',\n label: '对象地址',\n name: 'addressObject',\n ...transformObject(['province', 'city', 'county']),\n fieldProps: {\n dataSource: [\n {\n label: '浙江省',\n value: '1',\n children: [\n {\n label: '杭州市',\n value: '1-1',\n children: [\n {\n label: '西湖区',\n value: '1-1-1',\n },\n ],\n },\n ],\n },\n ],\n },\n },\n {\n type: 'ProCascader',\n label: '平铺对象地址',\n names: ['province', 'city', 'county'],\n fieldProps: {\n dataSource: [\n {\n label: '浙江省',\n value: '1',\n children: [\n {\n label: '杭州市',\n value: '1-1',\n children: [\n {\n label: '西湖区',\n value: '1-1-1',\n },\n ],\n },\n ],\n },\n ],\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n data2: values,\n });\n }}\n />\n <ReactJson src={data2} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1236
- },
1237
- {
1238
- "id": "ProForm/demos/rules.tsx",
1239
- "component": "ProForm",
1240
- "file": "demos/rules.tsx",
1241
- "title": "内置校验规则",
1242
- "note": "",
1243
- "source": "import { Form } from 'antd';\nimport React, { useMemo } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { validate, regExp, validateNameMap } from '@zat-design/utils';\n\nconst BaseModule: React.FC = () => {\n const [form] = Form.useForm();\n const ruleType = Form.useWatch('ruleType', form);\n\n const validator = useMemo(() => {\n const list = [...Object.keys(validate), ...Object.keys(regExp)];\n const ruleOptions = [];\n list.forEach((key) => {\n if (ruleOptions.findIndex((item) => item.value === key) === -1) {\n ruleOptions.push({\n label: validateNameMap[key] ? `${key}-${validateNameMap[key]}` : key,\n value: key,\n });\n }\n });\n return ruleOptions;\n }, [validate, regExp]);\n\n useMemo(() => {\n if (ruleType) {\n const ruleStr = String(validate[ruleType] || regExp[ruleType]);\n form.setFieldValue('ruleStr', ruleStr);\n return;\n }\n form.setFieldValue('ruleStr', '');\n }, [ruleType]);\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Select',\n label: '可选规则列表',\n name: 'ruleType',\n fieldProps: {\n dataSource: validator,\n },\n },\n {\n label: '测试规则输入框',\n name: 'text',\n rules: [{ type: ruleType }], // 用法\n },\n {\n type: 'TextArea',\n label: '规则内容',\n name: 'ruleStr',\n span: 24,\n fieldProps: {\n maxLength: 500,\n },\n },\n ];\n\n return <ProForm form={form} columns={columns} okText=\"校验\" />;\n};\n\nexport default BaseModule;\n"
1244
- },
1245
- {
1246
- "id": "ProForm/demos/hiddenForm.tsx",
1247
- "component": "ProForm",
1248
- "file": "demos/hiddenForm.tsx",
1249
- "title": "收集隐藏表单",
1250
- "note": "",
1251
- "source": "/**\n * title: 收集隐藏表单\n * desc: |\n * 通过 hiddenNames 创建关联的隐藏表单，供表单收集与信息提交\n */\n\nimport { Form } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n hiddenNames: ['certNo', 'sex', 'name'],\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I', name: '张1', sex: '男', certNo: '1234' },\n { label: '军官证', value: 'J', name: '张2', sex: '女', certNo: '2345' },\n { label: '户口本', value: 'K', name: '张3', sex: '男', certNo: '3456' },\n { label: '医保卡', value: 'O', name: '张4', sex: '女', certNo: '4567' },\n ],\n onFieldChange: (e, record, { option }) => {\n form.setFieldsValue({ ...option });\n },\n },\n },\n ];\n\n return (\n <>\n <ProForm\n form={form}\n columns={columns}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1252
- },
1253
- {
1254
- "id": "ProForm/demos/character.tsx",
1255
- "component": "ProForm",
1256
- "file": "demos/character.tsx",
1257
- "title": "内置组件的特性",
1258
- "note": "",
1259
- "source": "/**\n * title: 内置组件的特性\n * desc: |\n * InputNumber: `range` 支持开区间和闭区间的写法, 如: `'(1, 10]'`, 表示可以输入 `1 < n ≤ 10`, 支持单端点写法 `'(1,)'` `'(,10]'` \n * _注: 为了得到闭区间时的边界值, 使用 range 必须传入 precision 字段_\n */\n\nimport React from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '../components/render/propsType';\n\nconst Character: React.FC = () => {\n const columns: ProFormColumnType[] = [\n {\n type: 'InputNumber',\n name: 'InputNumber',\n label: '数字输入框的range',\n fieldProps: {\n precision: 2,\n range: '(1, 10]',\n placeholder: '可输入数字范围: 1 < n ≤ 10',\n },\n },\n ];\n\n return <ProForm columns={columns} footer={false} />;\n};\n\nexport default Character;\n"
1260
- },
1261
- {
1262
- "id": "ProForm/demos/check.tsx",
1263
- "component": "ProForm",
1264
- "file": "demos/check.tsx",
1265
- "title": "必填校验",
1266
- "note": "",
1267
- "source": "/**\n * title: 必填校验\n * desc: |\n * 必填校验提示\n */\n\nimport { Form } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst CheckDemo = () => {\n const [form] = Form.useForm();\n\n return (\n <>\n <div>\n <ProForm\n form={form}\n columns={[\n {\n type: 'Input',\n label: '姓名',\n name: 'name',\n required: true,\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n required: true,\n },\n {\n type: 'ProSelect',\n label: '性别',\n name: 'sex',\n required: true,\n fieldProps: {\n dataSource: [\n {\n label: '男',\n value: '1',\n },\n {\n label: '女',\n value: '2',\n },\n ],\n },\n },\n ]}\n />\n </div>\n </>\n );\n};\n\nexport default CheckDemo;\n"
1268
- },
1269
- {
1270
- "id": "ProForm/demos/check1.tsx",
1271
- "component": "ProForm",
1272
- "file": "demos/check1.tsx",
1273
- "title": "必填校验",
1274
- "note": "",
1275
- "source": "/**\n * title: 必填校验\n * desc: |\n * 常用校验：1. 快捷必填校验通过设置 required 2. 组合自定义校验通过 rules 与 validator 进行设置 3. 快捷校验，如【手机号，邮箱，身份证号，链接 URL】通过 type 进行设置\n */\n\nimport { Form } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst CheckDemo = () => {\n const [form] = Form.useForm();\n\n return (\n <>\n <div>\n <ProForm\n form={form}\n columns={[\n {\n type: 'Input',\n label: '姓名',\n name: 'name1',\n rules: [{ required: true }, { max: 5, message: '最多允许录入5个字符' }],\n },\n {\n type: 'ProNumberRange',\n label: '自定义校验',\n name: 'InputRange',\n rules: [\n { required: true },\n {\n validator: (_: any, value: any) => {\n const hasMin = typeof value?.min === 'number';\n const hasMax = typeof value?.max === 'number';\n if ((hasMin && hasMax) || (!hasMin && !hasMax)) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('请输入范围值'));\n },\n },\n ],\n },\n {\n type: 'Input',\n label: '手机号',\n name: 'phone',\n rules: [\n { required: true },\n {\n type: 'isPhone',\n },\n ],\n },\n {\n type: 'Input',\n label: '邮箱',\n name: 'email',\n rules: [\n { required: true },\n {\n type: 'isEmail',\n },\n ],\n },\n {\n type: 'Input',\n label: '身份证号',\n name: 'certNo',\n rules: [\n { required: true },\n {\n type: 'isIdCard',\n },\n ],\n },\n {\n type: 'Input',\n label: '链接URL',\n name: 'url',\n rules: [\n { required: true },\n {\n type: 'isUrl',\n },\n ],\n },\n ]}\n />\n </div>\n </>\n );\n};\n\nexport default CheckDemo;\n"
1276
- },
1277
- {
1278
- "id": "ProForm/demos/check2.tsx",
1279
- "component": "ProForm",
1280
- "file": "demos/check2.tsx",
1281
- "title": "必填校验",
1282
- "note": "",
1283
- "source": "/**\n * title: 必填校验\n * desc: |\n * 联动校验场景：当证件类型为身份证类型时，身份证号必填\n */\n\nimport { Form } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst certTypes = [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n];\n\nconst CheckDemo = () => {\n const [form] = Form.useForm();\n\n const values = ProForm.useWatch(['certType'], form);\n\n return (\n <>\n <div>\n <ProForm\n form={form}\n columns={[\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n fieldProps: {\n dataSource: certTypes, // 证件类型数据源\n },\n },\n {\n type: 'Input',\n label: '身份证号',\n name: 'certNo1',\n rules: [\n { required: values.certType === 'I' },\n {\n validator: (_: any, value: any) => {\n const isIdCard = (val: string) => /(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/.test(val);\n if (isIdCard(value) || !value) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('请输入正确的证件号码'));\n },\n },\n ],\n },\n ]}\n />\n </div>\n </>\n );\n};\n\nexport default CheckDemo;\n"
1284
- },
1285
- {
1286
- "id": "ProForm/demos/trim.tsx",
1287
- "component": "ProForm",
1288
- "file": "demos/trim.tsx",
1289
- "title": "空格&大小写",
1290
- "note": "",
1291
- "source": "import { Form } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('primary');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '移除输入框空格',\n name: 'typeName',\n trim: true,\n },\n {\n type: 'Input',\n label: '大写输入框',\n name: 'typeName1',\n upperCase: true,\n },\n ];\n\n return (\n <>\n <ProForm\n form={form}\n span={12}\n columns={columns}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1292
- },
1293
- {
1294
- "id": "ProForm/demos/customComponent.tsx",
1295
- "component": "ProForm",
1296
- "file": "demos/customComponent.tsx",
1297
- "title": "自定义组件",
1298
- "note": "",
1299
- "source": "/**\n * title: 自定义组件\n * desc: |\n * 自定义组件遵循[antd 表单元素约定](https://ant.design/components/form-cn/#components-form-demo-customized-form-controls)\n * > - 提供受控属性 `value` 或其它与 `valuePropName` 的值同名的属性。\n * > - 提供 `onChange` 事件或 `trigger` 的值同名的事件。\n */\n\nimport React from 'react';\nimport { Button, Input, InputProps, notification, Form, Space } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\ninterface Props extends Omit<InputProps, 'onChange'> {\n value?: string;\n onChange?: (val: string) => void;\n}\nconst Custom1: React.FC<Props> = (props) => {\n const { value, onChange, placeholder } = props;\n\n return (\n <Space.Compact>\n <Input style={{ width: 'calc(100% - 110px)' }} placeholder={placeholder} value={value} />\n <Button\n style={{ width: '110px' }}\n onClick={() => onChange(Math.random().toString(16).substring(2, 8))}\n >\n 随机生成值\n </Button>\n </Space.Compact>\n );\n};\n\nconst CustomComponent: React.FC = () => {\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n label: '自定义组件1',\n name: 'custom1',\n span: 12,\n component: <Custom1 placeholder=\"随机值\" />,\n },\n ];\n\n const handleOk = () => {\n form.submit();\n };\n const handleCancel = () => {\n form.resetFields();\n };\n\n return (\n <ProForm\n form={form}\n onFinish={(values) => {\n notification.open({\n message: 'onFinish',\n description: JSON.stringify(values),\n });\n }}\n columns={columns}\n okText=\"确认\"\n cancelText=\"取消\"\n onOk={handleOk}\n onCancel={handleCancel}\n />\n );\n};\n\nexport default CustomComponent;\n"
1300
- },
1301
- {
1302
- "id": "ProForm/demos/footer.tsx",
1303
- "component": "ProForm",
1304
- "file": "demos/footer.tsx",
1305
- "title": "自定义 Footer",
1306
- "note": "",
1307
- "source": "import React, { useState } from 'react';\nimport { Button, Form, Space } from 'antd';\nimport { AimOutlined, CloseOutlined } from '@ant-design/icons';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport ReactJson from 'react-json-view';\n\nconst FooterDemo: React.FC = () => {\n const [form] = Form.useForm();\n const [state, setState] = useState({});\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: 'type生成',\n name: 'typeName',\n fieldProps: { className: 'input-class' },\n },\n {\n type: 'Input',\n label: 'type生成',\n name: 'typeName',\n fieldProps: { className: 'input-class' },\n },\n ];\n\n const Footer = () => {\n return (\n <Space>\n <Button>提交</Button>\n <Button>保存</Button>\n <Button>伤情轨迹</Button>\n </Space>\n );\n };\n\n const handleOk = () => {\n form.submit();\n };\n const handleCancel = () => {\n form.resetFields();\n };\n\n return (\n <>\n <h3>传入参数修改footer按钮</h3>\n <ProForm\n form={form}\n onFinish={(values) => {\n setState(values);\n }}\n columns={columns}\n okText=\"确认\"\n cancelText=\"取消\"\n onOk={handleOk}\n onCancel={handleCancel}\n expand={1}\n footer={{\n okButtonProps: { icon: <AimOutlined /> },\n cancelButtonProps: { icon: <CloseOutlined /> },\n }}\n />\n <h3>传入自定义footer</h3>\n <ProForm\n form={form}\n expand={1}\n onFinish={(values) => {\n setState(values);\n }}\n columns={columns}\n footer={<Footer />}\n />\n <ReactJson src={state} />\n </>\n );\n};\n\nexport default FooterDemo;\n"
1308
- },
1309
- {
1310
- "id": "ProForm/demos/view.tsx",
1311
- "component": "ProForm",
1312
- "file": "demos/view.tsx",
1313
- "title": "自定义查看",
1314
- "note": "",
1315
- "source": "import { Form, Input } from 'antd';\nimport dayjs from 'dayjs';\nimport { useEffect } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst CustomComponent = (props) => {\n return <Input {...props} />;\n};\n\nconst ProFormViewDemo = () => {\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '姓名',\n name: 'name',\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n },\n {\n component: <CustomComponent />, // 自定义组件,viewRender实现视图模式\n viewRender: (value) => {\n return value;\n },\n label: '自定义组件',\n name: 'customComponent',\n },\n {\n type: 'InputNumber',\n label: '金额千分位',\n name: 'amount',\n viewType: 'thousandth',\n },\n {\n type: 'InputNumber',\n label: '数字百分比(%)',\n name: 'percent',\n viewType: 'percent',\n },\n {\n type: 'InputNumber',\n label: '数字千分比(‰)',\n name: 'perMill',\n viewType: 'permillage',\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n name: '柳智敏',\n birthday: dayjs('2000-04-12'),\n customAntdComponent: '自定义表单组件',\n customComponent: '自定义组件',\n amount: 1000000,\n percent: 0.8,\n perMill: 0.08,\n });\n }, []);\n\n return (\n <>\n <ProForm form={form} columns={columns} isView footer={false} />\n </>\n );\n};\n\nexport default ProFormViewDemo;\n"
1316
- },
1317
- {
1318
- "id": "ProForm/demos/globalConfig.tsx",
1319
- "component": "ProForm",
1320
- "file": "demos/globalConfig.tsx",
1321
- "title": "全局默认值配置",
1322
- "note": "",
1323
- "source": "import React from 'react';\nimport { Form } from 'antd';\nimport { ProForm, ProConfigProvider } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst Linkage: React.FC = () => {\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n label: '全局maxLength:10',\n name: 'input',\n type: 'Input',\n initialValue: '1234567890',\n },\n {\n label: '全局placeholder',\n name: 'select',\n type: 'ProSelect',\n },\n {\n label: '全局maxLength:200',\n name: 'textArea',\n type: 'TextArea',\n span: 24,\n },\n ];\n\n // 给Input组件设置最大长度10 给TextArea组件设置最大长度200\n const initialConfig = {\n Input: { maxLength: 10 },\n TextArea: { maxLength: 200 },\n Select: { placeholder: '请选择', allowClear: true },\n };\n\n return (\n <ProConfigProvider value={initialConfig}>\n <ProForm form={form} footer={false} columns={columns} />\n </ProConfigProvider>\n );\n};\n\nexport default Linkage;\n"
1324
- },
1325
- {
1326
- "id": "ProForm/demos/fieldNames.tsx",
1327
- "component": "ProForm",
1328
- "file": "demos/fieldNames.tsx",
1329
- "title": "fieldNames",
1330
- "note": "",
1331
- "source": "import React from 'react';\nimport { ProConfigProvider, ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst FieldNames: React.FC = () => {\n const dataSource = [\n { code: '1', name: '选项一' },\n { code: '2', name: '选项二' },\n ];\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Select',\n label: 'Select',\n name: 'select',\n fieldProps: {\n dataSource,\n },\n },\n {\n type: 'Checkbox',\n label: 'Checkbox',\n name: 'Checkbox',\n fieldProps: {\n dataSource,\n },\n },\n {\n type: 'Radio',\n label: 'Radio',\n name: 'radio',\n fieldProps: {\n dataSource,\n },\n },\n ];\n\n return <ProForm columns={columns} footer={false} />;\n};\n\nconst RootWrapper = () => {\n const config = {\n cacheKey: 'fieldNames',\n Select: { fieldNames: { label: 'name', value: 'code' } },\n Radio: { fieldNames: { label: 'name', value: 'code' } },\n Checkbox: { fieldNames: { label: 'name', value: 'code' } },\n };\n\n return (\n <ProConfigProvider value={config}>\n <FieldNames />\n </ProConfigProvider>\n );\n};\n\nexport default RootWrapper;\n"
1332
- },
1333
- {
1334
- "id": "ProForm/demos/originalValues.tsx",
1335
- "component": "ProForm",
1336
- "file": "demos/originalValues.tsx",
1337
- "title": "标记有改变的值",
1338
- "note": "",
1339
- "source": "/**\n * title: 标记有改变的值\n * desc: |\n * 表单值与 `originalValues` 不一致会被标记\n */\n\nimport dayjs from 'dayjs';\nimport { Input, Select, Space } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm, ProConfigProvider } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst CustomComponent = (props) => {\n const { value = [], onChange, isView } = props;\n const [val1, val2] = value;\n\n const dataSource = [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ];\n\n if (isView) {\n return (\n <Space>\n {dataSource.find((item) => item.value === val1)?.label} - {val2}\n </Space>\n );\n }\n\n const handleChange = (val, index) => {\n const _value = [...value];\n _value[index] = val;\n onChange(_value);\n };\n\n return (\n <Space.Compact>\n <Select\n value={val1}\n options={dataSource}\n onChange={(val) => {\n handleChange(val, 0);\n }}\n />\n <Input\n value={val2}\n onChange={(e) => {\n handleChange(e.target.value, 1);\n }}\n />\n </Space.Compact>\n );\n};\n\nconst OriginalValues: React.FC = () => {\n const [data, setData] = useState({});\n\n const columns: ProFormColumnType[] = [\n { type: 'Input', label: '输入框', name: 'input', initialValue: '新增' },\n {\n type: 'ProSelect',\n label: '下拉框',\n name: 'select',\n fieldProps: {\n tooltip: true,\n allowClear: true,\n dataSource: [{ value: 'select', label: 'label' }],\n },\n },\n {\n type: 'Checkbox',\n label: '多选框',\n name: 'checkBox',\n fieldProps: {\n fieldNames: { label: 'name', value: 'code' },\n dataSource: [\n { code: '1', name: '类型1' },\n { code: '2', name: '类型2' },\n ],\n },\n },\n {\n type: 'ProEnum',\n label: '是否',\n name: 'isY',\n fieldProps: {\n type: 'Group',\n dataSource: [\n { value: 'Y', label: '是' },\n { value: 'N', label: '否' },\n ],\n },\n },\n {\n type: 'Switch',\n label: '开关',\n name: 'switch',\n },\n {\n type: 'DatePicker',\n label: '日期-自定义比较',\n name: 'datePicker',\n onDiff: (originVal, value) => {\n if (dayjs.isDayjs(originVal) && dayjs.isDayjs(value)) {\n return originVal.format('YYYY-MM-DD') === value.format('YYYY-MM-DD') ? 'same' : 'changed';\n }\n if ([null, undefined].includes(originVal) && ![null, undefined].includes(value)) {\n return 'add';\n }\n if ([null, undefined].includes(originVal) && [null, undefined].includes(value)) {\n return 'same';\n }\n return 'changed';\n },\n },\n { type: 'RangePicker', label: '起止日期选择', name: 'rangePicker' },\n {\n type: 'TextArea',\n label: '文本域',\n name: 'textArea',\n fieldProps: {\n maxLength: 100,\n },\n },\n {\n type: 'ProCascader',\n label: '地址',\n names: ['p', 'c', 'a', 'address'],\n span: 16,\n fieldProps: {\n mode: 'address',\n dataSource: addressDataSource,\n },\n },\n {\n component: <CustomComponent />,\n name: 'customComponent',\n label: '自定义组件渲染',\n // 用来渲染气泡内的初始值\n viewRender: (val = [], ...rest) => {\n const [val1, val2] = val;\n const dataSource = [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ];\n\n return (\n <Space style={{ width: '100%' }}>\n {dataSource.find((item) => item.value === val1)?.label} - {val2}\n </Space>\n );\n },\n },\n ];\n\n const originalValues = {\n // input: 'input',\n select: 'select',\n textArea: '123',\n checkBox: ['1'], // 支持引用类型深比较\n switch: true,\n datePicker: dayjs(), // 日期类数据比较时因不能确定比较精度, 可以传入 onDiff 自定义比较方法\n p: '130000',\n c: '130100',\n a: '130102',\n address: '123',\n isY: 'N',\n customComponent: ['J', '123456'],\n };\n\n return (\n <div\n style={{\n padding: 30,\n }}\n >\n <ProConfigProvider value={{ ProForm: { isDiffAll: true } }}>\n <ProForm\n onFinish={setData}\n // disabled\n diffConfig={{\n originalValues,\n }}\n columns={columns}\n />\n <ReactJson src={data} collapsed />\n </ProConfigProvider>\n </div>\n );\n};\n\nexport default OriginalValues;\n"
1340
- },
1341
- {
1342
- "id": "ProForm/demos/desensitization.tsx",
1343
- "component": "ProForm",
1344
- "file": "demos/desensitization.tsx",
1345
- "title": "脱敏数据",
1346
- "note": "",
1347
- "source": "import { Form, Radio } from 'antd';\nimport React, { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('OFF');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '手机号码',\n name: 'phone',\n disabled: true,\n desensitization: [3, 7],\n },\n {\n type: 'ProCascader',\n label: '地址',\n names: ['province', 'city', 'county', 'address'],\n span: 16,\n disabled: true,\n desensitization: (values, { form, index, namePath }) => [10, 18],\n fieldProps: {\n mode: 'address',\n dataSource: addressDataSource,\n },\n },\n {\n type: 'Group',\n label: '输入框',\n names: ['certType', 'certNo'],\n span: 16,\n disabled: true,\n fieldProps: {\n children: [\n {\n type: 'Input',\n },\n {\n type: 'Input',\n desensitization: [6, 12],\n },\n ],\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n phone: '18130427392',\n province: '130000',\n city: '130100',\n county: '130102',\n address: '香洲街道新华路88号顺达楼5号楼2单元1103放门口',\n certType: '身份证',\n certNo: '342423199600238802',\n });\n }, []);\n\n return (\n <>\n <div style={{ height: '100px' }}></div>\n <ProForm\n form={form}\n submitOnEnter\n columns={columns}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n initialValues={{\n switch: true,\n }}\n diffConfig={{\n originalValues: {\n phone: '19514621090',\n province: '130000',\n city: '130100',\n county: '130102',\n address: '香洲街道新华路88号顺达楼5号楼2单元1103放门口',\n certType: '身份证',\n certNo: '342423199600238802',\n },\n }}\n requiredOnView={false}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1348
- },
1349
- {
1350
- "id": "ProForm/demos/desensitizationBiz.tsx",
1351
- "component": "ProForm",
1352
- "file": "demos/desensitizationBiz.tsx",
1353
- "title": "证件类型联动示例",
1354
- "note": "",
1355
- "source": "/**\n * title: 证件类型联动示例\n * desc: |\n * 切换证件类型自动清空证件号码；选择身份证后输入号码可自动回填性别和年龄（性别/年龄此时禁用）。\n */\n\nimport { Form } from 'antd';\nimport dayjs from 'dayjs';\nimport React from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { tools, validate } from '@zat-design/utils';\n\nconst CERT_TYPE_OPTIONS = [\n { label: '身份证', value: '0' },\n { label: '护照', value: '1' },\n { label: '军官证', value: '2' },\n];\n\nconst GENDER_OPTIONS = [\n { label: '男', value: '0' },\n { label: '女', value: '1' },\n];\n\n// 证件类型对应的校验规则，value 与 @zat-design/utils validate 规则名对应\nconst CERT_RULES = [\n { label: '身份证', value: 'isIdCard', certType: '0' },\n { label: '护照', value: 'isPassportCard', certType: '1' },\n { label: '军官证', value: 'isOfficerCard', certType: '2' },\n];\n\nconst IS_ID_CARD = '0';\n\nconst BaseModule: React.FC = () => {\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Select',\n label: '证件类型',\n name: 'certType',\n fieldProps: {\n dataSource: CERT_TYPE_OPTIONS,\n onFieldChange: (value, _record, { form: f }) => {\n // 切换证件类型时清空证件号码\n f.setFieldValue('certNo', undefined);\n },\n },\n },\n {\n type: 'Input',\n label: '证件号码',\n name: 'certNo',\n rules: (values) => {\n const rule = CERT_RULES.find((r) => r.certType === values.certType);\n return rule ? [{ type: rule.value, message: `请输入正确的${rule.label}号码` }] : [];\n },\n fieldProps: {\n onFieldChange: (value, record, { form: f }) => {\n if (record?.certType === IS_ID_CARD && validate.isIdCard(record?.certNo)) {\n const info = tools.getDataByIdCard(record.certNo, {\n fieldNames: { male: '0', female: '1' },\n }) as { gender: string; age: number; birthday: string };\n f.setFieldsValue({\n gender: String(info.gender),\n age: info.age,\n birthday: info.birthday ? dayjs(info.birthday) : undefined,\n });\n }\n },\n },\n },\n {\n type: 'Select',\n label: '性别',\n name: 'gender',\n disabled: (values) => values.certType === IS_ID_CARD,\n fieldProps: {\n dataSource: GENDER_OPTIONS,\n },\n },\n {\n type: 'InputNumber',\n label: '年龄',\n name: 'age',\n disabled: (values) => values.certType === IS_ID_CARD,\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n disabled: (values) => values.certType === IS_ID_CARD,\n },\n ];\n\n return (\n <ProForm\n form={form}\n columns={columns}\n initialValues={{ certType: IS_ID_CARD }}\n footer={false}\n />\n );\n};\n\nexport default BaseModule;\n"
1356
- },
1357
- {
1358
- "id": "ProModalSelect/demos/base.tsx",
1359
- "component": "ProModalSelect",
1360
- "file": "demos/base.tsx",
1361
- "title": "基础使用",
1362
- "note": "",
1363
- "source": "/**\n * title: ProModalSelect的基础使用\n * desc: |\n * 组件的单独使用,外部传入dataSource,以及禁止状态\n */\nimport { Col, Row, Space } from 'antd';\nimport { useState } from 'react';\nimport { ProModalSelect } from '@zat-design/sisyphus-react';\n\nconst ProModalSelectBaseDemo = () => {\n const [data, setData] = useState('');\n const formColumns = [\n {\n type: 'Input',\n name: 'holderName',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'value',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'label',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n // 初始化table渲染的数据\n const dataSource = [\n {\n id: 1,\n value: 80083,\n label: '众安信息技术有限公司',\n certNo: '134354546533',\n },\n {\n id: 2,\n value: 82953,\n label: '自动化测试有限公司',\n certNo: '1000000000010',\n },\n {\n id: 3,\n value: 83048,\n label: '光华科技',\n certNo: '78678',\n },\n ];\n\n const handleChangeValue = (value) => {\n setData(value);\n };\n\n return (\n <Space orientation=\"vertical\">\n <h3>编辑状态</h3>\n <Row>\n <Col span={12}>\n <ProModalSelect\n title=\"选择投保人\"\n value={data}\n onChange={handleChangeValue}\n showCodeName\n labelInValue\n configOption={{\n formColumns,\n tableProps: {\n columns: tableColumns,\n dataSource,\n },\n }}\n />\n </Col>\n </Row>\n <h3>非编辑状态</h3>\n <Row>\n <Col span={12}>\n <ProModalSelect\n disabled\n title=\"选择投保人\"\n value={data}\n onChange={handleChangeValue}\n configOption={{\n formColumns,\n tableProps: {\n columns: tableColumns,\n dataSource,\n },\n }}\n />\n </Col>\n </Row>\n </Space>\n );\n};\n\nexport default ProModalSelectBaseDemo;\n"
1364
- },
1365
- {
1366
- "id": "ProModalSelect/demos/mode.tsx",
1367
- "component": "ProModalSelect",
1368
- "file": "demos/mode.tsx",
1369
- "title": "组件展示类型",
1370
- "note": "",
1371
- "source": "/**\n * title: ProModalSelect的组件展示形式\n * desc: |\n * 支持两个形式 Input输入框形式，可支持手动修改 Select下拉选项框 支持搜索选择\n */\nimport { Col, Row, Space } from 'antd';\nimport { useState } from 'react';\nimport { ProModalSelect } from '@zat-design/sisyphus-react';\n\nconst ProModalSelectModeDemo = () => {\n const [data, setData] = useState('');\n const formColumns = [\n {\n type: 'Input',\n name: 'holderName',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'value',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'label',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n // 初始化table渲染的数据\n const dataSource = [\n {\n id: 1,\n value: 80083,\n label: '自信技术有限公司',\n certNo: '134354546533',\n },\n {\n id: 2,\n value: 82953,\n label: '自动化测试有限公司',\n certNo: '1000000000010',\n },\n {\n id: 3,\n value: 83048,\n label: '光华科技',\n certNo: '78678',\n },\n ];\n\n const handleChangeValue = (value) => {\n setData(value);\n };\n\n return (\n <Space orientation=\"vertical\">\n <h3>Input类型</h3>\n <Row>\n <Col span={12}>\n <ProModalSelect\n title=\"选择投保人\"\n value={data}\n onChange={handleChangeValue}\n showCodeName\n labelInValue\n mode=\"input\"\n placeholder=\"请输入\"\n configOption={{\n formColumns,\n tableProps: {\n columns: tableColumns,\n dataSource,\n },\n }}\n />\n </Col>\n </Row>\n <h3>Select类型</h3>\n <Row>\n <Col span={12}>\n <ProModalSelect\n title=\"选择投保人\"\n value={data}\n onChange={handleChangeValue}\n // 默认\n mode=\"select\"\n configOption={{\n formColumns,\n tableProps: {\n columns: tableColumns,\n dataSource,\n },\n }}\n />\n </Col>\n </Row>\n </Space>\n );\n};\n\nexport default ProModalSelectModeDemo;\n"
1372
- },
1373
- {
1374
- "id": "ProModalSelect/demos/single.tsx",
1375
- "component": "ProModalSelect",
1376
- "file": "demos/single.tsx",
1377
- "title": "单个搜索条件",
1378
- "note": "",
1379
- "source": "/**\n * title: ProModalSelect的单个搜索条件\n * desc: |\n * 单个搜索条件只有一个的时候，隐藏查询重置按钮，通过回车键查询\n */\nimport { Col, Row } from 'antd';\nimport { useState } from 'react';\nimport { ProModalSelect } from '@zat-design/sisyphus-react';\n\nconst ProModalSelectBaseDemo = () => {\n const [data, setData] = useState();\n\n const formColumns = [\n {\n type: 'Input',\n name: 'name',\n span: 12,\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'value',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'label',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n // 初始化table渲染的数据\n const dataSource = [\n {\n id: 1,\n value: 80083,\n label: '众安信息技术有限公司',\n certNo: '134354546533',\n },\n {\n id: 2,\n value: 82953,\n label: '自动化测试有限公司',\n certNo: '1000000000010',\n },\n {\n id: 3,\n value: 83048,\n label: '光华科技',\n certNo: '78678',\n },\n ];\n\n const handleChangeValue = (value) => {\n setData(value);\n };\n\n return (\n <Row>\n <Col span={12}>\n <ProModalSelect\n title=\"选择投保人\"\n value={data}\n onChange={handleChangeValue}\n configOption={{\n formColumns,\n tableProps: {\n columns: tableColumns,\n dataSource,\n },\n }}\n />\n </Col>\n </Row>\n );\n};\n\nexport default ProModalSelectBaseDemo;\n"
1380
- },
1381
- {
1382
- "id": "ProModalSelect/demos/service.tsx",
1383
- "component": "ProModalSelect",
1384
- "file": "demos/service.tsx",
1385
- "title": "远程接口与回显",
1386
- "note": "",
1387
- "source": "/**\n * title: ProModalSelect的远程接口\n * desc: |\n * 通过配置useRequest，参考ahooks的useRequest配置项\n */\nimport { Col, Row } from 'antd';\nimport { useState } from 'react';\nimport { ProModalSelect } from '@zat-design/sisyphus-react';\nimport { getMockUserPageList } from './mock';\n\nconst ProModalSelectServiceDemo = () => {\n const [data, setData] = useState('');\n const formColumns = [\n {\n type: 'Input',\n name: 'name',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n const handleChangeValue = (value) => {\n setData(value);\n };\n\n return (\n <Row>\n <Col span={12}>\n <ProModalSelect\n value={data}\n title=\"选择投保人\"\n defaultOne\n showCodeName\n fieldNames={{\n label: 'name',\n value: 'code',\n }}\n onChange={handleChangeValue}\n configOption={{\n useRequest: {\n service: getMockUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n id: 'xxx',\n },\n ],\n },\n },\n formColumns,\n tableProps: {\n columns: tableColumns,\n },\n }}\n />\n </Col>\n </Row>\n );\n};\n\nexport default ProModalSelectServiceDemo;\n"
1388
- },
1389
- {
1390
- "id": "ProModalSelect/demos/checkbox.tsx",
1391
- "component": "ProModalSelect",
1392
- "file": "demos/checkbox.tsx",
1393
- "title": "多选",
1394
- "note": "",
1395
- "source": "/**\n * title: ProModalSelect的多选使用\n * desc: |\n * 通过配置type 为 checkbox开启多选\n */\nimport { Form } from 'antd';\nimport { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getMockUserPageList } from './mock';\n\nconst ProModalSelectServiceDemo = () => {\n const [jsonData, setJsonData] = useState();\n const [form] = Form.useForm();\n const formColumns: ProFormColumnType[] = [\n {\n type: 'Input',\n name: 'name',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProModalSelect',\n name: 'code',\n label: '投保人姓名',\n span: 12,\n hiddenNames: ['name'],\n fieldProps: {\n title: '选择投保人',\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n showCodeName: true,\n onFieldChange: (val, record, { form, options }) => {\n form.setFieldValue(\n 'name',\n options?.map?.((item) => item.name),\n );\n },\n configOption: {\n type: 'checkbox',\n useRequest: {\n service: getMockUserPageList,\n },\n formColumns,\n tableProps: {\n columns: tableColumns,\n scroll: { y: 300 },\n },\n },\n },\n },\n ];\n\n return (\n <>\n <ProForm form={form} columns={columns} onFinish={(values) => setJsonData(values)} />\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default ProModalSelectServiceDemo;\n"
1396
- },
1397
- {
1398
- "id": "ProModalSelect/demos/echo.tsx",
1399
- "component": "ProModalSelect",
1400
- "file": "demos/echo.tsx",
1401
- "title": "数据回显",
1402
- "note": "",
1403
- "source": "/**\n * title: ProModalSelect的数据回显\n * desc: |\n * 单选传入对象，对象的属性值中必须包含rowKey，否则表格无法回显已勾选的选项；多选传入以单选的对象格式的数组集合\n */\nimport { Form } from 'antd';\nimport { useEffect } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { getMockUserPageList } from './mock';\n\nconst ProModalSelectServiceDemo = () => {\n const [form] = Form.useForm();\n const formColumns: ProFormColumnType[] = [\n {\n type: 'Input',\n name: 'name',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns: ProTableColumnType[] = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProModalSelect',\n name: 'radio',\n label: '单选',\n span: 13,\n fieldProps: {\n title: '选择投保人',\n placeholder: '请输入投保人姓名',\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n tooltip: true,\n showCodeName: true,\n configOption: {\n formColumns,\n tableProps: {\n rowKey: 'code',\n columns: tableColumns,\n },\n useRequest: {\n service: getMockUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n id: 'xxx',\n },\n ],\n },\n initParams: (value) => {\n return {\n // 首次回显使用的参数\n // xxx: value?.code || '123',\n };\n },\n },\n },\n },\n },\n {\n type: 'ProModalSelect',\n name: 'checkbox',\n label: '多选',\n span: 13,\n fieldProps: {\n title: '选择投保人',\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n tooltip: true,\n showCodeName: true,\n configOption: {\n type: 'checkbox',\n formColumns,\n tableProps: {\n columns: tableColumns,\n scroll: { y: 300 },\n },\n useRequest: {\n service: getMockUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n id: 'xxx',\n },\n ],\n },\n initParams: (value) => {\n return {\n // 首次回显使用的参数\n // xxx: value?.code || '123',\n };\n },\n },\n },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n radio: 80083,\n checkbox: [80083, 82953],\n });\n }, []);\n\n return <ProForm form={form} columns={columns} footer={false} />;\n};\n\nexport default ProModalSelectServiceDemo;\n"
1404
- },
1405
- {
1406
- "id": "ProModalSelect/demos/custom.tsx",
1407
- "component": "ProModalSelect",
1408
- "file": "demos/custom.tsx",
1409
- "title": "自定义展示",
1410
- "note": "",
1411
- "source": "/**\n * title: ProModalSelect自定义展示\n * desc: |\n * 可以通过customRender自定义渲染组件\n */\nimport { Button, Col, Row } from 'antd';\nimport { useState } from 'react';\nimport { ProModalSelect } from '@zat-design/sisyphus-react';\n\nconst ProModalSelectBaseDemo = () => {\n const [data, setData] = useState('');\n\n const formColumns = [\n {\n type: 'Input',\n name: 'name',\n span: 12,\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n // 初始化table渲染的数据\n const dataSource = [\n {\n id: 1,\n code: 80083,\n name: '众安信息技术有限公司',\n certNo: '134354546533',\n },\n {\n id: 2,\n code: 82953,\n name: '自动化测试有限公司',\n certNo: '1000000000010',\n },\n {\n id: 3,\n code: 83048,\n name: '光华科技',\n certNo: '78678',\n },\n ];\n\n const handleChangeValue = (value) => {\n setData(value);\n };\n\n return (\n <Row>\n <Col span={12}>\n <ProModalSelect\n title=\"选择投保人\"\n value={data}\n customRender={<Button>自定义按钮</Button>}\n fieldNames={{\n label: 'name',\n value: 'code',\n }}\n onChange={handleChangeValue}\n configOption={{\n formColumns,\n tableProps: {\n columns: tableColumns,\n dataSource,\n },\n }}\n />\n </Col>\n </Row>\n );\n};\n\nexport default ProModalSelectBaseDemo;\n"
1412
- },
1413
- {
1414
- "id": "ProModalSelect/demos/confirm.tsx",
1415
- "component": "ProModalSelect",
1416
- "file": "demos/confirm.tsx",
1417
- "title": "弹框确认拦截",
1418
- "note": "",
1419
- "source": "/**\n * title: ProModalSelect的弹框确认拦截\n * desc: |\n * 通过配置onOk，并且返回false的情况下才进行拦截\n */\nimport { Form, message } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { getUserPageList } from './mock';\n\nconst ProModalSelectServiceDemo = () => {\n const [form] = Form.useForm();\n const formColumns: ProFormColumnType[] = [\n {\n type: 'Input',\n name: 'name',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns: ProTableColumnType[] = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProModalSelect',\n name: 'holder',\n label: '投保人姓名',\n span: 12,\n fieldProps: {\n title: '选择投保人',\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n configOption: {\n useRequest: {\n service: getUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n // id: xxx\n },\n ],\n },\n },\n formColumns,\n modalProps: {\n onOk: (data) => {\n if (data.code < 30000) {\n message.error('勾选的投保人代码需要大于30000，请重新勾选');\n return false;\n }\n },\n },\n tableProps: {\n columns: tableColumns,\n scroll: { y: 300 },\n },\n },\n },\n },\n ];\n\n return <ProForm form={form} columns={columns} footer={false} />;\n};\n\nexport default ProModalSelectServiceDemo;\n"
1420
- },
1421
- {
1422
- "id": "ProModalSelect/demos/pagination.tsx",
1423
- "component": "ProModalSelect",
1424
- "file": "demos/pagination.tsx",
1425
- "title": "关闭分页",
1426
- "note": "",
1427
- "source": "/**\n * title: ProModalSelect的关闭分页\n * desc: |\n * 通过配置withPagination 为 false关闭分页功能，默认为true，并且只有当表格数据超过一页时，才展示分页信息\n */\nimport { Col, Row } from 'antd';\nimport { useState } from 'react';\nimport { ProModalSelect } from '@zat-design/sisyphus-react';\nimport { getUserList } from './mock';\n\nconst ProModalSelectPaginationDemo = () => {\n const [data, setData] = useState('');\n const formColumns = [\n {\n type: 'Input',\n name: 'name',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n const handleChangeValue = (value) => {\n setData(value);\n };\n\n return (\n <Row>\n <Col span={12}>\n <ProModalSelect\n title=\"选择投保人\"\n value={data}\n onChange={handleChangeValue}\n fieldNames={{\n label: 'name',\n value: 'code',\n }}\n configOption={{\n useRequest: {\n service: getUserList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n // id: xxx\n },\n ],\n },\n },\n withPagination: false, // 默认为true\n formColumns,\n tableProps: {\n columns: tableColumns,\n scroll: { y: 300 },\n },\n }}\n />\n </Col>\n </Row>\n );\n};\n\nexport default ProModalSelectPaginationDemo;\n"
1428
- },
1429
- {
1430
- "id": "ProModalSelect/demos/request.tsx",
1431
- "component": "ProModalSelect",
1432
- "file": "demos/request.tsx",
1433
- "title": "调整入参、出参",
1434
- "note": "",
1435
- "source": "/* eslint-disable no-console */\n/**\n * title: ProModalSelect调整入参、出参\n * desc: |\n * column的type为ProModalSelect，其他用法不变\n */\nimport { Form } from 'antd';\nimport { ProForm, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { getUserList } from './mock';\n\nconst ProModalSelectServiceDemo = () => {\n const [form] = Form.useForm();\n\n const handleFormatParams = (params) => {\n console.log('调整前接口入参', params);\n return {\n ...params,\n holderName: params?.name,\n holderCertNo: params?.certNo,\n };\n };\n\n const handleFormatDataSource = (data) => {\n console.log('调整前接口出参', data);\n const nextData = data?.map((item, index) => ({\n ...item,\n name: `我是调整后的名称${index}`,\n }));\n return nextData;\n };\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'Input',\n name: 'name',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProModalSelect',\n name: 'holder',\n label: '投保人姓名',\n span: 12,\n fieldProps: {\n title: '选择投保人',\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n configOption: {\n useRequest: {\n service: getUserList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n // id: xxx\n },\n ],\n },\n },\n withPagination: false,\n transformParams: handleFormatParams,\n transformResponse: handleFormatDataSource,\n formColumns,\n tableProps: {\n columns: tableColumns,\n scroll: { y: 300 },\n },\n },\n },\n },\n ];\n\n return <ProForm form={form} columns={columns} footer={false} />;\n};\n\nexport default ProModalSelectServiceDemo;\n"
1436
- },
1437
- {
1438
- "id": "ProModalSelect/demos/labelInValue.tsx",
1439
- "component": "ProModalSelect",
1440
- "file": "demos/labelInValue.tsx",
1441
- "title": "获取对象数据",
1442
- "note": "",
1443
- "source": "/**\n * title: ProModalSelect结合ProForm使用\n * desc: |\n * 开启labelInValue返回数据是对象形式，其他用法不变\n */\nimport { Form, Divider } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType, ProTableColumnType } from '@zat-design/sisyphus-react';\nimport { getMockUserPageList } from './mock';\n\nconst ProModalSelectServiceDemo = () => {\n const [form] = Form.useForm();\n const [jsonData, setJsonData] = useState({});\n const formColumns: ProFormColumnType[] = [\n {\n type: 'Input',\n name: 'holderName',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns: ProTableColumnType[] = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProModalSelect',\n name: 'holderCode',\n label: '投保人姓名',\n span: 12,\n hiddenNames: ['holderName'],\n fieldProps: {\n title: '选择投保人',\n labelInValue: true,\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n showCodeName: true,\n onChange(val, option) {\n form.setFieldValue('holderName', option?.label);\n },\n configOption: {\n useRequest: {\n service: getMockUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n policyId: 12,\n },\n ],\n },\n },\n formColumns,\n tableProps: {\n columns: tableColumns,\n scroll: { y: 300 },\n },\n },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n holderCode: {\n code: 80083,\n name: '众安信息技术有限公司',\n },\n });\n }, []);\n\n return (\n <>\n <ProForm\n form={form}\n columns={columns}\n onFinish={(values) => {\n setJsonData(values);\n }}\n />\n <h3>查看模式</h3>\n <ProForm\n form={form}\n isView\n viewEmpty=\"暂无数据\"\n footer={false}\n columns={columns}\n onFinish={(values) => {\n setJsonData(values);\n }}\n />\n <Divider style={{ textAlign: 'center' }}>-- 表单数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default ProModalSelectServiceDemo;\n"
1444
- },
1445
- {
1446
- "id": "ProModalSelect/demos/formItem.tsx",
1447
- "component": "ProModalSelect",
1448
- "file": "demos/formItem.tsx",
1449
- "title": "结合 Form.Item 使用",
1450
- "note": "",
1451
- "source": "/**\n * title: ProModalSelect结合Form.Item使用\n * desc: |\n * Form.Item包裹之后，不用传入value和onChange，其他用法不变\n */\nimport { Col, Row, Form } from 'antd';\nimport { ProModalSelect } from '@zat-design/sisyphus-react';\nimport { getUserPageList } from './mock';\n\nconst ProModalSelectServiceDemo = () => {\n const [form] = Form.useForm();\n const formColumns = [\n {\n type: 'Input',\n name: 'name',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n return (\n <Form form={form}>\n <Row>\n <Col span={12}>\n <Form.Item label=\"投保人姓名\" name=\"holder\">\n <ProModalSelect\n title=\"选择投保人\"\n fieldNames={{\n label: 'name',\n value: 'code',\n }}\n configOption={{\n useRequest: {\n service: getUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n // id: xxx\n },\n ],\n },\n },\n formColumns,\n tableProps: {\n columns: tableColumns,\n scroll: { y: 300 },\n },\n }}\n />\n </Form.Item>\n </Col>\n </Row>\n </Form>\n );\n};\n\nexport default ProModalSelectServiceDemo;\n"
1452
- },
1453
- {
1454
- "id": "ProModalSelect/demos/proForm.tsx",
1455
- "component": "ProModalSelect",
1456
- "file": "demos/proForm.tsx",
1457
- "title": "结合 ProForm 使用",
1458
- "note": "",
1459
- "source": "/**\n * title: ProModalSelect结合ProForm使用\n * desc: |\n * column的type为ProModalSelect，其他用法不变\n */\nimport { Form, Divider, Radio } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@/ProForm/propsType';\nimport { getMockUserPageList } from './mock';\n\nconst ProModalSelectServiceDemo = () => {\n const [form] = Form.useForm();\n const [jsonData, setJsonData] = useState({});\n const [state, setState] = useState('primary');\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'Input',\n name: 'holderName',\n label: '姓名',\n },\n {\n type: 'Input',\n name: 'certNo',\n label: '证件号码',\n },\n ];\n\n const tableColumns = [\n {\n title: '投保人代码',\n dataIndex: 'code',\n width: '30%',\n },\n {\n title: '投保人名称',\n width: '30%',\n dataIndex: 'name',\n },\n {\n title: '证件号码',\n dataIndex: 'certNo',\n width: '40%',\n },\n ];\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProModalSelect',\n name: 'name',\n label: '投保人姓名',\n span: 12,\n required: true,\n fieldProps: {\n mode: 'input',\n title: '选择投保人',\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n configOption: {\n useRequest: {\n service: getMockUserPageList,\n options: {\n defaultParams: [\n {\n // 默认参数传递\n policyId: 12,\n },\n ],\n },\n initParams: (value) => {\n return {\n // 首次回显使用的参数\n id: 1,\n };\n },\n },\n formColumns,\n tableProps: {\n columns: tableColumns,\n },\n },\n },\n },\n ];\n\n const handleStateChange = (val) => {\n setState(val);\n };\n\n useEffect(() => {\n form.setFieldsValue({\n name: 80083,\n });\n }, []);\n\n return (\n <>\n <Form.Item label=\"查看状态\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"primary\">正常</Radio>\n <Radio value=\"disabled\">禁用</Radio>\n <Radio value=\"view\">查看</Radio>\n </Radio.Group>\n </Form.Item>\n <ProForm\n form={form}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n viewEmpty=\"暂无数据\"\n columns={columns}\n onFinish={(values) => {\n setJsonData(values);\n }}\n />\n <Divider style={{ textAlign: 'center' }}>-- 表单数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </>\n );\n};\n\nexport default ProModalSelectServiceDemo;\n"
1460
- },
1461
- {
1462
- "id": "ProNumberRange/demos/base.tsx",
1463
- "component": "ProNumberRange",
1464
- "file": "demos/base.tsx",
1465
- "title": "基础使用",
1466
- "note": "",
1467
- "source": "/* eslint-disable no-console */\nimport { ProNumberRange } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\n\nconst BaseDemo = () => {\n return (\n <Space orientation=\"vertical\">\n <div>默认值</div>\n <div style={{ width: 300 }}>\n <ProNumberRange value={[1, 100000]} />\n </div>\n <div>千分数值</div>\n <div style={{ width: 300 }}>\n <ProNumberRange value={[1, 100000]} valueType=\"thousandth\" />\n </div>\n <div>禁止状态</div>\n <div style={{ width: 300 }}>\n <ProNumberRange disabled />\n </div>\n <div style={{ width: 300 }}>\n <ProNumberRange disabled={[false, true]} value={[1, 100]} />\n </div>\n </Space>\n );\n};\n\nexport default BaseDemo;\n"
1468
- },
1469
- {
1470
- "id": "ProNumberRange/demos/formItem.tsx",
1471
- "component": "ProNumberRange",
1472
- "file": "demos/formItem.tsx",
1473
- "title": "结合 form.item",
1474
- "note": "",
1475
- "source": "import { useState } from 'react';\nimport { Space, Form, Button } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { ProNumberRange } from '@zat-design/sisyphus-react';\n\nconst BaseDemo = () => {\n const [form] = Form.useForm();\n const [jsonData, setJsonData] = useState({});\n const onFinish = (values) => {\n setJsonData(values);\n };\n return (\n <Space orientation=\"vertical\">\n <Form form={form} onFinish={onFinish}>\n <Form.Item name=\"ageRange\" label=\"年龄范围\">\n <ProNumberRange min={1} max={120} />\n </Form.Item>\n <Form.Item\n name=\"numberRange\"\n label=\"金额范围\"\n rules={[\n {\n required: true,\n },\n {\n validator: (_: any, value: number[]) => {\n const hasMin = typeof value?.[0] === 'number';\n const hasMax = typeof value?.[1] === 'number';\n // 都有值或者都没有值返回正常结果\n if ((hasMin && hasMax) || (!hasMin && !hasMax)) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('请输入范围值'));\n },\n },\n ]}\n >\n <ProNumberRange />\n </Form.Item>\n <Form.Item>\n <Button type=\"primary\" htmlType=\"submit\">\n 确定\n </Button>\n </Form.Item>\n </Form>\n <h4>数据源</h4>\n <ReactJson src={jsonData} />\n </Space>\n );\n};\n\nexport default BaseDemo;\n"
1476
- },
1477
- {
1478
- "id": "ProNumberRange/demos/formItemTransform.tsx",
1479
- "component": "ProNumberRange",
1480
- "file": "demos/formItemTransform.tsx",
1481
- "title": "结合 form.item",
1482
- "note": "",
1483
- "source": "/**\n * title: 结合 form.item\n * desc: |\n * 数据转换\n */\n\nimport { useState } from 'react';\nimport { Space, Form, Button } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { ProNumberRange } from '@zat-design/sisyphus-react';\n\nconst BaseDemo = () => {\n const [form] = Form.useForm();\n const [jsonData, setJsonData] = useState({\n numberRange: { min: 1, max: 100 },\n });\n const onFinish = (values) => {\n setJsonData(values);\n };\n\n const transform = (nameArray: string[], argsLength = 2) => {\n if (nameArray.length !== argsLength) {\n return new Error(`组合组件参数必须为${argsLength}个`);\n }\n const [name1, name2] = nameArray;\n return {\n // 组件内部值转成外部值 [1,2] => {mix:1, max: 2}\n normalize: (value: any[]) => {\n if (!value) {\n return {};\n }\n return {\n [name1]: value[0],\n [name2]: value[1],\n };\n },\n // 外部值转成组件内部值 {mix:1, max: 2} => [1,2]\n getValueProps: (value: { [key: string]: string }) => {\n return {\n value: [value[name1], value[name2]],\n };\n },\n };\n };\n\n return (\n <Space orientation=\"vertical\">\n <Form\n form={form}\n onFinish={onFinish}\n initialValues={{\n numberRange: { min: 1, max: 100 },\n }}\n >\n <Form.Item\n name=\"numberRange\"\n label=\"金额范围\"\n {...transform(['min', 'max'])}\n rules={[\n {\n required: true,\n },\n {\n validator: (_: any, value: any) => {\n const hasMin = typeof (value?.[0] || value.min) === 'number';\n const hasMax = typeof (value?.[1] || value.max) === 'number';\n // 都有值或者都没有值返回正常结果\n if (hasMin && hasMax) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('请输入范围值'));\n },\n },\n ]}\n >\n <ProNumberRange />\n </Form.Item>\n <Form.Item>\n <Button type=\"primary\" htmlType=\"submit\">\n 确定\n </Button>\n </Form.Item>\n </Form>\n <h4>数据源</h4>\n <ReactJson src={jsonData} />\n </Space>\n );\n};\n\nexport default BaseDemo;\n"
1484
- },
1485
- {
1486
- "id": "ProNumberRange/demos/proForm.tsx",
1487
- "component": "ProNumberRange",
1488
- "file": "demos/proForm.tsx",
1489
- "title": "结合 ProForm",
1490
- "note": "",
1491
- "source": "import { useState } from 'react';\nimport { Space, Form, Button } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst BaseDemo = () => {\n const [form] = Form.useForm();\n const [jsonData, setJsonData] = useState({});\n const [view, setView] = useState(false);\n const onFinish = (values) => {\n setJsonData(values);\n };\n\n const baseColumns = [\n {\n type: 'ProNumberRange',\n label: '千分金额范围',\n name: 'numberRange',\n valueType: 'thousandth',\n },\n {\n type: 'ProNumberRange',\n label: '默认金额范围',\n name: 'numberRange1',\n },\n {\n type: 'ProNumberRange',\n label: '金额带尾缀',\n name: 'numberRange2',\n fieldProps: {\n addonAfter: '万元',\n },\n },\n ];\n return (\n <Space orientation=\"vertical\">\n <Button\n onClick={() => {\n if (view) {\n setView(false);\n } else {\n setView(true);\n }\n }}\n >\n 查看\n </Button>\n <ProForm form={form} columns={baseColumns} onFinish={onFinish} span={12} isView={view} />\n <h4>数据源</h4>\n <ReactJson src={jsonData} />\n </Space>\n );\n};\n\nexport default BaseDemo;\n"
1492
- },
1493
- {
1494
- "id": "ProNumberRange/demos/proFormTransform.tsx",
1495
- "component": "ProNumberRange",
1496
- "file": "demos/proFormTransform.tsx",
1497
- "title": "结合 ProForm",
1498
- "note": "",
1499
- "source": "/**\n * title: 结合 ProForm\n * desc: |\n * 数据转换\n */\n\nimport { useState } from 'react';\nimport { Space, Form } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst BaseDemo = () => {\n const [form] = Form.useForm();\n const [jsonData, setJsonData] = useState({\n min: 1,\n max: 100,\n });\n const onFinish = (values) => {\n setJsonData(values);\n };\n\n const baseColumns = [\n {\n type: 'ProNumberRange',\n label: '金额范围',\n names: ['min', 'max'],\n rules: [\n { required: true },\n {\n validator: (_: any, value: any) => {\n const hasMin = typeof (value?.[0] || value.min) === 'number';\n const hasMax = typeof (value?.[1] || value.max) === 'number';\n // 都有值或者都没有值返回正常结果\n if (hasMin && hasMax) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('请输入范围值'));\n },\n },\n ],\n },\n ];\n return (\n <Space orientation=\"vertical\">\n <ProForm\n form={form}\n initialValues={{\n min: 1,\n max: 100,\n }}\n columns={baseColumns}\n onFinish={onFinish}\n />\n <h4>数据源</h4>\n <ReactJson src={jsonData} />\n </Space>\n );\n};\n\nexport default BaseDemo;\n"
1500
- },
1501
- {
1502
- "id": "ProSelect/demos/provide.tsx",
1503
- "component": "ProSelect",
1504
- "file": "demos/provide.tsx",
1505
- "title": "基本配置",
1506
- "note": "",
1507
- "source": "/**\n * title: 基本配置\n * desc: |\n * 使用全局 `ProConfigProvider` 进行 `ProSelect` 的初始化配置,传入 `fieldNames` 指定下拉框 `value`、`label` 指定展示文字\n */\n\nimport React from 'react';\nimport { ProConfigProvider, ProSelect } from '@zat-design/sisyphus-react';\n\nconst ProvideComp: React.FC<any> = (props) => {\n // 给ProSelect 组件设置默认配置\n const initialConfig = {\n ProSelect: {\n fieldNames: {\n label: 'name',\n value: 'code',\n },\n },\n };\n\n return (\n <ProConfigProvider value={initialConfig}>\n <ProSelect\n dataSource={[\n { name: '测试1', code: '1' },\n { name: '测试2', code: '2' },\n ]}\n />\n </ProConfigProvider>\n );\n};\n\nexport default ProvideComp;\n"
1508
- },
1509
- {
1510
- "id": "ProSelect/demos/initDemo.tsx",
1511
- "component": "ProSelect",
1512
- "file": "demos/initDemo.tsx",
1513
- "title": "默认使用",
1514
- "note": "",
1515
- "source": "/**\n * title: 默认使用\n * desc: |\n * 在默认配置上、可以通过设置设置`fieldNames` 控制显示与取值、下拉框数据 `dataSource`、\n */\n\n// @ts-nocheck\nimport { FC, useState } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\nimport ProvideComp from './provide';\n\nconst dataSource = [\n { address: '上海', code: 'sh' },\n { address: '北京', code: 'bj' },\n { address: '武汉', code: 'wh' },\n];\n\nconst Demo: FC = () => {\n const [v, setV] = useState();\n\n return (\n <ProvideComp>\n <ProSelect\n fieldNames={{\n label: 'address',\n value: 'code',\n }}\n value={v}\n dataSource={dataSource}\n onChange={(value: string) => setV(value)}\n style={{ width: '240px' }}\n />\n <div style={{ marginTop: '15px' }}>选择的值:{v}</div>\n </ProvideComp>\n );\n};\n\nexport default Demo;\n"
1516
- },
1517
- {
1518
- "id": "ProSelect/demos/defaultOne.tsx",
1519
- "component": "ProSelect",
1520
- "file": "demos/defaultOne.tsx",
1521
- "title": "默认使用一个值作为 value",
1522
- "note": "",
1523
- "source": "/**\n * title: 默认使用一个值作为 value\n * desc: |\n * 当 dataSource 数据源只有一项时，通过设置 `defaultOne: true` 会自动选中该项作为默认值。\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n return (\n <ProForm\n onFinish={(values) => {\n console.log(values);\n }}\n columns={[\n {\n type: 'ProSelect',\n name: 'address',\n label: '地区',\n fieldProps: {\n defaultOne: true,\n dataSource: [\n {\n label: '上海',\n value: 'sh',\n },\n ],\n },\n },\n {\n type: 'ProSelect',\n name: 'type',\n label: '类型',\n fieldProps: {\n defaultOne: true,\n useRequest: {\n service: () => {\n return [\n {\n label: 'React',\n value: 'react',\n },\n ];\n },\n },\n transformResponse(data) {\n return data;\n },\n },\n },\n ]}\n />\n );\n};\n\nexport default Demo;\n"
1524
- },
1525
- {
1526
- "id": "ProSelect/demos/diyOptionValue.tsx",
1527
- "component": "ProSelect",
1528
- "file": "demos/diyOptionValue.tsx",
1529
- "title": "自定义 Option 值",
1530
- "note": "",
1531
- "source": "/**\n * title: 自定义 Option 值\n * desc: |\n * 通过 optionRender 设置 Option 值，适用于需要组合的场景\n */\n\n// @ts-nocheck\n\nimport { FC, useState } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n const [value, setValue] = useState();\n return (\n <div>\n <ProSelect\n defaultValue=\"code1\"\n fieldNames={{\n value: 'proCode',\n label: 'ProName',\n }}\n onChange={(e) => {\n setValue(e);\n }}\n dataSource={[\n { id: 1001, proCode: 'code1', ProName: '产品名字1' },\n { id: 1002, proCode: 'code2', ProName: '产品名字2' },\n ]}\n optionRender={(record) => {\n return `${record.id}-${record.proCode}-${record.ProName}`;\n }}\n style={{ width: '240px' }}\n />\n <div style={{ marginTop: '15px' }}>选择的值:{value}</div>\n </div>\n );\n};\n\nexport default Demo;\n"
1532
- },
1533
- {
1534
- "id": "ProSelect/demos/asyncDefaultDemo.tsx",
1535
- "component": "ProSelect",
1536
- "file": "demos/asyncDefaultDemo.tsx",
1537
- "title": "通过 api 异步取值",
1538
- "note": "",
1539
- "source": "/**\n * title: 通过 api 异步取值\n * desc: |\n * 异步默认取值，按照框架数据结构默认处理\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nexport const serviceName = () =>\n new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: [\n { label: '产品名字1', value: 'code1' },\n { label: '产品名字2', value: 'code2' },\n ],\n status: 200,\n });\n }, 1000);\n });\n\nconst Demo: FC = () => {\n return (\n <div>\n <ProSelect\n viewportReady={false}\n useRequest={{\n service: serviceName,\n }}\n style={{ width: '240px' }}\n />\n </div>\n );\n};\n\nexport default Demo;\n"
1540
- },
1541
- {
1542
- "id": "ProSelect/demos/asyncTransformDemo.tsx",
1543
- "component": "ProSelect",
1544
- "file": "demos/asyncTransformDemo.tsx",
1545
- "title": "格式化结果+远程搜索",
1546
- "note": "",
1547
- "source": "/**\n * title: 格式化结果+远程搜索\n * desc: |\n * 返回值与框架不一样，使用 `transformResponse` 修改异步接口的数据源\n */\n\n// @ts-nocheck\nimport { FC } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nexport const searchName = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: [{ label: '初始化数据', value: 'demo' }],\n });\n }, 1000);\n });\n};\n\nexport const serviceName = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: {\n result: [\n { label: '异步数据1', value: 'code1' },\n { label: '异步数据2', value: 'code2' },\n { label: '异步数据3', value: 'code3' },\n ],\n },\n });\n }, 1000);\n });\n};\n\nconst Demo: FC = () => {\n return (\n <div>\n <ProSelect\n useRequest={{\n service: searchName,\n }}\n style={{ width: '240px' }}\n transformResponse={(resp) => {\n if (resp.status === 200) {\n return resp.data;\n }\n }}\n onSearch={(newValue: string, { run }) => {\n run({\n name: newValue,\n });\n }}\n />\n\n <p style={{ margin: '16px 0' }}>禁用某个选项</p>\n <ProSelect\n useRequest={{\n service: serviceName,\n }}\n transformResponse={(resp) => {\n if (resp.status === 200) {\n const data = resp.data.result;\n return data.map((item) => {\n if (item.value === 'code1') {\n return {\n ...item,\n disabled: true,\n };\n }\n return item;\n });\n }\n }}\n style={{ width: '240px' }}\n />\n </div>\n );\n};\n\nexport default Demo;\n"
1548
- },
1549
- {
1550
- "id": "ProSelect/demos/InProFormDemo.tsx",
1551
- "component": "ProSelect",
1552
- "file": "demos/InProFormDemo.tsx",
1553
- "title": "结合 ProForm 使用",
1554
- "note": "",
1555
- "source": "// @ts-nocheck\n\nimport { FC, useState, useEffect } from 'react';\nimport { Form } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst mockAddress = [\n {\n label: '武汉',\n value: 'wh',\n },\n {\n label: '上海',\n value: 'sh',\n },\n];\n\nconst fetchData = () => {\n console.log('重新请求');\n\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n data: mockAddress,\n });\n }, 1000);\n });\n};\n\nconst Demo: FC = () => {\n const [form] = Form.useForm();\n const [form1] = Form.useForm();\n\n const [address, setAddress] = useState(mockAddress);\n\n const columns = [\n {\n type: 'ProSelect',\n label: '产品1',\n name: 'proSelect',\n fieldProps: {\n useRequest: {\n service: fetchData,\n },\n },\n },\n {\n type: 'ProSelect',\n label: '产品2',\n name: 'shortRateType',\n fieldProps: {\n fieldNames: {\n label: 'shortRateTypeName',\n value: 'shortRateType',\n },\n style: { width: 240 },\n dataSource: [\n { shortRateType: 'code1', shortRateTypeName: '产品名字1' },\n { shortRateType: 'code2', shortRateTypeName: '产品名字2' },\n ],\n optionRender: (record) => `${record.shortRateType} + ${record.shortRateTypeName}`,\n },\n },\n {\n type: 'ProSelect',\n name: 'tag',\n label: '查看模式',\n fieldProps: {\n isView: true,\n dataSource: [\n {\n label: 'React',\n value: 'react',\n },\n {\n label: 'Vue',\n value: 'vue',\n },\n ],\n },\n },\n ];\n\n const columns1 = [\n {\n type: 'ProSelect',\n name: 'address',\n label: '产品1',\n fieldProps: {\n dataSource: address,\n },\n },\n {\n type: 'ProSelect',\n label: '产品2',\n name: 'shortRateType',\n fieldProps: {\n fieldNames: {\n label: 'shortRateTypeName',\n value: 'shortRateType',\n },\n dataSource: [\n { shortRateType: 'code1', shortRateTypeName: '产品名字1' },\n { shortRateType: 'code2', shortRateTypeName: '产品名字2' },\n ],\n onFieldChange: (v: string) => {\n setAddress([{ label: '西安', value: 'xa' }]);\n },\n },\n },\n {\n type: 'ProSelect',\n name: 'tag',\n label: '表单联动',\n fieldProps: {\n dataSource: [\n {\n label: 'React',\n value: 'react',\n },\n {\n label: 'Vue',\n value: 'vue',\n },\n ],\n },\n },\n ];\n useEffect(() => {\n form.setFieldsValue({\n tag: 'vue',\n });\n }, []);\n\n const getAddress = () => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve([\n {\n label: '西双版纳',\n value: 'xhbn',\n },\n {\n label: '西藏',\n value: 'xz',\n },\n ]);\n }, 1000);\n });\n };\n\n return (\n <div>\n <ProForm\n form={form}\n columns={columns}\n labelCol={{ span: 7, offset: 0 }}\n initialValues={{ shortRateType: 'code2' }}\n />\n <div style={{ margin: '15px 0' }}>结合表单进行联动</div>\n <ProForm\n form={form1}\n columns={columns1}\n labelCol={{ span: 7, offset: 0 }}\n initialValues={{ shortRateType: 'code2' }}\n footer={false}\n onValuesChange={async (values) => {\n if (values.tag) {\n form1.setFieldValue('address', '');\n if (values.tag === 'vue') {\n const res = await getAddress();\n setAddress(res);\n } else {\n setAddress(mockAddress);\n }\n }\n }}\n />\n <div style={{ margin: '15px 0' }}>\n 你可以进行监听 ProForm onValuesChange 或者组件自身的 onFieldChange 进行一系列的联动{' '}\n </div>\n </div>\n );\n};\n\nexport default Demo;\n"
1556
- },
1557
- {
1558
- "id": "ProSelect/demos/initSearchDemo.tsx",
1559
- "component": "ProSelect",
1560
- "file": "demos/initSearchDemo.tsx",
1561
- "title": "文本搜索",
1562
- "note": "",
1563
- "source": "/**\n * title: 文本搜索\n * desc: |\n * ProSelect 内部默认开启了文本搜索\n */\n\n// @ts-nocheck\nimport { FC, useState } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nconst dataSource = [\n { label: '上海', value: 'sh' },\n { label: '北京', value: 'bj' },\n { label: '武汉', value: 'wh' },\n];\n\nconst Demo: FC = () => {\n const [v, setV] = useState();\n return (\n <div>\n <ProSelect\n dataSource={dataSource}\n onChange={(value: string) => setV(value)}\n style={{ width: '240px' }}\n />\n <div style={{ marginTop: '15px' }}>选择的值:{JSON.stringify(v)}</div>\n </div>\n );\n};\n\nexport default Demo;\n"
1564
- },
1565
- {
1566
- "id": "ProSelect/demos/diySearchOption.tsx",
1567
- "component": "ProSelect",
1568
- "file": "demos/diySearchOption.tsx",
1569
- "title": "文本搜索",
1570
- "note": "",
1571
- "source": "/**\n * title: 文本搜索\n * desc: |\n * 支持自定义文本搜索\n */\n\n// @ts-nocheck\n\nimport { FC, useState } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n const [value, setValue] = useState();\n return (\n <div>\n <ProSelect\n defaultValue=\"code1\"\n showSearch\n onChange={(e) => {\n setValue(e);\n }}\n fieldNames={{\n label: 'ProName',\n value: 'proCode',\n }}\n dataSource={[\n { id: 1001, proCode: 'code1', ProName: '产品名字1' },\n { id: 1002, proCode: 'code2', ProName: '产品名字2' },\n { id: 1003, proCode: 'code3', ProName: '产品名字3' },\n ]}\n optionRender={(record) => `${record.id}-${record.proCode}-${record.ProName}`}\n style={{ width: '240px' }}\n />\n <div style={{ marginTop: '15px' }}>选择的值:{value}</div>\n </div>\n );\n};\n\nexport default Demo;\n"
1572
- },
1573
- {
1574
- "id": "ProSelect/demos/getObjectValue.tsx",
1575
- "component": "ProSelect",
1576
- "file": "demos/getObjectValue.tsx",
1577
- "title": "取下拉的对象值",
1578
- "note": "",
1579
- "source": "/**\n * title: 取下拉的对象值\n * desc: |\n * 适用于部分场景需要取下拉框的对象，取 record 的值，做联动或者保存、一次性提交给后端多个值\n */\n\n// @ts-nocheck\n\nimport { FC, useState } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n const [value, setValue] = useState({ e: '', record: '' });\n return (\n <div>\n <ProSelect\n code=\"shortRateType\"\n onChange={(e, record) => {\n setValue({\n e,\n record,\n });\n }}\n dataSource={[\n { shortRateType: 'code1', label: '产品名字1' },\n { shortRateType: 'code2', label: '产品名字2' },\n ]}\n optionRender={(record) => `${record.shortRateType} + ${record.label}`}\n style={{ width: '240px' }}\n fieldNames={{\n label: 'label',\n value: 'shortRateType',\n }}\n />\n <div style={{ marginTop: '15px' }}>提交给后端多个值:{JSON.stringify(value.record)}</div>\n </div>\n );\n};\n\nexport default Demo;\n"
1580
- },
1581
- {
1582
- "id": "ProSelect/demos/getMultipleValue.tsx",
1583
- "component": "ProSelect",
1584
- "file": "demos/getMultipleValue.tsx",
1585
- "title": "提交对象 & 多选情况下",
1586
- "note": "",
1587
- "source": "/**\n * title: 提交对象 & 多选情况下\n * desc: |\n * 适用于部分场景需要提交对象 `{ label:xx, value:'xx'}`, 多选取下拉框的对象，提交给后端多个值 [{ label:xx, value:'xx'},{ label:xx, value:'xx'}]\n */\n\n// @ts-nocheck\n\nimport { FC, useState } from 'react';\nimport { Radio } from 'antd';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nconst dataSource = [\n { value: 'code1', label: '产品名字1', address: '上海' },\n { value: 'code2', label: '产品名字2', address: '北京' },\n { value: 'code3', label: '产品名字3', address: '武汉' },\n { value: 'code4', label: '产品名字4', address: '广州' },\n { value: 'code5', label: '产品名字5', address: '深圳' },\n];\n\nconst dataSource1 = [\n {\n code: '06C3',\n name: '综合意外（个团兼有）New',\n },\n {\n code: '12B4',\n name: '意外险-含标的附加属性（废）',\n },\n {\n code: '12B3',\n name: 'ydt_test_0215_002',\n },\n];\n\nconst Demo: FC = () => {\n const [isView, setMode] = useState(false);\n const [value, setValue] = useState({});\n const [valu1, setValue1] = useState({ code: '06C3', name: '综合意外（个团兼有）New' });\n\n const [values, setValues] = useState();\n const [values1, setValues1] = useState([\n { value: 'code4', label: '产品名字4' },\n { value: 'code5', label: '产品名字5' },\n ]);\n\n return (\n <div>\n <Radio.Group value={isView} onChange={(v) => setMode(v.target.value)}>\n <Radio value={true}>查看模式</Radio>\n <Radio value={false}>编辑模式</Radio>\n </Radio.Group>\n <div style={{ margin: '15px 0' }}>单选:{JSON.stringify(value)}</div>\n <ProSelect\n labelInValue={true}\n value={value}\n onChange={(val) => {\n setValue(val);\n }}\n dataSource={dataSource}\n optionRender={(record) => `${record.label} + ${record.value}`}\n style={{ width: '480px' }}\n />\n <div style={{ margin: '15px 0' }}>单选回填</div>\n\n <ProSelect\n labelInValue={true}\n value={valu1}\n onChange={(val) => {\n setValue1(val);\n }}\n fieldNames={{\n label: 'name',\n value: 'code',\n }}\n dataSource={dataSource1}\n isView={isView}\n optionRender={(record) => `${record.name} + ${record.code}`}\n style={{ width: '480px' }}\n />\n <div style={{ margin: '15px 0' }}>提交给后端多个值:{JSON.stringify(values)}</div>\n\n <ProSelect\n // labelInValue={true}\n mode=\"multiple\"\n value={values}\n onChange={(values) => {\n console.log('values: ', values);\n\n setValues(values);\n }}\n getValueProps={(value) => {\n return value && typeof value === 'string' ? JSON.parse(value) : value;\n }}\n getChangeValue={(value) => {\n return value ? JSON.stringify(value) : value;\n }}\n showCodeName={true}\n dataSource={dataSource}\n style={{ width: '480px' }}\n />\n <div style={{ margin: '15px 0' }}>多选回填</div>\n <ProSelect\n labelInValue={true}\n mode=\"multiple\"\n value={values1}\n onChange={(values) => {\n setValues1(values);\n }}\n isView={isView}\n showCodeName={true}\n dataSource={dataSource}\n style={{ width: '480px' }}\n />\n </div>\n );\n};\n\nexport default Demo;\n"
1588
- },
1589
- {
1590
- "id": "ProSelect/demos/getMultipleValueToString.tsx",
1591
- "component": "ProSelect",
1592
- "file": "demos/getMultipleValueToString.tsx",
1593
- "title": "多选情况下 提交字符串格式",
1594
- "note": "",
1595
- "source": "/**\n * title: 多选情况下 提交字符串格式\n * desc: |\n * 需要把多选的结果转成字符格式给到接口 [1,3,4] ==> '1,3,4' | \"[1,3,4]\" (json.stringify)\n */\n\n// @ts-nocheck\n\nimport { FC, useState } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nconst dataSource = [\n { value: 'code1', label: '产品名字1', address: '上海' },\n { value: 'code2', label: '产品名字2', address: '北京' },\n { value: 'code3', label: '产品名字3', address: '武汉' },\n { value: 'code4', label: '产品名字4', address: '广州' },\n { value: 'code5', label: '产品名字5', address: '深圳' },\n];\n\nconst dataSource1 = [\n {\n code: '06C3',\n name: '综合意外（个团兼有）New',\n },\n {\n code: '12B4',\n name: '意外险-含标的附加属性（废）',\n },\n {\n code: '12B3',\n name: 'ydt_test_0215_002',\n },\n];\n\nconst Demo: FC = () => {\n const [value, setValue] = useState({});\n const [values, setValues] = useState();\n const [values1, setValues1] = useState();\n\n return (\n <div>\n <div style={{ margin: '15px 0' }}>\n 多选值 通过JSON.stringify转换 结果：{JSON.stringify(values)}\n </div>\n <ProSelect\n mode=\"multiple\"\n value={values}\n onChange={(values) => {\n setValues(values);\n }}\n getValueProps={(value) => {\n return value && typeof value === 'string' ? JSON.parse(value) : value;\n }}\n getChangeValue={(value) => {\n return value ? JSON.stringify(value) : value;\n }}\n showCodeName={true}\n dataSource={dataSource}\n style={{ width: '480px' }}\n />\n <div style={{ margin: '15px 0' }}>\n 多选值 通过 , 转换成字符串 结果：{JSON.stringify(values1)}\n </div>\n <ProSelect\n mode=\"multiple\"\n value={values1}\n onChange={(values) => {\n setValues1(values);\n }}\n getValueProps={(value) => {\n return value ? value?.split(',') : value;\n }}\n getChangeValue={(value) => {\n return Array.isArray(value) ? value.join() : value || null;\n }}\n showCodeName={true}\n dataSource={dataSource}\n style={{ width: '480px' }}\n />\n </div>\n );\n};\n\nexport default Demo;\n"
1596
- },
1597
- {
1598
- "id": "ProSelect/demos/tooltipDemo.tsx",
1599
- "component": "ProSelect",
1600
- "file": "demos/tooltipDemo.tsx",
1601
- "title": "超长文字时显示 tooltip",
1602
- "note": "",
1603
- "source": "// @ts-nocheck\nimport { FC } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nconst Demo: FC = () => {\n return (\n <div>\n <ProSelect\n tooltip={true}\n dataSource={[\n { label: '解封后家庭该常备哪些药物?专家来支招', value: 'code1' },\n { label: '解封≠解防!这份新冠疫情居家必备药物清单请收好!', value: 'code2' },\n { label: '疫情解封,赶紧屯的家中常备用药(儿童药篇)', value: 'code3' },\n ]}\n style={{ width: '240px' }}\n />\n </div>\n );\n};\n\nexport default Demo;\n"
1604
- },
1605
- {
1606
- "id": "ProSelect/demos/showCodeName.tsx",
1607
- "component": "ProSelect",
1608
- "file": "demos/showCodeName.tsx",
1609
- "title": "展示 value-label",
1610
- "note": "",
1611
- "source": "import { FC } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\n\nexport const serviceName = () =>\n new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: [\n { label: '产品名字1', value: 'code1' },\n { label: '产品名字2', value: 'code2' },\n ],\n status: 200,\n });\n }, 1000);\n });\n\nconst Demo: FC = () => {\n return (\n <div>\n <ProSelect\n useRequest={{\n service: serviceName,\n }}\n showCodeName\n style={{ width: '240px' }}\n />\n <h4>查看模式</h4>\n <ProSelect\n isView={true}\n useRequest={{\n service: serviceName,\n }}\n value=\"code1\"\n showCodeName\n style={{ width: '240px' }}\n />\n </div>\n );\n};\n\nexport default Demo;\n"
1612
- },
1613
- {
1614
- "id": "ProSelect/demos/getValueObject.tsx",
1615
- "component": "ProSelect",
1616
- "file": "demos/getValueObject.tsx",
1617
- "title": "通过实例获取对应 code 的对象或者列表",
1618
- "note": "",
1619
- "source": "// @ts-nocheck\nimport { FC, useState, useRef } from 'react';\nimport { ProSelect } from '@zat-design/sisyphus-react';\nimport { Button } from 'antd';\nimport type { ProSelectActionType } from '@zat-design/sisyphus-react';\n\nconst dataSource = [\n { label: '上海', value: 'sh' },\n { label: '北京', value: 'bj' },\n { label: '武汉', value: 'wh' },\n];\n\nconst Demo: FC = () => {\n const [v, setV] = useState({\n item: {},\n items: [],\n });\n\n const ref = useRef<ProSelectActionType>(null);\n const getCodeObject = () => {\n setV({\n item: ref.current?.getValueObject('sh'),\n items: ref.current?.getValueObject(['sh', 'bj']),\n });\n };\n\n return (\n <div>\n <ProSelect ref={ref} dataSource={dataSource} style={{ width: '240px' }} />\n <Button onClick={getCodeObject}>点击获取</Button>\n <div style={{ marginTop: '15px' }}>通过实例方法获取值:{JSON.stringify(v)}</div>\n </div>\n );\n};\n\nexport default Demo;\n"
1620
- },
1621
- {
1622
- "id": "ProSelect/demos/all.tsx",
1623
- "component": "ProSelect",
1624
- "file": "demos/all.tsx",
1625
- "title": "完整示例",
1626
- "note": "",
1627
- "source": "/**\n * title: 完整示例\n * desc: |\n * 场景：异步分页检索人员默认查询 100 条，支持模糊异步检索\n */\n\n// @ts-nocheck\n\nimport { FC } from 'react';\nimport { Form } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst fetchData = (values) => {\n console.log('请求成功', values);\n const dataSource = {\n status: 200,\n message: '成功',\n data: [\n {\n id: '1',\n name: '张三',\n account: 'zhangsan',\n },\n {\n id: '2',\n name: '李四',\n account: 'lisi',\n },\n {\n id: '3',\n name: '测试1',\n account: 'ceshi1',\n },\n ],\n };\n\n // 模拟过滤数据\n if (values.query.name) {\n dataSource.data = dataSource.data.filter((item) => item.name.includes(values.query.name));\n }\n\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(dataSource);\n }, 1000);\n });\n};\n\nconst Demo: FC = () => {\n const [form] = Form.useForm();\n\n const columns = [\n {\n type: 'ProSelect',\n label: '核保员',\n name: 'userId',\n fieldProps: {\n // 转换返回值\n fieldNames: {\n label: 'name',\n value: 'id',\n },\n // 下拉列表由account+name组成\n optionRender: (record) => `${record.account}-${record.name}`,\n // 异步请求处理\n useRequest: {\n // 请求服务\n service: fetchData,\n // 默认查询条件, 仅供示例\n options: {\n defaultParams: [\n {\n pageNum: 1,\n pageSize: 10,\n query: {\n post: 1,\n },\n },\n ],\n },\n },\n // Response数据转换\n transformResponse: (res) => {\n return res.data;\n },\n // 检索异步请求value: 为当前输入值 params: 为默认查询条件 run: 为执行查询方法useRequest提供\n onSearch: (value, { run, params }) => {\n params[0].query.name = value;\n run(params[0]);\n },\n },\n },\n ];\n return (\n <div>\n <ProForm form={form} columns={columns} />\n </div>\n );\n};\n\nexport default Demo;\n"
1628
- },
1629
- {
1630
- "id": "ProTimeLimit/demos/base.tsx",
1631
- "component": "ProTimeLimit",
1632
- "file": "demos/base.tsx",
1633
- "title": "基本使用",
1634
- "note": "",
1635
- "source": "import { Col, Row, Space } from 'antd';\nimport React, { useState } from 'react';\nimport { ProTimeLimit } from '@zat-design/sisyphus-react';\n\nconst Base: React.FC = () => {\n const [value, setValue] = useState('2020/01/01');\n\n const handleChange = (value) => {\n // console.log('🚀 ~~> handleChange ~~> value:', value);\n setValue(value);\n };\n\n return (\n <Row>\n <Space orientation=\"vertical\">\n <Col span={8}>\n <ProTimeLimit placeholder=\"基本使用\" />\n </Col>\n <Col span={8}>\n <ProTimeLimit placeholder=\"自定义长期文字\" foreverText=\"长期有效\" />\n </Col>\n <Col span={8}>\n <ProTimeLimit value={value} onChange={handleChange} format=\"YYYY/MM/DD\" />\n </Col>\n <Col span={8}>\n <ProTimeLimit mode=\"RangePicker\" />\n </Col>\n </Space>\n </Row>\n );\n};\n\nexport default Base;\n"
1636
- },
1637
- {
1638
- "id": "ProTimeLimit/demos/valueType.tsx",
1639
- "component": "ProTimeLimit",
1640
- "file": "demos/valueType.tsx",
1641
- "title": "切换 valueType",
1642
- "note": "",
1643
- "source": "import { Col, Row, Space } from 'antd';\nimport React, { useState } from 'react';\nimport { ProTimeLimit } from '@zat-design/sisyphus-react';\n\nconst ValueType: React.FC = () => {\n const [defaultValue, setDefaultValue] = useState();\n const [formatValue, setFormatValue] = useState();\n const [dayjsValue, setDayjsValue] = useState();\n const [ISOValue, setISOValue] = useState();\n\n return (\n <>\n <Space orientation=\"vertical\">\n <span>默认类型 基于format格式确定值类型 </span>\n <Col span={24}>\n <Row align=\"middle\">\n <Col span={8}>\n <ProTimeLimit placeholder=\"默认值类型\" onChange={setDefaultValue} />\n </Col>\n <span>等同于</span>\n <Col span={8}>\n <ProTimeLimit placeholder=\"默认值类型\" format=\"YYYY/MM/DD\" />\n </Col>\n </Row>\n </Col>\n <span>默认使用格式: {defaultValue}</span>\n <Col span={8}>\n <ProTimeLimit\n placeholder=\"改变format值类型\"\n format=\"YYYY/MM/DD 00:00:00\"\n onChange={setFormatValue}\n />\n </Col>\n <span>自定义format类型值: {formatValue ? JSON.stringify(formatValue) : ''}</span>\n <Col span={8}>\n <ProTimeLimit\n placeholder=\"带时分秒\"\n format=\"YYYY-MM-DD HH:mm:ss\"\n onChange={setDayjsValue}\n />\n </Col>\n <span>值为dayjs类型: {dayjsValue ? JSON.stringify(dayjsValue) : ''}</span>\n <Col span={8}>\n <ProTimeLimit placeholder=\"ISO类型\" valueType=\"ISO\" onChange={setISOValue} />\n </Col>\n <span>值为ISO字符串类型: {ISOValue ? JSON.stringify(ISOValue) : ''}</span>\n </Space>\n </>\n );\n};\n\nexport default ValueType;\n"
1644
- },
1645
- {
1646
- "id": "ProTimeLimit/demos/format.tsx",
1647
- "component": "ProTimeLimit",
1648
- "file": "demos/format.tsx",
1649
- "title": "切换日期格式",
1650
- "note": "",
1651
- "source": "import { Col, Row, Space } from 'antd';\nimport React, { useState } from 'react';\nimport { ProTimeLimit } from '@zat-design/sisyphus-react';\n\nconst ValueType: React.FC = () => {\n const [defaultValue, setDefaultValue] = useState();\n const [formatValue, setFormatValue] = useState();\n const [dayjsValue, setDayjsValue] = useState();\n\n return (\n <>\n <Space orientation=\"vertical\">\n <span>默认类型 基于format格式确定值类型 </span>\n <Col span={24}>\n <Row align=\"middle\">\n <Col span={8}>\n <ProTimeLimit placeholder=\"默认值类型\" onChange={setDefaultValue} />\n </Col>\n <span>等同于</span>\n <Col span={8}>\n <ProTimeLimit placeholder=\"默认值类型\" format=\"YYYY-MM-DD HH:mm:ss\" />\n </Col>\n </Row>\n </Col>\n <span>默认使用格式: {defaultValue || ''}</span>\n <br />\n <span>显示时分秒</span>\n <Col span={8}>\n <ProTimeLimit\n placeholder=\"带时分秒\"\n format=\"YYYY-MM-DD HH:mm:ss\"\n onChange={setDayjsValue}\n />\n </Col>\n <span>值为dayjs类型: {dayjsValue || ''}</span>\n <br />\n <span>根据传入日期判断是否永久</span>\n <Col span={8}>\n <ProTimeLimit\n placeholder=\"改变format值类型\"\n foreverTime=\"9999-12-30 23:59:59\"\n foreverFormat=\"YYYY/MM/DD 23:59:59\"\n format=\"YYYY/MM/DD\"\n onChange={setFormatValue}\n />\n </Col>\n <span>自定义format类型值: {formatValue || ''}</span>\n </Space>\n </>\n );\n};\n\nexport default ValueType;\n"
1652
- },
1653
- {
1654
- "id": "ProTimeLimit/demos/formItem.tsx",
1655
- "component": "ProTimeLimit",
1656
- "file": "demos/formItem.tsx",
1657
- "title": "配合 Form.Item 使用",
1658
- "note": "",
1659
- "source": "import { Button, Col, Form, Row } from 'antd';\nimport React, { useState } from 'react';\nimport dayjs from 'dayjs';\nimport ReactJson from 'react-json-view';\nimport { ProTimeLimit } from '@zat-design/sisyphus-react';\n\nconst InForm: React.FC = () => {\n const [state, setState] = useState<any>({ base: dayjs() });\n\n return (\n <Form onFinish={(values) => setState(values)}>\n <Row gutter={12}>\n <Col span={12}>\n <Form.Item name=\"base\" label=\"基本使用\">\n <ProTimeLimit />\n </Form.Item>\n </Col>\n <Col span={12}>\n <Form.Item name=\"range\" label=\"范围选择框\">\n <ProTimeLimit mode=\"RangePicker\" />\n </Form.Item>\n </Col>\n <Col>\n <Button htmlType=\"submit\" type=\"primary\">\n 提交\n </Button>\n </Col>\n </Row>\n <h4>数据源</h4>\n <ReactJson src={state} collapsed />\n </Form>\n );\n};\n\nexport default InForm;\n"
1660
- },
1661
- {
1662
- "id": "ProTimeLimit/demos/inForm.tsx",
1663
- "component": "ProTimeLimit",
1664
- "file": "demos/inForm.tsx",
1665
- "title": "配合 ProForm 使用",
1666
- "note": "",
1667
- "source": "import { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport { ProForm, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport ReactJson from 'react-json-view';\n\nconst InForm: React.FC = () => {\n const [state, setState] = useState('primary');\n const [value, setValue] = useState({});\n\n const columns: ProFormColumnType[] = [\n {\n type: 'ProTimeLimit',\n name: 'base',\n label: '证件有效期',\n fieldProps: {\n onFieldChange: (value, e1, e2) => {\n console.log(value, e1, e2);\n },\n },\n },\n {\n type: 'ProTimeLimit',\n name: 'disabled',\n label: '禁用',\n disabled: true,\n },\n {\n type: 'ProTimeLimit',\n name: 'viewDate',\n label: '查看模式日期',\n },\n {\n type: 'ProTimeLimit',\n name: 'viewForever',\n label: '查看模式长期',\n },\n {\n type: 'ProTimeLimit',\n name: 'range',\n label: '范围选择模式',\n fieldProps: {\n mode: 'RangePicker',\n placeholder: ['请选择', '请选择'],\n },\n },\n ];\n\n return (\n <>\n <Form.Item label=\"查看状态\">\n <Radio.Group onChange={(e) => setState(e.target.value)} value={state}>\n <Radio value=\"primary\">正常</Radio>\n <Radio value=\"disabled\">禁用</Radio>\n <Radio value=\"view\">查看</Radio>\n </Radio.Group>\n </Form.Item>\n\n <ProForm\n span={12}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n initialValues={{\n disabled: '2021-01-01',\n viewDate: '2021-01-01',\n viewForever: '9999-01-01',\n range: ['2023-01-01', '2023-01-02'],\n }}\n columns={columns}\n onFinish={(values) => {\n setValue(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\n\nexport default InForm;\n"
1668
- },
1669
- {
1670
- "id": "ProTree/demos/init.tsx",
1671
- "component": "ProTree",
1672
- "file": "demos/init.tsx",
1673
- "title": "基本使用",
1674
- "note": "",
1675
- "source": "/**\n * title: 基本使用\n * desc: |\n * 默认支持 `dataSource`、`ProEnum` 的 `code` 数据源消费消费、支持字段搜索、支持 `tree` 和 `treeSelect` 2种展现模式、默认展现形式为 Tree。\n */\n\nimport { SmileOutlined } from '@ant-design/icons';\nimport { useSetState } from 'ahooks';\nimport { ProTree } from '@zat-design/sisyphus-react';\n\nconst dataSourceTree = [\n {\n label: '中意财产保险有限公司黑龙江分公司',\n value: 1,\n checkable: false,\n disableCheckbox: true,\n disabled: true,\n },\n {\n label: '中意财产保险有限公司黑龙江分公司市场部',\n value: 2,\n icon: <SmileOutlined />,\n },\n {\n label: '中意财产保险有限公司黑龙江分公司市场营销部黑分专代海洋望奎吉龙',\n value: 'C',\n // isLeaf: true,\n // selectable: true,\n title: '自定义title',\n key: 'selft key',\n icon: <SmileOutlined />,\n children: [\n {\n label: '中意财产-erji',\n value: 'ccA-A',\n children: [\n {\n label: '中意财产-erji',\n value: 11,\n },\n {\n label: '中意财产-sanjii',\n value: 12,\n children: [\n {\n label: '中意财产-erji',\n value: 13,\n },\n {\n label: '中意财产-sanjii',\n value: 14,\n },\n ],\n },\n ],\n },\n {\n label: '中意财产-sanjii',\n value: 'ccA-B',\n children: [\n {\n label: '中意财产-erji',\n value: 'ddA-A',\n },\n {\n label: '中意财产-sanjii',\n value: 'ddA-B',\n },\n ],\n },\n ],\n },\n {\n label: '选项四',\n value: 'D',\n },\n {\n label: '中意财产保险有限公司成都分公司市场部',\n value: 'E',\n },\n];\n\nconst InitDemo = () => {\n const [{ dataTree }, setState] = useSetState({\n checkedKeys: [],\n dataTree: dataSourceTree,\n });\n\n const addLeaf = (key: any, e?: any) => {\n e.stopPropagation();\n const arr = JSON.parse(JSON.stringify(dataTree));\n let flag;\n let index;\n const loop = (items: any) => {\n if (!items) {\n return items;\n }\n items.map((item: any, i: number) => {\n if (item?.value === key) {\n index = i;\n flag = items;\n index = i + 1;\n }\n loop(item?.children);\n return item;\n });\n };\n loop(arr);\n if (flag) {\n flag.splice(index, 0, { label: `新增${index}`, value: Math.random() });\n }\n setState({\n dataTree: arr,\n });\n };\n const deleteLeaf = (key: any, e?: any) => {\n e.stopPropagation();\n const remove = (items: any[]): any[] =>\n items\n .filter((item) => item?.value !== key)\n .map((item) => (item?.children ? { ...item, children: remove(item.children) } : item));\n setState({\n dataTree: remove(dataTree),\n });\n };\n const onSelectCheck = (val?: any, info?: any) => {\n console.info('复选点击事件 ', val, info);\n return Promise.resolve();\n };\n\n return (\n <>\n <p style={{ margin: '16px 0' }}>\n 配置多个操作按钮组件内部会将其收入一个icon里(必须手动传入dataSource )\n </p>\n <ProTree\n placeholder=\"请输入搜索字符\"\n expandedKeys={['ccA-A']}\n value=\"ccA-A\"\n dataSource={dataTree}\n isRadioSelect={true}\n showLine={true}\n checkable={false}\n showIcon={true}\n // value={checkedKeys}\n onSelect={onSelectCheck}\n menu={(key: any) => [\n <div key=\"add\" className=\"icon-item icon-add\" onClick={(e) => addLeaf(key, e)}>\n 新增\n </div>,\n <div\n key=\"delete\"\n className=\"icon-item\"\n style={{ color: '#FF005F' }}\n onClick={(e) => deleteLeaf(key, e)}\n >\n 删除\n </div>,\n ]}\n />\n </>\n );\n};\nexport default InitDemo;\n"
1676
- },
1677
- {
1678
- "id": "ProTree/demos/treeSelect.tsx",
1679
- "component": "ProTree",
1680
- "file": "demos/treeSelect.tsx",
1681
- "title": "下拉树",
1682
- "note": "",
1683
- "source": "/**\n * title: 下拉树\n * desc: |\n * 展现形式为 ProTreeSelect。\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { titleCodeDataSource } from './data/datasource';\n\nconst ShowDemo = () => {\n const onChange = (val) => {\n console.info(val);\n };\n const treeRequest = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n code: 200,\n data: {\n list: titleCodeDataSource,\n },\n });\n }, 1000);\n });\n };\n\n const onFinish = (values) => {\n console.log(values);\n };\n\n return (\n <>\n <p style={{ margin: '16px 0' }}>使用 mode 为 treeSelect 展示为树形式</p>\n <ProForm\n columns={[\n {\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n fieldProps: {\n mode: 'treeSelect',\n fieldNames: {\n label: 'title',\n value: 'code',\n children: 'childDeptList',\n },\n checkable: false,\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={onFinish}\n />\n </>\n );\n};\nexport default ShowDemo;\n"
1684
- },
1685
- {
1686
- "id": "ProTree/demos/checkLeaf.tsx",
1687
- "component": "ProTree",
1688
- "file": "demos/checkLeaf.tsx",
1689
- "title": "只选叶子节点",
1690
- "note": "",
1691
- "source": "/**\n * title: 只选叶子节点\n * desc: |\n * 下拉树单选模式下配置 `checkLeaf` 后只能选择叶子节点，非叶子节点整行置灰禁用。\n */\n\nimport { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { dataSourceTreeFooter } from './data/datasource';\n\nconst CheckLeafDemo = () => {\n const [data, setData] = useState({});\n\n return (\n <>\n <p style={{ margin: '16px 0' }}>\n 配置 <code>checkLeaf</code> 后只能选择叶子节点，非叶子节点整行置灰禁用。\n </p>\n <ProForm\n columns={[\n {\n type: 'ProTree',\n label: '单选',\n name: 'leafSingle',\n span: 12,\n fieldProps: {\n mode: 'treeSelect',\n checkable: false,\n checkLeaf: true,\n dataSource: dataSourceTreeFooter,\n },\n },\n ]}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} />\n </>\n );\n};\n\nexport default CheckLeafDemo;\n"
1692
- },
1693
- {
1694
- "id": "ProTree/demos/full.tsx",
1695
- "component": "ProTree",
1696
- "file": "demos/full.tsx",
1697
- "title": "配置顶部底部",
1698
- "note": "",
1699
- "source": "/**\n * title: 配置顶部底部\n * desc: |\n * 带顶部、底部、搜索、操作按钮。\n */\n\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { dataSourceTreeFooter } from './data/datasource';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '完整功能演示',\n placeholder: '请输入搜索字符',\n dataSource: dataSourceTreeFooter,\n checkable: true,\n checkStrictly: true,\n style: {\n height: '400px',\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1700
- },
1701
- {
1702
- "id": "ProTree/demos/request.tsx",
1703
- "component": "ProTree",
1704
- "file": "demos/request.tsx",
1705
- "title": "配置枚举接口",
1706
- "note": "",
1707
- "source": "/**\n * title: 配置枚举接口\n * desc: |\n * 异步默认取值，按照框架数据结构默认处理、当不满足数据格式时候、可以使用 `transformResponse` 进行转换\n */\n\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '请求功能演示',\n placeholder: '请输入搜索字符',\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1708
- },
1709
- {
1710
- "id": "ProTree/demos/loading.tsx",
1711
- "component": "ProTree",
1712
- "file": "demos/loading.tsx",
1713
- "title": "开启加载中",
1714
- "note": "",
1715
- "source": "/**\n * title: 开启加载中\n * desc: |\n * 点击树节点时开启`loading`，需要配置`onSelect`返回`Promise`关闭`loading`\n */\n\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n const onSelect = (val: [], info?: any) => {\n console.info('select ', val, info);\n return new Promise((resolve: any) => {\n setTimeout(() => {\n resolve();\n }, 2000);\n });\n };\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '加载状态演示',\n placeholder: '请输入搜索字符',\n loading: true,\n checkable: true,\n onSelect,\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1716
- },
1717
- {
1718
- "id": "ProTree/demos/disabled.tsx",
1719
- "component": "ProTree",
1720
- "file": "demos/disabled.tsx",
1721
- "title": "预览模式",
1722
- "note": "",
1723
- "source": "import { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '禁用状态演示',\n disabled: true,\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1724
- },
1725
- {
1726
- "id": "ProTree/demos/checkAll.tsx",
1727
- "component": "ProTree",
1728
- "file": "demos/checkAll.tsx",
1729
- "title": "全选",
1730
- "note": "",
1731
- "source": "/**\n * title: 全选\n * desc: |\n * 当设置 `allValue` 属性、会开启全选功能、此时回调 onChange 的值 value 为 `allValue`。当全选场景需要提交给后端为另外一个别名字段时、可以通过判断 value 是否为 `allValue` 进行设置\n */\n\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '全选功能演示',\n allValue: 'all',\n checkable: true,\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1732
- },
1733
- {
1734
- "id": "ProTree/demos/checkStrictly.tsx",
1735
- "component": "ProTree",
1736
- "file": "demos/checkStrictly.tsx",
1737
- "title": "粘连选择",
1738
- "note": "",
1739
- "source": "/**\n * title: 粘连选择\n * desc: |\n * `checkStrictly` 开启后 Tree 模式下的父子节点选中状态不再关联、谨慎使用\n */\n\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '严格选择模式演示',\n checkStrictly: true,\n checkable: true,\n allValue: 'all',\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1740
- },
1741
- {
1742
- "id": "ProTree/demos/optionRender.tsx",
1743
- "component": "ProTree",
1744
- "file": "demos/optionRender.tsx",
1745
- "title": "自定义渲染树节点",
1746
- "note": "",
1747
- "source": "/**\n * title: 自定义渲染树节点\n * desc: |\n * 自定义 `title` 渲染、并对搜索字段进行 高亮 展示\n */\n\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '自定义渲染演示',\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n optionRender: (item: any, searchStr: string) => {\n const label = `${item?.value} - ${item?.label}`;\n return <span>{label}</span>;\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1748
- },
1749
- {
1750
- "id": "ProTree/demos/form.tsx",
1751
- "component": "ProTree",
1752
- "file": "demos/form.tsx",
1753
- "title": "结合ProForm",
1754
- "note": "",
1755
- "source": "import React from 'react';\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n // showCodeName 场景下 onFieldChange 带出的 option，用于验证 label 未被 code-name 污染\n fieldChangeOption: Record<string, any>;\n}\n\n// 机构树数据，cname/code 为自定义 fieldNames\nconst orgDataSource = [\n {\n code: '44000000',\n cname: '广东分公司',\n children: [\n { code: '44010000', cname: '广州分公司' },\n { code: '44020000', cname: '韶关分公司' },\n ],\n },\n];\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value, fieldChangeOption }, setState] = useSetState<StateProps>({\n value: [],\n fieldChangeOption: {},\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTreeCheck',\n required: true,\n fieldProps: {\n title: '开启labelInValue 模式',\n mode: 'treeSelect',\n checkable: false,\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n\n {/* 验证修复：showCodeName 仅影响展示，onFieldChange 带出的 option.label 应为原始名称 */}\n <ProForm\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '业务归属机构',\n name: 'newHandlerOrgCode',\n required: true,\n fieldProps: {\n mode: 'treeSelect',\n fieldNames: {\n label: 'cname',\n value: 'code',\n children: 'children',\n },\n dataSource: orgDataSource,\n treeCheckable: false,\n checkable: false,\n showCodeName: true,\n onFieldChange(_value, _record, { option }) {\n // 期望 option 形如 { label: '韶关分公司', value: '44020000' }\n // 而非 { label: '44020000-韶关分公司', value: '44020000' }\n setState({ fieldChangeOption: option });\n console.log('onFieldChange option:', option);\n },\n },\n },\n ]}\n />\n <ReactJson src={fieldChangeOption} />\n </>\n );\n};\nexport default InitDemo;\n"
1756
- },
1757
- {
1758
- "id": "ProTree/demos/formEllipse.tsx",
1759
- "component": "ProTree",
1760
- "file": "demos/formEllipse.tsx",
1761
- "title": "结合ProForm",
1762
- "note": "",
1763
- "source": "/**\n * title: 结合ProForm\n * desc: |\n * 配置ellipse\n */\n\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeFieldNameRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '省略号功能演示',\n fieldNames: {\n label: 'title',\n value: 'code',\n children: 'dtoList',\n },\n style: {\n height: '300px',\n },\n showEllipse: true,\n ellipseWidth: '300px',\n useRequest: {\n service: treeFieldNameRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1764
- },
1765
- {
1766
- "id": "ProTree/demos/all.tsx",
1767
- "component": "ProTree",
1768
- "file": "demos/all.tsx",
1769
- "title": "完整功能",
1770
- "note": "",
1771
- "source": "/**\n * title: 完整功能\n * desc: |\n * 完整功能如下\n */\n\nimport { Form } from 'antd';\nimport { useSetState } from 'ahooks';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeFieldNameRequest } from './data/mock';\n\ninterface StateProps {\n value: string[];\n}\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [{ value }, setState] = useSetState<StateProps>({\n value: [],\n });\n\n return (\n <>\n <ProForm\n form={form}\n columns={[\n {\n span: 24,\n type: 'ProTree',\n label: '树',\n name: 'proTree',\n required: true,\n fieldProps: {\n title: '综合配置演示',\n fieldNames: {\n label: 'title',\n value: 'code',\n children: 'dtoList',\n },\n checkable: true,\n labelInValue: true,\n multiple: true,\n allValue: 'all',\n useRequest: {\n service: treeFieldNameRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n onFinish={(values) => {\n setState({\n value: values,\n });\n console.log(values);\n }}\n />\n <ReactJson src={value} />\n </>\n );\n};\nexport default InitDemo;\n"
1772
- },
1773
- {
1774
- "id": "ProTreeModal/demos/init.tsx",
1775
- "component": "ProTreeModal",
1776
- "file": "demos/init.tsx",
1777
- "title": "基本使用",
1778
- "note": "",
1779
- "source": "/**\n * title: 基本使用\n * desc: |\n * 默认支持 `dataSource`、`ProEnum` 的 `code` 数据源消费消费、支持字段搜索、支持 `list` 和 `tree` 两种展现模式、默认展现形式为 List\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport dataSource from './data/datasource';\nimport { treeRequest } from './data/mock';\n\nconst InitDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n label: '列表模式',\n name: 'list',\n type: 'ProTreeModal',\n fieldProps: {\n mode: 'list',\n dataSource,\n },\n },\n {\n type: 'ProCollapse',\n fieldProps: {\n level: '2',\n title: '使用 mode 为 tree 展示为树形式、并设置 style',\n children: [\n {\n label: '树模式',\n name: 'tree',\n type: 'ProTreeModal',\n required: true,\n fieldProps: {\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n style: { width: '300px' },\n },\n },\n ],\n },\n },\n ]}\n />\n </>\n );\n};\nexport default InitDemo;\n"
1780
- },
1781
- {
1782
- "id": "ProTreeModal/demos/request.tsx",
1783
- "component": "ProTreeModal",
1784
- "file": "demos/request.tsx",
1785
- "title": "使用接口获取数据",
1786
- "note": "当为 list 展示形式时、默认数据如下： 当为 tree 展示形式时、默认数据如下：",
1787
- "source": "/**\n * title: 使用接口获取数据\n * desc: |\n * 异步默认取值，按照框架数据结构默认处理、当不满足数据格式时候、可以使用 `transformResponse` 进行转换\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { serverRequest, treeRequest } from './data/mock';\n\nconst RequestDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n label: '列表模式',\n name: 'list',\n type: 'ProTreeModal',\n fieldProps: {\n mode: 'list',\n useRequest: {\n service: serverRequest,\n },\n transformResponse: (res) => {\n if (res.code === 200) {\n return res.data.list;\n }\n },\n },\n },\n {\n type: 'ProCollapse',\n fieldProps: {\n level: '2',\n title: '使用 mode 为 tree 展示为树形式',\n children: [\n {\n label: '树模式',\n name: 'tree',\n type: 'ProTreeModal',\n fieldProps: {\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n style: { width: '300px' },\n },\n },\n ],\n },\n },\n ]}\n />\n </>\n );\n};\nexport default RequestDemo;\n"
1788
- },
1789
- {
1790
- "id": "ProTreeModal/demos/showCodeName.tsx",
1791
- "component": "ProTreeModal",
1792
- "file": "demos/showCodeName.tsx",
1793
- "title": "展示 value-label",
1794
- "note": "",
1795
- "source": "/**\n * title: 展示 value-label\n * desc: |\n * `showCodeName` 支持展示 `value-label` 形式\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport dataSource from './data/datasource';\nimport { treeRequest } from './data/mock';\n\nconst ShowDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n type: 'ProTreeModal',\n name: 'list',\n label: 'list模式',\n fieldProps: {\n mode: 'list',\n dataSource,\n showCodeName: true,\n },\n },\n {\n type: 'ProTreeModal',\n name: 'tree',\n label: '树模式',\n fieldProps: {\n showCodeName: true,\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n />\n </>\n );\n};\nexport default ShowDemo;\n"
1796
- },
1797
- {
1798
- "id": "ProTreeModal/demos/fieldNames.tsx",
1799
- "component": "ProTreeModal",
1800
- "file": "demos/fieldNames.tsx",
1801
- "title": "字段映射 fieldNames",
1802
- "note": "",
1803
- "source": "/**\n * title: 字段映射 fieldNames\n * desc: |\n * 支持自定义 `fieldNames`\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeFieldNameRequest } from './data/mock';\n\nconst dataSource: any = [\n {\n title: '中意财产保险有限公司黑龙江分公司',\n code: 'A',\n },\n {\n title: '中意财产保险有限公司黑龙江分公司市场部',\n code: 'B',\n },\n {\n title: '中意财产保险有限公司黑龙江分公司市场营销部黑分专代海洋望奎吉龙',\n code: 'C',\n },\n {\n title: '选项四',\n code: 'D',\n },\n {\n title: '中意财产保险有限公司成都分公司市场部',\n code: 'E',\n },\n];\n\nconst FieldNamesDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n type: 'ProTreeModal',\n name: 'list',\n label: 'list模式',\n fieldProps: {\n mode: 'list',\n fieldNames: {\n label: 'title',\n value: 'code',\n },\n dataSource,\n },\n },\n {\n type: 'ProTreeModal',\n name: 'tree',\n label: '树模式',\n fieldProps: {\n useRequest: {\n service: treeFieldNameRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n fieldNames: {\n label: 'title',\n value: 'code',\n children: 'dtoList',\n },\n },\n },\n ]}\n />\n </>\n );\n};\nexport default FieldNamesDemo;\n"
1804
- },
1805
- {
1806
- "id": "ProTreeModal/demos/cascader.tsx",
1807
- "component": "ProTreeModal",
1808
- "file": "demos/cascader.tsx",
1809
- "title": "级联展示",
1810
- "note": "",
1811
- "source": "/**\n * title: 级联展示\n * desc: |\n * 使用 `mode:Cascader` 展示级联选择\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { cascaderRequest } from './data/mock';\n\nconst CascaderDemo = () => {\n return (\n <>\n <p>展示为 cascader 联动、并控制最多、最少选择</p>\n <ProForm\n columns={[\n {\n type: 'ProTreeModal',\n name: 'cascader',\n fieldProps: {\n useRequest: {\n service: cascaderRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n mode: 'Cascader',\n draggable: true,\n allValue: 'all',\n min: 2,\n max: 10,\n },\n },\n ]}\n />\n </>\n );\n};\nexport default CascaderDemo;\n"
1812
- },
1813
- {
1814
- "id": "ProTreeModal/demos/tags.tsx",
1815
- "component": "ProTreeModal",
1816
- "file": "demos/tags.tsx",
1817
- "title": "标签 tags",
1818
- "note": "",
1819
- "source": "import { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\nconst OptionRenderDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n type: 'ProTreeModal',\n label: 'tag模式',\n name: 'tag',\n fieldProps: {\n tags: ['公司', '部门', '组织'],\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n />\n </>\n );\n};\nexport default OptionRenderDemo;\n"
1820
- },
1821
- {
1822
- "id": "ProTreeModal/demos/optionRender.tsx",
1823
- "component": "ProTreeModal",
1824
- "file": "demos/optionRender.tsx",
1825
- "title": "自定义渲染",
1826
- "note": "",
1827
- "source": "/**\n * title: 自定义渲染\n * desc: |\n * 自定义 `title` 渲染、并对搜索字段进行 高亮 展示\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport dataSource from './data/datasource';\nimport { treeRequest } from './data/mock';\nimport SearchTitle from '../components/SearchTitle';\n\nconst OptionRenderDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n label: '列表模式',\n name: 'list',\n type: 'ProTreeModal',\n fieldProps: {\n mode: 'list',\n dataSource,\n optionRender: (item: any, searchStr: string) => {\n const label = `${item.value} - ${item.label.slice(3)}`;\n return <SearchTitle label={label} searchStr={searchStr} />;\n },\n },\n },\n {\n label: '树模式',\n name: 'tree',\n type: 'ProTreeModal',\n fieldProps: {\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (res) => {\n if (res.code === 200) {\n return res.data.list;\n }\n },\n optionRender: (item: any, searchStr: string) => {\n const label = `${item.value.slice(10)} - ${item.label.slice(3)}`;\n return <SearchTitle label={label} searchStr={searchStr} />;\n },\n },\n },\n ]}\n />\n </>\n );\n};\nexport default OptionRenderDemo;\n"
1828
- },
1829
- {
1830
- "id": "ProTreeModal/demos/span.tsx",
1831
- "component": "ProTreeModal",
1832
- "file": "demos/span.tsx",
1833
- "title": "list 下多列展示",
1834
- "note": "",
1835
- "source": "/**\n * title: list 下多列展示\n * desc: |\n * 使用 `span:8` 一行可展示 3 个\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\n\nconst dataSource: any = [\n {\n label: '协议名称',\n value: 'agreementName',\n },\n {\n label: '归属渠道',\n value: 'belongChannelName',\n },\n {\n label: '渠道类型',\n value: 'belongChannelType',\n },\n {\n label: '协议代码',\n value: 'agreementNo',\n },\n {\n label: '协议状态',\n value: 'status',\n },\n {\n label: '审核状态',\n value: 'auditStatus',\n },\n {\n label: '协议生效日期',\n value: 'beginDate',\n },\n {\n label: '协议失效日期',\n value: 'endDate',\n fixed: 'right',\n },\n];\nconst SpanDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n type: 'ProTreeModal',\n label: 'span',\n name: 'span',\n fieldProps: {\n mode: 'list',\n span: 8,\n draggable: true,\n dataSource,\n allValue: 'all',\n },\n },\n ]}\n />\n </>\n );\n};\nexport default SpanDemo;\n"
1836
- },
1837
- {
1838
- "id": "ProTreeModal/demos/appoint.tsx",
1839
- "component": "ProTreeModal",
1840
- "file": "demos/appoint.tsx",
1841
- "title": "指定模式",
1842
- "note": "",
1843
- "source": "/**\n * title: 指定模式\n * desc: |\n * 当设置 `mode` 为 `appoint`、会开启指定模式布局、如下\n */\n\nimport { useSetState } from 'ahooks';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport dataSource from './data/datasource';\nimport treeData from './data';\n\nconst DisabledDemo = () => {\n const [state, setState] = useSetState({\n value1: 'all',\n value2: ['1100333', '999888855', '387', '1100332'],\n });\n\n return (\n <>\n <ProForm\n initialValues={{ list: 'all', tree: ['1100333', '999888855', '387', '1100332'] }}\n span={24}\n columns={[\n {\n type: 'ProTreeModal',\n name: 'list',\n label: '人员',\n fieldProps: {\n appoint: true,\n allValue: 'all',\n draggable: true,\n dataSource,\n },\n },\n {\n type: 'ProTreeModal',\n name: 'tree',\n label: '部门',\n fieldProps: {\n appoint: true,\n allValue: 'all',\n dataSource: treeData,\n },\n },\n ]}\n />\n </>\n );\n};\nexport default DisabledDemo;\n"
1844
- },
1845
- {
1846
- "id": "ProTreeModal/demos/draggable.tsx",
1847
- "component": "ProTreeModal",
1848
- "file": "demos/draggable.tsx",
1849
- "title": "传入 draggable 开启右侧选项排序",
1850
- "note": "",
1851
- "source": "/**\n * title: 传入 draggable 开启右侧选项排序\n * desc: |\n * 通过设置 `draggable` 已选择可以进行拖动排序\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport dataSource from './data/datasource';\nimport treeData from './data';\n\nconst DisabledDemo = () => {\n return (\n <>\n <ProForm\n initialValues={{ tree: ['1100333', '999888855', '387', '1100332'] }}\n span={24}\n columns={[\n {\n type: 'ProTreeModal',\n label: 'list模式',\n name: 'list',\n fieldProps: {\n mode: 'list',\n draggable: true,\n dataSource,\n },\n },\n {\n type: 'ProTreeModal',\n label: '树模式并开启粘连选择',\n name: 'tree',\n fieldProps: {\n dataSource: treeData,\n checkStrictly: true,\n draggable: true,\n },\n },\n ]}\n />\n </>\n );\n};\nexport default DisabledDemo;\n"
1852
- },
1853
- {
1854
- "id": "ProTreeModal/demos/checkStrictly.tsx",
1855
- "component": "ProTreeModal",
1856
- "file": "demos/checkStrictly.tsx",
1857
- "title": "粘连选择",
1858
- "note": "",
1859
- "source": "/**\n * title: 粘连选择\n * desc: |\n * `checkStrictly` 开启后 Tree 模式下的父子节点选中状态不再关联、谨慎使用\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\n\nconst CheckStrictlyDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n type: 'ProTreeModal',\n label: '粘连选择',\n name: 'checkStrictly',\n fieldProps: {\n allValue: 'all',\n checkStrictly: true,\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n />\n </>\n );\n};\nexport default CheckStrictlyDemo;\n"
1860
- },
1861
- {
1862
- "id": "ProTreeModal/demos/labelInValue.tsx",
1863
- "component": "ProTreeModal",
1864
- "file": "demos/labelInValue.tsx",
1865
- "title": "提交对象",
1866
- "note": "",
1867
- "source": "/**\n * title: 提交对象\n * desc: |\n * 开启 `labelInValue` 模式后、回调 onChange 的值 value 为 `[{ label:\"label\", value: \"value\"}]` 形式、请按需使用\n */\n\nimport ReactJson from 'react-json-view';\nimport { useSetState } from 'ahooks';\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport dataSource from './data/datasource';\nimport { treeRequest } from './data/mock';\n\nconst InitDemo = () => {\n const [form] = ProForm.useForm();\n const [state, setState] = useSetState({\n list: [\n {\n label: '选项四',\n value: 'D',\n title: '选项四',\n },\n ],\n });\n return (\n <>\n <ProForm\n form={form}\n span={24}\n initialValues={{ list: state.list }}\n columns={[\n {\n type: 'ProTreeModal',\n label: 'list模式',\n name: 'list',\n fieldProps: {\n labelInValue: true,\n mode: 'list',\n dataSource,\n draggable: true,\n onChange: (val: any) => {\n setState({ list: val });\n },\n },\n },\n {\n type: 'ProTreeModal',\n label: 'list模式',\n name: 'tree',\n fieldProps: {\n labelInValue: true,\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n />\n\n <ReactJson src={state.list} />\n </>\n );\n};\nexport default InitDemo;\n"
1868
- },
1869
- {
1870
- "id": "ProTreeModal/demos/max.tsx",
1871
- "component": "ProTreeModal",
1872
- "file": "demos/max.tsx",
1873
- "title": "选择数量校验",
1874
- "note": "",
1875
- "source": "/**\n * title: 选择数量校验\n * desc: |\n * 通过设置 `min`、`max` 可以控制选择的个数\n */\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\nimport dataSource from './data/datasource';\n\nconst MaxDemo = () => {\n return (\n <>\n <ProForm\n span={24}\n columns={[\n {\n type: 'ProTreeModal',\n label: 'list模式',\n name: 'list',\n fieldProps: {\n mode: 'list',\n dataSource,\n min: 2,\n max: 4,\n allValue: 'all',\n },\n },\n {\n type: 'ProTreeModal',\n label: '树模式',\n name: 'tree',\n fieldProps: {\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n min: 10,\n max: 19,\n allValue: 'all',\n },\n },\n ]}\n />\n </>\n );\n};\nexport default MaxDemo;\n"
1876
- },
1877
- {
1878
- "id": "ProTreeModal/demos/trigger.tsx",
1879
- "component": "ProTreeModal",
1880
- "file": "demos/trigger.tsx",
1881
- "title": "自定义 trigger",
1882
- "note": "",
1883
- "source": "/**\n * title: 自定义 trigger\n * desc: |\n * 支持自定义触发弹框、使用 `trigger`、返回 ReactNode 即可\n */\n\nimport { Button } from 'antd';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport dataSource from './data/datasource';\n\nconst TriggerDemo = () => {\n return (\n <>\n <ProForm\n columns={[\n {\n type: 'ProTreeModal',\n label: '打开',\n name: 'trigger',\n fieldProps: {\n mode: 'list',\n dataSource,\n trigger: <Button>打开</Button>,\n },\n },\n ]}\n />\n </>\n );\n};\nexport default TriggerDemo;\n"
1884
- },
1885
- {
1886
- "id": "ProTreeModal/demos/disabled.tsx",
1887
- "component": "ProTreeModal",
1888
- "file": "demos/disabled.tsx",
1889
- "title": "禁用&查看",
1890
- "note": "",
1891
- "source": "import { ProForm } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\nimport dataSource from './data/datasource';\n\nconst DisabledDemo = () => {\n return (\n <>\n <ProForm\n span={12}\n disabled\n initialValues={{ list: ['A', 'B'] }}\n columns={[\n {\n type: 'ProTreeModal',\n label: 'list 模式',\n name: 'list',\n fieldProps: {\n mode: 'list',\n dataSource,\n },\n },\n {\n type: 'ProTreeModal',\n label: '树 模式',\n name: 'tree',\n fieldProps: {\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ]}\n />\n <ProForm\n span={12}\n isView\n initialValues={{ list1: ['A', 'B'] }}\n columns={[\n {\n type: 'ProCollapse',\n fieldProps: {\n title: '查看模式',\n level: '2',\n children: [\n {\n type: 'ProTreeModal',\n label: 'list 模式',\n name: 'list1',\n fieldProps: {\n mode: 'list',\n dataSource,\n },\n },\n {\n type: 'ProTreeModal',\n label: '树 模式',\n name: 'tree1',\n fieldProps: {\n useRequest: {\n service: treeRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n },\n },\n ],\n },\n },\n ]}\n />\n </>\n );\n};\nexport default DisabledDemo;\n"
1892
- },
1893
- {
1894
- "id": "ProTreeModal/demos/checkAll.tsx",
1895
- "component": "ProTreeModal",
1896
- "file": "demos/checkAll.tsx",
1897
- "title": "禁用&查看",
1898
- "note": "<!-- ## 全选模式 当设置 allValue 属性、会开启全选功能、此时回调 onChange 的值 value 为 allValue。**当全选场景需要提交给后端为另外一个别名字段时、可以通过判断 value 是否为 allValue 进行设置**",
1899
- "source": "import { useSetState } from 'ahooks';\nimport { ProTreeModal } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\nimport dataSource from './data/datasource';\n\nconst DisabledDemo = () => {\n const [state, setState] = useSetState({\n value1: ['A', 'B'],\n value2: [],\n });\n\n return (\n <>\n <p style={{ margin: '16px 0' }}>\n 提交内容为 {JSON.stringify(state.value1)}、当全选时、提交为 all\n </p>\n\n <ProTreeModal\n value={state.value1}\n onChange={(allValue) => {\n setState({\n value1: allValue,\n });\n }}\n mode=\"list\"\n allValue=\"all\"\n dataSource={dataSource}\n />\n\n <p style={{ margin: '16px 0' }}>使用 mode 为 tree 展示为树形式</p>\n <ProTreeModal\n allValue=\"all\"\n useRequest={{\n service: treeRequest,\n }}\n value={state.value2}\n onChange={(allValue) => {\n setState({\n value2: allValue,\n });\n }}\n transformResponse={(resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n }}\n />\n <p style={{ margin: '16px 0' }}>\n 提交内容为 {JSON.stringify(state.value2)}、当全选时、提交为 all\n </p>\n </>\n );\n};\nexport default DisabledDemo;\n"
1900
- },
1901
- {
1902
- "id": "ProTreeModal/demos/checkAll1.tsx",
1903
- "component": "ProTreeModal",
1904
- "file": "demos/checkAll1.tsx",
1905
- "title": "禁用&查看",
1906
- "note": "",
1907
- "source": "/**\n * title: 禁用&查看\n * desc: |\n * 当设置 `allValue` 属性、`value` 默认值为`allValue`、会自动全部选中\n */\n\nimport { useSetState } from 'ahooks';\nimport { ProTreeModal } from '@zat-design/sisyphus-react';\nimport { treeRequest } from './data/mock';\nimport dataSource from './data/datasource';\n\nconst DisabledDemo = () => {\n const [state, setState] = useSetState({\n value1: 'all',\n value2: 'all',\n });\n\n return (\n <>\n <ProTreeModal\n value={state.value1}\n onChange={(allValue) => {\n setState({\n value1: allValue,\n });\n }}\n mode=\"list\"\n allValue=\"all\"\n dataSource={dataSource}\n />\n <p style={{ margin: '16px 0' }}>使用 mode 为 tree 展示为树形式</p>\n <ProTreeModal\n allValue=\"all\"\n useRequest={{\n service: treeRequest,\n }}\n value={state.value2}\n onChange={(allValue) => {\n setState({\n value2: allValue,\n });\n }}\n transformResponse={(resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n }}\n />\n </>\n );\n};\nexport default DisabledDemo;\n"
1908
- },
1909
- {
1910
- "id": "ProTreeModal/demos/all.tsx",
1911
- "component": "ProTreeModal",
1912
- "file": "demos/all.tsx",
1913
- "title": "完整功能",
1914
- "note": "",
1915
- "source": "/**\n * title: 完整功能\n * desc: |\n * 完整功能如下\n */\n\nimport { Form } from 'antd';\nimport ReactJson from 'react-json-view';\nimport { useSetState } from 'ahooks';\n\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '../../ProForm/components/render/propsType';\nimport { treeFieldNameRequest } from './data/mock';\n\ninterface StateProps {\n props: {\n showCodeName: boolean;\n checkStrictly: boolean;\n labelInValue: boolean;\n allValue: boolean;\n disabled: string;\n tags: boolean;\n optionRender: boolean;\n proTreeModal: any;\n mode: string;\n style: '';\n };\n value: string[];\n}\n\nconst initProps = {\n mode: 'tree',\n appointModal: 'all',\n showCodeName: false,\n checkStrictly: false,\n labelInValue: false,\n allValue: false,\n disabled: 'edit',\n tags: false,\n optionRender: false,\n style: null,\n proTreeModal: [],\n};\n\nconst InitDemo = () => {\n const [form] = Form.useForm();\n const [state, setState] = useSetState<StateProps>({\n props: {\n ...initProps,\n },\n value: [],\n });\n\n const onValuesChange = (values) => {\n setState({\n props: {\n ...state.props,\n ...values,\n proTreeModal:\n values === 'all' // 全选模式返回 all\n ? {\n value: 'all',\n }\n : values.proTreeModal,\n },\n });\n };\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Radio',\n label: '模式',\n name: 'mode',\n fieldProps: {\n dataSource: [\n { value: 'tree', label: '树' },\n { value: 'list', label: '列表' },\n ],\n },\n },\n { type: 'Switch', label: 'showCodeName', name: 'showCodeName' },\n { type: 'Switch', label: 'checkStrictly', name: 'checkStrictly' },\n { type: 'Switch', label: 'labelInValue', name: 'labelInValue' },\n { type: 'Switch', label: '全选', name: 'allValue' },\n { type: 'Switch', label: 'Tags模式', name: 'tags' },\n { type: 'Switch', label: 'optionRender', name: 'optionRender' },\n {\n type: 'Radio',\n label: '禁用/查看模式',\n name: 'disabled',\n fieldProps: {\n fieldNames: { label: 'name', value: 'code' },\n dataSource: [\n { code: 'edit', name: '编辑' },\n { code: 'disabled', name: '禁用' },\n { code: 'disabledBefore', name: '禁用指定' },\n { code: 'isView', name: '查看' },\n ],\n },\n },\n {\n type: 'Select',\n label: '设置样式',\n name: 'style',\n fieldProps: {\n dataSource: [\n { value: '300px', name: '300px' },\n { value: '600px', name: '600px' },\n ],\n },\n },\n {\n type: 'ProTreeModal',\n label: '弹框选择树',\n name: 'proTreeModal',\n\n hiddenNames: ['isAllOrganization'],\n required: true,\n span: 24,\n fieldProps: {\n title: '开启labelInValue 模式',\n fieldNames: {\n label: 'title',\n value: 'code',\n children: 'dtoList',\n },\n showCodeName: true,\n useRequest: {\n service: treeFieldNameRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n onFieldChange: (value, record, { form }) => {\n // form.setFieldsValue({\n // isAllOrganization: value === 'all' ? 'Y' : 'N',\n // });\n },\n ...(state.props as any),\n tags: state.props.tags ? ['一级', '二级', '三级'] : [],\n optionRender: state.props.optionRender ? (record) => record.code : null,\n style: state.props.style ? { width: state.props.style } : null,\n allValue: state.props.allValue ? 'all' : undefined,\n disabled: state.props.disabled === 'disabled',\n isView: state.props.disabled === 'isView',\n },\n },\n {\n type: 'ProTreeModal',\n label: '指定模式',\n name: 'appointModal',\n required: true,\n span: 24,\n disabled:\n state.props.disabled === 'disabledBefore'\n ? [true, false]\n : state.props.disabled === 'disabled',\n isView: state.props.disabled === 'disabledBefore' ? false : state.props.disabled === 'isView',\n fieldProps: {\n appoint: true,\n appointProps: {\n disabled: [true, false],\n },\n title: '指定模式',\n fieldNames: {\n label: 'title',\n value: 'code',\n children: 'dtoList',\n },\n showCodeName: true,\n useRequest: {\n service: treeFieldNameRequest,\n },\n transformResponse: (resp) => {\n if (resp.code === 200) {\n return resp.data.list;\n }\n },\n allValue: 'all',\n style: state.props.style ? { width: state.props.style } : null,\n },\n },\n ];\n\n return (\n <>\n <ProForm\n form={form}\n onValuesChange={onValuesChange}\n onCancel={() => {\n setState({\n props: { ...initProps },\n });\n form.resetFields();\n }}\n initialValues={initProps}\n columns={columns}\n onFinish={(values) => {\n console.log(values);\n }}\n />\n <ReactJson\n src={state.props?.proTreeModal === 'all' ? { all: 'all' } : state.props.proTreeModal}\n />\n </>\n );\n};\nexport default InitDemo;\n"
1916
- },
1917
- {
1918
- "id": "ProUpload/demos/draggerDemo.tsx",
1919
- "component": "ProUpload",
1920
- "file": "demos/draggerDemo.tsx",
1921
- "title": "单个文件拖拽上传",
1922
- "note": "",
1923
- "source": "/**\n * title: 单个文件拖拽上传\n * desc: |\n * 单个文件上传，是在拖拽框能显示已经上传的文件。\n */\n\nimport { Space } from 'antd';\nimport { ProUpload, ProUploadType } from '@zat-design/sisyphus-react';\nimport { UploadFile } from 'antd/es/upload/interface.js';\nimport { API_UPLOAD } from './mockData.js';\n\nconst ProDownLoadDemo = () => {\n const uploadProps: ProUploadType = {\n action: API_UPLOAD,\n uploadType: 'drag',\n accept: '.doc,.docx,.xml,.xlsx',\n onDownload: (file: UploadFile) => {\n console.log('file: ', file);\n alert('处理下载动作');\n },\n onPreview: (file: UploadFile) => {\n console.log('file: ', file);\n alert('处理预览动作');\n },\n onChange: (filelist: UploadFile[]) => {\n console.log('filelist: ', filelist);\n },\n headerRender: (\n <div style={{ lineHeight: '30px' }}>\n 先<a href=\"http://www.baidu.com\">下载模版</a>，然后按格式填写后上传。\n </div>\n ),\n };\n return (\n <Space>\n <div style={{ width: '500px' }}>\n <ProUpload {...uploadProps} />\n </div>\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
1924
- },
1925
- {
1926
- "id": "ProUpload/demos/draggerUpload.tsx",
1927
- "component": "ProUpload",
1928
- "file": "demos/draggerUpload.tsx",
1929
- "title": "外部手动控制上传",
1930
- "note": "",
1931
- "source": "/**\n * title: 外部手动控制上传\n * desc: |\n * 使用组件的 ref 属性，手动调用组件内容暴露的方法，在组件外部手动控制上传。\n */\n\nimport { Button, Space } from 'antd';\nimport React from 'react';\nimport { ProUpload, ProUploadType } from '@zat-design/sisyphus-react';\nimport { UploadFile } from 'antd/es/upload/interface.js';\nimport { API_UPLOAD } from './mockData.js';\n\nconst ProDownLoadDemo = () => {\n const uploadRef = React.useRef<any>();\n\n const handleUplaod = () => {\n uploadRef.current.uploadStart();\n };\n\n const uploadProps: ProUploadType = {\n uploadType: 'drag',\n action: API_UPLOAD,\n accept: '.doc,.docx,.xml,.xlsx',\n beforeUpload(file, fileList) {\n return false;\n },\n onDownload: (file: UploadFile) => {\n console.log('file: ', file);\n alert('处理下载动作');\n },\n onPreview: (file: UploadFile) => {\n console.log('file: ', file);\n alert('处理预览动作');\n },\n onChange: (filelist: UploadFile[]) => {\n console.log('filelist: ', filelist);\n },\n headerRender: (\n <div style={{ lineHeight: '30px' }}>\n 先<a href=\"http://www.baidu.com\">下载模版</a>，然后按格式填写后上传。\n </div>\n ),\n };\n\n return (\n <Space>\n <div style={{ width: '500px' }}>\n <ProUpload {...uploadProps} ref={uploadRef} />\n </div>\n <Button onClick={handleUplaod}>开始上传</Button>\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
1932
- },
1933
- {
1934
- "id": "ProUpload/demos/draggerFIlesDemo.tsx",
1935
- "component": "ProUpload",
1936
- "file": "demos/draggerFIlesDemo.tsx",
1937
- "title": "多文件上传 maxCount",
1938
- "note": "",
1939
- "source": "/**\n * title: 多文件上传 maxCount\n * desc: |\n * 使用 maxCount 使用控制多个文件的拖拽上传。\n */\n\nimport { ProUpload, ProUploadType } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\nimport { UploadFile } from 'antd/es/upload/interface.js';\nimport { API_UPLOAD } from './mockData.js';\n\nconst ProDownLoadDemo = () => {\n const uploadProps: ProUploadType = {\n maxCount: 10,\n uploadType: 'drag',\n action: API_UPLOAD,\n onDownload: (file: UploadFile) => {\n console.log('file: ', file);\n alert('处理下载动作');\n },\n onPreview: (file: UploadFile) => {\n console.log('file: ', file);\n alert('处理预览动作');\n },\n onChange: (filelist: UploadFile[]) => {\n console.log('filelist: ', filelist);\n },\n footerRender: (\n <div style={{ lineHeight: '30px' }}>\n 先<a href=\"http://www.baidu.com\">下载模版</a>，然后按格式填写后上传。\n </div>\n ),\n };\n return (\n <Space>\n <ProUpload {...uploadProps} />\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
1940
- },
1941
- {
1942
- "id": "ProUpload/demos/buttonDemo.tsx",
1943
- "component": "ProUpload",
1944
- "file": "demos/buttonDemo.tsx",
1945
- "title": "设置已经上传的文件列表",
1946
- "note": "",
1947
- "source": "/**\n * title: 设置已经上传的文件列表\n * desc: |\n * 使用 value 可以设置已经上传的文件列表\n */\n\nimport * as React from 'react';\nimport { ProUpload, ProUploadType } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\nimport { UploadFile } from 'antd/es/upload/interface.js';\nimport { fileList, API_UPLOAD } from './mockData.js';\n\nconst ProDownLoadDemo = () => {\n const [files, setFiles] = React.useState<UploadFile[]>([]);\n const uploadProps: ProUploadType = {\n value: files,\n onDownload: (file: UploadFile) => {\n alert('处理下载动作');\n },\n onPreview: (file: UploadFile) => {\n alert('处理预览动作');\n },\n onChange: (filelist: UploadFile[]) => {\n console.log('filelist: ', filelist);\n },\n action: API_UPLOAD,\n uploadType: 'button',\n buttonProps: {\n type: 'primary',\n },\n accept: '.png,.xlsx,.xls',\n maxCount: 10,\n isConfirmDelete: true,\n };\n\n React.useEffect(() => {\n setTimeout(() => {\n setFiles(fileList);\n }, 3000);\n }, []);\n\n return (\n <Space>\n <ProUpload {...uploadProps} />\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
1948
- },
1949
- {
1950
- "id": "ProUpload/demos/formDemo.tsx",
1951
- "component": "ProUpload",
1952
- "file": "demos/formDemo.tsx",
1953
- "title": "结合 proForm 使用上传控件",
1954
- "note": "",
1955
- "source": "/**\n * title: 结合 proForm 使用上传控件\n * desc: |\n * 如果你希望上传控件移除掉文件对象 originFileObj，可以通过 filterOriginFileObj 来进行设置\n */\n\nimport { Button, Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport { ProForm, ProFormColumnType } from '@zat-design/sisyphus-react';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('primary');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const ProFormColumns: ProFormColumnType[] = [\n {\n type: 'ProUpload',\n label: '上传',\n name: 'file',\n required: true,\n span: 24,\n fieldProps: {\n afterRender: <span style={{ color: '#999' }}>支持格式为.pdf,最大5M</span>,\n uploadType: 'button',\n buttonProps: {\n type: 'primary',\n },\n transformResponse: (res) => {\n if (res.success) {\n return {\n url: res.result.url,\n };\n }\n },\n },\n },\n {\n type: 'ProUpload',\n label: '上传图片',\n name: 'image',\n required: true,\n span: 24,\n fieldProps: {\n uploadType: 'image',\n size: 100,\n maxCount: 2,\n beforeUpload: () => {\n return false;\n },\n transformResponse: (res) => {\n if (res.success) {\n return {\n url: res.result.url,\n };\n }\n return false;\n },\n showExampleContent: true,\n exampleContent: (\n <img\n src=\"https://www.zhongan.io/deploy-env/pc/assets/modular/platform/501/platform-cover.png\"\n style={{ width: 400 }}\n />\n ),\n },\n },\n {\n type: 'ProUpload',\n label: '上传文件',\n name: 'dragList',\n required: true,\n span: 24,\n fieldProps: {\n uploadType: 'drag',\n maxCount: 2,\n beforeUpload: () => {\n return false;\n },\n headerRender: (\n <div style={{ lineHeight: '30px' }}>\n 先<a href=\"http://www.baidu.com\">下载模版</a>，然后按格式填写后上传。\n </div>\n ),\n },\n },\n {\n type: 'ProUpload',\n label: '拖拽文件',\n name: 'drag',\n required: true,\n span: 24,\n fieldProps: {\n uploadType: 'drag',\n maxCount: 1,\n beforeUpload: () => {\n return false;\n },\n },\n },\n ];\n\n const handleStateChange = (val) => {\n setState(val);\n };\n\n /**\n * @description: 表单提交\n * @param {any} val\n * @return {*}\n */\n const handleSubmit = (val: any) => {\n console.log('提交数据val: ', val);\n const formDate = new FormData();\n Object.keys(val).forEach((k) => {\n if (k === 'file') {\n formDate.append(k, val[k][0].originFileObj);\n return;\n }\n formDate.append(k, val[k]);\n });\n const xhr = new XMLHttpRequest();\n xhr.open('post', 'http://23.32.com');\n xhr.send(formDate);\n };\n\n const handleGetFormValues = () => {\n console.log('values: ', form.getFieldsValue());\n };\n\n return (\n <>\n <Form.Item label=\"查看状态\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"primary\">正常</Radio>\n <Radio value=\"disabled\">禁用</Radio>\n <Radio value=\"view\">查看</Radio>\n </Radio.Group>\n </Form.Item>\n <ProForm\n okText=\"提交\"\n form={form}\n columns={ProFormColumns}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n initialValues={{\n switch: true,\n }}\n onFinish={(values) => {\n handleSubmit(values);\n }}\n />\n <Button onClick={handleGetFormValues} />\n </>\n );\n};\n\nexport default BaseModule;\n"
1956
- },
1957
- {
1958
- "id": "ProUpload/demos/formDemo1.tsx",
1959
- "component": "ProUpload",
1960
- "file": "demos/formDemo1.tsx",
1961
- "title": "结合 proForm 使用上传控件",
1962
- "note": "",
1963
- "source": "/**\n * title: 结合 proForm 使用上传控件\n * desc: |\n * 如果你希望的到控件上传后的文件地址和其他表单一起提交。\n */\n\nimport { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport { ProForm, ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { API_UPLOAD } from './mockData.js';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('primary');\n const [submitData, setData] = useState({});\n const [form] = Form.useForm();\n\n const ProFormColumns: ProFormColumnType[] = [\n {\n type: 'ProUpload',\n label: '上传',\n name: 'file',\n required: true,\n span: 24,\n fieldProps: {\n action: API_UPLOAD,\n uploadType: 'button',\n buttonProps: {\n type: 'primary',\n },\n headerRender: (\n <div style={{ lineHeight: '30px' }}>\n 先<a href=\"http://www.baidu.com\">下载模版</a>，然后按格式填写后上传。\n </div>\n ),\n },\n },\n {\n type: 'ProUpload',\n label: '上传图片',\n name: 'image',\n required: true,\n span: 24,\n fieldProps: {\n uploadType: 'image',\n action: API_UPLOAD,\n size: 100,\n maxCount: 2,\n transformResponse: (response: any) => {\n return {\n url: response?.data?.url,\n status: response.status === 200 ? 'done' : 'error',\n };\n },\n showExampleContent: true,\n exampleContent: (\n <img\n src=\"https://www.zhongan.io/deploy-env/pc/assets/modular/platform/501/platform-cover.png\"\n style={{ width: 400 }}\n />\n ),\n },\n },\n {\n type: 'ProUpload',\n label: '上传文件',\n name: 'drag',\n required: true,\n span: 24,\n fieldProps: {\n uploadType: 'drag',\n action: API_UPLOAD,\n maxCount: 2,\n },\n },\n ];\n\n const handleStateChange = (val) => {\n setState(val);\n };\n\n /**\n * @description: 表单提交\n * @param {any} val\n * @return {*}\n */\n const handleSubmit = (val: any) => {\n setData(val);\n const formDate = new FormData();\n Object.keys(val).forEach((k) => {\n if (k === 'file') {\n formDate.append(k, val[k][0].originFileObj);\n return;\n }\n formDate.append(k, val[k]);\n });\n const xhr = new XMLHttpRequest();\n xhr.open('post', 'http://23.32.com');\n xhr.send(formDate);\n };\n\n return (\n <>\n <Form.Item label=\"查看状态\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"primary\">正常</Radio>\n <Radio value=\"disabled\">禁用</Radio>\n <Radio value=\"view\">查看</Radio>\n </Radio.Group>\n </Form.Item>\n <ProForm\n okText=\"提交\"\n form={form}\n columns={ProFormColumns}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n initialValues={{\n switch: true,\n }}\n onFinish={(values) => {\n handleSubmit(values);\n }}\n />\n <p>提交的数据： {JSON.stringify(submitData)}</p>\n </>\n );\n};\n\nexport default BaseModule;\n"
1964
- },
1965
- {
1966
- "id": "ProUpload/demos/buttonExtDemo.tsx",
1967
- "component": "ProUpload",
1968
- "file": "demos/buttonExtDemo.tsx",
1969
- "title": "控制文件的上传格式",
1970
- "note": "",
1971
- "source": "/**\n * title: 控制文件的上传格式\n * desc: |\n * 使用 accept 属性控制文件上传格式，使用 size 控制文件的上传大小。\n */\n\nimport { Space } from 'antd';\nimport { ProUpload, ProUploadType } from '@zat-design/sisyphus-react';\nimport { UploadFile } from 'antd/es/upload/interface.js';\nimport { API_UPLOAD } from './mockData.js';\n\nconst ProDownLoadDemo = () => {\n const uploadProps: ProUploadType = {\n uploadType: 'button',\n name: 'fileName',\n action: API_UPLOAD,\n onDownload: (file: UploadFile) => {\n alert('处理下载动作');\n },\n buttonProps: {\n type: 'primary',\n },\n onChange: (filelist: UploadFile[]) => {\n console.log('filelist: ', filelist);\n },\n maxCount: 10,\n size: 10,\n accept: '.png,.xlsx,.xls',\n };\n\n return (\n <Space>\n <ProUpload {...uploadProps} />\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
1972
- },
1973
- {
1974
- "id": "ProUpload/demos/ImageDemo.tsx",
1975
- "component": "ProUpload",
1976
- "file": "demos/ImageDemo.tsx",
1977
- "title": "图片场景",
1978
- "note": "",
1979
- "source": "/**\n * title: 图片场景\n * desc: |\n * 使用 accept 属性控制文件上传格式，使用 size 控制文件的上传大小。\n */\n\nimport * as React from 'react';\nimport { ProUpload } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\nimport { UploadFile } from 'antd/es/upload/interface.js';\nimport { fileList, API_UPLOAD } from './mockData.js';\nimport type { ProUploadType } from '@zat-design/sisyphus-react';\n\nconst ProDownLoadDemo = () => {\n const [files, setFiles] = React.useState<UploadFile[]>([]);\n const uploadProps: ProUploadType = {\n value: files,\n action: API_UPLOAD,\n uploadType: 'image',\n maxCount: 6,\n // fieldNames: {\n // url: 'imgUrl',\n // },\n accept: '.png,.jpg,.jpeg',\n headerRender: (\n <div style={{ lineHeight: '30px' }}>\n 先<a href=\"http://www.baidu.com\">下载模版</a>，然后按格式填写后上传。\n </div>\n ),\n exampleContent: '',\n name: 'file',\n onChange: (filelist: UploadFile[]) => {\n console.log('filelist: ', filelist);\n },\n };\n\n React.useEffect(() => {\n setTimeout(() => {\n setFiles(fileList);\n }, 3000);\n }, []);\n\n return (\n <Space>\n <ProUpload {...uploadProps} />\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
1980
- },
1981
- {
1982
- "id": "ProUpload/demos/ImageSingleDemo.tsx",
1983
- "component": "ProUpload",
1984
- "file": "demos/ImageSingleDemo.tsx",
1985
- "title": "图片场景有上传文件的示例",
1986
- "note": "",
1987
- "source": "/**\n * title: 图片场景有上传文件的示例\n * desc: |\n * 上传图片，提供一个上传示例参考\n */\n\nimport * as React from 'react';\nimport { ProUpload } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\nimport { UploadFile } from 'antd/es/upload/interface.js';\nimport { API_UPLOAD } from './mockData.js';\nimport type { ProUploadType } from '@zat-design/sisyphus-react';\n\nconst ProDownLoadDemo = () => {\n const [files, setFiles] = React.useState<UploadFile[]>([]);\n const handleChange = (files: Array<UploadFile>) => {\n console.log('files: ', files);\n };\n const uploadProps: ProUploadType = {\n action: API_UPLOAD,\n uploadType: 'image',\n maxCount: 1,\n size: 100,\n accept: '.png,.jpg,.jpeg',\n showExampleContent: true,\n exampleContent: (\n <img\n src=\"https://www.zhongan.io/deploy-env/pc/assets/modular/platform/501/platform-cover.png\"\n style={{ width: 400 }}\n />\n ),\n exampleModalProps: {\n wrapClassName: 'fdasfasd',\n },\n name: 'fileName',\n onChange: handleChange,\n headerRender: <>我是头部</>,\n footerRender: <>我是底部</>,\n };\n\n return (\n <Space>\n <ProUpload {...uploadProps} />\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
1988
- },
1989
- {
1990
- "id": "ProUpload/demos/ImageSFZDemo.tsx",
1991
- "component": "ProUpload",
1992
- "file": "demos/ImageSFZDemo.tsx",
1993
- "title": "上传身份证",
1994
- "note": "",
1995
- "source": "import * as React from 'react';\nimport { ProUpload } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\nimport { UploadFile } from 'antd/es/upload/interface.js';\nimport { API_UPLOAD } from './mockData.js';\nimport type { ProUploadType } from '@zat-design/sisyphus-react';\nimport './ImageSFZDemo.less';\n\nconst ProDownLoadDemo = () => {\n const [files, setFiles] = React.useState<UploadFile[]>([]);\n const handleChange = (files: Array<UploadFile>) => {\n console.log('files: ', files);\n };\n const uploadProps: ProUploadType = {\n className: 'fdddddd',\n action: API_UPLOAD,\n uploadType: 'image',\n maxCount: 1,\n size: 100,\n accept: '.png,.jpg,.jpeg',\n showExampleContent: true,\n exampleContent: (\n <img\n src=\"https://www.zhongan.io/deploy-env/pc/assets/modular/platform/501/platform-cover.png\"\n style={{ width: 400 }}\n />\n ),\n exampleModalProps: {\n wrapClassName: 'fdasfasd',\n },\n name: 'fileName',\n onChange: handleChange,\n centerRender: (\n <div>\n <div>图标</div>\n <div>正面</div>\n </div>\n ),\n };\n\n const uploadProps1: ProUploadType = {\n ...uploadProps,\n centerRender: (\n <div>\n <div>图标</div>\n <div>反面</div>\n </div>\n ),\n };\n\n return (\n <Space>\n <ProUpload {...uploadProps} />\n <ProUpload {...uploadProps1} />\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
1996
- },
1997
- {
1998
- "id": "ProThemeTools/demos/theme.tsx",
1999
- "component": "ProThemeTools",
2000
- "file": "demos/theme.tsx",
2001
- "title": "基本使用",
2002
- "note": "",
2003
- "source": "/**\n * iframe: 600\n */\n\nimport { Avatar, Dropdown, Space, Divider } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProConfigProvider, ProLayout, ProThemeTools } from '@zat-design/sisyphus-react';\nimport SorterAndFiltersDemo from '../../ProTable/demos/sorterAndFiltersDemo';\nimport menusData from './menusData'; // 菜单数据源\n\nconst Layout = () => {\n const userName = menusData.userInfo.simpleCname;\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n ];\n\n const provideConfig = {\n globalConfig: {\n storage: 'sessionStorage',\n },\n ProTable: {\n resizeColumn: true,\n columnConfig: true,\n cacheTime: true,\n },\n };\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProLayout\n title=\"保险核心系统\"\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n rightContentRender={\n <Space size={4} align=\"center\">\n <ProThemeTools\n cacheTime={1}\n iconFollowTheme\n theme={{\n 'zaui-brand': '#31AF96', // 品牌色\n 'zaui-form-align': 'left',\n 'zaui-table-header-bg': '#f2f3f5', // 表格列头背景色\n 'zaui-table-strip-bg': '#fafafa', // 斑马纹背景色\n 'zaui-table-hover-bg': '#fafafa', // 表格行hover背景色\n 'zaui-size': 0.5,\n }}\n />\n <Divider orientation=\"vertical\" />\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </Space>\n }\n >\n <div style={{ overflow: 'hidden' }}>\n <SorterAndFiltersDemo />\n </div>\n </ProLayout>\n </ProConfigProvider>\n );\n};\n\nexport default Layout;\n"
2004
- },
2005
- {
2006
- "id": "ProThemeTools/demos/table.tsx",
2007
- "component": "ProThemeTools",
2008
- "file": "demos/table.tsx",
2009
- "title": "开启表格配置项",
2010
- "note": "",
2011
- "source": "/**\n * iframe: 600\n */\n\nimport { Avatar, Dropdown, Space, Divider } from 'antd';\nimport type { MenuProps } from 'antd';\nimport { ProConfigProvider, ProLayout, ProThemeTools } from '@zat-design/sisyphus-react';\nimport SorterAndFiltersDemo from '../../ProTable/demos/sorterAndFiltersDemo';\nimport menusData from './menusData'; // 菜单数据源\n\n// 配置主题色\nProThemeTools.setThemes({\n 'zaui-brand': '#006AFF', // 品牌色\n 'zaui-form-align': 'left',\n 'zaui-table-header-bg': '#f2f3f5', // 表格列头背景色\n 'zaui-table-strip-bg': '#fafafa', // 斑马纹背景色\n 'zaui-table-hover-bg': '#fafafa', // 表格行hover背景色\n});\n\nconst Layout = () => {\n const userName = menusData.userInfo.simpleCname;\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n ];\n\n const provideConfig = {\n globalConfig: {\n storage: 'sessionStorage',\n },\n ProTable: {\n resizeColumn: true,\n columnConfig: true,\n cacheTime: true,\n },\n };\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProLayout\n title=\"保险核心系统\"\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n rightContentRender={\n <Space size={4} align=\"center\">\n <ProThemeTools cacheTime={1} theme tableBorder tableStripe />\n <Divider orientation=\"vertical\" />\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </Space>\n }\n >\n <div style={{ overflow: 'hidden' }}>\n <SorterAndFiltersDemo />\n </div>\n </ProLayout>\n </ProConfigProvider>\n );\n};\n\nexport default Layout;\n"
2012
- },
2013
- {
2014
- "id": "ProThemeTools/demos/iconTheme.tsx",
2015
- "component": "ProThemeTools",
2016
- "file": "demos/iconTheme.tsx",
2017
- "title": "跟随主题的 icon",
2018
- "note": "",
2019
- "source": "/**\n * iframe: 600\n */\n\nimport { Avatar, Dropdown, Space, Divider, Form, Button } from 'antd';\nimport type { MenuProps } from 'antd';\nimport {\n ProConfigProvider,\n ProLayout,\n ProThemeTools,\n ProStep,\n ProForm,\n ProCollapse,\n ProHeader,\n ProFooter,\n} from '@zat-design/sisyphus-react';\n\nimport type { ProConfigProviderType } from '@zat-design/sisyphus-react';\n\nimport menusData from './menusData'; // 菜单数据源\nimport foldSvg from '../../assets/fold.svg';\nimport catalogSvg from '../../assets/catalog.svg';\nimport ProIcon from '../../ProIcon';\n\n// 配置主题色\nProThemeTools.setThemes({\n 'zaui-brand': '#006AFF', // 品牌色\n 'zaui-form-align': 'left',\n 'zaui-table-header-bg': '#f2f3f5', // 表格列头背景色\n 'zaui-table-strip-bg': '#fafafa', // 斑马纹背景色\n 'zaui-table-hover-bg': '#fafafa', // 表格行hover背景色\n});\n\nconst baseColumns = [];\n\nfor (let index = 1; index <= 20; index++) {\n baseColumns.push({\n type: 'Input',\n label: `fieldKey${index}`,\n name: `fieldKey${index}`,\n rules: [{ required: true, message: '请输入' }],\n });\n}\n\nconst Holder = ({ form }) => {\n return (\n <ProStep.Item id=\"holder\" title=\"投保人信息投保人信息\" form={form}>\n <ProCollapse icon title=\"投保人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Insured = ({ form }) => {\n return (\n <ProStep.Item id=\"insured\" title=\"被保人信息\" form={form}>\n <ProCollapse icon title=\"被保人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Beneficiary = ({ form }) => {\n return (\n <ProStep.Item id=\"beneficiary\" title=\"受益人信息\" form={form}>\n <ProCollapse icon title=\"受益人信息\">\n <ProForm form={form} columns={baseColumns} footer={false} />\n </ProCollapse>\n </ProStep.Item>\n );\n};\n\nconst Layout = () => {\n const userName = menusData.userInfo.simpleCname;\n const [holderForm] = Form.useForm();\n const [insuredForm] = Form.useForm();\n const [beneficiaryForm] = Form.useForm();\n const items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://procomponents.zhongan.tech/\">\n 退出登录\n </a>\n ),\n },\n ];\n\n const provideConfig: ProConfigProviderType = {\n globalConfig: {\n storage: 'sessionStorage',\n },\n ProTable: {\n resizeColumn: true,\n columnConfig: true,\n cacheTime: true,\n },\n };\n\n const handleSave = async () => {};\n\n return (\n <ProConfigProvider value={provideConfig}>\n <ProLayout\n title=\"保险核心系统\"\n iconfontUrl=\"//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js\"\n dataSource={menusData}\n rightContentRender={\n <Space size={4} align=\"center\">\n <Divider orientation=\"vertical\" />\n {userName ? (\n <Dropdown menu={{ items }}>\n <span>\n <Avatar>{userName.substring(0, 1)}</Avatar>\n <span style={{ marginLeft: 8 }}>{userName}</span>\n </span>\n </Dropdown>\n ) : (\n <span\n onClick={() => {\n // login();\n }}\n >\n 登录\n </span>\n )}\n </Space>\n }\n >\n <div\n style={{\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: 'calc(100vh - 48px)',\n }}\n >\n <Space orientation=\"vertical\">\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n }}\n >\n 走默认内置主题渐变色\n <ProIcon\n src={foldSvg}\n actionMap={{\n fill: [],\n }}\n />\n </div>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n marginBottom: '8px',\n }}\n >\n 走默认内置主题双色配置\n <ProIcon src={catalogSvg} actionMap={{}} />\n </div>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n marginBottom: '8px',\n }}\n >\n 在已知svg内容进行自定义修改\n <ProIcon\n src={catalogSvg}\n actionMap={{\n fill: ['none', '#FD8357', 'black', '#A00E20', 'orange', 'orange'],\n }}\n />\n </div>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n marginBottom: '8px',\n }}\n >\n 对渐变色及多色自定义\n <ProIcon\n src={foldSvg}\n actionMap={{\n gradation: ['#FFFFFF', '#FFA74E', '#FF8C17'],\n fill: ['red'],\n }}\n />\n </div>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n marginBottom: '8px',\n }}\n >\n 对已有主题配置进行覆盖-渐变色\n <ProIcon\n src={foldSvg}\n actionMap={{\n themeMap: {\n '#006AFF': ['red', 'orange', 'green'],\n },\n }}\n />\n </div>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n marginBottom: '8px',\n }}\n >\n 对已有主题配置进行覆盖-填充色\n <ProIcon\n src={catalogSvg}\n actionMap={{\n themeFillMap: {\n '#006AFF': ['none', '#d1fc87', 'black', '#41ff61'],\n },\n }}\n />\n </div>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n marginBottom: '8px',\n }}\n >\n 对已知fill填充使其跟随主题色\n <ProIcon\n src={catalogSvg}\n actionMap={{\n fill: ['none', '#d1fc87', 'black', 'theme'],\n }}\n />\n </div>\n </Space>\n </div>\n\n <ProStep fixedTop={64} targetOffset={138}>\n <ProHeader\n fixedTop={64}\n autoBack={1}\n breadcrumbColumns={[\n {\n type: 'breadcrumb',\n value: '比例调整',\n tag: '版本号2.0',\n },\n ]}\n />\n <Holder form={holderForm} />\n <Insured form={insuredForm} />\n <Beneficiary form={beneficiaryForm} />\n <ProFooter>\n <ProStep.Listener>\n <Button type=\"primary\" onClick={handleSave}>\n 保存\n </Button>\n </ProStep.Listener>\n </ProFooter>\n </ProStep>\n </ProLayout>\n </ProConfigProvider>\n );\n};\n\nexport default Layout;\n"
2020
- },
2021
- {
2022
- "id": "ProIcon/demos/base.tsx",
2023
- "component": "ProIcon",
2024
- "file": "demos/base.tsx",
2025
- "title": "基础使用",
2026
- "note": "",
2027
- "source": "/**\n * title: ProIcon的基础使用\n * desc: |\n * 根据设置的type字段显示对应的图标以及设置size修改图标的显示大小,也可以添加className\n */\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { Button, Divider } from 'antd';\n// 这里为了演示组件demo,组件里引入iconfont.js文件,真实项目中不建议这么做\n\nexport default () => {\n const status = useExternal(\n 'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n );\n\n if (status !== 'ready') {\n return null;\n }\n return (\n <>\n <Divider orientation=\"left\">嵌入到Button按钮模式</Divider>\n <Button type=\"primary\" icon={<ProIcon type=\"tishixinxi\" />}>\n 我是antd primary按钮\n </Button>\n <Button type=\"text\" icon={<ProIcon type=\"tishixinxi\" />}>\n 我是antd链接按钮\n </Button>\n <Divider orientation=\"left\">icon模式</Divider>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"caozuorizhi\" size={18} rotate={12} className=\"componentClassName\" />\n </span>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"caozuorizhi\" size={28} />\n </span>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"caozuorizhi\" size={38} style={{ height: '30px' }} />\n </span>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"danzhengdayin-daohangcaidan\" size={20} spin />\n </span>\n </>\n );\n};\n"
2028
- },
2029
- {
2030
- "id": "ProIcon/demos/component.tsx",
2031
- "component": "ProIcon",
2032
- "file": "demos/component.tsx",
2033
- "title": "component 自定义 SVG 组件",
2034
- "note": "",
2035
- "source": "/**\n * title: ProIcon的component属性\n * desc: |\n * component属性支持传入SVG文件路径（webpack导入）或React组件，可通过size和color调整大小和颜色\n */\nimport React from 'react';\nimport { message, Space, Divider } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport SearchView from './searchView.svg';\n\n// 创建一个 SVG React 组件\nconst SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n <svg width=\"19\" height=\"15\" viewBox=\"0 0 19 15\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <g fill=\"currentColor\" fillRule=\"nonzero\">\n <path d=\"M18.8595156,13.853235 L15.9118005,9.83277831 C16.9574103,8.79234063 17.6131433,7.33016175 17.6131433,5.70884872 C17.6131433,2.56113225 15.1539732,0 12.1315716,0 C9.10917008,0 6.65,2.56113225 6.65,5.70884872 C6.65,8.85656518 9.10917008,11.4176974 12.1315716,11.4176974 C13.1052358,11.4176974 14.0179175,11.1493815 14.811375,10.6841104 L17.7693681,14.7188392 C17.9043518,14.9029496 18.1078551,15 18.3147844,15 C18.4593609,15 18.6059929,14.952902 18.7293283,14.8537108 C19.0314999,14.6139391 19.0890564,14.1657945 18.8595156,13.853235 Z M8.02107811,5.70813511 C8.02107811,3.34681256 9.86494177,1.42649857 12.1322568,1.42649857 C14.3995719,1.42649857 16.2434356,3.34681256 16.2434356,5.70813511 C16.2434356,8.06945766 14.3995719,9.98977165 12.1322568,9.98977165 C9.86494177,9.98977165 8.02107811,8.06945766 8.02107811,5.70813511 Z\" />\n <path d=\"M4.9875,2.34375 L0.7125,2.34375 C0.3192,2.34375 0,2.02875 0,1.640625 C0,1.2525 0.3192,0.9375 0.7125,0.9375 L4.9875,0.9375 C5.3808,0.9375 5.7,1.2525 5.7,1.640625 C5.7,2.02875 5.3808,2.34375 4.9875,2.34375 Z\" />\n <path d=\"M3.95833333,7.96875 L0.791666667,7.96875 C0.354666667,7.96875 0,7.65445313 0,7.265625 C0,6.8775 0.354666667,6.5625 0.791666667,6.5625 L3.95833333,6.5625 C4.39533333,6.5625 4.75,6.8775 4.75,7.265625 C4.75,7.65445313 4.39533333,7.96875 3.95833333,7.96875 Z\" />\n <path d=\"M7.89230769,13.59375 L0.657692308,13.59375 C0.294646154,13.59375 0,13.2794531 0,12.890625 C0,12.5017969 0.294646154,12.1875 0.657692308,12.1875 L7.89230769,12.1875 C8.25535385,12.1875 8.55,12.5017969 8.55,12.890625 C8.55,13.2794531 8.25535385,13.59375 7.89230769,13.59375 Z\" />\n </g>\n </svg>\n);\n\nexport default () => {\n const proIconOnClick = () => {\n message.success('您成功点击了图标');\n };\n\n return (\n <div>\n <div style={{ marginBottom: 16 }}>\n <h4>方式1: 传入 SVG 文件路径（webpack 导入）</h4>\n <Space size=\"large\">\n {/* @ts-ignore */}\n <ProIcon component={SearchView} size={24} onClick={proIconOnClick} />\n {/* @ts-ignore */}\n <ProIcon component={SearchView} size={32} color=\"#1890ff\" onClick={proIconOnClick} />\n {/* @ts-ignore */}\n <ProIcon component={SearchView} size={40} color=\"#52c41a\" onClick={proIconOnClick} />\n {/* @ts-ignore */}\n <ProIcon\n component={SearchView}\n size={32}\n color=\"#f5222d\"\n rotate={45}\n onClick={proIconOnClick}\n />\n {/* @ts-ignore */}\n <ProIcon component={SearchView} size={28} color=\"#722ed1\" spin onClick={proIconOnClick} />\n </Space>\n </div>\n\n <Divider />\n\n <div>\n <h4>方式2: 传入 React 组件</h4>\n <Space size=\"large\">\n {/* @ts-ignore */}\n <ProIcon component={SearchIcon} size={24} onClick={proIconOnClick} />\n {/* @ts-ignore */}\n <ProIcon component={SearchIcon} size={32} color=\"#1890ff\" onClick={proIconOnClick} />\n {/* @ts-ignore */}\n <ProIcon component={SearchIcon} size={40} color=\"#52c41a\" onClick={proIconOnClick} />\n {/* @ts-ignore */}\n <ProIcon\n component={SearchIcon}\n size={32}\n color=\"#f5222d\"\n rotate={45}\n onClick={proIconOnClick}\n />\n {/* @ts-ignore */}\n <ProIcon component={SearchIcon} size={28} color=\"#722ed1\" spin onClick={proIconOnClick} />\n </Space>\n </div>\n </div>\n );\n};\n"
2036
- },
2037
- {
2038
- "id": "ProIcon/demos/tooltip.tsx",
2039
- "component": "ProIcon",
2040
- "file": "demos/tooltip.tsx",
2041
- "title": "设置 tooltip",
2042
- "note": "",
2043
- "source": "/**\n * title: 设置ProIcon图标的tooltip\n * desc: |\n * 可以通过设置属性tooltip来更改图标的tooltip\n */\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n useExternal(\n 'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n );\n return (\n <>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"danzhengdayin-daohangcaidan\" tooltip=\"我是提示一\" size={20} />\n </span>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"danzhengdayin-daohangcaidan\" tooltip=\"我是提示二\" size={28} />\n </span>\n </>\n );\n};\n"
2044
- },
2045
- {
2046
- "id": "ProIcon/demos/color.tsx",
2047
- "component": "ProIcon",
2048
- "file": "demos/color.tsx",
2049
- "title": "设置颜色",
2050
- "note": "",
2051
- "source": "/**\n * title: 设置ProIcon图标的颜色\n * desc: |\n * 可以通过设置属性color来更改图标的显示颜色\n */\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n// 这里为了演示组件demo,组件里引入iconfont.js文件,真实项目中不建议这么做\n\nexport default () => {\n useExternal(\n 'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n );\n return (\n <>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"danzhengdayin-daohangcaidan\" size={20} color=\"#369\" />\n </span>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"danzhengdayin-daohangcaidan\" size={28} color=\"red\" />\n </span>\n </>\n );\n};\n"
2052
- },
2053
- {
2054
- "id": "ProIcon/demos/theme.tsx",
2055
- "component": "ProIcon",
2056
- "file": "demos/theme.tsx",
2057
- "title": "跟随主题色",
2058
- "note": "",
2059
- "source": "/**\n * title: ProIcon的基础使用\n * desc: |\n * 设置theme字段为true跟随主题色, 默认不跟随\n */\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n const status = useExternal(\n 'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n );\n\n if (status !== 'ready') {\n return null;\n }\n return (\n <>\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"caozuorizhi\" size={18} theme />\n </span>\n </>\n );\n};\n"
2060
- },
2061
- {
2062
- "id": "ProIcon/demos/click.tsx",
2063
- "component": "ProIcon",
2064
- "file": "demos/click.tsx",
2065
- "title": "点击事件",
2066
- "note": "",
2067
- "source": "/**\n * title: ProIcon的点击事件\n * desc: |\n * 可以通过设置属性onClick来完成点击图标后所要完成的事情\n */\nimport { message, Space } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n const proIconOnClick = () => {\n message.success('您成功点击了图标');\n };\n useExternal(\n 'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n );\n\n return (\n <Space orientation=\"vertical\">\n <span style={{ margin: '0 20px' }}>\n <ProIcon type=\"zonghechaxun-daohangcaidan\" size={25} onClick={proIconOnClick} />\n </span>\n </Space>\n );\n};\n"
2068
- },
2069
- {
2070
- "id": "ProIcon/demos/disabled.tsx",
2071
- "component": "ProIcon",
2072
- "file": "demos/disabled.tsx",
2073
- "title": "disabled 禁止",
2074
- "note": "",
2075
- "source": "/**\n * title: ProIcon的disabled\n * desc: |\n * 可以通过设置属性disabled禁止点击\n */\nimport { message } from 'antd';\nimport { useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n const proIconOnClick = () => {\n message.success('您成功点击了图标');\n };\n const status = useExternal(\n 'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n );\n\n return (\n <>\n <ProIcon type=\"zonghechaxun-daohangcaidan\" size={25} onClick={proIconOnClick} disabled />\n </>\n );\n};\n"
2076
- },
2077
- {
2078
- "id": "ProIcon/demos/mode.tsx",
2079
- "component": "ProIcon",
2080
- "file": "demos/mode.tsx",
2081
- "title": "mode 模式",
2082
- "note": "",
2083
- "source": "/**\n * title: ProIcon的两种模式\n * desc: |\n * 用于中后台系统中，对于表格操作栏进行【中文、图标】的互换，详情配置见ProConfigProvider\n */\nimport { Space } from 'antd';\nimport { ProIcon } from '@zat-design/sisyphus-react';\nimport { useExternal } from 'ahooks';\n\nexport default () => {\n const status = useExternal(\n 'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n );\n return (\n <Space>\n <ProIcon mode=\"button\">查看</ProIcon>\n {/* mode button type自动转换对应语言名 */}\n <ProIcon mode=\"button\" type=\"view\" />\n </Space>\n );\n};\n"
2084
- },
2085
- {
2086
- "id": "ProIcon/demos/loading.tsx",
2087
- "component": "ProIcon",
2088
- "file": "demos/loading.tsx",
2089
- "title": "loading 加载",
2090
- "note": "",
2091
- "source": "/**\n * title: 设置ProIcon图标的loading\n * desc: |\n * icon 模式使用 `spin` 表达加载状态；`mode=\"button\"` 时通过 `buttonProps.loading` 控制按钮 loading\n */\nimport { useSetState, useExternal } from 'ahooks';\nimport { ProIcon } from '@zat-design/sisyphus-react';\n\nexport default () => {\n const [{ loading }, setState] = useSetState({\n loading: true,\n });\n useExternal(\n 'https://at.alicdn.com/t/c/font_3434906_ftej0cccz3g.js?spm=a313x.7781069.1998910419.59&file=font_3434906_ftej0cccz3g.js',\n );\n return (\n <>\n <span style={{ margin: '0 20px' }}>\n <ProIcon\n mode=\"button\"\n size={20}\n buttonProps={{\n loading,\n }}\n >\n ProIcon 按钮查看\n </ProIcon>\n </span>\n </>\n );\n};\n"
2092
- },
2093
- {
2094
- "id": "ProDownload/demos/demo.tsx",
2095
- "component": "ProDownload",
2096
- "file": "demos/demo.tsx",
2097
- "title": "使用场景",
2098
- "note": "",
2099
- "source": "import { ProDownload } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\n\nconst ProDownLoadDemo = () => {\n return (\n <Space>\n <ProDownload\n url=\"http://5b0988e595225.cdn.sohucs.com/images/20190629/a183bf01a3df4f5491992d56e9cf785a.jpeg\"\n fileName=\"鲸.jpeg\"\n source=\"url\"\n >\n 静态资源下载\n </ProDownload>\n <ProDownload\n url=\"/api/v1/common/search/download\"\n fileName=\"下载base64.pdf\"\n params={{\n businessNo: 'PA0301A108202210000000003',\n documentType: 'policy',\n }}\n type=\"primary\"\n >\n Post接口下载\n </ProDownload>\n <ProDownload type=\"link\" method=\"get\" url=\"/api/goods/v1/upload/task/down\">\n 下载模板\n </ProDownload>\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
2100
- },
2101
- {
2102
- "id": "ProDownload/demos/disabled.tsx",
2103
- "component": "ProDownload",
2104
- "file": "demos/disabled.tsx",
2105
- "title": "disabled 状态",
2106
- "note": "",
2107
- "source": "import { ProDownload } from '@zat-design/sisyphus-react';\nimport { Space } from 'antd';\n\nconst ProDownLoadDemo = () => {\n return (\n <Space>\n <ProDownload\n url=\"http://5b0988e595225.cdn.sohucs.com/images/20190629/a183bf01a3df4f5491992d56e9cf785a.jpeg\"\n fileName=\"鲸.jpeg\"\n source=\"url\"\n disabled\n >\n 下载按钮\n </ProDownload>\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
2108
- },
2109
- {
2110
- "id": "ProDownload/demos/beforeDownload.tsx",
2111
- "component": "ProDownload",
2112
- "file": "demos/beforeDownload.tsx",
2113
- "title": "上传前处理",
2114
- "note": "",
2115
- "source": "import { ProDownload } from '@zat-design/sisyphus-react';\nimport { Space, message } from 'antd';\n\nconst ProDownLoadDemo = () => {\n return (\n <Space>\n <ProDownload\n url=\"http://5b0988e595225.cdn.sohucs.com/images/20190629/a183bf01a3df4f5491992d56e9cf785a.jpeg\"\n fileName=\"鲸.jpeg\"\n source=\"url\"\n beforeDownload={() => {\n return false;\n }}\n >\n beforeDownload为false不可下载\n </ProDownload>\n <ProDownload\n type=\"link\"\n url=\"http://5b0988e595225.cdn.sohucs.com/images/20190629/a183bf01a3df4f5491992d56e9cf785a.jpeg\"\n fileName=\"鲸.jpeg\"\n source=\"url\"\n beforeDownload={() => {\n message.success('下载前回调事件，执行成功');\n return Promise.resolve();\n }}\n >\n 下载回调\n </ProDownload>\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
2116
- },
2117
- {
2118
- "id": "ProDownload/demos/finishDownload.tsx",
2119
- "component": "ProDownload",
2120
- "file": "demos/finishDownload.tsx",
2121
- "title": "成功处理",
2122
- "note": "",
2123
- "source": "import { ProDownload } from '@zat-design/sisyphus-react';\nimport { message, Space } from 'antd';\n\nconst ProDownLoadDemo = () => {\n return (\n <Space>\n <ProDownload\n url=\"/api/v1/common/search/download\"\n fileName=\"下载base64.pdf\"\n params={{\n businessNo: '101000106A12023H0010U',\n documentType: 'policy',\n }}\n type=\"primary\"\n transformResponse={(res) => {\n return res?.data?.fileBytes;\n }}\n onFinish={() => {\n message.success('下载成功');\n }}\n >\n Post接口下载\n </ProDownload>\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
2124
- },
2125
- {
2126
- "id": "ProDownload/demos/function.tsx",
2127
- "component": "ProDownload",
2128
- "file": "demos/function.tsx",
2129
- "title": "函数方式下载",
2130
- "note": "",
2131
- "source": "import { ProDownload } from '@zat-design/sisyphus-react';\nimport { message, Space } from 'antd';\n\nconst { downLoadRequest } = ProDownload;\n\nconst ProDownLoadDemo = () => {\n return (\n <Space>\n <div\n onClick={() => {\n downLoadRequest({\n url: '/api/v1/common/search/download',\n method: 'post',\n fileName: '下载base64.pdf',\n params: {\n businessNo: '101000106A12023H0010U',\n documentType: 'policy',\n },\n transformResponse: (res) => {\n return res?.data?.fileBytes;\n },\n onFinish: () => {\n message.success('下载成功');\n },\n });\n }}\n >\n 点击下载\n </div>\n </Space>\n );\n};\n\nexport default ProDownLoadDemo;\n"
2132
- },
2133
- {
2134
- "id": "ProWaterMark/demos/Base/index.tsx",
2135
- "component": "ProWaterMark",
2136
- "file": "demos/Base/index.tsx",
2137
- "title": "区域内文字水印",
2138
- "note": "",
2139
- "source": "/**\n * title: 区域内加上文字水印\n * desc: |\n * 根据content属性设置水印文字\n */\nimport { ProWaterMark } from '@zat-design/sisyphus-react';\n\nexport default () => (\n <ProWaterMark content=\"组件内水印\" zIndex={122}>\n <div style={{ height: 200, width: 200 }} />\n </ProWaterMark>\n);\n"
2140
- },
2141
- {
2142
- "id": "ProWaterMark/demos/Image/index.tsx",
2143
- "component": "ProWaterMark",
2144
- "file": "demos/Image/index.tsx",
2145
- "title": "图片水印",
2146
- "note": "",
2147
- "source": "/**\n * title: 区域内加上图片水印\n * desc: |\n * 根据image属性设置图片水印\n */\nimport { ProWaterMark } from '@zat-design/sisyphus-react';\nimport image from '../../../../public/logo.png';\n\nexport default () => (\n <ProWaterMark image={image} zIndex={122}>\n <div style={{ height: 500 }}></div>\n </ProWaterMark>\n);\n"
2148
- },
2149
- {
2150
- "id": "ProConfigProvider/demo/locale.tsx",
2151
- "component": "ProConfigProvider",
2152
- "file": "demo/locale.tsx",
2153
- "title": "基本使用",
2154
- "note": "在路由入口文件进行配置，用法同 antd 的 ConfigProvider，使用 ProConfigProvider 包裹",
2155
- "source": "/**\n * iframe: 400\n */\n\nimport { useState } from 'react';\nimport { Button, Space } from 'antd';\nimport { ProConfigProvider, ProForm } from '@zat-design/sisyphus-react';\n\nconst LocaleDemo = () => {\n const [locale, setLocale] = useState<'zh-CN' | 'en-US'>(\n (localStorage.getItem('locale') as 'zh-CN' | 'en-US') || 'zh-CN',\n );\n\n const handleChange = (value: 'zh-CN' | 'en-US') => {\n setLocale(value);\n localStorage.setItem('locale', value);\n window.location.reload();\n };\n\n return (\n <Space direction=\"vertical\" size={16} style={{ width: '100%' }}>\n <Space>\n <Button\n type={locale === 'zh-CN' ? 'primary' : 'default'}\n onClick={() => handleChange('zh-CN')}\n >\n 中文\n </Button>\n <Button\n type={locale === 'en-US' ? 'primary' : 'default'}\n onClick={() => handleChange('en-US')}\n >\n English\n </Button>\n </Space>\n\n <ProConfigProvider locale={locale}>\n <ProForm\n columns={[\n {\n type: 'Input',\n label: locale === 'zh-CN' ? '姓名' : 'Name',\n name: 'name',\n required: true,\n },\n {\n type: 'Select',\n label: locale === 'zh-CN' ? '状态' : 'Status',\n name: 'status',\n fieldProps: {\n options: [\n { label: locale === 'zh-CN' ? '启用' : 'Enabled', value: '1' },\n { label: locale === 'zh-CN' ? '禁用' : 'Disabled', value: '0' },\n ],\n },\n },\n ]}\n />\n </ProConfigProvider>\n </Space>\n );\n};\n\nexport default LocaleDemo;\n"
2156
- },
2157
- {
2158
- "id": "ProConfigProvider/demos/themeSegmented.tsx",
2159
- "component": "ProConfigProvider",
2160
- "file": "demos/themeSegmented.tsx",
2161
- "title": "主题定制",
2162
- "note": "",
2163
- "source": "/**\n * iframe: 320\n * title: 主题定制\n * desc: |\n * `theme` 用法与 antd 的 [ConfigProvider](https://ant-design.antgroup.com/components/config-provider-cn) 完全一致，支持全局 `token` 与组件级 `components` 主题变量。传入的 `theme` 会与内部主题上下文深度合并后透传给 antd 的 ConfigProvider，因此可以保留 antd 原生的定制习惯：\n * 下面的示例通过 ColorPicker 选色，联动整体主题色与 Segmented 组件的主题变量：\n */\n\nimport { useState } from 'react';\nimport { ColorPicker, Segmented, Space } from 'antd';\nimport type { Color } from 'antd/es/color-picker';\nimport { ProConfigProvider } from '@zat-design/sisyphus-react';\n\n/**\n * ColorPicker 选色后，通过 ProConfigProvider 的 theme 全局配置，\n * 同时联动整体主题色（token.colorPrimary）与 Segmented 组件级主题变量。\n */\nconst ThemeSegmentedDemo = () => {\n const [color, setColor] = useState<string>('#006AFF');\n\n return (\n <Space direction=\"vertical\" size={16}>\n <Space align=\"center\">\n <span>主题色：</span>\n <ColorPicker\n value={color}\n showText\n onChangeComplete={(value: Color) => setColor(value.toHexString())}\n />\n </Space>\n\n <ProConfigProvider\n theme={{\n token: { colorPrimary: color },\n components: {\n Segmented: {\n itemSelectedBg: color,\n itemSelectedColor: '#ffffff',\n },\n },\n }}\n >\n <Segmented options={['日', '周', '月', '季', '年']} defaultValue=\"周\" />\n </ProConfigProvider>\n </Space>\n );\n};\n\nexport default ThemeSegmentedDemo;\n"
2164
- },
2165
- {
2166
- "id": "ProAction/demos/base.tsx",
2167
- "component": "ProAction",
2168
- "file": "demos/base.tsx",
2169
- "title": "基本使用",
2170
- "note": "",
2171
- "source": "/**\n * title: 基本使用\n * desc: |\n * 例如点击查看按钮进行跳转\n */\n\nimport { ProAction } from '@zat-design/sisyphus-react';\nimport { Button } from 'antd';\n\nconst Base = () => {\n return (\n <>\n <ProAction\n config={[\n {\n onAction() {\n window.open('https://procomponents.zhongan.tech/', '_blank');\n },\n },\n ]}\n >\n <Button type=\"link\">查看</Button>\n </ProAction>\n </>\n );\n};\n\nexport default Base;\n"
2172
- },
2173
- {
2174
- "id": "ProAction/demos/edit.tsx",
2175
- "component": "ProAction",
2176
- "file": "demos/edit.tsx",
2177
- "title": "校验并弹框错误信息",
2178
- "note": "",
2179
- "source": "/**\n * title: 校验并弹框错误信息\n * desc: |\n * 编辑操作直接进行跳转、\n */\n\nimport { Button } from 'antd';\nimport { ProAction } from '@zat-design/sisyphus-react';\n\nconst Check = () => {\n return (\n <>\n <ProAction\n config={[\n {\n onAction() {\n window.open('https://procomponents.zhongan.tech/', '_blank');\n },\n },\n ]}\n >\n <Button type=\"link\">编辑</Button>\n </ProAction>\n </>\n );\n};\n\nexport default Check;\n"
2180
- },
2181
- {
2182
- "id": "ProAction/demos/edit-check.tsx",
2183
- "component": "ProAction",
2184
- "file": "demos/edit-check.tsx",
2185
- "title": "校验并弹框错误信息",
2186
- "note": "",
2187
- "source": "/**\n * title: 校验并弹框错误信息\n * desc: |\n * 例如编辑前进行校验、通过即可跳转、失败解析错误\n */\n\nimport { Button } from 'antd';\nimport { ProAction } from '@zat-design/sisyphus-react';\nimport respData from './data';\n\nconst asyncService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: respData,\n status: 200,\n message: '删除成功',\n });\n }, 2000);\n });\n};\n\nconst Check = () => {\n return (\n <>\n <ProAction\n config={[\n {\n mode: 'check',\n title: '返回列表只有一条时、直接和 errorTitle 一起展示',\n useRequest(previousData, args) {\n return {\n service: asyncService,\n transformResponse(res) {\n if (res.status === 200) {\n return {\n errorTitle: '当前费率因子已被费率表引用，不支持编辑，已关联的费率表为',\n list: ['GDR5040-房屋建筑测试'],\n };\n }\n },\n };\n },\n },\n ]}\n >\n <Button type=\"link\">编辑</Button>\n </ProAction>\n </>\n );\n};\n\nexport default Check;\n"
2188
- },
2189
- {
2190
- "id": "ProAction/demos/edit-check-more.tsx",
2191
- "component": "ProAction",
2192
- "file": "demos/edit-check-more.tsx",
2193
- "title": "校验并弹框错误信息",
2194
- "note": "",
2195
- "source": "/**\n * title: 校验并弹框错误信息\n * desc: |\n * 当返回错误为多条时展示情况如下\n */\n\nimport { Button } from 'antd';\nimport { ProAction } from '@zat-design/sisyphus-react';\nimport respData from './data';\n\nconst asyncService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: respData,\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst Check = () => {\n return (\n <>\n <ProAction\n config={[\n {\n mode: 'check',\n title: '返回列表多条时',\n useRequest(previousData, args) {\n return {\n service: asyncService,\n };\n },\n },\n ]}\n >\n <Button type=\"link\">编辑</Button>\n </ProAction>\n </>\n );\n};\n\nexport default Check;\n"
2196
- },
2197
- {
2198
- "id": "ProAction/demos/edit-check-diy.tsx",
2199
- "component": "ProAction",
2200
- "file": "demos/edit-check-diy.tsx",
2201
- "title": "校验并弹框错误信息",
2202
- "note": "",
2203
- "source": "/**\n * title: 校验并弹框错误信息\n * desc: |\n * 自定义展示错误弹框内容\n */\n\nimport { Button } from 'antd';\nimport { ProAction } from '@zat-design/sisyphus-react';\nimport respData from './data';\n\nconst asyncService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: respData,\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst Check = () => {\n return (\n <>\n <ProAction\n config={[\n {\n mode: 'check',\n title: '自定义展示错误弹框内容',\n useRequest(previousData, args) {\n return {\n service: asyncService,\n };\n },\n contextRender: (errorModalData: any) => {\n const { errorTitle = '', list = [] } = errorModalData ?? {};\n return (\n <div className=\"pro-action-check-modal-box\">\n <div className=\"res-err-list\">\n <span className=\"err-tip\">{errorTitle}</span>\n <div className=\"list-wrap\">\n {list.map((item) => (\n <div key={item} className=\"err-item\">\n {item}\n </div>\n ))}\n </div>\n </div>\n </div>\n );\n },\n },\n ]}\n >\n <Button type=\"link\">编辑</Button>\n </ProAction>\n </>\n );\n};\n\nexport default Check;\n"
2204
- },
2205
- {
2206
- "id": "ProAction/demos/delete.tsx",
2207
- "component": "ProAction",
2208
- "file": "demos/delete.tsx",
2209
- "title": "弹框确认删除",
2210
- "note": "",
2211
- "source": "/**\n * title: 弹框确认删除\n * desc: |\n * 常见的弹框确认后再执行接口删除\n */\n\nimport { Button } from 'antd';\nimport { ProAction } from '@zat-design/sisyphus-react';\n\nconst asyncService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: '1234444',\n status: 200,\n message: '删除成功',\n });\n }, 2000);\n });\n};\nconst Delete = () => {\n return (\n <>\n <ProAction\n config={[\n {\n mode: 'confirm',\n useRequest: () => {\n return {\n service: asyncService,\n options: {\n defaultParams: [{ id: '123' }],\n onSuccess: (data, params) => {\n alert('刷新表格');\n },\n },\n };\n },\n },\n ]}\n >\n <Button danger type=\"dashed\">\n 删除\n </Button>\n </ProAction>\n </>\n );\n};\n\nexport default Delete;\n"
2212
- },
2213
- {
2214
- "id": "ProAction/demos/delete-check.tsx",
2215
- "component": "ProAction",
2216
- "file": "demos/delete-check.tsx",
2217
- "title": "弹框确认删除",
2218
- "note": "",
2219
- "source": "/**\n * title: 弹框确认删除\n * desc: |\n * 弹框确认后再校验并弹框错误信息\n */\n\nimport { Button } from 'antd';\nimport { ProAction } from '@zat-design/sisyphus-react';\nimport respData from './data';\n\nconst asyncService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: respData,\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst Delete = () => {\n return (\n <>\n <ProAction\n config={[\n {\n mode: 'confirm',\n },\n {\n mode: 'check',\n title: '提示信息',\n useRequest(previousData, args) {\n return {\n service: asyncService,\n };\n },\n },\n {\n title: '这个不会执行、上面校验未通过',\n onAction() {\n console.log('继续执行');\n },\n },\n ]}\n >\n <Button danger type=\"dashed\">\n 删除\n </Button>\n </ProAction>\n </>\n );\n};\n\nexport default Delete;\n"
2220
- },
2221
- {
2222
- "id": "ProAction/demos/confirm-check-delete.tsx",
2223
- "component": "ProAction",
2224
- "file": "demos/confirm-check-delete.tsx",
2225
- "title": "弹框确认删除",
2226
- "note": "",
2227
- "source": "/**\n * title: 弹框确认删除\n * desc: |\n * 弹框确认后再校验通过后继续执行删除\n */\n\nimport { Button } from 'antd';\nimport { ProAction } from '@zat-design/sisyphus-react';\n\nconst asyncService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: {\n errorTitle: null,\n list: null,\n },\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst deService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: '',\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst Delete = () => {\n return (\n <>\n <ProAction\n config={[\n {\n mode: 'confirm',\n },\n {\n mode: 'check',\n title: '提示信息',\n useRequest(previousData, args) {\n return {\n service: asyncService,\n };\n },\n },\n {\n useRequest(previousData, args) {\n return {\n service: deService,\n options: {\n onSuccess() {\n alert('刷新表格');\n },\n },\n };\n },\n },\n ]}\n >\n <Button danger type=\"dashed\">\n 删除\n </Button>\n </ProAction>\n </>\n );\n};\n\nexport default Delete;\n"
2228
- },
2229
- {
2230
- "id": "ProAction/demos/table.tsx",
2231
- "component": "ProAction",
2232
- "file": "demos/table.tsx",
2233
- "title": "结合表格真实场景",
2234
- "note": "",
2235
- "source": "import { Button, Space } from 'antd';\nimport { ProTable, ProAction } from '@zat-design/sisyphus-react';\nimport type { ProTableColumnType, ProTableListResponseType } from '@zat-design/sisyphus-react';\nimport { getUseAntdTableDemoData } from '../../ProTable/demos/data/useAntdTableDemoData';\nimport respData from './data';\n\nconst { useAntdTable } = ProTable;\n\nconst getTableData = ({ pageNum }) => {\n return new Promise<ProTableListResponseType<Record<string, any>>>((resolve) => {\n setTimeout(() => {\n resolve({\n status: 200,\n // @ts-ignore\n data: {\n list: getUseAntdTableDemoData(pageNum),\n total: 50,\n pageNum: 1,\n pageSize: 10,\n },\n message: '',\n });\n }, 2000);\n });\n};\n\nconst delService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: '',\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst asyncService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: respData,\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst asyncService1 = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: {\n errorTitle: null,\n list: null,\n },\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst BaseDemo = () => {\n const { refresh, tableProps } = useAntdTable(getTableData, {\n rowKey: 'productId',\n });\n\n // 列表列定义\n const columns: ProTableColumnType[] = [\n {\n title: '产品代码',\n dataIndex: 'productCode',\n width: 200,\n },\n {\n title: '产品名称',\n dataIndex: 'productName',\n width: 200,\n },\n {\n title: '产品公司',\n dataIndex: 'companyName',\n width: 200,\n },\n {\n title: '产品状态',\n dataIndex: 'productStatus',\n width: 200,\n },\n {\n title: '操作',\n dataIndex: 'operate',\n width: 100,\n render: () => (\n <Space>\n <ProAction\n config={[\n {\n onAction: () => {\n window.open('https://procomponents.zhongan.tech/', '_blank');\n },\n },\n ]}\n >\n <Button type=\"link\">查看</Button>\n </ProAction>\n <ProAction\n config={[\n {\n mode: 'confirm',\n useRequest(previousData, args) {\n return {\n service: delService,\n options: {\n onSuccess: () => {\n refresh();\n },\n },\n };\n },\n },\n ]}\n >\n <Button type=\"link\">删除</Button>\n </ProAction>\n\n <ProAction\n config={[\n {\n mode: 'confirm',\n },\n {\n mode: 'check',\n title: '返回列表多条时',\n useRequest(previousData, args) {\n return {\n service: asyncService,\n };\n },\n },\n ]}\n >\n <Button type=\"link\">校验不通过</Button>\n </ProAction>\n\n <ProAction\n config={[\n {\n mode: 'confirm',\n },\n {\n mode: 'check',\n title: '返回列表多条时',\n useRequest(previousData, args) {\n return {\n service: asyncService1,\n };\n },\n },\n {\n useRequest(previousData, args) {\n return {\n service: delService,\n options: {\n onSuccess() {\n refresh();\n },\n },\n };\n },\n },\n ]}\n >\n <Button type=\"link\">校验通过继续删除</Button>\n </ProAction>\n </Space>\n ),\n },\n ];\n\n return (\n <ProTable\n tableId=\"base-demo\"\n rowKey=\"productId\"\n columns={columns}\n scroll={{ x: 'max-content' }}\n {...tableProps}\n />\n );\n};\n\nexport default BaseDemo;\n"
2236
- },
2237
- {
2238
- "id": "ProAction/demos/heigh.tsx",
2239
- "component": "ProAction",
2240
- "file": "demos/heigh.tsx",
2241
- "title": "高阶使用场景",
2242
- "note": "",
2243
- "source": "/**\n * title: 高阶使用场景\n * desc: |\n * `ProAction` 支持事件流、可以无限链式调用、也可以通过 `continue` 进行中断操作\n */\n\nimport { Button } from 'antd';\nimport { ProAction } from '@zat-design/sisyphus-react';\nimport respData from './data';\n\nconst serviceOne = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: 100,\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst serviceTwo = (data) => {\n console.log('使用上个接口返回的数据', data);\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: 300,\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst asyncService = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: respData,\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\nconst asyncService1 = (data) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: {\n errorTitle: null,\n list: null,\n },\n status: 200,\n message: '',\n });\n }, 2000);\n });\n};\n\n/**\n * 列表处理Demo\n *\n * @returns\n */\nconst HeighDemo = () => {\n return (\n <ProAction\n config={[\n {\n mode: 'confirm',\n },\n {\n mode: 'check',\n title: '返回列表多条时',\n useRequest(previousData, args) {\n return {\n service: asyncService1,\n };\n },\n },\n {\n useRequest: (previousData, args) => {\n console.log('1111', previousData, args);\n return {\n service: serviceOne,\n options: {\n onSuccess() {\n console.log('刷新操作');\n },\n },\n };\n },\n },\n {\n useRequest: (previousData, args) => {\n console.log('22222', previousData, args);\n return {\n service: serviceTwo,\n options: {\n defaultParams: [\n {\n data: previousData, // 使用上个接口返回的数据\n },\n ],\n },\n };\n },\n continue(previousData, args) {\n console.log('33333', previousData, args);\n return previousData >= 100;\n },\n },\n {\n onAction(previousData, args, index) {\n console.log(previousData, args);\n },\n },\n ]}\n >\n <Button type=\"link\">链式调用</Button>\n </ProAction>\n );\n};\n\nexport default HeighDemo;\n"
2244
- }
2245
- ]
2246
- }