ccic-web/packages/component.ui/lib/table/index.js

import { jsx as _jsx } from "react/jsx-runtime";
import { urlCacheData } from '@component/app';
import { ProTable } from '@ant-design/pro-components';
import { isEmpty, map, zipObject, fill, keys } from 'lodash';
import { useUpdate } from 'ahooks';
import useUrl0State from '@ahooksjs/use-url-state';
import { useImperativeHandle, useRef } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { parse, stringify } from 'query-string';
export function CustomProTable(props) {
    var _a, _b, _c;
    const navigate = useNavigate();
    const location = useLocation();
    const { onChangeTab, activeKeyParams, onReset, onSubmit, initialValue } = props;
    const resetRef = useRef(false);
    const formRef = useRef();
    const actionRef = useRef();
    const update = useUpdate();
    const activeKey = (_b = (_a = props === null || props === void 0 ? void 0 : props.toolbar) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.activeKey;
    function onChange(activeKey) {
        var _a, _b;
        const params = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFieldsValue();
        setTimeout(onChangeTab, 0, activeKey);
        actionRef.current.reset();
        (_b = formRef.current) === null || _b === void 0 ? void 0 : _b.setFieldsValue(zipObject(keys(params), fill(keys(params), undefined)));
    }
    if (onChangeTab && !isEmpty((_c = props.toolbar) === null || _c === void 0 ? void 0 : _c.tabs)) {
        props.toolbar.tabs.onChange = onChange;
    }
    function getTransformKeys(values) {
        var _a;
        if (isEmpty(props === null || props === void 0 ? void 0 : props.columns)) {
            return {};
        }
        let data = {};
        for (let item of props === null || props === void 0 ? void 0 : props.columns) {
            if (item.valueType === 'dateRange' && item.search) {
                const keys = Object.keys((_a = item.search) === null || _a === void 0 ? void 0 : _a.transform([]));
                if (isEmpty(item.initialValue)) {
                    data[item.dataIndex] = map(keys, (item) => values[item]);
                }
                else {
                    data[item.dataIndex] = item.initialValue;
                }
            }
        }
        return data;
    }
    function request(params, sort, filter) {
        return props.request(Object.assign(params, activeKeyParams), sort, filter);
    }
    useImperativeHandle(props.formRef, () => {
        return formRef.current;
    });
    useImperativeHandle(props.actionRef, () => {
        return actionRef.current;
    });
    function handleReset() {
        var _a;
        onReset && onReset();
        resetRef.current = true;
        navigate({
            hash: location.hash,
            search: activeKey ? stringify({ activeKey }) : '?',
        }, {
            replace: true,
        });
        const params = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFieldsValue();
        update();
        setTimeout(() => {
            var _a;
            actionRef.current.reset();
            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue(Object.assign(Object.assign({}, zipObject(keys(params), fill(keys(params), undefined))), initialValue));
        });
    }
    function handleSubmit() {
        resetRef.current = false;
        onSubmit && onSubmit();
    }
    return (_jsx(ProTable, Object.assign({ onSubmit: handleSubmit, search: {
            span: 8,
            className: 'proTableSearch',
            labelWidth: 80,
            defaultCollapsed: false,
            collapseRender: () => null,
            cardProps: {},
        }, cardProps: {
            bodyStyle: {
                padding: '0 16px 16px',
            },
        }, toolbar: {
            title: _jsx("span", { children: "\u67E5\u8BE2\u7ED3\u679C" }),
        }, tableClassName: "tableClassName", options: false, pagination: {
            pageSize: 10,
            showSizeChanger: false,
        }, "columnEmptyText:false": true, scroll: {
            x: 'max-content',
        }, form: {
            syncToUrl: (values, type) => {
                if (resetRef.current) {
                    if (!activeKey) {
                        return {};
                    }
                    urlCacheData.set(location.pathname, { activeKey });
                    resetRef.current = false;
                    return {
                        activeKey,
                    };
                }
                if (activeKey) {
                    values.activeKey = activeKey;
                }
                if (type === 'get') {
                    return Object.assign(Object.assign({}, values), getTransformKeys(values));
                }
                if (type === 'set') {
                    urlCacheData.set(location.pathname, values);
                }
                return values;
            },
        } }, props, { onReset: handleReset, formRef: formRef, actionRef: actionRef, request: request })));
}