The form of procedure task is done (#8473)

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -682,7 +682,9 @@ const project = {
     pre_sql_statement: 'Pre SQL Statement',
     post_sql_statement: 'Post SQL Statement',
     sql_input_placeholder: 'Please enter non-query sql.',
-    sql_empty_tips: 'The sql can not be empty.'
+    sql_empty_tips: 'The sql can not be empty.',
+    procedure_method: 'SQL Statement',
+    procedure_method_tips: 'Please enter the procedure script'
   }
 }
 

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -674,7 +674,9 @@ const project = {
     pre_sql_statement: '前置SQL语句',
     post_sql_statement: '后置SQL语句',
     sql_input_placeholder: '请输入非查询SQL语句',
-    sql_empty_tips: '语句不能为空'
+    sql_empty_tips: '语句不能为空',
+    procedure_method: 'SQL语句',
+    procedure_method_tips: '请输入存储脚本'
   }
 }
 

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/index.ts

@@ -33,6 +33,7 @@ export { useTargetTaskName } from './use-target-task-name'
 export { useDatasourceType } from './use-datasource-type'
 export { useDatasource } from './use-datasource'
 export { useSqlType } from './use-sql-type'
+export { useProcedure } from './use-procedure'
 
 export { useShell } from './use-shell'
 export { useSpark } from './use-spark'

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-procedure.ts

@@ -0,0 +1,141 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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 { useI18n } from 'vue-i18n'
+import type { IJsonItem } from '../types'
+
+export function useProcedure(model: { [field: string]: any }): IJsonItem[] {
+  const { t } = useI18n()
+
+  return [
+    {
+      type: 'editor',
+      field: 'method',
+      name: t('project.node.procedure_method'),
+      validate: {
+        trigger: ['input', 'trigger'],
+        required: true,
+        message: t('project.node.procedure_method_tips')
+      }
+    },
+    {
+      type: 'custom-parameters',
+      field: 'localParams',
+      name: t('project.node.custom_parameters'),
+      children: [
+        {
+          type: 'input',
+          field: 'prop',
+          span: 6,
+          props: {
+            placeholder: t('project.node.prop_tips'),
+            maxLength: 256
+          },
+          validate: {
+            trigger: ['input', 'blur'],
+            required: true,
+            validator(validate: any, value: string) {
+              if (!value) {
+                return new Error(t('project.node.prop_tips'))
+              }
+
+              const sameItems = model.localParams.filter(
+                (item: { prop: string }) => item.prop === value
+              )
+
+              if (sameItems.length > 1) {
+                return new Error(t('project.node.prop_repeat'))
+              }
+            }
+          }
+        },
+        {
+          type: 'select',
+          field: 'direct',
+          span: 4,
+          options: DIRECT_LIST,
+          value: 'IN'
+        },
+        {
+          type: 'select',
+          field: 'type',
+          span: 6,
+          options: TYPE_LIST,
+          value: 'VARCHAR'
+        },
+        {
+          type: 'input',
+          field: 'value',
+          span: 6,
+          props: {
+            placeholder: t('project.node.value_tips'),
+            maxLength: 256
+          }
+        }
+      ]
+    }
+  ]
+}
+
+export const TYPE_LIST = [
+  {
+    value: 'VARCHAR',
+    label: 'VARCHAR'
+  },
+  {
+    value: 'INTEGER',
+    label: 'INTEGER'
+  },
+  {
+    value: 'LONG',
+    label: 'LONG'
+  },
+  {
+    value: 'FLOAT',
+    label: 'FLOAT'
+  },
+  {
+    value: 'DOUBLE',
+    label: 'DOUBLE'
+  },
+  {
+    value: 'DATE',
+    label: 'DATE'
+  },
+  {
+    value: 'TIME',
+    label: 'TIME'
+  },
+  {
+    value: 'TIMESTAMP',
+    label: 'TIMESTAMP'
+  },
+  {
+    value: 'BOOLEAN',
+    label: 'BOOLEAN'
+  }
+]
+
+export const DIRECT_LIST = [
+  {
+    value: 'IN',
+    label: 'IN'
+  },
+  {
+    value: 'OUT',
+    label: 'OUT'
+  }
+]

