fastlion-amis/lib/renderers/Table/DataCross.js

一种MIS页面生成工具

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Checkbox_1 = (0, tslib_1.__importDefault)(require("antd/lib/checkbox/Checkbox"));
var button_1 = (0, tslib_1.__importDefault)(require("antd/lib/button"));
var grid_1 = require("antd/lib/grid");
var radio_1 = (0, tslib_1.__importDefault)(require("antd/lib/radio"));
var Modal_1 = (0, tslib_1.__importDefault)(require("antd/lib/modal/Modal"));
var message_1 = (0, tslib_1.__importDefault)(require("antd/lib/message"));
var components_1 = require("../../components");
var icons_1 = require("../../components/icons");
var cross_1 = require("./cross");
var commonTableFunction_1 = require("../../store/utils/commonTableFunction");
var lodash_1 = require("lodash");
require("./dataStatic.scss");
var DataCross = function (_a) {
    var tableName = _a.tableName, columns = _a.columns, onChange = _a.onChange;
    var initFields = function (type) {
        var _a;
        var value = (_a = localStorage.getItem("cross_" + tableName)) !== null && _a !== void 0 ? _a : '{}';
        var obj = JSON.parse(value);
        var _b = obj.rowFields, rowFieldNames = _b === void 0 ? [] : _b, _c = obj.colFields, colFieldNames = _c === void 0 ? [] : _c, _d = obj.valueFields, valueFieldNames = _d === void 0 ? [] : _d;
        var fieldNames = type == 0 ? rowFieldNames : type == 1 ? colFieldNames : type == 2 ? valueFieldNames : [];
        var hideFn = function (fieldNames, name) { return fieldNames.includes(name); };
        return columns.filter(function (column) {
            if (column.name) {
                if (type == 0 || type == 1) {
                    return column.type == 'plain' || column.type == 'number' || column.type == 'date' || column.type == 'progress' || column.type == 'color' || column.type == 'mapping';
                }
                else {
                    var dataTypeArr = ['number', 'static-number', 'input-number', 'progress', 'static-progress'];
                    return column.pristine.isNumerical || dataTypeArr.includes(column.type);
                }
            }
            return false;
        }).map(function (column) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), { name: column.name, label: (0, commonTableFunction_1.getColumnShowLabel)(column), checked: fieldNames.includes(column.name), hidden: hideFn(type == 0 ? colFieldNames.concat(valueFieldNames) : type == 1 ? rowFieldNames.concat(valueFieldNames) : type == 2 ? rowFieldNames.concat(colFieldNames) : [], column.name) })); });
    };
    var _b = (0, react_1.useState)([]), rowFields = _b[0], setRowFields = _b[1];
    var _c = (0, react_1.useState)([]), colFields = _c[0], setColFields = _c[1];
    var _d = (0, react_1.useState)([]), valueFields = _d[0], setValueFields = _d[1];
    var _e = (0, react_1.useState)(0), dataRange = _e[0], setDataRange = _e[1];
    var _f = (0, react_1.useState)(false), countSum = _f[0], setCountSum = _f[1];
    var _g = (0, react_1.useState)('row'), valuePosition = _g[0], setValuePosition = _g[1];
    (0, react_1.useEffect)(function () {
        getDefaultValues();
    }, []);
    (0, react_1.useEffect)(function () {
        setRowFields(initFields(0));
        setColFields(initFields(1));
        setValueFields(initFields(2));
    }, [columns]);
    (0, react_1.useEffect)(function () {
        onChange({ rowFields: rowFields, colFields: colFields, valueFields: valueFields, dataRange: dataRange, countSum: countSum, valuePosition: valuePosition });
    }, [rowFields, colFields, valueFields, dataRange, countSum, valuePosition]);
    var getDefaultValues = function () {
        var value = localStorage.getItem("cross_" + tableName);
        if (value == null)
            return;
        var obj = JSON.parse(value);
        var _a = obj.dataRange, dataRange = _a === void 0 ? 0 : _a, _b = obj.countSum, countSum = _b === void 0 ? false : _b, _c = obj.valuePosition, valuePosition = _c === void 0 ? 'row' : _c;
        setDataRange(dataRange);
        setCountSum(countSum);
        setValuePosition(valuePosition);
    };
    var handleChange = function (type, items) {
        var checkFn = function (datas) {
            return datas.map(function (data) {
                var target = items.find(function (item) { return item.name == data.name; });
                return target ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, data), { checked: target.checked }) : data;
            });
        };
        var hideFn = function (datas) {
            return datas.map(function (data) {
                var target = items.find(function (item) { return item.name == data.name; });
                return target ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, data), { hidden: target.checked }) : data;
            });
        };
        if (type == 0) {
            setRowFields(checkFn);
            setColFields(hideFn);
            setValueFields(hideFn);
        }
        else if (type == 1) {
            setColFields(checkFn);
            setRowFields(hideFn);
            setValueFields(hideFn);
        }
        else if (type == 2) {
            setValueFields(checkFn);
            setRowFields(hideFn);
            setColFields(hideFn);
        }
    };
    var renderItem = function (type, datas) {
        return (react_1.default.createElement("div", { className: "common-select-container", style: { height: '100%', width: 'calc(33% - 8px)' } },
            react_1.default.createElement("div", { className: "sel-top" },
                react_1.default.createElement("span", null, type == 0 ? '行' : type == 1 ? '列' : '值'),
                react_1.default.createElement("div", { className: 'sel-btn-group' },
                    react_1.default.createElement("span", { className: "btn", onClick: function () { return handleChange(type, datas.filter(function (data) { return !data.hidden; }).map(function (data) { return ({ name: data.name, checked: true }); })); } }, "\u5168\u9009"),
                    react_1.default.createElement("span", { className: "btn", onClick: function () { return handleChange(type, datas.filter(function (data) { return !data.hidden; }).map(function (data) { return ({ name: data.name, checked: !data.checked }); })); } }, "\u53CD\u9009"),
                    react_1.default.createElement("span", { className: "btn", onClick: function () { return handleChange(type, datas.filter(function (data) { return !data.hidden; }).map(function (data) { return ({ name: data.name, checked: false }); })); } }, "\u4E0D\u9009"))),
            react_1.default.createElement("div", { className: "sel-body", style: { height: 420, overflow: 'auto' } }, datas.map(function (item) { return (!item.hidden && react_1.default.createElement("div", { key: item.name, className: "checkbox-container" },
                react_1.default.createElement(Checkbox_1.default, { key: item.name, checked: item.checked, onChange: function (e) { return handleChange(type, [{ name: item.name, checked: e.target.checked }]); } }, item.label))); }))));
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: "select-wrapper-group-container" },
            renderItem(0, rowFields),
            renderItem(1, colFields),
            renderItem(2, valueFields)),
        react_1.default.createElement(grid_1.Row, { className: "operate-wrapper", style: { marginTop: 12 } },
            react_1.default.createElement(grid_1.Col, { span: 4 },
                react_1.default.createElement("span", null, "\u6570\u636E\u8303\u56F4")),
            react_1.default.createElement(grid_1.Col, { span: 13 },
                react_1.default.createElement(radio_1.default.Group, { onChange: function (e) { return setDataRange(e.target.value); }, value: dataRange },
                    react_1.default.createElement(radio_1.default, { value: 0 }, "\u5F53\u524D\u9875\u6570\u636E"),
                    react_1.default.createElement(radio_1.default, { value: 1 }, "\u9009\u4E2D\u6570\u636E"),
                    react_1.default.createElement(radio_1.default, { value: 2 }, "\u5168\u90E8\u6570\u636E"))),
            react_1.default.createElement(grid_1.Col, { span: 3 },
                react_1.default.createElement(Checkbox_1.default, { checked: valuePosition == 'col', onChange: function (e) { return setValuePosition(e.target.checked ? 'col' : 'row'); } }, "\u8F6C\u7F6E")),
            react_1.default.createElement(grid_1.Col, { span: 4 },
                react_1.default.createElement(Checkbox_1.default, { checked: countSum, onChange: function (e) { return setCountSum(e.target.checked); } }, "\u751F\u6210\u5408\u8BA1\u503C")))));
};
exports.default = (function (props) {
    var _a;
    var tableName = props.tableName, action = props.action, columns = props.columns, data = props.data, modalContainer = props.modalContainer, getAllData = props.getAllData, onOK = props.onOK, staticRecords = props.staticRecords;
    var _b = (0, react_1.useState)(false), visible = _b[0], setVisible = _b[1];
    var _c = (0, react_1.useState)(false), confirmLoading = _c[0], setConfirmLoading = _c[1];
    var crossDataRef = (0, react_1.useRef)();
    var getData = function (dataRange) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
        var items;
        return (0, tslib_1.__generator)(this, function (_a) {
            switch (_a.label) {
                case 0:
                    if (!(dataRange == 0)) return [3 /*break*/, 1];
                    return [2 /*return*/, Promise.resolve(data.items)];
                case 1:
                    if (!(dataRange == 1)) return [3 /*break*/, 2];
                    return [2 /*return*/, Promise.resolve(data.selectedItems)];
                case 2: return [4 /*yield*/, getAllData()];
                case 3:
                    items = (_a.sent()).items;
                    if (Array.isArray(items)) {
                        return [2 /*return*/, items];
                    }
                    return [2 /*return*/, []];
            }
        });
    }); };
    var handleOk = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
        var rowFields_1, colFields_1, valueFields_1, dataRange, countSum_1, valueInCol_1, _a, crossColumns, datas, cross, countColumns;
        return (0, tslib_1.__generator)(this, function (_b) {
            switch (_b.label) {
                case 0:
                    if (!crossDataRef.current) return [3 /*break*/, 2];
                    rowFields_1 = crossDataRef.current.rowFields.filter(function (field) { return !field.hidden && field.checked; });
                    colFields_1 = crossDataRef.current.colFields.filter(function (field) { return !field.hidden && field.checked; });
                    valueFields_1 = crossDataRef.current.valueFields.filter(function (field) { return !field.hidden && field.checked; });
                    if (valueFields_1.length == 0) {
                        message_1.default.warning('请选择值');
                        return [2 /*return*/];
                    }
                    dataRange = crossDataRef.current.dataRange;
                    countSum_1 = crossDataRef.current.countSum;
                    valueInCol_1 = crossDataRef.current.valuePosition == 'col';
                    setConfirmLoading(true);
                    return [4 /*yield*/, getData(dataRange).then(function (datas) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
                            var crossColumns;
                            return (0, tslib_1.__generator)(this, function (_a) {
                                if (datas.length > 10000) {
                                    message_1.default.warning('数据行数大于10000条，请重新选择');
                                    return [2 /*return*/, [[], []]];
                                }
                                crossColumns = valueInCol_1 ? (0, cross_1.buildCrossColumn1)(rowFields_1, colFields_1, datas) : (0, cross_1.buildCrossColumn)(rowFields_1, colFields_1, valueFields_1, datas, countSum_1);
                                if (crossColumns.length > 1000) {
                                    message_1.default.warning('交叉制表结果列数大于1000，请重新选择');
                                    return [2 /*return*/, [[], []]];
                                }
                                return [2 /*return*/, [crossColumns, datas]];
                            });
                        }); }).catch(function () { return [[], []]; }).finally(function () { setConfirmLoading(false); })];
                case 1:
                    _a = _b.sent(), crossColumns = _a[0], datas = _a[1];
                    if (crossColumns.length > 0) {
                        setVisible(false);
                        cross = {
                            columnFields: colFields_1.map(function (field) { return ({ name: field.name }); }),
                            rowFields: rowFields_1.map(function (field) { return ({ name: field.name }); }),
                            valueFields: valueFields_1.map(function (field) { return field.name; }).join(','),
                            positionType: valueInCol_1 ? 1 : 0
                        };
                        countColumns = countSum_1 ? valueFields_1.map(function (field) { return ({ name: field.name, label: field.label, formula: 'SUM', type: 'formula', rule: '合计' }); }) : [];
                        onOK(cross, crossColumns, datas, countColumns, { rowFields: crossDataRef.current.rowFields, colFields: crossDataRef.current.colFields, valueFields: crossDataRef.current.valueFields, dataRange: dataRange, countSum: countSum_1, valuePosition: crossDataRef.current.valuePosition });
                        staticRecords(141);
                    }
                    _b.label = 2;
                case 2: return [2 /*return*/];
            }
        });
    }); };
    var handleDefault = function () {
        var _a, _b, _c;
        if (crossDataRef.current && tableName) {
            var rowFields = (0, lodash_1.flatMap)((_a = crossDataRef.current.rowFields) !== null && _a !== void 0 ? _a : [], function (field) { return !field.hidden && field.checked ? field.name : []; });
            var colFields = (0, lodash_1.flatMap)((_b = crossDataRef.current.colFields) !== null && _b !== void 0 ? _b : [], function (field) { return !field.hidden && field.checked ? field.name : []; });
            var valueFields = (0, lodash_1.flatMap)((_c = crossDataRef.current.valueFields) !== null && _c !== void 0 ? _c : [], function (field) { return !field.hidden && field.checked ? field.name : []; });
            var value = JSON.stringify((0, tslib_1.__assign)((0, tslib_1.__assign)({}, crossDataRef.current), { rowFields: rowFields, colFields: colFields, valueFields: valueFields }));
            localStorage.setItem("cross_" + tableName, value);
            message_1.default.success('保存成功');
        }
    };
    var renderFooter = function () {
        return (react_1.default.createElement("div", null,
            react_1.default.createElement(button_1.default, { style: { float: 'left', borderRadius: 4 }, onClick: handleDefault }, "\u8BBE\u7F6E\u9ED8\u8BA4"),
            react_1.default.createElement(button_1.default, { style: { borderRadius: 4 }, onClick: function () { return setVisible(false); } }, "\u53D6\u6D88"),
            react_1.default.createElement(button_1.default, { style: { borderRadius: 4 }, type: 'primary', loading: confirmLoading, onClick: handleOk }, "\u786E\u5B9A")));
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(components_1.Button, { onClick: function () { setVisible(true); } },
            react_1.default.createElement(icons_1.Icon, { icon: (_a = action.icon) !== null && _a !== void 0 ? _a : "#icon-tooltool_autowidth", className: "icon", symbol: true }),
            action.label),
        react_1.default.createElement(Modal_1.default, { title: react_1.default.createElement("div", { className: 'dialog-title' },
                react_1.default.createElement("div", { className: 'disabled-move-title' }, "\u4EA4\u53C9\u5236\u8868")), className: 'statics-modal common-modal-component', bodyStyle: { maxHeight: 'calc(100vh - 220px) !important' }, width: 773, visible: visible, okText: '\u786E\u5B9A', cancelText: '\u53D6\u6D88', centered: true, destroyOnClose: false, maskClosable: false, confirmLoading: confirmLoading, cancelButtonProps: { disabled: confirmLoading }, getContainer: modalContainer !== null && modalContainer !== void 0 ? modalContainer : document.body, onCancel: function () { return setVisible(false); }, footer: renderFooter() },
            react_1.default.createElement(DataCross, { tableName: tableName, columns: columns, onChange: function (data) { return crossDataRef.current = data; } }))));
});
//# sourceMappingURL=./renderers/Table/DataCross.js.map