基于用友开源前端库、XLSX插件、React Hooks编写的文件导出组件

import React, { useState, useRef } from "react";
import { Button, Transfer, Row, Col, Label, Radio, Select, Checkbox } from "tinper-bee";
import PopDialog from "components/Pop";
import FormItemPro from 'components/FormItemPro';
import { Info } from "utils";
import moment from "moment";
const Option = Select.Option;
import "./index.less";

//#region 列可配置式文件导出组件
const FileExport = ({
    grid,
    onBeforeExportFile,
    fileName = `fileName(${moment().format("YYYY-MM-DD HH:mm:ss")}).xlsx`
}) => {
    const [isShowDialog, setIsShowDialog] = useState(false);
    const [transferData, setTransferData] = useState([]);   //穿越框数据
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [targetKeys, setTargetKeys] = useState([]);

    // 项移动操作
    const handleChange = (nextTargetKeys, direction, moveKeys) => {
        setTargetKeys(nextTargetKeys);
    };

    // 项选择事件
    const handleSelectedKeyChange = (sourceSelectedKeys, targetSelectedKeys) => {
        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
    };

    // 滚动事件
    const handleScroll = (direction, e) => {
        console.log("direction:", direction);
        console.log("target:", e.target);
    };

    // 准备导出动作
    const handleReadyExportFile = () => {
        if (!grid || !(grid instanceof React.Component || grid.current instanceof React.Component)) {
            Info("未检测到传入Grid组件实例,请检查!");
            return;
        }
        const { columns, data } = grid.props || grid.current.props;
        if (!columns || !(columns instanceof Array) || !columns.filter(item =>
            Boolean(item.title) && (Boolean(item.key) || item.children.length)).length) {
            Info("未检测到 [列] 相关数据，请检查！");
            return;
        }
        if (!data || !Array.isArray(data) || !data.length) {
            Info("未检测到 [表体] 相关数据，请检查！");
            return;
        }

        //开始导出文件之前的回调, 方便调用者处理数据。
        onBeforeExportFile && onBeforeExportFile();

        // 将【操作】列设置为 禁导 状态
        const [operationCol] = columns.filter(item => item.title === "操作");
        operationCol && Object.assign(operationCol, { disabled: true });
        //匿名函数递归计算表头的层级
        const level = +function func(data) {
            let level = 0;
            data.forEach(item => {
                if (item.children) {
                    level++;
                    func(item.children)
                }
            })
            return level;
        }(columns)
        if (level > 2) {
            Info('暂不支持3级及以上表头的自定义列导出!');
            return;
        }

        // 计算穿越框需要的key=>title数据
        const arrTransfer = [];
        +function func(data) {
            data.forEach(item => {
                if (item.children && item.children.length) {
                    arrTransfer.push(...item.children);
                } else {
                    arrTransfer.push(item);
                }
            })
        }(columns);
        if (arrTransfer.length) {
            setTransferData(arrTransfer);
            setIsShowDialog(true);
        }
    };

    // 开始正式导出文件
    const handleExportFIle = () => {
        if (!targetKeys.length) {
            Info("请选择至少导出1列数据！");
            return;
        }
        const arrTable = [];    //整个表体需要的数据
        const { data, columns } = grid.props || grid.current.props;
        const arrHeaderOne = [];
        columns.forEach(item => {
            if (!item.children) {
                targetKeys.includes(item.key) && arrHeaderOne.push(item.title);
            } else {
                item.children.forEach(el => {
                    targetKeys.includes(el.key) && arrHeaderOne.push(item.title);
                })
            }

        })
        arrTable.push(arrHeaderOne);
        let keyMapTitle = transferData.map(item => ({ [item.key]: item.title }));
        keyMapTitle = Object.assign({}, ...keyMapTitle);
        data.forEach(item => {
            const arr = [];
            targetKeys.forEach(key => {
                const [column] = transferData.filter(item => item.key === key);
                const { exportKey } = column;
                if (exportKey) arr.push(item[exportKey]);
                else arr.push(item[key]);
            });
            arr.filter(item => Boolean(item)).length && arrTable.push(arr);
        });
        const ws = XLSX.utils.aoa_to_sheet(arrTable);
        // 将定义的列宽width写入表格;
        if (!ws["!cols"]) ws["!cols"] = [];
        targetKeys.forEach(key => {
            const [column] = transferData.filter(item => item.key === key);
            if (column) {
                ws["!cols"].push({
                    wpx: column.width || 50
                });
            }
        });
        // 处理单元格合并事件
        if (!ws["!merges"]) ws["!merges"] = [];
        // 行合并
        transferData
            .filter(item => Boolean(item.render))
            .filter(item => item.render.toString().includes("rowSpan"))
            .forEach(item => {
                const sc = targetKeys.findIndex(el => el === item.key); //起始列索引
                data.forEach((record, index) => {
                    let sr = 2;     //基础的起始行索引
                    let er = sr;      //预定义的结束行索引
                    if (!!item.render(record[item.key], record)) {
                        if (item.render(record[item.key], record).props.rowSpan > 0) {
                            sr += index;
                            er = item.render(record[item.key], record).props.rowSpan - 1;
                            var merge = {
                                s: {
                                    r: sr,
                                    c: sc
                                },
                                e: {
                                    r: er + sr,
                                    c: sc
                                }
                            };
                            ws["!merges"].push(merge);
                        }
                    }
                });
            });
        //表头中的列合并
        columns.forEach(item => {
            if (item.children && item.children.length) {
                const arrSame = [];
                item.children.forEach(el => {
                    targetKeys.includes(el.key) && arrSame.push(el.key);
                })
                const [key] = arrSame;
                const sc = targetKeys.findIndex(item => item === key);
                const ec = sc + arrSame.length - 1;
                var merge = {
                    s: {
                        r: 0,
                        c: sc
                    },
                    e: {
                        r: 0,
                        c: ec
                    }
                };
                ws["!merges"].push(merge);

            }
        })
        // 表体中的列合并
        transferData
            .filter(item => Boolean(item.render))
            .filter(item => item.render.toString().includes("colSpan"))
            .forEach(item => {
                const sc = targetKeys.findIndex(el => el === item.key);
                data.forEach((record, index) => {
                    let sr = 2;
                    let er = 0;
                    if (!!item.render(record[item.key], record)) {
                        if (item.render(record[item.key], record).props.colSpan > 0) {
                            sr += index;
                            er = item.render(record[item.key], record).props.colSpan - 1;
                            var merge = {
                                s: {
                                    r: sr,
                                    c: sc
                                },
                                e: {
                                    r: sr,
                                    c: er + sc
                                }
                            };
                            ws["!merges"].push(merge);
                        }
                    }
                });
            });
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
        XLSX.writeFile(wb, fileName);
        setIsShowDialog(false);
    };

    return (
        <span classNames="file-export">
            <Button colors="primary" onClick={handleReadyExportFile}>
                导出
      </Button>
            {isShowDialog && (
                <PopDialog
                    show={true}
                    title="列导出配置"
                    width="500"
                    className="export-file-dialog"
                    autoFocus={false}
                    enforceFocus={false}
                    close={() => setIsShowDialog(false)}
                    btns={[
                        {
                            label: "导出",
                            fun: handleExportFIle,
                            icon: "uf-correct"
                        },
                        {
                            label: "取消",
                            fun: () => setIsShowDialog(false),
                            icon: "uf-back"
                        }
                    ]}
                >
                    <Transfer
                        dataSource={transferData}
                        titles={["待配置列", "已配置列"]}
                        targetKeys={targetKeys}
                        selectedKeys={selectedKeys}
                        onChange={handleChange}
                        onSelectChange={handleSelectedKeyChange}
                        onScroll={handleScroll}
                        render={item => item.title}
                        lazy={{
                            container: "modal"
                        }}
                    />
                </PopDialog>
            )}
        </span>
    );
};
//#endregion


