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

… into feature/dataflow

 {
   "name": "@qx/common",
-  "version": "3.0.0-alpha.17",
+  "version": "3.0.0-alpha.20",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -51,7 +51,8 @@
     "dayjs": "^1.11.9",
     "lodash-es": "^4.17.21",
     "rc-virtual-list": "^3.4.13",
-    "react-codemirror2": "^7.2.1"
+    "react-codemirror2": "^7.2.1",
+    "@qx/utils": "0.0.58"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",

@@ -63,64 +63,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
     }
   }, [riProps]);
 
-  // 另一种写法搜索，暂存，不要删除
-  // const filter = (word: string) => {
-  //   if (list) {
-  //     const _data = cloneDeep(list);
-  //     _data.forEach((it: Item) => {
-  //       it.deleted = !(it.name.indexOf(word) > -1);
-  //     });
-  //
-  //     setList(_data);
-  //   }
-  // };
-
-  // const handleChange = (_keyword: string) => {
-  //   filter(_keyword.trim());
-  // };
-
-  // const handleVisibleChange = (_visible: boolean) => {
-  //   setVisible(_visible);
-  // };
-
-  // const menus = () => {
-  //   return (
-  //       <div className={'qx-search-menus__wrap'}>
-  //         <Input
-  //             className={'qx-selector-sub-search'}
-  //             placeholder={'输入名称，回车搜索'}
-  //             allowClear
-  //             prefix={<QxBaseIcon type={'icon-app-search-line'} />}
-  //             onChange={(e) => {
-  //               handleChange(e.target.value);
-  //             }}
-  //         />
-  //         <div>
-  //           <Menu mode={'inline'} selectedKeys={riProps?.item?.code}>
-  //             {list && list.length > 0 ? (
-  //                 <>
-  //                   {list.map((it: any) => {
-  //                     return !it.deleted ? (
-  //                         <Menu.Item
-  //                             style={{ width: '100%' }}
-  //                             onClick={() => {
-  //                               riProps.onChange(it);
-  //                               setVisible(false);
-  //                             }}
-  //                             key={it.code}
-  //                         >
-  //                           {it.name}
-  //                         </Menu.Item>
-  //                     ) : null;
-  //                   })}
-  //                 </>
-  //             ) : null}
-  //           </Menu>
-  //         </div>
-  //       </div>
-  //   );
-  // };
-
   //搜索
   const filterOption = (input: string, option: any) =>
     (option?.name ?? '').toLowerCase().includes(input.toLowerCase());
@@ -137,22 +79,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
           placeholder={riProps.placeholder || '请选择数据源'}
           options={list}
           value={item?.code}
-          // 另一种样式
-          // options={list.filter((el: any)=> !el.deleted )}
-          // dropdownRender={(menu) =>(
-          //   <>
-          //     <Input
-          //       className={'qx-selector-sub-search'}
-          //       placeholder={'输入名称，回车搜索'}
-          //       allowClear
-          //       prefix={<QxBaseIcon type={'icon-app-search-line'} />}
-          //       onChange={(e) => {
-          //         handleChange(e.target.value);
-          //       }}
-          //     />
-          //     {menu}
-          //   </>
-          // )}
           onChange={(val) => {
             const _list = list.filter((el: any) => el.code === val);
             if (_list?.length) {
@@ -167,28 +93,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
             value: 'code',
           }}
         />
-        {/*<Popover*/}
-        {/*  content={menus}*/}
-        {/*  open={visible}*/}
-        {/*  trigger={'click'}*/}
-        {/*  onOpenChange={handleVisibleChange}*/}
-        {/*  placement="bottomLeft"*/}
-        {/*  overlayClassName={'qx-fg-select-overlay'}*/}
-        {/*  getPopupContainer={(triggerNode) => triggerNode}*/}
-        {/*>*/}
-        {/*  <div*/}
-        {/*    className={`ant-input qx-fr-input--fake select-source`}*/}
-        {/*  >*/}
-        {/*    <div>*/}
-        {/*      {item?.name ? (*/}
-        {/*        item.name*/}
-        {/*      ) : (*/}
-        {/*        <Text type="secondary">{riProps.placeholder}</Text>*/}
-        {/*      )}*/}
-        {/*    </div>*/}
-        {/*    <DownOutlined />*/}
-        {/*  </div>*/}
-        {/*</Popover>*/}
       </div>
     </>
   );
