datax

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

@@ -430,7 +430,8 @@
        * return params
        */
       _onParams (o) {
-        this.params = Object.assign(this.params, {}, o)
+        console.log(o)
+        this.params = Object.assign({}, o)
       },
 
       _onCacheParams (o) {

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

@@ -17,90 +17,127 @@
 <template>
   <div class="datax-model">
     <m-list-box>
-      <div slot="text">{{$t('Datasource')}}</div>
+      <div slot="text">{{$t('Custom template')}}</div>
       <div slot="content">
-        <m-datasource
-                ref="refDs"
-                @on-dsData="_onDsData"
-                :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
-                :data="{ type:dsType,datasource:datasource }">
-        </m-datasource>
+        <label class="label-box">
+          <div style="padding-top: 5px;">
+            <x-switch v-model="enable" @on-click="_onSwitch" :disabled="isDetails"></x-switch>
+          </div>
+        </label>
       </div>
     </m-list-box>
-    <m-list-box>
-      <div slot="text">{{$t('SQL Statement')}}</div>
-      <div slot="content">
-        <div class="from-mirror">
-          <textarea
-            id="code-sql-mirror"
-            name="code-sql-mirror"
-            style="opacity: 0;">
-          </textarea>
+    <div v-if="!enable">
+      <m-list-box>
+        <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 }">
+          </m-datasource>
         </div>
-      </div>
-    </m-list-box>
-    <m-list-box>
-      <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 }">
-        </m-datasource>
-      </div>
-    </m-list-box>
-    <m-list-box>
-      <div slot="text">{{$t('TargetTable')}}</div>
-      <div slot="content">
-        <x-input
-          type="input"
-          v-model="targetTable"
-          :placeholder="$t('Please enter the table of target')"
-          autocomplete="off">
-        </x-input>
-      </div>
-    </m-list-box>
-    <m-list-box>
-      <div slot="text">{{$t('TargetDataBase')}}{{$t('Pre Statement')}}</div>
-      <div slot="content">
-        <m-statement-list
-          ref="refPreStatements"
-          @on-statement-list="_onPreStatements"
-          :statement-list="preStatements">
-        </m-statement-list>
-      </div>
-    </m-list-box>
-    <m-list-box>
-      <div slot="text">{{$t('TargetDataBase')}}{{$t('Post Statement')}}</div>
-      <div slot="content">
-        <m-statement-list
-          ref="refPostStatements"
-          @on-statement-list="_onPostStatements"
-          :statement-list="postStatements">
-        </m-statement-list>
-      </div>
-    </m-list-box>
-    <m-list-box>
-      <div slot="text">
-        <span>{{$t('SpeedByte')}}</span>
-      </div>
-      <div slot="content">
-        <m-select-input v-model="jobSpeedByte" :list="[0,1,10,50,100,512]">
-        </m-select-input>
-        <span>({{$t('0 means unlimited by byte')}})</span>
-      </div>
-    </m-list-box>
-    <m-list-box>
-      <div slot="text">
-        <span>{{$t('SpeedRecord')}}</span>
-      </div>
-      <div slot="content">
-        <m-select-input v-model="jobSpeedRecord" :list="[0,500,1000,1500,2000,2500,3000]">
-        </m-select-input>
-        <span>({{$t('0 means unlimited by count')}})</span>
-      </div>
-    </m-list-box>
+      </m-list-box>
+      <m-list-box>
+        <div slot="text">{{$t('SQL Statement')}}</div>
+        <div slot="content">
+          <div class="from-mirror">
+            <textarea
+              id="code-sql-mirror"
+              name="code-sql-mirror"
+              style="opacity: 0;">
+            </textarea>
+          </div>
+        </div>
+      </m-list-box>
+      <m-list-box>
+        <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 }">
+          </m-datasource>
+        </div>
+      </m-list-box>
+      <m-list-box>
+        <div slot="text">{{$t('TargetTable')}}</div>
+        <div slot="content">
+          <x-input
+            type="input"
+            v-model="targetTable"
+            :placeholder="$t('Please enter the table of target')"
+            autocomplete="off">
+          </x-input>
+        </div>
+      </m-list-box>
+      <m-list-box>
+        <div slot="text">{{$t('TargetDataBase')}}{{$t('Pre Statement')}}</div>
+        <div slot="content">
+          <m-statement-list
+            ref="refPreStatements"
+            @on-statement-list="_onPreStatements"
+            :statement-list="preStatements">
+          </m-statement-list>
+        </div>
+      </m-list-box>
+      <m-list-box>
+        <div slot="text">{{$t('TargetDataBase')}}{{$t('Post Statement')}}</div>
+        <div slot="content">
+          <m-statement-list
+            ref="refPostStatements"
+            @on-statement-list="_onPostStatements"
+            :statement-list="postStatements">
+          </m-statement-list>
+        </div>
+      </m-list-box>
+      <m-list-box>
+        <div slot="text">
+          <span>{{$t('SpeedByte')}}</span>
+        </div>
+        <div slot="content">
+          <m-select-input v-model="jobSpeedByte" :list="[0,1,10,50,100,512]">
+          </m-select-input>
+          <span>({{$t('0 means unlimited by byte')}})</span>
+        </div>
+      </m-list-box>
+      <m-list-box>
+        <div slot="text">
+          <span>{{$t('SpeedRecord')}}</span>
+        </div>
+        <div slot="content">
+          <m-select-input v-model="jobSpeedRecord" :list="[0,500,1000,1500,2000,2500,3000]">
+          </m-select-input>
+          <span>({{$t('0 means unlimited by count')}})</span>
+        </div>
+      </m-list-box>
+    </div>
+    <div v-else>
+      <m-list-box>
+        <div slot="text">json</div>
+        <div slot="content">
+          <div class="from-mirror">
+            <textarea
+              id="code-json-mirror"
+              name="code-json-mirror"
+              style="opacity: 0;">
+            </textarea>
+          </div>
+        </div>
+      </m-list-box>
+      <m-list-box>
+        <div slot="text">{{$t('Custom Parameters')}}</div>
+        <div slot="content">
+          <m-local-params
+                  ref="refLocalParams"
+                  @on-local-params="_onLocalParams"
+                  :udp-list="localParams"
+                  :hide="false">
+          </m-local-params>
+        </div>
+      </m-list-box>
+    </div>
   </div>
 </template>
 <script>