//#region 文件导入组件
const FileImport = ({ grid, onAfterImportFile }) => {
    const inputRef = useRef(null);  //获取input DOM元素
    const [isShowDialog, setIsShowDialog] = useState(false);   //模态框
    const [importMode, setImportMode] = useState('edit');   //导入模式
    const [arrKeyMapTitle, setArrKeyMapTitle] = useState([{ key: 'rowNo', title: '序号', isPrimaryKey: true, isSelected: false }])  //数据集合

    // 文件导入回调
    const handleFileChange = e => {
        e.persist()
        // 获取上传的文件对象
        const { files } = e.target;
        // 通过FileReader对象读取文件
        const fileReader = new FileReader();
        const rABS = !!fileReader.readAsBinaryString;
        fileReader.onload = event => {
            const { result } = event.target;
            //读取得到整份excel表格对象
            const workbook = XLSX.read(result, { type: rABS ? 'binary' : 'array' });
            let dataImport = []; // 存储获取到的数据
            // 遍历每张工作表进行读取（这里默认只读取第一张表）
            for (const sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    // 利用 sheet_to_json 方法将 excel 转成 json 数据
                    dataImport = dataImport.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    break; // 如果只取第一张表，就取消注释这行
                }
            }
            // // 解决 input type=file不能重复上传同一个文件
            inputRef.current.setAttribute('type', 'text');
            inputRef.current.setAttribute('type', 'file');
            const { columns, data } = grid.props || grid.current.props; //columns=Grid实例的列配置；Data=Grid实例的原有行数据
            //匿名函数递归获取扁平化的列数据结构
            const arrFlatColumns = [];
            +function func(data, level) {
                data.forEach(item => {
                    item.level = level;
                    arrFlatColumns.push(item)
                    if (item.children) {
                        func(item.children, level + 1)
                    }
                })
            }(columns, 0)
            const titleMapKey = {};    //根据columns,获取title=>key之间的映射
            const keyMapTitle = {};    //根据columns,获取Key=>title之间的映射
            const arrKeyMapTitle = []; //根据columns,获取key, title之间的映射
            +function func(data) {
                data.forEach(item => {
                    if (item.children && item.children.length) {
                        func(item.children)
                    } else {
                        arrKeyMapTitle.push({ key: item.key, title: item.title })
                        titleMapKey[item.title] = item.key;
                        keyMapTitle[item.key] = item.title;
                    }
                })
            }(columns)
            const [row] = arrKeyMapTitle.filter(item => item.key === 'rowNo');
          	if( row )  Object.assign(row, { isPrimaryKey: true });
            else
                Object.assign(arrKeyMapTitle[0], { isPrimaryKey: true });
            }
            setArrKeyMapTitle(arrKeyMapTitle)
            const dataFromExcel = [];  //来自于Excel的数据
            // 简单的判断一下：是 新增模式，还是编辑模式
            if (dataImport.length - 2 > data.length) {  //新增格式
                setImportMode('add')
            } else setImportMode('edit');

            // 三层及以上表头
            if (Math.max(...arrFlatColumns.map(item => item.level)) > 1) {
                Info('暂不支持3层及以上表头的导入');
                return;
            }

            // 一层表头
            if (Math.max(...arrFlatColumns.map(item => item.level)) === 0) {
                dataImport.forEach(item => dataFromExcel.push(item))
            }

            // 二层表头
            if (Math.max(...arrFlatColumns.map(item => item.level)) === 1) {
                const [objHeaderOne] = dataImport.slice(0, 1);
                dataImport.slice(1).forEach(item => {
                    const obj = {};
                    Object.entries(item).forEach(el => {
                        const [key, value] = el;
                        obj[objHeaderOne[key]] = value;
                    })
                    dataFromExcel.push(obj);
                })
            }

            // 准备导出数据
            dataFromExcel.forEach(item => Object.entries(item).forEach(el => {
                const [key, value] = el;
                Object.assign(item, { [titleMapKey[key]]: value })
                delete item[key];
            }))
            FileExport.dataFromExcel = dataFromExcel;
            setIsShowDialog(true)
        };

        // 打开文件
        if (rABS) fileReader.readAsBinaryString(files[0]); else fileReader.readAsArrayBuffer(files[0]);
    }

    // 正式导入文件
    const handleFileImport = () => {
        const { data } = grid.props || grid.current.props;
        switch (importMode) {
            case 'add':
            data.length = 0;
            FileExport.dataFromExcel.forEach(item=>data.push(item))
                break;
            case 'edit':
            const primaryKey = arrKeyMapTitle.filter(item => item.isPrimaryKey === true)?.[0]?.key;
            data.length &&　data.filter(item=> !!item[primaryKey]).forEach(item=>{
                const { rowNo  } = item;
                const [ dataRow ] = FileExport.dataFromExcel.filter(i=> i.rowNo === rowNo);
                const arrEditableColumns = arrKeyMapTitle.filter(i => i.isSelected === true);
                arrEditableColumns.length && arrEditableColumns.forEach(i=>{
                    const { key } = i;
                    Object.assign(item, { [key] : dataRow[key] });
                })

            })
                break;
            default:
                break;
        }
        // 完成导入后的回调函数
        onAfterImportFile && onAfterImportFile();
        setIsShowDialog(false);
    }

    // 主键列改变事件
    const handlePrimaryKeyChange = value => {
        const newArrKeyMapTitle = JSON.parse(JSON.stringify(arrKeyMapTitle))
        const [row] = newArrKeyMapTitle.filter(item => item.isPrimaryKey === true);
        Object.assign(row, { isPrimaryKey: false });
        const [newRow] = newArrKeyMapTitle.filter(item => item.key === value);
        Object.assign(newRow, { isPrimaryKey: true, isSelected: false });
        setArrKeyMapTitle(newArrKeyMapTitle)
    }

    // 可编辑列选择事件
    const handleEditableColumnsChange = (key, checked) => {
        const newArrKeyMapTitle = JSON.parse(JSON.stringify(arrKeyMapTitle))
        const [row] = newArrKeyMapTitle.filter(item => item.key === key);
        Object.assign(row, { isSelected: checked });
        setArrKeyMapTitle(newArrKeyMapTitle)
    }

    return (
        <span class="file-import">
            <label class='file-import-btn'><input ref={inputRef} type='file' accept='.xlsx, .xls'
                onChange={handleFileChange} style={{ display: 'none' }} />导入</label>
            {isShowDialog && (
                <PopDialog
                    show={true}
                    title="导入配置"
                    width='500'
                    className="file-import-dialog"
                    autoFocus={false}
                    enforceFocus={false}
                    close={() => setIsShowDialog(false)}
                    btns={[
                        {
                            label: "导入",
                            fun: handleFileImport,
                            icon: "uf-correct"
                        },
                        {
                            label: "取消",
                            fun: () => setIsShowDialog(false),
                            icon: "uf-back"
                        }
                    ]}
                >
                    <Row className="form-panel">
                        <Col lg={12} md={12} xs={12} sm={12}>
                            <FormItemPro>
                                <Label>导入模式</Label>
                                <Radio.RadioGroup
                                    name="import-mode"
                                    selectedValue={importMode}
                                    onChange={value => setImportMode(value)}
                                >
                                    <Radio colors="primary" value="add" >新增</Radio>
                                    <Radio colors="success" value="edit" >编辑</Radio>
                                </Radio.RadioGroup>

                            </FormItemPro>
                        </Col>
                        {importMode === 'edit' && <>
                            <Col lg={12} md={12} xs={12} sm={12}>
                                <FormItemPro>
                                    <Label>主键列</Label>
                                    <Select
                                        placeholder='请选择主键列'
                                        onChange={value => handlePrimaryKeyChange(value)}
                                        optionFilterProp="children"
                                        value={arrKeyMapTitle.filter(item => item.isPrimaryKey === true)[0] ? arrKeyMapTitle.filter(item => item.isPrimaryKey === true)[0].title : '序号'}
                                    >
                                        {!!arrKeyMapTitle.length &&
                                            arrKeyMapTitle.map(item => {
                                                const { key, title } = item;
                                                return <Option key={key} value={key} >
                                                    {title}
                                                </Option>
                                            })
                                        }
                                    </Select>
                                </FormItemPro>
                            </Col>
                            <Col lg={12} md={12} xs={12} sm={12}>
                                <FormItemPro>
                                    <Label>可编辑列</Label>
                                    <div class='editable-columns' >
                                        {!!arrKeyMapTitle.length && arrKeyMapTitle.map(item => {
                                            const { key, title, isPrimaryKey, isSelected } = item;
                                            return <Checkbox
                                                key={key}
                                                disabled={isPrimaryKey}
                                                checked={isSelected}
                                                onChange={checked => handleEditableColumnsChange(key, checked)}>
                                                {title}
                                            </Checkbox>
                                        })}
                                    </div>

                                </FormItemPro>
                            </Col>
                        </>
                        }
                    </Row>
                </PopDialog>
            )}
        </span>
    );
}

//#endregion
export { FileExport, FileImport };