@@ -289,7 +193,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
       }
       // eslint-disable-next-line array-callback-return
       res.map((item: any) => {
-        if (item.code === _item['currentId']) {
+        if (item.code === _item.currentId) {
           item.name = item.name + '（本应用）';
         }
         if (item.code === _item['appId']) {
@@ -581,9 +485,3 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
     </>
   );
 };
-
-// type Item = {
-//   name: string;
-//   code?: string;
-//   deleted?: boolean;
-// };

@@ -173,9 +173,14 @@
   .qx-tags-input,
   .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector,
   .ant-input-number-disabled,
-  .ant-input-disabled {
+  .ant-input-disabled,
+  .qx-field-setter__fields-btn {
     background-color: @N2;
   }
+
+  .qx-field-setter__fields-btn:hover {
+    background-color: @N3;
+  }
 }
 
 .qx-field-setter--range {

@@ -59,6 +59,9 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
       setFields(_fields);
       setFilterFields(_fields);
       // setFieldFlatten(flatFields(_fields))
+    } else {
+      setFields([])
+      setFilterFields([])
     }
   }, [props.data]);
 

 ### 选择表单
 
+### 使用外部appId获取options
+
+```tsx
+import { request, QxFormSelect } from '@qx/common';
+import React, { useState } from 'react';
+
+export default () => {
+  const [value, setValue] = useState({
+    formId: 'PbOC6xBYOvZ1IB2mwUc',
+    appId: 'eSnLZ42R2TA5Z18dNsJ'
+  });
+  return (
+    <QxFormSelect
+      value={value}
+      onChange={(datasource) => {
+        console.log('datasource ===', datasource);
+        setValue(datasource);
+      }}
+      request={request}
+      appId={'C9QUrtTmcmDkvHMoOKI'}
+      disabled
+    />
+  );
+};
+```
+
 ### 外部传入options
 ```tsx
 import { request, QxFormSelect } from '@qx/common';
@@ -244,26 +270,4 @@ export default () => {
 };
 ```
 
-### 使用外部appId获取options
-
-```tsx
-import { request, QxFormSelect } from '@qx/common';
-import React, { useState } from 'react';
-
-export default () => {
-  const [value, setValue] = useState({});
-  return (
-    <QxFormSelect
-      optionId={'0lZK2gxUlpFD002WWKJ'}
-      value={value}
-      onChange={(datasource) => {
-        console.log(datasource, 'lllllll');
-        setValue(datasource);
-      }}
-      request={request}
-    />
-  );
-};
-```
-
 <API></API>

-import { BlockOutlined } from '@ant-design/icons';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import { useSetState } from 'ahooks';
 import { Button } from 'antd';
 import cls from 'classnames';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import { QxAppSelector } from '../qx-app-selector';
 import type { InputSelectProps } from '../qx-input-select';
 import { QxInputSelect } from '../qx-input-select';
+import {QxBaseIcon, QxAppSelector} from '@qx/common';
+
+import {getAppFromList, getFunInfo} from './service';
 
 import './styles.less';
-import {getAppFromList} from "./service";
 
 const prefix = 'qx-form-select';
 
@@ -30,14 +30,19 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
     visible: false,
     modalVisible: false,
   });
-
   const inputSelectRef = useRef<any>();
+  const [item, setItem] = useState<any>({});
+
 
   const handleChange = (val: any) => {
     if (!val?.code) return;
     function onOk() {
       if (val?.code) {
-        onChange?.(val);
+        onChange?.({
+          appId: val?.appId || appId,
+          formId: val.code,
+          isTree: val.extract?.isTree,
+        });
         setState({
           visible: false,
         });
@@ -53,70 +58,111 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
     });
   }, []);
 