dolphinscheduler-ui-next/src/views/projects/task/components/node/format-data.ts

@@ -76,6 +76,12 @@ export function formatParams(data: INodeData): {
     taskParams.postStatements = data.postStatements
   }
 
+  if (data.taskType === 'PROCEDURE') {
+    taskParams.type = data.type
+    taskParams.datasource = data.datasource
+    taskParams.method = data.method
+  }
+
   const params = {
     processDefinitionCode: data.processName ? String(data.processName) : '',
     upstreamCodes: data?.preTasks?.join(','),
@@ -152,5 +158,10 @@ export function formatModel(data: ITaskData) {
   if (data.taskParams?.mainJar) {
     params.mainJar = data.taskParams?.mainJar.id
   }
+
+  if (data.taskParams?.method) {
+    params.method = data.taskParams?.method
+  }
+
   return params
 }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-procedure.ts

@@ -0,0 +1,87 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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 { reactive } from 'vue'
+import * as Fields from '../fields/index'
+import type { IJsonItem, INodeData } from '../types'
+import { ITaskData } from '../types'
+
+export function useProcedure({
+  projectCode,
+  from = 0,
+  readonly,
+  data
+}: {
+  projectCode: number
+  from?: number
+  readonly?: boolean
+  data?: ITaskData
+}) {
+  const model = reactive({
+    name: '',
+    taskType: 'PROCEDURE',
+    flag: 'YES',
+    description: '',
+    timeoutFlag: false,
+    localParams: [],
+    environmentCode: null,
+    failRetryInterval: 1,
+    failRetryTimes: 0,
+    workerGroup: 'default',
+    delayTime: 0,
+    timeout: 30,
+    type: data?.taskParams?.type ? data?.taskParams?.type : 'MYSQL',
+    datasource: data?.taskParams?.datasource,
+    method: data?.taskParams?.method
+  } as INodeData)
+
+  let extra: IJsonItem[] = []
+  if (from === 1) {
+    extra = [
+      Fields.useTaskType(model, readonly),
+      Fields.useProcessName({
+        model,
+        projectCode,
+        isCreate: !data?.id,
+        from,
+        processName: data?.processName,
+        code: data?.code
+      })
+    ]
+  }
+
+  return {
+    json: [
+      Fields.useName(),
+      ...extra,
+      Fields.useRunFlag(),
+      Fields.useDescription(),
+      Fields.useTaskPriority(),
+      Fields.useWorkerGroup(),
+      Fields.useEnvironmentName(model, !model.id),
+      ...Fields.useTaskGroup(model, projectCode),
+      ...Fields.useFailed(),
+      Fields.useDelayTime(model),
+      ...Fields.useTimeoutAlarm(model),
+      Fields.useDatasourceType(model),
+      Fields.useDatasource(model),
+      ...Fields.useProcedure(model),
+      Fields.usePreTasks(model)
+    ] as IJsonItem[],
+    model
+  }
+}

dolphinscheduler-ui-next/src/views/projects/task/components/node/types.ts

@@ -76,6 +76,7 @@ interface ITaskParams {
   sqlType?: string
   preStatements?: string[]
   postStatements?: string[]
+  method?: string
 }
 
 type ITaskType = TaskType
@@ -111,6 +112,7 @@ interface INodeData extends Omit<ITaskParams, 'resourceList' | 'mainJar'> {
   sqlType?: string
   preStatements?: string[]
   postStatements?: string[]
+  method?: string
 }
 
 interface ITaskData

dolphinscheduler-ui-next/src/views/projects/task/components/node/use-task.ts

@@ -24,6 +24,7 @@ import { useSpark } from './tasks/use-spark'
 import { useMr } from './tasks/use-mr'
 import { useHttp } from './tasks/use-http'
 import { useSql } from './tasks/use-sql'
+import { useProcedure } from './tasks/use-procedure'
 import { IJsonItem, INodeData, ITaskData } from './types'
 
 export function useTask({
@@ -111,5 +112,13 @@ export function useTask({
       data
     })
   }
+  if (taskType === 'PROCEDURE') {
+    node = useProcedure({
+      projectCode,
+      from,
+      readonly,
+      data
+    })
+  }
   return node
 }