aldehyde 0.2.98 → 0.2.100

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

@@ -1,280 +1,369 @@
-import React, {ReactNode} from 'react'
-import {AddOrUpdate, LtmplConfigRes,ActTableMode} from '../tmpl/interface';
+import React, { ReactNode } from "react";
+import { AddOrUpdate, LtmplConfigRes, ActTableMode } from "../tmpl/interface";
 import Units from "../units";
-import ActTable from '../table/act-table'
+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 { 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?: (code: string, toCustomPage?: boolean) => 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,
-};
+  serverKey?: string;
+  sourceId: string;
+  mainCode?: string;
+  showView?: (code: string, toCustomPage?: boolean) => 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;
+}
 
 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,
-};
+  ltmplConfigRes?: LtmplConfigRes;
+  pageNo?: number;
+  pageSize?: number;
+  criteriaData?: object;
+  showDtmplView?: boolean;
+  selectedCode?: string;
+  showDtmplEdit?: boolean;
+  showDraw?: boolean;
+  showDtmplCustomEdit?: boolean;
+  ractionId?: string;
+  collapse?: boolean;
+  addTmplId?: 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,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    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,
-    }
-
-    static defaultProps = {
-        collapsible: false,
-        initCollapse: false,
-        readOnly:false,
-    }
+  static defaultProps = {
+    collapsible: false,
+    initCollapse: false,
+    readOnly: false,
+  };
 
