szld-libs 0.1.5 → 0.1.6
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/style.css +1 -1
- package/dist/szld-components.es.js +2429 -2418
- package/dist/szld-components.umd.js +31 -31
- package/es/components/WorkFlowNode/index.css +11 -7
- package/es/components/WorkFlowNode/index.d.ts +5 -1
- package/es/components/WorkFlowNode/index.js +34 -20
- package/es/index.js +32 -15
- package/lib/components/WorkFlowNode/index.css +11 -7
- package/lib/components/WorkFlowNode/index.d.ts +5 -1
- package/lib/components/WorkFlowNode/index.js +33 -19
- package/lib/index.js +29 -12
- package/package.json +1 -1
|
@@ -42,6 +42,15 @@
|
|
|
42
42
|
padding-left: 28px;
|
|
43
43
|
top: -3px;
|
|
44
44
|
}
|
|
45
|
+
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_btn_b0c06 {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: 8px;
|
|
49
|
+
color: #1864ff;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
margin-top: 12px;
|
|
53
|
+
}
|
|
45
54
|
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 {
|
|
46
55
|
top: 0px;
|
|
47
56
|
position: relative;
|
|
@@ -54,13 +63,8 @@
|
|
|
54
63
|
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 span {
|
|
55
64
|
color: #1864ff;
|
|
56
65
|
}
|
|
57
|
-
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_btn_b0c06 {
|
|
58
|
-
|
|
59
|
-
align-items: center;
|
|
60
|
-
gap: 8px;
|
|
61
|
-
color: #1864ff;
|
|
62
|
-
cursor: pointer;
|
|
63
|
-
font-size: 12px;
|
|
66
|
+
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 .workflownode-module_btn_b0c06 {
|
|
67
|
+
margin-top: 0;
|
|
64
68
|
}
|
|
65
69
|
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_title_cb34c {
|
|
66
70
|
font-size: 16px;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { ModalFuncProps } from "antd";
|
|
2
|
+
import { Key, ReactNode } from "react";
|
|
2
3
|
interface WorkFlowNodeProps {
|
|
3
4
|
data: any[];
|
|
4
|
-
current
|
|
5
|
+
current?: string;
|
|
6
|
+
currentIndex?: number;
|
|
7
|
+
rowKey: string | ((record: any) => Key);
|
|
8
|
+
renderContent?: (record: any) => ReactNode;
|
|
5
9
|
}
|
|
6
10
|
interface showWorkFlow extends WorkFlowNodeProps, ModalFuncProps {
|
|
7
11
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Modal } from "antd";
|
|
3
3
|
import classNames from "classnames";
|
|
4
4
|
import { useState, useMemo } from "react";
|
|
@@ -8,8 +8,8 @@ const item = "workflownode-module_item_73d7c";
|
|
|
8
8
|
const tail = "workflownode-module_tail_3cb51";
|
|
9
9
|
const node = "workflownode-module_node_005fd";
|
|
10
10
|
const content = "workflownode-module_content_8334f";
|
|
11
|
-
const collpase = "workflownode-module_collpase_f2468";
|
|
12
11
|
const btn = "workflownode-module_btn_b0c06";
|
|
12
|
+
const collpase = "workflownode-module_collpase_f2468";
|
|
13
13
|
const title = "workflownode-module_title_cb34c";
|
|
14
14
|
const dateWrapper = "workflownode-module_dateWrapper_94849";
|
|
15
15
|
const remark = "workflownode-module_remark_4f910";
|
|
@@ -22,8 +22,8 @@ const styles = {
|
|
|
22
22
|
tail,
|
|
23
23
|
node,
|
|
24
24
|
content,
|
|
25
|
-
collpase,
|
|
26
25
|
btn,
|
|
26
|
+
collpase,
|
|
27
27
|
title,
|
|
28
28
|
dateWrapper,
|
|
29
29
|
remark,
|
|
@@ -32,9 +32,12 @@ const styles = {
|
|
|
32
32
|
itemUnDo
|
|
33
33
|
};
|
|
34
34
|
const WorkFlowNode = (props) => {
|
|
35
|
-
const { data, current } = props;
|
|
35
|
+
const { data, current, rowKey, renderContent } = props;
|
|
36
36
|
const [isExpand, setExpand] = useState(false);
|
|
37
37
|
const currentIndex = useMemo(() => {
|
|
38
|
+
if (props.currentIndex !== void 0) {
|
|
39
|
+
return props.currentIndex;
|
|
40
|
+
}
|
|
38
41
|
if (!current || data.length === 0) {
|
|
39
42
|
return 0;
|
|
40
43
|
}
|
|
@@ -81,36 +84,47 @@ const WorkFlowNode = (props) => {
|
|
|
81
84
|
/* @__PURE__ */ jsx("div", { className: styles.node }),
|
|
82
85
|
/* @__PURE__ */ jsxs("div", { className: styles.content, children: [
|
|
83
86
|
/* @__PURE__ */ jsx("div", { className: styles.title, children: item2.PNName }),
|
|
84
|
-
/* @__PURE__ */ jsxs(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
"
|
|
91
|
-
|
|
87
|
+
renderContent ? renderContent(item2) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
88
|
+
/* @__PURE__ */ jsxs("div", { className: styles.dateWrapper, children: [
|
|
89
|
+
item2.PlanFinishDate && /* @__PURE__ */ jsxs("span", { children: [
|
|
90
|
+
"预计完成时间: ",
|
|
91
|
+
item2.PlanFinishDate
|
|
92
|
+
] }),
|
|
93
|
+
item2.UpdateTime && /* @__PURE__ */ jsxs("span", { style: { color: "#333", fontWeight: "bold" }, children: [
|
|
94
|
+
"实际完成时间: ",
|
|
95
|
+
item2.UpdateTime
|
|
96
|
+
] })
|
|
92
97
|
] }),
|
|
93
|
-
|
|
94
|
-
"收起节点 ",
|
|
95
|
-
/* @__PURE__ */ jsx(UpOutlined, {})
|
|
96
|
-
] })
|
|
98
|
+
item2.Remark && /* @__PURE__ */ jsx("div", { className: styles.remark, children: item2.Remark })
|
|
97
99
|
] }),
|
|
98
|
-
|
|
100
|
+
isExpand && currentIndex - 1 === index && /* @__PURE__ */ jsxs("a", { className: styles.btn, onClick: () => setExpand(false), children: [
|
|
101
|
+
"收起节点 ",
|
|
102
|
+
/* @__PURE__ */ jsx(UpOutlined, {})
|
|
103
|
+
] })
|
|
99
104
|
] })
|
|
100
105
|
]
|
|
101
106
|
},
|
|
102
|
-
item2
|
|
107
|
+
typeof rowKey === "string" ? item2[rowKey] : rowKey(item2)
|
|
103
108
|
))
|
|
104
109
|
] });
|
|
105
110
|
};
|
|
106
111
|
const showWorkFlow = (props) => {
|
|
107
|
-
const { current, data, ...rest } = props;
|
|
112
|
+
const { current, data, rowKey, renderContent, currentIndex, ...rest } = props;
|
|
108
113
|
const render = () => {
|
|
109
114
|
Modal.info({
|
|
110
115
|
icon: null,
|
|
111
116
|
title: "流程节点",
|
|
112
117
|
width: 700,
|
|
113
|
-
content: /* @__PURE__ */ jsx(
|
|
118
|
+
content: /* @__PURE__ */ jsx(
|
|
119
|
+
WorkFlowNode,
|
|
120
|
+
{
|
|
121
|
+
rowKey,
|
|
122
|
+
renderContent,
|
|
123
|
+
current,
|
|
124
|
+
currentIndex,
|
|
125
|
+
data
|
|
126
|
+
}
|
|
127
|
+
),
|
|
114
128
|
closable: true,
|
|
115
129
|
footer: null,
|
|
116
130
|
maskClosable: true,
|
package/es/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
import ReactDOM from "react-dom/client";
|
|
4
4
|
import { BrowserRouter } from "react-router-dom";
|
|
5
|
-
import { EditTable } from "./main";
|
|
6
|
-
import { Form } from "antd";
|
|
5
|
+
import { EditTable, showWorkFlow } from "./main";
|
|
6
|
+
import { Form, Button } from "antd";
|
|
7
7
|
const Demo = () => {
|
|
8
8
|
Form.useForm();
|
|
9
9
|
const [list, setList] = useState([
|
|
@@ -88,18 +88,35 @@ const Demo = () => {
|
|
|
88
88
|
url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
|
89
89
|
}
|
|
90
90
|
]);
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
91
|
+
const handleClick = () => {
|
|
92
|
+
showWorkFlow({
|
|
93
|
+
data: Array(10).fill(0).map((v, index) => ({
|
|
94
|
+
id: String(index),
|
|
95
|
+
PNName: String(index),
|
|
96
|
+
Remark: index
|
|
97
|
+
})),
|
|
98
|
+
rowKey: (row) => row.id,
|
|
99
|
+
current: "5",
|
|
100
|
+
currentIndex: 5,
|
|
101
|
+
wrapClassName: "confirmWrapper",
|
|
102
|
+
renderContent: (record) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { children: record.PNName }) })
|
|
103
|
+
});
|
|
104
|
+
};
|
|
105
|
+
return /* @__PURE__ */ jsxs("div", { style: { height: "100vh" }, children: [
|
|
106
|
+
/* @__PURE__ */ jsx(Button, { onClick: handleClick, children: "click" }),
|
|
107
|
+
/* @__PURE__ */ jsx(
|
|
108
|
+
EditTable,
|
|
109
|
+
{
|
|
110
|
+
columns,
|
|
111
|
+
rowKey: "PNOrderNo",
|
|
112
|
+
onChange: (row) => {
|
|
113
|
+
console.log(row);
|
|
114
|
+
},
|
|
115
|
+
dataSource: list,
|
|
116
|
+
pagination: false
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
] });
|
|
103
120
|
};
|
|
104
121
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
|
105
122
|
/* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(Demo, {}) })
|
|
@@ -42,6 +42,15 @@
|
|
|
42
42
|
padding-left: 28px;
|
|
43
43
|
top: -3px;
|
|
44
44
|
}
|
|
45
|
+
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_btn_b0c06 {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: 8px;
|
|
49
|
+
color: #1864ff;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
margin-top: 12px;
|
|
53
|
+
}
|
|
45
54
|
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 {
|
|
46
55
|
top: 0px;
|
|
47
56
|
position: relative;
|
|
@@ -54,13 +63,8 @@
|
|
|
54
63
|
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 span {
|
|
55
64
|
color: #1864ff;
|
|
56
65
|
}
|
|
57
|
-
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_btn_b0c06 {
|
|
58
|
-
|
|
59
|
-
align-items: center;
|
|
60
|
-
gap: 8px;
|
|
61
|
-
color: #1864ff;
|
|
62
|
-
cursor: pointer;
|
|
63
|
-
font-size: 12px;
|
|
66
|
+
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_collpase_f2468 .workflownode-module_btn_b0c06 {
|
|
67
|
+
margin-top: 0;
|
|
64
68
|
}
|
|
65
69
|
.workflownode-module_main_dce7f .workflownode-module_item_73d7c .workflownode-module_content_8334f .workflownode-module_title_cb34c {
|
|
66
70
|
font-size: 16px;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { ModalFuncProps } from "antd";
|
|
2
|
+
import { Key, ReactNode } from "react";
|
|
2
3
|
interface WorkFlowNodeProps {
|
|
3
4
|
data: any[];
|
|
4
|
-
current
|
|
5
|
+
current?: string;
|
|
6
|
+
currentIndex?: number;
|
|
7
|
+
rowKey: string | ((record: any) => Key);
|
|
8
|
+
renderContent?: (record: any) => ReactNode;
|
|
5
9
|
}
|
|
6
10
|
interface showWorkFlow extends WorkFlowNodeProps, ModalFuncProps {
|
|
7
11
|
}
|
|
@@ -9,8 +9,8 @@ const item = "workflownode-module_item_73d7c";
|
|
|
9
9
|
const tail = "workflownode-module_tail_3cb51";
|
|
10
10
|
const node = "workflownode-module_node_005fd";
|
|
11
11
|
const content = "workflownode-module_content_8334f";
|
|
12
|
-
const collpase = "workflownode-module_collpase_f2468";
|
|
13
12
|
const btn = "workflownode-module_btn_b0c06";
|
|
13
|
+
const collpase = "workflownode-module_collpase_f2468";
|
|
14
14
|
const title = "workflownode-module_title_cb34c";
|
|
15
15
|
const dateWrapper = "workflownode-module_dateWrapper_94849";
|
|
16
16
|
const remark = "workflownode-module_remark_4f910";
|
|
@@ -23,8 +23,8 @@ const styles = {
|
|
|
23
23
|
tail,
|
|
24
24
|
node,
|
|
25
25
|
content,
|
|
26
|
-
collpase,
|
|
27
26
|
btn,
|
|
27
|
+
collpase,
|
|
28
28
|
title,
|
|
29
29
|
dateWrapper,
|
|
30
30
|
remark,
|
|
@@ -33,9 +33,12 @@ const styles = {
|
|
|
33
33
|
itemUnDo
|
|
34
34
|
};
|
|
35
35
|
const WorkFlowNode = (props) => {
|
|
36
|
-
const { data, current } = props;
|
|
36
|
+
const { data, current, rowKey, renderContent } = props;
|
|
37
37
|
const [isExpand, setExpand] = react.useState(false);
|
|
38
38
|
const currentIndex = react.useMemo(() => {
|
|
39
|
+
if (props.currentIndex !== void 0) {
|
|
40
|
+
return props.currentIndex;
|
|
41
|
+
}
|
|
39
42
|
if (!current || data.length === 0) {
|
|
40
43
|
return 0;
|
|
41
44
|
}
|
|
@@ -82,36 +85,47 @@ const WorkFlowNode = (props) => {
|
|
|
82
85
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.node }),
|
|
83
86
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.content, children: [
|
|
84
87
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.title, children: item2.PNName }),
|
|
85
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
"
|
|
92
|
-
|
|
88
|
+
renderContent ? renderContent(item2) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
89
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.dateWrapper, children: [
|
|
90
|
+
item2.PlanFinishDate && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
91
|
+
"预计完成时间: ",
|
|
92
|
+
item2.PlanFinishDate
|
|
93
|
+
] }),
|
|
94
|
+
item2.UpdateTime && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#333", fontWeight: "bold" }, children: [
|
|
95
|
+
"实际完成时间: ",
|
|
96
|
+
item2.UpdateTime
|
|
97
|
+
] })
|
|
93
98
|
] }),
|
|
94
|
-
|
|
95
|
-
"收起节点 ",
|
|
96
|
-
/* @__PURE__ */ jsxRuntime.jsx(icons.UpOutlined, {})
|
|
97
|
-
] })
|
|
99
|
+
item2.Remark && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.remark, children: item2.Remark })
|
|
98
100
|
] }),
|
|
99
|
-
|
|
101
|
+
isExpand && currentIndex - 1 === index && /* @__PURE__ */ jsxRuntime.jsxs("a", { className: styles.btn, onClick: () => setExpand(false), children: [
|
|
102
|
+
"收起节点 ",
|
|
103
|
+
/* @__PURE__ */ jsxRuntime.jsx(icons.UpOutlined, {})
|
|
104
|
+
] })
|
|
100
105
|
] })
|
|
101
106
|
]
|
|
102
107
|
},
|
|
103
|
-
item2
|
|
108
|
+
typeof rowKey === "string" ? item2[rowKey] : rowKey(item2)
|
|
104
109
|
))
|
|
105
110
|
] });
|
|
106
111
|
};
|
|
107
112
|
const showWorkFlow = (props) => {
|
|
108
|
-
const { current, data, ...rest } = props;
|
|
113
|
+
const { current, data, rowKey, renderContent, currentIndex, ...rest } = props;
|
|
109
114
|
const render = () => {
|
|
110
115
|
antd.Modal.info({
|
|
111
116
|
icon: null,
|
|
112
117
|
title: "流程节点",
|
|
113
118
|
width: 700,
|
|
114
|
-
content: /* @__PURE__ */ jsxRuntime.jsx(
|
|
119
|
+
content: /* @__PURE__ */ jsxRuntime.jsx(
|
|
120
|
+
WorkFlowNode,
|
|
121
|
+
{
|
|
122
|
+
rowKey,
|
|
123
|
+
renderContent,
|
|
124
|
+
current,
|
|
125
|
+
currentIndex,
|
|
126
|
+
data
|
|
127
|
+
}
|
|
128
|
+
),
|
|
115
129
|
closable: true,
|
|
116
130
|
footer: null,
|
|
117
131
|
maskClosable: true,
|
package/lib/index.js
CHANGED
|
@@ -89,18 +89,35 @@ const Demo = () => {
|
|
|
89
89
|
url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
|
90
90
|
}
|
|
91
91
|
]);
|
|
92
|
-
|
|
93
|
-
main.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
92
|
+
const handleClick = () => {
|
|
93
|
+
main.showWorkFlow({
|
|
94
|
+
data: Array(10).fill(0).map((v, index) => ({
|
|
95
|
+
id: String(index),
|
|
96
|
+
PNName: String(index),
|
|
97
|
+
Remark: index
|
|
98
|
+
})),
|
|
99
|
+
rowKey: (row) => row.id,
|
|
100
|
+
current: "5",
|
|
101
|
+
currentIndex: 5,
|
|
102
|
+
wrapClassName: "confirmWrapper",
|
|
103
|
+
renderContent: (record) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: record.PNName }) })
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100vh" }, children: [
|
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsx(antd.Button, { onClick: handleClick, children: "click" }),
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
+
main.EditTable,
|
|
110
|
+
{
|
|
111
|
+
columns,
|
|
112
|
+
rowKey: "PNOrderNo",
|
|
113
|
+
onChange: (row) => {
|
|
114
|
+
console.log(row);
|
|
115
|
+
},
|
|
116
|
+
dataSource: list,
|
|
117
|
+
pagination: false
|
|
118
|
+
}
|
|
119
|
+
)
|
|
120
|
+
] });
|
|
104
121
|
};
|
|
105
122
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
|
106
123
|
/* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: /* @__PURE__ */ jsxRuntime.jsx(Demo, {}) })
|