[Improve][UI Next] Add a few instructions on how to call a procedure in the form of the procedure task. (#8566)

* improve the form of procedure

* improve the form of the procedure task

dolphinscheduler-ui-next/README.md

@@ -3,11 +3,11 @@
 ---
 
 > After two and a half months of development cycle, we have brought a brand-new `UI` management system (V1.0.0-Alpha).
-> 
+>
 > Compared with the old `UI`, it will be more standardized, and it will also have a more complete type checking mechanism. At the same time, its speed has made a qualitative leap.
-> 
+>
 > We also provide dark mode and light mode to meet the preferences of different developers. It will make your eyes shine.
-> 
+>
 > If you have tried the new `UI` and found problems in use, you can contact us through issue.
 
 ---
@@ -26,7 +26,6 @@ You can learn how to install the corresponding version from their official websi
 pnpm install
 ```
 
-
 #### Start Development Project
 
 To do this you need to change the `VITE_APP_DEV_WEB_URL` parameter variable in `.env.development` in the project root directory.

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

@@ -713,6 +713,8 @@ const project = {
     sql_empty_tips: 'The sql can not be empty.',
     procedure_method: 'SQL Statement',
     procedure_method_tips: 'Please enter the procedure script',
+    procedure_method_snippet:
+      '--Please enter the procedure script \n\n--call procedure:call <procedure-name>[(<arg1>,<arg2>, ...)]\n\n--call function:?= call <procedure-name>[(<arg1>,<arg2>, ...)]',
     start: 'Start',
     edit: 'Edit',
     copy: 'Copy',

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

@@ -705,6 +705,8 @@ const project = {
     sql_empty_tips: '语句不能为空',
     procedure_method: 'SQL语句',
     procedure_method_tips: '请输入存储脚本',
+    procedure_method_snippet:
+      '--请输入存储脚本 \n\n--调用存储过程: call <procedure-name>[(<arg1>,<arg2>, ...)] \n\n--调用存储函数：?= call <procedure-name>[(<arg1>,<arg2>, ...)]',
     start: '运行',
     edit: '编辑',
     copy: '复制节点',

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

@@ -25,6 +25,11 @@ export function useProcedure(model: { [field: string]: any }): IJsonItem[] {
       type: 'editor',
       field: 'method',
       name: t('project.node.procedure_method'),
+      props: {
+        language: 'sql',
+        placeholder: t('project.node.procedure_method_tips'),
+        defaultValue:  model.method? model.method : t('project.node.procedure_method_snippet')
+      },
       validate: {
         trigger: ['input', 'trigger'],
         required: true,

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

@@ -19,6 +19,7 @@ import { reactive } from 'vue'
 import * as Fields from '../fields/index'
 import type { IJsonItem, INodeData } from '../types'
 import { ITaskData } from '../types'
+import { useI18n } from 'vue-i18n'
 
 export function useProcedure({
   projectCode,
@@ -31,6 +32,8 @@ export function useProcedure({
   readonly?: boolean
   data?: ITaskData
 }) {
+  const { t } = useI18n()
+
   const model = reactive({
     name: '',
     taskType: 'PROCEDURE',

dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/log.module.scss

@@ -21,7 +21,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,.4);
+  background: rgba(0, 0, 0, 0.4);
   z-index: 10;
   .log-box {
     width: 660px;
@@ -29,7 +29,7 @@
     background: #fff;
     border-radius: 3px;
     position: absolute;
-    left:50%;
+    left: 50%;
     top: 50%;
     margin-left: -340px;
     margin-top: -250px;
@@ -54,19 +54,19 @@
     }
     .content {
       height: calc(100% - 100px);
-      background: #002A35;
-      padding:6px 2px;
+      background: #002a35;
+      padding: 6px 2px;
       .content-log-box {
         width: 100%;
         height: 100%;
-        word-break:break-all;
+        word-break: break-all;
         textarea {
           background: none;
-          color: #9CABAF;
+          color: #9cabaf;
           border: 0;
           font-family: 'Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif';
           font-weight: bold;
-          resize:none;
+          resize: none;
           line-height: 1.6;
           padding: 0px;
         }
@@ -83,15 +83,35 @@
     }
   }
 }
-@-webkit-keyframes rotateloading{from{-webkit-transform: rotate(0deg)}
-  to{-webkit-transform: rotate(360deg)}
+@-webkit-keyframes rotateloading {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
 }
-@-moz-keyframes rotateloading{from{-moz-transform: rotate(0deg)}
-  to{-moz-transform: rotate(359deg)}
+@-moz-keyframes rotateloading {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(359deg);
+  }
 }
-@-o-keyframes rotateloading{from{-o-transform: rotate(0deg)}
-  to{-o-transform: rotate(359deg)}
+@-o-keyframes rotateloading {
+  from {
+    -o-transform: rotate(0deg);
+  }
+  to {
+    -o-transform: rotate(359deg);
+  }
+}
+@keyframes rotateloading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }
-@keyframes rotateloading{from{transform: rotate(0deg)}
-  to{transform: rotate(359deg)}
-}