@cqsjjb/jjb-react-admin-component 3.3.0-beta.0 → 3.3.0-beta.1

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 (13) hide show
  1. package/BMap/README.md +58 -0
  2. package/Editor/README.md +57 -0
  3. package/FileUploader/README.md +51 -0
  4. package/FormilyDescriptions/README.md +64 -0
  5. package/ImageCropper/README.md +84 -0
  6. package/ImageUploader/README.md +73 -0
  7. package/ListDataContainer/index.d.ts +2 -2
  8. package/PageLayout/README.md +41 -0
  9. package/SearchForm/README.md +66 -0
  10. package/Table/README.md +36 -0
  11. package/Table/index.js +2 -2
  12. package/TableAction/README.md +56 -0
  13. package/package.json +3 -2
package/BMap/README.md ADDED
@@ -0,0 +1,58 @@
1
+ 百度地图组件
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import { useState } from 'react';
7
+ import { Button } from 'antd';
8
+ import BMap from '@cqsjjb/jjb-react-admin-component/BMap';
9
+
10
+ function App() {
11
+ const [ open, setOpen ] = useState(false);
12
+ return (
13
+ <>
14
+ <Button onClick={() => setOpen(true)}>打开地图</Button>
15
+ {open && (
16
+ <BMap
17
+ onOk={data => {
18
+ console.log(data);
19
+ setOpen(false);
20
+ }}
21
+ onCacnel={() => {
22
+ setOpen(false);
23
+ }}
24
+ />
25
+ )}
26
+ </>
27
+ )
28
+ }
29
+ ```
30
+
31
+ ## API
32
+
33
+ | 属性 | 说明 | 类型 | 默认值 |
34
+ |----------|:-----|:---------------------------------------------------------------------------------------------------------:|--------:|
35
+ | lng | 经度 | `number` | 116.404 |
36
+ | lat | 纬度 | `number` | 39.915 |
37
+ | title | 弹窗标题 | `string` | 百度地图 |
38
+ | width | 弹窗宽度 | `number` | 700 |
39
+ | onOk | 确认回调 | (data: { lng: number, lat: number, comp: <span style="color: red">IComp</span>, compText: Text }) => void | - |
40
+ | onCancel | 取消回调 | `() => void` | 700 |
41
+
42
+ ## 确认回调-IComp
43
+
44
+ | 属性 | 说明 | 类型 | 默认值 |
45
+ |--------------|:----|:--------:|----:|
46
+ | province | 省份 | `string` | - |
47
+ | city | 城市 | `string` | - |
48
+ | district | 区县 | `string` | - |
49
+ | street | 街道 | `string` | - |
50
+ | streetNumber | 门牌号 | `string` | - |
51
+
52
+ ## 常见问题
53
+ * 未导入百度地图文件，生成地图失败！
54
+
55
+ 请确认应用public/index.html中是否导入百度地图SDK。
56
+ * onOk确认回调compText为undefined
57
+
58
+ 请确认百度地图是否授权Web应用。
package/Editor/README.md ADDED
@@ -0,0 +1,57 @@
1
+ 富文本组件组件，基于WangEditor实现。
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import React from 'react';
7
+ import { Form } from 'antd';
8
+ import Editor from '@cqsjjb/jjb-react-admin-component/Editor';
9
+
10
+ function App() {
11
+ return (
12
+ <Form>
13
+ <Form.Item
14
+ name="content"
15
+ label="内容"
16
+ >
17
+ <Editor />
18
+ </Form.Item>
19
+ </Form>
20
+ )
21
+ }
22
+ ```
23
+
24
+ ## API
25
+
26
+ | 属性 | 说明 | 类型 | 默认值 |
27
+ |---------------------|:-------------------------|:---------------------------------:|--------------------------------------:|
28
+ | bordered | 是否要边框 | `string` | false |
29
+ | borderStyle | 边框样式，`bordered`为`true`有效 | `string` | solid |
30
+ | borderColor | 边框颜色，`bordered`为`true`有效 | `string` | #e8e8e8 |
31
+ | borderWidth | 边框宽度，`bordered`为`true`有效 | `number` | 1 |
32
+ | borderRadius | 边框圆角，`bordered`为`true`有效 | `number` | 2 |
33
+ | value | 内容，受控 | `string` | - |
34
+ | mode | 模式 | `default` `simple` | default |
35
+ | height | 高度 | `string` | 300 |
36
+ | zIndex | 层级 | `string` | 1000 |
37
+ | disabled | 是否禁用 | `boolean` | false |
38
+ | uploadUrl | 上传地址 | `string` | /attachment/files/upload-speed-simple |
39
+ | uploadFileName | 上传文件名 | `string` | file |
40
+ | uploadImageFileSize | 图片上传大小，单位`byte` | `number` | 5MB |
41
+ | uploadVideoFileSize | 视频上传大小，单位`byte` | `number` | 5MB |
42
+ | uploadHeaders | 上传请求头 | `Record<string, string>` | - |
43
+ | uploadCustomRequest | 自定义上传 | `(file: File) => Promise<string>` | - |
44
+ | placeholder | 占位符 | `string` | 请输入... |
45
+ | onBlur | 失去焦点回调 | `() => void` | - |
46
+ | onFocus | 获得焦点回调 | `() => void() => void` | - |
47
+ | onChange | 内容变化回调、受控 | `(value: string) => void` | - |
48
+ | ref | 实例 | `React.Ref<EditorFC>` | - |
49
+
50
+ ## EditorFC
51
+
52
+ | 属性 | 说明 | 类型 | 默认值 |
53
+ |-------------------|:---------|:------------------------:|----:|
54
+ | getEditorInstance | 获取编辑器实例 | `() => any` | - |
55
+ | getHtml | 手动获取html | `() => string` | - |
56
+ | setHtml | 手动设置html | `(html: string) => void` | - |
57
+ | getPlainText | 手动获取纯文本 | `() => string` | - |
package/FileUploader/README.md ADDED
@@ -0,0 +1,51 @@
1
+ 文件上传组件
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import React, { useState } from 'react';
7
+ import { Form } from 'antd';
8
+ import FileUploader, { getValueProps, getValueFromEvent } from '@cqsjjb/jjb-react-admin-component/FileUploader';
9
+
10
+ function App() {
11
+ const [ form ] = Form.useForm();
12
+ return (
13
+ <Form>
14
+ <Form.Item
15
+ label="文件图片"
16
+ name="FileUrl"
17
+ getValueProps={getValueProps}
18
+ getValueFromEvent={getValueFromEvent}
19
+ >
20
+ <FileUploader action="httpx://xxx.xxx.xx" />
21
+ </Form.Item>
22
+ </Form>
23
+ );
24
+ }
25
+ ```
26
+
27
+ `Array<SearchFormConfig>`
28
+
29
+ ## API
30
+
31
+ | 属性 | 说明 | 类型 | 默认值 |
32
+ |----------------------------|:---------------------------------------------------------------------|:------------------------------------------------------:|------:|
33
+ | size | 文件大小，单位：KB | `number` | 5120 |
34
+ | buttonProps | 组件内部按钮属性 参考 https://ant-design.antgroup.com/components/button-cn#api | `ButtonProps` | - |
35
+ | data | 额外的数据 | `Record<string, any>` | - |
36
+ | value | 值，受控 | `any` | - |
37
+ | accept | 上传类型 参考`MIME`类型 | `string` | * |
38
+ | action | 组件高度 | `string` | - |
39
+ | preview | 是否支持预览 | `boolean` | false |
40
+ | headers | 请求头 | `Record<string, any>` | - |
41
+ | maxCount | 最多上传数，`multiple`为`true`有效 | `number` | 99 |
42
+ | multiple | 上传多个文件 | `boolean` | false |
43
+ | disabled | 是否禁用 | `boolean` | false |
44
+ | fieldName | 上传文件的字段名 | `string` | file |
45
+ | showDelete | 显示删除图标 | `boolean` | true |
46
+ | customRequest | 自定义请求 | `(res: AxiosResponse) => void` | - |
47
+ | onChange | 受控值改变回调 | `(value: any) => void` | - |
48
+ | onBeforeUploadVerifySize | 上传前验证文件大小 | `(fileSize: number, maxSize: number) => Promise<void>` | - |
49
+ | onBeforeUploadVerifyAccept | 上传前验证文件类型 | `(fileType: string, accept: string) => Promise<void>` | - |
50
+
51
+ **注意：这个组件的`multiple`仅为可以上传多个文件，但不是支持选择多个文件，若要上传选择多个文件，建议使用`antd/Upload`组件**
package/FormilyDescriptions/README.md ADDED
@@ -0,0 +1,64 @@
1
+ 动态表单详情渲染
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import React from 'react';
7
+ import { Form } from 'antd';
8
+ import FormilyDescriptions from '@cqsjjb/jjb-react-admin-component/FormilyDescriptions';
9
+
10
+ function App() {
11
+ // 这段配置数据从接口获取
12
+ const schema = [
13
+ {
14
+ fieldCode: 'name',
15
+ fieldDataTypeEnum: 'varchar',
16
+ fieldLength: 255,
17
+ fieldSort: 0,
18
+ formType: 'Input',
19
+ fromComponentEnum: 'FIELD_TEXT',
20
+ fromComponentInfoEnum: 'SINGLE_LINE_TEXT_SECTION',
21
+ name: '用户名',
22
+ parentCode: null,
23
+ requiredEnum: 'TRUE'
24
+ }
25
+ ];
26
+
27
+ return (
28
+ <FormilyDescriptions
29
+ schema={schema}
30
+ values={{ name: '张三' }}
31
+ />
32
+ )
33
+ }
34
+ ```
35
+
36
+ ## API
37
+
38
+ | 属性 | 说明 | 类型 | 默认值 |
39
+ |----------------|:--------------------------------------------------------------------------|:-----------------------------------------------------------:|--------:|
40
+ | schema | 表单配置 （注意不是原始配置`config`，而是后端转换后的配置） | `Array<FormilySchema>` | - |
41
+ | values | 表单数据 | `Record<string, FormilyValue>` | - |
42
+ | size | 详情组件大小 | `small` `middle` `default` | default |
43
+ | maxTagCount | 内部`TreeSelect`组件的最大显示标签数量 | `number` | 1 |
44
+ | renderItemText | 自定义渲染文本 | `(params: { text: any; name?: string }) => React.ReactNode` | - |
45
+ | imageWidth | 内部缩略图宽度 | `number` | 64 |
46
+ | imageHeight | 内部缩略图高度 | `number` | 64 |
47
+ | extraFileLink | 附件预览，`true`打开浏览器窗口，`false`弹窗打开 | `boolean` | false |
48
+ | imagePreview | 图片预览配置，参考 https://ant-design.antgroup.com/components/image-cn#previewtype | `PreviewType` | - |
49
+
50
+ 其属性参考 https://ant-design.antgroup.com/components/descriptions-cn#descriptions
51
+
52
+ ## FormilySchema
53
+
54
+ | 属性 | 说明 | 类型 | 默认值 |
55
+ |-----------------------|:--------------|:--------------:|----:|
56
+ | fieldCode | 字段编码 | `string` | - |
57
+ | fieldDataTypeEnum | 字段数据类型 | `string` | - |
58
+ | fieldLength | 字段长度 | `number` | - |
59
+ | fieldSort | 字段排序 | `number` | - |
60
+ | formType | 表单组件类型 | `string` | - |
61
+ | fromComponentEnum | 表单组件输出值格式类型枚举 | `string` | - |
62
+ | fromComponentInfoEnum | 表单组件信息枚举 | `string` | - |
63
+ | name | 字段名称 | `string` | - |
64
+ | requiredEnum | 是否必填 | `TRUE` `FALSE` | - |
package/ImageCropper/README.md ADDED
@@ -0,0 +1,84 @@
1
+ 单图裁剪组件
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import React, { useState, useRef } from 'react';
7
+ import { Button } from 'antd';
8
+ import ImageCropper from '~/components/publish/ImageCropper';
9
+
10
+ function App() {
11
+ const cropper = useRef();
12
+ const [ resource, setResource ] = useState();
13
+ const onUpload = () => {
14
+ const input = document.createElement('input');
15
+ input.type = 'file';
16
+ input.click();
17
+ input.onchange = e => {
18
+ setResource(e.target.files[ 0 ]);
19
+ };
20
+ };
21
+
22
+ const onCropper = () => {
23
+ console.log(cropper.current.toDataFile());
24
+ };
25
+ return (
26
+ <>
27
+ <Button onClick={onUpload}>
28
+ 上传文件
29
+ </Button>
30
+ <Button onClick={onCropper}>
31
+ 获取裁剪后的图片
32
+ </Button>
33
+ <ImageCropper
34
+ ref={cropper}
35
+ resource={resource}
36
+ />
37
+ </>
38
+ );
39
+ }
40
+ ```
41
+
42
+ ## API
43
+
44
+ | 属性 | 说明 | 类型 | 默认值 |
45
+ |----------|:--------------------|:----------------------------:|-------:|
46
+ | width | 宽度 | `number` | 400 |
47
+ | height | 高度 | `number` | 400 |
48
+ | locked | 是否锁定裁剪框大小 | `boolean` | false |
49
+ | aspect | 裁剪框宽高比 | `number` | 16 / 9 |
50
+ | resource | 裁剪的资源，文件对象或`base64` | `File` `string` | - |
51
+ | ref | 裁剪实例 | `React.Ref<ImageCropperRef>` | - |
52
+
53
+ ## ImageCropperRef 裁剪实例
54
+
55
+ | 属性 | 说明 | 类型 | 默认值 |
56
+ |---------------------|:---------------------|:------------------------------------------:|----:|
57
+ | toDataURL | 转换为dataURL | `(quality?: number) => ToDataURLResult` | 400 |
58
+ | toDataFile | 转换为dataFile | `() => ToDataFileResult` | 400 |
59
+ | toBlobURL | 转换为blobURL | `() => string` | - |
60
+ | toDataImageText | 转换为dataImageText | `() => string` | - |
61
+ | toDataImageInstance | 转换为dataImageInstance | `() => Promise<ToDataImageInstanceResult>` | - |
62
+
63
+ ## ToDataURLResult
64
+
65
+ | 属性 | 说明 | 类型 | 默认值 |
66
+ |--------|:-------|:--------:|----:|
67
+ | md5 | 文件MD5 | `string` | - |
68
+ | base64 | base64 | `string` | - |
69
+
70
+ ## ToDataFileResult
71
+
72
+ | 属性 | 说明 | 类型 | 默认值 |
73
+ |------|:------|:--------:|----:|
74
+ | md5 | 文件MD5 | `string` | - |
75
+ | file | 文件对象 | `File` | - |
76
+
77
+ ## ToDataImageInstanceResult
78
+
79
+ | 属性 | 说明 | 类型 | 默认值 |
80
+ |----------|:-----|:------------------:|----:|
81
+ | src | 文件资源 | `string` | - |
82
+ | width | 宽度 | `number` | - |
83
+ | height | 高度 | `number` | - |
84
+ | instance | 实例 | `HTMLImageElement` | - |
package/ImageUploader/README.md ADDED
@@ -0,0 +1,73 @@
1
+ 单图上传组件
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import { useState } from 'react';
7
+ import { Button, Form } from 'antd';
8
+ import ImageUploader, { getValueProps, getValueFromEvent } from '@cqsjjb/jjb-react-admin-component/ImageUploader';
9
+
10
+ function App() {
11
+ const [ form ] = Form.useForm();
12
+ return (
13
+ <Form>
14
+ <Form.Item
15
+ label="上传图片"
16
+ name="imageUrl"
17
+ getValueProps={getValueProps}
18
+ getValueFromEvent={getValueFromEvent}
19
+ >
20
+ <ImageUploader action="httpx://xxx.xxx.xx" />
21
+ </Form.Item>
22
+ </Form>
23
+ );
24
+ }
25
+ ```
26
+
27
+ ## API
28
+
29
+ | 属性 | 说明 | 类型 | 默认值 |
30
+ |-------------------|:-----------------------------|:---------------------------:|--------------------------------------------:|
31
+ | wh | 宽高比 | `string` | 50*50 |
32
+ | tip | 提示文本 | `string` | 点击上传 |
33
+ | size | 文件大小，单位：KB | `number` | 5120 |
34
+ | data | 额外的数据 | `Record<string, any>` | - |
35
+ | value | 值，受控 | `any` | - |
36
+ | width | 组件宽度 | `number` | 120 |
37
+ | height | 组件高度 | `number` | 120 |
38
+ | action | 组件高度 | `number` | 120 |
39
+ | preview | 是否支持预览 | `boolean` | true |
40
+ | disabled | 是否禁用 | `boolean` | false |
41
+ | fieldName | 上传文件的字段名 | `string` | file |
42
+ | borderStyle | 边框样式 | `string` | dashed |
43
+ | borderColor | 边框颜色 | `string` | #d9d9d9 |
44
+ | borderWidth | 边框宽度 | `number` | 1 |
45
+ | borderRadius | 边框圆角 | `number` | 2 |
46
+ | cropper | 是否开启裁剪 | `boolean` | false |
47
+ | cropperConfig | 裁剪配置，`cropper`为`true`时有效 | `CropperConfig` | - |
48
+ | backgroundColor | 背景颜色 | `string` | #fafafa |
49
+ | customRequest | 自定义请求 | `(res: {data: any}) => void | Promise<{fileId: string, fileUrl: string}>` | - |
50
+ | onChange | 受控值改变回调 | `(value: any) => void` | - |
51
+ | compression | 是否支持压缩 | `boolean` | false |
52
+ | compressionConfig | 压缩配置，`compression`为`true`时有效 | `CompressionConfig` | - |
53
+ | needToken | 是否需要token | `boolean` | true |
54
+
55
+ ## CropperConfig 裁剪配置
56
+
57
+ | 属性 | 说明 | 类型 | 默认值 |
58
+ |--------|:----------|:---------:|-------:|
59
+ | width | 宽度 | `number` | 400 |
60
+ | height | 高度 | `number` | 400 |
61
+ | locked | 锁定不可缩放裁剪框 | `boolean` | false |
62
+ | aspect | 宽高比 | `number` | 16 / 9 |
63
+
64
+ ## CompressionConfig 压缩配置
65
+
66
+ | 属性 | 说明 | 类型 | 默认值 |
67
+ |----------|:-----|:---------------:|-----:|
68
+ | quality | 压缩质量 | `number` | 0.6 |
69
+ | backType | 压缩类型 | `file` `base64` | file |
70
+
71
+ ## Form表单辅助
72
+ * getValueFromEvent
73
+ * getValueProps
package/ListDataContainer/index.d.ts CHANGED
@@ -140,8 +140,8 @@ export interface ListDataContainerProps<T extends boolean = false> {
140
140
  * @example
141
141
  */
142
142
  tableProps?: T extends true
143
- ? OverTableProps<any> // ProTable 专属属性（如 search、toolBar 等）
144
- : TableProps<any>; // antd 原生 Table 属性（如 bordered、scroll 等）
143
+ ? OverTableProps // ProTable 专属属性（如 search、toolBar 等）
144
+ : TableProps<any>; // antd 原生 Table 属性（如 bordered、scroll 等）
145
145
 
146
146
  /**
147
147
  * 表格类型切换开关
package/PageLayout/README.md ADDED
@@ -0,0 +1,41 @@
1
+ 页面布局组件
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import { useState } from 'react';
7
+ import { Button } from 'antd';
8
+ import PageLayout from '@cqsjjb/jjb-react-admin-component/PageLayout';
9
+
10
+ function App() {
11
+ return (
12
+ <PageLayout title="用户中心">
13
+
14
+ </PageLayout>
15
+ )
16
+ }
17
+ ```
18
+
19
+ ## API
20
+
21
+ | 属性 | 说明 | 类型 | 默认值 |
22
+ |-----------------|:-----------|:---------------:|------:|
23
+ | title | 页面标题 | `string` | - |
24
+ | extra | 右上角扩展 | `ReactNode` | - |
25
+ | header | 自定义头部 | `ReactNode` | - |
26
+ | footer | 自定义底部 | `ReactNode` | - |
27
+ | history | 路由历史对象 | `History` | - |
28
+ | noStyle | 去除所有样式 | `boolean` | false |
29
+ | noBorder | 取消边框 | `boolean` | false |
30
+ | formLine | form 表单行 | `ReactNode[]` | - |
31
+ | formLineStyle | form 表单行样式 | `CSSProperties` | - |
32
+ | previous | 显示返回上一页 | `boolean` | false |
33
+ | transparent | 背景透明 | `boolean` | false |
34
+ | contentStyle | 内容区样式 | `CSSProperties` | - |
35
+ | footerStyle | 底部样式 | `CSSProperties` | - |
36
+ | pageHeaderStyle | 头部样式 | `CSSProperties` | - |
37
+ | style | 自定义返回事件 | `CSSProperties` | - |
38
+ | onBack | 容器样式 | `() => void` | - |
39
+
40
+
41
+ 注意：`previous`为`true`时`history`必传，否则点击返回无效。
package/SearchForm/README.md ADDED
@@ -0,0 +1,66 @@
1
+ [搜索表单组件
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import { useState, userRef } from 'react';
7
+ import { Button, Form, Input } from 'antd';
8
+ import SearchForm from '@cqsjjb/jjb-react-admin-component/SearchForm';
9
+ import PageLayout from '@cqsjjb/jjb-react-admin-component/PageLayout';
10
+
11
+ function App() {
12
+ const form = useRef();
13
+
14
+ // 提交
15
+ const onFinish = values => {
16
+
17
+ }
18
+
19
+ return (
20
+ <PageLayout
21
+ title="用户中心"
22
+ formLine={(
23
+ <SearchForm
24
+ form={form}
25
+ formLine={[
26
+ <Form.Item
27
+ noStyle
28
+ name="keyword"
29
+ >
30
+ <Input
31
+ allowClear
32
+ placeholder="请输入关键字"
33
+ />
34
+ </Form.Item>
35
+ ]}
36
+ onReset={() => {
37
+ form.current.submit();
38
+ }}
39
+ onFinish={onFinish}
40
+ />
41
+ )}
42
+ >
43
+
44
+ </PageLayout>
45
+ )
46
+ }
47
+ ```
48
+
49
+ ## API
50
+
51
+ | 属性 | 说明 | 类型 | 默认值 |
52
+ |---------------|:--------------------------|:-----------------------------------------------:|------:|
53
+ | form | form 实例 | `React.RefObject<FormInstance>` | - |
54
+ | style | 样式 | `CSSProperties` | - |
55
+ | expand | 是否展开，受控模式 | `boolean` | false |
56
+ | defaultExpand | 内部默认展开状态，仅在 expand 未传入时生效 | `boolean` | false |
57
+ | colSize | 列数 | `number` | 3 |
58
+ | loading | 查询 loading 状态 | `boolean` | false |
59
+ | formLine | 表单行节点数组 | `ReactNode[]` | - |
60
+ | initialValues | 表单初始值 | `Record<string, any>` | - |
61
+ | onRef | 获取 form 实例回调（已废弃） | `(form: React.RefObject<FormInstance>) => void` | - |
62
+ | onReset | 重置回调 | `(values: Record<string, any>) => void` | - |
63
+ | onFinish | 提交回调 | `(values: Record<string, any>) => void` | - |
64
+ | onExpand | 展开/收起状态变化回调 | `(open: boolean) => void` | - |
65
+
66
+ ]()
package/Table/README.md ADDED
@@ -0,0 +1,36 @@
1
+ 高级Table，基于ProAntd实现
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import Table from '@cqsjjb/jjb-react-admin-component/Table';
7
+
8
+ function App() {
9
+ return (
10
+ <>
11
+ <Table
12
+ columns={[
13
+ {
14
+ title: 'ID',
15
+ dataIndex: 'id'
16
+ }
17
+ ]}
18
+ dataSource={[
19
+ {
20
+ id: 1
21
+ }
22
+ ]}
23
+ />
24
+ </>
25
+ )
26
+ }
27
+ ```
28
+
29
+ ## API
30
+
31
+ | 属性 | 说明 | 类型 | 默认值 |
32
+ |-----------------|:-------------------------------------------------------------|:---------:|------:|
33
+ | disabledResizer | 是否禁用内容区滚动，设置true自动将适配内容区滚动高度 | `boolean` | false |
34
+ | storeIndex | 当一个路由下存在多个表格的情况下 需要给每一个表格设置一个唯一存储索引 若没有设置则使用默认索引，请注意缓存数据会被覆盖 | `number` | - |
35
+
36
+ 其他属性参考 https://ant-design.antgroup.com/components/table-cn#api
package/Table/index.js CHANGED
@@ -88,7 +88,7 @@ export default function TablePro(props) {
88
88
  if (enabledResizer) {
89
89
  scroll.y = tableHeight;
90
90
  }
91
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({}, props, {
91
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({
92
92
  ghost: true,
93
93
  columnEmptyText: true,
94
94
  size: size,
@@ -113,5 +113,5 @@ export default function TablePro(props) {
113
113
  persistenceType: 'localStorage'
114
114
  },
115
115
  onSizeChange: setSize
116
- })));
116
+ }, props)));
117
117
  }
package/TableAction/README.md ADDED
@@ -0,0 +1,56 @@
1
+ 表格操作项组件，当操作按钮数量大于最大可显示数量，多余部分显示为"..."并用下拉菜单显示。
2
+
3
+ ## 代码演示
4
+
5
+ ```jsx
6
+ import { useState } from 'react';
7
+ import { Button, Table } from 'antd';
8
+ import TableAction from '@cqsjjb/jjb-react-admin-component/TableAction';
9
+
10
+ function App() {
11
+ const [ open, setOpen ] = useState(false);
12
+ return (
13
+ <>
14
+ <Button onClick={() => setOpen(true)}>打开地图</Button>
15
+ <Table
16
+ columns={[
17
+ {
18
+ title: 'ID',
19
+ dataIndex: 'id'
20
+ },
21
+ {
22
+ title: '操作',
23
+ render: () => (
24
+ <TableAction>
25
+ <a>
26
+ 编辑
27
+ </a>
28
+ <a>
29
+ 删除
30
+ </a>
31
+ <a>
32
+ 详情
33
+ </a>
34
+ {/*多余部分*/}
35
+ <a>
36
+ 复制
37
+ </a>
38
+ </TableAction>
39
+ )
40
+ }
41
+ ]}
42
+ />
43
+ </>
44
+ )
45
+ }
46
+ ```
47
+
48
+ ## API
49
+
50
+ | 属性 | 说明 | 类型 | 默认值 |
51
+ |-----------|:----------------------------------------------------------------------|:------------:|-------------:|
52
+ | icon | 图标 | `React.Node` | MoreOutlined |
53
+ | maximum | 最大显示数量，超出的会放入下拉菜单 | `number` | 3 |
54
+ | space | 按钮之间的间距 | `number` | 8 |
55
+ | placement | 下拉菜单显示位置，参考 https://ant-design.antgroup.com/components/tooltip-cn#api | `string` | bottomRight |
56
+ | trigger | 下拉触发方式，参考 https://ant-design.antgroup.com/components/tooltip-cn#api | `string` | hover |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cqsjjb/jjb-react-admin-component",
3
- "version": "3.3.0-beta.0",
3
+ "version": "3.3.0-beta.1",
4
4
  "description": "jjb-react-admin-组件库@new",
5
5
  "main": "index.js",
6
6
  "author": "jjb-front-team",
@@ -17,6 +17,7 @@
17
17
  "@cqsjjb-formily/renderer": "latest",
18
18
  "@ant-design/pro-layout": "latest",
19
19
  "use-antd-resizable-header": "latest",
20
- "@ant-design/pro-components": "latest"
20
+ "@ant-design/pro-components": "latest",
21
+ "react-cropper": "2.3.3"
21
22
  }
22
23
  }