田强 / qx-common · Commits

Commit 932e610419fb09b552fa76bad6de5045023a4e5a

Authored by 邱嘉伟
1 parent 42c9d596

fix: 增加搜索框显示效果

Inline Side-by-side
Showing 3 changed files with 71 additions and 77 deletions
... ... @@ -88,29 +88,6 @@ interface ParameterSettingProps {
88 88 appId?: string; // 当前应用ID
89 89 }
90 90
91   -const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
92   - console.log('onChange', e);
93   - e.persist();
94   - const { value } = e.target;
95   - console.log('onChange value', value);
96   - // if (!value) {
97   - // setExpandedKeys(undefined);
98   - // setAutoExpandParent(false);
99   - // setSearchValue(value);
100   - // return;
101   - // }
102   - // const newExpandedKeys = (list || [])
103   - // .map((item) => {
104   - // if (item.title.indexOf(value) > -1 || item.code.indexOf(value) > -1) {
105   - // return getParentKey(item.id, treeData);
106   - // }
107   - // return null;
108   - // })
109   - // .filter((item, i, self) => item && self.indexOf(item) === i);
110   - // setExpandedKeys(newExpandedKeys as React.Key[]);
111   - // setSearchValue(value);
112   - // setAutoExpandParent(true);
113   -};
114 91
115 92
116 93
... ... @@ -129,6 +106,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
129 106 inputKey,
130 107 nodeType,
131 108 } = props;
  109 + const [searchValue, setSearchValue] = useState('');
  110 +
132 111 // const [form] = Form.useForm()
133 112 //判断数组是否只有一个子节点
134 113 const checkShowAdd = (_data: any) => {
... ... @@ -144,6 +123,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
144 123 return true;
145 124 };
146 125
  126 + const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  127 + e.persist();
  128 + const { value } = e.target;
  129 + // if (!value) {
  130 + // setExpandedKeys(undefined);
  131 + // setAutoExpandParent(false);
  132 + setSearchValue(value);
  133 + };
  134 +
147 135 const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
148 136 const widget = typeTranslateWidget(item.type);
149 137 if (widget === 'userSelector') {
... ... @@ -180,23 +168,28 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
180 168 dataIndex: 'code',
181 169 width: '150px',
182 170 key: 'code',
183   - render: (text, record) => (
184   - < Form.Item
185   - name={'code' + record.id}
186   - style={{ margin: 0 }}
187   - // initialValue={record.code}
188   - >
189   - <Input
190   - draggable={true}
191   - onDragStart={(event) => {
192   - event.stopPropagation();
193   - event.preventDefault();
194   - }}
195   - defaultValue={record.code}
196   - bordered={false}
197   - disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'code')} />
198   - </Form.Item >
199   - ),
  171 + render: (text, record) => {
  172 + const strTitle = (text as string) || '';
  173 + const index = strTitle.indexOf(searchValue);
  174 + return (
  175 + < Form.Item
  176 + name={'code' + record.id}
  177 + style={{ margin: 0 }}
  178 + // initialValue={record.code}
  179 + >
  180 + <Input
  181 + style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
  182 + draggable={true}
  183 + onDragStart={(event) => {
  184 + event.stopPropagation();
  185 + event.preventDefault();
  186 + }}
  187 + defaultValue={record.code}
  188 + bordered={false}
  189 + disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'code')} />
  190 + </Form.Item >
  191 + )
  192 + },
200 193 },
201 194 {
202 195 title: (
... ... @@ -208,23 +201,28 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
208 201 dataIndex: 'title',
209 202 width: '112px',
210 203 key: 'title',
211   - render: (text, record) => (
212   - <Form.Item
213   - name={'title' + record.id}
214   - style={{ margin: 0 }}
215   - // initialValue={record.title}
216   - >
217   - <Input
218   - draggable={true}
219   - onDragStart={(event) => {
220   - event.stopPropagation();
221   - event.preventDefault();
222   - }}
223   - defaultValue={record.title}
224   - bordered={false}
225   - disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'title')} />
226   - </Form.Item>
227   - ),
  204 + render: (text, record) => {
  205 + const strTitle = (record.title as string) || '';
  206 + const index = strTitle.indexOf(searchValue);
  207 + return (
  208 + <Form.Item
  209 + name={'title' + record.id}
  210 + style={{ margin: 0 }}
  211 + // initialValue={record.title}
  212 + >
  213 + <Input
  214 + style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
  215 + draggable={true}
  216 + onDragStart={(event) => {
  217 + event.stopPropagation();
  218 + event.preventDefault();
  219 + }}
  220 + defaultValue={record.title}
  221 + bordered={false}
  222 + disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'title')} />
  223 + </Form.Item>
  224 + )
  225 + },
