fix: 参数设计器样式修改，部分逻辑优化

邱嘉伟
1 parent f474161a
Showing 3 changed files with 83 additions and 67 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 @45b8a69
+++ b/src/qx-parameter-setting/ParameterModal.tsx
View file @45b8a69
@@ -40,7 +40,7 @@ import { cloneDeep, debounce, isEmpty } from 'lodash-es';
 import moment from 'dayjs';
 import { QxBaseIcon } from '@qx/common';
 import Icon from '@ant-design/icons';
-import {SubNodeIcon} from './sub-node-icon';
+import { SubNodeIcon } from './sub-node-icon';
 const valueOptions = [
   { key: 'STRING', title: '文本' },
@@ -124,7 +124,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     nodeType,
   } = props;
   // const [form] = Form.useForm()
-
   //判断数组是否只有一个子节点
   const checkShowAdd = (_data: any) => {
     const _newTreeData = cloneDeep(treeData);
@@ -238,6 +237,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       //   </Select>
       // </Form.Item>
     },
+    nodeType !== 'END' &&
     {
       title: '取值范围',
       dataIndex: 'qxProps',
@@ -269,6 +269,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
         )
       },
     },
+    nodeType !== 'END' &&
     {
       title: '必填',
       dataIndex: 'required',
@@ -702,10 +703,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
           /> */}
           <QxFieldSetter
             value={record.valuesObj || []}
-            // value={[{
-            //   type: typeTranslateItemtype(record.type) || '',
-            //   value: record?.qxProps?.default
-            // }]}
             params={{ appCode: 'appCode', useId: true }}
             valueOptions={getValueOptions(record)}
             field={record.type}
@@ -714,6 +711,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
             fieldGroupType={typeTranslateGrouptype(record.type)}
             isMixValue={typeTranslateFieIdtype(record.type) == 'STRING' ? true : false}
             isMultiple={false}
+            colsTree={props.nodeItem}
+            showFieldOpt={nodeType == 'START' ? false : true}
             onChange={debounce((val) => handleField(val), 700)}
           />
         </div>
@@ -1093,7 +1092,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
                 childrenColumnName: 'child'
               }}
               onRow={() => onRow()}
-              scroll={{ x: 1600 }}
+              scroll={{ x: 960 }}
               rowClassName={() => 'editable-row'}
               bordered
               pagination={false}
--- a/src/qx-parameter-setting/index.tsx
View file @45b8a69
+++ b/src/qx-parameter-setting/index.tsx
View file @45b8a69
@@ -31,7 +31,7 @@ import { QxFieldSetter, QxBaseIcon } from '@qx/common';
 import './style.less';
-import {SubNodeIcon} from './sub-node-icon';
+import { SubNodeIcon } from './sub-node-icon';
 const valueOptions = [
   { key: 'STRING', label: '文本' },
@@ -238,7 +238,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
         if (treeList[i].id == data.id) {
           if (isProps > -1) {
             if (code == 'qxProps') {
-              _qxProps = { ...data.qxProps, ...value }
+              _qxProps = value
             } else {
               _qxProps = { ...data.qxProps };
               _qxProps[_newCode] = value;
@@ -526,11 +526,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   };
   const changeField = (val: any, data: any) => {
-    if (!val || _.isEmpty(val)) {
+    if (!val || isEmpty(val)) {
       return;
     }
     const _newData = cloneDeep(treeData);
-    const _qxProps = {};
+    // const _qxProps = {};
     const loopChangeTree = (treeList: ParamDesignModel[]) => {
       for (let i = 0; i < treeList.length; i++) {
@@ -540,14 +540,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             item?.extVal ? item?.extVal : item?.value,
           );
           treeList[i].valuesObj = val;
-          if (!treeList[i].qxProps) {
-            treeList[i].qxProps = _qxProps;
-          }
-          if (data.type == 'TIME') {
-            treeList[i].qxProps.default = val[0]?.extVal || undefined;
-          } else {
-            treeList[i].qxProps.default = val[0].value || undefined;
-          }
+          // if (!treeList[i].qxProps) {
+          //   treeList[i].qxProps = _qxProps;
+          // }
+          // if (data.type == 'TIME') {
+          //   treeList[i].qxProps.default = val[0]?.extVal || undefined;
+          // } else {
+          //   treeList[i].qxProps.default = val[0].value || undefined;
+          // }
           return;
         } else if (!!treeList[i]?.child?.length) {
           loopChangeTree(treeList[i].child || []);
@@ -639,6 +639,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
           </div>
           <div className="opt-left">
             <Input
+              draggable={true}
+              onDragStart={(event) => {
+                event.stopPropagation();
+                event.preventDefault();
+              }}
               // ref={inputRef}
               key={inputKey}
               style={{ width: '100%' }}
@@ -658,12 +663,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             <QxFieldSetter
               disabled={disabled}
               value={nodeData.valuesObj || []}
-              // value={[
-              //   {
-              //     type: typeTranslateItemtype(nodeData.type),
-              //     value: nodeData?.qxProps?.default || '',
-              //   },
-              // ]}
               params={{ appCode: 'appCode', useId: true }}
               valueOptions={getValueOptions(nodeData)}
               field={nodeData.code}
@@ -708,7 +707,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
                 padding: '0 0 0 8px',
               }}
             >
-              <QxBaseIcon style={{fontSize: '16px'}} type={'qx-icon-plus'} />
+              <QxBaseIcon style={{ fontSize: '16px' }} type={'qx-icon-plus'} />
               添加参数
             </Button>
           </Dropdown>
@@ -722,7 +721,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
               openModal();
             }}
           >
-            <QxBaseIcon style={{fontSize: '16px'}} type={'icon-app-terminal-box-line'} />
+            <QxBaseIcon style={{ fontSize: '16px' }} type={'icon-app-terminal-box-line'} />
             高级设置
           </Button>
         </div>
--- a/src/qx-parameter-setting/style.less
View file @45b8a69
+++ b/src/qx-parameter-setting/style.less
View file @45b8a69
@@ -22,6 +22,18 @@
   }
 }
