Merge branch 'feature/dataflow' of http://gitlab.qgutech.com/tianqiang/qx-common…

… into feature/dataflow

Merge branch 'feature/dataflow' of http://gitlab.qgutech.com/tianqiang/qx-common…
… into feature/dataflow
qiang.tian
2 parents a4eadc5d a039f4f4
Showing 8 changed files with 247 additions and 109 deletions
src/qx-field/src/popover/checkbox.tsx
src/qx-field/src/popover/index.tsx
src/qx-input-select/styles.less
src/qx-parameter-setting/ParameterModal.tsx
src/qx-parameter-setting/index.md
src/qx-parameter-setting/index.tsx
src/qx-parameter-setting/style.less
src/qx-parameter-setting/sub-node-icon.tsx
--- a/src/qx-field/src/popover/checkbox.tsx
View file @e4b9848
+++ b/src/qx-field/src/popover/checkbox.tsx
View file @e4b9848
@@ -145,7 +145,7 @@ const QxCheckboxFieldPopover: React.FC<QxCheckboxFieldPopoverProp> = (props) => 
       }
       placement={'bottomRight'}
       trigger={props.disabled ? undefined : props.trigger || 'click'}
-      open={visible}
+      open={props.disabled ? false: visible}
       onOpenChange={(v) => {
         setVisible(v);
       }}
--- a/src/qx-field/src/popover/index.tsx
View file @e4b9848
+++ b/src/qx-field/src/popover/index.tsx
View file @e4b9848
@@ -269,7 +269,7 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
       content={fieldsPopContent()}
       placement={'bottomRight'}
       trigger={props.disabled ? undefined : props.trigger || 'click'}
