@zykj2024/much-library 1.1.2-beta.1 → 1.1.2-beta.2
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/McContainer/demo/base.js +2 -1
- package/dist/McContainer/demo/collapse.js +2 -1
- package/dist/McContainer/demo/pagination.js +2 -1
- package/dist/McContainer/demo/search.js +2 -1
- package/dist/McContainer/demo/standard.js +16 -6
- package/dist/McContainer/index.css +1 -3
- package/dist/McContainer/index.d.ts +81 -0
- package/dist/McContainer/index.js +46 -9
- package/dist/styles/demo/basic.d.ts +2 -0
- package/dist/styles/demo/delete-icon.d.ts +2 -0
- package/dist/styles/demo/form-bottom-0.d.ts +2 -0
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
15
15
|
var tableData = Array.from({
|
|
16
|
-
length:
|
|
16
|
+
length: 21
|
|
17
17
|
}, function (_, index) {
|
|
18
18
|
return {
|
|
19
19
|
id: index + 1,
|
|
@@ -45,6 +45,11 @@ export default (function () {
|
|
|
45
45
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
46
46
|
searchJsonStr = _useState10[0],
|
|
47
47
|
setSearchJsonStr = _useState10[1];
|
|
48
|
+
var onDelete = function onDelete(index) {
|
|
49
|
+
var _mcContainerRef$curre;
|
|
50
|
+
tableData.splice(index, 1);
|
|
51
|
+
(_mcContainerRef$curre = mcContainerRef.current) === null || _mcContainerRef$curre === void 0 || _mcContainerRef$curre.query();
|
|
52
|
+
};
|
|
48
53
|
var columns = [{
|
|
49
54
|
title: 'ID',
|
|
50
55
|
dataIndex: 'id'
|
|
@@ -64,15 +69,14 @@ export default (function () {
|
|
|
64
69
|
title: '操作',
|
|
65
70
|
dataIndex: 'option',
|
|
66
71
|
width: 100,
|
|
67
|
-
render: function render() {
|
|
72
|
+
render: function render(_, record, index) {
|
|
68
73
|
return /*#__PURE__*/_jsxs(Space, {
|
|
69
74
|
size: 16,
|
|
70
75
|
children: [/*#__PURE__*/_jsx("a", {
|
|
71
76
|
children: "\u7F16\u8F91"
|
|
72
77
|
}), /*#__PURE__*/_jsx(McPopoverButton, {
|
|
73
78
|
onConfirm: function onConfirm() {
|
|
74
|
-
|
|
75
|
-
return (_mcContainerRef$curre = mcContainerRef.current) === null || _mcContainerRef$curre === void 0 ? void 0 : _mcContainerRef$curre.query();
|
|
79
|
+
return onDelete(index);
|
|
76
80
|
}
|
|
77
81
|
})]
|
|
78
82
|
});
|
|
@@ -111,8 +115,13 @@ export default (function () {
|
|
|
111
115
|
return new Promise(function (resolve) {
|
|
112
116
|
setLoading(true);
|
|
113
117
|
setTimeout(function () {
|
|
114
|
-
|
|
115
|
-
|
|
118
|
+
var startIndex = (values.current - 1) * values.pageSize;
|
|
119
|
+
// 计算结束索引
|
|
120
|
+
var endIndex = startIndex + values.pageSize;
|
|
121
|
+
// 使用 slice 方法截取当前页的数据
|
|
122
|
+
var data = tableData.slice(startIndex, endIndex);
|
|
123
|
+
setDataSource(data || []);
|
|
124
|
+
setTotal(tableData.length || 0);
|
|
116
125
|
setLoading(false);
|
|
117
126
|
resolve();
|
|
118
127
|
}, 1000);
|
|
@@ -145,6 +154,7 @@ export default (function () {
|
|
|
145
154
|
type: "primary",
|
|
146
155
|
children: "\u6279\u91CF\u5220\u9664"
|
|
147
156
|
}),
|
|
157
|
+
autoBackPagination: true,
|
|
148
158
|
tableProps: {
|
|
149
159
|
columns: columns,
|
|
150
160
|
dataSource: dataSource,
|
|
@@ -5,14 +5,12 @@
|
|
|
5
5
|
width: calc(100% - 40px);
|
|
6
6
|
height: 24px;
|
|
7
7
|
position: absolute;
|
|
8
|
-
top: 0;
|
|
9
8
|
left: 16px;
|
|
10
9
|
z-index: 9;
|
|
11
10
|
}
|
|
12
11
|
.mc-container__wrapper {
|
|
13
12
|
height: 100%;
|
|
14
|
-
padding:
|
|
15
|
-
margin-top: 24px;
|
|
13
|
+
padding: 24px 24px 50px 16px;
|
|
16
14
|
overflow-y: auto;
|
|
17
15
|
border-top-right-radius: 12px;
|
|
18
16
|
}
|
|
@@ -4,26 +4,75 @@ import './index.less';
|
|
|
4
4
|
export type McContainerPropsType = {
|
|
5
5
|
style?: CSSProperties;
|
|
6
6
|
className?: string;
|
|
7
|
+
/** 页面容器的高度（默认'calc(100vh - 88px)'，即视口高度-菜单header高度56px-页面上下内边距16px*2） */
|
|
7
8
|
height?: string;
|
|
9
|
+
/** 页面容器的背景色（默认'#ffffff'） */
|
|
8
10
|
backgroundColor?: string;
|
|
11
|
+
/**
|
|
12
|
+
* 是否展示头部遮罩，默认显示
|
|
13
|
+
*/
|
|
14
|
+
showCell?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* 是否触发首次查询（默认true）
|
|
17
|
+
若使用场景为需自定义默认查询参数，可将该属性设置为false，并手动调用setDefaultQueryParams方法重新设置默认查询参数，而后调用query方法触发查询
|
|
18
|
+
*/
|
|
9
19
|
immediateQuery?: boolean;
|
|
20
|
+
/** 加载中（已覆盖table组件的loading） */
|
|
10
21
|
loading?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* 查询项（不受展开、收起按钮控制显示隐藏的查询项）
|
|
24
|
+
结合以下组件使用为最佳实现方式：McSelect、McCascader、McDateRange、McInput、McInput.Search、McInput.TextArea
|
|
25
|
+
已设置默认样式，可直接如下使用：
|
|
26
|
+
<>
|
|
27
|
+
<McSelect
|
|
28
|
+
label="下拉选择器"
|
|
29
|
+
name="name1"
|
|
30
|
+
/>
|
|
31
|
+
<McCascader
|
|
32
|
+
label="级联选择器"
|
|
33
|
+
name="name2"
|
|
34
|
+
/>
|
|
35
|
+
<McDateRange
|
|
36
|
+
label="日期范围选择器"
|
|
37
|
+
name="name3"
|
|
38
|
+
/>
|
|
39
|
+
<McInput.Search
|
|
40
|
+
name="name4"
|
|
41
|
+
onSearch={() => mcContainerRef.current?.query({ current: 1 })}
|
|
42
|
+
/>
|
|
43
|
+
</>
|
|
44
|
+
*/
|
|
11
45
|
queryItems?: ReactElement;
|
|
46
|
+
/** 是否显示查询按钮（默认显示 true） */
|
|
12
47
|
showQuery?: boolean;
|
|
48
|
+
/** 是否显示重置按钮（默认显示 true） */
|
|
13
49
|
showReset?: boolean;
|
|
50
|
+
/** 是否显示展开、收起按钮（默认不显示 false） */
|
|
14
51
|
showCollapse?: boolean;
|
|
52
|
+
/** 可折叠的查询项（可通过展开、收起按钮控制显示隐藏的查询项，使用建议同queryItems） */
|
|
15
53
|
collapsibleQueryItems?: ReactElement;
|
|
54
|
+
/** 查询（点击查询按钮、点击重置按钮、表格分页、排序、筛选变化）回调事件 */
|
|
16
55
|
onQuery?: (params: {
|
|
17
56
|
current?: number;
|
|
18
57
|
pageSize?: number;
|
|
19
58
|
[key: string]: any;
|
|
20
59
|
}, filters?: any, sorter?: any, extra?: any) => void;
|
|
60
|
+
/** 重置按钮回调事件（若设置该属性，则在点击重置按钮时不再触发onQuery事件） */
|
|
21
61
|
onReset?: (params?: {
|
|
22
62
|
current?: number;
|
|
23
63
|
pageSize?: number;
|
|
24
64
|
[key: string]: any;
|
|
25
65
|
}) => void;
|
|
66
|
+
/** 查询区自定义渲染（若设置为null，则不显示查询区） */
|
|
26
67
|
queryRender?: ReactNode;
|
|
68
|
+
/**
|
|
69
|
+
* 操作栏（若未设置该项，则不显示）
|
|
70
|
+
已设置默认样式，可直接如下使用：
|
|
71
|
+
<>
|
|
72
|
+
<Button type="primary">操作1</Button>
|
|
73
|
+
<Button>操作2</Button>
|
|
74
|
+
</>
|
|
75
|
+
*/
|
|
27
76
|
actionBar?: ReactElement;
|
|
28
77
|
/**
|
|
29
78
|
* @description 操作栏自定义渲染
|
|
@@ -31,7 +80,16 @@ export type McContainerPropsType = {
|
|
|
31
80
|
* @returns 操作栏元素
|
|
32
81
|
*/
|
|
33
82
|
actionBarRender?: (batchEl: ReactNode) => ReactNode;
|
|
83
|
+
/** 批量操作已选项数量（当数量大于0时，显示批量操作栏） */
|
|
34
84
|
batchNum?: number;
|
|
85
|
+
/**
|
|
86
|
+
* 批量操作按钮区（若未设置该项，则不显示）
|
|
87
|
+
已设置默认样式，可直接如下使用：
|
|
88
|
+
<>
|
|
89
|
+
<Button>批量操作1</Button>
|
|
90
|
+
<Button>批量操作2</Button>
|
|
91
|
+
</>
|
|
92
|
+
*/
|
|
35
93
|
batchBtns?: ReactNode;
|
|
36
94
|
/**
|
|
37
95
|
* @description 批量操作按钮配置
|
|
@@ -46,24 +104,47 @@ export type McContainerPropsType = {
|
|
|
46
104
|
buttonProps?: ButtonProps;
|
|
47
105
|
order?: number;
|
|
48
106
|
};
|
|
107
|
+
/** 批量操作取消按钮回调事件 */
|
|
49
108
|
onCancel?: () => void;
|
|
109
|
+
/** 表格组件属性 */
|
|
50
110
|
tableProps?: TableProps<any>;
|
|
111
|
+
/** 数据表格区自定义渲染（若设置为null，则不显示数据表格区 */
|
|
51
112
|
tableRender?: ReactNode;
|
|
113
|
+
/** 当前分页数据为空且非第一页时，是否自动会退到上一个分页（默认false） */
|
|
114
|
+
autoBackPagination?: boolean;
|
|
52
115
|
/** 折叠事件的回调 */
|
|
53
116
|
onCollapse?: (v: boolean) => void;
|
|
54
117
|
[key: string]: any;
|
|
55
118
|
};
|
|
56
119
|
export type McContainerRef = {
|
|
120
|
+
/**
|
|
121
|
+
* 调用查询的方法
|
|
122
|
+
可通过传参（params）更新查询参数的状态后触发查询，所设置的属性仅会覆盖原查询参数对应的属性，如：query({current: 1})，仅会覆盖原查询参数的current属性；
|
|
123
|
+
仅对设置过name属性的查询项（和current、pageSize）有效，查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理；
|
|
124
|
+
若不传参则按当前查询参数触发查询
|
|
125
|
+
*/
|
|
57
126
|
query: (params?: {
|
|
58
127
|
[key: string]: any;
|
|
59
128
|
}) => void;
|
|
129
|
+
/** 调用重置的方法 */
|
|
60
130
|
reset: () => void;
|
|
131
|
+
/**
|
|
132
|
+
* 设置默认查询参数
|
|
133
|
+
默认查询参数，用于重置使用，仅对设置过name属性的查询项（和current、pageSize）有效，查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理；
|
|
134
|
+
可通过该方法配置默认查询的分页参数；
|
|
135
|
+
设置的查询参数将覆盖原有默认值，如：setDefaultQueryParams({pageSize: 10, status: 1})，设置后的默认查询参数为{current: 1, pageSize: 10, status: 1}
|
|
136
|
+
原有默认值 {current: 1, pageSize: 20}（若未开启分页功能，默认值为{}）
|
|
137
|
+
*/
|
|
61
138
|
setDefaultQueryParams: (params: {
|
|
62
139
|
[key: string]: any;
|
|
63
140
|
}) => void;
|
|
141
|
+
/** 设置单个查询项的参数（仅支持设置过name属性的查询项和current、pageSize） */
|
|
64
142
|
setQueryParam: (name: string, value: any) => void;
|
|
143
|
+
/** 获取单个查询项的参数（仅支持设置过name属性的查询项和current、pageSize） */
|
|
65
144
|
getQueryParam: (name: string) => any;
|
|
145
|
+
/** 获取所有查询项的参数 */
|
|
66
146
|
getQueryParams: () => any;
|
|
147
|
+
/** 重置查询参数（重置为默认查询参数） */
|
|
67
148
|
resetQueryParams: () => void;
|
|
68
149
|
};
|
|
69
150
|
declare const McContainer: FC<McContainerPropsType>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
|
+
import { useUpdateEffect } from "../../packages/hooks/src";
|
|
4
5
|
import { Button, Spin, Table } from 'antd';
|
|
5
6
|
import { isNumber } from 'lodash';
|
|
6
7
|
import { CaretDownFilled, DoubleLeftOutlined } from 'much-icons';
|
|
@@ -17,6 +18,8 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
17
18
|
height = _props$height === void 0 ? 'calc(100vh - 88px)' : _props$height,
|
|
18
19
|
_props$backgroundColo = props.backgroundColor,
|
|
19
20
|
backgroundColor = _props$backgroundColo === void 0 ? '#ffffff' : _props$backgroundColo,
|
|
21
|
+
_props$showCell = props.showCell,
|
|
22
|
+
showCell = _props$showCell === void 0 ? true : _props$showCell,
|
|
20
23
|
_props$immediateQuery = props.immediateQuery,
|
|
21
24
|
immediateQuery = _props$immediateQuery === void 0 ? true : _props$immediateQuery,
|
|
22
25
|
_props$loading = props.loading,
|
|
@@ -28,6 +31,8 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
28
31
|
showReset = _props$showReset === void 0 ? true : _props$showReset,
|
|
29
32
|
_props$showCollapse = props.showCollapse,
|
|
30
33
|
showCollapse = _props$showCollapse === void 0 ? false : _props$showCollapse,
|
|
34
|
+
_props$autoBackPagina = props.autoBackPagination,
|
|
35
|
+
autoBackPagination = _props$autoBackPagina === void 0 ? false : _props$autoBackPagina,
|
|
31
36
|
collapsibleQueryItems = props.collapsibleQueryItems,
|
|
32
37
|
onQuery = props.onQuery,
|
|
33
38
|
onReset = props.onReset,
|
|
@@ -307,6 +312,25 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
307
312
|
}
|
|
308
313
|
}
|
|
309
314
|
}, [immediateQuery]);
|
|
315
|
+
useUpdateEffect(function () {
|
|
316
|
+
var _ref6 = tableProps !== null && tableProps !== void 0 ? tableProps : {},
|
|
317
|
+
pagination = _ref6.pagination,
|
|
318
|
+
dataSource = _ref6.dataSource;
|
|
319
|
+
var _ref7 = pagination || {},
|
|
320
|
+
total = _ref7.total;
|
|
321
|
+
var _ref8 = queryParams !== null && queryParams !== void 0 ? queryParams : {},
|
|
322
|
+
current = _ref8.current,
|
|
323
|
+
pageSize = _ref8.pageSize;
|
|
324
|
+
// 判断条件
|
|
325
|
+
// 1. 开启自动回退分页功能
|
|
326
|
+
// 2. 开启分页功能
|
|
327
|
+
// 3. 表格当前页数据为空 & 当前页大于1 & 总数据大于分页数据
|
|
328
|
+
if (autoBackPagination && !!pagination && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) === 0 && current > 1 && total && pageSize && total >= pageSize) {
|
|
329
|
+
query(_objectSpread(_objectSpread({}, queryParams), {}, {
|
|
330
|
+
current: Math.min(current - 1, Math.floor(total / pageSize))
|
|
331
|
+
}));
|
|
332
|
+
}
|
|
333
|
+
}, [tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource]);
|
|
310
334
|
useImperativeHandle(ref, function () {
|
|
311
335
|
return {
|
|
312
336
|
query: query,
|
|
@@ -323,13 +347,19 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
323
347
|
maxHeight: 'none'
|
|
324
348
|
},
|
|
325
349
|
spinning: loading,
|
|
326
|
-
children: /*#__PURE__*/
|
|
350
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
327
351
|
className: "mc-container ".concat(className || ''),
|
|
328
352
|
style: _objectSpread({
|
|
329
353
|
height: height,
|
|
330
354
|
backgroundColor: backgroundColor
|
|
331
355
|
}, style),
|
|
332
|
-
children: /*#__PURE__*/
|
|
356
|
+
children: [showCell && /*#__PURE__*/_jsx("div", {
|
|
357
|
+
className: "mc-container__ceiling",
|
|
358
|
+
style: {
|
|
359
|
+
backgroundColor: backgroundColor,
|
|
360
|
+
top: 0
|
|
361
|
+
}
|
|
362
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
333
363
|
ref: containerRef,
|
|
334
364
|
className: "mc-container__wrapper",
|
|
335
365
|
style: {
|
|
@@ -439,13 +469,13 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
439
469
|
pageSize: queryParams.pageSize
|
|
440
470
|
}, tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination),
|
|
441
471
|
expandable: _objectSpread({
|
|
442
|
-
expandIcon: function expandIcon(
|
|
472
|
+
expandIcon: function expandIcon(_ref9) {
|
|
443
473
|
var _tableProps$dataSourc2, _record$children;
|
|
444
|
-
var expanded =
|
|
445
|
-
onExpand =
|
|
446
|
-
record =
|
|
447
|
-
return tableProps !== null && tableProps !== void 0 && (_tableProps$dataSourc2 = tableProps.dataSource) !== null && _tableProps$dataSourc2 !== void 0 && _tableProps$dataSourc2.some(function (
|
|
448
|
-
var children =
|
|
474
|
+
var expanded = _ref9.expanded,
|
|
475
|
+
onExpand = _ref9.onExpand,
|
|
476
|
+
record = _ref9.record;
|
|
477
|
+
return tableProps !== null && tableProps !== void 0 && (_tableProps$dataSourc2 = tableProps.dataSource) !== null && _tableProps$dataSourc2 !== void 0 && _tableProps$dataSourc2.some(function (_ref10) {
|
|
478
|
+
var children = _ref10.children;
|
|
449
479
|
return (children === null || children === void 0 ? void 0 : children.length) > 0;
|
|
450
480
|
}) ? ((_record$children = record.children) === null || _record$children === void 0 ? void 0 : _record$children.length) > 0 ? /*#__PURE__*/_jsx(CaretDownFilled, {
|
|
451
481
|
className: "mc-container__table__expand-icon",
|
|
@@ -466,7 +496,14 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
466
496
|
}
|
|
467
497
|
}, tableProps === null || tableProps === void 0 ? void 0 : tableProps.expandable)
|
|
468
498
|
}))]
|
|
469
|
-
})
|
|
499
|
+
}), !(tableProps !== null && tableProps !== void 0 && tableProps.pagination) && /*#__PURE__*/_jsx("div", {
|
|
500
|
+
className: "mc-container__ceiling",
|
|
501
|
+
style: {
|
|
502
|
+
backgroundColor: backgroundColor,
|
|
503
|
+
height: 16,
|
|
504
|
+
bottom: 0
|
|
505
|
+
}
|
|
506
|
+
})]
|
|
470
507
|
})
|
|
471
508
|
});
|
|
472
509
|
});
|