-    async componentDidMount() {
-        this.loadLtmplConfig();
-        const {collapsible, initCollapse} = this.props;
-        if (collapsible) {
-            this.setState({
-                collapse: initCollapse
-            })
-        }
+  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();
-        }
+  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} = this.props;
-        let ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(serverKey,sourceId);
-        let criteriaData;
-        //提取 过滤条件的默认值
-        if (ltmplConfigRes) {
-            let defaultCriteriaValue = ltmplConfigRes.ltmplConfig.defaultCriteriaValue;
-            if (defaultCriteriaValue) {
-                criteriaData = this.toCriteriaData(defaultCriteriaValue);
-            }
-        }
-        this.setState({
-            ltmplConfigRes, criteriaData
-        })
+  loadLtmplConfig = async () => {
+    const { sourceId, serverKey } = this.props;
+    let ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(
+      serverKey,
+      sourceId
+    );
+    let criteriaData;
+    //提取 过滤条件的默认值
+    if (ltmplConfigRes) {
+      let defaultCriteriaValue =
+        ltmplConfigRes.ltmplConfig.defaultCriteriaValue;
+      if (defaultCriteriaValue) {
+        criteriaData = this.toCriteriaData(defaultCriteriaValue);
+      }
     }
-    toCriteriaData = (values: object) => {
-        let criteriaData = {};
-        if (values) {
-            for (let key in values) {
-                criteriaData[key] = Units.configParamTrans(values[key]);
-            }
-        }
-        criteriaData['sequence'] = Units.getRandomNum(6);
-        return criteriaData;
+    this.setState({
+      ltmplConfigRes,
+      criteriaData,
+    });
+  };
+  toCriteriaData = (values: object) => {
+    let criteriaData = {};
+    if (values) {
+      for (let key in values) {
+        criteriaData[key] = Units.configParamTrans(values[key]);
+      }
     }
+    criteriaData["sequence"] = Units.getRandomNum(6);
+    return criteriaData;
+  };
 
-    showView = (code: string) => {
-        this.setState({
-            selectedCode: code,
-            showDtmplView: true,
-        })
-    }
+  showView = (code: string) => {
+    this.setState({
+      selectedCode: code,
+      showDtmplView: true,
+    });
+  };
 
-    doEdit = (code: string, mode: AddOrUpdate, toCustomPage?: boolean) => {
-        const {doCustomEdit} = this.props
-        if (toCustomPage) {
-            if (doCustomEdit) {
-                doCustomEdit(code, mode, () => {
-                    this.doSearch(this.state.criteriaData);
-                });
-            } else {
-                this.setState({
-                    selectedCode: code,
-                    showDtmplCustomEdit: true,
-                })
-            }
-        } else {
-            this.setState({
-                selectedCode: 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 = () => {
+  doEdit = (code: string, mode: AddOrUpdate, toCustomPage?: boolean) => {
+    const { doCustomEdit } = this.props;
+    if (toCustomPage) {
+      if (doCustomEdit) {
+        doCustomEdit(code, mode, () => {
+          this.doSearch(this.state.criteriaData);
+        });
+      } else {
         this.setState({
-            showDraw: false,
-        })
+          selectedCode: code,
+          showDtmplCustomEdit: true,
+        });
+      }
+    } else {
+      this.setState({
+        selectedCode: code,
+        showDtmplEdit: true,
+      });
     }
-
-    doSearch = (params_) => {
-        const {sourceId, mainCode, collapsible} = this.props;
-        let params = {...params_}
-        //追加过滤条件，hiddenColIds，innerQueryKey
-        if (mainCode) {
-            params['mainCode'] = mainCode;
-        }
-        params['sourceId'] = sourceId;
-        if (collapsible) {
-            this.setState({
-                collapse: false,
-            });
-        }
+  };
+  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({
-            criteriaData: this.toCriteriaData(params)
+          selectedCode: null,
+          showDtmplCustomEdit: true,
         });
+      }
+    } else {
+      this.setState({
+        selectedCode: null,
+        showDtmplEdit: true,
+        addTmplId,
+      });
     }
+  };
+  closeDrawer = () => {
+    this.setState({
+      showDraw: false,
+    });
+  };
 
-    onChangePage=(pageNo,pageSize)=>{
-        this.setState({
-            pageNo,pageSize
-        })
-
+  doSearch = (params_) => {
+    const { sourceId, mainCode, collapsible } = this.props;
+    let params = { ...params_ };
+    //追加过滤条件，hiddenColIds，innerQueryKey
+    if (mainCode) {
+      params["mainCode"] = mainCode;
     }
-
-    handleDtmplEdit = (code: string) => {
-        this.doSearch(this.state.criteriaData);
-        this.setState({
-            showDtmplEdit: false,
-        })
+    params["sourceId"] = sourceId;
+    if (collapsible) {
+      this.setState({
+        collapse: false,
+      });
     }
+    this.setState({
+      criteriaData: this.toCriteriaData(params),
+    });
+  };
 
+  onChangePage = (pageNo, pageSize) => {
+    this.setState({
+      pageNo,
+      pageSize,
+    });
+  };
 
-    render() {
-        const {ltmplConfigRes, criteriaData,pageSize,pageNo, showDtmplView, selectedCode, showDtmplEdit, showDtmplCustomEdit, ractionId, showDraw, collapse,addTmplId} = this.state;
-        const {sourceId, mainCode, showView, doSearch, doRAction, funcMode, tip,title, collapsible, initCollapse,doCustomEdit,doCustomCreate,serverKey,readOnly} = this.props;
+  handleDtmplEdit = (code: string) => {
+    this.doSearch(this.state.criteriaData);
+    this.setState({
+      showDtmplEdit: false,
+    });
+  };
 
-        if (!ltmplConfigRes) {
-            return <></>;
-        } else {
-            const {buttons,customEditPagePath} = ltmplConfigRes.ltmplConfig
-            return <>
-                <ActTable 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}/>
-                {buttons.includes('detail') && showDtmplView ?
-                    <ModalDtmplView serverKey={serverKey} open={showDtmplView} onCancel={() => {
-                        this.setState({
-                            showDtmplView: false,
-                        })
-                    }
-                    } mainCode={mainCode}
-                                    sourceId={sourceId}
-                                    code={selectedCode}> </ModalDtmplView> : ""}
-                {(buttons.includes('dtmplEdit') || buttons.includes('dtmplAdd')) && showDtmplEdit ?
-                    <DtmplEditPage addTmplId={addTmplId} serverKey={serverKey} open={showDtmplEdit} onCancel={() => {
-                        this.setState({
-                            showDtmplEdit: false,
-                        })
-                    }}
-                                   sourceId={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}/>
-                    : ""}
-                <Drawer
-                    placement={'left'}
-                    title="关联查询"
-                    closable={true}
-                    mask={false}
-                    onClose={this.closeDrawer}
-                    open={showDraw}
-                    width={'calc(100% - 280px)'}
-                    style={{
-                        maxWidth: 1960,
-                    }}
-                    extra={
-                        <Space>
-                            <Button onClick={this.closeDrawer}>关闭</Button>
-                        </Space>
-                    }
-                >
-                    {
-                        <LtmplTable serverKey={serverKey} sourceId={ractionId} mainCode={selectedCode}></LtmplTable>
-                    }
-                </Drawer>
-            </>
-        }
+  render() {
+    const {
+      ltmplConfigRes,
+      criteriaData,
+      pageSize,
+      pageNo,
+      showDtmplView,
+      selectedCode,
+      showDtmplEdit,
+      showDtmplCustomEdit,
+      ractionId,
+      showDraw,
+      collapse,
+      addTmplId,
+    } = this.state;
+    const {
+      sourceId,
+      mainCode,
+      showView,
+      doSearch,
+      doRAction,
+      funcMode,
+      tip,
+      title,
+      collapsible,
+      initCollapse,
+      doCustomEdit,
+      doCustomCreate,
+      serverKey,
+      readOnly,
+    } = this.props;
+    const { translate } = this.context;
 
+    if (!ltmplConfigRes) {
+      return <></>;
+    } else {
+      const { buttons, customEditPagePath } = ltmplConfigRes.ltmplConfig;
+      return (
+        <>
+          <ActTable
+            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}
+          />
+          {buttons.includes("detail") && showDtmplView ? (
+            <ModalDtmplView
+              serverKey={serverKey}
+              open={showDtmplView}
+              onCancel={() => {
+                this.setState({
+                  showDtmplView: false,
+                });
+              }}
+              mainCode={mainCode}
+              sourceId={sourceId}
+              code={selectedCode}
+            >
+              {" "}
+            </ModalDtmplView>
+          ) : (
+            ""
+          )}
+          {(buttons.includes("dtmplEdit") || buttons.includes("dtmplAdd")) &&
+          showDtmplEdit ? (
+            <DtmplEditPage
+              addTmplId={addTmplId}
+              serverKey={serverKey}
+              open={showDtmplEdit}
+              onCancel={() => {
+                this.setState({
+                  showDtmplEdit: false,
+                });
+              }}
+              sourceId={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}
+            />
+          ) : (
+            ""
+          )}
+          <Drawer
+            placement={"left"}
+            title={translate("${关联查询}")}
+            closable={true}
+            mask={false}
+            onClose={this.closeDrawer}
+            open={showDraw}
+            width={"calc(100% - 280px)"}
+            style={{
+              maxWidth: 1960,
+            }}
+            extra={
+              <Space>
+                <Button onClick={this.closeDrawer}>
+                  {translate("${关闭}")}
+                </Button>
+              </Space>
+            }
+          >
+            {
+              <LtmplTable
+                serverKey={serverKey}
+                sourceId={ractionId}
+                mainCode={selectedCode}
+              ></LtmplTable>
+            }
+          </Drawer>
+        </>
+      );
     }
+  }
 }
 
 export default LtmplTable;
-