@teamias/rex-design 0.1.25 → 0.1.27

package/dist/components/base-form/core/core.js

@@ -237,9 +237,22 @@ export var Core = function Core(props) {
             }
 
             // updateData: 满足一条 updateData 规则则缓存依赖数据
-            dependenciesSearchCacheData[keyStr] = updateData.some(function (ii) {
+            // 当配置了 mappedField 时, 将原始 field key 映射为 mappedField key 作为 request 入参
+            if (updateData.some(function (ii) {
               return ii;
-            }) ? data : undefined;
+            })) {
+              var mapped = _objectSpread({}, data);
+              Object.values(dependMap).forEach(function (dep) {
+                if (dep.action === 'updateData' && dep.mappedField && dep.field in mapped) {
+                  var sourceValue = mapped;
+                  sourceValue[dep.mappedField] = sourceValue[dep.field];
+                  delete sourceValue[dep.field];
+                }
+              });
+              dependenciesSearchCacheData[keyStr] = mapped;
+            } else {
+              dependenciesSearchCacheData[keyStr] = undefined;
+            }
 
             // syncValue: 满足一条 syncValue 规则则同步指定字段的值
             if (syncValue.some(function (ii) {

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

@@ -17,11 +17,13 @@ export default (function () {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.next = 2;
+            // 模拟接口请求
+            console.log('mockRequest params:', params);
+            _context.next = 3;
             return sleep(500);
-          case 2:
+          case 3:
             if (!(params.category === 'fruit')) {
-              _context.next = 4;
+              _context.next = 5;
               break;
             }
             return _context.abrupt("return", [{
@@ -34,7 +36,19 @@ export default (function () {
               label: '橙子',
               value: 'orange'
             }]);
-          case 4:
+          case 5:
+            if (!params.dept_id) {
+              _context.next = 7;
+              break;
+            }
+            return _context.abrupt("return", [{
+              label: "\u5C97\u4F4DA\uFF08dept_id=".concat(params.dept_id, "\uFF09"),
+              value: 'job_a'
+            }, {
+              label: "\u5C97\u4F4DB\uFF08dept_id=".concat(params.dept_id, "\uFF09"),
+              value: 'job_b'
+            }]);
+          case 7:
             return _context.abrupt("return", [{
               label: '白菜',
               value: 'cabbage'
@@ -45,7 +59,7 @@ export default (function () {
               label: '土豆',
               value: 'potato'
             }]);
-          case 5:
+          case 8:
           case "end":
             return _context.stop();
         }
@@ -144,6 +158,38 @@ export default (function () {
       field: 'category',
       action: 'clear'
     }]
+  }, {
+    valueType: 'select',
+    field: 'org_id',
+    label: '部门',
+    options: [{
+      label: '研发部',
+      value: 'dev'
+    }, {
+      label: '产品部',
+      value: 'product'
+    }, {
+      label: '设计部',
+      value: 'design'
+    }]
+  }, {
+    valueType: 'select',
+    field: 'job_id',
+    label: '岗位（mappedField）',
+    tooltip: '依赖 org_id，但通过 mappedField 将请求入参 key 从 org_id 映射为 dept_id',
+    api: '/jobs',
+    dependenciesV2: [{
+      field: 'org_id',
+      action: 'updateData',
+      mappedField: 'dept_id'
+    }, {
+      field: 'org_id',
+      action: 'clear'
+    }, {
+      field: 'org_id',
+      action: 'show',
+      op: 'notEmpty'
+    }]
   }];
   return /*#__PURE__*/_jsx(RexProConfigProvider, {
     value: {},

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

@@ -74,7 +74,7 @@ var areDependenciesReady = function areDependenciesReady(dependenciesRequest, de
   var updateDataFields = dependencies === null || dependencies === void 0 ? void 0 : dependencies.filter(function (dep) {
     return dep.action === 'updateData';
   }).map(function (dep) {
-    return dep.field;
+    return dep.mappedField || dep.field;
   });
   if (updateDataFields !== null && updateDataFields !== void 0 && updateDataFields.length) {
     return updateDataFields.every(function (k) {

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

@@ -148,7 +148,7 @@ type TOption = {
     children?: TOption[];
 };
 /** 统一排除属性 */
-type TOmitComponentItemType = 'width';
+type TOmitComponentItemType = 'width' | 'name';
 /** 依赖项 */
 export interface IDependenciesV2 extends Partial<Omit<TButtonFilterItem, 'original'>> {
     /** 依赖字段 */
@@ -165,5 +165,9 @@ export interface IDependenciesV2 extends Partial<Omit<TButtonFilterItem, 'origin
      * - false 类型: updateData disabled hidden show syncValue
      */
     isTouched?: boolean;
+    /**
+     * 针对于 action: updateData 的时候, 需要提供新的字段,作为更新数据的依据
+     */
+    mappedField?: string;
 }
 export {};

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.25",
+  "version": "0.1.27",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",