Replace the front-end code of the plugin branch with the front-end code of the dev branch (#4353)

* Replace the front-end code of the plugin branch with the front-end code of the dev branch

dolphinscheduler-ui/.babelrc

@@ -5,7 +5,15 @@
         "debug": false,
         "useBuiltIns": true,
         "targets": {
-          "browsers": [ "ie > 8", "last 2 version", "safari >= 9" ]
+          "browsers": [
+            "> 1%",
+            "last 2 versions",
+            "ie >= 9",
+            "edge >= 12",
+            "firefox >= 28",
+            "chrome >= 29",
+            "opera >= 17"
+          ]
         },
         "production": {
           "plugins": ["transform-remove-console"]

dolphinscheduler-ui/.eslintignore

+/_test_/
+/build/
+/dist/
+/node/
+/node_modules/
+/target/
+/*.js

dolphinscheduler-ui/.eslintrc.yml

@@ -26,9 +26,19 @@ globals:
   Atomics: readonly
   SharedArrayBuffer: readonly
   PUBLIC_PATH: readonly
+  $t: readonly
 parserOptions:
   ecmaVersion: 2018
   sourceType: module
 plugins:
   - vue
-rules: {}
+rules:
+  vue/script-indent: ['error', 2, { 'baseIndent': 1, 'switchCase': 1 }]
+  prefer-promise-reject-errors: 'off'
+  no-prototype-builtins: 'off'
+  no-mixed-operators: 'off'
+  no-extend-native: 'off'
+  prefer-const: 'off'
+  no-var: 'error'
+overrides:
+  - { 'files': ['*.vue'], 'rules': { 'indent': 'off' }}

dolphinscheduler-ui/build/config.js

@@ -47,7 +47,7 @@ const jsEntry = (() => {
     parts.shift()
     let modules = parts.join('/')
     let entry = moduleName(modules)
-    obj[entry] = val
+    obj[entry] = ['babel-polyfill', val]
   })
   return obj
 })()
@@ -125,6 +125,16 @@ const baseConfig = {
   },
   module: {
     rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src')],
+        options: {
+          formatter: require('eslint-friendly-formatter'),
+          emitWarning: true
+        }
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',

dolphinscheduler-ui/build/webpack.config.dev.js

@@ -19,6 +19,8 @@ const merge = require('webpack-merge')
 const { assetsDir, baseConfig } = require('./config')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const ProgressPlugin = require('progress-bar-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
 const getEnv = require('env-parse').getEnv
 
 const config = merge.smart(baseConfig, {
@@ -33,6 +35,7 @@ const config = merge.smart(baseConfig, {
     port: getEnv('DEV_PORT', 8888),
     host: getEnv('DEV_HOST', 'localhost'),
     noInfo: false,
+    overlay: { warnings: false, errors: true },
     historyApiFallback: true,
     disableHostCheck: true,
     proxy: {
@@ -42,12 +45,12 @@ const config = merge.smart(baseConfig, {
         changeOrigin: true
       }
     },
-    progress: false,
-    quiet: false,
+    progress: true,
+    quiet: true,
     stats: {
       colors: true
     },
-    clientLogLevel: 'none'
+    clientLogLevel: 'warning'
   },
   plugins: [
     new ProgressPlugin(),
@@ -57,4 +60,36 @@ const config = merge.smart(baseConfig, {
   mode: 'development'
 })
 
-module.exports = config
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.devServer.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      config.devServer.port = port
+      // Add FriendlyErrorsPlugin
+      config.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${config.devServer.host}:${port}`],
+        },
+        onErrors: () => {
+          const notifier = require('node-notifier')
+          return (severity, errors) => {
+            if (severity !== 'error') return
+            const error = errors[0]
+            const filename = error.file && error.file.split('!').pop()
+            notifier.notify({
+              title: packageConfig.name,
+              message: severity + ': ' + error.name,
+              subtitle: filename || ''
+            })
+          }
+        }
+      }))
+      resolve(config)
+    }
+  })
+})

dolphinscheduler-ui/build/webpack.config.prod.js

@@ -51,12 +51,7 @@ const config = merge.smart(baseConfig, {
     minimizer: [
       new TerserPlugin({
         terserOptions: {
-          compress: {
-            warnings: false,
-            drop_console: true,
-            drop_debugger: true,
-            pure_funcs: ['console.log']
-          }
+          compress: {}
         },
         cache: true,
         parallel: true,

dolphinscheduler-ui/package.json

@@ -8,13 +8,12 @@
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.dev.js",
     "clean": "rimraf dist",
     "start": "npm run dev",
-    "lint": "eslint ./src --fix",
+    "lint": "eslint --ext .js,.vue ./src",
+    "lint:fix": "eslint --ext .js,.vue --fix ./src",
     "build:release": "npm run clean && cross-env NODE_ENV=production PUBLIC_PATH=/dolphinscheduler/ui webpack --config ./build/webpack.config.release.js"
   },
   "dependencies": {
-    "@form-create/element-ui": "^1.0.18",
     "@riophae/vue-treeselect": "^0.4.0",
-    "ans-ui": "1.1.9",
     "axios": "^0.16.2",
     "bootstrap": "3.3.7",
     "canvg": "1.5.1",
@@ -25,6 +24,7 @@
     "dayjs": "^1.7.8",
     "echarts": "4.1.0",
     "element-ui": "2.13.2",
+    "font-awesome": "^4.7.0",
     "html2canvas": "^0.5.0-beta4",
     "jquery": "3.3.1",
     "jquery-ui": "^1.12.1",
@@ -33,7 +33,7 @@
     "lodash": "^4.17.11",
     "normalize.css": "^8.0.1",
     "vue": "^2.5.17",
-    "vue-router": "^2.7.0",
+    "vue-router": "^3.0.0",
     "vuex": "^3.0.0",
     "vuex-router-sync": "^5.0.0"
   },
@@ -48,6 +48,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "copy-webpack-plugin": "^4.5.2",
     "cross-env": "^5.2.0",
@@ -56,17 +57,23 @@
     "env-parse": "^1.0.5",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.1",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.2.0",
     "file-loader": "^5.0.2",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "globby": "^8.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.2",
+    "node-notifier": "^8.0.0",
     "node-sass": "^4.14.1",
+    "pack": "^2.2.0",
+    "portfinder": "^1.0.28",
     "postcss-loader": "^3.0.0",
     "progress-bar-webpack-plugin": "^1.12.1",
     "rimraf": "^2.6.2",
@@ -80,5 +87,14 @@
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
     "webpack-merge": "^4.2.2"
-  }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "ie >= 9",
+    "edge >= 12",
+    "firefox >= 28",
+    "chrome >= 29",
+    "opera >= 17"
+  ]
 }

dolphinscheduler-ui/pom.xml

@@ -20,7 +20,7 @@
   <parent>
     <artifactId>dolphinscheduler</artifactId>
     <groupId>org.apache.dolphinscheduler</groupId>
-    <version>1.3.2-SNAPSHOT</version>
+    <version>1.3.4-SNAPSHOT</version>
   </parent>
   <modelVersion>4.0.0</modelVersion>
 
@@ -203,5 +203,4 @@
   </profiles>
 
 
-
-</project>
+</project>
\ No newline at end of file

dolphinscheduler-ui/src/components/Counter.vue

@@ -24,30 +24,30 @@
 </template>
 
 <script>
-export default {
-  props: {
-    factor: { type: Number, default: 1 }
-  },
-  data() {
-    return {
-      count: 0
-    };
-  },
-  methods: {
-    inc() {
-      this.count++;
+  export default {
+    props: {
+      factor: { type: Number, default: 1 }
     },
-    dec() {
-      this.count--;
+    data () {
+      return {
+        count: 0
+      }
     },
-    reset() {
-      this.count = 0;
-    }
-  },
-  computed: {
-    computedCount: function() {
-      return this.count * this.factor;
+    methods: {
+      inc () {
+        this.count++
+      },
+      dec () {
+        this.count--
+      },
+      reset () {
+        this.count = 0
+      }
+    },
+    computed: {
+      computedCount: function () {
+        return this.count * this.factor
+      }
     }
   }
-};
-</script>
\ No newline at end of file
+</script>

dolphinscheduler-ui/src/components/Message.vue

@@ -19,10 +19,10 @@
 </template>
 
 <script>
-export default {
-  name: 'message',
-  props: [
-    'msg'
-  ]
-}
-</script>
\ No newline at end of file
+  export default {
+    name: 'message',
+    props: [
+      'msg'
+    ]
+  }
+</script>

dolphinscheduler-ui/src/js/conf/home/App.vue

@@ -17,15 +17,36 @@
 <template>
   <m-layout>
     <m-nav slot="top"></m-nav>
-    <router-view slot="bottom"></router-view>
+    <router-view slot="bottom" v-if="isRenderRouterView"></router-view>
   </m-layout>
 </template>
 
 <script>
+  import visibility from '@/module/visibility'
   import mLayout from '@/module/components/layout/layout'
   import mNav from '@/module/components/nav/nav'
   export default {
     name: 'app',
+    data () {
+      return {
+        isRenderRouterView: true
+      }
+    },
+    methods: {
+      reload () {
+        this.isRenderRouterView = false
+        this.$nextTick(() => {
+          this.isRenderRouterView = true
+        })
+      }
+    },
+    mounted () {
+      visibility.change((evt, hidden) => {
+        if (hidden === false) {
+          this.reload()
+        }
+      })
+    },
     components: { mLayout, mNav }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/index.js

@@ -17,6 +17,7 @@
 
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import 'babel-polyfill'
 import Vue from 'vue'
 import ElementUI from 'element-ui'
 import locale from 'element-ui/lib/locale/lang/en'
@@ -28,29 +29,23 @@ import i18n from '@/module/i18n'
 import { sync } from 'vuex-router-sync'
 import Chart from '@/module/ana-charts'
 import '@/module/filter/formatDate'
+import '@/module/filter/filterNull'
 import themeData from '@/module/echarts/themeData.json'
 import Permissions from '@/module/permissions'
-import 'ans-ui/lib/ans-ui.min.css'
-import ans from 'ans-ui/lib/ans-ui.min'
-import en_US from 'ans-ui/lib/locale/en' // eslint-disable-line
 import 'sass/conf/home/index.scss'
 import 'bootstrap/dist/css/bootstrap.min.css'
 
 import 'bootstrap/dist/js/bootstrap.min.js'
 import 'canvg/dist/browser/canvg.min.js'
-
-import formCreate, {maker} from '@form-create/element-ui'
+import 'font-awesome/css/font-awesome.min.css'
 
 // Component internationalization
-const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: en_US } : {}
+const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: locale } : {}
 
 i18n.globalScope.LOCALE === 'en_US' ? Vue.use(ElementUI, { locale }) : Vue.use(ElementUI)
 
-
 // Vue.use(ans)
-Vue.use(ans, useOpt)
-
-Vue.use(formCreate, {maker})
+Vue.use(useOpt)
 
 sync(store, router)
 

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js

@@ -29,31 +29,31 @@ const toolOper = (dagThis) => {
   return [
     {
       code: 'pointer',
-      icon: 'ans-icon-pointer',
+      icon: 'el-icon-thumb',
       disable: disabled,
       desc: `${i18n.$t('Drag Nodes and Selected Items')}`
     },
     {
       code: 'line',
-      icon: 'ans-icon-slash',
+      icon: 'el-icon-top-right',
       disable: disabled,
       desc: `${i18n.$t('Select Line Connection')}`
     },
     {
       code: 'remove',
-      icon: 'ans-icon-trash',
+      icon: 'el-icon-delete',
       disable: disabled,
       desc: `${i18n.$t('Delete selected lines or nodes')}`
     },
     {
       code: 'download',
-      icon: 'ans-icon-download',
+      icon: 'el-icon-download',
       disable: !dagThis.type,
       desc: `${i18n.$t('Download')}`
     },
     {
       code: 'screen',
-      icon: 'ans-icon-max',
+      icon: 'el-icon-full-screen',
       disable: false,
       desc: `${i18n.$t('Full Screen')}`
     }
@@ -150,98 +150,98 @@ const tasksState = {
     id: 0,
     desc: `${i18n.$t('Submitted successfully')}`,
     color: '#A9A9A9',
-    icoUnicode: 'ans-icon-dot-circle',
+    icoUnicode: 'fa fa-dot-circle-o',
     isSpin: false
   },
   RUNNING_EXECUTION: {
     id: 1,
     desc: `${i18n.$t('Executing')}`,
     color: '#0097e0',
-    icoUnicode: 'ans-icon-gear',
+    icoUnicode: 'el-icon-s-tools',
     isSpin: true
   },
   READY_PAUSE: {
     id: 2,
     desc: `${i18n.$t('Ready to pause')}`,
     color: '#07b1a3',
-    icoUnicode: 'ans-icon-pause-solid',
+    icoUnicode: 'fa-pause-circle',
     isSpin: false
   },
   PAUSE: {
     id: 3,
     desc: `${i18n.$t('Pause')}`,
     color: '#057c72',
-    icoUnicode: 'ans-icon-pause',
+    icoUnicode: 'el-icon-video-pause',
     isSpin: false
   },
   READY_STOP: {
     id: 4,
     desc: `${i18n.$t('Ready to stop')}`,
     color: '#FE0402',
-    icoUnicode: 'ans-icon-coin',
+    icoUnicode: 'fa-stop-circle-o',
     isSpin: false
   },
   STOP: {
     id: 5,
     desc: `${i18n.$t('Stop')}`,
     color: '#e90101',
-    icoUnicode: 'ans-icon-stop',
+    icoUnicode: 'fa-stop-circle',
     isSpin: false
   },
   FAILURE: {
     id: 6,
     desc: `${i18n.$t('failed')}`,
     color: '#000000',
-    icoUnicode: 'ans-icon-fail-empty',
+    icoUnicode: 'el-icon-circle-close',
     isSpin: false
   },
   SUCCESS: {
     id: 7,
     desc: `${i18n.$t('success')}`,
     color: '#33cc00',
-    icoUnicode: 'ans-icon-success-empty',
+    icoUnicode: 'el-icon-circle-check',
     isSpin: false
   },
   NEED_FAULT_TOLERANCE: {
     id: 8,
     desc: `${i18n.$t('Need fault tolerance')}`,
     color: '#FF8C00',
-    icoUnicode: 'ans-icon-pen',
+    icoUnicode: 'el-icon-edit',
     isSpin: false
   },
   KILL: {
     id: 9,
     desc: `${i18n.$t('kill')}`,
     color: '#a70202',
-    icoUnicode: 'ans-icon-minus-circle-empty',
+    icoUnicode: 'el-icon-remove-outline',
     isSpin: false
   },
   WAITTING_THREAD: {
     id: 10,
     desc: `${i18n.$t('Waiting for thread')}`,
     color: '#912eed',
-    icoUnicode: 'ans-icon-sand-clock',
+    icoUnicode: 'fa-hourglass-end',
     isSpin: false
   },
   WAITTING_DEPEND: {
     id: 11,
     desc: `${i18n.$t('Waiting for dependence')}`,
     color: '#5101be',
-    icoUnicode: 'ans-icon-dependence',
+    icoUnicode: 'fa-window-restore',
     isSpin: false
   },
   DELAY_EXECUTION: {
     id: 12,
     desc: `${i18n.$t('Delay execution')}`,
     color: '#5102ce',
-    icoUnicode: 'ans-icon-coin',
+    icoUnicode: 'fa-stop-circle-o',
     isSpin: false
   },
   FORCED_SUCCESS: {
     id: 13,
     desc: `${i18n.$t('Forced success')}`,
     color: '#5102ce',
-    icoUnicode: 'ans-icon-success-solid',
+    icoUnicode: 'el-icon-success',
     isSpin: false
   }
 }

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js

@@ -15,14 +15,13 @@
  * limitations under the License.
  */
 import Vue from 'vue'
-let v = new Vue()
 import _ from 'lodash'
 import i18n from '@/module/i18n'
 import { jsPlumb } from 'jsplumb'
 import JSP from './plugIn/jsPlumbHandle'
 import DownChart from './plugIn/downChart'
 import store from '@/conf/home/store'
-import dagre from "dagre"
+import dagre from 'dagre'
 
 /**
  * Prototype method
@@ -53,7 +52,9 @@ Dag.prototype.setConfig = function (o) {
  */
 Dag.prototype.create = function () {
   const self = this
-  jsPlumb.ready(() => {
+  const plumbIns = jsPlumb.getInstance()
+  plumbIns.reset()
+  plumbIns.ready(() => {
     JSP.init({
       dag: this.dag,
       instance: this.instance,
@@ -76,7 +77,7 @@ Dag.prototype.create = function () {
  * Action event on the right side of the toolbar
  */
 Dag.prototype.toolbarEvent = function ({ item, code, is }) {
-  let self = this
+  const self = this
   switch (code) {
     case 'pointer':
       JSP.handleEventPointer(is)
@@ -91,21 +92,15 @@ Dag.prototype.toolbarEvent = function ({ item, code, is }) {
       JSP.handleEventScreen({ item, is })
       break
     case 'download':
-      v.$modal.dialog({
-        width: 350,
-        closable: false,
-        showMask: true,
-        maskClosable: true,
-        title: i18n.$t('Download'),
-        content: i18n.$t('Please confirm whether the workflow has been saved before downloading'),
-        ok: {
-          handle (e) {
-            DownChart.download({
-              dagThis: self.dag
-            })
-          }
-        },
-        cancel: {}
+      Vue.prototype.$confirm(`${i18n.$t('Please confirm whether the workflow has been saved before downloading')}`, `${i18n.$t('Download')}`, {
+        confirmButtonText: `${i18n.$t('Confirm')}`,
+        cancelButtonText: `${i18n.$t('Cancel')}`,
+        type: 'warning'
+      }).then(() => {
+        DownChart.download({
+          dagThis: self.dag
+        })
+      }).catch(() => {
       })
       break
   }
@@ -128,17 +123,19 @@ Dag.prototype.backfill = function (arg) {
 
     for (const i in store.state.dag.connects) {
       const connect = store.state.dag.connects[i]
-      g.setEdge(connect['endPointSourceId'], connect['endPointTargetId'])
+      g.setEdge(connect.endPointSourceId, connect.endPointTargetId)
     }
     dagre.layout(g)
 
     const dataObject = {}
     g.nodes().forEach(function (v) {
       const node = g.node(v)
+      const location = store.state.dag.locations[node.label]
       const obj = {}
-      obj.name = node.label
+      obj.name = location.name
       obj.x = node.x + marginX
       obj.y = node.y
+      obj.targetarr = location.targetarr
       dataObject[node.label] = obj
     })
     jsPlumb.ready(() => {
@@ -162,7 +159,9 @@ Dag.prototype.backfill = function (arg) {
       })
     })
   } else {
-    jsPlumb.ready(() => {
+    const plumbIns = jsPlumb.getInstance()
+    plumbIns.reset()
+    plumbIns.ready(() => {
       JSP.init({
         dag: this.dag,
         instance: this.instance,

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss

@@ -207,7 +207,6 @@
         .operation {
           overflow: hidden;
           display: inline-block;
-          margin-right: 10px;
           a {
             float: left;
             width: 28px;
@@ -277,8 +276,9 @@ svg path:hover {
   background: #fff;
   border-radius: 3px;
   box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1);
-  padding: 4px 0;
+  padding: 4px 4px;
   visibility:hidden;
+  z-index: 10000;
   a {
     height: 30px;
     line-height: 28px;

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue

@@ -23,7 +23,7 @@
       <div class="cont-box">
         <label class="label-box">
           <div style="padding-top: 5px;">
-            <x-switch v-model="enable" @on-click="_onSwitch(0, $event)" :disabled="isDetails"></x-switch>
+            <el-switch v-model="enable" size="small" @change="_onSwitch(0, $event)" :disabled="isDetails"></el-switch>
           </div>
         </label>
       </div>
@@ -35,7 +35,7 @@
       <div class="cont-box">
         <label class="label-box">
           <div style="padding: 5px 0;">
-            <x-switch v-model="waitStartTimeout.enable" @on-click="_onSwitch(1, $event)" :disabled="isDetails"></x-switch>
+            <el-switch v-model="waitStartTimeout.enable" size="small" @change="_onSwitch(1, $event)" :disabled="isDetails"></el-switch>
           </div>
         </label>
       </div>
@@ -46,22 +46,22 @@
           <span class="text-box">
             <span>{{$t('Timeout period')}}</span>
           </span>
-          <x-input v-model="waitStartTimeout.interval" style="width: 100px;" :disabled="isDetails" maxlength="9">
+          <el-input v-model="waitStartTimeout.interval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
             <span slot="append">{{$t('Minute')}}</span>
-          </x-input>
+          </el-input>
           <span class="text-box">
             <span>{{$t('Check interval')}}</span>
           </span>
-          <x-input v-model="waitStartTimeout.checkInterval" style="width: 100px;" :disabled="isDetails" maxlength="9">
+          <el-input v-model="waitStartTimeout.checkInterval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
             <span slot="append">{{$t('Minute')}}</span>
-          </x-input>
+          </el-input>
           <span class="text-box">
             <span>{{$t('Timeout strategy')}}</span>
           </span>
           <div style="padding-top: 6px;">
-            <x-checkbox-group v-model="waitStartTimeout.strategy">
-              <x-checkbox label="FAILED" :disabled="true">{{$t('Timeout failure')}}</x-checkbox>
-            </x-checkbox-group>
+            <el-checkbox-group size="small" v-model="waitStartTimeout.strategy">
+              <el-checkbox label="FAILED" :disabled="true">{{$t('Timeout failure')}}</el-checkbox>
+            </el-checkbox-group>
           </div>
         </label>
       </div>
@@ -73,7 +73,7 @@
       <div class="cont-box">
         <label class="label-box">
           <div style="padding: 5px 0;">
-            <x-switch v-model="waitCompleteTimeout.enable" @on-click="_onSwitch(2, $event)" :disabled="isDetails"></x-switch>
+            <el-switch v-model="waitCompleteTimeout.enable" size="small" @change="_onSwitch(2, $event)" :disabled="isDetails"></el-switch>
           </div>
         </label>
       </div>
@@ -84,17 +84,17 @@
           <span class="text-box">
             <span>{{$t('Timeout period')}}</span>
           </span>
-          <x-input v-model="waitCompleteTimeout.interval" style="width: 100px;" :disabled="isDetails" maxlength="9">
+          <el-input v-model="waitCompleteTimeout.interval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
             <span slot="append">{{$t('Minute')}}</span>
-          </x-input>
+          </el-input>
           <span class="text-box">
             <span>{{$t('Timeout strategy')}}</span>
           </span>
           <div style="padding-top: 6px;">
-            <x-checkbox-group v-model="waitCompleteTimeout.strategy">
-              <x-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</x-checkbox>
-              <x-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</x-checkbox>
-            </x-checkbox-group>
+            <el-checkbox-group size="small" v-model="waitCompleteTimeout.strategy">
+              <el-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</el-checkbox>
+              <el-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</el-checkbox>
+            </el-checkbox-group>
           </div>
         </label>
       </div>
@@ -143,21 +143,21 @@
         if (p === 2 || p === 0) {
           this.waitCompleteTimeout.strategy = is ? ['WARN'] : []
           this.waitCompleteTimeout.interval = is ? 30 : null
-        }        
+        }
       },
       _verification () {
         // Verification timeout policy
-        if (this.enable 
-          && (this.waitCompleteTimeout.enable && !this.waitCompleteTimeout.strategy.length)
-          || (this.waitStartTimeout.enable && !this.waitStartTimeout.strategy.length)) {
+        if (this.enable &&
+          (this.waitCompleteTimeout.enable && !this.waitCompleteTimeout.strategy.length) ||
+          (this.waitStartTimeout.enable && !this.waitStartTimeout.strategy.length)) {
           this.$message.warning(`${this.$t('Timeout strategy must be selected')}`)
           return false
         }
         // Verify timeout duration Non 0 positive integer
         const reg = /^[1-9]\d*$/
-        if (this.enable 
-          && (this.waitCompleteTimeout.enable && !reg.test(this.waitCompleteTimeout.interval))
-          || (this.waitStartTimeout.enable && (!reg.test(this.waitStartTimeout.interval || !reg.test(this.waitStartTimeout.checkInterval))))) {
+        if (this.enable &&
+          (this.waitCompleteTimeout.enable && !reg.test(this.waitCompleteTimeout.interval)) ||
+          (this.waitStartTimeout.enable && (!reg.test(this.waitStartTimeout.interval || !reg.test(this.waitStartTimeout.checkInterval))))) {
           this.$message.warning(`${this.$t('Timeout must be a positive integer')}`)
           return false
         }
@@ -175,16 +175,16 @@
           },
           waitCompleteTimeout: {
             strategy: (() => {
-            // Handling checkout sequence
-            let strategy = this.waitCompleteTimeout.strategy
-            if (strategy.length === 2 && strategy[0] === 'FAILED') {
-              return [strategy[1], strategy[0]].join(',')
-            } else {
-              return strategy.join(',')
-            }
-          })(),
-          interval: parseInt(this.waitCompleteTimeout.interval),
-          enable: this.waitCompleteTimeout.enable
+              // Handling checkout sequence
+              let strategy = this.waitCompleteTimeout.strategy
+              if (strategy.length === 2 && strategy[0] === 'FAILED') {
+                return [strategy[1], strategy[0]].join(',')
+              } else {
+                return strategy.join(',')
+              }
+            })(),
+            interval: parseInt(this.waitCompleteTimeout.interval),
+            enable: this.waitCompleteTimeout.enable
           }
         })
         return true
@@ -215,4 +215,4 @@
     },
     components: {}
   }
-</script>
\ No newline at end of file
+</script>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue

@@ -15,33 +15,34 @@
  * limitations under the License.
  */
 <template>
-  <x-select
+  <el-select
           style="width: 157px;"
           :disabled="isDetails"
-          @on-change="_onChange"
-          v-model="value">
-      <x-input
+          size="small"
+          @change="_onChange"
+          v-model="selectedValue">
+      <el-input
               ref="input"
               slot="trigger"
               v-if="isInput"
               :disabled="isDetails"
               slot-scope="{ selectedModel }"
               maxlength="4"
-              @on-blur="_onBlur"
+              @blur="_onBlur"
               :placeholder="$t('Please choose')"
               :value="selectedModel === null ? '0' : selectedModel.value"
               style="width: 100%;"
-              @on-click-icon.stop="_ckIcon">
-        <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></em>
-        <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></em>
-      </x-input>
-    <x-option
+              @click="_ckIcon">
+        <em slot="suffix" class="el-icon-error" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></em>
+        <em slot="suffix" class="el-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></em>
+      </el-input>
+    <el-option
             v-for="city in list"
             :key="city"
             :value="city"
             :label="city">
-    </x-option>
-  </x-select>
+    </el-option>
+  </el-select>
 </template>
 <script>
   import _ from 'lodash'
@@ -52,6 +53,7 @@
     name: 'form-select-input',
     data () {
       return {
+        selectedValue: this.value,
         isIconState: false,
         isInput: true
       }
@@ -67,8 +69,8 @@
     },
     methods: {
       _onChange (o) {
-        this.$emit('valueEvent', +o.value)
-        this._setIconState(+o.value)
+        this.$emit('valueEvent', +o)
+        this._setIconState(+o)
       },
       _setIconState (value) {
         // Whether there is a list
@@ -87,7 +89,7 @@
         }, 1)
       },
       _onBlur () {
-        let val = $(this.$refs['input'].$el).find('input')[0].value
+        let val = $(this.$refs.input.$el).find('input')[0].value
         if (this._validation(val)) {
           this.$emit('valueEvent', val)
           this._setIconState(val)
@@ -106,12 +108,15 @@
       }
     },
     watch: {
+      value (val) {
+        this.selectedValue = val
+      }
     },
     created () {
-      this._setIconState(this.value)
+      this._setIconState(this.selectedValue)
     },
     mounted () {
     },
     components: {}
   }
-</script>
\ No newline at end of file
+</script>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue

@@ -23,7 +23,7 @@
       <div class="cont-box">
         <label class="label-box">
           <div style="padding-top: 5px;">
-            <x-switch v-model="enable" @on-click="_onSwitch" :disabled="isDetails"></x-switch>
+            <el-switch v-model="enable" size="small" @change="_onSwitch" :disabled="isDetails"></el-switch>
           </div>
         </label>
       </div>
@@ -35,10 +35,10 @@
       <div class="cont-box">
         <label class="label-box">
           <div style="padding-top: 6px;">
-            <x-checkbox-group v-model="strategy">
-              <x-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</x-checkbox>
-              <x-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</x-checkbox>
-            </x-checkbox-group>
+            <el-checkbox-group v-model="strategy" size="small">
+              <el-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</el-checkbox>
+              <el-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</el-checkbox>
+            </el-checkbox-group>
           </div>
         </label>
       </div>
@@ -49,9 +49,9 @@
       </div>
       <div class="cont-box">
         <label class="label-box">
-          <x-input v-model="interval" style="width: 200px;" :disabled="isDetails" maxlength="9">
+          <el-input v-model="interval" size="small" style="width: 200px;" :disabled="isDetails" maxlength="9">
             <span slot="append">{{$t('Minute')}}</span>
-          </x-input>
+          </el-input>
         </label>
       </div>
     </div>
@@ -127,4 +127,4 @@
     },
     components: {}
   }
-</script>
\ No newline at end of file
+</script>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue

@@ -15,18 +15,19 @@
  * limitations under the License.
  */
 <template>
-  <x-select
+  <el-select
           :disabled="isDetails"
-          @on-change="_onChange"
-          v-model="value"
+          @change="_onChange"
+          v-model="selectedValue"
+          size="small"
           style="width: 180px">
-    <x-option
+    <el-option
             v-for="item in workerGroupsList"
             :key="item.id"
             :value="item.id"
             :label="item.name">
-    </x-option>
-  </x-select>
+    </el-option>
+  </el-select>
 </template>
 <script>
   import disabledState from '@/module/mixin/disabledState'
@@ -34,6 +35,7 @@
     name: 'form-worker-group',
     data () {
       return {
+        selectedValue: this.value,
         workerGroupsList: []
       }
     },
@@ -50,11 +52,13 @@
     },
     methods: {
       _onChange (o) {
-        this.value = o.value
-        this.$emit('workerGroupsEvent', o.value)
+        this.$emit('workerGroupsEvent', o)
       }
     },
     watch: {
+      value (val) {
+        this.selectedValue = val
+      }
     },
     created () {
       let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue

@@ -15,25 +15,25 @@
  * limitations under the License.
  */
 <template>
-  <div class="form-model-model" v-clickoutside="_handleClose">
+  <div class="form-model-wrapper" v-clickoutside="_handleClose">
     <div class="title-box">
       <span class="name">{{$t('Current connection settings')}}</span>
     </div>
     <div class="content-box">
-      <div class="from-model">
+      <div class="form-model">
         <!-- Node name -->
         <div class="clearfix list">
           <div class="text-box"><span>{{$t('Connection name')}}</span></div>
           <div class="cont-box">
             <label class="label-box">
-              <x-input
+              <el-input
                 type="text"
+                size="small"
                 v-model="labelName"
                 :disabled="isDetails"
                 :placeholder="$t('Please enter name')"
-                maxlength="100"
-                autocomplete="off">
-              </x-input>
+                maxlength="100">
+              </el-input>
             </label>
           </div>
         </div>
@@ -41,68 +41,62 @@
     </div>
     <div class="bottom-box">
       <div class="submit" style="background: #fff;">
-        <x-button type="text" @click="cancel()"> {{$t('Cancel')}} </x-button>
-        <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </x-button>
+        <el-button type="text" size="small" @click="cancel()"> {{$t('Cancel')}} </el-button>
+        <el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </el-button>
       </div>
     </div>
   </div>
 </template>
 <script>
-  import _ from 'lodash'
-  import { mapActions } from 'vuex'
-  import i18n from '@/module/i18n'
-  import JSP from './../plugIn/jsPlumbHandle'
   import disabledState from '@/module/mixin/disabledState'
 
   export default {
     name: 'form-line-model',
     data () {
       return {
-          // loading
+        // loading
         spinnerLoading: false,
         // node name
-        labelName: '',
+        labelName: ''
       }
     },
     mixins: [disabledState],
     props: {
-      id: String,
-      sourceId: String,
-      targetId: String
+      lineData: Object
     },
     methods: {
-        cancel() {
-            this.$emit('cancel', {
-                fromThis: this
-            })
-        },
-        ok() {
-          if($(`#${this.id}`).prev().attr('class')==='jtk-overlay') {
-            $(`#${this.id}`).prev().empty()
-          }
-          $(`#${this.id}`).text(this.labelName)
-            this.$emit('addLineInfo', {
-              item: {
-                labelName: this.labelName,
-                sourceId: this.sourceId,
-                targetId: this.targetId
-              },
-              fromThis: this
-            })
+      cancel () {
+        this.$emit('cancel', {
+          fromThis: this
+        })
+      },
+      ok () {
+        if ($(`#${this.lineData.id}`).prev().attr('class') === 'jtk-overlay') {
+          $(`#${this.lineData.id}`).prev().empty()
         }
-    }, 
+        $(`#${this.lineData.id}`).text(this.labelName)
+        this.$emit('addLineInfo', {
+          item: {
+            labelName: this.labelName,
+            sourceId: this.lineData.sourceId,
+            targetId: this.lineData.targetId
+          },
+          fromThis: this
+        })
+      }
+    },
     watch: {
-      
+
     },
     created () {
-      if($(`#${this.id}`).prev().attr('class').indexOf('jtk-overlay')!==-1) {
-        this.labelName = $(`#${this.id}`).prev().text()
+      if ($(`#${this.lineData.id}`).prev().attr('class').indexOf('jtk-overlay') !== -1) {
+        this.labelName = $(`#${this.lineData.id}`).prev().text()
       } else {
-        this.labelName = $(`#${this.id}`).text()
+        this.labelName = $(`#${this.lineData.id}`).text()
       }
     },
     mounted () {
-      
+
     },
     updated () {
     },
@@ -111,7 +105,7 @@
     destroyed () {
     },
     computed: {
-      
+
     },
     components: {}
   }

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss

@@ -14,8 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.form-model-model {
+.form-model-wrapper {
   width: 720px;
+  height: 100vh;
   position: relative;
   .title-box {
     height: 61px;
@@ -72,21 +73,21 @@
   }
   .content-box {
     overflow-y: scroll;
-    height: calc(100vh - 61px);
-    padding-bottom: 60px;
+    height: calc(100vh - 121px);
   }
 }
-.from-model {
+.form-model {
   padding-top: 26px;
+  padding-bottom: 10px;
   >div {
     clear: both;
   }
   .list {
-    position: relative;
+    display: flex;
+    margin-right: 25px;
     margin-bottom: 10px;
     .text-box {
-      width: 112px;
-      float: left;
+      width: 130px;
       text-align: right;
       margin-right: 8px;
       >span {
@@ -97,8 +98,7 @@
       }
     }
     .cont-box {
-      width: 580px;
-      float: left;
+      flex: 1;
       .label-box {
         width: 100%;
       }
@@ -108,6 +108,27 @@
         display: inline-block;
         padding:0 6px 0 20px;
       }
+      .cont-extra {
+        margin-left: 15px;
+        flex: 1;
+      }
+      .el-radio-group {
+        vertical-align: sub;
+        padding-top: 6px;
+        margin-top: 3px;
+      }
+      .user-def-params-model {
+        padding-top: 3px;
+      }
+    }
+    .cont-box + .text-box {
+      margin-left: 30px;
+    }
+    .display-flex {
+      display: flex;
+    }
+    .flex-1 {
+      flex: 1;
     }
     .add {
       line-height: 32px;
@@ -120,4 +141,21 @@
       float: left;
     }
   }
-}
\ No newline at end of file
+  .requiredIcon {
+    color: #ff0000;
+    padding-right: 4px;
+  }
+  .ans-modal-box-max {
+    position: absolute;
+    right: -12px;
+    top: -16px;
+  }
+  .vue-treeselect--disabled {
+    .vue-treeselect__control {
+      background-color: #ecf3f8;
+      .vue-treeselect__single-value {
+        color: #6d859e;
+      }
+    }
+  }
+}

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue

@@ -29,16 +29,16 @@
             <span>{{$t('View log')}}</span>
             <div class="full-screen">
               <a href="javascript:" @click="_downloadLog" data-container="body" data-toggle="tooltip" :title="$t('Download Log')">
-                <em class="ans-icon-download" style="font-size: 20px"></em>
+                <em class="el-icon-download" style="font-size: 20px"></em>
               </a>
               <a href="javascript:" class="refresh-log" :class="loading ? 'active' :''" @click="!loading && _refreshLog()" data-container="body" data-toggle="tooltip" :title="$t('Refresh Log')">
-                <em class="ans-icon-refresh"></em>
+                <em class="el-icon-refresh"></em>
               </a>
               <a href="javascript:" @click="_screenOpen" v-show="!isScreen" data-container="body" data-toggle="tooltip" :title="$t('Enter full screen')">
-                <em class="ans-icon-max"></em>
+                <em class="el-icon-full-screen"></em>
               </a>
               <a href="javascript:" @click="_screenClose" v-show="isScreen" data-container="body" data-toggle="tooltip" :title="$t('Cancel full screen')">
-                <em class="ans-icon-min"></em>
+                <em class="el-icon-minus"></em>
               </a>
             </div>
           </div>
@@ -48,7 +48,7 @@
             </div>
           </div>
           <div class="operation">
-            <x-button type="primary" shape="circle" @click="close"> {{$t('Close')}} </x-button>
+            <el-button type="primary" size="small" round @click="close"> {{$t('Close')}} </el-button>
           </div>
         </div>
       </div>
@@ -67,7 +67,7 @@
    */
   const handerTextareaSize = (isH = 0) => {
     $('body').find('.tooltip.fade.top.in').remove()
-    return $('.textarea-ft').css({ 'height': `${$('.content-log-box').height() - isH}px` })
+    return $('.textarea-ft').css({ height: `${$('.content-log-box').height() - isH}px` })
   }
 
   let content = ''
@@ -89,7 +89,7 @@
     props: {
       item: {
         type: Object,
-        default: {}
+        default: Object
       },
       source: {
         type: String,
@@ -118,8 +118,8 @@
       },
       _ckLog () {
         this.isLog = true
+
         this.store.dispatch('dag/getLog', this._rtParam).then(res => {
-          this.$message.destroy()
           if (!res.data) {
             this.isData = false
             setTimeout(() => {
@@ -138,7 +138,6 @@
             }, 800)
           }
         }).catch(e => {
-          this.$message.destroy()
           this.$message.error(e.msg || '')
         })
       },
@@ -169,7 +168,7 @@
        * Download log
        */
       _downloadLog () {
-        downloadFile('/dolphinscheduler/log/download-log', {
+        downloadFile('/log/download-log', {
           taskInstanceId: this.stateId || this.logId
         })
       },
@@ -180,8 +179,8 @@
         this.loadingIndex = this.loadingIndex - 1
         this._ckLog()
       }, 1000, {
-        'leading': false,
-        'trailing': true
+        leading: false,
+        trailing: true
       }),
       /**
        * down
@@ -190,8 +189,8 @@
         this.loadingIndex = this.loadingIndex + 1
         this._ckLog()
       }, 1000, {
-        'leading': false,
-        'trailing': true
+        leading: false,
+        trailing: true
       }),
       /**
        * Monitor scroll bar
@@ -203,11 +202,7 @@
           // Listen for scrollbar events
           if (($this.scrollTop() + $this.height()) === $this.height()) {
             if (self.loadingIndex > 0) {
-              self.$message.loading({
-                content: `${i18n.$t('Loading Log...')}`,
-                duration: 0,
-                closable: false
-              })
+              self.$message.info(`${i18n.$t('Loading Log...')}`)
               self._onUp()
             }
           }
@@ -215,11 +210,7 @@
           if ($this.get(0).scrollHeight === ($this.height() + $this.scrollTop())) {
             // No data is not requested
             if (self.isData) {
-              self.$message.loading({
-                content: `${i18n.$t('Loading Log...')}`,
-                duration: 0,
-                closable: false
-              })
+              self.$message.info(`${i18n.$t('Loading Log...')}`)
               self._onDown()
             }
           }
@@ -240,11 +231,7 @@
     created () {
       // Source is a task instance
       if (this.source === 'list') {
-        this.$message.loading({
-          content: `${i18n.$t('Loading Log...')}`,
-          duration: 0,
-          closable: false
-        })
+        this.$message.info(`${i18n.$t('Loading Log...')}`)
         this._ckLog()
       }
     },
@@ -301,27 +288,30 @@
           top: 12px;
           a{
             color: #0097e0;
-            font-size: 12px;
             margin-left: 10px;
-            i {
+            em {
+              font-size: 17px;
+              font-weight: 400;
+              text-decoration: none !important;
               vertical-align: middle;
             }
           }
           .clock {
-            >i {
+            >em {
               font-size: 20px;
               vertical-align: middle;
               transform: scale(1);
             }
           }
           .refresh-log {
-            >i {
+            >em {
+              text-decoration: none;
               font-size: 20px;
               vertical-align: middle;
               transform: scale(1);
             }
             &.active {
-              >i {
+              >em {
                 -webkit-transition-property: -webkit-transform;
                 -webkit-transition-duration: 1s;
                 -moz-transition-property: -moz-transform;
@@ -368,5 +358,16 @@
       }
     }
   }
-
+  @-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)}
+  }
+  @-o-keyframes rotateloading{from{-o-transform: rotate(0deg)}
+    to{-o-transform: rotate(359deg)}
+  }
+  @keyframes rotateloading{from{transform: rotate(0deg)}
+    to{transform: rotate(359deg)}
+  }
 </style>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue

@@ -17,28 +17,30 @@
 <template>
   <div class="datasource-model">
     <div class="select-listpp">
-      <x-select v-model="type"
+      <el-select v-model="type"
                 style="width: 160px;"
-                @on-change="_handleTypeChanged"
+                size="small"
+                @change="_handleTypeChanged"
                 :disabled="isDetails">
-        <x-option
+        <el-option
                 v-for="city in typeList"
                 :key="city.code"
                 :value="city.code"
                 :label="city.code">
-        </x-option>
-      </x-select>
-      <x-select :placeholder="$t('Please select the datasource')"
+        </el-option>
+      </el-select>
+      <el-select :placeholder="$t('Please select the datasource')"
                 v-model="datasource"
                 style="width: 288px;"
+                size="small"
                 :disabled="isDetails">
-        <x-option
+        <el-option
                 v-for="city in datasourceList"
                 :key="city.id"
                 :value="city.id"
                 :label="city.code">
-        </x-option>
-      </x-select>
+        </el-option>
+      </el-select>
     </div>
   </div>
 </template>
@@ -101,7 +103,7 @@
       /**
        * Brush type
        */
-      _handleTypeChanged ({ value }) {
+      _handleTypeChanged (value) {
         this.type = value
         this._getDatasourceData().then(res => {
           this.datasource = this.datasourceList.length && this.datasourceList[0].id || ''
@@ -126,7 +128,7 @@
         this.$emit('on-dsData', {
           type: this.type,
           datasource: val
-        });
+        })
       }
     },
     created () {

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue

@@ -17,39 +17,39 @@
 <template>
   <div class="dep-list-model">
     <div v-for="(el,$index) in dependItemList" :key='$index' class="list" @click="itemIndex = $index">
-      <x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.projectId" @on-change="_onChangeProjectId">
-        <x-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label">
-        </x-option>
-      </x-select>
-      <x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.definitionId" @on-change="_onChangeDefinitionId">
-        <x-option v-for="item in el.definitionList" :key="item.value" :value="item.value" :label="item.label">
-        </x-option>
-      </x-select>
-      <x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.depTasks">
-        <x-option v-for="item in el.depTasksList || []" :key="item" :value="item" :label="item">
-        </x-option>
-      </x-select>
-      <x-select style="width: 150px;" v-model="el.cycle" :disabled="isDetails" @on-change="_onChangeCycle">
-        <x-option v-for="item in cycleList" :key="item.value" :value="item.value" :label="item.label">
-        </x-option>
-      </x-select>
-      <x-select style="width: 116px;" v-model="el.dateValue" :disabled="isDetails">
-        <x-option v-for="item in el.dateValueList || []" :key="item.value" :value="item.value" :label="item.label">
-        </x-option>
-      </x-select>
+      <el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.projectId" @change="_onChangeProjectId" size="small">
+        <el-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label">
+        </el-option>
+      </el-select>
+      <el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.definitionId" @change="_onChangeDefinitionId" size="small">
+        <el-option v-for="item in el.definitionList" :key="item.value" :value="item.value" :label="item.label">
+        </el-option>
+      </el-select>
+      <el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.depTasks" size="small">
+        <el-option v-for="item in el.depTasksList || []" :key="item" :value="item" :label="item">
+        </el-option>
+      </el-select>
+      <el-select style="width: 150px;" v-model="el.cycle" :disabled="isDetails" @change="_onChangeCycle">
+        <el-option v-for="item in cycleList" :key="item.value" :value="item.value" :label="item.label">
+        </el-option>
+      </el-select>
+      <el-select style="width: 116px;" v-model="el.dateValue" :disabled="isDetails">
+        <el-option v-for="item in el.dateValueList || []" :key="item.value" :value="item.value" :label="item.label">
+        </el-option>
+      </el-select>
       <template v-if="isInstance">
         <span class="instance-state">
-          <em class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
-          <em class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
-          <em class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
+          <em class="iconfont el-icon-success" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
+          <em class="iconfont el-icon-timer" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
+          <em class="iconfont el-icon-error" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
         </span>
       </template>
       <span class="operation">
         <a href="javascript:" class="delete" @click="!isDetails && _remove($index)">
-          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
+          <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
         </a>
         <a href="javascript:" class="add" @click="!isDetails && _add()" v-if="$index === (dependItemList.length - 1)">
-          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
+          <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
@@ -74,7 +74,7 @@
     props: {
       dependItemList: Array,
       index: Number,
-      dependTaskList:Array
+      dependTaskList: Array
     },
     model: {
       prop: 'dependItemList',
@@ -109,7 +109,6 @@
        * remove task
        */
       _remove (i) {
-        this.dependTaskList[this.index].dependItemList.splice(i,1)
         this._removeTip()
         if (!this.dependItemList.length || this.dependItemList.length === 0) {
           this.$emit('on-delete-all', {
@@ -174,20 +173,20 @@
       /**
        * change process get dependItemList
        */
-      _onChangeProjectId ({ value }) {
+      _onChangeProjectId (value) {
         this._getProcessByProjectId(value).then(definitionList => {
-          /*this.$set(this.dependItemList, this.itemIndex, this._dlOldParams(value, definitionList, item))*/
+          /* this.$set(this.dependItemList, this.itemIndex, this._dlOldParams(value, definitionList, item)) */
           let definitionId = definitionList[0].value
           this._getDependItemList(definitionId).then(depTasksList => {
             let item = this.dependItemList[this.itemIndex]
             // init set depTasks All
             item.depTasks = 'ALL'
             // set dependItemList item data
-            this.$set(this.dependItemList, this.itemIndex, this._cpOldParams(value,definitionId, definitionList,depTasksList, item))
+            this.$set(this.dependItemList, this.itemIndex, this._cpOldParams(value, definitionId, definitionList, depTasksList, item))
           })
         })
       },
-      _onChangeDefinitionId ({ value }) {
+      _onChangeDefinitionId (value) {
         // get depItem list data
         this._getDependItemList(value).then(depTasksList => {
           let item = this.dependItemList[this.itemIndex]
@@ -197,7 +196,7 @@
           this.$set(this.dependItemList, this.itemIndex, this._rtOldParams(value, item.definitionList, depTasksList, item))
         })
       },
-      _onChangeCycle ({ value }) {
+      _onChangeCycle (value) {
         let list = _.cloneDeep(dateValueList[value])
         this.$set(this.dependItemList[this.itemIndex], 'dateValue', list[0].value)
         this.$set(this.dependItemList[this.itemIndex], 'dateValueList', list)
@@ -212,7 +211,7 @@
           depTasksList: depTasksList,
           cycle: 'day',
           dateValue: 'today',
-          dateValueList: _.cloneDeep(dateValueList['day']),
+          dateValueList: _.cloneDeep(dateValueList.day),
           state: ''
         }
       },
@@ -231,7 +230,7 @@
         }
       },
 
-      _cpOldParams (value,definitionId, definitionList,depTasksList, item) {
+      _cpOldParams (value, definitionId, definitionList, depTasksList, item) {
         return {
           projectId: value,
           definitionList: definitionList,

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue

@@ -20,50 +20,51 @@
          v-for="(item,$index) in httpParamsList"
          :key="item.id"
          @click="_getIndex($index)">
-      <x-input
+      <el-input
         :disabled="isDetails"
         type="text"
+        size="small"
         v-model="httpParamsList[$index].prop"
         :placeholder="$t('prop(required)')"
-        @on-blur="_verifProp()"
+        @blur="_verifProp()"
         :style="inputStyle">
-      </x-input>
-      <x-select
+      </el-input>
+      <el-select
         @change="_handlePositionChanged"
         v-model="httpParamsList[$index].httpParametersType"
         :placeholder="$t('Http Parameters Position')"
         :disabled="isDetails"
         :style="inputStyle"
       >
-        <x-option
+        <el-option
           v-for="position in positionList"
           :key="position.code"
           :value="position.id"
           :label="position.code">
-        </x-option>
-      </x-select>
-      <x-input
+        </el-option>
+      </el-select>
+      <el-input
         :disabled="isDetails"
         type="text"
         v-model="httpParamsList[$index].value"
         :placeholder="$t('value(required)')"
-        @on-blur="_handleValue()"
+        @blur="_handleValue()"
         :style="inputStyle">
-      </x-input>
+      </el-input>
       <span class="lt-add">
         <a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
-          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
+          <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
         </a>
       </span>
       <span class="add" v-if="$index === (httpParamsList.length - 1)">
         <a href="javascript:" @click="!isDetails && _addUdp()" >
-          <em class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+          <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
     <span class="add-dp" v-if="!httpParamsList.length">
       <a href="javascript:" @click="!isDetails && _addUdp()" >
-        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+        <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
       </a>
     </span>
   </div>
@@ -82,7 +83,7 @@
         // Current execution index
         httpParamsIndex: null,
         // 参数位置的下拉框
-        positionList:positionList
+        positionList: positionList
       }
     },
     mixins: [disabledState],
@@ -141,7 +142,7 @@
           if (!v.prop) {
             flag = false
           }
-          if(v.value === ''){
+          if (v.value === '') {
             this.$message.warning(`${i18n.$t('value is empty')}`)
             return false
           }
@@ -172,7 +173,7 @@
           }
         })
         if (!flag) {
-            this.$message.warning(`${i18n.$t('value is empty')}`)
+          this.$message.warning(`${i18n.$t('value is empty')}`)
           return false
         }
         this.$emit('on-http-params', _.cloneDeep(this.httpParamsList))
@@ -190,7 +191,7 @@
     },
     computed: {
       inputStyle () {
-        return "width:30%"
+        return 'width:30%'
       }
     },
     mounted () {
@@ -201,35 +202,41 @@
 
 <style lang="scss" rel="stylesheet/scss">
   .user-def-params-model {
+    .el-input__inner {
+      height: 32px;
+      line-height: 32px;
+    }
     .select-listpp {
       margin-bottom: 6px;
       .lt-add {
         padding-left: 4px;
+        line-height: 32px;
         a {
-          .iconfont {
-            font-size: 18px;
+          .iconfont, [class^="el-icon"] {
+            font-size: 17px;
             vertical-align: middle;
-            margin-bottom: -2px;
             display: inline-block;
+            margin-top: 0;
           }
         }
       }
     }
     .add {
+      line-height: 32px;
       a {
         color: #000;
-        .iconfont {
-          font-size: 16px;
+        .iconfont, [class^="el-icon"] {
+          font-size: 18px;
           vertical-align: middle;
           display: inline-block;
-          margin-top: -5px;
+          margin-top: 0px;
         }
       }
     }
-    .add-dp{
+    .add-dp {
       a {
         color: #0097e0;
-        .iconfont {
+        .iconfont, [class^="el-icon"] {
           font-size: 18px;
           vertical-align: middle;
           display: inline-block;
@@ -239,4 +246,3 @@
     }
   }
 </style>
-

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue

+/*
+ * 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="script-model">
+    <m-list-box>
+      <div slot="content">
+        <div class="from-mirror1">
+          <textarea
+            id="code-shell-mirror1"
+            name="code-shell-mirror1"
+            style="opacity: 0">
+          </textarea>
+        </div>
+      </div>
+    </m-list-box>
+  </div>
+</template>
+<script>
+  import _ from 'lodash'
+  import mListBox from './listBox'
+  import disabledState from '@/module/mixin/disabledState'
+  import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
+
+  let editor
+
+  export default {
+    name: 'shell',
+    data () {
+      return {
+        // script
+        rawScript: ''
+      }
+    },
+    mixins: [disabledState],
+    props: {
+      jsonItem: String
+    },
+    methods: {
+      /**
+       * Processing code highlighting
+       */
+      _handlerEditor () {
+        // editor
+        let self = this
+        editor = codemirror('code-shell-mirror1', {
+          mode: 'shell',
+          readOnly: this.isDetails
+        })
+        editor.on('change', function () {
+          self.$emit('getJsonBoxValue', editor.getValue())
+        })
+
+        this.keypress = () => {
+          if (!editor.getOption('readOnly')) {
+            editor.showHint({
+              completeSingle: false
+            })
+          }
+        }
+
+        // Monitor keyboard
+        editor.on('keypress', this.keypress)
+
+        editor.setValue(this.rawScript)
+
+        return editor
+      }
+    },
+    watch: {},
+    created () {
+      let o = this.jsonItem
+
+      // Non-null objects represent backfill
+      if (!_.isEmpty(o)) {
+        this.rawScript = o
+      }
+    },
+    mounted () {
+      setTimeout(() => {
+        this._handlerEditor()
+      }, 200)
+    },
+    destroyed () {
+      if (editor) {
+        editor.toTextArea() // Uninstall
+        editor.off($('.code-shell-mirror1'), 'keypress', this.keypress)
+      }
+    },
+    components: { mListBox }
+  }
+</script>
+<style lang="scss" rel="stylesheet/scss" scope>
+  .script-model {
+    width:100%;
+  }
+  .from-mirror1 {
+    .CodeMirror {
+      min-height: 600px;
+      max-height: 700px;
+    }
+  }
+</style>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue

+/*
+ * 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="clearfix list">
+    <div class="text-box">
+      <span><slot name="text"></slot></span>
+    </div>
+    <div class="cont-box">
+      <div class="label-box">
+        <slot name="content"></slot>
+      </div>
+    </div>
+    <div class="text-box">
+      <span><slot name="text-2"></slot></span>
+    </div>
+    <div class="cont-box">
+      <div class="label-box">
+        <slot name="content-2"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'list-4-box'
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .cont-box {
+    .label-box {
+      .ans-radio-group {
+        margin-top: 7px;
+      }
+    }
+  }
+  .v-checkbox-wrapper {
+    &.v-checkbox-wrapper-disabled {
+      color: #999 ;
+      .v-checkbox {
+        .v-checkbox-inner{
+          border-color:#dddee1;
+          background: #f7f7f7;
+          color: #bbbec4 ;
+          &:after{
+            border: 2px solid #ddd;
+            border-top: 0;
+            border-left: 0;
+          }
+        }
+      }
+    }
+  }
+</style>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue

@@ -40,7 +40,6 @@
       }
     }
   }
-
   .v-checkbox-wrapper {
     &.v-checkbox-wrapper-disabled {
       color: #999 ;
@@ -58,5 +57,4 @@
       }
     }
   }
-
 </style>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue

@@ -20,64 +20,68 @@
          v-for="(item,$index) in localParamsList"
          :key="item.id"
          @click="_getIndex($index)">
-      <x-input
+      <el-input
               :disabled="isDetails"
               type="text"
+              size="small"
               v-model="localParamsList[$index].prop"
               :placeholder="$t('prop(required)')"
               maxlength="256"
-              @on-blur="_verifProp()"
+              @blur="_verifProp()"
               :style="inputStyle">
-      </x-input>
+      </el-input>
       <template v-if="hide">
-        <x-select
+        <el-select
                 style="width: 80px;"
+                size="small"
                 @change="_handleDirectChanged"
                 v-model="localParamsList[$index].direct"
                 :disabled="isDetails">
-          <x-option
+          <el-option
                   v-for="city in directList"
                   :key="city.code"
                   :value="city.code"
                   :label="city.code">
-          </x-option>
-        </x-select>
-        <x-select
+          </el-option>
+        </el-select>
+        <el-select
                 style="width: 118px;"
+                size="small"
                 @change="_handleTypeChanged"
                 v-model="localParamsList[$index].type"
                 :disabled="isDetails">
-          <x-option
+          <el-option
                   v-for="city in typeList"
                   :key="city.code"
                   :value="city.code"
                   :label="city.code">
-          </x-option>
-        </x-select>
+          </el-option>
+        </el-select>
       </template>
-      <x-input
+      <el-input
               :disabled="isDetails"
               type="text"
+              size="small"
               v-model="localParamsList[$index].value"
               :placeholder="$t('value(optional)')"
               maxlength="256"
-              @on-blur="_handleValue()"
+              @blur="_handleValue()"
               :style="inputStyle">
-      </x-input>
+      </el-input>
       <span class="lt-add">
         <a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
-          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
+          <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
         </a>
       </span>
       <span class="add" v-if="$index === (localParamsList.length - 1)">
         <a href="javascript:" @click="!isDetails && _addUdp()" >
-          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+          <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
     <span class="add-dp" v-if="!localParamsList.length">
       <a href="javascript:" @click="!isDetails && _addUdp()" >
-        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+        <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
       </a>
     </span>
   </div>
@@ -193,7 +197,7 @@
     },
     computed: {
       inputStyle () {
-        return `width:${this.hide ? 160 : 262}px`
+        return `width:${this.hide ? 160 : 252}px`
       }
     },
     mounted () {
@@ -208,31 +212,33 @@
       margin-bottom: 6px;
       .lt-add {
         padding-left: 4px;
+        line-height: 32px;
         a {
-          .iconfont {
-            font-size: 18px;
+          .iconfont, [class^="el-icon"] {
+            font-size: 17px;
             vertical-align: middle;
-            margin-bottom: -2px;
             display: inline-block;
+            margin-top: 0;
           }
         }
       }
     }
     .add {
+      line-height: 32px;
       a {
         color: #000;
-        .iconfont {
-          font-size: 16px;
+        .iconfont, [class^="el-icon"] {
+          font-size: 18px;
           vertical-align: middle;
           display: inline-block;
-          margin-top: -5px;
+          margin-top: 0;
         }
       }
     }
-    .add-dp{
+    .add-dp {
       a {
         color: #0097e0;
-        .iconfont {
+        .iconfont, [class^="el-icon"] {
           font-size: 18px;
           vertical-align: middle;
           display: inline-block;

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue

@@ -17,27 +17,27 @@
 <template>
   <div class="dep-list-model">
     <div v-for="(el,$index) in dependItemList" :key='$index' class="list" @click="itemIndex = $index">
-      <x-select style="width: 150px;" v-model="el.depTasks" :disabled="isDetails">
-        <x-option v-for="item in preNode" :key="item.value" :value="item.value" :label="item.label">
-        </x-option>
-      </x-select>
-      <x-select style="width: 116px;" v-model="el.status" :disabled="isDetails">
-        <x-option v-for="item in nodeStatusList || []" :key="item.value" :value="item.value" :label="item.label">
-        </x-option>
-      </x-select>
+      <el-select style="width: 150px;" size="small" v-model="el.depTasks" :disabled="isDetails">
+        <el-option v-for="item in preNode" :key="item.value" :value="item.value" :label="item.label">
+        </el-option>
+      </el-select>
+      <el-select style="width: 116px;" size="small" v-model="el.status" :disabled="isDetails">
+        <el-option v-for="item in nodeStatusList || []" :key="item.value" :value="item.value" :label="item.label">
+        </el-option>
+      </el-select>
       <template v-if="isInstance">
         <span class="instance-state">
-          <em class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
-          <em class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'RUNNING_EXECUTION'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
-          <em class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILURE'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
+          <em class="iconfont el-icon-success" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
+          <em class="iconfont el-icon-timer" :class="'icon-' + el.state" v-if="el.state === 'RUNNING_EXECUTION'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
+          <em class="iconfont el-icon-error" :class="'icon-' + el.state" v-if="el.state === 'FAILURE'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
         </span>
       </template>
       <span class="operation">
         <a href="javascript:" class="delete" @click="!isDetails && _remove($index)">
-          <em class="iconfont ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
+          <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 && _add()" v-if="$index === (dependItemList.length - 1)">
-          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
+          <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
@@ -45,7 +45,7 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { cycleList, dateValueList, nodeStatusList } from './commcon'
+  import { cycleList, nodeStatusList } from './commcon'
   import disabledState from '@/module/mixin/disabledState'
   export default {
     name: 'node-status',
@@ -64,7 +64,7 @@
     props: {
       dependItemList: Array,
       index: Number,
-      dependTaskList:Array,
+      dependTaskList: Array,
       preNode: Array
     },
     model: {
@@ -78,7 +78,7 @@
       _add () {
         // btn loading
         this.isLoading = true
-            this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams()))
+        this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams()))
 
         // remove tooltip
         this._removeTip()
@@ -87,7 +87,6 @@
        * remove task
        */
       _remove (i) {
-        this.dependTaskList[this.index].dependItemList.splice(i,1)
         this._removeTip()
         if (!this.dependItemList.length || this.dependItemList.length === 0) {
           this.$emit('on-delete-all', {
@@ -137,7 +136,7 @@
           status: ''
         }
       },
-      _rtOldParams (value,depTasksList, item) {
+      _rtOldParams (value, depTasksList, item) {
         return {
           depTasks: '',
           status: ''
@@ -159,7 +158,6 @@
       this.isInstance = this.router.history.current.name === 'projects-instance-details'
       // get processlist
       this._getProjectList().then(() => {
-        let projectId = this.projectList[0].value
         if (!this.dependItemList.length) {
           this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams()))
         } else {

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue

@@ -16,19 +16,20 @@
  */
 <template>
   <div class="resource-list-model">
-    <x-select multiple
+    <el-select multiple
               v-model="value"
               filterable
+              size="small"
               :disabled="isDetails"
               :placeholder="$t('Please select resources')"
               style="width: 100%;">
-      <x-option
+      <el-option
               v-for="city in resList"
               :key="city.code"
               :value="city.code"
               :label="city.code">
-      </x-option>
-    </x-select>
+      </el-option>
+    </el-select>
   </div>
 </template>
 <script>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue

@@ -27,14 +27,10 @@
         </div>
       </div>
     </m-list-box>
-    <a class="ans-modal-box-close">
-      <em class="ans-icon-min" @click="closeModal"></em>
-    </a>
   </div>
 </template>
 <script>
   import _ from 'lodash'
-  import i18n from '@/module/i18n'
   import mListBox from './listBox'
   import disabledState from '@/module/mixin/disabledState'
   import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
@@ -46,7 +42,7 @@
     data () {
       return {
         // script
-        rawScript: '',
+        rawScript: ''
       }
     },
     mixins: [disabledState],
@@ -59,13 +55,13 @@
        */
       _handlerEditor () {
         // editor
-        let self =this
+        let self = this
         editor = codemirror('code-shell-mirror1', {
           mode: 'shell',
           readOnly: this.isDetails
         })
-        editor.on("change",function(){
-          self.$emit('getSriptBoxValue',editor.getValue())
+        editor.on('change', function () {
+          self.$emit('getSriptBoxValue', editor.getValue())
         })
 
         this.keypress = () => {
@@ -82,10 +78,6 @@
         editor.setValue(this.rawScript)
 
         return editor
-      },
-      closeModal() {
-        let self = this
-        self.$emit('closeAble')
       }
     },
     watch: {},
@@ -117,8 +109,7 @@
   }
   .from-mirror1 {
     .CodeMirror {
-      min-height: 600px;
-      max-height: 700px;
+      height: calc(70vh - 90px);
     }
   }
 </style>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue

@@ -16,22 +16,22 @@
  */
 <template>
   <div class="sql-type-model">
-    <x-select
+    <el-select
             v-model="sqlTypeId"
             :disabled="isDetails"
-            @on-change="_handleSqlTypeChanged"
-            style="width: 120px;">
-      <x-option
+            @change="_handleSqlTypeChanged"
+            style="width: 120px;"
+            size="small">
+      <el-option
               v-for="city in sqlTypeList"
               :key="city.id"
               :value="city.id"
               :label="city.code">
-      </x-option>
-    </x-select>
+      </el-option>
+    </el-select>
   </div>
 </template>
 <script>
-  import _ from 'lodash'
   import { sqlTypeList } from './commcon'
   import disabledState from '@/module/mixin/disabledState'
   export default {
@@ -53,14 +53,14 @@
        * return sqlType
        */
       _handleSqlTypeChanged (val) {
-        this.$emit('on-sqlType', val.value)
+        this.$emit('on-sqlType', val)
       }
     },
     watch: {
     },
     created () {
       this.$nextTick(() => {
-        if (this.sqlType != 0) {
+        if (this.sqlType !== 0) {
           this.sqlTypeId = this.sqlType
         } else {
           this.sqlTypeId = this.sqlTypeList[0].id

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue

@@ -20,30 +20,31 @@
          v-for="(item,$index) in localStatementList"
          :key="item.id"
          @click="_getIndex($index)">
-      <x-input
+      <el-input
         :disabled="isDetails"
         type="textarea"
+        size="small"
         resize="none"
         :autosize="{minRows:1}"
         :placeholder="$t('Please enter a non-query SQL statement')"
         v-model="localStatementList[$index]"
-        @on-blur="_verifProp()"
+        @blur="_verifProp()"
         style="width: 525px;">
-      </x-input>
+      </el-input>
       <span class="lt-add">
         <a href="javascript:" style="color:red;" @click="!isDetails && _removeStatement($index)" >
-          <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
+          <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
         </a>
       </span>
       <span class="add" v-if="$index === (localStatementList.length - 1)">
         <a href="javascript:" @click="!isDetails && _addStatement()" >
-          <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+          <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
     <span class="add" v-if="!localStatementList.length">
       <a href="javascript:" @click="!isDetails && _addStatement()" >
-        <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+        <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
       </a>
     </span>
   </div>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue

@@ -16,17 +16,18 @@
  */
 <template>
   <div class="udfs-model">
-    <x-select multiple
+    <el-select multiple
               v-model="udfsStr"
               :disabled="isDetails"
+              size="small"
               style="width: 100%;">
-      <x-option
+      <el-option
               v-for="city in udfsList"
               :key="city.id"
               :value="city.id"
-              :label="city.code"> 
-      </x-option>
-    </x-select>
+              :label="city.code">
+      </el-option>
+    </el-select>
   </div>
 </template>
 <script>
@@ -92,7 +93,7 @@
       },
       type (a) {
         // The props parameter needs to be changed due to the scene.
-        this.udfs = ''
+        this.$emit('on-udfsData', '')
         if (a === 'HIVE') {
           this._getUdfList()
         } else {

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue

@@ -23,8 +23,8 @@
           <a href="javascript:"
              @click="!isDetails && _addDep()"
              class="add-dep">
-            <em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
-            <em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
+            <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-box">
@@ -40,7 +40,7 @@
                   @click="!isDetails && _setRelation($index)">
               {{el.relation === 'AND' ? $t('and') : $t('or')}}
             </span>
-            <em class="ans-icon-trash dep-delete"
+            <em class="el-icon-delete dep-delete"
                data-toggle="tooltip"
                data-container="body"
                :class="_isDetails"
@@ -99,9 +99,10 @@
         $('body').find('.tooltip.fade.top.in').remove()
       },
       _onDeleteAll (i) {
-        this.dependTaskList.map((item,i)=>{
-          if(item.dependItemList.length === 0){
-            this.dependTaskList.splice(i,1)
+        this.dependTaskList[this.index].dependItemList.splice(i, 1)
+        this.dependTaskList.map((item, i) => {
+          if (item.dependItemList.length === 0) {
+            this.dependTaskList.splice(i, 1)
           }
         })
         // this._deleteDep(i)
@@ -109,7 +110,7 @@
       _setGlobalRelation () {
         this.relation = this.relation === 'AND' ? 'OR' : 'AND'
       },
-      getDependTaskList(i){
+      getDependTaskList (i) {
         // console.log('getDependTaskList',i)
       },
       _setRelation (i) {
@@ -142,20 +143,17 @@
     },
     created () {
       let o = this.backfillItem
-      let dependentResult = $(`#${o.id}`).data('dependent-result') || {}
-      
       // Does not represent an empty object backfill
       if (!_.isEmpty(o)) {
         this.relation = _.cloneDeep(o.dependence.relation) || 'AND'
         this.dependTaskList = _.cloneDeep(o.dependence.dependTaskList) || []
-        let defaultState = this.isDetails ? 'WAITING' : ''
         // Process instance return status display matches by key
         _.map(this.dependTaskList, v => _.map(v.dependItemList, v1 => {
-          $(`#${o.id}`).siblings().each(function(){
-            if(v1.depTasks == $(this).text()) {
+          $(`#${o.id}`).siblings().each(function () {
+            if (v1.depTasks === $(this).text()) {
               v1.state = $(this).attr('data-dependent-depstate')
             }
-          });
+          })
         }))
       }
     },

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue

@@ -21,7 +21,7 @@
       <div slot="content">
         <label class="label-box">
           <div style="padding-top: 5px;">
-            <x-switch v-model="enable" @on-click="_onSwitch" :disabled="isDetails"></x-switch>
+            <el-switch v-model="enable" @change="_onSwitch" :disabled="isDetails"></el-switch>
           </div>
         </label>
       </div>
@@ -31,10 +31,10 @@
         <div slot="text">{{$t('Datasource')}}</div>
         <div slot="content">
           <m-datasource
-                  ref="refDs"
-                  @on-dsData="_onDsData"
-                  :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
-                  :data="{ type:dsType,datasource:datasource }">
+            ref="refDs"
+            @on-dsData="_onDsData"
+            :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
+            :data="{ type:dsType,datasource:datasource }">
           </m-datasource>
         </div>
       </m-list-box>
@@ -48,7 +48,7 @@
               style="opacity: 0;">
             </textarea>
             <a class="ans-modal-box-max">
-              <em class="ans-icon-max" @click="setEditorVal"></em>
+              <em class="el-icon-full-screen" @click="setEditorVal"></em>
             </a>
           </div>
         </div>
@@ -57,22 +57,22 @@
         <div slot="text">{{$t('TargetDataBase')}}</div>
         <div slot="content">
           <m-datasource
-                  ref="refDt"
-                  @on-dsData="_onDtData"
-                  :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
-                  :data="{ type:dtType,datasource:datatarget }">
+            ref="refDt"
+            @on-dsData="_onDtData"
+            :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
+            :data="{ type:dtType,datasource:datatarget }">
           </m-datasource>
         </div>
       </m-list-box>
       <m-list-box>
         <div slot="text">{{$t('TargetTable')}}</div>
         <div slot="content">
-          <x-input
+          <el-input
             type="input"
+            size="small"
             v-model="targetTable"
-            :placeholder="$t('Please enter the table of target')"
-            autocomplete="off">
-          </x-input>
+            :placeholder="$t('Please enter the table of target')">
+          </el-input>
         </div>
       </m-list-box>
       <m-list-box>
@@ -126,9 +126,6 @@
               name="code-json-mirror"
               style="opacity: 0;">
             </textarea>
-            <a class="ans-modal-box-max">
-              <em class="ans-icon-max" @click="setJsonEditorVal"></em>
-            </a>
           </div>
         </div>
       </m-list-box>
@@ -144,6 +141,27 @@
         </div>
       </m-list-box>
     </div>
+    <div class="clearfix list">
+      <div class="text-box">
+        <span>{{$t('Running Memory')}}</span>
+      </div>
+      <div class="cont-box">
+        <span >{{$t('Min Memory')}}</span>
+        <m-select-input v-model="xms" :list="[1,2,3,4]">
+        </m-select-input>
+        <span>&nbsp;&nbsp;&nbsp;G &nbsp;&nbsp;</span>
+        <span >{{$t('Max Memory')}}</span>
+        <m-select-input v-model="xmx" :list="[1,2,3,4]">
+        </m-select-input>
+        <span>&nbsp;&nbsp;&nbsp;G</span>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="scriptBoxDialog"
+      append-to-body="true"
+      width="80%">
+      <m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -196,6 +214,12 @@
         // Custom parameter
         localParams: [],
         customConfig: 0,
+        // jvm memory xms
+        xms: 1,
+        // jvm memory xms
+        xmx: 1,
+        scriptBoxDialog: false,
+        item: ''
       }
     },
     mixins: [disabledState],
@@ -204,64 +228,15 @@
       createNodeId: Number
     },
     methods: {
-      setEditorVal() {
-        let self = this
-        let modal = self.$modal.dialog({
-          className: 'scriptModal',
-          closable: false,
-          showMask: true,
-          maskClosable: true,
-          onClose: function() {
-
-          },
-          render (h) {
-            return h(mScriptBox, {
-              on: {
-                getSriptBoxValue (val) {
-                  editor.setValue(val)
-                },
-                closeAble () {
-                  // this.$modal.destroy()
-                  modal.remove()
-                }
-              },
-              props: {
-                item: editor.getValue()
-              }
-            })
-          }
-        })
+      setEditorVal () {
+        this.item = editor.getValue()
+        this.scriptBoxDialog = true
       },
-      setJsonEditorVal() {
-        let self = this
-        let modal = self.$modal.dialog({
-          className: 'scriptModal',
-          closable: false,
-          showMask: true,
-          maskClosable: true,
-          onClose: function() {
-
-          },
-          render (h) {
-            return h(mScriptBox, {
-              on: {
-                getSriptBoxValue (val) {
-                  jsonEditor.setValue(val)
-                },
-                closeAble () {
-                  // this.$modal.destroy()
-                  modal.remove()
-                }
-              },
-              props: {
-                item: jsonEditor.getValue()
-              }
-            })
-          }
-        })
+      getSriptBoxValue (val) {
+        editor.setValue(val)
       },
       _onSwitch (is) {
-        if(is) {
+        if (is) {
           this.customConfig = 1
           setTimeout(() => {
             this._handlerJsonEditor()
@@ -309,7 +284,7 @@
        * verification
        */
       _verification () {
-        if(this.customConfig) {
+        if (this.customConfig) {
           if (!jsonEditor.getValue()) {
             this.$message.warning(`${i18n.$t('Please enter a JSON Statement(required)')}`)
             return false
@@ -324,7 +299,9 @@
           this.$emit('on-params', {
             customConfig: this.customConfig,
             json: jsonEditor.getValue(),
-            localParams: this.localParams
+            localParams: this.localParams,
+            xms: +this.xms,
+            xmx: +this.xmx
           })
           return true
         } else {
@@ -370,7 +347,9 @@
             jobSpeedByte: this.jobSpeedByte * 1024,
             jobSpeedRecord: this.jobSpeedRecord,
             preStatements: this.preStatements,
-            postStatements: this.postStatements
+            postStatements: this.postStatements,
+            xms: +this.xms,
+            xmx: +this.xmx
           })
           return true
         }
@@ -440,23 +419,25 @@
           dataSource: this.rtDatasource,
           dtType: this.dtType,
           dataTarget: this.rtDatatarget,
-          sql: editor?editor.getValue():'',
+          sql: editor ? editor.getValue() : '',
           targetTable: this.targetTable,
           jobSpeedByte: this.jobSpeedByte * 1024,
           jobSpeedRecord: this.jobSpeedRecord,
           preStatements: this.preStatements,
-          postStatements: this.postStatements
-        });
+          postStatements: this.postStatements,
+          xms: +this.xms,
+          xmx: +this.xmx
+        })
       },
       _destroyEditor () {
-         if (editor) {
+        if (editor) {
           editor.toTextArea() // Uninstall
           editor.off($('.code-sql-mirror'), 'keypress', this.keypress)
           editor.off($('.code-sql-mirror'), 'changes', this.changes)
         }
       },
       _destroyJsonEditor () {
-         if (jsonEditor) {
+        if (jsonEditor) {
           jsonEditor.toTextArea() // Uninstall
           jsonEditor.off($('.code-json-mirror'), 'keypress', this.keypress)
           jsonEditor.off($('.code-json-mirror'), 'changes', this.changes)
@@ -468,8 +449,11 @@
 
       // Non-null objects represent backfill
       if (!_.isEmpty(o)) {
+        // set jvm memory
+        this.xms = o.params.xms || 1
+        this.xmx = o.params.xmx || 1
         // backfill
-        if(o.params.customConfig == 0) {
+        if (o.params.customConfig === 0) {
           this.customConfig = 0
           this.enable = false
           this.dsType = o.params.dsType || ''
@@ -491,7 +475,7 @@
       }
     },
     mounted () {
-      if(this.customConfig) {
+      if (this.customConfig) {
         setTimeout(() => {
           this._handlerJsonEditor()
         }, 200)
@@ -515,9 +499,9 @@
       }
     },
     watch: {
-      //Watch the cacheParams
+      // Watch the cacheParams
       cacheParams (val) {
-        this._cacheParams();
+        this._cacheParams()
       }
     },
     computed: {
@@ -535,13 +519,6 @@
         }
       }
     },
-    components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput }
+    components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput, mScriptBox }
   }
 </script>
-<style lang="scss" rel="stylesheet/scss" scope>
-  .ans-modal-box-max {
-    position: absolute;
-    right: -12px;
-    top: -16px;
-  }
-</style>
\ No newline at end of file

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue

@@ -23,8 +23,8 @@
           <a href="javascript:"
              @click="!isDetails && _addDep()"
              class="add-dep">
-            <em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
-            <em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
+            <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-box">
@@ -40,7 +40,7 @@
                   @click="!isDetails && _setRelation($index)">
               {{el.relation === 'AND' ? $t('and') : $t('or')}}
             </span>
-            <em class="ans-icon-trash dep-delete"
+            <em class="el-icon-delete dep-delete"
                data-toggle="tooltip"
                data-container="body"
                :class="_isDetails"
@@ -97,9 +97,10 @@
         $('body').find('.tooltip.fade.top.in').remove()
       },
       _onDeleteAll (i) {
-        this.dependTaskList.map((item,i)=>{
-          if(item.dependItemList.length === 0){
-            this.dependTaskList.splice(i,1)
+        this.dependTaskList[this.index].dependItemList.splice(i, 1)
+        this.dependTaskList.map((item, i) => {
+          if (item.dependItemList.length === 0) {
+            this.dependTaskList.splice(i, 1)
           }
         })
         // this._deleteDep(i)
@@ -107,7 +108,7 @@
       _setGlobalRelation () {
         this.relation = this.relation === 'AND' ? 'OR' : 'AND'
       },
-      getDependTaskList(i){
+      getDependTaskList (i) {
         // console.log('getDependTaskList',i)
       },
       _setRelation (i) {
@@ -147,7 +148,9 @@
         this.dependTaskList = _.cloneDeep(o.dependence.dependTaskList) || []
         let defaultState = this.isDetails ? 'WAITING' : ''
         // Process instance return status display matches by key
-        _.map(this.dependTaskList, v => _.map(v.dependItemList, v1 => v1.state = dependentResult[`${v1.definitionId}-${v1.depTasks}-${v1.cycle}-${v1.dateValue}`] || defaultState))
+        _.map(this.dependTaskList, v => _.map(v.dependItemList, v1 => {
+          v1.state = dependentResult[`${v1.definitionId}-${v1.depTasks}-${v1.cycle}-${v1.dateValue}`] || defaultState
+        }))
       }
     },
     mounted () {

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue

@@ -22,21 +22,22 @@
       </div>
       <div class="cont-box">
         <div class="label-box">
-          <x-select
+          <el-select
               ref="preTasksSelector"
               style="width: 100%;"
               filterable
               multiple
+              size="small"
               v-model="preTasks"
               :disabled="isDetails"
               :id="preTasksSelectorId">
-            <x-option
+            <el-option
                 v-for="task in preTaskList"
                 :key="task.id"
                 :value="task.id"
                 :label="task.name">
-            </x-option>
-          </x-select>
+            </el-option>
+          </el-select>
         </div>
       </div>
     </div>
@@ -52,15 +53,15 @@
     },
     data () {
       return {
-        preTasksSelectorId: '_preTasksSelectorId',  // Refresh target vue-component by changing id
+        preTasksSelectorId: '_preTasksSelectorId', // Refresh target vue-component by changing id
         preTasks: [],
-        preTasksOld: [],
+        preTasksOld: []
       }
     },
     mounted () {
-      this.preTasks = this.backfillItem['preTasks'] || this.preTasks
+      this.preTasks = this.backfillItem.preTasks || this.preTasks
       this.preTasksOld = this.preTasks
-    
+
       // Refresh target vue-component by changing id
       this.$nextTick(() => {
         this.preTasksSelectorId = 'preTasksSelectorId'
@@ -68,7 +69,7 @@
     },
     computed: {
       preTaskList: function () {
-        let currentTaskId = this.backfillItem['id'] || this.id
+        let currentTaskId = this.backfillItem.id || this.id
         let cacheTasks = Object.assign({}, this.store.state.dag.tasks)
         let keys = Object.keys(cacheTasks)
         for (let i = 0; i < keys.length; i++) {
@@ -91,7 +92,7 @@
       // preTaskIds used to delete connection
       preTasksToDelete: function () {
         return this.preTasksOld.filter(taskId => this.preTasks.indexOf(taskId) === -1)
-      },
+      }
     },
     methods: {
       // Pass data to parent-level to process dag
@@ -99,7 +100,7 @@
         this.$emit('on-pre-tasks', {
           preTasks: this.preTasks,
           preTasksToAdd: this.preTasksToAdd,
-          preTasksToDelete: this.preTasksToDelete,
+          preTasksToDelete: this.preTasksToDelete
         })
         return true
       }

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue

@@ -37,7 +37,7 @@
       }
     },
     watch: {
-      '$route': {
+      $route: {
         deep: true,
         handler () {
           this.isActive = false

dolphinscheduler-ui/src/js/conf/home/pages/monitor/index.vue

@@ -25,9 +25,9 @@
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   export default {
     name: 'monitor-index',
-    mounted() {
-      this.$modal.destroy()
+    mounted () {
+
     },
     components: { mSecondaryMenu }
   }
-</script>
\ No newline at end of file
+</script>