Skip to content

C
CivManage
Commit 7f4aad6c authored by 邓超's avatar 邓超
Browse files
Options

fix: 修改流程节点样式及交互，添加子节点配置

parent 937c79b3
Pipeline #64064 passed with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 765 additions and 149 deletions
          src/assets/images/workFlow/gatewayCondition.svg 0 → 100644
          View file @ 7f4aad6c
          <?xml version="1.0" encoding="utf-8"?>
          <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
          <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
          <style type="text/css">
          .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FED6CC;}
          .st1{fill:#FB6363;}
          .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#333333;}
          </style>
          <g>
          <path class="st0" d="M3,15L15,3l12,12L15,27L3,15z"/>
          <path class="st1" d="M15,28.4L1.6,15L15,1.6L28.4,15L15,28.4z M4.4,15L15,25.6L25.6,15L15,4.4L4.4,15z"/>
          </g>
          <path class="st2" d="M11.7,10.2l8.6,8.6c0.4,0.4,0.4,1,0,1.4c-0.4,0.4-1,0.4-1.4,0l-8.6-8.6c-0.4-0.4-0.4-1,0-1.4
          C10.7,9.9,11.3,9.9,11.7,10.2z"/>
          <path class="st2" d="M19,10.2l-8.6,8.6c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l8.6-8.6c0.4-0.4,0.4-1,0-1.4
          C19.9,9.9,19.3,9.9,19,10.2z"/>
          </svg>
          src/assets/images/workFlow/gatewayJoin.svg 0 → 100644
          View file @ 7f4aad6c
          <?xml version="1.0" encoding="utf-8"?>
          <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
          <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
          <style type="text/css">
          .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FED6CC;}
          .st1{fill:#FB6363;}
          .st2{fill:#333333;}
          </style>
          <g>
          <path class="st0" d="M3.1,15l12-12l12,12l-12,12L3.1,15z"/>
          <path class="st1" d="M15.1,28.4L1.7,15L15.1,1.6L28.6,15L15.1,28.4z M4.5,15l10.6,10.6L25.7,15L15.1,4.4L4.5,15z"/>
          </g>
          <path class="st2" d="M15.1,20.5c-3,0-5.5-2.5-5.5-5.5c0-2.9,2.6-5.5,5.5-5.5c3,0,5.5,2.5,5.5,5.5C20.6,18,18.2,20.5,15.1,20.5z
          M15.1,11.5c-1.8,0-3.5,1.7-3.5,3.5c0,1.9,1.6,3.5,3.5,3.5c1.9,0,3.5-1.6,3.5-3.5C18.6,13.1,17,11.5,15.1,11.5z"/>
          </svg>
          src/assets/images/workFlow/gatewayParallel.svg 0 → 100644
          View file @ 7f4aad6c
          <?xml version="1.0" encoding="utf-8"?>
          <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
          <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
          <style type="text/css">
          .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FED6CC;}
          .st1{fill:#FB6363;}
          .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#333333;}
          </style>
          <g>
          <path class="st0" d="M3,15L15,3l12,12L15,27L3,15z"/>
          <path class="st1" d="M15,28.4L1.6,15L15,1.6L28.4,15L15,28.4z M4.4,15L15,25.6L25.6,15L15,4.4L4.4,15z"/>
          </g>
          <path class="st2" d="M16.3,9.1v12.8c0,0-0.4,0.6-1,0.6c-0.5,0-1-0.7-1-0.6V9.1c0-0.5,0.4-1,1-1C15.9,8.2,16.3,8.6,16.3,9.1z"/>
          <path class="st2" d="M21.7,14.3H9.2c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1h12.5c0.3,0,0.7-0.4,0.7-1C22.4,14.7,22,14.3,21.7,14.3z"/>
          </svg>
          src/assets/images/workFlow/nodeEnd.svg 0 → 100644
          View file @ 7f4aad6c
          <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="127.5px" height="127.5px">
          <defs>
          <linearGradient id="PSgrad_0" x1="54.464%" x2="0%" y1="83.867%" y2="0%">
          <stop offset="0%" stop-color="rgb(230,230,235)" stop-opacity="1" />
          <stop offset="100%" stop-color="rgb(254,255,255)" stop-opacity="1" />
          </linearGradient>
          <linearGradient id="PSgrad_1" x1="54.464%" x2="0%" y1="83.867%" y2="0%">
          <stop offset="100%" stop-color="rgb(254,255,255)" stop-opacity="1" />
          </linearGradient>
          </defs>
          <path fill-rule="evenodd" stroke-width="1px" stroke-linecap="round" stroke-linejoin="miter" fill="url(#PSgrad_0)"
          d="M63.499,1.219 C97.741,1.219 125.499,28.948 125.499,63.153 C125.499,97.358 97.741,125.87 63.499,125.87 C29.257,125.87 1.499,97.358 1.499,63.153 C1.499,28.948 29.257,1.219 63.499,1.219 Z"/>
          <path fill-rule="evenodd" stroke="rgb(81, 194, 26)" stroke-width="1px" stroke-linecap="round" stroke-linejoin="miter" fill="url(#PSgrad_1)"
          d="M63.499,11.724 C91.933,11.724 114.984,34.750 114.984,63.153 C114.984,91.557 91.933,114.583 63.499,114.583 C35.65,114.583 12.15,91.557 12.15,63.153 C12.15,34.750 35.65,11.724 63.499,11.724 Z"/>
          </svg>
          src/assets/images/workFlow/nodeGeneral.svg 0 → 100644
          View file @ 7f4aad6c
          <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="211.5px" height="112.5px">
          <defs>
          <linearGradient id="PSgrad_0" x1="54.464%" x2="0%" y1="83.867%" y2="0%">
          <stop offset="0%" stop-color="rgb(238,238,241)" stop-opacity="1" />
          <stop offset="100%" stop-color="rgb(254,255,255)" stop-opacity="1" />
          </linearGradient>
          <linearGradient id="PSgrad_1" x1="54.464%" x2="0%" y1="83.867%" y2="0%">
          <stop offset="100%" stop-color="rgb(254,255,255)" stop-opacity="1" />
          </linearGradient>
          </defs>
          <path fill-rule="evenodd" stroke-width="1px" stroke-linecap="round" stroke-linejoin="miter" fill="url(#PSgrad_0)"
          d="M26.0,1.727 L184.999,1.727 C198.806,1.727 209.999,12.920 209.999,26.727 L209.999,85.589 C209.999,99.396 198.806,110.589 184.999,110.589 L26.0,110.589 C12.193,110.589 1.0,99.396 1.0,85.589 L1.0,26.727 C1.0,12.920 12.193,1.727 26.0,1.727 Z"/>
          <path fill-rule="evenodd" stroke="rgb(1, 120, 255)" stroke-width="1px" stroke-linecap="round" stroke-linejoin="miter" fill="url(#PSgrad_1)"
          d="M31.999,10.690 L178.0,10.690 C189.45,10.690 198.0,19.645 198.0,30.690 L198.0,80.626 C198.0,91.672 189.45,100.626 178.0,100.626 L31.999,100.626 C20.954,100.626 11.999,91.672 11.999,80.626 L11.999,30.690 C11.999,19.645 20.954,10.690 31.999,10.690 Z"/>
          </svg>
          src/assets/images/workFlow/nodeStart.svg 0 → 100644
          View file @ 7f4aad6c
          <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="127.5px" height="127.5px">
          <defs>
          <linearGradient id="PSgrad_0" x1="54.464%" x2="0%" y1="83.867%" y2="0%">
          <stop offset="0%" stop-color="rgb(230,230,235)" stop-opacity="1" />
          <stop offset="100%" stop-color="rgb(254,255,255)" stop-opacity="1" />
          </linearGradient>
          </defs>
          <path fill-rule="evenodd" stroke-width="1px" stroke-linecap="round" stroke-linejoin="miter" fill="url(#PSgrad_0)"
          d="M63.499,1.222 C97.741,1.222 125.499,28.950 125.499,63.155 C125.499,97.360 97.741,125.89 63.499,125.89 C29.257,125.89 1.499,97.360 1.499,63.155 C1.499,28.950 29.257,1.222 63.499,1.222 Z"/>
          <path fill-rule="evenodd" stroke="rgb(1, 120, 255)" stroke-width="1px" stroke-linecap="round" stroke-linejoin="miter" fill="rgb(254, 255, 255)"
          d="M63.15,11.726 C91.181,11.726 114.15,34.535 114.15,62.672 C114.15,90.808 91.181,113.617 63.15,113.617 C34.848,113.617 12.15,90.808 12.15,62.672 C12.15,34.535 34.848,11.726 63.15,11.726 Z"/>
          </svg>
          src/assets/images/workFlow/nodesubprocess.svg 0 → 100644
          View file @ 7f4aad6c
          <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="211.5px" height="112.5px">
          <defs>
          <linearGradient id="PSgrad_0" x1="54.464%" x2="0%" y1="83.867%" y2="0%">
          <stop offset="0%" stop-color="rgb(230,230,235)" stop-opacity="1" />
          <stop offset="100%" stop-color="rgb(254,255,255)" stop-opacity="1" />
          </linearGradient>
          </defs>
          <path fill-rule="evenodd" stroke-width="1px" stroke-linecap="round" stroke-linejoin="miter" fill="url(#PSgrad_0)"
          d="M55.427,1.865 L155.572,1.865 C185.631,1.865 209.999,26.233 209.999,56.292 L209.999,56.299 C209.999,86.358 185.631,110.726 155.572,110.726 L55.427,110.726 C25.368,110.726 1.0,86.358 1.0,56.299 L1.0,56.292 C1.0,26.233 25.368,1.865 55.427,1.865 Z"/>
          <path fill-rule="evenodd" stroke="rgb(152, 80, 246)" stroke-width="1px" stroke-linecap="round" stroke-linejoin="miter" fill="rgb(254, 255, 255)"
          d="M56.875,10.482 L153.124,10.482 C177.908,10.482 198.0,30.573 198.0,55.357 C198.0,80.142 177.908,100.233 153.124,100.233 L56.875,100.233 C32.91,100.233 11.999,80.142 11.999,55.357 C11.999,30.573 32.91,10.482 56.875,10.482 Z"/>
          </svg>
          src/assets/images/workFlow/subprocessicon.svg 0 → 100644
          View file @ 7f4aad6c
          <?xml version="1.0" encoding="utf-8"?>
          <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
          <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          width="108px" height="42px" viewBox="0 0 108 42" style="enable-background:new 0 0 108 42;" xml:space="preserve">
          <style type="text/css">
          .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F5F7FB;}
          .st1{fill:#DEE3EE;}
          .st2{fill:url(#SVGID_1_);}
          .st3{fill:#FFFFFF;}
          .st4{fill:#9850F6;}
          .st5{opacity:0.85;}
          </style>
          <g>
          <path class="st0" d="M8.6,0.7h90.5c4.4,0,8,4.4,8,8.1v24.4c0,4.5-3.6,8.1-8,8.1H8.6c-3.7,0-8-3.6-8-8.1V8.8C0.6,5,4.9,0.7,8.6,0.7z
          "/>
          <path class="st1" d="M99.1,41.9H8.6c-4,0-8.5-3.8-8.5-8.6V8.8c0-4,4.6-8.6,8.5-8.6h90.5c4.8,0,8.5,4.6,8.5,8.6v24.4
          C107.7,38,103.8,41.9,99.1,41.9z M8.6,1.2c-3.5,0-7.5,4.1-7.5,7.6v24.4c0,4.2,4.1,7.6,7.5,7.6h90.5c4.2,0,7.5-3.4,7.5-7.6V8.8
          c0-3.5-3.4-7.6-7.5-7.6C99.1,1.2,8.6,1.2,8.6,1.2z"/>
          </g>
          <g>
          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="3.6177" y1="20" x2="35.1177" y2="20">
          <stop offset="0" style="stop-color:#EEEEF1"/>
          <stop offset="1" style="stop-color:#FEFFFF"/>
          </linearGradient>
          <path class="st2" d="M25.9,29.4H12.8c-5.1,0-9.2-4.1-9.2-9.2v-0.4c0-5.1,4.1-9.2,9.2-9.2h13.1c5.1,0,9.2,4.1,9.2,9.2v0.4
          C35.1,25.3,31,29.4,25.9,29.4z"/>
          <path class="st1" d="M25.9,29.9H12.8c-5.4,0-9.7-4.4-9.7-9.7v-0.4c0-5.4,4.4-9.7,9.7-9.7h13.1c5.4,0,9.7,4.4,9.7,9.7v0.4
          C35.6,25.6,31.3,29.9,25.9,29.9z M12.8,11.1c-4.8,0-8.7,3.9-8.7,8.7v0.4c0,4.8,3.9,8.7,8.7,8.7h13.1c4.8,0,8.7-3.9,8.7-8.7v-0.4
          c0-4.8-3.9-8.7-8.7-8.7H12.8z"/>
          </g>
          <g>
          <path class="st3" d="M25.2,26.8H13.6c-3.7,0-6.8-3-6.8-6.8v0c0-3.7,3-6.8,6.8-6.8h11.6c3.7,0,6.8,3,6.8,6.8v0
          C32,23.7,28.9,26.8,25.2,26.8z"/>
          <path class="st4" d="M25.2,27.3H13.6c-4,0-7.3-3.3-7.3-7.3c0-4,3.3-7.3,7.3-7.3h11.6c4,0,7.3,3.3,7.3,7.3
          C32.5,24,29.2,27.3,25.2,27.3z M13.6,13.7c-3.5,0-6.3,2.8-6.3,6.3s2.8,6.3,6.3,6.3h11.6c3.5,0,6.3-2.8,6.3-6.3s-2.8-6.3-6.3-6.3
          H13.6z"/>
          </g>
          <g class="st5">
          <path d="M37.7,20h5.7v-1.8c1.1-0.7,2.2-1.4,3.2-2.3h-7.4v-1.2h9.2V16c-1.1,1.1-2.3,2-3.6,2.9V20h5.1v1.3h-5.1v4.2
          c0,0.9-0.4,1.4-1.3,1.4H41l-0.4-1.3c0.7,0,1.4,0,2.3,0c0.4,0,0.6-0.2,0.6-0.6v-3.8h-5.7V20z"/>
          <path d="M51.6,17.7c0.9,0.7,1.6,1.4,2.2,2l-0.9,0.9c-0.5-0.6-1.2-1.3-2.2-2L51.6,17.7z M53.9,21.8c-0.5,1.8-1.1,3.5-1.8,5L51,26.3
          c0.7-1.7,1.3-3.3,1.8-4.9L53.9,21.8z M52,14.4c0.9,0.6,1.6,1.2,2.1,1.8l-0.9,0.9c-0.6-0.6-1.3-1.2-2.2-1.8L52,14.4z M56.5,20.7
          c-0.1,1.8-0.2,3.2-0.5,4c-0.3,0.9-0.9,1.6-1.7,2.3l-0.8-1c0.6-0.5,1.1-1.1,1.3-1.9c0.2-0.7,0.4-1.8,0.4-3.4H56.5z M54.5,19.1
          l0.3-0.1c0.5-0.3,1.1-1,1.8-2.3h-2.2v-1.2h3.7c-0.2-0.4-0.3-0.9-0.5-1.2l1.3-0.2c0.2,0.5,0.4,1,0.5,1.5H63v1.2h-5
          c-0.6,1-1.1,1.8-1.5,2.2c1.4-0.1,2.8-0.2,4.2-0.4c-0.4-0.5-0.6-0.8-0.8-1l1.1-0.7c1,1.2,1.7,2.1,2.2,3L62,20.6
          c-0.2-0.4-0.4-0.7-0.6-1c-2.1,0.2-4.3,0.4-6.6,0.6L54.5,19.1z M57.5,20.7h1.3v6.1h-1.3V20.7z M61.4,26.9c-0.9,0-1.4-0.4-1.4-1.2v-5
          h1.2v4.7c0,0.2,0.1,0.2,0.2,0.3h0.5c0.2,0,0.3-0.2,0.3-0.6c0-0.5,0.1-1,0.1-1.5l1.1,0.4c0,1.3-0.1,2.1-0.3,2.4
          c-0.2,0.3-0.6,0.4-1.2,0.5H61.4z"/>
          <path d="M64,17.9h1.9v-1.7c-0.6,0.1-1.2,0.1-1.6,0.2L64,15.2c1.7-0.1,3.2-0.4,4.6-0.8l0.5,1.2c-0.6,0.2-1.2,0.3-1.9,0.4v1.9h1.6
          v1.3h-1.6v0.6c0.5,0.5,1.2,1.1,1.9,1.9l-0.7,1.1c-0.5-0.8-0.9-1.4-1.1-1.8V27h-1.3v-5.8c-0.5,1.2-1,2.3-1.7,3.2l-0.6-1.5
          c1-1.1,1.7-2.3,2.1-3.7H64V17.9z M69.1,20h7v1.2h-2.9v1.4h2.5v1.2h-2.5v1.5h3.2v1.2h-7.8v-1.2h3.3v-1.5h-2.4v-1.2h2.4v-1.4h-2.7V20
          z M69.6,14.7h6.1v4.2h-6.1V14.7z M74.4,17.7v-1.9h-3.5v1.9H74.4z"/>
          <path d="M77.2,15.5h3.1v-1.2h1.3v1.2h3.3v-1.2h1.3v1.2h3.1v1.3h-3.1v1.2h-1.3v-1.2h-3.3v1.2h-1.3v-1.2h-3.1V15.5z M81.6,19.7h-3.8
          v-1.3h10.5c-0.1,2.4-0.2,3.9-0.2,4.4c-0.1,0.7-0.2,1.2-0.5,1.4c-0.3,0.3-0.7,0.4-1.4,0.4c-0.4,0-0.9,0-1.5,0l-0.4-1.3
          c0.7,0,1.2,0,1.5,0c0.3,0,0.5-0.1,0.7-0.2c0.1-0.2,0.2-0.6,0.3-1.2c0-0.2,0.1-1,0.1-2.3h-4V27h-1.3V19.7z"/>
          <path d="M92.9,23.9c-0.5,1.2-1.1,2.2-1.8,3.1L90,26.2c0.7-0.8,1.2-1.7,1.7-2.8L92.9,23.9z M95.5,14.3h1.3v1.2h5.3v1.2h-5.3v1.5h4.4
          v4.7h-9.4v-4.7h3.7V14.3z M99.9,21.7v-2.2h-6.8v2.2H99.9z M95.1,23.8c0.3,0.9,0.5,1.8,0.7,2.9L94.5,27c-0.2-1.1-0.4-2.1-0.7-2.9
          L95.1,23.8z M97.9,23.6c0.4,0.9,0.7,1.9,1.1,3L97.7,27c-0.3-1.2-0.6-2.2-1-3.1L97.9,23.6z M100.7,23.3c0.9,1.1,1.5,2.1,2,3
          l-1.1,0.8c-0.5-1-1.2-2-2-3L100.7,23.3z"/>
          </g>
          </svg>
          src/assets/images/workFlow/subprocessicon1.svg 0 → 100644
          View file @ 7f4aad6c
          <?xml version="1.0" encoding="utf-8"?>
          <!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
          <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
          <style type="text/css">
          .st0{fill:#9850F6;}
          </style>
          <path class="st0" d="M8.5,10.1h5.7c0.3,0,0.6-0.3,0.6-0.6V7.3c0-0.3-0.3-0.6-0.6-0.6H8.5C8.2,6.7,7.9,7,7.9,7.3v0.3H5.6L4,6
          c0,0,0-0.1,0-0.1V4.3c0.7-0.2,1.2-0.9,1.2-1.7c0-1-0.8-1.8-1.8-1.8S1.7,1.6,1.7,2.6c0,0.8,0.5,1.4,1.2,1.7v1.5L0.7,8
          C0.6,8.1,0.5,8.3,0.5,8.4c0,0.1,0.1,0.3,0.2,0.4L2.9,11v2.4c0,0.3,0.3,0.6,0.6,0.6h4.5v0.6c0,0.3,0.3,0.6,0.6,0.6h5.7
          c0.3,0,0.6-0.3,0.6-0.6v-2.2c0-0.3-0.3-0.6-0.6-0.6H8.5c-0.3,0-0.6,0.3-0.6,0.6v0.5H4v-2l2-2c0,0,0,0,0,0h1.8v0.8
          C7.9,9.9,8.2,10.1,8.5,10.1z M13.7,7.9V9H9.1V8.6l0-0.7H13.7z M9.1,13.8V13v-0.1h4.6V14H9.1V13.8z M3.3,9.9L1.8,8.4L3.3,7l1.5,1.5
          L3.3,9.9z"/>
          </svg>
          src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChart.jsx
          View file @ 7f4aad6c
          ...@@ -11,17 +11,18 @@ import styles from '../workflow.less'; ...@@ -11,17 +11,18 @@ import styles from '../workflow.less';
          import NodeModal from './flowChartComponents/NodeModal'; import NodeModal from './flowChartComponents/NodeModal';
          import LineModal from './flowChartComponents/LineModal'; import LineModal from './flowChartComponents/LineModal';
          // import imgUrl from '@/assets/images/icons/closeBlue.png'; // import imgUrl from '@/assets/images/icons/closeBlue.png';
          import nodeEnd from '@/assets/images/workFlow/nodeEnd.png'; import nodeEnd from '@/assets/images/workFlow/nodeEnd.svg';
          import nodeGeneral from '@/assets/images/workFlow/nodeGeneral.png'; import nodeGeneral from '@/assets/images/workFlow/nodeGeneral.svg';
          import nodeStart from '@/assets/images/workFlow/nodeStart.png'; import nodeStart from '@/assets/images/workFlow/nodeStart.svg';
          // import cc from '@/assets/images/workFlow/cc.png'; // import cc from '@/assets/images/workFlow/cc.png';
          import gatewayCondition from '@/assets/images/workFlow/gatewayCondition.png'; import gatewayCondition from '@/assets/images/workFlow/gatewayCondition.svg';
          import gatewayParallel from '@/assets/images/workFlow/gatewayParallel.png'; import gatewayParallel from '@/assets/images/workFlow/gatewayParallel.svg';
          import gatewayJoin from '@/assets/images/workFlow/gatewayJoin.png'; import gatewayJoin from '@/assets/images/workFlow/gatewayJoin.svg';
          const { confirm } = Modal; const { confirm } = Modal;
          let diagram = null; let diagram = null;
          let myPaletteNode = null; let myPaletteNode = null;
          let myPaletteGateway = null; let myPaletteGateway = null;
          let myPaletteSubprocess = null;
          let myOverview = null; let myOverview = null;
          const FlowChart = props => { const FlowChart = props => {
          const { flowData, flowID, chartLoading, leaveCallBack, msg, treeVisible } = props; const { flowData, flowID, chartLoading, leaveCallBack, msg, treeVisible } = props;
          ...@@ -43,7 +44,6 @@ const FlowChart = props => { ...@@ -43,7 +44,6 @@ const FlowChart = props => {
          Lines: [], Lines: [],
          }); // 组件内得流程图数据 }); // 组件内得流程图数据
          const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒 const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒
          const [newSerialNo, setNewSerialNo] = useState(0);
          const [buttonLoading, setButtonLoading] = useState(); // 发布按钮保存loading const [buttonLoading, setButtonLoading] = useState(); // 发布按钮保存loading
          const objGo = go.GraphObject.make; const objGo = go.GraphObject.make;
          useEffect(() => { useEffect(() => {
          ...@@ -100,6 +100,7 @@ const FlowChart = props => { ...@@ -100,6 +100,7 @@ const FlowChart = props => {
          console.log(e, e.subject.data, 'fasdfasdgds'); console.log(e, e.subject.data, 'fasdfasdgds');
          diagram.model.updateTargetBindings(e.subject.data); diagram.model.updateTargetBindings(e.subject.data);
          }); });
          // 监听节点拖拽到画布事件
          diagram.addDiagramListener('externalobjectsdropped', e => { diagram.addDiagramListener('externalobjectsdropped', e => {
          const list = JSON.parse(diagram.model.toJson()).nodeDataArray; const list = JSON.parse(diagram.model.toJson()).nodeDataArray;
          console.log(list, 'list'); console.log(list, 'list');
          ...@@ -125,6 +126,7 @@ const FlowChart = props => { ...@@ -125,6 +126,7 @@ const FlowChart = props => {
          // nodeData.key = newKey; // nodeData.key = newKey;
          nodeData.NodeId = newKey; nodeData.NodeId = newKey;
          nodeData.nodeDetail = JSON.stringify(nodeData); nodeData.nodeDetail = JSON.stringify(nodeData);
          console.log(nodeData);
          diagram.model.updateTargetBindings(nodeData); diagram.model.updateTargetBindings(nodeData);
          diagram.model.setDataProperty(nodeData, 'key', newKey); diagram.model.setDataProperty(nodeData, 'key', newKey);
          }); });
          ...@@ -134,7 +136,6 @@ const FlowChart = props => { ...@@ -134,7 +136,6 @@ const FlowChart = props => {
          // diagram.addDiagramListener('SelectionDeleted', e => { // diagram.addDiagramListener('SelectionDeleted', e => {
          // }); // });
          console.log(diagram.model, 'diagram.model');
          }, []); }, []);
          useEffect(() => { useEffect(() => {
          if (flowData) { if (flowData) {
          ...@@ -407,6 +408,55 @@ const FlowChart = props => { ...@@ -407,6 +408,55 @@ const FlowChart = props => {
          ), ),
          ), ),
          ); );
          myPaletteSubprocess = objGo(go.Palette, 'myPaletteSubprocess', {
          // 代替默认动画，使用自定义淡入淡出
          'animationManager.initialAnimationStyle': go.AnimationManager.None,
          InitialAnimationStarting: animateFadeDown, // 相反，使用此功能制作动画
          // nodeTemplateMap: diagram.nodeTemplateMap, // 分享 myDiagram 使用的模板
          scale: '1',
          nodeSelectionAdornmentTemplate: objGo(
          go.Adornment,
          'Auto',
          objGo(go.Shape, 'Rectangle', { fill: 'white', stroke: null }),
          ), // 去掉节点点击时的边框颜色
          model: new go.GraphLinksModel([
          // 指定调色板的内容
          {
          category: 'gatewayCondition',
          NodeName: '子流程',
          NodeType: '30',
          SerialNo: 0,
          aheadHandle: 1,
          NodeHandling: 1,
          RuleList: [],
          roleList: [],
          CarbonCopyPeopleList: [],
          },
          ]),
          });
          myPaletteSubprocess.nodeTemplate = objGo(
          go.Node,
          'Auto',
          new go.Binding('location', 'points', go.Point.parse).makeTwoWay(go.Point.stringify),
          // 节点样式配置
          objGo(
          go.Panel,
          { width: 108, height: 42 },
          objGo(
          go.Picture,
          { width: 108, height: 42 },
          new go.Binding('source', 'NodeType', v => {
          switch (v) {
          case '30':
          return require('../../../../../assets/images/workFlow/subprocessicon.svg');
          default:
          return null;
          }
          }),
          ),
          ),
          );
          }; };
          // 流程图初始化 // 流程图初始化
          const init = () => { const init = () => {
          ...@@ -414,6 +464,7 @@ const FlowChart = props => { ...@@ -414,6 +464,7 @@ const FlowChart = props => {
          'undoManager.isEnabled': true, 'undoManager.isEnabled': true,
          allowDragOut: false, allowDragOut: false,
          'dragSelectingTool.isEnabled': false, // 禁止多选 'dragSelectingTool.isEnabled': false, // 禁止多选
          // 'grid.visible': true,
          scrollMode: go.Diagram.InfiniteScroll, // 无限滚动 scrollMode: go.Diagram.InfiniteScroll, // 无限滚动
          allowCopy: true, // 禁止复制 allowCopy: true, // 禁止复制
          allowDrop: true, allowDrop: true,
          ...@@ -424,6 +475,8 @@ const FlowChart = props => { ...@@ -424,6 +475,8 @@ const FlowChart = props => {
          // ), // 去掉节点点击时的边框颜色 // ), // 去掉节点点击时的边框颜色
          scale: '0.8', scale: '0.8',
          }); });
          diagram.grid.gridCellSize = new go.Size(10, 10);
          diagram.toolManager.draggingTool.isGridSnapEnabled = true;
          // 节点配置 // 节点配置
          diagram.nodeTemplate = objGo( diagram.nodeTemplate = objGo(
          ...@@ -453,6 +506,8 @@ const FlowChart = props => { ...@@ -453,6 +506,8 @@ const FlowChart = props => {
          return gatewayJoin; return gatewayJoin;
          case '22': case '22':
          return gatewayParallel; return gatewayParallel;
          case '30':
          return require('../../../../../assets/images/workFlow/nodesubprocess.svg');
          default: default:
          return null; return null;
          } }
          ...@@ -714,19 +769,21 @@ const FlowChart = props => { ...@@ -714,19 +769,21 @@ const FlowChart = props => {
          return new go.Binding('width', 'NodeType', v => { return new go.Binding('width', 'NodeType', v => {
          switch (v) { switch (v) {
          case '1': case '1':
          return 150; return 140;
          case '2': case '2':
          return 150; return 140;
          case '0': case '0':
          return 210; return 220;
          case '4': case '4':
          return 210; return 220;
          case '20': case '20':
          return 55; return 60;
          case '21': case '21':
          return 55; return 60;
          case '22': case '22':
          return 55; return 60;
          case '30':
          return 220;
          default: default:
          return null; return null;
          } }
          ...@@ -735,19 +792,21 @@ const FlowChart = props => { ...@@ -735,19 +792,21 @@ const FlowChart = props => {
          return new go.Binding('height', 'NodeType', v => { return new go.Binding('height', 'NodeType', v => {
          switch (v) { switch (v) {
          case '1': case '1':
          return 150; return 140;
          case '2': case '2':
          return 150; return 140;
          case '0': case '0':
          return 110; return 120;
          case '4': case '4':
          return 110; return 120;
          case '20': case '20':
          return 55; return 60;
          case '21': case '21':
          return 55; return 60;
          case '22': case '22':
          return 55; return 60;
          case '30':
          return 120;
          default: default:
          return null; return null;
          } }
          ...@@ -761,8 +820,8 @@ const FlowChart = props => { ...@@ -761,8 +820,8 @@ const FlowChart = props => {
          return classname === 'roleStyle' ? '#BCBCBC' : '#51C21A'; return classname === 'roleStyle' ? '#BCBCBC' : '#51C21A';
          case '0': case '0':
          return classname === 'roleStyle' ? '#BCBCBC' : '#1685FF'; return classname === 'roleStyle' ? '#BCBCBC' : '#1685FF';
          case '4': case '30':
          return '#9850F6'; return classname === 'roleStyle' ? '#BCBCBC' : '#9850F6';
          default: default:
          return null; return null;
          } }
          ...@@ -784,65 +843,9 @@ const FlowChart = props => { ...@@ -784,65 +843,9 @@ const FlowChart = props => {
          setLineMsg(node.part.data); setLineMsg(node.part.data);
          setLineVisible(true); setLineVisible(true);
          }; };
          // 新增节点
          const addNode = type => {
          const list = JSON.parse(diagram.model.toJson()).nodeDataArray;
          let newNum; const copyNode = e => {
          let newKey; diagram.commandHandler.canSelectAll();
          if (list.length > 0) {
          // eslint-disable-next-line prefer-spread
          newNum = Math.max.apply(Math, list.map(item => item.SerialNo)) + 1;
          // eslint-disable-next-line prefer-spread
          newKey = Math.max.apply(Math, list.map(item => item.key)) + 1;
          } else {
          newKey = 1;
          newNum = 1;
          }
          let NodeName = '';
          switch (type) {
          case '1':
          NodeName = `开始节点${newNum}`;
          break;
          case '0':
          NodeName = `普通节点${newNum}`;
          break;
          case '2':
          NodeName = `结束节点${newNum}`;
          break;
          case '20':
          NodeName = `条件网关${newNum}`;
          break;
          case '21':
          NodeName = `汇合网关${newNum}`;
          break;
          case '22':
          NodeName = `并行网关${newNum}`;
          break;
          default:
          break;
          }
          setNewSerialNo(newNum);
          // 新增节点
          // 新增得key比最大得key值+1
          let obj = {
          key: newKey,
          NodeId: newKey,
          NodeType: type,
          SerialNo: newNum,
          NodeName,
          aheadHandle: 1,
          NodeHandling: 1,
          RuleList: [],
          roleList: [],
          CarbonCopyPeopleList: [],
          };
          diagram.model.addNodeData({ ...obj, nodeDetail: JSON.stringify(obj) });
          setAddNodes([...AddNodes, newKey]);
          // 关闭时进行数据比对看数据是否改变
          leaveTip();
          }; };
          // 节点配置回调 // 节点配置回调
          const nodeCallBack = (obj, nextlinkNodes) => { const nodeCallBack = (obj, nextlinkNodes) => {
          ...@@ -879,6 +882,7 @@ const FlowChart = props => { ...@@ -879,6 +882,7 @@ const FlowChart = props => {
          nodeDetail, nodeDetail,
          RuleList, RuleList,
          CarbonCopyPeopleList, CarbonCopyPeopleList,
          SubFlowInfo,
          } = obj; } = obj;
          nodeData.NodeName = NodeName; nodeData.NodeName = NodeName;
          nodeData.NodeType = NodeType; nodeData.NodeType = NodeType;
          ...@@ -890,6 +894,7 @@ const FlowChart = props => { ...@@ -890,6 +894,7 @@ const FlowChart = props => {
          nodeData.nodeDetail = nodeDetail; nodeData.nodeDetail = nodeDetail;
          nodeData.RuleList = RuleList; nodeData.RuleList = RuleList;
          nodeData.CarbonCopyPeopleList = CarbonCopyPeopleList; nodeData.CarbonCopyPeopleList = CarbonCopyPeopleList;
          nodeData.SubFlowInfo = SubFlowInfo;
          diagram.model.updateTargetBindings(nodeData); diagram.model.updateTargetBindings(nodeData);
          // 给线上添加文字 // 给线上添加文字
          ...@@ -1022,6 +1027,7 @@ const FlowChart = props => { ...@@ -1022,6 +1027,7 @@ const FlowChart = props => {
          <div id="myPaletteNode" className={styles.myPaletteDiv} /> <div id="myPaletteNode" className={styles.myPaletteDiv} />
          {/* <div className={styles.lineBox} /> */} {/* <div className={styles.lineBox} /> */}
          <div id="myPaletteGateway" className={styles.myPaletteDiv} /> <div id="myPaletteGateway" className={styles.myPaletteDiv} />
          <div id="myPaletteSubprocess" className={styles.myPaletteSubprocess} />
          </div> </div>
          <div className={styles.buttonList}> <div className={styles.buttonList}>
          {/* <Button {/* <Button
          ...@@ -1034,7 +1040,9 @@ const FlowChart = props => { ...@@ -1034,7 +1040,9 @@ const FlowChart = props => {
          > >
          说明文档 说明文档
          </Button> */} </Button> */}
          {/* <Button type="link" onClick={() => copyNode()}>
          复制
          </Button> */}
          <Button type="primary" onClick={() => saveFlow()} loading={buttonLoading}> <Button type="primary" onClick={() => saveFlow()} loading={buttonLoading}>
          发布 发布
          </Button> </Button>
          ...@@ -1043,24 +1051,24 @@ const FlowChart = props => { ...@@ -1043,24 +1051,24 @@ const FlowChart = props => {
          <div className={styles.chartBox}> <div className={styles.chartBox}>
          <div id="myOverviewDiv" className={styles.myOverviewDiv} /> <div id="myOverviewDiv" className={styles.myOverviewDiv} />
          <div className={styles.flowName}>{flowData.flowName}</div> <div className={styles.flowName}>{flowData.flowName}</div>
          <Spin spinning={chartLoading}> {/* <Spin spinning={chartLoading}> */}
          <div <div
          id="myDiagramDiv" id="myDiagramDiv"
          className={styles.myDiagramDiv} className={styles.myDiagramDiv}
          style={{ backgroundColor: '#EFF8FA' }} style={{ backgroundColor: '#EFF8FA' }}
          /> />
          </Spin> {/* </Spin> */}
          <NodeModal
          flowID={flowID}
          visible={visible}
          editMsg={editMsg}
          modalType={modalType}
          handleCancel={() => setVisible(false)}
          onSubumit={(obj, nextlinkNodes) => nodeCallBack(obj, nextlinkNodes)}
          flowData={diagram ? JSON.parse(diagram.model.toJson()) : {}}
          />
          </div> </div>
          <NodeModal
          flowID={flowID}
          visible={visible}
          editMsg={editMsg}
          newSerialNo={newSerialNo}
          modalType={modalType}
          handleCancel={() => setVisible(false)}
          onSubumit={(obj, nextlinkNodes) => nodeCallBack(obj, nextlinkNodes)}
          flowData={diagram ? JSON.parse(diagram.model.toJson()) : {}}
          />
          <LineModal <LineModal
          visible={lineVisible} visible={lineVisible}
          lineMsg={lineMsg} lineMsg={lineMsg}
          ......
          src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx
          View file @ 7f4aad6c
          ...@@ -22,6 +22,7 @@ import { ...@@ -22,6 +22,7 @@ import {
          } from '@ant-design/icons'; } from '@ant-design/icons';
          import RoalChoose from './nodeModalComponents/RoalChoose'; import RoalChoose from './nodeModalComponents/RoalChoose';
          import Undertaker from './nodeModalComponents/Undertaker'; import Undertaker from './nodeModalComponents/Undertaker';
          import ConfigSubprocess from './nodeModalComponents/ConfigSubprocess';
          import RuleConfig from '@/components/RuleConfig'; import RuleConfig from '@/components/RuleConfig';
          import PeopleSelector from '@/components/PeopleSelector'; import PeopleSelector from '@/components/PeopleSelector';
          ...@@ -34,16 +35,7 @@ let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', ...@@ -34,16 +35,7 @@ let chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八',
          let chnUnitSection = ['', '万', '亿', '万亿', '亿亿']; let chnUnitSection = ['', '万', '亿', '万亿', '亿亿'];
          let chnUnitChar = ['', '十', '百', '千']; let chnUnitChar = ['', '十', '百', '千'];
          const NodeModal = props => { const NodeModal = props => {
          const { const { flowData, onSubumit, handleCancel, visible, editMsg, flowID } = props;
          flowData,
          onSubumit,
          handleCancel,
          visible,
          modalType,
          editMsg,
          newSerialNo,
          flowID,
          } = props;
          const [form] = Form.useForm(); const [form] = Form.useForm();
          const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗 const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
          const [showRule, setShowRule] = useState(false); // 是否显示节点扭转规则弹窗 const [showRule, setShowRule] = useState(false); // 是否显示节点扭转规则弹窗
          ...@@ -73,6 +65,7 @@ const NodeModal = props => { ...@@ -73,6 +65,7 @@ const NodeModal = props => {
          const RuleList = useRef([]); // 规则配置列表 const RuleList = useRef([]); // 规则配置列表
          const CarbonCopyPeopleList = useRef([]); // 抄送人列表 const CarbonCopyPeopleList = useRef([]); // 抄送人列表
          const talbeList = useRef([]); const talbeList = useRef([]);
          const subNodeMsg = useRef({});
          useEffect(() => { useEffect(() => {
          form.resetFields(); form.resetFields();
          nextlinkNodes.current = []; nextlinkNodes.current = [];
          ...@@ -260,6 +253,7 @@ const NodeModal = props => { ...@@ -260,6 +253,7 @@ const NodeModal = props => {
          ...validate, ...validate,
          NodeType: nodeMsg.NodeType, NodeType: nodeMsg.NodeType,
          roleList: nodeMsg.roleList, roleList: nodeMsg.roleList,
          SubFlowInfo: subNodeMsg.current,
          }); });
          let obj = { let obj = {
          ...validate, ...validate,
          ...@@ -268,6 +262,7 @@ const NodeModal = props => { ...@@ -268,6 +262,7 @@ const NodeModal = props => {
          nodeDetail, nodeDetail,
          RuleList: RuleList.current, RuleList: RuleList.current,
          CarbonCopyPeopleList: CarbonCopyPeopleList.current, CarbonCopyPeopleList: CarbonCopyPeopleList.current,
          SubFlowInfo: subNodeMsg.current,
          }; };
          console.log(nextlinkNodes.current); console.log(nextlinkNodes.current);
          onSubumit(obj, nextlinkNodes.current); onSubumit(obj, nextlinkNodes.current);
          ...@@ -407,14 +402,14 @@ const NodeModal = props => { ...@@ -407,14 +402,14 @@ const NodeModal = props => {
          }, },
          ]; ];
          console.log(listfleld, allFieldList.current, 'listfleld1111'); console.log(listfleld, allFieldList.current, 'listfleld1111');
          allFieldList.current.forEach(item => { listfleld.forEach(item => {
          if (listfleld.some(ele => ele !== item.TableName)) { console.log(allFieldList.current.find(ele => ele.TableName === item), 'aaaaaa');
          if (item.TableName && item.TableFieldNames?.length > 0) { let obj = allFieldList.current.find(ele => ele.TableName === item);
          list.push({ if (obj.TableName && obj.TableFieldNames?.length > 0) {
          TableFieldNames: item.TableFieldNames, list.push({
          TableName: item.TableName, TableFieldNames: obj.TableFieldNames,
          }); TableName: obj.TableName,
          } });
          } }
          }); });
          console.log(list, 'listfleld'); console.log(list, 'listfleld');
          ...@@ -426,13 +421,9 @@ const NodeModal = props => { ...@@ -426,13 +421,9 @@ const NodeModal = props => {
          const editCC = () => { const editCC = () => {
          setShowPersonSelect(true); setShowPersonSelect(true);
          }; };
          // 节点信息监听 const getSubNodeMsg = msg => {
          const changeValue = (changedFields, allFields) => { console.log(msg, 'asdgfasdg');
          if (changedFields[0].name[0] === 'NodeType') { subNodeMsg.current = msg;
          setNodeMsg({ ...nodeMsg, roleList: [], RuleList: [] });
          setFlag(flag + 1);
          }
          // console.log(changedFields, allFields, 'allFields');
          }; };
          // 定义表格 // 定义表格
          const columns = [ const columns = [
          ...@@ -440,6 +431,7 @@ const NodeModal = props => { ...@@ -440,6 +431,7 @@ const NodeModal = props => {
          title: '名称', title: '名称',
          dataIndex: 'roleName', dataIndex: 'roleName',
          align: 'left', align: 'left',
          width: 80,
          ellipsis: { ellipsis: {
          showTitle: false, showTitle: false,
          }, },
          ...@@ -453,7 +445,7 @@ const NodeModal = props => { ...@@ -453,7 +445,7 @@ const NodeModal = props => {
          title: '类型', title: '类型',
          dataIndex: 'type', dataIndex: 'type',
          align: 'center', align: 'center',
          width: 80, width: 60,
          filters: [ filters: [
          { {
          ...@@ -475,7 +467,7 @@ const NodeModal = props => { ...@@ -475,7 +467,7 @@ const NodeModal = props => {
          ellipsis: { ellipsis: {
          showTitle: false, showTitle: false,
          }, },
          width: 100, width: 90,
          render: text => ( render: text => (
          <Tooltip placement="topLeft" title={text}> <Tooltip placement="topLeft" title={text}>
          {text || '（无）'} {text || '（无）'}
          ...@@ -519,23 +511,31 @@ const NodeModal = props => { ...@@ -519,23 +511,31 @@ const NodeModal = props => {
          return ( return (
          <> <>
          {/* <div style={{ height: 200, width: 425, position: 'relative' }}> */}
          <Drawer <Drawer
          title="节点配置" title={null}
          width={550} closable={false}
          width="25%"
          onClose={handleCancel} onClose={handleCancel}
          visible={visible} visible={visible}
          mask={false} mask={false}
          bodyStyle={{ paddingBottom: 20 }} bodyStyle={{ paddingBottom: 20 }}
          getContainer={false}
          style={{
          position: 'absolute',
          }}
          keyboard={false}
          zIndex={19} zIndex={19}
          footer={ footer={
          <Space> <Space>
          <Button onClick={handleCancel}>取消</Button> <Button onClick={handleCancel}>取消</Button>
          <Button onClick={onFinish} type="primary"> <Button onClick={onFinish} type="primary">
          确定 应用
          </Button> </Button>
          </Space> </Space>
          } }
          > >
          {/* <div className={styles.nodeConfig}> */}
          <Divider <Divider
          orientation="left" orientation="left"
          style={{ style={{
          ...@@ -563,12 +563,7 @@ const NodeModal = props => { ...@@ -563,12 +563,7 @@ const NodeModal = props => {
          并行网关：根据网关的连接情况，强制所有出口分支流程必须流转。 并行网关：根据网关的连接情况，强制所有出口分支流程必须流转。
          </p> </p>
          </div> </div>
          <Form <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} labelAlign="left">
          form={form}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          // onFieldsChange={changeValue}
          >
          <Form.Item <Form.Item
          label="排序" label="排序"
          name="SerialNo" name="SerialNo"
          ...@@ -609,7 +604,8 @@ const NodeModal = props => { ...@@ -609,7 +604,8 @@ const NodeModal = props => {
          form?.getFieldValue('NodeType') === '2' || form?.getFieldValue('NodeType') === '2' ||
          form?.getFieldValue('NodeType') === '20' || form?.getFieldValue('NodeType') === '20' ||
          form?.getFieldValue('NodeType') === '21' || form?.getFieldValue('NodeType') === '21' ||
          form?.getFieldValue('NodeType') === '22' form?.getFieldValue('NodeType') === '22' ||
          form?.getFieldValue('NodeType') === '30'
          ? 'none' ? 'none'
          : 'block', : 'block',
          }} }}
          ...@@ -644,15 +640,24 @@ const NodeModal = props => { ...@@ -644,15 +640,24 @@ const NodeModal = props => {
          > >
          承办管理 承办管理
          </Divider> </Divider>
          <Button <div
          style={{ marginBottom: '10px', marginLeft: '435px' }} style={{
          onClick={() => { widnt: '100%',
          setShowRoal(true); marginBottom: '10px',
          display: 'flex',
          justifyContent: 'right',
          }} }}
          type="primary"
          > >
          设置 <Button
          </Button> onClick={() => {
          setShowRoal(true);
          }}
          type="primary"
          >
          设置
          </Button>
          </div>
          <Table <Table
          dataSource={nodeMsg.roleList} dataSource={nodeMsg.roleList}
          columns={columns} columns={columns}
          ...@@ -694,6 +699,9 @@ const NodeModal = props => { ...@@ -694,6 +699,9 @@ const NodeModal = props => {
          <PlusOutlined /> <PlusOutlined />
          </div> </div>
          </div> </div>
          {form?.getFieldValue('NodeType') === '30' && (
          <ConfigSubprocess nodeMsg={nodeMsg} flowID={flowID} getSubNodeMsg={getSubNodeMsg} />
          )}
          </div> </div>
          <div <div
          style={{ style={{
          ...@@ -746,7 +754,7 @@ const NodeModal = props => { ...@@ -746,7 +754,7 @@ const NodeModal = props => {
          </div> </div>
          </div> </div>
          <div className={styles.formBox}> <div className={styles.formBox}>
          <div className={styles.label}>设置规则条件，可以流转到节点：</div> <div className={styles.label}>设置规则流转到：</div>
          <div className={styles.item}> <div className={styles.item}>
          <Select <Select
          style={{ width: '100%' }} style={{ width: '100%' }}
          ...@@ -800,7 +808,9 @@ const NodeModal = props => { ...@@ -800,7 +808,9 @@ const NodeModal = props => {
          ))} ))}
          </div> </div>
          </div> </div>
          {/* </div> */}
          </Drawer> </Drawer>
          {/* </div> */}
          <RoalChoose <RoalChoose
          roleList={nodeMsg.roleList} roleList={nodeMsg.roleList}
          visible={showRoal} visible={showRoal}
          ......
          src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.less
          View file @ 7f4aad6c
          .nodeConfig {
          height: 100%;
          min-width: 425px;
          width: 25%;
          padding: 20px;
          overflow-y: scroll;
          margin-left: 15px;
          .titleBox {
          color: #BCBCBC;
          font-size: 14px;
          padding-left: 20px;
          }
          .btnAddRule {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 31px;
          margin: auto;
          margin-top: 15px;
          margin-bottom: 15px;
          border: 1px dashed #188FFD;
          border-radius: 3px;
          color: #188FFD;
          line-height: 31px;
          text-align: center;
          cursor: pointer;
          }
          .buttonBox {
          padding-left: 15px;
          width: 100%;
          height: 34px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          .setButton {
          width: 90%;
          height: 100%;
          line-height: 34px;
          border: 2px solid #6A98FA;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 10px;
          }
          .addIcon {
          height: 100%;
          flex: 1;
          border: 2px solid #6A98FA;
          border-left: 0px;
          text-align: center;
          }
          }
          .ruleContent {
          width: 100%;
          .ruleBox {
          margin-top: 5px;
          margin-bottom: 15px;
          .ruleTitle {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          align-items: center;
          .textContet {
          color: #1890ff;
          font-size: 16px;
          font-weight: 700;
          }
          .btnClose {}
          }
          .formBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          padding-left: 15px;
          .label {
          white-space: nowrap;
          }
          .item {
          width: 100%;
          }
          }
          .buttonBox {
          // padding-left: 15px;
          width: 100%;
          height: 34px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          .setButton {
          width: 90%;
          height: 100%;
          line-height: 34px;
          border: 2px solid #6A98FA;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 10px;
          }
          .addIcon {
          height: 100%;
          flex: 1;
          border: 2px solid #6A98FA;
          border-left: 0px;
          text-align: center;
          }
          }
          }
          }
          }
          .titleBox { .titleBox {
          color: #BCBCBC; color: #BCBCBC;
          font-size: 14px; font-size: 14px;
          padding-left: 20px; // padding-left: 20px;
          } }
          .btnAddRule { .btnAddRule {
          ...@@ -80,7 +217,7 @@ ...@@ -80,7 +217,7 @@
          justify-content: space-between; justify-content: space-between;
          align-items: center; align-items: center;
          margin-bottom: 15px; margin-bottom: 15px;
          padding-left: 15px; // padding-left: 15px;
          .label { .label {
          white-space: nowrap; white-space: nowrap;
          ...@@ -92,7 +229,7 @@ ...@@ -92,7 +229,7 @@
          } }
          .buttonBox { .buttonBox {
          padding-left: 15px; // padding-left: 15px;
          width: 100%; width: 100%;
          height: 34px; height: 34px;
          display: flex; display: flex;
          ......
          src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfgGateway.jsx 0 → 100644
          View file @ 7f4aad6c
          import React from 'react';
          const Confggateway = () => {
          return <div>confggateway</div>;
          };
          export default Confggateway;
          src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigSubprocess.jsx 0 → 100644
          View file @ 7f4aad6c
          import React, { useState, useEffect } from 'react';
          import { Drawer, Form, Space, Button, Input, Select, Divider, Tooltip, message } from 'antd';
          import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
          import { GetSubEventFlows, GetFlowMapFields } from '@/services/workflow/workflow';
          import lodash from 'lodash';
          const { Option, OptGroup } = Select;
          const ConfigSubprocess = props => {
          const [form] = Form.useForm();
          const { nodeMsg, flowID, getSubNodeMsg } = props;
          const [currentNodeField, setCurrentNodeField] = useState([]);
          const [childNodeField, setChildNodeField] = useState([]);
          const [flowList, setFlowList] = useState([]);
          useEffect(() => {
          GetSubEventFlows().then(res => {
          const list = new Map();
          // res.data.forEach(item => {
          // if (!list.has(item.EventName)) {
          // list.set(item.EventName, [item]);
          // } else {
          // console.log(list.get(item.EventName));
          // list.set(item.EventName, [...list.get(item.EventName), item]);
          // }
          // });
          setFlowList(
          res.data.map(item => ({
          label: `${item.EventName}/${item.FlowName}`,
          key: `${item.SubFlowEventConfigID}-${item.SubFlowId}`,
          })),
          );
          console.log(list, 'listnlistst');
          });
          }, []);
          useEffect(() => {
          console.log(nodeMsg, 'nodeMsg');
          form.setFieldsValue({ flowKey: '', MapFields: [] });
          if (nodeMsg.SubFlowInfo) {
          GetFlowMapFields({ flowID, subFlowID: nodeMsg.SubFlowInfo?.SubFlowID }).then(res => {
          if (res.code === 0) {
          res.data.ParentFlowMapList.forEach(item => {
          item.TableFieldNames = item.TableFieldNames.map(ele => ({
          value: `${item.TableName}-${ele}-${item.TableType}`,
          label: ele,
          }));
          });
          res.data.SubFlowMapInfo.TableFieldNames = res.data.SubFlowMapInfo.TableFieldNames.map(
          item => ({
          value: `${res.data.SubFlowMapInfo.TableName}-${item}`,
          label: item,
          }),
          );
          console.log(res.data.ParentFlowMapList, 'res.data.ParentFlowMapList');
          setCurrentNodeField(res.data.ParentFlowMapList);
          setChildNodeField(res.data.SubFlowMapInfo.TableFieldNames);
          } else {
          message.error(res.msg);
          }
          });
          form.setFieldsValue({
          flowKey: nodeMsg.SubFlowInfo
          ? `${nodeMsg.SubFlowInfo?.SubFlowEventConfigID}-${nodeMsg.SubFlowInfo?.SubFlowID}`
          : null,
          MapFields: nodeMsg.SubFlowInfo?.MapFields?.map(item => ({
          nodeField: `${item.ParentFlowMapTableName}-${item.ParentFlowMapFieldName}-${
          item.ParentFlowMapTableType
          }`,
          subNodeField: `${item.SubFlowMapTableName}-${item.SubFlowMapFieldName}`,
          })),
          });
          }
          }, [nodeMsg]);
          const changeValue = (changedFields, allFields) => {
          console.log(allFields);
          const msg = {
          SubFlowEventConfigID: Number(allFields[0]?.value?.split('-')[0]),
          SubFlowID: Number(allFields[0]?.value?.split('-')[1]),
          MapFields: allFields[1]?.value?.map(item => ({
          ParentFlowMapTableName: item?.nodeField?.split('-')[0],
          ParentFlowMapFieldName: item?.nodeField?.split('-')[1],
          ParentFlowMapTableType: item?.nodeField?.split('-')[2],
          SubFlowMapTableName: item?.subNodeField?.split('-')[0],
          SubFlowMapFieldName: item?.subNodeField?.split('-')[1],
          })),
          };
          getSubNodeMsg(msg);
          // if (changedFields[0].name[0] === 'password') {
          // }
          };
          // 选择流程
          const flowChage = e => {
          console.log(e);
          const subFlowID = e.split('-')[1];
          console.log(subFlowID, 'afsdfsda');
          GetFlowMapFields({ flowID, subFlowID }).then(res => {
          if (res.code === 0) {
          res.data.ParentFlowMapList.forEach(item => {
          item.TableFieldNames = item.TableFieldNames.map(ele => ({
          value: `${item.TableName}-${ele}-${item.TableType}`,
          label: ele,
          }));
          });
          res.data.SubFlowMapInfo.TableFieldNames = res.data.SubFlowMapInfo.TableFieldNames.map(
          item => ({
          value: `${res.data.SubFlowMapInfo.TableName}-${item}`,
          label: item,
          }),
          );
          console.log(res.data.ParentFlowMapList, 'res.data.ParentFlowMapList');
          form.setFieldsValue({ MapFields: [] });
          setCurrentNodeField(res.data.ParentFlowMapList);
          setChildNodeField(res.data.SubFlowMapInfo.TableFieldNames);
          } else {
          message.error(res.msg);
          }
          });
          };
          // 添加映射
          const addMap = add => {
          if (form.getFieldValue('flowKey')) {
          add();
          } else {
          message.error('请选择子流程');
          }
          };
          return (
          <div>
          <Divider
          orientation="left"
          style={{
          borderTopColor: '#99bbe8',
          color: '#15428b',
          fontWeight: 700,
          }}
          >
          子流程配置
          </Divider>
          <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          onFieldsChange={changeValue}
          >
          <Form.Item label="选择流程" name="flowKey">
          <Select
          showSearch
          optionFilterProp="children"
          onChange={flowChage}
          filterOption={(input, option) =>
          option.children.toLowerCase().includes(input.toLowerCase())
          }
          >
          {flowList.map(item => (
          <Option key={item.key} value={item.key}>
          {item.label}
          </Option>
          ))}
          </Select>
          </Form.Item>
          <Form.Item label="映射字段" rules={[{ required: true, message: '请输入排序' }]}>
          <Form.List name="MapFields">
          {(fields, { add, remove }) => (
          <>
          {fields.map(({ key, name, ...restField }) => (
          <div
          key={key}
          style={{
          display: 'flex',
          alignItems: 'center',
          marginBottom: 8,
          }}
          >
          <Form.Item
          {...restField}
          name={[name, 'nodeField']}
          style={{ margin: '0 5px 0 0px', width: '40%' }}
          rules={[
          {
          required: true,
          message: '请填选择字段',
          },
          ]}
          >
          <Select placeholder="字段名" showSearch>
          {currentNodeField?.map((item, index) => (
          <OptGroup key={index} label={item.TableName}>
          {item.TableFieldNames.map(ele => (
          <Option value={ele.value} key={ele.value}>
          {ele.label}
          </Option>
          ))}
          </OptGroup>
          ))}
          </Select>
          </Form.Item>
          <img
          // eslint-disable-next-line global-require
          src={require('@/assets/images/icons/值映射.png')}
          style={{ height: '24px' }}
          alt=""
          />
          <Form.Item
          {...restField}
          name={[name, 'subNodeField']}
          style={{ margin: '0 5px 0 5px', width: '40%' }}
          rules={[
          {
          required: true,
          message: '请填选择字段',
          },
          ]}
          >
          <Select placeholder="字段名" showSearch>
          {childNodeField?.map((item, index) => (
          <Option value={item.value} key={item.value}>
          {item.label}
          </Option>
          ))}
          </Select>
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(name)} />
          </div>
          ))}
          <Form.Item>
          <Button type="dashed" onClick={() => addMap(add)} block icon={<PlusOutlined />}>
          添加映射
          </Button>
          </Form.Item>
          </>
          )}
          </Form.List>
          </Form.Item>
          </Form>
          </div>
          );
          };
          export default ConfigSubprocess;
          src/pages/bsmanager/workOrder/workflowEdit/workflow.less
          View file @ 7f4aad6c
          ...@@ -104,6 +104,7 @@ ...@@ -104,6 +104,7 @@
          .chartBox { .chartBox {
          position: relative; position: relative;
          display: flex;
          height: calc(100% - 52px); height: calc(100% - 52px);
          .flowName { .flowName {
          ...@@ -141,6 +142,17 @@ ...@@ -141,6 +142,17 @@
          display: flex; display: flex;
          align-items: center; align-items: center;
          .myPaletteSubprocess {
          height: 52px;
          width: 130px;
          canvas {
          height: 100%;
          width: 1000px;
          }
          }
          .myPaletteDiv { .myPaletteDiv {
          // margin-right: 20px; // margin-right: 20px;
          height: 52px; height: 52px;
          ...@@ -202,7 +214,8 @@ ...@@ -202,7 +214,8 @@
          } }
          .myDiagramDiv { .myDiagramDiv {
          width: 100%; // width: 100%;
          flex: 1;
          height: 100%; height: 100%;
          } }
          } }
          ......
          src/services/workflow/workflow.js
          View file @ 7f4aad6c
          ...@@ -23,3 +23,8 @@ export const GetFormDataSource = param => ...@@ -23,3 +23,8 @@ export const GetFormDataSource = param =>
          get(`${PUBLISH_SERVICE}/WorkFlow/GetFormDataSource`, param); get(`${PUBLISH_SERVICE}/WorkFlow/GetFormDataSource`, param);
          // 规则效验 // 规则效验
          export const RuleValidation = param => get(`${PUBLISH_SERVICE}/WorkFlow/RuleValidation`, param); export const RuleValidation = param => get(`${PUBLISH_SERVICE}/WorkFlow/RuleValidation`, param);
          // 获取可选的子事件流程
          export const GetSubEventFlows = param => get(`${PUBLISH_SERVICE}/WorkFlow/GetSubEventFlows`, param);
          // 获取流程映射表字段信息
          export const GetFlowMapFields = param => get(`${PUBLISH_SERVICE}/WorkFlow/GetFlowMapFields`, param);
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment