@hzab/flowlong-designer 0.1.4 → 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/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import DataModel from "@hzab/data-model";
|
|
2
2
|
import GroupUserSelector from "@hzab/group-user-selector";
|
|
3
3
|
import { Input, Modal } from "antd";
|
|
4
|
-
import { useMemo, useRef, useState } from "react";
|
|
4
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
5
5
|
import "./index.less";
|
|
6
6
|
const fieldMap = {
|
|
7
7
|
dept: "deptList",
|
|
@@ -40,28 +40,61 @@ const GroupUserSelectorModal = (props) => {
|
|
|
40
40
|
return userModel;
|
|
41
41
|
}
|
|
42
42
|
}, [type]);
|
|
43
|
+
|
|
43
44
|
const onOk = () => {
|
|
44
|
-
|
|
45
|
+
let onOkValue = {
|
|
46
|
+
value: null,
|
|
47
|
+
deptUserLabel: null,
|
|
48
|
+
};
|
|
49
|
+
if (type === "dept") {
|
|
50
|
+
onOkValue = {
|
|
51
|
+
value: groupUserSelectorRef.current?.selectedList?.map((item) => item?.value)?.join(","),
|
|
52
|
+
deptUserLabel: groupUserSelectorRef.current?.selectedList?.map((item) => item?.label)?.join(","),
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
if (type === "useId") {
|
|
56
|
+
onOkValue = {
|
|
57
|
+
value: groupUserSelectorRef.current?.selectedList?.map((item) => item?.userId)?.join(","),
|
|
58
|
+
deptUserLabel: groupUserSelectorRef.current?.selectedList?.map((item) => item?.name)?.join(","),
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
onChange(onOkValue);
|
|
45
62
|
setOpen(false);
|
|
46
63
|
};
|
|
47
64
|
|
|
48
|
-
const inputValue = useMemo(() => {
|
|
49
|
-
if (type === "dept" && value) {
|
|
50
|
-
return value?.map((item) => item?.label)?.join(",");
|
|
51
|
-
}
|
|
52
|
-
if (type === "useId" && value) {
|
|
53
|
-
return value?.map((item) => item?.name)?.join(",");
|
|
54
|
-
}
|
|
55
|
-
}, [value, type]);
|
|
56
65
|
const userListConfig = {
|
|
57
66
|
searchQueryKey: "userName",
|
|
58
67
|
labelKey: "name",
|
|
59
68
|
valueKey: "id",
|
|
60
69
|
};
|
|
70
|
+
/**选择组件回显 */
|
|
71
|
+
const groupUserSelectorValue = useMemo(() => {
|
|
72
|
+
const deptUserLabelArr = value?.deptUserLabel?.split(",") || [];
|
|
73
|
+
let valueArr = value?.value?.split(",");
|
|
74
|
+
if (type === "useId") {
|
|
75
|
+
valueArr = value?.value?.split(",")?.map((el) => Number(el)) || [];
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
if (!value) {
|
|
79
|
+
return [];
|
|
80
|
+
}
|
|
81
|
+
if (type === "useId") {
|
|
82
|
+
return deptUserLabelArr?.map((item, index) => ({
|
|
83
|
+
name: item,
|
|
84
|
+
id: valueArr?.length && valueArr[index],
|
|
85
|
+
isUser: true,
|
|
86
|
+
}));
|
|
87
|
+
}
|
|
88
|
+
return deptUserLabelArr?.map((item, index) => ({
|
|
89
|
+
label: item,
|
|
90
|
+
value: valueArr?.length && valueArr[index],
|
|
91
|
+
}));
|
|
92
|
+
}, [value, type]);
|
|
93
|
+
|
|
61
94
|
return (
|
|
62
95
|
<div>
|
|
63
96
|
<Input
|
|
64
|
-
value={
|
|
97
|
+
value={value?.deptUserLabel || null}
|
|
65
98
|
readOnly
|
|
66
99
|
onClick={() => {
|
|
67
100
|
setOpen(true);
|
|
@@ -84,7 +117,7 @@ const GroupUserSelectorModal = (props) => {
|
|
|
84
117
|
>
|
|
85
118
|
<div className="groupUserSelectorModal">
|
|
86
119
|
<GroupUserSelector
|
|
87
|
-
value={
|
|
120
|
+
value={groupUserSelectorValue || []}
|
|
88
121
|
ref={groupUserSelectorRef}
|
|
89
122
|
model={model}
|
|
90
123
|
{...(type === "useId" ? userListConfig : {})}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useRef, useState } from "react";
|
|
1
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
2
2
|
import { Drawer, Button, Input, Select } from "antd";
|
|
3
3
|
import { LeftOutlined, DeleteOutlined, RightOutlined, EditOutlined } from "@ant-design/icons";
|
|
4
4
|
|
|
@@ -21,13 +21,27 @@ export const operatorOptions = [
|
|
|
21
21
|
{ label: "不包含", value: "notinclude" },
|
|
22
22
|
];
|
|
23
23
|
/**条件字段下拉数据 */
|
|
24
|
-
const conditionOption = [
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
// const conditionOption = [
|
|
25
|
+
// { label: "天", value: "day" },
|
|
26
|
+
// { label: "小时", value: "hour" },
|
|
27
|
+
// { label: "部门", value: "dept" },
|
|
28
|
+
// { label: "用户id", value: "useId" },
|
|
29
|
+
// ];
|
|
30
|
+
/**描述下拉字段 */
|
|
31
|
+
const descOption = [
|
|
32
|
+
{
|
|
33
|
+
label: "请假天数",
|
|
34
|
+
value: "请假天数",
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: "发起人",
|
|
38
|
+
value: "发起人",
|
|
39
|
+
},
|
|
29
40
|
];
|
|
30
|
-
|
|
41
|
+
/** 时间类型 */
|
|
42
|
+
const timeType = ["day", "hour"];
|
|
43
|
+
/** 部门或用户 */
|
|
44
|
+
const deptUserType = ["dept", "useId"];
|
|
31
45
|
export const Branch = (props) => {
|
|
32
46
|
const { modelValue: nodeConfig, onChange, ItemSlot } = props;
|
|
33
47
|
const [form, setForm] = useState({
|
|
@@ -113,13 +127,11 @@ export const Branch = (props) => {
|
|
|
113
127
|
const text = conditionList
|
|
114
128
|
.map((conditionGroup) =>
|
|
115
129
|
conditionGroup.map((item) => {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
if (item?.field === "useId") {
|
|
120
|
-
return `${item.label}${item.operator}${item.values?.map((el) => el?.userName)}`;
|
|
130
|
+
const el = operatorOptions?.find((el) => el?.value === item?.operator);
|
|
131
|
+
if (["dept", "useId"].includes(item?.field)) {
|
|
132
|
+
return `${item.label}${el?.label}${item?.deptUserLabel}`;
|
|
121
133
|
}
|
|
122
|
-
return `${item.label}${
|
|
134
|
+
return `${item.label}${el?.label}${item.value}`;
|
|
123
135
|
}),
|
|
124
136
|
)
|
|
125
137
|
.join(" 和 ");
|
|
@@ -191,6 +203,61 @@ export const Branch = (props) => {
|
|
|
191
203
|
setForm((f) => ({ ...f }));
|
|
192
204
|
}
|
|
193
205
|
|
|
206
|
+
//条件节点数据联动
|
|
207
|
+
const conditionDataLinkage = (condition) => {
|
|
208
|
+
/**值 */
|
|
209
|
+
let fieldValue = null;
|
|
210
|
+
/**条件字段下拉数据 */
|
|
211
|
+
let conditionOption = [
|
|
212
|
+
{ label: "天", value: "day" },
|
|
213
|
+
{ label: "小时", value: "hour" },
|
|
214
|
+
];
|
|
215
|
+
/**
|
|
216
|
+
* 操作符选项列表
|
|
217
|
+
*/
|
|
218
|
+
let operatorOptions = [
|
|
219
|
+
{ label: "等于", value: "==" },
|
|
220
|
+
{ label: "不等于", value: "!=" },
|
|
221
|
+
{ label: "大于", value: ">" },
|
|
222
|
+
{ label: "大于等于", value: ">=" },
|
|
223
|
+
{ label: "小于", value: "<" },
|
|
224
|
+
{ label: "小于等于", value: "<=" },
|
|
225
|
+
{ label: "包含", value: "include" },
|
|
226
|
+
{ label: "不包含", value: "notinclude" },
|
|
227
|
+
];
|
|
228
|
+
|
|
229
|
+
if (timeType.includes(condition?.field)) {
|
|
230
|
+
fieldValue = condition?.value;
|
|
231
|
+
}
|
|
232
|
+
if (deptUserType.includes(condition?.field)) {
|
|
233
|
+
fieldValue = {
|
|
234
|
+
value: condition?.value,
|
|
235
|
+
deptUserLabel: condition?.deptUserLabel,
|
|
236
|
+
};
|
|
237
|
+
}
|
|
238
|
+
if (condition?.field === "dept") {
|
|
239
|
+
operatorOptions = [{ label: "包含", value: "include" }];
|
|
240
|
+
}
|
|
241
|
+
if (condition?.field === "useId") {
|
|
242
|
+
operatorOptions = [
|
|
243
|
+
{ label: "等于", value: "==" },
|
|
244
|
+
{ label: "包含", value: "include" },
|
|
245
|
+
{ label: "不包含", value: "notinclude" },
|
|
246
|
+
];
|
|
247
|
+
}
|
|
248
|
+
if (condition?.label === "发起人") {
|
|
249
|
+
conditionOption = [
|
|
250
|
+
{ label: "部门", value: "dept" },
|
|
251
|
+
{ label: "用户id", value: "useId" },
|
|
252
|
+
];
|
|
253
|
+
}
|
|
254
|
+
return {
|
|
255
|
+
fieldValue,
|
|
256
|
+
conditionOption,
|
|
257
|
+
operatorOptions,
|
|
258
|
+
};
|
|
259
|
+
};
|
|
260
|
+
|
|
194
261
|
return (
|
|
195
262
|
<div className="branch-wrap">
|
|
196
263
|
<div className="branch-box-wrap">
|
|
@@ -350,6 +417,7 @@ export const Branch = (props) => {
|
|
|
350
417
|
<div>值</div>
|
|
351
418
|
</div>
|
|
352
419
|
{conditionGroup?.map((condition, idx) => {
|
|
420
|
+
const { fieldValue, conditionOption, operatorOptions } = conditionDataLinkage(condition);
|
|
353
421
|
return (
|
|
354
422
|
<div className="condition-content" key={idx}>
|
|
355
423
|
<div className="condition-relation">
|
|
@@ -360,22 +428,33 @@ export const Branch = (props) => {
|
|
|
360
428
|
</div>
|
|
361
429
|
<div className="condition-content">
|
|
362
430
|
<div className="condition-content-box">
|
|
363
|
-
<
|
|
431
|
+
<Select
|
|
364
432
|
value={condition.label}
|
|
433
|
+
options={descOption}
|
|
434
|
+
className="condition-content-box-item"
|
|
365
435
|
onChange={(e) => {
|
|
366
|
-
condition.label = e
|
|
436
|
+
condition.label = e;
|
|
437
|
+
if (e === "请假天数") {
|
|
438
|
+
condition.field = "day";
|
|
439
|
+
}
|
|
440
|
+
if (e === "发起人") {
|
|
441
|
+
condition.field = "dept";
|
|
442
|
+
}
|
|
443
|
+
condition.value = null;
|
|
444
|
+
condition.operator = null;
|
|
367
445
|
// 更新数据
|
|
368
446
|
setForm((f) => ({ ...f }));
|
|
369
447
|
}}
|
|
370
|
-
|
|
371
|
-
className="condition-content-box-item"
|
|
372
|
-
/>
|
|
448
|
+
></Select>
|
|
373
449
|
<Select
|
|
374
450
|
options={conditionOption}
|
|
375
451
|
value={condition.field}
|
|
376
452
|
onChange={(e) => {
|
|
377
453
|
condition.field = e;
|
|
378
454
|
condition.value = null;
|
|
455
|
+
if (deptUserType.includes(condition?.field)) {
|
|
456
|
+
condition.deptUserLabel = null;
|
|
457
|
+
}
|
|
379
458
|
// 更新数据
|
|
380
459
|
setForm((f) => ({ ...f }));
|
|
381
460
|
}}
|
|
@@ -394,11 +473,16 @@ export const Branch = (props) => {
|
|
|
394
473
|
className="condition-content-box-item"
|
|
395
474
|
></Select>
|
|
396
475
|
<Field
|
|
397
|
-
value={
|
|
476
|
+
value={fieldValue}
|
|
398
477
|
type={condition.field}
|
|
399
478
|
onChange={(e) => {
|
|
400
|
-
|
|
401
|
-
|
|
479
|
+
if (timeType.includes(condition?.field)) {
|
|
480
|
+
condition.value = e;
|
|
481
|
+
}
|
|
482
|
+
if (deptUserType?.includes(condition?.field)) {
|
|
483
|
+
condition.value = e?.value;
|
|
484
|
+
condition.deptUserLabel = e?.deptUserLabel;
|
|
485
|
+
}
|
|
402
486
|
// 更新数据
|
|
403
487
|
setForm((f) => ({ ...f }));
|
|
404
488
|
}}
|