@cqsjjb/jjb-react-admin-component 3.0.16 → 3.0.18

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/FormilyDescriptions/index.d.ts +2 -2
  2. package/FormilyDescriptions/index.js +134 -38
  3. package/FormilyDescriptions/index.mjs +185 -55
  4. package/FormilyRenderer/index.d.ts +1 -1
  5. package/FormilyRenderer/index.js +15 -14
  6. package/FormilyRenderer/index.mjs +21 -19
  7. package/package.json +1 -1
package/FormilyDescriptions/index.d.ts CHANGED
@@ -42,12 +42,12 @@ interface FormilyDescriptionsProps extends ComponentProps {
42
42
  * @description 参考antd/description
43
43
  * @see https://ant.design/components/descriptions-cn#descriptions
44
44
  */
45
- labelStyle?: {};
45
+ labelStyle?: React.CSSProperties;
46
46
  /**
47
47
  * @description 参考antd/description
48
48
  * @see https://ant.design/components/descriptions-cn#descriptions
49
49
  */
50
- contentStyle?: {};
50
+ contentStyle?: React.CSSProperties;
51
51
  }
52
52
 
53
53
  interface FormilyDescriptionsFc extends React.FC<FormilyDescriptionsProps> {
package/FormilyDescriptions/index.js CHANGED
@@ -1,7 +1,9 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
2
  import React from 'react';
2
3
  import { tools } from '@cqsjjb/jjb-common-lib';
3
- import { LinkOutlined } from '@ant-design/icons';
4
- import { Descriptions, Empty, Image, Tooltip } from 'antd';
4
+ import { FilePdfOutlined, LinkOutlined } from '@ant-design/icons';
5
+ import { Modal, Descriptions, Empty, Image, Tooltip, Tag, Spin } from 'antd';
6
+ const formilyItemMargin = new Map([['small', 8], ['middle', 12], ['default', 16]]);
5
7
  export default function FormilyDescriptions(props) {
6
8
  const dataSource = tools.getDynamicFormilyFields(props.schema, props.values);
7
9
  return dataSource.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
@@ -12,51 +14,22 @@ export default function FormilyDescriptions(props) {
12
14
  key: index,
13
15
  size: props.size,
14
16
  style: {
15
- marginBottom: isLast ? 0 : 16
17
+ marginBottom: isLast ? 0 : formilyItemMargin.get(props.size || 'default')
16
18
  },
17
19
  items: item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => {
18
20
  return {
19
21
  key: childIndex,
20
22
  label: child.name,
21
- children: tools.isStringArray(child.value) || tools.isNumberArray(child.value) ? child.value.join('、') : tools.isObjectArray(child.value) ? /*#__PURE__*/React.createElement("div", null, child.value.map((next, nextIndex) => {
22
- if (next.url) {
23
- if (next.isImage) {
24
- return /*#__PURE__*/React.createElement("span", {
25
- style: {
26
- display: 'inline-block',
27
- marginRight: 4,
28
- marginBottom: 4
29
- }
30
- }, /*#__PURE__*/React.createElement(Image, {
31
- key: nextIndex,
32
- src: next.url,
33
- width: props.imageWidth || 64,
34
- height: props.imageHeight || 64,
35
- preview: props.imagePreview
36
- }));
37
- } else {
38
- return /*#__PURE__*/React.createElement(Tooltip, {
39
- title: next.url
40
- }, /*#__PURE__*/React.createElement("a", {
41
- key: nextIndex,
42
- href: next.url,
43
- style: {
44
- gap: 4,
45
- display: 'flex',
46
- alignItems: 'center'
47
- },
48
- target: "_blank"
49
- }, /*#__PURE__*/React.createElement(LinkOutlined, null), "\u70B9\u51FB\u4E0B\u8F7D"));
50
- }
51
- } else {
52
- return tools.textPlaceholder(next.name);
53
- }
54
- })) : tools.textPlaceholder(child.value)
23
+ children: /*#__PURE__*/React.createElement(ItemRender, _extends({
24
+ data: child
25
+ }, props))
55
26
  };
56
27
  }) : [{
57
28
  key: 1,
58
29
  label: item.name,
59
- children: tools.textPlaceholder(item.value)
30
+ children: /*#__PURE__*/React.createElement(ItemRender, _extends({
31
+ data: item
32
+ }, props))
60
33
  }],
61
34
  colon: props.colon,
62
35
  title: props.title,
@@ -67,4 +40,127 @@ export default function FormilyDescriptions(props) {
67
40
  contentStyle: props.contentStyle
68
41
  });
69
42
  }));
