田强 / qx-common · Commits

Commit 6597c69c38ff69afbe7d1acba8ba1c5a7295d023

Authored by 邱嘉伟
1 parent 4117a468

feat: 参数设计器增加纯预览模式

Inline Side-by-side
Showing 3 changed files with 112 additions and 90 deletions
... ... @@ -85,6 +85,7 @@ interface ParameterSettingProps {
85 85 handleDelete: (val: any) => void;
86 86 request?: any;
87 87 nodeType?: string | 'START' | 'END';
  88 + type?: string;
88 89 appId?: string; // 当前应用ID
89 90 }
90 91
... ... @@ -105,6 +106,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
105 106 handleChangeField,
106 107 inputKey,
107 108 nodeType,
  109 + type,
108 110 } = props;
109 111 const [searchValue, setSearchValue] = useState('');
110 112
... ... @@ -156,7 +158,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
156 158 }
157 159 return true;
158 160 };
159   -
  161 + const typeDis = !!type;
160 162 const columns = [
161 163 {
162 164 title: (
... ... @@ -186,7 +188,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
186 188 }}
187 189 defaultValue={record.code}
188 190 bordered={false}
189   - disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'code')} />
  191 + disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'code')} />
190 192 </Form.Item >
191 193 )
192 194 },
... ... @@ -219,7 +221,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
219 221 }}
220 222 defaultValue={record.title}
221 223 bordered={false}
222   - disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'title')} />
  224 + disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'title')} />
223 225 </Form.Item>
224 226 )
225 227 },
... ... @@ -242,7 +244,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
242 244 >
243 245 <Select
244 246 bordered={false}
245   - disabled={record.disabled}
  247 + disabled={record.disabled || typeDis}
246 248 defaultValue={record.type}
247 249 onSelect={(e) => handleChange(e, record, 'type')} >
248 250 {
... ... @@ -261,7 +263,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
261 263 render: (text, record) =>
262 264 <div className="editable-cell ">
263 265 <QxFieldSetter
264   - disabled={record.disabled}
  266 + disabled={record.disabled || typeDis}
265 267 value={record.valuesObj || []}
266 268 params={{ appCode: 'appCode', useId: true }}
267 269 valueOptions={getValueOptions(record)}
... ... @@ -299,7 +301,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
299 301 key={inputKey}
300 302 defaultValue={text}
301 303 bordered={false}
302   - disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'description')} />
  304 + disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'description')} />
303 305 </Form.Item>
304 306 ),
305 307 },
... ... @@ -316,7 +318,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
316 318 <Button
317 319 size={'small'}
318 320 type="link"
319   - disabled={record.disabled}
  321 + disabled={record.disabled || typeDis}
320 322 icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />}
321 323 onClick={() => handleAdd(record.pid)}
322 324 />
... ... @@ -326,7 +328,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
326 328 <Button
327 329 size={'small'}
328 330 type="link"
329   - disabled={record.disabled}
  331 + disabled={record.disabled || typeDis}
330 332 icon={<Icon style={{ fontSize: 16 }} component={SubNodeIcon} />}
331 333 onClick={() => handleAddTree(record.id)}
332 334 />
... ... @@ -335,7 +337,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
335 337 size={'small'}
336 338 type="link"
337 339 className="btn-high-del"
338   - disabled={record.disabled}
  340 + disabled={record.disabled || typeDis}
