zerod 0.6.0 → 0.6.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import ReactDOM from 'react-dom';
2
3
  import { Form, Modal, Input, Button, Row, Col, message, ConfigProvider } from 'antd';
3
4
  import zh_CN from 'antd/lib/locale-provider/zh_CN';
4
5
  import PropTypes from 'prop-types';
@@ -227,7 +228,7 @@ export const Zform = Form.create()(
227
228
  let newValue = value;
228
229
  if (this.props.momentFormat) {
229
230
  const currentItem = formItems.find((item) => item.key === key);
230
- if (currentItem && currentItem.format) {
231
+ if (currentItem && currentItem.format && !moment.isMoment(value)) {
231
232
  const toMoment = (val, format) => {
232
233
  return moment(val, format);
233
234
  };
@@ -245,7 +246,30 @@ export const Zform = Form.create()(
245
246
  return newValue;
246
247
  }
247
248
  },
249
+ setErrorsId(rootEl, valuesIdMap) {
250
+ setTimeout(() => {
251
+ let root = rootEl || this.currRootEl;
252
+
253
+ if (root) {
254
+ if (root.localName === 'td') {
255
+ root = root.parentElement;
256
+ }
257
+ // console.dir(root);
258
+ Object.keys(valuesIdMap).forEach((key) => {
259
+ const inputEl = root.querySelector(`#${key}`);
260
+ let parEl = inputEl.parentElement;
261
+ while (parEl && !(parEl.className || '').includes('ant-form-item-control')) {
262
+ parEl = parEl.parentElement;
263
+ }
264
+ if (parEl) {
265
+ parEl.querySelector('.ant-form-explain').id = valuesIdMap[key];
266
+ }
267
+ });
268
+ }
269
+ }, 100);
270
+ },
248
271
  setFieldsValue: (vals) => {
272
+ this.valuesIdMap = {};
249
273
  const values = vals || this.props.values || this.props.formDefaultValues;
250
274
  if (values) {
251
275
  const saveSettingValues = { ...(this.state.saveSettingValues || {}), ...(values || {}) };
@@ -256,21 +280,32 @@ export const Zform = Form.create()(
256
280
  const forms = !this.props.onlySetCurrentValues ? this.methods.getForms() : [this.form];
257
281
  const otherFormItems = (this.props.getOtherFormItems && this.props.getOtherFormItems()) || [];
258
282
  forms.forEach((form) => {
283
+ const valuesIdMap = {};
259
284
  const formItems = form.zformItems.concat(otherFormItems);
260
285
  if (values && formItems.length) {
261
286
  const newValues = {};
287
+ const newFields = {};
262
288
  formItems.forEach((field) => {
263
289
  const key = field.key;
264
290
  const value = values[key];
265
- if (value !== undefined) {
291
+ if (value && typeof value === 'object' && !Array.isArray(value) && value.errors) {
292
+ newFields[key] = {
293
+ value: this.methods.treatValue({ key, value: value.value, formItems }),
294
+ errors: value.errors.map((item) => new Error(item)),
295
+ };
296
+ valuesIdMap[key] = value.valueId;
297
+ } else if (value !== undefined) {
266
298
  newValues[key] = this.methods.treatValue({ key, value, formItems });
267
299
  }
268
300
  });
269
- const allKeys = Object.keys(newValues);
270
- if (allKeys.length) {
271
- console.log(newValues, '----0');
301
+
302
+ if (Object.keys(newValues).length) {
272
303
  form.setFieldsValue(newValues);
273
304
  }
305
+ if (Object.keys(newFields).length) {
306
+ form.setFields(newFields);
307
+ }
308
+ this.methods.setErrorsId(form.zform.currRootEl, valuesIdMap);
274
309
  }
275
310
  });
276
311
  },
@@ -482,6 +517,17 @@ export const Zform = Form.create()(
482
517
  }
483
518
  const_initItems.call(this, formItems, this.form, this.methods.changeFormItems, () => {
484
519
  const_execAsync.call(this, (...rest) => {
520
+ // const fields = formItems.reduce((tol, curr) => {
521
+ // const fieldErr = {};
522
+ // if (Array.isArray(curr.errorMsgs) && curr.errorMsgs.length) {
523
+ // const val = this.form.getFieldValue(curr.key);
524
+ // fieldErr[curr.key] = { value: val, errors: curr.errorMsgs };
525
+ // }
526
+ // return { ...tol, ...fieldErr };
527
+ // }, {});
528
+ // if (Object.keys(fields).length) {
529
+ // this.methods.setFields(fields);
530
+ // }
485
531
  this.form.formReady = true;
486
532
  this.props.afterItemsRendered && this.props.afterItemsRendered(...rest);
487
533
  });
@@ -536,6 +582,7 @@ export const Zform = Form.create()(
536
582
  saveOptionsMapKey: this.form.saveOptionsMapKey,
537
583
  getAsyncQueue: () => this.allAsync,
538
584
  saveSettingValues: this.state.saveSettingValues || {},
585
+ zform: this,
539
586
  };
540
587
  this.prevSettingValues = this.state.saveSettingValues;
541
588
  this.prevPropsForm = this.props.form;
@@ -580,7 +627,13 @@ export const Zform = Form.create()(
580
627
  const items = this.getFormItems();
581
628
  const wrapperClassname = classNames('z-form', className || '');
582
629
  return this.setAntdConfigProvider(
583
- <Form onSubmit={this.methods.onSubmit} className={wrapperClassname} style={style}>
630
+ <Form
631
+ ref={(el) => {
632
+ this.currRootEl = ReactDOM.findDOMNode(el);
633
+ }}
634
+ onSubmit={this.methods.onSubmit}
635
+ className={wrapperClassname}
636
+ style={style}>
584
637
  <Row type="flex" className={`z-form-row z-form-label-${labelLayout} z-form-control-${controlSize}`}>
585
638
  {items}
586
639
  </Row>
@@ -599,7 +652,15 @@ export const Zform = Form.create()(
599
652
  );
600
653
  }
601
654
  setAntdConfigProvider(children) {
602
- return <ConfigProvider locale={zh_CN}>{children}</ConfigProvider>;
655
+ return (
656
+ <ConfigProvider
657
+ ref={(el) => {
658
+ this.currRootEl = ReactDOM.findDOMNode(el);
659
+ }}
660
+ locale={zh_CN}>
661
+ {children}
662
+ </ConfigProvider>
663
+ );
603
664
  }
604
665
  },
605
666
  );
@@ -1,9 +1,10 @@
1
1
  @import "../../scss/common/z-form";
2
2
  :global {
3
- // .z-form {
4
- // width: 86%;
5
- // margin: 0 auto !important;
6
- // }
3
+ .z-form-control-small{
4
+ .ant-form-item-control{
5
+ line-height: 30px;
6
+ }
7
+ }
7
8
  .z-no-control-border {
8
9
  .ant-input,
9
10
  .ant-select-selection,
@@ -4,7 +4,7 @@ export function analysisTextTemplate(textTemplate) {
4
4
  }
5
5
  export function analysisTextTemplateForBLOCK(textTemplate) {
6
6
  let texts = textTemplate;
7
- const placeRules = textTemplate.match(/<(div)[^>]*?>(?:<(div)[^>]*?>[\s\S]*?<\/\2>|[\s\S])*?<\/\1>/g);
7
+ const placeRules = textTemplate.match(/<(div)[^>]*?>(?:<(div)[^>]*?>(?:<(div)[^>]*?>[\s\S]*?<\/\3>|[\s\S])*?<\/\2>|[\s\S])*?<\/\1>/g);
8
8
  const blocks = [];
9
9
  let controls = [];
10
10
  if (placeRules) {
@@ -203,3 +203,6 @@ export function getControlDefaultValue({ blocks }) {
203
203
  }
204
204
  return defaultValue;
205
205
  }
206
+
207
+
208
+
@@ -1,17 +1,24 @@
1
1
  import React from 'react';
2
- // import { Col } from 'antd';
2
+ import { Icon, Popover } from 'antd';
3
3
  import ZpageLoading from '../ZpageLoading';
4
4
  import ZtextBreak from '../ZtextBreak';
5
5
 
6
6
  class ColInfoItem extends React.PureComponent {
7
7
  static defaultProps = {
8
8
  item: {},
9
+ data: {},
9
10
  };
10
11
 
11
12
  state = {
12
13
  loading: this.props.loading,
13
14
  item: this.props.item,
15
+ data: {},
16
+ dataErrors: {},
14
17
  };
18
+
19
+ componentDidMount() {
20
+ this.methods.disponseData();
21
+ }
15
22
  componentDidUpdate(prevProps) {
16
23
  if (this.props.item !== prevProps.item) {
17
24
  this.setState({
@@ -19,10 +26,12 @@ class ColInfoItem extends React.PureComponent {
19
26
  loading: this.props.loading,
20
27
  });
21
28
  }
29
+ if (this.props.data !== prevProps.data) {
30
+ this.methods.disponseData();
31
+ }
22
32
  }
23
33
  render() {
24
- const { data } = this.props;
25
- const { item } = this.state;
34
+ const { item, data, dataErrors } = this.state;
26
35
  const control = this.state.loading ? (
27
36
  <span>加载中...</span>
28
37
  ) : typeof item.control === 'function' ? (
@@ -30,8 +39,9 @@ class ColInfoItem extends React.PureComponent {
30
39
  ) : (
31
40
  data[item.key]
32
41
  );
42
+ const isError = Array.isArray(dataErrors[item.key]) && dataErrors[item.key].length;
33
43
  return (
34
- <div className="z-info">
44
+ <div className={`z-info ${isError ? 'z-info-error' : ''}`}>
35
45
  {item.label !== false ? (
36
46
  <div
37
47
  className="z-info-left z-info-left-content"
@@ -41,12 +51,41 @@ class ColInfoItem extends React.PureComponent {
41
51
  ) : null}
42
52
  <div className="z-info-right z-info-right-content">
43
53
  <ZpageLoading showLoading={this.state.loading} size="small" />
54
+ {isError ? (
55
+ <Popover
56
+ content={
57
+ <div>
58
+ {dataErrors[item.key].map((msg) => {
59
+ return <p key={msg}>{msg}</p>;
60
+ })}
61
+ </div>
62
+ }
63
+ title="错误信息">
64
+ <Icon type="warning" className="error-info-icon" />
65
+ </Popover>
66
+ ) : null}
44
67
  {typeof control === 'string' ? <ZtextBreak text={control} /> : control}
45
68
  </div>
46
69
  </div>
47
70
  );
48
71
  }
49
72
  methods = {
73
+ disponseData: () => {
74
+ const data = {};
75
+ const dataErrors = {};
76
+ Object.keys(this.props.data).forEach((key) => {
77
+ const value = this.props.data[key];
78
+ data[key] = value;
79
+ if (value && typeof value === 'object' && !Array.isArray(value) && value.errors) {
80
+ data[key] = value.value;
81
+ dataErrors[key] = value.errors;
82
+ }
83
+ });
84
+ this.setState({
85
+ data,
86
+ dataErrors,
87
+ });
88
+ },
50
89
  showLoading: (show) => {
51
90
  this.setState({
52
91
  loading: show,
@@ -16,15 +16,15 @@ class Zinfo extends React.PureComponent {
16
16
  };
17
17
  static defaultProps = {
18
18
  items: [
19
- {
20
- lable: '字段名',
21
- key: 'name',
22
- span: null,
23
- render: () => {
24
- return (value, record) => <span>{value}</span>;
25
- },
26
- width: '160px',
27
- },
19
+ // {
20
+ // lable: '字段名',
21
+ // key: 'name',
22
+ // span: null,
23
+ // render: () => {
24
+ // return (value, record) => <span>{value}</span>;
25
+ // },
26
+ // width: '160px',
27
+ // },
28
28
  ],
29
29
  fieldValue: {},
30
30
  colCount: 2,
@@ -16,11 +16,22 @@
16
16
  margin-bottom: -1px;
17
17
  }
18
18
  .z-info-right-content {
19
+ position: relative;
19
20
  border-right: 1px solid $border-color;
20
21
  margin-right: -1px;
21
22
  overflow: hidden;
23
+ .error-info-icon{
24
+ margin-right: 10px;
25
+ font-size: 16px;
26
+ vertical-align: middle;
27
+ }
28
+ }
29
+ .z-info-error{
30
+ .z-info-left-content,
31
+ .z-info-right-content {
32
+ color: #F52833;
33
+ }
22
34
  }
23
-
24
35
  }
25
36
  .z-info-col + .z-info-col {
26
37
  .z-info-left-content,
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react';
1
+ import React, { useState, useEffect, useRef, useImperativeHandle, useCallback, useMemo } from 'react';
2
2
  import ReactDOM from 'react-dom';
3
3
  import Zform from '../Zform';
4
4
  import FormContext from './FormContext';
@@ -79,7 +79,24 @@ const FormGroup = React.memo(
79
79
  return firstShow;
80
80
  },
81
81
  }));
82
-
82
+ const groupTitle = useMemo(() => {
83
+ let title = null;
84
+ let labelShowTag = group.labelShowTag;
85
+ if (typeof labelShowTag !== 'number') {
86
+ labelShowTag = 1;
87
+ }
88
+ switch (labelShowTag) {
89
+ case 0:
90
+ title = null;
91
+ break;
92
+ case 2:
93
+ title = group.name;
94
+ break;
95
+ default:
96
+ title = <ZpanelTitle>{group.name}</ZpanelTitle>;
97
+ }
98
+ return title;
99
+ }, [group.labelShowTag, group.name]);
83
100
  const [groupAttr, setGroupAttr] = useState({});
84
101
  return firstShow ? (
85
102
  <Col
@@ -90,14 +107,12 @@ const FormGroup = React.memo(
90
107
  domRef.current = ReactDOM.findDOMNode(el);
91
108
  }}>
92
109
  <div className={`z-panel z-view-form-panel ${className || ''}`}>
93
- {group.panelHeaderShow ? (
110
+ {groupTitle || group.panelHeaderShow ? (
94
111
  <div className="z-panel-heading z-flex-space-between z-flex-wrap">
95
112
  <div className="z-flex-items-v-center">
96
- {typeof titleLeftRender === 'function' ? (
97
- titleLeftRender(group, groupAttr, setGroupAttr)
98
- ) : (
99
- <ZpanelTitle>{group.name}</ZpanelTitle>
100
- )}
113
+ {typeof titleLeftRender === 'function'
114
+ ? titleLeftRender(group, groupAttr, setGroupAttr)
115
+ : groupTitle}
101
116
  </div>
102
117
  <div className="z-flex-items-v-center">
103
118
  {typeof titleRightRender === 'function' &&
@@ -108,6 +123,7 @@ const FormGroup = React.memo(
108
123
  <div className={group.groupLayout === 'horizontal' ? 'z-flex-1' : 'z-padding-15'}>
109
124
  <MyForm
110
125
  group={group}
126
+ controlSize={group.controlSize}
111
127
  onSubmit={onSubmit}
112
128
  onValidated={onValidated}
113
129
  labelLayout={labelLayout || 'inline'}
@@ -40,10 +40,10 @@ export const labelShowTags = [
40
40
  label: '默认组名样式',
41
41
  value: 1,
42
42
  },
43
- // {
44
- // label: '修饰符组名样式',
45
- // value: 2,
46
- // },
43
+ {
44
+ label: '组名样式2',
45
+ value: 2,
46
+ },
47
47
  ];
48
48
  //以 "seq" 字段排序
49
49
  function sortList(o1, o2) {
@@ -165,6 +165,7 @@ export function getGroupItem(opt = {}, index) {
165
165
  config: groupConfig,
166
166
  hidden: group.hidden,
167
167
  show: opt.linkages === null ? index === 0 : !group.hidden,
168
+ controlSize: opt.controlSize,
168
169
  };
169
170
  }
170
171
  //从formData生成group数据
@@ -207,6 +208,7 @@ export function translateGroups({
207
208
  doLinkageAction:
208
209
  typeof doLinkageAction === 'function' ? doLinkageAction : doLinkageActionDefault,
209
210
  groupLayout: formDataConf.groupLayout,
211
+ controlSize: formDataConf.controlSize,
210
212
  getExtendComponents,
211
213
  },
212
214
  index,
@@ -312,3 +314,12 @@ export function treeDataAddKey(tree = [], distMap, srcMap, isLeaf) {
312
314
  })
313
315
  : [];
314
316
  }
317
+
318
+ export function getResponseData(result = {}, dataIndex = 'data') {
319
+ const dotLs = dataIndex.split('.');
320
+ let data = result[dotLs.shift()];
321
+ while (dotLs.length) {
322
+ data = data[dotLs.shift()];
323
+ }
324
+ return data;
325
+ }
@@ -8,7 +8,7 @@ import moment from 'moment';
8
8
  import MapChooseAddress from './liveFormControls/ZmapChooseAddress';
9
9
  import TreeSelectLoader from './liveFormControls/TreeSelectLoader';
10
10
  import CascaderLoader from './liveFormControls/CascaderLoader';
11
- import { treeDataAddKey } from './common';
11
+ import { treeDataAddKey, getResponseData } from './common';
12
12
  import UsersSelection from './liveFormControls/UsersSelection';
13
13
  import CurrentUserInfo from './liveFormControls/CurrentUserInfo';
14
14
  import ZsearchInput from './liveFormControls/ZsearchInput';
@@ -101,15 +101,6 @@ function paseFieldConfig(e, needDefault) {
101
101
  return config;
102
102
  }
103
103
 
104
- function getResponseData(result = {}, dataIndex = 'data') {
105
- const dotLs = dataIndex.split('.');
106
- let data = result[dotLs.shift()];
107
- while (dotLs.length) {
108
- data = data[dotLs.shift()];
109
- }
110
- return data;
111
- }
112
-
113
104
  function selectControl(controlName) {
114
105
  return function (e = {}, linkages, getGroupsFn = () => [], opt = {}, requestQuery = {}, currentForm) {
115
106
  //当isAsync为true,并且selectionsType是异步类型,就强制异步请求
@@ -146,7 +137,14 @@ function selectControl(controlName) {
146
137
  dropdownMatchSelectWidth: false,
147
138
  ...others,
148
139
  ...opt,
149
- selectList,
140
+ selectList: config.optionShowValue
141
+ ? selectList.map((item) => {
142
+ return {
143
+ ...item,
144
+ label: item.value !== item.label ? `${item.value}.${item.label}` : item.label,
145
+ };
146
+ })
147
+ : selectList,
150
148
  onChange: (...rest) => {
151
149
  (typeof e.doLinkageAction === 'function' ? e.doLinkageAction : doLinkageAction)({
152
150
  ages: linkages,
@@ -24,7 +24,7 @@ import { getGroupItem, pareLinkages, removeSomeLinkage, labelShowTags } from './
24
24
  import ZfullLayer from '../ZfullLayer';
25
25
  import AddTagName from './liveFormActions/AddTagName';
26
26
  import ZliveFormMultiRow from '../ZliveFormMultiRow';
27
- const formDataConfigkeys = ['groupLayout', 'initialValueApi'];
27
+ const formDataConfigkeys = ['groupLayout', 'initialValueApi', 'controlSize'];
28
28
  //校验、提取最新的formData数据
29
29
  function commitFormData(formViewerRef, layoutFormRef, linkageRef, onSave) {
30
30
  layoutFormRef.current.validateFields((errors, values) => {
@@ -409,10 +409,35 @@ function useGetItems(
409
409
  initialValue: 'vertical',
410
410
  }),
411
411
  },
412
+ {
413
+ key: 'controlSize',
414
+ label: '表单尺寸',
415
+ span: 3,
416
+ show: false,
417
+ labelFocused: true,
418
+ render: (form, changeFormItems) =>
419
+ controls['3'].getControl(
420
+ {
421
+ config: {
422
+ selectList: [
423
+ { label: '大', value: 'large' },
424
+ { label: '中', value: 'default' },
425
+ { label: '小', value: 'small' },
426
+ ],
427
+ },
428
+ },
429
+ undefined,
430
+ undefined,
431
+ {},
432
+ ),
433
+ options: controls['3'].getOptions({
434
+ initialValue: 'default',
435
+ }),
436
+ },
412
437
  {
413
438
  key: 'initialValueApi',
414
439
  label: '异步获取表单初始值的后台接口',
415
- span: 21,
440
+ span: 18,
416
441
  show: false,
417
442
  labelFocused: true,
418
443
  hiddenRendering: true,
@@ -8,6 +8,8 @@ const defaultTags = [
8
8
  { label: '整行展示字段', value: '3' },
9
9
  { label: 'ZliveInfoViewer里面强制展示字段', value: '4' },
10
10
  { label: 'ZliveInfoViewer里面强制隐藏字段', value: '5' },
11
+ { label: 'ZliveInfoViewer里面显示选项', value: '6' },
12
+ { label: 'ZliveInfoViewer里面Popover查看可选项', value: '7' },
11
13
  ];
12
14
  const colors = ['#F8AD3A', '#01D0A2', '#3277FA', '#B94354', '#7469F1'];
13
15
  const AddTagName = React.memo(
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { getControl, getOptions } from '../../../Zform/controls';
3
3
  import { itemsFromTree } from '../../../zTool';
4
- import { getCorresFormItem, urlRules } from './common';
4
+ import { getCorresFormItem, urlRules, getSwitchOpt } from './common';
5
5
  import ZselectInput from '../../liveFormControls/ZselectInput';
6
6
  import RequestConfigBtn from '../../liveFormControls/RequestConfigBtn';
7
7
  //下拉、单选框/多选框的属性
@@ -237,6 +237,7 @@ export function getSelectCommonProperties({ itemsRef, controlList, formItemsLink
237
237
  ...getSelectionProperties({ itemsRef, controlList, formItemsLinkAction }),
238
238
  ...getSelectListFieldNamesProperties({ itemsRef, controlList, formItemsLinkAction }),
239
239
  ...getNotFoundContentProperties({ itemsRef, controlList, formItemsLinkAction }),
240
+
240
241
  ];
241
242
  }
242
243
  export default {
@@ -263,6 +264,13 @@ export default {
263
264
  },
264
265
  options: getOptions({ required: true, initialValue: 'single' }),
265
266
  },
267
+ {
268
+ key: 'optionShowValue',
269
+ show: false,
270
+ label: '是否选项的值与Label一起显示',
271
+ labelFocused: true,
272
+ ...getSwitchOpt({ initialValue: false }),
273
+ },
266
274
  ...getSelectCommonProperties({ itemsRef, controlList, formItemsLinkAction }),
267
275
  ...getMaxSelectProperties({ itemsRef, controlList, formItemsLinkAction }),
268
276
  ];
@@ -1,12 +1,20 @@
1
1
  import React from 'react';
2
2
  import { getSelectCommonProperties, getMaxSelectProperties } from './3_select';
3
3
  import { getControl, getOptions } from '../../../Zform/controls';
4
+ import { getSwitchOpt } from './common';
4
5
  export default {
5
6
  label: '多选框',
6
7
  value: 8,
7
8
  getFieldPropertiesFormItems({ formItemsRef: itemsRef, componentList: controlList, formItemsLinkAction }) {
8
9
  return [
9
10
  ...getSelectCommonProperties({ itemsRef, controlList, formItemsLinkAction }),
11
+ {
12
+ key: 'optionShowValue',
13
+ show: false,
14
+ label: '是否选项的值与Label一起显示',
15
+ labelFocused: true,
16
+ ...getSwitchOpt({ initialValue: false }),
17
+ },
10
18
  {
11
19
  key: 'colCount',
12
20
  show: false,
@@ -1,12 +1,20 @@
1
1
  import React from 'react';
2
2
  import { getSelectCommonProperties } from './3_select';
3
3
  import { getControl, getOptions } from '../../../Zform/controls';
4
+ import { getSwitchOpt } from './common';
4
5
  export default {
5
6
  label: '单选框',
6
7
  value: 9,
7
8
  getFieldPropertiesFormItems({ formItemsRef: itemsRef, componentList: controlList, formItemsLinkAction }) {
8
9
  return [
9
10
  ...getSelectCommonProperties({ itemsRef, controlList, formItemsLinkAction }),
11
+ {
12
+ key: 'optionShowValue',
13
+ show: false,
14
+ label: '是否选项的值与Label一起显示',
15
+ labelFocused: true,
16
+ ...getSwitchOpt({ initialValue: false }),
17
+ },
10
18
  {
11
19
  key: 'colCount',
12
20
  show: false,
@@ -21,6 +21,7 @@ const ZliveFormMultiRow = (props) => {
21
21
  disabled,
22
22
  getExtendComponents,
23
23
  onAdd,
24
+ controlSize,
24
25
  } = props;
25
26
  const [state, setState] = useState({ items: [], titleGroups: [] });
26
27
  const multiRowMethodsRef = useRef();
@@ -150,6 +151,7 @@ const ZliveFormMultiRow = (props) => {
150
151
  );
151
152
  return (
152
153
  <ZmultiRowFormControl
154
+ controlSize={controlSize}
153
155
  showAddButton={showAddButton}
154
156
  showRemoveButton={showRemoveButton}
155
157
  value={value}
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import PropTypes from 'prop-types';
3
-
2
+ // import PropTypes from 'prop-types';
3
+ import { Popover, Icon } from 'antd';
4
4
  import './style.scss';
5
5
 
6
6
  import ZpageLoading from '../ZpageLoading';
@@ -8,24 +8,17 @@ import ZpageLoading from '../ZpageLoading';
8
8
  export default class ColTd extends React.PureComponent {
9
9
  static defaultProps = {
10
10
  item: {},
11
- };
12
- methods = {
13
- showLoading: (show) => {
14
- this.setState({
15
- loading: show,
16
- });
17
- },
18
- getStateItem: () => this.state.item,
19
- changeItem: (newItem = {}) => {
20
- this.setState({
21
- item: { ...this.state.item, ...newItem },
22
- });
23
- },
11
+ data: {},
24
12
  };
25
13
  state = {
26
14
  loading: this.props.loading,
27
15
  item: this.props.item,
16
+ data: {},
17
+ dataErrors: {},
28
18
  };
19
+ componentDidMount() {
20
+ this.methods.disponseData();
21
+ }
29
22
  componentDidUpdate(prevProps) {
30
23
  if (this.props.item !== prevProps.item) {
31
24
  this.setState({
@@ -33,22 +26,69 @@ export default class ColTd extends React.PureComponent {
33
26
  loading: this.props.loading,
34
27
  });
35
28
  }
29
+ if (this.props.data !== prevProps.data) {
30
+ this.methods.disponseData();
31
+ }
36
32
  }
37
33
  render() {
38
- const { data } = this.props;
39
- const { item } = this.state;
34
+ const { item, data, dataErrors } = this.state;
35
+ const isError = Array.isArray(dataErrors[item.key]) && dataErrors[item.key].length;
40
36
  const control = this.state.loading ? (
41
37
  <span>加载中...</span>
42
- ) : typeof item.control == 'function' ? (
38
+ ) : typeof item.control === 'function' ? (
43
39
  item.control(data[item.key], data, item)
44
40
  ) : (
45
41
  data[item.key]
46
42
  );
47
43
  return (
48
44
  <td>
49
- <div>{control}</div>
45
+ <div className={isError ? 'is-error' : ''}>
46
+ {isError ? (
47
+ <Popover
48
+ content={
49
+ <div>
50
+ {dataErrors[item.key].map((msg) => {
51
+ return <p key={msg}>{msg}</p>;
52
+ })}
53
+ </div>
54
+ }
55
+ title="错误信息">
56
+ <Icon type="warning" className="error-info-icon" />
57
+ </Popover>
58
+ ) : null}
59
+ {control}
60
+ </div>
50
61
  <ZpageLoading showLoading={this.state.loading} size="small" />
51
62
  </td>
52
63
  );
53
64
  }
65
+ methods = {
66
+ disponseData: () => {
67
+ const data = {};
68
+ const dataErrors = {};
69
+ Object.keys(this.props.data).forEach((key) => {
70
+ const value = this.props.data[key];
71
+ data[key] = value;
72
+ if (value && typeof value === 'object' && !Array.isArray(value) && value.errors) {
73
+ data[key] = value.value;
74
+ dataErrors[key] = value.errors;
75
+ }
76
+ });
77
+ this.setState({
78
+ data,
79
+ dataErrors,
80
+ });
81
+ },
82
+ showLoading: (show) => {
83
+ this.setState({
84
+ loading: show,
85
+ });
86
+ },
87
+ getStateItem: () => this.state.item,
88
+ changeItem: (newItem = {}) => {
89
+ this.setState({
90
+ item: { ...this.state.item, ...newItem },
91
+ });
92
+ },
93
+ };
54
94
  }
@@ -1,14 +1,22 @@
1
- :global{
2
- .z-live-info-multi-row-body{
3
- tr>td{
4
- padding:10px 12px;
1
+ :global {
2
+ .z-live-info-multi-row-body {
3
+ tr > td {
4
+ position: relative;
5
+ padding: 10px 12px;
5
6
  overflow: hidden;
6
-
7
+ .is-error {
8
+ color: #f52833;
9
+ }
10
+ .error-info-icon {
11
+ margin-right: 10px;
12
+ font-size: 16px;
13
+ vertical-align: middle;
14
+ }
7
15
  }
8
16
  }
9
- .z-live-info-multi-row-pagination{
17
+ .z-live-info-multi-row-pagination {
10
18
  display: flex;
11
19
  justify-content: flex-end;
12
20
  margin-top: 10px;
13
21
  }
14
- }
22
+ }
@@ -8,7 +8,8 @@ import { imgTypeRegExp } from '../ZliveForm/regExpression';
8
8
  import ZpdfViewer from '../ZpdfViewer';
9
9
  import MultiRowInfoControl from './MultiRowInfoControl';
10
10
  import ZgapFilling from '../ZgapFilling';
11
-
11
+ import { treeDataAddKey, getResponseData } from '../ZliveForm/common';
12
+ import { Popover } from 'antd';
12
13
  export function getPrivateImgs({ files, config }) {
13
14
  const privates = files.filter((item) => item.storage === 'PRIVATE');
14
15
  let asycnPromise = Promise.resolve();
@@ -69,7 +70,20 @@ export function valueAccuracy({
69
70
  }) {
70
71
  let value = '';
71
72
  let fileList = [];
72
- let render = null;
73
+ let render = (text) => text;
74
+ const valLabel = formValues[`${field.fieldKey}Label`];
75
+ const val = formValues[field.fieldKey];
76
+ const strSyml = field.fieldType === 6 ? '/' : field.fieldType === 5 ? ' ~ ' : ' , ';
77
+ if (valLabel) {
78
+ value = Array.isArray(valLabel) ? valLabel.join(strSyml) : valLabel;
79
+ } else if (Array.isArray(val)) {
80
+ value = val[0] && (dataType.isObject(val[0]) || Array.isArray(val[0])) ? val : val.join(strSyml);
81
+ } else if (Array.isArray(config.selectList) && config.selectList.length) {
82
+ const selectItem = config.selectList.find((item) => item.value == val);
83
+ value = selectItem ? selectItem.label : val;
84
+ } else {
85
+ value = val;
86
+ }
73
87
  switch (field.fieldType) {
74
88
  case 11:
75
89
  case 16:
@@ -253,23 +267,85 @@ export function valueAccuracy({
253
267
  }
254
268
  break;
255
269
  }
256
- default:
257
- const valLabel = formValues[`${field.fieldKey}Label`];
258
- const val = formValues[field.fieldKey];
259
- const strSyml = field.fieldType === 6 ? '/' : field.fieldType === 5 ? ' ~ ' : ' , ';
260
- if (valLabel) {
261
- value = Array.isArray(valLabel) ? valLabel.join(strSyml) : valLabel;
262
- } else if (Array.isArray(val)) {
263
- if (val[0] && (dataType.isObject(val[0]) || Array.isArray(val[0]))) {
264
- value = val;
265
- Array.isArray(val);
266
- } else {
267
- value = val.join(strSyml);
268
- }
269
- } else {
270
- value = val;
270
+ case 3:
271
+ case 8:
272
+ case 9:
273
+ if (config.tagName.some((item) => ['6', '7'].includes(item.value))) {
274
+ const {
275
+ selectionsType,
276
+ // selectionsFromKey,
277
+ selectionsUrl,
278
+ selectionsQuery,
279
+ selectListFieldNames,
280
+ responseDataIndex,
281
+ } = config;
282
+ const isPopover = config.tagName.some((item) => ['7'].includes(item.value));
283
+ const getListVivew = function (selectList = [], optionShowValue) {
284
+ return (text) => {
285
+ const listView = (
286
+ optionShowValue
287
+ ? selectList.map((item) => {
288
+ return {
289
+ ...item,
290
+ label: item.value !== item.label ? `${item.value}.${item.label}` : item.label,
291
+ };
292
+ })
293
+ : selectList
294
+ ).map((item) => {
295
+ return (
296
+ <p className="z-text-darkGray" key={item.value}>
297
+ {item.label}
298
+ </p>
299
+ );
300
+ });
301
+ const textStyle = {};
302
+ if (isPopover) {
303
+ textStyle.paddingTop = '20px';
304
+ } else {
305
+ textStyle.marginBottom = '8px';
306
+ }
307
+ return (
308
+ <div style={{ flex: 1 }}>
309
+ <div style={textStyle}>{text}</div>
310
+ {isPopover ? (
311
+ <Popover
312
+ overlayClassName="z-infoViewer-options-overlay"
313
+ content={<div>{listView}</div>}
314
+ title="可选项">
315
+ <div className="z-infoViewer-options-open">查看可选项</div>
316
+ </Popover>
317
+ ) : (
318
+ <div className="z-infoViewer-options-wrapper">{listView}</div>
319
+ )}
320
+ </div>
321
+ );
322
+ };
323
+ };
324
+ render = () => {
325
+ if (+selectionsType === 2) {
326
+ return httpAjax(
327
+ selectionsUrl.selectionsUrlMethod,
328
+ selectionsUrl.selectionsUrl,
329
+ {
330
+ ...selectionsQuery,
331
+ },
332
+ selectionsUrl.requestConfig,
333
+ ).then((re) => {
334
+ const selectList = treeDataAddKey(
335
+ getResponseData(re, responseDataIndex) || [],
336
+ undefined,
337
+ selectListFieldNames,
338
+ undefined,
339
+ );
340
+ return getListVivew(selectList, config.optionShowValue);
341
+ });
342
+ }
343
+ return getListVivew(config.selectList, config.optionShowValue);
344
+ };
271
345
  }
272
- render = (text) => text;
346
+
347
+ break;
348
+ default:
273
349
  }
274
350
  return { value, render, fileList };
275
351
  }
@@ -142,7 +142,7 @@ const InfoViewer = (props) => {
142
142
  : Array.isArray(config.tagName)
143
143
  ? config.tagName
144
144
  : [];
145
-
145
+ config.tagName = tagName;
146
146
  let fieldShowed = true;
147
147
  if (tagName.some((item) => ['5'].includes(item.value))) {
148
148
  //"5"强制隐藏
@@ -220,12 +220,33 @@ const InfoViewer = (props) => {
220
220
  <>
221
221
  {typeof children === 'function'
222
222
  ? children({ groups, fieldValue })
223
- : groups.map((g) => (
224
- <div key={g.name} className="z-infoViewer-group">
225
- {g.labelShowTag ? <ZpanelTitle className="z-margin-bottom-10">{g.name}</ZpanelTitle> : null}
226
- <Zinfo items={g.formItems} fieldValue={fieldValue} colCount={2} layoutType="freeCol"></Zinfo>
227
- </div>
228
- ))}
223
+ : groups.map((g) => {
224
+ let title = null;
225
+ let labelShowTag = g.labelShowTag;
226
+ if (typeof labelShowTag !== 'number') {
227
+ labelShowTag = 1;
228
+ }
229
+ switch (labelShowTag) {
230
+ case 0:
231
+ title = null;
232
+ break;
233
+ case 2:
234
+ title = <div className="z-margin-bottom-10">{g.name}</div>;
235
+ break;
236
+ default:
237
+ title = <ZpanelTitle className="z-margin-bottom-10">{g.name}</ZpanelTitle>;
238
+ }
239
+ return (
240
+ <div key={g.name} className="z-infoViewer-group">
241
+ {title}
242
+ <Zinfo
243
+ items={g.formItems}
244
+ fieldValue={fieldValue}
245
+ colCount={2}
246
+ layoutType="freeCol"></Zinfo>
247
+ </div>
248
+ );
249
+ })}
229
250
  {imgUrls.length
230
251
  ? ReactDOM.createPortal(
231
252
  <div
@@ -1,6 +1,47 @@
1
1
  @import '../../scss/common/z-info.scss';
2
-
2
+ @import '../../scss/vars.scss';
3
3
  :global {
4
+ .z-infoViewer-options-overlay{
5
+ .ant-popover-inner-content{
6
+ max-height: calc(100vh - 60px);
7
+ overflow: auto;
8
+ }
9
+ }
10
+ .z-infoViewer-options-open {
11
+ display: block;
12
+ color: $--darkGray;
13
+ position: absolute;
14
+ top: 0;
15
+ right: 0;
16
+ padding: 4px 6px;
17
+ background-color: $--light-grey;
18
+ font-size: 12px;
19
+ line-height: 1em;
20
+ }
21
+ .z-infoViewer-options-wrapper {
22
+ border: 1px solid $--light-grey;
23
+ padding: 6px;
24
+ position: relative;
25
+ color: $--gray;
26
+ overflow: hidden;
27
+ &::after {
28
+ content: '可选项';
29
+ display: block;
30
+ color: $--darkGray;
31
+ position: absolute;
32
+ top: 0;
33
+ right: 0;
34
+ padding: 4px 6px;
35
+ background-color: $--light-grey;
36
+ font-size: 12px;
37
+ line-height: 1em;
38
+ }
39
+ p {
40
+ margin-top: 8px;
41
+ margin-bottom: 0;
42
+ margin-right: 30px;
43
+ }
44
+ }
4
45
  .z-infoViewer-group + .z-infoViewer-group {
5
46
  margin-top: 10px;
6
47
  }
@@ -28,14 +69,14 @@
28
69
  .z-infoViewer-file {
29
70
  width: 100%;
30
71
  margin-bottom: 0;
31
- a{
72
+ a {
32
73
  color: $primary-color;
33
- &:hover{
34
- text-decoration: underline;
35
- }
74
+ &:hover {
75
+ text-decoration: underline;
76
+ }
36
77
  }
37
78
  }
38
- .z-infoViewer-imgs+.z-infoViewer-file{
79
+ .z-infoViewer-imgs + .z-infoViewer-file {
39
80
  margin-top: 20px;
40
81
  }
41
82
  .z-infoViewer-file + .z-infoViewer-file {
@@ -2,15 +2,18 @@
2
2
 
3
3
  ```jsx
4
4
  import { getProcessEnv } from 'zerod/components/zTool/getProcessEnv';
5
- const { baserouter } = getProcessEnv();
5
+ // const { baserouter } = getProcessEnv();
6
6
  import ZappHOC from 'zerod/components/ZappHOC';
7
+ const routerType= 'history';
8
+ const path = routerType==='hash'?window.location.hash.replace('#','') :window.location.pathname;
7
9
  export default ZappHOC({
8
10
  rootRoutes: [
9
11
  {
10
- path: window.location.pathname,
12
+ path,
11
13
  component: Main,
12
14
  },
13
15
  ],
14
- routerType: baserouter ? 'hash' : 'history',
16
+ routerType,
17
+ routerBasename:"/"
15
18
  });
16
19
  ```
@@ -166,6 +166,7 @@ export function ZmainHOC(pageConfig, mounted) {
166
166
  }
167
167
  //路由地址改变,关闭右边modal
168
168
  if (this.props.location.pathname !== prevProps.location.pathname) {
169
+ console.log(this.props.location.pathname,prevProps.location.pathname)
169
170
  // //路由地址改变触发父窗口的消息事件
170
171
  // if (window.appProtalWindow) {
171
172
  // window.appProtalWindow &&
@@ -307,6 +308,7 @@ export function ZmainHOC(pageConfig, mounted) {
307
308
  sideMenuData = [];
308
309
  // 处理侧边导航数据
309
310
  setSideMenu = (sideMenu) => {
311
+ console.log(this.match.url)
310
312
  let menuData = sideMenu.menuData;
311
313
  let topOtherMenu = sideMenu.topOtherMenu || this.config.sideMenu.topOtherMenu;
312
314
  let bottomOtherMenu = sideMenu.bottomOtherMenu || this.config.sideMenu.bottomOtherMenu;
@@ -4,16 +4,18 @@
4
4
 
5
5
  // 这里渲染demo需要创建一个router根, 如果直接用在项目中的router则不需要
6
6
  import { getProcessEnv } from 'zerod/components/zTool/getProcessEnv';
7
+ // const { baserouter } = getProcessEnv();
7
8
  import ZappHOC from 'zerod/components/ZappHOC';
8
- const { baserouter } = getProcessEnv();
9
-
9
+ const routerType= 'history';
10
+ const path = routerType==='hash'?window.location.hash.replace('#','') :window.location.pathname;
10
11
  export default ZappHOC({
11
12
  rootRoutes: [
12
13
  {
13
- path: window.location.pathname,
14
+ path,
14
15
  component: Main,
15
16
  },
16
17
  ],
17
- routerType: baserouter ? 'hash' : 'history',
18
+ routerType,
19
+ routerBasename:"/"
18
20
  });
19
21
  ```
@@ -233,6 +233,7 @@ export function parseJsonToObject(frontDef) {
233
233
  }
234
234
  return pare;
235
235
  }
236
+
236
237
  export const zTool = {
237
238
  ...ztool,
238
239
  BuildScroll,
package/package.json CHANGED
@@ -1,19 +1,11 @@
1
1
  {
2
2
  "name": "zerod",
3
- "version": "0.6.0",
3
+ "version": "0.6.3",
4
4
  "description": "react+antd+scss的扩展组件,结合zerod-admin-web脚手架使用",
5
5
  "author": "zgt",
6
6
  "main": "index.js",
7
7
  "module": "index.js",
8
- "scripts": {
9
- "login": "npm login --registry=http://172.16.8.10:8081/repository/hosted-npm/"
10
- },
11
- "repositories": [
12
- {
13
- "type": "git",
14
- "url": "http://172.16.26.120/components/zerod-component-doc.git"
15
- }
16
- ],
8
+ "scripts": {},
17
9
  "dependencies": {
18
10
  "@loadable/component": "^5.14.1",
19
11
  "@esfaenza/pace": "^1.0.0",