ReportsManage.js

/**
 * * 轻量化报表通用配置页面 * create by ChenLong on 2022/6/22 *
 * 功能路径：src\pages\product\ReportsManage\ReportsManage.js * 菜单参数列表：*变量名*(变量说明，数据类型，是否必填，取值范围)
 *
 * @changelog:
 *  editComponentVisible && detailsComponentVisible  共同作用组件的显示
 */
/**
 * @description: 功能描述：参考台账概念，重新定义
 * @tips: 1. 如果需要对字段进行处理，增加功能之类的。需要提前确定返回值的类型.
 *         2. 如果要用customerState来控制页面按钮等，需要按照给定的权限值进行配置
 * @params: <ReportManage
 *     params={{reportName,pageSize,filterFields,filterValues,state,customerState}}>
 *
 *
 *
 *     reportName: 报表名称；
 *           pageSize: 按需配置，默认加载100；
 *
 *
 *
 *     ***************filterFields/filterValues多用于以组件的形式嵌入，将需要过滤的条件传入********************
 *
 *
 *
 *     filterFields: 需要默认加载的过滤条件的field，用|分割，与filterValues一一对应;
 *           filterValues:
 *
 *
 *     需要默认加载的过滤条件的value，用|分割，与filterFields一一对应；当某个字段的filterValues为多个时，控件必须配置成多选才可生效；
 *
 *
 *
 *     *************************************************************************************************
 *
 *
 *
 *                    state: delete|edit|scan 各种权限；
 *           customerState:
 *
 *
 *     ['filters','sortBtn','exportBtn','editBtn','deleteBtn','pagination']；
 *
 *     sortFields:
 *
 *        '排序字段1,排序字段2,排序字段3'
 *
 *
 *
 *     ---------------------------------------权限过滤-----------------------------------------
 *
 *
 *
 *     permissionType: 部门|站点|用户
 *           permissionField: 【字段名】
 *
 *
 *
 *     ---------------------------------------------------------------------------------------
 * @config:
 *  【数值】 [prefix]_d%|0.00|_d%[suffix]|金额 = 前缀|精度|后缀|金额类的数据（千分位），可分别设置。
 *  【标签】 split=,
 *
 *     分隔符。
 *
 *     【功能】 功能配置框内，配置需要跳转功能所需参数，type、url是必须功能，需要type判断类型，需要通过url去解析加载组件。
 * @type：
 *  【文本】普通文本
 *  【数值】数值类型的文本
 *  【标签】文本渲染成标签，具有不同颜色；
 *  【功能】“功能”会在当前页内去展示，会卸载掉列表页，加载功能组件。配置 type +
 *
 *
 *          url + 自定义字段 的配置项，自行解析加载即可；
 *   -------------------- 待需求提出后开发 -----------------
 *
 *
 *
 *     【链接】内链外链，点击可跳转；配置规则：配置链接即可；
 *  【弹窗】modal弹窗弹出，弹窗内的具体业务自行配置；配置规则：[function_name];[...params];
 *
 *
 *
 *          ------------------------------------------------------
 *  【附件】
 * @table：
 *  表头：表头需要支持多级表头、合并；
 *  列：列支持设置筛选；
 *  固定行、固定列：可根据配置生成固定行、列；
 * @control：
 *  固定筛选：拥有固定筛选框，根据配置显示可搜索字段；
 *
 *
 *
 *     可配置筛选框：根据字段配置，将字段设置成筛选条件，枚举出该字段所有值，提供用户进行选择，然后进行筛选；筛选框具体形态可根据配置字段来渲染；
 *  导出功能：各类导出功能按钮；
 *
 *
 *
 *     时间筛选框：单表唯一；需要变更，支持多时间参数的筛选
 * @state: 参考台账权限 delete 全部权限
 *  edit   除删除外的权限
 *  scan   查看权限
 * */
