fix :部分问题修复样式优化

邱嘉伟
1 parent c464b784
Showing 3 changed files with 125 additions and 53 deletions
src/qx-parameter-setting/ParameterModal.tsx
src/qx-parameter-setting/index.tsx
src/qx-parameter-setting/style.less
--- a/src/qx-parameter-setting/ParameterModal.tsx
View file @bb802ce
+++ b/src/qx-parameter-setting/ParameterModal.tsx
View file @bb802ce
@@ -93,10 +93,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     handleChangeField,
     inputKey,
     nodeType,
+    expandedKeys,
     type,
   } = props;
   const [searchValue, setSearchValue] = useState('');
-  const [defaultExpandedKeys, setDefaultExpandedKeys] = useState<React.Key[]>(); //树节点的id 有了则展开
   // const [form] = Form.useForm()
   //判断数组是否只有一个子节点
@@ -147,15 +147,19 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
         </div>
       ),
       dataIndex: 'code',
-      className: 'code-header',
-      width: '150px',
+      className: 'ps-table-cell-header',
+      width: '190px',
       key: 'code',
       render: (text, record) => {
         const strTitle = (text as string) || '';
         const index = strTitle.indexOf(searchValue);
         return (
           <Input
-            style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
+            style={{
+              color: index > -1 && searchValue ? '#1890ff' : '',
+              maxWidth: '110px',
+              minWidth: '50px',
+            }}
             draggable={true}
             onDragStart={(event) => {
               event.stopPropagation();
@@ -208,7 +212,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       ),
       dataIndex: 'type',
       className: 'ps-table-cell',
-      width: '95px',
+      width: '105px',
       key: 'type',
       render: (text, record) => (
         <Select
@@ -325,7 +329,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       ),
       key: 'action',
       className: 'ps-table-cell',
-      width: '96px',
+      width: '110px',
       render: (text, record) => {
         const isShowAdd = record && checkShowAdd(record);
         const isShowTree = record && checkShowTree(record);
@@ -615,7 +619,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     (value || []).map((_item: ParamDesignModel) => {
       expandedArray.push(_item.id);
     });
-    setDefaultExpandedKeys(expandedArray);
   }, [inputKey]);
   //展开 所有子节点
@@ -640,9 +643,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   );
   //每行拖拽渲染
-  const onRow = () => ({
-    draggable: true,
-    style: { cursor: 'move' },
+  const onRow = (record) => ({
+    draggable: !record.disabled,
+    style: { cursor: !record.disabled ? 'move' : '' },
     onDragStart: (ev: any) => {
       ev.persist();
       console.log('onDragStart', ev.target);
@@ -895,11 +898,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
             expandable={{
               defaultExpandAllRows: true,
               childrenColumnName: 'child',
-              expandedRowKeys: defaultExpandedKeys,
+              expandedRowKeys: expandedKeys,
               expandIcon: ({ expanded, onExpand, record }) =>
                 record.child && record.child.length > 0 && expanded ? (
                   <>
-                    <Icon component={SubDropIcon} className="drop-icon1" />
+                    <Icon component={SubDropIcon} className="drop-icon" />
                     <QxBaseIcon
                       className={'table-expanded'}
                       type={'qx-caret-down'}
@@ -908,15 +911,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
                   </>
                 ) : record.child && record.child.length > 0 && !expanded ? (
                   <>
-                    <Icon component={SubDropIcon} className="drop-icon1" />
+                    <Icon component={SubDropIcon} className="drop-icon" />
                     <QxBaseIcon
                       className={'table-expanded-change'}
                       type={'qx-caret-down'}
                       onClick={(e) => onExpand(record, e)}
                     />
                   </>
+                ) : record.disabled ? (
+                  <></>
                 ) : (
-                  <Icon component={SubDropIcon} className="drop-icon1" />
+                  <Icon component={SubDropIcon} className="drop-icon" />
                 ),
             }}
             className="parameter-setting-table"
--- a/src/qx-parameter-setting/index.tsx
View file @bb802ce
+++ b/src/qx-parameter-setting/index.tsx
View file @bb802ce
@@ -531,15 +531,16 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     setTimeout(() => {
       let myInput = document.getElementById(id);
       myInput.focus();
-    }, 0);
+    }, 100);
   };
   //增加子节点
   const onAddTree = (key: string) => {
+    const id = uidGen();
+    const code = uidGen(undefined, 6);
+
     function addNode(pid: string, data: any) {
       data.forEach((item) => {
-        const id = uidGen();
-        const code = uidGen(undefined, 6);
         if (item.id === pid) {
           if (item.child && item.child.length > 0) {
             item.child.push({ id, type: 'STRING', pid, code, title: '' });
@@ -559,6 +560,16 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     setInputKey(inputKey + 1);
     setTreeData(_treeDataNew);
     props?.onChange(_treeDataNew);
+    if (expandedKeys) {
+      setExpandedKeys([...expandedKeys, key]);
+    } else {
+      setExpandedKeys([key]);
+    }
+
+    setTimeout(() => {
+      let myInput = document.getElementById(id);
+      myInput.focus();
+    }, 100);
   };
   const onExpand = (newExpandedKeys: any) => {
@@ -714,29 +725,33 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
               />
             </div>
             <div className="opt-left">
-              <Input
-                id={nodeData.id}
-                ref={inputRef}
-                status={!nodeData.title ? 'error' : ''}
-                placeholder={!nodeData.title ? '请输入参数名' : ''}
-                className={
-                  index > -1 && searchValue ? 'search-selected' : 'title-input'
-                }
-                draggable={true}
-                onDragStart={(event) => {
-                  event.stopPropagation();
-                  event.preventDefault();
-                }}
-                key={inputKey}
-                style={{ width: '100%', borderRadius: '4px' }}
-                maxLength={50}
-                disabled={disabled}
-                bordered={true}
-                defaultValue={nodeData.title}
-                onBlur={(e) => {
-                  handleChange(e, nodeData, 'title');
-                }}
-              />
+              <span className="box-input">
+                <Input
+                  id={nodeData.id}
+                  ref={inputRef}
+                  status={!nodeData.title ? 'error' : ''}
+                  placeholder={!nodeData.title ? '请输入参数名' : ''}
+                  className={
+                    index > -1 && searchValue
+                      ? 'search-selected'
+                      : 'title-input'
+                  }
+                  draggable={true}
+                  onDragStart={(event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                  }}
+                  key={inputKey}
+                  style={{ width: '100%', borderRadius: '4px' }}
+                  maxLength={50}
+                  disabled={disabled}
+                  bordered={true}
+                  defaultValue={nodeData.title}
+                  onBlur={(e) => {
+                    handleChange(e, nodeData, 'title');
+                  }}
+                />
+              </span>
             </div>
           </div>
           {props?.isShowField && (
@@ -781,7 +796,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   const onSelect = (e: any) => {
     handleAdd('', e.key);
   };
-
   return (
     <div>
       <div className={'qx-parameter-setting-content'}>
@@ -859,8 +873,10 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
                 onDrop={onDrop}
                 draggable={{ icon: false }}
                 // draggable={!props.type}
-                blockNode
+                // blockNode
                 defaultExpandAll
+                checkStrictly
+                defaultExpandedKeys={defaultExpandedKeys}
                 expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
                 autoExpandParent={autoExpandParent}
                 onExpand={onExpand}
@@ -869,10 +885,10 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
           : null}
       </div>
       <ParameterModal
-        // nodeItem={props.nodeItem}
         inputKey={inputKey}
         treeData={list}
         data={treeData}
+        expandedKeys={expandedKeys}
         nodes={props.nodes}
         node={props.node}
         handleChangeField={changeField}
--- a/src/qx-parameter-setting/style.less
View file @bb802ce
+++ b/src/qx-parameter-setting/style.less
View file @bb802ce
@@ -32,7 +32,8 @@
   margin-top: 20px;
   .ant-tree .ant-tree-switcher {
-    // width: 34px;
+    transition: all 0.2s ease;
+    width: 0;
     margin-top: 11.5px;
     display: flex;
     // justify-content: flex-end;
@@ -155,7 +156,7 @@
   width: 100%;
   margin-top: 2px;
   margin-bottom: 2px;
-  overflow: hidden;
+  // overflow: hidden;
   text-overflow: ellipsis;
   transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
@@ -170,11 +171,26 @@
   .ant-input-status-error {
     &:focus-within {
       border: 1px solid @B8 !important;
-      box-shadow: 0 0 4px 0 #1764ff80;
+      box-shadow: 0 0 4px 0 @B8 !important;
+      // box-shadow: 0 0 0 2px rgba(15, 112, 121, 0.269);
+    }
+  }
+  .title-input {
+    &:focus-within {
+      // border: 1px solid @B8 !important;
+      box-shadow: 0 0 4px 0 @B8 !important;
       // box-shadow: 0 0 0 2px rgba(15, 112, 121, 0.269);
     }
   }
+
+  .box-input {
+    &:focus-within {
+      border-radius: 4px;
+      border-inline-end-width: 1px;
+      outline: 0;
+    }
+  }
 }
 .render-right__help {
@@ -377,22 +393,42 @@
   position: absolute;
   top: 10px;
   left: -22px;
-  opacity: 1;
+  opacity: 0.01;
   display: block;
 }
 .ant-table-body {
   .ps-table-cell {
-    transition: all 0.2s ease;
+    transition: all 0s ease !important;
     &:hover {
       border: 1px solid @N6 !important;
-      border-radius: 2px;
+      box-shadow: 0 0 4px 0 @N6 !important;
+    }
+
+    &-header {
+      transition: all 0s ease !important;
+      display: flex;
+      height: 41px !important;
+
+      &:hover {
+        border: 1px solid @N6 !important;
+        box-shadow: 0 0 4px 0 @N6 !important;
+        // border-radius: 2px;
+        .drop-icon {
+          position: absolute;
+          top: 13px;
+          left: 2px;
+          opacity: 1;
+          display: block;
+        }
+      }
     }
     &:focus-within {
-      border: 1px solid #1764ff !important;
-      border-radius: 2px;
+      border: 1px solid @B8 !important;
+      box-shadow: 0 0 4px 0 @B8 !important;
+      // border-radius: 2px;
     }
     // display: flex;
@@ -415,13 +451,28 @@
       position: absolute;
       top: 10px;
       left: -22px;
-      opacity: 1;
+      opacity: 0.01;
       display: block;
     }
     &:hover {
       background-color: @N3 !important;
+      .drop-icon {
+        // position: absolute;
+        // top: 10px;
+        // left: -22px;
+        opacity: 1;
+        // display: block;
+      }
+
+      .ant-tree-switcher {
+        transition: all 0.2s ease;
+        width: 24px !important;
+        margin-top: 11.5px;
+        display: flex;
+      }
+
       .title-btn-del,
       .title-btn {
         opacity: 1;
@@ -473,7 +524,7 @@
 .parameter-setting-table .ant-table-cell {
   height: 40px;
-  padding: 4px 16px 4px 4px !important;
+  padding: 4px 16px 4px 14px !important;
 }
 .qx-parameter-setting__modal {