43
+ }
44
+ function ItemRender(props) {
45
+ const [open, setOpen] = React.useState(false);
46
+ const [previewUrl, setPreviewUrl] = React.useState('');
47
+ const {
48
+ data,
49
+ imageWidth,
50
+ imageHeight,
51
+ imagePreview
52
+ } = props;
53
+ return /*#__PURE__*/React.createElement(React.Fragment, null, tools.isArray(data.value) ? tools.isStringArray(data.value) || tools.isNumberArray(data.value) ? data.value.join('、') : tools.isObjectArray(data.value) ? /*#__PURE__*/React.createElement("div", null, data.value.map((next, nextIndex) => {
54
+ if (next.url) {
55
+ if (next.isImage) {
56
+ return /*#__PURE__*/React.createElement("span", {
57
+ key: nextIndex,
58
+ style: {
59
+ display: 'inline-block',
60
+ marginRight: 4,
61
+ marginBottom: 4
62
+ }
63
+ }, /*#__PURE__*/React.createElement(Image, {
64
+ src: next.url,
65
+ width: imageWidth || 64,
66
+ height: imageHeight || 64,
67
+ preview: imagePreview
68
+ }));
69
+ } else {
70
+ return /*#__PURE__*/React.createElement(Tooltip, {
71
+ title: next.url
72
+ }, /\.pdf$/.test(next.url) ? /*#__PURE__*/React.createElement("a", {
73
+ key: nextIndex,
74
+ style: {
75
+ gap: 4,
76
+ display: 'flex',
77
+ alignItems: 'center'
78
+ },
79
+ onClick: () => {
80
+ setOpen(true);
81
+ setPreviewUrl(next.url);
82
+ }
83
+ }, /*#__PURE__*/React.createElement(FilePdfOutlined, null), "\u70B9\u51FB\u67E5\u770B") : /*#__PURE__*/React.createElement("a", {
84
+ key: nextIndex,
85
+ href: next.url,
86
+ style: {
87
+ gap: 4,
88
+ display: 'flex',
89
+ alignItems: 'center'
90
+ },
91
+ target: "_blank"
92
+ }, /*#__PURE__*/React.createElement(LinkOutlined, null), "\u70B9\u51FB\u4E0B\u8F7D"));
93
+ }
94
+ } else {
95
+ return tools.textPlaceholder(next.name);
96
+ }
97
+ })) : tools.textPlaceholder() : /*#__PURE__*/React.createElement(RenderText, {
98
+ value: data.value
99
+ }) /*tools.textPlaceholder(data.value)*/, /*#__PURE__*/React.createElement(Modal, {
100
+ destroyOnClose: true,
101
+ title: "\u67E5\u770BPDF",
102
+ open: open,
103
+ width: 1100,
104
+ footer: false,
105
+ onCancel: () => setOpen(false)
106
+ }, /*#__PURE__*/React.createElement("embed", {
107
+ src: previewUrl,
108
+ width: "100%",
109
+ height: 600
110
+ })));
111
+ }
112
+ function generateValue(data, prefix = []) {
113
+ const result = [];
114
+ data.forEach(item => {
115
+ // 当前节点的完整 name
116
+ const currentName = prefix.concat(item.title);
117
+ result.push({
118
+ name: currentName,
119
+ key: item.key
120
+ });
121
+ if (item.children && item.children.length > 0) {
122
+ // 递归处理子节点
123
+ result.push(...generateValue(item.children, currentName));
124
+ }
125
+ });
126
+ return result;
127
+ }
128
+ function RenderText(props) {
129
+ const {
130
+ value
131
+ } = props;
132
+ const [text, setText] = React.useState();
133
+ const [loading, setLoading] = React.useState(false);
134
+ React.useEffect(() => {
135
+ if (value.load) {
136
+ setLoading(true);
137
+ value.load().then(res => res.json()).then(res => {
138
+ if (res.success) {
139
+ const data = generateValue(res.data);
140
+ setText(value.selected?.map(item => {
141
+ return data.find(i => i.key === item.key)?.name?.join('/');
142
+ })?.filter(i => i));
143
+ }
144
+ setLoading(false);
145
+ });
146
+ } else {
147
+ setText(value);
148
+ }
149
+ }, []);
150
+ return Array.isArray(text) ? /*#__PURE__*/React.createElement(Spin, {
151
+ spinning: loading
152
+ }, /*#__PURE__*/React.createElement("div", {
153
+ style: {
154
+ gap: 6,
155
+ display: 'flex',
156
+ minHeight: 22,
157
+ flexDirection: 'column'
158
+ }
159
+ }, text.map((item, index) => /*#__PURE__*/React.createElement(Tag, {
160
+ style: {
161
+ background: '#eee'
162
+ },
163
+ index: index,
164
+ bordered: false
165
+ }, item)))) : text;
70
166
  }
