ls-pro-common 3.0.61 → 3.0.62
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.
- package/dist/common.css +207 -111
- package/dist/common.js +1 -1
- package/dist/common.min.css +207 -111
- package/dist/common.min.js +1 -1
- package/es/components/InputMultiLine.d.ts +20 -14
- package/es/components/InputMultiLine.js +80 -64
- package/es/components/InputTable.d.ts +40 -38
- package/es/components/InputTable.js +43 -20
- package/es/components/TagCheck.d.ts +2 -0
- package/es/components/TagCheck.js +7 -5
- package/es/components/antd-custom.less +2 -2
- package/es/components/common.less +80 -81
- package/lib/components/InputMultiLine.d.ts +20 -14
- package/lib/components/InputMultiLine.js +80 -64
- package/lib/components/InputTable.d.ts +40 -38
- package/lib/components/InputTable.js +43 -20
- package/lib/components/TagCheck.d.ts +2 -0
- package/lib/components/TagCheck.js +7 -5
- package/lib/components/antd-custom.less +2 -2
- package/lib/components/common.less +80 -81
- package/package.json +3 -3
|
@@ -3,48 +3,49 @@ import type { InputProps } from 'antd';
|
|
|
3
3
|
import type { ProFormItemProps } from 'ls-pro-form';
|
|
4
4
|
import { TooltipPlacement } from 'antd/lib/tooltip';
|
|
5
5
|
export declare type InputTableProps = ProFormItemProps<InputProps> & {
|
|
6
|
-
|
|
6
|
+
/** @name 弹框选择表格列配置 */
|
|
7
7
|
columns: any[];
|
|
8
|
-
|
|
8
|
+
/** @name 调用后端API地址 */
|
|
9
9
|
url: string;
|
|
10
|
-
|
|
10
|
+
/** @name 弹框表格高度,默认400 */
|
|
11
11
|
tableHeight?: number;
|
|
12
|
-
|
|
12
|
+
/** @name 弹框表格宽度,默认650 */
|
|
13
13
|
tableWidth?: number;
|
|
14
|
-
|
|
14
|
+
/** @name 是否支持多选 */
|
|
15
15
|
multiple?: boolean;
|
|
16
|
-
|
|
16
|
+
/** @name 表单项name, 跟 form.item 的 name一致 */
|
|
17
17
|
name: string;
|
|
18
|
-
|
|
18
|
+
/** @name 返回的值字段,表格中valueField配置的字段时返回给name */
|
|
19
19
|
valueField: string;
|
|
20
|
-
|
|
20
|
+
/** @name 返回输入框显示的字段,textField字段值返回给textName */
|
|
21
21
|
textField?: string;
|
|
22
|
-
|
|
22
|
+
/** @name 用于接收textField返回的值 */
|
|
23
23
|
textName?: string;
|
|
24
24
|
/** @name 表格的其它配置 */
|
|
25
25
|
tableConfig?: any;
|
|
26
|
-
|
|
26
|
+
/** @name 表单label宽度,默认70 */
|
|
27
27
|
labelWidth?: number;
|
|
28
|
-
|
|
28
|
+
/** @name 是否2.0接口 */
|
|
29
29
|
isV2?: boolean;
|
|
30
|
-
|
|
30
|
+
/** @name 是否支持跨页选择 */
|
|
31
31
|
keepSelect?: boolean;
|
|
32
|
-
|
|
32
|
+
/** @name 回车事件查询关键字 */
|
|
33
33
|
searchField?: string;
|
|
34
|
-
|
|
34
|
+
/** @name 填充其它表单项目配置 */
|
|
35
35
|
fillMap?: Record<string, string>;
|
|
36
|
-
|
|
36
|
+
/** @name 输入后检查数据的触发方式,默认为entry回车触发 */
|
|
37
37
|
triggerCheck?: 'entry' | 'blur';
|
|
38
|
-
|
|
38
|
+
/** @name 每次展示面板时都加载数据,接合 tableConfig里的 manualRequest 一起使用 */
|
|
39
39
|
loadOnShow?: boolean;
|
|
40
40
|
placement?: TooltipPlacement;
|
|
41
41
|
arrowPointAtCenter?: boolean;
|
|
42
|
+
method?: 'GET' | 'POST';
|
|
42
43
|
rowKey?: any;
|
|
43
|
-
|
|
44
|
+
/** @name 选择行事件 */
|
|
44
45
|
onSelectChange?: (item: any, formRef?: any) => void;
|
|
45
|
-
|
|
46
|
+
/** @name 加载之前事件,param为查询条件对象,可以通过此方法调整 */
|
|
46
47
|
beforeLoad?: (param: any) => void;
|
|
47
|
-
|
|
48
|
+
/** @name 加载之后事件,row为接口返回数据,可以通过此方法调整 */
|
|
48
49
|
afterLoad?: (rows: any[]) => void;
|
|
49
50
|
getPopupContainer?: (triggerNode: any) => HTMLElement;
|
|
50
51
|
};
|
|
@@ -58,48 +59,49 @@ declare const InputTable: React.ForwardRefExoticComponent<{
|
|
|
58
59
|
proFieldProps?: import("ls-pro-utils").ProFieldProps | undefined;
|
|
59
60
|
footerRender?: import("ls-pro-form").LightFilterFooterRender | undefined;
|
|
60
61
|
} & Omit<import("ls-pro-form/lib/components/FormItem").ProFormItemProps, "valueType"> & import("ls-pro-form/lib/interface").ExtendsProps & {
|
|
61
|
-
|
|
62
|
+
/** @name 弹框选择表格列配置 */
|
|
62
63
|
columns: any[];
|
|
63
|
-
|
|
64
|
+
/** @name 调用后端API地址 */
|
|
64
65
|
url: string;
|
|
65
|
-
|
|
66
|
+
/** @name 弹框表格高度,默认400 */
|
|
66
67
|
tableHeight?: number | undefined;
|
|
67
|
-
|
|
68
|
+
/** @name 弹框表格宽度,默认650 */
|
|
68
69
|
tableWidth?: number | undefined;
|
|
69
|
-
|
|
70
|
+
/** @name 是否支持多选 */
|
|
70
71
|
multiple?: boolean | undefined;
|
|
71
|
-
|
|
72
|
+
/** @name 表单项name, 跟 form.item 的 name一致 */
|
|
72
73
|
name: string;
|
|
73
|
-
|
|
74
|
+
/** @name 返回的值字段,表格中valueField配置的字段时返回给name */
|
|
74
75
|
valueField: string;
|
|
75
|
-
|
|
76
|
+
/** @name 返回输入框显示的字段,textField字段值返回给textName */
|
|
76
77
|
textField?: string | undefined;
|
|
77
|
-
|
|
78
|
+
/** @name 用于接收textField返回的值 */
|
|
78
79
|
textName?: string | undefined;
|
|
79
80
|
/** @name 表格的其它配置 */
|
|
80
81
|
tableConfig?: any;
|
|
81
|
-
|
|
82
|
+
/** @name 表单label宽度,默认70 */
|
|
82
83
|
labelWidth?: number | undefined;
|
|
83
|
-
|
|
84
|
+
/** @name 是否2.0接口 */
|
|
84
85
|
isV2?: boolean | undefined;
|
|
85
|
-
|
|
86
|
+
/** @name 是否支持跨页选择 */
|
|
86
87
|
keepSelect?: boolean | undefined;
|
|
87
|
-
|
|
88
|
+
/** @name 回车事件查询关键字 */
|
|
88
89
|
searchField?: string | undefined;
|
|
89
|
-
|
|
90
|
+
/** @name 填充其它表单项目配置 */
|
|
90
91
|
fillMap?: Record<string, string> | undefined;
|
|
91
|
-
|
|
92
|
+
/** @name 输入后检查数据的触发方式,默认为entry回车触发 */
|
|
92
93
|
triggerCheck?: "entry" | "blur" | undefined;
|
|
93
|
-
|
|
94
|
+
/** @name 每次展示面板时都加载数据,接合 tableConfig里的 manualRequest 一起使用 */
|
|
94
95
|
loadOnShow?: boolean | undefined;
|
|
95
96
|
placement?: TooltipPlacement | undefined;
|
|
96
97
|
arrowPointAtCenter?: boolean | undefined;
|
|
98
|
+
method?: "POST" | "GET" | undefined;
|
|
97
99
|
rowKey?: any;
|
|
98
|
-
|
|
100
|
+
/** @name 选择行事件 */
|
|
99
101
|
onSelectChange?: ((item: any, formRef?: any) => void) | undefined;
|
|
100
|
-
|
|
102
|
+
/** @name 加载之前事件,param为查询条件对象,可以通过此方法调整 */
|
|
101
103
|
beforeLoad?: ((param: any) => void) | undefined;
|
|
102
|
-
|
|
104
|
+
/** @name 加载之后事件,row为接口返回数据,可以通过此方法调整 */
|
|
103
105
|
afterLoad?: ((rows: any[]) => void) | undefined;
|
|
104
106
|
getPopupContainer?: ((triggerNode: any) => HTMLElement) | undefined;
|
|
105
107
|
} & React.RefAttributes<unknown>>;
|
|
@@ -11,14 +11,14 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
11
11
|
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
12
12
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
13
13
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
14
|
-
var _excluded = ["columns", "url", "textName", "name", "tableConfig", "tableHeight", "tableWidth", "readonly", "multiple", "valueField", "labelWidth", "textField", "onSelectChange", "beforeLoad", "afterLoad", "isV2", "allowClear", "keepSelect", "fieldProps", "searchField", "fillMap", "loadOnShow", "triggerCheck", "getPopupContainer", "placement", "arrowPointAtCenter", "rowKey"],
|
|
14
|
+
var _excluded = ["columns", "url", "textName", "name", "tableConfig", "tableHeight", "tableWidth", "readonly", "multiple", "valueField", "labelWidth", "textField", "onSelectChange", "beforeLoad", "afterLoad", "isV2", "allowClear", "keepSelect", "fieldProps", "searchField", "fillMap", "loadOnShow", "triggerCheck", "getPopupContainer", "placement", "arrowPointAtCenter", "rowKey", "method"],
|
|
15
15
|
_excluded2 = ["current", "pageSize"];
|
|
16
16
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
17
17
|
import React, { useRef, useState, useEffect, useContext, useMemo, useImperativeHandle } from 'react';
|
|
18
18
|
import ProTable from 'ls-pro-table';
|
|
19
19
|
import { ProFormText, ProFormContext } from 'ls-pro-form';
|
|
20
20
|
import { MoreOutlined } from '@ant-design/icons';
|
|
21
|
-
import { httpGet } from '../http';
|
|
21
|
+
import { httpGet, httpPost } from '../http';
|
|
22
22
|
import { isDev, showWarn } from '../utils';
|
|
23
23
|
var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
24
24
|
//@ts-ignore
|
|
@@ -66,7 +66,7 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
66
66
|
_prop$allowClear = prop.allowClear,
|
|
67
67
|
allowClear = _prop$allowClear === void 0 ? true : _prop$allowClear,
|
|
68
68
|
_prop$keepSelect = prop.keepSelect,
|
|
69
|
-
keepSelect = _prop$keepSelect === void 0 ?
|
|
69
|
+
keepSelect = _prop$keepSelect === void 0 ? true : _prop$keepSelect,
|
|
70
70
|
fieldProps = prop.fieldProps,
|
|
71
71
|
searchField = prop.searchField,
|
|
72
72
|
fillMap = prop.fillMap,
|
|
@@ -83,6 +83,8 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
83
83
|
_prop$arrowPointAtCen = prop.arrowPointAtCenter,
|
|
84
84
|
arrowPointAtCenter = _prop$arrowPointAtCen === void 0 ? true : _prop$arrowPointAtCen,
|
|
85
85
|
rowKey = prop.rowKey,
|
|
86
|
+
_prop$method = prop.method,
|
|
87
|
+
method = _prop$method === void 0 ? 'GET' : _prop$method,
|
|
86
88
|
rest = _objectWithoutProperties(prop, _excluded);
|
|
87
89
|
if (!valueField && isDev) {
|
|
88
90
|
console.error('valueField 属性必须设置');
|
|
@@ -132,7 +134,6 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
132
134
|
data.page = current;
|
|
133
135
|
data.pageSize = pageSize;
|
|
134
136
|
}
|
|
135
|
-
;
|
|
136
137
|
if (Object.keys(rest).length && !isV2) {
|
|
137
138
|
data.where = rest;
|
|
138
139
|
} else {
|
|
@@ -145,11 +146,22 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
145
146
|
if (beforeLoad) {
|
|
146
147
|
beforeLoad(data);
|
|
147
148
|
}
|
|
148
|
-
|
|
149
|
-
|
|
149
|
+
if (!(method !== 'GET')) {
|
|
150
|
+
_context.next = 12;
|
|
151
|
+
break;
|
|
152
|
+
}
|
|
153
|
+
_context.next = 9;
|
|
154
|
+
return httpPost(url, data);
|
|
155
|
+
case 9:
|
|
156
|
+
result = _context.sent;
|
|
157
|
+
_context.next = 15;
|
|
158
|
+
break;
|
|
159
|
+
case 12:
|
|
160
|
+
_context.next = 14;
|
|
150
161
|
return httpGet(url, data);
|
|
151
|
-
case
|
|
162
|
+
case 14:
|
|
152
163
|
result = _context.sent;
|
|
164
|
+
case 15:
|
|
153
165
|
rows = result.rows || [];
|
|
154
166
|
if (afterLoad) {
|
|
155
167
|
afterLoad(rows);
|
|
@@ -161,7 +173,7 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
161
173
|
arr = val.split(',');
|
|
162
174
|
pageSelectedRows = rows.filter(function (row) {
|
|
163
175
|
return arr.includes(row[valueField]);
|
|
164
|
-
}); // 过滤 selectRowRef.current 中已存在的行
|
|
176
|
+
}); // 过滤 selectRowRef.current 中已存在的行
|
|
165
177
|
pageSelectedRows = pageSelectedRows.filter(function (row) {
|
|
166
178
|
return !selectRowRef.current.some(function (o) {
|
|
167
179
|
return o[valueField] === row[valueField];
|
|
@@ -179,7 +191,7 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
179
191
|
total: Number(result.total || 0),
|
|
180
192
|
success: true
|
|
181
193
|
});
|
|
182
|
-
case
|
|
194
|
+
case 19:
|
|
183
195
|
case "end":
|
|
184
196
|
return _context.stop();
|
|
185
197
|
}
|
|
@@ -272,6 +284,11 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
272
284
|
}
|
|
273
285
|
onSelectChange === null || onSelectChange === void 0 ? void 0 : onSelectChange(row, formRef);
|
|
274
286
|
};
|
|
287
|
+
var handleClear = function handleClear() {
|
|
288
|
+
var _tableRef$current2, _tableRef$current2$cl;
|
|
289
|
+
selectRowRef.current = [];
|
|
290
|
+
(_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : (_tableRef$current2$cl = _tableRef$current2.clearSelected) === null || _tableRef$current2$cl === void 0 ? void 0 : _tableRef$current2$cl.call(_tableRef$current2);
|
|
291
|
+
};
|
|
275
292
|
// 可输入时,回车或失去焦点调接口查询数据
|
|
276
293
|
var onQuery = function onQuery(e) {
|
|
277
294
|
if (rest.disabled || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.disabled) || readonly) return;
|
|
@@ -343,35 +360,39 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
343
360
|
};
|
|
344
361
|
useEffect(function () {
|
|
345
362
|
if (!text && multiple) {
|
|
346
|
-
var _tableRef$
|
|
363
|
+
var _tableRef$current3, _tableRef$current3$cl;
|
|
347
364
|
selectRowRef.current = [];
|
|
348
|
-
(_tableRef$
|
|
365
|
+
(_tableRef$current3 = tableRef.current) === null || _tableRef$current3 === void 0 ? void 0 : (_tableRef$current3$cl = _tableRef$current3.clearSelected) === null || _tableRef$current3$cl === void 0 ? void 0 : _tableRef$current3$cl.call(_tableRef$current3);
|
|
349
366
|
}
|
|
350
367
|
}, [text, multiple]);
|
|
351
368
|
useEffect(function () {
|
|
352
369
|
if (visible && loadOnShow) {
|
|
353
|
-
var _tableRef$
|
|
354
|
-
(_tableRef$
|
|
370
|
+
var _tableRef$current4, _tableRef$current4$re;
|
|
371
|
+
(_tableRef$current4 = tableRef.current) === null || _tableRef$current4 === void 0 ? void 0 : (_tableRef$current4$re = _tableRef$current4.reload) === null || _tableRef$current4$re === void 0 ? void 0 : _tableRef$current4$re.call(_tableRef$current4);
|
|
355
372
|
}
|
|
356
373
|
}, [visible, loadOnShow]);
|
|
374
|
+
useEffect(function () {
|
|
375
|
+
// if (!visible || !multiple || !text) return;
|
|
376
|
+
// const list = tableRef.current?.getDatasource();
|
|
377
|
+
// if (list?.length > 0 && selectRowRef.current.length === 0) {
|
|
378
|
+
// }
|
|
379
|
+
}, [visible, text]);
|
|
357
380
|
var tableDom = /*#__PURE__*/React.createElement(ProTable, _extends({
|
|
358
381
|
className: "ls-input-table",
|
|
359
382
|
columns: columns,
|
|
360
383
|
request: loadData,
|
|
361
384
|
manualRequest: false,
|
|
362
385
|
actionRef: tableRef,
|
|
386
|
+
cellSelectable: false,
|
|
363
387
|
search: {
|
|
364
|
-
labelWidth: labelWidth
|
|
365
|
-
|
|
388
|
+
labelWidth: labelWidth,
|
|
389
|
+
btnInline: true
|
|
366
390
|
},
|
|
367
391
|
options: {
|
|
368
392
|
density: false,
|
|
369
393
|
reload: false,
|
|
370
394
|
setting: false
|
|
371
395
|
},
|
|
372
|
-
form: {
|
|
373
|
-
btnInline: true
|
|
374
|
-
},
|
|
375
396
|
height: 'full',
|
|
376
397
|
rowKey: tableKey,
|
|
377
398
|
onRow: function onRow(record) {
|
|
@@ -391,7 +412,7 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
391
412
|
}
|
|
392
413
|
}, "\u786E\u8BA4")] : [];
|
|
393
414
|
},
|
|
394
|
-
headerTitle: multiple ? null :
|
|
415
|
+
headerTitle: multiple ? null : '双击选中当前行数据',
|
|
395
416
|
cardProps: {
|
|
396
417
|
bodyStyle: {
|
|
397
418
|
padding: 0
|
|
@@ -406,7 +427,9 @@ var InputTable = /*#__PURE__*/React.forwardRef(function (prop, ref) {
|
|
|
406
427
|
selectRowRef.current = rows;
|
|
407
428
|
setSelectedKeys(keys);
|
|
408
429
|
}
|
|
409
|
-
} : false
|
|
430
|
+
} : false,
|
|
431
|
+
showClear: true,
|
|
432
|
+
selectedTagField: textField || valueField
|
|
410
433
|
}));
|
|
411
434
|
// 处理有值时,可清空
|
|
412
435
|
useEffect(function () {
|
|
@@ -16,25 +16,27 @@ var TagCheck = function TagCheck(props) {
|
|
|
16
16
|
tagStyle = props.tagStyle,
|
|
17
17
|
options = props.options,
|
|
18
18
|
_props$multiple = props.multiple,
|
|
19
|
-
multiple = _props$multiple === void 0 ? true : _props$multiple
|
|
19
|
+
multiple = _props$multiple === void 0 ? true : _props$multiple,
|
|
20
|
+
_props$disabled = props.disabled,
|
|
21
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
22
|
+
_props$readonly = props.readonly,
|
|
23
|
+
readonly = _props$readonly === void 0 ? false : _props$readonly;
|
|
20
24
|
var _useState = useState(toArray(props.value)),
|
|
21
25
|
_useState2 = _slicedToArray(_useState, 2),
|
|
22
26
|
innerValue = _useState2[0],
|
|
23
27
|
setInnerValue = _useState2[1];
|
|
24
28
|
useEffect(function () {
|
|
25
|
-
if (!('value' in props)) return;
|
|
26
29
|
setInnerValue(toArray(props.value));
|
|
27
30
|
}, [props.value]);
|
|
28
31
|
return /*#__PURE__*/React.createElement("div", {
|
|
29
32
|
style: style,
|
|
30
33
|
className: classNames('tag-check', className)
|
|
31
|
-
}, multiple && options.length > 0 && /*#__PURE__*/React.createElement(_Tag.CheckableTag, {
|
|
34
|
+
}, multiple && options.length > 0 && !disabled && !readonly && /*#__PURE__*/React.createElement(_Tag.CheckableTag, {
|
|
32
35
|
checked: innerValue.length === options.length,
|
|
33
36
|
onChange: function onChange(checked) {
|
|
34
37
|
var val = checked ? options.map(function (o) {
|
|
35
38
|
return o.value;
|
|
36
39
|
}) : [];
|
|
37
|
-
setInnerValue(val);
|
|
38
40
|
_onChange === null || _onChange === void 0 ? void 0 : _onChange(val.length ? val : undefined, 'all', checked);
|
|
39
41
|
}
|
|
40
42
|
}, "\u5168\u90E8"), options && options.map(function (item) {
|
|
@@ -46,6 +48,7 @@ var TagCheck = function TagCheck(props) {
|
|
|
46
48
|
return item.value == o;
|
|
47
49
|
}).length > 0,
|
|
48
50
|
onChange: function onChange(checked) {
|
|
51
|
+
if (readonly || disabled) return;
|
|
49
52
|
var val = [];
|
|
50
53
|
if (checked) {
|
|
51
54
|
val = multiple ? [].concat(_toConsumableArray(innerValue), [item.value]) : [item.value];
|
|
@@ -54,7 +57,6 @@ var TagCheck = function TagCheck(props) {
|
|
|
54
57
|
return o != item.value;
|
|
55
58
|
});
|
|
56
59
|
}
|
|
57
|
-
setInnerValue(val);
|
|
58
60
|
_onChange === null || _onChange === void 0 ? void 0 : _onChange(val.length ? multiple ? val : val[0] : undefined, item, checked);
|
|
59
61
|
}
|
|
60
62
|
}, item.label);
|
|
@@ -152,13 +152,13 @@
|
|
|
152
152
|
|
|
153
153
|
.ant-btn-dangerous {
|
|
154
154
|
color: #f5222d;
|
|
155
|
-
background-color: #
|
|
155
|
+
background-color: #fff1f0;
|
|
156
156
|
border-color: transparent;
|
|
157
157
|
|
|
158
158
|
&:hover,
|
|
159
159
|
&:focus {
|
|
160
160
|
color: #f5222d;
|
|
161
|
-
background-color: #
|
|
161
|
+
background-color: #ffccc7;
|
|
162
162
|
border-color: transparent;
|
|
163
163
|
}
|
|
164
164
|
|