+  useEffect(() => {
+    if (!value || !Object.keys(value || {})?.length || !value?.formId) {
+      return;
+    }
+
+    let _item: any = {};
+    options.map((it: any) => {
+      if (it.code === value?.formId) {
+        _item = {
+          flag: 'SINGLE',
+          appId: appId,
+          code: it.code,
+          name: it.name,
+        };
+      }
+    });
+
+    setItem(_item);
+    if (!_item?.code) {
+      getFunInfo(value?.formId).then((res: any) => {
+        if (!res) {
+          return;
+        }
+        setItem({
+          flag: 'SINGLE',
+          code: res.code,
+          appId: res?.extract?.appId,
+          name: res.name,
+        });
+      });
+    }
+  }, [JSON.stringify(value), JSON.stringify(options)]);
+
+
   return (
     <div className={cls(prefix, className)}>
-      <QxInputSelect
-        ref={inputSelectRef}
-        value={value?.name}
-        defaultValue={value?.name}
-        placeholder={placeholder || '请选择数据源'}
-        prefix={<BlockOutlined style={{ color: '#52c41a' }} />}
-        options={options}
-        onChange={handleChange}
-        dropdownProps={{
-          showSearch: true,
-          loading,
-          listHeight: 160,
-          renderBottom: (
-            <Button
-              className={`${prefix}__dropdown-bottom`}
-              type="link"
-              onClick={onOpenOther}
-            >
-              其他应用
-            </Button>
-          ),
-        }}
-        disabled={disabled}
-        popupOnBody={props?.popupOnBody}
-      />
-
-      {state.modalVisible ? (
-        <QxAppSelector
-          title={title || placeholder || '选择数据源'}
-          item={{
-            flag: 'SINGLE',
-            currentId: '',
-            appId: appId,
-          }}
+      {props?.preview ? <>
+        {item?.name}
+      </> : <>
+        <QxInputSelect
+          ref={inputSelectRef}
+          value={item?.name}
+          defaultValue={item?.name}
+          placeholder={placeholder || '请选择数据源'}
+          prefix={<QxBaseIcon className={`${prefix}__input-prefix`} type={'icon-field-rel'} />}
+          options={options}
           onChange={handleChange}
-          flag="join"
-          showTableTypeTab={false}
-          modalProps={{
-            width: 550,
-            destroyOnClose: true,
-            open: state.modalVisible,
-            onOk: () => setState({ modalVisible: false }),
-            onCancel: () => setState({ modalVisible: false }),
+          dropdownProps={{
+            showSearch: true,
+            loading,
+            renderBottom: (
+              <Button
+                className={`${prefix}__dropdown-bottom`}
+                type="link"
+                onClick={onOpenOther}
+              >
+                其他应用
+              </Button>
+            ),
           }}
-          request={request}
+          disabled={disabled}
+          popupOnBody={props?.popupOnBody}
         />
-      ) : null}
+
+        {state.modalVisible ? (
+          <QxAppSelector
+            title={title || placeholder || '选择数据源'}
+            item={{
+              ...item,
+              currentId: appId,
+            }}
+            onChange={handleChange}
+            flag="join"
+            showTableTypeTab={false}
+            modalProps={{
+              width: 480,
+              destroyOnClose: true,
+              open: state.modalVisible,
+              onOk: () => setState({ modalVisible: false }),
+              onCancel: () => setState({ modalVisible: false }),
+            }}
+            request={request}
+          />
+        ) : null}
+      </>}
     </div>
   );
 }
 
 /**
  * 选择数据源
+ * TODO 当前只支持表单选择 聚合表选择待开发
  */
 export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
-  const { options= [] as any , optionId } = props;
+  const {
+    options = [] as any,
+    appId,
+    value,
+  } = props;
+
   const [selectOptions, setSelectOptions] = useState([])
 
   useEffect(() => {
-	  console.log(optionId,'llllloptions')
-    if(optionId && !options?.length) {
-      getAppFromList(optionId).then((res: any)=> {
+    if(appId && !options?.length) {
+      getAppFromList(appId).then((res: any)=> {
         if(res?.length){
           setSelectOptions(res)
         } else {
@@ -128,7 +174,8 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
     } else {
       setSelectOptions(options)
     }
-  }, []);
+  }, [JSON.stringify(options), appId]);
+
 
   return <FormSelectMain {...props} options={selectOptions}/>
 };
@@ -136,11 +183,11 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
 interface FormSelectProps extends InputSelectProps {
   value?: any;
   loading?: boolean;
-  appId?: string;
+  appId?: string; // 当前应用ID
   request?: any;
   disabled?: boolean;
   popupOnBody?: boolean;
-  optionId?: string; // 获取options传入表单的appId
+  preview?: boolean;
 }
 interface FormSelectState {
   visible: boolean;

@@ -6,3 +6,10 @@ import { request } from '@qx/common';
 export function getAppFromList(appId: string) {
   return request.get(`/qx-apaas-lowcode/app/${appId}/option`);
 }
+
+/**
+ * 根据表单ID获取详细信息
+ */
+export function getFunInfo(funId: string) {
+  return request.get(`/qx-apaas-lowcode/app/form/${funId}`);
+}

@@ -5,27 +5,18 @@
   border-radius: 4px;
 
   &__dropdown-bottom {
-    width: calc(100% - 20px) !important;
-    height: 50px !important;
+    width: 100%;
+    height: 48px !important;
     text-align: left !important;
     background-color: #fff !important;
+    border: none;
     border-top: 1px solid @N4 !important;
+    border-radius: 0;
+    box-sizing: border-box;
   }
-  .qx-input-select-dropdown__list {
-    max-height: 160px;
-    min-height: unset;
-    height: unset !important;
-    .ant-dropdown-menu {
-      box-shadow: none;
-    }
-    .qx-input-select-dropdown__list-empty {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      overflow: hidden;
-      height: 100px;
-      margin: 0;
-    }
+
+  &__input-prefix {
+    color: @N6;
+    font-size: 16px;
   }
 }

@@ -36,7 +36,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
       showSearch = false,
       onSearch: parentSearch,
       placeholder,
-      listHeight = 260,
+      listHeight = 192,
       loading,
     } = props;
 
@@ -49,7 +49,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
 
     const computedOptions = useMemo(
       () =>
-        options?.map((opt) => ({
+        options?.map((opt: any) => ({
           label: opt[fieldLabel],
           key: opt[fieldValue],
           ...(opt['extract']? {extract: opt['extract']}: {})
@@ -119,6 +119,8 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
             prefix={<QxBaseIcon type={'icon-app-search-line'} />}
             className={`${prefix}__input`}
             onChange={onSearch}
+            bordered={false}
+            size={'small'}
           />
         ) : null}
 
@@ -128,7 +130,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
           <div
             ref={ref}
             className={`${prefix}__list`}
-            style={{ height: listHeight }}
+            style={{ maxHeight: listHeight }}
           >
             {isEmpty ? (
               <Empty
@@ -159,8 +161,11 @@ interface FieldNames {
 }
 
 export interface DropdownContentOptions {
-  name: string | React.ReactNode;
-  code: string | number;
+  name?: string | React.ReactNode;
+  code?: string | number;
+  appId?: string;
+  formId?: string | number;
+  isTree?: boolean;
 }
 
 export interface DropdownContentProps {

@@ -6,21 +6,29 @@
   &-dropdown {
     position: relative;
     width: 100%;
-    padding: 10px 10px 50px;
+    padding: 0 0 48px 0;
+    border-radius: 4px;
     overflow: hidden;
     background-color: #fff;
     box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 12%),
       0 6px 16px 0 rgba(0, 0, 0, 8%), 0 9px 28px 8px rgba(0, 0, 0, 5%);
 
     &__list {
-      min-height: 150px;
-      max-height: 260px;
+      max-height: 192px;
       margin-top: 5px;
       overflow-y: auto;
+      .ant-dropdown-menu {
+        box-shadow: none;
+      }
     }
 
     &__list-empty {
-      margin-top: 15%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      overflow: hidden;
+      height: 100px;
     }
 
     &__list-content {
@@ -44,37 +52,20 @@
     }
 
     &__input {
-      :global {
-        .anticon {
-          padding: 0 5px;
-          color: silver;
-        }
-      }
-
-      padding-bottom: 5px !important;
-      padding-left: 0 !important;
-      border: none !important;
+      height: 32px;
       border-bottom: 1px solid @N4 !important;
-      outline: none !important;
-      box-shadow: none !important;
 
-      &:hover,
-      &:focus,
-      &:active {
-        border-color: @B8;
-      }
-    }
-  }
-
-  &__input {
-    :global {
-      input {
-        cursor: default;
+      .anticon {
+        margin-right: 4px;
+        font-size: 16px;
+        color: @N6;
       }
     }
   }
+}
 
-  &__input-suffix {
-    color: silver;
+.qx-input-select__input {
+  .qx-input-select__input-suffix {
+    color: @N6;
   }
 }

@@ -83,9 +83,9 @@ interface ParameterSettingProps {
   handleAddTree: (val: any) => void;
   handleAdd: (val: any) => void;
   handleDelete: (val: any) => void;
-  appFormList?: any[]; // 当前应用表单list
   request?: any;
   nodeType?: string | 'START' | 'END';
+  appId?: string; // 当前应用ID
 }
 const EditableContext = React.createContext<FormInstance<any> | null>(null);
 
@@ -244,38 +244,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     },
     {
       title: '默认值',
-      dataIndex: 'mappingValues',
+      dataIndex: 'valueMapping',
       width: '15%',
       editable: true,
-      key: 'mappingValues',
+      key: 'valueMapping',
       render: (text) =>
-        text || [].map((item) => {
-          // if (item.indexOf('-') > -1) {
-          // if (text == item.key) {
+        text?.mappingValues || [].map((item) => {
           return <span key={item}>{item.indexOf('-') > -1 ? item : ''}</span>;
-          // }
         }),
-      // }
-
-      // }
-      // )
-      // text || [].map((item ) => {
-      //   return console.log('123', item.indexOf('-'))
-      //   if (item.indexOf('-') > -1) {
-
-      //     <span key={item.type + record.id}>{item.value}</span>;
-      //   }
-      // }),
-      // console.log('text', text)
-      // <span key={record.id}>{text?.default}</span>
-
-      // <Form.Item
-      //   name={'default' + record.id}
-      //   initialValue={text?.default}
-      // >
-      //   <Input disabled={record.disabled} onBlur={(e) => props.handleChange(e, record, 'qxProps-default')} />
-      // </Form.Item>
-      // ),
     },
     {
       title: '参数说明',
@@ -284,14 +260,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       key: 'description',
       render: (text, record) => (
         <span key={record.id}>{text}</span>
-        //   <span key={record.id}>{text?.remark}</span>
-
-        //   //   <Form.Item
-        //   //     name={'remark' + record.id}
-        //   //     initialValue={text?.remark}
-        //   //   >
-        //   //     <Input disabled={record.disabled} onBlur={(e) => props.handleChange(e, record, 'qxProps-remark')} />
-        //   //   </Form.Item>
       ),
     },
     {
@@ -342,29 +310,44 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     editable: true,
     key: 'qxProps',
     render: (text: any, record: any) => {
-      return (
-        <>
-          {record.type === 'FORM' ? <>
-            <div key={record.id}>
-              <span>
-                {text?.name}
-              </span>
+      switch (record.type) {
+        case 'FORM':
+        case 'USER':
+        case 'ORG':
+          return (
+            <div
+              key={record.id}
+            >
+              <QxFormSelect
+                value={record?.qxProps || {}}
+                appId={props?.appId}
+                placeholder={'选择表单'}
+                popupOnBody={true}
+                onChange={(val: any) => {
+                  props.handleChange(val, record, 'qxProps');
+                }}
+                request={props?.request}
+                preview
+              />
             </div>
-          </> : <>
-            <div key={record.id}>
+          );
+        default:
+          return (
+            <>
+              <div key={record.id}>
               <span>{record.type == 'TIME' ? text?.min ? moment(text.min).format(
                 formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.min}
               </span>
-              {!!text?.min || text?.min >= 0 && (
-                <Space style={{ marginLeft: 5, marginRight: 5 }}>-</Space>
-              )}
-              <span>{record.type == 'TIME' ? text?.max ? moment(text.max).format(
-                formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.max}
+                {!!text?.min || text?.min >= 0 && (
+                  <Space style={{marginLeft: 5, marginRight: 5}}>-</Space>
+                )}
+                <span>{record.type == 'TIME' ? text?.max ? moment(text.max).format(
+                  formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.max}
               </span>
-            </div>
-          </>}
-        </>
-      )
+              </div>
+            </>
+          )
+      }
     },
   };
 
@@ -454,12 +437,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       // }
     };
 
-    const toggleEdit1 = (e) => {
+    const toggleEdit1 = (e: any) => {
       const values = form.getFieldsValue();
       e.persist();
       if (e.target.tagName == 'DIV') {
         setCurrentNode(e.target)
-        // console.log('values', values)
         setEditing(!editing);
         if (currentNode) {
           props.handleChange(values?.newQxProps, record, 'qxProps')
@@ -491,6 +473,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     //     message: `不能为空!`,
     //   },] : []
 
+    // 高级设置 取值范围
     const qxPropsRange = useCallback(() => {
       switch (record.type) {
         case 'STRING':
@@ -665,7 +648,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
             </div>
           );
         case 'FORM':
-          console.log('FORM ====', '数据变化');
+        case 'USER':
+        case 'ORG':
           return (
             <div
               key={record.id}
@@ -678,13 +662,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
             >
               <QxFormSelect
                 value={qxProps}
-                request={props?.request}
-                options={props?.appFormList}
+                appId={props?.appId}
                 placeholder={'选择表单'}
                 popupOnBody={true}
                 onChange={(val: any) => {
                   props.handleChange(val, record, 'qxProps');
                 }}
+                disabled={['USER', 'ORG'].includes(record.type)}
+                request={props?.request}
               />
             </div>
           );
@@ -803,7 +788,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
             ) : (
               qxPropsRemark()
             )
-          ) : dataIndex == 'mappingValues' ?
+          ) : dataIndex == 'valueMapping' ?
             qxPropsDefault() :
             (
               // @ts-ignore

@@ -119,8 +119,7 @@ export default () => {
         title={titleDom}
         // component={QxTagsInput}
         request={request}
-        appFormList={appFormList}
-        nodeType={'END'}
+        appId={'5ak3C213YQWEO6IYnIs'}
       />
     </div>
   );

@@ -45,13 +45,35 @@ const valueOptions = [
   { key: 'BOOL', label: '布尔' },
   { key: 'OBJECT', label: '对象' },
   { key: 'ARRAY', label: '数组' },
-/*  { key: 'ANNEX', label: '附件' },
-  { key: 'PIC', label: '图片' },*/
+  /*  { key: 'ANNEX', label: '附件' },
+    { key: 'PIC', label: '图片' },*/
   { key: 'FORM', label: '表单' },
   { key: 'USER', label: '人员' },
   { key: 'ORG', label: '部门' },
 ];
 
+const getDefaultQxProps = (type: string) => {
+  let _qxProps: any;
+  switch (type) {
+    case 'USER':
+      _qxProps = {
+        formId: 'PbOC6xBYOvZ1IB2mwUc',
+        appId: 'eSnLZ42R2TA5Z18dNsJ',
+      };
+      break;
+    case 'ORG':
+      _qxProps = {
+        formId: 'UsoOGnrJLPziSQwGDwj',
+        appId: 'eSnLZ42R2TA5Z18dNsJ',
+      };
+      break;
+    default:
+      _qxProps = {};
+      break;
+  }
+  return _qxProps;
+}
+
 const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => {
   let parentKey: React.Key;
   for (let i = 0; i < tree.length; i++) {
@@ -77,7 +99,7 @@ interface ParameterSettingProps {
   // component?: any;
   // componentItem?: any;
   // comHandleChange?: (val: any) => void;
-  appFormList?: any[]; // 当前应用表单list
+  appId?: string; // 当前应用ID
   request?: any,
   nodeType?: string | 'START' | 'END';
 }
@@ -243,15 +265,17 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
         if (treeList[i].id == data.id) {
           if (isProps > -1) {
             if (code == 'qxProps') {
-              _qxProps = value
+              _qxProps = value;
             } else {
               _qxProps = { ...data.qxProps };
               _qxProps[_newCode] = value;
             }
-            treeList[i].qxProps = _qxProps;
+            treeList[i].qxProps = {
+              ..._qxProps
+            };
           } else {
             if (code == 'type') {
-              treeList[i].qxProps = {};
+              treeList[i].qxProps = getDefaultQxProps(value);
             }
             treeList[i][code] = value;
           }
@@ -262,6 +286,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       }
     };
     loopChangeTree(_newData);
+    console.log('_newData ===', _newData);
     setTreeData(_newData);
     if (oldValue) {
       setInputKey(inputKey + 1);
@@ -427,6 +452,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     const _treeData = [...treeData];
     const id = uidGen();
     const code = uidGen(undefined, 6);
+
     // @ts-ignore
     const loopAddTree = (treeList: any[]) => {
       for (let i = 0; i < treeList.length; i++) {
@@ -437,6 +463,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
             type: _type,
             pid: _pid,
             title: code,
+            qxProps: getDefaultQxProps(_type)
           });
           return;
         } else if (treeList[i].child) {
@@ -446,7 +473,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     };
 
     if (!_pid) {
-      _treeData.push({ id, code, type: _type, title: code });
+      _treeData.push({ id, code, type: _type, title: code, qxProps: getDefaultQxProps(_type) });
     } else {
       loopAddTree(_treeData);
     }
@@ -531,7 +558,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   };
 
   const changeField = (val: any, data: any) => {
-    console.log('changeField', val)
     if (!val || isEmpty(val)) {
       return;
     }
@@ -539,12 +565,16 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     // const _qxProps = {};
 
     const loopChangeTree = (treeList: ParamDesignModel[]) => {
+      let newMappingValues = [];
       for (let i = 0; i < treeList.length; i++) {
         if (treeList[i].id == data.id) {
-
-          treeList[i].mappingValues = val.map((item: any) =>
+          newMappingValues = val.map((item: any) =>
             item?.extVal ? item?.extVal : item?.value,
           );
+          treeList[i].valueMapping = {
+            ...data.valueMapping,
+            mappingValues: newMappingValues
+          }
           treeList[i].valuesObj = val;
           // if (!treeList[i].qxProps) {
           //   treeList[i].qxProps = _qxProps;
@@ -599,7 +629,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
         <div
           style={{
-            padding: '2px',
+            // padding: '2px',
             justifyContent: 'flex-end',
             display: 'flex',
             width: '100%',
@@ -751,8 +781,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
           ? treeData?.length > 0 &&
           defaultExpandedKeys && (
             <Tree
-              // className={'tree-list'}
-              // rootClassName={'tree-list'}
+              rootClassName={'qx-parameter-tree-list'}
               treeData={treeData || []}
               fieldNames={{
                 title: 'label',
@@ -785,7 +814,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
         handleAddTree={onAddTree}
         visible={visible}
         request={props?.request}
-        appFormList={props?.appFormList}
+        appId={props?.appId}
         nodeType={props?.nodeType}
       />
     </div>

@@ -15,50 +15,20 @@
   align-items: center;
 
   .header-title {
-    overflow:hidden;
+    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    -o-text-overflow:ellipsis;
+    -o-text-overflow: ellipsis;
   }
 }
 
-// .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;
-
-  .ant-tree-treenode {
-    padding-top: 4px !important;
-    border-radius: 4px;
-
-    &:hover {
-      background-color: @N3;
-
-      .ant-tree-treenode-draggable .ant-tree-draggable-icon {
-        padding-top: 6px;
-        // display: none;
-        opacity: 1 !important;
-      }
-    }
-  }
-
-  .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
-    background-color: transparent;
-  }
-
-  .ant-tree .ant-tree-node-content-wrapper:hover {
-    background-color: transparent;
-  }
 }
 
 .border-none
@@ -140,16 +110,13 @@
 
 .opt-left {
   display: flex;
-  // transition: all 0.5s ease-in-out;
   align-items: center;
-  // -webkit-transition: width .4s;
-  // transition: width .4s;
   width: 100%;
   margin-top: 2px;
-  // min-width: 100px;
   margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: width .3s cubic-bezier(.2, 0, 0, 1) 0s;
 
   .ant-input-affix-wrapper {
     border-color: @N4;
@@ -158,12 +125,8 @@
 
 .opt-left-down {
   display: flex;
-  // transition: all 0.5s ease-in-out;
-  // -webkit-transition: width .4s;
-  // transition: width .4s;
   align-items: center;
   width: 100%;
-  // min-width: 100px;
   margin-top: 2px;
   margin-bottom: 2px;
   overflow: hidden;
@@ -172,93 +135,6 @@
   border-radius: 4px;
 }
 
-// .ant-tree-node-content-wrapper :hover .select-tree {
-//   // display: none;
-//   // padding: 2px;
-//   // fle
-//   height: 90%;
-//   border-radius: 3px;
-//   background-color: #fff;
-// }
-
-.ant-tree-node-content-wrapper :hover .opt-left {
-  width: 65%;
-  // height: 100%;
-  // transform: scale(0.5) translate(-25%, -25%)
-}
-
-// .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected .opt-left {
-//   // height: 100%;
-//   width: 65%;
-//   // transform: scale(0.5) translate(-25%, -25%)
-// }
-
-.ant-tree-node-content-wrapper :hover .opt-left-down {
-  width: 85%;
-}
-
-// .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected .opt-left-down {
-//   width: 85%;
-// }
-
-// @keyframes title-btn-del {
-//   0% { 
-//     opacity: 0;
-//   }
-
-//   20% {
-//     opacity: 0.3;
-//   }
-
-//   50% {
-//     opacity: 0.4;
-//   }
-
-//   70% {
-//     opacity: 0.6;
-//   }
-
-//   100% {
-//     opacity: 0.8;
-//   }
-// }
-
-// @keyframes title-btn {
-//   0% {
-//     opacity: 0;
-//   }
-
-//   20% {
-//     opacity: 0.3;
-//   }
-
-//   50% {
-//     opacity: 0.4;
-//   }
-
-//   70% {
-//     opacity: 0.6;
-//   }
-
-//   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;
-}
-
-.ant-tree-node-content-wrapper :hover .title-btn {
-  display: block;
-  // animation-name: title-btn-del;
-  // animation-duration: 2s;
-  // animation-iteration-count: 1;
-}
-
 .btn-high-del {
   &:hover {
     color: @E3 !important;
@@ -361,3 +237,40 @@
     color: @N6;
   }
 }
+
+.qx-parameter-tree-list .ant-tree-list {
+  .ant-tree-treenode {
+    background-color: transparent !important;
+    padding-top: 4px !important;
+    border-radius: 4px;
+    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+    background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+    padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &:hover {
+      background-color: @N3 !important;
+
+      .title-btn-del,
+      .title-btn {
+        display: block;
+      }
+
+      .opt-left {
+        width: 65%;
+      }
+
+      .ant-tree-treenode-draggable .ant-tree-draggable-icon {
+        padding-top: 6px;
+        opacity: 1 !important;
+      }
+    }
+  }
+
+  .ant-tree-node-content-wrapper.ant-tree-node-selected {
+    background-color: transparent;
+  }
+
+  .ant-tree-node-content-wrapper:hover {
+    background-color: transparent;
+  }
+}

@@ -77,7 +77,7 @@ export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
     if (!columns || columns.length === 0) {
       return {};
     }
-    const index = findIndex(columns, (o: SortItemProps) => {
+    const index = findIndex(columns, (o: OptionItemProps) => {
       return o.code === code;
     });
     return columns[index];