Python, sql, sqoop,datax task node editor adds zoom function #2929 (#2933)

* Python, sql, sqoop task node editor adds zoom function

* fix

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

@@ -47,6 +47,9 @@
               name="code-sql-mirror"
               style="opacity: 0;">
             </textarea>
+            <a class="ans-modal-box-max">
+              <em class="ans-icon-max" @click="setEditorVal"></em>
+            </a>
           </div>
         </div>
       </m-list-box>
@@ -123,6 +126,9 @@
               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 +150,7 @@
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import mListBox from './_source/listBox'
+  import mScriptBox from './_source/scriptBox'
   import mDatasource from './_source/datasource'
   import mLocalParams from './_source/localParams'
   import mStatementList from './_source/statementList'
@@ -197,6 +204,62 @@
       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()
+              }
+            })
+          }
+        })
+      },
+      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()
+              }
+            })
+          }
+        })
+      },
       _onSwitch (is) {
         if(is) {
           this.customConfig = 1
@@ -475,3 +538,10 @@
     components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput }
   }
 </script>
+<style lang="scss" rel="stylesheet/scss" scope>
+  .ans-modal-box-max {
+    position: absolute;
+    right: -12px;
+    top: -16px;
+  }
+</style>

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

@@ -22,6 +22,9 @@
         <div class="from-mirror">
           <textarea id="code-python-mirror" name="code-python-mirror" style="opacity: 0;">
           </textarea>
+          <a class="ans-modal-box-max">
+            <em class="ans-icon-max" @click="setEditorVal"></em>
+          </a>
         </div>
       </div>
     </m-list-box>
@@ -57,6 +60,7 @@
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import mListBox from './_source/listBox'
+  import mScriptBox from './_source/scriptBox'
   import mResources from './_source/resources'
   import mLocalParams from './_source/localParams'
   import Treeselect from '@riophae/vue-treeselect'
@@ -100,6 +104,34 @@
       _onLocalParams (a) {
         this.localParams = a
       },
+      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()
+                }
+              })
+            }
+          })
+      },
       /**
        * return resourceList
        */
@@ -342,4 +374,9 @@
       }
     }
   }
+  .ans-modal-box-max {
+    position: absolute;
+    right: -12px;
+    top: -16px;
+  }
 </style>

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

@@ -89,6 +89,9 @@
                   name="code-sql-mirror"
                   style="opacity: 0;">
           </textarea>
+          <a class="ans-modal-box-max">
+            <em class="ans-icon-max" @click="setEditorVal"></em>
+          </a>
         </div>
       </div>
     </m-list-box>
@@ -140,6 +143,7 @@
   import i18n from '@/module/i18n'
   import mUdfs from './_source/udfs'
   import mListBox from './_source/listBox'
+  import mScriptBox from './_source/scriptBox'
   import mSqlType from './_source/sqlType'
   import mDatasource from './_source/datasource'
   import mLocalParams from './_source/localParams'
@@ -190,6 +194,34 @@
       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()
+                }
+              })
+            }
+          })
+      },
       /**
        * return sqlType
        */
@@ -495,5 +527,10 @@
     color: #ff0000;
     padding-right: 4px;
   }
+  .ans-modal-box-max {
+    position: absolute;
+    right: -12px;
+    top: -16px;
+  }
 </style>
 

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

@@ -190,6 +190,9 @@
                   name="code-sqoop-mirror"
                   style="opacity: 0;">
           </textarea>
+          <a class="ans-modal-box-max">
+            <em class="ans-icon-max" @click="setEditorVal"></em>
+          </a>
         </div>
       </div>
     </m-list-box>
@@ -492,6 +495,7 @@
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import mListBox from './_source/listBox'
+  import mScriptBox from './_source/scriptBox'
   import mDatasource from './_source/datasource'
   import mLocalParams from './_source/localParams'
   import disabledState from '@/module/mixin/disabledState'
@@ -619,7 +623,34 @@
       backfillItem: Object
     },
     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()
+                }
+              })
+            }
+          })
+      },
       _handleQueryType(o){
         this.sourceMysqlParams.srcQueryType = this.srcQueryType
       },
@@ -1028,5 +1059,10 @@
     color: #ff0000;
     padding-right: 4px;
   }
+  .ans-modal-box-max {
+    position: absolute;
+    right: -12px;
+    top: -16px;
+  }
 </style>