田强 / qx-common · Commits

Commit 8bb182d53d50423f3bb18f7ef769f66cd11bfbd1

Authored by 邱嘉伟
1 parent b742bbeb

fix：参数设器 部分样式逻辑优化修改

Inline Side-by-side
Showing 3 changed files with 268 additions and 161 deletions
@@ -7,6 +7,5 @@ export * from './qx-user-selector'; @@ -7,6 +7,5 @@ export * from './qx-user-selector';
7 export * from './qx-form-select'; 7 export * from './qx-form-select';
8 export * from './qx-app-selector'; 8 export * from './qx-app-selector';
9 export * from './utils'; 9 export * from './utils';
10 -  
11 -// export * from './qx-btn'; 10 +export * from './qx-field-setter';
12 // export { default as FieldSetter } from './qx-field-setter'; 11 // export { default as FieldSetter } from './qx-field-setter';
@@ -30,18 +30,19 @@ import React, { @@ -30,18 +30,19 @@ import React, {
30 } from 'react'; 30 } from 'react';
31 import JSONEditor from './codeMirror'; 31 import JSONEditor from './codeMirror';
32 import './style.less'; 32 import './style.less';
33 -// import { FieldSetter } from '@qx/common'; 33 +import { FieldSetter } from '@qx/common';
34 import { formatEnum } from './constant'; 34 import { formatEnum } from './constant';
35 -// import {  
36 -// typeTranslateFieIdtype,  
37 -// typeTranslateWidget,  
38 -// typeTranslateGrouptype,  
39 -// typeTranslateItemtype,  
40 -// } from './constant'; 35 +import {
  36 + typeTranslateFieIdtype,
  37 + typeTranslateWidget,
  38 + typeTranslateGrouptype,
  39 + typeTranslateItemtype,
  40 +} from './constant';
41 // import { Controlled as CodeMirror } from 'react-codemirror2' 41 // import { Controlled as CodeMirror } from 'react-codemirror2'
42 -import { cloneDeep } from 'lodash-es'; 42 +import { cloneDeep, debounce } from 'lodash-es';
  43 +import _ from 'lodash';