339 341 icon={<QxBaseIcon style={{ fontSize: 16 }} className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
340 342 onClick={() => handleDelete(record)}
341 343 />
... ... @@ -361,7 +363,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
361 363 >
362 364 <InputNumber
363 365 draggable={true}
364   - disabled={record.disabled}
  366 + disabled={record.disabled || typeDis}
365 367 onDragStart={(event) => {
366 368 event.stopPropagation();
367 369 event.preventDefault();
... ... @@ -376,7 +378,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
376 378 <div className='range-cell'>-</div>
377 379 <InputNumber
378 380 draggable={true}
379   - disabled={record.disabled}
  381 + disabled={record.disabled || typeDis}
380 382 onDragStart={(event) => {
381 383 event.stopPropagation();
382 384 event.preventDefault();
... ... @@ -398,7 +400,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
398 400 >
399 401 <div className='range-cell'>
400 402 <InputNumber
401   - disabled={record.disabled}
  403 + disabled={record.disabled || typeDis}
402 404 draggable={true}
403 405 onDragStart={(event) => {
404 406 event.stopPropagation();
... ... @@ -414,7 +416,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
414 416 />
415 417 -
416 418 <InputNumber
417   - disabled={record.disabled}
  419 + disabled={record.disabled || typeDis}
418 420 draggable={true}
419 421 onDragStart={(event) => {
420 422 event.stopPropagation();
... ... @@ -433,7 +435,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
433 435 <div className='range-cell'>
434 436
435 437 <InputNumber
436   - disabled={record.disabled}
  438 + disabled={record.disabled || typeDis}
437 439 draggable={true}
438 440 onDragStart={(event) => {
439 441 event.stopPropagation();
... ... @@ -460,7 +462,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
460 462 <div className='range-cell'>
461 463 <DatePicker
462 464 bordered={false}
463   - disabled={record.disabled}
  465 + disabled={record.disabled || typeDis}
464 466 size='small'
465 467 defaultValue={
466 468 qxProps?.min
... ... @@ -475,7 +477,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
475 477 />
476 478 -
477 479 <DatePicker
478   - disabled={record.disabled}
  480 + disabled={record.disabled || typeDis}
479 481 size='small'
480 482 bordered={false}
481 483 defaultValue={
... ... @@ -493,7 +495,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
493 495 </div>
494 496 <div className='range-cell'>
495 497 <Select
496   - disabled={record.disabled}
  498 + disabled={record.disabled || typeDis}
497 499 size='small'
498 500 // style={{ width: '90px' }}
499 501 bordered={false}
... ... @@ -535,7 +537,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
535 537 onChange={(val: any) => {
536 538 handleChange(val, record, 'qxProps');
537 539 }}
538   - disabled={['USER', 'ORG'].includes(record.type) || record.disabled}
  540 + disabled={['USER', 'ORG'].includes(record.type) || record.disabled || typeDis}
539 541 request={props?.request}
540 542 />
541 543 </div>
... ... @@ -559,7 +561,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
559 561 <Select
560 562 defaultValue={text || false}
561 563 bordered={false}
562   - disabled={record.disabled}
  564 + disabled={record.disabled || typeDis}
563 565 onSelect={(e) => props.handleChange(e, record, 'required')}
564 566 >
565 567 <Select.Option value={true}>是</Select.Option>
... ... @@ -608,8 +610,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
608 610
609 611 //每行拖拽渲染
610 612 const onRow = () => ({
611   - draggable: true,
612   - style: { cursor: 'move' },
  613 + draggable: !type,
  614 + style: !type && { cursor: 'move' },
613 615 onDragStart: (ev: any) => {
614 616 ev.persist();
615 617 ev.dataTransfer.effectAllowed = 'move';
... ... @@ -758,55 +760,58 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
758 760 />
759 761 }
760 762 >
761   - {isShowJson ? (
762   - <Row>
763   - <Col span={12}>
764   - <Button
765   - type="link"
766   - icon={<SnippetsOutlined />}
767   - onClick={() => setIsShowJson(false)}
768   - >
769   - {'表单参数设置'}
770   - </Button>
771   - </Col>
772   - </Row>
773   - ) : (
774   - <Row>
775   - <Col span={12}>
776   - <Button
777   - size={'small'}
778   - type="link"
779   - icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-flow-code'} />}
  763 + {!type && (
  764 + isShowJson ? (
  765 + <Row>
  766 + <Col span={12}>
  767 + <Button
  768 + type="link"
  769 + icon={<SnippetsOutlined />}
  770 + onClick={() => setIsShowJson(false)}
  771 + >
  772 + {'表单参数设置'}
  773 + </Button>
  774 + </Col>
  775 + </Row>
  776 + ) : (
  777 + <Row>
  778 + <Col span={12}>
  779 + <Button
  780 + size={'small'}
  781 + type="link"
  782 + icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-flow-code'} />}
  783 + style={{
  784 + padding: 0,
  785 + height: '32px',
  786 + lineHeight: '32px',
  787 + }}
  788 + onClick={() => onOpen()}
  789 + >
  790 + JSON参数设置
  791 + </Button>
  792 + </Col>
  793 + <Col
  794 + className="border-none"
  795 + span={12}
780 796 style={{
781   - padding: 0,
782   - height: '32px',
783   - lineHeight: '32px',
  797 + display: 'flex',
  798 + flexDirection: 'row-reverse',
  799 + marginBottom: '16px',
  800 + textAlign: 'center',
784 801 }}
785   - onClick={() => onOpen()}
786 802 >
787   - JSON参数设置
788   - </Button>
789   - </Col>
790   - <Col
791   - className="border-none"
792   - span={12}
793   - style={{
794   - display: 'flex',
795   - flexDirection: 'row-reverse',
796   - marginBottom: '16px',
797   - textAlign: 'center',
798   - }}
799   - >
800   - <Input
801   - className={'qx-parameter-setting--search'}
802   - placeholder="参数编码/参数名搜索"
803   - prefix={<QxBaseIcon type={'icon-app-search-line'} />}
804   - onChange={onChange}
805   - style={{ width: 219 }}
806   - />
807   - </Col>
808   - </Row>
809   - )}
  803 + <Input
  804 + className={'qx-parameter-setting--search'}
  805 + placeholder="参数编码/参数名搜索"
  806 + prefix={<QxBaseIcon type={'icon-app-search-line'} />}
  807 + onChange={onChange}
  808 + style={{ width: 219 }}
  809 + />
  810 + </Col>
  811 + </Row>
  812 + )
  813 + )
  814 + }
810 815 {
811 816 isShowJson ? (
812 817 <>
... ...
... ... @@ -31,6 +31,17 @@ export default () => {
31 31 disabled: false,
32 32 type: 'FORM',
33 33 },
  34 + {
  35 + id: '6370b8fd52484b83ab2222270b05f',
  36 + pid: '',
  37 + code: 'kwkwkw',
  38 + showCode: true,
  39 + title: '维苏威',
  40 + required: true,
  41 + qxProps: {},
  42 + disabled: false,
  43 + type: 'STRING',
  44 + },
34 45 ]);
35 46 const handleChange = (newValue) => {
36 47 setValue(newValue);
... ... @@ -117,6 +128,7 @@ export default () => {
117 128 isHideSearch={isHide}
118 129 isShowField={true}
119 130 title={titleDom}
  131 + type={'preview'}
120 132 // component={QxTagsInput}
121 133 request={request}
122 134 appId={'5ak3C213YQWEO6IYnIs'}
... ...
... ... @@ -103,6 +103,7 @@ interface ParameterSettingProps {
103 103 // comHandleChange?: (val: any) => void;
104 104 appId?: string; // 当前应用ID
105 105 request?: any,
  106 + type?: string,
106 107 nodeType?: string | 'START' | 'END';
107 108 }
108 109
... ... @@ -627,7 +628,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
627 628 const strTitle = (nodeData.title as string) || '';
628 629 const index = strTitle.indexOf(searchValue);
629 630 const isShowTree = checkShowTree(nodeData);
630   - const disabled = nodeData.disabled;
  631 + const disabled = !!props.type ? true : nodeData.disabled;
631 632 return (
632 633 <div
633 634 onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
... ... @@ -730,28 +731,31 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
730 731 <div>
731 732 <div className={'qx-parameter-setting-content'}>
732 733 <div style={{ display: 'flex', flexDirection: 'row' }}>
733   - <Dropdown
734   - trigger={['click']}
735   - className={'hidden-select'}
736   - dropdownRender={() => (
737   - <Menu
738   - items={valueOptions}
739   - className={'dropdown'}
740   - onClick={onSelect}
741   - />
742   - )}
743   - >
744   - <Button
745   - size={'small'}
746   - type={'link'}
747   - style={{
748   - padding: '0 0 0 8px',
749   - }}
  734 + {
  735 + !props.type &&
  736 + <Dropdown
  737 + trigger={['click']}
  738 + className={'hidden-select'}
  739 + dropdownRender={() => (
  740 + <Menu
  741 + items={valueOptions}
  742 + className={'dropdown'}
  743 + onClick={onSelect}
  744 + />
  745 + )}
750 746 >
751   - <QxBaseIcon style={{ fontSize: '16px' }} type={'qx-icon-plus'} />
752   - 添加参数
753   - </Button>
754   - </Dropdown>
  747 + <Button
  748 + size={'small'}
  749 + type={'link'}
  750 + style={{
  751 + padding: '0 0 0 8px',
  752 + }}
  753 + >
  754 + <QxBaseIcon style={{ fontSize: '16px' }} type={'qx-icon-plus'} />
  755 + 添加参数
  756 + </Button>
  757 + </Dropdown>
  758 + }
755 759 <Button
756 760 size={'small'}
757 761 type={'link'}
... ... @@ -795,7 +799,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
795 799 titleRender={(nodeData) => renderTitle(nodeData)}
796 800 style={{ height: '100%' }}
797 801 onDrop={onDrop}
798   - draggable
  802 + draggable={!props.type}
799 803 blockNode
800 804 expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
801 805 autoExpandParent={autoExpandParent}
... ... @@ -820,6 +824,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
820 824 request={props?.request}
821 825 appId={props?.appId}
822 826 nodeType={props?.nodeType}
  827 + type={props?.type}
823 828 />
824 829 </div>
825 830 );
... ...