feat（选择表单）: 添加搜索

-
+import { QxBaseIcon } from '@qx/common';
+import type { ModalProps } from 'antd';
+import { Modal, Radio, Select, Typography } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   getAggreList,
@@ -6,17 +8,9 @@ import {
   getDatasetListByAppid,
   getFunList,
 } from './service';
-import {
-  Modal,
-  Radio,
-  Select,
-  Typography,
-} from 'antd';
-import type { ModalProps } from 'antd';
-import {QxBaseIcon} from '@qx/common';
 
+import '../style/reset.less';
 import './styles.less';
-import '../style/reset.less'
 
 const { Title, Text } = Typography;
 /**
@@ -127,78 +121,83 @@ const RelItemOption: React.FC<any> = (riProps) => {
 
   //搜索
   const filterOption = (input: string, option: any) =>
-      (option?.name ?? '').toLowerCase().includes(input.toLowerCase());
+    (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>
-      </>
+    <>
+      <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) => {
+  //搜索
+  const filterOption = (input: string, option: any) =>
+    (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
+
   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}
-        />
-      </>
+    <>
+      <Title level={5} style={{ margin: '16px 0 8px' }}>
+        {_props.title}
+      </Title>
+      <Select
+        showSearch
+        filterOption={filterOption}
+        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}
+      />
+    </>
   );
 };
 
@@ -206,43 +205,43 @@ const AggreOption: React.FC<any> = (_props: any) => {
  * 表单类型选择
  */
 const TableTypeNode: React.FC<any> = (_typeProps: any) => {
-  const {showTableTypeTab, flag} = _typeProps
+  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>
-        )}
-      </>
+    <>
+      {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>
+      )}
+    </>
   );
 };
 
@@ -285,9 +284,11 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
         return;
       }
       if (props?.haveChildren) {
-        getFunList(request, targetItem.code, { hasChild: true }).then((re: any) => {
-          setFormList(re);
-        });
+        getFunList(request, targetItem.code, { hasChild: true }).then(
+          (re: any) => {
+            setFormList(re);
+          },
+        );
       } else {
         getFunList(request, targetItem.code).then((re: any) => {
           setFormList(re);

@@ -235,6 +235,7 @@ export default () => {
       options={options}
       value={value}
       onChange={(datasource) => {
+        console.log(datasource, 'lllllll');
         setValue(datasource);
       }}
       request={createRequest()}