├── README.md ├── bookmarks_2020_1_10.html ├── favicon.ico └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # jquery-workflow 2 | 基于html与jquery制作的仿钉钉流程图效果 3 | 最近项目用到使用钉钉制作流程图，在网上没有找到相关资料，只找到了一位大佬基于vue做的一个仿钉钉流程图。 4 | 5 | 这是链接：https://blog.csdn.net/m0_37285193/article/details/103098573 6 | 7 | 因为我的项目是比较老旧的一个框架，没有办法，只能一点点撸，功夫不负有心，最后算是搞出来了。 8 | -------------------------------------------------------------------------------- /bookmarks_2020_1_10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 迷茫的超级兵 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 | - 23 | + 24 |
25 |
26 | 27 |
28 | 29 |
30 |
31 |
32 | 33 | 发起人 34 |
35 |
36 | 所有人 37 | 38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | 52 | 审核人 53 | 54 |
55 |
56 | 所有人 57 | 58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 | 结束流程 73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | 83 |
84 |

审核人

85 |
86 |
87 |
88 | 89 |
90 |

抄送人

91 |
92 |
93 |
94 | 95 |
96 |

条件分支

97 |
98 |
99 | 100 |
101 | 102 |
103 |
104 | 105 | 311 | 312 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lc19970914/jquery-workflow/67e5cfe1c3228fbcbed3898d253004adca1ca18b/favicon.ico -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0;padding: 0; 3 | } 4 | html{ 5 | background: #F5F5F7; 6 | } 7 | .fd-nav-content { 8 | position: fixed; 9 | top: 60px; 10 | left: 0; 11 | right: 0; 12 | bottom: 0; 13 | z-index: 1; 14 | overflow-x: scroll; 15 | overflow-y: auto; 16 | padding-bottom: 30px; 17 | } 18 | .zoom{ 19 | display: flex; 20 | position: fixed; 21 | -webkit-box-align: center; 22 | align-items: center; 23 | -webkit-box-pack: justify; 24 | justify-content: space-between; 25 | height: 40px; 26 | width: 100px; 27 | right: 40px; 28 | margin-top: 30px; 29 | z-index: 10; 30 | font-size: 25px; 31 | } 32 | .zoom span{ 33 | display: inline-block; 34 | width: 40px; 35 | line-height: 40px; 36 | text-align: center; 37 | color: #c1c1cd; 38 | background: #FFFFFF; 39 | cursor: pointer; 40 | border-radius: 5px; 41 | } 42 | .node-wrap{ 43 | display: inline-flex; 44 | flex-direction: column; 45 | align-items: center; 46 | width: 100%; 47 | padding: 0 50px; 48 | position: relative; 49 | } 50 | .node-wrap-box{ 51 | width: 220px; 52 | display: inline-flex; 53 | align-items: center; 54 | flex-direction: column; 55 | background-color: #FFFFFF; 56 | border-radius: 5px; 57 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); 58 | cursor: pointer; 59 | border: 1px solid #F5F5F5; 60 | position: relative; 61 | } 62 | .btnRemove{ 63 | position: absolute; 64 | top: 8px; 65 | right: 5px; 66 | display: none; 67 | } 68 | .node-wrap-box:hover{ 69 | border:1px solid rgb(50, 150, 250); 70 | transition: all .3s; 71 | } 72 | .node-wrap-box::before{ 73 | content: ""; 74 | position: absolute; 75 | top: -13px; 76 | left: 50%; 77 | -webkit-transform: translateX(-50%); 78 | transform: translateX(-50%); 79 | width: 0; 80 | height: 4px; 81 | border-style: solid; 82 | border-width: 8px 6px 4px; 83 | border-color: #cacaca transparent transparent; 84 | background: #f5f5f7; 85 | } 86 | .node-wrap-box:hover .btnRemove{ 87 | display: block; 88 | } 89 | .node-wrap-box:hover .userEdit{ 90 | border-bottom: 1px dashed #FFFFFF; 91 | } 92 | .node-wrap-box .userEdit{ 93 | display: inline-block; 94 | padding-bottom: 1px; 95 | } 96 | .node-wrap-box .title{ 97 | border-radius: 4px 5px 0 0 98 | } 99 | .node-wrap-box>div{ 100 | width: 100%; 101 | } 102 | .node-wrap-box>div:nth-of-type(1){ 103 | padding: 5px 10px; 104 | color: white; 105 | font-size: 12px; 106 | position: relative; 107 | } 108 | .node-wrap-box>div:nth-of-type(2){ 109 | padding: 15px 10px; 110 | display: flex; 111 | justify-content: space-between; 112 | } 113 | .node-add-btn-box{ 114 | position: relative; 115 | } 116 | .node-add-btn-box::before{ 117 | content: ""; 118 | position: absolute; 119 | top: 0; 120 | left: 0; 121 | right: 0; 122 | bottom: 0; 123 | z-index: -1; 124 | margin: auto; 125 | width: 2px; 126 | height: 100%; 127 | background-color: #cacaca; 128 | } 129 | .add-node-btn{ 130 | padding: 30px 0; 131 | } 132 | .top-left-cover-line{ 133 | position: absolute; 134 | height: 3px; 135 | width: 50%; 136 | background-color: #f5f5f7; 137 | top: -2px; 138 | left: -1px; 139 | } 140 | .bottom-left-cover-line{ 141 | position: absolute; 142 | height: 3px; 143 | width: 50%; 144 | background-color: #f5f5f7; 145 | bottom: -2px; 146 | left: -1px; 147 | } 148 | .top-right-cover-line{ 149 | position: absolute; 150 | height: 3px; 151 | width: 50%; 152 | background-color: #f5f5f7; 153 | top: -2px; 154 | right: -1px; 155 | } 156 | .bottom-right-cover-line{ 157 | position: absolute; 158 | height: 3px; 159 | width: 50%; 160 | background-color: #f5f5f7; 161 | bottom: -2px; 162 | right: -1px; 163 | } 164 | .add-node-btn button{ 165 | border-radius: 50%; 166 | background: rgb(50, 150, 250); 167 | font-size: 25px; 168 | border-color: rgb(50, 150, 250); 169 | width: 35px; 170 | line-height: 33px; 171 | padding: 0; 172 | margin: 0; 173 | } 174 | .add-node-btn button:hover{ 175 | background: rgb(50, 150, 250); 176 | border-color: rgb(50, 150, 250); 177 | transform: scale(1.2); 178 | transition:all .3s 179 | } 180 | .branch-box-wrap{ 181 | display: inline-flex; 182 | flex-direction: column; 183 | align-items: center; 184 | width: 100%; 185 | } 186 | .branch-box{ 187 | display: flex; 188 | border-bottom: 2px solid #cccccc; 189 | border-top: 2px solid #cccccc; 190 | position: relative; 191 | } 192 | .add-branch{ 193 | position: absolute; 194 | display: inline-block; 195 | left: 50%; 196 | top: -15px; 197 | z-index: 1; 198 | border-radius: 15px; 199 | color: rgb(50, 150, 250); 200 | border: none; 201 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); 202 | background: #FFFFFF; 203 | padding: 5px 10px; 204 | font-size: 12px; 205 | cursor: pointer; 206 | line-height: 20px; 207 | transform: translateX(-50%); 208 | 209 | } 210 | .col-box{ 211 | display: inline-flex; 212 | background: #f5f5f7;; 213 | flex-direction: column; 214 | align-items: center; 215 | position: relative; 216 | } 217 | .col-box::before{ 218 | content: ""; 219 | position: absolute; 220 | top: 0; 221 | left: 0; 222 | right: 0; 223 | bottom: 0; 224 | z-index: 0; 225 | margin: auto; 226 | width: 2px; 227 | height: 100%; 228 | background-color: #cacaca; 229 | } 230 | .condition-node-box{ 231 | display: inline-flex; 232 | flex-direction: column; 233 | align-items: center; 234 | position: relative; 235 | padding: 30px 50px 0 50px; 236 | } 237 | .auto-judge{ 238 | background-color: #FFFFFF; 239 | border-radius: 5px; 240 | width: 220px; 241 | position: relative; 242 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); 243 | cursor: pointer; 244 | border: 1px solid #FFFFFF; 245 | } 246 | .auto-judge:hover{ 247 | border: 1px solid rgb(50, 150, 250); 248 | transition:all .3s 249 | } 250 | .title-wrapper{ 251 | padding: 5px 0; 252 | background-color: #ffffff; 253 | border-radius: 5px 5px 0 0; 254 | color: #15bc83; 255 | font-size: 12px; 256 | position: relative; 257 | } 258 | .auto-judge:hover .btnRemove{ 259 | display: block; 260 | } 261 | .auto-judge>div:nth-of-type(2){ 262 | padding: 15px 10px; 263 | } 264 | .condition-node-box::before{ 265 | content: ""; 266 | position: absolute; 267 | top: 0; 268 | left: 0; 269 | right: 0; 270 | bottom: 0; 271 | margin: auto; 272 | width: 2px; 273 | height: 100%; 274 | background-color: #cacaca; 275 | } 276 | .condition-input{ 277 | line-height: 19px; 278 | height: 18px; 279 | display: inline-block; 280 | width: 135px; 281 | padding: 0; 282 | padding-left: 5px; 283 | font-size: 12px; 284 | border: none; 285 | } 286 | .end-node{ 287 | border-radius: 50%; 288 | font-size: 14px; 289 | color: rgba(25, 31, 37, .4); 290 | text-align: left; 291 | } 292 | .end-node-circle{ 293 | width: 10px; 294 | height: 10px; 295 | margin: auto; 296 | border-radius: 50%; 297 | background: #dbdcdc; 298 | } 299 | .end-node-text{ 300 | margin-top: 5px; 301 | text-align: center; 302 | } 303 | .contene-open-choose{ 304 | display: flex; 305 | justify-content: space-between; 306 | align-items: center;padding: 10px 15px; 307 | } 308 | .add-node-btn-box::before{ 309 | content: ""; 310 | position: absolute; 311 | top: 0; 312 | left: 0; 313 | right: 0; 314 | bottom: 0; 315 | z-index: -1; 316 | margin: auto; 317 | width: 2px; 318 | height: 100%; 319 | background-color: #cacaca; 320 | } 321 | .item-wrapper{ 322 | cursor: pointer; 323 | border: 1px solid #e2e2e2; 324 | border-radius: 50%; 325 | } 326 | 327 | .item-wrapper:hover{ 328 | transform: scale(1.15); 329 | transition:all .3s 330 | } 331 | .item-wrapper span{ 332 | display: inline-block; 333 | padding: 16px; 334 | font-size: 30px; 335 | } 336 | .item-user{ 337 | padding: 0; 338 | margin: 0; 339 | padding-top: 5px; 340 | } 341 | #addtooltip-box{ 342 | display: flex; 343 | text-align: center; 344 | } 345 | #addtooltip-box>div:nth-of-type(1) span{ 346 | color: #ff943e; 347 | } 348 | #addtooltip-box>div:nth-of-type(2) span{ 349 | color: #3296fa; 350 | } 351 | #addtooltip-box>div:nth-of-type(3) span{ 352 | color: #15bc83; 353 | } 354 | #addtooltip-box>div{ 355 | padding: 10px 15px; 356 | } 357 | #addtooltip-warpper{ 358 | z-index: 999; 359 | display: none; 360 | position: fixed; 361 | background: #FFFFFF; 362 | border: 1px solid #EBEEF5; 363 | border-radius: 5px; 364 | box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) 365 | } 366 | #addtooltip-pointer::after{ 367 | content: ""; 368 | border: 8px solid transparent; 369 | border-right-color: #FFFFFF; 370 | position: absolute; 371 | left: -17px; 372 | top: 20px; 373 | } 374 | --------------------------------------------------------------------------------