aldehyde 0.2.197 → 0.2.199

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

@@ -1,723 +1,724 @@
-import * as React from "react";
-import { Button, Col, Divider, message, Row, Select, Spin, Tag } from "antd";
-import {
-  EControlProps,
-  LtmplConfig,
-  PageInfo,
-  QueryData,
-  QueryKey,
-} from "../../tmpl/interface";
-import {
-  AlignLeftOutlined,
-  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 { CustomTagProps } from "rc-select/lib/BaseSelect";
-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;
-  valueOnly?:boolean;
-}
-
-interface InnerEntitySelectState {
-  titleId?: string;
-  optionCacheKey?: string;
-  pageNo?: number;
-  loading?: boolean;
-  optionsCache?: object;
-  codeLabel?: object;
-  ltmplConfig?: LtmplConfig;
-  showView?: boolean;
-  drawCode?: string;
-  showEdit?: boolean;
-  showTable?: boolean;
-  preMainCode?: string;
-}
-
-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,
-    optionsCache: {},
-    codeLabel: {},
-    ltmplConfig: undefined,
-    showView: false,
-    showEdit: false,
-    showTable: false,
-    drawCode: undefined,
-    preMainCode: undefined,
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  dropdownRender = (menu) => {
-    const { fieldConfig } = this.props;
-    const { actions } = fieldConfig;
-    // console.log("menu",menu);
-    return (
-      <>
-        {menu}
-        {
-          <>
-            <Divider style={{ margin: "8px 0" }} />
-            <Row justify="end">
-              {actions && actions.indexOf("table") >= 0 ? (
-                <Col>
-                  <Button
-                    type="text"
-                    icon={<TableOutlined style={{ color: "#0958d9" }} />}
-                    onClick={() => this.showTable()}
-                  ></Button>
-                </Col>
-              ) : null}
-              {actions && actions.indexOf("add") >= 0 ? (
-                <Col>
-                  <Button
-                    type="text"
-                    icon={<PlusOutlined style={{ color: "#0958d9" }} />}
-                    onClick={() => this.editItem()}
-                  ></Button>
-                </Col>
-              ) : null}
-              <Col>
-                <Button
-                  type="text"
-                  icon={<RedoOutlined style={{ color: "#0958d9" }} />}
-                  onClick={() => this.initCache()}
-                ></Button>
-              </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 ? fieldConfig.sourceId : fieldConfig.id
-        )
-      ).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,
-    });
-  };
-
-  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)
-    ) {
-      this.initCache();
-    }
-  }
-
-  initCache = () => {
-    this.setState({
-      optionsCache: {},
-      codeLabel: {},
-    });
-  };
-
-  // componentWillUnmount(): void {
-  //     this.setState=(state,callback)=>{
-  //         return
-  //     }
-  // }
-
-  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 = () => {
-    this.initCache();
-    this.doClose();
-  };
-
-  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);
-    for (let v of valueArray) {
-      if (v) {
-        if(valueOnly){
-            options.push(this.toOption(v, v, onEntityClick));
-        }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.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;
-      }
-      this.setState({
-        pageNo: pageInfo.pageNo,
-      });
-    }
-  };
-
-  fetchOptions = async (searchText) => {
-    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,
-      });
-      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_.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 ? fieldConfig.serverKey : serverKey,
-        fieldConfig.sourceId,
-        {
-          ...criteriaData,
-          ...pageInfo,
-          mainCode: currentMainCode,
-        }
-      );
-      let sourceData = await this.loadData(queryKey.key, pageInfo, titleId);
-
-      optionCache = {
-        options: sourceData.options,
-        pageInfo,
-        queryKey,
-        searchValue: searchText,
-        touchEnd: sourceData.touchEnd,
-      };
-      optionsCache[optionCacheKey] = optionCache;
-      this.setState({
-        optionCacheKey,
-        titleId,
-        optionsCache: { ...optionsCache },
-        loading: false,
-      });
-    } else {
-      if (
-        this.state.optionCacheKey == optionCacheKey &&
-        optionCacheKey == "withoutValue"
-      ) {
-        this.setState({
-          loading: false,
-          optionCacheKey,
-        });
-      } else {
-        debounce(() => {
-          this.setState({
-            loading: 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) {
-      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: CustomTagProps) => {
-    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 options: object[] = [];
-    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;
-            }
-            let option = this.toOption(idCode, t, onEntityClick);
-            options.push(option);
-          }
-        }
-      });
-    }
-
-    return { options, touchEnd: queryData.touchEnd };
-  };
-
-  debounceFetcher = () => {
-    const loadOptions = (val) => {
-      this.fetchOptions(val);
-    };
-    return debounce(loadOptions, 800);
-  };
-
-  debounceFetchNextPage = () => {
-    // this.setState({
-    //     loading: true,
-    // })
-    debounce(this.fetchNextPage, 200)();
-    // this.setState({
-    //     loading: false,
-    // })
-  };
-
-  render() {
-    const {
-      id,
-      value,
-      fieldConfig,
-      onChange,
-      disabled,
-      style,
-      maxSelected,
-      onEntityClick,
-      mainCode,
-      serverKey: pServerKey,
-    } = this.props;
-    const { actions } = fieldConfig;
-    const {
-      optionCacheKey,
-      loading,
-      optionsCache,
-      drawCode,
-      showEdit,
-      showView,
-      showTable,
-      ltmplConfig,
-    } = this.state;
-    const { translate } = this.context;
-
-    let serverKey = fieldConfig.serverKey ? fieldConfig.serverKey : pServerKey;
-
-    let initOptions = this.toOptions(value, onEntityClick);
-    let exists;
-    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) {
-          properOptions.push(option);
-        }
-      }
-    }
-    if(disabled && value){
-      return <Rfield {...this.props} />
-    }
-
-    return (
-      <>
-        <Select
-          disabled={disabled}
-          id={id}
-          listHeight={listHeight}
-          style={{ ...style }}
-          onChange={this.onChange}
-          value={this.toValueArray(value)}
-          mode={"multiple"}
-          // maxCount={maxSelected}
-          placeholder={translate("${请选择}${" + fieldConfig.title + "}")}
-          notFoundContent={
-            loading ? <Spin size={"small"}></Spin> : translate("${无数据}")
-          }
-          allowClear={true}
-          showArrow={true}
-          suffixIcon={<SearchOutlined />}
-          filterOption={false}
-          dropdownRender={this.dropdownRender}
-          tagRender={
-            actions &&
-            (actions.indexOf("detail") >= 0 || actions.indexOf("edit") >= 0)
-              ? this.tagRender
-              : undefined
-          }
-          onSearch={this.debounceFetcher()}
-          onClick={
-            disabled
-              ? null
-              : () => {
-                  debounce(this.fetchOptions, 100)(undefined);
-                }
-          }
-          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, Spin, Tag } from "antd";
+import {
+  EControlProps,
+  LtmplConfig,
+  PageInfo,
+  QueryData,
+  QueryKey,
+} from "../../tmpl/interface";
+import {
+  AlignLeftOutlined,
+  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 { CustomTagProps } from "rc-select/lib/BaseSelect";
+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;
+  valueOnly?:boolean;
+}
+
+interface InnerEntitySelectState {
+  titleId?: string;
+  optionCacheKey?: string;
+  pageNo?: number;
+  loading?: boolean;
+  optionsCache?: object;
+  codeLabel?: object;
+  ltmplConfig?: LtmplConfig;
+  showView?: boolean;
+  drawCode?: string;
+  showEdit?: boolean;
+  showTable?: boolean;
+  preMainCode?: string;
+}
+
+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,
+    optionsCache: {},
+    codeLabel: {},
+    ltmplConfig: undefined,
+    showView: false,
+    showEdit: false,
+    showTable: false,
+    drawCode: undefined,
+    preMainCode: undefined,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  dropdownRender = (menu) => {
+    const { fieldConfig } = this.props;
+    const { actions } = fieldConfig;
+    // console.log("menu",menu);
+    return (
+      <>
+        {menu}
+        {
+          <>
+            <Divider style={{ margin: "8px 0" }} />
+            <Row justify="end">
+              {actions && actions.indexOf("table") >= 0 ? (
+                <Col>
+                  <Button
+                    type="text"
+                    icon={<TableOutlined style={{ color: "#0958d9" }} />}
+                    onClick={() => this.showTable()}
+                  ></Button>
+                </Col>
+              ) : null}
+              {actions && actions.indexOf("add") >= 0 ? (
+                <Col>
+                  <Button
+                    type="text"
+                    icon={<PlusOutlined style={{ color: "#0958d9" }} />}
+                    onClick={() => this.editItem()}
+                  ></Button>
+                </Col>
+              ) : null}
+              <Col>
+                <Button
+                  type="text"
+                  icon={<RedoOutlined style={{ color: "#0958d9" }} />}
+                  onClick={() => this.initCache()}
+                ></Button>
+              </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 ? fieldConfig.sourceId : fieldConfig.id
+        )
+      ).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,
+    });
+  };
+
+  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)
+    ) {
+      this.initCache();
+    }
+  }
+
+  initCache = () => {
+    this.setState({
+      optionsCache: {},
+      codeLabel: {},
+    });
+  };
+
+  // componentWillUnmount(): void {
+  //     this.setState=(state,callback)=>{
+  //         return
+  //     }
+  // }
+
+  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 = () => {
+    this.initCache();
+    this.doClose();
+  };
+
+  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);
+    for (let v of valueArray) {
+      if (v) {
+        if(valueOnly){
+            options.push(this.toOption(v, v, onEntityClick));
+        }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.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;
+      }
+      this.setState({
+        pageNo: pageInfo.pageNo,
+      });
+    }
+  };
+
+  fetchOptions = async (searchText) => {
+    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,
+      });
+      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_.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 ? fieldConfig.serverKey : serverKey,
+        fieldConfig.sourceId,
+        {
+          ...criteriaData,
+          ...pageInfo,
+          mainCode: currentMainCode,
+        }
+      );
+      let sourceData = await this.loadData(queryKey.key, pageInfo, titleId);
+
+      optionCache = {
+        options: sourceData.options,
+        pageInfo,
+        queryKey,
+        searchValue: searchText,
+        touchEnd: sourceData.touchEnd,
+      };
+      optionsCache[optionCacheKey] = optionCache;
+      this.setState({
+        optionCacheKey,
+        titleId,
+        optionsCache: { ...optionsCache },
+        loading: false,
+      });
+    } else {
+      if (
+        this.state.optionCacheKey == optionCacheKey &&
+        optionCacheKey == "withoutValue"
+      ) {
+        this.setState({
+          loading: false,
+          optionCacheKey,
+        });
+      } else {
+        debounce(() => {
+          this.setState({
+            loading: 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) {
+      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: CustomTagProps) => {
+    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 options: object[] = [];
+    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;
+            }
+            let option = this.toOption(idCode, t, onEntityClick);
+            options.push(option);
+          }
+        }
+      });
+    }
+
+    return { options, touchEnd: queryData.touchEnd };
+  };
+
+  debounceFetcher = () => {
+    const loadOptions = (val) => {
+      this.fetchOptions(val);
+    };
+    return debounce(loadOptions, 800);
+  };
+
+  debounceFetchNextPage = () => {
+    // this.setState({
+    //     loading: true,
+    // })
+    debounce(this.fetchNextPage, 200)();
+    // this.setState({
+    //     loading: false,
+    // })
+  };
+
+  render() {
+    const {
+      id,
+      value,
+      fieldConfig,
+      onChange,
+      disabled,
+      style,
+      maxSelected,
+      onEntityClick,
+      mainCode,
+      serverKey: pServerKey,
+    } = this.props;
+    const { actions } = fieldConfig;
+    const {
+      optionCacheKey,
+      loading,
+      optionsCache,
+      drawCode,
+      showEdit,
+      showView,
+      showTable,
+      ltmplConfig,
+    } = this.state;
+    const { translate } = this.context;
+
+    let serverKey = fieldConfig.serverKey ? fieldConfig.serverKey : pServerKey;
+
+    let initOptions = this.toOptions(value, onEntityClick);
+    let exists;
+    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) {
+          properOptions.push(option);
+        }
+      }
+    }
+    if(disabled && value){
+      return <Rfield {...this.props} />
+    }
+
+    return (
+      <>
+        <Select
+          disabled={disabled}
+          defaultActiveFirstOption={false}
+          id={id}
+          listHeight={listHeight}
+          style={{ ...style }}
+          onChange={this.onChange}
+          value={this.toValueArray(value)}
+          mode={"multiple"}
+          // maxCount={maxSelected}
+          placeholder={translate("${请选择}${" + fieldConfig.title + "}")}
+          notFoundContent={
+            loading ? <Spin size={"small"}></Spin> : translate("${无数据}")
+          }
+          allowClear={true}
+          showArrow={true}
+          suffixIcon={<SearchOutlined />}
+          filterOption={false}
+          dropdownRender={this.dropdownRender}
+          tagRender={
+            actions &&
+            (actions.indexOf("detail") >= 0 || actions.indexOf("edit") >= 0)
+              ? this.tagRender
+              : undefined
+          }
+          onSearch={this.debounceFetcher()}
+          onClick={
+            disabled
+              ? null
+              : () => {
+                  debounce(this.fetchOptions, 100)(undefined);
+                }
+          }
+          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}
+      </>
+    );
+  }
+}