aldehyde 0.2.97 → 0.2.99

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

@@ -1,565 +1,687 @@
-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 * as React from "react";
+import { Button, Col, Divider, message, Row, Select, Spin, Tag } from "antd";
 import {
-    AlignLeftOutlined,
-    EditOutlined,
-    PlusOutlined,
-    RedoOutlined,
-    SearchOutlined,
-    TableOutlined
-} from '@ant-design/icons';
-import debounce from 'lodash/debounce';
-import './index.css';
+  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 { CustomTagProps } from "rc-select/lib/BaseSelect";
 import DtmplCustomEditModalPage from "../../custom-page/dtmpl-custom-edit-modal-page";
-import {LtmplModal} from "../../index";
-
+import { LtmplModal } from "../../index";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 interface InnerEntitySelectProps extends EControlProps {
-    maxSelected?: number,
-    onEntityClick?: (code: string) => void,
-    baseCriteria: object,
-
-};
+  maxSelected?: number;
+  onEntityClick?: (code: string) => void;
+  baseCriteria: object;
+}
 
 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,
-};
+  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,
-}
+  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> {
+  options: any[];
+  touchEnd: boolean;
+};
 
-    static defaultProps = {
-        maxSelected: 100,
+export default class EntitySelect extends React.PureComponent<
+  InnerEntitySelectProps,
+  InnerEntitySelectState
+> {
+  static defaultProps = {
+    maxSelected: 100,
+  };
+
+  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;
     }
-
-    state = {
-        titleId: undefined,
-        optionCacheKey: undefined,
-        pageNo: 1,
-        loading: false,
-        optionsCache: {},
-        codeLabel: {},
-        ltmplConfig: undefined,
-        showView: false,
-        showEdit: false,
-        showTable: false,
-        drawCode: undefined,
-        preMainCode: undefined,
+    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, mainCode, fieldConfig } = this.props;
+    let {
+      baseCriteria: preBaseCriteria,
+      mainCode: preMainCode,
+      fieldConfig: preFieldConfig,
+    } = prevProps;
+    if (
+      (baseCriteria &&
+        JSON.stringify(baseCriteria) != JSON.stringify(preBaseCriteria)) ||
+      (mainCode && mainCode != preMainCode) ||
+      (fieldConfig && preFieldConfig && fieldConfig.id != preFieldConfig.id)
+    ) {
+      this.initCache();
     }
-    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></>}
+  }
+
+  initCache = () => {
+    this.setState({
+      optionsCache: {},
+      codeLabel: {},
+    });
+  };
+
+  // componentWillUnmount(): void {
+  //     this.setState=(state,callback)=>{
+  //         return
+  //     }
+  // }
+
+  toOption = (code: string, title: string, onEntityClick) => {
+    const { fieldConfig } = this.props;
+    const { actions } = fieldConfig;
+    const { codeLabel } = this.state;
+    codeLabel[code] = title;
+    let option = {
+      value: 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}
         </>
+      ),
     };
-
-    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;
+    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) {
+        let vs = v.split("@R@");
+        if (vs[1] != "null") {
+          result.push(vs[0]);
         }
-        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, mainCode, fieldConfig} = this.props;
-        let {baseCriteria: preBaseCriteria, mainCode: preMainCode, fieldConfig: preFieldConfig} = prevProps;
-        if ((baseCriteria && JSON.stringify(baseCriteria) != JSON.stringify(preBaseCriteria)) || (mainCode && mainCode != preMainCode)
-            || (fieldConfig && preFieldConfig && fieldConfig.id != preFieldConfig.id)) {
-            this.initCache();
-        }
+    return result;
+  };
+
+  toArray = (value) => {
+    let valueArray: string[] = [];
+    if (value instanceof Array) {
+      valueArray = value;
+    } else {
+      if (value) {
+        valueArray = value.split(",");
+      } else {
+        valueArray = [];
+      }
     }
 
-    initCache = () => {
-        this.setState({
-            optionsCache: {},
-            codeLabel: {}
-        })
-    }
+    return valueArray;
+  };
 
+  toOptions = (value, onEntityClick) => {
+    const { fieldConfig } = this.props;
+    let options: object[] = [];
+    //console.log('options value', value);
 
-    // componentWillUnmount(): void {
-    //     this.setState=(state,callback)=>{
-    //         return
-    //     }
-    // }
-
-
-    toOption = (code: string, title: string, onEntityClick) => {
-        const {fieldConfig} = this.props;
-        const {actions} = fieldConfig;
-        const {codeLabel} = this.state;
-        codeLabel[code] = title;
-        let option = {
-            value: 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) {
-                let vs = v.split("@R@");
-                if (vs[1] != 'null') {
-                    result.push(vs[0]);
-                }
-            }
+    let valueArray: string[] = this.toArray(value);
+    for (let v of valueArray) {
+      if (v) {
+        let vs = v.split("@R@");
+        if (vs[1] != "null") {
+          options.push(this.toOption(vs[0], vs[1], onEntityClick));
         }
-        return result;
+      }
     }
 
-    toArray = (value) => {
-        let valueArray: string[] = [];
-        if (value instanceof Array) {
-            valueArray = value;
-        } else {
-            if (value) {
-                valueArray = value.split(',');
-            } else {
-                valueArray = [];
-            }
+    //添加补充项
+    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 valueArray;
+      });
     }
-
-    toOptions = (value, onEntityClick) => {
-        const {fieldConfig} = this.props;
-        let options: object[] = [];
-        //console.log('options value', value);
-
-        let valueArray: string[] = this.toArray(value);
-        for (let v of valueArray) {
-            if (v) {
-                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));
-                }
-            })
-        }
-        //console.log('options', options);
-        return options;
+    //console.log('options', options);
+    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,
+      });
     }
