aldehyde 0.2.197 → 0.2.199

package/src/aldehyde/table/act-table.tsx

@@ -1,1732 +1,1737 @@
-import React, { ReactNode, ReactDOM } from "react";
-import {
-  Button,
-  Card,
-  Checkbox,
-  Col,
-  Collapse,
-  Divider,
-  Popconfirm,
-  Popover,
-  Row,
-  Space,
-  Drawer,
-  Modal,
-  Tooltip,
-  message,
-} from "antd";
-import HCService from "../tmpl/hcservice-v3";
-import Table from "./control-table-x-axis-wrapper";
-import {
-  AlignCenterOutlined,
-  AlignLeftOutlined,
-  CaretDownOutlined,
-  CaretUpOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-  DownloadOutlined,
-  EditOutlined,
-  EyeInvisibleOutlined,
-  EyeOutlined,
-  FormOutlined,
-  FundOutlined,
-  KeyOutlined,
-  LineChartOutlined,
-  MenuOutlined,
-  PlusCircleOutlined,
-  PlusOutlined,
-  ReloadOutlined,
-  RetweetOutlined,
-  SearchOutlined,
-  TableOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
-import "./index.css";
-import {
-  ActTableMode,
-  ActTableViewModel,
-  AddOrUpdate,
-  BuiltInButtonName,
-  ClassAddConfig,
-  ColumnConfig,
-  CustomButton,
-  DoEditParam,
-  DtmplData,
-  JumpConfig,
-  LtmplConfig,
-  QueryKey,
-  SelectedRow,
-  ShowViewParam,
-  TmplBaseProps,
-} from "../tmpl/interface";
-import TableUnits from "./table-util";
-import SupportInputTypes from "../tmpl/control-type-supportor";
-import HcserviceV3 from "../tmpl/hcservice-v3";
-import QueryTable from "./query-table";
-import CriteriaForm from "./../form/criteria-form";
-import ViewControl from "../controls/view-control";
-import Units from "../units";
-import ColumnSelector from "./column/column-selector";
-import ExportFrame, { ExportType } from "../export/export-frame";
-import { SortableHandle } from "react-sortable-hoc";
-import L2ActTable from "./l2-act-table";
-
-import Action from "../controls/action";
-import Restat from "./stat/restat";
-import ActionUtils from "../controls/action/utils";
-import CquickButton from "../controls/cquery/cquick-button";
-import CollapseCard from "../controls/collapse-card";
-import ToolTipBar from "../detail/tooltipbar";
-import { LocaleContext } from "../locale/LocaleProvider";
-import BlockMenuTreeDrawer from "../module/block-menu-tree-drawer";
-import EditButton from "../detail/button/edit-button";
-import ViewButton from "../detail/button/view-button";
-import ProgramConfig from "../units";
-import ModelSelectTable from "./../table/modal-select-table";
-import NewinFileView from "../controls/file-view/newin-file-view";
-
-const DragHandle = SortableHandle(() => (
-  <MenuOutlined style={{ cursor: "grab", color: "#999" }} />
-));
-const { Panel } = Collapse;
-
-type Level = "l1" | "l2";
-
-const defaultDisabledColIds: string[] = ["20000", "10000"];
-let refresh = true;
-
-interface ActTableProps extends TmplBaseProps {
-  criteriaData: object;
-  pageNo: number;
-  pageSize: number;
-  onChangePage: (pageNo: number, pageSize: number) => void;
-  ltmplConfig: LtmplConfig;
-  menuId?: string;
-  showView?: (showVievParam: ShowViewParam) => void;
-  doCreate?: (addtmplId: string, toCustomPage: boolean) => void;
-  customCreatable?: boolean;
-  doEdit?: (doEditParam: DoEditParam) => void;
-  customEditable?: boolean;
-  doDelete?: (code: string) => void;
-  doSearch?: (params: object) => void;
-  doRAction?: (ractionId: string, mainCode: string) => void;
-  level?: Level;
-  funcMode?: ActTableMode;
-  title?: ReactNode;
-  tip?: any;
-  collapsible?: boolean;
-  initCollapse?: boolean;
-  readOnly?: boolean;
-}
-
-interface ActTableStat {
-  //tableColumns?: object[];
-  sortedColConfigs?: ColumnConfig[];
-  queryKey?: QueryKey;
-  loading?: boolean;
-  selectedRows?: SelectedRow[];
-  selectedDatas?: DtmplData[];
-  hiddenColIds?: string[];
-  drillingColIds?: string[];
-  disabledColIds?: string[];
-  hiddenRowCodes?: string[];
-  viewModels?: ActTableViewModel[];
-  showL2ActTable?: boolean;
-  showL2Chart?: boolean;
-  recordCode?: string;
-  blockMenuTreeDrawerOpen?: boolean;
-  showCustomCard?: boolean;
-  customButton?: CustomButton;
-  customButtonData?: DtmplData[];
-  showRatmplSelector?: boolean;
-}
-
-class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
-  state = {
-    //tableColumns: undefined,
-    sortedColConfigs: undefined,
-    queryKey: undefined,
-    loading: true,
-    disableCols: undefined,
-    hiddenColIds: defaultDisabledColIds,
-    selectedRows: [],
-    selectedDatas: [],
-    hiddenRowCodes: [],
-    viewModels: [],
-    drillingColIds: undefined,
-    disabledColIds: undefined,
-    showL2ActTable: false,
-    showL2Chart: false,
-    recordCode: undefined,
-    blockMenuTreeDrawerOpen: false,
-    showCustomCard: false,
-    customButtonData: undefined,
-    customButton: undefined,
-    showRatmplSelector: false,
-  };
-
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  static defaultProps = {
-    criteriaData: {},
-    funcMode: "complete",
-    collapsible: false,
-    initCollapse: false,
-    readOnly: false,
-  };
-
-  loadData = async (
-    hiddenColIds: string[],
-    hiddenRowCodes: string[],
-    sortedColConfigs: ColumnConfig[]
-  ) => {
-    const {
-      sourceId,
-      criteriaData,
-      ltmplConfig,
-      mainCode,
-      level,
-      pageNo,
-      pageSize,
-      serverKey,
-    } = this.props;
-
-    if (!ltmplConfig) {
-      return;
-    }
-
-    this.setState({
-      loading: true,
-    });
-    let disabledColIds: string[] = [];
-    let hiddenColIds_ = [...hiddenColIds];
-    if (criteriaData && criteriaData["drillingColIds"]) {
-      let dColIds = [...criteriaData["drillingColIds"]];
-      ltmplConfig.columns.forEach((item) => {
-        if (
-          item.statColType == "dimension" &&
-          !dColIds.includes(item.id) &&
-          !hiddenColIds_.includes(item.id)
-        ) {
-          hiddenColIds_.push(item.id);
-          disabledColIds.push(item.id);
-        }
-        if (
-          item.statColType == "dimension" &&
-          !dColIds.includes(item.id) &&
-          !disabledColIds.includes(item.id)
-        ) {
-          disabledColIds.push(item.id);
-        }
-      });
-      hiddenColIds_ = hiddenColIds_.filter((id) => {
-        return !dColIds.includes(id);
-      });
-    }
-    ltmplConfig.columns.forEach((item) => {
-      if (item.hidden) {
-        hiddenColIds_.push(item.id);
-      }
-    });
-    /** 构建column **/
-    // let tableColumns = this.buildTableColumns(ltmplConfig, hiddenColIds_, hiddenRowCodes, sortedColConfigs);
-
-    const { defaultPageSize } = ltmplConfig;
-
-    let pageInfo = {
-      pageNo: pageNo ? pageNo : 1,
-      pageSize: pageSize ? pageSize : defaultPageSize ? defaultPageSize : 10,
-      virtualEndPageNo: undefined,
-    };
-
-    /** 构建 dataSource **/
-    //构建过滤条件
-    let queryKey: QueryKey;
-    if (level && level == "l2") {
-      queryKey = await HcserviceV3.requestL2LtmplQueryKey(serverKey, sourceId, {
-        ...criteriaData,
-        ...pageInfo,
-        mainCode,
-      });
-    } else {
-      queryKey = await HcserviceV3.requestLtmplQueryKey(serverKey, sourceId, {
-        ...criteriaData,
-        ...pageInfo,
-        mainCode,
-      });
-    }
-
-    if (!queryKey.sourceId || queryKey.sourceId == this.props.sourceId) {
-      this.setState({
-        disabledColIds,
-        hiddenColIds: hiddenColIds_,
-        hiddenRowCodes,
-        sortedColConfigs,
-        queryKey,
-        showL2Chart: false,
-        selectedRows: [],
-        selectedDatas: [],
-        viewModels:
-          this.state.viewModels.length > 0 ? this.state.viewModels : ["table"],
-      });
-    }
-    this.setState({
-      loading: false,
-    });
-  };
-
-  doCustomButton = (customButton: CustomButton, records: DtmplData[]) => {
-    let page = ProgramConfig.getCustomPage(customButton.id);
-    if (!page) {
-      message.error("Not Found Custom Page");
-    } else {
-      //if(customButton.){
-      this.setState({
-        showCustomCard: true,
-        customButton,
-        customButtonData: records,
-      });
-      // }
-    }
-  };
-
-  renderAboveCustomPage = () => {
-    return this.renderCustomPage("above-table");
-  };
-
-  renderOhterCustomPage = () => {
-    return (
-      <>
-        {this.renderCustomPage("under-table")}
-        {this.renderCustomPage("modal-window")}
-        {this.renderCustomPage("left-drawer")}
-        {this.renderCustomPage("right-drawer")}
-      </>
-    );
-  };
-
-  renderCustomPage = (
-    windowPosition:
-      | "under-table"
-      | "above-table"
-      | "modal-window"
-      | "left-drawer"
-      | "right-drawer"
-  ) => {
-    const { translate } = this.context;
-    const { customButton, customButtonData } = this.state;
-
-    if (!customButton) {
-      return "";
-    }
-    if (windowPosition && windowPosition != customButton.windowPosition) {
-      return "";
-    }
-    let customProps = { customButton: customButton, data: customButtonData };
-    let page = ProgramConfig.getCustomPage(customButton.id);
-    let customElement = React.createElement(page, customProps);
-    if (
-      customButton.windowPosition == "under-table" ||
-      customButton.windowPosition == "above-table"
-    ) {
-      return (
-        <Card
-          id={"CustomCard" + customButton.id}
-          size={"small"}
-          style={{ marginTop: "6px" }}
-          extra={
-            <Button
-              size={"small"}
-              danger={true}
-              onClick={() => {
-                this.setState({ customButton: undefined });
-              }}
-            >
-              {" "}
-              {translate("${关闭}")}
-            </Button>
-          }
-        >
-          {customElement}
-        </Card>
-      );
-    } else if (
-      customButton.windowPosition == "left-drawer" ||
-      customButton.windowPosition == "right-drawer"
-    ) {
-      return (
-        <Drawer
-          open={true}
-          id={"CustomCard" + customButton.id}
-          placement={
-            customButton.windowPosition == "right-drawer" ? "right" : "left"
-          }
-          width={customButton.windowWidth}
-          onClose={() => {
-            this.setState({ customButton: undefined });
-          }}
-        >
-          {customElement}
-        </Drawer>
-      );
-    } else if (customButton.windowPosition == "modal-window") {
-      return (
-        <Modal
-          open={true}
-          closable={true}
-          width={customButton.windowWidth}
-          style={{ height: customButton.windowHeight }}
-          onCancel={() => {
-            this.setState({ customButton: undefined });
-          }}
-        >
-          {customElement}
-        </Modal>
-      );
-    }
-  };
-
-  buildTableColumns = (
-    ltmplConfig: LtmplConfig,
-    hiddenColIds: string[],
-    hiddenRowCodes: string[],
-    sortedColConfigs: ColumnConfig[]
-  ) => {
-    const {
-      showView,
-      doEdit,
-      doRAction,
-      customEditable,
-      serverKey,
-      readOnly,
-      sourceId,
-    } = this.props;
-    const { translate } = this.context;
-    const { buttons, builtInButtons } = ltmplConfig;
-    let tableColumns = [];
-    let s = 0;
-    let colConfigs = sortedColConfigs ? sortedColConfigs : ltmplConfig.columns;
-
-    let currentDataColIndex = 0;
-
-    colConfigs.forEach((item) => {
-      let column = {};
-      if (!hiddenColIds || !hiddenColIds.includes(item.id)) {
-        tableColumns.push(column);
-      }
-      column["title"] = item.title;
-      column["dataIndex"] = item.id;
-      if (item["colWidth"]) column["width"] = item["colWidth"];
-      if (item["statColType"]) column["statColType"] = item["statColType"];
-      if (item["aggFunc"]) column["cal"] = item["aggFunc"];
-      if (item["order"]) column["order"] = Number(item["order"]);
-      // column['ellipsis']= true;
-      s++;
-      let itemType = SupportInputTypes.getSupportControlType(item);
-      if (s < 12 && item.title != "操作" && item.title != "序号") {
-        if (hiddenColIds.includes("10000")) {
-          const order = this.handleColumnOrder(column["dataIndex"]);
-
-          if(item.sortable) {
-            TableUnits.sort(column, itemType, order);
-          }
-
-        }
-      }
-      //特殊列处理
-      //序号
-      if (item.title === "序号") {
-        column["width"] = item.colWidth ? item.colWidth : 50;
-        column["title"] = translate("${序号}");
-        column["align"] = item.valueAlign ? item.valueAlign : "center";
-        //item.fixed='left';
-        column["render"] = (text, record, index) => <label>{index + 1}</label>;
-        item["sorter"] = undefined;
-      } else if (item.id == "10000") {
-        column["title"] = (
-          <Tooltip title={translate("${拖拽排序}")}>
-            {translate("${" + item.title + "}")}
-          </Tooltip>
-        );
-        column["width"] = 30;
-        column["dataIndex"] = item.id;
-        column["className"] = "drag-visible";
-        column["render"] = () => <DragHandle />;
-      } else if (item.id == "20000") {
-        //隐藏
-        column["align"] = "center";
-        column["width"] = 40;
-        column["title"] = (
-          <>
-            {hiddenRowCodes.length > 0 ? (
-              <Tooltip title={translate("${取消隐藏}")}>
-                <Button
-                  style={{ marginRight: "0px" }}
-                  size="small"
-                  shape={"circle"}
-                  icon={<EyeOutlined />}
-                  type={"text"}
-                  onClick={() => this.unHiden()}
-                ></Button>
-              </Tooltip>
-            ) : (
-              ""
-            )}
-          </>
-        );
-        column["render"] = (text, record) => (
-          <Tooltip title={translate("${隐藏}")}>
-            {" "}
-            <Button
-              style={{ marginRight: "0px" }}
-              icon={<EyeInvisibleOutlined />}
-              type="dashed"
-              size="small"
-              onClick={() => this.onHide(record.code)}
-            ></Button>
-          </Tooltip>
-        );
-      } else if (item.title === "操作") {
-        column["fixed"] = "right";
-        column["align"] = "center";
-        column["width"] = item.colWidth ? item.colWidth : 160;
-        column["className"] = "opsColumn";
-        column["title"] = <>{translate("${操作}")}</>;
-        column["render"] = (text, record) => (
-          <Space size={[0, 4]} wrap>
-            {buttons.includes("detail") &&
-            showView &&
-            ActionUtils.isShow(
-              ltmplConfig.buttonViewAction?.preposes,
-              [record],
-              undefined
-            ) ? (
-              <ViewButton
-                showView={showView}
-                data={record}
-                ltmplConfig={ltmplConfig}
-              ></ViewButton>
-            ) : (
-              ""
-            )}
-            {buttons.includes("customDetail") &&
-            showView &&
-            ActionUtils.isShow(
-              ltmplConfig.buttonViewAction?.preposes,
-              [record],
-              undefined
-            ) ? (
-              <Button
-                size="small"
-                type="primary"
-                icon={<AlignLeftOutlined />}
-                onClick={() => showView({ code: record.code })}
-              ></Button>
-            ) : (
-              ""
-            )}
-            {buttons.includes("dtmplEdit") && doEdit && !readOnly ? (
-              <EditButton
-                doEdit={doEdit}
-                data={record}
-                ltmplConfig={ltmplConfig}
-              ></EditButton>
-            ) : (
-              ""
-            )}
-            {builtInButtons?.includes("blockAuthMenuTree") && !readOnly ? (
-              <Button
-                size="small"
-                type="dashed"
-                icon={
-                  <KeyOutlined
-                    rotate={180}
-                    style={{ color: "#f5222d", marginRight: "4px" }}
-                  />
-                }
-                onClick={() =>
-                  this.setState({
-                    blockMenuTreeDrawerOpen: true,
-                    recordCode: record.code,
-                  })
-                }
-              ></Button>
-            ) : (
-              ""
-            )}
-            {(buttons.includes("dtmplCustomEdit") || customEditable) &&
-            doEdit &&
-            !readOnly &&
-            ActionUtils.isShow(
-              ltmplConfig.buttonEditAction?.preposes,
-              [record],
-              undefined
-            ) ? (
-              <Button
-                size="small"
-                type="dashed"
-                icon={<FormOutlined />}
-                onClick={() =>
-                  doEdit({
-                    code: record.code,
-                    mode: "update",
-                    toCustomPage: true,
-                  })
-                }
-              ></Button>
-            ) : (
-              ""
-            )}
-            {buttons.includes("copy") && doEdit && !readOnly ? (
-              <Tooltip title={translate("${复制}")}>
-                <Button
-                  size="small"
-                  type="dashed"
-                  icon={<CopyOutlined />}
-                  onClick={async () => {
-                    //先复制
-                    let toCustomPage = false;
-                    if (buttons.includes("dtmplCustomEdit") || customEditable) {
-                      toCustomPage = true;
-                    }
-                    let code = await HcserviceV3.doCopy(
-                      serverKey,
-                      sourceId,
-                      record.code
-                    );
-                    if (code) {
-                      doEdit({ code, mode: "update", toCustomPage });
-                    }
-                  }}
-                ></Button>
-              </Tooltip>
-            ) : (
-              ""
-            )}
-            {ltmplConfig.rowCustomButtons
-              ? ltmplConfig.rowCustomButtons.map((customButton) => {
-                  return (
-                    <Button
-                      key={customButton.id}
-                      size="small"
-                      type={
-                        customButton.buttonType
-                          ? customButton.buttonType
-                          : "dashed"
-                      }
-                      onClick={() =>
-                        this.doCustomButton(customButton, [record])
-                      }
-                    >
-                      {translate("${" + customButton.title + "}")}
-                    </Button>
-                  );
-                })
-              : ""}
-            {ltmplConfig.ractions && !readOnly
-              ? ltmplConfig.ractions.map((raction) => {
-                  return (
-                    <Button
-                      key={raction.id}
-                      size="small"
-                      type="dashed"
-                      onClick={() => doRAction(raction.id, record.code)}
-                    >
-                      {translate("${" + raction.title + "}")}
-                    </Button>
-                  );
-                })
-              : ""}
-
-            {ltmplConfig.rowActions &&
-            !readOnly &&
-            ltmplConfig.rowActions.length > 0
-              ? ltmplConfig.rowActions.map((action) => {
-                  return (
-                    <Action
-                      serverKey={serverKey}
-                      iconType={"icon"}
-                      key={action.id}
-                      data={[record]}
-                      actionConfig={action}
-                      doAction={this.doRowAction}
-                      buttonSize={"small"}
-                      serial={1}
-                    ></Action>
-                  );
-                })
-              : ""}
-
-            {ltmplConfig.rowJumps &&
-            ltmplConfig.rowJumps.length > 0 &&
-            !readOnly
-              ? ltmplConfig.rowJumps.map((jump) => {
-                  return (
-                    <Button
-                      key={jump.id}
-                      size="small"
-                      type="dashed"
-                      onClick={() => this.doRowJump(jump, record)}
-                    >
-                      {translate("${" + jump.title + "}")}
-                    </Button>
-                  );
-                })
-              : ""}
-            {ltmplConfig.rowCQuerys &&
-            ltmplConfig.rowCQuerys.length > 0 &&
-            !readOnly
-              ? ltmplConfig.rowCQuerys.map((cquery) => {
-                  // console.log("record record", record);
-                  return (
-                    <CquickButton
-                      serverKey={serverKey}
-                      key={cquery.id}
-                      size={"small"}
-                      pageType={"drawer"}
-                      // onClick={() => doCQuery(cquery.id)}
-                      cQueryConfig={cquery}
-                      mainCode={
-                        cquery.mainCodeColId
-                          ? record[cquery.mainCodeColId]
-                          : record.code
-                      }
-                    />
-                  );
-                })
-              : ""}
-            {ltmplConfig.rowFileButtons &&
-            ltmplConfig.rowFileButtons.length > 0
-                ? ltmplConfig.rowFileButtons.map((openFileButton) => {
-                  let v= record[openFileButton.fieldId];
-                  if(v){
-                    if(v instanceof Array){
-                      v=v[0];
-                    }
-                    if(v.includes("@R@")>0){
-                      v=v.split("@R@")[1];
-                    }
-                    return (
-                        <NewinFileView
-                            title={openFileButton.title}
-                            filePath={HCService.toFilePath(v, serverKey)}
-                            serverKey={serverKey}
-                            key={openFileButton.id}
-                            //size={"small"}
-                        />
-                    );
-                  }else{
-                    return "";
-                  }
-                })
-                : ""}
-            {buttons.includes("singleDelete") &&
-            !readOnly &&
-            ActionUtils.isShow(
-              ltmplConfig.buttonDeleteAction?.preposes,
-              [record],
-              undefined
-            ) ? (
-              <Popconfirm
-                placement="rightBottom"
-                title={translate("${确定要[删除]此数据吗}?")}
-                onConfirm={() => {
-                  this.doDeleteByCode(record.code);
-                }}
-                okText={translate("${确定}")}
-                cancelText={translate("${取消}")}
-                okType={"danger"}
-              >
-                <Button size="small" type="dashed" danger>
-                  <DeleteOutlined />
-                </Button>
-              </Popconfirm>
-            ) : (
-              ""
-            )}
-          </Space>
-        );
-      } else {
-        currentDataColIndex++;
-        column["className"] = "opsColumn";
-        column["title"] = translate("${" + item.title + "}");
-        column["width"] = item.colWidth ? item.colWidth : 160;
-        column["ellipsis"] = { showTitle: true };
-        column["align"] = item.valueAlign ? item.valueAlign : "left";
-        if (
-          ltmplConfig.leftFixedCols &&
-          ltmplConfig.leftFixedCols >= currentDataColIndex
-        ) {
-          column["fixed"] = "left";
-        } else {
-          column["fixed"] = item.colFixed
-            ? item.colFixed == "right"
-              ? "right"
-              : "left"
-            : false;
-        }
-        column["render"] = (text, record) => {
-          return (
-            <ViewControl
-              serverKey={serverKey}
-              fieldConfig={item}
-              value={record[item.id]}
-              holderType={"table"}
-            />
-          );
-        };
-      }
-    });
-
-    console.log("columns", tableColumns);
-
-    return tableColumns;
-  };
-
-  async componentDidMount() {
-    const { ltmplConfig } = this.props;
-    const { translate } = this.context;
-    let sortedColConfigs = undefined;
-    if (ltmplConfig) {
-      sortedColConfigs = [
-        { id: "10000", title: translate("${排序}") },
-        ...ltmplConfig.columns,
-        { id: "20000", title: translate("${隐藏}") },
-      ];
-    }
-    this.loadData(defaultDisabledColIds, [], sortedColConfigs);
-  }
-
-  async componentDidUpdate(prevProps) {
-    const { sourceId, criteriaData, ltmplConfig } = this.props;
-    const { translate } = this.context;
-    let {
-      ltmplConfig: preLtmplConfig,
-      criteriaData: preCriteriaData,
-      sourceId: preSourceId,
-    } = prevProps;
-
-    let { hiddenColIds, sortedColConfigs } = this.state;
-
-    if (
-      (sourceId && preSourceId != sourceId) ||
-      (ltmplConfig &&
-        (!preLtmplConfig || ltmplConfig.id != preLtmplConfig.id)) ||
-      Units.transQueryParamsToStr(criteriaData, false, [
-        "pageSize",
-        "pageNo",
-      ]) !=
-        Units.transQueryParamsToStr(preCriteriaData, false, [
-          "pageSize",
-          "pageNo",
-        ])
-    ) {
-      //5秒后允许再次请求数据
-      //refresh=false;
-
-      if (preLtmplConfig && ltmplConfig.id == preLtmplConfig.id) {
-        await this.loadData(hiddenColIds, [], sortedColConfigs);
-      } else {
-        let sColConfigs = undefined;
-        if (ltmplConfig) {
-          sColConfigs = [
-            { id: "10000", title: translate("${排序}") },
-            ...ltmplConfig.columns,
-            { id: "20000", title: translate("${隐藏}") },
-          ];
-        }
-        this.setState({
-          viewModels: ["table"],
-        });
-        await this.loadData(defaultDisabledColIds, [], sColConfigs);
-      }
-      // setTimeout( function() {
-      //   refresh=true;
-      // },112000);
-    }
-  }
-
-  handleShowChart = () => {
-    this.setState({
-      showL2Chart: !this.state.showL2Chart,
-    });
-  };
-
-  handleDataAnalysis = () => {
-    this.setState({
-      showL2ActTable: !this.state.showL2ActTable,
-    });
-  };
-
-  unHiden = () => {
-    const { ltmplConfig } = this.props;
-    const { hiddenColIds, sortedColConfigs } = this.state;
-    this.setState({
-      hiddenRowCodes: [],
-      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, [], sortedColConfigs),
-    });
-  };
-
-  onHide = (code: string) => {
-    const { ltmplConfig } = this.props;
-    const { hiddenRowCodes, hiddenColIds, sortedColConfigs } = this.state;
-    let hiddenCodes = [...hiddenRowCodes, code];
-    this.setState({
-      hiddenRowCodes: hiddenCodes,
-      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenCodes, sortedColConfigs),
-    });
-  };
-
-  changeViewModel = (viewModels) => {
-    this.setState({
-      viewModels,
-    });
-  };
-
-  changeHiddenColumns = (hiddenColIds: string[]) => {
-    const {} = this.props;
-    const {} = this.state;
-    this.setState({
-      showL2Chart: false,
-      hiddenColIds,
-      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
-    });
-  };
-
-  doSelectedAction = async (actionId: string, codes, params: object) => {
-    const { selectedRows } = this.state;
-    this.doAction(actionId, selectedRows, params);
-  };
-
-  doAction = async (actionId: string, selectedRows: SelectedRow[], params) => {
-    const { serverKey } = this.props;
-    const { hiddenColIds, hiddenRowCodes, sortedColConfigs } = this.state;
-    this.setState({
-      loading: true,
-    });
-    let result: boolean = await HcserviceV3.postActions(
-      serverKey,
-      actionId,
-      selectedRows,
-      params
-    );
-    if (result) {
-      //重新加载数据
-      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
-    } else {
-      this.setState({
-        loading: false,
-      });
-    }
-  };
-
-  doRowAction = async (actionId: string, codes: string[], params: object) => {
-    this.doAction(actionId, [{ title: undefined, code: codes[0] }], params);
-  };
-
-  doDelete = async () => {
-    const { sourceId, serverKey, mainCode } = this.props;
-    const {
-      selectedRows,
-      hiddenColIds,
-      hiddenRowCodes,
-      sortedColConfigs,
-    } = this.state;
-    this.setState({
-      loading: true,
-    });
-    let result: boolean = await HcserviceV3.deleteData(
-      serverKey,
-      sourceId,
-      selectedRows,
-      mainCode
-    );
-    if (result) {
-      //重新加载数据
-      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
-    } else {
-      this.setState({
-        loading: false,
-      });
-    }
-  };
-
-  doDeleteByCode = async (code: string) => {
-    const { sourceId, serverKey, mainCode } = this.props;
-    const { hiddenColIds, hiddenRowCodes, sortedColConfigs } = this.state;
-    this.setState({
-      loading: true,
-    });
-    let result: boolean = await HcserviceV3.deleteByCode(
-      serverKey,
-      sourceId,
-      [code],
-      mainCode
-    );
-    if (result) {
-      //重新加载数据
-      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
-    } else {
-      this.setState({
-        loading: false,
-      });
-    }
-  };
-
-  doSelectedCQuery = async (cqueryId: string) => {};
-
-  doJump = async (jump: JumpConfig, record_: DtmplData) => {
-    let record = record_.fieldMap ? record_.fieldMap : record_;
-
-    let url = null;
-
-    let path = jump.path;
-    if (!path) {
-      path = "/";
-    }
-    //是否以http开头
-    if (path.indexOf("#") == 0 || url.indexOf("/#") == 0) {
-      url = "";
-    } else if (
-      path.indexOf("http://") == 0 ||
-      path.indexOf("HTTP://") == 0 ||
-      path.indexOf("https://") == 0 ||
-      path.indexOf("HTTPS://") == 0
-    ) {
-      url = path.split("//")[0] + "//";
-      path = path.split("//")[1];
-    } else {
-      url = new URL(window.location.href).pathname;
-    }
-    //处理路由参数
-    let paths = path.split("/");
-
-    let routeParamConfigs = jump.routeParams;
-    if (routeParamConfigs) {
-      for (let i = 0; i < paths.length; i++) {
-        if (paths[i].indexOf(":") == 0) {
-          let pa = paths[i].substring(1);
-          //根据参数名匹配参数
-          for (let p of routeParamConfigs) {
-            if (p && pa == p.title) {
-              //赋值替换
-              let v = record[p.id] ? record[p.id] : p.defaultValue;
-              paths[i] = v;
-              break;
-            }
-          }
-        }
-      }
-      url = Units.joinPath(url, paths.join("/"));
-    } else {
-      url = Units.joinPath(url, path);
-    }
-
-    //处理search 参数
-    let searchParamConfigs = jump.searchParams;
-    let searchs = [];
-    //放入token
-    if (jump.tokenName) {
-      searchs[0] = jump.tokenName + "=" + Units.hydrocarbonToken();
-    }
-
-    if (searchParamConfigs) {
-      let initSearchLength = searchs.length;
-      for (let i = 0; i < searchParamConfigs.length; i++) {
-        let p = searchParamConfigs[i];
-        let v = record[p.id] ? record[p.id] : p.defaultValue;
-        if (!v && p.title == "code") {
-          v = record_.code;
-        }
-        searchs[initSearchLength + i] = p.title + "=" + v;
-      }
-    }
-    if (searchs.length > 0) {
-      if (url.indexOf("?") != url.length - 1) {
-        url = url + "?";
-      }
-      url = url + searchs.join("&");
-    }
-    if (
-      url.indexOf("#") == 0 ||
-      url.indexOf("/#") == 0 ||
-      url.indexOf("//#") == 0
-    ) {
-      window.location.hash = url.substring(url.indexOf("#") + 1);
-    } else {
-      window.open(url);
-    }
-  };
-
-  doRowJump = async (jump: JumpConfig, record: DtmplData) => {
-    this.doJump(jump, record);
-  };
-
-  renderExportButton = (title, type: ExportType, sourceId?: string) => {
-    const { pageNo, pageSize, serverKey, ltmplConfig, readOnly } = this.props;
-
-    let buttons = ltmplConfig?.buttons;
-
-    const { queryKey } = this.state;
-    const { translate } = this.context;
-    return (
-      <Popover
-        content={
-          <ExportFrame //导出组件
-            currentPage={{
-              pageNo: pageNo ? pageNo : 1,
-              pageSize: pageSize ? pageSize : ltmplConfig.defaultPageSize,
-            }}
-            type={type}
-            serverKey={serverKey}
-            queryKey={queryKey}
-            sourceId={sourceId}
-            title={translate(
-              "${" + ltmplConfig.title + "}" + "-" + "${" + title + "}"
-            )}
-          />
-        }
-        title={translate("${" + title + "}")}
-        placement="bottomRight"
-        trigger="click"
-      >
-        <Tooltip title={translate("${" + title + "}")}>
-          <Button
-            style={{
-              // display:
-              //     buttons.includes("exportLtmplExcel") && !readOnly
-              //         ? "inline"
-              //         : "none",
-              marginLeft: "5px",
-            }} //为了点击到没有导出模块，使组件不致销毁，丢失导出数据
-          >
-            {type == "ltmpl-data-excel" ? <DownloadOutlined /> : title}
-          </Button>
-        </Tooltip>
-      </Popover>
-    );
-  };
-
-  renderFileExportButton = () => {
-    const { ltmplConfig } = this.props;
-    let fileExports = ltmplConfig?.topFileExports;
-    if (fileExports) {
-      return fileExports.map((fileExport) => {
-        return this.renderExportButton(
-          fileExport.title,
-          "ltmpl-data-filedata",
-          fileExport.id
-        );
-      });
-    } else {
-      return <></>;
-    }
-  };
-
-  doSelectedJump = async (jump: JumpConfig) => {
-    const { selectedDatas } = this.state;
-    if (selectedDatas.length == 1) {
-      this.doJump(jump, selectedDatas[0]);
-    }
-  };
-
-  changeRowSelection = (
-    selectedRows: SelectedRow[],
-    selectedDatas: DtmplData[]
-  ) => {
-    this.setState({
-      selectedRows,
-      selectedDatas,
-    });
-  };
-
-  onChangeColSort = (sortedColConfigs: ColumnConfig[]) => {
-    const { ltmplConfig } = this.props;
-    const { hiddenRowCodes, hiddenColIds } = this.state;
-    this.setState({
-      sortedColConfigs,
-      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
-    });
-  };
-
-  getAddTmplButton = (classAddConfigs: ClassAddConfig[]) => {
-    const { translate } = this.context;
-    if (classAddConfigs && classAddConfigs.length < 1) {
-      return translate("${没有分类添加按钮}");
-    }
-    return classAddConfigs.map((config) => {
-      return (
-        <p>
-          <Button
-            size={"small"}
-            type={"text"}
-            onClick={() => this.props.doCreate(config.id, false)}
-          >
-            {config.title}
-          </Button>
-        </p>
-      );
-    });
-  };
-
-  renderHeaderButtons = () => {
-    let {
-      hiddenColIds,
-      queryKey,
-      viewModels,
-      sortedColConfigs,
-      disabledColIds,
-      showL2Chart,
-      showL2ActTable,
-    } = this.state;
-    const {
-      ltmplConfig,
-      sourceId,
-      doCreate,
-      doSearch,
-      menuId,
-      funcMode,
-      customCreatable,
-      serverKey,
-      readOnly,
-      pageNo,
-      pageSize,
-    } = this.props;
-    const { translate } = this.context;
-    let { buttons } = ltmplConfig;
-
-    return (
-      <>
-        <Space>
-          {funcMode == "common" && this.criteriaFormUseful() ? (
-            <Popover trigger="click" content={this.renderCriteriaForm()}>
-              <Button>
-                <SearchOutlined />
-              </Button>
-            </Popover>
-          ) : null}
-          {buttons.includes("ratmplSelect") ? (
-            <Button onClick={() => this.setState({ showRatmplSelector: true })}>
-              {translate("${选择}")}
-            </Button>
-          ) : (
-            ""
-          )}
-          {buttons.includes("dtmplAdd") && doCreate && !readOnly ? (
-            ltmplConfig.classAddConfigs &&
-            ltmplConfig.classAddConfigs.length > 0 ? (
-              <Popover
-                arrow={false}
-                content={this.getAddTmplButton(ltmplConfig.classAddConfigs)}
-                placement="bottomRight"
-              >
-                <Tooltip>
-                  <Button>
-                    <PlusOutlined />
-                  </Button>
-                </Tooltip>
-              </Popover>
-            ) : (
-              <Tooltip title={translate("${创建}")}>
-                <Button onClick={() => doCreate(null, false)}>
-                  <PlusOutlined />
-                </Button>{" "}
-              </Tooltip>
-            )
-          ) : (
-            ""
-          )}
-          {(buttons.includes("dtmplCustomAdd") || customCreatable) &&
-          doCreate &&
-          !readOnly ? (
-            <Tooltip title={translate("${创建}")}>
-              <Button onClick={() => doCreate(null, true)}>
-                <PlusCircleOutlined />
-              </Button>
-            </Tooltip>
-          ) : (
-            ""
-          )}
-          {buttons.includes("importLtmplExcel") && !readOnly ? (
-            <Tooltip title={translate("${导入}")}>
-              {" "}
-              <Button
-                href={`#${
-                  localStorage.getItem("version") === "v2" ? "/v2" : ""
-                }/${sourceId}/importer?menuId=${menuId}`}
-                target={"_blank"}
-              >
-                <UploadOutlined />
-              </Button>
-            </Tooltip>
-          ) : (
-            ""
-          )}
-          {buttons.includes("exportLtmplExcel") && !readOnly
-            ? this.renderExportButton("导出", "ltmpl-data-excel")
-            : ""}
-          {this.renderFileExportButton()}
-          {buttons.includes("showChart") ? (
-            <Tooltip
-              title={
-                showL2Chart
-                  ? translate("${隐藏}${图表}")
-                  : translate("${展示}${图表}")
-              }
-            >
-              <Button onClick={this.handleShowChart}>
-                <LineChartOutlined />
-              </Button>
-            </Tooltip>
-          ) : (
-            ""
-          )}
-          {buttons.includes("analysis") ? (
-            <Tooltip
-              title={
-                showL2ActTable
-                  ? translate("${隐藏}${数据分析}")
-                  : translate("${展示}${数据分析}")
-              }
-            >
-              <Button onClick={this.handleDataAnalysis}>
-                <FundOutlined />
-              </Button>
-            </Tooltip>
-          ) : (
-            ""
-          )}
-          {buttons.includes("reStat") && !readOnly ? (
-            <Restat
-              serverKey={serverKey}
-              fields={ltmplConfig.reStatParams}
-              sourceId={sourceId}
-              onfinish={() => doSearch(null)}
-            ></Restat>
-          ) : (
-            ""
-          )}
-          <Popover
-            content={
-              <Checkbox.Group
-                value={viewModels}
-                onChange={this.changeViewModel}
-              >
-                <Row style={{ width: "120px" }}>
-                  <Col span={24}>
-                    <Checkbox value={"table"}>{translate("${表格}")}</Checkbox>
-                  </Col>
-                  <Col span={24}>
-                    <Checkbox value={"verticalList"}>
-                      {translate("${纵向列表}")}
-                    </Checkbox>
-                  </Col>
-                  {/*<Col span={24}><Checkbox value={'horizontalList'}>横向列表</Checkbox></Col>*/}
-                </Row>
-              </Checkbox.Group>
-            }
-            title={translate("${视图}")}
-            placement="bottomRight"
-            trigger="click"
-          >
-            <Tooltip title={translate("${选择视图}")}>
-              <Button>
-                <RetweetOutlined />
-              </Button>
-            </Tooltip>
-          </Popover>
-          <Popover
-            content={
-              <ColumnSelector
-                columns={sortedColConfigs}
-                disabledColIds={disabledColIds}
-                hiddenColIds={hiddenColIds}
-                onChangeColSort={this.onChangeColSort}
-                onChangeHiddenCols={this.changeHiddenColumns}
-              />
-            }
-            title={translate("${排序和选择列}")}
-            placement="bottomRight"
-            trigger="click"
-          >
-            <Tooltip title={translate("${点击排序和选择列}")}>
-              <Button>
-                <TableOutlined />
-              </Button>
-            </Tooltip>
-          </Popover>
-          {doSearch ? (
-            <Button
-              className="hoverbig"
-              title={translate("${刷新}")}
-              onClick={() => {
-                doSearch(null);
-              }}
-            >
-              <ReloadOutlined />
-            </Button>
-          ) : (
-            ""
-          )}
-        </Space>
-      </>
-    );
-  };
-
-  criteriaFormUseful = () => {
-    const { ltmplConfig } = this.props;
-    let { buttons, criterias, updrillButtonConfigs } = ltmplConfig;
-    if (
-      ((buttons.includes("query") ||
-        (updrillButtonConfigs && updrillButtonConfigs.length > 0)) &&
-        ((criterias && criterias.length > 0) ||
-          buttons.includes("drilling"))) ||
-      this.checkBoxUseful()
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  checkBoxUseful = () => {
-    const { ltmplConfig } = this.props;
-    let { buttons, jumps, actions,fileExports } = ltmplConfig;
-    if (
-      buttons.includes("batchDelete") ||
-      (actions && actions.length > 0) ||
-      (jumps && jumps.length > 0) || (fileExports && fileExports.length>0)
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  renderCriteriaForm = () => {
-    let { loading, selectedRows, selectedDatas } = this.state;
-    let { ltmplConfig, doSearch, criteriaData, serverKey } = this.props;
-    return (
-      <CriteriaForm
-        serverKey={serverKey}
-        loading={loading}
-        selectedDatas={selectedDatas}
-        selectedRows={selectedRows}
-        doCustomButton={this.doCustomButton}
-        ltmplConfig={ltmplConfig}
-        data={criteriaData}
-        doCQuery={this.doSelectedCQuery}
-        doAction={this.doSelectedAction}
-        doDelete={this.doDelete}
-        doJump={this.doSelectedJump}
-        doSearch={doSearch}
-      />
-    );
-  };
-
-  renderContent = () => {
-    let {
-      queryKey,
-      loading,
-      selectedRows,
-      hiddenRowCodes,
-      viewModels,
-      sortedColConfigs,
-      hiddenColIds,
-      showL2ActTable,
-    } = this.state;
-    let {
-      sourceId,
-      ltmplConfig,
-      funcMode,
-      title,
-      collapsible,
-      pageSize,
-      pageNo,
-      onChangePage,
-      serverKey,
-      doSearch,
-      criteriaData,
-    } = this.props;
-    const { translate } = this.context;
-
-    if (!ltmplConfig || !sourceId) {
-      return (
-        <>
-          <Card loading={loading}></Card>
-          <Table loading={loading}></Table>
-        </>
-      );
-    }
-
-    let tableColumns = this.buildTableColumns(
-      ltmplConfig,
-      hiddenColIds,
-      hiddenRowCodes,
-      sortedColConfigs
-    );
-
-    let { buttons } = ltmplConfig;
-    let displayCriteriaCard: boolean = false;
-    if (funcMode == "simple" || funcMode == "common") {
-      displayCriteriaCard = false;
-    } else if (this.criteriaFormUseful()) {
-      displayCriteriaCard = true;
-    }
-
-    let columnConfigs = [];
-    if (sortedColConfigs) {
-      for (let colConfig of sortedColConfigs) {
-        if (!hiddenColIds.includes(colConfig.id)) {
-          columnConfigs.push(colConfig);
-        }
-      }
-    }
-
-    const sortColumnData = [];
-    if (Array.isArray(criteriaData["sortColIds"])) {
-      sortColumnData.push(...criteriaData["sortColIds"]);
-    }
-    return (
-      <>
-        {/*暂时不支持L2chart 后续用echart*/}
-        {/*{buttons.includes("showChart") && showL2Chart ? <div>*/}
-        {/*    <StatViewL2Chart queryKey={queryKey.key} ltmplConfig={ltmplConfig} hiddenColIds={hiddenColIds}*/}
-        {/*                     hiddenRowCodes={hiddenRowCodes}/>*/}
-        {/*    /!*<Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>*!/*/}
-        {/*</div> : ""*/}
-        {/*}*/}
-        {buttons.includes("analysis") && showL2ActTable ? (
-          <div>
-            <L2ActTable
-              serverKey={serverKey}
-              innerQueryKey={queryKey.key}
-              sourceId={sourceId}
-            />
-            <Divider
-              dashed
-              style={{ borderTopColor: "#40a9ff" }}
-              plain
-            ></Divider>
-          </div>
-        ) : (
-          ""
-        )}
-        <div className="actTable">
-          {funcMode == "complete" || funcMode == "common" ? (
-            collapsible ? null : (
-              <span>
-                {ltmplConfig.header ? (
-                  <div
-                    style={{ padding: "6px" }}
-                    dangerouslySetInnerHTML={{ __html: ltmplConfig.header }}
-                  ></div>
-                ) : null}
-                <h3>
-                  {" "}
-                  {!title
-                    ? translate("${" + ltmplConfig.title + "}")
-                    : typeof title == "string"
-                    ? translate("${" + title + "}")
-                    : title}
-                  {/*{translate("${" + (title ? title : ltmplConfig.title) + "}")}*/}
-                  <p className="fr">{this.renderHeaderButtons()}</p>
-                </h3>
-              </span>
-            )
-          ) : null}
-          {displayCriteriaCard ? this.renderCriteriaForm() : null}
-          {loading ? (
-            <Table loading={loading}></Table>
-          ) : (
-            <QueryTable
-                tableProps={{scrollY:ltmplConfig.scrollY,clickDisplayTotal:!ltmplConfig.directShowTotal}}
-              serverKey={serverKey}
-              onChangePage={onChangePage}
-              viewModels={viewModels}
-              primaryColumn={ltmplConfig.primaryColumn}
-              columnConfigs={columnConfigs}
-              summaryConfigs={ltmplConfig.totalColumnConfigs}
-              maxSelectedRows={this.checkBoxUseful() ? 10000 : -1}
-              selectedRows={selectedRows}
-              columns={tableColumns}
-              hiddenRowCodes={hiddenRowCodes}
-              pageInfo={{
-                pageNo: pageNo ? pageNo : 1,
-                pageSize: pageSize ? pageSize : ltmplConfig.defaultPageSize,
-              }}
-              queryKey={queryKey}
-              onChangeRowSelection={this.changeRowSelection}
-              subtotalXColumn={
-                ltmplConfig.subtotalXColumn == null ||
-                ltmplConfig.subtotalXColumn.length <= 0
-                  ? null
-                  : ltmplConfig.subtotalXColumn
-              }
-              subtotalYColumn={
-                ltmplConfig.subtotalYColumn == null ||
-                ltmplConfig.subtotalYColumn.length <= 0
-                  ? null
-                  : ltmplConfig.subtotalYColumn
-              }
-              groupIColumns={ltmplConfig.groupIColumns}
-              doSearch={doSearch}
-              sortColumnData={sortColumnData}
-            />
-          )}
-          {/*此处放页脚*/}
-          {ltmplConfig.footer ? (
-            <div
-              style={{ padding: "6px" }}
-              dangerouslySetInnerHTML={{ __html: ltmplConfig.footer }}
-            ></div>
-          ) : null}
-        </div>
-      </>
-    );
-  };
-
-  saveRatmplSelect = async (selectedRows: SelectedRow[]) => {
-    this.setState({
-      showRatmplSelector: false,
-    });
-    const { serverKey, sourceId, mainCode, doSearch } = this.props;
-    if (!selectedRows || selectedRows.length <= 0) {
-      return;
-    }
-
-    //查询
-    const codes: string[] = [];
-    for (let row of selectedRows) {
-      codes.push(row.code);
-    }
-    await HcserviceV3.saveRatmplSelectCodes(
-      serverKey,
-      sourceId,
-      mainCode,
-      codes
-    );
-    doSearch(null);
-  };
-
-  handleColumnOrder(columnId) {
-    const sortColumns = this.props.criteriaData["sortColIds"];
-
-    if (!Array.isArray(sortColumns)) return undefined;
-
-    for (const column of sortColumns) {
-      const [key, sort] = column.split("_");
-
-      if (key === columnId) {
-        if (sort === "asc") return "ascend";
-        if (sort === "desc") return "descend";
-        continue;
-      }
-    }
-
-    return undefined;
-  }
-
-
-
-  render() {
-    let {
-      queryKey,
-      loading,
-      blockMenuTreeDrawerOpen,
-      recordCode,
-      showCustomCard,
-      customButton,
-      customButtonData,
-      showRatmplSelector,
-    } = this.state;
-    let {
-      sourceId,
-      ltmplConfig,
-      title,
-      collapsible,
-      initCollapse,
-      tip,
-      serverKey,
-      mainCode,
-    } = this.props;
-    const { translate } = this.context;
-
-    if (!ltmplConfig || !sourceId) {
-      return (
-        <>
-          <Card loading={loading}></Card>
-          <Table loading={loading}></Table>
-        </>
-      );
-    }
-
-    return (
-      <>
-        {" "}
-        {this.renderAboveCustomPage()}
-        {collapsible ? (
-          <CollapseCard
-            initCollapse={initCollapse}
-            title={
-              <>
-                {!title ? ltmplConfig.title : title}
-                <ToolTipBar
-                  content={tip ? tip : ltmplConfig ? ltmplConfig.tip : null}
-                />
-              </>
-            }
-            id={queryKey + ltmplConfig.id}
-            className={`hoverable`}
-            headStyle={{ background: "#f2f4f5" }}
-            loading={loading}
-            bodyStyle={{ padding: "6px" }}
-            //暂时注释掉，后续要支持配置。
-            extra={this.renderHeaderButtons()}
-          >
-            {this.renderContent()}
-          </CollapseCard>
-        ) : (
-          <>{this.renderContent()}</>
-        )}
-        {this.renderOhterCustomPage()}
-        <BlockMenuTreeDrawer
-          onOk={() => {
-            this.setState({
-              blockMenuTreeDrawerOpen: false,
-            });
-          }}
-          onCancel={() => {
-            this.setState({
-              blockMenuTreeDrawerOpen: false,
-            });
-          }}
-          open={blockMenuTreeDrawerOpen}
-          roleCode={recordCode}
-        />
-        {showRatmplSelector ? (
-          <ModelSelectTable
-            serverKey={serverKey}
-            // defaultCriteriaValue={fieldGroupConfig.defaultCriteriaValue}
-            // maxSelectedRows={fieldGroupConfig.max}
-            open={showRatmplSelector}
-            onOK={this.saveRatmplSelect}
-            onCancel={() => {
-              this.setState({ showRatmplSelector: false });
-            }}
-            mainCode={mainCode}
-            sourceId={sourceId}
-            existRelation={"false"}
-          ></ModelSelectTable>
-        ) : (
-          ""
-        )}
-      </>
-    );
-  }
-
-
-}
-
-export default ActTable;
+import React, { ReactNode, ReactDOM } from "react";
+import {
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  Collapse,
+  Divider,
+  Popconfirm,
+  Popover,
+  Row,
+  Space,
+  Drawer,
+  Modal,
+  Tooltip,
+  message,
+} from "antd";
+import HCService from "../tmpl/hcservice-v3";
+import Table from "./control-table-x-axis-wrapper";
+import {
+  AlignCenterOutlined,
+  AlignLeftOutlined,
+  CaretDownOutlined,
+  CaretUpOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  FormOutlined,
+  FundOutlined,
+  KeyOutlined,
+  LineChartOutlined,
+  MenuOutlined,
+  PlusCircleOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  RetweetOutlined,
+  SearchOutlined,
+  TableOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
+import "./index.css";
+import {
+  ActTableMode,
+  ActTableViewModel,
+  AddOrUpdate,
+  BuiltInButtonName,
+  ClassAddConfig,
+  ColumnConfig,
+  CustomButton,
+  DoEditParam,
+  DtmplData,
+  JumpConfig,
+  LtmplConfig,
+  QueryKey,
+  SelectedRow,
+  ShowViewParam,
+  TmplBaseProps,
+} from "../tmpl/interface";
+import TableUnits from "./table-util";
+import SupportInputTypes from "../tmpl/control-type-supportor";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import QueryTable from "./query-table";
+import CriteriaForm from "./../form/criteria-form";
+import ViewControl from "../controls/view-control";
+import Units from "../units";
+import ColumnSelector from "./column/column-selector";
+import ExportFrame, { ExportType } from "../export/export-frame";
+import { SortableHandle } from "react-sortable-hoc";
+import L2ActTable from "./l2-act-table";
+
+import Action from "../controls/action";
+import Restat from "./stat/restat";
+import ActionUtils from "../controls/action/utils";
+import CquickButton from "../controls/cquery/cquick-button";
+import CollapseCard from "../controls/collapse-card";
+import ToolTipBar from "../detail/tooltipbar";
+import { LocaleContext } from "../locale/LocaleProvider";
+import BlockMenuTreeDrawer from "../module/block-menu-tree-drawer";
+import EditButton from "../detail/button/edit-button";
+import ViewButton from "../detail/button/view-button";
+import ProgramConfig from "../units";
+import ModelSelectTable from "./../table/modal-select-table";
+import NewinFileView from "../controls/file-view/newin-file-view";
+
+const DragHandle = SortableHandle(() => (
+  <MenuOutlined style={{ cursor: "grab", color: "#999" }} />
+));
+const { Panel } = Collapse;
+
+type Level = "l1" | "l2";
+
+const defaultDisabledColIds: string[] = ["20000", "10000"];
+let refresh = true;
+
+interface ActTableProps extends TmplBaseProps {
+  criteriaData: object;
+  pageNo: number;
+  pageSize: number;
+  onChangePage: (pageNo: number, pageSize: number) => void;
+  ltmplConfig: LtmplConfig;
+  menuId?: string;
+  showView?: (showVievParam: ShowViewParam) => void;
+  doCreate?: (addtmplId: string, toCustomPage: boolean) => void;
+  customCreatable?: boolean;
+  doEdit?: (doEditParam: DoEditParam) => void;
+  customEditable?: boolean;
+  doDelete?: (code: string) => void;
+  doSearch?: (params: object) => void;
+  doRAction?: (ractionId: string, mainCode: string) => void;
+  level?: Level;
+  funcMode?: ActTableMode;
+  title?: ReactNode;
+  tip?: any;
+  collapsible?: boolean;
+  initCollapse?: boolean;
+  readOnly?: boolean;
+}
+
+interface ActTableStat {
+  //tableColumns?: object[];
+  sortedColConfigs?: ColumnConfig[];
+  queryKey?: QueryKey;
+  loading?: boolean;
+  selectedRows?: SelectedRow[];
+  selectedDatas?: DtmplData[];
+  hiddenColIds?: string[];
+  drillingColIds?: string[];
+  disabledColIds?: string[];
+  hiddenRowCodes?: string[];
+  viewModels?: ActTableViewModel[];
+  showL2ActTable?: boolean;
+  showL2Chart?: boolean;
+  recordCode?: string;
+  blockMenuTreeDrawerOpen?: boolean;
+  showCustomCard?: boolean;
+  customButton?: CustomButton;
+  customButtonData?: DtmplData[];
+  showRatmplSelector?: boolean;
+}
+
+class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
+  state = {
+    //tableColumns: undefined,
+    sortedColConfigs: undefined,
+    queryKey: undefined,
+    loading: true,
+    disableCols: undefined,
+    hiddenColIds: defaultDisabledColIds,
+    selectedRows: [],
+    selectedDatas: [],
+    hiddenRowCodes: [],
+    viewModels: [],
+    drillingColIds: undefined,
+    disabledColIds: undefined,
+    showL2ActTable: false,
+    showL2Chart: false,
+    recordCode: undefined,
+    blockMenuTreeDrawerOpen: false,
+    showCustomCard: false,
+    customButtonData: undefined,
+    customButton: undefined,
+    showRatmplSelector: false,
+  };
+
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  static defaultProps = {
+    criteriaData: {},
+    funcMode: "complete",
+    collapsible: false,
+    initCollapse: false,
+    readOnly: false,
+  };
+
+  loadData = async (
+    hiddenColIds: string[],
+    hiddenRowCodes: string[],
+    sortedColConfigs: ColumnConfig[]
+  ) => {
+    const {
+      sourceId,
+      criteriaData,
+      ltmplConfig,
+      mainCode,
+      level,
+      pageNo,
+      pageSize,
+      serverKey,
+    } = this.props;
+
+    if (!ltmplConfig) {
+      return;
+    }
+
+    this.setState({
+      loading: true,
+    });
+    let disabledColIds: string[] = [];
+    let hiddenColIds_ = [...hiddenColIds];
+    if (criteriaData && criteriaData["drillingColIds"]) {
+      let dColIds = [...criteriaData["drillingColIds"]];
+      ltmplConfig.columns.forEach((item) => {
+        if (
+          item.statColType == "dimension" &&
+          !dColIds.includes(item.id) &&
+          !hiddenColIds_.includes(item.id)
+        ) {
+          hiddenColIds_.push(item.id);
+          disabledColIds.push(item.id);
+        }
+        if (
+          item.statColType == "dimension" &&
+          !dColIds.includes(item.id) &&
+          !disabledColIds.includes(item.id)
+        ) {
+          disabledColIds.push(item.id);
+        }
+      });
+      hiddenColIds_ = hiddenColIds_.filter((id) => {
+        return !dColIds.includes(id);
+      });
+    }
+    ltmplConfig.columns.forEach((item) => {
+      if (item.hidden) {
+        hiddenColIds_.push(item.id);
+      }
+    });
+    /** 构建column **/
+    // let tableColumns = this.buildTableColumns(ltmplConfig, hiddenColIds_, hiddenRowCodes, sortedColConfigs);
+
+    const { defaultPageSize } = ltmplConfig;
+
+    let pageInfo = {
+      pageNo: pageNo ? pageNo : 1,
+      pageSize: pageSize ? pageSize : defaultPageSize ? defaultPageSize : 10,
+      virtualEndPageNo: undefined,
+    };
+
+    /** 构建 dataSource **/
+    //构建过滤条件
+    let queryKey: QueryKey;
+    if (level && level == "l2") {
+      queryKey = await HcserviceV3.requestL2LtmplQueryKey(serverKey, sourceId, {
+        ...criteriaData,
+        ...pageInfo,
+        mainCode,
+      });
+    } else {
+      queryKey = await HcserviceV3.requestLtmplQueryKey(serverKey, sourceId, {
+        ...criteriaData,
+        ...pageInfo,
+        mainCode,
+      });
+    }
+
+    if (!queryKey.sourceId || queryKey.sourceId == this.props.sourceId) {
+      this.setState({
+        disabledColIds,
+        hiddenColIds: hiddenColIds_,
+        hiddenRowCodes,
+        sortedColConfigs,
+        queryKey,
+        showL2Chart: false,
+        selectedRows: [],
+        selectedDatas: [],
+        viewModels:
+          this.state.viewModels.length > 0 ? this.state.viewModels : ["table"],
+      });
+    }
+    this.setState({
+      loading: false,
+    });
+  };
+
+  doCustomButton = (customButton: CustomButton, records: DtmplData[]) => {
+    let page = ProgramConfig.getCustomPage(customButton.id);
+    if (!page) {
+      message.error("Not Found Custom Page");
+    } else {
+      //if(customButton.){
+      this.setState({
+        showCustomCard: true,
+        customButton,
+        customButtonData: records,
+      });
+      // }
+    }
+  };
+
+  renderAboveCustomPage = () => {
+    return this.renderCustomPage("above-table");
+  };
+
+  renderOhterCustomPage = () => {
+    return (
+      <>
+        {this.renderCustomPage("under-table")}
+        {this.renderCustomPage("modal-window")}
+        {this.renderCustomPage("left-drawer")}
+        {this.renderCustomPage("right-drawer")}
+      </>
+    );
+  };
+
+  renderCustomPage = (
+    windowPosition:
+      | "under-table"
+      | "above-table"
+      | "modal-window"
+      | "left-drawer"
+      | "right-drawer"
+  ) => {
+    const { translate } = this.context;
+    const { customButton, customButtonData } = this.state;
+
+    if (!customButton) {
+      return "";
+    }
+    if (windowPosition && windowPosition != customButton.windowPosition) {
+      return "";
+    }
+    let customProps = { customButton: customButton, data: customButtonData };
+    let page = ProgramConfig.getCustomPage(customButton.id);
+    let customElement = React.createElement(page, customProps);
+    if (
+      customButton.windowPosition == "under-table" ||
+      customButton.windowPosition == "above-table"
+    ) {
+      return (
+        <Card
+          id={"CustomCard" + customButton.id}
+          size={"small"}
+          style={{ marginTop: "6px" }}
+          extra={
+            <Button
+              size={"small"}
+              danger={true}
+              onClick={() => {
+                this.setState({ customButton: undefined });
+              }}
+            >
+              {" "}
+              {translate("${关闭}")}
+            </Button>
+          }
+        >
+          {customElement}
+        </Card>
+      );
+    } else if (
+      customButton.windowPosition == "left-drawer" ||
+      customButton.windowPosition == "right-drawer"
+    ) {
+      return (
+        <Drawer
+          open={true}
+          id={"CustomCard" + customButton.id}
+          placement={
+            customButton.windowPosition == "right-drawer" ? "right" : "left"
+          }
+          width={customButton.windowWidth}
+          onClose={() => {
+            this.setState({ customButton: undefined });
+          }}
+        >
+          {customElement}
+        </Drawer>
+      );
+    } else if (customButton.windowPosition == "modal-window") {
+      return (
+        <Modal
+          open={true}
+          closable={true}
+          width={customButton.windowWidth}
+          style={{ height: customButton.windowHeight }}
+          onCancel={() => {
+            this.setState({ customButton: undefined });
+          }}
+        >
+          {customElement}
+        </Modal>
+      );
+    }
+  };
+
+  buildTableColumns = (
+    ltmplConfig: LtmplConfig,
+    hiddenColIds: string[],
+    hiddenRowCodes: string[],
+    sortedColConfigs: ColumnConfig[]
+  ) => {
+    const {
+      showView,
+      doEdit,
+      doRAction,
+      customEditable,
+      serverKey,
+      readOnly,
+      sourceId,
+    } = this.props;
+    const { translate } = this.context;
+    const { buttons, builtInButtons } = ltmplConfig;
+    let tableColumns = [];
+    let s = 0;
+    let colConfigs = sortedColConfigs ? sortedColConfigs : ltmplConfig.columns;
+
+    let currentDataColIndex = 0;
+
+    colConfigs.forEach((item) => {
+      let column = {};
+      if (!hiddenColIds || !hiddenColIds.includes(item.id)) {
+        tableColumns.push(column);
+      }
+      column["title"] = item.title;
+      column["dataIndex"] = item.id;
+      if (item["colWidth"]) column["width"] = item["colWidth"];
+      if (item["statColType"]) column["statColType"] = item["statColType"];
+      if (item["aggFunc"]) column["cal"] = item["aggFunc"];
+      if (item["order"]) column["order"] = Number(item["order"]);
+      // column['ellipsis']= true;
+      s++;
+      let itemType = SupportInputTypes.getSupportControlType(item);
+      if (s < 12 && item.title != "操作" && item.title != "序号") {
+        if (hiddenColIds.includes("10000")) {
+          const order = this.handleColumnOrder(column["dataIndex"]);
+
+          if(item.sortable) {
+            TableUnits.sort(column, itemType, order);
+          }
+
+        }
+      }
+      //特殊列处理
+      //序号
+      if (item.title === "序号") {
+        column["width"] = item.colWidth ? item.colWidth : 50;
+        column["title"] = translate("${序号}");
+        column["align"] = item.valueAlign ? item.valueAlign : "center";
+        //item.fixed='left';
+        column["render"] = (text, record, index) => <label>{index + 1}</label>;
+        item["sorter"] = undefined;
+      } else if (item.id == "10000") {
+        column["title"] = (
+          <Tooltip title={translate("${拖拽排序}")}>
+            {translate("${" + item.title + "}")}
+          </Tooltip>
+        );
+        column["width"] = 30;
+        column["dataIndex"] = item.id;
+        column["className"] = "drag-visible";
+        column["render"] = () => <DragHandle />;
+      } else if (item.id == "20000") {
+        //隐藏
+        column["align"] = "center";
+        column["width"] = 40;
+        column["title"] = (
+          <>
+            {hiddenRowCodes.length > 0 ? (
+              <Tooltip title={translate("${取消隐藏}")}>
+                <Button
+                  style={{ marginRight: "0px" }}
+                  size="small"
+                  shape={"circle"}
+                  icon={<EyeOutlined />}
+                  type={"text"}
+                  onClick={() => this.unHiden()}
+                ></Button>
+              </Tooltip>
+            ) : (
+              ""
+            )}
+          </>
+        );
+        column["render"] = (text, record) => (
+          <Tooltip title={translate("${隐藏}")}>
+            {" "}
+            <Button
+              style={{ marginRight: "0px" }}
+              icon={<EyeInvisibleOutlined />}
+              type="dashed"
+              size="small"
+              onClick={() => this.onHide(record.code)}
+            ></Button>
+          </Tooltip>
+        );
+      } else if (item.title === "操作") {
+        column["fixed"] = "right";
+        column["align"] = "center";
+        column["width"] = item.colWidth ? item.colWidth : 160;
+        column["className"] = "opsColumn";
+        column["title"] = <>{translate("${操作}")}</>;
+        column["render"] = (text, record) => (
+          <Space size={[0, 4]} wrap>
+            {buttons.includes("detail") &&
+            showView &&
+            ActionUtils.isShow(
+              ltmplConfig.buttonViewAction?.preposes,
+              [record],
+              undefined
+            ) ? (
+              <ViewButton
+                showView={showView}
+                data={record}
+                ltmplConfig={ltmplConfig}
+              ></ViewButton>
+            ) : (
+              ""
+            )}
+            {buttons.includes("customDetail") &&
+            showView &&
+            ActionUtils.isShow(
+              ltmplConfig.buttonViewAction?.preposes,
+              [record],
+              undefined
+            ) ? (
+              <Button
+                size="small"
+                type="primary"
+                icon={<AlignLeftOutlined />}
+                onClick={() => showView({ code: record.code })}
+              ></Button>
+            ) : (
+              ""
+            )}
+            {buttons.includes("dtmplEdit") && doEdit && !readOnly ? (
+              <EditButton
+                doEdit={doEdit}
+                data={record}
+                ltmplConfig={ltmplConfig}
+              ></EditButton>
+            ) : (
+              ""
+            )}
+            {builtInButtons?.includes("blockAuthMenuTree") && !readOnly ? (
+              <Button
+                size="small"
+                type="dashed"
+                icon={
+                  <KeyOutlined
+                    rotate={180}
+                    style={{ color: "#f5222d", marginRight: "4px" }}
+                  />
+                }
+                onClick={() =>
+                  this.setState({
+                    blockMenuTreeDrawerOpen: true,
+                    recordCode: record.code,
+                  })
+                }
+              ></Button>
+            ) : (
+              ""
+            )}
+            {(buttons.includes("dtmplCustomEdit") || customEditable) &&
+            doEdit &&
+            !readOnly &&
+            ActionUtils.isShow(
+              ltmplConfig.buttonEditAction?.preposes,
+              [record],
+              undefined
+            ) ? (
+              <Button
+                size="small"
+                type="dashed"
+                icon={<FormOutlined />}
+                onClick={() =>
+                  doEdit({
+                    code: record.code,
+                    mode: "update",
+                    toCustomPage: true,
+                  })
+                }
+              ></Button>
+            ) : (
+              ""
+            )}
+            {buttons.includes("copy") && doEdit && !readOnly ? (
+              <Tooltip title={translate("${复制}")}>
+                <Button
+                  size="small"
+                  type="dashed"
+                  icon={<CopyOutlined />}
+                  onClick={async () => {
+                    //先复制
+                    let toCustomPage = false;
+                    if (buttons.includes("dtmplCustomEdit") || customEditable) {
+                      toCustomPage = true;
+                    }
+                    let code = await HcserviceV3.doCopy(
+                      serverKey,
+                      sourceId,
+                      record.code
+                    );
+                    if (code) {
+                      doEdit({ code, mode: "update", toCustomPage });
+                    }
+                  }}
+                ></Button>
+              </Tooltip>
+            ) : (
+              ""
+            )}
+            {ltmplConfig.rowCustomButtons
+              ? ltmplConfig.rowCustomButtons.map((customButton) => {
+                  return (
+                    <Button
+                      key={customButton.id}
+                      size="small"
+                      type={
+                        customButton.buttonType
+                          ? customButton.buttonType
+                          : "dashed"
+                      }
+                      onClick={() =>
+                        this.doCustomButton(customButton, [record])
+                      }
+                    >
+                      {translate("${" + customButton.title + "}")}
+                    </Button>
+                  );
+                })
+              : ""}
+            {ltmplConfig.ractions && !readOnly
+              ? ltmplConfig.ractions.map((raction) => {
+                  return (
+                      ActionUtils.isShow(
+                          raction?.preposes,
+                          [record],
+                          undefined
+                      )?
+                    <Button
+                      key={raction.id}
+                      size="small"
+                      type="dashed"
+                      onClick={() => doRAction(raction.id, record.code)}
+                    >
+                      {translate("${" + raction.title + "}")}
+                    </Button>:""
+                  );
+                })
+              : ""}
+
+            {ltmplConfig.rowActions &&
+            !readOnly &&
+            ltmplConfig.rowActions.length > 0
+              ? ltmplConfig.rowActions.map((action) => {
+                  return (
+                    <Action
+                      serverKey={serverKey}
+                      iconType={"icon"}
+                      key={action.id}
+                      data={[record]}
+                      actionConfig={action}
+                      doAction={this.doRowAction}
+                      buttonSize={"small"}
+                      serial={1}
+                    ></Action>
+                  );
+                })
+              : ""}
+
+            {ltmplConfig.rowJumps &&
+            ltmplConfig.rowJumps.length > 0 &&
+            !readOnly
+              ? ltmplConfig.rowJumps.map((jump) => {
+                  return (
+                    <Button
+                      key={jump.id}
+                      size="small"
+                      type="dashed"
+                      onClick={() => this.doRowJump(jump, record)}
+                    >
+                      {translate("${" + jump.title + "}")}
+                    </Button>
+                  );
+                })
+              : ""}
+            {ltmplConfig.rowCQuerys &&
+            ltmplConfig.rowCQuerys.length > 0 &&
+            !readOnly
+              ? ltmplConfig.rowCQuerys.map((cquery) => {
+                  // console.log("record record", record);
+                  return (
+                    <CquickButton
+                      serverKey={serverKey}
+                      key={cquery.id}
+                      size={"small"}
+                      pageType={"drawer"}
+                      // onClick={() => doCQuery(cquery.id)}
+                      cQueryConfig={cquery}
+                      mainCode={
+                        cquery.mainCodeColId
+                          ? record[cquery.mainCodeColId]
+                          : record.code
+                      }
+                    />
+                  );
+                })
+              : ""}
+            {ltmplConfig.rowFileButtons &&
+            ltmplConfig.rowFileButtons.length > 0
+                ? ltmplConfig.rowFileButtons.map((openFileButton) => {
+                  let v= record[openFileButton.fieldId];
+                  if(v){
+                    if(v instanceof Array){
+                      v=v[0];
+                    }
+                    if(v.includes("@R@")>0){
+                      v=v.split("@R@")[1];
+                    }
+                    return (
+                        <NewinFileView
+                            title={openFileButton.title}
+                            filePath={HCService.toFilePath(v, serverKey)}
+                            serverKey={serverKey}
+                            key={openFileButton.id}
+                            //size={"small"}
+                        />
+                    );
+                  }else{
+                    return "";
+                  }
+                })
+                : ""}
+            {buttons.includes("singleDelete") &&
+            !readOnly &&
+            ActionUtils.isShow(
+              ltmplConfig.buttonDeleteAction?.preposes,
+              [record],
+              undefined
+            ) ? (
+              <Popconfirm
+                placement="rightBottom"
+                title={translate("${确定要[删除]此数据吗}?")}
+                onConfirm={() => {
+                  this.doDeleteByCode(record.code);
+                }}
+                okText={translate("${确定}")}
+                cancelText={translate("${取消}")}
+                okType={"danger"}
+              >
+                <Button size="small" type="dashed" danger>
+                  <DeleteOutlined />
+                </Button>
+              </Popconfirm>
+            ) : (
+              ""
+            )}
+          </Space>
+        );
+      } else {
+        currentDataColIndex++;
+        column["className"] = "opsColumn";
+        column["title"] = translate("${" + item.title + "}");
+        column["width"] = item.colWidth ? item.colWidth : 160;
+        column["ellipsis"] = { showTitle: true };
+        column["align"] = item.valueAlign ? item.valueAlign : "left";
+        if (
+          ltmplConfig.leftFixedCols &&
+          ltmplConfig.leftFixedCols >= currentDataColIndex
+        ) {
+          column["fixed"] = "left";
+        } else {
+          column["fixed"] = item.colFixed
+            ? item.colFixed == "right"
+              ? "right"
+              : "left"
+            : false;
+        }
+        column["render"] = (text, record) => {
+          return (
+            <ViewControl
+              serverKey={serverKey}
+              fieldConfig={item}
+              value={record[item.id]}
+              holderType={"table"}
+            />
+          );
+        };
+      }
+    });
+
+    console.log("columns", tableColumns);
+
+    return tableColumns;
+  };
+
+  async componentDidMount() {
+    const { ltmplConfig } = this.props;
+    const { translate } = this.context;
+    let sortedColConfigs = undefined;
+    if (ltmplConfig) {
+      sortedColConfigs = [
+        { id: "10000", title: translate("${排序}") },
+        ...ltmplConfig.columns,
+        { id: "20000", title: translate("${隐藏}") },
+      ];
+    }
+    this.loadData(defaultDisabledColIds, [], sortedColConfigs);
+  }
+
+  async componentDidUpdate(prevProps) {
+    const { sourceId, criteriaData, ltmplConfig } = this.props;
+    const { translate } = this.context;
+    let {
+      ltmplConfig: preLtmplConfig,
+      criteriaData: preCriteriaData,
+      sourceId: preSourceId,
+    } = prevProps;
+
+    let { hiddenColIds, sortedColConfigs } = this.state;
+
+    if (
+      (sourceId && preSourceId != sourceId) ||
+      (ltmplConfig &&
+        (!preLtmplConfig || ltmplConfig.id != preLtmplConfig.id)) ||
+      Units.transQueryParamsToStr(criteriaData, false, [
+        "pageSize",
+        "pageNo",
+      ]) !=
+        Units.transQueryParamsToStr(preCriteriaData, false, [
+          "pageSize",
+          "pageNo",
+        ])
+    ) {
+      //5秒后允许再次请求数据
+      //refresh=false;
+
+      if (preLtmplConfig && ltmplConfig.id == preLtmplConfig.id) {
+        await this.loadData(hiddenColIds, [], sortedColConfigs);
+      } else {
+        let sColConfigs = undefined;
+        if (ltmplConfig) {
+          sColConfigs = [
+            { id: "10000", title: translate("${排序}") },
+            ...ltmplConfig.columns,
+            { id: "20000", title: translate("${隐藏}") },
+          ];
+        }
+        this.setState({
+          viewModels: ["table"],
+        });
+        await this.loadData(defaultDisabledColIds, [], sColConfigs);
+      }
+      // setTimeout( function() {
+      //   refresh=true;
+      // },112000);
+    }
+  }
+
+  handleShowChart = () => {
+    this.setState({
+      showL2Chart: !this.state.showL2Chart,
+    });
+  };
+
+  handleDataAnalysis = () => {
+    this.setState({
+      showL2ActTable: !this.state.showL2ActTable,
+    });
+  };
+
+  unHiden = () => {
+    const { ltmplConfig } = this.props;
+    const { hiddenColIds, sortedColConfigs } = this.state;
+    this.setState({
+      hiddenRowCodes: [],
+      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, [], sortedColConfigs),
+    });
+  };
+
+  onHide = (code: string) => {
+    const { ltmplConfig } = this.props;
+    const { hiddenRowCodes, hiddenColIds, sortedColConfigs } = this.state;
+    let hiddenCodes = [...hiddenRowCodes, code];
+    this.setState({
+      hiddenRowCodes: hiddenCodes,
+      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenCodes, sortedColConfigs),
+    });
+  };
+
+  changeViewModel = (viewModels) => {
+    this.setState({
+      viewModels,
+    });
+  };
+
+  changeHiddenColumns = (hiddenColIds: string[]) => {
+    const {} = this.props;
+    const {} = this.state;
+    this.setState({
+      showL2Chart: false,
+      hiddenColIds,
+      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
+    });
+  };
+
+  doSelectedAction = async (actionId: string, codes, params: object) => {
+    const { selectedRows } = this.state;
+    this.doAction(actionId, selectedRows, params);
+  };
+
+  doAction = async (actionId: string, selectedRows: SelectedRow[], params) => {
+    const { serverKey } = this.props;
+    const { hiddenColIds, hiddenRowCodes, sortedColConfigs } = this.state;
+    this.setState({
+      loading: true,
+    });
+    let result: boolean = await HcserviceV3.postActions(
+      serverKey,
+      actionId,
+      selectedRows,
+      params
+    );
+    if (result) {
+      //重新加载数据
+      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+    } else {
+      this.setState({
+        loading: false,
+      });
+    }
+  };
+
+  doRowAction = async (actionId: string, codes: string[], params: object) => {
+    this.doAction(actionId, [{ title: undefined, code: codes[0] }], params);
+  };
+
+  doDelete = async () => {
+    const { sourceId, serverKey, mainCode } = this.props;
+    const {
+      selectedRows,
+      hiddenColIds,
+      hiddenRowCodes,
+      sortedColConfigs,
+    } = this.state;
+    this.setState({
+      loading: true,
+    });
+    let result: boolean = await HcserviceV3.deleteData(
+      serverKey,
+      sourceId,
+      selectedRows,
+      mainCode
+    );
+    if (result) {
+      //重新加载数据
+      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+    } else {
+      this.setState({
+        loading: false,
+      });
+    }
+  };
+
+  doDeleteByCode = async (code: string) => {
+    const { sourceId, serverKey, mainCode } = this.props;
+    const { hiddenColIds, hiddenRowCodes, sortedColConfigs } = this.state;
+    this.setState({
+      loading: true,
+    });
+    let result: boolean = await HcserviceV3.deleteByCode(
+      serverKey,
+      sourceId,
+      [code],
+      mainCode
+    );
+    if (result) {
+      //重新加载数据
+      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+    } else {
+      this.setState({
+        loading: false,
+      });
+    }
+  };
+
+  doSelectedCQuery = async (cqueryId: string) => {};
+
+  doJump = async (jump: JumpConfig, record_: DtmplData) => {
+    let record = record_.fieldMap ? record_.fieldMap : record_;
+
+    let url = null;
+
+    let path = jump.path;
+    if (!path) {
+      path = "/";
+    }
+    //是否以http开头
+    if (path.indexOf("#") == 0 || url.indexOf("/#") == 0) {
+      url = "";
+    } else if (
+      path.indexOf("http://") == 0 ||
+      path.indexOf("HTTP://") == 0 ||
+      path.indexOf("https://") == 0 ||
+      path.indexOf("HTTPS://") == 0
+    ) {
+      url = path.split("//")[0] + "//";
+      path = path.split("//")[1];
+    } else {
+      url = new URL(window.location.href).pathname;
+    }
+    //处理路由参数
+    let paths = path.split("/");
+
+    let routeParamConfigs = jump.routeParams;
+    if (routeParamConfigs) {
+      for (let i = 0; i < paths.length; i++) {
+        if (paths[i].indexOf(":") == 0) {
+          let pa = paths[i].substring(1);
+          //根据参数名匹配参数
+          for (let p of routeParamConfigs) {
+            if (p && pa == p.title) {
+              //赋值替换
+              let v = record[p.id] ? record[p.id] : p.defaultValue;
+              paths[i] = v;
+              break;
+            }
+          }
+        }
+      }
+      url = Units.joinPath(url, paths.join("/"));
+    } else {
+      url = Units.joinPath(url, path);
+    }
+
+    //处理search 参数
+    let searchParamConfigs = jump.searchParams;
+    let searchs = [];
+    //放入token
+    if (jump.tokenName) {
+      searchs[0] = jump.tokenName + "=" + Units.hydrocarbonToken();
+    }
+
+    if (searchParamConfigs) {
+      let initSearchLength = searchs.length;
+      for (let i = 0; i < searchParamConfigs.length; i++) {
+        let p = searchParamConfigs[i];
+        let v = record[p.id] ? record[p.id] : p.defaultValue;
+        if (!v && p.title == "code") {
+          v = record_.code;
+        }
+        searchs[initSearchLength + i] = p.title + "=" + v;
+      }
+    }
+    if (searchs.length > 0) {
+      if (url.indexOf("?") != url.length - 1) {
+        url = url + "?";
+      }
+      url = url + searchs.join("&");
+    }
+    if (
+      url.indexOf("#") == 0 ||
+      url.indexOf("/#") == 0 ||
+      url.indexOf("//#") == 0
+    ) {
+      window.location.hash = url.substring(url.indexOf("#") + 1);
+    } else {
+      window.open(url);
+    }
+  };
+
+  doRowJump = async (jump: JumpConfig, record: DtmplData) => {
+    this.doJump(jump, record);
+  };
+
+  renderExportButton = (title, type: ExportType, sourceId?: string) => {
+    const { pageNo, pageSize, serverKey, ltmplConfig, readOnly } = this.props;
+
+    let buttons = ltmplConfig?.buttons;
+
+    const { queryKey } = this.state;
+    const { translate } = this.context;
+    return (
+      <Popover
+        content={
+          <ExportFrame //导出组件
+            currentPage={{
+              pageNo: pageNo ? pageNo : 1,
+              pageSize: pageSize ? pageSize : ltmplConfig.defaultPageSize,
+            }}
+            type={type}
+            serverKey={serverKey}
+            queryKey={queryKey}
+            sourceId={sourceId}
+            title={translate(
+              "${" + ltmplConfig.title + "}" + "-" + "${" + title + "}"
+            )}
+          />
+        }
+        title={translate("${" + title + "}")}
+        placement="bottomRight"
+        trigger="click"
+      >
+        <Tooltip title={translate("${" + title + "}")}>
+          <Button
+            style={{
+              // display:
+              //     buttons.includes("exportLtmplExcel") && !readOnly
+              //         ? "inline"
+              //         : "none",
+              marginLeft: "5px",
+            }} //为了点击到没有导出模块，使组件不致销毁，丢失导出数据
+          >
+            {type == "ltmpl-data-excel" ? <DownloadOutlined /> : title}
+          </Button>
+        </Tooltip>
+      </Popover>
+    );
+  };
+
+  renderFileExportButton = () => {
+    const { ltmplConfig } = this.props;
+    let fileExports = ltmplConfig?.topFileExports;
+    if (fileExports) {
+      return fileExports.map((fileExport) => {
+        return this.renderExportButton(
+          fileExport.title,
+          "ltmpl-data-filedata",
+          fileExport.id
+        );
+      });
+    } else {
+      return <></>;
+    }
+  };
+
+  doSelectedJump = async (jump: JumpConfig) => {
+    const { selectedDatas } = this.state;
+    if (selectedDatas.length == 1) {
+      this.doJump(jump, selectedDatas[0]);
+    }
+  };
+
+  changeRowSelection = (
+    selectedRows: SelectedRow[],
+    selectedDatas: DtmplData[]
+  ) => {
+    this.setState({
+      selectedRows,
+      selectedDatas,
+    });
+  };
+
+  onChangeColSort = (sortedColConfigs: ColumnConfig[]) => {
+    const { ltmplConfig } = this.props;
+    const { hiddenRowCodes, hiddenColIds } = this.state;
+    this.setState({
+      sortedColConfigs,
+      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
+    });
+  };
+
+  getAddTmplButton = (classAddConfigs: ClassAddConfig[]) => {
+    const { translate } = this.context;
+    if (classAddConfigs && classAddConfigs.length < 1) {
+      return translate("${没有分类添加按钮}");
+    }
+    return classAddConfigs.map((config) => {
+      return (
+        <p>
+          <Button
+            size={"small"}
+            type={"text"}
+            onClick={() => this.props.doCreate(config.id, false)}
+          >
+            {config.title}
+          </Button>
+        </p>
+      );
+    });
+  };
+
+  renderHeaderButtons = () => {
+    let {
+      hiddenColIds,
+      queryKey,
+      viewModels,
+      sortedColConfigs,
+      disabledColIds,
+      showL2Chart,
+      showL2ActTable,
+    } = this.state;
+    const {
+      ltmplConfig,
+      sourceId,
+      doCreate,
+      doSearch,
+      menuId,
+      funcMode,
+      customCreatable,
+      serverKey,
+      readOnly,
+      pageNo,
+      pageSize,
+    } = this.props;
+    const { translate } = this.context;
+    let { buttons } = ltmplConfig;
+
+    return (
+      <>
+        <Space>
+          {funcMode == "common" && this.criteriaFormUseful() ? (
+            <Popover trigger="click" content={this.renderCriteriaForm()}>
+              <Button>
+                <SearchOutlined />
+              </Button>
+            </Popover>
+          ) : null}
+          {buttons.includes("ratmplSelect") ? (
+            <Button onClick={() => this.setState({ showRatmplSelector: true })}>
+              {translate("${选择}")}
+            </Button>
+          ) : (
+            ""
+          )}
+          {buttons.includes("dtmplAdd") && doCreate && !readOnly ? (
+            ltmplConfig.classAddConfigs &&
+            ltmplConfig.classAddConfigs.length > 0 ? (
+              <Popover
+                arrow={false}
+                content={this.getAddTmplButton(ltmplConfig.classAddConfigs)}
+                placement="bottomRight"
+              >
+                <Tooltip>
+                  <Button>
+                    <PlusOutlined />
+                  </Button>
+                </Tooltip>
+              </Popover>
+            ) : (
+              <Tooltip title={translate("${创建}")}>
+                <Button onClick={() => doCreate(null, false)}>
+                  <PlusOutlined />
+                </Button>{" "}
+              </Tooltip>
+            )
+          ) : (
+            ""
+          )}
+          {(buttons.includes("dtmplCustomAdd") || customCreatable) &&
+          doCreate &&
+          !readOnly ? (
+            <Tooltip title={translate("${创建}")}>
+              <Button onClick={() => doCreate(null, true)}>
+                <PlusCircleOutlined />
+              </Button>
+            </Tooltip>
+          ) : (
+            ""
+          )}
+          {buttons.includes("importLtmplExcel") && !readOnly ? (
+            <Tooltip title={translate("${导入}")}>
+              {" "}
+              <Button
+                href={`#${
+                  localStorage.getItem("version") === "v2" ? "/v2" : ""
+                }/${sourceId}/importer?menuId=${menuId}`}
+                target={"_blank"}
+              >
+                <UploadOutlined />
+              </Button>
+            </Tooltip>
+          ) : (
+            ""
+          )}
+          {buttons.includes("exportLtmplExcel") && !readOnly
+            ? this.renderExportButton("导出", "ltmpl-data-excel")
+            : ""}
+          {this.renderFileExportButton()}
+          {buttons.includes("showChart") ? (
+            <Tooltip
+              title={
+                showL2Chart
+                  ? translate("${隐藏}${图表}")
+                  : translate("${展示}${图表}")
+              }
+            >
+              <Button onClick={this.handleShowChart}>
+                <LineChartOutlined />
+              </Button>
+            </Tooltip>
+          ) : (
+            ""
+          )}
+          {buttons.includes("analysis") ? (
+            <Tooltip
+              title={
+                showL2ActTable
+                  ? translate("${隐藏}${数据分析}")
+                  : translate("${展示}${数据分析}")
+              }
+            >
+              <Button onClick={this.handleDataAnalysis}>
+                <FundOutlined />
+              </Button>
+            </Tooltip>
+          ) : (
+            ""
+          )}
+          {buttons.includes("reStat") && !readOnly ? (
+            <Restat
+              serverKey={serverKey}
+              fields={ltmplConfig.reStatParams}
+              sourceId={sourceId}
+              onfinish={() => doSearch(null)}
+            ></Restat>
+          ) : (
+            ""
+          )}
+          <Popover
+            content={
+              <Checkbox.Group
+                value={viewModels}
+                onChange={this.changeViewModel}
+              >
+                <Row style={{ width: "120px" }}>
+                  <Col span={24}>
+                    <Checkbox value={"table"}>{translate("${表格}")}</Checkbox>
+                  </Col>
+                  <Col span={24}>
+                    <Checkbox value={"verticalList"}>
+                      {translate("${纵向列表}")}
+                    </Checkbox>
+                  </Col>
+                  {/*<Col span={24}><Checkbox value={'horizontalList'}>横向列表</Checkbox></Col>*/}
+                </Row>
+              </Checkbox.Group>
+            }
+            title={translate("${视图}")}
+            placement="bottomRight"
+            trigger="click"
+          >
+            <Tooltip title={translate("${选择视图}")}>
+              <Button>
+                <RetweetOutlined />
+              </Button>
+            </Tooltip>
+          </Popover>
+          <Popover
+            content={
+              <ColumnSelector
+                columns={sortedColConfigs}
+                disabledColIds={disabledColIds}
+                hiddenColIds={hiddenColIds}
+                onChangeColSort={this.onChangeColSort}
+                onChangeHiddenCols={this.changeHiddenColumns}
+              />
+            }
+            title={translate("${排序和选择列}")}
+            placement="bottomRight"
+            trigger="click"
+          >
+            <Tooltip title={translate("${点击排序和选择列}")}>
+              <Button>
+                <TableOutlined />
+              </Button>
+            </Tooltip>
+          </Popover>
+          {doSearch ? (
+            <Button
+              className="hoverbig"
+              title={translate("${刷新}")}
+              onClick={() => {
+                doSearch(null);
+              }}
+            >
+              <ReloadOutlined />
+            </Button>
+          ) : (
+            ""
+          )}
+        </Space>
+      </>
+    );
+  };
+
+  criteriaFormUseful = () => {
+    const { ltmplConfig } = this.props;
+    let { buttons, criterias, updrillButtonConfigs } = ltmplConfig;
+    if (
+      ((buttons.includes("query") ||
+        (updrillButtonConfigs && updrillButtonConfigs.length > 0)) &&
+        ((criterias && criterias.length > 0) ||
+          buttons.includes("drilling"))) ||
+      this.checkBoxUseful()
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  checkBoxUseful = () => {
+    const { ltmplConfig } = this.props;
+    let { buttons, jumps, actions,fileExports } = ltmplConfig;
+    if (
+      buttons.includes("batchDelete") ||
+      (actions && actions.length > 0) ||
+      (jumps && jumps.length > 0) || (fileExports && fileExports.length>0)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  renderCriteriaForm = () => {
+    let { loading, selectedRows, selectedDatas } = this.state;
+    let { ltmplConfig, doSearch, criteriaData, serverKey } = this.props;
+    return (
+      <CriteriaForm
+        serverKey={serverKey}
+        loading={loading}
+        selectedDatas={selectedDatas}
+        selectedRows={selectedRows}
+        doCustomButton={this.doCustomButton}
+        ltmplConfig={ltmplConfig}
+        data={criteriaData}
+        doCQuery={this.doSelectedCQuery}
+        doAction={this.doSelectedAction}
+        doDelete={this.doDelete}
+        doJump={this.doSelectedJump}
+        doSearch={doSearch}
+      />
+    );
+  };
+
+  renderContent = () => {
+    let {
+      queryKey,
+      loading,
+      selectedRows,
+      hiddenRowCodes,
+      viewModels,
+      sortedColConfigs,
+      hiddenColIds,
+      showL2ActTable,
+    } = this.state;
+    let {
+      sourceId,
+      ltmplConfig,
+      funcMode,
+      title,
+      collapsible,
+      pageSize,
+      pageNo,
+      onChangePage,
+      serverKey,
+      doSearch,
+      criteriaData,
+    } = this.props;
+    const { translate } = this.context;
+
+    if (!ltmplConfig || !sourceId) {
+      return (
+        <>
+          <Card loading={loading}></Card>
+          <Table loading={loading}></Table>
+        </>
+      );
+    }
+
+    let tableColumns = this.buildTableColumns(
+      ltmplConfig,
+      hiddenColIds,
+      hiddenRowCodes,
+      sortedColConfigs
+    );
+
+    let { buttons } = ltmplConfig;
+    let displayCriteriaCard: boolean = false;
+    if (funcMode == "simple" || funcMode == "common") {
+      displayCriteriaCard = false;
+    } else if (this.criteriaFormUseful()) {
+      displayCriteriaCard = true;
+    }
+
+    let columnConfigs = [];
+    if (sortedColConfigs) {
+      for (let colConfig of sortedColConfigs) {
+        if (!hiddenColIds.includes(colConfig.id)) {
+          columnConfigs.push(colConfig);
+        }
+      }
+    }
+
+    const sortColumnData = [];
+    if (Array.isArray(criteriaData["sortColIds"])) {
+      sortColumnData.push(...criteriaData["sortColIds"]);
+    }
+    return (
+      <>
+        {/*暂时不支持L2chart 后续用echart*/}
+        {/*{buttons.includes("showChart") && showL2Chart ? <div>*/}
+        {/*    <StatViewL2Chart queryKey={queryKey.key} ltmplConfig={ltmplConfig} hiddenColIds={hiddenColIds}*/}
+        {/*                     hiddenRowCodes={hiddenRowCodes}/>*/}
+        {/*    /!*<Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>*!/*/}
+        {/*</div> : ""*/}
+        {/*}*/}
+        {buttons.includes("analysis") && showL2ActTable ? (
+          <div>
+            <L2ActTable
+              serverKey={serverKey}
+              innerQueryKey={queryKey.key}
+              sourceId={sourceId}
+            />
+            <Divider
+              dashed
+              style={{ borderTopColor: "#40a9ff" }}
+              plain
+            ></Divider>
+          </div>
+        ) : (
+          ""
+        )}
+        <div className="actTable">
+          {funcMode == "complete" || funcMode == "common" ? (
+            collapsible ? null : (
+              <span>
+                {ltmplConfig.header ? (
+                  <div
+                    style={{ padding: "6px" }}
+                    dangerouslySetInnerHTML={{ __html: ltmplConfig.header }}
+                  ></div>
+                ) : null}
+                <h3>
+                  {" "}
+                  {!title
+                    ? translate("${" + ltmplConfig.title + "}")
+                    : typeof title == "string"
+                    ? translate("${" + title + "}")
+                    : title}
+                  {/*{translate("${" + (title ? title : ltmplConfig.title) + "}")}*/}
+                  <p className="fr">{this.renderHeaderButtons()}</p>
+                </h3>
+              </span>
+            )
+          ) : null}
+          {displayCriteriaCard ? this.renderCriteriaForm() : null}
+          {loading ? (
+            <Table loading={loading}></Table>
+          ) : (
+            <QueryTable
+                tableProps={{scrollY:ltmplConfig.scrollY,clickDisplayTotal:!ltmplConfig.directShowTotal}}
+              serverKey={serverKey}
+              onChangePage={onChangePage}
+              viewModels={viewModels}
+              primaryColumn={ltmplConfig.primaryColumn}
+              columnConfigs={columnConfigs}
+              summaryConfigs={ltmplConfig.totalColumnConfigs}
+              maxSelectedRows={this.checkBoxUseful() ? 10000 : -1}
+              selectedRows={selectedRows}
+              columns={tableColumns}
+              hiddenRowCodes={hiddenRowCodes}
+              pageInfo={{
+                pageNo: pageNo ? pageNo : 1,
+                pageSize: pageSize ? pageSize : ltmplConfig.defaultPageSize,
+              }}
+              queryKey={queryKey}
+              onChangeRowSelection={this.changeRowSelection}
+              subtotalXColumn={
+                ltmplConfig.subtotalXColumn == null ||
+                ltmplConfig.subtotalXColumn.length <= 0
+                  ? null
+                  : ltmplConfig.subtotalXColumn
+              }
+              subtotalYColumn={
+                ltmplConfig.subtotalYColumn == null ||
+                ltmplConfig.subtotalYColumn.length <= 0
+                  ? null
+                  : ltmplConfig.subtotalYColumn
+              }
+              groupIColumns={ltmplConfig.groupIColumns}
+              doSearch={doSearch}
+              sortColumnData={sortColumnData}
+            />
+          )}
+          {/*此处放页脚*/}
+          {ltmplConfig.footer ? (
+            <div
+              style={{ padding: "6px" }}
+              dangerouslySetInnerHTML={{ __html: ltmplConfig.footer }}
+            ></div>
+          ) : null}
+        </div>
+      </>
+    );
+  };
+
+  saveRatmplSelect = async (selectedRows: SelectedRow[]) => {
+    this.setState({
+      showRatmplSelector: false,
+    });
+    const { serverKey, sourceId, mainCode, doSearch } = this.props;
+    if (!selectedRows || selectedRows.length <= 0) {
+      return;
+    }
+
+    //查询
+    const codes: string[] = [];
+    for (let row of selectedRows) {
+      codes.push(row.code);
+    }
+    await HcserviceV3.saveRatmplSelectCodes(
+      serverKey,
+      sourceId,
+      mainCode,
+      codes
+    );
+    doSearch(null);
+  };
+
+  handleColumnOrder(columnId) {
+    const sortColumns = this.props.criteriaData["sortColIds"];
+
+    if (!Array.isArray(sortColumns)) return undefined;
+
+    for (const column of sortColumns) {
+      const [key, sort] = column.split("_");
+
+      if (key === columnId) {
+        if (sort === "asc") return "ascend";
+        if (sort === "desc") return "descend";
+        continue;
+      }
+    }
+
+    return undefined;
+  }
+
+
+
+  render() {
+    let {
+      queryKey,
+      loading,
+      blockMenuTreeDrawerOpen,
+      recordCode,
+      showCustomCard,
+      customButton,
+      customButtonData,
+      showRatmplSelector,
+    } = this.state;
+    let {
+      sourceId,
+      ltmplConfig,
+      title,
+      collapsible,
+      initCollapse,
+      tip,
+      serverKey,
+      mainCode,
+    } = this.props;
+    const { translate } = this.context;
+
+    if (!ltmplConfig || !sourceId) {
+      return (
+        <>
+          <Card loading={loading}></Card>
+          <Table loading={loading}></Table>
+        </>
+      );
+    }
+
+    return (
+      <>
+        {" "}
+        {this.renderAboveCustomPage()}
+        {collapsible ? (
+          <CollapseCard
+            initCollapse={initCollapse}
+            title={
+              <>
+                {!title ? ltmplConfig.title : title}
+                <ToolTipBar
+                  content={tip ? tip : ltmplConfig ? ltmplConfig.tip : null}
+                />
+              </>
+            }
+            id={queryKey + ltmplConfig.id}
+            className={`hoverable`}
+            headStyle={{ background: "#f2f4f5" }}
+            loading={loading}
+            bodyStyle={{ padding: "6px" }}
+            //暂时注释掉，后续要支持配置。
+            extra={this.renderHeaderButtons()}
+          >
+            {this.renderContent()}
+          </CollapseCard>
+        ) : (
+          <>{this.renderContent()}</>
+        )}
+        {this.renderOhterCustomPage()}
+        <BlockMenuTreeDrawer
+          onOk={() => {
+            this.setState({
+              blockMenuTreeDrawerOpen: false,
+            });
+          }}
+          onCancel={() => {
+            this.setState({
+              blockMenuTreeDrawerOpen: false,
+            });
+          }}
+          open={blockMenuTreeDrawerOpen}
+          roleCode={recordCode}
+        />
+        {showRatmplSelector ? (
+          <ModelSelectTable
+            serverKey={serverKey}
+            // defaultCriteriaValue={fieldGroupConfig.defaultCriteriaValue}
+            // maxSelectedRows={fieldGroupConfig.max}
+            open={showRatmplSelector}
+            onOK={this.saveRatmplSelect}
+            onCancel={() => {
+              this.setState({ showRatmplSelector: false });
+            }}
+            mainCode={mainCode}
+            sourceId={sourceId}
+            existRelation={"false"}
+          ></ModelSelectTable>
+        ) : (
+          ""
+        )}
+      </>
+    );
+  }
+
+
+}
+
+export default ActTable;