田强 / qx-common · Commits

Commit 430eebf89d73b44471e4de81fa928ed99e4dbb4e

Authored by 邱嘉伟
1 parent 54a6d60a

fix: 样式问题

Inline Side-by-side
Showing 3 changed files with 327 additions and 348 deletions
1 1 /* eslint-disable array-callback-return */
2 2 /* eslint-disable eqeqeq */
3   -import {
4   - SnippetsOutlined,
5   -} from '@ant-design/icons';
  3 +import { SnippetsOutlined } from '@ant-design/icons';
  4 +import { QxFieldSetter, QxFormSelect } from '@qx/common';
6 5 import {
7 6 Button,
8 7 Col,
9 8 DatePicker,
  9 + Divider,
10 10 Form,
11 11 Input,
12 12 InputNumber,
... ... @@ -15,31 +15,23 @@ import {
15 15 Select,
16 16 Space,
17 17 Table,
18   - Divider,
19 18 message,
20 19 } from 'antd';
21   -import React, {
22   - useCallback,
23   - useEffect,
24   - useState,
25   -} from 'react';
  20 +import React, { useCallback, useEffect, useState } from 'react';
26 21 import JSONEditor from './codeMirror';
27   -import './style.less';
28   -import { QxFieldSetter, QxFormSelect } from '@qx/common';
29   -import { formatEnum } from './constant';
30 22 import {
  23 + formatEnum,
31 24 typeTranslateFieIdtype,
32   - typeTranslateWidget,
33 25 typeTranslateGrouptype,
34   - // typeTranslateItemtype,
  26 + typeTranslateWidget,
35 27 } from './constant';
  28 +import './style.less';
36 29 // import { Controlled as CodeMirror } from 'react-codemirror2'
37   -import { cloneDeep } from 'lodash-es';
38   -import moment from 'dayjs';
39   -import { QxBaseIcon } from '@qx/common';
40 30 import Icon from '@ant-design/icons';
41   -import { SubNodeIcon } from './sub-node-icon';
42   -import { SubDropIcon } from './sub-node-icon';
  31 +import { QxBaseIcon } from '@qx/common';
  32 +import moment from 'dayjs';
  33 +import { cloneDeep } from 'lodash-es';
  34 +import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
43 35
44 36 import '../style/reset.less';
45 37
... ... @@ -90,9 +82,6 @@ interface ParameterSettingProps {
90 82 appId?: string; // 当前应用ID
91 83 }
92 84
93   -
94   -
95   -
96 85 const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
97 86 const {
98 87 visible,
... ... @@ -163,11 +152,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
163 152 const columns = [
164 153 {
165 154 title: (
166   - <div style={{
167   - display: 'flex', flexDirection: 'row'
168   - , alignContent: 'center', flexWrap: 'wrap'
169   - }}>
170   - <span className='parameter-setting-table-title'>参数编码</span>
  155 + <div
  156 + style={{
  157 + display: 'flex',
  158 + flexDirection: 'row',
  159 + alignContent: 'center',
  160 + flexWrap: 'wrap',
  161 + }}
  162 + >
  163 + <span className="parameter-setting-table-title">参数编码</span>
171 164 <span style={{ color: 'red' }}>*</span>
172 165 </div>
173 166 ),
... ... @@ -179,10 +172,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
179 172 const strTitle = (text as string) || '';
180 173 const index = strTitle.indexOf(searchValue);
181 174 return (
182   - < Form.Item
  175 + <Form.Item
183 176 name={'code' + record.id}
184 177 style={{ margin: 0 }}
185   - // initialValue={record.code}
  178 + // initialValue={record.code}
186 179 >
187 180 <Input
188 181 style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
... ... @@ -193,15 +186,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
193 186 }}
194 187 defaultValue={record.code}
195 188 bordered={false}
196   - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'code')} />
197   - </Form.Item >
198   - )
  189 + disabled={record.disabled || typeDis}
  190 + onBlur={(e) => handleChange(e, record, 'code')}
  191 + />
  192 + </Form.Item>
  193 + );
199 194 },
200 195 },
201 196 {
202 197 title: (
203 198 <div style={{ display: 'flex', flexDirection: 'row' }}>
204   - <span className='parameter-setting-table-title'>参数名</span>
  199 + <span className="parameter-setting-table-title">参数名</span>
205 200 <span style={{ color: 'red' }}>*</span>
206 201 </div>
207 202 ),
... ... @@ -216,7 +211,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
216 211 <Form.Item
217 212 name={'title' + record.id}
218 213 style={{ margin: 0 }}
219   - // initialValue={record.title}
  214 + // initialValue={record.title}
220 215 >
221 216 <Input
222 217 style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
... ... @@ -227,15 +222,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
227 222 }}
228 223 defaultValue={record.title}
229 224 bordered={false}
230   - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'title')} />
  225 + disabled={record.disabled || typeDis}
  226 + onBlur={(e) => handleChange(e, record, 'title')}
  227 + />
231 228 </Form.Item>
232   - )
  229 + );
