feat: 新增BasicReport

packages/base-components/BasicReport/src/ReportEditForm.js

+/*
+ ** 报表的编辑、新增表单
+ ** create by ChenLong on 2022/8/10
+ ** 功能路径：src\pages\product\ReportsManage\ReportEditForm.js
+ ** 菜单参数列表：*变量名*(变量说明，数据类型，是否必填，取值范围)
+ **/
+import React, { useEffect, useState } from 'react';
+import { Form, Input, DatePicker, InputNumber, Space, Row, Col, Button, message } from 'antd';
+import moment from 'moment';
+import { submitReportData } from '../../../api/service/report';
+// 类型
+const DATE_PICKER_ARRAY = ['日期'];
+const DATE_TIME_PICKER_ARRAY = ['日期时刻'];
+const DATE_TYPE = ['日期', '日期时刻']; // 用来匹配是否需要转为日期对象；
+const NUMBER_ARRAY = ['数值', '金额'];
+// 形态对应组件
+
+// 对应关系
+
+/**
+ *  @Description: 函数描述
+ *  @Date: 2022/8/10
+ *  @Author: ChenLong
+ *  @Params: reportDetails 各个字段的配置列表
+ *           data 与reportDetails对应的值
+ * */
+const ReportEditForm = ({ reportDetails, reportData, onCancel, reportName }) => {
+  if (!reportData || Object.keys(reportData).length === 0) return <>未传递表单数据</>;
+  const [form] = Form.useForm();
+  const formItemLayout = {
+    labelCol: {
+      span: 8,
+    },
+    wrapperCol: {
+      span: 16,
+    },
+  };
+  const handleDate = (reportDetails, data) => {
+    let _data = { ...data };
+    reportDetails.forEach(item => {
+      if (DATE_TYPE.includes(item.type)) {
+        _data[item.fieldAlias] = moment(data[item.fieldAlias]);
+      }
+    });
+    return _data;
+  };
+  const componentMap = (config) => {
+    if (DATE_TIME_PICKER_ARRAY.includes(config.type)) {
+      return <DatePicker showTime />;
+    } else if (DATE_PICKER_ARRAY.includes(config.type)) {
+      return <DatePicker />;
+    } else if (NUMBER_ARRAY.includes(config.type)) {
+      return <InputNumber />;
+    } else {
+      return <Input />;
+    }
+  };
+  const submitReportForm = () => {
+    let _data = form.getFieldsValue();
+    console.log(_data);
+    // {
+    //   "key": "string",
+    //   "fieldName": "string",
+    //   "fieldValue": "string"
+    // }
+    let final = [];
+    Object.keys(_data).forEach(key => {
+      let value = reportData[key];
+      let _value = _data[key];
+      if (moment.isMoment(_data[key])) {
+        _value = moment(_data[key]).format('YYYY-MM-DD HH:mm:ss');
+      }
+      if (value !== _value) {
+        final.push({
+          key: reportData.Key,
+          fieldName: key,
+          fieldValue: _value,
+        });
+      }
+    });
+    console.log(final);
+    // reportService.updateReportData()
+    submitReportData({
+      reportName: reportName,
+      userId: window.globalConfig.userInfo.OID,
+    }, final).then(res => {
+      if (res.code === 0) {
+        message.success('保存成功！');
+        onCancel();
+      }
+    });
+  };
+  useEffect(() => {
+    if (reportData && Object.keys(reportData).length) form.setFieldsValue(handleDate(reportDetails, reportData));
+  }, [reportData]);
+  return (
+    <div>
+      <Form {...formItemLayout} form={form}>
+        <Row>
+          {
+            reportDetails && reportDetails.map(config => {
+              return <Col span={8}>
+                <Form.Item label={config.fieldAlias} name={config.fieldAlias}>
+                  {componentMap(config)}
+                </Form.Item>
+              </Col>;
+            })
+          }
+        </Row>
+        <Row>
+          <Col span={24} style={{textAlign:'right'}}>
+            {/*<Form.Item style={{textAlign:'right'}}>*/}
+              <Button type={'primary'} onClick={submitReportForm}>提交</Button>
+            {/*</Form.Item>*/}
+          </Col>
+        </Row>
+      </Form>
+    </div>
+  );
+};
+export default ReportEditForm;

packages/base-components/BasicReport/src/api/index.js

