@teamias/rex-design 0.1.24 → 0.1.26

package/dist/components/base-form/demo/DependencyDemo.js

@@ -80,6 +80,20 @@ export default (function () {
       field: 'category',
       action: 'clear'
     }]
+  }, {
+    valueType: 'select',
+    field: 'subProduct',
+    label: '商品（依赖请求）',
+    tooltip: '开启 dependenciesRequest，类别有值后才发起请求，挂载时不会自动请求',
+    api: '/products',
+    dependenciesRequest: true,
+    dependenciesV2: [{
+      field: 'category',
+      action: 'updateData'
+    }, {
+      field: 'category',
+      action: 'clear'
+    }]
   }, {
     valueType: 'input',
     field: 'showField',

package/dist/components/base-form/modules/renderComponentNode.js

@@ -65,6 +65,25 @@ var getValueTypeMinWidth = function getValueTypeMinWidth(type) {
   return 100;
 };
 
+/**
+ * 判断依赖参数是否就绪
+ * - dependenciesV2 updateData: 依赖字段未就绪时跳过请求
+ */
+var areDependenciesReady = function areDependenciesReady(dependenciesRequest, dependencies, params) {
+  if (!dependenciesRequest) return true;
+  var updateDataFields = dependencies === null || dependencies === void 0 ? void 0 : dependencies.filter(function (dep) {
+    return dep.action === 'updateData';
+  }).map(function (dep) {
+    return dep.field;
+  });
+  if (updateDataFields !== null && updateDataFields !== void 0 && updateDataFields.length) {
+    return updateDataFields.every(function (k) {
+      return params[k] !== undefined && params[k] !== null && params[k] !== '';
+    });
+  }
+  return true;
+};
+
 /** 渲染组件项 */
 export var renderComponentNode = function renderComponentNode(outConfig, values, form) {
   var fields = outConfig.fields,
@@ -345,27 +364,33 @@ export var renderComponentNode = function renderComponentNode(outConfig, values,
               while (1) switch (_context.prev = _context.next) {
                 case 0:
                   _ref5 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, keyWords = _ref5.keyWords, params = _objectWithoutProperties(_ref5, _excluded7);
+                  if (areDependenciesReady(item.dependenciesRequest, item.dependenciesV2, params)) {
+                    _context.next = 3;
+                    break;
+                  }
+                  return _context.abrupt("return", []);
+                case 3:
                   key = JSON.stringify(params);
                   if (!map[key]) {
-                    _context.next = 4;
+                    _context.next = 6;
                     break;
                   }
                   return _context.abrupt("return", map[key]);
-                case 4:
-                  _context.next = 6;
-                  return requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions(item.api, params, item);
                 case 6:
+                  _context.next = 8;
+                  return requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions(item.api, params, item);
+                case 8:
                   _context.t0 = _context.sent;
                   if (_context.t0) {
-                    _context.next = 9;
+                    _context.next = 11;
                     break;
                   }
                   _context.t0 = [];
-                case 9:
+                case 11:
                   res = _context.t0;
                   map[key] = res;
                   return _context.abrupt("return", res);
-                case 12:
+                case 14:
                 case "end":
                   return _context.stop();
               }
@@ -412,7 +437,14 @@ export var renderComponentNode = function renderComponentNode(outConfig, values,
                     case 0:
                       // 拆分参数，keyWords 为搜索关键字，其余为接口参数
                       _params$keyWords = params.keyWords, keyWords = _params$keyWords === void 0 ? '' : _params$keyWords, restParams = _objectWithoutProperties(params, _excluded8);
-                      newParams = restParams; // 处理搜索关键字参数的传递方式
+                      newParams = restParams;
+                      if (areDependenciesReady(item.dependenciesRequest, item.dependenciesV2, newParams)) {
+                        _context2.next = 4;
+                        break;
+                      }
+                      return _context2.abrupt("return", []);
+                    case 4:
+                      // 处理搜索关键字参数的传递方式
                       if (item.apiSearchKey === false) {
                         // 配置为 false，默认传 keyWords 字段
                         newParams.keyWords = keyWords || undefined;
@@ -427,7 +459,7 @@ export var renderComponentNode = function renderComponentNode(outConfig, values,
 
                       // 发起接口请求，返回选项数据
                       return _context2.abrupt("return", (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions(item.api, newParams, item)) || []);
-                    case 4:
+                    case 6:
                     case "end":
                       return _context2.stop();
                   }
@@ -493,8 +525,14 @@ export var renderComponentNode = function renderComponentNode(outConfig, values,
             return _regeneratorRuntime().wrap(function _callee3$(_context3) {
               while (1) switch (_context3.prev = _context3.next) {
                 case 0:
+                  if (areDependenciesReady(item.dependenciesRequest, item.dependenciesV2, params)) {
+                    _context3.next = 2;
+                    break;
+                  }
+                  return _context3.abrupt("return", []);
+                case 2:
                   return _context3.abrupt("return", (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions(item.api, params, item)) || []);
-                case 1:
+                case 3:
                 case "end":
                   return _context3.stop();
               }
@@ -528,8 +566,14 @@ export var renderComponentNode = function renderComponentNode(outConfig, values,
             return _regeneratorRuntime().wrap(function _callee4$(_context4) {
               while (1) switch (_context4.prev = _context4.next) {
                 case 0:
+                  if (areDependenciesReady(item.dependenciesRequest, item.dependenciesV2, params)) {
+                    _context4.next = 2;
+                    break;
+                  }
+                  return _context4.abrupt("return", []);
+                case 2:
                   return _context4.abrupt("return", (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions(item.api, params, item)) || []);
-                case 1:
+                case 3:
                 case "end":
                   return _context4.stop();
               }
@@ -552,8 +596,14 @@ export var renderComponentNode = function renderComponentNode(outConfig, values,
             return _regeneratorRuntime().wrap(function _callee5$(_context5) {
               while (1) switch (_context5.prev = _context5.next) {
                 case 0:
+                  if (areDependenciesReady(item.dependenciesRequest, item.dependenciesV2, params)) {
+                    _context5.next = 2;
+                    break;
+                  }
+                  return _context5.abrupt("return", []);
+                case 2:
                   return _context5.abrupt("return", (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions(item.api, params, item)) || []);
-                case 1:
+                case 3:
                 case "end":
                   return _context5.stop();
               }
@@ -576,8 +626,14 @@ export var renderComponentNode = function renderComponentNode(outConfig, values,
             return _regeneratorRuntime().wrap(function _callee6$(_context6) {
               while (1) switch (_context6.prev = _context6.next) {
                 case 0:
+                  if (areDependenciesReady(item.dependenciesRequest, item.dependenciesV2, params)) {
+                    _context6.next = 2;
+                    break;
+                  }
+                  return _context6.abrupt("return", []);
+                case 2:
                   return _context6.abrupt("return", (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions(item.api, params, item)) || []);
-                case 1:
+                case 3:
                 case "end":
                   return _context6.stop();
               }

package/dist/components/base-form/types/field-type.d.ts

@@ -82,6 +82,8 @@ export interface IBaseFormFieldItem<T extends TValueType = TValueType> {
         action: Extract<'value' | 'search' | 'visible' | 'disabled', 'search' | 'visible' | 'disabled'>;
     }>;
     dependenciesV2?: IDependenciesV2[];
+    /** 开启依赖字段有值才触发 request 请求 */
+    dependenciesRequest?: boolean;
     /** 选择项 */
     options?: Array<TOption>;
     /** api接口 */

package/dist/components/base-table/base-table.js

@@ -230,26 +230,30 @@ export var BaseTable = function BaseTable(_ref) {
     if (loading) return;
     var timer = null;
     var fn = function fn() {
-      var contentBodyEl = document.querySelector(".".concat(state.tableKey));
-      var bodyEl = contentBodyEl === null || contentBodyEl === void 0 ? void 0 : contentBodyEl.querySelector('tbody');
-      // console.log(bodyEl);
-
-      if (!bodyEl) return;
       if (timer) clearTimeout(timer);
       timer = setTimeout(function () {
         timer = null;
-        var bodyRect = bodyEl.getBoundingClientRect();
+        // 重新查询，避免使用过期的 DOM 引用
+        var el = document.querySelector(".".concat(state.tableKey));
+        var tbody = (el === null || el === void 0 ? void 0 : el.querySelector('tbody')) || (el === null || el === void 0 ? void 0 : el.querySelector('.ant-table-tbody'));
+        if (!tbody || !el) return;
+        var bodyRect = tbody.getBoundingClientRect();
         // 54: 底部padding + 分页高度 + 分页padding
-        state.scrollHeight = Math.max(window.innerHeight - bodyRect.top - 54, 300);
-        state.tableWidth = contentBodyEl.offsetWidth;
-        // console.log(state.scrollHeight);
+        var nextScrollHeight = Math.max(window.innerHeight - bodyRect.top - 54, 300);
+        var nextTableWidth = el.offsetWidth;
+        if (nextScrollHeight === state.scrollHeight && nextTableWidth === state.tableWidth) return;
+        state.scrollHeight = nextScrollHeight;
+        state.tableWidth = nextTableWidth;
         update();
       }, 0);
     };
     fn();
-    window.addEventListener('resize', fn);
+    var el = document.querySelector(".".concat(state.tableKey));
+    var observer = el ? new ResizeObserver(fn) : null;
+    observer === null || observer === void 0 || observer.observe(el);
     return function () {
-      window.removeEventListener('resize', fn);
+      observer === null || observer === void 0 || observer.disconnect();
+      if (timer) clearTimeout(timer);
     };
   }, [loading], {
     wait: 0

package/dist/components/base-table/demo/VirtualScroll.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/base-table/demo/VirtualScroll.js

@@ -0,0 +1,177 @@
+import { BaseTable } from "../../..";
+import { useMemo } from 'react';
+
+/**
+ * title: 虚拟滚动 + onCell 行列合并
+ * description: 开启 `virtual` 虚拟滚动渲染海量数据，同时通过 `fieldPropsFn` 为列提供 `onCell`，可实现行合并（rowSpan）和列合并（colSpan）。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEPARTMENTS = ['市场部', '技术部', '人事部', '财务部', '运营部'];
+var ROLES = ['销售', '运营', '前端', '后端', '全栈', 'HRBP', '招聘', '财务', '会计', '审计'];
+var CITIES = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京', '天津', '重庆'];
+var STATUSES = ['在职', '离职', '试用期', '待入职'];
+var TOTAL = 10000;
+export default (function () {
+  var dataSource = useMemo(function () {
+    var deptSize = Math.floor(TOTAL / DEPARTMENTS.length);
+    var data = [];
+    DEPARTMENTS.forEach(function (dept, di) {
+      var count = di === DEPARTMENTS.length - 1 ? TOTAL - data.length - 1 : deptSize;
+      for (var n = 0; n < count; n++) {
+        var idx = data.length + 1;
+        data.push({
+          key: "row-".concat(idx),
+          category: dept,
+          name: "\u5458\u5DE5 ".concat(idx),
+          age: 20 + idx % 30,
+          department: "".concat(dept).concat(Math.floor(n / 100) + 1, "\u7EC4"),
+          role: ROLES[idx % ROLES.length],
+          score: 60 + idx % 40,
+          city: CITIES[idx % CITIES.length],
+          phone: "138".concat(String(idx).padStart(8, '0')),
+          email: "user".concat(idx, "@example.com"),
+          status: STATUSES[idx % STATUSES.length],
+          remark: ''
+        });
+      }
+    });
+
+    // 汇总行
+    data.push({
+      key: 'summary',
+      category: '汇总',
+      name: '合计',
+      age: 0,
+      department: '—',
+      role: '—',
+      score: 0,
+      city: '',
+      phone: '',
+      email: '',
+      status: '',
+      remark: "\u5171 ".concat(TOTAL, " \u4EBA")
+    });
+
+    // 计算 category 列 rowSpan：相邻相同部门合并
+    var i = 0;
+    while (i < data.length) {
+      var cat = data[i].category;
+      var j = i + 1;
+      while (j < data.length && data[j].category === cat) j++;
+      data[i]._categoryRowSpan = j - i;
+      for (var k = i + 1; k < j; k++) data[k]._categoryRowSpan = 0;
+      i = j;
+    }
+    return data;
+  }, []);
+  return /*#__PURE__*/_jsx(BaseTable, {
+    useDataCellRender: false,
+    virtual: true,
+    fieldsConfig: [{
+      title: '部门',
+      dataIndex: 'category',
+      width: 100,
+      align: 'center'
+    }, {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 100
+    }, {
+      title: '年龄',
+      dataIndex: 'age',
+      width: 80,
+      align: 'center'
+    }, {
+      title: '区域',
+      dataIndex: 'department',
+      width: 120
+    }, {
+      title: '岗位',
+      dataIndex: 'role',
+      width: 100
+    }, {
+      title: '评分',
+      dataIndex: 'score',
+      width: 80,
+      align: 'center'
+    }, {
+      title: '城市',
+      dataIndex: 'city',
+      width: 100
+    }, {
+      title: '手机号',
+      dataIndex: 'phone',
+      width: 140
+    }, {
+      title: '邮箱',
+      dataIndex: 'email',
+      width: 200
+    }, {
+      title: '状态',
+      dataIndex: 'status',
+      width: 100,
+      align: 'center'
+    }, {
+      title: '备注',
+      dataIndex: 'remark',
+      width: 220
+    }],
+    fieldPropsFn: function fieldPropsFn() {
+      return {
+        // 行合并：相同部门的行合并为一个单元格
+        category: {
+          onCell: function onCell(record) {
+            var _record$_categoryRowS;
+            return {
+              rowSpan: (_record$_categoryRowS = record._categoryRowSpan) !== null && _record$_categoryRowS !== void 0 ? _record$_categoryRowS : 1
+            };
+          }
+        },
+        // 列合并：汇总行的 city/phone/email/status 设为 colSpan=0，由 remark 列占据
+        city: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 0
+            } : {};
+          }
+        },
+        phone: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 0
+            } : {};
+          }
+        },
+        email: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 0
+            } : {};
+          }
+        },
+        status: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 0
+            } : {};
+          }
+        },
+        // 备注列：汇总行横跨 city/phone/email/status/remark 共 5 列
+        remark: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 5
+            } : {};
+          }
+        }
+      };
+    },
+    dataSource: dataSource,
+    scroll: function scroll(h) {
+      return {
+        y: h
+      };
+    },
+    pagination: false
+  });
+});

package/dist/components/base-table/demo/VirtualScrollDataCell.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/base-table/demo/VirtualScrollDataCell.js

@@ -0,0 +1,196 @@
+import { BaseTable } from "../../..";
+import { useMemo } from 'react';
+
+/**
+ * title: 虚拟滚动 + DataCell 渲染 + 区域行合并
+ * description: 启用 `virtual` 虚拟滚动，同时使用默认的 DataCell 方式渲染单元格，并通过 `fieldPropsFn` 为 `department` 列提供 `onCell`，实现相同区域的行合并（rowSpan）。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEPARTMENTS = ['市场部', '技术部', '人事部', '财务部', '运营部'];
+var ROLES = ['销售', '运营', '前端', '后端', '全栈', 'HRBP', '招聘', '财务', '会计', '审计'];
+var CITIES = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京', '天津', '重庆'];
+var STATUSES = ['在职', '离职', '试用期', '待入职'];
+var TOTAL = 10000;
+
+/** DataCell 文本单元格格式 */
+var textCell = function textCell(value) {
+  return [{
+    type: 'text',
+    props: {
+      value: String(value)
+    }
+  }];
+};
+
+/** DataCell 头像单元格格式 */
+var avatarCell = function avatarCell(idx) {
+  return [{
+    type: 'img',
+    props: {
+      value: "https://api.dicebear.com/7.x/miniavs/svg?seed=".concat(idx),
+      label: "\u5458\u5DE5 ".concat(idx),
+      width: 32,
+      height: 32,
+      style: {
+        borderRadius: '50%'
+      }
+    }
+  }];
+};
+
+/** DataCell 多维度评分单元格格式 */
+var scoreCell = function scoreCell(base) {
+  return [{
+    type: 'group-v2',
+    props: {
+      itemsDirection: 'column',
+      itemsGap: 2,
+      items: [{
+        type: 'text',
+        value: "\u7EE9\u6548\u5206\uFF1A".concat(base),
+        style: {
+          color: '#1677ff'
+        }
+      }, {
+        type: 'text',
+        value: "\u6280\u672F\u5206\uFF1A".concat(Math.min(base + 5, 100)),
+        style: {
+          color: '#52c41a'
+        }
+      }, {
+        type: 'text',
+        value: "\u7EFC\u5408\u5206\uFF1A".concat(Math.round((base + Math.min(base + 5, 100)) / 2)),
+        style: {
+          color: '#faad14'
+        }
+      }]
+    }
+  }];
+};
+
+/** DataCell 标签单元格格式 */
+var tagCell = function tagCell(value) {
+  return [{
+    type: 'tag',
+    props: {
+      value: value,
+      color: value === '在职' ? 'green' : value === '离职' ? 'red' : value === '试用期' ? 'blue' : 'orange'
+    }
+  }];
+};
+export default (function () {
+  var dataSource = useMemo(function () {
+    var deptSize = Math.floor(TOTAL / DEPARTMENTS.length);
+    var data = [];
+    DEPARTMENTS.forEach(function (dept, di) {
+      var count = di === DEPARTMENTS.length - 1 ? TOTAL - data.length : deptSize;
+      for (var n = 0; n < count; n++) {
+        var idx = data.length + 1;
+        var deptGroup = "".concat(dept).concat(Math.floor(n / 100) + 1, "\u7EC4");
+        data.push({
+          key: "row-".concat(idx),
+          _deptGroup: deptGroup,
+          avatar: avatarCell(idx),
+          name: textCell("\u5458\u5DE5 ".concat(idx)),
+          age: textCell(20 + idx % 30),
+          category: textCell(dept),
+          department: textCell(deptGroup),
+          role: textCell(ROLES[idx % ROLES.length]),
+          score: scoreCell(60 + idx % 40),
+          city: textCell(CITIES[idx % CITIES.length]),
+          phone: textCell("138".concat(String(idx).padStart(8, '0'))),
+          email: textCell("user".concat(idx, "@example.com")),
+          status: tagCell(STATUSES[idx % STATUSES.length]),
+          remark: textCell('')
+        });
+      }
+    });
+
+    // 计算 department 列 rowSpan：相邻相同区域合并
+    var i = 0;
+    while (i < data.length) {
+      var grp = data[i]._deptGroup;
+      var j = i + 1;
+      while (j < data.length && data[j]._deptGroup === grp) j++;
+      data[i]._departmentRowSpan = j - i;
+      for (var k = i + 1; k < j; k++) data[k]._departmentRowSpan = 0;
+      i = j;
+    }
+    return data;
+  }, []);
+  return /*#__PURE__*/_jsx(BaseTable, {
+    virtual: true,
+    fieldsConfig: [{
+      title: '头像',
+      dataIndex: 'avatar',
+      width: 64,
+      align: 'center'
+    }, {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 100
+    }, {
+      title: '年龄',
+      dataIndex: 'age',
+      width: 80,
+      align: 'center'
+    }, {
+      title: '部门',
+      dataIndex: 'category',
+      width: 100,
+      align: 'center'
+    }, {
+      title: '区域',
+      dataIndex: 'department',
+      width: 120
+    }, {
+      title: '岗位',
+      dataIndex: 'role',
+      width: 100
+    }, {
+      title: '评分',
+      dataIndex: 'score',
+      width: 160
+    }, {
+      title: '城市',
+      dataIndex: 'city',
+      width: 100
+    }, {
+      title: '手机号',
+      dataIndex: 'phone',
+      width: 140
+    }, {
+      title: '邮箱',
+      dataIndex: 'email',
+      width: 200
+    }, {
+      title: '状态',
+      dataIndex: 'status',
+      width: 100,
+      align: 'center'
+    }, {
+      title: '备注',
+      dataIndex: 'remark',
+      width: 220
+    }],
+    fieldPropsFn: function fieldPropsFn() {
+      return {
+        department: {
+          onCell: function onCell(record) {
+            var _ref;
+            return {
+              rowSpan: (_ref = record._departmentRowSpan) !== null && _ref !== void 0 ? _ref : 1
+            };
+          }
+        }
+      };
+    },
+    dataSource: dataSource,
+    scroll: function scroll(h) {
+      return {
+        y: h
+      };
+    },
+    pagination: false
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamias/rex-design",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",