use-task-edit.ts 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one or more
  3. * contributor license agreements. See the NOTICE file distributed with
  4. * this work for additional information regarding copyright ownership.
  5. * The ASF licenses this file to You under the Apache License, Version 2.0
  6. * (the "License"); you may not use this file except in compliance with
  7. * the License. You may obtain a copy of the License at
  8. *
  9. * http://www.apache.org/licenses/LICENSE-2.0
  10. *
  11. * Unless required by applicable law or agreed to in writing, software
  12. * distributed under the License is distributed on an "AS IS" BASIS,
  13. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. * See the License for the specific language governing permissions and
  15. * limitations under the License.
  16. */
  17. import { ref, onMounted, watch } from 'vue'
  18. import { remove } from 'lodash'
  19. import { TaskType } from '@/views/projects/task/constants/task-type'
  20. import { formatParams } from '@/views/projects/task/components/node/format-data'
  21. import { useCellUpdate } from './dag-hooks'
  22. import type { Ref } from 'vue'
  23. import type { Graph } from '@antv/x6'
  24. import type {
  25. Coordinate,
  26. NodeData,
  27. WorkflowDefinition,
  28. EditWorkflowDefinition
  29. } from './types'
  30. interface Options {
  31. graph: Ref<Graph | undefined>
  32. definition: Ref<WorkflowDefinition | undefined>
  33. }
  34. /**
  35. * Edit task configuration when dbclick
  36. * @param {Options} options
  37. * @returns
  38. */
  39. export function useTaskEdit(options: Options) {
  40. const { graph, definition } = options
  41. const { addNode, removeNode, getSources, setNodeName, setNodeEdge } =
  42. useCellUpdate({
  43. graph
  44. })
  45. const processDefinition = ref(
  46. definition?.value || {
  47. processDefinition: {},
  48. processTaskRelationList: [],
  49. taskDefinitionList: []
  50. }
  51. ) as Ref<EditWorkflowDefinition>
  52. const currTask = ref<NodeData>({
  53. taskType: 'SHELL',
  54. code: 0,
  55. name: ''
  56. })
  57. const taskModalVisible = ref(false)
  58. /**
  59. * Append a new task
  60. */
  61. function appendTask(code: number, type: TaskType, coordinate: Coordinate) {
  62. addNode(code + '', type, '', 'YES', coordinate)
  63. processDefinition.value.taskDefinitionList.push({
  64. code,
  65. taskType: type,
  66. name: ''
  67. })
  68. openTaskModal({ code, taskType: type, name: '' })
  69. }
  70. /**
  71. * Copy a task
  72. */
  73. function copyTask(
  74. name: string,
  75. code: number,
  76. targetCode: number,
  77. type: TaskType,
  78. flag: string,
  79. coordinate: Coordinate
  80. ) {
  81. addNode(code + '', type, name, flag, coordinate)
  82. const definition = processDefinition.value.taskDefinitionList.find(
  83. (t) => t.code === targetCode
  84. )
  85. const newDefinition = {
  86. ...definition,
  87. code,
  88. name
  89. } as NodeData
  90. processDefinition.value.taskDefinitionList.push(newDefinition)
  91. }
  92. /**
  93. * Remove task
  94. * @param {number} code
  95. */
  96. function removeTasks(codes: number[]) {
  97. processDefinition.value.taskDefinitionList =
  98. processDefinition.value.taskDefinitionList.filter(
  99. (task) => !codes.includes(task.code)
  100. )
  101. }
  102. function openTaskModal(task: NodeData) {
  103. currTask.value = task
  104. taskModalVisible.value = true
  105. }
  106. /**
  107. * Edit task
  108. * @param {number} code
  109. */
  110. function editTask(code: number) {
  111. const definition = processDefinition.value.taskDefinitionList.find(
  112. (t) => t.code === code
  113. )
  114. if (definition) {
  115. currTask.value = definition
  116. }
  117. updatePreTasks(getSources(String(code)), code)
  118. taskModalVisible.value = true
  119. }
  120. /**
  121. * The confirm event in task config modal
  122. * @param formRef
  123. * @param from
  124. */
  125. function taskConfirm({ data }: any) {
  126. const taskDef = formatParams(data).taskDefinitionJsonObj as NodeData
  127. // override target config
  128. processDefinition.value.taskDefinitionList =
  129. processDefinition.value.taskDefinitionList.map((task) => {
  130. if (task.code === currTask.value?.code) {
  131. setNodeName(task.code + '', taskDef.name)
  132. setNodeEdge(String(task.code), data.preTasks)
  133. updatePreTasks(data.preTasks, task.code)
  134. return {
  135. ...taskDef,
  136. version: task.version,
  137. code: task.code,
  138. taskType: currTask.value.taskType
  139. }
  140. }
  141. return task
  142. })
  143. taskModalVisible.value = false
  144. }
  145. /**
  146. * The cancel event in task config modal
  147. */
  148. function taskCancel() {
  149. taskModalVisible.value = false
  150. if (!currTask.value.name) {
  151. removeNode(String(currTask.value.code))
  152. remove(
  153. processDefinition.value.taskDefinitionList,
  154. (task) => task.code === currTask.value.code
  155. )
  156. }
  157. }
  158. function updatePreTasks(preTasks: number[], code: number) {
  159. if (processDefinition.value?.processTaskRelationList?.length) {
  160. remove(
  161. processDefinition.value.processTaskRelationList,
  162. (process) => process.postTaskCode === code
  163. )
  164. }
  165. if (!preTasks?.length) return
  166. preTasks.forEach((task) => {
  167. processDefinition.value?.processTaskRelationList.push({
  168. postTaskCode: code,
  169. preTaskCode: task,
  170. name: '',
  171. preTaskVersion: 1,
  172. postTaskVersion: 1,
  173. conditionType: 'NONE',
  174. conditionParams: {}
  175. })
  176. })
  177. }
  178. onMounted(() => {
  179. if (graph.value) {
  180. graph.value.on('cell:dblclick', ({ cell }) => {
  181. const code = Number(cell.id)
  182. editTask(code)
  183. })
  184. }
  185. })
  186. watch(definition, () => {
  187. if (definition.value) processDefinition.value = definition.value
  188. })
  189. return {
  190. currTask,
  191. taskModalVisible,
  192. processDefinition,
  193. taskConfirm,
  194. taskCancel,
  195. appendTask,
  196. editTask,
  197. copyTask,
  198. removeTasks
  199. }
  200. }