+import { Modal, notification } from 'antd';
+
+import { instanceRequest, service } from '@wisdom-utils/utils';
+
+import AppService from './service/base';
+import notificationService from './service/notification';
+import AccountService from './service/account';
+import AssetService from './service/asset';
+import ReportService from './service/report';
+// import WorkflowService from './service/workflow';
+
+const { warning } = Modal;
+// eslint-disable-next-line no-return-await
+instanceRequest.reportCodeError = true;
+
+const codeMessage = {
+  200: '服务器成功返回请求的数据。',
+  201: '新建或修改数据成功。',
+  202: '一个请求已经进入后台排队（异步任务）。',
+  204: '删除数据成功。',
+  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+  401: '用户没有权限(令牌、用户名、密码错误), 或当前的会话已超时，请重新登录',
+  403: '用户得到授权，但是访问是被禁止的。',
+  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+  406: '请求的格式不可得。',
+  410: '请求的资源被永久删除，且不会再得到的。',
+  422: '当创建一个对象时，发生一个验证错误。',
+  500: '服务器发生错误，请检查服务器。',
+  502: '网关错误。',
+  503: '服务不可用，服务器暂时过载或维护。',
+  504: '网关超时。',
+};
+
+let instance = null;
+instanceRequest.setErrorHandler(error => {
+  const { response } = error;
+  if (response && response.status) {
+    const errorText = codeMessage[response.status] || response.statusText;
+    const { status, config } = response;
+    if (status === 401) {
+      if (!instance) {
+        instance = warning({
+          title: '错误信息',
+          content: `${codeMessage[status]}`,
+          centered: true,
+          onOk(close) {
+            window.share &&
+            window.share.event &&
+            window.share.event.emit('triggerLoginout');
+            close();
+          },
+        });
+      }
+    } else {
+      notification.error({
+        message: `请求错误 ${status}: ${config.url}`,
+        description: errorText,
+      });
+    }
+  } else if (!response) {
+    notification.error({
+      description: '您的网络发生异常，无法连接服务器',
+      message: '网络异常',
+    });
+  }
+  return response;
+});
+
+
+const appService = service(AppService);
+const noticeService = service(notificationService);
+const accountService = service(AccountService);
+const assetService = service(AssetService);
+// const workflowService = service(WorkflowService);
+const reportService = service(ReportService);
+export {
+  appService,
+  noticeService,
+  accountService,
+  assetService,
+  // workflowService
+  reportService
+};

packages/base-components/BasicReport/src/api/service/report.js