233 230 },
234 231 },
235 232 {
236 233 title: (
237 234 <div style={{ display: 'flex', flexDirection: 'row' }}>
238   - <span className='parameter-setting-table-title'>参数类型</span>
  235 + <span className="parameter-setting-table-title">参数类型</span>
239 236 <span style={{ color: 'red' }}>*</span>
240 237 </div>
241 238 ),
... ... @@ -243,36 +240,40 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
243 240 className: 'ps-table-cell',
244 241 width: '102px',
245 242 key: 'type',
246   - render: (text, record) =>
  243 + render: (text, record) => (
247 244 <Form.Item
248 245 style={{ margin: 0 }}
249 246 name={'type' + record.id}
250   - // initialValue={record.type}
  247 + // initialValue={record.type}
251 248 >
252 249 <Select
253 250 bordered={false}
254 251 disabled={record.disabled || typeDis}
255 252 defaultValue={record.type}
256   - onSelect={(e) => handleChange(e, record, 'type')} >
257   - {
258   - valueOptions.map((item) => {
259   - return <Select.Option key={item.key} value={item.key}>{item.title}</Select.Option>;
260   - })
261   - }
  253 + onSelect={(e) => handleChange(e, record, 'type')}
  254 + >
  255 + {valueOptions.map((item) => {
  256 + return (
  257 + <Select.Option key={item.key} value={item.key}>
  258 + {item.title}
  259 + </Select.Option>
  260 + );
  261 + })}
262 262 </Select>
263 263 </Form.Item>
  264 + ),
264 265 },
265 266 {
266 267 title: (
267 268 <div style={{ display: 'flex', flexDirection: 'row' }}>
268   - <span className='parameter-setting-table-title'>默认值</span>
  269 + <span className="parameter-setting-table-title">默认值</span>
269 270 </div>
270 271 ),
271 272 dataIndex: 'valueMapping',
272 273 className: 'ps-table-cell',
273 274 width: '116px',
274 275 key: 'valueMapping',
275   - render: (text, record) =>
  276 + render: (text, record) => (
276 277 <div className="editable-cell ">
277 278 <QxFieldSetter
278 279 disabled={record.disabled || typeDis}
... ... @@ -292,14 +293,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
292 293 inputDis={true}
293 294 />
294 295 </div>
  296 + ),
295 297 },
296 298 {
297   - title:
298   - (
299   - <div style={{ display: 'flex', flexDirection: 'row' }}>
300   - <span className='parameter-setting-table-title'>参数说明</span>
301   - </div>
302   - ),
  299 + title: (
  300 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  301 + <span className="parameter-setting-table-title">参数说明</span>
  302 + </div>
  303 + ),
303 304 dataIndex: 'description',
304 305 className: 'ps-table-cell',
305 306 key: 'description',
... ... @@ -308,7 +309,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
308 309 <Form.Item
309 310 name={'description' + record.id}
310 311 style={{ margin: 0 }}
311   - // initialValue={text}
  312 + // initialValue={text}
312 313 >
313 314 <Input
314 315 draggable={true}
... ... @@ -319,23 +320,24 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
319 320 key={inputKey}
320 321 defaultValue={text}
321 322 bordered={false}
322   - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'description')} />
  323 + disabled={record.disabled || typeDis}
  324 + onBlur={(e) => handleChange(e, record, 'description')}
  325 + />
