aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/controls/entity-select/entity-select.tsx

@@ -1,791 +1,791 @@
-import * as React from "react";
-import { Button, Col, Divider, message, Row, Select, Space, Spin, Tag } from "antd";
-import {
-  EControlProps,
-  LtmplConfig,
-  PageInfo,
-  QueryData,
-  QueryKey,
-} from "../../tmpl/interface";
-import {
-  AlignLeftOutlined, ArrowDownOutlined, CloseOutlined,
-  EditOutlined,
-  PlusOutlined,
-  RedoOutlined,
-  SearchOutlined,
-  TableOutlined,
-} from "@ant-design/icons";
-import debounce from "lodash/debounce";
-import "./index.css";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import HCDataSource from "../../tmpl/hc-data-source";
-import DtmplViewDrawer from "../../module/dtmpl-view-drawer";
-import DtmplEditPage from "../../module/dtmpl-edit-page";
-import DtmplCustomEditModalPage from "../../custom-page/dtmpl-custom-edit-modal-page";
-import { LtmplModal } from "../../index";
-import { LocaleContext } from "../../locale/LocaleProvider";
-import Rfield from "../rfield";
-
-interface InnerEntitySelectProps extends EControlProps {
-  maxSelected?: number;
-  onEntityClick?: (code: string) => void;
-  baseCriteria: object;// 已启动弃用计划。全部通过 fieldConfig来控制
-  valueOnly?: boolean;
-}
-
-interface InnerEntitySelectState {
-  titleId?: string;
-  optionCacheKey?: string;
-  pageNo?: number;
-  loading?: boolean;
-  initLoading?: boolean;
-  optionsCache?: object;
-  codeLabel?: object;
-  ltmplConfig?: LtmplConfig;
-  showView?: boolean;
-  drawCode?: string;
-  showEdit?: boolean;
-  showTable?: boolean;
-  preMainCode?: string;
-  selectOpen?: boolean;
-  useSelectOpenStat?: boolean;
-  isDoingSomething?: boolean;
-}
-
-type OptionCache = {
-  queryKey?: QueryKey;
-  pageInfo?: PageInfo;
-  touchEnd?: boolean;
-  options?: any;
-  searchValue?: string;
-  optionCacheKey?: string;
-};
-
-type LoadDataSource = {
-  options?: any[];
-  touchEnd?: boolean;
-};
-
-export default class EntitySelect extends React.PureComponent<
-  InnerEntitySelectProps,
-  InnerEntitySelectState
-> {
-  static defaultProps = {
-    maxSelected: 100,
-    valueOnly: false,
-  };
-
-  state = {
-    titleId: undefined,
-    optionCacheKey: undefined,
-    pageNo: 1,
-    loading: false,
-    initLoading: false,
-    optionsCache: {},
-    codeLabel: {},
-    ltmplConfig: undefined,
-    showView: false,
-    showEdit: false,
-    showTable: false,
-    drawCode: undefined,
-    preMainCode: undefined,
-    selectOpen: false,
-    isDoingSomething: false,
-    useSelectOpenStat: true,
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  selectRef = React.createRef<{ focus: () => any, blur: () => any, scrollTo, nativeElement }>();
-
-  dropdownRender = (menu) => {
-    const { fieldConfig } = this.props;
-    const { actions } = fieldConfig;
-    const { useSelectOpenStat } = this.state;
-
-    return (
-      <>
-        {menu}
-        {
-          <>
-            <Divider style={{ margin: "8px 0" }} />
-            <Row justify={"end"}>
-              <Col>
-                <Space align={"end"}>
-                  {actions && actions.indexOf("table") >= 0 ? (
-                    <Button
-                      icon={<TableOutlined style={{ color: "#0958d9" }} />}
-                      onClick={() => this.showTable()}
-                    ></Button>
-                  ) : null}
-                  {actions && actions.indexOf("add") >= 0 ? (
-                    <Button
-                      icon={<PlusOutlined style={{ color: "#0958d9" }} />}
-                      onClick={() => this.editItem()}
-                    ></Button>
-
-                  ) : null}
-                  <Button
-                    icon={<ArrowDownOutlined style={{ color: "#0958d9" }} />}
-                    onClick={() => this.fetchNextPage()}
-                  ></Button>
-                  <Button
-                    icon={<RedoOutlined style={{ color: "#0958d9" }} />}
-                    onClick={() => {
-                      this.initCache();
-                      setTimeout(() => this.fetchOptions(undefined), 100)
-                    }}
-                  ></Button>
-                  {useSelectOpenStat ? <Button
-                    //type="primary"
-                    icon={<CloseOutlined />}
-                    onClick={() => { this.setState({ selectOpen: false }) }}
-                  ></Button> : null}
-                </Space>
-              </Col>
-            </Row>
-          </>
-        }
-      </>
-    );
-  };
-
-  editItem = async (code?) => {
-    let ltmplConfig = await this.loadLtmplConfig();
-    this.setState({
-      showEdit: true,
-      showTable: false,
-      showView: false,
-      drawCode: code,
-      ltmplConfig,
-    });
-  };
-
-  showTable = async () => {
-    this.setState({
-      showEdit: false,
-      showTable: true,
-      showView: false,
-      drawCode: undefined,
-    });
-  };
-
-  loadLtmplConfig = async () => {
-    const { fieldConfig, serverKey } = this.props;
-    const { ltmplConfig } = this.state;
-    let ltmplConfig_ = ltmplConfig;
-    if (!ltmplConfig_) {
-      ltmplConfig_ = (
-        await HCDataSource.requestLtmplConfig(
-          fieldConfig.serverKey ? fieldConfig.serverKey : serverKey,
-          fieldConfig.sourceId
-        )
-      )?.ltmplConfig;
-    }
-    this.setState({
-      ltmplConfig: ltmplConfig_,
-    });
-    return ltmplConfig_;
-  };
-
-  showItem = async (code) => {
-    let ltmplConfig = await this.loadLtmplConfig();
-    this.setState({
-      showEdit: false,
-      showTable: false,
-      showView: true,
-      drawCode: code,
-      ltmplConfig,
-    });
-  };
-
-  componentDidMount() {
-    const { maxSelected, fieldConfig } = this.props;
-    const { actions } = fieldConfig;
-    if (maxSelected > 1 || actions?.indexOf("table") >= 0 || actions?.indexOf("add") >= 0) {
-      this.setState({
-        useSelectOpenStat: false,
-      })
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { baseCriteria: p_baseCriteria, mainCode, fieldConfig } = this.props;
-    let {
-      baseCriteria: p_preBaseCriteria,
-      mainCode: preMainCode,
-      fieldConfig: preFieldConfig,
-    } = prevProps;
-
-    let baseCriteria = p_baseCriteria ? p_baseCriteria : fieldConfig.baseCriteria;
-    let preBaseCriteria = p_preBaseCriteria ? p_preBaseCriteria : preFieldConfig.baseCriteria;
-    if (
-      (baseCriteria &&
-        JSON.stringify(baseCriteria) != JSON.stringify(preBaseCriteria)) ||
-      (mainCode && mainCode != preMainCode) ||
-      (fieldConfig && preFieldConfig && fieldConfig.id != preFieldConfig.id)
-      || (fieldConfig && fieldConfig.configChanged)
-    ) {
-      fieldConfig.configChanged = false;
-      this.initCache();
-    }
-  }
-
-  initCache = () => {
-    this.setState({
-      optionsCache: {},
-      codeLabel: {},
-    });
-  };
-
-  toOption = (code: string, title: string, onEntityClick) => {
-    const { fieldConfig, valueOnly } = this.props;
-    const { actions } = fieldConfig;
-    const { codeLabel } = this.state;
-    codeLabel[valueOnly ? title : code] = title;
-    let option = {
-      value: valueOnly ? title : code,
-      label: (
-        <>
-          {title}
-          {actions && actions.indexOf("detail") >= 0 ? (
-            <Button
-              size={"small"}
-              type={"text"}
-              onClick={(event) => {
-                event.stopPropagation();
-                this.showItem(code);
-              }}
-            >
-              <AlignLeftOutlined style={{ color: "#0958d9" }} />
-            </Button>
-          ) : null}
-
-          {actions && actions.indexOf("edit") >= 0 ? (
-            <Button
-              size={"small"}
-              type={"text"}
-              onClick={(event) => {
-                event.stopPropagation();
-                this.editItem(code);
-              }}
-            >
-              <EditOutlined style={{ color: "#0958d9" }} />
-            </Button>
-          ) : null}
-        </>
-      ),
-    };
-    return option;
-  };
-
-  doClose = () => {
-    this.setState({
-      drawCode: undefined,
-      showEdit: false,
-      showView: false,
-      showTable: false,
-    });
-  };
-
-  drawSubmited = (code?: string, isContinueSave?: boolean) => {
-    if (isContinueSave) {
-      this.setState({ drawCode: code });
-    } else {
-      this.doClose();
-    }
-    this.initCache();
-    this.selectRef.current.focus();
-    debounce(this.fetchOptions, 100)(undefined);
-  };
-
-  closeTable = () => {
-    this.drawSubmited();
-  };
-
-  toValueArray = (value) => {
-    let result = [];
-    let valueArray = this.toArray(value);
-    for (let v of valueArray) {
-      if (v) {
-        if (this.props.valueOnly) {
-          result.push(v);
-        } else {
-          let vs = v.split("@R@");
-          if (vs[1] != "null") {
-            result.push(vs[0]);
-          }
-        }
-      }
-    }
-    return result;
-  };
-
-  toArray = (value) => {
-    let valueArray: string[] = [];
-    if (value instanceof Array) {
-      valueArray = value;
-    } else {
-      if (value) {
-        valueArray = value.split("@,@");
-      } else {
-        valueArray = [];
-      }
-    }
-
-    return valueArray;
-  };
-
-  toOptions = (value, onEntityClick) => {
-    const { fieldConfig, valueOnly } = this.props;
-    let options: object[] = [];
-    let valueArray: string[] = this.toArray(value);
-    let values = [];
-    for (let v of valueArray) {
-      if (v) {
-        if (valueOnly) {
-          if (values.includes(v)) {
-          } else {
-            options.push(this.toOption(v, v, onEntityClick));
-            values.push(v);
-          }
-        } else {
-          let vs = v.split("@R@");
-          if (vs[1] != "null") {
-            options.push(this.toOption(vs[0], vs[1], onEntityClick));
-          }
-        }
-      }
-    }
-
-    //添加补充项
-    if (fieldConfig.suppleOptions) {
-      fieldConfig.suppleOptions.forEach((o) => {
-        let had = false;
-        options.forEach((s) => {
-          if (s["value"] == o.code) {
-            had = true;
-            return;
-          }
-        });
-        if (!had) {
-          options.push(this.toOption(o.code, o.title, undefined));
-        }
-      });
-    }
-    return options;
-  };
-
-  fetchNextPage = async () => {
-
-    const { optionCacheKey, titleId, optionsCache } = this.state;
-    let optionCache = optionsCache[optionCacheKey];
-    let pageInfo = optionCache?.pageInfo;
-    if (optionCache && !optionCache.touchEnd) {
-      pageInfo.pageNo = pageInfo.pageNo + 1;
-      let dataSource = await this.loadData(
-        optionCache.queryKey.key,
-        { ...pageInfo },
-        titleId
-      );
-      if (dataSource) {
-        optionCache.options = [...optionCache.options, ...dataSource.options];
-        optionCache.touchEnd = dataSource.touchEnd;
-      }
-      optionsCache[optionCacheKey] = optionCache;
-      this.setState({ pageNo: pageInfo.pageNo, optionsCache: { ...optionsCache } });
-    }
-  };
-
-  fetchOptions = async (searchText: string, isInit?: boolean) => {
-    const { fieldConfig, mainCode, baseCriteria: p_baseCriteria, serverKey } = this.props;
-    const { optionsCache, ltmplConfig, preMainCode } = this.state;
-    let baseCriteria = p_baseCriteria ? p_baseCriteria : fieldConfig.baseCriteria;
-    const currentMainCode = mainCode ? mainCode : fieldConfig.mainCode;
-    if (preMainCode != currentMainCode) {
-      this.setState({ preMainCode: currentMainCode.toString() });
-      //清空，
-      this.initCache();
-    }
-
-    let optionCacheKey = "withoutValue";
-    //先从缓存里拿
-    if (searchText) {
-      optionCacheKey = searchText;
-    }
-    let titleId = this.state.titleId;
-    let optionCache = optionsCache[optionCacheKey];
-    if (!optionCache) {
-      this.setState({
-        loading: true,
-        initLoading: isInit,
-      });
-      let ltmplConfig_ = ltmplConfig;
-      if (!ltmplConfig_) {
-        ltmplConfig_ = await this.loadLtmplConfig();
-      }
-      if (!ltmplConfig_) {
-        message.error("请配置正确查询页面", 5);
-        return;
-      }
-      let pageInfo = {
-        pageNo: 1,
-        pageSize: 6,
-        virtualEndPageNo: undefined,
-      };
-      titleId = ltmplConfig_.extDisplayConfig?.primaryColumn?.id;
-      //得到第一个过滤条件
-      let firstCriteria = ltmplConfig_.primaryCriteria;
-      let formItemName = "undefinedCriteria";
-      if (firstCriteria) {
-        formItemName = "c_" + firstCriteria.id;
-      }
-      const { defaultPageSize } = ltmplConfig_;
-      if (defaultPageSize) {
-        pageInfo.pageSize = defaultPageSize;
-      }
-
-      /** 构建 dataSource **/
-      //构建过滤条件
-      let criteriaData = {};
-      if (baseCriteria) {
-        criteriaData = { ...baseCriteria };
-      }
-
-      criteriaData[formItemName] = searchText;
-
-      let queryKey: QueryKey = await HcserviceV3.requestLtmplQueryKey(
-        fieldConfig.serverKey || serverKey,
-        fieldConfig.sourceId,
-        {
-          ...criteriaData,
-          ...pageInfo,
-          mainCode: currentMainCode == "none" ? undefined : currentMainCode,
-          exceptCodes: fieldConfig.relDeduplication ? fieldConfig.exceptCodes : undefined
-        }
-      );
-
-      let sourceData = await this.loadData(queryKey.key, pageInfo, titleId);
-      if (!sourceData) {
-        sourceData = {}
-      }
-      let expSourceData: LoadDataSource = sourceData ? { ...sourceData } : {};
-
-      while (!expSourceData.touchEnd && sourceData?.options?.length < 10) {
-        pageInfo = { ...pageInfo, pageNo: pageInfo.pageNo + 1 }
-        expSourceData = await this.loadData(queryKey.key, pageInfo, titleId);
-        sourceData.touchEnd = expSourceData?.touchEnd;
-        sourceData.options = [...sourceData.options, ...expSourceData?.options];
-      }
-
-      optionCache = {
-        options: sourceData.options,
-        pageInfo,
-        queryKey,
-        searchValue: searchText,
-        touchEnd: sourceData.touchEnd,
-      };
-      optionsCache[optionCacheKey] = optionCache;
-      this.setState({
-        optionCacheKey,
-        titleId,
-        optionsCache: { ...optionsCache },
-        loading: false,
-        initLoading: false
-      });
-      return sourceData.options;
-    } else {
-      if (
-        this.state.optionCacheKey == optionCacheKey &&
-        optionCacheKey == "withoutValue"
-      ) {
-        this.setState({
-          loading: false,
-          initLoading: false,
-          optionCacheKey,
-        });
-      } else {
-        debounce(() => {
-          this.setState({
-            loading: false,
-            initLoading: false,
-            optionCacheKey,
-          });
-        }, 500)();
-      }
-    }
-  };
-
-  onChange = (values: any[]) => {
-    const { codeLabel } = this.state;
-    const { maxSelected, valueOnly } = this.props;
-    let newValues: Array<string> = [...values];
-    //选够时自动关闭
-    if (values && values.length >= maxSelected) {
-      this.setState({ selectOpen: false })
-      this.selectRef?.current?.blur();
-    }
-    if (values && values.length > maxSelected) {
-      newValues.shift();
-    }
-    let formValues: Array<string> = [];
-
-    newValues.forEach((c) => {
-      if (valueOnly) {
-        if (c.indexOf("@R@") > 0) {
-          formValues.push(c.split("@R@")[1]);
-        } else {
-          formValues.push(codeLabel[c]);
-        }
-      } else {
-        if (c.indexOf("@R@") > 0) {
-          formValues.push(c);
-        } else {
-          formValues.push(c + "@R@" + codeLabel[c]);
-        }
-      }
-
-    });
-    this.props.onChange(formValues.join("@,@"));
-  };
-
-  tagRender = (props) => {
-    const { label, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    return (
-      <Tag
-        onMouseDown={onPreventMouseDown}
-        closable={closable}
-        onClose={onClose}
-        style={{ marginRight: 3 }}
-      >
-        {label}
-      </Tag>
-    );
-  };
-
-  loadData = async (
-    queryKey: string,
-    pageInfo: PageInfo,
-    titleId: string
-  ): Promise<LoadDataSource> => {
-    const { onEntityClick, baseCriteria: p_baseCriteria, serverKey, fieldConfig } = this.props;
-    let baseCriteria = p_baseCriteria ? p_baseCriteria : fieldConfig.baseCriteria;
-    let queryData: QueryData = await HcserviceV3.requestQueryData(
-      fieldConfig.serverKey ? fieldConfig.serverKey : serverKey,
-      queryKey,
-      pageInfo
-    );
-    let titles = [];
-    let options: object[] = [];
-    if (!queryData) {
-      return;
-    }
-    pageInfo = queryData?.pageInfo;
-    if (queryData?.entities) {
-      queryData.entities.forEach((item, index) => {
-        let title = item.fieldMap[titleId];
-        //放入全局对象缓存
-        //这个缓存后续还需要完善，因为太多了，容易爆掉
-        HCDataSource.cache(item);
-        if (title) {
-          let ts = title.split("@R@");
-          let t = ts && ts.length > 0 ? ts[ts.length - 1] : title;
-          if (t != "null") {
-            let idCode = undefined;
-            if (fieldConfig.optionCodeColId) {
-              idCode = item.fieldMap[fieldConfig.optionCodeColId];
-              if (idCode) {
-                let idCodes = idCode.split("@R@");
-                idCode = idCodes && idCodes.length > 0 ? idCodes[0] : idCode;
-              }
-            } else {
-              idCode = item.code;
-            }
-            if (this.props.valueOnly && titles.includes(t)) {
-              return;
-            }
-            titles.push(title);
-            let option = this.toOption(idCode, t, onEntityClick);
-            options.push(option);
-          }
-        }
-      });
-    }
-
-    return { options, touchEnd: queryData?.touchEnd };
-  };
-
-  debounceFetcher = debounce(this.fetchOptions, 500);
-
-  debounceFetchNextPage = () => {
-    debounce(this.fetchNextPage, 200)();
-  };
-
-  render() {
-    const {
-      id,
-      value,
-      fieldConfig,
-      disabled,
-      style,
-      onEntityClick,
-      mainCode,
-      serverKey: pServerKey, valueOnly
-    } = this.props;
-    const { actions } = fieldConfig;
-    const {
-      optionCacheKey,
-      loading,
-      initLoading,
-      optionsCache,
-      drawCode,
-      showEdit,
-      showView,
-      showTable,
-      ltmplConfig, selectOpen, useSelectOpenStat,
-    } = this.state;
-    const { translate } = this.context;
-
-    let serverKey = fieldConfig.serverKey ? fieldConfig.serverKey : pServerKey;
-    let initOptions = this.toOptions(value, onEntityClick);
-    let exists;
-    let disvalues = []
-    let properOptions = [...initOptions];
-    let listHeight = 256;
-    if (optionCacheKey && optionsCache[optionCacheKey]) {
-      let optionCache = optionsCache[optionCacheKey];
-      if (optionCache["pageInfo"] && optionCache.pageInfo.pageSize < 8) {
-        listHeight = 32 * optionCache["pageInfo"].pageSize - 10;
-      }
-      for (let option of optionCache.options) {
-        exists = false;
-        for (let init of initOptions) {
-          if (init["value"] == option["value"]) {
-            exists = true;
-            //用查询的覆盖之前的
-            init["label"] = option["label"];
-          }
-        }
-        if (!exists) {
-          if (valueOnly && disvalues.includes(option["value"])) {
-          } else {
-            disvalues.push(option["value"]);
-            properOptions.push(option);
-          }
-        }
-      }
-    }
-    if (disabled && value) {
-      return <Rfield {...this.props} />
-    }
-
-    // 选择框获取焦点
-    const handleOnFocus = async () => {
-      if (fieldConfig.configChanged) {
-        this.initCache()
-      }
-      this.setState({ selectOpen: true });
-      const temOptions = await this.fetchOptions(undefined, true);
-      if (fieldConfig.defaultSelectFirst && !value) { // 获取焦点，默认选中第一个
-        const temArr = temOptions?.length ? temOptions : properOptions || [];
-        if (temArr?.length) {
-          this.onChange([temArr[0].value]);
-        }
-      }
-    }
-
-    return (
-      <>
-        <Select
-          disabled={disabled}
-          defaultActiveFirstOption={false}
-          id={id}
-          listHeight={listHeight}
-          style={{ ...style }}
-          onChange={this.onChange}
-          value={this.toValueArray(value)}
-          mode={"multiple"}
-          placeholder={translate("${请选择}${" + (fieldConfig.placeholder || fieldConfig.title) + "}")}
-          notFoundContent={
-            loading ? <Spin size={"small"}></Spin> : translate("${无数据或手动刷新}")
-          }
-          allowClear={true}
-          suffixIcon={<SearchOutlined />}
-          filterOption={false}
-          onFocus={handleOnFocus}
-
-          open={useSelectOpenStat ? selectOpen : undefined}
-          popupRender={this.dropdownRender}
-          tagRender={
-            actions?.some(r => ["detail", "edit"].includes(r))
-              ? this.tagRender
-              : undefined
-          }
-          onSearch={this.debounceFetcher}
-          showSearch={!initLoading}
-          ref={this.selectRef}
-          options={loading ? [] : properOptions}
-          onPopupScroll={(e) => {
-            const { target } = e;
-            if (
-              target["scrollTop"] + target["offsetHeight"] + 1 >=
-              target["scrollHeight"]
-            ) {
-              this.debounceFetchNextPage();
-            }
-          }}
-        ></Select>
-        {showView && drawCode ? (
-          <DtmplViewDrawer
-            serverKey={serverKey}
-            placement={"left"}
-            onClose={this.doClose}
-            open={showView}
-            sourceId={fieldConfig.sourceId}
-            code={drawCode}
-          ></DtmplViewDrawer>
-        ) : null}
-        {showEdit && ltmplConfig ? (
-          ltmplConfig.customEditPagePath ? (
-            <DtmplCustomEditModalPage
-              open={showEdit}
-              onOk={() => {
-                this.drawSubmited();
-              }}
-              customPath={ltmplConfig.customEditPagePath}
-              sourceId={fieldConfig.sourceId}
-              mainCode={mainCode}
-              code={drawCode}
-            />
-          ) : (
-            <DtmplEditPage
-              defaultDtmplData={fieldConfig.defaultDtmplData}
-              serverKey={serverKey}
-              pageType={"modal"}
-              open={showEdit}
-              onCancel={this.doClose}
-              mainCode={mainCode}
-              sourceId={fieldConfig.sourceId}
-              code={drawCode}
-              onOk={this.drawSubmited}
-            />
-          )
-        ) : null}
-        {showTable ? (
-          <LtmplModal
-            serverKey={serverKey}
-            open={showTable}
-            height={"76vh"}
-            onCancel={this.closeTable}
-            sourceId={fieldConfig.sourceId}
-            mainCode={mainCode}
-          />
-        ) : null}
-      </>
-    );
-  }
-}
+import * as React from "react";
+import { Button, Col, Divider, message, Row, Select, Space, Spin, Tag } from "antd";
+import {
+  EControlProps,
+  LtmplConfig,
+  PageInfo,
+  QueryData,
+  QueryKey,
+} from "../../tmpl/interface";
+import {
+  AlignLeftOutlined, ArrowDownOutlined, CloseOutlined,
+  EditOutlined,
+  PlusOutlined,
+  RedoOutlined,
+  SearchOutlined,
+  TableOutlined,
+} from "@ant-design/icons";
+import debounce from "lodash/debounce";
+import "./index.css";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import HCDataSource from "../../tmpl/hc-data-source";
+import DtmplViewDrawer from "../../module/dtmpl-view-drawer";
+import DtmplEditPage from "../../module/dtmpl-edit-page";
+import DtmplCustomEditModalPage from "../../custom-page/dtmpl-custom-edit-modal-page";
+import { LtmplModal } from "../../index";
+import { LocaleContext } from "../../locale/LocaleProvider";
+import Rfield from "../rfield";
+
+interface InnerEntitySelectProps extends EControlProps {
+  maxSelected?: number;
+  onEntityClick?: (code: string) => void;
+  baseCriteria: object;// 已启动弃用计划。全部通过 fieldConfig来控制
+  valueOnly?: boolean;
+}
+
+interface InnerEntitySelectState {
+  titleId?: string;
+  optionCacheKey?: string;
+  pageNo?: number;
+  loading?: boolean;
+  initLoading?: boolean;
+  optionsCache?: object;
+  codeLabel?: object;
+  ltmplConfig?: LtmplConfig;
+  showView?: boolean;
+  drawCode?: string;
+  showEdit?: boolean;
+  showTable?: boolean;
+  preMainCode?: string;
+  selectOpen?: boolean;
+  useSelectOpenStat?: boolean;
+  isDoingSomething?: boolean;
+}
+
+type OptionCache = {
+  queryKey?: QueryKey;
+  pageInfo?: PageInfo;
+  touchEnd?: boolean;
+  options?: any;
+  searchValue?: string;
+  optionCacheKey?: string;
+};
+
+type LoadDataSource = {
+  options?: any[];
+  touchEnd?: boolean;
+};
+
+export default class EntitySelect extends React.PureComponent<
+  InnerEntitySelectProps,
+  InnerEntitySelectState
+> {
+  static defaultProps = {
+    maxSelected: 100,
+    valueOnly: false,
+  };
+
+  state = {
+    titleId: undefined,
+    optionCacheKey: undefined,
+    pageNo: 1,
+    loading: false,
+    initLoading: false,
+    optionsCache: {},
+    codeLabel: {},
+    ltmplConfig: undefined,
+    showView: false,
+    showEdit: false,
+    showTable: false,
+    drawCode: undefined,
+    preMainCode: undefined,
+    selectOpen: false,
+    isDoingSomething: false,
+    useSelectOpenStat: true,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  selectRef = React.createRef<{ focus: () => any, blur: () => any, scrollTo, nativeElement }>();
+
+  dropdownRender = (menu) => {
+    const { fieldConfig } = this.props;
+    const { actions } = fieldConfig;
+    const { useSelectOpenStat } = this.state;
+
+    return (
+      <>
+        {menu}
+        {
+          <>
+            <Divider style={{ margin: "8px 0" }} />
+            <Row justify={"end"}>
+              <Col>
+                <Space align={"end"}>
+                  {actions && actions.indexOf("table") >= 0 ? (
+                    <Button
+                      icon={<TableOutlined style={{ color: "#0958d9" }} />}
+                      onClick={() => this.showTable()}
+                    ></Button>
+                  ) : null}
+                  {actions && actions.indexOf("add") >= 0 ? (
+                    <Button
+                      icon={<PlusOutlined style={{ color: "#0958d9" }} />}
+                      onClick={() => this.editItem()}
+                    ></Button>
+
+                  ) : null}
+                  <Button
+                    icon={<ArrowDownOutlined style={{ color: "#0958d9" }} />}
+                    onClick={() => this.fetchNextPage()}
+                  ></Button>
+                  <Button
+                    icon={<RedoOutlined style={{ color: "#0958d9" }} />}
+                    onClick={() => {
+                      this.initCache();
+                      setTimeout(() => this.fetchOptions(undefined), 100)
+                    }}
+                  ></Button>
+                  {useSelectOpenStat ? <Button
+                    //type="primary"
+                    icon={<CloseOutlined />}
+                    onClick={() => { this.setState({ selectOpen: false }) }}
+                  ></Button> : null}
+                </Space>
+              </Col>
+            </Row>
+          </>
+        }
+      </>
+    );
+  };
+
+  editItem = async (code?) => {
+    let ltmplConfig = await this.loadLtmplConfig();
+    this.setState({
+      showEdit: true,
+      showTable: false,
+      showView: false,
+      drawCode: code,
+      ltmplConfig,
+    });
+  };
+
+  showTable = async () => {
+    this.setState({
+      showEdit: false,
+      showTable: true,
+      showView: false,
+      drawCode: undefined,
+    });
+  };
+
+  loadLtmplConfig = async () => {
+    const { fieldConfig, serverKey } = this.props;
+    const { ltmplConfig } = this.state;
+    let ltmplConfig_ = ltmplConfig;
+    if (!ltmplConfig_) {
+      ltmplConfig_ = (
+        await HCDataSource.requestLtmplConfig(
+          fieldConfig.serverKey ? fieldConfig.serverKey : serverKey,
+          fieldConfig.sourceId
+        )
+      )?.ltmplConfig;
+    }
+    this.setState({
+      ltmplConfig: ltmplConfig_,
+    });
+    return ltmplConfig_;
+  };
+
+  showItem = async (code) => {
+    let ltmplConfig = await this.loadLtmplConfig();
+    this.setState({
+      showEdit: false,
+      showTable: false,
+      showView: true,
+      drawCode: code,
+      ltmplConfig,
+    });
+  };
+
+  componentDidMount() {
+    const { maxSelected, fieldConfig } = this.props;
+    const { actions } = fieldConfig;
+    if (maxSelected > 1 || actions?.indexOf("table") >= 0 || actions?.indexOf("add") >= 0) {
+      this.setState({
+        useSelectOpenStat: false,
+      })
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const { baseCriteria: p_baseCriteria, mainCode, fieldConfig } = this.props;
+    let {
+      baseCriteria: p_preBaseCriteria,
+      mainCode: preMainCode,
+      fieldConfig: preFieldConfig,
+    } = prevProps;
+
+    let baseCriteria = p_baseCriteria ? p_baseCriteria : fieldConfig.baseCriteria;
+    let preBaseCriteria = p_preBaseCriteria ? p_preBaseCriteria : preFieldConfig.baseCriteria;
+    if (
+      (baseCriteria &&
+        JSON.stringify(baseCriteria) != JSON.stringify(preBaseCriteria)) ||
+      (mainCode && mainCode != preMainCode) ||
+      (fieldConfig && preFieldConfig && fieldConfig.id != preFieldConfig.id)
+      || (fieldConfig && fieldConfig.configChanged)
+    ) {
+      fieldConfig.configChanged = false;
+      this.initCache();
+    }
+  }
+
+  initCache = () => {
+    this.setState({
+      optionsCache: {},
+      codeLabel: {},
+    });
+  };
+
+  toOption = (code: string, title: string, onEntityClick) => {
+    const { fieldConfig, valueOnly } = this.props;
+    const { actions } = fieldConfig;
+    const { codeLabel } = this.state;
+    codeLabel[valueOnly ? title : code] = title;
+    let option = {
+      value: valueOnly ? title : code,
+      label: (
+        <>
+          {title}
+          {actions && actions.indexOf("detail") >= 0 ? (
+            <Button
+              size={"small"}
+              type={"text"}
+              onClick={(event) => {
+                event.stopPropagation();
+                this.showItem(code);
+              }}
+            >
+              <AlignLeftOutlined style={{ color: "#0958d9" }} />
+            </Button>
+          ) : null}
+
+          {actions && actions.indexOf("edit") >= 0 ? (
+            <Button
+              size={"small"}
+              type={"text"}
+              onClick={(event) => {
+                event.stopPropagation();
+                this.editItem(code);
+              }}
+            >
+              <EditOutlined style={{ color: "#0958d9" }} />
+            </Button>
+          ) : null}
+        </>
+      ),
+    };
+    return option;
+  };
+
+  doClose = () => {
+    this.setState({
+      drawCode: undefined,
+      showEdit: false,
+      showView: false,
+      showTable: false,
+    });
+  };
+
+  drawSubmited = (code?: string, isContinueSave?: boolean) => {
+    if (isContinueSave) {
+      this.setState({ drawCode: code });
+    } else {
+      this.doClose();
+    }
+    this.initCache();
+    this.selectRef.current.focus();
+    debounce(this.fetchOptions, 100)(undefined);
+  };
+
+  closeTable = () => {
+    this.drawSubmited();
+  };
+
+  toValueArray = (value) => {
+    let result = [];
+    let valueArray = this.toArray(value);
+    for (let v of valueArray) {
+      if (v) {
+        if (this.props.valueOnly) {
+          result.push(v);
+        } else {
+          let vs = v.split("@R@");
+          if (vs[1] != "null") {
+            result.push(vs[0]);
+          }
+        }
+      }
+    }
+    return result;
+  };
+
+  toArray = (value) => {
+    let valueArray: string[] = [];
+    if (value instanceof Array) {
+      valueArray = value;
+    } else {
+      if (value) {
+        valueArray = value.split("@,@");
+      } else {
+        valueArray = [];
+      }
+    }
+
+    return valueArray;
+  };
+
+  toOptions = (value, onEntityClick) => {
+    const { fieldConfig, valueOnly } = this.props;
+    let options: object[] = [];
+    let valueArray: string[] = this.toArray(value);
+    let values = [];
+    for (let v of valueArray) {
+      if (v) {
+        if (valueOnly) {
+          if (values.includes(v)) {
+          } else {
+            options.push(this.toOption(v, v, onEntityClick));
+            values.push(v);
+          }
+        } else {
+          let vs = v.split("@R@");
+          if (vs[1] != "null") {
+            options.push(this.toOption(vs[0], vs[1], onEntityClick));
+          }
+        }
+      }
+    }
+
+    //添加补充项
+    if (fieldConfig.suppleOptions) {
+      fieldConfig.suppleOptions.forEach((o) => {
+        let had = false;
+        options.forEach((s) => {
+          if (s["value"] == o.code) {
+            had = true;
+            return;
+          }
+        });
+        if (!had) {
+          options.push(this.toOption(o.code, o.title, undefined));
+        }
+      });
+    }
+    return options;
+  };
+
+  fetchNextPage = async () => {
+
+    const { optionCacheKey, titleId, optionsCache } = this.state;
+    let optionCache = optionsCache[optionCacheKey];
+    let pageInfo = optionCache?.pageInfo;
+    if (optionCache && !optionCache.touchEnd) {
+      pageInfo.pageNo = pageInfo.pageNo + 1;
+      let dataSource = await this.loadData(
+        optionCache.queryKey.key,
+        { ...pageInfo },
+        titleId
+      );
+      if (dataSource) {
+        optionCache.options = [...optionCache.options, ...dataSource.options];
+        optionCache.touchEnd = dataSource.touchEnd;
+      }
+      optionsCache[optionCacheKey] = optionCache;
+      this.setState({ pageNo: pageInfo.pageNo, optionsCache: { ...optionsCache } });
+    }
+  };
+
+  fetchOptions = async (searchText: string, isInit?: boolean) => {
+    const { fieldConfig, mainCode, baseCriteria: p_baseCriteria, serverKey } = this.props;
+    const { optionsCache, ltmplConfig, preMainCode } = this.state;
+    let baseCriteria = p_baseCriteria ? p_baseCriteria : fieldConfig.baseCriteria;
+    const currentMainCode = mainCode ? mainCode : fieldConfig.mainCode;
+    if (preMainCode != currentMainCode) {
+      this.setState({ preMainCode: currentMainCode.toString() });
+      //清空，
+      this.initCache();
+    }
+
+    let optionCacheKey = "withoutValue";
+    //先从缓存里拿
+    if (searchText) {
+      optionCacheKey = searchText;
+    }
+    let titleId = this.state.titleId;
+    let optionCache = optionsCache[optionCacheKey];
+    if (!optionCache) {
+      this.setState({
+        loading: true,
+        initLoading: isInit,
+      });
+      let ltmplConfig_ = ltmplConfig;
+      if (!ltmplConfig_) {
+        ltmplConfig_ = await this.loadLtmplConfig();
+      }
+      if (!ltmplConfig_) {
+        message.error("请配置正确查询页面", 5);
+        return;
+      }
+      let pageInfo = {
+        pageNo: 1,
+        pageSize: 6,
+        virtualEndPageNo: undefined,
+      };
+      titleId = ltmplConfig_.extDisplayConfig?.primaryColumn?.id;
+      //得到第一个过滤条件
+      let firstCriterion = ltmplConfig_.primaryCriterion;
+      let formItemName = "undefinedCriteria";
+      if (firstCriterion) {
+        formItemName = "c_" + firstCriterion.id;
+      }
+      const { defaultPageSize } = ltmplConfig_;
+      if (defaultPageSize) {
+        pageInfo.pageSize = defaultPageSize;
+      }
+
+      /** 构建 dataSource **/
+      //构建过滤条件
+      let criteriaData = {};
+      if (baseCriteria) {
+        criteriaData = { ...baseCriteria };
+      }
+
+      criteriaData[formItemName] = searchText;
+
+      let queryKey: QueryKey = await HcserviceV3.requestLtmplQueryKey(
+        fieldConfig.serverKey || serverKey,
+        fieldConfig.sourceId,
+        {
+          ...criteriaData,
+          ...pageInfo,
+          mainCode: currentMainCode == "none" ? undefined : currentMainCode,
+          exceptCodes: fieldConfig.relDeduplication ? fieldConfig.exceptCodes : undefined
+        }
+      );
+
+      let sourceData = await this.loadData(queryKey.key, pageInfo, titleId);
+      if (!sourceData) {
+        sourceData = {}
+      }
+      let expSourceData: LoadDataSource = sourceData ? { ...sourceData } : {};
+
+      while (!expSourceData.touchEnd && sourceData?.options?.length < 10) {
+        pageInfo = { ...pageInfo, pageNo: pageInfo.pageNo + 1 }
+        expSourceData = await this.loadData(queryKey.key, pageInfo, titleId);
+        sourceData.touchEnd = expSourceData?.touchEnd;
+        sourceData.options = [...sourceData.options, ...expSourceData?.options];
+      }
+
+      optionCache = {
+        options: sourceData.options,
+        pageInfo,
+        queryKey,
+        searchValue: searchText,
+        touchEnd: sourceData.touchEnd,
+      };
+      optionsCache[optionCacheKey] = optionCache;
+      this.setState({
+        optionCacheKey,
+        titleId,
+        optionsCache: { ...optionsCache },
+        loading: false,
+        initLoading: false
+      });
+      return sourceData.options;
+    } else {
+      if (
+        this.state.optionCacheKey == optionCacheKey &&
+        optionCacheKey == "withoutValue"
+      ) {
+        this.setState({
+          loading: false,
+          initLoading: false,
+          optionCacheKey,
+        });
+      } else {
+        debounce(() => {
+          this.setState({
+            loading: false,
+            initLoading: false,
+            optionCacheKey,
+          });
+        }, 500)();
+      }
+    }
+  };
+
+  onChange = (values: any[]) => {
+    const { codeLabel } = this.state;
+    const { maxSelected, valueOnly } = this.props;
+    let newValues: Array<string> = [...values];
+    //选够时自动关闭
+    if (values && values.length >= maxSelected) {
+      this.setState({ selectOpen: false })
+      this.selectRef?.current?.blur();
+    }
+    if (values && values.length > maxSelected) {
+      newValues.shift();
+    }
+    let formValues: Array<string> = [];
+
+    newValues.forEach((c) => {
+      if (valueOnly) {
+        if (c.indexOf("@R@") > 0) {
+          formValues.push(c.split("@R@")[1]);
+        } else {
+          formValues.push(codeLabel[c]);
+        }
+      } else {
+        if (c.indexOf("@R@") > 0) {
+          formValues.push(c);
+        } else {
+          formValues.push(c + "@R@" + codeLabel[c]);
+        }
+      }
+
+    });
+    this.props.onChange(formValues.join("@,@"));
+  };
+
+  tagRender = (props) => {
+    const { label, closable, onClose } = props;
+    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    return (
+      <Tag
+        onMouseDown={onPreventMouseDown}
+        closable={closable}
+        onClose={onClose}
+        style={{ marginRight: 3 }}
+      >
+        {label}
+      </Tag>
+    );
+  };
+
+  loadData = async (
+    queryKey: string,
+    pageInfo: PageInfo,
+    titleId: string
+  ): Promise<LoadDataSource> => {
+    const { onEntityClick, baseCriteria: p_baseCriteria, serverKey, fieldConfig } = this.props;
+    let baseCriteria = p_baseCriteria ? p_baseCriteria : fieldConfig.baseCriteria;
+    let queryData: QueryData = await HcserviceV3.requestQueryData(
+      fieldConfig.serverKey ? fieldConfig.serverKey : serverKey,
+      queryKey,
+      pageInfo
+    );
+    let titles = [];
+    let options: object[] = [];
+    if (!queryData) {
+      return;
+    }
+    pageInfo = queryData?.pageInfo;
+    if (queryData?.entities) {
+      queryData.entities.forEach((item, index) => {
+        let title = item.fieldMap[titleId];
+        //放入全局对象缓存
+        //这个缓存后续还需要完善，因为太多了，容易爆掉
+        HCDataSource.cache(item);
+        if (title) {
+          let ts = title.split("@R@");
+          let t = ts && ts.length > 0 ? ts[ts.length - 1] : title;
+          if (t != "null") {
+            let idCode = undefined;
+            if (fieldConfig.optionCodeColId) {
+              idCode = item.fieldMap[fieldConfig.optionCodeColId];
+              if (idCode) {
+                let idCodes = idCode.split("@R@");
+                idCode = idCodes && idCodes.length > 0 ? idCodes[0] : idCode;
+              }
+            } else {
+              idCode = item.code;
+            }
+            if (this.props.valueOnly && titles.includes(t)) {
+              return;
+            }
+            titles.push(title);
+            let option = this.toOption(idCode, t, onEntityClick);
+            options.push(option);
+          }
+        }
+      });
+    }
+
+    return { options, touchEnd: queryData?.touchEnd };
+  };
+
+  debounceFetcher = debounce(this.fetchOptions, 500);
+
+  debounceFetchNextPage = () => {
+    debounce(this.fetchNextPage, 200)();
+  };
+
+  render() {
+    const {
+      id,
+      value,
+      fieldConfig,
+      disabled,
+      style,
+      onEntityClick,
+      mainCode,
+      serverKey: pServerKey, valueOnly
+    } = this.props;
+    const { actions } = fieldConfig;
+    const {
+      optionCacheKey,
+      loading,
+      initLoading,
+      optionsCache,
+      drawCode,
+      showEdit,
+      showView,
+      showTable,
+      ltmplConfig, selectOpen, useSelectOpenStat,
+    } = this.state;
+    const { translate } = this.context;
+
+    let serverKey = fieldConfig.serverKey ? fieldConfig.serverKey : pServerKey;
+    let initOptions = this.toOptions(value, onEntityClick);
+    let exists;
+    let disvalues = []
+    let properOptions = [...initOptions];
+    let listHeight = 256;
+    if (optionCacheKey && optionsCache[optionCacheKey]) {
+      let optionCache = optionsCache[optionCacheKey];
+      if (optionCache["pageInfo"] && optionCache.pageInfo.pageSize < 8) {
+        listHeight = 32 * optionCache["pageInfo"].pageSize - 10;
+      }
+      for (let option of optionCache.options) {
+        exists = false;
+        for (let init of initOptions) {
+          if (init["value"] == option["value"]) {
+            exists = true;
+            //用查询的覆盖之前的
+            init["label"] = option["label"];
+          }
+        }
+        if (!exists) {
+          if (valueOnly && disvalues.includes(option["value"])) {
+          } else {
+            disvalues.push(option["value"]);
+            properOptions.push(option);
+          }
+        }
+      }
+    }
+    if (disabled && value) {
+      return <Rfield {...this.props} />
+    }
+
+    // 选择框获取焦点
+    const handleOnFocus = async () => {
+      if (fieldConfig.configChanged) {
+        this.initCache()
+      }
+      this.setState({ selectOpen: true });
+      const temOptions = await this.fetchOptions(undefined, true);
+      if (fieldConfig.defaultSelectFirst && !value) { // 获取焦点，默认选中第一个
+        const temArr = temOptions?.length ? temOptions : properOptions || [];
+        if (temArr?.length) {
+          this.onChange([temArr[0].value]);
+        }
+      }
+    }
+
+    return (
+      <>
+        <Select
+          disabled={disabled}
+          defaultActiveFirstOption={false}
+          id={id}
+          listHeight={listHeight}
+          style={{ ...style }}
+          onChange={this.onChange}
+          value={this.toValueArray(value)}
+          mode={"multiple"}
+          placeholder={translate("${请选择}${" + (fieldConfig.placeholder || fieldConfig.title) + "}")}
+          notFoundContent={
+            loading ? <Spin size={"small"}></Spin> : translate("${无数据或手动刷新}")
+          }
+          allowClear={true}
+          suffixIcon={<SearchOutlined />}
+          filterOption={false}
+          onFocus={handleOnFocus}
+
+          open={useSelectOpenStat ? selectOpen : undefined}
+          popupRender={this.dropdownRender}
+          tagRender={
+            actions?.some(r => ["detail", "edit"].includes(r))
+              ? this.tagRender
+              : undefined
+          }
+          onSearch={this.debounceFetcher}
+          showSearch={!initLoading}
+          ref={this.selectRef}
+          options={loading ? [] : properOptions}
+          onPopupScroll={(e) => {
+            const { target } = e;
+            if (
+              target["scrollTop"] + target["offsetHeight"] + 1 >=
+              target["scrollHeight"]
+            ) {
+              this.debounceFetchNextPage();
+            }
+          }}
+        ></Select>
+        {showView && drawCode ? (
+          <DtmplViewDrawer
+            serverKey={serverKey}
+            placement={"left"}
+            onClose={this.doClose}
+            open={showView}
+            sourceId={fieldConfig.sourceId}
+            code={drawCode}
+          ></DtmplViewDrawer>
+        ) : null}
+        {showEdit && ltmplConfig ? (
+          ltmplConfig.customEditPagePath ? (
+            <DtmplCustomEditModalPage
+              open={showEdit}
+              onOk={() => {
+                this.drawSubmited();
+              }}
+              customPath={ltmplConfig.customEditPagePath}
+              sourceId={fieldConfig.sourceId}
+              mainCode={mainCode}
+              code={drawCode}
+            />
+          ) : (
+            <DtmplEditPage
+              defaultDtmplData={fieldConfig.defaultDtmplData}
+              serverKey={serverKey}
+              pageType={"modal"}
+              open={showEdit}
+              onCancel={this.doClose}
+              mainCode={mainCode}
+              sourceId={fieldConfig.sourceId}
+              code={drawCode}
+              onOk={this.drawSubmited}
+            />
+          )
+        ) : null}
+        {showTable ? (
+          <LtmplModal
+            serverKey={serverKey}
+            open={showTable}
+            height={"76vh"}
+            onCancel={this.closeTable}
+            sourceId={fieldConfig.sourceId}
+            mainCode={mainCode}
+          />
+        ) : null}
+      </>
+    );
+  }
+}