Commit 6fb0debbbce147bdc0b2a7a5c7e3d210bd918344

Authored by 邱嘉伟
1 parent 8603bea5

fix: 增加标题校验,样式优化

... ... @@ -15,7 +15,6 @@ Demo:
15 15 import { QxParameterSetting, request } from '@qx/common';
16 16 import { Input } from 'antd';
17 17 import React, { useState } from 'react';
18   -import { appFormList } from './mock';
19 18 export default () => {
20 19 const [value, setValue] = useState([
21 20 {
... ... @@ -26,10 +25,10 @@ export default () => {
26 25 title: '爱的人翁热',
27 26 required: true,
28 27 qxProps: {},
29   - disabled: false,
  28 + disabled: true,
30 29 type: 'FORM',
31 30 },
32   - {
  31 + {
33 32 id: '6370b8fd52484b83ab2222270b05f',
34 33 pid: '',
35 34 code: 'kwkwkw',
... ...
... ... @@ -219,6 +219,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
219 219
220 220 // @ts-ignore
221 221 const handleChange = (e?: any, data?: any, code?: string) => {
  222 + console.log('handleChange');
222 223 let value,
223 224 oldValue,
224 225 _qxProps = {};
... ... @@ -480,7 +481,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
480 481 code,
481 482 type: _type,
482 483 pid: _pid,
483   - title: code,
  484 + title: '',
484 485 qxProps: getDefaultQxProps(_type),
485 486 });
486 487 return;
... ... @@ -495,7 +496,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
495 496 id,
496 497 code,
497 498 type: _type,
498   - title: code,
  499 + title: '',
499 500 qxProps: getDefaultQxProps(_type),
500 501 pid: '',
501 502 });
... ... @@ -514,9 +515,9 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
514 515 const code = uidGen(undefined, 6);
515 516 if (item.id === pid) {
516 517 if (item.child && item.child.length > 0) {
517   - item.child.push({ id, type: 'STRING', pid, code, title: code });
  518 + item.child.push({ id, type: 'STRING', pid, code, title: '' });
518 519 } else {
519   - item.child = [{ id, type: 'STRING', pid, code, title: code }];
  520 + item.child = [{ id, type: 'STRING', pid, code, title: '' }];
520 521 }
521 522 } else {
522 523 if (item.child) {
... ... @@ -613,13 +614,32 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
613 614
614 615 // 渲染节点
615 616 const renderTitle = (nodeData: any) => {
  617 + let level = [];
  618 + const treeList = generateList(treeData);
  619 + const loop = (list: any[]) => {
  620 + if (!!list.pid) {
  621 + const index = treeList.findIndex((o: any) => o.id === list.pid);
  622 + level.push(treeList[index]);
  623 + loop(treeList[index]);
  624 + } else {
  625 + return level;
  626 + }
  627 + };
  628 + loop(nodeData);
  629 + const treeLevel2 = !!nodeData.pid ? level.length : 0;
  630 + const treeLevel = nodeData.child && nodeData.child.length > 0 ? 1 : 0;
  631 + const leftD = 22 + treeLevel * 22 + treeLevel2 * 24;
616 632 const strTitle = (nodeData.title as string) || '';
617 633 const index = strTitle.indexOf(searchValue);
618 634 const isShowTree = checkShowTree(nodeData);
619 635 const disabled = !!props.type ? true : nodeData.disabled;
620 636 return (
621 637 <div>
622   - <Icon component={SubDropIcon} className="drop-icon" />
  638 + <Icon
  639 + component={SubDropIcon}
  640 + className={`drop-icon`}
  641 + style={{ left: `-${leftD}px` }}
  642 + />
623 643 <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
624 644 <div
625 645 style={{
... ... @@ -650,15 +670,17 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
650 670 })}
651 671 </Select>
652 672 {(nodeData.type === 'OBJECT' || nodeData.type === 'ARRAY') &&
653   - isShowTree && (
654   - <Button
655   - icon={<Icon component={SubNodeIcon} />}
656   - disabled={disabled}
657   - type="link"
658   - className="title-btn"
659   - onClick={() => onAddTree(nodeData.id)}
660   - />
661   - )}
  673 + isShowTree ? (
  674 + <Button
  675 + icon={<Icon component={SubNodeIcon} />}
  676 + disabled={disabled}
  677 + type="link"
  678 + className="title-btn"
  679 + onClick={() => onAddTree(nodeData.id)}
  680 + />
  681 + ) : (
  682 + <div style={{ opacity: 0, height: 32, width: 32 }} />
  683 + )}
662 684 <Button
663 685 className="title-btn-del"
664 686 icon={
... ... @@ -674,7 +696,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
674 696 </div>
675 697 <div className="opt-left">
676 698 <Input
677   - className={index > -1 && searchValue ? 'search-selected' : ''}
  699 + status={!nodeData.title ? 'error' : ''}
  700 + placeholder={!nodeData.title ? '请输入参数名' : ''}
  701 + className={
  702 + index > -1 && searchValue ? 'search-selected' : 'sp-input'
  703 + }
678 704 draggable={true}
679 705 onDragStart={(event) => {
680 706 event.stopPropagation();
... ...
... ... @@ -32,15 +32,47 @@
32 32 margin-top: 20px;
33 33
34 34 .ant-tree .ant-tree-switcher {
35   - // margin-top: 6.5px;
36   - width: 34px;
  35 + // width: 34px;
  36 + margin-top: 11.5px;
  37 + display: flex;
  38 + // justify-content: flex-end;
  39 + }
  40 +
  41 + .ant-tree-switcher_open,
  42 + .ant-tree-switcher_close {
37 43 margin-top: 11.5px;
38 44 margin-right: 10px;
  45 + margin-left: 10px;
39 46 display: flex;
40 47 justify-content: flex-end;
41 48 }
  49 +
  50 + .drop-icon {
  51 + &-child {
  52 + left: -42px !important;
  53 + position: absolute;
  54 + top: 10px;
  55 + opacity: 1;
  56 + display: block;
  57 + }
  58 + }
42 59 }
43 60
  61 +// .ant-tree-treenode-leaf-last {
  62 +// .ant-tree-switcher {
  63 +// // width: 34px;
  64 +
  65 +// }
  66 +
  67 +// .drop-icon {
  68 +// position: absolute;
  69 +// top: 10px;
  70 +// left: -42px !important;
  71 +// opacity: 1;
  72 +// display: block;
  73 +// }
  74 +// }
  75 +
44 76 .border-none
45 77 .ant-select-focused:not(.ant-select-disabled).ant-select:not(
46 78 .ant-select-customize-input
... ... @@ -130,6 +162,12 @@
130 162 .ant-input-affix-wrapper {
131 163 border-color: @N4;
132 164 }
  165 +
  166 + .sp-input {
  167 + &::placeholder {
  168 + color: red !important;
  169 + }
  170 + }
133 171 }
134 172
135 173 .opt-left-down {
... ... @@ -270,7 +308,7 @@
270 308 .drop-icon {
271 309 position: absolute;
272 310 top: 10px;
273   - left: -46px;
  311 + left: -22px;
274 312 opacity: 1;
275 313 display: block;
276 314 }
... ... @@ -287,7 +325,7 @@
287 325 .drop-icon {
288 326 position: absolute;
289 327 top: 10px;
290   - left: -46px;
  328 + left: -22px;
291 329 opacity: 1;
292 330 display: block;
293 331 }
... ...