feat: 选择表单

@@ -54,6 +54,7 @@
   "devDependencies": {
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@commitlint/config-conventional": "^17.1.0",
+    "@qx/utils": "0.0.58",
     "@types/lodash-es": "^4.17.8",
     "@types/lodash-es": "^4.17.8",
     "@types/react": "^18.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -69,6 +70,7 @@
     "prettier-plugin-organize-imports": "^3.0.0",
     "prettier-plugin-organize-imports": "^3.0.0",
     "prettier-plugin-packagejson": "^2.2.18",
     "prettier-plugin-packagejson": "^2.2.18",
     "react": "^18.0.0",
     "react": "^18.0.0",
+    "react-cookies": ">=0.1.1",
     "react-dom": "^18.0.0",
     "react-dom": "^18.0.0",
     "stylelint": "^14.9.1"
     "stylelint": "^14.9.1"
   },
   },

+### 选择应用
+
+```tsx
+import { createRequest } from '@qx/utils';
+import React, { useState } from 'react';
+import { QxAppSelector } from './index';
+
+export default () => {
+  const [visible, setVisible] = useState(false);
+  const props = {
+    flag: 'join',
+    item: {
+      flag: 'SINGLE',
+      currentId: '',
+      appId: 'n7S2Gz9GJ4knP9w2AOb',
+    },
+    onchange: () => {},
+    modalProps: {
+      width: 550,
+      destroyOnClose: true,
+      visible: visible,
+      onOk: () => setVisible(false),
+      onCancel: () => setVisible(false),
+    },
+  };
+
+  return (
+    <>
+      <a onClick={() => setVisible(true)}>点我一下</a>
+      <QxAppSelector {...props} request={createRequest()} />
+    </>
+  );
+};
+```
+
+<API></API>