323 326 </Form.Item>
324 327 ),
325 328 },
326 329 {
327   - title:
328   - (
329   - <div style={{ display: 'flex', flexDirection: 'row' }}>
330   - <span className='parameter-setting-table-title'>操作</span>
331   - </div>
332   - ),
  330 + title: (
  331 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  332 + <span className="parameter-setting-table-title">操作</span>
  333 + </div>
  334 + ),
333 335 key: 'action',
334 336 className: 'ps-table-cell',
335 337 width: '96px',
336 338 render: (text, record) => {
337   - const isShowAdd = (record && checkShowAdd(record));
338   - const isShowTree = (record && checkShowTree(record));
  339 + const isShowAdd = record && checkShowAdd(record);
  340 + const isShowTree = record && checkShowTree(record);
339 341 return (
340 342 <Space size="small">
341 343 {isShowAdd && (
... ... @@ -343,7 +345,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
343 345 size={'small'}
344 346 type="link"
345 347 disabled={record.disabled || typeDis}
346   - icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />}
  348 + icon={
  349 + <QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />
  350 + }
347 351 onClick={() => handleAdd(record.pid)}
348 352 />
349 353 )}
... ... @@ -353,7 +357,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
353 357 size={'small'}
354 358 type="link"
355 359 disabled={record.disabled || typeDis}
356   - icon={<Icon style={{ fontSize: 16 }} component={SubNodeIcon} />}
  360 + icon={
  361 + <Icon style={{ fontSize: 16 }} component={SubNodeIcon} />
  362 + }
357 363 onClick={() => handleAddTree(record.id)}
358 364 />
359 365 )}
... ... @@ -362,7 +368,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
362 368 type="link"
363 369 className="btn-high-del"
364 370 disabled={record.disabled || typeDis}
365   - icon={<QxBaseIcon style={{ fontSize: 16 }} className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
  371 + icon={
  372 + <QxBaseIcon
  373 + style={{ fontSize: 16 }}
  374 + className={'title-btn-del-btn'}
  375 + type={'qx-icon-delete'}
  376 + />
  377 + }
366 378 onClick={() => handleDelete(record)}
367 379 />
368 380 </Space>
... ... @@ -372,12 +384,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
372 384 ];
373 385
374 386 const range = {
375   - title:
376   - (
377   - <div style={{ display: 'flex', flexDirection: 'row' }}>
378   - <span className='parameter-setting-table-title'>取值范围</span>
379   - </div>
380   - ),
  387 + title: (
  388 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  389 + <span className="parameter-setting-table-title">取值范围</span>
  390 + </div>
  391 + ),
381 392 dataIndex: 'qxProps',
382 393 className: 'ps-table-cell',
383 394 width: '314px',
... ... @@ -386,10 +397,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
386 397 switch (record.type) {
387 398 case 'STRING':
388 399 return (
389   - <div
390   - key={record.id}
391   - className="editable-cell"
392   - >
  400 + <div key={record.id} className="editable-cell">
393 401 <InputNumber
394 402 draggable={true}
395 403 disabled={record.disabled || typeDis}
... ... @@ -404,7 +412,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
404 412 defaultValue={qxProps?.min || undefined}
405 413 placeholder="最小长度"
406 414 />
407   - <div className='range-cell'>-</div>
  415 + <div className="range-cell">-</div>
408 416 <InputNumber
409 417 draggable={true}
410 418 disabled={record.disabled || typeDis}
... ... @@ -423,11 +431,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
423 431 );
424 432 case 'NUMBER':
425 433 return (
426   - <div
427   - key={record.id}
428   - className="editable-cell"
429   - >
430   - <div className='range-cell'>
  434 + <div key={record.id} className="editable-cell">
  435 + <div className="range-cell">
431 436 <InputNumber
432 437 disabled={record.disabled || typeDis}
433 438 draggable={true}
... ... @@ -437,7 +442,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
437 442 }}
438 443 precision={qxProps.precision || 0}
439 444 bordered={false}
440   - size='small'
  445 + size="small"
441 446 defaultValue={qxProps?.min || undefined}
442 447 onBlur={(e) => handleChange(e, record, 'qxProps-min')}
443 448 // style={{ width: '110px' }}
... ... @@ -452,7 +457,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
452 457 event.preventDefault();
453 458 }}
454 459 bordered={false}
455   - size='small'
  460 + size="small"
456 461 precision={qxProps.precision || 0}
457 462 defaultValue={qxProps.max || undefined}
458 463 onBlur={(e) => handleChange(e, record, 'qxProps-max')}
... ... @@ -461,8 +466,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
461 466 />
462 467 <Divider type="vertical" style={{ height: '16px' }} />
463 468 </div>
464   - <div className='range-cell'>
465   -
  469 + <div className="range-cell">
466 470 <InputNumber
467 471 disabled={record.disabled || typeDis}
468 472 draggable={true}
... ... @@ -471,7 +475,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
471 475 event.preventDefault();
472 476 }}
473 477 bordered={false}
474   - size='small'
  478 + size="small"
