From c37f1488bd0c45584679fe0ceb52b2428af16fb4 Mon Sep 17 00:00:00 2001
From: myangle1120 <942542838@qq.com>
Date: Mon, 23 Aug 2021 23:18:24 +0800
Subject: [PATCH] Task node of SWITCH (#5939)

---
 .../js/conf/home/pages/dag/_source/config.js  |   4 +
 .../js/conf/home/pages/dag/_source/dag.scss   |   3 +
 .../pages/dag/_source/formModel/formModel.vue |  17 +-
 .../dag/_source/formModel/tasks/switch.vue    | 223 ++++++++++++++++++
 .../home/pages/dag/img/toolbar_SWITCH.png     | Bin 0 -> 2987 bytes
 .../src/js/module/i18n/locale/en_US.js        |   4 +-
 .../src/js/module/i18n/locale/zh_CN.js        |   4 +-
 7 files changed, 252 insertions(+), 3 deletions(-)
 create mode 100644 dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/switch.vue
 create mode 100644 dolphinscheduler-ui/src/js/conf/home/pages/dag/img/toolbar_SWITCH.png

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
index fb6c12308a..ce5371013c 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
@@ -308,6 +308,10 @@ const tasksType = {
   CONDITIONS: {
     desc: 'CONDITIONS',
     color: '#E46F13'
+  },
+  SWITCH: {
+    desc: 'SWITCH',
+    color: '#E46F13'
   }
 }
 
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
index 08f2feccbe..00dfb0001e 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
@@ -113,6 +113,9 @@
   .icos-CONDITIONS {
     background: url("../img/toolbar_CONDITIONS.png") no-repeat 50% 50%;
   }
+  .icos-SWITCH{
+    background: url("../img/toolbar_SWITCH.png") no-repeat 50% 50%;
+  }
   .toolbar {
     width: 60px;
     height: 100%;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index 7dfcbc62bb..4da2673579 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -95,7 +95,7 @@
         </m-list-box>
 
         <!-- Delay execution time -->
-        <m-list-box v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'">
+        <m-list-box v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'&& nodeData.taskType !== 'SWITCH'">
           <div slot="text">{{$t('Delay execution time')}}</div>
           <div slot="content">
             <m-select-input v-model="delayTime" :list="[0,1,5,10]"></m-select-input>
@@ -258,6 +258,13 @@
           :backfill-item="backfillItem"
           :pre-node="nodeData.preNode">
         </m-conditions>
+        <m-switch
+          v-if="nodeData.taskType === 'SWITCH'"
+          ref="SWITCH"
+          @on-switch-result="_onSwitchResult"
+          :backfill-item="backfillItem"
+          :nodeData="nodeData"
+        ></m-switch>
         <!-- Pre-tasks in workflow -->
         <m-pre-tasks
           v-if="['SHELL', 'SUB_PROCESS'].indexOf(nodeData.taskType) > -1"
@@ -293,6 +300,7 @@
   import mHttp from './tasks/http'
   import mDatax from './tasks/datax'
   import mConditions from './tasks/conditions'
+  import mSwitch from './tasks/switch.vue'
   import mSqoop from './tasks/sqoop'
   import mSubProcess from './tasks/sub_process'
   import mSelectInput from './_source/selectInput'
@@ -328,6 +336,7 @@
           successNode: [],
           failedNode: []
         },
+        switchResult: {},
         // dependence
         dependence: {},
         // cache dependence
@@ -386,6 +395,9 @@
       _onDependent (o) {
         this.dependence = Object.assign(this.dependence, {}, o)
       },
+      _onSwitchResult (o) {
+        this.switchResult = o
+      },
       /**
        * Pre-tasks in workflow
        */
@@ -480,6 +492,7 @@
             desc: this.desc,
             runFlag: this.runFlag,
             conditionResult: this.conditionResult,
+            switchResult: this.switchResult,
             dependence: this.cacheDependence,
             maxRetryTimes: this.maxRetryTimes,
             retryInterval: this.retryInterval,
@@ -604,6 +617,7 @@
             desc: this.desc,
             runFlag: this.runFlag,
             conditionResult: this.conditionResult,
+            switchResult: this.switchResult,
             dependence: this.dependence,
             maxRetryTimes: this.maxRetryTimes,
             retryInterval: this.retryInterval,
@@ -801,6 +815,7 @@
       mDatax,
       mSqoop,
       mConditions,
+      mSwitch,
       mSelectInput,
       mTimeoutAlarm,
       mDependentTimeout,
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/switch.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/switch.vue
new file mode 100644
index 0000000000..84751934d3
--- /dev/null
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/switch.vue
@@ -0,0 +1,223 @@
+/*
+ * 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.
+ */
+<template>
+  <div class="conditions-model">
+    <m-list-box>
+      <div slot="text">{{$t('condition')}}</div>
+      <div slot="content">
+        <div class="dep-opt">
+          <a href="javascript:"
+             @click="!isDetails && _addDep()"
+             class="add-dep">
+            <em v-if="!isLoading" class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+            <em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
+          </a>
+        </div>
+        <div class="dep-list-model">
+          <div v-for="(el,index) in dependItemList" :key='index' class="switch-list">
+            <label style="display:block">
+              <textarea :id="`code-switch-mirror${index}`" :name="`code-switch-mirror${index}`" style="opacity: 0;">
+              </textarea>
+            </label>
+            <span class="text-b" style="padding-left: 0">{{$t('Branch flow')}}</span>
+            <el-select style="width: 157px;" size="small" v-model="el.nextNode" clearable>
+              <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
+            </el-select>
+            <span class="operation">
+              <a href="javascript:" class="delete" @click="!isDetails && _removeDep(index)" v-if="index === (dependItemList.length - 1)">
+                <em class="iconfont el-icon-delete" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Delete')" ></em>
+              </a>
+              <a href="javascript:" class="add" @click="!isDetails && _addDep()" v-if="index === (dependItemList.length - 1)">
+                <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
+              </a>
+            </span>
+          </div>
+        </div>
+      </div>
+    </m-list-box>
+    <m-list-box>
+      <div slot="text">{{$t('Branch flow')}}</div>
+      <div slot="content">
+        <el-select style="width: 157px;" size="small" v-model="nextNode" clearable :disabled="isDetails">
+          <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
+        </el-select>
+      </div>
+    </m-list-box>
+  </div>
+</template>
+<script>
+  import _ from 'lodash'
+  import mListBox from './_source/listBox'
+  import disabledState from '@/module/mixin/disabledState'
+  import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
+
+  let editArray = []
+  export default {
+    name: 'dependence',
+    data () {
+      return {
+        nextNode: '',
+        relation: 'AND',
+        dependItemList: [],
+        editArray: [],
+        isLoading: false,
+        oldList: []
+      }
+    },
+    mixins: [disabledState],
+    props: {
+      nodeData: Object,
+      backfillItem: Object,
+      rearList: Array
+    },
+    methods: {
+      editList (index) {
+        // editor
+        const self = this
+        const editor = codemirror(`code-switch-mirror${index}`, {
+          mode: 'shell',
+          readOnly: this.isInstance
+        }, this)
+        editor.on('change', function () {
+          const outputList = _.cloneDeep(self.dependItemList)
+          outputList[index].condition = editor.getValue()
+          self.dependItemList = outputList
+        })
+
+        this.keypress = () => {
+          if (!editor.getOption('readOnly')) {
+            editor.showHint({
+              completeSingle: false
+            })
+          }
+        }
+        editor.on('keypress', this.keypress)
+        editor.setValue(this.dependItemList[index].condition || '')
+        editor.setSize('580px', '60px')
+        editArray.push(editor)
+        this.oldList = _.cloneDeep(this.dependItemList)
+        return editArray
+      },
+      _addDep () {
+        if (!this.isLoading) {
+          this.isLoading = true
+
+          this.dependItemList.push({
+            condition: '',
+            nextNode: ''
+          })
+          let dependItemListLen = this.dependItemList.length
+          if (dependItemListLen > 0) {
+            setTimeout(() => {
+              this.editList(dependItemListLen - 1)
+              this.isLoading = false
+            }, 200)
+          }
+          this._removeTip()
+        }
+      },
+      _removeDep (i) {
+        this.dependItemList.splice(i, 1)
+        this._removeTip()
+      },
+      _removeTip () {
+        $('body').find('.tooltip.fade.top.in').remove()
+      },
+      _verification () {
+        let flag = this.dependItemList.some((item) => {
+          return !item.condition
+        })
+        if (flag) {
+          this.$message.warning(`${this.$t('The condition content cannot be empty')}`)
+          return false
+        }
+        let params = {
+          dependTaskList: this.dependItemList || [],
+          nextNode: this.nextNode || ''
+        }
+        this.$emit('on-switch-result', params)
+        return true
+      }
+    },
+    watch: {},
+    beforeCreate () {
+    },
+    created () {
+      const o = this.backfillItem
+      if (!_.isEmpty(o)) {
+        let switchResult = o.switchResult || {}
+        this.dependItemList = _.cloneDeep(switchResult.dependTaskList) || []
+        this.nextNode = _.cloneDeep(switchResult.nextNode) || ''
+      }
+    },
+    mounted () {
+      if (this.dependItemList && this.dependItemList.length > 0) {
+        setTimeout(() => {
+          this.dependItemList.forEach((item, index) => {
+            this.editList(index)
+          })
+        })
+      }
+    },
+    destroyed () {
+    },
+    computed: {
+    },
+    components: { mListBox }
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .conditions-model {
+    margin-top: -10px;
+    .dep-opt {
+      margin-bottom: 10px;
+      padding-top: 3px;
+      line-height: 24px;
+      .add-dep {
+        color: #0097e0;
+        margin-right: 10px;
+        i {
+          font-size: 18px;
+          vertical-align: middle;
+        }
+      }
+    }
+    .dep-list-model{
+      position: relative;
+      min-height: 0px;
+      .switch-list {
+        margin-bottom: 6px;
+        .operation {
+          padding-left: 4px;
+          a {
+            i {
+              font-size: 18px;
+              vertical-align: middle;
+            }
+          }
+          .delete {
+            color: #ff0000;
+          }
+          .add {
+            color: #0097e0;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/img/toolbar_SWITCH.png b/dolphinscheduler-ui/src/js/conf/home/pages/dag/img/toolbar_SWITCH.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3066632f53540cd3f590cba3f8ec1f7490139ed
GIT binary patch
literal 2987
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
X)x^!rDOdKb{ysb5U2vCdeWU*aF<=i5

literal 0
HcmV?d00001

diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
index 3be86735f4..2dbdd21ad0 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
@@ -695,5 +695,7 @@ export default {
   'The workflow canvas is abnormal and cannot be saved, please recreate': 'The workflow canvas is abnormal and cannot be saved, please recreate',
   Info: 'Info',
   'Datasource userName': 'owner',
-  'Resource userName': 'owner'
+  'Resource userName': 'owner',
+  condition: 'condition',
+  'The condition content cannot be empty': 'The condition content cannot be empty'
 }
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
index 07803e8e89..3174c132b5 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
@@ -694,5 +694,7 @@ export default {
   'The workflow canvas is abnormal and cannot be saved, please recreate': '该工作流画布异常，无法保存，请重新创建',
   Info: '提示',
   'Datasource userName': '所属用户',
-  'Resource userName': '所属用户'
+  'Resource userName': '所属用户',
+  condition: '条件',
+  'The condition content cannot be empty': '条件内容不能为空'
 }