[Feature][UI] Added the display and hide function of dynamically created workflow buttons. (#12558)

dolphinscheduler-ui/src/locales/en_US/project.ts

@@ -44,6 +44,7 @@ export default {
     operating_environment: 'Operating Environment',
     workflow_relation: 'Workflow Relation',
     create_workflow: 'Create Workflow',
+    create_workflow_dynamic: 'Create Workflow (Dynamic)',
     import_workflow: 'Import Workflow',
     workflow_name: 'Workflow Name',
     workflow_instance_name: 'Workflow Instance Name',

dolphinscheduler-ui/src/locales/zh_CN/project.ts

@@ -44,6 +44,7 @@ export default {
     operating_environment: '运行环境',
     workflow_relation: '工作流关系',
     create_workflow: '创建工作流',
+    create_workflow_dynamic: '创建工作流 (动态)',
     import_workflow: '导入工作流',
     workflow_name: '工作流名称',
     workflow_instance_name: '工作流实例名称',

dolphinscheduler-ui/src/store/ui-setting/types.ts

@@ -16,6 +16,7 @@
  */
 interface UISettingStore {
   logTimer: number
+  dynamicTask: boolean
 }
 
 export { UISettingStore }

dolphinscheduler-ui/src/store/ui-setting/ui-setting.ts

@@ -22,16 +22,23 @@ export const useUISettingStore = defineStore({
   id: 'ui-setting',
   state: (): UISettingStore => ({
     logTimer: 0,
+    dynamicTask: false
   }),
   persist: true,
   getters: {
     getLogTimer(): number {
       return this.logTimer
+    },
+    getDynamicTask(): boolean {
+      return this.dynamicTask
     }
   },
   actions: {
     setLogTimer(timer: number): void {
       this.logTimer = timer
+    },
+    setDynamicTask(): void {
+      this.dynamicTask = !this.dynamicTask
     }
   }
 })

dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx

@@ -36,6 +36,7 @@ import {
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import { useRouter, useRoute } from 'vue-router'
+import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 import Card from '@/components/card'
 import ImportModal from './components/import-modal'
 import StartModal from './components/start-modal'
@@ -50,6 +51,7 @@ export default defineComponent({
     const router: Router = useRouter()
     const route = useRoute()
     const projectCode = Number(route.params.projectCode)
+    const uiSettingStore = useUISettingStore()
 
     const {
       variables,
@@ -114,6 +116,7 @@ export default defineComponent({
       batchCopyWorkflow,
       handleCopyUpdateList,
       ...toRefs(variables),
+      uiSettingStore,
       trim
     }
   },
@@ -142,6 +145,14 @@ export default defineComponent({
               >
                 {t('project.workflow.import_workflow')}
               </NButton>
+              {
+                this.uiSettingStore.getDynamicTask && <NButton
+                  size='small'
+                  type='warning'
+                >
+                  {t('project.workflow.create_workflow_dynamic')}
+                </NButton>
+              }
             </NSpace>
             <NSpace>
               <NInput

dolphinscheduler-ui/src/views/ui-setting/index.tsx

@@ -31,7 +31,6 @@ const setting = defineComponent({
   name: 'ui-setting',
   setup() {
     const uiSettingStore = useUISettingStore()
-    const defaultLogTimer = uiSettingStore.getLogTimer
 
     const logTimerMap = {
       0: 'Off',
@@ -68,7 +67,7 @@ const setting = defineComponent({
         value: 1800
       }
     ]
-    return { defaultLogTimer, logTimerMap, logTimerOptions }
+    return { uiSettingStore, logTimerMap, logTimerOptions }
   },
   render() {
     const { t } = useI18n()
@@ -80,7 +79,7 @@ const setting = defineComponent({
           <span>{t('ui_setting.refresh_time')}</span>
           <NSelect
             style={{ width: '200px' }}
-            default-value={this.logTimerMap[this.defaultLogTimer]}
+            default-value={this.logTimerMap[this.uiSettingStore.getLogTimer]}
             options={this.logTimerOptions}
             onUpdateValue={handleUpdateValue}
           />
@@ -88,7 +87,7 @@ const setting = defineComponent({
         <h4>{t('ui_setting.experimental_feature')}</h4>
         <NSpace align='center' justify='space-between'>
           <span>{t('ui_setting.dynamic_task_component')}</span>
-          <NSwitch round={false}></NSwitch>
+          <NSwitch round={false} defaultValue={this.uiSettingStore.getDynamicTask} onUpdateValue={() => this.uiSettingStore.setDynamicTask()}></NSwitch>
         </NSpace>
       </Card>
     )