475 479 precision={0}
476 480 min={0}
477 481 max={8}
... ... @@ -484,20 +488,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
484 488 );
485 489 case 'TIME':
486 490 return (
487   - <div
488   - key={record.id}
489   - className="editable-cell"
490   - >
491   - <div className='range-cell'>
  491 + <div key={record.id} className="editable-cell">
  492 + <div className="range-cell">
492 493 <DatePicker
493 494 bordered={false}
494 495 disabled={record.disabled || typeDis}
495   - size='small'
496   - defaultValue={
497   - qxProps?.min
498   - ? moment(qxProps.min)
499   - : undefined
500   - }
  496 + size="small"
  497 + defaultValue={qxProps?.min ? moment(qxProps.min) : undefined}
501 498 format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'}
502 499 // style={{ width: '110px' }}
503 500 showTime
... ... @@ -507,13 +504,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
507 504 -
508 505 <DatePicker
509 506 disabled={record.disabled || typeDis}
510   - size='small'
  507 + size="small"
511 508 bordered={false}
512   - defaultValue={
513   - qxProps?.max
514   - ? moment(qxProps.max)
515   - : undefined
516   - }
  509 + defaultValue={qxProps?.max ? moment(qxProps.max) : undefined}
517 510 format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'}
518 511 // style={{ width: '110px' }}
519 512 showTime
... ... @@ -522,18 +515,16 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
522 515 />
523 516 <Divider type="vertical" style={{ height: '16px' }} />
524 517 </div>
525   - <div className='range-cell'>
  518 + <div className="range-cell">
526 519 <Select
527 520 disabled={record.disabled || typeDis}
528   - size='small'
  521 + size="small"
529 522 // style={{ width: '90px' }}
530 523 bordered={false}
531 524 placeholder="格式"
532 525 popupMatchSelectWidth={false}
533 526 defaultValue={qxProps?.format || 'YEAR_DATE'}
534   - onSelect={(e) =>
535   - handleChange(e, record, 'qxProps-format')
536   - }
  527 + onSelect={(e) => handleChange(e, record, 'qxProps-format')}
537 528 >
538 529 {timeFormat.map((item) => {
539 530 return (
... ... @@ -554,10 +545,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
554 545 case 'USER':
555 546 case 'ORG':
556 547 return (
557   - <div
558   - className='editable-cell'
559   - key={record.id}
560   - >
  548 + <div className="editable-cell" key={record.id}>
561 549 <QxFormSelect
562 550 value={qxProps}
563 551 appId={props?.appId}
... ... @@ -566,7 +554,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
566 554 onChange={(val: any) => {
567 555 handleChange(val, record, 'qxProps');
568 556 }}
569   - disabled={['USER', 'ORG'].includes(record.type) || record.disabled || typeDis}
  557 + disabled={
  558 + ['USER', 'ORG'].includes(record.type) ||
  559 + record.disabled ||
  560 + typeDis
  561 + }
570 562 request={props?.request}
571 563 />
572 564 </div>
... ... @@ -577,21 +569,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
577 569 };
578 570
579 571 const require = {
580   - title:
581   - (
582   - <div style={{ display: 'flex', flexDirection: 'row' }}>
583   - <span className='parameter-setting-table-title'>必填</span>
584   - </div>
585   - ),
  572 + title: (
  573 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  574 + <span className="parameter-setting-table-title">必填</span>
  575 + </div>
  576 + ),
586 577 dataIndex: 'required',
587 578 className: 'ps-table-cell',
588 579 key: 'required',
589 580 width: '86px',
590 581 render: (text, record) => (
591   - <Form.Item
592   - name={'required' + record.id}
593   - style={{ margin: 0 }}
594   - >
  582 + <Form.Item name={'required' + record.id} style={{ margin: 0 }}>
595 583 <Select
596 584 defaultValue={text || false}
597 585 bordered={false}
... ... @@ -601,12 +589,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
601 589 <Select.Option value={true}>是</Select.Option>
602 590 <Select.Option value={false}>否</Select.Option>
603 591 </Select>
604   - </Form.Item >
  592 + </Form.Item>
605 593 ),
606 594 };
607 595
608 596 if (nodeType !== 'END') {
609   - columns.splice(3, 0, range, require)
  597 + columns.splice(3, 0, range, require);
610 598 }
611 599
612 600 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
... ... @@ -618,7 +606,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
618 606 handleAdd('');
619 607 }
620 608 }
621   -
622 609 }, [visible]);
623 610
624 611 //展开 所有子节点
... ... @@ -648,7 +635,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
648 635 style: { cursor: 'move' },
649 636 onDragStart: (ev: any) => {
650 637 ev.persist();
651   - console.log('onDragStart', ev.target)
  638 + console.log('onDragStart', ev.target);
652 639 ev.dataTransfer.effectAllowed = 'move';
653 640 ev.dataTransfer.setData('text', ev.target.getAttribute('data-row-key'));
654 641 },
... ... @@ -797,8 +784,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
797 784 />
798 785 }
799 786 >
800   - {!type && (
801   - isShowJson ? (
  787 + {!type &&
  788 + (isShowJson ? (
802 789 <Row>
803 790 <Col span={12}>
804 791 <Button
... ... @@ -816,7 +803,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
816 803 <Button
817 804 size={'small'}
818 805 type="link"
819   - icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-flow-code'} />}
  806 + icon={
  807 + <QxBaseIcon
  808 + style={{ fontSize: 16 }}
  809 + type={'qx-icon-flow-code'}
  810 + />
  811 + }
820 812 style={{
821 813 padding: 0,
822 814 height: '32px',
... ... @@ -846,69 +838,68 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
846 838 />
847 839 </Col>
848 840 </Row>
849   - )
850   - )
851   - }
852   - {
853   - isShowJson ? (
854   - <>
855   - <JSONEditor value={midData} onChange={onJsonChange} />
856   - <Col
857   - className="border-none"
858   - span={24}
859   - style={{
860   - display: 'flex',
861   - flexDirection: 'row-reverse',
862   - marginBottom: '10px',
863   - textAlign: 'center',
864   - }}
865   - >
866   - <Space>
867   - <Button onClick={() => onCancel()}>{'取消'}</Button>
868   - <Button type="primary" onClick={() => submit()}>
869   - {'确定'}
870   - </Button>
871   - </Space>
872   - </Col>
873   - </>
874   - ) : (
875   - <Table
876   - expandable={{
877   - defaultExpandAllRows: true,
878   - childrenColumnName: 'child',
879   - expandIcon: ({ expanded, onExpand, record }) =>
880   - record.child && record.child.length > 0 && expanded ? (
881   - <>
882   - <Icon component={SubDropIcon}
883   - className='drop-icon' />
884   - <QxBaseIcon className={'table-expanded'} type={'qx-caret-down'} onClick={e => onExpand(record, e)} />
885   - </>
886   -
887   - ) : record.child && record.child.length > 0 && !expanded ?
888   - (
889   - <>
890   - <Icon component={SubDropIcon}
891   - className='drop-icon' />
892   - <QxBaseIcon className={'table-expanded-change'} type={'qx-caret-down'} onClick={e => onExpand(record, e)} />
893   - </>
894   - )
895   - :
896   - <Icon component={SubDropIcon}
897   - className='drop-icon' />
  841 + ))}
  842 + {isShowJson ? (
  843 + <>
  844 + <JSONEditor value={midData} onChange={onJsonChange} />
  845 + <Col
  846 + className="border-none"
  847 + span={24}
  848 + style={{
  849 + display: 'flex',
  850 + flexDirection: 'row-reverse',
  851 + marginBottom: '10px',
  852 + textAlign: 'center',
898 853 }}
899   - className='parameter-setting-table'
900   - onRow={() => onRow()}
901   - scroll={{ x: 1000, y: 432 }}
902   - bordered
903   - pagination={false}
904   - size={'small'}
905   - // @ts-ignore
906   - columns={columns}
907   - dataSource={data}
908   - rowKey={'id'}
909   - />
910   - )
911   - }
  854 + >
  855 + <Space>
  856 + <Button onClick={() => onCancel()}>{'取消'}</Button>
  857 + <Button type="primary" onClick={() => submit()}>
  858 + {'确定'}
  859 + </Button>
  860 + </Space>
  861 + </Col>
  862 + </>
  863 + ) : (
  864 + <Table
  865 + expandable={{
  866 + defaultExpandAllRows: true,
  867 + childrenColumnName: 'child',
  868 + expandIcon: ({ expanded, onExpand, record }) =>
  869 + record.child && record.child.length > 0 && expanded ? (
  870 + <>
  871 + <Icon component={SubDropIcon} className="drop-icon" />
  872 + <QxBaseIcon
  873 + className={'table-expanded'}
  874 + type={'qx-caret-down'}
  875 + onClick={(e) => onExpand(record, e)}
  876 + />
  877 + </>
  878 + ) : record.child && record.child.length > 0 && !expanded ? (
  879 + <>
  880 + <Icon component={SubDropIcon} className="drop-icon" />
  881 + <QxBaseIcon
  882 + className={'table-expanded-change'}
  883 + type={'qx-caret-down'}
  884 + onClick={(e) => onExpand(record, e)}
  885 + />
  886 + </>
  887 + ) : (
  888 + <Icon component={SubDropIcon} className="drop-icon" />
  889 + ),
  890 + }}
  891 + className="parameter-setting-table"
  892 + onRow={onRow}
  893 + scroll={{ x: 1000, y: 432 }}
  894 + bordered
  895 + pagination={false}
  896 + size={'small'}
  897 + // @ts-ignore
  898 + columns={columns}
  899 + dataSource={data}
  900 + rowKey={'id'}
  901 + />
  902 + )}
912 903 </Modal>
913 904 </>
914 905 );
... ...
1 1 /* eslint-disable eqeqeq */
2 2 /* eslint-disable array-callback-return */
3   -import React, { useCallback, useEffect, useState } from 'react';
  3 +import Icon from '@ant-design/icons';
4 4 import {
5 5 Button,
6 6 Dropdown,
... ... @@ -11,23 +11,22 @@ import {
11 11 Tree,
12 12 message,
13 13 } from 'antd';
14   -import Icon from '@ant-design/icons';
15 14 import type { TreeProps } from 'antd/lib/tree';
  15 +import React, { useCallback, useEffect, useState } from 'react';
16 16 import ParameterModal from './ParameterModal';
17 17 import { formatEnum } from './constant';
18 18 // import type { InputRef } from 'antd';
19 19 import {
20 20 typeTranslateFieIdtype,
21   - typeTranslateWidget,
22 21 typeTranslateGrouptype,
23   - // typeTranslateItemtype,
  22 + typeTranslateWidget,
24 23 } from './constant';
25 24
26   -import { cloneDeep, isEmpty } from 'lodash-es';
  25 +import { QxBaseIcon, QxFieldSetter } from '@qx/common';
27 26 import moment from 'dayjs';
  27 +import { cloneDeep, isEmpty } from 'lodash-es';
28 28 import type { ParamDesignModel } from './constant';
29 29 import { uidGen } from './stringUtil';
30   -import { QxFieldSetter, QxBaseIcon } from '@qx/common';
31 30
32 31 import './style.less';
33 32
... ... @@ -36,8 +35,7 @@ type ValueOptionProps = {
36 35 value: string;
37 36 };
38 37
39   -import { SubNodeIcon } from './sub-node-icon';
40   -import { SubDropIcon } from './sub-node-icon';
  38 +import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
41 39
42 40 const valueOptions = [
43 41 { key: 'STRING', label: '文本' },
... ... @@ -75,7 +73,7 @@ const getDefaultQxProps = (type: string) => {
75 73 break;
76 74 }
77 75 return _qxProps;
78   -}
  76 +};
79 77
80 78 const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => {
81 79 let parentKey: React.Key;
... ... @@ -103,8 +101,8 @@ interface ParameterSettingProps {
103 101 // componentItem?: any;
104 102 // comHandleChange?: (val: any) => void;
105 103 appId?: string; // 当前应用ID
106   - request?: any,
107   - type?: string,
  104 + request?: any;
  105 + type?: string;
108 106 nodeType?: string | 'START' | 'END';
109 107 }
110 108
... ... @@ -236,15 +234,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
236 234 ) {
237 235 const { qxProps } = data;
238 236 value = moment(value).format(formatEnum[qxProps?.format] || 'YYYY-MM-DD');
239   - }
240   - else if (code == 'qxProps-min' || code == 'qxProps-max') {
  237 + } else if (code == 'qxProps-min' || code == 'qxProps-max') {
241 238 if (value) {
242   - value = Number(value)
  239 + value = Number(value);
243 240 if (isNaN(value)) {
244   - value = null
  241 + value = null;
245 242 }
246 243 } else {
247   - value = null
  244 + value = null;
248 245 }
249 246 console.log('value', value);
250 247 }
... ... @@ -285,7 +282,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
285 282 _qxProps[_newCode] = value;
286 283 }
287 284 treeList[i].qxProps = {
288   - ..._qxProps
  285 + ..._qxProps,
289 286 };
290 287 } else {
291 288 treeList[i][code] = value;
... ... @@ -484,7 +481,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
484 481 type: _type,
485 482 pid: _pid,
486 483 title: code,
487   - qxProps: getDefaultQxProps(_type)
  484 + qxProps: getDefaultQxProps(_type),
488 485 });
489 486 return;
490 487 } else if (treeList[i].child) {
... ... @@ -494,7 +491,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
494 491 };
495 492
496 493 if (!_pid) {
497   - _treeData.push({ id, code, type: _type, title: code, qxProps: getDefaultQxProps(_type), pid: '' });
  494 + _treeData.push({
  495 + id,
  496 + code,
  497 + type: _type,
  498 + title: code,
  499 + qxProps: getDefaultQxProps(_type),
  500 + pid: '',
  501 + });
498 502 } else {
499 503 loopAddTree(_treeData);
500 504 }
... ... @@ -546,7 +550,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
546 550 e.persist();
547 551 const parentNode = e.currentTarget.parentNode.parentNode.parentNode;
548 552 if (!!parentNode) {
549   - parentNode.style.backgroundColor = '#bae7ff';
  553 + // parentNode.style.backgroundColor = '#bae7ff';
550 554 }
551 555 };
552 556
... ... @@ -592,8 +596,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
592 596 );
593 597 treeList[i].valueMapping = {
594 598 ...data.valueMapping,
595   - mappingValues: newMappingValues
596   - }
  599 + mappingValues: newMappingValues,
  600 + };
