aldehyde 0.2.514 → 0.2.516

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

@@ -0,0 +1,349 @@
+import React, { ReactNode, useContext, useEffect, useState } from "react";
+import { AddOrUpdate, LtmplConfigRes, ActTableMode, DoEditParam, ShowViewParam, ActTableViewModel, EttmplConfig } from "../tmpl/interface";
+import Units from "../units";
+import ActTable from "../table/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, theme } from "antd";
+import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
+import { LocaleContext } from "../locale/LocaleProvider";
+import "./index.less";
+
+// 以列表为入口的，页面内列表，基本原则是所有交互在页面内完成，不会触发路由。
+
+const { useToken } = theme;
+
+export interface TtmplTableProps {
+    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; // 卡片展示模式-默认行卡片数量
+    showTableAdd?: boolean; // 是否支持添加列表
+    userPageConfig?: { [key: string]: any }; // 用户自定义页面配置(搜索条件等缓存,多表格模式)
+    setUserPageConfig?: (config: { [key: string]: any }) => void; // 用户自定义页面配置(搜索条件等缓存,多表格模式)
+    hideOnSinglePage?: boolean; // 分页配置,只有一页时是否隐藏分页器
+    bordered?: boolean; // 表格是否显示边框
+    showHeader?: boolean; // 表格是否显示表头
+    ettmplConfig?: EttmplConfig; // 展开树配置
+}
+
+const TtmplTable = (props: TtmplTableProps) => {
+    const {
+        serverKey,
+        sourceId,
+        mainCode,
+        showView: showViewProp,
+        doCustomCreate,
+        doCustomEdit,
+        doSearch: doSearchProp,
+        doRAction: doRActionProp,
+        funcMode,
+        title,
+        tip,
+        collapsible = false,
+        initCollapse = false,
+        readOnly = false,
+        rowOperatable = true,
+        defaultCriteriaValue,
+        defShowType,
+        showPagination = true,
+        showAggregates = true,
+        deleteCallback,
+        loadDataCallback,
+        defRowCardCount,
+        showTableAdd = false,
+        userPageConfig,
+        setUserPageConfig,
+        hideOnSinglePage,
+        bordered,
+        showHeader,
+        ettmplConfig: pEttmplConfig
+    } = props;
+    const { translate } = useContext(LocaleContext);
+    const [ltmplConfigRes, setLtmplConfigRes] = useState<LtmplConfigRes>();
+    const [pageNo, setPageNo] = useState<number>();
+    const [pageSize, setPageSize] = useState<number>();
+    const [criteriaData, setCriteriaData] = useState<object>();
+    const [showDtmplView, setShowDtmplView] = useState<boolean>(false);
+    const [selectedCode, setSelectedCode] = useState<string>();
+    const [showDtmplEdit, setShowDtmplEdit] = useState<boolean>(false);
+    const [showDtmplCustomEdit, setShowDtmplCustomEdit] = useState<boolean>(false);
+    const [showDraw, setShowDraw] = useState<boolean>(false);
+    const [ractionId, setRactionId] = useState<string>();
+    const [collapse, setCollapse] = useState<boolean>(false);
+    const [addTmplId, setAddTmplId] = useState<string>();
+    const [dtmplSourceId, setDtmplSourceId] = useState<string>();
+    const [drawerSize, setDrawerSize] = useState<number | string>("92vw"); // 抽屉组件
+    const [isCopy, setIsCopy] = useState<boolean>(false); // 是否复制
+    const [ettmplConfig, setEttmplConfig] = useState<EttmplConfig>(pEttmplConfig); // 展开树配置
+    const { token } = useToken();
+
+    const toCriteriaData = (values: object) => {
+        let criteriaData = {};
+        if (values) {
+            for (let key in values) {
+                criteriaData[key] = values[key] || values[key] === 0 ? Units.configParamTrans(values[key], null) : undefined;
+            }
+        }
+        criteriaData["sequence"] = Units.getRandomNum(6);
+        return criteriaData;
+    };
+
+    const loadLtmplConfig = async () => {
+        const res: LtmplConfigRes = await HCDataSource.requestLtmplConfig(serverKey, sourceId);
+        if (!pEttmplConfig) {
+            const ettmplConfig_: EttmplConfig = await HCDataSource.requestEttmplConfig(serverKey, sourceId);
+            setEttmplConfig(ettmplConfig_);
+        }
+        let criteriaData_: object;
+        let defCriteriaValue = {};
+        //提取 过滤条件的默认值
+        if (res) {
+            let defaultCriteriaValue_ =
+                res.ltmplConfig?.defaultCriteriaValue;
+            if (defaultCriteriaValue_) {
+                defCriteriaValue = { ...defaultCriteriaValue_ };
+            }
+        }
+        if (defaultCriteriaValue) {
+            defCriteriaValue = { ...defCriteriaValue, ...defaultCriteriaValue };
+        }
+        criteriaData_ = userPageConfig?.criteriaData || toCriteriaData(defCriteriaValue);
+        setLtmplConfigRes(res);
+        setCriteriaData(criteriaData_);
+    };
+
+    // 挂载时若允许折叠，应用初始折叠状态
+    useEffect(() => {
+        if (collapsible) {
+            setCollapse(initCollapse);
+        }
+    }, []);
+
+    useEffect(() => {
+        loadLtmplConfig();
+    }, [sourceId, mainCode]);
+
+    const showView = (showViewParam: ShowViewParam) => {
+        setSelectedCode(showViewParam.code);
+        setDtmplSourceId(showViewParam.dtmplSourceId ? showViewParam.dtmplSourceId : sourceId);
+        setShowDtmplView(true);
+    };
+
+    const doEdit = (param: DoEditParam) => {
+        if (param.toCustomPage) {
+            if (doCustomEdit) {
+                doCustomEdit(param.code, param.mode, () => doSearch(criteriaData));
+            } else {
+                setSelectedCode(param.code);
+                setDtmplSourceId(param.dtmplSourceId ? param.dtmplSourceId : sourceId);
+                setShowDtmplCustomEdit(true);
+                setIsCopy(param.mode === "copy");
+            }
+        } else {
+            setSelectedCode(param.code);
+            setShowDtmplEdit(true);
+            setIsCopy(param.mode === "copy");
+        }
+    };
+
+    const doRAction = (ractionId: string, mainCode: string) => {
+        setSelectedCode(mainCode);
+        setShowDraw(true);
+        setRactionId(ractionId);
+    };
+
+    const doCreate = (addTmplId: string, toCustomPage?: boolean) => {
+        if (toCustomPage) {
+            if (doCustomCreate) {
+                doCustomCreate(() => doSearch(criteriaData));
+            } else {
+                setSelectedCode(null);
+                setShowDtmplCustomEdit(true);
+            }
+        } else {
+            setSelectedCode(null);
+            setShowDtmplEdit(true);
+            setAddTmplId(addTmplId);
+        }
+    };
+
+    const doSearch = (params_?: object) => {
+        let params = { ...(criteriaData || {}), ...params_ };
+        //追加过滤条件，hiddenColIds，innerQueryKey
+        if (mainCode) {
+            params["mainCode"] = mainCode;
+        }
+        params["sourceId"] = sourceId;
+        if (collapsible) {
+            setCollapse(false);
+        }
+        const nextCriteriaData = toCriteriaData(params);
+        setCriteriaData(nextCriteriaData);
+        if (setUserPageConfig) setUserPageConfig({ criteriaData: nextCriteriaData }); // 搜索条件缓存
+    };
+
+    const onChangePage = (pageNo: number, pageSize: number) => {
+        setPageNo(pageNo);
+        setPageSize(pageSize);
+    };
+
+    const handleDtmplEdit = (code: string, isContinueSave?: boolean) => {
+        doSearch(criteriaData);
+        if (isContinueSave) {
+            setSelectedCode(code);
+        } else {
+            setShowDtmplEdit(false);
+        }
+    };
+
+    // 嵌套表格配置
+    const expandedRowRender = (val: { [key: string]: any }) => {
+        const { subNodes, recursiveRatmplId } = ettmplConfig;
+        return <div style={{ marginLeft: "24px", background: token.colorBgContainer }}>
+            {recursiveRatmplId ?
+                <TtmplTable
+                    ettmplConfig={ettmplConfig}
+                    hideOnSinglePage={true}
+                    funcMode="simple"
+                    serverKey={serverKey}
+                    sourceId={ettmplConfig.recursiveRatmplId}
+                    mainCode={val.code}
+                    bordered={false} showHeader={false} /> : ""}
+            {subNodes?.map(item => <div>
+                {subNodes.length > 1 ? <h4 style={{ padding: "12px 0 0 12px" }}>{item.title}</h4> : ""}
+                <TtmplTable
+                    ettmplConfig={item}
+                    hideOnSinglePage={true}
+                    funcMode="simple"
+                    serverKey={serverKey}
+                    sourceId={item.sourceId}
+                    mainCode={val.code}
+                    bordered={false} showHeader={false} />
+            </div>
+            )}
+        </div>;
+    };
+
+
+    if (!ltmplConfigRes) {
+        return <></>;
+    } else {
+        const { buttons, customEditPagePath } = ltmplConfigRes.ltmplConfig;
+        const { recursiveRatmplId, subNodes } = ettmplConfig || {};
+        return (
+            <div className="ttmpl-table">
+                <ActTable operatable={rowOperatable} readOnly={readOnly} tip={tip}
+                    serverKey={serverKey} pageSize={pageSize} pageNo={pageNo}
+                    onChangePage={onChangePage} collapsible={collapsible}
+                    initCollapse={initCollapse && collapse}
+                    title={title} funcMode={funcMode} mainCode={mainCode}
+                    showView={showViewProp ? showViewProp : showView}
+                    doRAction={doRActionProp ? doRActionProp : doRAction}
+                    doSearch={doSearchProp ? doSearchProp : doSearch}
+                    doEdit={doEdit}
+                    doCreate={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}
+                    showTableAdd={showTableAdd}
+                    userPageConfig={userPageConfig}
+                    setUserPageConfig={setUserPageConfig}
+                    hideOnSinglePage={hideOnSinglePage}
+                    bordered={bordered}
+                    showHeader={showHeader}
+                    expandable={(subNodes?.length || recursiveRatmplId) ? { expandedRowRender } : undefined} // 嵌套表格
+                />
+                {buttons.includes("detail") && showDtmplView ? (
+                    <ModalDtmplView
+                        serverKey={serverKey}
+                        open={showDtmplView}
+                        onCancel={() => setShowDtmplView(false)}
+                        mainCode={mainCode}
+                        sourceId={dtmplSourceId ? dtmplSourceId : sourceId}
+                        code={selectedCode}
+                    />
+                ) : ""}
+                {(buttons.includes("dtmplEdit") || buttons.includes("dtmplAdd")) &&
+                    showDtmplEdit ? (
+                    <DtmplEditPage
+                        addTmplId={addTmplId}
+                        serverKey={serverKey}
+                        open={showDtmplEdit}
+                        onCancel={() => setShowDtmplEdit(false)}
+                        sourceId={dtmplSourceId ? dtmplSourceId : sourceId}
+                        mainCode={mainCode}
+                        code={selectedCode}
+                        onOk={handleDtmplEdit}
+                        isCopy={isCopy}
+                    />
+                ) : ""}
+                {showDtmplCustomEdit ? (
+                    <DtmplCustomEditModalPage
+                        serverKey={serverKey}
+                        open={showDtmplCustomEdit}
+                        onOk={() => {
+                            doSearch(criteriaData);
+                            setShowDtmplCustomEdit(false);
+                        }}
+                        customPath={customEditPagePath}
+                        sourceId={sourceId}
+                        mainCode={mainCode}
+                        code={selectedCode}
+                        isCopy={isCopy}
+                    />
+                ) : ""}
+                {showDraw ?
+                    <Drawer
+                        placement={"left"}
+                        title={translate("${关联查询}")}
+                        resizable={{ onResize: (newSize => setDrawerSize(newSize)) }}
+                        size={drawerSize}
+                        closable={true}
+                        mask={false}
+                        onClose={() => setShowDraw(false)}
+                        open={showDraw}
+                        styles={{ body: { minWidth: "720px" } }}
+                        extra={
+                            <Space>
+                                <Button onClick={() => setShowDraw(false)}>{translate("${关闭}")}</Button>
+                            </Space>
+                        }
+                    >
+                        <TtmplTable serverKey={serverKey} sourceId={ractionId} mainCode={selectedCode} />
+                    </Drawer> : null}
+            </div>
+        );
+    }
+};
+
+export default React.memo(TtmplTable);

package/src/aldehyde/routable/index.less

@@ -23,4 +23,10 @@
             padding: 8px 0;
         }
     }
+}
+
+.ttmpl-table-route {
+    .ant-table-expanded-row>.ant-table-cell {
+        padding: 0 8px !important;
+    }
 }