@jetlinks-web/components 3.1.14 → 3.2.0

package/es/EditTable/hooks/useValidate.js

@@ -1,87 +1,157 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import Schema from "async-validator";
 import { handlePureRecord, collectValidateRules } from "../utils";
-import { ref } from 'vue';
+import { ref, watch, toRaw } from 'vue';
+/**
+ * 表单校验 Hook
+ * @param dataSource 数据源
+ * @param columns 列配置（可以是响应式的）
+ * @param rowKey 行唯一标识字段
+ * @param options 配置选项
+ */
 export var useValidate = function useValidate(dataSource, columns, rowKey) {
   var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var errorMap = ref({});
-  var schemaInstance;
   var rules = ref({});
-  var _options = _extends({
+  var schemaInstance = null;
+  var _options = _objectSpread({
     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 = collectValidateRules(currentColumns);
+    schemaInstance = new Schema(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 = 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 _objectSpread(_objectSpread({}, 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(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(handlePureRecord(res));
+            checkComplete();
+          }).catch(function (err) {
+            errors.push(err);
+            checkComplete();
+          });
+        } else {
+          // 跳过没有 rowKey 的行
+          checkComplete();
+        }
+      });
     });
   };
-  var createValidate = function createValidate() {
-    rules.value = collectValidateRules(columns);
-    schemaInstance = new Schema(rules.value);
+  /**
+   * 清除所有错误
+   */
+  var clearErrors = function clearErrors() {
+    errorMap.value = {};
   };
-  createValidate();
+  /**
+   * 重新创建校验器（当列配置变化时调用）
+   */
+  var recreateValidator = function recreateValidator() {
+    createValidator();
+  };
+  // 初始化校验器
+  createValidator();
+  // 如果 columns 是响应式的，监听其变化并重新创建校验器
+  if ('value' in columns) {
+    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/es/EditTable/hooks/useVirtualTreeTable.js

@@ -0,0 +1,111 @@
+import { createVNode as _createVNode } from "vue";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { computed, defineComponent, ref } from 'vue';
+import VirtualList from "ant-design-vue/es/vc-virtual-list";
+export 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 = 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 = _createForOfIteratorHelper(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 = computed(function () {
+    return flattenTree(treeData.value || []);
+  });
+  /** ----------------------------
+   * Virtual Body 工厂
+   ----------------------------- */
+  var VirtualBody = defineComponent({
+    name: 'VirtualTableBody',
+    setup: function setup() {
+      return function () {
+        return _createVNode(VirtualList, {
+          "data": flatData.value,
+          "height": scrollY,
+          "itemHeight": rowHeight,
+          "itemKey": "key"
+        }, {
+          default: function _default(item) {
+            return _createVNode("tr", null, [columns.value.map(function (col, index) {
+              if (index === 0) {
+                return _createVNode("td", null, [_createVNode("div", {
+                  "style": {
+                    paddingLeft: "".concat(item.level * 16, "px"),
+                    display: 'flex',
+                    alignItems: 'center'
+                  }
+                }, [!item.isLeaf && _createVNode("span", {
+                  "style": {
+                    cursor: 'pointer',
+                    marginRight: '4px'
+                  },
+                  "onClick": function onClick() {
+                    return toggleExpand(item.key);
+                  }
+                }, [expandedKeys.value.has(item.key) ? '▼' : '▶']), _createVNode("span", null, [item.record[col.dataIndex]])])]);
+              }
+              return _createVNode("td", null, [item.record[col.dataIndex]]);
+            })]);
+          }
+        });
+      };
+    }
+  });
+  /** ----------------------------
+   * 暴露给 Table 的 components
+   ----------------------------- */
+  var components = {
+    body: {
+      wrapper: VirtualBody
+    }
+  };
+  return {
+    flatData: flatData,
+    expandedKeys: expandedKeys,
+    toggleExpand: toggleExpand,
+    components: components
+  };
+}

package/es/EditTable/index.js

@@ -1,11 +1,7 @@
 import EditTable from './EditTable.js';
-import EditTableBody from './Body.js';
-import EditTableHeader from './Header.js';
 import FormItem from './FormItem.js';
 EditTable.install = function (app) {
   app.component(EditTable.name, EditTable);
-  app.component(EditTableBody.name, EditTableBody);
-  app.component(EditTableHeader.name, EditTableHeader);
   app.component(FormItem.name, FormItem);
 };
 export default EditTable;

package/es/EditTable/style/body.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 export var genEditTableBodyStyle = function genEditTableBodyStyle(config) {
   var componentCls = config.componentCls,
     token = config.token;
-  return _defineProperty(_defineProperty({}, '.jetlinks-edit-table-body-viewport', _defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty({}, '.jetlinks-edit-table-body-viewport', _defineProperty(_defineProperty(_defineProperty({
     maxHeight: '100%',
     width: '100%',
     overflow: 'hidden auto',
@@ -49,5 +49,18 @@ export var genEditTableBodyStyle = function genEditTableBodyStyle(config) {
     width: '100%',
     justifyContent: 'center',
     paddingTop: 24
-  });
+  }), '.jetlinks-edit-table-body', _defineProperty(_defineProperty({}, '.virtual-table-wrapper', _defineProperty(_defineProperty({
+    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/es/EditTable/style/form.js

@@ -4,8 +4,8 @@ export var genEditTableFormItemStyle = function genEditTableFormItemStyle(config
     token = config.token;
   return _defineProperty(_defineProperty({}, '.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/es/EditTable/style/header.js

@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 export var genEditTableHeaderStyle = function genEditTableHeaderStyle(config) {
   var token = config.token;
   return _defineProperty(_defineProperty({}, '.jetlinks-edit-table-header-container', _defineProperty({
-    height: '100%',
-    position: 'relative'
+    height: '100%'
   }, '.jetlinks-edit-table-header-cell', _defineProperty({
     height: '100%',
     display: 'inline-flex',
@@ -11,6 +10,7 @@ export var genEditTableHeaderStyle = function genEditTableHeaderStyle(config) {
     float: 'left',
     overflow: 'visible',
     position: 'absolute',
+    background: '#fafafa',
     top: 0
   }, '.jetlinks-edit-table-header-cell-box', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     padding: '0 12px',

package/es/EditTable/style/table.js

@@ -18,7 +18,8 @@ export var 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/es/Icon/icon.js

@@ -3,9 +3,9 @@ import { defineComponent, createVNode, watchEffect, inject, createVNode as _crea
 import * as aIcon from '@ant-design/icons-vue';
 import { createFromIconfontCN } from '@ant-design/icons-vue';
 import { ComponentsEnum } from "../utils/constants";
-var MyIcon = 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 createVNode(aIcon[props.type]);
 };

package/es/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/es/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/es/ProTable/setting.js

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

package/es/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/es/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]';