Commit 0452cebaa796bf3a1c976595465e4ad0de051151

Authored by 邱嘉伟
1 parent 7979f2d6

fix: 子节点新增默认展开 样式优化

@@ -99,6 +99,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -99,6 +99,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
99 type, 99 type,
100 } = props; 100 } = props;
101 const [searchValue, setSearchValue] = useState(''); 101 const [searchValue, setSearchValue] = useState('');
  102 + const [defaultExpandedKeys, setDefaultExpandedKeys] = useState<React.Key[]>(); //树节点的id 有了则展开
102 103
103 // const [form] = Form.useForm() 104 // const [form] = Form.useForm()
104 //判断数组是否只有一个子节点 105 //判断数组是否只有一个子节点
@@ -600,6 +601,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -600,6 +601,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
600 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1'; 601 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
601 const [isShowJson, setIsShowJson] = useState<any>(false); 602 const [isShowJson, setIsShowJson] = useState<any>(false);
602 const [midData, setMidData] = useState<any>([]); 603 const [midData, setMidData] = useState<any>([]);
  604 +
603 useEffect(() => { 605 useEffect(() => {
604 if (visible) { 606 if (visible) {
605 if (data.length == 0) { 607 if (data.length == 0) {
@@ -608,6 +610,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -608,6 +610,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
608 } 610 }
609 }, [visible]); 611 }, [visible]);
610 612
  613 + useEffect(() => {
  614 + const value = cloneDeep(data);
  615 + const expandedArray: any = [];
  616 + (value || []).map((_item: ParamDesignModel) => {
  617 + expandedArray.push(_item.id);
  618 + });
  619 + setDefaultExpandedKeys(expandedArray);
  620 + }, [inputKey]);
  621 +
611 //展开 所有子节点 622 //展开 所有子节点
612 const generateTreeData = useCallback( 623 const generateTreeData = useCallback(
613 (_data: any[], _keywords?: string): any[] => { 624 (_data: any[], _keywords?: string): any[] => {
@@ -865,10 +876,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -865,10 +876,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
865 expandable={{ 876 expandable={{
866 defaultExpandAllRows: true, 877 defaultExpandAllRows: true,
867 childrenColumnName: 'child', 878 childrenColumnName: 'child',
  879 + expandedRowKeys: defaultExpandedKeys,
868 expandIcon: ({ expanded, onExpand, record }) => 880 expandIcon: ({ expanded, onExpand, record }) =>
869 record.child && record.child.length > 0 && expanded ? ( 881 record.child && record.child.length > 0 && expanded ? (
870 <> 882 <>
871 - <Icon component={SubDropIcon} className="drop-icon" /> 883 + <Icon component={SubDropIcon} className="drop-icon1" />
872 <QxBaseIcon 884 <QxBaseIcon
873 className={'table-expanded'} 885 className={'table-expanded'}
874 type={'qx-caret-down'} 886 type={'qx-caret-down'}
@@ -877,7 +889,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -877,7 +889,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
877 </> 889 </>
878 ) : record.child && record.child.length > 0 && !expanded ? ( 890 ) : record.child && record.child.length > 0 && !expanded ? (
879 <> 891 <>
880 - <Icon component={SubDropIcon} className="drop-icon" /> 892 + <Icon component={SubDropIcon} className="drop-icon1" />
881 <QxBaseIcon 893 <QxBaseIcon
882 className={'table-expanded-change'} 894 className={'table-expanded-change'}
883 type={'qx-caret-down'} 895 type={'qx-caret-down'}
@@ -885,12 +897,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -885,12 +897,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
885 /> 897 />
886 </> 898 </>
887 ) : ( 899 ) : (
888 - <Icon component={SubDropIcon} className="drop-icon" /> 900 + <Icon component={SubDropIcon} className="drop-icon1" />
889 ), 901 ),
890 }} 902 }}
891 className="parameter-setting-table" 903 className="parameter-setting-table"
892 onRow={onRow} 904 onRow={onRow}
893 - scroll={{ x: 1000, y: 432 }} 905 + scroll={{ x: 1000 }}
894 bordered 906 bordered
895 pagination={false} 907 pagination={false}
896 size={'small'} 908 size={'small'}
@@ -528,6 +528,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -528,6 +528,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
528 } 528 }
529 const _treeData = JSON.parse(JSON.stringify(treeData)); 529 const _treeData = JSON.parse(JSON.stringify(treeData));
530 const _treeDataNew = addNode(key, _treeData); 530 const _treeDataNew = addNode(key, _treeData);
  531 + setInputKey(inputKey + 1);
531 setTreeData(_treeDataNew); 532 setTreeData(_treeDataNew);
532 props?.onChange(_treeDataNew); 533 props?.onChange(_treeDataNew);
533 }; 534 };
@@ -802,6 +803,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -802,6 +803,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
802 draggable={{ icon: false }} 803 draggable={{ icon: false }}
803 // draggable={!props.type} 804 // draggable={!props.type}
804 blockNode 805 blockNode
  806 + defaultExpandAll
805 expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys} 807 expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
806 autoExpandParent={autoExpandParent} 808 autoExpandParent={autoExpandParent}
807 onExpand={onExpand} 809 onExpand={onExpand}
@@ -284,6 +284,14 @@ @@ -284,6 +284,14 @@
284 background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), 284 background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
285 padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); 285 padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
286 286
  287 + .drop-icon {
  288 + position: absolute;
  289 + top: 10px;
  290 + left: -46px;
  291 + opacity: 1;
  292 + display: block;
  293 + }
  294 +
287 &:hover { 295 &:hover {
288 background-color: @N3 !important; 296 background-color: @N3 !important;
289 297