[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

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;

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;

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);
     }

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"

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">

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"

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"

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) {

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">

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;