aldehyde 0.2.480 → 0.2.482

package/src/aldehyde/module/ltmpl-table.tsx

@@ -1,378 +1,379 @@
-import React, { ReactNode } from "react";
-import { AddOrUpdate, LtmplConfigRes, ActTableMode, DoEditParam, ShowViewParam, ActTableViewModel } from "../tmpl/interface";
-import Units from "../units";
-import ActTable from "../table/act-table";
-// import StatActTable from '../table/stat-act-table'
-import HCDataSource from "../tmpl/hc-data-source";
-import ModalDtmplView from "../detail/view/modal-dtmpl-view";
-import DtmplEditPage from "./dtmpl-edit-page";
-import { Button, Drawer, Space } from "antd";
-import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
-import { LocaleContext } from "../locale/LocaleProvider";
-
-//以列表为入口的，页面内列表，基本原则是所有交互在页面内完成，不会触发路由。
-
-export interface LtmplTableProps {
-  serverKey?: string;
-  sourceId: string;
-  mainCode?: string;
-  showView?: (showViewParam: ShowViewParam) => void;
-  doCustomCreate?: (handleOk: () => void) => void;
-  doCustomEdit?: (
-    code: string,
-    mode: AddOrUpdate,
-    handleOk: () => void
-  ) => void;
-  doSearch?: (params: object) => void;
-  doRAction?: (ractionId: string, mainCode: string) => void;
-  funcMode?: ActTableMode;
-  title?: ReactNode;
-  tip?: any;
-  collapsible?: boolean;
-  initCollapse?: boolean;
-  readOnly?: boolean;
-  rowOperatable?: boolean;
-  defaultCriteriaValue?: object;
-  defShowType?: ActTableViewModel;
-  showPagination?: boolean; // 是否显示分页
-  showAggregates?: boolean; // 是否显示统计卡片数据
-  deleteCallback?: (val: object) => void; // 删除回调
-  loadDataCallback?: (val: object[]) => void; // 请求数据回调函数
-}
-
-export interface LtmplTableState {
-  ltmplConfigRes?: LtmplConfigRes;
-  pageNo?: number;
-  pageSize?: number;
-  criteriaData?: object;
-  showDtmplView?: boolean;
-  selectedCode?: string;
-  showDtmplEdit?: boolean;
-  showDraw?: boolean;
-  showDtmplCustomEdit?: boolean;
-  ractionId?: string;
-  collapse?: boolean;
-  addTmplId?: string;
-  dtmplSourceId?: string;
-  drawerSize?: number | string; // 抽屉组件
-}
-
-class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
-  state = {
-    ltmplConfigRes: undefined,
-    pageNo: undefined,
-    pageSize: undefined,
-    criteriaData: undefined,
-    showDtmplView: false,
-    showDtmplEdit: false,
-    showDtmplCustomEdit: false,
-    selectedCode: undefined,
-    showDraw: false,
-    ractionId: undefined,
-    collapse: false,
-    addTmplId: undefined,
-    dtmplSourceId: undefined,
-    drawerSize: "92vw"
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  static defaultProps = {
-    collapsible: false,
-    initCollapse: false,
-    readOnly: false,
-    rowOperatable: true,
-    showPagination: true,
-    showAggregates: true,
-  };
-
-  async componentDidMount() {
-    this.loadLtmplConfig();
-    const { collapsible, initCollapse } = this.props;
-    if (collapsible) {
-      this.setState({
-        collapse: initCollapse,
-      });
-    }
-  }
-
-  async componentDidUpdate(prevProps) {
-    const { sourceId, mainCode } = this.props;
-    if (!prevProps || prevProps.sourceId != sourceId) {
-      this.loadLtmplConfig();
-    } else if (mainCode && prevProps.mainCode != mainCode) {
-      //此处处理有效，但不高效
-      this.loadLtmplConfig();
-    }
-  }
-
-  loadLtmplConfig = async () => {
-    const { sourceId, serverKey, defaultCriteriaValue } = this.props;
-    let ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(
-      serverKey,
-      sourceId
-    );
-    let criteriaData;
-    let defCriteriaValue = {};
-    //提取 过滤条件的默认值
-    if (ltmplConfigRes) {
-      let defaultCriteriaValue_ =
-        ltmplConfigRes.ltmplConfig?.defaultCriteriaValue;
-      if (defaultCriteriaValue_) {
-        defCriteriaValue = { ...defaultCriteriaValue_ }
-      }
-    }
-    if (defaultCriteriaValue) {
-      defCriteriaValue = { ...defCriteriaValue, ...defaultCriteriaValue }
-    }
-    criteriaData = this.toCriteriaData(defCriteriaValue);
-    this.setState({
-      ltmplConfigRes,
-      criteriaData,
-    });
-  };
-  toCriteriaData = (values: object) => {
-    let criteriaData = {};
-    if (values) {
-      for (let key in values) {
-        criteriaData[key] = Units.configParamTrans(values[key], null);
-      }
-    }
-    criteriaData["sequence"] = Units.getRandomNum(6);
-    return criteriaData;
-  };
-
-  showView = (showViewParam: ShowViewParam) => {
-    const { sourceId } = this.props;
-    this.setState({
-      selectedCode: showViewParam.code,
-      dtmplSourceId: showViewParam.dtmplSourceId ? showViewParam.dtmplSourceId : sourceId,
-      showDtmplView: true,
-    });
-  };
-
-  doEdit = (param: DoEditParam) => {
-    const { doCustomEdit, sourceId } = this.props;
-    if (param.toCustomPage) {
-      if (doCustomEdit) {
-        doCustomEdit(param.code, param.mode, () => {
-          this.doSearch(this.state.criteriaData);
-        });
-      } else {
-        this.setState({
-          selectedCode: param.code,
-          dtmplSourceId: param.dtmplSourceId ? param.dtmplSourceId : sourceId,
-          showDtmplCustomEdit: true,
-        });
-      }
-    } else {
-      this.setState({
-        selectedCode: param.code,
-        showDtmplEdit: true,
-      });
-    }
-  };
-  doRAction = (ractionId: string, mainCode: string) => {
-    this.setState({
-      selectedCode: mainCode,
-      showDraw: true,
-      ractionId,
-    });
-  };
-  doCreate = (addTmplId: string, toCustomPage?: boolean) => {
-    const { doCustomCreate } = this.props;
-    if (toCustomPage) {
-      if (doCustomCreate) {
-        doCustomCreate(() => {
-          this.doSearch(this.state.criteriaData);
-        });
-      } else {
-        this.setState({
-          selectedCode: null,
-          showDtmplCustomEdit: true,
-        });
-      }
-    } else {
-      this.setState({
-        selectedCode: null,
-        showDtmplEdit: true,
-        addTmplId,
-      });
-    }
-  };
-  closeDrawer = () => {
-    this.setState({
-      showDraw: false,
-    });
-  };
-
-  doSearch = (params_) => {
-    const { sourceId, mainCode, collapsible } = this.props;
-    const { criteriaData } = this.state;
-    let params = { ...criteriaData, ...params_ };
-    //追加过滤条件，hiddenColIds，innerQueryKey
-    if (mainCode) {
-      params["mainCode"] = mainCode;
-    }
-    params["sourceId"] = sourceId;
-    if (collapsible) {
-      this.setState({
-        collapse: false,
-      });
-    }
-    this.setState({
-      criteriaData: this.toCriteriaData(params),
-    });
-  };
-
-  onChangePage = (pageNo, pageSize) => {
-    this.setState({
-      pageNo,
-      pageSize,
-    });
-  };
-
-  handleDtmplEdit = (code: string, isContinueSave?: boolean) => {
-    this.doSearch(this.state.criteriaData);
-    if (isContinueSave) {
-      this.setState({ selectedCode: code });
-    } else {
-      this.setState({ showDtmplEdit: false });
-    }
-  };
-
-  render() {
-    const {
-      ltmplConfigRes,
-      criteriaData,
-      pageSize,
-      pageNo,
-      showDtmplView,
-      selectedCode,
-      showDtmplEdit,
-      showDtmplCustomEdit,
-      ractionId,
-      showDraw,
-      collapse,
-      addTmplId, dtmplSourceId, drawerSize
-    } = this.state;
-    const {
-      sourceId, mainCode,
-      showView, doSearch,
-      doRAction, funcMode,
-      tip, title, collapsible,
-      initCollapse, doCustomEdit, doCustomCreate,
-      serverKey, rowOperatable, readOnly, defShowType, showPagination, showAggregates, deleteCallback,
-      loadDataCallback
-    } = this.props;
-    const { translate } = this.context;
-
-    if (!ltmplConfigRes) {
-      return <></>;
-    } else {
-      const { buttons, customEditPagePath } = ltmplConfigRes.ltmplConfig;
-      return (
-        <>
-          <ActTable operatable={rowOperatable} readOnly={readOnly} tip={tip}
-            serverKey={serverKey} pageSize={pageSize} pageNo={pageNo}
-            onChangePage={this.onChangePage} collapsible={collapsible}
-            initCollapse={initCollapse && collapse}
-            title={title} funcMode={funcMode} mainCode={mainCode}
-            showView={showView ? showView : this.showView}
-            doRAction={doRAction ? doRAction : this.doRAction}
-            doSearch={doSearch ? doSearch : this.doSearch}
-            doEdit={this.doEdit}
-            doCreate={this.doCreate} sourceId={sourceId}
-            criteriaData={criteriaData}
-            customEditable={doCustomEdit ? true : false}
-            customCreatable={doCustomCreate ? true : false}
-            ltmplConfig={ltmplConfigRes.ltmplConfig}
-            defShowType={defShowType}
-            showPagination={showPagination}
-            showAggregates={showAggregates}
-            deleteCallback={deleteCallback}
-            loadDataCallback={loadDataCallback}
-          />
-          {buttons.includes("detail") && showDtmplView ? (
-            <ModalDtmplView
-              serverKey={serverKey}
-              open={showDtmplView}
-              onCancel={() => {
-                this.setState({
-                  showDtmplView: false,
-                });
-              }}
-              mainCode={mainCode}
-              sourceId={dtmplSourceId ? dtmplSourceId : sourceId}
-              code={selectedCode}
-            >
-              {" "}
-            </ModalDtmplView>
-          ) : (
-            ""
-          )}
-          {(buttons.includes("dtmplEdit") || buttons.includes("dtmplAdd")) &&
-            showDtmplEdit ? (
-            <DtmplEditPage
-              addTmplId={addTmplId}
-              serverKey={serverKey}
-              open={showDtmplEdit}
-              onCancel={() => {
-                this.setState({
-                  showDtmplEdit: false,
-                });
-              }}
-              sourceId={dtmplSourceId ? dtmplSourceId : sourceId}
-              mainCode={mainCode}
-              code={selectedCode}
-              onOk={this.handleDtmplEdit}
-            />
-          ) : (
-            ""
-          )}
-          {showDtmplCustomEdit ? (
-            <DtmplCustomEditModalPage
-              serverKey={serverKey}
-              open={showDtmplCustomEdit}
-              onOk={() => {
-                this.doSearch(this.state.criteriaData);
-                this.setState({
-                  showDtmplCustomEdit: false,
-                });
-              }}
-              customPath={customEditPagePath}
-              sourceId={sourceId}
-              mainCode={mainCode}
-              code={selectedCode}
-            />
-          ) : (
-            ""
-          )}
-          {showDraw ?
-            <Drawer
-              placement={"left"}
-              title={translate("${关联查询}")}
-              resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
-              size={drawerSize}
-              closable={true}
-              mask={false}
-              onClose={this.closeDrawer}
-              open={showDraw}
-              styles={{ body: { minWidth: "720px" } }}
-              extra={
-                <Space>
-                  <Button onClick={this.closeDrawer}>
-                    {translate("${关闭}")}
-                  </Button>
-                </Space>
-              }
-            >
-              <LtmplTable serverKey={serverKey} sourceId={ractionId} mainCode={selectedCode} />
-            </Drawer> : null}
-        </>
-      );
-    }
-  }
-}
-
-export default LtmplTable;
+import React, { ReactNode } from "react";
+import { AddOrUpdate, LtmplConfigRes, ActTableMode, DoEditParam, ShowViewParam, ActTableViewModel } from "../tmpl/interface";
+import Units from "../units";
+import ActTable from "../table/act-table";
+// import StatActTable from '../table/stat-act-table'
+import HCDataSource from "../tmpl/hc-data-source";
+import ModalDtmplView from "../detail/view/modal-dtmpl-view";
+import DtmplEditPage from "./dtmpl-edit-page";
+import { Button, Drawer, Space } from "antd";
+import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
+import { LocaleContext } from "../locale/LocaleProvider";
+
+//以列表为入口的，页面内列表，基本原则是所有交互在页面内完成，不会触发路由。
+
+export interface LtmplTableProps {
+  serverKey?: string;
+  sourceId: string;
+  mainCode?: string;
+  showView?: (showViewParam: ShowViewParam) => void;
+  doCustomCreate?: (handleOk: () => void) => void;
+  doCustomEdit?: (
+    code: string,
+    mode: AddOrUpdate,
+    handleOk: () => void
+  ) => void;
+  doSearch?: (params: object) => void;
+  doRAction?: (ractionId: string, mainCode: string) => void;
+  funcMode?: ActTableMode;
+  title?: ReactNode;
+  tip?: any;
+  collapsible?: boolean;
+  initCollapse?: boolean;
+  readOnly?: boolean;
+  rowOperatable?: boolean;
+  defaultCriteriaValue?: object;
+  defShowType?: ActTableViewModel;
+  showPagination?: boolean; // 是否显示分页
+  showAggregates?: boolean; // 是否显示统计卡片数据
+  deleteCallback?: (val: object) => void; // 删除回调
+  loadDataCallback?: (val: object[]) => void; // 请求数据回调函数
+  defRowCardCount?: number; // 卡片展示模式-默认行卡片数量
+}
+
+export interface LtmplTableState {
+  ltmplConfigRes?: LtmplConfigRes;
+  pageNo?: number;
+  pageSize?: number;
+  criteriaData?: object;
+  showDtmplView?: boolean;
+  selectedCode?: string;
+  showDtmplEdit?: boolean;
+  showDraw?: boolean;
+  showDtmplCustomEdit?: boolean;
+  ractionId?: string;
+  collapse?: boolean;
+  addTmplId?: string;
+  dtmplSourceId?: string;
+  drawerSize?: number | string; // 抽屉组件
+}
+
+class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
+  state = {
+    ltmplConfigRes: undefined,
+    pageNo: undefined,
+    pageSize: undefined,
+    criteriaData: undefined,
+    showDtmplView: false,
+    showDtmplEdit: false,
+    showDtmplCustomEdit: false,
+    selectedCode: undefined,
+    showDraw: false,
+    ractionId: undefined,
+    collapse: false,
+    addTmplId: undefined,
+    dtmplSourceId: undefined,
+    drawerSize: "92vw"
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  static defaultProps = {
+    collapsible: false,
+    initCollapse: false,
+    readOnly: false,
+    rowOperatable: true,
+    showPagination: true,
+    showAggregates: true,
+  };
+
+  async componentDidMount() {
+    this.loadLtmplConfig();
+    const { collapsible, initCollapse } = this.props;
+    if (collapsible) {
+      this.setState({
+        collapse: initCollapse,
+      });
+    }
+  }
+
+  async componentDidUpdate(prevProps) {
+    const { sourceId, mainCode } = this.props;
+    if (!prevProps || prevProps.sourceId != sourceId) {
+      this.loadLtmplConfig();
+    } else if (mainCode && prevProps.mainCode != mainCode) {
+      //此处处理有效，但不高效
+      this.loadLtmplConfig();
+    }
+  }
+
+  loadLtmplConfig = async () => {
+    const { sourceId, serverKey, defaultCriteriaValue } = this.props;
+    let ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(
+      serverKey,
+      sourceId
+    );
+    let criteriaData;
+    let defCriteriaValue = {};
+    //提取 过滤条件的默认值
+    if (ltmplConfigRes) {
+      let defaultCriteriaValue_ =
+        ltmplConfigRes.ltmplConfig?.defaultCriteriaValue;
+      if (defaultCriteriaValue_) {
+        defCriteriaValue = { ...defaultCriteriaValue_ }
+      }
+    }
+    if (defaultCriteriaValue) {
+      defCriteriaValue = { ...defCriteriaValue, ...defaultCriteriaValue }
+    }
+    criteriaData = this.toCriteriaData(defCriteriaValue);
+    this.setState({
+      ltmplConfigRes,
+      criteriaData,
+    });
+  };
+  toCriteriaData = (values: object) => {
+    let criteriaData = {};
+    if (values) {
+      for (let key in values) {
+        criteriaData[key] = Units.configParamTrans(values[key], null);
+      }
+    }
+    criteriaData["sequence"] = Units.getRandomNum(6);
+    return criteriaData;
+  };
+
+  showView = (showViewParam: ShowViewParam) => {
+    const { sourceId } = this.props;
+    this.setState({
+      selectedCode: showViewParam.code,
+      dtmplSourceId: showViewParam.dtmplSourceId ? showViewParam.dtmplSourceId : sourceId,
+      showDtmplView: true,
+    });
+  };
+
+  doEdit = (param: DoEditParam) => {
+    const { doCustomEdit, sourceId } = this.props;
+    if (param.toCustomPage) {
+      if (doCustomEdit) {
+        doCustomEdit(param.code, param.mode, () => {
+          this.doSearch(this.state.criteriaData);
+        });
+      } else {
+        this.setState({
+          selectedCode: param.code,
+          dtmplSourceId: param.dtmplSourceId ? param.dtmplSourceId : sourceId,
+          showDtmplCustomEdit: true,
+        });
+      }
+    } else {
+      this.setState({
+        selectedCode: param.code,
+        showDtmplEdit: true,
+      });
+    }
+  };
+  doRAction = (ractionId: string, mainCode: string) => {
+    this.setState({
+      selectedCode: mainCode,
+      showDraw: true,
+      ractionId,
+    });
+  };
+  doCreate = (addTmplId: string, toCustomPage?: boolean) => {
+    const { doCustomCreate } = this.props;
+    if (toCustomPage) {
+      if (doCustomCreate) {
+        doCustomCreate(() => {
+          this.doSearch(this.state.criteriaData);
+        });
+      } else {
+        this.setState({
+          selectedCode: null,
+          showDtmplCustomEdit: true,
+        });
+      }
+    } else {
+      this.setState({
+        selectedCode: null,
+        showDtmplEdit: true,
+        addTmplId,
+      });
+    }
+  };
+  closeDrawer = () => {
+    this.setState({
+      showDraw: false,
+    });
+  };
+
+  doSearch = (params_) => {
+    const { sourceId, mainCode, collapsible } = this.props;
+    const { criteriaData } = this.state;
+    let params = { ...criteriaData, ...params_ };
+    //追加过滤条件，hiddenColIds，innerQueryKey
+    if (mainCode) {
+      params["mainCode"] = mainCode;
+    }
+    params["sourceId"] = sourceId;
+    if (collapsible) {
+      this.setState({
+        collapse: false,
+      });
+    }
+    this.setState({
+      criteriaData: this.toCriteriaData(params),
+    });
+  };
+
+  onChangePage = (pageNo, pageSize) => {
+    this.setState({
+      pageNo,
+      pageSize,
+    });
+  };
+
+  handleDtmplEdit = (code: string, isContinueSave?: boolean) => {
+    this.doSearch(this.state.criteriaData);
+    if (isContinueSave) {
+      this.setState({ selectedCode: code });
+    } else {
+      this.setState({ showDtmplEdit: false });
+    }
+  };
+
+  render() {
+    const {
+      ltmplConfigRes,
+      criteriaData,
+      pageSize,
+      pageNo,
+      showDtmplView,
+      selectedCode,
+      showDtmplEdit,
+      showDtmplCustomEdit,
+      ractionId,
+      showDraw,
+      collapse,
+      addTmplId, dtmplSourceId, drawerSize
+    } = this.state;
+    const {
+      sourceId, mainCode,
+      showView, doSearch,
+      doRAction, funcMode,
+      tip, title, collapsible,
+      initCollapse, doCustomEdit, doCustomCreate,
+      serverKey, rowOperatable, readOnly, defShowType, showPagination, showAggregates, deleteCallback,
+      loadDataCallback, defRowCardCount
+    } = this.props;
+    const { translate } = this.context;
+
+    if (!ltmplConfigRes) {
+      return <></>;
+    } else {
+      const { buttons, customEditPagePath } = ltmplConfigRes.ltmplConfig;
+      return (
+        <>
+          <ActTable operatable={rowOperatable} readOnly={readOnly} tip={tip}
+            serverKey={serverKey} pageSize={pageSize} pageNo={pageNo}
+            onChangePage={this.onChangePage} collapsible={collapsible}
+            initCollapse={initCollapse && collapse}
+            title={title} funcMode={funcMode} mainCode={mainCode}
+            showView={showView ? showView : this.showView}
+            doRAction={doRAction ? doRAction : this.doRAction}
+            doSearch={doSearch ? doSearch : this.doSearch}
+            doEdit={this.doEdit}
+            doCreate={this.doCreate} sourceId={sourceId}
+            criteriaData={criteriaData}
+            customEditable={doCustomEdit ? true : false}
+            customCreatable={doCustomCreate ? true : false}
+            ltmplConfig={defRowCardCount ? { ...ltmplConfigRes.ltmplConfig, rowCardCount: defRowCardCount } : ltmplConfigRes.ltmplConfig}
+            defShowType={defShowType}
+            showPagination={showPagination}
+            showAggregates={showAggregates}
+            deleteCallback={deleteCallback}
+            loadDataCallback={loadDataCallback}
+          />
+          {buttons.includes("detail") && showDtmplView ? (
+            <ModalDtmplView
+              serverKey={serverKey}
+              open={showDtmplView}
+              onCancel={() => {
+                this.setState({
+                  showDtmplView: false,
+                });
+              }}
+              mainCode={mainCode}
+              sourceId={dtmplSourceId ? dtmplSourceId : sourceId}
+              code={selectedCode}
+            >
+              {" "}
+            </ModalDtmplView>
+          ) : (
+            ""
+          )}
+          {(buttons.includes("dtmplEdit") || buttons.includes("dtmplAdd")) &&
+            showDtmplEdit ? (
+            <DtmplEditPage
+              addTmplId={addTmplId}
+              serverKey={serverKey}
+              open={showDtmplEdit}
+              onCancel={() => {
+                this.setState({
+                  showDtmplEdit: false,
+                });
+              }}
+              sourceId={dtmplSourceId ? dtmplSourceId : sourceId}
+              mainCode={mainCode}
+              code={selectedCode}
+              onOk={this.handleDtmplEdit}
+            />
+          ) : (
+            ""
+          )}
+          {showDtmplCustomEdit ? (
+            <DtmplCustomEditModalPage
+              serverKey={serverKey}
+              open={showDtmplCustomEdit}
+              onOk={() => {
+                this.doSearch(this.state.criteriaData);
+                this.setState({
+                  showDtmplCustomEdit: false,
+                });
+              }}
+              customPath={customEditPagePath}
+              sourceId={sourceId}
+              mainCode={mainCode}
+              code={selectedCode}
+            />
+          ) : (
+            ""
+          )}
+          {showDraw ?
+            <Drawer
+              placement={"left"}
+              title={translate("${关联查询}")}
+              resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+              size={drawerSize}
+              closable={true}
+              mask={false}
+              onClose={this.closeDrawer}
+              open={showDraw}
+              styles={{ body: { minWidth: "720px" } }}
+              extra={
+                <Space>
+                  <Button onClick={this.closeDrawer}>
+                    {translate("${关闭}")}
+                  </Button>
+                </Space>
+              }
+            >
+              <LtmplTable serverKey={serverKey} sourceId={ractionId} mainCode={selectedCode} />
+            </Drawer> : null}
+        </>
+      );
+    }
+  }
+}
+
+export default LtmplTable;