pref: 选择数据源 组件优化

 ### 选择表单
 
+### 使用外部appId获取options
+
+```tsx
+import { request, QxFormSelect } from '@qx/common';
+import React, { useState } from 'react';
+
+export default () => {
+  const [value, setValue] = useState({});
+  return (
+    <QxFormSelect
+      value={value}
+      onChange={(datasource) => {
+        setValue(datasource);
+      }}
+      request={request}
+      appId={'5ak3C213YQWEO6IYnIs'}
+    />
+  );
+};
+```
+
 ### 外部传入options
 ```tsx
 import { request, QxFormSelect } from '@qx/common';
@@ -244,26 +265,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 React, {useCallback, useEffect, useRef, useState} from 'react';
 import { BlockOutlined } from '@ant-design/icons';
 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 './styles.less';
 import {getAppFromList} from "./service";
 
+import './styles.less';
+
 const prefix = 'qx-form-select';
 
 const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
@@ -60,7 +61,7 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
         value={value?.name}
         defaultValue={value?.name}
         placeholder={placeholder || '请选择数据源'}
-        prefix={<BlockOutlined style={{ color: '#52c41a' }} />}
+        prefix={<QxBaseIcon className={`${prefix}__input-prefix`} type={'icon-field-rel'} />}
         options={options}
         onChange={handleChange}
         dropdownProps={{
@@ -85,14 +86,14 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
           title={title || placeholder || '选择数据源'}
           item={{
             flag: 'SINGLE',
-            currentId: '',
-            appId: appId,
+            ...value,
+            appId: value?.appId || appId,
           }}
           onChange={handleChange}
           flag="join"
           showTableTypeTab={false}
           modalProps={{
-            width: 550,
+            width: 480,
             destroyOnClose: true,
             open: state.modalVisible,
             onOk: () => setState({ modalVisible: false }),
@@ -107,15 +108,15 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
 
 /**
  * 选择数据源
+ * TODO 当前只支持表单选择 聚合表选择待开发
  */
 export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
-  const { options= [] as any , optionId } = props;
+  const { options= [] as any , appId } = props;
   const [selectOptions, setSelectOptions] = useState([])
 
   useEffect(() => {
-	  console.log(optionId,'llllloptions',options)
-    if(optionId && !options?.length) {
-      getAppFromList(optionId).then((res: any)=> {
+    if(appId && !options?.length) {
+      getAppFromList(appId).then((res: any)=> {
         if(res?.length){
           setSelectOptions(res)
         } else {
@@ -127,7 +128,7 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
     } else {
       setSelectOptions(options)
     }
-  }, [JSON.stringify(options), optionId]);
+  }, [JSON.stringify(options), appId]);
 
   return <FormSelectMain {...props} options={selectOptions}/>
 };
@@ -135,11 +136,10 @@ 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
 }
 interface FormSelectState {
   visible: boolean;

@@ -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;
+  }
+
+  &__input-prefix {
+    color: @N6;
+    font-size: 16px;
   }
-  //.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;
-  //  }
-  //}
 }

@@ -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}
 

@@ -6,7 +6,8 @@
   &-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%),
@@ -51,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);
 
@@ -679,7 +679,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
               <QxFormSelect
                 value={qxProps}
                 request={props?.request}
-                options={props?.appFormList}
+                appId={props?.appId}
                 placeholder={'选择表单'}
                 popupOnBody={true}
                 onChange={(val: any) => {

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

@@ -77,7 +77,7 @@ interface ParameterSettingProps {
   // component?: any;
   // componentItem?: any;
   // comHandleChange?: (val: any) => void;
-  appFormList?: any[]; // 当前应用表单list
+  appId?: string; // 当前应用ID
   request?: any,
   nodeType?: string | 'START' | 'END';
 }
@@ -785,7 +785,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>