@jetlinks-web/components 3.1.14 → 3.2.0

package/lib/EditTable/hooks/index.js

@@ -54,13 +54,26 @@ Object.keys(_useGroup).forEach(function (key) {
     }
   });
 });
+var _useVirtualTreeTable = require("./useVirtualTreeTable");
+Object.keys(_useVirtualTreeTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useVirtualTreeTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useVirtualTreeTable[key];
+    }
+  });
+});
 var FormContextKey = 'form-context';
 var useFormContext = exports.useFormContext = function useFormContext(options) {
   (0, _vue.provide)(FormContextKey, options);
 };
 var useInjectForm = exports.useInjectForm = function useInjectForm() {
   return (0, _vue.inject)(FormContextKey, {
-    addField: function addField(key, field) {},
+    addField: function addField() {},
+    removeField: function removeField() {},
     dataSource: (0, _vue.computed)(function () {
       return [];
     }),
@@ -82,7 +95,7 @@ var useTableDataSource = exports.useTableDataSource = function useTableDataSourc
   return (0, _vue.inject)(_consts.TABLE_DATA_SOURCE, []);
 };
 var useTableTool = exports.useTableTool = function useTableTool() {
-  return (0, _vue.inject)(_consts.TABLE_TOOL, false);
+  return (0, _vue.inject)(_consts.TABLE_TOOL, {});
 };
 var useFormItemError = exports.useFormItemError = function useFormItemError() {
   return (0, _vue.inject)(_consts.TABLE_FORM_ITEM_ERROR);

package/lib/EditTable/hooks/useValidate.js

@@ -6,89 +6,159 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useValidate = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncValidator = _interopRequireDefault(require("async-validator"));
 var _utils = require("../utils");
 var _vue = require("vue");
+/**
+ * 表单校验 Hook
+ * @param dataSource 数据源
+ * @param columns 列配置（可以是响应式的）
+ * @param rowKey 行唯一标识字段
+ * @param options 配置选项
+ */
 var useValidate = exports.useValidate = function useValidate(dataSource, columns, rowKey) {
   var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var errorMap = (0, _vue.ref)({});
-  var schemaInstance;
   var rules = (0, _vue.ref)({});
-  var _options = (0, _extends2.default)({
+  var schemaInstance = null;
+  var _options = (0, _objectSpread2.default)({
     validateRowKey: false
   }, options);
+  /**
+   * 获取列配置（处理响应式和非响应式情况）
+   */
+  var getColumns = function getColumns() {
+    if ('value' in columns) {
+      return columns.value;
+    }
+    return columns;
+  };
+  /**
+   * 创建/重新创建校验器
+   */
+  var createValidator = function createValidator() {
+    var currentColumns = getColumns();
+    rules.value = (0, _utils.collectValidateRules)(currentColumns);
+    schemaInstance = new _asyncValidator.default(rules.value);
+  };
+  /**
+   * 校验单条数据
+   * @param data 要校验的数据
+   * @param index 数据索引
+   */
   var validateItem = function validateItem(data) {
     var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     return new Promise(function (resolve, reject) {
-      schemaInstance.validate(data, {
-        firstFields: true,
-        index: index
-      }, function (err) {
-        if (err !== null && err !== void 0 && err.length) {
-          reject(err.map(function (item) {
+      if (!schemaInstance) {
+        createValidator();
+      }
+      // 使用 toRaw 避免代理对象问题
+      var rawData = (0, _vue.toRaw)(data);
+      schemaInstance.validate(rawData, {
+        firstFields: true
+      }, function (errors) {
+        if (errors !== null && errors !== void 0 && errors.length) {
+          var mappedErrors = errors.map(function (item) {
+            var _rawData$__serial;
             return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-              __serial: data.__serial,
-              __dataIndex: index
+              __serial: (_rawData$__serial = rawData.__serial) !== null && _rawData$__serial !== void 0 ? _rawData$__serial : index + 1,
+              __dataIndex: index,
+              fieldValue: rawData[item.field]
             });
-          }));
+          });
+          reject(mappedErrors);
         } else {
-          resolve(data);
+          resolve(rawData);
         }
       });
     });
   };
+  /**
+   * 校验所有数据
+   */
   var validate = function validate() {
     return new Promise(function (resolve, reject) {
       var filterDataSource = dataSource.value;
       var len = filterDataSource.length;
-      var error = [];
-      var success = [];
-      var validateLen = 0;
-      var end = function end() {
-        validateLen += 1;
-        if (validateLen === len) {
-          var isSuccess = !Object.keys(error).length;
-          if (isSuccess) {
-            var _options$onSuccess;
-            resolve(success);
-            (_options$onSuccess = _options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(_options);
-          } else {
+      // 空数据直接返回
+      if (len === 0) {
+        var _options$onSuccess;
+        (_options$onSuccess = _options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(_options);
+        resolve([]);
+        return;
+      }
+      var errors = [];
+      var successItems = [];
+      var completedCount = 0;
+      var checkComplete = function checkComplete() {
+        completedCount += 1;
+        if (completedCount === len) {
+          var hasErrors = errors.length > 0;
+          if (hasErrors) {
             var _options$onError;
-            (_options$onError = _options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(_options, error);
-            reject(error);
-          }
-        }
-      };
-      var validateRowKey = _options.validateRowKey;
-      if (filterDataSource.length) {
-        filterDataSource.forEach(function (record, index) {
-          if (validateRowKey || record[rowKey]) {
-            validateItem(record, index).then(function (res) {
-              success.push((0, _utils.handlePureRecord)(res));
-              end();
-            }).catch(function (err) {
-              error.push(err);
-              end();
+            // 按 __dataIndex 排序错误
+            errors.sort(function (a, b) {
+              var _a$0$__dataIndex, _a$, _b$0$__dataIndex, _b$;
+              var aIndex = (_a$0$__dataIndex = (_a$ = a[0]) === null || _a$ === void 0 ? void 0 : _a$.__dataIndex) !== null && _a$0$__dataIndex !== void 0 ? _a$0$__dataIndex : 0;
+              var bIndex = (_b$0$__dataIndex = (_b$ = b[0]) === null || _b$ === void 0 ? void 0 : _b$.__dataIndex) !== null && _b$0$__dataIndex !== void 0 ? _b$0$__dataIndex : 0;
+              return aIndex - bIndex;
             });
+            (_options$onError = _options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(_options, errors);
+            reject(errors);
           } else {
-            end();
+            var _options$onSuccess2;
+            (_options$onSuccess2 = _options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call(_options);
+            resolve(successItems);
           }
-        });
-      } else {
-        resolve(filterDataSource);
-      }
+        }
+      };
+      var shouldValidateRow = _options.validateRowKey;
+      filterDataSource.forEach(function (record, index) {
+        // 判断是否需要校验该行
+        var hasRowKey = !!record[rowKey];
+        if (shouldValidateRow || hasRowKey) {
+          validateItem(record, index).then(function (res) {
+            successItems.push((0, _utils.handlePureRecord)(res));
+            checkComplete();
+          }).catch(function (err) {
+            errors.push(err);
+            checkComplete();
+          });
+        } else {
+          // 跳过没有 rowKey 的行
+          checkComplete();
+        }
+      });
     });
   };
-  var createValidate = function createValidate() {
-    rules.value = (0, _utils.collectValidateRules)(columns);
-    schemaInstance = new _asyncValidator.default(rules.value);
+  /**
+   * 清除所有错误
+   */
+  var clearErrors = function clearErrors() {
+    errorMap.value = {};
   };
-  createValidate();
+  /**
+   * 重新创建校验器（当列配置变化时调用）
+   */
+  var recreateValidator = function recreateValidator() {
+    createValidator();
+  };
+  // 初始化校验器
+  createValidator();
+  // 如果 columns 是响应式的，监听其变化并重新创建校验器
+  if ('value' in columns) {
+    (0, _vue.watch)(function () {
+      return JSON.stringify(columns.value);
+    }, function () {
+      createValidator();
+    });
+  }
   return {
     validate: validate,
     validateItem: validateItem,
     errorMap: errorMap,
-    rules: rules
+    rules: rules,
+    recreateValidator: recreateValidator,
+    clearErrors: clearErrors
   };
 };

package/lib/EditTable/hooks/useVirtualTreeTable.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVirtualTreeTable = useVirtualTreeTable;
+var _vue = require("vue");
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _vcVirtualList = _interopRequireDefault(require("ant-design-vue/lib/vc-virtual-list"));
+function useVirtualTreeTable(options) {
+  var treeData = options.treeData,
+    columns = options.columns,
+    _options$rowKey = options.rowKey,
+    rowKey = _options$rowKey === void 0 ? 'key' : _options$rowKey,
+    _options$rowHeight = options.rowHeight,
+    rowHeight = _options$rowHeight === void 0 ? 48 : _options$rowHeight,
+    _options$scrollY = options.scrollY,
+    scrollY = _options$scrollY === void 0 ? 400 : _options$scrollY;
+  /** ----------------------------
+   * 展开状态
+   ----------------------------- */
+  var expandedKeys = (0, _vue.ref)(new Set());
+  var toggleExpand = function toggleExpand(key) {
+    if (expandedKeys.value.has(key)) {
+      expandedKeys.value.delete(key);
+    } else {
+      expandedKeys.value.add(key);
+    }
+  };
+  /** ----------------------------
+   * Tree → Flat
+   ----------------------------- */
+  function flattenTree(nodes) {
+    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    var _iterator = (0, _createForOfIteratorHelper2.default)(nodes),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var node = _step.value;
+        var key = node[rowKey];
+        var isLeaf = !node.children || node.children.length === 0;
+        result.push({
+          key: key,
+          record: node,
+          level: level,
+          isLeaf: isLeaf
+        });
+        if (!isLeaf && expandedKeys.value.has(key)) {
+          flattenTree(node.children, level + 1, result);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return result;
+  }
+  var flatData = (0, _vue.computed)(function () {
+    return flattenTree(treeData.value || []);
+  });
+  /** ----------------------------
+   * Virtual Body 工厂
+   ----------------------------- */
+  var VirtualBody = (0, _vue.defineComponent)({
+    name: 'VirtualTableBody',
+    setup: function setup() {
+      return function () {
+        return (0, _vue.createVNode)(_vcVirtualList.default, {
+          "data": flatData.value,
+          "height": scrollY,
+          "itemHeight": rowHeight,
+          "itemKey": "key"
+        }, {
+          default: function _default(item) {
+            return (0, _vue.createVNode)("tr", null, [columns.value.map(function (col, index) {
+              if (index === 0) {
+                return (0, _vue.createVNode)("td", null, [(0, _vue.createVNode)("div", {
+                  "style": {
+                    paddingLeft: "".concat(item.level * 16, "px"),
+                    display: 'flex',
+                    alignItems: 'center'
+                  }
+                }, [!item.isLeaf && (0, _vue.createVNode)("span", {
+                  "style": {
+                    cursor: 'pointer',
+                    marginRight: '4px'
+                  },
+                  "onClick": function onClick() {
+                    return toggleExpand(item.key);
+                  }
+                }, [expandedKeys.value.has(item.key) ? '▼' : '▶']), (0, _vue.createVNode)("span", null, [item.record[col.dataIndex]])])]);
+              }
+              return (0, _vue.createVNode)("td", null, [item.record[col.dataIndex]]);
+            })]);
+          }
+        });
+      };
+    }
+  });
+  /** ----------------------------
+   * 暴露给 Table 的 components
+   ----------------------------- */
+  var components = {
+    body: {
+      wrapper: VirtualBody
+    }
+  };
+  return {
+    flatData: flatData,
+    expandedKeys: expandedKeys,
+    toggleExpand: toggleExpand,
+    components: components
+  };
+}

package/lib/EditTable/index.js

@@ -6,13 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _EditTable = _interopRequireDefault(require("./EditTable.js"));
-var _Body = _interopRequireDefault(require("./Body.js"));
-var _Header = _interopRequireDefault(require("./Header.js"));
 var _FormItem = _interopRequireDefault(require("./FormItem.js"));
 _EditTable.default.install = function (app) {
   app.component(_EditTable.default.name, _EditTable.default);
-  app.component(_Body.default.name, _Body.default);
-  app.component(_Header.default.name, _Header.default);
   app.component(_FormItem.default.name, _FormItem.default);
 };
 var _default = exports.default = _EditTable.default;

package/lib/EditTable/style/body.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var genEditTableBodyStyle = exports.genEditTableBodyStyle = function genEditTableBodyStyle(config) {
   var componentCls = config.componentCls,
     token = config.token;
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, '.jetlinks-edit-table-body-viewport', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '.jetlinks-edit-table-body-viewport', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     maxHeight: '100%',
     width: '100%',
     overflow: 'hidden auto',
@@ -56,5 +56,18 @@ var genEditTableBodyStyle = exports.genEditTableBodyStyle = function genEditTabl
     width: '100%',
     justifyContent: 'center',
     paddingTop: 24
-  });
+  }), '.jetlinks-edit-table-body', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, '.virtual-table-wrapper', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    height: '100%'
+  }, '.virtual-table-header', {
+    display: 'none' // 使用 EditTable 自己的 Header
+  }), '.virtual-table-body', {
+    height: '100%'
+  })), '.readonly-mask', {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 4
+  }));
 };

package/lib/EditTable/style/form.js

@@ -11,8 +11,8 @@ var genEditTableFormItemStyle = exports.genEditTableFormItemStyle = function gen
     token = config.token;
   return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, '.jetlinks-table-form-error-target', {
     position: 'absolute',
-    right: '2px',
-    top: '-9px',
+    right: '0',
+    top: '0',
     border: '16px solid transparent',
     borderTopColor: token.colorError,
     borderRightWidth: 0,

package/lib/EditTable/style/header.js

@@ -9,8 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var genEditTableHeaderStyle = exports.genEditTableHeaderStyle = function genEditTableHeaderStyle(config) {
   var token = config.token;
   return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, '.jetlinks-edit-table-header-container', (0, _defineProperty2.default)({
-    height: '100%',
-    position: 'relative'
+    height: '100%'
   }, '.jetlinks-edit-table-header-cell', (0, _defineProperty2.default)({
     height: '100%',
     display: 'inline-flex',
@@ -18,6 +17,7 @@ var genEditTableHeaderStyle = exports.genEditTableHeaderStyle = function genEdit
     float: 'left',
     overflow: 'visible',
     position: 'absolute',
+    background: '#fafafa',
     top: 0
   }, '.jetlinks-edit-table-header-cell-box', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     padding: '0 12px',

package/lib/EditTable/style/table.js

@@ -24,7 +24,8 @@ var genTableStyle = exports.genTableStyle = function genTableStyle(config) {
         overflow: 'auto hidden',
         '.jetlinks-edit-table-header': {
           overflow: 'hidden',
-          width: '100%'
+          width: '100%',
+          position: 'relative'
         },
         '.jetlinks-edit-table-body': {
           backgroundColor: '#fff',

package/lib/Icon/icon.js

@@ -12,9 +12,9 @@ var _iconsVue = _interopRequireWildcard(require("@ant-design/icons-vue/lib/icons
 var aIcon = _iconsVue;
 var _constants = require("../utils/constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var MyIcon = (0, _iconsVue.createFromIconfontCN)({
-  scriptUrl: '//at.alicdn.com/t/c/font_3183515_i7oma42he.js' // 在 iconfont.cn 上生成
-});
+var MyIcon = function MyIcon() {
+  return function () {};
+};
 var AntdIcon = function AntdIcon(props) {
   return (0, _vue.createVNode)(aIcon[props.type]);
 };

package/lib/ProTable/Content.js

@@ -169,14 +169,13 @@ const __sfc_main__ = _defineComponent({
                     ]))
                     : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
                         (props.type === 'TREE')
-                            ? (_openBlock(), _createBlock(_unref(JVirtualTable), {
-                                key: 0,
+                            ? (_openBlock(), _createBlock(_unref(JVirtualTable), _mergeProps({ key: 0 }, props, {
                                 rowKey: _ctx.rowKey,
                                 "row-selection": __rowSelection.value,
                                 dataSource: _ctx.dataSource,
                                 columns: _columns.value,
                                 height: _ctx.height
-                            }, _createSlots({
+                            }), _createSlots({
                                 bodyCell: _withCtx(({ column, record, index }) => [
                                     ((_optionalChain([column, 'optionalAccess', _26 => _26.key]) || _optionalChain([column, 'optionalAccess', _27 => _27.dataIndex])) && _optionalChain([column, 'optionalAccess', _28 => _28.scopedSlots]) && (_optionalChain([_slots, 'access', _29 => _29.value, 'optionalAccess', _30 => _30[_optionalChain([column, 'optionalAccess', _31 => _31.dataIndex])]]) || _optionalChain([_slots, 'access', _32 => _32.value, 'optionalAccess', _33 => _33[_optionalChain([column, 'optionalAccess', _34 => _34.key])]])))
                                         ? _renderSlot(_ctx.$slots, _optionalChain([column, 'optionalAccess', _35 => _35.key]) || _optionalChain([column, 'optionalAccess', _36 => _36.dataIndex]), _mergeProps({ key: 0 }, record, {
@@ -204,7 +203,7 @@ const __sfc_main__ = _defineComponent({
                                         ])
                                     };
                                 })
-                            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["rowKey", "row-selection", "dataSource", "columns", "height"]))
+                            ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["rowKey", "row-selection", "dataSource", "columns", "height"]))
                             : (_openBlock(), _createBlock(_unref(Table), _mergeProps({ key: 1 }, props, {
                                 "row-selection": __rowSelection.value,
                                 dataSource: _ctx.dataSource,

package/lib/ProTable/ProTable.js

@@ -299,6 +299,11 @@ const __sfc_main__ = _defineComponent({
         watch(() => props.params, (newValue) => {
             _debounceFn(newValue || {});
         }, { deep: true, immediate: true });
+        watch(props.modeValue, (newValue) => {
+            if (newValue) {
+                _mode.value = newValue;
+            }
+        }, { immediate: true });
         watch(() => props.dataSource, (newVal) => {
             if (newVal && !props.request) {
                 handleSearch(props.params);

package/lib/ProTable/setting.js

@@ -17,7 +17,7 @@ var _headerProps = exports._headerProps = {
     default: undefined
   },
   modeValue: {
-    type: [String, undefined],
+    type: String,
     default: 'TABLE'
   }
 };

package/lib/Search/Advanced/index.js

@@ -137,7 +137,7 @@ const __sfc_main__ = _defineComponent({
             default: undefined,
         }
     },
-    emits: ['search'],
+    emits: ['search', 'reset'],
     setup(__props, { expose: __expose, emit: __emit }) {
         const props = __props;
         const emit = __emit;
@@ -203,6 +203,7 @@ const __sfc_main__ = _defineComponent({
                 target.value = null;
             }
             emit('search', { terms: [] });
+            emit('reset', { terms: [] });
         };
         /**
          * 历史下拉单选

package/lib/Search/Search.js

@@ -55,7 +55,7 @@ const __sfc_main__ = _defineComponent({
     props: {
         ...searchProps()
     },
-    emits: ['search'],
+    emits: ['search', 'reset'],
     setup(__props, { expose: __expose, emit: __emit }) {
         const props = __props;
         const emit = __emit;
@@ -80,6 +80,7 @@ const __sfc_main__ = _defineComponent({
         };
         const reset = () => {
             initValues();
+            emit('reset');
         };
         const handleDefaultValues = (value) => {
             const isObject = Object.prototype.toString.call(value) === '[object Object]';