From 9008fa4b0c43a615270f080e9d8c3c2a324bee9c Mon Sep 17 00:00:00 2001
From: Shiwen Cheng <chengshiwen0103@gmail.com>
Date: Fri, 19 Mar 2021 11:57:46 +0800
Subject: [PATCH] [Fix-5089][UI] Fix code mirror cannot be displayed normally
 in sqoop task (#5090)

* [Improvement][UI] Rename from-mirror to form-mirror

* [Fix-5089][UI] Fix code mirror cannot be displayed normally in sqoop task
---
 .../js/conf/home/pages/dag/_source/dag.scss   |  2 +-
 .../formModel/tasks/_source/jsonBox.vue       |  4 +--
 .../formModel/tasks/_source/scriptBox.vue     |  4 +--
 .../dag/_source/formModel/tasks/datax.vue     |  4 +--
 .../dag/_source/formModel/tasks/python.vue    |  2 +-
 .../dag/_source/formModel/tasks/shell.vue     |  2 +-
 .../pages/dag/_source/formModel/tasks/sql.vue |  2 +-
 .../dag/_source/formModel/tasks/sqoop.vue     | 28 +++++++++++++++++--
 .../components/conditions/conditions.vue      |  2 +-
 .../src/sass/common/index.scss                |  2 +-
 10 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
index 41a44bc17a..08f2feccbe 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
@@ -546,7 +546,7 @@ svg path:hover {
   }
 }
 
-.from-mirror {
+.form-mirror {
   width: 100%;
   position: relative;
   z-index: 0;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
index 04375e616a..9b7f53e0cf 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
@@ -18,7 +18,7 @@
   <div class="script-model">
     <m-list-box>
       <div slot="content">
-        <div class="from-mirror1">
+        <div class="form-mirror1">
           <textarea
             id="code-shell-mirror1"
             name="code-shell-mirror1"
@@ -107,7 +107,7 @@
   .script-model {
     width:100%;
   }
-  .from-mirror1 {
+  .form-mirror1 {
     .CodeMirror {
       min-height: 600px;
       max-height: 700px;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
index fbacff8507..19b88c06c2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
@@ -18,7 +18,7 @@
   <div class="script-model">
     <m-list-box>
       <div slot="content">
-        <div class="from-mirror1">
+        <div class="form-mirror1">
           <textarea
             id="code-shell-mirror1"
             name="code-shell-mirror1"
@@ -107,7 +107,7 @@
   .script-model {
     width:100%;
   }
-  .from-mirror1 {
+  .form-mirror1 {
     .CodeMirror {
       height: calc(70vh - 90px);
     }
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
index 59647fd34b..0049ac0036 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
@@ -41,7 +41,7 @@
       <m-list-box>
         <div slot="text">{{$t('SQL Statement')}}</div>
         <div slot="content">
-          <div class="from-mirror">
+          <div class="form-mirror">
             <textarea
               id="code-sql-mirror"
               name="code-sql-mirror"
@@ -120,7 +120,7 @@
       <m-list-box>
         <div slot="text">json</div>
         <div slot="content">
-          <div class="from-mirror">
+          <div class="form-mirror">
             <textarea
               id="code-json-mirror"
               name="code-json-mirror"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
index 97336316dd..d5322ea681 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
@@ -19,7 +19,7 @@
     <m-list-box>
       <div slot="text">{{$t('Script')}}</div>
       <div slot="content">
-        <div class="from-mirror">
+        <div class="form-mirror">
           <textarea id="code-python-mirror" name="code-python-mirror" style="opacity: 0;">
           </textarea>
           <a class="ans-modal-box-max">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
index d66c9e6819..4c61ed266e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
@@ -19,7 +19,7 @@
     <m-list-box>
       <div slot="text">{{$t('Script')}}</div>
       <div slot="content">
-        <div class="from-mirror">
+        <div class="form-mirror">
           <textarea
             id="code-shell-mirror"
             name="code-shell-mirror"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
index a709031632..965d1260b2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
@@ -69,7 +69,7 @@
     <m-list-box>
       <div slot="text">{{$t('SQL Statement')}}</div>
       <div slot="content">
-        <div class="from-mirror">
+        <div class="form-mirror">
           <textarea
                   id="code-sql-mirror"
                   name="code-sql-mirror"
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 12a6ce88c8..60cd5ecb40 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
@@ -25,7 +25,7 @@
     <m-list-box v-show="isCustomTask">
       <div slot="text">{{$t('Custom Script')}}</div>
       <div slot="content">
-        <div class="from-mirror">
+        <div class="form-mirror">
           <textarea id="code-shell-mirror" name="code-shell-mirror" style="opacity: 0;"></textarea>
         </div>
       </div>
@@ -223,10 +223,10 @@
         </m-list-box>
       </template>
       <template v-if="sourceType === 'MYSQL'">
-        <m-list-box v-if="srcQueryType === '1'">
+        <m-list-box v-show="srcQueryType === '1'">
           <div slot="text">{{$t('SQL Statement')}}</div>
           <div slot="content">
-            <div class="from-mirror">
+            <div class="form-mirror">
               <textarea
                       id="code-sqoop-mirror"
                       name="code-sqoop-mirror"
@@ -710,10 +710,32 @@
       getSriptBoxValue (val) {
         editor.setValue(val)
       },
+      _onSwitch (is) {
+        if (is) {
+          this.jobType = 'CUSTOM'
+          this.isCustomTask = true
+          setTimeout(() => {
+            this._handlerShellEditor()
+          }, 200)
+        } else {
+          this.jobType = 'TEMPLATE'
+          this.isCustomTask = false
+          if (this.srcQueryType === '1') {
+            setTimeout(() => {
+              this._handlerEditor()
+            }, 200)
+          }
+        }
+      },
       _handleQueryType (o) {
         this.sourceMysqlParams.srcQueryType = this.srcQueryType
         this._getTargetTypeList(this.sourceType)
         this.targetType = this.targetTypeList[0].code
+        if (this.srcQueryType === '1') {
+          setTimeout(() => {
+            this._handlerEditor()
+          }, 200)
+        }
       },
 
       _handleModelTypeChange (a) {
diff --git a/dolphinscheduler-ui/src/js/module/components/conditions/conditions.vue b/dolphinscheduler-ui/src/js/module/components/conditions/conditions.vue
index cbf731e309..59b60f5963 100644
--- a/dolphinscheduler-ui/src/js/module/components/conditions/conditions.vue
+++ b/dolphinscheduler-ui/src/js/module/components/conditions/conditions.vue
@@ -20,7 +20,7 @@
       <slot name="button-group"></slot>
     </div>
     <div class="right">
-      <div class="from-box">
+      <div class="form-box">
         <slot name="search-group" v-if="isShow"></slot>
         <template v-if="!isShow">
           <div class="list">
diff --git a/dolphinscheduler-ui/src/sass/common/index.scss b/dolphinscheduler-ui/src/sass/common/index.scss
index 66b786a6b1..e5ca5eb563 100644
--- a/dolphinscheduler-ui/src/sass/common/index.scss
+++ b/dolphinscheduler-ui/src/sass/common/index.scss
@@ -91,7 +91,7 @@ body{
         position: absolute;
         right: 8px;
         top: 13px;
-        .from-box {
+        .form-box {
           .list {
             float: right;
             margin-right: 4px;