aldehyde 0.2.496 → 0.2.497

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

@@ -1,386 +1,386 @@
-import React, { useEffect, useState, useMemo } from "react";
-import { useParams, useLocation, useNavigate } from "react-router-dom";
-import { DoEditParam, LtmplConfig, LtmplConfigRes, PageType, RouterCompProps, ShowViewParam, ActTableViewModel, ThemeConfig } from "../tmpl/interface";
-import Units from "../units";
-import ActTable from "../table/act-table";
-import HCDataSource from "../tmpl/hc-data-source";
-import withRouter from "../routable/withroute";
-import { Button, Drawer, Space, Splitter } from "antd";
-import LtmplTable from "../module/ltmpl-table";
-import DtmplViewDrawer from "../module/dtmpl-view-drawer";
-import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
-import CustomDetailModalPage from "../custom-page/custom-detail-modal-page";
-import DtmplEditPage from "../module/dtmpl-edit-page";
-import DtmplViewModal from "../module/dtmpl-view-modal";
-import { DtmplEditCard, DtmplViewCard, useLocale } from "../index";
-import "./index.less";
-
-export interface Props extends RouterCompProps {
-    layoutRootPath?: string;
-    tableType?: "common" | "report";
-    rowOperatable?: boolean;
-    defShowType?: ActTableViewModel;
-}
-
-const Index = (props: Props) => {
-    const { layoutRootPath, tableType, rowOperatable, basePath = "", defShowType } = props;
-    const [pageInfo, setPageInfo] = useState<{ pageNo: number, pageSize: number }>();
-    const [ltmplConfig, setLtmplConfig] = useState<LtmplConfig>();
-    const [splitterSize, setSplitterSize] = useState<number | string>("50%");
-    const [pageLayout, setPageLayout] = useState<string>("none");
-    const [selectedCode, setSelectedCode] = useState<string>();
-    const [showEdit, setShowEdit] = useState<boolean>(true);
-    const [ractionId, setRactionId] = useState<string>();
-    const [showDraw, setShowDraw] = useState<boolean>(false);
-    const [showView, setShowView] = useState<boolean>(false);
-    const [showWindowType, setShowWindowType] = useState<PageType>("default");
-    const [toCustomPage, setToCustomPage] = useState<boolean>(false);
-    const [viewSourceId, setViewSourceId] = useState<string>();
-    const [editSourceId, setEditSourceId] = useState<string>();
-    const [userPageConfig, setUserPageConfig] = useState<{ [key: string]: any }>();
-    const [userPageConfigLoading, setUserPageConfigLoading] = useState<boolean>(true);
-    const [pageSizeOptions, setPageSizeOptions] = useState<number[]>([]); // 分页条数
-    const [themeConfig, setThemeConfig] = useState<ThemeConfig>();     // 主题配置信息
-    const [drawerSize, setDrawerSize] = useState<number | string>("92vw");
-    const [isCopy, setIsCopy] = useState<boolean>(false); // 是否复制
-    const { sourceId } = useParams();
-    const { search } = useLocation();
-    const { translate } = useLocale();
-    const navigate = useNavigate();
-    const computedLayoutPath = layoutRootPath !== undefined ? `/${layoutRootPath}` : "";
-
-    const { mainCode, menuId, serverKey } = useMemo(() => {
-        const temParams = new URLSearchParams(search);
-        const mainCode = temParams.get("mainCode");
-        const menuId = temParams.get("menuId");
-        const serverKey = temParams.get("serverKey") || null;
-        return { mainCode, menuId, serverKey }
-    }, [search])
-
-    const getLtmplConfig = async () => {
-        const ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(serverKey, sourceId);
-        const ltmplConfig = ltmplConfigRes?.ltmplConfig;
-        setLtmplConfig(ltmplConfig);
-        setSplitterSize(`${ltmplConfig?.rightPercent || 50}%`);
-        setPageLayout(ltmplConfig?.pageLayout || "none");
-    };
-
-    // 获取用户页面配置
-    const getUserPageConfig = async () => {
-        const config = await Units.getUserPageConfig(sourceId);
-        setUserPageConfig(config);
-        setUserPageConfigLoading(false);
-    };
-
-    // 获取全局主题配置
-    const getThemeConfig = async () => {
-        const theme: ThemeConfig = await Units.getThemeConfig();
-        setThemeConfig(theme);
-    }
-
-    // 设置用户页面配置
-    const handleSetUserPageConfig = (config: { [key: string]: any }) => {
-        const temConfig = Units.setUserPageConfig(sourceId, config);
-        setUserPageConfig(temConfig);
-    };
-
-    // 重置本地缓存页面配置
-    const resetUserPageConfig = () => {
-        Units.resetUserPageConfig(sourceId);
-        setUserPageConfig(undefined);
-    }
-
-    useEffect(() => {
-        if (sourceId) {
-            getLtmplConfig();
-            getUserPageConfig();
-            getThemeConfig();
-        }
-    }, [sourceId]);
-
-    const doSearch = (params_) => {
-        let params = {
-            ...Units.transQueryStrToParams(search, ltmplConfig),
-            ...params_,
-        };
-        const newfliter = Units.transQueryParamsToStr({ ...params });
-        const pathMark = tableType === "report" ? "splitview-report-table" : "splitview-act-table";
-        navigate(`${basePath}${computedLayoutPath}/${sourceId}/${pathMark}?${newfliter}`, { replace: true });
-    };
-
-    const onChangePage = (pageNo: number, pageSize: number, pageSizes?: number[]) => {
-        const temPageSizeOptions = pageSizes ? pageSizes : pageSizeOptions;
-        let params = Units.transQueryStrToParams(search, null);
-        params["pageNo"] = pageNo;
-        params["pageSize"] = pageSize;
-        doSearch(params);
-        const temPagesize = temPageSizeOptions.indexOf(pageSize);
-        if (temPagesize == -1) {
-            return;
-        }
-        setPageSizeOptions(temPageSizeOptions);
-        setPageInfo({ pageNo, pageSize });
-        handleSetUserPageConfig({ pageSize: temPagesize });
-    };
-
-    // 更新分页数数组
-    const onUpdatePageSizeOptions = (val: number[]) => {
-        setPageSizeOptions(val);
-    }
-
-    const onShowView = (showViewParam: ShowViewParam) => {
-        doClose();
-        let showType: PageType = !ltmplConfig.buttonViewConfig ? "default" : ltmplConfig.buttonViewConfig.showType;
-        let dtmplSourceId = showViewParam.dtmplSourceId ? showViewParam.dtmplSourceId : sourceId;
-        let path = `${basePath}${computedLayoutPath}/${dtmplSourceId}/detail-view?code=${showViewParam.code}&menuId=${menuId}`;
-        if (showViewParam.toCustomPage && ltmplConfig.customViewPagePath) {
-            path = `${basePath}${computedLayoutPath}${ltmplConfig.customViewPagePath}?menuId=${menuId}&sourceId=${sourceId}`;
-        }
-        if (showType === "routing") {
-            navigate(path);
-        } else if (showType === "blank") {
-            window.open("#" + path, '_blank');
-        } else {
-            setShowView(true);
-            setSelectedCode(showViewParam.code);
-            setViewSourceId(dtmplSourceId);
-            setToCustomPage(showViewParam.toCustomPage);
-            setShowWindowType(pageLayout === "none" ? "drawer" : showType);
-        }
-    };
-
-    const onChangeSearch = (params_) => {
-        let params = { ...params_ };
-        if (mainCode) {
-            params["mainCode"] = mainCode;
-        }
-        params["pageNo"] = 1;
-        if (pageInfo?.pageSize) {
-            params["pageSize"] = pageInfo?.pageSize;
-        }
-        params["menuId"] = menuId;
-        params["sourceId"] = sourceId;
-        doSearch(params);
-    };
-
-    const doEdit = (param: DoEditParam) => {
-        doClose();
-        let showType: PageType = !ltmplConfig.buttonEditConfig ? "default" : ltmplConfig.buttonEditConfig.showType;
-        let dtmplSourceId = param.dtmplSourceId ? param.dtmplSourceId : sourceId;
-        let path = `${basePath}${computedLayoutPath}/${dtmplSourceId}/detail-edit?code=${param.code}&menuId=${menuId}&mode=${param.mode}`;
-        if (param.toCustomPage && ltmplConfig.customEditPagePath) {
-            path = `${basePath}${computedLayoutPath}/page/${dtmplSourceId}${ltmplConfig.customEditPagePath}?code=${param.code}&menuId=${menuId}`;
-        }
-        if (mainCode) {
-            path = path + `&mainCode=${mainCode}`;
-        }
-        if (showType === "routing") {
-            navigate(path);
-        } else if (showType === "blank") {
-            window.open("#" + path, '_blank');
-        } else {
-            setShowEdit(true);
-            setShowWindowType(pageLayout === "none" ? "drawer" : showType);
-            setEditSourceId(dtmplSourceId);
-            setSelectedCode(param.code);
-            setIsCopy(param.mode === "copy");
-        }
-    };
-
-    const doCreate = (addTmplId: string, toCustomPage: boolean = false) => {
-        doClose();
-        let showType: PageType = !ltmplConfig.buttonAddConfig ? "default" : ltmplConfig.buttonAddConfig.showType;
-        let path = `${basePath}${computedLayoutPath}/${sourceId}/detail-edit?menuId=${menuId}&addTmplId=${addTmplId ? addTmplId : ""}`;
-        if (toCustomPage && ltmplConfig.customEditPagePath) {
-            path = `${basePath}${computedLayoutPath}/page/${sourceId}${ltmplConfig.customEditPagePath}?menuId=${menuId}`;
-        }
-        if (mainCode) {
-            path = path + `&mainCode=${mainCode}`;
-        }
-        if (showType === "routing") {
-            navigate(path);
-        } else if (showType === "blank") {
-            window.open("#" + path, '_blank');
-        } else {
-            let editSourceId = addTmplId ? addTmplId : sourceId;
-            setTimeout(() => {
-                setShowEdit(true);
-                setShowWindowType(pageLayout === "none" ? "drawer" : showType);
-                setEditSourceId(editSourceId);
-            }, 100);
-        }
-    };
-
-    const doRAction = (ractionId: string, mainCode: string) => {
-        setSelectedCode(mainCode);
-        setRactionId(ractionId);
-        setShowDraw(true);
-    };
-
-    const renderActTable = () => {
-        let criteriaData = Units.transQueryStrToParams(search, ltmplConfig);
-        const cachePageSize = userPageConfig?.pageSize; // 获取缓存分页数配置，其配置的是分页数组下标
-        let pageSize = cachePageSize ? pageSizeOptions[cachePageSize] : pageInfo?.pageSize;
-        if (!ltmplConfig || userPageConfigLoading) {
-            return <></>;
-        }
-        return <ActTable key={"acttable" + sourceId}
-            tableType={tableType} serverKey={serverKey} pageSize={pageSize} pageNo={pageInfo?.pageNo} onChangePage={onChangePage}
-            menuId={menuId} operatable={rowOperatable}
-            mainCode={mainCode} showView={onShowView} doSearch={onChangeSearch} doEdit={doEdit}
-            doCreate={doCreate} sourceId={sourceId}
-            criteriaData={criteriaData} ltmplConfig={ltmplConfig || null} doRAction={doRAction}
-            doDelete={() => pageLayout !== "none" && doCreate(editSourceId)}
-            defShowType={defShowType}
-            userPageConfig={userPageConfig}
-            setUserPageConfig={handleSetUserPageConfig}
-            resetUserPageConfig={resetUserPageConfig}
-            allowUserConfig={themeConfig?.allowUserConfig}
-            onUpdatePageSizeOptions={onUpdatePageSizeOptions}
-        />;
-    };
-
-    const doSubmited = (code?: string, isContinueSave?: boolean) => {
-        onChangeSearch({ serial_number: Units.getReactKey() });
-        if (isContinueSave) {
-            setSelectedCode(code);
-        } else {
-            doClose();
-        }
-    }
-
-    const doClose = () => {
-        setShowDraw(false);
-        setShowView(false);
-        setShowEdit(false);
-        setShowWindowType(undefined);
-        setSelectedCode(undefined);
-        setToCustomPage(false);
-    };
-
-    // 关联查询close
-    const doCloseShowDraw = () => {
-        if (showWindowType === "default") {
-            doCreate(editSourceId);
-        } else {
-            doClose();
-        }
-    }
-
-    const windowSize = useMemo(() => {
-        const { buttonViewConfig, buttonEditConfig } = ltmplConfig || {};
-        let width = buttonViewConfig?.windowWidth
-        width = width && width > 0 ? width : 1280;
-        let height: number | string = buttonViewConfig?.windowHeight;
-        height = height && height > 0 ? height : '80vh';
-        let editWidth = buttonEditConfig?.windowWidth;
-        editWidth = editWidth && editWidth > 0 ? editWidth : 1280;
-        let editHeight: number | string = buttonEditConfig?.windowHeight;
-        editHeight = editHeight && editHeight > 0 ? editHeight : '80vh';
-        return { width, height, editWidth, editHeight };
-    }, [ltmplConfig]);
-
-    return <div className="splitview-ltmpl-route">
-        {["leftRightSplit", "upDownSplit"].includes(pageLayout) ?
-            <Splitter layout={pageLayout === "leftRightSplit" ? "horizontal" : "vertical"} onResize={(val) => setSplitterSize(val[0])}>
-                <Splitter.Panel size={splitterSize} style={{ padding: pageLayout === "leftRightSplit" ? "0 12px 0 0" : "0 0 12px 0" }}>
-                    {renderActTable()}
-                </Splitter.Panel>
-                <Splitter.Panel style={{ padding: pageLayout === "leftRightSplit" ? "0 0 0 12px" : "12px 0 0 0" }}>
-                    {showEdit && showWindowType === "default" ?
-                        <DtmplEditCard
-                            style={{ border: "none" }}
-                            bodyStyle={{ padding: "0 1px" }}
-                            headerStyle={{ padding: 0, border: "none", margin: 0, minHeight: 0 }}
-                            addTmplId={editSourceId}
-                            title={<>{translate(selectedCode ? "${编辑}" : "${添加}")}</>}
-                            mainCode={mainCode}
-                            sourceId={sourceId}
-                            code={selectedCode}
-                            isReset={false}
-                            onOk={() => doSearch({ serial_number: new Date().getTime() })}
-                            isCopy={isCopy}
-                            serverKey={serverKey}
-                        />
-                        : null}
-                    {showView && selectedCode && showWindowType === "default" ?
-                        <DtmplViewCard
-                            mainCode={mainCode}
-                            sourceId={sourceId}
-                            code={selectedCode}
-                            serverKey={serverKey}
-                        />
-                        : null}
-                </Splitter.Panel>
-            </Splitter> : renderActTable()}
-        {showDraw ? (
-            <Drawer
-                placement="left" title={translate("${关联查询}")} closable={true} mask={false} onClose={doCloseShowDraw}
-                open={showDraw}
-                resizable={{ onResize: (newSize => setDrawerSize(newSize)) }}
-                size={drawerSize}
-                styles={{ body: { minWidth: "720px" } }}
-                extra={
-                    <Space>
-                        <Button onClick={doCloseShowDraw}>{translate("${关闭}")}</Button>
-                    </Space>
-                }
-            >
-                <LtmplTable serverKey={serverKey} sourceId={ractionId} mainCode={selectedCode} />
-            </Drawer>
-        ) : null}
-        {showView && showWindowType === "drawer" && selectedCode ? (
-            toCustomPage && ltmplConfig?.customViewPagePath ? <CustomDetailModalPage width={1000} minHeight="70vh" mainCode={mainCode} sourceId={sourceId} code={selectedCode} open={showView} customPath={ltmplConfig?.customViewPagePath} onCancel={doClose} />
-                :
-                <DtmplViewDrawer
-                    serverKey={serverKey} placement={ltmplConfig?.buttonViewConfig?.windowPosition}
-                    width={windowSize.width}
-                    height={windowSize.height}
-                    onClose={doClose}
-                    open={showView}
-                    sourceId={viewSourceId ? viewSourceId : sourceId}
-                    code={selectedCode}
-                />
-        ) : null}
-        {showView && showWindowType === "modal" && selectedCode ? (
-            toCustomPage && ltmplConfig?.customViewPagePath ? <CustomDetailModalPage width={1000} minHeight="70vh" mainCode={mainCode} sourceId={sourceId} code={selectedCode} open={showView} customPath={ltmplConfig?.customViewPagePath} onCancel={doClose} />
-                :
-                <DtmplViewModal
-                    serverKey={serverKey} width={windowSize.width} height={windowSize.height} onClose={doClose}
-                    open={showView} sourceId={viewSourceId ? viewSourceId : sourceId}
-                    code={selectedCode}
-                />
-        ) : null}
-        {showEdit && showWindowType !== "default" && ltmplConfig ? (
-            ltmplConfig?.customEditPagePath ? (
-                <DtmplCustomEditModalPage
-                    open={showEdit}
-                    onOk={doSubmited}
-                    customPath={ltmplConfig?.customEditPagePath}
-                    sourceId={sourceId}
-                    mainCode={mainCode}
-                    code={selectedCode}
-                    isCopy={isCopy}
-                />
-            ) : (
-                <DtmplEditPage
-                    defaultDtmplData={ltmplConfig?.defaultDtmplData}
-                    serverKey={serverKey}
-                    pageType={showWindowType === "modal" ? "modal" : "drawer"}
-                    placement={ltmplConfig?.buttonEditConfig?.windowPosition}
-                    open={showEdit}
-                    width={windowSize.editWidth}
-                    height={windowSize.editHeight}
-                    onCancel={doClose}
-                    mainCode={mainCode}
-                    sourceId={editSourceId}
-                    code={selectedCode}
-                    onOk={doSubmited}
-                    isCopy={isCopy}
-                />
-            )
-        ) : null}
-    </div>;
-};
-
+import React, { useEffect, useState, useMemo } from "react";
+import { useParams, useLocation, useNavigate } from "react-router-dom";
+import { DoEditParam, LtmplConfig, LtmplConfigRes, PageType, RouterCompProps, ShowViewParam, ActTableViewModel, ThemeConfig } from "../tmpl/interface";
+import Units from "../units";
+import ActTable from "../table/act-table";
+import HCDataSource from "../tmpl/hc-data-source";
+import withRouter from "../routable/withroute";
+import { Button, Drawer, Space, Splitter } from "antd";
+import LtmplTable from "../module/ltmpl-table";
+import DtmplViewDrawer from "../module/dtmpl-view-drawer";
+import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
+import CustomDetailModalPage from "../custom-page/custom-detail-modal-page";
+import DtmplEditPage from "../module/dtmpl-edit-page";
+import DtmplViewModal from "../module/dtmpl-view-modal";
+import { DtmplEditCard, DtmplViewCard, useLocale } from "../index";
+import "./index.less";
+
+export interface Props extends RouterCompProps {
+    layoutRootPath?: string;
+    tableType?: "common" | "report";
+    rowOperatable?: boolean;
+    defShowType?: ActTableViewModel;
+}
+
+const Index = (props: Props) => {
+    const { layoutRootPath, tableType, rowOperatable, basePath = "", defShowType } = props;
+    const [pageInfo, setPageInfo] = useState<{ pageNo: number, pageSize: number }>();
+    const [ltmplConfig, setLtmplConfig] = useState<LtmplConfig>();
+    const [splitterSize, setSplitterSize] = useState<number | string>("50%");
+    const [pageLayout, setPageLayout] = useState<string>("none");
+    const [selectedCode, setSelectedCode] = useState<string>();
+    const [showEdit, setShowEdit] = useState<boolean>(true);
+    const [ractionId, setRactionId] = useState<string>();
+    const [showDraw, setShowDraw] = useState<boolean>(false);
+    const [showView, setShowView] = useState<boolean>(false);
+    const [showWindowType, setShowWindowType] = useState<PageType>("default");
+    const [toCustomPage, setToCustomPage] = useState<boolean>(false);
+    const [viewSourceId, setViewSourceId] = useState<string>();
+    const [editSourceId, setEditSourceId] = useState<string>();
+    const [userPageConfig, setUserPageConfig] = useState<{ [key: string]: any }>();
+    const [userPageConfigLoading, setUserPageConfigLoading] = useState<boolean>(true);
+    const [pageSizeOptions, setPageSizeOptions] = useState<number[]>([]); // 分页条数
+    const [themeConfig, setThemeConfig] = useState<ThemeConfig>();     // 主题配置信息
+    const [drawerSize, setDrawerSize] = useState<number | string>("92vw");
+    const [isCopy, setIsCopy] = useState<boolean>(false); // 是否复制
+    const { sourceId } = useParams();
+    const { search } = useLocation();
+    const { translate } = useLocale();
+    const navigate = useNavigate();
+    const computedLayoutPath = layoutRootPath !== undefined ? `/${layoutRootPath}` : "";
+
+    const { mainCode, menuId, serverKey } = useMemo(() => {
+        const temParams = new URLSearchParams(search);
+        const mainCode = temParams.get("mainCode");
+        const menuId = temParams.get("menuId");
+        const serverKey = temParams.get("serverKey") || null;
+        return { mainCode, menuId, serverKey }
+    }, [search])
+
+    const getLtmplConfig = async () => {
+        const ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(serverKey, sourceId);
+        const ltmplConfig = ltmplConfigRes?.ltmplConfig;
+        setLtmplConfig(ltmplConfig);
+        setSplitterSize(`${ltmplConfig?.rightPercent || 50}%`);
+        setPageLayout(ltmplConfig?.pageLayout || "none");
+    };
+
+    // 获取用户页面配置
+    const getUserPageConfig = async () => {
+        const config = await Units.getUserPageConfig(sourceId);
+        setUserPageConfig(config);
+        setUserPageConfigLoading(false);
+    };
+
+    // 获取全局主题配置
+    const getThemeConfig = async () => {
+        const theme: ThemeConfig = await Units.getThemeConfig();
+        setThemeConfig(theme);
+    }
+
+    // 设置用户页面配置
+    const handleSetUserPageConfig = (config: { [key: string]: any }) => {
+        const temConfig = Units.setUserPageConfig(sourceId, config);
+        setUserPageConfig(temConfig);
+    };
+
+    // 重置本地缓存页面配置
+    const resetUserPageConfig = () => {
+        Units.resetUserPageConfig(sourceId);
+        setUserPageConfig(undefined);
+    }
+
+    useEffect(() => {
+        if (sourceId) {
+            getLtmplConfig();
+            getUserPageConfig();
+            getThemeConfig();
+        }
+    }, [sourceId]);
+
+    const doSearch = (params_) => {
+        let params = {
+            ...Units.transQueryStrToParams(search, ltmplConfig),
+            ...params_,
+        };
+        const newfliter = Units.transQueryParamsToStr({ ...params });
+        const pathMark = tableType === "report" ? "splitview-report-table" : "splitview-act-table";
+        navigate(`${basePath}${computedLayoutPath}/${sourceId}/${pathMark}?${newfliter}`, { replace: true });
+    };
+
+    const onChangePage = (pageNo: number, pageSize: number, pageSizes?: number[]) => {
+        const temPageSizeOptions = pageSizes ? pageSizes : pageSizeOptions;
+        let params = Units.transQueryStrToParams(search, null);
+        params["pageNo"] = pageNo;
+        params["pageSize"] = pageSize;
+        doSearch(params);
+        const temPagesize = temPageSizeOptions.indexOf(pageSize);
+        if (temPagesize == -1) {
+            return;
+        }
+        setPageSizeOptions(temPageSizeOptions);
+        setPageInfo({ pageNo, pageSize });
+        handleSetUserPageConfig({ pageSize: temPagesize });
+    };
+
+    // 更新分页数数组
+    const onUpdatePageSizeOptions = (val: number[]) => {
+        setPageSizeOptions(val);
+    }
+
+    const onShowView = (showViewParam: ShowViewParam) => {
+        doClose();
+        let showType: PageType = !ltmplConfig.buttonViewConfig ? "default" : ltmplConfig.buttonViewConfig.showType;
+        let dtmplSourceId = showViewParam.dtmplSourceId ? showViewParam.dtmplSourceId : sourceId;
+        let path = `${basePath}${computedLayoutPath}/${dtmplSourceId}/detail-view?code=${showViewParam.code}&menuId=${menuId}`;
+        if (showViewParam.toCustomPage && ltmplConfig.customViewPagePath) {
+            path = `${basePath}${computedLayoutPath}${ltmplConfig.customViewPagePath}?menuId=${menuId}&sourceId=${sourceId}`;
+        }
+        if (showType === "routing") {
+            navigate(path);
+        } else if (showType === "blank") {
+            window.open("#" + path, '_blank');
+        } else {
+            setShowView(true);
+            setSelectedCode(showViewParam.code);
+            setViewSourceId(dtmplSourceId);
+            setToCustomPage(showViewParam.toCustomPage);
+            setShowWindowType(pageLayout === "none" ? "drawer" : showType);
+        }
+    };
+
+    const onChangeSearch = (params_) => {
+        let params = { ...params_ };
+        if (mainCode) {
+            params["mainCode"] = mainCode;
+        }
+        params["pageNo"] = 1;
+        if (pageInfo?.pageSize) {
+            params["pageSize"] = pageInfo?.pageSize;
+        }
+        params["menuId"] = menuId;
+        params["sourceId"] = sourceId;
+        doSearch(params);
+    };
+
+    const doEdit = (param: DoEditParam) => {
+        doClose();
+        let showType: PageType = !ltmplConfig.buttonEditConfig ? "default" : ltmplConfig.buttonEditConfig.showType;
+        let dtmplSourceId = param.dtmplSourceId ? param.dtmplSourceId : sourceId;
+        let path = `${basePath}${computedLayoutPath}/${dtmplSourceId}/detail-edit?code=${param.code}&menuId=${menuId}&mode=${param.mode}`;
+        if (param.toCustomPage && ltmplConfig.customEditPagePath) {
+            path = `${basePath}${computedLayoutPath}/page/${dtmplSourceId}${ltmplConfig.customEditPagePath}?code=${param.code}&menuId=${menuId}`;
+        }
+        if (mainCode) {
+            path = path + `&mainCode=${mainCode}`;
+        }
+        if (showType === "routing") {
+            navigate(path);
+        } else if (showType === "blank") {
+            window.open("#" + path, '_blank');
+        } else {
+            setShowEdit(true);
+            setShowWindowType(pageLayout === "none" ? "drawer" : showType);
+            setEditSourceId(dtmplSourceId);
+            setSelectedCode(param.code);
+            setIsCopy(param.mode === "copy");
+        }
+    };
+
+    const doCreate = (addTmplId: string, toCustomPage: boolean = false) => {
+        doClose();
+        let showType: PageType = !ltmplConfig.buttonAddConfig ? "default" : ltmplConfig.buttonAddConfig.showType;
+        let path = `${basePath}${computedLayoutPath}/${sourceId}/detail-edit?menuId=${menuId}&addTmplId=${addTmplId ? addTmplId : ""}`;
+        if (toCustomPage && ltmplConfig.customEditPagePath) {
+            path = `${basePath}${computedLayoutPath}/page/${sourceId}${ltmplConfig.customEditPagePath}?menuId=${menuId}`;
+        }
+        if (mainCode) {
+            path = path + `&mainCode=${mainCode}`;
+        }
+        if (showType === "routing") {
+            navigate(path);
+        } else if (showType === "blank") {
+            window.open("#" + path, '_blank');
+        } else {
+            let editSourceId = addTmplId ? addTmplId : sourceId;
+            setTimeout(() => {
+                setShowEdit(true);
+                setShowWindowType(pageLayout === "none" ? "drawer" : showType);
+                setEditSourceId(editSourceId);
+            }, 100);
+        }
+    };
+
+    const doRAction = (ractionId: string, mainCode: string) => {
+        setSelectedCode(mainCode);
+        setRactionId(ractionId);
+        setShowDraw(true);
+    };
+
+    const renderActTable = () => {
+        let criteriaData = Units.transQueryStrToParams(search, ltmplConfig);
+        const cachePageSize = userPageConfig?.pageSize; // 获取缓存分页数配置，其配置的是分页数组下标
+        let pageSize = cachePageSize ? pageSizeOptions[cachePageSize] : pageInfo?.pageSize;
+        if (!ltmplConfig || userPageConfigLoading) {
+            return <></>;
+        }
+        return <ActTable key={"acttable" + sourceId}
+            tableType={tableType} serverKey={serverKey} pageSize={pageSize} pageNo={pageInfo?.pageNo} onChangePage={onChangePage}
+            menuId={menuId} operatable={rowOperatable}
+            mainCode={mainCode} showView={onShowView} doSearch={onChangeSearch} doEdit={doEdit}
+            doCreate={doCreate} sourceId={sourceId}
+            criteriaData={criteriaData} ltmplConfig={ltmplConfig || null} doRAction={doRAction}
+            doDelete={() => pageLayout !== "none" && doCreate(editSourceId)}
+            defShowType={defShowType}
+            userPageConfig={userPageConfig}
+            setUserPageConfig={handleSetUserPageConfig}
+            resetUserPageConfig={resetUserPageConfig}
+            allowUserConfig={themeConfig?.allowUserConfig}
+            onUpdatePageSizeOptions={onUpdatePageSizeOptions}
+        />;
+    };
+
+    const doSubmited = (code?: string, isContinueSave?: boolean) => {
+        onChangeSearch({ serial_number: Units.getReactKey() });
+        if (isContinueSave) {
+            setSelectedCode(code);
+        } else {
+            doClose();
+        }
+    }
+
+    const doClose = () => {
+        setShowDraw(false);
+        setShowView(false);
+        setShowEdit(false);
+        setShowWindowType(undefined);
+        setSelectedCode(undefined);
+        setToCustomPage(false);
+    };
+
+    // 关联查询close
+    const doCloseShowDraw = () => {
+        if (showWindowType === "default") {
+            doCreate(editSourceId);
+        } else {
+            doClose();
+        }
+    }
+
+    const windowSize = useMemo(() => {
+        const { buttonViewConfig, buttonEditConfig } = ltmplConfig || {};
+        let width = buttonViewConfig?.windowWidth
+        width = width && width > 0 ? width : 1280;
+        let height: number | string = buttonViewConfig?.windowHeight;
+        height = height && height > 0 ? height : '80vh';
+        let editWidth = buttonEditConfig?.windowWidth;
+        editWidth = editWidth && editWidth > 0 ? editWidth : 1280;
+        let editHeight: number | string = buttonEditConfig?.windowHeight;
+        editHeight = editHeight && editHeight > 0 ? editHeight : '80vh';
+        return { width, height, editWidth, editHeight };
+    }, [ltmplConfig]);
+
+    return <div className="splitview-ltmpl-route">
+        {["leftRightSplit", "upDownSplit"].includes(pageLayout) ?
+            <Splitter layout={pageLayout === "leftRightSplit" ? "horizontal" : "vertical"} onResize={(val) => setSplitterSize(val[0])}>
+                <Splitter.Panel size={splitterSize} style={{ padding: pageLayout === "leftRightSplit" ? "0 12px 0 0" : "0 0 12px 0" }}>
+                    {renderActTable()}
+                </Splitter.Panel>
+                <Splitter.Panel style={{ padding: pageLayout === "leftRightSplit" ? "0 0 0 12px" : "12px 0 0 0" }}>
+                    {showEdit && showWindowType === "default" ?
+                        <DtmplEditCard
+                            style={{ border: "none" }}
+                            bodyStyle={{ padding: "0 1px" }}
+                            headerStyle={{ padding: 0, border: "none", margin: 0, minHeight: 0 }}
+                            addTmplId={editSourceId}
+                            title={<>{translate(selectedCode ? "${编辑}" : "${添加}")}</>}
+                            mainCode={mainCode}
+                            sourceId={sourceId}
+                            code={selectedCode}
+                            isReset={false}
+                            onOk={() => doSearch({ serial_number: new Date().getTime() })}
+                            isCopy={isCopy}
+                            serverKey={serverKey}
+                        />
+                        : null}
+                    {showView && selectedCode && showWindowType === "default" ?
+                        <DtmplViewCard
+                            mainCode={mainCode}
+                            sourceId={sourceId}
+                            code={selectedCode}
+                            serverKey={serverKey}
+                        />
+                        : null}
+                </Splitter.Panel>
+            </Splitter> : renderActTable()}
+        {showDraw ? (
+            <Drawer
+                placement="left" title={translate("${关联查询}")} closable={true} mask={false} onClose={doCloseShowDraw}
+                open={showDraw}
+                resizable={{ onResize: (newSize => setDrawerSize(newSize)) }}
+                size={drawerSize}
+                styles={{ body: { minWidth: "720px" } }}
+                extra={
+                    <Space>
+                        <Button onClick={doCloseShowDraw}>{translate("${关闭}")}</Button>
+                    </Space>
+                }
+            >
+                <LtmplTable serverKey={serverKey} sourceId={ractionId} mainCode={selectedCode} />
+            </Drawer>
+        ) : null}
+        {showView && showWindowType === "drawer" && selectedCode ? (
+            toCustomPage && ltmplConfig?.customViewPagePath ? <CustomDetailModalPage width={1000} minHeight="70vh" mainCode={mainCode} sourceId={sourceId} code={selectedCode} open={showView} customPath={ltmplConfig?.customViewPagePath} onCancel={doClose} />
+                :
+                <DtmplViewDrawer
+                    serverKey={serverKey} placement={ltmplConfig?.buttonViewConfig?.windowPosition}
+                    width={windowSize.width}
+                    height={windowSize.height}
+                    onClose={doClose}
+                    open={showView}
+                    sourceId={viewSourceId ? viewSourceId : sourceId}
+                    code={selectedCode}
+                />
+        ) : null}
+        {showView && showWindowType === "modal" && selectedCode ? (
+            toCustomPage && ltmplConfig?.customViewPagePath ? <CustomDetailModalPage width={1000} minHeight="70vh" mainCode={mainCode} sourceId={sourceId} code={selectedCode} open={showView} customPath={ltmplConfig?.customViewPagePath} onCancel={doClose} />
+                :
+                <DtmplViewModal
+                    serverKey={serverKey} width={windowSize.width} height={windowSize.height} onClose={doClose}
+                    open={showView} sourceId={viewSourceId ? viewSourceId : sourceId}
+                    code={selectedCode}
+                />
+        ) : null}
+        {showEdit && showWindowType !== "default" && ltmplConfig ? (
+            ltmplConfig?.customEditPagePath ? (
+                <DtmplCustomEditModalPage
+                    open={showEdit}
+                    onOk={doSubmited}
+                    customPath={ltmplConfig?.customEditPagePath}
+                    sourceId={sourceId}
+                    mainCode={mainCode}
+                    code={selectedCode}
+                    isCopy={isCopy}
+                />
+            ) : (
+                <DtmplEditPage
+                    defaultDtmplData={ltmplConfig?.defaultDtmplData}
+                    serverKey={serverKey}
+                    pageType={showWindowType === "modal" ? "modal" : "drawer"}
+                    placement={ltmplConfig?.buttonEditConfig?.windowPosition}
+                    open={showEdit}
+                    width={windowSize.editWidth}
+                    height={windowSize.editHeight}
+                    onCancel={doClose}
+                    mainCode={mainCode}
+                    sourceId={editSourceId}
+                    code={selectedCode}
+                    onOk={doSubmited}
+                    isCopy={isCopy}
+                />
+            )
+        ) : null}
+    </div>;
+};
+
 export default withRouter(Index);