fix：样式+部分逻辑更新

邱嘉伟
1 parent 1142c2ad
Showing 4 changed files with 201 additions and 58 deletions
src/qx-parameter-setting/ParameterModal.tsx
src/qx-parameter-setting/index.md
src/qx-parameter-setting/index.tsx
src/qx-parameter-setting/style.less
--- a/src/qx-parameter-setting/ParameterModal.tsx
View file @99a689d
+++ b/src/qx-parameter-setting/ParameterModal.tsx
View file @99a689d
@@ -99,6 +99,49 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   const [searchValue, setSearchValue] = useState('');
   const [mExpandedKeys, setMExpandedKeys] = useState(expandedKeys);
   const [isExpand, setIsExpand] = useState(true);
+  const fixedElement = document.getElementById('fixed-element');
+  const fixedElement1 = document.querySelector('.ant-table-header');
+  // 获取元素距离顶部的距离
+  const fixedElementTop =
+    fixedElement1?.offsetTop < 100
+      ? 205
+      : fixedElement1?.offsetTop > 205
+      ? 205
+      : fixedElement1?.offsetTop;
+  // 获取元素的高度
+  if (document.querySelector('.ant-modal-body')) {
+    document.querySelector('.ant-modal-body').addEventListener('scroll', () => {
+      // console.log('scrollTop', document.querySelector('.ant-modal-body').scrollTop)
+
+      // 当页面滚动到固定位置时，将元素固定在指定位置
+      if (document.querySelector('.ant-modal-body').scrollTop > 0) {
+        if (!document.getElementById('mask')) {
+          const placeholder = document.createElement('div');
+          placeholder.id = 'mask';
+          placeholder.style.height = '90px';
+          fixedElement.parentNode.insertBefore(
+            placeholder,
+            fixedElement.nextSibling,
+          );
+        }
+        fixedElement.style.position = 'fixed';
+        fixedElement1.style.position = 'fixed';
+        fixedElement1.style.width = '1148px';
+        fixedElement1.style.zIndex = 19;
+        fixedElement1.style.top = `${fixedElementTop}px`;
+      } else {
+        if (!!document.getElementById('mask')) {
+          const mask = document.getElementById('mask');
+          mask.parentNode.removeChild(mask);
+        }
+        // 恢复元素的默认位置
+        fixedElement.style.position = 'relative';
+        fixedElement.style.top = 'auto';
+        fixedElement1.style.position = 'relative';
+        fixedElement1.style.top = 'auto';
+      }
+    });
+  }
   // const [form] = Form.useForm()
   //判断数组是否只有一个子节点
@@ -156,28 +199,31 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       ),
       dataIndex: 'code',
       className: 'ps-table-cell-header',
-      width: '190px',
+      width: '220px',
+      fixed: 'left',
       key: 'code',
       render: (text, record) => {
         const strTitle = (text as string) || '';
         const index = strTitle.indexOf(searchValue);
         return (
-          <Input
-            style={{
-              color: index > -1 && searchValue ? '#1890ff' : '',
-              maxWidth: '110px',
-              minWidth: '50px',
-            }}
-            draggable={true}
-            onDragStart={(event) => {
-              event.stopPropagation();
-              event.preventDefault();
-            }}
-            defaultValue={record.code}
-            bordered={false}
-            disabled={record.disabled || typeDis}
-            onBlur={(e) => handleChange(e, record, 'code')}
-          />
+          <>
+            <Input
+              style={{
+                color: index > -1 && searchValue ? '#1890ff' : '',
+                maxWidth: '110px',
+                minWidth: '50px',
+              }}
+              draggable={true}
+              onDragStart={(event) => {
+                event.stopPropagation();
+                event.preventDefault();
+              }}
+              defaultValue={record.code}
+              bordered={false}
+              disabled={record.disabled || typeDis}
+              onBlur={(e) => handleChange(e, record, 'code')}
+            />
+          </>
         );
       },
     },
@@ -190,6 +236,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       ),
       dataIndex: 'title',
       width: '120px',
