feat（选择表单）: 组件重构

-import { DownOutlined } from '@ant-design/icons';
-import {
-  Input,
-  Menu,
-  // message,
-  Modal,
-  Popover,
-  Radio,
-  Select,
-  // TreeSelect,
-  Typography,
-} from 'antd';
-import { cloneDeep } from 'lodash-es';
+
 import React, { useEffect, useMemo, useState } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
 import {
 import {
   getAggreList,
   getAggreList,
@@ -18,7 +6,12 @@ import {
   getDatasetListByAppid,
   getDatasetListByAppid,
   getFunList,
   getFunList,
 } from './service';
 } from './service';
-// import { FRWidgetProps } from '@/packages/qx-form-generator/src';
+import {
+  Modal,
+  Radio,
+  Select,
+  Typography,
+} from 'antd';
 import type { ModalProps } from 'antd';
 import type { ModalProps } from 'antd';
 import {QxBaseIcon} from '@qx/common';
 import {QxBaseIcon} from '@qx/common';
 
 
@@ -60,6 +53,198 @@ type QxAppSelectProps = {
   nodeFrom?: 'flow_query_single';
   nodeFrom?: 'flow_query_single';
   request: any;
   request: any;
 };
 };
+/* 表单组件 */
+const RelItemOption: React.FC<any> = (riProps) => {
+  // const [visible, setVisible] = useState<boolean>(false);
+  const [list, setList] = useState<any>(riProps.list);
+  const [item, setItem] = useState<any>();
+  useEffect(() => {
+    if (riProps.item) {
+      setItem(riProps.item);
+    }
+
+    if (riProps.list) {
+      setList(riProps.list);
+    }
+  }, [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());
+
+  return (
+      <>
+        <Title level={5} style={{ margin: '16px 0 8px' }}>
+          {riProps.title}
+        </Title>
+        <div style={{ width: '100%'}}>
+          <Select
+            showSearch
+            style={{ width: '100%', height: '36px' }}
+            placeholder={riProps.placeholder || '请选择数据源'}
+            options={list}
+            value={item?.code}
+            onChange={(val)=>{
+              const _list = list.filter((el: any) => el.code === val);
+              if(_list?.length) {
+                riProps.onChange(_list[0])
+              }
+            }}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            getPopupContainer={() => document.body}
+            filterOption={filterOption}
+            fieldNames={{
+              label: 'name',
+              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>
+      </>
+  );
+};
+/* 聚合表组件 */
+const AggreOption: React.FC<any> = (_props: any) => {
+  return (
+      <>
+        <Title level={5} style={{ margin: '16px 0 8px' }}>
+          {_props.title}
+        </Title>
+        <Select
+            allowClear
+            style={{ width: '100%', height: '36px' }}
+            placeholder={_props.placeholder || '请选择数据源'}
+            options={_props.aggreList}
+            value={_props.aggreValue}
+            onChange={_props.onChange}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            getPopupContainer={() => document.body}
+        />
+      </>
+  );
+};
+
+/**
+ * 表单类型选择
+ */
+const TableTypeNode: React.FC<any> = (_typeProps: any) => {
+  const {showTableTypeTab, flag} = _typeProps
+  return (
+      <>
+        {showTableTypeTab && (
+            <Radio.Group
+                onChange={(e: any) => _typeProps.radioChange(e, _typeProps.appData)}
+                value={_typeProps.radioType}
+                defaultValue={_typeProps.defaultRadioType}
+                optionType="button"
+                style={{
+                  width: '100%',
+                  textAlign: 'center',
+                  display: flag === 'join' ? '' : 'none',
+                  height: '36px',
+                }}
+            >
+              <Radio.Button
+                  value="single"
+                  style={{
+                    width: '50%',
+                    height: '36px',
+                  }}
+              >
+                表单
+              </Radio.Button>
+              <Radio.Button
+                  value="join"
+                  style={{
+                    width: '50%',
+                    height: '36px',
+                  }}
+              >
+                聚合表
+              </Radio.Button>
+            </Radio.Group>
+        )}
+      </>
+  );
+};
 
 
 export const QxAppSelector: React.FC<QxAppSelectProps> = ({
 export const QxAppSelector: React.FC<QxAppSelectProps> = ({
   showTableTypeTab = true,
   showTableTypeTab = true,
@@ -231,178 +416,6 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
     return formList;
     return formList;
   }, [appItem?.extract, formList, props.nodeFrom]);
   }, [appItem?.extract, formList, props.nodeFrom]);
 
 
-  /* 表单组件 */
-  const RelItemOption: React.FC<any> = (riProps) => {
-    const [visible, setVisible] = useState<boolean>(false);
-    const [list, setList] = useState<any>(riProps.list);
-    const [item, setItem] = useState<any>();
-    useEffect(() => {
-      if (riProps.item) {
-        setItem(riProps.item);
-      }
-
-      if (riProps.list) {
-        setList(riProps.list);
-      }
-    }, [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>
-      );
-    };
-
-    return (
-      <>
-        <Title level={5} style={{ margin: '20px 0 6px' }}>
-          {riProps.title}
-        </Title>
-        <div style={{ width: '100%', marginBottom: '20px' }}>
-          <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 css-dev-only-do-not-override-nnuwmp`}
-              style={{
-                height: '36px',
-              }}
-            >
-              <div>
-                {item?.name ? (
-                  item.name
-                ) : (
-                  <Text type="secondary">{riProps.placeholder}</Text>
-                )}
-              </div>
-              <DownOutlined />
-            </div>
-            {/*<Input/>*/}
-          </Popover>
-        </div>
-      </>
-    );
-  };
-  /* 聚合表组件 */
-  const AggreOption: React.FC<any> = (_props: any) => {
-    return (
-      <>
-        <Title level={5} style={{ margin: '20px 0 6px' }}>
-          {_props.title}
-        </Title>
-        <Select
-          allowClear
-          style={{ width: '100%', height: '36px' }}
-          placeholder={_props.placeholder || '请选择数据源'}
-          options={_props.aggreList}
-          value={_props.aggreValue}
-          onChange={_props.onChange}
-          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-          getPopupContainer={(triggerNode) => triggerNode}
-        />
-      </>
-    );
-  };
-
-  /**
-   * 表单类型选择
-   */
-  const TableTypeNode: React.FC<any> = (_typeProps: any) => {
-    return (
-      <>
-        {showTableTypeTab && (
-          <Radio.Group
-            onChange={(e: any) => _typeProps.radioChange(e, _typeProps.appData)}
-            value={_typeProps.radioType}
-            defaultValue={_typeProps.defaultRadioType}
-            optionType="button"
-            style={{
-              width: '100%',
-              textAlign: 'center',
-              display: props.flag === 'join' ? '' : 'none',
-              height: '36px',
-            }}
-          >
-            <Radio.Button
-              value="single"
-              style={{
-                width: '50%',
-                height: '36px',
-              }}
-            >
-              表单
-            </Radio.Button>
-            <Radio.Button
-              value="join"
-              style={{
-                width: '50%',
-                height: '36px',
-              }}
-            >
-              聚合表
-            </Radio.Button>
-          </Radio.Group>
-        )}
-      </>
-    );
-  };
-
   return (
   return (
     <>
     <>
       <Modal
       <Modal
@@ -461,7 +474,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
                 placeholder={'请选择应用'}
                 placeholder={'请选择应用'}
               />
               />
               <>
               <>
-                <Title level={5} style={{ margin: '20px 0 6px' }}>
+                <Title level={5} style={{ margin: '20px 0 8px' }}>
                   数据类型
                   数据类型
                 </Title>
                 </Title>
                 <TableTypeNode
                 <TableTypeNode
@@ -469,6 +482,8 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
                   defaultRadioType={defaultTableType}
                   defaultRadioType={defaultTableType}
                   appData={appItem}
                   appData={appItem}
                   radioChange={radioChange}
                   radioChange={radioChange}
+                  showTableTypeTab={showTableTypeTab}
+                  flag={props.flag}
                 />
                 />
               </>
               </>
               {tableType === 'single' ? (
               {tableType === 'single' ? (
@@ -506,6 +521,8 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
               defaultRadioType={defaultTableType}
               defaultRadioType={defaultTableType}
               appData={appItem}
               appData={appItem}
               radioChange={radioChange}
               radioChange={radioChange}
+              showTableTypeTab={showTableTypeTab}
+              flag={props.flag}
             />
             />
             {tableType === 'single' ? (
             {tableType === 'single' ? (
               <div style={{ margin: '20px auto' }}>
               <div style={{ margin: '20px auto' }}>
@@ -546,8 +563,8 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
   );
   );
 };
 };
 
 
-type Item = {
-  name: string;
-  code?: string;
-  deleted?: boolean;
-};
+// type Item = {
+//   name: string;
+//   code?: string;
+//   deleted?: boolean;
+// };

@@ -12,24 +12,36 @@
     display: none;
     display: none;
   }
   }
 
 
-  .ant-input.select-source {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 32px;
-    position: unset;
-    transition: all .3s;
-
-    .ant-tag {
-      margin: 1px;
-    }
-
-    > .anticon {
-      padding: 0 6px;
-      color: @N5;
-      font-size: 12px;
-    }
-  }
+  //.ant-input.select-source {
+  //  display: flex;
+  //  flex-direction: row;
+  //  align-items: center;
+  //  justify-content: space-between;
+  //  min-height: 32px;
+  //  transition: all .3s;
+  //  box-sizing: border-box;
+  //  margin: 0;
+  //  list-style: none;
+  //  width: 100%;
+  //  padding: 4px 11px;
+  //  font-size: 14px;
+  //  background-color: #fff;
+  //  border: 1px solid #d9d9d9;
+  //  border-radius: 4px;
+  //
+  //  &:hover {
+  //    border-color: @B8;
+  //  }
+  //
+  //  .ant-tag {
+  //    margin: 1px;
+  //  }
+  //
+  //  > .anticon {
+  //    padding: 0 6px;
+  //    color: @N5;
+  //    font-size: 12px;
+  //  }
+  //}
 }
 }