-
-    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, serverKey } = this.props;
+    const { optionsCache, ltmplConfig, preMainCode } = this.state;
+    const currentMainCode = mainCode ? mainCode : fieldConfig.mainCode;
+    if (preMainCode != currentMainCode) {
+      this.setState({ preMainCode: currentMainCode.toString() });
+      //清空，
+      this.initCache();
     }
 
-    fetchOptions = async (searchText) => {
-        const {fieldConfig, mainCode, baseCriteria, serverKey} = this.props;
-        const {optionsCache, ltmplConfig, preMainCode} = this.state;
-        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("请配置正确查询页面");
-                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}
-            }
-            // let mainCode_ = mainCode;
-            // if (baseCriteria) {
-            //     criteriaData = {...baseCriteria}
-            //     if (!mainCode) {
-            //         mainCode_ = baseCriteria['mainCode']; //当只在条件中设置mainCode时，保证生效不被设置为null
-            //     }
-            // }
-            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)();
-            }
-        }
-
+    let optionCacheKey = "withoutValue";
+    //先从缓存里拿
+    if (searchText) {
+      optionCacheKey = searchText;
     }
-
-    onChange = (values: any[]) => {
-        const {codeLabel} = this.state;
-        let newValues: Array<string> = [...values];
-        if (values && values.length > this.props.maxSelected) {
-            newValues.shift();
+    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("请配置正确查询页面");
+        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 };
+      }
+      // let mainCode_ = mainCode;
+      // if (baseCriteria) {
+      //     criteriaData = {...baseCriteria}
+      //     if (!mainCode) {
+      //         mainCode_ = baseCriteria['mainCode']; //当只在条件中设置mainCode时，保证生效不被设置为null
+      //     }
+      // }
+      criteriaData[formItemName] = searchText;
+      let queryKey: QueryKey = await HcserviceV3.requestLtmplQueryKey(
+        fieldConfig.serverKey ? fieldConfig.serverKey : serverKey,
+        fieldConfig.sourceId,
+        {
+          ...criteriaData,
+          ...pageInfo,
+          mainCode: currentMainCode,
         }
-        let formValues: Array<string> = [];
-        newValues.forEach((c) => {
-            if (c.indexOf("@R@") > 0) {
-                formValues.push(c);
-            } else {
-                formValues.push(c + "@R@" + codeLabel[c]);
-            }
-        })
-        this.props.onChange(formValues);
+      );
+      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)();
+      }
     }
+  };
 
-    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, serverKey, fieldConfig} = this.props;
-
-        let queryData: QueryData = await HcserviceV3.requestQueryData(fieldConfig.serverKey ? fieldConfig.serverKey : serverKey, queryKey, pageInfo);
-        let options: object[] = [];
-        pageInfo = queryData.pageInfo;
-        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 option = this.toOption(item.code, t, onEntityClick);
-                    options.push(option);
-                }
-            }
-        })
-        return {options, touchEnd: queryData.touchEnd};
+  onChange = (values: any[]) => {
+    const { codeLabel } = this.state;
+    let newValues: Array<string> = [...values];
+    if (values && values.length > this.props.maxSelected) {
+      newValues.shift();
     }
-
-    debounceFetcher = () => {
-        const loadOptions = (val) => {
-            this.fetchOptions(val);
-        };
-        return debounce(loadOptions, 800);
+    let formValues: Array<string> = [];
+    newValues.forEach((c) => {
+      if (c.indexOf("@R@") > 0) {
+        formValues.push(c);
+      } else {
+        formValues.push(c + "@R@" + codeLabel[c]);
+      }
+    });
+    this.props.onChange(formValues);
+  };
+
+  tagRender = (props: CustomTagProps) => {
+    const { label, closable, onClose } = props;
+    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
     };
-
-    debounceFetchNextPage = () => {
-        // this.setState({
-        //     loading: true,
-        // })
-        debounce(this.fetchNextPage, 200)();
-        // this.setState({
-        //     loading: false,
-        // })
+    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, serverKey, fieldConfig } = this.props;
+
+    let queryData: QueryData = await HcserviceV3.requestQueryData(
+      fieldConfig.serverKey ? fieldConfig.serverKey : serverKey,
+      queryKey,
+      pageInfo
+    );
+    let options: object[] = [];
+    pageInfo = queryData.pageInfo;
+    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 option = this.toOption(item.code, 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);
+        }
+      }
     }
 
-    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;
-
-        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);
+    return (
+      <>
+        <Select
+          disabled={disabled}
+          id={id}
+          listHeight={listHeight}
+          style={{ ...style }}
+          onChange={this.onChange}
+          value={this.toValueArray(value)}
+          mode="multiple"
+          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();
             }
-        }
-
-        return <><Select
-            disabled={disabled}
-            id={id}
-            listHeight={listHeight}
-            style={{...style}}
-            onChange={this.onChange}
-            value={this.toValueArray(value)}
-            mode="multiple"
-            placeholder={`请选择${fieldConfig.title}`}
-            notFoundContent={loading ? <Spin size={'small'}></Spin> : "无数据"}
-            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 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}
-
-        </>
-    }
-
-
+          }}
+        ></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
+              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}
+      </>
+    );
+  }
 }
-
-