+/*
+ ** 轻量化报表平台接口
+ ** create by ChenLong on 2022/6/24
+ ** 功能路径：src\api\service\report.js
+ ** 菜单参数列表：*变量名*(变量说明，数据类型，是否必填，取值范围)
+ **/
+import { request } from '@wisdom-utils/utils';
+import * as constants from '../../constants';
+
+const BASEURL = '/PandaAssets/Assets/ReportManager';
+export const API = {
+  GET_REPORT_INFO: `${BASEURL}/GetReportInfo`, // 获取报表信息
+  GET_REPORT_FILTER_VALUE: `${BASEURL}/GetReportFilterValue`, // 获取过滤字段的值的枚举
+  GET_REPORT_CONFIG_LIST: `${BASEURL}/GetReportConfigList`, // 获取配置列表
+  GET_REPORT_DETAILS_INFO: `${BASEURL}/GetReportDetailsInfo`, // 获取配置详情
+  GET_TABLES: `${BASEURL}/GetTables`, // 查询表
+  GET_TABLE_FIELDS: `${BASEURL}/GetTableFields`, // 查询表内的字段
+  ADD_REPORT_INFO: `${BASEURL}/AddReportInfo`, // 创建报表主表、关联报表子表
+  EDIT_REPORT_INFO: `${BASEURL}/AddReportInfo`,
+  ADD_REPORT_DETAIL_INFO: `${BASEURL}/AddReportDetailInfo`, // 附加子表字段到主表
+  DELETE_REPORT_INFO: `${BASEURL}/DeleteReportInfo`, // 删除报表
+  DELETE_REPORT_DETAIL_INFO: `${BASEURL}/DeleteReportDetailInfo`, // 删除字段
+  EXPORT_ACCOUNT_DATA: `${BASEURL}/ExportAccountData`, // 导出数据
+  SAVE_REPORT_LIST_SORT_FIELDS: `${BASEURL}/SaveReportListSortFields`, // 保存排序
+  ADD_REPORT_DETAIL_INFO_INDEX: `${BASEURL}/AddReportDetailInfoIndex`, // 变更接口顺序
+  UPDATE_REPORT_DATA: `${BASEURL}/UpdateReportData`, // 更新报表数据
+};
+const reportService = {
+  getReportInfo: {
+    url: API.GET_REPORT_INFO,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  getReportFilterValue: {
+    url: API.GET_REPORT_FILTER_VALUE,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_METHOD_GET,
+  },
+  getReportConfigList: {
+    url: API.GET_REPORT_CONFIG_LIST,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_METHOD_GET,
+  },
+  getReportDetailsInfo: {
+    url: API.GET_REPORT_DETAILS_INFO,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_METHOD_GET,
+  },
+  getTables: {
+    url: API.GET_TABLES,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_METHOD_GET,
+  },
+  getTableFields: {
+    url: API.GET_TABLE_FIELDS,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  addReportInfo: {
+    url: API.ADD_REPORT_INFO,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  editReportInfo: {
+    url: API.EDIT_REPORT_INFO,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  addReportDetailInfo: {
+    url: API.ADD_REPORT_DETAIL_INFO,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  deleteReportInfo: {
+    url: API.DELETE_REPORT_INFO,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_METHOD_GET,
+  },
+  deleteReportDetailInfo: {
+    url: API.DELETE_REPORT_DETAIL_INFO,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_METHOD_GET,
+  },
+  saveReportListSortFields: {
+    url: API.SAVE_REPORT_LIST_SORT_FIELDS,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  addReportDetailInfoIndex: {
+    url: API.ADD_REPORT_DETAIL_INFO_INDEX,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+  updateReportData: {
+    url: API.UPDATE_REPORT_DATA,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
+};
+export const submitReportData = (params, data) => request({
+  url: API.UPDATE_REPORT_DATA,
+  method: 'post',
+  params,
+  data,
+});
+export const exportAccountData = (options, params, data) =>
+  request({
+    url: API.EXPORT_ACCOUNT_DATA,
+    method: 'post',
+    ...options,
+    params,
+    data,
+  });
+export const addReportDetailInfoIndex = (data) => request({
+  url: API.ADD_REPORT_DETAIL_INFO_INDEX,
+  method: 'post',
+  data,
+});
+export default reportService;

packages/base-components/BasicReport/src/components/Control.js

+// 文本/下拉/多选/时间
+/**
+ *  @Description：
+ *  @Params：
+ *         onChange: 需要传入onChange，接收值的变更
+ * */
+import React, { useEffect, useState } from 'react';
+import { Input, Select } from 'antd';
+import { reportService } from '@/api';
+import { returnDefaultValueOrConfigs } from '../utils/utils';
+
+const { Option } = Select;
+const { Search } = Input;
+const TextSearchComponent = ({ onChange, style, onSearch, placeholder }) => {
+  return <Search title={placeholder} style={style} placeholder={placeholder} onChange={onChange} onSearch={onSearch} />;
+};
+/**
+ * data = ['选项1','选项2'...]
+ * @Props:
+ *        正常选项：武汉
+ *        附带统计数值： 武汉 (20)
+ *
+ * */
+const SelectSearchComponent = ({ onChange, style, data, mode, reportName, fieldAlias, configItems }) => {
+  const [value,setValue] = useState('');
+  const [options, setOptions] = useState([]);
+  const defaultConfigs = returnDefaultValueOrConfigs(configItems, ['defaultValue']);
+  const { defaultValue } = defaultConfigs;
+  const getData = () => {
+    reportService.getReportFilterValue({
+      reportName,
+      fieldAlias,
+    }).then(res => {
+      if (res.code === 0) {
+        setOptions(res.data);
+      }
+    }).catch(err => {
+      console.log(err);
+    });
+  };
+  useEffect(() => {
+    getData();
+    setValue(defaultValue)
+  }, []);
+  return <Select
+    value={value}
+    style={style}
+    onChange={(e) => {
+      onChange(e);
+      setValue(e);
+    }}
+    mode={mode}
+    defaultValue={mode === 'multiple' ? defaultValue.split(',') : defaultValue}
+    allowClear
+    maxTagCount={1}
+    placeholder={`请选择${fieldAlias}`}
+  >
+    {
+      options && options.length ?
+        options.map(
+          item => <Option key={item.filterValue} value={item.filterValue}>{item.filterValue} <span
+            style={{ color: 'rgba(0,0,0,.65)' }}>({item.count})</span></Option>,
+        ) : ''
+    }
+  </Select>;
+};
+const ReturnControlComponent = ({
+                                  type,
+                                  onChange,
+                                  style,
+                                  data,
+                                  onSearch,
+                                  reportName,
+                                  fieldAlias,
+                                  placeholder,
+                                  configItems,
+                                }) => {
+  let _component = '';
+  switch (type) {
+    case '文本':
+      _component =
+        <TextSearchComponent style={style} onChange={onChange} onSearch={onSearch} placeholder={placeholder}
+                             configItems={configItems} />;
+      break;
+    case '下拉':
+    case '多选':
+      _component =
+        <SelectSearchComponent mode={type === '多选' ? 'multiple' : ''} style={style} onChange={onChange}
+                               reportName={reportName} fieldAlias={fieldAlias} configItems={configItems} />;
+      break;
+    default:
+      break;
+  }
+  return _component;
+};
+export default ReturnControlComponent;

packages/base-components/BasicReport/src/components/DatePickerGroup.js

+/**
+ * 时间组选择：支持 全部，日，月，年，自定义 类型
+ * props:
+ *      onChange: ({dateFrom, dateTo}, model) => {}。切换时间类型或时间会触发onChange，并传递选择的时间范围和类型。
+ *          注：dateFrom和dateTo都是格式化后的字符串
+ *      format: 格式化字符串格式，默认"YYYY-MM-DD HH:mm:ss"，参看moment格式化支持的
+ */
+import React, { useState, useEffect } from 'react';
+import { Radio, Space, DatePicker } from 'antd';
+import moment from 'moment';
+
+const dateForModel = (model, date = moment()) => {
+    if (!date) {
+        result = { dateFrom: null, dateTo: null };
+        return result;
+    }
+    let result = { dateFrom: null, dateTo: null };
+    switch (model) {
+        case 'day':
+            result = { dateFrom: date.clone().startOf('day'), dateTo: date.clone().endOf('day') };
+            break;
+        case 'week':
+            result = { dateFrom: date.clone().startOf('week'), dateTo: date.clone().endOf('week') };
+            break;
+        case 'month':
+            result = { dateFrom: date.clone().startOf('month'), dateTo: date.clone().endOf('month') };
+            break;
+        case 'quarter':
+            result = { dateFrom: date.clone().startOf('quarter'), dateTo: date.clone().endOf('quarter') };
+            break;
+        case 'year':
+            result = { dateFrom: date.clone().startOf('year'), dateTo: date.clone().endOf('year') };
+            break;
+        case 'all':
+        default:
+            result = { dateFrom: null, dateTo: null };
+            break;
+    }
+    return result;
+};
+const textForModel = model => {
+    switch (model) {
+        case 'day':
+            return '日';
+        case 'week':
+            return '周';
+        case 'month':
+            return '月';
+        case 'quarter':
+            return '季度';
+        case 'year':
+            return '年';
+        case 'all':
+            return '全部';
+        case 'custom':
+            return '自定义';
+        default:
+            return model;
+    }
+};
+
+const useDataGroup = (defaultValue = { dateFrom: null, dateTo: null }, defaultModel = 'all') => {
+    const [model, setModel] = useState(defaultModel);
+    const [value, setValue] = useState(defaultValue);
+    const updateValeu = (_value, _model) => {
+        setModel(_model);
+        setValue(_value);
+    };
+    return [value, model, updateValeu];
+};
+
+const defaultFormat = 'YYYY-MM-DD HH:mm:ss';
+const defaultShowModels = ['all', 'week', 'month', 'quarter', 'year', 'custom'];
+const DatePickerGroup = ({
+    onChange,
+    format = defaultFormat,
+    showModels = defaultShowModels,
+    defaultModel = 'all',
+    defaultDate,
+    value,
+    dateModel,
+}) => {
+    const [model, setModel] = useState(defaultModel);
+    const [dateValue, setDateValue] = useState(() => dateForModel(defaultModel, defaultDate));
+
+    useEffect(() => {
+        if (value || dateModel) {
+            setModel(dateModel);
+            setDateValue(value);
+        }
+    }, [value, dateModel]);
+
+    // 切换类型
+    const changeModel = e => {
+        const _model = e.target.value;
+        const _dateValue = dateForModel(_model);
+        if (!value && !dateModel) {
+            setModel(_model);
+            setDateValue(_dateValue);
+            if (_model === 'custom') return;
+        }
+        const _dateFrom = _dateValue && _dateValue.dateFrom ? _dateValue.dateFrom.format(format) : '';
+        const _dateTo = _dateValue && _dateValue.dateTo ? _dateValue.dateTo.format(format) : '';
+        onChange &&
+            onChange(
+                {
+                    dateFrom: _dateFrom,
+                    dateTo: _dateTo,
+                },
+                _model,
+            );
+    };
+
+    // 切换时间
+    const changeDate = (date, dateString) => {
+        const _dateValue = dateForModel(model, date);
+        const _dateFrom = _dateValue && _dateValue.dateFrom ? _dateValue.dateFrom.format(format) : '';
+        const _dateTo = _dateValue && _dateValue.dateTo ? _dateValue.dateTo.format(format) : '';
+        if (!value && !dateModel) {
+            setDateValue(_dateValue);
+        }
+        onChange &&
+            onChange(
+                {
+                    dateFrom: _dateFrom,
+                    dateTo: _dateTo,
+                },
+                model,
+            );
+    };
+
+    // 切换范围时间
+    const changeRangeDate = (dates, dateStrings) => {
+        const _dateValue = { dateFrom: dates?.[0], dateTo: dates?.[1] };
+        const _dateFrom = _dateValue && _dateValue.dateFrom ? _dateValue.dateFrom.format(format) : '';
+        const _dateTo = _dateValue && _dateValue.dateTo ? _dateValue.dateTo.format(format) : '';
+        if (!value && !dateModel) {
+            setDateValue(_dateValue);
+        }
+        onChange &&
+            onChange(
+                {
+                    dateFrom: _dateFrom,
+                    dateTo: _dateTo,
+                },
+                model,
+            );
+    };
+
+    // 渲染时间选择器
+    const renderDatePicker = () => {
+        let _result = null;
+        switch (model) {
+            case 'day':
+                _result = <DatePicker onChange={changeDate} value={dateValue.dateFrom} />;
+                break;
+            case 'week':
+                _result = <DatePicker picker="week" onChange={changeDate} value={dateValue.dateFrom} />;
+                break;
+            case 'month':
+                _result = <DatePicker picker="month" onChange={changeDate} value={dateValue.dateFrom} />;
+                break;
+            case 'quarter':
+                _result = <DatePicker picker="quarter" onChange={changeDate} value={dateValue.dateFrom} />;
+                break;
+            case 'year':
+                _result = <DatePicker picker="year" onChange={changeDate} value={dateValue.dateFrom} />;
+                break;
+            case 'custom':
+                _result = (
+                    <DatePicker.RangePicker onChange={changeRangeDate} value={[dateValue.dateFrom, dateValue.dateTo]} />
+                );
+                break;
+            case 'all':
+            default:
+                _result = null;
+                break;
+        }
+        return _result;
+    };
+
+    return (
+        <Space size={8}>
+            <Radio.Group value={model} onChange={changeModel} style={{ whiteSpace: 'nowrap' }}>
+                {showModels.map(item => (
+                    <Radio.Button value={item} key={item}>
+                        {textForModel(item)}
+                    </Radio.Button>
+                ))}
+            </Radio.Group>
+            {renderDatePicker()}
+        </Space>
+    );
+};
+export { useDataGroup };
+export default DatePickerGroup;

packages/base-components/BasicReport/src/extra/detailsComponent.js

+/**
+ ** 用来动态加载配置的组件功能函数
+ ** create by ChenLong on 2022/7/28
+ ** @Params: url 功能路径，加载需要的业务组件
+ **          onCancel 从详情组件回到当前功能的函数
+ **          params 其他的必要参数
+ ** 功能路径：src\pages\product\ReportsManage\extra\detailsComponent.js
+ ** 菜单参数列表：*变量名*(变量说明，数据类型，是否必填，取值范围)
+ **/
+import React from 'react';
+import { Button } from 'antd';
+
+const DetailsComponent = ({ url, onCancel, params }) => {
+  const BusinessComponent = React.lazy(() => import(`@/pages/${url}`));
+  return <BusinessComponent onCancel={onCancel} {...params} />;
+};
+export default DetailsComponent;

packages/base-components/BasicReport/src/extra/extraComponents.js

+import AccountPermissionScan from '../../AccountManage/AccountPermissionScan';
+import pic from '../assets/pic.webp';
+const extraComponents = {
+  renderAccount: (props) => {
+    return <AccountPermissionScan accountName={props.accountName} />;
+  },
+  returnImage: (data) => {
+    return <img width={200} height={200} src={pic} alt={data.alt} />;
+  },
+  default: () => <span>若需要使用弹窗功能，请开发或配置功能函数</span>
+};
+export default extraComponents;

packages/base-components/BasicReport/src/index.less

+@import "~antd/es/style/themes/default.less";
+
+.lackParams {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.reportManage {
+  padding: 8px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .contentWrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .controlRow {
+      background: #ffffff;
+      padding: 6px;
+      border-radius: 4px;
+      margin-bottom: 4px;
+      display: flex;
+      flex-direction: row;
+    }
+
+    .tableContent {
+      flex: 1;
+      padding: 6px;
+      background: #ffffff;
+
+      .handleColumnWrapper {
+        display: flex;
+        justify-content: space-around;
+
+        .editButton {
+          cursor: pointer;
+
+          &:hover {
+            color: rgb(24, 144, 255);
+          }
+        }
+
+        .deleteButton {
+          cursor: pointer;
+          color: rgb(255, 0, 0);
+
+          &:hover {
+            //color: rgb(24, 144, 255);
+          }
+        }
+      }
+
+      .spinWrapper {
+        width: 100vw;
+        height: 60vh;
+        display: flex;
+        justify-content: center;
+        align-items: center
+      }
+
+      :global {
+
+        .@{ant-prefix}-table-container {
+          height: 100%;
+
+          & > .@{ant-prefix}-table-body {
+            border-bottom: 1px solid #dbe7fb;
+            border-right: 1px solid #dbe7fb;
+          }
+
+          .@{ant-prefix}-table-body {
+            flex: 1
+          }
+
+          .@{ant-prefix}-table-summary > table > tfoot > tr > td {
+            border-right: none;
+          }
+
+          .@{ant-prefix}-table-summary > table > tfoot > tr:not(:last-child) > td {
+            border-bottom: none;
+          }
+
+          .@{ant-prefix}-table-summary > table > tfoot > tr:last-child > td {
+            border-bottom: 1px solid #dbe7fb;
+          }
+        }
+
+        .@{ant-prefix}-basic-table .@{ant-prefix}-pagination {
+          border-top: none;
+        }
+      }
+    }
+  }
+
+
+  .link {
+    cursor: pointer;
+
+    &:hover {
+      //color: #1685FF;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+
+  :global {
+    .@{ant-prefix}-form-item {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .prefixOrSuffix {
+    color: rgba(0, 0, 0, .65);
+    font-size: 10px;
+  }
+
+  :global {
+    ::-webkit-scrollbar,
+    *::-webkit-scrollbar {
+      width: 0px;
+      height: 6px;
+    }
+
+    ::-webkit-scrollbar-track,
+    *::-webkit-scrollbar-track {
+      background: #F2F2F2;
+      border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb,
+    *::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #DCDCDC;
+    }
+  }
+}

packages/base-components/BasicReport/src/utils/handlers.js

+import style from '../ReportsManage.less';
+import extraComponents from '../extra/extraComponents';
+import moment from 'moment';
+import { Tag } from 'antd';
+import { hasMoney, isNumber } from './utils';
+
+/**
+ * @Params: config下的数值的configRule结构如下，[{最大值: 10,最小值: 0,颜色:'#AAAAAA'}];
+ * @business: configRule有值，则按照configRule设置；没有，按照color设置；
+ *            有最大值，无最小值；['', 1]
+ *            有最大值，有最小值；[2, 10]
+ *            有最小值，无最大值；[11,'']
+ * */
+// 链接 功能 弹窗功能待提出需求
+// 函数名、属性、...
+const clickLink = (config) => {
+  return window.open(config.configItems, '_blank');
+};
+const handleUrl = (allWidgets, config) => {
+
+};
+const handleConfigUrl = (config, record) => {
+  let _configs = config.configItems.split('|');
+// type = 替换|跳转；
+  let _type = '';
+//url=project/pandawork/contractDetails/index?ageSize=100&accountName=软件订单台账|contractCode=${订单编号}|company=${分公司}
+  let _url = '';
+  let _params = {};
+  _configs.forEach(item => {
+    if (item.includes('type=')) _type = item.replace('type=', '');
+    if (item.includes('url=')) {
+      let _tempUrl = item.replace('url=', '');
+      let _urlArray = _tempUrl.split('?');
+      if (_urlArray[1]) {
+        _urlArray[1].split('&').forEach(param => {
+          let _paramArr = param.split('=');
+          if (_paramArr[1] && _paramArr[1].includes('${') && _paramArr[1].includes('}')) {
+            let _key = _paramArr[1].replace(/\$\{|\}/g, '');
+            _params[_paramArr[0]] = record[_key];
+          } else {
+            _params[_paramArr[0]] = _paramArr[1];
+          }
+        });
+      }
+      _url = _urlArray[0];
+    }
+  });
+  return { url: _url, type: _type, params: _params };
+};
+const clickWidget = (config, text, record, showComponents, setDetailsConfig) => {
+  // 功能跳转接口
+  // type=替换|url=product/ReportsManage/ReportsSetting?accountName=${ID}&pageSize=100&title=${name}
+  if (!config.configItems) return message.error('未配置跳转信息');
+  // setDetailsComponentVisible(true);
+  showComponents(true);
+  let urlConfig = handleConfigUrl(config, record);
+  // setDetailConfig(urlConfig);
+  setDetailsConfig(urlConfig);
+};
+const clickModal = (config, showModal, setExtra) => {
+  let _splitArr = config.configItems.split('&');
+  let _fn = _splitArr[0] || 'default';
+  _splitArr.splice(0, 1);
+  let _data = {};
+  _splitArr.forEach(item => {
+    let _item = item.split('=');
+    _data[_item[0]] = _item[1];
+  });
+  // setExtraModal(true);
+  showModal(true);
+  return setExtra(extraComponents[_fn](_data));
+};
+const returnOpacity = (rgba) => {
+  if (!rgba) rgba = 'rgba(0,0,0,.65)';
+  let _str = rgba.replace('rgba(', '').replace(')', '');
+  let _splitStr = _str.split(',');
+  return `rgba(${_splitStr[0]},${_splitStr[1]},${_splitStr[2]},.25)`;
+};
+export const handleNumber = (config, number) => {
+  let _color = '';
+  if (number) number = Number(number); // 当设置精度后，会被转成字符串
+  if (config.numericalConfigs && config.numericalConfigs.length) {
+    config.numericalConfigs.forEach(item => { // 接口对于数值类型的返回为null
+      if (!_color) {
+        let _max = item.maxValue || '';
+        let _min = item.minValue || '';
+        if (_max !== '' && _min === '') {
+          _color = number <= Number(_max) ? '' : item.color;
+        } else if (_min !== '' && _max === '') {
+          _color = number > Number(_min) ? item.color : '';
+        } else {
+          _color = number > Number(_min) && number <= Number(_max) ? item.color : '';
+        }
+      }
+    });
+  } else if (config.color) {
+    _color = config.color;
+  }
+  return number ? <span>
+    <span className={style.prefixOrSuffix} style={{
+      color: _color,
+    }}>{config.prefix || ''}</span>
+    <span style={{
+      color: _color,
+      margin: '0 5px',
+    }}>{hasMoney(config?.configItems) ? (number ? Number(number)?.toLocaleString() : number) : number}</span>
+    <span className={style.prefixOrSuffix} style={{ color: _color }}>{config.suffix || ''}</span>
+  </span> : '-';
+};
+/**
+ * @Params: 标签形态的configRule，[{标签值:'字符串',颜色: '#AAAAAA'}];
+ * */
+export const handleTag = (config, text) => {
+  let _color = '';
+  let _map = {};
+  // 标签需要设置分隔符 2022年7月13日 ChenLong
+  let _configItems = config.configItems.split('|');
+  let _configMap = {};
+  _configItems.forEach(item => {
+    let _arr = item.split('=');
+    _configMap[_arr[0]] = _arr[1];
+  });
+  // 处理label的颜色
+  if (config.labelConfigs && config.labelConfigs.length) {
+    config.labelConfigs.forEach(item => {
+      _map[item.labelValue] = item.color;
+    });
+  }
+  _color = config.color || 'rgba(0,0,0,.85)';
+  // String(text)为了解决可能存在数值类型的数据需要设置成标签的需求
+  return String(text).split(_configMap['分隔符']).map(item => <Tag color={_map[item]}>{item}</Tag>);
+  /*  return String(text).split(_configMap['分隔符']).map(item => <Tag style={{
+      background: _map[item] || _color,
+      border: `1px solid ${_map[item]}`,
+      borderRadius: 4,
+      color: `rgba(0, 0, 0, .65)`,
+    }}>{item}</Tag>);*/
+};
+export const handleText = (config, text) => {
+  return <span style={{ color: config.color || 'rgba(0,0,0,.85)' }}>{text}</span>;
+};
+export const handleLink = (config, text) => {
+  return <span className={style.link} style={{
+    color: config.color || 'rgba(0,0,0,.85)',
+  }} onClick={() => clickLink(config)}>{text}</span>;
+};
+export const handleWidget = (config, text, record, showComponents, setDetailsConfig) => {
+  return <span style={{ color: config.color }} className={style.link}
+               onClick={() => clickWidget(config, text, record, showComponents, setDetailsConfig)}>{text}</span>;
+};
+export const handleModal = (config, text, showModal, setExtra) => {
+  return <span className={style.link} style={{ color: config.color || 'rgba(0,0,0,.85)' }}
+               onClick={() => clickModal(config, showModal, setExtra)}>{text}</span>;
+};
+// 日期
+export const handleDateString = (config, text) => {
+  return text ? moment(text).format('YYYY-MM-DD') : '-';
+};
+// 时刻
+export const handleDateTimeString = (config, text) => {
+  return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-';
+};
+// 处理pageSize
+export const handlePageSize = (numStr) => {
+  return numStr && isNumber(Number(numStr)) ? Number(numStr) : false;
+};
+// 处理默认排序
+export const handleSortFields = (sortFields) => {
+  return sortFields && sortFields.split(',')
+}

packages/base-components/BasicReport/src/utils/utils.js

+const isObject = (obj) => {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+};
+const isString = (obj) => {
+  return Object.prototype.toString.call(obj) === '[object String]';
+};
+const isNumber = (num) => {
+  return Object.prototype.toString.call(num) === '[object Number]';
+};
+const isArray = (arr) => {
+  return Object.prototype.toString.call(arr) === '[object Array]';
+};
+const hasMoney = (configItems) => {
+  if (!configItems) return false;
+  let _items = configItems.split('|');
+  return !!_items.find(item => item === '金额');
+};
+/**
+ *  @Description: 用来在summary中处理数值的配置
+ *  @Params: 参数描述
+ *  @Date: 2022/8/10
+ *  @Author: ChenLong
+ * */
+const returnHandledNumber = (configItems, num) => {
+  // 精度、前缀、后缀、倍率
+  // $_d|_d%|_d*0.0001|金额|0.00
+  if (!configItems) return num;
+  let _items = configItems.split('|');
+  /*  let prefix = '';
+    let suffix = '';*/
+  let template = '_d';
+  let precision = 0;
+  let rate = 1;
+  _items.forEach(item => {
+    let _arr = [];
+    if (item.match(/_d[^\*]/)) {
+      // 后缀
+      template = item;
+    } else if (item.match(/^_d\*/)) {
+      // 倍率
+      let _rate = item.replace(/_d\*/, '');
+      rate = _rate ? Number(_rate) : 1;
+    } else if (item.match(/^0\./)) {
+      // 精度
+      precision = item.replace('0.', '').length;
+    }
+  });
+  // 可能存在NaN的问题
+  let final = _items.includes('金额') ? Number((num * rate).toFixed(precision)).toLocaleString() : Number((num * rate).toFixed(precision));
+  return template.replace(/_d/, final);
+};
+/**
+ *  @Description: 返回configItems内配置的默认值、默认模式等等
+ *  @Params: 参数描述
+ *  @Date: 2022/8/12
+ *  @Author: ChenLong
+ *  @params:
+ *           configItems 报表字段的配置 例如 defaultValue=智慧水务    defaultDateModel=customer|defaultDateValue=2022-01-01,2022-12-31;
+ *           keysArray 所需要返回的值的key的集合，比如你需要获取configItems中的’defaultValue‘，那么keysArray=['defaultValue'];
+ *  @Returns:
+ *          defaultValue 通用参数 默认值
+ *          defaultDateModel 时间参数 默认模式
+ *          defaultDateValue 时间参数 默认时间
+ * */
+const returnDefaultValueOrConfigs = (configItems = '', keysArray = []) => {
+  let _map = {};
+  let _configItemsArray = configItems.split('|');
+  keysArray.forEach(key => {
+    _map[key] = _configItemsArray.find(item => item.includes(`${key}=`))?.replace(`${key}=`, '');
+  });
+  return _map;
+};
+export {
+  isObject, isString, isNumber, hasMoney, isArray, returnHandledNumber, returnDefaultValueOrConfigs,
+};