import React, {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import {
  DeleteOutlined,
  DownOutlined,
  ExportOutlined,
  FormOutlined,
  HeartOutlined,
  HeartTwoTone,
  MinusCircleOutlined,
  PlusOutlined,
  QuestionCircleOutlined,
  SortAscendingOutlined,
} from '@ant-design/icons';
import BasicTable from '@wisdom-components/basictable';
import {
  Button,
  Dropdown,
  Form,
  Input,
  Menu,
  message,
  Modal,
  Popconfirm,
  Row,
  Select,
  Space,
  Spin,
  Table,
  Tooltip,
} from 'antd';
import moment from 'moment';

import { connect } from 'react-redux';
import { exportJPG } from '../api/service/report';

import ReturnControlComponent from './Components/Control';
import DetailsComponent from './extra/detailsComponent';
import ReportEditForm from './ReportEditForm';
import style from './ReportsManage.less';
import {
  handleDateString,
  handleDateTimeString,
  handleLink,
  handleModal,
  handleNumber,
  handleNumberTag,
  handlePageSize,
  handleSortFields,
  handleTag,
  handleText,
  handleWidget,
} from './utils/handlers';
import {
  hasMoney,
  isArray,
  isString,
  returnHandledNumber,
  returnSummaryNumber,
} from './utils/utils';
import { reportService } from '../api/index';
import { exportAccountData, reportFilesDownload } from '../api/service/report';
import { DownloadAccountFiles } from '../api/service/workflow';
import DatePickerGroup from '../components/DatePickerGroup';
import Print from './Components/Print';

const ControlsType = ['下拉', '多选', '日期', '复选框'];
const fieldSplitStr = '-'; // fieldGroup用来分割
const { Option } = Select;
const dateFormat = 'YYYY-MM-DD'; // 日期格式化
const initDateModel = 'all';
let timer = null;
const PERMISSION = {
  delete: [
    'addBtn',
    'filters',
    'pagination',
    // 操作条按钮
    'sortBtn',
    'exportBtn',
    'printBtn',
    // 操作列
    'editBtn',
    'deleteBtn',
  ],
  edit: [
    'addBtn',
    'filters',
    'pagination',
    'sortBtn',
    'exportBtn',
    'printBtn',
    // 操作列
    'editBtn',
  ],
  scan: ['filters', 'pagination', 'sortBtn'],
};
const USER_ID = window?.globalConfig?.userInfo?.OID || 0;
const MODEL = ['all', 'year', 'quarter', 'month', 'week', 'day'];
const ReportsManage = forwardRef((props, ref) => {
  const { trigger } = props;
  const {
    reportName,
    pageSize,
    filterFields,
    filterValues,
    state,
    customState,
    sortFields,
    permissionType,
    permissionField,
    waterMark,
    rowSelect,
  } = props.params;
  const handleCustomerState = (customState) => {
    if (isArray(customState)) {
      return customState;
    } else if (isString(customState)) {
      return customState.split(',');
    }
  };
  const permission = customState
      ? handleCustomerState(customState)
      : PERMISSION[state || 'delete'];
  const waterMarkCustom = props.params.waterMark === undefined ? false : true;

  const tableWrapperRef = useRef();
  const controlRef = useRef();
  if (!reportName)
    return (
        <div className={style.lackParams}>
          未配置reportName，请完善配置并重新登陆后查看页面！
        </div>
    );
  const [isInit, setIsInit] = useState(true);
  const [firstToGetData, setFirstToGetData] = useState(false);
  const [tableStruct, setTableStruct] = useState([]); // 临时使用，看后续是否需要保留
  const [columns, setColumns] = useState([]); // 表头设置
  const [tableData, setTableData] = useState([]); // 表数据
  const [reportConfigs, setReportConfigs] = useState([]); // 表设置
  const [pagination, setPagination] = useState({
    current: 1,
    total: 0,
    pageSize: handlePageSize(pageSize) || 100,
    pageSizeOptions: [
      ...new Set([20, 50, 100].concat(handlePageSize(pageSize))),
    ]
        .filter((item) => Number(item))
        .sort((a, b) => Number(a) - Number(b)),
    showQuickJumper: true,
    showSizeChanger: true,
  });
  const [controls, setControls] = useState([]); // 用来存储操作控件
  const [searchContent, setSearchContent] = useState(''); // 搜索框内的值
  const [searchPlaceholder, setSearchPlaceholder] = useState([]); // 搜索框的placeholder
  const [filterObject, setFilterObject] = useState({}); // 存控制条中，选了筛选条件的值
  const [modalVisible, setModalVisible] = useState(false);
  const [allSortFields, setAllSortFields] = useState([]); // 设置所有列表
  const [selectedSortFields, setSelectedSortFields] = useState([
    {
      // 用来存储配置的排序字段；
      label: '主要排序',
      value: '',
      sort: 'asc',
    },
  ]);
  const [summaryArray, setSummaryArray] = useState([]); // 总结栏，包括小计、总计
  const [tableY, setTableY] = useState(500);
  const [tableX, setTableX] = useState(1820);
  const [listHeight, setListHeight] = useState(0);
  const [tableHeaderLevel, setTableHeaderLevel] = useState(null);
  const [exportLoading, setExportLoading] = useState(false);
  const [extraModal, setExtraModal] = useState(false);
  const [hasTotal, setHasTotal] = useState(false);
  const [hasSinglePage, setHasSinglePage] = useState(false);
  const [tableLoading, setTableLoading] = useState(false);
  const [selectedRows, setSelectedRows] = useState([]); // 选中的表格行
  // const
  const [timeFrom, setTimeFrom] = useState(
      moment().startOf(initDateModel).format(dateFormat),
  );
  const [timeTo, setTimeTo] = useState(
      moment().endOf(initDateModel).format(dateFormat),
  );
  const [extra, setExtra] = useState(<></>);
  const [showSortBtn, setShowSortBtn] = useState(false);
  const [currentReportId, setCurrentReportId] = useState(null);
  const [hasDatePicker, setHasDatePicker] = useState('');
  const [defaultDateConfig, setDefaultDateConfig] = useState({
    defaultModel: 'year',
    defaultDate: null,
    showModels: ['all', 'month', 'quarter', 'year', 'custom'],
  });
  const [dateModel, setDateMode] = useState('all');

  const [detailsComponentVisible, setDetailsComponentVisible] = useState(false); // 是否显示详情组件
  const [modalType, setModalType] = useState('');
  const [currentData, setCurrentData] = useState({}); // 设置当前编辑数据
  const [sorterObject, setSorterObject] = useState({});
  const [detailConfig, setDetailConfig] = useState({
    url: '',
    type: '',
    params: {},
  });
  const [controlsHeight, setControlsHeight] = useState(44);
  const [getNewData, setGetNewData] = useState(false);
  const [isLocalDataSource, setIsLocalDataSource] = useState(0); // 如果是本地数据源，那么值为0；反之，则是外部数据源
  const [showWaterMarkModal, setShowWaterMarkModal] = useState(false);
  const [waterMarkContent, setWaterMarkContent] = useState(waterMark); // 水印内容
  useImperativeHandle(ref, () => {
    let _a = selectedRows;
    return {
      getData: () => ({ selectedRows }),
    };
  }, [selectedRows.length]);
  const menu = () => {
    const _item = [
      {
        label: (
            <Button
                size="middle"
                loading={exportLoading}
                type="text"
                onClick={() => exportModule('pdf', 'pdf')}
                icon={<ExportOutlined/>}
            >
              导出pdf
            </Button>
        ),
        key: 'exportPdf',
      },
      {
        label: (
            <Button
                size="middle"
                loading={exportLoading}
                type="text"
                onClick={() => exportModule('excel', 'xls')}
                icon={<ExportOutlined/>}
            >
              导出Excel
            </Button>
        ),
        key: 'exportExcel',
      },
      {
        label: (
            <Button
                size="middle"
                loading={exportLoading}
                type="text"
                onClick={() => exportImage()}
                icon={<ExportOutlined/>}
            >
              导出JPG
            </Button>
        ),
        key: 'excelPdf',
      },
    ];
    let exportFilesItem = {
      label: (
          <Button
              size="middle"
              loading={exportLoading}
              type="text"
              onClick={() =>
                  selectedRows.length === 0
                      ? message.warning('请选择导出数据！')
                      : // 配置有waterMark字段，但是没有设置默认值时，弹出弹窗，输入水印内容；如果有默认值，则使用默认水印
                      !!waterMarkCustom && !waterMark
                          ? setShowWaterMarkModal(true)
                          : exportFiles()
              }
              icon={<ExportOutlined/>}
          >
            批量导出
          </Button>
      ),
      key: 'exportGroup',
    };
    if (rowSelect === 'true') _item.push(exportFilesItem);
    return <Menu items={_item}/>;
  };
  const exportModule = (type, extension) => {
    setExportLoading(true);
    let _data = addFilterAndSearchParams({
      reportName,
      pageIndex: 0,
      pageSize: 0,
      userId: USER_ID,
    });
    exportAccountData({ responseType: 'blob' }, { exportType: type }, _data)
        .then((res) => {
          const file = new FileReader();
          file.readAsText(res, 'utf-8');
          file.onload = function() {
            // 接口返回的是blob类型，需转换为json判断code值
            const messageInfo = isSuccess(file.result);
            if (messageInfo.code !== 0) {
              message.warning(
                  messageInfo.code === -1 && messageInfo.msg
                      ? messageInfo.msg
                      : '下载失败！',
              );
              setExportLoading(false);
            } else {
              const url = window.URL.createObjectURL(
                  new Blob([res], {
                    type: 'application/octet-stream;charset=UTF-8',
                  }),
              );
              const a = document.createElement('a');
              a.href = url;
              a.target = '_blank';
              a.download =
                  `${reportName}${moment()
                      .format('YYYY-MM-DD-HH-mm-ss')
                      .replaceAll('-', '')}.` + extension;
              a.click();
              a.remove();
              setExportLoading(false);
            }
          };
        })
        .catch((err) => {
          setExportLoading(false);
        });
  };
  const exportImage = () => {
    let _data = addFilterAndSearchParams({
      reportName,
      pageIndex: 0,
      pageSize: 0,
      userId: USER_ID,
    });
    exportJPG({ responseType: 'blob' }, _data).then((res) => {
      const file = new FileReader();
      file.readAsText(res, 'utf-8');
      file.onload = function() {
        // 接口返回的是blob类型，需转换为json判断code值
        const messageInfo = isSuccess(file.result);
        if (messageInfo.code !== 0) {
          message.warning(
              messageInfo.code === -1 && messageInfo.msg
                  ? messageInfo.msg
                  : '下载失败！',
          );
          setExportLoading(false);
        } else {
          const url = window.URL.createObjectURL(
              new Blob([res], { type: 'application/zip;charset=UTF-8' }),
          );
          const a = document.createElement('a');
          a.href = url;
          a.target = '_blank';
          a.download = `${reportName}${moment()
              .format('YYYY-MM-DD-HH-mm-ss')
              .replaceAll('-', '')}.zip`;
          a.click();
          a.remove();
          setExportLoading(false);
        }
      };
    });
  };
  // 添加批量导出文件功能  --edit by zhangzhiwei  2023/06/26
  const exportFiles = () => {
    if (!!waterMarkCustom && !waterMarkContent)
      return message.warning('请输入水印内容！');
    setExportLoading(true);
    let keyItems = selectedRows.map((item) => item.key);
    let _data = addFilterAndSearchParams({
      reportName,
      pageIndex: 0,
      pageSize: 0,
      userId: USER_ID,
      keys: keyItems,
      watermark: waterMarkContent, // 文件水印内容
    });
    reportFilesDownload(
        { responseType: 'blob' },
        { exportType: 'application/zip;charset=UTF-8' },
        _data,
    ).then((res) => {
      const file = new FileReader();
      file.readAsText(res, 'utf-8');
      file.onload = function() {
        const messageInfo = isSuccess(file.result);
        if (messageInfo.code !== 0) {
          message.warning(
              messageInfo.code === -1 && messageInfo.msg
                  ? messageInfo.msg
                  : '下载失败！',
          );
          setExportLoading(false);
        } else {
          const url = window.URL.createObjectURL(
              new Blob([res], { type: 'application/octet-stream;charset=UTF-8' }),
          );
          const a = document.createElement('a');
          a.href = url;
          a.target = '_blank';
          a.download = `${reportName}${moment()
              .format('YYYY-MM-DD-HH-mm-ss')
              .replaceAll('-', '')}.zip`;
          a.click();
          a.remove();
          setExportLoading(false);
          if (!!showWaterMarkModal) setShowWaterMarkModal(false);
        }
      };
    });
  };

  //下载台账附件
  // 添加附件下载功能  --edit by zhangzhiwei  2023/06/27
  const downloadAccountFiles = (path) => {
    let isZip = path.includes(',');
    let fileName = path.includes('\\') ? path.split('\\')[1] : path.split('/')[1];
    let fileType = path.split('.')[1];
    let _data = {
      files: path,
    };
    DownloadAccountFiles(_data, {
      responseType: 'blob',
      exportType: fileType,
    }).then((res) => {
      const file = new FileReader();
      file.readAsText(res, 'utf-8');
      file.onload = function() {
        const messageInfo = isSuccess(file.result);
        if (messageInfo.code !== 0) {
          message.warning(
              messageInfo.code === -1 && messageInfo.msg
                  ? messageInfo.msg
                  : '下载失败！',
          );
          setExportLoading(false);
        } else {
          const url = window.URL.createObjectURL(
              new Blob([res], { type: 'application/zip;charset=UTF-8' }),
          );
          const a = document.createElement('a');
          a.href = url;
          a.target = '_blank';
          a.download = isZip ? `${moment().format('MM-DD')}.zip` : `${moment().format('YY-MM-DD')}_${fileName}`;
          a.click();
          a.remove();
          setExportLoading(false);
          if (!!showWaterMarkModal) setShowWaterMarkModal(false);
        }
      };
    });
  };

  // 判断返回值是否为0
  const isSuccess = (value) => {
    let _messageInfo = null;
    try {
      _messageInfo = JSON.parse(value);
    } catch {
      _messageInfo = {
        code: 0,
      };
    }
    return _messageInfo;
  };

  const searchData = (e) => {
    getData(pagination);
  };
  const controlSelectChange = (fieldAlias, e) => {
    let _filterArray = { ...filterObject };
    _filterArray[fieldAlias] = e;
    setFilterObject(_filterArray);
  };
  const searchInputChange = (e) => {
    setSearchContent(e.target.value);
  };
  const setConfig = (config) => {
    getControlsBarConfig(config);
    getTableLevel(config);
  };
  const addFilterAndSearchParams = (data) => {
    let _data = { ...data };
    // 搜索框是否有值
    if (searchContent) _data.content = searchContent;
    // filterObject是存起来的控制栏的过滤条件
    let _filters = Object.keys(filterObject)
        .filter((key) => {
          let _value = filterObject[key];
          return (
              (isString(_value) && _value) || (isArray(_value) && _value.length)
          );
        })
        .map((key) => {
          let _value = filterObject[key];
          if (isString(_value) && _value)
            return {
              fieldAlias: key,
              fieldValue: _value,
            };
          if (isArray(_value) && _value.length)
            return {
              fieldAlias: key,
              fieldValue: _value.join(','),
            };
          return false;
        });
    // 加上时间过滤参数
    if (dateModel !== 'all' && hasDatePicker && timeFrom && timeTo) {
      _filters.push({
        fieldAlias: hasDatePicker,
        fieldValue: `${timeFrom} 00:00:00,${timeTo} 23:59:59`,
      });
    }
    // 合并手动传入的filters；当配置为筛选框时，筛选框选择值后，会优先取筛选框值
    if (
        filterFields &&
        !_filters.find((item) => item.fieldAlias === filterFields)
    ) {
      let _customerFilterArray = filterFields?.split('|') || [];
      let _customerValueArray = filterValues?.split('|') || [];
      _customerFilterArray.forEach((item, index) => {
        _filters.push({
          fieldAlias: item,
          fieldValue: _customerValueArray[index] || '',
        });
      });
    }
    // 表格上的自定义排序的按钮
    if (sorterObject && sorterObject.order) {
      _data.sortFields = `${sorterObject.columnKey} ${
          sorterObject.order === 'ascend' ? 'asc' : 'desc'
      }`;
    }
    // 增加权限过滤的参数
    if (permissionType && permissionField) {
      _data.filterType = permissionType;
      _data.filterField = permissionField;
    }
    // 并入 _data
    if (_filters.length) _data.filters = _filters;
    return _data;
  };
  // 排序字符串处理成数组
  const handleSortString = (sortString) => {
    let _sortStringArray = sortString.map((item, index) => {
      return {
        label: index === 0 ? '主要排序' : '次要排序',
        value: item.fieldAlias,
        sort: item.sortType,
      };
    });
    setSelectedSortFields(_sortStringArray);
  };
  /**
   * @Description: 根据是否向下合并处理数据，返回合并的key的数组
   * */
  const returnMergeArray = (config) => {
    return config.filter((item) => item.isMerge).map((item) => item.fieldAlias);
  };
  /**
   *  @Description: 根据配置和数据，计算出该合并的字段和每一行是否合并
   * */
  const handleDataToGetRowSpanArray = (config, data) => {
    let _arr = returnMergeArray(config);
    let _merge = {};
    // _merge:{爱好:[[0,3],[3,5]]}
    _arr.forEach((key) => {
      _merge[key] = {};
      let _currentIndex = 0;
      data.forEach((item, index) => {
        if (index > 0) {
          if (item[key] === data[index - 1][key]) {
            _merge[key][_currentIndex] += 1;
            _merge[key][index] = 0;
          } else {
            _currentIndex = index;
            _merge[key][index] = 1;
          }
        } else {
          _merge[key][0] = 1;
        }
      });
    });
    return _merge;
  };
  const getData = (pagination) => {
    setTableLoading(true);
    const { pageSize, current } = pagination;
    // 搜索条件附加到params
    let _data = addFilterAndSearchParams({
      reportName: reportName,
      pageIndex: current,
      pageSize: pageSize,
      userId: USER_ID,
    });
    reportService
        .getReportInfo(_data)
        .then((res) => {
          if (res.code === 0) {
            let _statisticalValues = res.data?.statisticalValues;
            // webAPIData 存在值时使用webAPIData，否则使用原始数据
            let _tableData = res?.data?.data?.list || [];
            if (isInit) {
              setIsInit(false);
            }
            getTableSummaryConfig(reportConfigs, _statisticalValues);
            getTableHeaderConfig(reportConfigs, _tableData);
            let _pagination = { ...pagination };
            _pagination.total = res.data.data?.totalCount || 0;
            setPagination(_pagination);
            setTableData(_tableData);
            // 处理排序字段
            if (_tableData) {
              setShowSortBtn(true);
            } else {
              setShowSortBtn(false);
            }
          } else {
            setShowSortBtn(false);
            message.error('未能查询到报表数据！');
            let _pagination = { ...pagination };
            _pagination.total = 0;
            _pagination.current = 1;
            setPagination(_pagination);
            setTableData([]);
          }
          if (isInit) setIsInit(false);
          setTableLoading(false);
        })
        .catch((err) => {
          setTableLoading(false);
        });
  };
  const getConfigs = async () => {
    let _configs = await reportService.getReportDetails({ reportName });
    if (_configs.code === 0) {
      let _data = _configs.data.data;
      setReportConfigs(_data);
      setIsLocalDataSource(_configs.data.sourceID);
      setConfig(_data);
      setColumns(returnColumn(_data));
      setTableStruct(_data);
      setCurrentReportId(_configs.data.reportId);
      setFirstToGetData(true);
      let _sortFields = await reportService.getReportSortFields({ reportId: _configs.data.reportId });
      if (_sortFields.code === 0) {
        handleSortString(_sortFields.data);
      }
    } else {
      message.error('获取配置失败！');
    }
  };
  /**
   * @Description: 在配置项中，isFilter: true 用来渲染控制框；filterRule: 下拉/文本/多选
   * */
  const getControlsBarConfig = (config) => {
    let _data = config.filter((item) => item.isFilter);
    let _searchPlaceholder = [];
    _data
        .filter((item) => item.filterRule === '文本')
        .forEach((item) => _searchPlaceholder.push(item.fieldAlias));
    setSearchPlaceholder(_searchPlaceholder);
    let _controls = _data.filter((item) =>
        ControlsType.includes(item.filterRule),
    );
    setControls(_controls);
    handleControls(_controls); // 处理控制条，设定默认值
    handleDate(_controls); // 处理日期， 设定默认值
  };
  const getTableHeaderConfig = (config, data) => {
    // 上一版本，下两句代码是被注释了，注释后影响了向下合并功能；如果发现其他问题，请排查此处代码
    setTableStruct(config);
    setColumns(returnColumn(config, data));
    setAllSortFields(returnSortFields(config));
  };
  const getTableSummaryConfig = (config, summary) => {
    if (summary.length === 0) {
      setSummaryArray([]);
      return false;
    }
    let _summaryConfig = {};
    let _configLength = config.length; // 需要判断
    // 合并列
    let _colSpan = -1;
    let _index = 0;
    config
        .filter((item) => item.isShow)
        .forEach((item, index) => {
          if (item.isStatistics) {
            _index += 1;
            _colSpan = -1;
            _summaryConfig[item.fieldAlias] = {
              fieldName: item.fieldAlias,
              index,
              alignType: item.alignType,
              type: item.statisticsRule,
              isMoney: item.type === '数值' && !!hasMoney(item.configItems),
              configItems: item.configItems,
            };
          } else {
            let _name = `空值行${_index}`;
            if (_colSpan === -1) {
              _colSpan = 1;
            } else {
              _colSpan += 1;
            }
            _summaryConfig[_name] = {
              fieldName: _name,
              colSpan: _colSpan,
            };
          }
        });
    summary.forEach((item) => {
      switch (item.totalType) {
        case '全部':
          setHasTotal(true);
          break;
        case '单页':
          setHasSinglePage(true);
          break;
        default:
          break;
      }
      if (_summaryConfig[item.fieldName]) {
        _summaryConfig[item.fieldName][item.totalType] = item.fieldValue;
      }
    });
    // 增加操作列，总结栏最后一个单元格需要延伸一格
    let _sumArr = Object.values(_summaryConfig);
    if (_sumArr && _sumArr.length)
      _sumArr = _sumArr.map((item, index) => {
        let _item = { ...item };
        if (index === _sumArr.length - 1) _item.colSpan += 1;
        return _item;
      });
    setSummaryArray(_sumArr);
  };

  const changeDate = ({ dateFrom, dateTo }, mode) => {
    setTimeFrom(dateFrom);
    setTimeTo(dateTo);
    setDateMode(mode);
  };
  const mapHandleType = (type) => {
    const _map = {
      文本: handleText,
      多行文本: handleText,
      数值: handleNumber,
      数值标签: handleNumberTag,
      标签: handleTag,
      链接: handleLink,
      功能: handleWidget,
      弹窗: handleModal,
      日期: handleDateString,
      日期时间: handleDateTimeString,
    };
    return _map[type] || _map['文本'];
  };
  const returnSortFields = (data) => {
    return data.map((item) => item.fieldAlias);
  };
  // 处理表格数据，生成表头
  const returnColumn = (config, data) => {
    //0. 常规数据
    //1. 合并表头;
    //2. 四类形态的渲染处理;
    //3. 多列表头排序；剔除掉原有图标，需要自己实现排序的按钮
    let _config = [...config].filter((item) => item.isShow);

    function dataStruct(keyArray, dataIndex, obj, dataObj) {
      if (dataIndex < keyArray.length - 1) {
        if (!obj[keyArray[dataIndex]]) {
          obj[keyArray[dataIndex]] = {};
        }
        let _dataIndex = dataIndex + 1;
        dataStruct(keyArray, _dataIndex, obj[keyArray[dataIndex]], dataObj);
      } else if (dataIndex === keyArray.length - 1) {
        obj[keyArray[dataIndex]] = dataObj;
      }
    }

    let _tempObj = {};
    let _fieldAliasArray = data
        ? handleDataToGetRowSpanArray(_config, data)
        : false; // 需要向下合并的字段
    _config.forEach((item) => {
      let _item = {
        title: item.fieldAlias,
        dataIndex: item.fieldAlias,
        key: item.fieldAlias,
        ellipsis: true,
        onCell: (record, rowIndex) => {
          // 1. 如果该字段是需要向下合并的，则进入判断
          let _obj = {};
          if (_fieldAliasArray && _fieldAliasArray[item.fieldAlias]) {
            _obj.rowSpan = _fieldAliasArray[item.fieldAlias][rowIndex];
          }
          return _obj;
        },
        render: (value, record) => {
          // 文本、标签、链接、数值
          // @params: item 当前的config数据，提供该字段的各类配置
          //          value 当前单元格的值
          //          record 点击单元格的整行数据
          let rest = [];
          if (item.type === '功能') {
            /*            rest = {
                          showComponent: setDetailsComponentVisible,
                          setDetailsConfig: setDetailConfig,
                        };    */
            rest = [setDetailsComponentVisible, setDetailConfig];
          } else if (item.type === '弹窗') {
            /*            rest = {
                          showModal: setModalVisible,
                          setExtra: setExtra,
                        };*/
            rest = [setModalVisible, setExtra];
          } else if (item.type === '附件') {
            // 附件支持点击下载  --- edit by zhangzhiwei  on 2023/06/27
            let _value = '';
            if (value && value.includes('\\')) {
              _value = value.split('\\')[1];
            } else if (value && value.includes('/')) {
              _value = value.split('/')[1];
            }
            return (
                _value && (
                    <div
                        className={style.link}
                        onClick={() => {
                          downloadAccountFiles(value);
                        }}
                    >
                      {_value}
                    </div>
                )
            );
          }
          return mapHandleType(item.type)(
              item,
              [undefined, null].includes(value) ? '' : value,
              record,
              ...rest,
          );
        },
      };
      _item.width =
          (!isNaN(Number(item.columnWidth)) && item.columnWidth) || 200; // 列宽，不设置时默认给200；
      if (item.fixedColumn) _item.fixed = item.fixedColumn; // 固定位置
      _item.align = item.alignType || 'left'; // 单元格内对齐方式
      let _keyArray = (
          item.fieldGroup ||
          item.fieldAlias ||
          item.fieldName
      ).split(fieldSplitStr);
      // 自定义排序
      let _sortFields = handleSortFields(sortFields);
      if (_sortFields.includes(item.fieldAlias)) {
        _item.sorter = true;
      }
      dataStruct(_keyArray, 0, _tempObj, _item);
      return _item;
    });
    let _tempArray = [];

    function handleObject2Array(obj, arr) {
      Object.keys(obj).forEach((key, index) => {
        if (obj[key].title && obj[key].title === key) {
          arr.push(obj[key]);
        } else {
          arr.push({ title: key, children: [] });
          handleObject2Array(obj[key], arr[index].children);
        }
      });
    }

    handleObject2Array(_tempObj, _tempArray);
    // 增加序号
    _tempArray.unshift({
      title: '序号',
      dataIndex: 'r',
      key: 'r',
      width: 60,
      fixed: 'left',
    });
    // 增加操作列
    if (permission.includes('editBtn') || permission.includes('deleteBtn')) {
      _tempArray.push({
        title: '操作',
        align: 'center',
        width: permission.reduce((final, curr) => {
          if (['editBtn', 'deleteBtn'].includes(curr)) {
            final += 30;
          }
          return final;
        }, 30),
        fixed: 'right',
        render: (text, record) => {
          return (
              <Space className={style.handleColumnWrapper}>
                {record.IsAllow ? (
                    <Popconfirm
                        placement="topRight"
                        title={'确认取消关注吗'}
                        icon={<QuestionCircleOutlined/>}
                        onConfirm={() => focusProject(record)}
                    >
                      <Tooltip title={'点击取消关注'}>
                        <HeartTwoTone twoToneColor="#eb2f96"/>
                      </Tooltip>
                    </Popconfirm>
                ) : (
                    <Popconfirm
                        placement="topRight"
                        title={'确认关注项目吗'}
                        icon={<QuestionCircleOutlined/>}
                        onConfirm={() => focusProject(record)}
                    >
                      <Tooltip title={'点击添加关注'}>
                        <HeartOutlined/>
                      </Tooltip>
                    </Popconfirm>
                )}
                {permission.includes('editBtn') && !isLocalDataSource ? (
                    <FormOutlined
                        className={style.editButton}
                        onClick={() => {
                          // setEditComponentVisible(true);
                          setModalType('编辑');
                          setCurrentData(record);
                        }}
                    />
                ) : (
                    ''
                )}
                {permission.includes('deleteBtn') && !isLocalDataSource ? (
                    <DeleteOutlined
                        disabled
                        className={style.deleteButton}
                        onClick={() => {
                          Modal.confirm({
                            content: '你确定要删除该数据吗?',
                            onOk: () => {
                              reportService
                                  .delReportData({
                                    reportName: reportName,
                                    userId: USER_ID,
                                    key: record.key,
                                  })
                                  .then((res) => {
                                    if (res.code === 0) {
                                      message.success('删除成功！');
                                      setGetNewData(!getNewData);
                                    }
                                  });
                            },
                          });
                        }}
                    />
                ) : (
                    ''
                )}
              </Space>
          );
        },
      });
    }
    // 统计宽度
    let _x = _tempArray.reduce((final, curr) => {
      return (final += curr.width);
    }, 0);
    setTableX(_x);
    return _tempArray;
  };
  // 返回表格数据
  const returnTable = useMemo(() => {
    return (
        <BasicTable
            rowKey={'key'}
            bordered
            loading={tableLoading}
            dataSource={tableData}
            columns={columns}
            onChange={(p, filters, sorter, extra) => {
              // 2023年4月7日，报表当前未实现filter功能，该参数暂未使用
              const { action } = extra;
              if (action === 'paginate') {
                let _pagination = { ...pagination };
                _pagination.current = p.current;
                _pagination.pageSize = p.pageSize;
                setPagination(_pagination);
              }
              if (action === 'sort') {
                setSorterObject(sorter);
              }
            }}
            // 添加表格行勾选功能  --edit by zhangzhiwei on 2023/06/26
            rowSelection={
              rowSelect === 'true'
                  ? {
                    type: 'checkbox',
                    selectedRowKeys: selectedRows.map((item) => item.key),
                    onChange: (selectedRowKeys, selectedRows) => {
                      setSelectedRows(selectedRows);
                    },
                  }
                  : false
            }
            pagination={permission.includes('pagination') ? pagination : false}
            // 237是内置图片高度
            scroll={{
              y: tableData && tableData.length ? `calc(100% - 44px)` : 237,
              x: tableX,
            }}
            summary={(pageData) => {
              if (summaryArray.length && tableData && tableData.length)
                return (
                    <Table.Summary fixed>
                      <Table.Summary.Row>
                        {hasSinglePage
                            ? summaryArray.map((item, index) => {
                              if (item.fieldName === '空值行0') {
                                return (
                                    <Table.Summary.Cell
                                        key={`summary_${index}`}
                                        index={0}
                                        colSpan={item.colSpan + (rowSelect === 'true' ? 2 : 1)}
                                    >
                              <span
                                  style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    textAlign: 'center',
                                  }}
                              >
                                小计
                              </span>
                                    </Table.Summary.Cell>
                                );
                              } else if (item.fieldName.includes('空值行')) {
                                return (
                                    <Table.Summary.Cell
                                        key={`summary_${index}`}
                                        index={0}
                                        colSpan={item.colSpan}
                                    />
                                );
                              } else {
                                return (
                                    <Table.Summary.Cell
                                        key={`summary_${index}`}
                                        index={0}
                                    >
                              <span
                                  style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    textAlign: item.alignType,
                                  }}
                              >
                                {item.type.replace('求', '')}:{' '}
                                {returnSummaryNumber(
                                    item.configItems,
                                    item['单页'],
                                    true,
                                )}
                              </span>
                                    </Table.Summary.Cell>
                                );
                              }
                            })
                            : ''}
                      </Table.Summary.Row>
                      <Table.Summary.Row>
                        {hasTotal
                            ? summaryArray.map((item) => {
                              if (item.fieldName === '空值行0') {
                                return (
                                    <Table.Summary.Cell
                                        index={0}
                                        colSpan={item.colSpan + (rowSelect === 'true' ? 2 : 1)}
                                    >
                              <span
                                  style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    textAlign: 'center',
                                  }}
                              >
                                总计
                              </span>
                                    </Table.Summary.Cell>
                                );
                              } else if (item.fieldName.includes('空值行')) {
                                return (
                                    <Table.Summary.Cell
                                        index={0}
                                        colSpan={item.colSpan}
                                    />
                                );
                              } else {
                                return (
                                    <Table.Summary.Cell index={0}>
                              <span
                                  style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    textAlign: item.alignType,
                                  }}
                              >
                                {item.type.replace('求', '')}:{' '}
                                {returnSummaryNumber(
                                    item.configItems,
                                    item['全部'],
                                    true,
                                )}
                              </span>
                                    </Table.Summary.Cell>
                                );
                              }
                            })
                            : ''}
                      </Table.Summary.Row>
                    </Table.Summary>
                );
            }}
        />
    );
  }, [columns, tableLoading, tableData, selectedRows]);
  const changeSortField = (value, index, key) => {
    let _selectedSortFields = [...selectedSortFields];
    _selectedSortFields[index][key] = value;
    setSelectedSortFields(_selectedSortFields);
  };
  const addOtherSortFields = () => {
    let _selectedSortFields = [...selectedSortFields];
    _selectedSortFields.push({
      label: '次要排序',
      value: '',
      sort: 'asc',
    });
    setSelectedSortFields(_selectedSortFields);
  };
  const deleteSortField = (index) => {
    let _selectedSortFields = [...selectedSortFields];
    _selectedSortFields.splice(index, 1);
    setSelectedSortFields(_selectedSortFields);
  };
  const setTableHeight = () => {
    if (!tableWrapperRef.current) return;
    const clientHeight = tableWrapperRef.current?.clientHeight || 0;
    const clientWidth = tableWrapperRef.current?.clientWidth || 0;
    const _height = controlRef.current?.clientHeight; // 控制条的高度
    const paginationHeight = 75; // 分页部分的高度
    const tableHeaderHeight = tableHeaderLevel * 40; // 表头高度
    const summaryHeight = summaryArray.length
        ? 40 * (Number(hasTotal) + Number(hasSinglePage))
        : 0; // 总结栏的高度
    const _minus =
        clientHeight -
        _height -
        16 -
        4 -
        tableHeaderHeight -
        paginationHeight -
        summaryHeight -
        10;
    setListHeight(clientHeight - _height - paginationHeight - 4 - 6 - 16 - 2);
    setTableY(_minus);
  };
  const getTableLevel = (config) => {
    let _level =
        config.reduce((final, curr) => {
          return (final = curr.level > final ? curr.level : final);
        }, 1) || 1;
    setTableHeaderLevel(_level);
  };
  const saveReportListSortFields = (callback) => {
    reportService
        .saveReportListSortFields({
          reportId: currentReportId,
          sortFields: selectedSortFields
              .filter((item) => item.value)
              .map((item) => ({
                fieldAlias: item.value,
                sortType: item.sort,
              })),
        })
        .then((res) => {
          if (res.code === 0) {
            message.success('排序保存成功！');
            callback();
          } else {
            message.error(res.msg);
          }
        });
  };
  /**
   *  @Description: 判断是否存在【时间】类型的选择，并返回组件；并记录默认值
   * */
  const handleControls = (controls) => {
    // 过滤出非日期的字段，存储默认值
    let _controls = controls.filter((item) => item.type !== '日期');
    _controls.forEach((item) => {
      let _configItems = item.configItems.split('|');
      _configItems.forEach((str) => {
        if (str.includes('defaultValue=')) {
          controlSelectChange(
              item.fieldAlias,
              str.replace('defaultValue=', ''),
          );
        }
      });
    });
  };
  const handleDate = (obj) => {
    let _typeObj = obj.find((item) => item.filterRule === '日期');
    setHasDatePicker(_typeObj ? _typeObj.fieldAlias : '');
    const _configItems = _typeObj?.configItems.split('|') || [''];
    let _showModels = _configItems
        .find((item) => item.includes('showModels='))
        ?.replace('showModels=', '')
        ?.split(',');
    let _defaultDate = _configItems
        .find((item) => item.includes('defaultDate='))
        ?.replace('defaultDate=', '')
        ?.split(',');
    let _defaultModel =
        _configItems
            .find((item) => item.includes('defaultModel='))
            ?.replace('defaultModel=', '') || 'year';
    _defaultDate = MODEL.includes(_defaultModel) ? _defaultDate : 'year'; // 确保值符合要求
    if (_defaultDate && _defaultDate.length > 1) {
      _defaultDate = {
        dateFrom: moment(_defaultDate[0]),
        dateTo: moment(_defaultDate[1]),
      };
    } else if (_defaultDate && _defaultDate.length === 1) {
      _defaultDate = {
        dateFrom: moment(_defaultDate[0]),
        dateTo: moment(_defaultDate[0]),
      };
    } else {
      _defaultDate = { dateFrom: moment(), dateTo: moment() };
    }
    // 给定默认值，初始化时可以加载
    changeDate(
        {
          dateFrom: _defaultDate?.dateFrom
              .clone()
              .startOf(_defaultModel)
              .format(dateFormat),
          dateTo: _defaultDate?.dateTo
              .clone()
              .endOf(_defaultModel)
              .format(dateFormat),
        },
        _defaultModel,
    );
    setDefaultDateConfig({
      defaultDate: _defaultDate?.dateFrom,
      defaultModel: _defaultModel,
      showModels: _showModels,
    });
  };
  const focusProject = (record) => {
    reportService
        .setReportAllow({
          userId: USER_ID,
          reportName: reportName,
          reportKey: record.key,
        })
        .then((res) => {
          if (res.code === 0) {
            message.success(`${record.IsAllow ? '取消' : '关注'}成功！`);
            getData(pagination);
          } else {
            message.error(`${record.IsAllow ? '取消' : '关注'}失败！`);
          }
        });
  };
  const printTable = () => {
    let _columns = columns.filter(item => item.title !== '操作');
    Print({ tableData, columns: _columns, name: reportName }, 'simple_table');
  };

  function getRefHeight() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      let _height = controlRef?.current.clientHeight;
      setControlsHeight(_height);
    }, 100);
  }

  useEffect(() => {
    if (firstToGetData) {
      getData(pagination);
    }
    getRefHeight();
  }, [firstToGetData]);
  useEffect(() => {
    if (tableHeaderLevel) setTableHeight();
  }, [tableHeaderLevel]);
  useEffect(() => {
    if (!isInit) {
      let _pagination = { ...pagination };
      if (_pagination.current === 1) {
        getData(pagination);
      } else {
        _pagination.current = 1;
        setPagination(_pagination);
      }
    }
  }, [timeFrom, timeTo, sorterObject, filterObject, getNewData]);
  useEffect(() => {
    if (firstToGetData) {
      getData(pagination);
    }
  }, [pagination.current, pagination.pageSize]);
  useEffect(() => {
    getConfigs();
    window.addEventListener('resize', getRefHeight);
    return () => window.removeEventListener('resize', getRefHeight);
  }, []);
  useEffect(() => {
    trigger?.('selectedRows');
  }, [selectedRows]);
  return (
      <div className={style.reportManage} style={{ ...(props.style ?? {}) }} ref={tableWrapperRef}>
        {/* 预留容器，提供给点击后的功能显示 */}
        {detailsComponentVisible ? (
            <div
                className={style.contentWrapper}
                style={{
                  position: 'absolute',
                  zIndex: 100,
                  width: 'calc(100% - 16px)',
                  height: 'calc(100% - 16px)',
                }}
            >
              <DetailsComponent
                  url={detailConfig.url}
                  params={detailConfig.params}
                  onCancel={() => setDetailsComponentVisible(false)}
              />
            </div>
        ) : (
            ''
        )}
        {/* 为方便阅读，分开两部分代码 */}
        <div
            className={style.contentWrapper}
            style={{ zIndex: detailsComponentVisible ? -1 : 'auto' }}
        >
          <Row className={style.controlRow} ref={controlRef}>
            <Space style={{ flex: 1 }} size={8} wrap={true}>
              {/*时间搜索控件，确保时间搜索控件在第一个，单独匹配*/}
              {hasDatePicker &&
              defaultDateConfig.defaultDate !== null &&
              permission.includes('filters') ? (
                  <DatePickerGroup
                      showModels={defaultDateConfig.showModels}
                      onChange={changeDate}
                      format={dateFormat}
                      defaultModel={defaultDateConfig.defaultModel}
                      defaultDate={defaultDateConfig.defaultDate}
                  />
              ) : (
                  ''
              )}
              {controls && controls.length && permission.includes('filters')
                  ? controls
                      .filter((control) =>
                          ['下拉', '多选', '复选框'].includes(control.filterRule),
                      )
                      .map((control) => {
                        return (
                            <Form.Item
                                label={control.fieldAlias}
                                key={control.fieldAlias}
                            >
                              <ReturnControlComponent
                                  style={{ width: 240 }}
                                  type={control.filterRule}
                                  reportName={reportName}
                                  fieldAlias={control.fieldAlias}
                                  configItems={control.configItems}
                                  onChange={(e) =>
                                      controlSelectChange(control.fieldAlias, e)
                                  }
                                  filterFields={filterFields}
                                  filterValues={filterValues}
                                  filterObject={addFilterAndSearchParams({
                                    reportName: reportName,
                                    userId: USER_ID,
                                  })}
                              />
                            </Form.Item>
                        );
                      })
                  : ''}
              {permission.includes('filters') ? (
                  <Form.Item
                      label={
                        searchPlaceholder && searchPlaceholder.length
                            ? '快速索引'
                            : ''
                      }
                      key={'快速搜索控件'}
                  >
                    {searchPlaceholder && searchPlaceholder.length ? (
                        <ReturnControlComponent
                            placeholder={`请输入${
                                searchPlaceholder.length
                                    ? searchPlaceholder.join('，')
                                    : '关键字'
                            }搜索`}
                            style={{ width: 240 }}
                            type={'文本'}
                            onChange={(e) => {
                              searchInputChange(e);
                            }}
                            onSearch={searchData}
                        />
                    ) : (
                        <Button type={'primary'} onClick={searchData}>
                          搜索
                        </Button>
                    )}
                  </Form.Item>
              ) : (
                  ''
              )}
            </Space>
            {permission.includes('sortBtn') ||
            permission.includes('exportBtn') ||
            permission.includes('addBtn') ? (
                <div style={{ width: 'auto', textAlign: 'end' }}>
                  <Space size={8} nowrap>
                    {permission.includes('addBtn') && !isLocalDataSource ? (
                        <Form.Item>
                          <Button
                              type={'primary'}
                              title={'自定义排序'}
                              icon={<PlusOutlined/>}
                              onClick={() => {
                                setModalType('新增');
                                setCurrentData({});
                              }}
                          >
                            添加
                          </Button>
                        </Form.Item>
                    ) : (
                        ''
                    )}
                    {showSortBtn && permission.includes('sortBtn') ? (
                        <Form.Item>
                          <Button
                              type={'primary'}
                              title={'自定义排序'}
                              icon={<SortAscendingOutlined/>}
                              onClick={() => setModalVisible(true)}
                          >
                            排序
                          </Button>
                        </Form.Item>
                    ) : (
                        ''
                    )}
                    {permission.includes('printBtn') ? (
                        <Form.Item>
                          <Button
                              type={'primary'}
                              title={'打印当前页'}
                              onClick={printTable}
                          >
                            打印
                          </Button>
                        </Form.Item>
                    ) : (
                        ''
                    )}
                    {permission.includes('exportBtn') ? (
                        <Form.Item>
                          <Dropdown style={{ float: 'right' }} overlay={menu}>
                            <Button>
                              <Space>
                                导出
                                <DownOutlined/>
                              </Space>
                            </Button>
                          </Dropdown>
                        </Form.Item>
                    ) : (
                        ''
                    )}
                  </Space>
                </div>
            ) : (
                ''
            )}
          </Row>
          <div
              className={style.tableContent}
              style={{ height: `calc(100% - ${controlsHeight || 0}px)` }}
          >
            {columns && columns.length ? (
                returnTable
            ) : (
                <div className={style.spinWrapper}>
                  <Spin/>
                </div>
            )}
          </div>
        </div>
        <Modal
            title={'自定义排序字段'}
            visible={modalVisible}
            onCancel={() => setModalVisible(false)}
            footer={
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                  <Button type={'link'} onClick={() => addOtherSortFields()}>
                    增加次要排序
                  </Button>
                </div>
                <div>
                  <Button onClick={() => setModalVisible(false)}>取消</Button>
                  <Button
                      type={'primary'}
                      onClick={() => {
                        saveReportListSortFields(() => getData(pagination));
                        setModalVisible(false);
                      }}
                  >
                    确认
                  </Button>
                </div>
              </div>
            }
        >
          {selectedSortFields.map((item, index) => (
              <Row key={'label'} className={style.controlRow}>
                <Space size={8} wrap={true}>
                  <Form.Item label={item.label}>
                    <Select
                        style={{ width: 240 }}
                        defaultValue={item.value}
                        value={item.value}
                        onChange={(e) => changeSortField(e, index, 'value')}
                    >
                      <Option value="">未选择</Option>
                      {allSortFields.map((item) => (
                          <Option value={item} key={item}>{item}</Option>
                      ))}
                    </Select>
                  </Form.Item>
                  <Form.Item>
                    <Select
                        style={{ width: 120 }}
                        defaultValue={item.sort}
                        value={item.sort}
                        onChange={(e) => changeSortField(e, index, 'sort')}
                    >
                      <Option value={'asc'}>升序</Option>
                      <Option value={'desc'}>降序</Option>
                    </Select>
                  </Form.Item>
                  {index !== 0 ? (
                      <Form.Item>
                        <MinusCircleOutlined
                            style={{ color: 'rgba(0,0,0,.65)' }}
                            onClick={() => deleteSortField(index)}
                        />
                      </Form.Item>
                  ) : (
                      ''
                  )}
                </Space>
              </Row>
          ))}
        </Modal>
        <Modal
            visible={extraModal}
            onCancel={() => setExtraModal(false)}
            destroyOnClose
            width={800}
        >
          {extra}
        </Modal>
        {/* 编辑表单 */}
        <Modal
            title={`${modalType}报表信息`}
            visible={!!modalType}
            width={'80%'}
            footer={null}
            // visible={true}
            destroyOnClose
            onCancel={() => setModalType('')}
        >
          <ReportEditForm
              modalType={modalType}
              reportDetails={tableStruct}
              reportData={currentData}
              onCancel={() => {
                setModalType('');
                getData(pagination);
              }}
              reportName={reportName}
          />
        </Modal>
        {/* 编辑水印 */}
        <Modal
            title={`添加水印`}
            visible={showWaterMarkModal}
            destroyOnClose
            onCancel={() => setShowWaterMarkModal(false)}
            onOk={exportFiles}
        >
          <Form.Item
              label="水印内容"
              name="水印内容"
              rules={[
                {
                  required: true,
                  message: '请输入水印内容...!',
                },
              ]}
          >
            <Input
                placeholder="请输入水印内容..."
                onChange={(e) => {
                  setWaterMarkContent(e.target.value);
                }}
            />
          </Form.Item>
        </Modal>
      </div>
  );
});
const mapStateToProps = (state) => {
  const allWidgets = state.getIn(['global', 'globalConfig', 'allWidgets']);
  let _flatWidgets = [];
  const flatWidgets = (arr) => {
    arr.forEach((item) => {
      if (item.widgets && item.widgets.length) {
        flatWidgets(item.widgets);
      } else {
        _flatWidgets.push(item);
      }
    });
  };
  flatWidgets(allWidgets);
  return {
    allWidgets: _flatWidgets,
  };
};
export default ReportsManage;