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