aldehyde 0.2.180 → 0.2.182

package/src/aldehyde/routable/ltmpl-route.tsx

@@ -1,327 +1,433 @@
-import React, { ReactNode } from "react";
+import React, {ReactNode} from "react";
 import {
-  AddOrUpdate,
-  DoEditParam,
-  LtmplConfigRes,
-  RouterCompProps,
-  ShowViewParam,
+    AddOrUpdate,
+    DoEditParam, LtmplConfig,
+    LtmplConfigRes, PageType,
+    RouterCompProps,
+    ShowViewParam,
 } 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 withRouter from "../routable/withroute";
-import { Button, Drawer, Space } from "antd";
-import { LocaleContext } from "../locale/LocaleProvider";
+import {Button, Drawer, Space} from "antd";
+import {LocaleContext} from "../locale/LocaleProvider";
 import LtmplTable from "../module/ltmpl-table";
+import DtmplViewDrawer from "../module/dtmpl-view-drawer";
+import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
+import DtmplEditPage from "../module/dtmpl-edit-page";
+import DtmplViewModal from "../module/dtmpl-view-modal";
 
 export interface LtmplRouteProps extends RouterCompProps {
-  layoutRootPath?: string;
+    layoutRootPath?: string;
 }
 
 export interface LtmplRouteState {
-  ltmplConfigRes?: LtmplConfigRes;
-  pageNo?: number;
-  pageSize?: number;
-  selectedCode?: string;
-  showDraw?: boolean;
-  ractionId?: string;
+    ltmplConfigRes?: LtmplConfigRes;
+    pageNo?: number;
+    pageSize?: number;
+    selectedCode?: string;
+    showDraw?: boolean;
+    ractionId?: string;
+    showViewDrawer?: boolean;
+    showViewModal?: boolean;
+    showEdit?: boolean;
+    showWindowType?: string;
 }
 
 class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
+    static contextType = LocaleContext;
+    context: React.ContextType<typeof LocaleContext>;
 
-  static defaultProps = {
-    basePath: "",
-  };
-  state = {
-    ltmplConfigRes: undefined,
-    pageNo: undefined,
-    pageSize: undefined,
-    selectedCode: undefined,
-    showDraw: false,
-    ractionId: undefined,
-  };
+    static defaultProps = {
+        basePath: "",
+    };
+    state = {
+        ltmplConfigRes: undefined,
+        pageNo: undefined,
+        pageSize: undefined,
+        selectedCode: undefined,
+        showDraw: false,
+        ractionId: undefined,
+        showViewDrawer: false,
+        showViewModal: false,
+        showEdit: false,
+        showWindowType: "modal"
+    };
+
+    async componentDidMount() {
+        this.loadData();
+    }
 
-  async componentDidMount() {
-    this.loadData();
-  }
+    get computedLayoutPath() {
+        const {layoutRootPath} = this.props;
+        if (layoutRootPath !== undefined) return `/${layoutRootPath}`;
+        return "";
+    }
+
+    onRoute = (path) => {
+        this.props.navigate(path);
+    };
 
-  get computedLayoutPath() {
-    const { layoutRootPath } = this.props;
-    if (layoutRootPath !== undefined) return `/${layoutRootPath}`;
-    return "";
-  }
+    getMenuId = () => {
+        const {searchParams} = this.props;
+        let menuId = searchParams.get("menuId");
+        return menuId;
+    };
 
-  onRoute = (path) => {
-    this.props.navigate(path);
-  };
+    doClose = () => {
+        this.setState(
+            {
+                showDraw: false,
+                showViewDrawer: false,
+                showViewModal: false,
+                showEdit: false,
+                selectedCode: undefined
+            }
+        )
+    };
 
-  getMenuId = () => {
-    const { searchParams } = this.props;
-    let menuId = searchParams.get("menuId");
-    return menuId;
-  };
 
