@jetlinks-web/components 3.1.15 → 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/es/EditTable/CellRender.js +69 -3
  2. package/es/EditTable/EditTable.js +108 -165
  3. package/es/EditTable/FormItem.js +234 -95
  4. package/es/EditTable/consts.js +13 -13
  5. package/es/EditTable/context.js +3 -2
  6. package/es/EditTable/fieldPool.js +166 -0
  7. package/es/EditTable/hooks/index.js +4 -2
  8. package/es/EditTable/hooks/useValidate.js +121 -51
  9. package/es/EditTable/hooks/useVirtualTreeTable.js +111 -0
  10. package/es/EditTable/index.js +0 -4
  11. package/es/EditTable/style/body.js +15 -2
  12. package/es/EditTable/style/form.js +2 -2
  13. package/es/EditTable/style/header.js +2 -2
  14. package/es/EditTable/style/table.js +2 -1
  15. package/es/Icon/icon.js +3 -3
  16. package/es/ProTable/ProTable.js +5 -0
  17. package/es/Search/Advanced/index.js +1 -1
  18. package/es/Search/Item.js +13 -1
  19. package/es/Search/util.js +1 -1
  20. package/es/VirtualTable/Table.js +367 -0
  21. package/es/VirtualTable/VirtualBody.js +94 -0
  22. package/es/VirtualTable/index.js +1 -1
  23. package/es/VirtualTable/useTreeData.js +243 -0
  24. package/es/VirtualTable/useVirtualScroll.js +159 -0
  25. package/lib/EditTable/CellRender.js +69 -3
  26. package/lib/EditTable/EditTable.js +108 -165
  27. package/lib/EditTable/FormItem.js +234 -95
  28. package/lib/EditTable/consts.js +13 -13
  29. package/lib/EditTable/context.js +3 -2
  30. package/lib/EditTable/fieldPool.js +173 -0
  31. package/lib/EditTable/hooks/index.js +15 -2
  32. package/lib/EditTable/hooks/useValidate.js +120 -50
  33. package/lib/EditTable/hooks/useVirtualTreeTable.js +117 -0
  34. package/lib/EditTable/index.js +0 -4
  35. package/lib/EditTable/style/body.js +15 -2
  36. package/lib/EditTable/style/form.js +2 -2
  37. package/lib/EditTable/style/header.js +2 -2
  38. package/lib/EditTable/style/table.js +2 -1
  39. package/lib/Icon/icon.js +3 -3
  40. package/lib/ProTable/ProTable.js +5 -0
  41. package/lib/Search/Advanced/index.js +1 -1
  42. package/lib/Search/Item.js +13 -1
  43. package/lib/Search/util.js +1 -1
  44. package/lib/VirtualTable/Table.js +374 -0
  45. package/lib/VirtualTable/VirtualBody.js +100 -0
  46. package/lib/VirtualTable/index.js +4 -4
  47. package/lib/VirtualTable/useTreeData.js +250 -0
  48. package/lib/VirtualTable/useVirtualScroll.js +165 -0
  49. package/package.json +3 -3
  50. package/es/EditTable/Body.js +0 -312
  51. package/es/EditTable/Header.js +0 -164
  52. package/es/EditTable/HeaderRender.js +0 -12
  53. package/es/VirtualTable/VirtualTable.js +0 -482
  54. package/lib/EditTable/Body.js +0 -312
  55. package/lib/EditTable/Header.js +0 -164
  56. package/lib/EditTable/HeaderRender.js +0 -12
  57. package/lib/VirtualTable/VirtualTable.js +0 -482
@@ -1,87 +1,157 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
- import _extends from "@babel/runtime/helpers/esm/extends";
3
2
  import Schema from "async-validator";
4
3
  import { handlePureRecord, collectValidateRules } from "../utils";