228 226 },
229 227 {
230 228 title: (
... ... @@ -275,7 +273,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
275 273 isMultiple={false}
276 274 colsTree={props.nodeItem}
277 275 showFieldOpt={!(nodeType === 'START')}
278   - // onChange={debounce((val) => handleField(val), 700)}
279 276 onChange={(val) => handleChangeField(val, record)}
280 277 popupOnBody={true}
281 278 inputDis={true}
... ... @@ -464,7 +461,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
464 461 ? moment(qxProps.min)
465 462 : undefined
466 463 }
467   - format={formatEnum[qxProps?.format]}
  464 + format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'}
468 465 // style={{ width: '110px' }}
469 466 showTime
470 467 onChange={(e) => handleChange(e, record, 'qxProps-min')}
... ... @@ -475,11 +472,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
475 472 size='small'
476 473 bordered={false}
477 474 defaultValue={
478   - qxProps?.min
  475 + qxProps?.max
479 476 ? moment(qxProps.max)
480 477 : undefined
481 478 }
482   - format={formatEnum[qxProps?.format]}
  479 + format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'}
483 480 // style={{ width: '110px' }}
484 481 showTime
485 482 onChange={(e) => handleChange(e, record, 'qxProps-max')}
... ... @@ -494,7 +491,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
494 491 bordered={false}
495 492 placeholder="格式"
496 493 popupMatchSelectWidth={false}
497   - defaultValue={qxProps.format || undefined}
  494 + defaultValue={qxProps?.format || 'YEAR_DATE'}
498 495 onSelect={(e) =>
499 496 handleChange(e, record, 'qxProps-format')
500 497 }
... ... @@ -698,8 +695,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
698 695 _newTreeData.splice(dropIndex, 0, todoData[0]); // 插入
699 696 }
700 697 const _newData = generateTreeData(_newTreeData, '');
701   - console.log('_newData', _newData)
702   - console.log('_newTreeData', _newTreeData)
703 698 handleDrop(_newData);
704 699 dropCol.childNodes.forEach((item: any) => (item.style.borderTop = ''));
705 700 dropCol.parentNode.childNodes.forEach(
... ... @@ -828,14 +823,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
828 823 </>
829 824 ) : (
830 825 <Table
831   - // components={components}
832 826 expandable={{
833 827 defaultExpandAllRows: true,
834   - childrenColumnName: 'child'
  828 + childrenColumnName: 'child',
835 829 }}
836 830 onRow={() => onRow()}
837 831 scroll={{ x: 960, y: 432 }}
838   - // rowClassName={() => 'editable-row'}
839 832 bordered
840 833 pagination={false}
841 834 size={'small'}
... ...
... ... @@ -614,18 +614,13 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
614 614
615 615 // 渲染节点
616 616 const renderTitle = (nodeData: any) => {
617   - // const strTitle = (nodeData.title as string) || '';
618   - // const strCode = nodeData.code as string;
619   - // const valuesObj = [{
620   - // type: typeTranslateItemtype(nodeData.type),
621   - // value: nodeData.mappingValues || [],
622   - // }]
623   - // nodeData.valuesObj = !nodeData.valuesObj ? valuesObj : nodeData.valuesObj
624   - // const index = strTitle.indexOf(searchValue);
  617 + const strTitle = (nodeData.title as string) || '';
  618 + const index = strTitle.indexOf(searchValue);
625 619 const isShowTree = checkShowTree(nodeData);
626 620 const disabled = nodeData.disabled;
627 621 return (
628   - <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
  622 + <div
  623 + onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
629 624 <div
630 625 style={{
631 626 // padding: '2px',
... ... @@ -674,12 +669,12 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
674 669 </div>
675 670 <div className="opt-left">
676 671 <Input
  672 + className={index > -1 && searchValue ? 'search-selected' : ''}
677 673 draggable={true}
678 674 onDragStart={(event) => {
679 675 event.stopPropagation();
680 676 event.preventDefault();
681 677 }}
682   - // ref={inputRef}
683 678 key={inputKey}
684 679 style={{ width: '100%' }}
685 680 maxLength={50}
... ...
... ... @@ -169,6 +169,12 @@
169 169
170 170 }
171 171
  172 +.search-selected{
  173 + .ant-input {
  174 + color: #1890ff;
  175 + }
  176 +}
  177 +
172 178 .editable-cell-value-wrap {
173 179 min-height: 30px;
174 180 padding: 5px 12px;
... ...