aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/form/criteria-form.tsx

@@ -1,604 +1,604 @@
-import React, { useEffect, useRef, useState, useMemo } from "react";
-import {
-  Button,
-  Card,
-  Col,
-  Form as AntdForm,
-  Popconfirm,
-  Row,
-  Select,
-  Space,
-  theme
-} from "antd";
-import {
-  CriteriaConfig, CustomButton,
-  DtmplData,
-  JumpConfig,
-  LtmplConfig,
-  SelectConfig,
-  SelectedRow,
-  CriteriaGroup
-} from "../tmpl/interface";
-import EntryControl from "../controls/entry-control";
-import Action from "../controls/action";
-import CquickButton from "../controls/cquery/cquick-button";
-import { useLocale } from "../locale/useLocale";
-import { LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
-import { ProgramConfig } from "../index";
-import SelectCodeExport from "../controls/file-export/select-code-export";
-import Icon from "../icon/aliIcon";
-
-const FormItem = AntdForm.Item;
-const { useToken } = theme;
-
-export interface CriteriaFormProps {
-  serverKey?: string;
-  ltmplConfig: LtmplConfig & SelectConfig;
-  data: object;
-  selectedRows: SelectedRow[];
-  selectedDatas?: DtmplData[];
-  doSearch?: (data: object) => void;
-  doDelete?: () => void;
-  doAction?: (string, selectedRows: SelectedRow[], object) => void;
-  doCustomButton?: (customButton: CustomButton, datas: DtmplData[]) => void;
-  doJump?: (jump: JumpConfig) => void;
-  doCQuery?: (cqueryId: string) => void;
-  doMultiRowEdit?: () => void;
-  hiddenCriteriaIds?: string[];
-  open?: boolean;
-  loading: boolean;
-  mainCode?: string;
-  multiRowEditDisabled?: boolean; // 批量行编辑是否禁用
-  tabCriteriaId?: string; // 列表页tab条件id
-}
-
-let serial_number = new Date().getTime();
-
-const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
-  const { translate } = useLocale();
-  const {
-    ltmplConfig,
-    doSearch,
-    doAction,
-    doCustomButton,
-    doJump,
-    doDelete,
-    selectedRows,
-    data,
-    open,
-    loading,
-    selectedDatas,
-    doCQuery,
-    serverKey,
-    doMultiRowEdit,
-    multiRowEditDisabled,
-    tabCriteriaId
-  } = props;
-  let [form] = AntdForm.useForm();
-  const { token: { colorBorder, colorWarning } } = useToken();
-
-  let {
-    buttons,
-    actions,
-    customButtons,
-    fileExports,
-    jumps,
-    cQuerys,
-    drillingParams,
-    columns,
-    updrillButtonConfigs,
-    innerParams,
-    defShowCriteriaCount,
-    criteriaGroups,
-    commonCriteria,
-    split2TabCriteria
-  } = ltmplConfig;
-  const initialValues = {};
-  const searchSubmit = (data) => {
-    let new_serial_number = new Date().getTime();
-
-    if (doSearch && new_serial_number - serial_number > 3000) {
-      serial_number = new_serial_number;
-      doSearch({ ...data, serial_number });
-    }
-
-    doSearch && doSearch({ ...data, serial_number });
-  };
-  // let currentDrillButton=null;
-  const [currentDrillButton, setCurrentDrillButton] = useState(null);
-  const [drillLoadings, setDrillLoadings] = useState<string>(null);
-  const [collapsible, setCollapsible] = useState<boolean>(false);
-  const [expanded, setExpanded] = useState<boolean>(false);
-  const [criteriaGExpanded, setCriteriaGExpanded] = useState<boolean>(false); // 扩展条件组是否展开
-  const [criteriaGroupHeight, setCriteriaGroupHeight] = useState<number>(32); // 扩展条件组高度，用于展开/收起
-  const criteriaGroupRef = useRef(null);
-
-  const criteria = useMemo(() => {
-    const temCriteria = commonCriteria?.length ? commonCriteria : ltmplConfig.criteria;
-    if (tabCriteriaId) { // 处理标签页条件(存在标签页，多tab拆解条件时搜索栏加载其他tab条件)
-      const otherTabCriteria = split2TabCriteria.filter(item => `c_${item.id}` !== tabCriteriaId);
-      return [...temCriteria, ...otherTabCriteria];
-    }
-    return temCriteria;
-  }, [ltmplConfig, tabCriteriaId]);
-
-  let collapseCriteria: CriteriaConfig[] = defShowCriteriaCount <= 0 ? criteria : criteria.slice(0, defShowCriteriaCount);
-
-  // 扩展条件组，监听扩展条件组高度变化，用于展开/收起
-  const handleCriteriaGroupResize = () => {
-    if (!criteriaGroupRef.current) {
-      return;
-    }
-    let timeoutId;
-    const resizeObserver = new ResizeObserver((entries) => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => {
-        for (let entry of entries) {
-          const newHeight = entry.target.scrollHeight;
-          setCriteriaGroupHeight(newHeight);
-        }
-      }, 200);
-    });
-    resizeObserver.observe(criteriaGroupRef.current);
-    return resizeObserver;
-  }
-
-  useEffect(() => {
-    const resizeObserver = handleCriteriaGroupResize();
-    return () => {
-      resizeObserver && resizeObserver.disconnect();
-    }
-  }, []);
-
-  useEffect(() => {
-    form.resetFields();
-    if (collapseCriteria && criteria && collapseCriteria.length < criteria.length) {
-      setCollapsible(true);
-    }
-  });
-
-  useEffect(() => { // 表单初始化设置
-    if (Object.keys(initialValues)?.length) {
-      onValuesChange(initialValues, false);
-    }
-  }, [initialValues]);
-
-  let showQueryButton = buttons.includes("query") && doSearch;
-
-  let showDeleteButton = buttons.includes("batchDelete") && doDelete;
-  let deleteButtonDisabled = !(selectedRows && selectedRows.length > 0);
-
-  const renderAction = () => {
-    if (doAction && actions && actions.length > 0) {
-      return actions.map((action) => {
-        let disabled = true;
-        if (selectedRows) {
-          if (selectedRows.length > 0 && action.multible) {
-            disabled = false;
-          } else if (selectedRows.length == 1) {
-            disabled = false;
-          }
-        }
-
-        return (
-          <Action
-            serverKey={serverKey}
-            hiddenType={"disabled"}
-            key={action.id}
-            disabled={disabled}
-            data={selectedDatas}
-            actionConfig={action}
-            doAction={doAction}
-            serial={1}
-            buttonSize="middle"
-          />
-        );
-      });
-    }
-  };
-
-  const renderCustomButton = () => {
-    if (doCustomButton && customButtons?.length > 0) {
-      return customButtons.map((customButton) => {
-        // defDisabled设置默认是否禁用
-        let disabled = customButton.defDisabled !== false;
-        if (customButton.unDatarequired) { // 判断按钮是否需要关联数据
-          disabled = false;
-        } else {
-          if (selectedRows) {
-            if (selectedRows.length > 0 && customButton.multible) {
-              disabled = false;
-            } else if (selectedRows.length == 1) {
-              disabled = false;
-            }
-          }
-        }
-
-        return (
-          <Button disabled={disabled}
-            key={customButton.id}
-            type={customButton.buttonType ? customButton.buttonType : 'dashed'}
-            onClick={() => doCustomButton(customButton, selectedDatas)}
-          >
-            {customButton.icon ? <Icon type={customButton.icon} /> : null}
-            {translate("${" + customButton.title + "}")}
-          </Button>
-        );
-      });
-    }
-  };
-
-  const renderFileExport = () => {
-    if (doAction && fileExports && fileExports.length > 0) {
-      return fileExports.map((fileExport) => {
-        let disabled = true;
-        if (selectedRows) {
-          if (selectedRows.length > 0 && fileExport.multible) {
-            disabled = false;
-          } else if (selectedRows.length == 1) {
-            disabled = false;
-          }
-        }
-        let codes = [];
-        if (selectedDatas) {
-          selectedDatas.forEach(s => {
-            codes.push(s.code);
-          })
-        }
-
-        return (
-          <SelectCodeExport
-            serverKey={serverKey}
-            hiddenType={"disabled"}
-            codes={codes}
-            key={fileExport.id}
-            fileExport={fileExport}
-            disabled={disabled}
-          ></SelectCodeExport>
-        );
-      });
-    }
-  };
-
-  const renderUpdrill = () => {
-    if (updrillButtonConfigs && updrillButtonConfigs.length > 0) {
-      let i = 0;
-      return updrillButtonConfigs.map((updrillButtonConfig) => {
-        i++;
-        return (
-          <>
-            {i == 1 ? (
-              <AntdForm.Item
-                hidden={true}
-                name={"updrillButtonId"}
-              ></AntdForm.Item>
-            ) : null}
-            <Button
-              loading={drillLoadings == updrillButtonConfig.id ? true : false}
-              disabled={
-                drillLoadings && drillLoadings != updrillButtonConfig.id
-                  ? true
-                  : false
-              }
-              icon={
-                currentDrillButton == updrillButtonConfig.id ? (
-                  <SearchOutlined />
-                ) : null
-              }
-              type={updrillButtonConfig.buttonType}
-              shape={updrillButtonConfig.buttonShape}
-              htmlType="submit"
-              onClick={() => {
-                form.setFieldValue("updrillButtonId", updrillButtonConfig.id);
-                form.setFieldValue(
-                  "drillingColIds",
-                  updrillButtonConfig.dimensions
-                );
-                form.submit();
-              }}
-            >
-              {translate("${" + updrillButtonConfig.title + "}")}
-            </Button>
-          </>
-        );
-      });
-    }
-  };
-
-  const renderJump = () => {
-    if (doJump && jumps && jumps.length > 0) {
-      return jumps.filter(Boolean).map((jump) => {
-        let disabled = true;
-        if (selectedRows && selectedRows.length == 1) {
-          disabled = false;
-        }
-        return (
-          <Button
-            key={jump.id}
-            onClick={() => doJump(jump)}
-            disabled={disabled}
-          >
-            {jump.icon ? <Icon type={jump.icon} /> : null}
-            {jump.title}
-          </Button>
-        );
-      });
-    }
-  };
-
-  const renderCQuery = () => {
-    const { serverKey } = props;
-    if (doCQuery && cQuerys && cQuerys.length > 0) {
-      return cQuerys.map((cquery) => {
-        let disabled = true;
-        if (selectedRows && selectedRows.length == 1) {
-          disabled = false;
-        }
-        return (
-          <CquickButton
-            serverKey={serverKey}
-            key={cquery.id}
-            disabled={disabled}
-            cQueryConfig={cquery}
-            mainCode={!disabled ? selectedRows[0].code : undefined}
-          />
-        );
-      });
-    }
-  };
-
-  const hasDimension = () => {
-    columns.forEach((item) => {
-      if (item.statColType == "dimension") {
-        return true;
-      }
-    });
-    return false;
-  };
-
-  const renderDrillDimension = () => {
-    let drillingColIdsName = "drillingColIds";
-    let dimensionColIds = [];
-    const options = [];
-    columns.forEach((item) => {
-      if (item.statColType == "dimension") {
-        options.push({ label: item.title, value: item.id });
-        dimensionColIds.push(item.id);
-      }
-    });
-    options.push({ label: translate("${无}"), value: "5" });
-
-    initialValues[drillingColIdsName] = data
-      ? data[drillingColIdsName]
-        ? data[drillingColIdsName]
-        : dimensionColIds
-      : dimensionColIds;
-
-    let fieldValue = data ? data[drillingColIdsName] : dimensionColIds;
-    let antdControlProps = {
-      placeholder: translate("${请选择}${维度}"),
-      disabled: false,
-      value: fieldValue,
-      style: { minWidth: 220, width: "100%" },
-    };
-    return ltmplConfig.showDim ? (
-      <FormItem
-        label={translate("${维度}")}
-        name={drillingColIdsName}
-        key={drillingColIdsName}
-        rules={[
-          {
-            required: true,
-            message: translate("${请选择维度,上钻到顶层请只选[无]}"),
-          },
-        ]}
-      >
-        <Select
-          mode="multiple"
-          {...antdControlProps}
-          notFoundContent={translate("${暂无选项}")}
-          allowClear={true}
-          showSearch
-          showArrow={true}
-          options={options}
-        ></Select>
-      </FormItem>
-    ) : (
-      <AntdForm.Item hidden={true} name={"drillingColIds"}></AntdForm.Item>
-    );
-  };
-
-  const onValuesChange = (changedValues, clearCurrent = true) => {
-    let appCtmplConfig = ProgramConfig.getAppCtmplConfig(
-      ltmplConfig,
-      data,
-      props
-    )
-    if (appCtmplConfig.onCriteriaValuesChange) {
-      //自定义值修改逻辑
-      appCtmplConfig.onCriteriaValuesChange(
-        changedValues,
-        data,
-        form,
-        clearCurrent
-      );
-    }
-    // if (onValuesChange) {
-    //   onValuesChange();
-    // }
-  };
-
-  // lagicalOpt扩展条件组条件
-  const renderCriteria = (criteria: CriteriaConfig[], lagicalOpt?: string) => {
-    if (!criteria) {
-      return;
-    }
-    const { hiddenCriteriaIds, serverKey } = props;
-    criteria.forEach((item) => {
-      let formItemName = "c_" + item.id;
-      let fieldValue = data ? data[formItemName] : undefined;
-      initialValues[formItemName] = fieldValue;
-    });
-
-    if (doSearch) {
-      return criteria.map((item, index) => {
-        let formItemName = "c_" + item.id;
-        let fieldValue = data ? data[formItemName] : undefined;
-        if (item?.extControlType == "ltree-entity-select" || item?.extControlType == "ltree-entity-select-value") {
-          // return <FormItem>
-          //    <Input type={"hidden"} name={formItemName} value={fieldValue} />
-          //  </FormItem>
-          // return null;
-        } else if (!hiddenCriteriaIds.includes(item.id)) {
-          const formItem = (
-            <FormItem
-              style={lagicalOpt ? { margin: 0 } : {}}
-              label={translate("${" + item.title + "}")}
-              name={formItemName}
-              key={item.id}
-              tooltip={item.tip}
-              rules={
-                item.required
-                  ? [
-                    {
-                      required: true,
-                      message: translate("${请选择}" + "${" + item.title + "}"),
-                    },
-                  ]
-                  : undefined
-              }
-            >
-              <EntryControl
-                serverKey={serverKey}
-                mainCode={props.mainCode}
-                value={fieldValue}
-                fieldConfig={item}
-              />
-            </FormItem>
-          );
-          return lagicalOpt ? <>
-            {formItem}
-            {criteria.length !== index + 1 ? <FormItem style={{ margin: 0, color: colorWarning }}>{translate("${" + lagicalOpt + "}")}</FormItem> : ""}
-          </> : formItem;
-        }
-      });
-    }
-  };
-
-  //扩展条件组渲染
-  const renderCriteriaGroup = (criteriaGroup: CriteriaGroup[]) => {
-    if (!criteriaGroup) {
-      return;
-    }
-    const isExpanded = criteriaGroupHeight > 32;
-    return criteriaGroup.map(r =>
-      r.criteria?.length > 1 ?
-        < div style={{ borderRadius: "6px", border: `1px dashed ${colorBorder}`, padding: "2px 4px", marginRight: "16px", position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
-          <Space style={{ height: criteriaGExpanded ? "auto" : "32px", overflow: "hidden", }} ref={criteriaGroupRef} size={"small"} wrap>{renderCriteria(r.criteria, r.lagicalOpt === "OR" ? "或" : "且")}</Space>
-          {isExpanded ?
-            <Button icon={criteriaGExpanded ? <LeftOutlined /> : <RightOutlined />} type={"link"} onClick={() => setCriteriaGExpanded(!criteriaGExpanded)}>
-              {translate(criteriaGExpanded ? "${收起}" : "${展开}")}
-            </Button>
-            : ""}
-        </div > :
-        <Space size={"small"} wrap>{renderCriteria(r.criteria)}</Space>
-    );
-  };
-
-  return (
-    <AntdForm
-      form={form}
-      name="control-hooks"
-      initialValues={initialValues}
-      layout="inline"
-      onFinish={searchSubmit}
-      onValuesChange={(val) => onValuesChange(val)}
-      style={{ width: "100%" }}
-    >
-
-      {/*// <Collapse style={{ width: "100%" }} defaultActiveKey={["1"]}>*/}
-      {/*// <Panel header={""} key="1">*/}
-      <Card size={'small'} style={{ display: open ? "block" : "none", width: "100%" }}>
-        <Row>
-          <Col>
-            <Space size={"small"} wrap>
-              {showQueryButton ||
-                (updrillButtonConfigs && updrillButtonConfigs.length > 0)
-                ? renderCriteria(innerParams)
-                : null}
-              {buttons.includes("drilling") &&
-                open &&
-                (drillingParams.length > 0 || hasDimension() || ltmplConfig.showDim) ?
-                <>{renderCriteria(drillingParams)}
-                  {renderDrillDimension()}</>
-                : null}
-              {showQueryButton || (updrillButtonConfigs && updrillButtonConfigs.length > 0)
-                ? renderCriteria(expanded ? criteria : collapseCriteria)
-                : null}
-
-              {renderCriteriaGroup(criteriaGroups)}
-              <Space className="btns">
-                {collapsible ? (
-                  expanded ? <Button icon={<LeftOutlined />} type={"link"} onClick={() => setExpanded(false)}>
-                    {translate("${收起}")}
-                  </Button> :
-                    <Button icon={<RightOutlined />} type={"link"} onClick={() => setExpanded(true)}>
-                      {translate("${更多条件}")}
-                    </Button>
-                ) : (
-                  ""
-                )}
-                {showQueryButton ? (
-                  <Button type="primary" htmlType="submit" loading={loading}>
-                    {translate("${查询}")}
-                  </Button>
-                ) : (
-                  ""
-                )}
-                {showDeleteButton ? (
-                  <Popconfirm
-                    placement="rightBottom"
-                    title={translate("${确定要[删除]选中数据吗}?")}
-                    onConfirm={() => {
-                      doDelete();
-                    }}
-                    okText={translate("${确定}")}
-                    cancelText={translate("${取消}")}
-                    okType={"danger"}
-                  >
-                    <Button danger disabled={deleteButtonDisabled}>
-                      {translate("${删除选中}")}
-                    </Button>
-                  </Popconfirm>
-                ) : (
-                  ""
-                )}
-                {/* 特别注意 目前 查询条件和 头部的 按钮 前置条件 均未支持，需要设置前置条件的情况请使用 行按钮*/}
-                {renderCustomButton()}
-                {renderAction()}
-                {renderJump()}
-                {renderCQuery()}
-                {renderUpdrill()}
-                {renderFileExport()}
-                {buttons.includes("multiRowEdit") && doMultiRowEdit ?
-                  <Button disabled={multiRowEditDisabled} onClick={doMultiRowEdit}>{translate("${保存}")}</Button> : ""}
-              </Space>
-            </Space>
-          </Col>
-        </Row>
-      </Card>
-      {/*<Card size={'small'}*/}
-      {/*  className="hoverable"*/}
-      {/*  style={{ display: open ? "block" : "none", width: "100%" }}*/}
-      {/*  headStyle={{ background: "#f2f4f5" }}*/}
-      {/*>*/}
-      {/*  */}
-      {/*</Card>*/}
-    </AntdForm>
-  );
-};
-CriteriaForm["defaultProps"] = {
-  hiddenCriteriaIds: [],
-  open: true,
-};
-export default CriteriaForm;
+import React, { useEffect, useRef, useState, useMemo } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Form as AntdForm,
+  Popconfirm,
+  Row,
+  Select,
+  Space,
+  theme
+} from "antd";
+import {
+  CriteriaConfig, CustomButton,
+  DtmplData,
+  JumpConfig,
+  LtmplConfig,
+  SelectConfig,
+  SelectedRow,
+  CriteriaGroup
+} from "../tmpl/interface";
+import EntryControl from "../controls/entry-control";
+import Action from "../controls/action";
+import CquickButton from "../controls/cquery/cquick-button";
+import { useLocale } from "../locale/useLocale";
+import { LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
+import { ProgramConfig } from "../index";
+import SelectCodeExport from "../controls/file-export/select-code-export";
+import Icon from "../icon/aliIcon";
+
+const FormItem = AntdForm.Item;
+const { useToken } = theme;
+
+export interface CriteriaFormProps {
+  serverKey?: string;
+  ltmplConfig: LtmplConfig & SelectConfig;
+  data: object;
+  selectedRows: SelectedRow[];
+  selectedDatas?: DtmplData[];
+  doSearch?: (data: object) => void;
+  doDelete?: () => void;
+  doAction?: (string, selectedRows: SelectedRow[], object) => void;
+  doCustomButton?: (customButton: CustomButton, datas: DtmplData[]) => void;
+  doJump?: (jump: JumpConfig) => void;
+  doCQuery?: (cqueryId: string) => void;
+  doMultiRowEdit?: () => void;
+  hiddenCriteriaIds?: string[];
+  open?: boolean;
+  loading: boolean;
+  mainCode?: string;
+  multiRowEditDisabled?: boolean; // 批量行编辑是否禁用
+  tabCriteriaId?: string; // 列表页tab条件id
+}
+
+let serial_number = new Date().getTime();
+
+const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
+  const { translate } = useLocale();
+  const {
+    ltmplConfig,
+    doSearch,
+    doAction,
+    doCustomButton,
+    doJump,
+    doDelete,
+    selectedRows,
+    data,
+    open,
+    loading,
+    selectedDatas,
+    doCQuery,
+    serverKey,
+    doMultiRowEdit,
+    multiRowEditDisabled,
+    tabCriteriaId
+  } = props;
+  let [form] = AntdForm.useForm();
+  const { token: { colorBorder, colorWarning } } = useToken();
+
+  let {
+    buttons,
+    actions,
+    customButtons,
+    fileExports,
+    jumps,
+    cQuerys,
+    drillingParams,
+    columns,
+    updrillButtonConfigs,
+    innerParams,
+    defShowCriteriaCount,
+    criteriaGroups,
+    commonCriteria,
+    split2TabCriteria
+  } = ltmplConfig;
+  const initialValues = {};
+  const searchSubmit = (data) => {
+    let new_serial_number = new Date().getTime();
+
+    if (doSearch && new_serial_number - serial_number > 3000) {
+      serial_number = new_serial_number;
+      doSearch({ ...data, serial_number });
+    }
+
+    doSearch && doSearch({ ...data, serial_number });
+  };
+  // let currentDrillButton=null;
+  const [currentDrillButton, setCurrentDrillButton] = useState(null);
+  const [drillLoadings, setDrillLoadings] = useState<string>(null);
+  const [collapsible, setCollapsible] = useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const [criteriaGExpanded, setCriteriaGExpanded] = useState<boolean>(false); // 扩展条件组是否展开
+  const [criteriaGroupHeight, setCriteriaGroupHeight] = useState<number>(32); // 扩展条件组高度，用于展开/收起
+  const criteriaGroupRef = useRef(null);
+
+  const criteria = useMemo(() => {
+    const temCriteria = commonCriteria?.length ? commonCriteria : ltmplConfig.criteria;
+    if (tabCriteriaId) { // 处理标签页条件(存在标签页，多tab拆解条件时搜索栏加载其他tab条件)
+      const otherTabCriteria = split2TabCriteria.filter(item => `c_${item.id}` !== tabCriteriaId);
+      return [...temCriteria, ...otherTabCriteria];
+    }
+    return temCriteria;
+  }, [ltmplConfig, tabCriteriaId]);
+
+  let collapseCriteria: CriteriaConfig[] = defShowCriteriaCount <= 0 ? criteria : criteria.slice(0, defShowCriteriaCount);
+
+  // 扩展条件组，监听扩展条件组高度变化，用于展开/收起
+  const handleCriteriaGroupResize = () => {
+    if (!criteriaGroupRef.current) {
+      return;
+    }
+    let timeoutId;
+    const resizeObserver = new ResizeObserver((entries) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        for (let entry of entries) {
+          const newHeight = entry.target.scrollHeight;
+          setCriteriaGroupHeight(newHeight);
+        }
+      }, 200);
+    });
+    resizeObserver.observe(criteriaGroupRef.current);
+    return resizeObserver;
+  }
+
+  useEffect(() => {
+    const resizeObserver = handleCriteriaGroupResize();
+    return () => {
+      resizeObserver && resizeObserver.disconnect();
+    }
+  }, []);
+
+  useEffect(() => {
+    form.resetFields();
+    if (collapseCriteria && criteria && collapseCriteria.length < criteria.length) {
+      setCollapsible(true);
+    }
+  });
+
+  useEffect(() => { // 表单初始化设置
+    if (Object.keys(initialValues)?.length) {
+      onValuesChange(initialValues, false);
+    }
+  }, [initialValues]);
+
+  let showQueryButton = buttons.includes("query") && doSearch;
+
+  let showDeleteButton = buttons.includes("batchDelete") && doDelete;
+  let deleteButtonDisabled = !(selectedRows && selectedRows.length > 0);
+
+  const renderAction = () => {
+    if (doAction && actions && actions.length > 0) {
+      return actions.map((action) => {
+        let disabled = true;
+        if (selectedRows) {
+          if (selectedRows.length > 0 && action.multible) {
+            disabled = false;
+          } else if (selectedRows.length == 1) {
+            disabled = false;
+          }
+        }
+
+        return (
+          <Action
+            serverKey={serverKey}
+            hiddenType={"disabled"}
+            key={action.id}
+            disabled={disabled}
+            data={selectedDatas}
+            actionConfig={action}
+            doAction={doAction}
+            serial={1}
+            buttonSize="middle"
+          />
+        );
+      });
+    }
+  };
+
+  const renderCustomButton = () => {
+    if (doCustomButton && customButtons?.length > 0) {
+      return customButtons.map((customButton) => {
+        // defDisabled设置默认是否禁用
+        let disabled = customButton.defDisabled !== false;
+        if (customButton.unDatarequired) { // 判断按钮是否需要关联数据
+          disabled = false;
+        } else {
+          if (selectedRows) {
+            if (selectedRows.length > 0 && customButton.multible) {
+              disabled = false;
+            } else if (selectedRows.length == 1) {
+              disabled = false;
+            }
+          }
+        }
+
+        return (
+          <Button disabled={disabled}
+            key={customButton.id}
+            type={customButton.buttonType ? customButton.buttonType : 'dashed'}
+            onClick={() => doCustomButton(customButton, selectedDatas)}
+          >
+            {customButton.icon ? <Icon type={customButton.icon} /> : null}
+            {translate("${" + customButton.title + "}")}
+          </Button>
+        );
+      });
+    }
+  };
+
+  const renderFileExport = () => {
+    if (doAction && fileExports && fileExports.length > 0) {
+      return fileExports.map((fileExport) => {
+        let disabled = true;
+        if (selectedRows) {
+          if (selectedRows.length > 0 && fileExport.multible) {
+            disabled = false;
+          } else if (selectedRows.length == 1) {
+            disabled = false;
+          }
+        }
+        let codes = [];
+        if (selectedDatas) {
+          selectedDatas.forEach(s => {
+            codes.push(s.code);
+          })
+        }
+
+        return (
+          <SelectCodeExport
+            serverKey={serverKey}
+            hiddenType={"disabled"}
+            codes={codes}
+            key={fileExport.id}
+            fileExport={fileExport}
+            disabled={disabled}
+          ></SelectCodeExport>
+        );
+      });
+    }
+  };
+
+  const renderUpdrill = () => {
+    if (updrillButtonConfigs && updrillButtonConfigs.length > 0) {
+      let i = 0;
+      return updrillButtonConfigs.map((updrillButtonConfig) => {
+        i++;
+        return (
+          <>
+            {i == 1 ? (
+              <AntdForm.Item
+                hidden={true}
+                name={"updrillButtonId"}
+              ></AntdForm.Item>
+            ) : null}
+            <Button
+              loading={drillLoadings == updrillButtonConfig.id ? true : false}
+              disabled={
+                drillLoadings && drillLoadings != updrillButtonConfig.id
+                  ? true
+                  : false
+              }
+              icon={
+                currentDrillButton == updrillButtonConfig.id ? (
+                  <SearchOutlined />
+                ) : null
+              }
+              type={updrillButtonConfig.buttonType}
+              shape={updrillButtonConfig.buttonShape}
+              htmlType="submit"
+              onClick={() => {
+                form.setFieldValue("updrillButtonId", updrillButtonConfig.id);
+                form.setFieldValue(
+                  "drillingColIds",
+                  updrillButtonConfig.dimensions
+                );
+                form.submit();
+              }}
+            >
+              {translate("${" + updrillButtonConfig.title + "}")}
+            </Button>
+          </>
+        );
+      });
+    }
+  };
+
+  const renderJump = () => {
+    if (doJump && jumps && jumps.length > 0) {
+      return jumps.filter(Boolean).map((jump) => {
+        let disabled = true;
+        if (selectedRows && selectedRows.length == 1) {
+          disabled = false;
+        }
+        return (
+          <Button
+            key={jump.id}
+            onClick={() => doJump(jump)}
+            disabled={disabled}
+          >
+            {jump.icon ? <Icon type={jump.icon} /> : null}
+            {jump.title}
+          </Button>
+        );
+      });
+    }
+  };
+
+  const renderCQuery = () => {
+    const { serverKey } = props;
+    if (doCQuery && cQuerys && cQuerys.length > 0) {
+      return cQuerys.map((cquery) => {
+        let disabled = true;
+        if (selectedRows && selectedRows.length == 1) {
+          disabled = false;
+        }
+        return (
+          <CquickButton
+            serverKey={serverKey}
+            key={cquery.id}
+            disabled={disabled}
+            cQueryConfig={cquery}
+            mainCode={!disabled ? selectedRows[0].code : undefined}
+          />
+        );
+      });
+    }
+  };
+
+  const hasDimension = () => {
+    columns.forEach((item) => {
+      if (item.statColType == "dimension") {
+        return true;
+      }
+    });
+    return false;
+  };
+
+  const renderDrillDimension = () => {
+    let drillingColIdsName = "drillingColIds";
+    let dimensionColIds = [];
+    const options = [];
+    columns.forEach((item) => {
+      if (item.statColType == "dimension") {
+        options.push({ label: item.title, value: item.id });
+        dimensionColIds.push(item.id);
+      }
+    });
+    options.push({ label: translate("${无}"), value: "5" });
+
+    initialValues[drillingColIdsName] = data
+      ? data[drillingColIdsName]
+        ? data[drillingColIdsName]
+        : dimensionColIds
+      : dimensionColIds;
+
+    let fieldValue = data ? data[drillingColIdsName] : dimensionColIds;
+    let antdControlProps = {
+      placeholder: translate("${请选择}${维度}"),
+      disabled: false,
+      value: fieldValue,
+      style: { minWidth: 220, width: "100%" },
+    };
+    return ltmplConfig.showDim ? (
+      <FormItem
+        label={translate("${维度}")}
+        name={drillingColIdsName}
+        key={drillingColIdsName}
+        rules={[
+          {
+            required: true,
+            message: translate("${请选择维度,上钻到顶层请只选[无]}"),
+          },
+        ]}
+      >
+        <Select
+          mode="multiple"
+          {...antdControlProps}
+          notFoundContent={translate("${暂无选项}")}
+          allowClear={true}
+          showSearch
+          showArrow={true}
+          options={options}
+        ></Select>
+      </FormItem>
+    ) : (
+      <AntdForm.Item hidden={true} name={"drillingColIds"}></AntdForm.Item>
+    );
+  };
+
+  const onValuesChange = (changedValues, clearCurrent = true) => {
+    let appCtmplConfig = ProgramConfig.getAppCtmplConfig(
+      ltmplConfig,
+      data,
+      props
+    )
+    if (appCtmplConfig.onCriteriaValuesChange) {
+      //自定义值修改逻辑
+      appCtmplConfig.onCriteriaValuesChange(
+        changedValues,
+        data,
+        form,
+        clearCurrent
+      );
+    }
+    // if (onValuesChange) {
+    //   onValuesChange();
+    // }
+  };
+
+  // lagicalOpt扩展条件组条件
+  const renderCriteria = (criteria: CriteriaConfig[], lagicalOpt?: string) => {
+    if (!criteria) {
+      return;
+    }
+    const { hiddenCriteriaIds, serverKey } = props;
+    criteria.forEach((item) => {
+      let formItemName = "c_" + item.id;
+      let fieldValue = data ? data[formItemName] : undefined;
+      initialValues[formItemName] = fieldValue;
+    });
+
+    if (doSearch) {
+      return criteria.map((item, index) => {
+        let formItemName = "c_" + item.id;
+        let fieldValue = data ? data[formItemName] : undefined;
+        if (item?.extControlType == "ltree-entity-select" || item?.extControlType == "ltree-entity-select-value") {
+          // return <FormItem>
+          //    <Input type={"hidden"} name={formItemName} value={fieldValue} />
+          //  </FormItem>
+          // return null;
+        } else if (!hiddenCriteriaIds.includes(item.id)) {
+          const formItem = (
+            <FormItem
+              style={lagicalOpt ? { margin: 0 } : {}}
+              label={translate("${" + item.title + "}")}
+              name={formItemName}
+              key={item.id}
+              tooltip={item.tip}
+              rules={
+                item.required
+                  ? [
+                    {
+                      required: true,
+                      message: translate("${请选择}" + "${" + item.title + "}"),
+                    },
+                  ]
+                  : undefined
+              }
+            >
+              <EntryControl
+                serverKey={serverKey}
+                mainCode={props.mainCode}
+                value={fieldValue}
+                fieldConfig={item}
+              />
+            </FormItem>
+          );
+          return lagicalOpt ? <>
+            {formItem}
+            {criteria.length !== index + 1 ? <FormItem style={{ margin: 0, color: colorWarning }}>{translate("${" + lagicalOpt + "}")}</FormItem> : ""}
+          </> : formItem;
+        }
+      });
+    }
+  };
+
+  //扩展条件组渲染
+  const renderCriteriaGroup = (criteriaGroup: CriteriaGroup[]) => {
+    if (!criteriaGroup) {
+      return;
+    }
+    const isExpanded = criteriaGroupHeight > 32;
+    return criteriaGroup.map(r =>
+      r.criteria?.length > 1 ?
+        < div style={{ borderRadius: "6px", border: `1px dashed ${colorBorder}`, padding: "2px 4px", marginRight: "16px", position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
+          <Space style={{ height: criteriaGExpanded ? "auto" : "32px", overflow: "hidden", }} ref={criteriaGroupRef} size={"small"} wrap>{renderCriteria(r.criteria, r.lagicalOpt === "OR" ? "或" : "且")}</Space>
+          {isExpanded ?
+            <Button icon={criteriaGExpanded ? <LeftOutlined /> : <RightOutlined />} type={"link"} onClick={() => setCriteriaGExpanded(!criteriaGExpanded)}>
+              {translate(criteriaGExpanded ? "${收起}" : "${展开}")}
+            </Button>
+            : ""}
+        </div > :
+        <Space size={"small"} wrap>{renderCriteria(r.criteria)}</Space>
+    );
+  };
+
+  return (
+    <AntdForm
+      form={form}
+      name="control-hooks"
+      initialValues={initialValues}
+      layout="inline"
+      onFinish={searchSubmit}
+      onValuesChange={(val) => onValuesChange(val)}
+      style={{ width: "100%" }}
+    >
+
+      {/*// <Collapse style={{ width: "100%" }} defaultActiveKey={["1"]}>*/}
+      {/*// <Panel header={""} key="1">*/}
+      <Card size={'small'} style={{ display: open ? "block" : "none", width: "100%" }}>
+        <Row>
+          <Col>
+            <Space size={"small"} wrap>
+              {showQueryButton ||
+                (updrillButtonConfigs && updrillButtonConfigs.length > 0)
+                ? renderCriteria(innerParams)
+                : null}
+              {buttons.includes("drilling") &&
+                open &&
+                (drillingParams.length > 0 || hasDimension() || ltmplConfig.showDim) ?
+                <>{renderCriteria(drillingParams)}
+                  {renderDrillDimension()}</>
+                : null}
+              {showQueryButton || (updrillButtonConfigs && updrillButtonConfigs.length > 0)
+                ? renderCriteria(expanded ? criteria : collapseCriteria)
+                : null}
+
+              {renderCriteriaGroup(criteriaGroups)}
+              <Space className="btns">
+                {collapsible ? (
+                  expanded ? <Button icon={<LeftOutlined />} type={"link"} onClick={() => setExpanded(false)}>
+                    {translate("${收起}")}
+                  </Button> :
+                    <Button icon={<RightOutlined />} type={"link"} onClick={() => setExpanded(true)}>
+                      {translate("${更多条件}")}
+                    </Button>
+                ) : (
+                  ""
+                )}
+                {showQueryButton ? (
+                  <Button type="primary" htmlType="submit" loading={loading}>
+                    {translate("${查询}")}
+                  </Button>
+                ) : (
+                  ""
+                )}
+                {showDeleteButton ? (
+                  <Popconfirm
+                    placement="rightBottom"
+                    title={translate("${确定要[删除]选中数据吗}?")}
+                    onConfirm={() => {
+                      doDelete();
+                    }}
+                    okText={translate("${确定}")}
+                    cancelText={translate("${取消}")}
+                    okType={"danger"}
+                  >
+                    <Button danger disabled={deleteButtonDisabled}>
+                      {translate("${删除选中}")}
+                    </Button>
+                  </Popconfirm>
+                ) : (
+                  ""
+                )}
+                {/* 特别注意 目前 查询条件和 头部的 按钮 前置条件 均未支持，需要设置前置条件的情况请使用 行按钮*/}
+                {renderCustomButton()}
+                {renderAction()}
+                {renderJump()}
+                {renderCQuery()}
+                {renderUpdrill()}
+                {renderFileExport()}
+                {buttons.includes("multiRowEdit") && doMultiRowEdit ?
+                  <Button disabled={multiRowEditDisabled} onClick={doMultiRowEdit}>{translate("${保存}")}</Button> : ""}
+              </Space>
+            </Space>
+          </Col>
+        </Row>
+      </Card>
+      {/*<Card size={'small'}*/}
+      {/*  className="hoverable"*/}
+      {/*  style={{ display: open ? "block" : "none", width: "100%" }}*/}
+      {/*  headStyle={{ background: "#f2f4f5" }}*/}
+      {/*>*/}
+      {/*  */}
+      {/*</Card>*/}
+    </AntdForm>
+  );
+};
+CriteriaForm["defaultProps"] = {
+  hiddenCriteriaIds: [],
+  open: true,
+};
+export default CriteriaForm;