-      open={visible}
+      open={props.disabled ? false : visible}
       onOpenChange={(v) => {
         if (!v) {
           setTimeout(() => {
--- a/src/qx-input-select/styles.less
View file @e4b9848
+++ b/src/qx-input-select/styles.less
View file @e4b9848
@@ -90,7 +90,7 @@
     line-height: 22px;
     margin: 0 4px;
     flex: 1;
-    color: @N7;
+    color: @N9;
     display: flex;
     align-items: center;
     overflow: hidden;
--- a/src/qx-parameter-setting/ParameterModal.tsx
View file @e4b9848
+++ b/src/qx-parameter-setting/ParameterModal.tsx
View file @e4b9848
@@ -39,6 +39,7 @@ import moment from 'dayjs';
 import { QxBaseIcon } from '@qx/common';
 import Icon from '@ant-design/icons';
 import { SubNodeIcon } from './sub-node-icon';
+import { SubDropIcon } from './sub-node-icon';
 import '../style/reset.less';
@@ -162,13 +163,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   const columns = [
     {
       title: (
-        <div style={{ display: 'flex', flexDirection: 'row' }}>
-          <span>参数编码</span>
+        <div style={{
+          display: 'flex', flexDirection: 'row'
+          , alignContent: 'center', flexWrap: 'wrap'
+        }}>
+          <span className='parameter-setting-table-title'>参数编码</span>
           <span style={{ color: 'red' }}>*</span>
         </div>
       ),
       dataIndex: 'code',
-      width: '150px',
+      className: 'code-header',
+      width: '200px',
       key: 'code',
       render: (text, record) => {
         const strTitle = (text as string) || '';
@@ -196,12 +201,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     {
       title: (
         <div style={{ display: 'flex', flexDirection: 'row' }}>
-          <span>参数名</span>
+          <span className='parameter-setting-table-title'>参数名</span>
           <span style={{ color: 'red' }}>*</span>
         </div>
       ),
       dataIndex: 'title',
       width: '112px',
+      className: 'ps-table-cell',
       key: 'title',
       render: (text, record) => {
         const strTitle = (record.title as string) || '';
@@ -229,11 +235,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     {
       title: (
         <div style={{ display: 'flex', flexDirection: 'row' }}>
-          <span>参数类型</span>
+          <span className='parameter-setting-table-title'>参数类型</span>
           <span style={{ color: 'red' }}>*</span>
         </div>
       ),
       dataIndex: 'type',
+      className: 'ps-table-cell',
       width: '102px',
       key: 'type',
       render: (text, record) =>
@@ -256,8 +263,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
         </Form.Item>
     },
     {
-      title: '默认值',
+      title: (
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <span className='parameter-setting-table-title'>默认值</span>
+        </div>
+      ),
       dataIndex: 'valueMapping',
+      className: 'ps-table-cell',
       width: '116px',
       key: 'valueMapping',
       render: (text, record) =>
@@ -282,8 +294,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
         </div>
     },
     {
-      title: '参数说明',
+      title:
+        (
+          <div style={{ display: 'flex', flexDirection: 'row' }}>
+            <span className='parameter-setting-table-title'>参数说明</span>
+          </div>
+        ),
       dataIndex: 'description',
+      className: 'ps-table-cell',
       key: 'description',
       width: '102px',
       render: (text, record) => (
@@ -306,8 +324,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       ),
     },
     {
-      title: '操作',
+      title:
+        (
+          <div style={{ display: 'flex', flexDirection: 'row' }}>
+            <span className='parameter-setting-table-title'>操作</span>
+          </div>
+        ),
       key: 'action',
+      className: 'ps-table-cell',
       width: '96px',
       render: (text, record) => {
         const isShowAdd = (record && checkShowAdd(record));
@@ -348,9 +372,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   ];
   const range = {
-    title: '取值范围',
+    title:
+      (
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <span className='parameter-setting-table-title'>取值范围</span>
+        </div>
+      ),
     dataIndex: 'qxProps',
-    editable: true,
+    className: 'ps-table-cell',
     width: '314px',
     key: 'qxProps',
     render: (qxProps: any, record: any) => {
@@ -548,11 +577,16 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   };
   const require = {
-    title: '必填',
+    title:
+      (
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <span className='parameter-setting-table-title'>必填</span>
+        </div>
+      ),
     dataIndex: 'required',
-    editable: true,
+    className: 'ps-table-cell',
     key: 'required',
-    width: '76px',
+    width: '86px',
     render: (text, record) => (
       <Form.Item
         name={'required' + record.id}
@@ -610,10 +644,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
   //每行拖拽渲染
   const onRow = () => ({
-    draggable: !type,
-    style: !type && { cursor: 'move' },
+    draggable: true,
+    style: { cursor: 'move' },
     onDragStart: (ev: any) => {
       ev.persist();
+      console.log('onDragStart', ev.target)
       ev.dataTransfer.effectAllowed = 'move';
       ev.dataTransfer.setData('text', ev.target.getAttribute('data-row-key'));
     },
@@ -676,6 +711,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       const dropIndex = _newTreeData.findIndex(
         (item: any) => item.id === dropId,
       ); // 要drop到目标的index
+      // console.log('dropId', dropId)
+      // console.log('dropCol', dropCol)
       if (dragIndex == dropIndex || !dragId || !dropId) {
         dropCol.childNodes.forEach((item: any) => (item.style.borderTop = ''));
         dropCol.parentNode.childNodes.forEach(
@@ -751,7 +788,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
         footer={null}
         // onOk={handleCancel}
         onCancel={onCancel}
-        width={960}
+        width={1200}
         wrapClassName={'qx-common__modal'}
         closeIcon={
           <QxBaseIcon
@@ -839,9 +876,29 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
               expandable={{
                 defaultExpandAllRows: true,
                 childrenColumnName: 'child',
+                expandIcon: ({ expanded, onExpand, record }) =>
+                  record.child && record.child.length > 0 && expanded ? (
+                    <>
+                      <Icon component={SubDropIcon}
+                        className='drop-icon' />
+                      <QxBaseIcon className={'table-expanded'} type={'qx-caret-down'} onClick={e => onExpand(record, e)} />
+                    </>
+
+                  ) : record.child && record.child.length > 0 && !expanded ?
+                    (
+                      <>
+                        <Icon component={SubDropIcon}
+                          className='drop-icon' />
+                        <QxBaseIcon className={'table-expanded-change'} type={'qx-caret-down'} onClick={e => onExpand(record, e)} />
+                      </>
+                    )
+                    :
+                    <Icon component={SubDropIcon}
+                      className='drop-icon' />
               }}
+              className='parameter-setting-table'
               onRow={() => onRow()}
-              scroll={{ x: 960, y: 432 }}
+              scroll={{ x: 1000, y: 432 }}
               bordered
               pagination={false}
               size={'small'}
--- a/src/qx-parameter-setting/index.md
View file @e4b9848
+++ b/src/qx-parameter-setting/index.md
View file @e4b9848
@@ -128,7 +128,7 @@ export default () => {
         isHideSearch={isHide}
         isShowField={true}
         title={titleDom}
-        type={'preview'}
+        // type={'preview'}
         // component={QxTagsInput}
         request={request}
         appId={'5ak3C213YQWEO6IYnIs'}
--- a/src/qx-parameter-setting/index.tsx
View file @e4b9848
+++ b/src/qx-parameter-setting/index.tsx
View file @e4b9848
@@ -37,6 +37,7 @@ type ValueOptionProps = {
 };
 import { SubNodeIcon } from './sub-node-icon';
+import { SubDropIcon } from './sub-node-icon';
 const valueOptions = [
   { key: 'STRING', label: '文本' },
@@ -630,95 +631,98 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     const isShowTree = checkShowTree(nodeData);
     const disabled = !!props.type ? true : nodeData.disabled;
     return (
-      <div
-        onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
+      <div>
+        <Icon component={SubDropIcon} 
+        className='drop-icon'/>
         <div
-          style={{
-            // padding: '2px',
-            justifyContent: 'flex-end',
-            display: 'flex',
-            width: '100%',
-            flexDirection: 'row-reverse',
-          }}
-        >
-          <div className={'opt-btn'}>
-            <Select
-              value={nodeData.type}
-              disabled={disabled}
-              className={'select-tree'}
-              bordered={false}
-              getPopupContainer={(triggerNode) => triggerNode}
-              onChange={(e: any) => {
-                handleChange(e, nodeData, 'type');
-              }}
-            >
-              {valueOptions.map((item) => {
-                return (
-                  <Select.Option key={item.key} value={item.key}>
-                    {item.label}
-                  </Select.Option>
-                );
-              })}
-            </Select>
-            {(nodeData.type === 'OBJECT' || nodeData.type === 'ARRAY') &&
-              isShowTree && (
-                <Button
-                  icon={<Icon component={SubNodeIcon} />}
-                  disabled={disabled}
-                  type="link"
-                  className="title-btn"
-                  onClick={() => onAddTree(nodeData.id)}
-                />
-              )}
-            <Button
-              className="title-btn-del"
-              icon={<QxBaseIcon className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
-              disabled={disabled}
-              type="link"
-              onClick={() => deleteParameter(nodeData)}
-            />
-          </div>
-          <div className="opt-left">
-            <Input
-              className={index > -1 && searchValue ? 'search-selected' : ''}
-              draggable={true}
-              onDragStart={(event) => {
-                event.stopPropagation();
-                event.preventDefault();
-              }}
-              key={inputKey}
-              style={{ width: '100%' }}
-              maxLength={50}
-              allowClear
-              disabled={disabled}
-              bordered={true}
-              defaultValue={nodeData.title}
-              onBlur={(e) => {
-                handleChange(e, nodeData, 'title');
-              }}
-            />
+          onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
+          <div
+            style={{
+              // padding: '2px',
+              justifyContent: 'flex-end',
+              display: 'flex',
+              width: '100%',
+              flexDirection: 'row-reverse',
+            }}
+          >
+            <div className={'opt-btn'}>
+              <Select
+                value={nodeData.type}
+                disabled={disabled}
+                className={'select-tree'}
+                bordered={false}
+                getPopupContainer={(triggerNode) => triggerNode}
+                onChange={(e: any) => {
+                  handleChange(e, nodeData, 'type');
+                }}
+              >
+                {valueOptions.map((item) => {
+                  return (
+                    <Select.Option key={item.key} value={item.key}>
+                      {item.label}
+                    </Select.Option>
+                  );
+                })}
+              </Select>
+              {(nodeData.type === 'OBJECT' || nodeData.type === 'ARRAY') &&
+                isShowTree && (
+                  <Button
+                    icon={<Icon component={SubNodeIcon} />}
+                    disabled={disabled}
+                    type="link"
+                    className="title-btn"
+                    onClick={() => onAddTree(nodeData.id)}
+                  />
+                )}
+              <Button
+                className="title-btn-del"
+                icon={<QxBaseIcon className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
+                disabled={disabled}
+                type="link"
+                onClick={() => deleteParameter(nodeData)}
+              />
+            </div>
+            <div className="opt-left">
+              <Input
+                className={index > -1 && searchValue ? 'search-selected' : ''}
+                draggable={true}
+                onDragStart={(event) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                }}
+                key={inputKey}
+                style={{ width: '100%' }}
+                maxLength={50}
+                disabled={disabled}
+                bordered={true}
+                defaultValue={nodeData.title}
+                onBlur={(e) => {
+                  handleChange(e, nodeData, 'title');
+                }}
+              />
+            </div>
           </div>
+          {props?.isShowField && (
+            <div className="opt-left-down">
+              <QxFieldSetter
+                disabled={disabled}
+                value={nodeData.valuesObj || []}
+                params={{ appCode: 'appCode', useId: true }}
+                valueOptions={getValueOptions(nodeData)}
+                field={nodeData.code}
+                widget={typeTranslateWidget(nodeData.type)}
+                fieldType={typeTranslateFieIdtype(nodeData.type)}
+                fieldGroupType={typeTranslateGrouptype(nodeData.type)}
+                isMixValue={typeTranslateFieIdtype(nodeData.type) == 'STRING' ? true : false}
+                colsTree={props.nodeItem}
+                isMultiple={false}
+                onChange={(val) => changeField(val, nodeData)}
+                popupOnBody={true}
+                inputDis={true}
+              />
+            </div>
+          )}
         </div>
-        {props?.isShowField && (
-          <div className="opt-left-down">
-            <QxFieldSetter
-              disabled={disabled}
-              value={nodeData.valuesObj || []}
-              params={{ appCode: 'appCode', useId: true }}
-              valueOptions={getValueOptions(nodeData)}
-              field={nodeData.code}
-              widget={typeTranslateWidget(nodeData.type)}
-              fieldType={typeTranslateFieIdtype(nodeData.type)}
-              fieldGroupType={typeTranslateGrouptype(nodeData.type)}
-              isMixValue={typeTranslateFieIdtype(nodeData.type) == 'STRING' ? true : false}
-              colsTree={props.nodeItem}
-              isMultiple={false}
-              onChange={(val) => changeField(val, nodeData)}
-              popupOnBody={true}
-              inputDis={true}
-            />
-          </div>
-        )}
       </div>
     );
   };
@@ -799,7 +803,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
               titleRender={(nodeData) => renderTitle(nodeData)}
               style={{ height: '100%' }}
               onDrop={onDrop}
-              draggable={!props.type}
+              draggable={{ icon: false }}
+              // draggable={!props.type}
               blockNode
               expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
               autoExpandParent={autoExpandParent}
--- a/src/qx-parameter-setting/style.less
View file @e4b9848
+++ b/src/qx-parameter-setting/style.less
View file @e4b9848
+/* stylelint-disable selector-class-pattern */
 @import '~@qx/ui/src/style/variable.less';
 /* stylelint-disable declaration-block-no-redundant-longhand-properties */
@@ -29,6 +30,15 @@
 .tree-wrapper {
   margin-top: 20px;
+
+  .ant-tree .ant-tree-switcher {
+  // margin-top: 6.5px;
+  width:44px;
+  margin-top: 11.5px;
+  margin-right: 7px;
+  display: flex;
+  justify-content: flex-end;
+  }
 }
 .border-none
@@ -258,6 +268,14 @@
     background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
     padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    .drop-icon{
+      // opacity: 0.1;
+      display: none;
+      // position: absolute;
+      // top: 10px;
+      // left: -49px;
+    }
+
     &:hover {
       background-color: @N3 !important;
@@ -266,6 +284,14 @@
         display: block;
       }
+      .drop-icon{
+        position: absolute;
+        top: 10px;
+        left: -39px;
+        opacity: 1;
+        display: block;
+      }
+
       .opt-left {
         width: 65%;
       }
@@ -285,3 +311,47 @@
     background-color: transparent;
   }
 }
+
+  .parameter-setting-table-title{
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 22px;
+    color: #7C7E86;
+    padding-left: 10px;
+  }
+
+  .parameter-setting-table{
+    .code-header{
+      display: flex;
+    }
+
+    .ant-table-tbody .ant-table-row{
+      .drop-icon{
+        opacity: 0.01;
+      }
+
+      &:hover {
+        .drop-icon{
+          opacity: 1;
+        }
+      }
+    }
+
+    .table-expanded{
+      color: #7C7E86;
+      margin-left: 8px;
+      transition: transform 0.3s; 
+    }
+
+    .table-expanded-change{
+      transform: rotate(-90deg);
+      color: #7C7E86;
+      margin-left: 8px;
+      transition: transform 0.3s; 
+    }
+  }
+
+  .parameter-setting-table .ant-table-cell{
+    height: 40px;
+    padding: 4px 16px 0 4px !important;
+  }
--- a/src/qx-parameter-setting/sub-node-icon.tsx
View file @e4b9848
+++ b/src/qx-parameter-setting/sub-node-icon.tsx
View file @e4b9848
 import React from 'react';
 export const SubNodeIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M6.333 5.333a1 1 0 0 0-1 1v3h-.667V2.667h10V1.333H1.333v1.334h2v6.666c0 .737.597 1.334 1.333 1.334h.667v3a1 1 0 0 0 1 1h7.333a1 1 0 0 0 1-1V6.333a1 1 0 0 0-1-1H6.333Zm.333 8V6.667h6.667v6.666H6.666Zm2.667-2.666h-2V9.333h2v-2h1.333v2h2v1.334h-2v2H9.333v-2Z" clip-rule="evenodd"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M6.333 5.333a1 1 0 0 0-1 1v3h-.667V2.667h10V1.333H1.333v1.334h2v6.666c0 .737.597 1.334 1.333 1.334h.667v3a1 1 0 0 0 1 1h7.333a1 1 0 0 0 1-1V6.333a1 1 0 0 0-1-1H6.333Zm.333 8V6.667h6.667v6.666H6.666Zm2.667-2.666h-2V9.333h2v-2h1.333v2h2v1.334h-2v2H9.333v-2Z" clip-rule="evenodd" /></svg>
+);
+
+export const SubDropIcon = () => (
+  <svg width="1em" height="1em" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H2V2H0V0ZM4 0H6V2H4V0ZM0 5H2V7H0V5ZM4 5H6V7H4V5ZM0 10H2V12H0V10ZM4 10H6V12H4V10Z" fill="#7C7E86" />
+  </svg>
 );