@@ -115,12 +152,16 @@
   import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
 
   let editor
+  let jsonEditor
 
   export default {
     name: 'datax',
 
     data () {
       return {
+        // Data Custom template
+        enable: false,
+        enables: false,
         // Data source type
         dsType: '',
         // data source
@@ -135,6 +176,7 @@
         rtDatatarget: '',
         // Sql statement
         sql: '',
+        json: '',
         // target table
         targetTable: '',
         // Pre statements
@@ -145,6 +187,9 @@
         jobSpeedByte: 0,
         // speed record
         jobSpeedRecord: 1000,
+        // Custom parameter
+        localParams: [],
+        customConfig: 0,
       }
     },
     mixins: [disabledState],
@@ -153,6 +198,14 @@
       createNodeId: Number
     },
     methods: {
+      _onSwitch (is) {
+        console.log(is)
+        this.enables = true
+        this.customConfig = 1
+        setTimeout(() => {
+        this._handlerJsonEditor()
+      }, 200)
+      },
       /**
        * return data source
        */
@@ -183,50 +236,62 @@
        * verification
        */
       _verification () {
-        if (!editor.getValue()) {
-          this.$message.warning(`${i18n.$t('Please enter a SQL Statement(required)')}`)
-          return false
-        }
+        if(this.customConfig) {
+          // storage
+          this.$emit('on-params', {
+            customConfig: this.customConfig,
+            json: jsonEditor.getValue(),
+            localParams: this.localParams
+          })
+          return true
+        } else {
+          console.log(123)
+          if (!editor.getValue()) {
+            this.$message.warning(`${i18n.$t('Please enter a SQL Statement(required)')}`)
+            return false
+          }
 
-        // datasource Subcomponent verification
-        if (!this.$refs.refDs._verifDatasource()) {
-          return false
-        }
+          // datasource Subcomponent verification
+          if (!this.$refs.refDs._verifDatasource()) {
+            return false
+          }
 
-        // datasource Subcomponent verification
-        if (!this.$refs.refDt._verifDatasource()) {
-          return false
-        }
+          // datasource Subcomponent verification
+          if (!this.$refs.refDt._verifDatasource()) {
+            return false
+          }
 
-        if (!this.targetTable) {
-          this.$message.warning(`${i18n.$t('Please enter a Target Table(required)')}`)
-          return false
-        }
+          if (!this.targetTable) {
+            this.$message.warning(`${i18n.$t('Please enter a Target Table(required)')}`)
+            return false
+          }
 
-        // preStatements Subcomponent verification
-        if (!this.$refs.refPreStatements._verifProp()) {
-          return false
-        }
+          // preStatements Subcomponent verification
+          if (!this.$refs.refPreStatements._verifProp()) {
+            return false
+          }
 
-        // postStatements Subcomponent verification
-        if (!this.$refs.refPostStatements._verifProp()) {
-          return false
-        }
+          // postStatements Subcomponent verification
+          if (!this.$refs.refPostStatements._verifProp()) {
+            return false
+          }
 
-        // storage
-        this.$emit('on-params', {
-          dsType: this.dsType,
-          dataSource: this.rtDatasource,
-          dtType: this.dtType,
-          dataTarget: this.rtDatatarget,
-          sql: editor.getValue(),
-          targetTable: this.targetTable,
-          jobSpeedByte: this.jobSpeedByte * 1024,
-          jobSpeedRecord: this.jobSpeedRecord,
-          preStatements: this.preStatements,
-          postStatements: this.postStatements
-        })
-        return true
+          // storage
+          this.$emit('on-params', {
+            customConfig: this.customConfig,
+            dsType: this.dsType,
+            dataSource: this.rtDatasource,
+            dtType: this.dtType,
+            dataTarget: this.rtDatatarget,
+            sql: editor.getValue(),
+            targetTable: this.targetTable,
+            jobSpeedByte: this.jobSpeedByte * 1024,
+            jobSpeedRecord: this.jobSpeedRecord,
+            preStatements: this.preStatements,
+            postStatements: this.postStatements
+          })
+          return true
+        }
       },
       /**
        * Processing code highlighting
@@ -259,6 +324,34 @@
 
         return editor
       },
+      _handlerJsonEditor () {
+        this._destroyJsonEditor()
+
+        // jsonEditor
+        jsonEditor = codemirror('code-json-mirror', {
+          mode: 'json',
+          readOnly: this.isDetails
+        })
+
+        this.keypress = () => {
+          if (!jsonEditor.getOption('readOnly')) {
+            jsonEditor.showHint({
+              completeSingle: false
+            })
+          }
+        }
+
+        // Monitor keyboard
+        jsonEditor.on('keypress', this.keypress)
+
+        jsonEditor.on('changes', () => {
+          // this._cacheParams()
+        })
+
+        jsonEditor.setValue(this.json)
+
+        return jsonEditor
+      },
       _cacheParams () {
         this.$emit('on-cache-params', {
           dsType: this.dsType,
@@ -279,6 +372,13 @@
           editor.off($('.code-sql-mirror'), 'keypress', this.keypress)
           editor.off($('.code-sql-mirror'), 'changes', this.changes)
         }
+      },
+      _destroyJsonEditor () {
+         if (jsonEditor) {
+          jsonEditor.toTextArea() // Uninstall
+          jsonEditor.off($('.code-json-mirror'), 'keypress', this.keypress)
+          jsonEditor.off($('.code-json-mirror'), 'changes', this.changes)
+        }
       }
     },
     created () {
@@ -303,6 +403,11 @@
       setTimeout(() => {
         this._handlerEditor()
       }, 200)
+      // this._handlerJsonEditor()
+      // setTimeout(() => {
+      //   this._handlerJsonEditor()
+      // }, 200)
+      
     },
     destroyed () {
       /**
@@ -312,6 +417,10 @@
         editor.toTextArea() // Uninstall
         editor.off($('.code-sql-mirror'), 'keypress', this.keypress)
       }
+      if (jsonEditor) {
+        jsonEditor.toTextArea() // Uninstall
+        jsonEditor.off($('.code-json-mirror'), 'keypress', this.keypress)
+      }
     },
     watch: {
       //Watch the cacheParams

dolphinscheduler-ui/src/js/module/components/transfer/resource.vue

@@ -20,8 +20,8 @@
       <div class="clearfix transfer-model" style="width: 660px">
         <div>
             <x-button-group v-model="checkedValue" size="small">
-                <x-button type="ghost" value="fileResource" @click="_ckFile">{{$t('File resources')}}</x-button>
-                <x-button type="ghost" value="udfResource" @click="_ckUDf">{{$t('UDF resources')}}</x-button>
+              <x-button type="ghost" value="fileResource" @click="_ckFile">{{$t('File resources')}}</x-button>
+              <x-button type="ghost" value="udfResource" @click="_ckUDf">{{$t('UDF resources')}}</x-button>
             </x-button-group>
         </div>
         <div class="select-list-box">

dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -90,6 +90,7 @@ export default {
   'Please enter other parameters': 'Please enter other parameters',
   'Resources': 'Resources',
   'Custom Parameters': 'Custom Parameters',
+  'Custom template': 'Custom template',
   'Datasource': 'Datasource',
   'methods': 'methods',
   'Please enter method(optional)': 'Please enter method(optional)',

dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@@ -90,6 +90,7 @@ export default {
   'Please enter other parameters': '请输入其他参数',
   'Resources': '资源',
   'Custom Parameters': '自定义参数',
+  'Custom template': '自定义模版',
   'Please enter main class': '请填写主函数的class',
   'Datasource': '数据源',
   'methods': '方法',