package/FormilyDescriptions/index.mjs CHANGED
@@ -1,8 +1,14 @@
1
1
  import React from 'react';
2
2
 
3
3
  import { tools } from '@cqsjjb/jjb-common-lib';
4
- import { LinkOutlined } from '@ant-design/icons';
5
- import { Descriptions, Empty, Image, Tooltip } from 'antd';
4
+ import { FilePdfOutlined, LinkOutlined } from '@ant-design/icons';
5
+ import { Modal, Descriptions, Empty, Image, Tooltip, Tag, Spin } from 'antd';
6
+
7
+ const formilyItemMargin = new Map([
8
+ [ 'small', 8 ],
9
+ [ 'middle', 12 ],
10
+ [ 'default', 16 ]
11
+ ]);
6
12
 
7
13
  export default function FormilyDescriptions(props) {
8
14
  const dataSource = tools.getDynamicFormilyFields(props.schema, props.values);
@@ -20,71 +26,23 @@ export default function FormilyDescriptions(props) {
20
26
  style={{
21
27
  marginBottom: isLast
22
28
  ? 0
23
- : 16
29
+ : formilyItemMargin.get(props.size || 'default')
24
30
  }}
25
31
  items={item.fromComponentEnum === 'GRID_FORM'
26
32
  ? item.children.map((child, childIndex) => {
27
33
  return {
28
34
  key: childIndex,
29
35
  label: child.name,
30
- children: (tools.isStringArray(child.value) || tools.isNumberArray(child.value))
31
- ? child.value.join('、')
32
- : tools.isObjectArray(child.value)
33
- ? (
34
- <div>
35
- {child.value.map((next, nextIndex) => {
36
- if (next.url) {
37
- if (next.isImage) {
38
- return (
39
- <span
40
- style={{
41
- display: 'inline-block',
42
- marginRight: 4,
43
- marginBottom: 4
44
- }}
45
- >
46
- <Image
47
- key={nextIndex}
48
- src={next.url}
49
- width={props.imageWidth || 64}
50
- height={props.imageHeight || 64}
51
- preview={props.imagePreview}
52
- />
53
- </span>
54
- );
55
- } else {
56
- return (
57
- <Tooltip title={next.url}>
58
- <a
59
- key={nextIndex}
60
- href={next.url}
61
- style={{
62
- gap: 4,
63
- display: 'flex',
64
- alignItems: 'center'
65
- }}
66
- target="_blank"
67
- >
68
- <LinkOutlined />
69
- 点击下载
70
- </a>
71
- </Tooltip>
72
- );
73
- }
74
- } else {
75
- return tools.textPlaceholder(next.name);
76
- }
77
- })}
78
- </div>
79
- )
80
- : tools.textPlaceholder(child.value)
36
+ children: (
37
+ <ItemRender data={child} {...props} />
38
+ )
81
39
  };
82
40
  })
83
41
  : [
84
42
  {
85
43
  key: 1,
86
44
  label: item.name,
87
- children: tools.textPlaceholder(item.value)
45
+ children: <ItemRender data={item} {...props} />
88
46
  }
89
47
  ]}
90
48
  colon={props.colon}
@@ -100,3 +58,175 @@ export default function FormilyDescriptions(props) {
100
58
  </React.Fragment>
101
59
  );
102
60
  }
61
+
62
+ function ItemRender(props) {
63
+ const [ open, setOpen ] = React.useState(false);
64
+ const [ previewUrl, setPreviewUrl ] = React.useState('');
65
+
66
+ const {
67
+ data,
68
+ imageWidth,
69
+ imageHeight,
70
+ imagePreview
71
+ } = props;
72
+
73
+ return (
74
+ <React.Fragment>
75
+ {tools.isArray(data.value)
76
+ ? (tools.isStringArray(data.value) || tools.isNumberArray(data.value))
77
+ ? data.value.join('、')
78
+ : tools.isObjectArray(data.value)
79
+ ? (
80
+ <div>
81
+ {data.value.map((next, nextIndex) => {
82
+ if (next.url) {
83
+ if (next.isImage) {
84
+ return (
85
+ <span
86
+ key={nextIndex}
87
+ style={{
88
+ display: 'inline-block',
89
+ marginRight: 4,
90
+ marginBottom: 4
91
+ }}
92
+ >
93
+ <Image
94
+ src={next.url}
95
+ width={imageWidth || 64}
96
+ height={imageHeight || 64}
97
+ preview={imagePreview}
98
+ />
99
+ </span>
100
+ );
101
+ } else {
102
+ return (
103
+ <Tooltip title={next.url}>
104
+ {/\.pdf$/.test(next.url)
105
+ ? (
106
+ <a
107
+ key={nextIndex}
108
+ style={{
109
+ gap: 4,
110
+ display: 'flex',
111
+ alignItems: 'center'
112
+ }}
113
+ onClick={() => {
114
+ setOpen(true);
115
+ setPreviewUrl(next.url);
116
+ }}
117
+ >
118
+ <FilePdfOutlined />
119
+ 点击查看
120
+ </a>
121
+ )
122
+ : (
123
+ <a
124
+ key={nextIndex}
125
+ href={next.url}
126
+ style={{
127
+ gap: 4,
128
+ display: 'flex',
129
+ alignItems: 'center'
130
+ }}
131
+ target="_blank"
132
+ >
133
+ <LinkOutlined />
134
+ 点击下载
135
+ </a>
136
+ )}
137
+ </Tooltip>
138
+ );
139
+ }
140
+ } else {
141
+ return tools.textPlaceholder(next.name);
142
+ }
143
+ })}
144
+ </div>
145
+ )
146
+ : tools.textPlaceholder()
147
+ : <RenderText value={data.value} />/*tools.textPlaceholder(data.value)*/}
148
+ <Modal
149
+ destroyOnClose
150
+ title="查看PDF"
151
+ open={open}
152
+ width={1100}
153
+ footer={false}
154
+ onCancel={() => setOpen(false)}
155
+ >
156
+ <embed
157
+ src={previewUrl}
158
+ width="100%"
159
+ height={600}
160
+ />
161
+ </Modal>
162
+ </React.Fragment>
163
+ );
164
+ }
165
+
166
+ function generateValue(data, prefix = []) {
167
+ const result = [];
168
+
169
+ data.forEach(item => {
170
+ // 当前节点的完整 name
171
+ const currentName = prefix.concat(item.title);
172
+ result.push({
173
+ name: currentName,
174
+ key: item.key
175
+ });
176
+
177
+ if (item.children && item.children.length > 0) {
178
+ // 递归处理子节点
179
+ result.push(...generateValue(item.children, currentName));
180
+ }
181
+ });
182
+
183
+ return result;
184
+ }
185
+
186
+ function RenderText(props) {
187
+ const { value } = props;
188
+ const [ text, setText ] = React.useState();
189
+ const [ loading, setLoading ] = React.useState(false);
190
+
191
+ React.useEffect(() => {
192
+ if (value.load) {
193
+ setLoading(true);
194
+ value.load().then(res => res.json()).then(res => {
195
+ if (res.success) {
196
+ const data = generateValue(res.data);
197
+ setText(value.selected?.map(item => {
198
+ return data.find(i => i.key === item.key)?.name?.join('/');
199
+ })?.filter(i => i));
200
+ }
201
+ setLoading(false);
202
+ });
203
+ } else {
204
+ setText(value);
205
+ }
206
+ }, []);
207
+
208
+ return Array.isArray(text)
209
+ ? (
210
+ <Spin spinning={loading}>
211
+ <div
212
+ style={{
213
+ gap: 6,
214
+ display: 'flex',
215
+ minHeight: 22,
216
+ flexDirection: 'column'
217
+ }}
218
+ >
219
+ {text.map((item, index) => (
220
+ <Tag
221
+ style={{ background: '#eee' }}
222
+ index={index}
223
+ bordered={false}
224
+ >
225
+ {item}
226
+ </Tag>
227
+ ))}
228
+ </div>
229
+ </Spin>
230
+ )
231
+ : text;
232
+ }
package/FormilyRenderer/index.d.ts CHANGED
@@ -28,7 +28,7 @@ interface FormilyRendererProps extends ComponentProps {
28
28
  * @description 样式
29
29
  * @see https://ant.design/components/image-cn#previewtype
30
30
  */
31
- style?: {}
31
+ style?: React.CSSProperties
32
32
  }
33
33
 
34
34
  interface FormilyRendererFc extends React.FC<FormilyRendererProps> {
package/FormilyRenderer/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import Renderer from '@cqsjjb-formily/renderer';
3
3
  import { http, tools } from '@cqsjjb/jjb-common-lib';
4
- export default function FormilyRenderer(props) {
4
+ export default /*#__PURE__*/React.forwardRef((props, ref) => {
5
5
  const form = React.useRef();
6
6
  const [schema, setSchema] = React.useState({});
7
7
  React.useEffect(() => {
@@ -15,23 +15,24 @@ export default function FormilyRenderer(props) {
15
15
  });
16
16
  }, []);
17
17
  React.useEffect(() => {
18
- if (!tools.isEmptyObject(schema)) {
19
- form.current.setValues(props.initialValues);
20
- setTimeout(() => {
21
- for (const field of tools.toArray(props.disabledFields)) {
22
- if (form.current.fields[field]) {
23
- form.current.fields[field].required = false;
24
- form.current.fields[field].disabled = true;
25
- }
26
- }
27
- }, 1000);
28
- props.getRef && props.getRef(form);
18
+ if (ref) {
19
+ ref.current = form.current;
29
20
  }
21
+ form.current.setValues(props.initialValues);
22
+ setTimeout(() => {
23
+ for (const field of tools.toArray(props.disabledFields)) {
24
+ if (form.current.fields[field]) {
25
+ form.current.fields[field].required = false;
26
+ form.current.fields[field].disabled = true;
27
+ }
28
+ }
29
+ }, 1000);
30
+ props.getRef && props.getRef(form);
30
31
  }, [schema]);
31
32
  return /*#__PURE__*/React.createElement("div", {
32
33
  style: props.style
33
- }, !tools.isEmptyObject(schema) && /*#__PURE__*/React.createElement(Renderer, {
34
+ }, /*#__PURE__*/React.createElement(Renderer, {
34
35
  ref: form,
35
36
  schema: schema
36
37
  }));
37
- }
38
+ });
package/FormilyRenderer/index.mjs CHANGED
@@ -3,7 +3,7 @@ import Renderer from '@cqsjjb-formily/renderer';
3
3
 
4
4
  import { http, tools } from '@cqsjjb/jjb-common-lib';
5
5
 
6
- export default function FormilyRenderer (props) {
6
+ export default React.forwardRef((props, ref) => {
7
7
  const form = React.useRef();
8
8
  const [ schema, setSchema ] = React.useState({});
9
9
 
@@ -17,28 +17,30 @@ export default function FormilyRenderer (props) {
17
17
  }, []);
18
18
 
19
19
  React.useEffect(() => {
20
- if (!tools.isEmptyObject(schema)) {
21
- form.current.setValues(props.initialValues);
22
- setTimeout(() => {
23
- for (const field of tools.toArray(props.disabledFields)) {
24
- if (form.current.fields[ field ]) {
25
- form.current.fields[ field ].required = false;
26
- form.current.fields[ field ].disabled = true;
27
- }
28
- }
29
- }, 1000);
30
- props.getRef && props.getRef(form);
20
+ if (ref) {
21
+ ref.current = form.current;
31
22
  }
23
+
24
+ form.current.setValues(props.initialValues);
25
+
26
+ setTimeout(() => {
27
+ for (const field of tools.toArray(props.disabledFields)) {
28
+ if (form.current.fields[ field ]) {
29
+ form.current.fields[ field ].required = false;
30
+ form.current.fields[ field ].disabled = true;
31
+ }
32
+ }
33
+ }, 1000);
34
+
35
+ props.getRef && props.getRef(form);
32
36
  }, [ schema ]);
33
37
 
34
38
  return (
35
39
  <div style={props.style}>
36
- {!tools.isEmptyObject(schema) && (
37
- <Renderer
38
- ref={form}
39
- schema={schema}
40
- />
41
- )}
40
+ <Renderer
41
+ ref={form}
42
+ schema={schema}
43
+ />
42
44
  </div>
43
45
  );
44
- }
46
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cqsjjb/jjb-react-admin-component",
3
- "version": "3.0.16",
3
+ "version": "3.0.18",
4
4
  "description": "jjb-react-admin-组件库@new",
5
5
  "main": "index.js",
6
6
  "author": "jjb-front-team",