+      fixed: 'left',
       className: 'ps-table-cell',
       key: 'title',
       render: (text, record) => {
@@ -224,6 +271,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       key: 'type',
       render: (text, record) => (
         <Select
+          style={{ width: '100%' }}
           bordered={false}
           disabled={record.disabled || typeDis}
           defaultValue={record.type}
@@ -313,7 +361,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       dataIndex: 'description',
       className: 'ps-table-cell',
       key: 'description',
-      width: '120px',
+      width: '122px',
       render: (text, record) => (
         <Input
           draggable={true}
@@ -338,6 +386,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       key: 'action',
       className: 'ps-table-cell',
       width: '110px',
+      fixed: 'right',
       render: (text, record) => {
         const isShowAdd = record && checkShowAdd(record);
         const isShowTree = record && checkShowTree(record);
@@ -594,8 +643,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     width: '86px',
     render: (text, record) => (
       <Select
+        style={{ width: '100%' }}
         defaultValue={text || false}
         bordered={false}
+        popupMatchSelectWidth
         disabled={record.disabled || typeDis}
         onSelect={(e) => props.handleChange(e, record, 'required')}
       >
@@ -615,6 +666,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   useEffect(() => {
     if (visible) {
+      handleDrop(treeData);
       if (data.length == 0) {
         handleAdd('');
       }
@@ -623,11 +675,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   useEffect(() => {
     setMExpandedKeys(expandedKeys);
-    // if (visible) {
-    //   if (data.length == 0) {
-    //     handleAdd('');
-    //   }
-    // }
   }, [expandedKeys]);
   useEffect(() => {
@@ -865,7 +912,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
               </Col>
             </Row>
           ) : (
-            <Row>
+            <Row
+              id="fixed-element"
+              style={{
+                zIndex: 18,
+                backgroundColor: '#fff',
+                height: '50px',
+                width: '1148px',
+              }}
+            >
               <Col span={12}>
                 <Button
                   size={'small'}
@@ -953,14 +1008,21 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
                     />
                   </>
                 ) : record.disabled ? (
-                  <></>
+                  <span
+                    style={{ width: '14px', display: 'inline-flex' }}
+                  ></span>
                 ) : (
-                  <Icon component={SubDropIcon} className="drop-icon" />
+                  <>
+                    <Icon component={SubDropIcon} className="drop-icon" />
+                    <span
+                      style={{ width: '14px', display: 'inline-flex' }}
+                    ></span>
+                  </>
                 ),
             }}
             className="parameter-setting-table"
             onRow={onRow}
-            scroll={{ y: 350 }}
+            scroll={{ y: 850 }}
             bordered
             pagination={false}
             size={'small'}
--- a/src/qx-parameter-setting/index.md
View file @99a689d
+++ b/src/qx-parameter-setting/index.md
View file @99a689d
@@ -15,7 +15,6 @@ Demo:
 import { QxParameterSetting, request } from '@qx/common';
 import { Input } from 'antd';
 import React, { useState } from 'react';
-import { node, nodes } from './mock-node';
 export default () => {
   const [value, setValue] = useState([
     {
@@ -185,11 +184,11 @@ export default () => {
         // nodeItem={nodeItem}
         // componentItem={componentItem}
         onChange={handleChange}
-        isHideSearch={isHide}
+        // isHideSearch={isHide}
         isShowField={true}
         // node={node}
         // nodes={nodes}
-        title={titleDom}
+        // title={titleDom}
         // type={'preview'}
         // component={QxTagsInput}
         request={request}
--- a/src/qx-parameter-setting/index.tsx
View file @99a689d
+++ b/src/qx-parameter-setting/index.tsx
View file @99a689d
@@ -29,8 +29,8 @@ import { uidGen } from './stringUtil';
 import './style.less';
-import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
 import { formatEnum } from '../constant';
+import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
 const valueOptions = [
   { key: 'STRING', label: '文本' },
   { key: 'NUMBER', label: '数字' },
@@ -214,7 +214,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   // @ts-ignore
   const handleChange = (e?: any, data?: any, code?: string) => {
-    console.log('handleChange');
     let value,
       oldValue,
       _qxProps = {};
@@ -239,7 +238,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       } else {
         value = null;
       }
-      console.log('value', value);
     }
     if (code == 'type') {
       if (data.child && data.child.length > 0) {
@@ -255,7 +253,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       data.code = value;
       const codeValid = validateCode(data);
       if (!codeValid) {
-        message.error('变量名不可重复');
+        message.error('参数编码不可重复');
         return;
       }
     }
@@ -538,6 +536,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   const onAddTree = (key: string) => {
     const id = uidGen();
     const code = uidGen(undefined, 6);
+    let level = [];
+    const treeList = generateList(treeData);
     function addNode(pid: string, data: any) {
       data.forEach((item) => {
@@ -555,8 +555,27 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       });
       return data;
     }
+
+    const loop = (pid: string) => {
+      if (!!pid) {
+        const index = treeList.findIndex((o: any) => o.id === pid);
+        level.push(treeList[index]);
+        loop(treeList[index].pid || '');
+      } else {
+        return level;
+      }
+    };
+
+    loop(key);
     const _treeData = JSON.parse(JSON.stringify(treeData));
-    const _treeDataNew = addNode(key, _treeData);
+    let _treeDataNew = _treeData;
+    // console.log('level', level)
+    if (!!level && level.length < 6) {
+      _treeDataNew = addNode(key, _treeData);
+    } else if (!!level && level.length > 5) {
+      message.error('子级最多只能有5层');
+      return;
+    }
     setInputKey(inputKey + 1);
     setTreeData(_treeDataNew);
     props?.onChange(_treeDataNew);
@@ -610,7 +629,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     if (!val || isEmpty(val)) {
       return;
     }
-    console.log('changeField', val);
+    // console.log('changeField', val);
     const _newData = cloneDeep(treeData);
     const loopChangeTree = (treeList: ParamDesignModel[]) => {
       let newMappingValues = [],
@@ -656,9 +675,9 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     // const test = document.getElementByClassName('ant-tree-node-content-wrapper')
     // console.log('test', test)
-    const treeLevel2 = !!nodeData.pid ? level.length : 0;
-    const treeLevel = nodeData.child && nodeData.child.length > 0 ? 1 : 0;
-    const leftD = 22 + treeLevel * 22 + treeLevel2 * 24;
+    const treeLevel2 = !!nodeData.pid ? level.length : 0; //判断是多少层的子级
+    const treeLevel = nodeData.child && nodeData.child.length > 0 ? 1 : 0; //判断是否有子级（是否有箭头）
+    const leftD = 22 + treeLevel * 22 + treeLevel2 * 20;
     const strTitle = (nodeData.title as string) || '';
     const index = strTitle.indexOf(searchValue);
     const isShowTree = checkShowTree(nodeData);
@@ -709,7 +728,9 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
                   onClick={() => onAddTree(nodeData.id)}
                 />
               ) : (
-                <div style={{ opacity: 0, height: 16, width: 16 }} />
+                <div
+                  style={{ opacity: 0, height: 16, width: 22, marginLeft: 8 }}
+                />
               )}
               <Button
                 className="title-btn-del"
@@ -823,7 +844,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
                   style={{ fontSize: '16px' }}
                   type={'qx-icon-plus'}
                 />
-                添加参数
+                <span style={{ marginInlineStart: '4px' }}>添加参数</span>
               </Button>
             </Dropdown>
           )}
@@ -841,7 +862,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
               style={{ fontSize: '16px' }}
               type={'icon-app-terminal-box-line'}
             />
-            高级设置
+            <span style={{ marginInlineStart: '4px' }}>高级设置</span>
           </Button>
         </div>
         {!props.isHideSearch && (
--- a/src/qx-parameter-setting/style.less
View file @99a689d
+++ b/src/qx-parameter-setting/style.less
View file @99a689d
@@ -36,7 +36,7 @@
     width: 0;
     margin-top: 11.5px;
     display: flex;
-    // justify-content: flex-end;
+    justify-content: center;
   }
   .ant-tree-switcher_open,
@@ -45,7 +45,6 @@
     margin-right: 10px;
     margin-left: 10px;
     display: flex;
-    justify-content: flex-end;
   }
   .drop-icon {
@@ -229,6 +228,8 @@
     margin: 0;
     .qx-field-setter {
+      border-color: #d9d9d9;
+
       .qx-tags-input {
         background-color: #fff;
       }
@@ -253,9 +254,16 @@
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: nowrap;
+  height: 30px;
   .ant-btn-default {
     border: 0;
+    background-color: transparent;
+    box-shadow: 0 0 0 0;
+  }
+
+  .ant-input-number-handler-wrap {
+    background: transparent;
   }
   .range-cell {
@@ -264,6 +272,12 @@
     flex-wrap: nowrap;
     flex-direction: row;
     align-items: center;
+
+    .ant-input-number {
+      align-items: center;
+      height: 100%;
+      display: flex;
+    }
   }
   .ant-input-affix-wrapper,
@@ -278,6 +292,7 @@
 .editable-cell-default {
   overflow: auto;
+  height: 30px;
   // overflow-x:hidden;
   // ::-webkit-scrollbar{
@@ -409,24 +424,40 @@
 .ant-table-body {
   .ps-table-cell {
     transition: all 0s ease !important;
+    padding: 4px 6px 4px 5px !important;
     .ant-select-selection-overflow {
       flex-wrap: nowrap;
     }
+    .ant-select-selector {
+      background-color: transparent !important;
+      height: 30px;
+    }
+
+    .qx-field-setter--disabled {
+      background-color: transparent !important;
+    }
+
     &:hover {
-      border: 1px solid @N6 !important;
-      box-shadow: 0 0 4px 0 @N6 !important;
+      outline: 1px solid @N6;
+      outline-offset: -1px;
     }
     &-header {
       transition: all 0s ease !important;
-      display: flex;
+      // display: flex;
       height: 41px !important;
+      padding: 4px 6px 4px 14px !important;
       &:hover {
-        border: 1px solid @N6 !important;
-        box-shadow: 0 0 4px 0 @N6 !important;
+        outline: 1px solid @N6;
+        outline-offset: -1px;
+        // outline-style: solid;
+        // outline-color: @N6;
+        // outline-width: thin;
+        // border: 1px solid @N6 !important;
+        // box-shadow: 0 0 4px 0 @N6 !important;
         // border-radius: 2px;
         .drop-icon {
           position: absolute;
@@ -436,18 +467,25 @@
           display: block;
         }
       }
+
+      &:focus-within {
+        z-index: 99999;
+        // border: 1px solid @B8 !important;
+        outline: 1px solid @B8;
+        outline-offset: -1px;
+        box-shadow: 0 0 4px 0 @B8 !important;
+        // border-radius: 2px;
+      }
     }
     &:focus-within {
-      border: 1px solid @B8 !important;
+      z-index: 10;
+      // border: 1px solid @B8 !important;
+      outline: 1px solid @B8;
+      outline-offset: -1px;
       box-shadow: 0 0 4px 0 @B8 !important;
       // border-radius: 2px;
     }
-
-    // display: flex;
-    // .title-btn{
-    //   color: @B8;
-    // }
   }
 }
@@ -468,6 +506,14 @@
       display: block;
     }
+    .ant-tree-indent-unit {
+      width: 20px;
+    }
+
+    .ant-tree-switcher-icon {
+      margin-right: 3px;
+    }
+
     &:hover {
       background-color: @N3 !important;
@@ -479,11 +525,16 @@
         // display: block;
       }
+      .ant-tree-switcher-icon {
+        margin-right: 0;
+      }
+
       .ant-tree-switcher {
         transition: all 0.2s ease;
         width: 24px !important;
         margin-top: 11.5px;
         display: flex;
+        justify-content: flex-end;
       }
       .title-btn-del,
@@ -498,6 +549,7 @@
     .ant-tree-node-content-wrapper {
       width: 100%;
+      padding-left: 0;
     }
   }
@@ -531,7 +583,7 @@
   .table-expanded {
     color: #7c7e86;
-    margin-left: 8px;
+    // margin-left: 8px;
     transition: transform 0.3s;
   }
@@ -545,17 +597,26 @@
 .parameter-setting-table .ant-table-cell {
   height: 40px;
-  padding: 4px 16px 4px 14px !important;
+  padding: 4px 6px 4px 5px;
 }
 .qx-parameter-setting__modal {
   .ant-modal-content {
     min-height: 400px;
     max-height: 600px;
+    padding-bottom: 24px;
     // padding-bottom: 24px !important;
   }
   .ant-modal-body {
-    overflow-y: hidden !important;
+    overflow-y: scroll !important;
+    padding: 0 18px 0 24px;
   }
 }
+
+.ant-table-body::-webkit-scrollbar {
+  width: 1px;
+  // position:absolute;
+  // right: 20px;
+  // display: none;
+}