feat(frontend): 任务中的人工确认节点逻辑优化 TencentBlueKing#6179

dbm-ui/frontend/lib/bk-icon/demo.html

@@ -133,6 +133,10 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-help-document"></span>
           <p class="icon-text">help-document</p>
         </li>
+        <li class="icon-item" title="check">
+          <span class="icon bk-dbm-icon db-icon-check"></span>
+          <p class="icon-text">check</p>
+        </li>
         <li class="icon-item" title="auth">
           <span class="icon bk-dbm-icon db-icon-auth"></span>
           <p class="icon-text">auth</p>
@@ -449,9 +453,9 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-node"></span>
           <p class="icon-text">node</p>
         </li>
-        <li class="icon-item" title="check">
-          <span class="icon bk-dbm-icon db-icon-check"></span>
-          <p class="icon-text">check</p>
+        <li class="icon-item" title="check-search">
+          <span class="icon bk-dbm-icon db-icon-check-search"></span>
+          <p class="icon-text">check-search</p>
         </li>
         <li class="icon-item" title="deploy">
           <span class="icon bk-dbm-icon db-icon-deploy"></span>
@@ -957,6 +961,18 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-yuandezhongjian"></span>
           <p class="icon-text">yuandezhongjian</p>
         </li>
+        <li class="icon-item" title="daihuishou-2">
+          <span class="icon bk-dbm-icon db-icon-daihuishou-2"></span>
+          <p class="icon-text">daihuishou-2</p>
+        </li>
+        <li class="icon-item" title="daihuishou">
+          <span class="icon bk-dbm-icon db-icon-daihuishou"></span>
+          <p class="icon-text">daihuishou</p>
+        </li>
+        <li class="icon-item" title="guzhangji">
+          <span class="icon bk-dbm-icon db-icon-guzhangji"></span>
+          <p class="icon-text">guzhangji</p>
+        </li>
       </ul>
       <h3 class="describe-title">为什么使用</h3>
       <ul class="use-describe">
@@ -998,6 +1014,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">help-document</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-check"></use>
+          </svg>
+          <p class="icon-text">check</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-auth"></use>
@@ -1474,9 +1496,9 @@ <h3 class="describe-title">如何使用</h3>
         </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
-            <use xlink:href="#db-icon-check"></use>
+            <use xlink:href="#db-icon-check-search"></use>
           </svg>
-          <p class="icon-text">check</p>
+          <p class="icon-text">check-search</p>
         </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
@@ -2234,6 +2256,24 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">yuandezhongjian</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-daihuishou-2"></use>
+          </svg>
+          <p class="icon-text">daihuishou-2</p>
+        </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-daihuishou"></use>
+          </svg>
+          <p class="icon-text">daihuishou</p>
+        </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-guzhangji"></use>
+          </svg>
+          <p class="icon-text">guzhangji</p>
+        </li>
       </ul>
       <h3 class="describe-title">为什么使用</h3>
       <ul class="use-describe">

dbm-ui/frontend/lib/bk-icon/style.css

@@ -35,6 +35,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-help-document:before {
 	content: "\e1fa";
 }
+.db-icon-check:before {
+	content: "\e205";
+}
 .db-icon-auth:before {
 	content: "\e152";
 }
@@ -272,7 +275,7 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-node:before {
 	content: "\e13d";
 }
