aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/table/select-table.tsx

@@ -1,549 +1,560 @@
-import React from 'react';
-import { Space, Button, Popconfirm, message } from "antd";
-import { DeleteOutlined, EditOutlined, AlignCenterOutlined } from "@ant-design/icons";
-import debounce from "lodash/debounce";
-import "./index.css";
-import { DtmplData, QueryKey, SelectConfig, SelectedRow, ControlBaseProps, LtmplConfig, ActTableMode, RouterCompProps, CustomButtonConfig, CustomButton } from "../tmpl/interface";
-import TableUnits from "./table-util";
-import Units from "../units";
-import SupportInputTypes from '../tmpl/control-type-supportor';
-import HCDataSource from '../tmpl/hc-data-source';
-import HcserviceV3 from "../tmpl/hcservice-v3";
-import QueryTable from './query-table';
-import CriteriaForm from "../form/criteria-form";
-import ViewControl from "../controls/view-control";
-import { LocaleContext } from "../locale/LocaleProvider";
-import DtmplViewDrawer from "../module/dtmpl-view-drawer";
-import DtmplEditPage from "../module/dtmpl-edit-page";
-import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
-import withRouter from "../routable/withroute";
-
-// 弹窗selectTable类型，查询参数不缓存
-const popoverTableTypes = ["table-entity-select", "relation-existion"];
-
-interface SelectTableProps extends ControlBaseProps, RouterCompProps {
-    mainCode?: string,
-    maxSelectedRows?: number,
-    serverKey?: string,
-    sourceId: string,
-    showActions?: boolean,
-    selectedRows: SelectedRow[];
-    selectedDatas?: DtmplData[];
-    funcMode?: ActTableMode;
-    // onCancel: () => void,
-    // onOK: (selectedRows: SelectedRow[]) => void,
-    onChange?: (selectedRows: SelectedRow[], selectedDatas: DtmplData[]) => void;
-    onClosePopover?: () => void; // Popover弹窗中使用SelectTable,弹窗中关闭弹窗
-};
-
-interface SelectTableStat {
-    selectConfig?: SelectConfig;
-    columns?: object[];
-    queryKey?: QueryKey;
-    loading?: boolean;
-    criteriaData?: object;
-    pageNo?: number,
-    pageSize?: number,
-    showView?: boolean;
-    drawCode?: string;
-    showEdit?: boolean;
-    ltmplConfig?: LtmplConfig;
-};
-
-let serial_number = new Date().getTime();
-
-class SelectTable extends React.PureComponent<SelectTableProps, SelectTableStat> {
-    static contextType = LocaleContext;
-    context: React.ContextType<typeof LocaleContext>;
-
-    static defaultProps = {
-        maxSelectedRows: 1000,
-        selectedDatas: [],
-        showActions: false,
-        funcMode: "complete",
-    }
-    state = {
-        selectConfig: undefined,
-        columns: undefined,
-        queryKey: undefined,
-        loading: true,
-        criteriaData: undefined,
-        disableCols: undefined,
-        pageNo: 1,
-        pageSize: undefined,
-        showView: false,
-        drawCode: undefined,
-        showEdit: false,
-        ltmplConfig: undefined,
-    }
-
-    loadData = async (selectConfig: SelectConfig, criteriaData: { [key: string]: any }, npageNo?: number) => {
-        this.setState({ loading: true });
-        const { mainCode, serverKey, sourceId, fieldConfig } = this.props;
-        const baseCriteria = fieldConfig.baseCriteria || {};
-        const { pageNo, pageSize } = this.state;
-        const { defaultPageSize } = selectConfig;
-        let pageInfo = {
-            pageNo: npageNo || criteriaData?.pageNo || pageNo,
-            pageSize: criteriaData?.pageSize || pageSize || defaultPageSize || 10,
-            virtualEndPageNo: undefined,
-        }
-        /** 构建 dataSource **/
-        //构建过滤条件
-        let queryKey: QueryKey = await HcserviceV3.requestLtmplQueryKey(serverKey, sourceId, { ...criteriaData, ...baseCriteria, ...pageInfo, mainCode });
-        this.setState({
-            pageNo: pageInfo.pageNo,
-            queryKey,
-            criteriaData,
-            // loading: false,
-        });
-    }
-
-    // 判断是否为弹出表格
-    getIsPopoverTable = () => {
-        const { fieldConfig } = this.props;
-        return !popoverTableTypes.includes(fieldConfig.controlType || fieldConfig.extControlType)
-    }
-
-    async componentDidMount() {
-        const { location } = this.props;
-        let criteriaData = {};
-        const ltmplConfig = await this.loadConfig();
-        if (this.getIsPopoverTable()) {
-            criteriaData = Units.transQueryStrToParams(location.search, ltmplConfig);
-        }
-        await this.loadData(ltmplConfig, criteriaData || {});
-    }
-
-    loadConfig = async () => {
-        const { translate } = this.context;
-        const { sourceId, serverKey, showActions, fieldConfig } = this.props;
-        const actions = fieldConfig.actions;
-        this.setState({ loading: true });
-        let { ltmplConfig: selectConfig } = await HCDataSource.requestLtmplConfig(serverKey, sourceId) || {};
-        /** 构建column **/
-        let columns = [];
-        let s = 0;
-        selectConfig.columns.forEach((item) => {
-            let column = {};
-            column['dataIndex'] = item.id;
-            column["title"] = translate("${" + item.title + "}");
-            column["width"] = item.colWidth ? item.colWidth : 160;
-            column["align"] = item.valueAlign ? item.valueAlign : "left";
-            column["hidden"] = item.hidden;
-            s++;
-            let itemType = SupportInputTypes.getSupportControlType(item);
-            if (s < 12 && item.sortable) {
-                TableUnits.sort(column, itemType);
-            }
-            //特殊列处理
-            if (item.title === "序号") {
-                column["width"] = item.colWidth ? item.colWidth : 50;
-                column["align"] = item.valueAlign ? item.valueAlign : "center";
-                column['render'] = (text, record, index) => (<label>{index + 1}</label>);
-                column['sorter'] = undefined;
-            } else {
-                if (item.title === "操作" && actions) {
-                    column['render'] = (text, record) => {
-                        const actionButtons = [];
-                        if (actions.includes("detail")) {
-                            actionButtons.push(
-                                <Button
-                                    size="small"
-                                    type="primary"
-                                    icon={<AlignCenterOutlined />}
-                                    onClick={() => this.showItem(record.code)}
-                                />
-                            );
-                        }
-                        if (actions.includes("edit")) {
-                            actionButtons.push(<Button
-                                size="small"
-                                type="dashed"
-                                icon={<EditOutlined />}
-                                onClick={() => this.editItem(record.code)}
-                            />);
-                        }
-                        if (actions.includes("delete")) {
-                            actionButtons.push(<Popconfirm
-                                placement="rightBottom"
-                                title={translate("${确定要[删除]此数据吗}?")}
-                                onConfirm={() => this.doDeleteByCode(record.code)}
-                                okText={translate("${确定}")}
-                                cancelText={translate("${取消}")}
-                                okType={"danger"}
-                            >
-                                <Button size="small" type="dashed" danger>
-                                    <DeleteOutlined />
-                                </Button>
-                            </Popconfirm>);
-                        }
-                        return <Space size={[0, 4]} wrap>{actionButtons}</Space>;
-                    }
-                } else {
-                    column["ellipsis"] = { showTitle: true };
-                    column['render'] = (text, record) => <ViewControl serverKey={serverKey} holderType={'table'} fieldConfig={item} value={record[item.id]} />;
-                }
-            }
-            const isAction = actions?.some(r => ["detail", "edit", "delete"].includes(r));
-            if (item.title !== "操作" || (item.title === "操作" && showActions && isAction)) {
-                columns.push(column);
-            }
-        });
-        this.setState({
-            columns,
-            selectConfig,
-            loading: false,
-        });
-        return selectConfig;
-    }
-
-    async componentDidUpdate(prevProps) {
-        const { selectConfig, criteriaData, queryKey, loading } = this.state;
-        let config = selectConfig;
-        if (!config) {
-            config = await this.loadConfig();
-        }
-        if (!queryKey && !loading) {
-            await this.loadData(config, criteriaData);
-        }
-    }
-
-    getMenuId = () => {
-        const { searchParams } = this.props;
-        let menuId = searchParams.get("menuId");
-        return menuId;
-    };
-
-    doSearch = async (params_) => {
-        const { location } = this.props;
-        const { selectConfig, criteriaData } = this.state;
-        let params = { ...criteriaData, ...params_, pageNo: 1, };
-        if (this.getIsPopoverTable()) {
-            // 自定义页面中使用组件选择表格，查询条件缓存在url中
-            const menuId = this.getMenuId();
-            const newfliter = Units.transQueryParamsToStr({ ...params, menuId, sourceId: menuId });
-            this.props.navigate(`${location.pathname}?${newfliter}`, { replace: true });
-        }
-        await this.loadData(selectConfig, params, 1);
-    }
-
-    // handleOk = () => {
-    //     this.props.onOK(this.state.selectedRows);
-    //     this.setState({
-    //         selectedRows: [],
-    //         queryKey: undefined,
-    //     })
-    // }
-
-    // handleCancel = () => {
-    //     this.setState({
-    //         // selectedRows: [],//暂不置空
-    //         queryKey: undefined,
-    //     })
-    //     this.props.onCancel();
-    //
-    // }
-
-    changeRowSelection = (selectedRows_: SelectedRow[], selectedDatas_: DtmplData[], allRowKeys?: string[]) => {
-        //console.log('changeRowSelection:', allRowKeys);
-        let selectedRows_new: SelectedRow[];
-        let selectedDatas_new: DtmplData[] = [];
-        const { selectedRows, selectedDatas, onChange, maxSelectedRows } = this.props;
-        if (allRowKeys) {
-            let selectedKeys = [];
-            let selectedRows_1: SelectedRow[] = [];
-            if (maxSelectedRows != 1) {
-                selectedRows_1.push(...selectedRows);
-            }
-            //先追加
-            let contains: boolean = false;
-            for (let s1 of selectedRows_) {
-                contains = false;
-                for (let s2 of selectedRows_1) {
-                    if (s1.code == s2.code) {
-                        contains = true;
-                    }
-                }
-                if (!contains) {
-                    selectedRows_1.push(s1);
-                }
-                selectedKeys.push(s1.code);
-            }
-            //再删除
-            let selectedRows_2: SelectedRow[] = [];
-            selectedRows_2.push(...selectedRows_1);
-            for (let row of selectedRows_1) {
-                if (allRowKeys.includes(row.code) && !selectedKeys.includes(row.code)) {
-                    for (let i in selectedRows_2) {
-                        let s = selectedRows_2[i];
-                        if (s.code == row.code) {
-                            selectedRows_2.splice(Number(i), 1);
-                        }
-                    }
-                }
-            }
-            selectedRows_new = selectedRows_2;
-        } else {
-            selectedRows_new = selectedRows_;
-        }
-        let selectedDatas_1: DtmplData[] = [...selectedDatas, ...selectedDatas_];
-        for (let s of selectedRows_new) {
-            for (let d of selectedDatas_1) {
-                if (d.code == s.code) {
-                    selectedDatas_new.push(d);
-                }
-            }
-        }
-        onChange(selectedRows_new, selectedDatas_new);
-    }
-
-    onChangePage = (pageNo, pageSize) => {
-        const { location } = this.props;
-        const { criteriaData } = this.state;
-        if (this.getIsPopoverTable()) {
-            const menuId = this.getMenuId();
-            const newfliter = Units.transQueryParamsToStr({ ...criteriaData, pageNo, pageSize, menuId, sourceId: menuId });
-            this.props.navigate(`${location.pathname}?${newfliter}`, { replace: true });
-        }
-        this.setState({ pageNo, pageSize });
-    }
-
-    loadLtmplConfig = async () => {
-        const { sourceId, serverKey } = this.props;
-        const { ltmplConfig } = this.state;
-        let ltmplConfig_ = ltmplConfig;
-        if (!ltmplConfig_) {
-            ltmplConfig_ = (await HCDataSource.requestLtmplConfig(serverKey, sourceId))?.ltmplConfig;
-        }
-        this.setState({ ltmplConfig: ltmplConfig_ });
-        return ltmplConfig_;
-    };
-
-    doClose = () => {
-        this.setState({
-            drawCode: undefined,
-            showEdit: false,
-            showView: false,
-        });
-    };
-
-    drawSubmited = (code?: string, isContinueSave?: boolean) => {
-        if (isContinueSave) {
-            this.setState({ drawCode: code });
-        } else {
-            this.doClose();
-        }
-        debounce(() => this.loadData(this.state.selectConfig, {}), 100)();
-    };
-
-    showItem = async (code) => {
-        let ltmplConfig = await this.loadLtmplConfig();
-        this.setState({
-            showEdit: false,
-            showView: true,
-            drawCode: code,
-            ltmplConfig,
-        });
-    };
-
-    editItem = async (code?) => {
-        let ltmplConfig = await this.loadLtmplConfig();
-        this.setState({
-            showEdit: true,
-            showView: false,
-            drawCode: code,
-            ltmplConfig,
-        });
-    };
-
-    doDeleteByCode = async (code: string) => {
-        const { sourceId, serverKey, mainCode } = this.props;
-        this.setState({ loading: true });
-        let result: boolean = await HcserviceV3.deleteByCode(
-            serverKey,
-            sourceId,
-            [code],
-            mainCode
-        );
-        if (result) {  //重新加载数据
-            this.loadData(this.state.selectConfig, {});
-        } else {
-            this.setState({ loading: false });
-        }
-    };
-
-    doSelectedAction = async (actionId: string, codes, params: object) => {
-        const { selectedRows } = this.props;
-        this.doAction(actionId, selectedRows, params);
-    };
-
-    doAction = async (actionId: string, selectedRows: SelectedRow[], params) => {
-        const { serverKey } = this.props;
-        const { selectConfig, criteriaData } = this.state;
-        this.setState({ loading: true });
-        let result: boolean = await HcserviceV3.postActions(serverKey, actionId, selectedRows, params);
-        if (result) {
-            //重新加载数据
-            await this.loadData(selectConfig, criteriaData);
-        } else {
-            this.setState({ loading: false });
-        }
-    };
-
-    buttonClickable = () => {
-        let new_serial_number = new Date().getTime();
-        if (new_serial_number - serial_number > 1500) {
-            serial_number = new_serial_number;
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    // 自由按钮事件
-    doCustomButton = async (customButton: CustomButton, records: DtmplData[]) => {
-        if (customButton?.onClick) {
-            customButton.onClick();
-            return;
-        }
-        if (!this.buttonClickable()) {
-            return;
-        }
-        const { serverKey } = this.props;
-        let doType = customButton.doType;
-        let config: CustomButtonConfig = Units.getCustomButtonConfig(customButton.id);
-        if ("request_refresh" == doType) {
-            if (config && config.doAction) {
-                await config.doAction(customButton, records);
-            } else if (config && config.getRequestUrl) {
-                let url = await config.getRequestUrl(customButton, records);
-                await HcserviceV3.doPostRequest(serverKey, url);
-            } else if (customButton.path) {
-                let codes = [];
-                let res = undefined;
-                if (records != null) {
-                    records.forEach(item => {
-                        codes.push(item.code)
-                    })
-                }
-                if (customButton.requestMethod === "get") {
-                    res = await HcserviceV3.doGetRequest(serverKey, customButton.path, { codes });
-                } else {
-                    res = await HcserviceV3.doPostRequest(serverKey, customButton.path, { codes });
-                }
-                if (res?.msg || res?.message) {
-                    message.info(res.msg || res.message);
-                }
-            } else {
-                message.error("Button Config Error");
-                return;
-            }
-            this.doSearch({ serial_number });
-        } else {
-            message.error("Unsuport Button dotype " + doType);
-        }
-    };
-
-
-    render() {
-        let { maxSelectedRows, selectedRows, selectedDatas, serverKey, sourceId, mainCode, fieldConfig, funcMode, onClosePopover } = this.props;
-        let { queryKey, columns, selectConfig, criteriaData, loading, pageNo, pageSize, showView, drawCode, showEdit, ltmplConfig } = this.state;
-        const { translate } = this.context;
-        if (!selectConfig) {
-            return <>
-            </>
-        }
-        let { actions } = fieldConfig;
-        let { buttons, criterias, jumps, fileExports } = selectConfig;
-        let displayCriteriaCard: boolean = true;
-        if (funcMode == "simple" || funcMode == "common") {
-            displayCriteriaCard = false;
-        } else if (buttons.includes('batchDelete') || (buttons.includes('query') && criterias && criterias.length > 0) ||
-            (actions && actions.length > 0) || (jumps && jumps.length > 0) || (fileExports && fileExports.length > 0)) {
-            displayCriteriaCard = true;
-        }
-
-        const addAction = actions?.includes("add") ? [{ id: "add", buttonType: 'primary', title: translate("${添加}"), defDisabled: false, onClick: () => { this.editItem() } }] : [];
-        const closePopover = onClosePopover ? [{ id: "closePopover", buttonType: 'primary', title: translate("${确认}"), defDisabled: false, onClick: () => onClosePopover() }] : [];
-
-        // debugger
-        return (
-            // <Card
-            //     // title={<SelectedRowsCard value={selectedRows} onChange={this.changeRowSelection}></SelectedRowsCard>}
-            //     style={{width: 1100,maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'}}
-            //     // onOk={this.handleOk}
-            // >
-            <div className="actTable"
-            // style={{width: 1100,maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)',overflow:'auto'}}
-            >
-                {displayCriteriaCard ?
-                    <div style={{ position: 'relative' }}>
-                        <CriteriaForm
-                            key={"CriteriaForm" + sourceId}
-                            serverKey={serverKey}
-                            selectedRows={selectedRows}
-                            selectedDatas={selectedDatas}
-                            ltmplConfig={{ ...selectConfig, customButtons: [...(selectConfig.customButtons || []), ...addAction, ...closePopover] }}
-                            data={criteriaData}
-                            doSearch={this.doSearch} loading={loading}
-                            doCustomButton={this.doCustomButton}
-                            doAction={this.doSelectedAction}
-                        />
-                    </div> : null}
-                <QueryTable key={"QueryTable" + sourceId} serverKey={serverKey} maxSelectedRows={maxSelectedRows ? maxSelectedRows : selectConfig.maxSelectedRows}
-                    selectedRows={selectedRows}
-                    primaryColumn={selectConfig.primaryColumn}
-                    columns={columns}
-                    pageInfo={{
-                        pageNo,
-                        pageSize: pageSize ? pageSize : selectConfig.defaultPageSize
-                    }}
-                    onChangePage={this.onChangePage}
-                    queryKey={queryKey}
-                    onChangeRowSelection={this.changeRowSelection}
-                    sortColumnData={[]}
-                    doSearch={this.doSearch}
-                    loadDataCallback={() => this.setState({ loading: false })}
-                />
-                {showView && drawCode ? (
-                    <DtmplViewDrawer
-                        serverKey={serverKey}
-                        placement={"left"}
-                        onClose={this.doClose}
-                        open={showView}
-                        sourceId={sourceId}
-                        code={drawCode}
-                    />
-                ) : null}
-                {showEdit && ltmplConfig ? (
-                    ltmplConfig.customEditPagePath ? (
-                        <DtmplCustomEditModalPage
-                            open={showEdit}
-                            onOk={this.drawSubmited}
-                            customPath={ltmplConfig.customEditPagePath}
-                            sourceId={sourceId}
-                            mainCode={mainCode}
-                            code={drawCode}
-                        />
-                    ) : (
-                        <DtmplEditPage
-                            defaultDtmplData={fieldConfig.defaultDtmplData}
-                            serverKey={serverKey}
-                            pageType={"modal"}
-                            open={showEdit}
-                            onCancel={this.doClose}
-                            mainCode={mainCode}
-                            sourceId={sourceId}
-                            code={drawCode}
-                            onOk={this.drawSubmited}
-                        />
-                    )
-                ) : null}
-            </div>
-            // </Card>
-        );
-    }
-}
-
+import React from 'react';
+import { Space, Button, Popconfirm, message } from "antd";
+import { DeleteOutlined, EditOutlined, AlignCenterOutlined } from "@ant-design/icons";
+import debounce from "lodash/debounce";
+import "./index.css";
+import { DtmplData, QueryKey, SelectConfig, SelectedRow, ControlBaseProps, LtmplConfig, ActTableMode, RouterCompProps, CustomButtonConfig, CustomButton } from "../tmpl/interface";
+import TableUnits from "./table-util";
+import Units from "../units";
+import SupportInputTypes from '../tmpl/control-type-supportor';
+import HCDataSource from '../tmpl/hc-data-source';
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import QueryTable from './query-table';
+import CriteriaForm from "../form/criteria-form";
+import ViewControl from "../controls/view-control";
+import { LocaleContext } from "../locale/LocaleProvider";
+import DtmplViewDrawer from "../module/dtmpl-view-drawer";
+import DtmplEditPage from "../module/dtmpl-edit-page";
+import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-page";
+import withRouter from "../routable/withroute";
+
+// 弹窗selectTable类型，查询参数不缓存
+const popoverTableTypes = ["table-entity-select", "relation-existion"];
+
+interface SelectTableProps extends ControlBaseProps, RouterCompProps {
+    mainCode?: string,
+    maxSelectedRows?: number,
+    serverKey?: string,
+    sourceId: string,
+    showActions?: boolean,
+    selectedRows: SelectedRow[];
+    selectedDatas?: DtmplData[];
+    funcMode?: ActTableMode;
+    // onCancel: () => void,
+    // onOK: (selectedRows: SelectedRow[]) => void,
+    onChange?: (selectedRows: SelectedRow[], selectedDatas: DtmplData[]) => void;
+    onClosePopover?: () => void; // Popover弹窗中使用SelectTable,弹窗中关闭弹窗
+};
+
+interface SelectTableStat {
+    selectConfig?: SelectConfig;
+    columns?: object[];
+    queryKey?: QueryKey;
+    loading?: boolean;
+    criteriaData?: object;
+    pageNo?: number,
+    pageSize?: number,
+    showView?: boolean;
+    drawCode?: string;
+    showEdit?: boolean;
+    ltmplConfig?: LtmplConfig;
+};
+
+let serial_number = new Date().getTime();
+
+class SelectTable extends React.PureComponent<SelectTableProps, SelectTableStat> {
+    static contextType = LocaleContext;
+    context: React.ContextType<typeof LocaleContext>;
+
+    static defaultProps = {
+        maxSelectedRows: 1000,
+        selectedDatas: [],
+        showActions: false,
+        funcMode: "complete",
+    }
+    state = {
+        selectConfig: undefined,
+        columns: undefined,
+        queryKey: undefined,
+        loading: true,
+        criteriaData: undefined,
+        disableCols: undefined,
+        pageNo: 1,
+        pageSize: undefined,
+        showView: false,
+        drawCode: undefined,
+        showEdit: false,
+        ltmplConfig: undefined,
+    }
+
+    loadData = async (selectConfig: SelectConfig, criteriaData: { [key: string]: any }, npageNo?: number) => {
+        this.setState({ loading: true });
+        const { mainCode, serverKey, sourceId, fieldConfig } = this.props;
+        const baseCriteria = fieldConfig.baseCriteria || {};
+        const { pageNo, pageSize } = this.state;
+        const { defaultPageSize } = selectConfig;
+        let pageInfo = {
+            pageNo: npageNo || criteriaData?.pageNo || pageNo,
+            pageSize: criteriaData?.pageSize || pageSize || defaultPageSize || 10,
+            virtualEndPageNo: undefined,
+        }
+        /** 构建 dataSource **/
+        //构建过滤条件
+        let queryKey: QueryKey = await HcserviceV3.requestLtmplQueryKey(serverKey, sourceId, { ...criteriaData, ...baseCriteria, ...pageInfo, mainCode });
+        this.setState({
+            pageNo: pageInfo.pageNo,
+            queryKey,
+            criteriaData,
+            // loading: false,
+        });
+    }
+
+    // 判断是否为弹出表格
+    getIsPopoverTable = () => {
+        const { fieldConfig } = this.props;
+        return !popoverTableTypes.includes(fieldConfig.controlType || fieldConfig.extControlType)
+    }
+
+    async componentDidMount() {
+        const { location, navigate } = this.props;
+        let criteriaData = {};
+        let search = location.search;
+        const ltmplConfig = await this.loadConfig();
+        if (this.getIsPopoverTable()) {
+            const defSearch = ltmplConfig.criteria?.map(r => r.defaultValue ? `c_${r.id}=${r.defaultValue}` : false)?.filter(Boolean)?.join("&");
+            // 自定义页面中使用组件选择表格，设置默认查询条件（当前search只有menuId：页面初始化）
+            if (defSearch) {
+                const params = new URLSearchParams(search);
+                const keys = Array.from(params.keys());
+                if (!keys.length || (keys.length === 1 && keys[0] === 'menuId')) { // 当前路由参数只有menuId且配置存在默认查询条件
+                    search = !keys.length ? `?${defSearch}` : `${location.pathname}${location.search}&${defSearch}`
+                    navigate(search, { replace: true });
+                }
+            }
+            criteriaData = Units.transQueryStrToParams(search, ltmplConfig);
+        }
+        await this.loadData(ltmplConfig, criteriaData || {});
+    }
+
+    loadConfig = async () => {
+        const { translate } = this.context;
+        const { sourceId, serverKey, showActions, fieldConfig } = this.props;
+        const actions = fieldConfig.actions;
+        this.setState({ loading: true });
+        let { ltmplConfig: selectConfig } = await HCDataSource.requestLtmplConfig(serverKey, sourceId) || {};
+        /** 构建column **/
+        let columns = [];
+        let s = 0;
+        selectConfig.columns.forEach((item) => {
+            let column = {};
+            column['dataIndex'] = item.id;
+            column["title"] = translate("${" + item.title + "}");
+            column["width"] = item.colWidth ? item.colWidth : 160;
+            column["align"] = item.valueAlign ? item.valueAlign : "left";
+            column["hidden"] = item.hidden;
+            s++;
+            let itemType = SupportInputTypes.getSupportControlType(item);
+            if (s < 12 && item.sortable) {
+                TableUnits.sort(column, itemType);
+            }
+            //特殊列处理
+            if (item.title === "序号") {
+                column["width"] = item.colWidth ? item.colWidth : 50;
+                column["align"] = item.valueAlign ? item.valueAlign : "center";
+                column['render'] = (text, record, index) => (<label>{index + 1}</label>);
+                column['sorter'] = undefined;
+            } else {
+                if (item.title === "操作" && actions) {
+                    column['render'] = (text, record) => {
+                        const actionButtons = [];
+                        if (actions.includes("detail")) {
+                            actionButtons.push(
+                                <Button
+                                    size="small"
+                                    type="primary"
+                                    icon={<AlignCenterOutlined />}
+                                    onClick={() => this.showItem(record.code)}
+                                />
+                            );
+                        }
+                        if (actions.includes("edit")) {
+                            actionButtons.push(<Button
+                                size="small"
+                                type="dashed"
+                                icon={<EditOutlined />}
+                                onClick={() => this.editItem(record.code)}
+                            />);
+                        }
+                        if (actions.includes("delete")) {
+                            actionButtons.push(<Popconfirm
+                                placement="rightBottom"
+                                title={translate("${确定要[删除]此数据吗}?")}
+                                onConfirm={() => this.doDeleteByCode(record.code)}
+                                okText={translate("${确定}")}
+                                cancelText={translate("${取消}")}
+                                okType={"danger"}
+                            >
+                                <Button size="small" type="dashed" danger>
+                                    <DeleteOutlined />
+                                </Button>
+                            </Popconfirm>);
+                        }
+                        return <Space size={[0, 4]} wrap>{actionButtons}</Space>;
+                    }
+                } else {
+                    column["ellipsis"] = { showTitle: true };
+                    column['render'] = (text, record) => <ViewControl serverKey={serverKey} holderType={'table'} fieldConfig={item} value={record[item.id]} />;
+                }
+            }
+            const isAction = actions?.some(r => ["detail", "edit", "delete"].includes(r));
+            if (item.title !== "操作" || (item.title === "操作" && showActions && isAction)) {
+                columns.push(column);
+            }
+        });
+        this.setState({
+            columns,
+            selectConfig,
+            loading: false,
+        });
+        return selectConfig;
+    }
+
+    async componentDidUpdate(prevProps) {
+        const { selectConfig, criteriaData, queryKey, loading } = this.state;
+        let config = selectConfig;
+        if (!config) {
+            config = await this.loadConfig();
+        }
+        if (!queryKey && !loading) {
+            await this.loadData(config, criteriaData);
+        }
+    }
+
+    getMenuId = () => {
+        const { searchParams } = this.props;
+        let menuId = searchParams.get("menuId");
+        return menuId;
+    };
+
+    doSearch = async (params_) => {
+        const { location } = this.props;
+        const { selectConfig, criteriaData } = this.state;
+        let params = { ...criteriaData, ...params_, pageNo: 1, };
+        if (this.getIsPopoverTable()) {
+            // 自定义页面中使用组件选择表格，查询条件缓存在url中
+            const menuId = this.getMenuId();
+            const newfliter = Units.transQueryParamsToStr({ ...params, menuId, sourceId: menuId });
+            this.props.navigate(`${location.pathname}?${newfliter}`, { replace: true });
+        }
+        await this.loadData(selectConfig, params, 1);
+    }
+
+    // handleOk = () => {
+    //     this.props.onOK(this.state.selectedRows);
+    //     this.setState({
+    //         selectedRows: [],
+    //         queryKey: undefined,
+    //     })
+    // }
+
+    // handleCancel = () => {
+    //     this.setState({
+    //         // selectedRows: [],//暂不置空
+    //         queryKey: undefined,
+    //     })
+    //     this.props.onCancel();
+    //
+    // }
+
+    changeRowSelection = (selectedRows_: SelectedRow[], selectedDatas_: DtmplData[], allRowKeys?: string[]) => {
+        //console.log('changeRowSelection:', allRowKeys);
+        let selectedRows_new: SelectedRow[];
+        let selectedDatas_new: DtmplData[] = [];
+        const { selectedRows, selectedDatas, onChange, maxSelectedRows } = this.props;
+        if (allRowKeys) {
+            let selectedKeys = [];
+            let selectedRows_1: SelectedRow[] = [];
+            if (maxSelectedRows != 1) {
+                selectedRows_1.push(...selectedRows);
+            }
+            //先追加
+            let contains: boolean = false;
+            for (let s1 of selectedRows_) {
+                contains = false;
+                for (let s2 of selectedRows_1) {
+                    if (s1.code == s2.code) {
+                        contains = true;
+                    }
+                }
+                if (!contains) {
+                    selectedRows_1.push(s1);
+                }
+                selectedKeys.push(s1.code);
+            }
+            //再删除
+            let selectedRows_2: SelectedRow[] = [];
+            selectedRows_2.push(...selectedRows_1);
+            for (let row of selectedRows_1) {
+                if (allRowKeys.includes(row.code) && !selectedKeys.includes(row.code)) {
+                    for (let i in selectedRows_2) {
+                        let s = selectedRows_2[i];
+                        if (s.code == row.code) {
+                            selectedRows_2.splice(Number(i), 1);
+                        }
+                    }
+                }
+            }
+            selectedRows_new = selectedRows_2;
+        } else {
+            selectedRows_new = selectedRows_;
+        }
+        let selectedDatas_1: DtmplData[] = [...selectedDatas, ...selectedDatas_];
+        for (let s of selectedRows_new) {
+            for (let d of selectedDatas_1) {
+                if (d.code == s.code) {
+                    selectedDatas_new.push(d);
+                }
+            }
+        }
+        onChange(selectedRows_new, selectedDatas_new);
+    }
+
+    onChangePage = (pageNo, pageSize) => {
+        const { location } = this.props;
+        const { criteriaData } = this.state;
+        if (this.getIsPopoverTable()) {
+            const menuId = this.getMenuId();
+            const newfliter = Units.transQueryParamsToStr({ ...criteriaData, pageNo, pageSize, menuId, sourceId: menuId });
+            this.props.navigate(`${location.pathname}?${newfliter}`, { replace: true });
+        }
+        this.setState({ pageNo, pageSize });
+    }
+
+    loadLtmplConfig = async () => {
+        const { sourceId, serverKey } = this.props;
+        const { ltmplConfig } = this.state;
+        let ltmplConfig_ = ltmplConfig;
+        if (!ltmplConfig_) {
+            ltmplConfig_ = (await HCDataSource.requestLtmplConfig(serverKey, sourceId))?.ltmplConfig;
+        }
+        this.setState({ ltmplConfig: ltmplConfig_ });
+        return ltmplConfig_;
+    };
+
+    doClose = () => {
+        this.setState({
+            drawCode: undefined,
+            showEdit: false,
+            showView: false,
+        });
+    };
+
+    drawSubmited = (code?: string, isContinueSave?: boolean) => {
+        if (isContinueSave) {
+            this.setState({ drawCode: code });
+        } else {
+            this.doClose();
+        }
+        debounce(() => this.loadData(this.state.selectConfig, {}), 100)();
+    };
+
+    showItem = async (code) => {
+        let ltmplConfig = await this.loadLtmplConfig();
+        this.setState({
+            showEdit: false,
+            showView: true,
+            drawCode: code,
+            ltmplConfig,
+        });
+    };
+
+    editItem = async (code?) => {
+        let ltmplConfig = await this.loadLtmplConfig();
+        this.setState({
+            showEdit: true,
+            showView: false,
+            drawCode: code,
+            ltmplConfig,
+        });
+    };
+
+    doDeleteByCode = async (code: string) => {
+        const { sourceId, serverKey, mainCode } = this.props;
+        this.setState({ loading: true });
+        let result: boolean = await HcserviceV3.deleteByCode(
+            serverKey,
+            sourceId,
+            [code],
+            mainCode
+        );
+        if (result) {  //重新加载数据
+            this.loadData(this.state.selectConfig, {});
+        } else {
+            this.setState({ loading: false });
+        }
+    };
+
+    doSelectedAction = async (actionId: string, codes, params: object) => {
+        const { selectedRows } = this.props;
+        this.doAction(actionId, selectedRows, params);
+    };
+
+    doAction = async (actionId: string, selectedRows: SelectedRow[], params) => {
+        const { serverKey } = this.props;
+        const { selectConfig, criteriaData } = this.state;
+        this.setState({ loading: true });
+        let result: boolean = await HcserviceV3.postActions(serverKey, actionId, selectedRows, params);
+        if (result) {
+            //重新加载数据
+            await this.loadData(selectConfig, criteriaData);
+        } else {
+            this.setState({ loading: false });
+        }
+    };
+
+    buttonClickable = () => {
+        let new_serial_number = new Date().getTime();
+        if (new_serial_number - serial_number > 1500) {
+            serial_number = new_serial_number;
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    // 自由按钮事件
+    doCustomButton = async (customButton: CustomButton, records: DtmplData[]) => {
+        if (customButton?.onClick) {
+            customButton.onClick();
+            return;
+        }
+        if (!this.buttonClickable()) {
+            return;
+        }
+        const { serverKey } = this.props;
+        let doType = customButton.doType;
+        let config: CustomButtonConfig = Units.getCustomButtonConfig(customButton.id);
+        if ("request_refresh" == doType) {
+            if (config && config.doAction) {
+                await config.doAction(customButton, records);
+            } else if (config && config.getRequestUrl) {
+                let url = await config.getRequestUrl(customButton, records);
+                await HcserviceV3.doPostRequest(serverKey, url);
+            } else if (customButton.path) {
+                let codes = [];
+                let res = undefined;
+                if (records != null) {
+                    records.forEach(item => {
+                        codes.push(item.code)
+                    })
+                }
+                if (customButton.requestMethod === "get") {
+                    res = await HcserviceV3.doGetRequest(serverKey, customButton.path, { codes });
+                } else {
+                    res = await HcserviceV3.doPostRequest(serverKey, customButton.path, { codes });
+                }
+                if (res?.msg || res?.message) {
+                    message.info(res.msg || res.message);
+                }
+            } else {
+                message.error("Button Config Error");
+                return;
+            }
+            this.doSearch({ serial_number });
+        } else {
+            message.error("Unsuport Button dotype " + doType);
+        }
+    };
+
+
+    render() {
+        let { maxSelectedRows, selectedRows, selectedDatas, serverKey, sourceId, mainCode, fieldConfig, funcMode, onClosePopover } = this.props;
+        let { queryKey, columns, selectConfig, criteriaData, loading, pageNo, pageSize, showView, drawCode, showEdit, ltmplConfig } = this.state;
+        const { translate } = this.context;
+        if (!selectConfig) {
+            return <>
+            </>
+        }
+        let { actions } = fieldConfig;
+        let { buttons, criteria, jumps, fileExports } = selectConfig;
+        let displayCriteriaCard: boolean = true;
+        if (funcMode == "simple" || funcMode == "common") {
+            displayCriteriaCard = false;
+        } else if (buttons.includes('batchDelete') || (buttons.includes('query') && criteria && criteria.length > 0) ||
+            (actions && actions.length > 0) || (jumps && jumps.length > 0) || (fileExports && fileExports.length > 0)) {
+            displayCriteriaCard = true;
+        }
+
+        const addAction = actions?.includes("add") ? [{ id: "add", buttonType: 'primary', title: translate("${添加}"), defDisabled: false, onClick: () => { this.editItem() } }] : [];
+        const closePopover = onClosePopover ? [{ id: "closePopover", buttonType: 'primary', title: translate("${确认}"), defDisabled: false, onClick: () => onClosePopover() }] : [];
+
+        // debugger
+        return (
+            // <Card
+            //     // title={<SelectedRowsCard value={selectedRows} onChange={this.changeRowSelection}></SelectedRowsCard>}
+            //     style={{width: 1100,maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'}}
+            //     // onOk={this.handleOk}
+            // >
+            <div className="actTable"
+            // style={{width: 1100,maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)',overflow:'auto'}}
+            >
+                {displayCriteriaCard ?
+                    <div style={{ position: 'relative' }}>
+                        <CriteriaForm
+                            key={"CriteriaForm" + sourceId}
+                            serverKey={serverKey}
+                            selectedRows={selectedRows}
+                            selectedDatas={selectedDatas}
+                            ltmplConfig={{ ...selectConfig, customButtons: [...(selectConfig.customButtons || []), ...addAction, ...closePopover] }}
+                            data={criteriaData}
+                            doSearch={this.doSearch} loading={loading}
+                            doCustomButton={this.doCustomButton}
+                            doAction={this.doSelectedAction}
+                        />
+                    </div> : null}
+                <QueryTable key={"QueryTable" + sourceId} serverKey={serverKey} maxSelectedRows={maxSelectedRows ? maxSelectedRows : selectConfig.maxSelectedRows}
+                    selectedRows={selectedRows}
+                    primaryColumn={selectConfig.primaryColumn}
+                    columns={columns}
+                    pageInfo={{
+                        pageNo,
+                        pageSize: pageSize ? pageSize : selectConfig.defaultPageSize
+                    }}
+                    onChangePage={this.onChangePage}
+                    queryKey={queryKey}
+                    onChangeRowSelection={this.changeRowSelection}
+                    sortColumnData={[]}
+                    doSearch={this.doSearch}
+                    loadDataCallback={() => this.setState({ loading: false })}
+                />
+                {showView && drawCode ? (
+                    <DtmplViewDrawer
+                        serverKey={serverKey}
+                        placement={"left"}
+                        onClose={this.doClose}
+                        open={showView}
+                        sourceId={sourceId}
+                        code={drawCode}
+                    />
+                ) : null}
+                {showEdit && ltmplConfig ? (
+                    ltmplConfig.customEditPagePath ? (
+                        <DtmplCustomEditModalPage
+                            open={showEdit}
+                            onOk={this.drawSubmited}
+                            customPath={ltmplConfig.customEditPagePath}
+                            sourceId={sourceId}
+                            mainCode={mainCode}
+                            code={drawCode}
+                        />
+                    ) : (
+                        <DtmplEditPage
+                            defaultDtmplData={fieldConfig.defaultDtmplData}
+                            serverKey={serverKey}
+                            pageType={"modal"}
+                            open={showEdit}
+                            onCancel={this.doClose}
+                            mainCode={mainCode}
+                            sourceId={sourceId}
+                            code={drawCode}
+                            onOk={this.drawSubmited}
+                        />
+                    )
+                ) : null}
+            </div>
+            // </Card>
+        );
+    }
+}
+
 export default withRouter(SelectTable);