-  loadData = async () => {
-    const { params } = this.props;
-    const { sourceId } = params;
-    let ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(
-      null,
-      sourceId
-    );
+    loadData = async () => {
+        const {params} = this.props;
+        const {sourceId} = params;
+        let ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(
+            null,
+            sourceId
+        );
 
-    this.setState({
-      ltmplConfigRes: ltmplConfigRes,
-    });
-  };
+        this.setState({
+            ltmplConfigRes: ltmplConfigRes,
+        });
+    };
 
-  async componentDidUpdate(prevProps) {
-    const { location, params } = this.props;
-    const { sourceId } = params;
-    let { sourceId: preSourceId } = prevProps.params;
-    let { location: preLocation } = prevProps;
-    if (
-      !sourceId ||
-      (!preSourceId && this.state.ltmplConfigRes) ||
-      (location.pathname == preLocation.pathname &&
-        location.search == preLocation.search)
-    ) {
-      return;
+    async componentDidUpdate(prevProps) {
+        const {location, params} = this.props;
+        const {sourceId} = params;
+        let {sourceId: preSourceId} = prevProps.params;
+        let {location: preLocation} = prevProps;
+        if (
+            !sourceId ||
+            (!preSourceId && this.state.ltmplConfigRes) ||
+            (location.pathname == preLocation.pathname &&
+                location.search == preLocation.search)
+        ) {
+            return;
+        }
+        await this.loadData();
     }
-    await this.loadData();
-  }
 
-  showView = (showViewParam: ShowViewParam) => {
-    const { basePath } = this.props;
-    const { sourceId } = this.props.params;
-    const { ltmplConfigRes } = this.state;
+    showView = (showViewParam: ShowViewParam) => {
+        const {basePath} = this.props;
+        const {sourceId} = this.props.params;
+        const {ltmplConfigRes} = this.state;
+        let ltmplConfig: LtmplConfig = ltmplConfigRes.ltmplConfig;
+        let showType: string = !ltmplConfig.buttonAddConfig ? "routing" : ltmplConfig.buttonAddConfig.showType;
+        if (showType == "routing") {
+            let dtmplSourceId = showViewParam.dtmplSourceId
+                ? showViewParam.dtmplSourceId
+                : sourceId;
+            let path = `${basePath}${
+                this.computedLayoutPath
+            }/${dtmplSourceId}/detail-view?code=${
+                showViewParam.code
+            }&menuId=${this.getMenuId()}`;
+            if (
+                showViewParam.toCustomPage &&
+                ltmplConfig.customViewPagePath
+            ) {
+                path = `${basePath}${this.computedLayoutPath}${
+                    ltmplConfig.customViewPagePath
+                }?menuId=${this.getMenuId()}&sourceId=${sourceId}`;
+            }
+            this.onRoute(path);
+        } else {
+            this.setState({
+                showViewModal: showType=="modal",
+                showViewDrawer: showType=="drawer",
+                selectedCode: showViewParam.code
+            })
+        }
+    };
 
-    let dtmplSourceId = showViewParam.dtmplSourceId
-      ? showViewParam.dtmplSourceId
-      : sourceId;
+    doEdit = (param: DoEditParam) => {
+        const {basePath} = this.props;
+        const {sourceId} = this.props.params;
+        const {ltmplConfigRes} = this.state;
+        let mainCode = this.getMainCode();
+        let ltmplConfig: LtmplConfig = ltmplConfigRes.ltmplConfig;
+        let showWindowType: PageType = !ltmplConfig.buttonAddConfig ? "routing" : ltmplConfig.buttonAddConfig.showType;
+        if (showWindowType == "routing") {
+            let dtmplSourceId = param.dtmplSourceId ? param.dtmplSourceId : sourceId;
+            let path = `${basePath}${
+                this.computedLayoutPath
+            }/${dtmplSourceId}/detail-edit?code=${
+                param.code
+            }&menuId=${this.getMenuId()}&mode=${param.mode}`;
+            if (param.toCustomPage && ltmplConfig.customEditPagePath) {
+                path = `${basePath}${this.computedLayoutPath}/page/${dtmplSourceId}${
+                    ltmplConfig.customEditPagePath
+                }?code=${param.code}&menuId=${this.getMenuId()}`;
+            }
+            if (mainCode) {
+                path = path + `&mainCode=${mainCode}`;
+            }
+            this.onRoute(path);
+        } else {
+            this.setState({
+                showEdit: true,
+                showWindowType,
+                selectedCode: param.code
+            })
+        }
+    };
 
-    let path = `${basePath}${
-      this.computedLayoutPath
-    }/${dtmplSourceId}/detail-view?code=${
-      showViewParam.code
-    }&menuId=${this.getMenuId()}`;
-    if (
-      showViewParam.toCustomPage &&
-      ltmplConfigRes.ltmplConfig.customViewPagePath
-    ) {
-      path = `${basePath}${this.computedLayoutPath}${
-        ltmplConfigRes.ltmplConfig.customViewPagePath
-      }?menuId=${this.getMenuId()}&sourceId=${sourceId}`;
-    }
-    this.onRoute(path);
-  };
+    getMainCode = () => {
+        const {searchParams} = this.props;
+        let mainCode = undefined;
+        // let criteriaData = Units.transQueryStrToParams(search);
+        let mcode = searchParams.get("mainCode");
+        if (mcode) {
+            // criteriaData = Units.transQueryStrToParams(search);
+            mainCode = mcode;
+        }
+        return mainCode;
+    };
 
-  doEdit = (param: DoEditParam) => {
-    const { basePath } = this.props;
-    const { sourceId } = this.props.params;
-    const { ltmplConfigRes } = this.state;
-    let mainCode = this.getMainCode();
+    doCreate = (addTmplId: string, toCustomPage: boolean = false) => {
+        const {basePath} = this.props;
+        const {sourceId} = this.props.params;
+        const {ltmplConfigRes} = this.state;
+        let ltmplConfig: LtmplConfig = ltmplConfigRes.ltmplConfig;
+        let showType: string = !ltmplConfig.buttonAddConfig ? "routing" : ltmplConfig.buttonAddConfig.showType;
+        if (showType == "routing") {
+            let path = `${basePath}${
+                this.computedLayoutPath
+            }/${sourceId}/detail-edit?menuId=${this.getMenuId()}&addTmplId=${
+                addTmplId ? addTmplId : ""
+            }`;
+            if (toCustomPage && ltmplConfig.customEditPagePath) {
+                path = `${basePath}${this.computedLayoutPath}/page/${sourceId}${
+                    ltmplConfig.customEditPagePath
+                }?menuId=${this.getMenuId()}`;
+            }
+            let mainCode = this.getMainCode();
+            if (mainCode) {
+                path = path + `&mainCode=${mainCode}`;
+            }
+            this.onRoute(path);
+        } else {
+            this.setState({
+                showEdit: true
+            })
+        }
 
-    let dtmplSourceId = param.dtmplSourceId ? param.dtmplSourceId : sourceId;
-    let path = `${basePath}${
-      this.computedLayoutPath
-    }/${dtmplSourceId}/detail-edit?code=${
-      param.code
-    }&menuId=${this.getMenuId()}&mode=${param.mode}`;
-    if (param.toCustomPage && ltmplConfigRes.ltmplConfig.customEditPagePath) {
-      path = `${basePath}${this.computedLayoutPath}/page/${dtmplSourceId}${
-        ltmplConfigRes.ltmplConfig.customEditPagePath
-      }?code=${param.code}&menuId=${this.getMenuId()}`;
-    }
-    if (mainCode) {
-      path = path + `&mainCode=${mainCode}`;
-    }
-    this.onRoute(path);
-  };
+    };
 
-  getMainCode = () => {
-    const { searchParams } = this.props;
-    let mainCode = undefined;
-    // let criteriaData = Units.transQueryStrToParams(search);
-    let mcode = searchParams.get("mainCode");
-    if (mcode) {
-      // criteriaData = Units.transQueryStrToParams(search);
-      mainCode = mcode;
-    }
-    return mainCode;
-  };
+    doRAction = (ractionId: string, mainCode: string) => {
+        if (false) {
+            const {basePath} = this.props;
+            let path = `${basePath}${
+                this.computedLayoutPath
+            }/${ractionId}/act-table?mainCode=${mainCode}&menuId=${this.getMenuId()}`;
+            this.onRoute(path);
+        } else {
+            this.setState({
+                selectedCode: mainCode,
+                showDraw: true,
+                ractionId,
+            });
+        }
+    };
 
-  doCreate = (addTmplId: string, toCustomPage: boolean = false) => {
-    const { basePath } = this.props;
-    const { sourceId } = this.props.params;
-    const { ltmplConfigRes } = this.state;
-    let path = `${basePath}${
-      this.computedLayoutPath
-    }/${sourceId}/detail-edit?menuId=${this.getMenuId()}&addTmplId=${
-      addTmplId ? addTmplId : ""
-    }`;
-    if (toCustomPage && ltmplConfigRes.ltmplConfig.customEditPagePath) {
-      path = `${basePath}${this.computedLayoutPath}/page/${sourceId}${
-        ltmplConfigRes.ltmplConfig.customEditPagePath
-      }?menuId=${this.getMenuId()}`;
-    }
-    let mainCode = this.getMainCode();
-    if (mainCode) {
-      path = path + `&mainCode=${mainCode}`;
-    }
-    this.onRoute(path);
-  };
 
-  doRAction = (ractionId: string, mainCode: string) => {
-    if (false) {
-      const { basePath } = this.props;
-      let path = `${basePath}${
-        this.computedLayoutPath
-      }/${ractionId}/act-table?mainCode=${mainCode}&menuId=${this.getMenuId()}`;
-      this.onRoute(path);
-    } else {
-      this.setState({
-        selectedCode: mainCode,
-        showDraw: true,
-        ractionId,
-      });
+    doSearch = (params_) => {
+        const {basePath} = this.props;
+        const {sourceId} = this.props.params;
+        let params = {
+            ...Units.transQueryStrToParams(
+                this.props.location.search,
+                this.state.ltmplConfigRes?.ltmplConfig
+            ),
+            ...params_,
+        };
+        //params['sourceId'] = sourceId;
+        const newfliter = Units.transQueryParamsToStr({...params});
+        this.props.navigate(
+            `${basePath}${this.computedLayoutPath}/${sourceId}/act-table?${newfliter}`,
+            {
+                replace: true,
+            }
+        );
+    };
+    onChangeSearch = (params_) => {
+        let params = {...params_};
+        //追加过滤条件，hiddenColIds，innerQueryKey
+        const {searchParams} = this.props;
+        let mcode = searchParams.get("mainCode");
+        if (mcode) {
+            params["mainCode"] = mcode;
+        }
+        const {pageSize, pageNo} = this.state;
+        if (pageSize) {
+            params["pageNo"] = pageNo;
+        }
+        if (pageNo) {
+            params["pageSize"] = pageSize;
+        }
+        params["menuId"] = this.getMenuId();
+        params["sourceId"] = this.getMenuId();
+        this.doSearch(params);
+    };
+    doSubmited = () => {
+        this.onChangeSearch(null);
+        this.doClose();
     }
-  };
 
-  closeDrawer = () => {
-    this.setState({
-      showDraw: false,
-    });
-  };
+    onChangePage = (pageNo: number, pageSize: number) => {
+        const {location} = this.props;
+        let search = location.search;
+        let params = Units.transQueryStrToParams(search, null);
+        params["pageNo"] = pageNo;
+        params["pageSize"] = pageSize;
+        this.doSearch(params);
 
-  doSearch = (params_) => {
-    const { basePath } = this.props;
-    const { sourceId } = this.props.params;
-    let params = {
-      ...Units.transQueryStrToParams(
-        this.props.location.search,
-        this.state.ltmplConfigRes?.ltmplConfig
-      ),
-      ...params_,
+        // this.setState({
+        //     pageNo,
+        //         pageSize
+        // })
     };
-    //params['sourceId'] = sourceId;
-    const newfliter = Units.transQueryParamsToStr({ ...params });
-    this.props.navigate(
-      `${basePath}${this.computedLayoutPath}/${sourceId}/act-table?${newfliter}`,
-      {
-        replace: true,
-      }
-    );
-  };
-  onChangeSearch = (params_) => {
-    let params = { ...params_ };
-    //追加过滤条件，hiddenColIds，innerQueryKey
-    const { searchParams } = this.props;
-    let mcode = searchParams.get("mainCode");
-    if (mcode) {
-      params["mainCode"] = mcode;
-    }
-    const { pageSize, pageNo } = this.state;
-    if (pageSize) {
-      params["pageNo"] = pageNo;
-    }
-    if (pageNo) {
-      params["pageSize"] = pageSize;
-    }
-    params["menuId"] = this.getMenuId();
-    params["sourceId"] = this.getMenuId();
-    this.doSearch(params);
-  };
 
-  onChangePage = (pageNo: number, pageSize: number) => {
-    const { location } = this.props;
-    let search = location.search;
-    let params = Units.transQueryStrToParams(search, null);
-    params["pageNo"] = pageNo;
-    params["pageSize"] = pageSize;
-    this.doSearch(params);
+    render() {
+        const {
+            ltmplConfigRes, showDraw, showWindowType, ractionId, selectedCode,
+            showViewDrawer, showViewModal, showEdit
+        } = this.state;
+        const {location, params,} = this.props;
+        const {sourceId} = params;
+        const {translate} = this.context;
+        //let menuId = undefined;
+        let mainCode = undefined;
+        let search = location.search;
+        let criteriaData = Units.transQueryStrToParams(
+            search,
+            ltmplConfigRes?.ltmplConfig
+        );
+        let pageSize = criteriaData["pageSize"];
+        let pageNo = criteriaData["pageNo"];
 
-    // this.setState({
-    //     pageNo,
-    //         pageSize
-    // })
-  };
+        if (search.indexOf("mainCode") > 0) {
+            //criteriaData = Units.transQueryStrToParams(search);
+            mainCode = criteriaData["mainCode"];
+        }
 
-  render() {
-    const { ltmplConfigRes, showDraw, ractionId, selectedCode } = this.state;
-    const { location, params } = this.props;
-    const { sourceId } = params;
-    const { translate } = this.context;
-    //let menuId = undefined;
-    let mainCode = undefined;
-    let search = location.search;
-    let criteriaData = Units.transQueryStrToParams(
-      search,
-      ltmplConfigRes?.ltmplConfig
-    );
-    let pageSize = criteriaData["pageSize"];
-    let pageNo = criteriaData["pageNo"];
+        let ltmplConfig = ltmplConfigRes ? ltmplConfigRes.ltmplConfig : null;
 
-    if (search.indexOf("mainCode") > 0) {
-      //criteriaData = Units.transQueryStrToParams(search);
-      mainCode = criteriaData["mainCode"];
-    }
-    if (!ltmplConfigRes || !ltmplConfigRes.ltmplConfig) {
-      return <></>;
-    } else {
-      return (
-        <>
-          <ActTable
-            serverKey={null}
-            pageSize={pageSize}
-            pageNo={pageNo}
-            onChangePage={this.onChangePage}
-            menuId={this.getMenuId()}
-            mainCode={mainCode}
-            showView={this.showView}
-            doSearch={this.onChangeSearch}
-            doEdit={this.doEdit}
-            doCreate={this.doCreate}
-            sourceId={sourceId}
-            criteriaData={criteriaData}
-            ltmplConfig={ltmplConfigRes ? ltmplConfigRes.ltmplConfig : null}
-            doRAction={this.doRAction}
-          />
-          {showDraw ? (
-            <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={null}
-                  sourceId={ractionId}
-                  mainCode={selectedCode}
-                ></LtmplTable>
-              }
-            </Drawer>
-          ) : null}
-        </>
-      );
+        if (!ltmplConfig) {
+            return <></>;
+        } else {
+            return (
+                <>
+                    <ActTable
+                        serverKey={null}
+                        pageSize={pageSize}
+                        pageNo={pageNo}
+                        onChangePage={this.onChangePage}
+                        menuId={this.getMenuId()}
+                        mainCode={mainCode}
+                        showView={this.showView}
+                        doSearch={this.onChangeSearch}
+                        doEdit={this.doEdit}
+                        doCreate={this.doCreate}
+                        sourceId={sourceId}
+                        criteriaData={criteriaData}
+                        ltmplConfig={ltmplConfig}
+                        doRAction={this.doRAction}
+                    />
+                    {showDraw ? (
+                        <Drawer
+                            placement={"left"}
+                            title={translate("${关联查询}")}
+                            closable={true}
+                            mask={false}
+                            onClose={this.doClose}
+                            open={showDraw}
+                            width={"calc(100% - 280px)"}
+                            style={{
+                                maxWidth: 1960,
+                            }}
+                            extra={
+                                <Space>
+                                    <Button onClick={this.doClose}>
+                                        {translate("${关闭}")}
+                                    </Button>
+                                </Space>
+                            }
+                        >
+                            {
+                                <LtmplTable
+                                    serverKey={null}
+                                    sourceId={ractionId}
+                                    mainCode={selectedCode}
+                                ></LtmplTable>
+                            }
+                        </Drawer>
+                    ) : null}
+                    {showViewDrawer && selectedCode ? (
+                        <DtmplViewDrawer
+                            serverKey={null}
+                            placement={ltmplConfig.buttonViewConfig.windowPosition}
+                            width={ltmplConfig.buttonViewConfig.windowWidth}
+                            onClose={this.doClose}
+                            open={showViewDrawer}
+                            sourceId={sourceId}
+                            code={selectedCode}
+                        ></DtmplViewDrawer>
+                    ) : null}
+                    {showViewModal && selectedCode ? (
+                        <DtmplViewModal
+                            serverKey={null}
+                            width={ltmplConfig.buttonViewConfig.windowWidth}
+                            height={ltmplConfig.buttonViewConfig.windowHeight}
+                            onClose={this.doClose}
+                            open={showViewModal}
+                            sourceId={sourceId}
+                            code={selectedCode}
+                        ></DtmplViewModal>
+                    ) : null}
+                    {showEdit && ltmplConfig ? (
+                        ltmplConfig.customEditPagePath ? (
+                            <DtmplCustomEditModalPage
+                                open={showEdit}
+                                onOk={() => {
+                                    this.doSubmited();
+                                }}
+                                customPath={ltmplConfig.customEditPagePath}
+                                sourceId={sourceId}
+                                mainCode={mainCode}
+                                code={selectedCode}
+                            />
+                        ) : (
+                            <DtmplEditPage
+                                defaultDtmplData={ltmplConfig.defaultDtmplData}
+                                serverKey={null}
+                                pageType={showWindowType=="modal"?"modal":"drawer"}
+                                open={showEdit}
+                                width={selectedCode ? ltmplConfig.buttonEditConfig.windowWidth : ltmplConfig.buttonAddConfig.windowWidth}
+                                height={selectedCode ? ltmplConfig.buttonEditConfig.windowHeight : ltmplConfig.buttonAddConfig.windowHeight}
+                                onCancel={this.doClose}
+                                mainCode={mainCode}
+                                sourceId={sourceId}
+                                code={selectedCode}
+                                onOk={this.doSubmited}
+                            />
+                        )
+                    ) : null}
+                </>
+            );
+        }
     }
-  }
 }
 
 export default withRouter(LtmplRoute);