597 601 treeList[i].valuesObj = val;
598 602 return;
599 603 } else if (!!treeList[i]?.child?.length) {
... ... @@ -606,24 +610,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
606 610 props?.onChange(_newData);
607 611 };
608 612
609   - // const callback = (val: any, index: number) => {
610   -
611   - // const newValue = [...value];
612   - // newValue[index].mappingValues = val.map((item: any) =>
613   - // item?.extVal ? item?.extVal : item?.value,
614   - // );
615   - // newValue[index].valuesObj = val;
616   -
617   - // // if (newValue[index].fieldType == 'REL') {
618   - // // relIdList.map((_value) => {
619   - // // if (_value.key == newValue[index].mappingValues[0]) {
620   - // // newValue[index].relId = _value?.extract?.relId;
621   - // // }
622   - // // });
623   - // // }
624   -
625   - // };
626   -
627 613 // 渲染节点
628 614 const renderTitle = (nodeData: any) => {
629 615 const strTitle = (nodeData.title as string) || '';
... ... @@ -632,10 +618,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
632 618 const disabled = !!props.type ? true : nodeData.disabled;
633 619 return (
634 620 <div>
635   - <Icon component={SubDropIcon}
636   - className='drop-icon'/>
637   - <div
638   - onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
  621 + <Icon component={SubDropIcon} className="drop-icon" />
  622 + <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
639 623 <div
640 624 style={{
641 625 // padding: '2px',
... ... @@ -676,7 +660,12 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
676 660 )}
677 661 <Button
678 662 className="title-btn-del"
679   - icon={<QxBaseIcon className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
  663 + icon={
  664 + <QxBaseIcon
  665 + className={'title-btn-del-btn'}
  666 + type={'qx-icon-delete'}
  667 + />
  668 + }
680 669 disabled={disabled}
681 670 type="link"
682 671 onClick={() => deleteParameter(nodeData)}
... ... @@ -713,7 +702,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
713 702 widget={typeTranslateWidget(nodeData.type)}
714 703 fieldType={typeTranslateFieIdtype(nodeData.type)}
715 704 fieldGroupType={typeTranslateGrouptype(nodeData.type)}
716   - isMixValue={typeTranslateFieIdtype(nodeData.type) == 'STRING' ? true : false}
  705 + isMixValue={
  706 + typeTranslateFieIdtype(nodeData.type) == 'STRING'
  707 + ? true
  708 + : false
  709 + }
717 710 colsTree={props.nodeItem}
718 711 isMultiple={false}
719 712 onChange={(val) => changeField(val, nodeData)}
... ... @@ -735,8 +728,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
735 728 <div>
736 729 <div className={'qx-parameter-setting-content'}>
737 730 <div style={{ display: 'flex', flexDirection: 'row' }}>
738   - {
739   - !props.type &&
  731 + {!props.type && (
740 732 <Dropdown
741 733 trigger={['click']}
742 734 className={'hidden-select'}
... ... @@ -755,11 +747,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
755 747 padding: '0 0 0 8px',
756 748 }}
757 749 >
758   - <QxBaseIcon style={{ fontSize: '16px' }} type={'qx-icon-plus'} />
  750 + <QxBaseIcon
  751 + style={{ fontSize: '16px' }}
  752 + type={'qx-icon-plus'}
  753 + />
759 754 添加参数
760 755 </Button>
761 756 </Dropdown>
762   - }
  757 + )}
763 758 <Button
764 759 size={'small'}
765 760 type={'link'}
... ... @@ -770,7 +765,10 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
770 765 openModal();
771 766 }}
772 767 >
773   - <QxBaseIcon style={{ fontSize: '16px' }} type={'icon-app-terminal-box-line'} />
  768 + <QxBaseIcon
  769 + style={{ fontSize: '16px' }}
  770 + type={'icon-app-terminal-box-line'}
  771 + />