+import { DownOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  Input,
+  Menu,
+  // message,
+  Modal,
+  Popover,
+  Radio,
+  Select,
+  // TreeSelect,
+  Typography,
+} from 'antd';
+import _ from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  getAggreList,
+  getAppList,
+  getDatasetListByAppid,
+  getFunList,
+} from './service';
+// import { FRWidgetProps } from '@/packages/qx-form-generator/src';
+import type { ModalProps } from 'antd';
+
+import './styles.less';
+
+const { Title, Text } = Typography;
+/**
+ * 应用选择器
+ * @constructor
+ */
+type QxAppSelectProps = {
+  item?: Record<string, unknown>;
+  modalProps: ModalProps;
+  title?: string;
+  code?: string;
+  name?: string;
+  onChange?: any;
+  getConfig?: (appCode: string, funCode: string) => any;
+  flow_add?: boolean;
+  from?: string;
+  flag?: string;
+  clearData?: boolean;
+  haveChildren?: boolean;
+  clearDataSourceNode?: boolean;
+  /**
+   * 控制表单类型是否显示.
+   *
+   * 默认值 true
+   */
+  showTableTypeTab?: boolean;
+  /**
+   * 默认表单类型
+   *
+   * 默认值 single
+   */
+  defaultTableType?: 'single' | 'join';
+  chartCustom?: boolean;
+  nodeFrom?: 'flow_query_single';
+  request: any;
+};
+
+export const QxAppSelector: React.FC<QxAppSelectProps> = ({
+  showTableTypeTab = true,
+  defaultTableType = 'single',
+  chartCustom = false,
+  request,
+  ...props
+}) => {
+  const [appList, setAppList] = useState<any[]>([]); //应用列表
+  const [formList, setFormList] = useState<any[]>([]); //表单列表
+  const [appItem, setAppItem] = useState<any>({}); //选择的应用
+  const [formItem, setFormItem] = useState<any>({}); //选择的表单
+  const [tableType, setTableType] = useState<string>(defaultTableType); //单个表单or聚合表
+  const [aggreList, setAggreList] = useState<any[]>([]); //聚合表数据源
+  const [aggreValue, setAggreValue] = useState<string>(); //聚合表选择的值
+  const isDeveloperMode =
+    window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
+
+  useEffect(() => {
+    const _item = props.item || {};
+    let targetItem: any = {};
+    getAppList(request, { from: props.from }).then((res: any) => {
+      // eslint-disable-next-line array-callback-return
+      res.map((item: any) => {
+        if (item.code === _item['currentId']) {
+          item.name = item.name + '（本应用）';
+        }
+        if (item.code === _item['appId']) {
+          targetItem = { ...item };
+        }
+      });
+      setAppList(res);
+      setAppItem(targetItem);
+      if (!targetItem || !targetItem.code) {
+        return;
+      }
+      if (props?.haveChildren) {
+        getFunList(request, targetItem.code, { hasChild: true }).then((re) => {
+          setFormList(re);
+        });
+      } else {
+        getFunList(request, targetItem.code).then((re) => {
+          setFormList(re);
+        });
+      }
+      if (_item.flag === 'JOIN') {
+        setFormItem({});
+        //聚合表
+        setTableType('join'); // 单选按钮切到'聚合表'
+        if (!aggreList.length) {
+          // 如果聚合表没有加载数据源
+          const datasetApi = chartCustom
+            ? getDatasetListByAppid(request, targetItem.code)
+            : getAggreList(request);
+          datasetApi.then((datasetRes: any) => {
+            // eslint-disable-next-line array-callback-return
+            datasetRes.map((item: any) => {
+              item.label = item.name;
+              item.value = item.code;
+            });
+            setAggreList(datasetRes);
+            // console.log('聚合表数据源',res);
+            const index = datasetRes.findIndex(
+              (o: any) => o.code === String(_item['code']),
+            ); //判断聚合表是否已被删除
+            setAggreValue(index === -1 ? undefined : String(_item['code']));
+          });
+        } else {
+          const index = aggreList.findIndex(
+            (o: any) => o.code === String(_item['code']),
+          );
+          setAggreValue(index === -1 ? undefined : String(_item['code']));
+        }
+      } else {
+        setTableType('single');
+        setFormItem(_item);
+        setAggreValue(undefined);
+      }
+    });
+  }, [props.item]);
+
+  const formChange = (item: any) => {
+    setFormItem(item);
+  };
+
+  const appChange = (item: any) => {
+    setAppItem(item);
+    setFormItem({});
+    if (props?.haveChildren) {
+      getFunList(request, item.code, { hasChild: true }).then((re: any) => {
+        setFormList(re);
+      });
+    } else {
+      getFunList(request, item.code).then((res: any) => {
+        setFormList(res);
+      });
+      const datasetApi = chartCustom
+        ? getDatasetListByAppid(request, item.code)
+        : getAggreList(request);
+      datasetApi.then((datasetRes: any) => {
+        // eslint-disable-next-line array-callback-return
+        datasetRes.map((_item: any) => {
+          _item.label = _item.name;
+          _item.value = _item.code;
+        });
+        setAggreList(datasetRes);
+        setAggreValue(undefined);
+      });
+    }
+  };
+
+  const radioChange = (e: any, data: any) => {
+    setTableType(e.target.value);
+    if (chartCustom) {
+      if (e.target.value === 'join' && !aggreList.length) {
+        const datasetApi = chartCustom
+          ? getDatasetListByAppid(request, data?.code || '')
+          : getAggreList(request);
+        datasetApi.then((res: any) => {
+          if (res && !!res.length) {
+            // eslint-disable-next-line array-callback-return
+            res.map((item: any) => {
+              item.label = item.name;
+              item.value = item.code;
+            });
+            setAggreList(res);
+          } else {
+            setAggreList([]);
+          }
+        });
+      }
+    } else {
+      if (e.target.value === 'join' && !aggreList.length) {
+        getAggreList(request).then((res: any) => {
+          // eslint-disable-next-line array-callback-return
+          res.map((item: any) => {
+            item.label = item.name;
+            item.value = item.code;
+          });
+          setAggreList(res);
+        });
+      }
+    }
+  };
+  const aggreValueChange = (e: any) => {
+    setAggreValue(e);
+  };
+  const handleGetConfig = () => {
+    const appCode = appItem.extract;
+    const funCode = formItem.extract?.code;
+    if (!appCode || !funCode) return;
+    //props.getConfig 当前为undefined--布尔判断为false
+    if (props.getConfig) props.getConfig(appCode, funCode);
+  };
+
+  // 只要选的是用户中心 都过滤掉 用户与部门管理
+  const workFormList = useMemo(() => {
+    if (appItem?.extract === 'uc') {
+      return formList?.filter(
+        (o: any) => !['org', 'user'].includes(o.extract?.code),
+      );
+    }
+    return formList;
+  }, [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={<SearchOutlined />}
+            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`}
+              style={{
+                height: '36px',
+              }}
+            >
+              <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: '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 (
+    <>
+      <Modal
+        bodyStyle={{ padding: 0 }}
+        className={'qx-query-designer'}
+        keyboard={false}
+        maskClosable={false}
+        {...props.modalProps}
+        onOk={
+          tableType === 'single'
+            ? (e) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                props?.modalProps.onOk && props.modalProps.onOk(e);
+                // 把应用id传出来
+                props.onChange({
+                  ...formItem,
+                  appId: appItem.code,
+                  flag: 'SINGLE',
+                  appCode: appItem.extract,
+                });
+                handleGetConfig();
+              }
+            : (e) => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                props?.modalProps.onOk && props.modalProps.onOk(e);
+                // 把选择的聚合表的id传出来
+                const aggreItem = aggreList.filter(
+                  (ex: any) => ex.value === aggreValue,
+                )[0];
+                props.onChange({
+                  ...aggreItem,
+                  appId: appItem.code,
+                  flag: 'JOIN',
+                  appCode: appItem.extract,
+                });
+                // handleGetConfig()
+              }
+        }
+        title={props.title || '选择关联表单'}
+      >
+        {chartCustom ? (
+          <div style={{ width: '90%', margin: '10px auto' }}>
+            <div style={{ margin: '20px auto' }}>
+              <RelItemOption
+                title={'应用'}
+                list={appList}
+                onChange={appChange}
+                item={appItem}
+                placeholder={'请选择应用'}
+              />
+              <>
+                <Title level={5} style={{ margin: '20px 0 6px' }}>
+                  数据类型
+                </Title>
+                <TableTypeNode
+                  radioType={tableType}
+                  defaultRadioType={defaultTableType}
+                  appData={appItem}
+                  radioChange={radioChange}
+                />
+              </>
+              {tableType === 'single' ? (
+                <div style={{ margin: '20px auto' }}>
+                  <RelItemOption
+                    title={'表单'}
+                    list={formList}
+                    onChange={formChange}
+                    item={formItem}
+                    placeholder={'请选择表单'}
+                  />
+                </div>
+              ) : (
+                <div style={{ margin: '20px auto' }}>
+                  <AggreOption
+                    aggreList={aggreList}
+                    aggreValue={aggreValue}
+                    onChange={aggreValueChange}
+                    title={'聚合表'}
+                    placeholder={'请选择聚合表'}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div style={{ width: '90%', margin: '10px auto' }}>
+            {props.title === '选择数据源' ? null : (
+              <Text type="secondary">
+                在表单中显示关联的记录。如：订单关联客户
+              </Text>
+            )}
+            <TableTypeNode
+              radioType={tableType}
+              defaultRadioType={defaultTableType}
+              appData={appItem}
+              radioChange={radioChange}
+            />
+            {tableType === 'single' ? (
+              <div style={{ margin: '20px auto' }}>
+                <RelItemOption
+                  title={'应用'}
+                  // 非开发者模式下  过滤掉用户中心选项--钉钉2022.10.11
+                  list={
+                    isDeveloperMode
+                      ? appList
+                      : appList?.filter((o) => o?.extract !== 'uc')
+                  }
+                  onChange={appChange}
+                  item={appItem}
+                  placeholder={'请选择应用'}
+                />
+                <RelItemOption
+                  title={'工作表'}
+                  list={workFormList}
+                  onChange={formChange}
+                  item={formItem}
+                  placeholder={'请选择工作表'}
+                />
+              </div>
+            ) : (
+              <div style={{ margin: '20px auto' }}>
+                <AggreOption
+                  aggreList={aggreList}
+                  aggreValue={aggreValue}
+                  onChange={aggreValueChange}
+                  title={'数据表'}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+type Item = {
+  name: string;
+  code?: string;
+  deleted?: boolean;
+};

+/**
+ * 应用选项
+ */
+export function getAppList(
+  request: any,
+  params?: { keyword?: string; code?: string; from?: string },
+) {
+  return request.get(`/qx-apaas-lowcode/app/option`, { params });
+}
+
+/**
+ * 功能信息
+ */
+export function getFunInfo(request: any, funId: string) {
+  return request.get(`/qx-apaas-lowcode/app/form/${funId}`);
+}
+
+/**
+ * 表单选项
+ */
+export function getFunList(
+  request: any,
+  appId: string,
+  params?: { keyword?: string; code?: string; id?: string; hasChild?: boolean },
+) {
+  return request.get(`/qx-apaas-lowcode/app/${appId}/option`, { params });
+}
+
+//获取聚合表的所有选项
+export function getAggreList(
+  request: any,
+  params?: { keyword?: string; code?: string },
+) {
+  return request.get(`/qx-apaas-lowcode/dataset/join/option`, { params });
+}
+
+// 获取应用下 聚合表的所有选项
+export function getDatasetListByAppid(request: any, appId: string) {
+  return request.get(`/qx-apaas-lowcode/dataset/${appId}/option`);
+}

+.ant-input.select-source {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  .ant-tag {
+    margin: 1px;
+  }
+
+  > .anticon {
+    padding: 0 6px;
+    color: rgba(0, 0, 0, 25%);
+    font-size: 12px;
+  }
+}

+### 选择表单
+
+```tsx
+import { createRequest } from '@qx/utils';
+import React, { useState } from 'react';
+import { QxFormSelect } from './index';
+
+export default () => {
+  const [value, setValue] = useState({});
+  const options = [
+    {
+      name: '地址',
+      code: 'UdXaoSj9EHYr3wZL253',
+      extract: {
+        code: 'o72gf',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '测试关联记录按钮',
+      code: 'ZRLa6NjJ98u3lFVLSur',
+      extract: {
+        code: 'vwxxw',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '测试关联记录权限',
+      code: 'SRqC0JJmcjKquqnn228',
+      extract: {
+        code: '60jte',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '子表',
+      code: 'GYsqE8yphn1amjVM2OY',
+      extract: {
+        code: 'oi0d2',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '关联基础',
+      code: '2wN04K7nF0fHjRbOAvu',
+      extract: {
+        code: '0jpbl',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '关联记录',
+      code: 's6k5W5aovjtiU7kvqVl',
+      extract: {
+        code: 'zbynu',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '关联记录-关联记录',
+      code: 'hfbs4k6Lbs4WV7tOept',
+      extract: {
+        code: 'fz7nl',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '关联属性-关联记录',
+      code: 'WPjXCOemcBxoXqeEX6x',
+      extract: {
+        code: 's585f',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '子表-关联记录',
+      code: 'H3moABKMnhVqjqcVbsa',
+      extract: {
+        code: 'snfhq',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '关联记录1',
+      code: 'PQspcwgyiewytF9iizd',
+      extract: {
+        code: 'f53ql',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '富文本',
+      code: 'On7QbrZv9u1qtVgMAGm',
+      extract: {
+        code: 'tmh23',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '关联记录删除',
+      code: 'MdUFSBxWOYKXSYGSqSk',
+      extract: {
+        code: 'uxenf',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '1',
+      code: 'HAJ8dEcoPLnjx81Uxjc',
+      extract: {
+        code: '3xtcr',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '基础表单',
+      code: 'oOY4njEfrHx7PlSlFRf',
+      extract: {
+        code: 'fd3eb',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '关联记录',
+      code: 'HaIdxngReF8WtKclakp',
+      extract: {
+        code: 'qbroi',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '筛选',
+      code: 'amWz1TlerTCrysLhKdD',
+      extract: {
+        code: 'ionr7',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '子表',
+      code: 'JV5IeD1Xc4MtwWdbPhB',
+      extract: {
+        code: 'x4lh4',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '附件图片',
+      code: 'jCfTNFw7tjERB5jnnWv',
+      extract: {
+        code: 'pqqko',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '日期时间',
+      code: 'WruqGjaxMj0jLsZ6Ufr',
+      extract: {
+        code: 'z15we',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '选人员部门',
+      code: 'wqsubyh5kJFsxXuHYyQ',
+      extract: {
+        code: '0h42r',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '数值',
+      code: 'HEsh8KhnUToggsWuboT',
+      extract: {
+        code: 'bb8ev',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+    {
+      name: '多字段',
+      code: 'deTV0Jjc1prqYZTERfN',
+      extract: {
+        code: 'hxaxj',
+        isTree: false,
+        appName: 'LT-表单',
+        type: 'form',
+      },
+    },
+  ];
+
+  return (
+    <QxFormSelect
+      options={options}
+      value={value}
+      onChange={(datasource) => {
+        setValue(datasource);
+      }}
+      request={createRequest()}
+    />
+  );
+};
+```
+
+<API></API>

+import { BlockOutlined } from '@ant-design/icons';
+import { useSetState } from 'ahooks';
+import { Button } from 'antd';
+import cls from 'classnames';
+import React, { useCallback, useRef } from 'react';
+import { QxAppSelector } from '../qx-app-selector';
+import type { InputSelectProps } from '../qx-input-select';
+import { QxInputSelect } from '../qx-input-select';
+
+import './styles.less';
+
+const prefix = 'qx-datasource-select';
+
+/**
+ * 选择数据源
+ */
+export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
+  const {
+    className,
+    options = [],
+    onChange,
+    value,
+    loading,
+    appId,
+    request,
+    disabled,
+  } = props;
+
+  const [state, setState] = useSetState<FormSelectState>({
+    visible: false,
+    modalVisible: false,
+  });
+
+  const inputSelectRef = useRef<any>();
+
+  const handleChange = (val: any) => {
+    if (!val?.code) return;
+    function onOk() {
+      if (val?.code) {
+        onChange?.(val);
+        setState({
+          visible: false,
+        });
+      }
+    }
+    onOk();
+  };
+
+  const onOpenOther = useCallback(() => {
+    inputSelectRef.current?.closeDropdown();
+    setState({
+      modalVisible: true,
+    });
+  }, []);
+
+  return (
+    <div className={cls(prefix, className)}>
+      <QxInputSelect
+        ref={inputSelectRef}
+        value={value?.name}
+        defaultValue={value?.name}
+        placeholder="请选择数据源"
+        prefix={<BlockOutlined style={{ color: '#52c41a' }} />}
+        options={options}
+        onChange={handleChange}
+        dropdownProps={{
+          showSearch: true,
+          loading,
+          renderBottom: (
+            <Button
+              className={`${prefix}__dropdown-bottom`}
+              type="link"
+              onClick={onOpenOther}
+            >
+              其他应用
+            </Button>
+          ),
+        }}
+        disabled={disabled}
+      />
+
+      {state.modalVisible ? (
+        <QxAppSelector
+          title="选择数据源"
+          item={{
+            flag: 'SINGLE',
+            currentId: '',
+            appId: appId,
+          }}
+          onChange={handleChange}
+          flag="join"
+          showTableTypeTab={false}
+          modalProps={{
+            width: 550,
+            destroyOnClose: true,
+            visible: state.modalVisible,
+            onOk: () => setState({ modalVisible: false }),
+            onCancel: () => setState({ modalVisible: false }),
+          }}
+          request={request}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+interface FormSelectProps extends InputSelectProps {
+  value?: any;
+  loading?: boolean;
+  appId?: string;
+  request?: any;
+  disabled?: boolean;
+}
+interface FormSelectState {
+  visible: boolean;
+  modalVisible: boolean;
+}

+@prefix: ~'qx-datasource-select';
+
+.@{prefix} {
+  width: 100%;
+
+  &__dropdown-bottom {
+    width: 100% !important;
+    height: 50px !important;
+    text-align: left !important;
+    background-color: #fff !important;
+    border-top: 1px solid #e6eaf2 !important;
+  }
+}

+import { SearchOutlined } from '@ant-design/icons';
+import { useScroll } from 'ahooks';
+import { Empty, Input, Menu, Spin } from 'antd';
+import cls from 'classnames';
+import { debounce } from 'lodash';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import './styles.less';
+const prefix = 'qx-input-select-dropdown';
+
+const listItemHeight = 40;
+
+const defaultProps = {
+  fieldNames: {
+    label: 'name',
+    value: 'code',
+  },
+};
+
+const DropdownContent = React.forwardRef<any, DropdownContentProps>(
+  (props, forwardRef) => {
+    const {
+      options = [],
+      fieldNames = defaultProps.fieldNames,
+      onPopupScroll,
+      onChange,
+      className,
+      style,
+      renderBottom,
+      showSearch = false,
+      onSearch: parentSearch,
+      placeholder,
+      listHeight = 260,
+      loading,
+    } = props;
+
+    const [filteredOpts, setFilteredOpts] = useState<any[]>(options || []);
+    const ref = useRef(null);
+    const position = useScroll(ref);
+    const isEmpty = !filteredOpts.length;
+    const fieldLabel = fieldNames.label || 'name';
+    const fieldValue = fieldNames.value || 'code';
+
+    const computedOptions = useMemo(
+      () =>
+        options?.map((opt) => ({
+          label: opt[fieldLabel],
+          key: opt[fieldValue],
+        })),
+      [options],
+    );
+
+    const handleSearch = useCallback(
+      debounce((e) => {
+        const val = e.target?.value;
+        const newOpts = val
+          ? computedOptions.filter((opt) => {
+              return opt.label?.includes(val);
+            })
+          : computedOptions;
+        setFilteredOpts(newOpts);
+      }, 800),
+      [computedOptions],
+    );
+
+    const onSearch = (e: any) => {
+      e.persist();
+      if (parentSearch) {
+        parentSearch?.(e.target?.value);
+      } else {
+        handleSearch(e);
+      }
+    };
+
+    const findSelected = (key: string) =>
+      filteredOpts?.find((opt) => opt.key === key);
+
+    const handleChange = ({ key }: any) => {
+      const result = findSelected(key);
+      onChange?.({
+        ...result,
+        [fieldLabel]: result?.label,
+        [fieldValue]: result?.key,
+      });
+    };
+
+    useEffect(() => {
+      const length = options?.length;
+
+      if (length < 6) return;
+
+      if (position) {
+        const _listHeight = length * listItemHeight;
+
+        const isBottom = _listHeight - _listHeight <= position.top;
+
+        onPopupScroll?.(position, isBottom);
+      }
+    }, [position, options]);
+
+    useEffect(() => {
+      if (Array.isArray(computedOptions)) {
+        setFilteredOpts(computedOptions);
+      }
+    }, [computedOptions]);
+
+    return (
+      <div ref={forwardRef} className={cls(prefix, className)} style={style}>
+        {showSearch ? (
+          <Input
+            placeholder={placeholder || '输入名称搜索'}
+            prefix={<SearchOutlined />}
+            className={`${prefix}__input`}
+            onChange={onSearch}
+          />
+        ) : null}
+
+        {loading ? (
+          <Spin spinning={loading} />
+        ) : (
+          <div
+            ref={ref}
+            className={`${prefix}__list`}
+            style={{ height: listHeight }}
+          >
+            {isEmpty ? (
+              <Empty
+                className={`${prefix}__list-empty`}
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+              />
+            ) : (
+              <Menu
+                className={cls(`${prefix}__list-content`, {
+                  [`${prefix}__list-content--has-bottom`]: !!renderBottom,
+                })}
+                items={filteredOpts}
+                onClick={handleChange}
+              />
+            )}
+          </div>
+        )}
+        <div className={`${prefix}__list-content-bottom`}>{renderBottom}</div>
+      </div>
+    );
+  },
+);
+
+interface FieldNames {
+  label: string;
+  value: string;
+  options?: any;
+}
+
+export interface DropdownContentOptions {
+  name: string | React.ReactNode;
+  code: string | number;
+}
+
+export interface DropdownContentProps {
+  placeholder?: string;
+  options?: DropdownContentOptions[];
+  fieldNames?: FieldNames;
+  onPopupScroll?: (
+    options: { left: number; top: number },
+    isBottom: boolean,
+  ) => void;
+  onChange?: (val: any) => void;
+  onOpenOther?: () => void;
+  showSearch?: boolean;
+  onSearch?: (val: string) => void;
+  renderBottom?: React.ReactNode;
+  listHeight?: number;
+  loading?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default memo(DropdownContent);

+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { useSetState } from 'ahooks';
+import { Dropdown, Input } from 'antd';
+import type { InputProps } from 'antd/lib/input';
+import cls from 'classnames';
+import React, { useImperativeHandle } from 'react';
+import type {
+  DropdownContentOptions,
+  DropdownContentProps,
+} from './dropdown-content';
+import DropdownContent from './dropdown-content';
+
+import './styles.less';
+
+const prefix = 'qx-input-select';
+
+/**
+ * 下拉选择
+ */
+export const QxInputSelect = React.forwardRef<any, InputSelectProps>(
+  (props, ref) => {
+    const {
+      className,
+      options = [],
+      dropdownProps,
+      onChange,
+      disabled,
+      ...rest
+    } = props;
+
+    const [state, setState] = useSetState<InputSelectState>({
+      visible: false,
+    });
+
+    const inputSuffix = (
+      <div className={`${prefix}__input-suffix`}>
+        {state.visible ? <UpOutlined /> : <DownOutlined />}
+      </div>
+    );
+
+    const handleChange = (val: DropdownContentOptions) => {
+      onChange?.(val);
+      setState({ visible: false });
+    };
+
+    /**
+     * 菜单显示状态改变时调用
+     */
+    const onVisibleChange = (visible: boolean) => {
+      setState({ visible });
+    };
+
+    useImperativeHandle(ref, () => ({
+      closeDropdown: () => {
+        setState({ visible: false });
+      },
+      openDropdown: () => {
+        setState({ visible: true });
+      },
+    }));
+
+    return (
+      <div className={cls(prefix, className)}>
+        <Dropdown
+          visible={state.visible}
+          destroyPopupOnHide
+          trigger={['click']}
+          className={`${prefix}__dropdown`}
+          overlay={() => (
+            <DropdownContent
+              options={options}
+              onChange={handleChange}
+              {...dropdownProps}
+            />
+          )}
+          getPopupContainer={(triggerNode) => triggerNode}
+          onVisibleChange={onVisibleChange}
+          disabled={disabled}
+        >
+          <Input
+            placeholder="请选择"
+            readOnly
+            suffix={inputSuffix}
+            onClick={() => setState({ visible: !state.visible })}
+            {...rest}
+            className={`${prefix}__input`}
+          />
+        </Dropdown>
+      </div>
+    );
+  },
+);
+
+export interface InputSelectProps extends Omit<InputProps, 'onChange'> {
+  onChange?: (args: DropdownContentOptions) => void;
+  options?: DropdownContentOptions[];
+  dropdownProps?: DropdownContentProps;
+  disabled?: boolean;
+}
+export interface InputSelectState {
+  visible: boolean;
+}

+@import '~@qx/ui/src/style/variable.less';
+
+@prefix: ~'qx-input-select';
+
+.@{prefix} {
+  &-dropdown {
+    position: relative;
+    width: 100%;
+    padding: 10px 10px 50px;
+    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;
+      margin-top: 5px;
+      overflow-y: auto;
+    }
+
+    &__list-empty {
+      margin-top: 15%;
+    }
+
+    &__list-content {
+      width: 100%;
+
+      :global {
+        .ant-menu-item {
+          margin-bottom: 0;
+
+          &:hover {
+            background-color: #f5f5f5;
+          }
+        }
+      }
+    }
+
+    &__list-content-bottom {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+    }
+
+    &__input {
+      :global {
+        .anticon {
+          padding: 0 5px;
+          color: silver;
+        }
+      }
+
+      padding-bottom: 5px !important;
+      padding-left: 0 !important;
+      border: none !important;
+      border-bottom: 1px solid #e6eaf2 !important;
+      outline: none !important;
+      box-shadow: none !important;
+
+      &:hover,
+      &:focus,
+      &:active {
+        border-color: @B8;
+      }
+    }
+  }
+
+  &__input {
+    :global {
+      input {
+        cursor: default;
+      }
+    }
+  }
+
+  &__input-suffix {
+    color: silver;
+  }
+}

-## 选人组件
+### 选人组件
 
 
 ```tsx
 ```tsx
 /**
 /**
  * debug: true
  * debug: true
  */
  */
-import React from 'react';
 import { QxUserSelector } from '@qx/common';
 import { QxUserSelector } from '@qx/common';
-// import request from 'umi-request';
+import React from 'react';
+import request from 'umi-request';
+
+request.interceptors.request.use((url, options) => {
+  if (url.startsWith('/api/')) {
+    return { url, options };
+  }
+  const headers = { Authorization: 'dev_session:ZGuqjkCF3GMzorijXw7' };
+  // headers['SERVER-IP'] = '192.168.181.112';
+
+  const fullUrl = url.startsWith('http')
+    ? url
+    : `http://10.9.1.180/qx-api${url}`;
+  return {
+    url: fullUrl,
+    options: {
+      ...options,
+      ...{
+        headers: { ...headers, ...(options.customHeaders || {}) },
+        isInternal: true,
+        timeout: 30000,
+      },
+    },
+  };
+});
+
+request.interceptors.response.use(async (response, options) => {
+  if (response.status !== 200) {
+    return Promise.reject(response);
+  }
+
+  if (!response.headers.get('content-type')?.includes('application/json')) {
+    return response.blob();
+  }
+
+  const body = await response.clone().json();
+
+  // 按正常逻辑处理"文件上传"系列接口
+  const fsUploadApis = ['/file/checkFile', '/file/uploadByExist', '/fss/file/'];
+  const isFsUploadApis = fsUploadApis.filter(
+    (api: string) => options.url.indexOf(api) !== -1,
+  );
+  if (isFsUploadApis.length > 0) {
+    return Promise.resolve(body || null);
+  }
+
+  if (body.success) {
+    return Promise.resolve(body.data || null);
+  }
 
 
-// request.interceptors.request.use((url, options) => {
-//   if (url.startsWith('/api/')) {
-//     return { url, options };
-//   }
-//   const headers = { Authorization: 'dev_session:ZGuqjkCF3GMzorijXw7' };
-//   // headers['SERVER-IP'] = '192.168.181.112';
-//
-//   const fullUrl = url.startsWith('http') ? url : `http://10.9.1.180/qx-api${url}`;
-//   return {
-//     url: fullUrl,
-//     options: {
-//       ...options,
-//       ...{
-//         headers: { ...headers, ...(options.customHeaders || {}) },
-//         isInternal: true,
-//         timeout: 30000,
-//       },
-//     },
-//   };
-// });
+  console.error('网络请求出错：', body.msg);
 
 
-// request.interceptors.response.use(async (response, options) => {
-//   if (response.status !== 200) {
-//     return Promise.reject(response);
-//   }
-//
-//   if (!response.headers.get('content-type')?.includes('application/json')) {
-//     return response.blob();
-//   }
-//
-//   const body = await response.clone().json();
-//
-//   // 按正常逻辑处理"文件上传"系列接口
-//   const fsUploadApis = ['/file/checkFile', '/file/uploadByExist', '/fss/file/'];
-//   const isFsUploadApis = fsUploadApis.filter((api: string) => options.url.indexOf(api) !== -1);
-//   if (isFsUploadApis.length > 0) {
-//     return Promise.resolve(body || null);
-//   }
-//
-//   if (body.success) {
-//     return Promise.resolve(body.data || null);
-//   }
-//
-//   console.error('网络请求出错：', body.msg);
-//
-//   return Promise.reject(body);
-// });
+  return Promise.reject(body);
+});
 
 
 export default () => {
 export default () => {
   return (
   return (
     <div>
     <div>
       <QxUserSelector
       <QxUserSelector
-        // request={request}
+        request={request}
         params={{
         params={{
           org: [{ relType: 'APPOINT_ORG', relIds: [''] }],
           org: [{ relType: 'APPOINT_ORG', relIds: [''] }],
           pos: null,
           pos: null,
-          range: ['ORG:MubDrwZm8IMxuLDU9FM', 'ORG:a0WZVI96GAdoI5g9IwX', 'ORG:QPLEku2yJU8hmbpLTtg'],
+          range: [
+            'ORG:MubDrwZm8IMxuLDU9FM',
+            'ORG:a0WZVI96GAdoI5g9IwX',
+            'ORG:QPLEku2yJU8hmbpLTtg',
+          ],
         }}
         }}
       />
       />
       <br />
       <br />
-      <QxUserSelector />
+      <QxUserSelector request={request} />
       <br />
       <br />
       <QxUserSelector
       <QxUserSelector
         readOnly
         readOnly
         value={['1212']}
         value={['1212']}
         defaultData={[{ id: '1212', name: '邢晴晴' }]}
         defaultData={[{ id: '1212', name: '邢晴晴' }]}
-        // request={request}
+        request={request}
       />
       />
     </div>
     </div>
   );
   );