潘志宝
3 天以前 221918bba28d2384d03c596a68256d7832e4a0e0
提交 | 用户 | 时间
3e359e 1 // 配置节点头部
H 2 .config-header {
3   display: flex;
4   flex-direction: column;
5
6   .node-name {
7     display: flex;
8     height: 24px;
9     line-height: 24px;
10     font-size: 16px;
11     cursor: pointer;
12     align-items: center;
13   }
14
15   .divide-line {
16     width: 100%;
17     height: 1px;
18     margin-top: 16px;
19     background: #eee;
20   }
21
22   .config-editable-input {
23     height: 24px;
24     max-width: 510px;
25     font-size: 16px;
26     line-height: 24px;
27     border: 1px solid #d9d9d9;
28     border-radius: 4px;
29     transition: all 0.3s;
30
31     &:focus {
32       border-color: #40a9ff;
33       outline: 0;
34       box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
35     }
36   }
37 }
38
39 // 表单字段权限
40 .field-setting-pane {
41   display: flex;
42   flex-direction: column;
43   font-size: 14px;
44
45   .field-setting-desc {
46     padding-right: 8px;
47     margin-bottom: 16px;
48     font-size: 16px;
49     font-weight: 700;
50   }
51
52   .field-permit-title {
53     display: flex;
54     justify-content: space-between;
55     align-items: center;
56     height: 45px;
57     padding-left: 12px;
58     line-height: 45px;
59     background-color: #f8fafc0a;
60     border: 1px solid #1f38581a;
61
62     .first-title {
63       text-align: left !important;
64     }
65
66     .other-titles {
67       display: flex;
68       justify-content: space-between;
69     }
70
71     .setting-title-label {
72       display: inline-block;
73       width: 110px;
74       padding: 5px 0;
75       font-size: 13px;
76       font-weight: 700;
77       color: #000;
78       text-align: center;
79     }
80   }
81
82   .field-setting-item {
83     align-items: center;
84     display: flex;
85     justify-content: space-between;
86     height: 38px;
87     padding-left: 12px;
88     border: 1px solid #1f38581a;
89     border-top: 0;
90
91     .field-setting-item-label {
92       display: inline-block;
93       width: 110px;
94       min-height: 16px;
95       overflow: hidden;
96       text-overflow: ellipsis;
97       white-space: nowrap;
98       cursor: text;
99     }
100
101     .field-setting-item-group {
102       display: flex;
103       justify-content: space-between;
104
105       .item-radio-wrap {
106         display: inline-block;
107         width: 110px;
108         text-align: center;
109       }
110     }
111   }
112 }
113
114 // 节点连线气泡卡片样式
115 .handler-item-wrapper {
116   display: flex;
117   cursor: pointer;
118
119   .handler-item {
120     display: flex;
121     flex-direction: column;
122     align-items: center;
123   }
124
125   .handler-item-icon {
126     width: 60px;
127     height: 60px;
128     background: #fff;
129     border: 1px solid #e2e2e2;
130     border-radius: 50%;
131     user-select: none;
132     text-align: center;
133
134     &:hover {
135       background: #e2e2e2;
136       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
137     }
138
139     .icon-size {
140       font-size: 25px;
141       line-height: 60px;
142     }
143   }
144
145   .approve {
146     color: #ff943e;
147   }
148   .copy {
149     color: #3296fa;
150   }
151
152   .condition {
153     color: #67c23a;
154   }
155
156   .parallel {
157     color: #626aef;
158   }
159
160   .inclusive {
161     color: #345da2;
162   }
163
164   .handler-item-text {
165     margin-top: 4px;
166     width: 80px;
167     text-align: center;
168     font-size: 13px;
169   }
170 }
171 // Simple 流程模型样式
172 .simple-process-model-container {
173   height: 100%;
174   padding-top: 32px;
175   background-color: #fafafa;
c9a6f7 176   overflow-x: auto;
H 177   width: 100%;
178
3e359e 179   .simple-process-model {
H 180     display: flex;
181     flex-direction: column;
182     justify-content: center;
183     align-items: center;
184     transform-origin: 50% 0 0;
c9a6f7 185     min-width: fit-content;
3e359e 186     transform: scale(1);
H 187     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
188     background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
189     // 节点容器 定义节点宽度
190     .node-container {
191       width: 200px;
192     }
193     // 节点
194     .node-box {
195       position: relative;
196       display: flex;
197       min-height: 70px;
198       padding: 5px 10px 8px;
199       cursor: pointer;
200       background-color: #fff;
201       flex-direction: column;
202       border: 2px solid transparent;
203       border-radius: 8px;
204       box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
205       transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
206
207       &.status-pass {
208         background-color: #a9da90;
209         border-color: #67c23a;
210       }
211
212       &.status-pass:hover {
213         border-color: #67c23a;
214       }
215
216       &.status-running {
217         background-color: #e7f0fe;
218         border-color: #5a9cf8;
219       }
220
221       &.status-running:hover {
222         border-color: #5a9cf8;
223       }
224
225       &.status-reject {
226         background-color: #f6e5e5;
227         border-color: #e47470;
228       }
229
230       &.status-reject:hover {
231         border-color: #e47470;
232       }
233
234       &:hover {
235         border-color: #0089ff;
236
237         .node-toolbar {
238           opacity: 1;
239         }
240
241         .branch-node-move {
242           display: flex;
243         }
244       }
245
246       // 普通节点标题
247       .node-title-container {
248         display: flex;
249         padding: 4px;
250         cursor: pointer;
251         border-radius: 4px 4px 0 0;
252         align-items: center;
253
254         .node-title-icon {
255           display: flex;
256           align-items: center;
257
258           &.user-task {
259             color: #ff943e;
260           }
261
262           &.copy-task {
263             color: #3296fa;
264           }
265
266           &.start-user {
267             color: #676565;
268           }
269         }
270
271         .node-title {
272           margin-left: 4px;
273           overflow: hidden;
274           font-size: 14px;
275           font-weight: 600;
276           line-height: 18px;
277           color: #1f1f1f;
278           text-overflow: ellipsis;
279           white-space: nowrap;
280
281           &:hover {
282             border-bottom: 1px dashed #f60;
283           }
284         }
285       }
286
287       // 条件节点标题
288       .branch-node-title-container {
289         display: flex;
290         padding: 4px 0;
291         cursor: pointer;
292         border-radius: 4px 4px 0 0;
293         align-items: center;
294         justify-content: space-between;
295
296         .input-max-width {
297           max-width: 115px !important;
298         }
299
300         .branch-title {
301           overflow: hidden;
302           font-size: 13px;
303           font-weight: 600;
304           color: #f60;
305           text-overflow: ellipsis;
306           white-space: nowrap;
307
308           &:hover {
309             border-bottom: 1px dashed #000;
310           }
311         }
312
313         .branch-priority {
314           min-width: 50px;
315           font-size: 12px;
316         }
317       }
318
319       .node-content {
320         display: flex;
321         min-height: 32px;
322         padding: 4px 8px;
323         margin-top: 4px;
324         line-height: 32px;
325         justify-content: space-between;
326         align-items: center;
327         color: #111f2c;
328         background: rgb(0 0 0 / 3%);
329         border-radius: 4px;
330
331         .node-text {
332           display: -webkit-box;
333           overflow: hidden;
334           font-size: 14px;
335           line-height: 24px;
336           text-overflow: ellipsis;
337           word-break: break-all;
338           -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
339           -webkit-box-orient: vertical;
340         }
341       }
342
343       //条件节点内容
344       .branch-node-content {
345         display: flex;
346         min-height: 32px;
347         padding: 4px 0;
348         margin-top: 4px;
349         line-height: 32px;
350         align-items: center;
351         color: #111f2c;
352         border-radius: 4px;
353
354         .branch-node-text {
355           overflow: hidden;
356           font-size: 12px;
357           line-height: 24px;
358           text-overflow: ellipsis;
359           word-break: break-all;
360           -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
361           -webkit-box-orient: vertical;
362         }
363       }
364
365       // 节点操作 :删除
366       .node-toolbar {
367         position: absolute;
368         top: -20px;
369         right: 0;
370         display: flex;
371         opacity: 0;
372
373         .toolbar-icon {
374           text-align: center;
375           vertical-align: middle;
376         }
377       }
378
379       // 条件节点左右移动
380       .branch-node-move {
381         position: absolute;
382         display: none;
383         width: 10px;
384         height: 100%;
385         cursor: pointer;
386         align-items: center;
387         justify-content: center;
388       }
389
390       .move-node-left {
391         top: 0;
392         left: -2px;
393         background: rgb(126 134 142 / 8%);
394         border-bottom-left-radius: 8px;
395         border-top-left-radius: 8px;
396       }
397
398       .move-node-right {
399         top: 0;
400         right: -2px;
401         background: rgb(126 134 142 / 8%);
402         border-top-right-radius: 6px;
403         border-bottom-right-radius: 6px;
404       }
405     }
406
407     .node-config-error {
408       border-color: #ff5219 !important;
409     }
410     // 普通节点包装
411     .node-wrapper {
412       display: flex;
413       flex-direction: column;
414       justify-content: center;
415       align-items: center;
416     }
417     // 节点连线处理
418     .node-handler-wrapper {
419       position: relative;
420       display: flex;
421       height: 70px;
422       align-items: center;
423       user-select: none;
424       justify-content: center;
425       flex-direction: column;
426
427       &::before {
428         position: absolute;
429         top: 0;
430         z-index: 0;
431         width: 2px;
432         height: 100%;
433         margin: auto;
434         background-color: #dedede;
435         content: '';
436       }
437
438       .node-handler {
439         .add-icon {
440           position: relative;
441           top: -5px;
442           display: flex;
443           width: 25px;
444           height: 25px;
445           color: #fff;
446           cursor: pointer;
447           background-color: #0089ff;
448           border-radius: 50%;
449           align-items: center;
450           justify-content: center;
451
452           &:hover {
453             transform: scale(1.1);
454           }
455         }
456       }
457
458       .node-handler-arrow {
459         position: absolute;
460         bottom: 0;
461         left: 50%;
462         display: flex;
463         transform: translateX(-50%);
464       }
465     }
466
467     // 条件节点包装
468     .branch-node-wrapper {
469       position: relative;
470       display: flex;
471       flex-direction: column;
472       justify-content: center;
473       align-items: center;
474       margin-top: 16px;
475
476       .branch-node-container {
477         position: relative;
478         display: flex;
c9a6f7 479         min-width: fit-content;
3e359e 480
H 481         &::before {
482           position: absolute;
483           left: 50%;
484           width: 4px;
485           height: 100%;
486           background-color: #fafafa;
487           content: '';
488           transform: translate(-50%);
489         }
490
491         .branch-node-add {
492           position: absolute;
493           top: -18px;
494           left: 50%;
495           z-index: 1;
496           height: 36px;
497           padding: 0 10px;
498           font-size: 12px;
499           line-height: 36px;
500           border: 2px solid #dedede;
501           border-radius: 18px;
502           transform: translateX(-50%);
503           transform-origin: center center;
504         }
505
506         .branch-node-readonly {
507           position: absolute;
508           top: -18px;
509           left: 50%;
510           z-index: 1;
511           display: flex;
512           width: 36px;
513           height: 36px;
514           background-color: #fff;
515           border: 2px solid #dedede;
516           border-radius: 50%;
517           transform: translateX(-50%);
518           align-items: center;
519           justify-content: center;
520           transform-origin: center center;
521
522           &.status-pass {
523             background-color: #e9f4e2;
524             border-color: #6bb63c;
525           }
526
527           &.status-pass:hover {
528             border-color: #6bb63c;
529           }
530
531           .icon-size {
532             font-size: 22px;
533             &.condition {
534               color: #67c23a;
535             }
536             &.parallel {
537               color: #626aef;
538             }
539             &.inclusive {
540               color: #345da2;
541             }
542           }
543         }
544
545         .branch-node-item {
546           position: relative;
547           display: flex;
548           flex-direction: column;
549           align-items: center;
550           min-width: 280px;
551           padding: 40px 40px 0;
552           background: transparent;
553           border-top: 2px solid #dedede;
554           border-bottom: 2px solid #dedede;
c9a6f7 555           flex-shrink: 0;
3e359e 556
H 557           &::before {
558             position: absolute;
559             width: 2px;
560             height: 100%;
561             margin: auto;
562             inset: 0;
563             background-color: #dedede;
564             content: '';
565           }
566         }
567         // 覆盖条件节点第一个节点左上角的线
568         .branch-line-first-top {
569           position: absolute;
570           top: -5px;
571           left: -1px;
572           width: 50%;
573           height: 7px;
574           background-color: #fafafa;
575           content: '';
576         }
577         // 覆盖条件节点第一个节点左下角的线
578         .branch-line-first-bottom {
579           position: absolute;
580           bottom: -5px;
581           left: -1px;
582           width: 50%;
583           height: 7px;
584           background-color: #fafafa;
585           content: '';
586         }
587         // 覆盖条件节点最后一个节点右上角的线
588         .branch-line-last-top {
589           position: absolute;
590           top: -5px;
591           right: -1px;
592           width: 50%;
593           height: 7px;
594           background-color: #fafafa;
595           content: '';
596         }
597         // 覆盖条件节点最后一个节点右下角的线
598         .branch-line-last-bottom {
599           position: absolute;
600           right: -1px;
601           bottom: -5px;
602           width: 50%;
603           height: 7px;
604           background-color: #fafafa;
605           content: '';
606         }
607       }
608     }
609
610     .node-fixed-name {
611       display: inline-block;
612       width: auto;
613       padding: 0 4px;
614       overflow: hidden;
615       text-align: center;
616       text-overflow: ellipsis;
617       white-space: nowrap;
618     }
619     // 开始节点包装
620     .start-node-wrapper {
621       position: relative;
622       margin-top: 16px;
623
624       .start-node-container {
625         display: flex;
626         flex-direction: column;
627         justify-content: center;
628         align-items: center;
629
630         .start-node-box {
631           display: flex;
632           justify-content: center;
633           align-items: center;
634           width: 90px;
635           height: 36px;
636           padding: 3px 4px;
637           color: #212121;
638           cursor: pointer;
639           background: #fafafa;
640           border-radius: 30px;
641           box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
642           box-sizing: border-box;
643         }
644       }
645     }
646
647     // 结束节点包装
648     .end-node-wrapper {
649       margin-bottom: 16px;
650
651       .end-node-box {
652         display: flex;
653         width: 80px;
654         height: 36px;
655         color: #212121;
656         border: 2px solid #fafafa;
657         border-radius: 30px;
658         box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
659         box-sizing: border-box;
660         justify-content: center;
661         align-items: center;
662
663         &.status-pass {
664           background-color: #a9da90;
665           border-color: #6bb63c;
666         }
667
668         &.status-pass:hover {
669           border-color: #6bb63c;
670         }
671
672         &.status-reject {
673           background-color: #f6e5e5;
674           border-color: #e47470;
675         }
676
677         &.status-reject:hover {
678           border-color: #e47470;
679         }
680
681         &.status-cancel {
682           background-color: #eaeaeb;
683           border-color: #919398;
684         }
685
686         &.status-cancel:hover {
687           border-color: #919398;
688         }
689       }
690     }
691
692     // 可编辑的 title 输入框
693     .editable-title-input {
694       height: 20px;
695       max-width: 145px;
696       margin-left: 4px;
697       font-size: 12px;
698       line-height: 20px;
699       border: 1px solid #d9d9d9;
700       border-radius: 4px;
701       transition: all 0.3s;
702
703       &:focus {
704         border-color: #40a9ff;
705         outline: 0;
706         box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
707       }
708     }
709   }
710 }
711
712 // iconfont 样式
713 @font-face {
714   font-family: 'iconfont'; /* Project id 4495938 */
715   src:
716     url('iconfont.woff2?t=1724339470412') format('woff2'),
717     url('iconfont.woff?t=1724339470412') format('woff'),
718     url('iconfont.ttf?t=1724339470412') format('truetype');
719 }
720
721 .iconfont {
722   font-family: 'iconfont' !important;
723   font-size: 16px;
724   font-style: normal;
725   -webkit-font-smoothing: antialiased;
726   -moz-osx-font-smoothing: grayscale;
727 }
728
729 .icon-start-user:before {
730   content: '\e679';
731 }
732
733 .icon-inclusive:before {
734   content: '\e602';
735 }
736
737 .icon-copy:before {
738   content: '\e7eb';
739 }
740
741 .icon-handle:before {
742   content: '\e61c';
743 }
744
745 .icon-exclusive:before {
746   content: '\e717';
747 }
748
749 .icon-approve:before {
750   content: '\e715';
751 }
752
753 .icon-parallel:before {
754   content: '\e688';
755 }