774 772 高级设置
775 773 </Button>
776 774 </div>
... ... @@ -783,34 +781,32 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
783 781 />
784 782 )}
785 783 {props.isHideSearch && !!props.title && (
786   - <div className={'header-title'}>
787   - {props.title}
788   - </div>
  784 + <div className={'header-title'}>{props.title}</div>
789 785 )}
790 786 </div>
791 787 <div className="tree-wrapper">
792 788 {props?.value?.length > 0
793 789 ? treeData?.length > 0 &&
794   - defaultExpandedKeys && (
795   - <Tree
796   - rootClassName={'qx-parameter-tree-list'}
797   - treeData={treeData || []}
798   - fieldNames={{
799   - title: 'label',
800   - key: 'id',
801   - children: 'child',
802   - }}
803   - titleRender={(nodeData) => renderTitle(nodeData)}
804   - style={{ height: '100%' }}
805   - onDrop={onDrop}
806   - draggable={{ icon: false }}
807   - // draggable={!props.type}
808   - blockNode
809   - expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
810   - autoExpandParent={autoExpandParent}
811   - onExpand={onExpand}
812   - />
813   - )
  790 + defaultExpandedKeys && (
  791 + <Tree
  792 + rootClassName={'qx-parameter-tree-list'}
  793 + treeData={treeData || []}
  794 + fieldNames={{
  795 + title: 'label',
  796 + key: 'id',
  797 + children: 'child',
  798 + }}
  799 + titleRender={(nodeData) => renderTitle(nodeData)}
  800 + style={{ height: '100%' }}
  801 + onDrop={onDrop}
  802 + draggable={{ icon: false }}
  803 + // draggable={!props.type}
  804 + blockNode
  805 + expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
  806 + autoExpandParent={autoExpandParent}
  807 + onExpand={onExpand}
  808 + />
  809 + )
814 810 : null}
815 811 </div>
816 812 <ParameterModal
... ...
  1 +/* stylelint-disable no-duplicate-selectors */
