@ztocwst/rc-pro-materials 0.1.26 → 0.1.28

package/es/components/z-templates-data-common/components/link-renderer/index.js

@@ -0,0 +1,316 @@
+import _Radio from "antd/es/radio";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useEffect, useState, useRef, useContext, useImperativeHandle } from 'react';
+import { ProTable, RcConfigContext } from '@ztocwst/rc-pro';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { tableConfigDefault, separator, timeUnit, getMaxWidth, handleQueryParams, getReportData } from "../../data-common.helper";
+import { handleDimTargetFormat, handleColumns } from "../table-renderer/table-renderer.helper";
+import "./index.less";
+var linkStateDefault = {
+  dataSetName: '',
+  autoLoad: false,
+  refreshRate: 0
+};
+var LinkRenderer = function LinkRenderer(props) {
+  var _tableOptions$paginat, _linkPage$filter;
+  var dimJson = props.dimJson,
+    linkPage = props.linkPage,
+    chartRef = props.chartRef,
+    onConfirm = props.onConfirm,
+    formatter = props.formatter,
+    onBack = props.onBack;
+  var rcProContext = useContext(RcConfigContext);
+  var _ref = rcProContext || {},
+    _ref$tableOptions = _ref.tableOptions,
+    tableOptions = _ref$tableOptions === void 0 ? {} : _ref$tableOptions;
+  var defaultPageSize = (tableOptions === null || tableOptions === void 0 ? void 0 : (_tableOptions$paginat = tableOptions.pagination) === null || _tableOptions$paginat === void 0 ? void 0 : _tableOptions$paginat.defaultPageSize) || 20;
+  var _useState = useState(linkStateDefault),
+    linkState = _useState[0],
+    setLinkState = _useState[1];
+  var tableRef = useRef(null);
+  var queryCacheRef = useRef(null);
+  var timer = null;
+  var handleClearInterval = function handleClearInterval() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+  useEffect(function () {
+    var dataSetName = linkState.dataSetName,
+      autoLoad = linkState.autoLoad,
+      refreshRate = linkState.refreshRate;
+    if (dataSetName) {
+      if (autoLoad) {
+        if (refreshRate) {
+          handleClearInterval();
+          timer = window.setInterval(function () {
+            return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+          }, refreshRate * timeUnit);
+        } else {
+          onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+        }
+      }
+    } else {
+      handleClearInterval();
+    }
+    return function () {
+      handleClearInterval();
+    };
+  }, [linkState.dataSetName, linkState.autoLoad]);
+
+  // 获取表头
+  var handleGetColumns = function handleGetColumns(stateParams) {
+    var index = stateParams.index;
+    // 通过数据源接口名找到数据源配置
+    var find = linkPage[index];
+    var _ref2 = handleDimTargetFormat(find) || {},
+      targets = _ref2.targets;
+    var option = {
+      dimension: [],
+      dimensionSource: [],
+      index: (targets === null || targets === void 0 ? void 0 : targets.index) || [],
+      indexSource: (targets === null || targets === void 0 ? void 0 : targets.indexSource) || []
+    };
+    return handleColumns(option);
+  };
+  var handleUpdateColumns = function handleUpdateColumns(stateParams) {
+    var _tableRef$current;
+    var columns = handleGetColumns(_extends({}, stateParams));
+    // 更新表头
+    (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.updateColumns(columns);
+  };
+  var getDataSource = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
+      var _dimJson$data;
+      var dataSetName, index, dimension, record, columns, queryBind, queryCache, query, queryKeys, recordKeys, dim, queryParams, data, queryData;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (params === void 0) {
+              params = {};
+            }
+            dataSetName = linkState.dataSetName, index = linkState.index, dimension = linkState.dimension, record = linkState.record;
+            columns = handleGetColumns(_extends({}, linkState));
+            /** 查看queryBind是否有 当前查询条件和当前数据源参数（paraJson）建立绑定关系；有的话替换成绑定关系中的"键"，没有则是默认查询配置的"键"，上一级数据源的维度 "值" 或 当前查询条件的"值"入参 */
+            queryBind = linkPage[index].queryBind;
+            queryCache = queryCacheRef.current;
+            query = {};
+            queryKeys = Object.keys(queryCache);
+            if (queryKeys !== null && queryKeys !== void 0 && queryKeys.length) {
+              queryKeys.forEach(function (k) {
+                var _queryBind$find;
+                // "键"（有建立绑定关系 取当前数据源参数（paraJson）的"键"，没有则是默认查询配置的"键"）
+                var key = (queryBind === null || queryBind === void 0 ? void 0 : (_queryBind$find = queryBind.find(function (item) {
+                  return (item === null || item === void 0 ? void 0 : item.currentQueryKey) === k;
+                })) === null || _queryBind$find === void 0 ? void 0 : _queryBind$find.sourceQueryKey) || k;
+                // "值"（当前查询条件的"值"）
+                query[key] = queryCache[k];
+              });
+            }
+            recordKeys = Object.keys(record || {});
+            if (recordKeys.length) {
+              recordKeys.forEach(function (k) {
+                var _queryBind$find2;
+                // 查看是否有绑定关联关系
+                var key = queryBind === null || queryBind === void 0 ? void 0 : (_queryBind$find2 = queryBind.find(function (item) {
+                  return (item === null || item === void 0 ? void 0 : item.parentDimKey) === k;
+                })) === null || _queryBind$find2 === void 0 ? void 0 : _queryBind$find2.sourceQueryKey;
+                if (key) {
+                  // "值"（有建立绑定关系 取上一级数据源的维度的"值"）
+                  query[key] = record[k];
+                }
+              });
+            }
+            if (dimJson !== null && dimJson !== void 0 && (_dimJson$data = dimJson.data) !== null && _dimJson$data !== void 0 && _dimJson$data.length) {
+              dim = dimension === null || dimension === void 0 ? void 0 : dimension.map(function (description) {
+                var _dimJson$data2, _dimJson$data2$find;
+                return {
+                  description: description,
+                  name: (_dimJson$data2 = dimJson.data) === null || _dimJson$data2 === void 0 ? void 0 : (_dimJson$data2$find = _dimJson$data2.find(function (item) {
+                    return item.description === description;
+                  })) === null || _dimJson$data2$find === void 0 ? void 0 : _dimJson$data2$find.name
+                };
+              });
+            }
+            queryParams = handleQueryParams(query);
+            data = _extends({
+              pageNum: 1,
+              pageSize: defaultPageSize
+            }, params, {
+              queryParams: queryParams,
+              dim: dim,
+              target: columns.map(function (item) {
+                return {
+                  description: item.dataIndex
+                };
+              }),
+              dataSetName: dataSetName
+            });
+            queryData = formatter ? formatter === null || formatter === void 0 ? void 0 : formatter(data) : data;
+            return _context.abrupt("return", getReportData(rcProContext, queryData).then(function (_ref4) {
+              var success = _ref4.success,
+                _ref4$result = _ref4.result,
+                result = _ref4$result === void 0 ? {} : _ref4$result;
+              return {
+                success: success,
+                result: result
+              };
+            }));
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getDataSource(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  /** 初始linkState  */
+  var initial = function initial(state) {
+    var _ref5 = state || {},
+      dataSetName = _ref5.dataSetName;
+    /** 二级页未配置 或 自定义dataSetName配错 直接返回 */
+    var Length = linkPage === null || linkPage === void 0 ? void 0 : linkPage.length;
+    var isHave = linkPage === null || linkPage === void 0 ? void 0 : linkPage.some(function (item) {
+      return item.dataSetName === dataSetName;
+    });
+    if (!Length || !isHave) return;
+
+    /** 可以传入二级页下标 */
+    var index = state.index || 0;
+    /** 检查传入二级下标 是否为数字 */
+    var isNumber = typeof index === 'number';
+
+    /** 收集二级页title 计算宽度 */
+    var linkTitle = [];
+    for (var i = 0; i < Length; i++) {
+      var item = linkPage[i];
+      // 找到相同的
+      if (item.dataSetName === dataSetName) {
+        linkTitle.push(item.title);
+      }
+    }
+    var width = getMaxWidth(linkTitle);
+
+    /** 二级页出现重复相同的时候 索引未配置正确 取dataSetName 出现最近一次下标 防止报错 */
+    if (!isNumber || isNumber && (index < 0 || index >= Length)) {
+      for (var _i = 0; _i < Length; _i++) {
+        var _item = linkPage[_i];
+        if (_item.dataSetName === dataSetName) {
+          index = _i;
+          break;
+        }
+      }
+    }
+    var _linkPage$index = linkPage[index],
+      title = _linkPage$index.title,
+      autoLoad = _linkPage$index.autoLoad,
+      refreshRate = _linkPage$index.refreshRate;
+    var stateData = _extends({}, state, {
+      width: width,
+      index: index,
+      title: title,
+      autoLoad: autoLoad,
+      refreshRate: refreshRate
+    });
+    /** 当前进入与上次进入link页不同时需要清空数据 */
+    var isSource = "" + stateData.dataSetName + separator + index === "" + linkState.dataSetName + separator + (linkState === null || linkState === void 0 ? void 0 : linkState.index);
+    var isSame = JSON.stringify(stateData === null || stateData === void 0 ? void 0 : stateData.record) === JSON.stringify(linkState === null || linkState === void 0 ? void 0 : linkState.record);
+    if (!isSource || !isSame) {
+      var _tableRef$current2, _tableRef$current2$up;
+      (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : (_tableRef$current2$up = _tableRef$current2.updateDataSource) === null || _tableRef$current2$up === void 0 ? void 0 : _tableRef$current2$up.call(_tableRef$current2, []);
+    }
+    handleUpdateColumns(stateData);
+    setLinkState(stateData);
+  };
+  var queryChart = function queryChart(value) {
+    var _tableRef$current3;
+    queryCacheRef.current = value;
+    (_tableRef$current3 = tableRef.current) === null || _tableRef$current3 === void 0 ? void 0 : _tableRef$current3.refreshTable({
+      current: 1
+    });
+  };
+  useImperativeHandle(chartRef, function () {
+    return {
+      initial: initial,
+      queryChart: queryChart
+    };
+  });
+
+  /** 切换link */
+  var handleLinkChange = function handleLinkChange(event) {
+    var value = event.target.value;
+    // dataSetName 可能会重复配置 所以使用 dataSetName + 分隔符 + index
+    var _ref6 = (value === null || value === void 0 ? void 0 : value.split(separator)) || [],
+      dataSetName = _ref6[0],
+      index = _ref6[1];
+    var _linkPage$index2 = linkPage[index],
+      title = _linkPage$index2.title,
+      autoLoad = _linkPage$index2.autoLoad,
+      refreshRate = _linkPage$index2.refreshRate;
+    var stateData = _extends({}, linkState, {
+      dataSetName: dataSetName,
+      index: index,
+      title: title,
+      autoLoad: autoLoad,
+      refreshRate: refreshRate
+    });
+    handleUpdateColumns(stateData);
+    setLinkState(stateData);
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "link-head"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "link-title"
+  }, /*#__PURE__*/React.createElement(ArrowLeftOutlined, {
+    className: "arrow-left",
+    onClick: onBack
+  }), /*#__PURE__*/React.createElement("span", null, linkState === null || linkState === void 0 ? void 0 : linkState.title)), (linkPage === null || linkPage === void 0 ? void 0 : (_linkPage$filter = linkPage.filter(function (field) {
+    return (field === null || field === void 0 ? void 0 : field.dataSetName) === linkState.dataSetName;
+  })) === null || _linkPage$filter === void 0 ? void 0 : _linkPage$filter.length) <= 1 ? null : /*#__PURE__*/React.createElement(_Radio.Group, {
+    value: "" + (linkState === null || linkState === void 0 ? void 0 : linkState.title) + separator + linkState.index,
+    onChange: handleLinkChange
+  }, linkPage === null || linkPage === void 0 ? void 0 : linkPage.map(function (field, index) {
+    return (field === null || field === void 0 ? void 0 : field.dataSetName) === linkState.dataSetName ? /*#__PURE__*/React.createElement(_Radio.Button, {
+      value: "" + (field === null || field === void 0 ? void 0 : field.dataSetName) + separator + index.toString(),
+      key: "" + (field === null || field === void 0 ? void 0 : field.dataSetName) + separator + index.toString()
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center',
+        width: linkState.width
+      }
+    }, field === null || field === void 0 ? void 0 : field.title)) : null;
+  }))), /*#__PURE__*/React.createElement(ProTable, {
+    ref: tableRef,
+    config: _extends({}, tableConfigDefault, {
+      pagination: {
+        showSizeChanger: true,
+        defaultPageSize: defaultPageSize
+      },
+      request: function request(data) {
+        var _data$pagination, _data$pagination2, _data$sorter;
+        var pagination = {
+          pageNum: (_data$pagination = data.pagination) === null || _data$pagination === void 0 ? void 0 : _data$pagination.current,
+          pageSize: (_data$pagination2 = data.pagination) === null || _data$pagination2 === void 0 ? void 0 : _data$pagination2.pageSize
+        };
+        var orderBy = [];
+        if ((_data$sorter = data.sorter) !== null && _data$sorter !== void 0 && _data$sorter.order) {
+          var _data$sorter2, _data$sorter3, _data$sorter3$order;
+          orderBy.push({
+            name: (_data$sorter2 = data.sorter) === null || _data$sorter2 === void 0 ? void 0 : _data$sorter2.field,
+            sort: (_data$sorter3 = data.sorter) === null || _data$sorter3 === void 0 ? void 0 : (_data$sorter3$order = _data$sorter3.order) === null || _data$sorter3$order === void 0 ? void 0 : _data$sorter3$order.slice(0, -3)
+          });
+        }
+        return getDataSource(_extends({}, pagination, {
+          orderBy: orderBy
+        }));
+      }
+    })
+  }));
+};
+export default LinkRenderer;

package/es/components/z-templates-data-common/components/link-renderer/index.less

@@ -0,0 +1,31 @@
+.link-head {
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  .ant-radio-group {
+    flex: 1;
+    overflow-x: auto;
+    display: flex;
+  }
+
+  .link-title {
+    display: flex;
+    align-items: center;
+    margin-right: 12px;
+    font-weight: 600;
+    font-size: 20px;
+    color: #333;
+    white-space: nowrap;
+  }
+
+  .arrow-left {
+    margin-right: 5px;
+    font-size: 20px;
+    cursor: pointer;
+  }
+
+  // .link-label {
+  //   display: flex;
+  //   align-items: center;
+  // }
+}

package/es/components/z-templates-data-common/components/table-renderer/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { TypeChartSettingProps } from '../../data-common';
+declare const TableRenderer: (props: TypeChartSettingProps & {
+    activeKey: string;
+}) => import("react").JSX.Element;
+export default TableRenderer;