From 50da6951fc09b436eabf3fc2ab6338f325c32fd5 Mon Sep 17 00:00:00 2001
From: eights <amarantine@my.com>
Date: Tue, 9 Jun 2020 03:39:29 -0700
Subject: [PATCH] sqoop front-end optimization

---
 .../formModel/tasks/_source/datasource.vue    |   2 +-
 .../dag/_source/formModel/tasks/sqoop.vue     | 962 +++++++++++-------
 .../src/js/module/i18n/locale/en_US.js        |   7 +
 .../src/js/module/i18n/locale/zh_CN.js        |   7 +
 4 files changed, 612 insertions(+), 366 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
index a173139d15..05e248f518 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
@@ -131,7 +131,7 @@
     },
     created () {
       let supportType = this.supportType || []
-      this.typeList = _.cloneDeep(this.store.state.dag.dsTypeListS)
+      this.typeList = this.data.typeList || _.cloneDeep(this.store.state.dag.dsTypeListS)
       // Have a specified data source
       if (supportType.length) {
         let is = (type) => {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
index 6594ffcf74..4bed92d27a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
@@ -1,134 +1,194 @@
 /*
- * 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.
- */
+* 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="sql-model">
 
     <m-list-box>
-      <div slot="text">{{$t('Direct')}}</div>
+      <div slot="text">{{$t('Custom Job')}}</div>
       <div slot="content">
-        <x-select
-                style="width: 130px;"
-                v-model="modelType"
-                :disabled="isDetails">
-          <x-option
-                  v-for="city in modelTypeList"
-                  :key="city.code"
-                  :value="city.code"
-                  :label="city.code">
-          </x-option>
-        </x-select>
+        <x-switch
+          v-model="isCustomTask"
+          @on-click="_onSwitch"
+          :disabled="isDetails"
+        >
+        </x-switch>
       </div>
     </m-list-box>
-
-    <template>
+    <m-list-box v-show="isCustomTask">
+      <div slot="text">{{$t('Custom Script')}}</div>
+      <div slot="content">
+        <div class="from-mirror">
+          <textarea
+            id="code-shell-mirror"
+            name="code-shell-mirror"
+            style="opacity: 0;">
+          </textarea>
+        </div>
+      </div>
+    </m-list-box>
+    <template v-if="!isCustomTask">
       <m-list-box>
-        <div slot="text" style="font-weight:bold">{{$t('Data Source')}}</div>
+        <div slot="text">{{$t('Sqoop Job Name')}}</div>
+        <div slot="content">
+          <x-input
+            :disabled="isDetails"
+            type="text"
+            v-model="jobName"
+            :placeholder="$t('Please enter Job Name(required)')">
+          </x-input>
+        </div>
       </m-list-box>
-      <hr style="margin-left: 60px;">
       <m-list-box>
-        <div slot="text">{{$t('Type')}}</div>
+        <div slot="text">{{$t('Direct')}}</div>
         <div slot="content">
           <x-select
-                  style="width: 130px;"
-                  v-model="sourceType"
-                  :disabled="isDetails"
-                  @on-change="_handleSourceTypeChange">
+            style="width: 130px;"
+            v-model="modelType"
+            :disabled="isDetails"
+            @on-change="_handleModelTypeChange">
             <x-option
-                    v-for="city in sourceTypeList"
-                    :key="city.code"
-                    :value="city.code"
-                    :label="city.code">
+              v-for="city in modelTypeList"
+              :key="city.code"
+              :value="city.code"
+              :label="city.code">
             </x-option>
           </x-select>
         </div>
       </m-list-box>
+      <m-list-box>
+        <div slot="text" style="width: 110px;">{{$t('Hadoop Custom Params')}}</div>
+        <div slot="content">
+          <m-local-params
+            ref="refMapColumnHadoopParams"
+            @on-local-params="_onHadoopCustomParams"
+            :udp-list="hadoopCustomParams"
+            :hide="false">
+          </m-local-params>
+        </div>
+      </m-list-box>
+      <m-list-box>
+        <div slot="text" style="width: 100px;">{{$t('Sqoop Advanced Parameters')}}</div>
+        <div slot="content">
+          <m-local-params
+            ref="refMapColumnAdvancedParams"
+            @on-local-params="_onSqoopAdvancedParams"
+            :udp-list="sqoopAdvancedParams"
+            :hide="false">
+          </m-local-params>
+        </div>
+      </m-list-box>
 
-      <template v-if="sourceType ==='MYSQL'">
-
+      <template>
         <m-list-box>
-          <div slot="text">{{$t('Datasource')}}</div>
-          <div slot="content">
-            <m-datasource
-                    ref="refSourceDs"
-                    @on-dsData="_onSourceDsData"
-                    :data="{ type:sourceMysqlParams.srcType,datasource:sourceMysqlParams.srcDatasource }"
-                    >
-            </m-datasource>
-          </div>
+          <div slot="text" style="font-weight:bold">{{$t('Data Source')}}</div>
         </m-list-box>
-
+        <hr style="margin-left: 60px;">
         <m-list-box>
-          <div slot="text">{{$t('ModelType')}}</div>
+          <div slot="text">{{$t('Type')}}</div>
           <div slot="content">
-            <x-radio-group v-model="srcQueryType" @on-change="_handleQueryType">
-              <x-radio label="0">{{$t('Form')}}</x-radio>
-              <x-radio label="1">SQL</x-radio>
-            </x-radio-group>
+            <x-select
+              style="width: 130px;"
+              v-model="sourceType"
+              :disabled="isDetails"
+              @on-change="_handleSourceTypeChange">
+              <x-option
+                v-for="city in sourceTypeList"
+                :key="city.code"
+                :value="city.code"
+                :label="city.code">
+              </x-option>
+            </x-select>
           </div>
         </m-list-box>
 
-        <template v-if="sourceMysqlParams.srcQueryType=='0'">
+        <template v-if="sourceType ==='MYSQL'">
 
           <m-list-box>
-            <div slot="text">{{$t('Table')}}</div>
+            <div slot="text">{{$t('Datasource')}}</div>
             <div slot="content">
-              <x-input
-                      :disabled="isDetails"
-                      type="text"
-                      v-model="sourceMysqlParams.srcTable"
-                      :placeholder="$t('Please enter Mysql Table(required)')">
-              </x-input>
+              <m-datasource
+                ref="refSourceDs"
+                @on-dsData="_onSourceDsData"
+                :data="{type:sourceMysqlParams.srcType,
+                      typeList: [{id: 0, code: 'MYSQL', disabled: false}],
+                      datasource:sourceMysqlParams.srcDatasource }"
+              >
+              </m-datasource>
             </div>
           </m-list-box>
 
           <m-list-box>
-            <div slot="text">{{$t('ColumnType')}}</div>
+            <div slot="text">{{$t('ModelType')}}</div>
             <div slot="content">
-              <x-radio-group v-model="sourceMysqlParams.srcColumnType">
-                <x-radio label="0">{{$t('All Columns')}}</x-radio>
-                <x-radio label="1">{{$t('Some Columns')}}</x-radio>
+              <x-radio-group v-model="srcQueryType" @on-change="_handleQueryType">
+                <x-radio label="0">{{$t('Form')}}</x-radio>
+                <x-radio label="1">SQL</x-radio>
               </x-radio-group>
             </div>
           </m-list-box>
 
-          <m-list-box v-if="sourceMysqlParams.srcColumnType=='1'">
-            <div slot="text">{{$t('Column')}}</div>
-            <div slot="content">
-              <x-input
-                      :disabled="isDetails"
-                      type="text"
-                      v-model="sourceMysqlParams.srcColumns"
-                      :placeholder="$t('Please enter Columns (Comma separated)')">
-              </x-input>
-            </div>
-          </m-list-box>
+          <template v-if="sourceMysqlParams.srcQueryType=='0'">
+
+            <m-list-box>
+              <div slot="text">{{$t('Table')}}</div>
+              <div slot="content">
+                <x-input
+                  :disabled="isDetails"
+                  type="text"
+                  v-model="sourceMysqlParams.srcTable"
+                  :placeholder="$t('Please enter Mysql Table(required)')">
+                </x-input>
+              </div>
+            </m-list-box>
+
+            <m-list-box>
+              <div slot="text">{{$t('ColumnType')}}</div>
+              <div slot="content">
+                <x-radio-group v-model="sourceMysqlParams.srcColumnType">
+                  <x-radio label="0">{{$t('All Columns')}}</x-radio>
+                  <x-radio label="1">{{$t('Some Columns')}}</x-radio>
+                </x-radio-group>
+              </div>
+            </m-list-box>
+
+            <m-list-box v-if="sourceMysqlParams.srcColumnType=='1'">
+              <div slot="text">{{$t('Column')}}</div>
+              <div slot="content">
+                <x-input
+                  :disabled="isDetails"
+                  type="text"
+                  v-model="sourceMysqlParams.srcColumns"
+                  :placeholder="$t('Please enter Columns (Comma separated)')">
+                </x-input>
+              </div>
+            </m-list-box>
+          </template>
         </template>
       </template>
-    </template>
 
-    <template v-if="sourceType=='HIVE'">
-      <m-list-box>
+      <template v-if="sourceType=='HIVE'">
+        <m-list-box>
           <div slot="text">{{$t('Database')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="sourceHiveParams.hiveDatabase"
-                    :placeholder="$t('Please enter Hive Database(required)')">
+              :disabled="isDetails"
+              type="text"
+              v-model="sourceHiveParams.hiveDatabase"
+              :placeholder="$t('Please enter Hive Database(required)')">
             </x-input>
           </div>
         </m-list-box>
@@ -136,10 +196,10 @@
           <div slot="text">{{$t('Table')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="sourceHiveParams.hiveTable"
-                    :placeholder="$t('Please enter Hive Table(required)')">
+              :disabled="isDetails"
+              type="text"
+              v-model="sourceHiveParams.hiveTable"
+              :placeholder="$t('Please enter Hive Table(required)')">
             </x-input>
           </div>
         </m-list-box>
@@ -147,10 +207,10 @@
           <div slot="text">{{$t('Hive partition Keys')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="sourceHiveParams.hivePartitionKey"
-                    :placeholder="$t('Please enter Hive Partition Keys')">
+              :disabled="isDetails"
+              type="text"
+              v-model="sourceHiveParams.hivePartitionKey"
+              :placeholder="$t('Please enter Hive Partition Keys')">
             </x-input>
           </div>
         </m-list-box>
@@ -158,97 +218,97 @@
           <div slot="text">{{$t('Hive partition Values')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="sourceHiveParams.hivePartitionValue"
-                    :placeholder="$t('Please enter Hive Partition Values')">
+              :disabled="isDetails"
+              type="text"
+              v-model="sourceHiveParams.hivePartitionValue"
+              :placeholder="$t('Please enter Hive Partition Values')">
             </x-input>
           </div>
         </m-list-box>
-    </template>
+      </template>
 
-    <template v-if="sourceType=='HDFS'">
-      <m-list-box>
-        <div slot="text">{{$t('Export Dir')}}</div>
+      <template v-if="sourceType=='HDFS'">
+        <m-list-box>
+          <div slot="text">{{$t('Export Dir')}}</div>
+          <div slot="content">
+            <x-input
+              :disabled="isDetails"
+              type="text"
+              v-model="sourceHdfsParams.exportDir"
+              :placeholder="$t('Please enter Export Dir(required)')">
+            </x-input>
+          </div>
+        </m-list-box>
+      </template>
+
+      <m-list-box v-show="srcQueryType === '1' && sourceType ==='MYSQL'">
+        <div slot="text">{{$t('SQL Statement')}}</div>
         <div slot="content">
-          <x-input
-                  :disabled="isDetails"
-                  type="text"
-                  v-model="sourceHdfsParams.exportDir"
-                  :placeholder="$t('Please enter Export Dir(required)')">
-          </x-input>
+          <div class="from-mirror">
+            <textarea
+              id="code-sqoop-mirror"
+              name="code-sqoop-mirror"
+              style="opacity: 0;">
+            </textarea>
+          </div>
         </div>
       </m-list-box>
-    </template>
 
-    <m-list-box v-show="srcQueryType === '1' && sourceType ==='MYSQL'">
-      <div slot="text">{{$t('SQL Statement')}}</div>
-      <div slot="content">
-        <div class="from-mirror">
-          <textarea
-                  id="code-sqoop-mirror"
-                  name="code-sqoop-mirror"
-                  style="opacity: 0;">
-          </textarea>
-        </div>
-      </div>
-    </m-list-box>
+      <template>
+        <m-list-box v-show="sourceType === 'MYSQL'">
+          <div slot="text">{{$t('Map Column Hive')}}</div>
+          <div slot="content">
+            <m-local-params
+              ref="refMapColumnHiveParams"
+              @on-local-params="_onMapColumnHive"
+              :udp-list="sourceMysqlParams.mapColumnHive"
+              :hide="false">
+            </m-local-params>
+          </div>
+        </m-list-box>
+        <m-list-box v-show="sourceType === 'MYSQL'">
+          <div slot="text">{{$t('Map Column Java')}}</div>
+          <div slot="content">
+            <m-local-params
+              ref="refMapColumnJavaParams"
+              @on-local-params="_onMapColumnJava"
+              :udp-list="sourceMysqlParams.mapColumnJava"
+              :hide="false">
+            </m-local-params>
+          </div>
+        </m-list-box>
+      </template>
 
-    <template>
-      <m-list-box v-show="sourceType === 'MYSQL'">
-        <div slot="text">{{$t('Map Column Hive')}}</div>
-        <div slot="content">
-          <m-local-params
-                  ref="refMapColumnHiveParams"
-                  @on-local-params="_onMapColumnHive"
-                  :udp-list="sourceMysqlParams.mapColumnHive"
-                  :hide="false">
-          </m-local-params>
-        </div>
+      <m-list-box>
+        <div slot="text" style="font-weight:bold">{{$t('Data Target')}}</div>
       </m-list-box>
-      <m-list-box v-show="sourceType === 'MYSQL'">
-        <div slot="text">{{$t('Map Column Java')}}</div>
+      <hr style="margin-left: 60px;">
+
+      <m-list-box>
+        <div slot="text">{{$t('Type')}}</div>
         <div slot="content">
-          <m-local-params
-                  ref="refMapColumnJavaParams"
-                  @on-local-params="_onMapColumnJava"
-                  :udp-list="sourceMysqlParams.mapColumnJava"
-                  :hide="false">
-          </m-local-params>
+          <x-select
+            style="width: 130px;"
+            v-model="targetType"
+            :disabled="isDetails">
+            <x-option
+              v-for="city in targetTypeList"
+              :key="city.code"
+              :value="city.code"
+              :label="city.code">
+            </x-option>
+          </x-select>
         </div>
       </m-list-box>
-    </template>
-
-    <m-list-box>
-      <div slot="text" style="font-weight:bold">{{$t('Data Target')}}</div>
-    </m-list-box>
-    <hr style="margin-left: 60px;">
-
-    <m-list-box>
-      <div slot="text">{{$t('Type')}}</div>
-      <div slot="content">
-        <x-select
-                style="width: 130px;"
-                v-model="targetType"
-                :disabled="isDetails">
-          <x-option
-                  v-for="city in targetTypeList"
-                  :key="city.code"
-                  :value="city.code"
-                  :label="city.code">
-          </x-option>
-        </x-select>
-      </div>
-    </m-list-box>
-    <div v-show="targetType==='HIVE'">
-      <m-list-box>
+      <div v-show="targetType==='HIVE'">
+        <m-list-box>
           <div slot="text">{{$t('Database')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetHiveParams.hiveDatabase"
-                    :placeholder="$t('Please enter Hive Database(required)')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetHiveParams.hiveDatabase"
+              :placeholder="$t('Please enter Hive Database(required)')">
             </x-input>
           </div>
         </m-list-box>
@@ -256,10 +316,10 @@
           <div slot="text">{{$t('Table')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetHiveParams.hiveTable"
-                    :placeholder="$t('Please enter Hive Table(required)')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetHiveParams.hiveTable"
+              :placeholder="$t('Please enter Hive Table(required)')">
             </x-input>
           </div>
         </m-list-box>
@@ -285,10 +345,10 @@
           <div slot="text">{{$t('ReplaceDelimiter')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetHiveParams.replaceDelimiter"
-                    :placeholder="$t('Please enter Replace Delimiter')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetHiveParams.replaceDelimiter"
+              :placeholder="$t('Please enter Replace Delimiter')">
             </x-input>
           </div>
         </m-list-box>
@@ -296,10 +356,10 @@
           <div slot="text">{{$t('Hive partition Keys')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetHiveParams.hivePartitionKey"
-                    :placeholder="$t('Please enter Hive Partition Keys')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetHiveParams.hivePartitionKey"
+              :placeholder="$t('Please enter Hive Partition Keys')">
             </x-input>
           </div>
         </m-list-box>
@@ -307,62 +367,62 @@
           <div slot="text">{{$t('Hive partition Values')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetHiveParams.hivePartitionValue"
-                    :placeholder="$t('Please enter Hive Partition Values')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetHiveParams.hivePartitionValue"
+              :placeholder="$t('Please enter Hive Partition Values')">
             </x-input>
           </div>
         </m-list-box>
-    </div>
-    <div v-show="targetType==='HDFS'">
-      <m-list-box>
-        <div slot="text">{{$t('Target Dir')}}</div>
-        <div slot="content">
-          <x-input
-                  :disabled="isDetails"
-                  type="text"
-                  v-model="targetHdfsParams.targetPath"
-                  :placeholder="$t('Please enter Target Dir(required)')">
-          </x-input>
-        </div>
-      </m-list-box>
-      <m-list-box>
+      </div>
+      <div v-show="targetType==='HDFS'">
+        <m-list-box>
+          <div slot="text">{{$t('Target Dir')}}</div>
+          <div slot="content">
+            <x-input
+              :disabled="isDetails"
+              type="text"
+              v-model="targetHdfsParams.targetPath"
+              :placeholder="$t('Please enter Target Dir(required)')">
+            </x-input>
+          </div>
+        </m-list-box>
+        <m-list-box>
           <div slot="text">{{$t('DeleteTargetDir')}}</div>
           <div slot="content">
             <x-switch v-model="targetHdfsParams.deleteTargetDir"></x-switch>
           </div>
         </m-list-box>
-      <m-list-box>
-        <div slot="text">{{$t('CompressionCodec')}}</div>
-        <div slot="content">
-          <x-radio-group v-model="targetHdfsParams.compressionCodec">
-            <x-radio label="snappy">snappy</x-radio>
-            <x-radio label="lzo">lzo</x-radio>
-            <x-radio label="gzip">gzip</x-radio>
-            <x-radio label="">no</x-radio>
-          </x-radio-group>
-        </div>
-      </m-list-box>
-      <m-list-box>
-        <div slot="text">{{$t('FileType')}}</div>
-        <div slot="content">
-          <x-radio-group v-model="targetHdfsParams.fileType">
-            <x-radio label="--as-avrodatafile">avro</x-radio>
-            <x-radio label="--as-sequencefile">sequence</x-radio>
-            <x-radio label="--as-textfile">text</x-radio>
-            <x-radio label="--as-parquetfile">parquet</x-radio>
-          </x-radio-group>
-        </div>
-      </m-list-box>
-      <m-list-box>
+        <m-list-box>
+          <div slot="text">{{$t('CompressionCodec')}}</div>
+          <div slot="content">
+            <x-radio-group v-model="targetHdfsParams.compressionCodec">
+              <x-radio label="snappy">snappy</x-radio>
+              <x-radio label="lzo">lzo</x-radio>
+              <x-radio label="gzip">gzip</x-radio>
+              <x-radio label="">no</x-radio>
+            </x-radio-group>
+          </div>
+        </m-list-box>
+        <m-list-box>
+          <div slot="text">{{$t('FileType')}}</div>
+          <div slot="content">
+            <x-radio-group v-model="targetHdfsParams.fileType">
+              <x-radio label="--as-avrodatafile">avro</x-radio>
+              <x-radio label="--as-sequencefile">sequence</x-radio>
+              <x-radio label="--as-textfile">text</x-radio>
+              <x-radio label="--as-parquetfile">parquet</x-radio>
+            </x-radio-group>
+          </div>
+        </m-list-box>
+        <m-list-box>
           <div slot="text">{{$t('FieldsTerminated')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetHdfsParams.fieldsTerminated"
-                    :placeholder="$t('Please enter Fields Terminated')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetHdfsParams.fieldsTerminated"
+              :placeholder="$t('Please enter Fields Terminated')">
             </x-input>
           </div>
         </m-list-box>
@@ -370,45 +430,47 @@
           <div slot="text">{{$t('LinesTerminated')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetHdfsParams.linesTerminated"
-                    :placeholder="$t('Please enter Lines Terminated')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetHdfsParams.linesTerminated"
+              :placeholder="$t('Please enter Lines Terminated')">
             </x-input>
           </div>
         </m-list-box>
-    </div>
-    <div v-show="targetType==='MYSQL'">
-      <m-list-box>
-        <div slot="text">{{$t('Datasource')}}</div>
-        <div slot="content">
-          <m-datasource
+      </div>
+      <div v-show="targetType==='MYSQL'">
+        <m-list-box>
+          <div slot="text">{{$t('Datasource')}}</div>
+          <div slot="content">
+            <m-datasource
               ref="refTargetDs"
               @on-dsData="_onTargetDsData"
-              :data="{ type:targetMysqlParams.targetType,datasource:targetMysqlParams.targetDatasource }"
-              >
-          </m-datasource>
-        </div>
-      </m-list-box>
+              :data="{ type:targetMysqlParams.targetType,
+                      typeList: [{id: 0, code: 'MYSQL', disabled: false}],
+                      datasource:targetMysqlParams.targetDatasource }"
+            >
+            </m-datasource>
+          </div>
+        </m-list-box>
         <m-list-box>
           <div slot="text">{{$t('Table')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetMysqlParams.targetTable"
-                    :placeholder="$t('Please enter Mysql Table(required)')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetMysqlParams.targetTable"
+              :placeholder="$t('Please enter Mysql Table(required)')">
             </x-input>
           </div>
         </m-list-box>
-          <m-list-box>
+        <m-list-box>
           <div slot="text">{{$t('Column')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetMysqlParams.targetColumns"
-                    :placeholder="$t('Please enter Columns (Comma separated)')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetMysqlParams.targetColumns"
+              :placeholder="$t('Please enter Columns (Comma separated)')">
             </x-input>
           </div>
         </m-list-box>
@@ -416,10 +478,10 @@
           <div slot="text">{{$t('FieldsTerminated')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetMysqlParams.fieldsTerminated"
-                    :placeholder="$t('Please enter Fields Terminated')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetMysqlParams.fieldsTerminated"
+              :placeholder="$t('Please enter Fields Terminated')">
             </x-input>
           </div>
         </m-list-box>
@@ -427,10 +489,10 @@
           <div slot="text">{{$t('LinesTerminated')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetMysqlParams.linesTerminated"
-                    :placeholder="$t('Please enter Lines Terminated')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetMysqlParams.linesTerminated"
+              :placeholder="$t('Please enter Lines Terminated')">
             </x-input>
           </div>
         </m-list-box>
@@ -444,37 +506,37 @@
           <div slot="text">{{$t('UpdateKey')}}</div>
           <div slot="content">
             <x-input
-                    :disabled="isDetails"
-                    type="text"
-                    v-model="targetMysqlParams.targetUpdateKey"
-                    :placeholder="$t('Please enter Update Key')">
+              :disabled="isDetails"
+              type="text"
+              v-model="targetMysqlParams.targetUpdateKey"
+              :placeholder="$t('Please enter Update Key')">
             </x-input>
           </div>
         </m-list-box>
         <m-list-box v-show="targetMysqlParams.isUpdate">
           <div slot="text">{{$t('UpdateMode')}}</div>
           <div slot="content">
-              <x-radio-group v-model="targetMysqlParams.targetUpdateMode">
-                <x-radio label="updateonly">{{$t('OnlyUpdate')}}</x-radio>
-                <x-radio label="allowinsert">{{$t('AllowInsert')}}</x-radio>
-              </x-radio-group>
-            </div>
+            <x-radio-group v-model="targetMysqlParams.targetUpdateMode">
+              <x-radio label="updateonly">{{$t('OnlyUpdate')}}</x-radio>
+              <x-radio label="allowinsert">{{$t('AllowInsert')}}</x-radio>
+            </x-radio-group>
+          </div>
         </m-list-box>
 
-    </div>
-    <m-list-box>
-      <div slot="text">{{$t('Concurrency')}}</div>
-      <div slot="content">
-        <x-input
-                :disabled="isDetails"
-                type="text"
-                v-model="concurrency"
-                :placeholder="$t('Please enter Concurrency')">
-
-        </x-input>
       </div>
-    </m-list-box>
+      <m-list-box>
+        <div slot="text">{{$t('Concurrency')}}</div>
+        <div slot="content">
+          <x-input
+            :disabled="isDetails"
+            type="text"
+            v-model="concurrency"
+            :placeholder="$t('Please enter Concurrency')">
 
+          </x-input>
+        </div>
+      </m-list-box>
+    </template>
     <m-list-box>
       <div slot="text">{{$t('Custom Parameters')}}</div>
       <div slot="content">
@@ -498,16 +560,38 @@
   import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
 
   let editor
+  let shellEditor
 
   export default {
     name: 'sql',
     data () {
       return {
-
+        /**
+         * Is Custom Task
+         */
+        isCustomTask: false,
         /**
          * Customer Params
          */
         localParams: [],
+
+        /**
+         * Hadoop Custom Params
+         */
+        hadoopCustomParams: [],
+
+        /**
+         * Sqoop Advanced Params
+         */
+        sqoopAdvancedParams: [],
+        /**
+         * script
+         */
+        customShell: '',
+        /**
+         * task name
+         */
+        jobName: '',
         /**
          * mysql query type
          */
@@ -524,6 +608,10 @@
          * concurrency
          */
         concurrency:1,
+        /**
+         * default job type
+         */
+        jobType:'TEMPLATE',
         /**
          * direct model type
          */
@@ -531,17 +619,11 @@
 
         modelTypeList: [{ code: 'import' }, { code: 'export' }],
 
-        sourceTypeList:[
+        sourceTypeList: [
           {
-            code:"MYSQL"
+            code: "MYSQL"
           },
-          {
-            code:"HDFS"
-          },
-          {
-            code:"HIVE"
-          }
-          ],
+        ],
 
         targetTypeList:[
           {
@@ -620,19 +702,63 @@
     },
     methods: {
 
+      _onSwitch(is){
+        if(is) {
+          this.jobType = 'CUSTOM'
+          this.isCustomTask = true
+          setTimeout(() => {
+            this._handlerShellEditor()
+          }, 200)
+        } else {
+          this.jobType = 'TEMPLATE'
+          this.isCustomTask = false
+          setTimeout(() => {
+            this._handlerEditor()
+          }, 200)
+        }
+      },
+
       _handleQueryType(o){
         this.sourceMysqlParams.srcQueryType = this.srcQueryType
+        this._getTargetTypeList(this.sourceType)
+        this.targetType = this.targetTypeList[0].code
+      },
+
+      _handleModelTypeChange(a){
+        this._getSourceTypeList(a.label)
+        this.sourceType = this.sourceTypeList[0].code
+        this._handleSourceTypeChange({label: this.sourceType, value: this.sourceType})
       },
 
       _handleSourceTypeChange(a){
-         this._getTargetTypeList(a.label)
-         this.targetType = this.targetTypeList[0].code
+        this._getTargetTypeList(a.label)
+        this.targetType = this.targetTypeList[0].code
       },
 
-      _getTargetTypeList(data){
+      _getSourceTypeList(data){
         switch(data){
-          case 'MYSQL':
-            this.targetTypeList = [
+          case 'import':
+            this.sourceTypeList = [
+              {
+                code:"MYSQL"
+              },
+            ]
+            break;
+          case 'export':
+            this.sourceTypeList = [
+              {
+                code: "HDFS"
+              },
+              {
+                code: "HIVE"
+              }
+            ]
+            break;
+          default:
+            this.sourceTypeList = [
+              {
+                code:"MYSQL"
+              },
               {
                 code:"HIVE"
               },
@@ -641,6 +767,28 @@
               }
             ]
             break;
+        }
+      },
+
+      _getTargetTypeList(data){
+        switch(data){
+          case 'MYSQL':
+            if (this.srcQueryType === "1") {
+              this.targetTypeList = [
+                {
+                  code: "HDFS"
+                }]
+            } else {
+              this.targetTypeList = [
+                {
+                  code: "HIVE"
+                },
+                {
+                  code: "HDFS"
+                }
+              ]
+            }
+            break;
           case 'HDFS':
             this.targetTypeList = [
               {
@@ -670,12 +818,10 @@
 
       _onMapColumnHive (a) {
         this.sourceMysqlParams.mapColumnHive = a
-        console.log(this.sourceMysqlParams.mapColumnHive)
       },
 
       _onMapColumnJava (a) {
         this.sourceMysqlParams.mapColumnJava = a
-        console.log(this.sourceMysqlParams.mapColumnJava)
       },
 
       /**
@@ -695,13 +841,14 @@
       },
 
       /**
-      * stringify the source params
-      */
+       * stringify the source params
+       */
       _handleSourceParams() {
         var params = null
         switch(this.sourceType){
           case "MYSQL":
-            this.sourceMysqlParams.srcQuerySql = editor ? editor.getValue() : this.sourceMysqlParams.srcQuerySql
+            this.sourceMysqlParams.srcQuerySql = this.sourceMysqlParams.srcQueryType === "1" && editor ?
+              editor.getValue() : this.sourceMysqlParams.srcQuerySql
             params = JSON.stringify(this.sourceMysqlParams)
             break;
           case "ORACLE":
@@ -715,14 +862,14 @@
             break;
           default:
             params = "";
-              break;
+            break;
         }
         return params
       },
 
-     /**
-      * stringify the target params
-      */
+      /**
+       * stringify the target params
+       */
       _handleTargetParams() {
         var params = null
         switch(this.targetType){
@@ -791,91 +938,114 @@
        * verification
        */
       _verification () {
+        let sqoopParams = {
+          jobType: this.jobType,
+          localParams: this.localParams
+        }
+        if (this.jobType === 'CUSTOM') {
+          if (!shellEditor.getValue()) {
+            this.$message.warning(`${i18n.$t('Please enter Custom Shell(required)')}`)
+            return false
+          }
+          sqoopParams['customShell'] = shellEditor.getValue()
+        } else {
+          if (!this.jobName) {
+            this.$message.warning(`${i18n.$t('Please enter Job Name(required)')}`)
+            return false
+          }
 
-        switch(this.sourceType){
-          case "MYSQL":
-            if (!this.$refs.refSourceDs._verifDatasource()) {
-              return false
-            }
-            if(this.srcQueryType === '1'){
-              if (!editor.getValue()) {
-                this.$message.warning(`${i18n.$t('Please enter a SQL Statement(required)')}`)
-                return false
-              }
-            }else{
-              if (this.sourceMysqlParams.srcTable === "") {
-                this.$message.warning(`${i18n.$t('Please enter Mysql Table(required)')}`)
+          switch (this.sourceType) {
+            case "MYSQL":
+              if (!this.$refs.refSourceDs._verifDatasource()) {
                 return false
               }
-
-              if(this.sourceMysqlParams.srcColumnType === "1" && this.sourceMysqlParams.srcColumns === ""){
-                this.$message.warning(`${i18n.$t('Please enter Columns (Comma separated)')}`)
-                return false
+              if (this.srcQueryType === '1') {
+                if (!editor.getValue()) {
+                  this.$message.warning(`${i18n.$t('Please enter a SQL Statement(required)')}`)
+                  return false
+                }
+                this.sourceMysqlParams.srcTable = ""
+                this.sourceMysqlParams.srcColumnType = "0"
+                this.sourceMysqlParams.srcColumns = ""
+              } else {
+                if (this.sourceMysqlParams.srcTable === "") {
+                  this.$message.warning(`${i18n.$t('Please enter Mysql Table(required)')}`)
+                  return false
+                }
+                this.sourceMysqlParams.srcQuerySql = ""
+                if (this.sourceMysqlParams.srcColumnType === "1" && this.sourceMysqlParams.srcColumns === "") {
+                  this.$message.warning(`${i18n.$t('Please enter Columns (Comma separated)')}`)
+                  return false
+                }
+                if (this.sourceMysqlParams.srcColumnType === "0") {
+                  this.sourceMysqlParams.srcColumns = ""
+                }
               }
-            }
 
-            break;
-          case "HDFS":
-              if(this.sourceHdfsParams.exportDir === ""){
+              break;
+            case "HDFS":
+              if (this.sourceHdfsParams.exportDir === "") {
                 this.$message.warning(`${i18n.$t('Please enter Export Dir(required)')}`)
                 return false
               }
-            break;
-          case "HIVE":
-              if(this.sourceHiveParams.hiveDatabase === ""){
+              break;
+            case "HIVE":
+              if (this.sourceHiveParams.hiveDatabase === "") {
                 this.$message.warning(`${i18n.$t('Please enter Hive Database(required)')}`)
                 return false
               }
-              if(this.sourceHiveParams.hiveTable === ""){
+              if (this.sourceHiveParams.hiveTable === "") {
                 this.$message.warning(`${i18n.$t('Please enter Hive Table(required)')}`)
                 return false
               }
-            break;
-          default:
-            break;
-        }
+              break;
+            default:
+              break;
+          }
 
-        switch(this.targetType){
-          case "HIVE":
-            if(this.targetHiveParams.hiveDatabase === ""){
+          switch (this.targetType) {
+            case "HIVE":
+              if (this.targetHiveParams.hiveDatabase === "") {
                 this.$message.warning(`${i18n.$t('Please enter Hive Database(required)')}`)
                 return false
               }
-              if(this.targetHiveParams.hiveTable === ""){
+              if (this.targetHiveParams.hiveTable === "") {
                 this.$message.warning(`${i18n.$t('Please enter Hive Table(required)')}`)
                 return false
               }
-            break;
-          case "HDFS":
-             if(this.targetHdfsParams.targetPath === ""){
+              break;
+            case "HDFS":
+              if (this.targetHdfsParams.targetPath === "") {
                 this.$message.warning(`${i18n.$t('Please enter Target Dir(required)')}`)
                 return false
               }
-            break;
-          case "MYSQL":
+              break;
+            case "MYSQL":
               if (!this.$refs.refTargetDs._verifDatasource()) {
                 return false
               }
 
-              if(this.targetMysqlParams.targetTable === ""){
+              if (this.targetMysqlParams.targetTable === "") {
                 this.$message.warning(`${i18n.$t('Please enter Mysql Table(required)')}`)
                 return false
               }
-            break;
-          default:
-            break;
+              break;
+            default:
+              break;
+          }
+          sqoopParams['jobName'] = this.jobName
+          sqoopParams['hadoopCustomParams'] = this.hadoopCustomParams
+          sqoopParams['sqoopAdvancedParams'] = this.sqoopAdvancedParams
+          sqoopParams['concurrency'] = this.concurrency
+          sqoopParams['modelType'] = this.modelType
+          sqoopParams['sourceType'] = this.sourceType
+          sqoopParams['targetType'] = this.targetType
+          sqoopParams['targetParams'] = this._handleTargetParams()
+          sqoopParams['sourceParams'] = this._handleSourceParams()
         }
 
         // storage
-        this.$emit('on-params', {
-          concurrency:this.concurrency,
-          modelType:this.modelType,
-          sourceType:this.sourceType,
-          targetType:this.targetType,
-          sourceParams:this._handleSourceParams(),
-          targetParams:this._handleTargetParams(),
-          localParams:this.localParams
-        })
+        this.$emit('on-params', sqoopParams)
         return true
       },
 
@@ -912,13 +1082,54 @@
         return editor
       },
 
-     /**
+      /**
+       * Processing code highlighting
+       */
+      _handlerShellEditor () {
+        this._destroyShellEditor()
+
+        // shellEditor
+        shellEditor = codemirror('code-shell-mirror', {
+          mode: 'shell',
+          readOnly: this.isDetails
+        })
+
+        this.keypress = () => {
+          if (!shellEditor.getOption('readOnly')) {
+            shellEditor.showHint({
+              completeSingle: false
+            })
+          }
+        }
+
+        // Monitor keyboard
+        shellEditor.on('keypress', this.keypress)
+        shellEditor.setValue(this.customShell)
+
+        return shellEditor
+      },
+
+      /**
        * return localParams
        */
       _onLocalParams (a) {
         this.localParams = a
       },
 
+      /**
+       * return hadoopParams
+       */
+      _onHadoopCustomParams (a) {
+        this.hadoopCustomParams = a
+      },
+
+      /**
+       * return sqoopAdvancedParams
+       */
+      _onSqoopAdvancedParams (a) {
+        this.sqoopAdvancedParams = a
+      },
+
       _cacheParams () {
         this.$emit('on-cache-params', {
           concurrency:this.concurrency,
@@ -932,13 +1143,20 @@
       },
 
       _destroyEditor () {
-         if (editor) {
+        if (editor) {
           editor.toTextArea() // Uninstall
           editor.off($('.code-sqoop-mirror'), 'keypress', this.keypress)
           editor.off($('.code-sqoop-mirror'), 'changes', this.changes)
           editor = null
         }
       },
+      _destroyShellEditor () {
+        if (shellEditor) {
+          shellEditor.toTextArea() // Uninstall
+          shellEditor.off($('.code-shell-mirror'), 'keypress', this.keypress)
+          shellEditor.off($('.code-shell-mirror'), 'changes', this.changes)
+        }
+      }
     },
     watch: {
       // Listening to sqlType
@@ -970,14 +1188,24 @@
 
       // Non-null objects represent backfill
       if (!_.isEmpty(o)) {
-        this.concurrency = o.params.concurrency || 1,
-        this.modelType = o.params.modelType,
-        this.sourceType = o.params.sourceType,
-        this._getTargetTypeList(this.sourceType)
-        this.targetType = o.params.targetType,
-        this._getSourceParams(o.params.sourceParams),
-        this._getTargetParams(o.params.targetParams),
-        this.localParams = o.params.localParams
+        this.jobType = o.params.jobType
+        this.isCustomTask = false
+        if (this.jobType === 'CUSTOM') {
+          this.customShell = o.params.customShell
+          this.isCustomTask = true
+        } else {
+          this.jobName = o.params.jobName
+          this.hadoopCustomParams = o.params.hadoopCustomParams
+          this.sqoopAdvancedParams = o.params.sqoopAdvancedParams
+          this.concurrency = o.params.concurrency || 1
+          this.modelType = o.params.modelType
+          this.sourceType = o.params.sourceType
+          this._getTargetTypeList(this.sourceType)
+          this.targetType = o.params.targetType
+          this._getSourceParams(o.params.sourceParams)
+          this._getTargetParams(o.params.targetParams)
+          this.localParams = o.params.localParams
+        }
       }
     },
 
@@ -986,6 +1214,10 @@
         this._handlerEditor()
       }, 200)
 
+      setTimeout(() => {
+        this._handlerShellEditor()
+      }, 200)
+
       setTimeout(() => {
         this.srcQueryType = this.sourceMysqlParams.srcQueryType
       }, 500)
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
index 026b96b600..fde1534919 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
@@ -540,6 +540,9 @@ export default {
   'Whether directory': 'Whether directory',
   Yes: 'Yes',
   No: 'No',
+  'Hadoop Custom Params': 'Hadoop Params',
+  'Sqoop Advanced Parameters': 'Sqoop Params',
+  'Sqoop Job Name': 'Job Name',
   'Please enter Mysql Database(required)': 'Please enter Mysql Database(required)',
   'Please enter Mysql Table(required)': 'Please enter Mysql Table(required)',
   'Please enter Columns (Comma separated)': 'Please enter Columns (Comma separated)',
@@ -554,6 +557,8 @@ export default {
   'Please enter Lines Terminated': 'Please enter Lines Terminated',
   'Please enter Concurrency': 'Please enter Concurrency',
   'Please enter Update Key': 'Please enter Update Key',
+  'Please enter Job Name(required)': 'Please enter Job Name(required)',
+  'Please enter Custom Shell(required)': 'Please enter Custom Shell(required)',
   Direct: 'Direct',
   Type: 'Type',
   ModelType: 'ModelType',
@@ -587,6 +592,8 @@ export default {
   'All Columns': 'All Columns',
   'Some Columns': 'Some Columns',
   'Branch flow': 'Branch flow',
+  'Custom Job': 'Custom Job',
+  'Custom Script': 'Custom Script',
   'Cannot select the same node for successful branch flow and failed branch flow': 'Cannot select the same node for successful branch flow and failed branch flow',
   'Successful branch flow and failed branch flow are required': 'Successful branch flow and failed branch flow are required',
   'Unauthorized or deleted resources': 'Unauthorized or deleted resources',
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
index 39f237c0f8..9ad3923716 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
@@ -540,6 +540,9 @@ export default {
   'Whether directory': '是否文件夹',
   Yes: '是',
   No: '否',
+  'Hadoop Custom Params': 'Hadoop参数',
+  'Sqoop Advanced Parameters': 'Sqoop参数',
+  'Sqoop Job Name': '任务名称',
   'Please enter Mysql Database(required)': '请输入Mysql数据库(必填)',
   'Please enter Mysql Table(required)': '请输入Mysql表名(必填)',
   'Please enter Columns (Comma separated)': '请输入列名，用 , 隔开',
@@ -554,6 +557,8 @@ export default {
   'Please enter Lines Terminated': '请输入行分隔符',
   'Please enter Concurrency': '请输入并发度',
   'Please enter Update Key': '请输入更新列',
+  'Please enter Job Name(required)': '请输入任务名称(必填)',
+  'Please enter Custom Shell(required)': '请输入自定义脚本',
   Direct: '流向',
   Type: '类型',
   ModelType: '模式',
@@ -587,6 +592,8 @@ export default {
   'All Columns': '全表导入',
   'Some Columns': '选择列',
   'Branch flow': '分支流转',
+  'Custom Job': '自定义任务',
+  'Custom Script': '自定义脚本',
   'Cannot select the same node for successful branch flow and failed branch flow': '成功分支流转和失败分支流转不能选择同一个节点',
   'Successful branch flow and failed branch flow are required': '成功分支流转和失败分支流转必填',
   'Unauthorized or deleted resources': '未授权或已删除资源',