1 2 /* stylelint-disable selector-class-pattern */
2 3 @import '~@qx/ui/src/style/variable.less';
3 4
... ... @@ -19,7 +20,7 @@
19 20 overflow: hidden;
20 21 white-space: nowrap;
21 22 text-overflow: ellipsis;
22   - -o-text-overflow: ellipsis;
  23 + text-overflow: ellipsis;
23 24 }
24 25 }
25 26
... ... @@ -32,20 +33,20 @@
32 33 margin-top: 20px;
33 34
34 35 .ant-tree .ant-tree-switcher {
35   - // margin-top: 6.5px;
36   - width:44px;
37   - margin-top: 11.5px;
38   - margin-right: 7px;
39   - display: flex;
40   - justify-content: flex-end;
  36 + // margin-top: 6.5px;
  37 + width: 34px;
  38 + margin-top: 11.5px;
  39 + margin-right: 10px;
  40 + display: flex;
  41 + justify-content: flex-end;
41 42 }
42 43 }
43 44
44 45 .border-none
45   -.ant-select-focused:not(.ant-select-disabled).ant-select:not(
  46 + .ant-select-focused:not(.ant-select-disabled).ant-select:not(
46 47 .ant-select-customize-input
47 48 )
48   -.ant-select-selector {
  49 + .ant-select-selector {
49 50 border: none;
50 51 box-shadow: none;
51 52 }
... ... @@ -67,7 +68,6 @@
67 68 align-items: center;
68 69 margin-left: 10px;
69 70
70   - .ant-btn.ant-btn-icon-only,
71 71 .ant-btn.ant-btn-icon-only {
72 72 font-size: 16px;
73 73 color: @N7;
... ... @@ -104,11 +104,11 @@
104 104 }
105 105
106 106 .title-btn-del {
107   - display: none;
  107 + opacity: 0.01;
108 108 }
109 109
110 110 .title-btn {
111   - display: none;
  111 + opacity: 0.01;
112 112 }
113 113
114 114 .select-tree {
... ... @@ -126,7 +126,7 @@
126 126 margin-bottom: 2px;
127 127 overflow: hidden;
128 128 text-overflow: ellipsis;
129   - transition: width .3s cubic-bezier(.2, 0, 0, 1) 0s;
  129 + transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
130 130
131 131 .ant-input-affix-wrapper {
132 132 border-color: @N4;
... ... @@ -143,6 +143,18 @@
143 143 text-overflow: ellipsis;
144 144 background-color: #fff;
145 145 border-radius: 4px;
  146 +
  147 + .qx-field-setter {
  148 + border-width: 1px;
  149 + border-style: solid;
  150 + border-color: #d9d9d9;
  151 + border-radius: 6px;
  152 + // height: 32px;
  153 +
  154 + .qx-formula-cm {
  155 + padding-left: 10px !important;
  156 + }
  157 + }
146 158 }
147 159
148 160 .btn-high-del {
... ... @@ -163,7 +175,7 @@
163 175 justify-content: flex-start;
164 176 flex-wrap: nowrap;
165 177
166   - .range-cell{
  178 + .range-cell {
167 179 display: flex;
168 180 align-content: center;
169 181 flex-wrap: nowrap;
... ... @@ -172,14 +184,12 @@
172 184 }
173 185
174 186 .ant-input-affix-wrapper,
175   - .qx-field-setter {
  187 + .qx-field-setter {
176 188 border-width: 0;
177 189 }
178   -
179   -
180 190 }
181 191
182   -.search-selected{
  192 +.search-selected {
183 193 .ant-input {
184 194 color: #1890ff;
185 195 }
... ... @@ -227,7 +237,6 @@
227 237 text-align: center !important;
228 238 }
229 239
230   -
231 240 .json-editor {
232 241 width: 90%;
233 242 margin-bottom: 20px;
... ... @@ -265,15 +274,15 @@
265 274 padding-top: 4px !important;
266 275 border-radius: 4px;
267 276 transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
268   - background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
269   - padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
270   -
271   - .drop-icon{
272   - // opacity: 0.1;
273   - display: none;
274   - // position: absolute;
275   - // top: 10px;
276   - // left: -49px;
  277 + background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
  278 + padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  279 +
  280 + .drop-icon {
  281 + position: absolute;
  282 + top: 10px;
  283 + left: -46px;
  284 + opacity: 1;
  285 + display: block;
277 286 }
278 287
279 288 &:hover {
... ... @@ -281,24 +290,7 @@
281 290
282 291 .title-btn-del,
283 292 .title-btn {
284   - display: block;
285   - }
286   -
287   - .drop-icon{
288   - position: absolute;
289   - top: 10px;
290   - left: -39px;
291 293 opacity: 1;
292   - display: block;
293   - }
294   -
295   - .opt-left {
296   - width: 65%;
297   - }
298   -
299   - .ant-tree-treenode-draggable .ant-tree-draggable-icon {
300   - padding-top: 6px;
301   - opacity: 1 !important;
302 294 }
303 295 }
304 296 }
... ... @@ -312,46 +304,46 @@
312 304 }
313 305 }
314 306
315   - .parameter-setting-table-title{
316   - font-weight: 500;
317   - font-size: 14px;
318   - line-height: 22px;
319   - color: #7C7E86;
320   - padding-left: 10px;
321   - }
  307 +.parameter-setting-table-title {
  308 + font-weight: 500;
  309 + font-size: 14px;
  310 + line-height: 22px;
  311 + color: #7c7e86;
  312 + padding-left: 10px;
  313 +}
322 314
323   - .parameter-setting-table{
324   - .code-header{
325   - display: flex;
326   - }
  315 +.parameter-setting-table {
  316 + .code-header {
  317 + display: flex;
  318 + }
327 319
328   - .ant-table-tbody .ant-table-row{
329   - .drop-icon{
330   - opacity: 0.01;
331   - }
  320 + .ant-table-tbody .ant-table-row {
  321 + // .drop-icon{
  322 + // opacity: 0.01;
  323 + // }
332 324
333   - &:hover {
334   - .drop-icon{
335   - opacity: 1;
336   - }
337   - }
338   - }
339   -
340   - .table-expanded{
341   - color: #7C7E86;
342   - margin-left: 8px;
343   - transition: transform 0.3s;
344   - }
  325 + // &:hover {
  326 + // .drop-icon{
  327 + // opacity: 1;
  328 + // }
  329 + // }
  330 + }
345 331
346   - .table-expanded-change{
347   - transform: rotate(-90deg);
348   - color: #7C7E86;
349   - margin-left: 8px;
350   - transition: transform 0.3s;
351   - }
  332 + .table-expanded {
  333 + color: #7c7e86;
  334 + margin-left: 8px;
  335 + transition: transform 0.3s;
352 336 }
353 337
354   - .parameter-setting-table .ant-table-cell{
355   - height: 40px;
356   - padding: 4px 16px 0 4px !important;
  338 + .table-expanded-change {
  339 + transform: rotate(-90deg);
  340 + color: #7c7e86;
  341 + margin-left: 8px;
  342 + transition: transform 0.3s;
357 343 }
  344 +}
  345 +
  346 +.parameter-setting-table .ant-table-cell {
  347 + height: 40px;
  348 + padding: 4px 16px 0 4px !important;
  349 +}
... ...