5
- import { ref } from 'vue';
4
+ import { ref, watch, toRaw } from 'vue';
5
+ /**
6
+ * 表单校验 Hook
7
+ * @param dataSource 数据源
8
+ * @param columns 列配置(可以是响应式的)
9
+ * @param rowKey 行唯一标识字段
10
+ * @param options 配置选项
11
+ */
6
12
  export var useValidate = function useValidate(dataSource, columns, rowKey) {
7
13
  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
8
14
  var errorMap = ref({});
9
- var schemaInstance;
10
15
  var rules = ref({});
11
- var _options = _extends({
16
+ var schemaInstance = null;
17
+ var _options = _objectSpread({
12
18
  validateRowKey: false
13
19
  }, options);
20
+ /**
21
+ * 获取列配置(处理响应式和非响应式情况)
22
+ */
23
+ var getColumns = function getColumns() {
24
+ if ('value' in columns) {
25
+ return columns.value;
26
+ }
27
+ return columns;
28
+ };
29
+ /**
30
+ * 创建/重新创建校验器
31
+ */
32
+ var createValidator = function createValidator() {
33
+ var currentColumns = getColumns();
34
+ rules.value = collectValidateRules(currentColumns);
35
+ schemaInstance = new Schema(rules.value);
36
+ };
37
+ /**
38
+ * 校验单条数据
39
+ * @param data 要校验的数据
40
+ * @param index 数据索引
41
+ */
14
42
  var validateItem = function validateItem(data) {
15
43
  var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
16
44
  return new Promise(function (resolve, reject) {
17
- schemaInstance.validate(data, {
18
- firstFields: true,
19
- index: index
20
- }, function (err) {
21
- if (err !== null && err !== void 0 && err.length) {
22
- reject(err.map(function (item) {
45
+ if (!schemaInstance) {
46
+ createValidator();
47
+ }
48
+ // 使用 toRaw 避免代理对象问题
49
+ var rawData = toRaw(data);
50
+ schemaInstance.validate(rawData, {
51
+ firstFields: true
52
+ }, function (errors) {
53
+ if (errors !== null && errors !== void 0 && errors.length) {
54
+ var mappedErrors = errors.map(function (item) {
55
+ var _rawData$__serial;
23
56
  return _objectSpread(_objectSpread({}, item), {}, {
24
- __serial: data.__serial,
25
- __dataIndex: index
57
+ __serial: (_rawData$__serial = rawData.__serial) !== null && _rawData$__serial !== void 0 ? _rawData$__serial : index + 1,
58
+ __dataIndex: index,
59
+ fieldValue: rawData[item.field]
26
60
  });
27
- }));
61
+ });
62
+ reject(mappedErrors);
28
63
  } else {
29
- resolve(data);
64
+ resolve(rawData);
30
65
  }
31
66
  });
32
67
  });
33
68
  };
69
+ /**
70
+ * 校验所有数据
71
+ */
34
72
  var validate = function validate() {
35
73
  return new Promise(function (resolve, reject) {
36
74
  var filterDataSource = dataSource.value;
37
75
  var len = filterDataSource.length;
38
- var error = [];
39
- var success = [];
40
- var validateLen = 0;
41
- var end = function end() {
42
- validateLen += 1;
43
- if (validateLen === len) {
44
- var isSuccess = !Object.keys(error).length;
45
- if (isSuccess) {
46
- var _options$onSuccess;
47
- resolve(success);
48
- (_options$onSuccess = _options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(_options);
49
- } else {
76
+ // 空数据直接返回
77
+ if (len === 0) {
78
+ var _options$onSuccess;
79
+ (_options$onSuccess = _options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(_options);
80
+ resolve([]);
81
+ return;
82
+ }
83
+ var errors = [];
84
+ var successItems = [];
85
+ var completedCount = 0;
86
+ var checkComplete = function checkComplete() {
87
+ completedCount += 1;
88
+ if (completedCount === len) {
89
+ var hasErrors = errors.length > 0;
90
+ if (hasErrors) {
50
91
  var _options$onError;
51
- (_options$onError = _options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(_options, error);
52
- reject(error);
53
- }
54
- }
55
- };
56
- var validateRowKey = _options.validateRowKey;
57
- if (filterDataSource.length) {
58
- filterDataSource.forEach(function (record, index) {
59
- if (validateRowKey || record[rowKey]) {
60
- validateItem(record, index).then(function (res) {
61
- success.push(handlePureRecord(res));
62
- end();
63
- }).catch(function (err) {
64
- error.push(err);
65
- end();
92
+ // __dataIndex 排序错误
93
+ errors.sort(function (a, b) {
94
+ var _a$0$__dataIndex, _a$, _b$0$__dataIndex, _b$;
95
+ 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;
96
+ 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;
97
+ return aIndex - bIndex;
66
98
  });
99
+ (_options$onError = _options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(_options, errors);
100
+ reject(errors);
67
101
  } else {
68
- end();
102
+ var _options$onSuccess2;
103
+ (_options$onSuccess2 = _options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call(_options);
104
+ resolve(successItems);
69
105
  }
70
- });
71
- } else {
72
- resolve(filterDataSource);
73
- }
106
+ }
107
+ };
108
+ var shouldValidateRow = _options.validateRowKey;
109
+ filterDataSource.forEach(function (record, index) {
110
+ // 判断是否需要校验该行
111
+ var hasRowKey = !!record[rowKey];
112
+ if (shouldValidateRow || hasRowKey) {
113
+ validateItem(record, index).then(function (res) {
114
+ successItems.push(handlePureRecord(res));
115
+ checkComplete();
116
+ }).catch(function (err) {
117
+ errors.push(err);
118
+ checkComplete();
119
+ });
120
+ } else {
121
+ // 跳过没有 rowKey 的行
122
+ checkComplete();
123
+ }
124
+ });
74
125
  });
75
126
  };
76
- var createValidate = function createValidate() {
77
- rules.value = collectValidateRules(columns);
78
- schemaInstance = new Schema(rules.value);
127
+ /**
128
+ * 清除所有错误
129
+ */
130
+ var clearErrors = function clearErrors() {
131
+ errorMap.value = {};
79
132
  };
80
- createValidate();
133
+ /**
134
+ * 重新创建校验器(当列配置变化时调用)
135
+ */
136
+ var recreateValidator = function recreateValidator() {
137
+ createValidator();
138
+ };
139
+ // 初始化校验器
140
+ createValidator();
141
+ // 如果 columns 是响应式的,监听其变化并重新创建校验器
142
+ if ('value' in columns) {
143
+ watch(function () {
144
+ return JSON.stringify(columns.value);
145
+ }, function () {
146
+ createValidator();
147
+ });
148
+ }
81
149
  return {
82
150
  validate: validate,
83
151
  validateItem: validateItem,
84
152
  errorMap: errorMap,
85
- rules: rules
153
+ rules: rules,
154
+ recreateValidator: recreateValidator,
155
+ clearErrors: clearErrors
86
156
  };
87
157
  };
@@ -0,0 +1,111 @@
1
+ import { createVNode as _createVNode } from "vue";
2
+ import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
3
+ import { computed, defineComponent, ref } from 'vue';
4
+ import VirtualList from "ant-design-vue/es/vc-virtual-list";
5
+ export function useVirtualTreeTable(options) {
6
+ var treeData = options.treeData,
7
+ columns = options.columns,
8
+ _options$rowKey = options.rowKey,
9
+ rowKey = _options$rowKey === void 0 ? 'key' : _options$rowKey,
10
+ _options$rowHeight = options.rowHeight,
11
+ rowHeight = _options$rowHeight === void 0 ? 48 : _options$rowHeight,
12
+ _options$scrollY = options.scrollY,
13
+ scrollY = _options$scrollY === void 0 ? 400 : _options$scrollY;
14
+ /** ----------------------------
15
+ * 展开状态
16
+ ----------------------------- */
17
+ var expandedKeys = ref(new Set());
18
+ var toggleExpand = function toggleExpand(key) {
19
+ if (expandedKeys.value.has(key)) {
20
+ expandedKeys.value.delete(key);
21
+ } else {
22
+ expandedKeys.value.add(key);
23
+ }
24
+ };
25
+ /** ----------------------------
26
+ * Tree → Flat
27
+ ----------------------------- */
28
+ function flattenTree(nodes) {
29
+ var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
30
+ var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
31
+ var _iterator = _createForOfIteratorHelper(nodes),
32
+ _step;
33
+ try {
34
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
35
+ var node = _step.value;
36
+ var key = node[rowKey];
37
+ var isLeaf = !node.children || node.children.length === 0;
38
+ result.push({
39
+ key: key,
40
+ record: node,
41
+ level: level,
42
+ isLeaf: isLeaf
43
+ });
44
+ if (!isLeaf && expandedKeys.value.has(key)) {
45
+ flattenTree(node.children, level + 1, result);
46
+ }
47
+ }
48
+ } catch (err) {
49
+ _iterator.e(err);
50
+ } finally {
51
+ _iterator.f();
52
+ }
53
+ return result;
54
+ }
55
+ var flatData = computed(function () {
56
+ return flattenTree(treeData.value || []);
57
+ });
58
+ /** ----------------------------
59
+ * Virtual Body 工厂
60
+ ----------------------------- */
61
+ var VirtualBody = defineComponent({
62
+ name: 'VirtualTableBody',
63
+ setup: function setup() {
64
+ return function () {
65
+ return _createVNode(VirtualList, {
66
+ "data": flatData.value,
67
+ "height": scrollY,
68
+ "itemHeight": rowHeight,
69
+ "itemKey": "key"
70
+ }, {
71
+ default: function _default(item) {
72
+ return _createVNode("tr", null, [columns.value.map(function (col, index) {
73
+ if (index === 0) {
74
+ return _createVNode("td", null, [_createVNode("div", {
75
+ "style": {
76
+ paddingLeft: "".concat(item.level * 16, "px"),
77
+ display: 'flex',
78
+ alignItems: 'center'
79
+ }
80
+ }, [!item.isLeaf && _createVNode("span", {
81
+ "style": {
82
+ cursor: 'pointer',
83
+ marginRight: '4px'
84
+ },
85
+ "onClick": function onClick() {
86
+ return toggleExpand(item.key);
87
+ }
88
+ }, [expandedKeys.value.has(item.key) ? '▼' : '▶']), _createVNode("span", null, [item.record[col.dataIndex]])])]);
89
+ }
90
+ return _createVNode("td", null, [item.record[col.dataIndex]]);
91
+ })]);
92
+ }
93
+ });
94
+ };
95
+ }
96
+ });
97
+ /** ----------------------------
98
+ * 暴露给 Table 的 components
99
+ ----------------------------- */
100
+ var components = {
101
+ body: {
102
+ wrapper: VirtualBody
103
+ }
104
+ };
105
+ return {
106
+ flatData: flatData,
107
+ expandedKeys: expandedKeys,
108
+ toggleExpand: toggleExpand,
109
+ components: components
110
+ };
111
+ }
@@ -1,11 +1,7 @@
1
1
  import EditTable from './EditTable.js';
2
- import EditTableBody from './Body.js';
3
- import EditTableHeader from './Header.js';
4
2
  import FormItem from './FormItem.js';
5
3
  EditTable.install = function (app) {
6
4
  app.component(EditTable.name, EditTable);
7
- app.component(EditTableBody.name, EditTableBody);
8
- app.component(EditTableHeader.name, EditTableHeader);
9
5
  app.component(FormItem.name, FormItem);
10
6
  };
11
7
  export default EditTable;
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  export var genEditTableBodyStyle = function genEditTableBodyStyle(config) {
3
3
  var componentCls = config.componentCls,
4
4
  token = config.token;
5
- return _defineProperty(_defineProperty({}, '.jetlinks-edit-table-body-viewport', _defineProperty(_defineProperty(_defineProperty({
5
+ return _defineProperty(_defineProperty(_defineProperty({}, '.jetlinks-edit-table-body-viewport', _defineProperty(_defineProperty(_defineProperty({
6
6
  maxHeight: '100%',
7
7
  width: '100%',
8
8
  overflow: 'hidden auto',
@@ -49,5 +49,18 @@ export var genEditTableBodyStyle = function genEditTableBodyStyle(config) {
49
49
  width: '100%',
50
50
  justifyContent: 'center',
51
51
  paddingTop: 24
52
- });
52
+ }), '.jetlinks-edit-table-body', _defineProperty(_defineProperty({}, '.virtual-table-wrapper', _defineProperty(_defineProperty({
53
+ height: '100%'
54
+ }, '.virtual-table-header', {
55
+ display: 'none' // 使用 EditTable 自己的 Header
56
+ }), '.virtual-table-body', {
57
+ height: '100%'
58
+ })), '.readonly-mask', {
59
+ position: 'absolute',
60
+ top: 0,
61
+ left: 0,
62
+ right: 0,
63
+ bottom: 0,
64
+ zIndex: 4
65
+ }));
53
66
  };
@@ -4,8 +4,8 @@ export var genEditTableFormItemStyle = function genEditTableFormItemStyle(config
4
4
  token = config.token;
5
5
  return _defineProperty(_defineProperty({}, '.jetlinks-table-form-error-target', {
6
6
  position: 'absolute',
7
- right: '2px',
8
- top: '-9px',
7
+ right: '0',
8
+ top: '0',
9
9
  border: '16px solid transparent',
10
10
  borderTopColor: token.colorError,
11
11
  borderRightWidth: 0,
@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  export var genEditTableHeaderStyle = function genEditTableHeaderStyle(config) {
3
3
  var token = config.token;
4
4
  return _defineProperty(_defineProperty({}, '.jetlinks-edit-table-header-container', _defineProperty({
5
- height: '100%',
6
- position: 'relative'
5
+ height: '100%'
7
6
  }, '.jetlinks-edit-table-header-cell', _defineProperty({
8
7
  height: '100%',
9
8
  display: 'inline-flex',
@@ -11,6 +10,7 @@ export var genEditTableHeaderStyle = function genEditTableHeaderStyle(config) {
11
10
  float: 'left',
12
11
  overflow: 'visible',
13
12
  position: 'absolute',
13
+ background: '#fafafa',
14
14
  top: 0
15
15
  }, '.jetlinks-edit-table-header-cell-box', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
16
16
  padding: '0 12px',
@@ -18,7 +18,8 @@ export var genTableStyle = function genTableStyle(config) {
18
18
  overflow: 'auto hidden',
19
19
  '.jetlinks-edit-table-header': {
20
20
  overflow: 'hidden',
21
- width: '100%'
21
+ width: '100%',
22
+ position: 'relative'
22
23
  },
23
24
  '.jetlinks-edit-table-body': {
24
25
  backgroundColor: '#fff',
package/es/Icon/icon.js CHANGED
@@ -3,9 +3,9 @@ import { defineComponent, createVNode, watchEffect, inject, createVNode as _crea
3
3
  import * as aIcon from '@ant-design/icons-vue';
4
4
  import { createFromIconfontCN } from '@ant-design/icons-vue';
5
5
  import { ComponentsEnum } from "../utils/constants";
6
- var MyIcon = createFromIconfontCN({
7
- scriptUrl: '//at.alicdn.com/t/c/font_3183515_i7oma42he.js' // 在 iconfont.cn 上生成
8
- });
6
+ var MyIcon = function MyIcon() {
7
+ return function () {};
8
+ };
9
9
  var AntdIcon = function AntdIcon(props) {
10
10
  return createVNode(aIcon[props.type]);
11
11
  };
@@ -299,6 +299,11 @@ const __sfc_main__ = _defineComponent({
299
299
  watch(() => props.params, (newValue) => {
300
300
  _debounceFn(newValue || {});
301
301
  }, { deep: true, immediate: true });
302
+ watch(props.modeValue, (newValue) => {
303
+ if (newValue) {
304
+ _mode.value = newValue;
305
+ }
306
+ }, { immediate: true });
302
307
  watch(() => props.dataSource, (newVal) => {
303
308
  if (newVal && !props.request) {
304
309
  handleSearch(props.params);
@@ -203,7 +203,7 @@ const __sfc_main__ = _defineComponent({
203
203
  target.value = null;
204
204
  }
205
205
  emit('search', { terms: [] });
206
- emit('reset');
206
+ emit('reset', { terms: [] });
207
207
  };
208
208
  /**
209
209
  * 历史下拉单选
package/es/Search/Item.js CHANGED
@@ -30,6 +30,8 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
30
30
  "isRef": "setup-const",
31
31
  "nextTick": "setup-const",
32
32
  "Select": "setup-maybe-ref",
33
+ "DatePicker": "setup-maybe-ref",
34
+ "RangePicker": "setup-maybe-ref",
33
35
  "componentProps": "setup-maybe-ref",
34
36
  "componentType": "setup-maybe-ref",
35
37
  "typeOptions": "setup-maybe-ref",
@@ -75,7 +77,7 @@ const _hoisted_1 = {
75
77
  const _hoisted_2 = { key: 1 };
76
78
  const _hoisted_3 = { class: "JSearch-item--value" };
77
79
  import { computed, ref, reactive, watch, isRef, } from 'vue';
78
- import { Select } from 'ant-design-vue';
80
+ import { Select, DatePicker, RangePicker } from 'ant-design-vue';
79
81
  import { componentProps, componentType, typeOptions } from "./setting";
80
82
  import { getTermOptions, getItemDefaultValue } from "./util";
81
83
  import { useLocaleReceiver } from "../LocaleReciver";
@@ -243,6 +245,16 @@ const __sfc_main__ = _defineComponent({
243
245
  };
244
246
  handleTermsModelValue(isBtw);
245
247
  }
248
+ else if (targetComponents.value.type === componentType.date && ['btw', 'between'].includes(termsModel.termType)) {
249
+ // 当日期类型选择了 btw 时,切换到 RangePicker 组件
250
+ targetComponents.value.name = RangePicker;
251
+ termsModel.value = [];
252
+ }
253
+ else if (targetComponents.value.type === componentType.date && !['btw', 'between'].includes(termsModel.termType)) {
254
+ // 当 RangePicker 取消 btw 时,切换回 DatePicker 组件
255
+ targetComponents.value.name = DatePicker;
256
+ termsModel.value = undefined;
257
+ }
246
258
  }, { immediate: true, deep: true });
247
259
  watch(() => [termsModel.column, columnsMap.value], async () => {
248
260
  // 根据column从map中获取record,再解析search属性
package/es/Search/util.js CHANGED
@@ -213,7 +213,7 @@ export var getTermOptions = function getTermOptions(type, locale) {
213
213
  break;
214
214
  case 'time':
215
215
  case 'date':
216
- keys = ['gt', 'lt', 'gte', 'lte'];
216
+ keys = ['gt', 'lt', 'gte', 'lte', 'btw'];
217
217
  break;
218
218
  case 'timeRange':
219
219
  case 'rangePicker':