-.db-icon-check:before {
+.db-icon-check-search:before {
 	content: "\e13f";
 }
 .db-icon-deploy:before {
@@ -653,3 +656,12 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-yuandezhongjian:before {
 	content: "\e1fd";
 }
+.db-icon-daihuishou-2:before {
+	content: "\e202";
+}
+.db-icon-daihuishou:before {
+	content: "\e203";
+}
+.db-icon-guzhangji:before {
+	content: "\e204";
+}

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3415,5 +3415,7 @@
     "支持 %（指代任意长度字符串）,*（指代全部）2个通配符": "支持 %（指代任意长度字符串）,*（指代全部）2个通配符",
     "单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入": "单元格可同时输入多个对象，使用换行，空格或；，｜分隔，按 Enter 或失焦完成内容输入",
     "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用": "包含通配符时, 每一单元格只允许输入单个对象。% 不能独立使用， * 只能单独使用",
+    "确认继续所有人工确认节点": "确认继续所有人工确认节点",
+    "任务": "任务",
     "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/source/taskflow.ts

@@ -15,6 +15,7 @@ import TaskFlowModel from '@services/model/taskflow/taskflow';
 
 import http, { type IRequestPayload } from '../http';
 import type { ListBase } from '../types';
+import type { FlowItemTodo } from '../types/ticket';
 
 const path = '/apis/taskflow';
 
@@ -109,6 +110,7 @@ interface FlowsDetail {
       outgoing: string;
       pipeline?: FlowsDetail;
       retryable: boolean;
+      skip: boolean;
       skippable: boolean;
       started_at: number;
       status: 'FINISHED' | 'RUNNING' | 'FAILED' | 'READY' | 'CREATED' | 'SKIPPED';
@@ -153,6 +155,7 @@ interface FlowsDetail {
   gateways: { [key: string]: FlowsDetail['end_event'] };
   id: string;
   start_event: FlowsDetail['end_event'];
+  todos?: FlowItemTodo[];
 }
 
 /**
@@ -219,8 +222,6 @@ export function forceFailflowNode(params: { root_id: string; node_id: string })
 /**
  * 批量重试
  */
-export function batchRetryNodes(params: {
-  root_id: string,
-}) {
+export function batchRetryNodes(params: { root_id: string }) {
   return http.post<{ root_id: string }>(`${path}/${params.root_id}/batch_retry_nodes/`, params);
 }

dbm-ui/frontend/src/services/source/ticket.tsx

@@ -477,3 +477,16 @@ export const getHostInAuthorize = (params: {
 export function revokeTicketFlow(params: { ticketId: number; flow_id: number }) {
   return http.post(`${path}/${params.ticketId}/revoke_flow/`, params);
 }
+
+/**
+ * 批量待办处理
+ */
+export function ticketBatchProcessTodo(params: {
+  action: 'APPROVE' | 'TERMINATE';
+  operations: {
+    todo_id: number;
+    params: Record<string, never>; // 暂时为空对象
+  }[];
+}) {
+  return http.post(`${path}/batch_process_todo/`, params);
+}

dbm-ui/frontend/src/services/types/ticket.ts

@@ -122,6 +122,7 @@ export interface FlowItemTodo {
   context: {
     flow_id: number;
     ticket_id: number;
+    node_id: string;
     administrators?: string[];
     user?: string;
   };

dbm-ui/frontend/src/views/task-history/common/graphCanvas.ts

@@ -9,20 +9,18 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
  * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
  * the specific language governing permissions and limitations under the License.
-*/
+ */
 
-import {
-  getTaskflowDetails,
-} from '@services/source/taskflow';
+import { getTaskflowDetails } from '@services/source/taskflow';
 
 import D3Graph from '@blueking/bkflow.js';
 
 import GraphRender from './graphRender';
 import type { GraphNode } from './utils';
 
 interface GraphData {
-  locations: GraphNode[],
-  lines: any[]
+  locations: GraphNode[];
+  lines: any[];
 }
 
 export default class GraphCanvas {
@@ -106,7 +104,9 @@ export default class GraphCanvas {
   }
 
   destroy() {
-    if (!this.flowInstance) return;
+    if (!this.flowInstance) {
+      return;
+    }
 
     this.flowInstance.clear();
     this.flowInstance = null;
@@ -122,7 +122,12 @@ export default class GraphCanvas {
   updateLinePosition() {
     // eslint-disable-next-line no-underscore-dangle
     const lineCollectionInstance = this.flowInstance?._lineCollectionInstance;
-    if (!lineCollectionInstance) return;
+
+    if (!lineCollectionInstance) {
+      return;
+    }
+
+    // 重置 generatePolylineLink 计算方法
 
     // 重置 generatePolylineLink 计算方法
     lineCollectionInstance.generatePolylineLink = function (line: any) {
@@ -141,8 +146,9 @@ export default class GraphCanvas {
       } else {
         if (sourceX !== targetX && sourceY !== targetY) {
           let breakPoint = [tOffsetX, sOffsetY];
-          if (this.isLineCrossNode([source.x, source.y], [sOffsetX, sOffsetY], breakPoint)
-            || this.isLineCrossNode([target.x, target.y], [tOffsetX, tOffsetY], breakPoint)
+          if (
+            this.isLineCrossNode([source.x, source.y], [sOffsetX, sOffsetY], breakPoint) ||
+            this.isLineCrossNode([target.x, target.y], [tOffsetX, tOffsetY], breakPoint)
           ) {
             breakPoint = [sOffsetX, tOffsetY];
           }
@@ -160,7 +166,7 @@ export default class GraphCanvas {
         // eslint-disable-next-line no-underscore-dangle
         this._linesExtends[this.lineDataKeyFunc(line)] = { points: [[sourceX, sourceY], ...pointList] };
       }
-      return `M ${sourceX} ${sourceY},${pointList.map(item => `L ${item[0]} ${item[1]}`).join(',')}`;
+      return `M ${sourceX} ${sourceY},${pointList.map((item) => `L ${item[0]} ${item[1]}`).join(',')}`;
     };
 
     lineCollectionInstance.reDrawLins(this.graphData.lines);