+// .tree-list {
+//   // padding-top: 6px;
+//   // display: inline-block;
+//   opacity: 0.5 ;
+// }
+
+.ant-tree-treenode-draggable .ant-tree-draggable-icon {
+  padding-top: 6px;
+  // display: none;
+  opacity: 1 !important;
+}
+
 .tree-wrapper {
   margin-top: 20px;
@@ -31,6 +43,12 @@
     &:hover {
       background-color: @N3;
+
+      .ant-tree-treenode-draggable .ant-tree-draggable-icon {
+        padding-top: 6px;
+        // display: none;
+        opacity: 1 !important;
+      }
     }
   }
@@ -183,62 +201,62 @@
 //   width: 85%;
 // }
-@keyframes title-btn-del {
-  0% {
-    opacity: 0;
-  }
+// @keyframes title-btn-del {
+//   0% { 
+//     opacity: 0;
+//   }
-  20% {
-    opacity: 0.3;
-  }
+//   20% {
+//     opacity: 0.3;
+//   }
-  50% {
-    opacity: 0.4;
-  }
+//   50% {
+//     opacity: 0.4;
+//   }
-  70% {
-    opacity: 0.6;
-  }
+//   70% {
+//     opacity: 0.6;
+//   }
-  100% {
-    opacity: 0.8;
-  }
-}
+//   100% {
+//     opacity: 0.8;
+//   }
+// }
-@keyframes title-btn {
-  0% {
-    opacity: 0;
-  }
+// @keyframes title-btn {
+//   0% {
+//     opacity: 0;
+//   }
-  20% {
-    opacity: 0.3;
-  }
+//   20% {
+//     opacity: 0.3;
+//   }
-  50% {
-    opacity: 0.4;
-  }
+//   50% {
+//     opacity: 0.4;
+//   }
-  70% {
-    opacity: 0.6;
-  }
+//   70% {
+//     opacity: 0.6;
+//   }
-  100% {
-    opacity: 0.8;
-  }
-}
+//   100% {
+//     opacity: 0.8;
+//   }
+// }
 .ant-tree-node-content-wrapper :hover .title-btn-del {
   display: block;
-  animation-name: title-btn-del;
-  animation-duration: 2s;
-  animation-iteration-count: 1;
+  // animation-name: title-btn-del;
+  // animation-duration: 2s;
+  // animation-iteration-count: 1;
 }
 .ant-tree-node-content-wrapper :hover .title-btn {
   display: block;
-  animation-name: title-btn-del;
-  animation-duration: 2s;
-  animation-iteration-count: 1;
+  // animation-name: title-btn-del;
+  // animation-duration: 2s;
+  // animation-iteration-count: 1;
 }
 .btn-high-del {