43 import moment from 'dayjs'; 44 import moment from 'dayjs';
44 -import {QxBaseIcon} from '@qx/common'; 45 +import { QxBaseIcon } from '@qx/common';
45 46
46 const valueOptions = [ 47 const valueOptions = [
47 { key: 'STRING', title: '文本' }, 48 { key: 'STRING', title: '文本' },
@@ -87,7 +88,6 @@ const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { @@ -87,7 +88,6 @@ const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
87 e.persist(); 88 e.persist();
88 const { value } = e.target; 89 const { value } = e.target;
89 console.log('onChange value', value); 90 console.log('onChange value', value);
90 -  
91 // if (!value) { 91 // if (!value) {
92 // setExpandedKeys(undefined); 92 // setExpandedKeys(undefined);
93 // setAutoExpandParent(false); 93 // setAutoExpandParent(false);
@@ -118,7 +118,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -118,7 +118,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
118 handleAddtree, 118 handleAddtree,
119 handleDelete, 119 handleDelete,
120 handleChange, 120 handleChange,
121 - // handleChangeField, 121 + handleChangeField,
122 inputKey, 122 inputKey,
123 } = props; 123 } = props;
124 console.log('data', data); 124 console.log('data', data);
@@ -139,6 +139,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -139,6 +139,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
139 }; 139 };
140 140
141 const checkShowTree = (_data: any) => { 141 const checkShowTree = (_data: any) => {
  142 + console.log('_data', _data)
142 if (_data.type == 'ARRAY') { 143 if (_data.type == 'ARRAY') {
143 if (_data.child && _data.child.length > 0) { 144 if (_data.child && _data.child.length > 0) {
144 return false; 145 return false;
@@ -247,8 +248,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -247,8 +248,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
247 <span> 248 <span>
248 {record.type == 'TIME' 249 {record.type == 'TIME'
249 ? moment(text?.min).format( 250 ? moment(text?.min).format(
250 - formatEnum[text?.format] || 'YYYY-MM-DD',  
251 - ) 251 + formatEnum[text?.format] || 'YYYY-MM-DD',
  252 + )
252 : text?.min} 253 : text?.min}
253 </span> 254 </span>
254 {text?.min && ( 255 {text?.min && (
@@ -257,8 +258,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -257,8 +258,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
257 <span> 258 <span>
258 {record.type == 'TIME' 259 {record.type == 'TIME'
259 ? moment(text?.max).format( 260 ? moment(text?.max).format(
260 - formatEnum[text?.format] || 'YYYY-MM-DD',  
261 - ) 261 + formatEnum[text?.format] || 'YYYY-MM-DD',
  262 + )
262 : text?.max} 263 : text?.max}
263 </span> 264 </span>
264 </div> 265 </div>
@@ -336,8 +337,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -336,8 +337,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
336 key: 'action', 337 key: 'action',
337 width: '10%', 338 width: '10%',
338 render: (text, record) => { 339 render: (text, record) => {
339 - const isShowAdd = (record && checkShowAdd(record)) || true;  
340 - const isShowTree = (record && checkShowTree(record)) || true; 340 + const isShowAdd = (record && checkShowAdd(record));
  341 + const isShowTree = (record && checkShowTree(record));
  342 + console.log('isShowTree', isShowTree)
  343 + console.log('isShowAdd', isShowAdd)
341 return ( 344 return (
342 <Space size="small"> 345 <Space size="small">
343 {isShowAdd && ( 346 {isShowAdd && (
@@ -407,8 +410,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -407,8 +410,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
407 const inputRef = useRef<any>(null); 410 const inputRef = useRef<any>(null);
408 const form = useContext(EditableContext)!; 411 const form = useContext(EditableContext)!;
409 const qxProps = record?.qxProps || {}; 412 const qxProps = record?.qxProps || {};
410 - // const [currentNode, setCurrentNode] = useState<any>('');  
411 - // console.log('qxProps', qxProps) 413 + const [currentNode, setCurrentNode] = useState<any>('');
412 // console.log('dataIndex', dataIndex) 414 // console.log('dataIndex', dataIndex)
413 415
414 useEffect(() => { 416 useEffect(() => {
@@ -431,17 +433,33 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -431,17 +433,33 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
431 // } 433 // }
432 }; 434 };
433 435
434 - // const toggleEdit1 = (e) => {  
435 - // e.persist();  
436 - // // setCurrentNode(e.currentTarget)  
437 - // // console.log('e-onburl', e.currentTarget.key)  
438 - // //  
439 - // // if (e.currentTarget == e.target) {  
440 - // // // setEditing(!editing);  
441 - // // }  
442 - // // form.setFieldsValue({ [dataIndex]: record[dataIndex] });  
443 - // }; 436 + const toggleEdit1 = (e) => {
  437 + const values = form.getFieldsValue();
  438 + e.persist();
  439 + if (e.target.tagName == 'DIV') {
  440 + setCurrentNode(e.target)
  441 + // console.log('values', values)
  442 + setEditing(!editing);
  443 + if (currentNode) {
  444 + props.handleChange(values?.newQxProps, record, 'qxProps')
  445 + }
  446 + }
  447 +
  448 + // setCurrentNode(e.currentTarget)
  449 + // console.log('e-onburl', e.currentTarget.key)
  450 + //
  451 + // if (e.currentTarget == e.target) {
  452 + // // setEditing(!editing);
  453 + // }
  454 + // form.setFieldsValue({ [dataIndex]: record[dataIndex] });
  455 + };
444 456
  457 + // const onQxpropsChangen = (value) => {
  458 + // console.log('value', value)
  459 + // form.setFieldsValue({
  460 + // ['qxProps']: { value: value }
  461 + // })
  462 + // }
445 // const toggleEdit2 = (e) => { 463 // const toggleEdit2 = (e) => {
446 // e.persist(); 464 // e.persist();
447 // // console.log('e-onforce', e.currentTarget) 465 // // console.log('e-onforce', e.currentTarget)
@@ -475,7 +493,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -475,7 +493,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
475 // message: `不能为空!`, 493 // message: `不能为空!`,
476 // },] : [] 494 // },] : []
477 495
478 - const qxPropsRange = () => { 496 + const qxPropsRange = useCallback(() => {
479 switch (record.type) { 497 switch (record.type) {
480 case 'STRING': 498 case 'STRING':
481 return ( 499 return (
@@ -483,21 +501,35 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -483,21 +501,35 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
483 key={record.id} 501 key={record.id}
484 ref={inputRef} 502 ref={inputRef}
485 className="editable-center-cell" 503 className="editable-center-cell"
486 - /* onBlur={(e) => toggleEdit1(e)} onFocus={(e) => toggleEdit2(e)} */ tabIndex={ 504 + onBlur={(e) => toggleEdit1(e)} tabIndex={
487 0 505 0
488 } 506 }
489 > 507 >
490 - <InputNumber  
491 - defaultValue={qxProps.min}  
492 - onBlur={() => save('qxProps-min')}  
493 - placeholder="最小长度"  
494 - /> 508 + <Form.Item
  509 + name={['newQxProps', 'min']}
  510 + style={{ margin: 0 }}
  511 + initialValue={qxProps.min}
  512 + >
  513 + <InputNumber
  514 + // defaultValue={qxProps.min}
  515 + // onChange={onQxpropsChangen}
  516 + // onBlur={() => save('qxProps-min')}
  517 + placeholder="最小长度"
  518 + />
  519 + </Form.Item>
495 &nbsp; - &nbsp; 520 &nbsp; - &nbsp;
496 - <InputNumber  
497 - defaultValue={qxProps.max}  
498 - onBlur={() => save('qxProps-max')}  
499 - placeholder="最大长度"  
500 - /> 521 + <Form.Item
  522 + name={['newQxProps', 'max']}
  523 + style={{ margin: 0 }}
  524 + initialValue={qxProps.max}
  525 + >
  526 + <InputNumber
  527 + // dataIndex={["qxProps", "max"]}
  528 + // defaultValue={qxProps.max}
  529 + // onBlur={() => save('qxProps-max')}
  530 + placeholder="最大长度"
  531 + />
  532 + </Form.Item>
501 </div> 533 </div>
502 ); 534 );
503 case 'NUMBER': 535 case 'NUMBER':
@@ -506,30 +538,50 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -506,30 +538,50 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
506 key={record.id} 538 key={record.id}
507 ref={inputRef} 539 ref={inputRef}
508 className="editable-around-cell" 540 className="editable-around-cell"
509 - /* onBlur={(e) => toggleEdit1(e)} onFocus={(e) => toggleEdit2(e)} */ tabIndex={ 541 + onBlur={(e) => toggleEdit1(e)} tabIndex={
510 0 542 0
511 } 543 }
512 > 544 >
513 - <div>  
514 - <InputNumber  
515 - defaultValue={qxProps.min}  
516 - onBlur={() => save('qxProps-min')}  
517 - style={{ width: '110px' }}  
518 - placeholder="最小值"  
519 - /> 545 + <div style={{ display: 'flex' }}>
  546 + <Form.Item
  547 + initialValue={qxProps.min}
  548 + name={['newQxProps', 'min']}
  549 + style={{ margin: 0 }}
  550 + >
  551 + <InputNumber
  552 + // defaultValue={qxProps.min}
  553 + // onBlur={() => save('qxProps-min')}
  554 + style={{ width: '110px' }}
  555 + placeholder="最小值"
  556 + />
  557 + </Form.Item>
  558 +
520 &nbsp; - &nbsp; 559 &nbsp; - &nbsp;
  560 + <Form.Item
  561 + initialValue={qxProps.max}
  562 + style={{ margin: 0 }}
  563 + name={['newQxProps', 'max']}
  564 + >
  565 + <InputNumber
  566 + // defaultValue={qxProps.max}
  567 + // onBlur={() => save('qxProps-max')}
  568 + style={{ width: '110px' }}
  569 + placeholder="最大值"
  570 + />
  571 + </Form.Item>
  572 +
  573 + </div>
  574 + <Form.Item
  575 + initialValue={qxProps.precision}
  576 + style={{ margin: 0 }}
  577 + name={['newQxProps', 'precision']}
  578 + >
521 <InputNumber 579 <InputNumber
522 - defaultValue={qxProps.max}  
523 - onBlur={() => save('qxProps-max')}  
524 - style={{ width: '110px' }}  
525 - placeholder="最大值" 580 + // defaultValue={qxProps.precision}
  581 + // onBlur={() => save('qxProps-precision')}
  582 + placeholder="小数位数"
526 /> 583 />
527 - </div>  
528 - <InputNumber  
529 - defaultValue={qxProps.precision}  
530 - onBlur={() => save('qxProps-precision')}  
531 - placeholder="小数位数"  
532 - /> 584 + </Form.Item>
533 </div> 585 </div>
534 ); 586 );
535 case 'TIME': 587 case 'TIME':
@@ -538,7 +590,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -538,7 +590,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
538 key={record.id} 590 key={record.id}
539 ref={inputRef} 591 ref={inputRef}
540 className="editable-around-cell" 592 className="editable-around-cell"
541 - /* onBlur={(e) => toggleEdit1(e)} onFocus={(e) => toggleEdit2(e)} */ tabIndex={ 593 + onBlur={(e) => toggleEdit1(e)} tabIndex={
542 0 594 0
543 } 595 }
544 > 596 >
@@ -552,8 +604,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -552,8 +604,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
552 format={formatEnum[qxProps?.format]} 604 format={formatEnum[qxProps?.format]}
553 // onChange={dateChange} 605 // onChange={dateChange}
554 style={{ width: '130px' }} 606 style={{ width: '130px' }}
555 - onBlur={() => save('qxProps-min')} 607 + // onBlur={() => save('qxProps-min')}
556 showTime 608 showTime
  609 + onSelect={(e) => props.handleChange(e, record, 'qxProps-min')}
557 placeholder="开始日期" 610 placeholder="开始日期"
558 /> 611 />
559 {/* <DatePicker defaultValue={moment(qxProps.min)} onBlur={() => save('qxProps-min')} placeholder='开始日期' /> */} 612 {/* <DatePicker defaultValue={moment(qxProps.min)} onBlur={() => save('qxProps-min')} placeholder='开始日期' /> */}
@@ -577,7 +630,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -577,7 +630,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
577 <Select 630 <Select
578 style={{ width: '90px' }} 631 style={{ width: '90px' }}
579 placeholder="格式" 632 placeholder="格式"
580 - dropdownMatchSelectWidth={false} 633 + popupMatchSelectWidth={false}
581 defaultValue={qxProps.format} 634 defaultValue={qxProps.format}
582 onSelect={(e) => 635 onSelect={(e) =>
583 props.handleChange(e, record, 'qxProps-format') 636 props.handleChange(e, record, 'qxProps-format')
@@ -607,47 +660,67 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -607,47 +660,67 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
607 </div> 660 </div>
608 ); 661 );
609 } 662 }
  663 + }, [currentNode]
  664 + )
  665 +
  666 + const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
  667 + const widget = typeTranslateWidget(item.type);
  668 + if (widget === 'userSelector') {
  669 + return [];
  670 + // return [{key: 'MYSELF', value: "当前用户"}]
  671 + }
  672 + if (widget === 'orgSelector') {
  673 + // return [{key: 'MY_ORG', value: "当前人所在部门"}]
  674 + return [];
  675 + }
  676 + if (widget === 'qxDatetime') {
  677 + return [{ key: 'NOW', value: '当前时间' }];
  678 + }
  679 + return undefined;
610 }; 680 };
611 681
612 - // const getValueOptions = (item: any): ValueOptionProps[] | undefined => {  
613 - // const widget = typeTranslateWidget(item.type);  
614 - // if (widget === 'userSelector') {  
615 - // return [];  
616 - // // return [{key: 'MYSELF', value: "当前用户"}]  
617 - // }  
618 - // if (widget === 'orgSelector') {  
619 - // // return [{key: 'MY_ORG', value: "当前人所在部门"}]  
620 - // return [];  
621 - // }  
622 - // if (widget === 'qxDatetime') {  
623 - // return [{ key: 'NOW', value: '当前时间' }];  
624 - // }  
625 - // return undefined;  
626 - // }; 682 + const handleField = (val) => {
  683 + if (!val || _.isEmpty(val)) {
  684 + return;
  685 + }
  686 + if (val[0].extVal) {
  687 + handleChangeField(val, record)
  688 + }
  689 + if (val[0].value === 'NOW' || val[0].value.indexOf('action_date') > -1) {
  690 + } else {
  691 + handleChangeField(val, record)
  692 + }
  693 + }
627 694
628 const qxPropsDefault = () => { 695 const qxPropsDefault = () => {
  696 + const valuesObj = [{
  697 + type: typeTranslateItemtype(record.type),
  698 + value: record?.qxProps?.default || '',
  699 + }]
  700 + record.valuesObj = valuesObj
629 return ( 701 return (
630 <div> 702 <div>
631 - <Input 703 + {/* <Input
632 defaultValue={record?.qxProps?.default} 704 defaultValue={record?.qxProps?.default}
633 ref={inputRef} 705 ref={inputRef}
634 onBlur={() => save('qxProps-default')} 706 onBlur={() => save('qxProps-default')}
  707 + /> */}
  708 + <FieldSetter
  709 + value={record.valuesObj || []}
  710 + // value={[{
  711 + // type: typeTranslateItemtype(record.type) || '',
  712 + // value: record?.qxProps?.default
  713 + // }]}
  714 + params={{ appCode: 'appCode', useId: true }}
  715 + valueOptions={getValueOptions(record)}
  716 + field={record.type}
  717 + widget={typeTranslateWidget(record.type)}
  718 + fieldType={typeTranslateFieIdtype(record.type)}
  719 + fieldGroupType={typeTranslateGrouptype(record.type)}
  720 + isMixValue={typeTranslateFieIdtype(record.type) == 'STRING' ? true : false}
  721 + isMultiple={false}
  722 + onChange={debounce((val) => handleField(val), 700)}
635 /> 723 />
636 - {/* <FieldSetter  
637 - value={[{  
638 - type: typeTranslateItemtype(record.type),  
639 - value: record?.qxProps?.default  
640 - }]}  
641 - params={{ appCode: 'appCode', useId: true }}  
642 - valueOptions={getValueOptions(record)}  
643 - field={record.type}  
644 - widget={typeTranslateWidget(record.type)}  
645 - fieldType={typeTranslateFieIdtype(record.type)}  
646 - fieldGroupType={typeTranslateGrouptype(record.type)}  
647 - isMixValue={typeTranslateFieIdtype(record.type) == 'STRING' ? true : false}  
648 - isMultiple={false}  
649 - // onChange={(val) => handleChangeField(val, record)} //需要onblur  
650 - /> */}  
651 </div> 724 </div>
652 ); 725 );
653 }; 726 };
@@ -668,7 +741,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -668,7 +741,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
668 style={{ margin: 0 }} 741 style={{ margin: 0 }}
669 // @ts-ignore 742 // @ts-ignore
670 name={dataIndex} 743 name={dataIndex}
671 - // rules={rules} 744 + // rules={rules}
672 > 745 >
673 {dataIndex == 'type' ? ( 746 {dataIndex == 'type' ? (
674 <Select 747 <Select
@@ -19,21 +19,21 @@ import { @@ -19,21 +19,21 @@ import {
19 } from 'antd'; 19 } from 'antd';
20 import type { TreeProps } from 'antd/lib/tree'; 20 import type { TreeProps } from 'antd/lib/tree';
21 import ParameterModal from './ParameterModal'; 21 import ParameterModal from './ParameterModal';
22 -// import { FieldSetter } from '@qx/common'; 22 +import { FieldSetter } from '@qx/common';
23 import { formatEnum } from './constant'; 23 import { formatEnum } from './constant';
24 // import type { InputRef } from 'antd'; 24 // import type { InputRef } from 'antd';
25 -// import {  
26 -// typeTranslateFieIdtype,  
27 -// typeTranslateWidget,  
28 -// typeTranslateGrouptype,  
29 -// typeTranslateItemtype,  
30 -// } from './constant';  
31 -  
32 -import { cloneDeep } from 'lodash-es'; 25 +import {
  26 + typeTranslateFieIdtype,
  27 + typeTranslateWidget,
  28 + typeTranslateGrouptype,
  29 + typeTranslateItemtype,
  30 +} from './constant';
  31 +
  32 +import { cloneDeep, debounce } from 'lodash-es';
33 import moment from 'dayjs'; 33 import moment from 'dayjs';
34 import type { ParamDesignModel } from './constant'; 34 import type { ParamDesignModel } from './constant';
35 import { uidGen } from './stringUtil'; 35 import { uidGen } from './stringUtil';
36 -import {QxBaseIcon} from '@qx/common'; 36 +import { QxBaseIcon } from '@qx/common';
37 37
38 import './style.less'; 38 import './style.less';
39 39
@@ -239,8 +239,12 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -239,8 +239,12 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
239 for (let i = 0; i < treeList.length; i++) { 239 for (let i = 0; i < treeList.length; i++) {
240 if (treeList[i].id == data.id) { 240 if (treeList[i].id == data.id) {
241 if (isProps > -1) { 241 if (isProps > -1) {
242 - _qxProps = { ...data.qxProps };  
243 - _qxProps[_newCode] = value; 242 + if (code == 'qxProps') {
  243 + _qxProps = { ...data.qxProps, ...value }
  244 + } else {
  245 + _qxProps = { ...data.qxProps };
  246 + _qxProps[_newCode] = value;
  247 + }
244 treeList[i].qxProps = _qxProps; 248 treeList[i].qxProps = _qxProps;
245 } else { 249 } else {
246 if (code == 'type') { 250 if (code == 'type') {
@@ -510,38 +514,46 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -510,38 +514,46 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
510 } 514 }
511 }; 515 };
512 516
513 - // const getValueOptions = (item: any): ValueOptionProps[] | undefined => {  
514 - // const widget = typeTranslateWidget(item.type);  
515 - // if (widget === 'userSelector') {  
516 - // return [];  
517 - // // return [{key: 'MYSELF', value: "当前用户"}]  
518 - // }  
519 - // if (widget === 'orgSelector') {  
520 - // // return [{key: 'MY_ORG', value: "当前人所在部门"}]  
521 - // return [];  
522 - // }  
523 - // if (widget === 'qxDatetime') {  
524 - // return [{ key: 'NOW', value: '当前时间' }];  
525 - // }  
526 - // return undefined;  
527 - // }; 517 + const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
  518 + const widget = typeTranslateWidget(item.type);
  519 + if (widget === 'userSelector') {
  520 + return [];
  521 + // return [{key: 'MYSELF', value: "当前用户"}]
  522 + }
  523 + if (widget === 'orgSelector') {
  524 + // return [{key: 'MY_ORG', value: "当前人所在部门"}]
  525 + return [];
  526 + }
  527 + if (widget === 'qxDatetime') {
  528 + return [{ key: 'NOW', value: '当前时间' }];
  529 + }
  530 + return undefined;
  531 + };
528 532
529 const changeField = (val: any, data: any) => { 533 const changeField = (val: any, data: any) => {
  534 + if (!val || _.isEmpty(val)) {
  535 + return;
  536 + }
  537 + console.log('val', val)
  538 + console.log('data', data)
530 const _newData = cloneDeep(treeData); 539 const _newData = cloneDeep(treeData);
531 const _qxProps = {}; 540 const _qxProps = {};
532 541
533 const loopChangeTree = (treeList: ParamDesignModel[]) => { 542 const loopChangeTree = (treeList: ParamDesignModel[]) => {
534 for (let i = 0; i < treeList.length; i++) { 543 for (let i = 0; i < treeList.length; i++) {
535 if (treeList[i].id == data.id) { 544 if (treeList[i].id == data.id) {
  545 +
  546 + treeList[i].mappingValues = val.map((item: any) =>
  547 + item?.extVal ? item?.extVal : item?.value,
  548 + );
  549 + treeList[i].valuesObj = val;
536 if (!treeList[i].qxProps) { 550 if (!treeList[i].qxProps) {
537 treeList[i].qxProps = _qxProps; 551 treeList[i].qxProps = _qxProps;
538 } 552 }
539 if (data.type == 'TIME') { 553 if (data.type == 'TIME') {
540 - treeList[i].qxProps.default = val[0]?.extVal || '';  
541 - treeList[i].mappingValues = [val[0]?.extVal] || []; 554 + treeList[i].qxProps.default = val[0]?.extVal || undefined;
542 } else { 555 } else {
543 - treeList[i].qxProps.default = val[0].value;  
544 - treeList[i].mappingValues = [val[0].value]; 556 + treeList[i].qxProps.default = val[0].value || undefined;
545 } 557 }
546 return; 558 return;
547 } else if (!!treeList[i]?.child?.length) { 559 } else if (!!treeList[i]?.child?.length) {
@@ -549,20 +561,41 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -549,20 +561,41 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
549 } 561 }
550 } 562 }
551 }; 563 };
552 -  
553 loopChangeTree(_newData); 564 loopChangeTree(_newData);
554 setTreeData(_newData); 565 setTreeData(_newData);
555 props?.onChange(_newData); 566 props?.onChange(_newData);
556 }; 567 };
557 568
  569 + // const callback = (val: any, index: number) => {
  570 +
  571 + // const newValue = [...value];
  572 + // newValue[index].mappingValues = val.map((item: any) =>
  573 + // item?.extVal ? item?.extVal : item?.value,
  574 + // );
  575 + // newValue[index].valuesObj = val;
  576 +
  577 + // // if (newValue[index].fieldType == 'REL') {
  578 + // // relIdList.map((_value) => {
  579 + // // if (_value.key == newValue[index].mappingValues[0]) {
  580 + // // newValue[index].relId = _value?.extract?.relId;
  581 + // // }
  582 + // // });
  583 + // // }
  584 +
  585 + // };
  586 +
558 // 渲染节点 587 // 渲染节点
559 const renderTitle = (nodeData: any) => { 588 const renderTitle = (nodeData: any) => {
560 - const strTitle = (nodeData.title as string) || ''; 589 + // const strTitle = (nodeData.title as string) || '';
561 // const strCode = nodeData.code as string; 590 // const strCode = nodeData.code as string;
562 - const index = strTitle.indexOf(searchValue); 591 + const valuesObj = [{
  592 + type: typeTranslateItemtype(nodeData.type),
  593 + value: nodeData?.qxProps?.default || '',
  594 + }]
  595 + nodeData.valuesObj = valuesObj
  596 + // const index = strTitle.indexOf(searchValue);
563 const isShowTree = checkShowTree(nodeData); 597 const isShowTree = checkShowTree(nodeData);
564 const disabled = nodeData.disabled; 598 const disabled = nodeData.disabled;
565 - console.log(index);  
566 return ( 599 return (
567 <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}> 600 <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
568 <div 601 <div
@@ -617,6 +650,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -617,6 +650,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
617 key={inputKey} 650 key={inputKey}
618 style={{ width: '100%' }} 651 style={{ width: '100%' }}
619 maxLength={50} 652 maxLength={50}
  653 + allowClear
620 disabled={disabled} 654 disabled={disabled}
621 bordered={true} 655 bordered={true}
622 defaultValue={nodeData.title} 656 defaultValue={nodeData.title}
@@ -628,14 +662,15 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -628,14 +662,15 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
628 </div> 662 </div>
629 {props?.isShowField && ( 663 {props?.isShowField && (
630 <div className="opt-left-down"> 664 <div className="opt-left-down">
631 - {/* <FieldSetter 665 + <FieldSetter
632 disabled={disabled} 666 disabled={disabled}
633 - value={[  
634 - {  
635 - type: typeTranslateItemtype(nodeData.type),  
636 - value: nodeData?.qxProps?.default || '',  
637 - },  
638 - ]} 667 + value={nodeData.valuesObj || []}
  668 + // value={[
  669 + // {
  670 + // type: typeTranslateItemtype(nodeData.type),
  671 + // value: nodeData?.qxProps?.default || '',
  672 + // },
  673 + // ]}
639 params={{ appCode: 'appCode', useId: true }} 674 params={{ appCode: 'appCode', useId: true }}
640 valueOptions={getValueOptions(nodeData)} 675 valueOptions={getValueOptions(nodeData)}
641 field={nodeData.code} 676 field={nodeData.code}
@@ -646,7 +681,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -646,7 +681,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
646 colsTree={props.nodeItem} 681 colsTree={props.nodeItem}
647 isMultiple={false} 682 isMultiple={false}
648 onChange={(val) => changeField(val, nodeData)} 683 onChange={(val) => changeField(val, nodeData)}
649 - /> */} 684 + />
650 </div> 685 </div>
651 )} 686 )}
652 </div> 687 </div>
@@ -704,28 +739,28 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -704,28 +739,28 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
704 <div className="tree-wrapper"> 739 <div className="tree-wrapper">
705 {props?.value?.length > 0 740 {props?.value?.length > 0
706 ? treeData?.length > 0 && 741 ? treeData?.length > 0 &&
707 - defaultExpandedKeys && (  
708 - <Tree  
709 - // className={'tree-list'}  
710 - // rootClassName={'tree-list'}  
711 - treeData={treeData || []}  
712 - fieldNames={{  
713 - title: 'label',  
714 - key: 'id',  
715 - children: 'child',  
716 - }}  
717 - titleRender={(nodeData) => renderTitle(nodeData)}  
718 - style={{ height: '100%' }}  
719 - onDrop={onDrop}  
720 - draggable  
721 - blockNode  
722 - selectable  
723 - checkStrictly={true} //??这是啥意思  
724 - expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}  
725 - autoExpandParent={autoExpandParent}  
726 - onExpand={onExpand}  
727 - />  
728 - ) 742 + defaultExpandedKeys && (
  743 + <Tree
  744 + // className={'tree-list'}
  745 + // rootClassName={'tree-list'}
  746 + treeData={treeData || []}
  747 + fieldNames={{
  748 + title: 'label',
  749 + key: 'id',
  750 + children: 'child',
  751 + }}
  752 + titleRender={(nodeData) => renderTitle(nodeData)}
  753 + style={{ height: '100%' }}
  754 + onDrop={onDrop}
  755 + draggable
  756 + blockNode
  757 + selectable
  758 + checkStrictly={true} //??这是啥意思
  759 + expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
  760 + autoExpandParent={autoExpandParent}
  761 + onExpand={onExpand}
  762 + />
  763 + )
729 : null} 764 : null}
730 </div> 765 </div>
731 <ParameterModal 766 <ParameterModal