[Improvement][UI] Unify form model by m-list-box (#4982)

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

@@ -30,10 +30,9 @@
     <div class="content-box" v-if="isContentBox">
       <div class="form-model">
         <!-- Node name -->
-        <div class="clearfix list">
-          <div class="text-box"><span>{{$t('Node name')}}</span></div>
-          <div class="cont-box">
-            <label class="label-box">
+        <m-list-box>
+          <div slot="text">{{$t('Node name')}}</div>
+          <div slot="content">
             <el-input
               type="text"
               v-model="name"
@@ -43,30 +42,24 @@
               maxlength="100"
               @blur="_verifName()">
             </el-input>
-            </label>
-          </div>
           </div>
+        </m-list-box>
 
         <!-- Running sign -->
-        <div class="clearfix list">
-          <div class="text-box"><span>{{$t('Run flag')}}</span></div>
-          <div class="cont-box">
-            <label class="label-box">
+        <m-list-box>
+          <div slot="text">{{$t('Run flag')}}</div>
+          <div slot="content">
             <el-radio-group v-model="runFlag" size="small">
               <el-radio :label="'NORMAL'" :disabled="isDetails">{{$t('Normal')}}</el-radio>
               <el-radio :label="'FORBIDDEN'" :disabled="isDetails">{{$t('Prohibition execution')}}</el-radio>
             </el-radio-group>
-            </label>
-          </div>
           </div>
+        </m-list-box>
 
         <!-- description -->
-        <div class="clearfix list">
-          <div class="text-box">
-            <span>{{$t('Description')}}</span>
-          </div>
-          <div class="cont-box">
-            <label class="label-box">
+        <m-list-box>
+          <div slot="text">{{$t('Description')}}</div>
+          <div slot="content">
             <el-input
               :rows="2"
               type="textarea"
@@ -74,55 +67,46 @@
               v-model="description"
               :placeholder="$t('Please enter description')">
             </el-input>
-            </label>
-          </div>
           </div>
+        </m-list-box>
 
         <!-- Task priority -->
-        <div class="clearfix list">
-          <div class="text-box">
-            <span>{{$t('Task priority')}}</span>
-          </div>
-          <div class="cont-box">
+        <m-list-box>
+          <div slot="text">{{$t('Task priority')}}</div>
+          <div slot="content">
             <span class="label-box" style="width: 193px;display: inline-block;">
               <m-priority v-model="taskInstancePriority"></m-priority>
             </span>
             <span class="text-b">{{$t('Worker group')}}</span>
             <m-worker-groups v-model="workerGroup"></m-worker-groups>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Number of failed retries -->
-        <div class="clearfix list" v-if="nodeData.taskType !== 'SUB_PROCESS'">
-          <div class="text-box">
-            <span>{{$t('Number of failed retries')}}</span>
-          </div>
-          <div class="cont-box">
+        <m-list-box v-if="nodeData.taskType !== 'SUB_PROCESS'">
+          <div slot="text">{{$t('Number of failed retries')}}</div>
+          <div slot="content">
             <m-select-input v-model="maxRetryTimes" :list="[0,1,2,3,4]"></m-select-input>
             <span>({{$t('Times')}})</span>
             <span class="text-b">{{$t('Failed retry interval')}}</span>
             <m-select-input v-model="retryInterval" :list="[1,10,30,60,120]"></m-select-input>
             <span>({{$t('Minute')}})</span>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Delay execution time -->
-        <div class="clearfix list" v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'">
-          <div class="text-box">
-            <span>{{$t('Delay execution time')}}</span>
-          </div>
-          <div class="cont-box">
+        <m-list-box v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'">
+          <div slot="text">{{$t('Delay execution time')}}</div>
+          <div slot="content">
             <m-select-input v-model="delayTime" :list="[0,1,5,10]"></m-select-input>
             <span>({{$t('Minute')}})</span>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Branch flow -->
-        <div class="clearfix list" v-if="nodeData.taskType === 'CONDITIONS'">
-          <div class="text-box">
-            <span>{{$t('State')}}</span>
-          </div>
-          <div class="cont-box">
+        <m-list-box v-if="nodeData.taskType === 'CONDITIONS'">
+          <div slot="text">{{$t('State')}}</div>
+          <div slot="content">
             <span class="label-box" style="width: 193px;display: inline-block;">
               <el-select style="width: 157px;" size="small" v-model="successNode" :disabled="true">
                 <el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label"></el-option>
@@ -133,12 +117,10 @@
               <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
             </el-select>
           </div>
-        </div>
-        <div class="clearfix list" v-if="nodeData.taskType === 'CONDITIONS'">
-          <div class="text-box">
-            <span>{{$t('State')}}</span>
-          </div>
-          <div class="cont-box">
+        </m-list-box>
+        <m-list-box v-if="nodeData.taskType === 'CONDITIONS'">
+          <div slot="text">{{$t('State')}}</div>
+          <div slot="content">
             <span class="label-box" style="width: 193px;display: inline-block;">
               <el-select style="width: 157px;" size="small" v-model="failedNode" :disabled="true">
                 <el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label"></el-option>
@@ -149,7 +131,7 @@
               <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
             </el-select>
           </div>
-        </div>
+        </m-list-box>
 
         <!-- Task timeout alarm -->
         <m-timeout-alarm
@@ -299,6 +281,7 @@
   import mMr from './tasks/mr'
   import mSql from './tasks/sql'
   import i18n from '@/module/i18n'
+  import mListBox from './tasks/_source/listBox'
   import mShell from './tasks/shell'
   import mWaterdrop from './tasks/waterdrop'
   import mSpark from './tasks/spark'
@@ -796,6 +779,7 @@
       }
     },
     components: {
+      mListBox,
       mMr,
       mShell,
       mWaterdrop,

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

@@ -257,6 +257,7 @@
       // get processlist
       this._getProjectList().then(() => {
         if (!this.dependItemList.length) {
+          if (!this.projectList.length) return
           let projectId = this.projectList[0].value
           this._getProcessByProjectId(projectId).then(definitionList => {
             let value = definitionList[0].value

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="dependence-model">
+  <div class="conditions-model">
     <m-list-box>
       <div slot="text">{{$t('Custom Parameters')}}</div>
       <div slot="content">
@@ -178,7 +178,7 @@
 </script>
 
 <style lang="scss" rel="stylesheet/scss">
-  .dependence-model {
+  .conditions-model {
     margin-top: -10px;
     .dep-opt {
       margin-bottom: 10px;

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

@@ -26,7 +26,7 @@
         </label>
       </div>
     </m-list-box>
-    <div v-if="!enable">
+    <template v-if="!enable">
       <m-list-box>
         <div slot="text">{{$t('Datasource')}}</div>
         <div slot="content">
@@ -115,8 +115,8 @@
           <span>({{$t('0 means unlimited by count')}})</span>
         </div>
       </m-list-box>
-    </div>
-    <div v-else>
+    </template>
+    <template v-else>
       <m-list-box>
         <div slot="text">json</div>
         <div slot="content">
@@ -140,12 +140,10 @@
           </m-local-params>
         </div>
       </m-list-box>
-    </div>
-    <div class="clearfix list">
-      <div class="text-box">
-        <span>{{$t('Running Memory')}}</span>
-      </div>
-      <div class="cont-box">
+    </template>
+    <m-list-box>
+      <div slot="text">{{$t('Running Memory')}}</div>
+      <div slot="content">
         <span >{{$t('Min Memory')}}</span>
         <m-select-input v-model="xms" :list="[1,2,3,4]">
         </m-select-input>
@@ -155,7 +153,7 @@
         </m-select-input>
         <span>&nbsp;&nbsp;&nbsp;G</span>
       </div>
-    </div>
+    </m-list-box>
     <el-dialog
       :visible.sync="scriptBoxDialog"
       append-to-body="true"

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="dependence-model">
+  <div class="dependent-model">
     <m-list-box>
       <div slot="text">{{$t('Add dependency')}}</div>
       <div slot="content">
@@ -67,7 +67,7 @@
   import disabledState from '@/module/mixin/disabledState'
 
   export default {
-    name: 'dependence',
+    name: 'dependent',
     data () {
       return {
         relation: 'AND',
@@ -132,7 +132,7 @@
           this.isLoading = false
         }, 600)
       },
-      cacheDependence (val) {
+      cacheDependent (val) {
         this.$emit('on-cache-dependent', val)
       }
     },
@@ -157,7 +157,7 @@
     destroyed () {
     },
     computed: {
-      cacheDependence () {
+      cacheDependent () {
         return {
           relation: this.relation,
           dependTaskList: _.map(this.dependTaskList, v => {
@@ -174,7 +174,7 @@
 </script>
 
 <style lang="scss" rel="stylesheet/scss">
-  .dependence-model {
+  .dependent-model {
     margin-top: -10px;
     .dep-opt {
       margin-bottom: 10px;

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

@@ -33,7 +33,6 @@
         </el-select>
       </div>
     </m-list-box>
-
     <m-list-box v-if="programType !== 'PYTHON'">
       <div slot="text">{{$t('Main Class')}}</div>
       <div slot="content">

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

@@ -88,8 +88,7 @@
         </el-input>
       </div>
     </m-list-box>
-
-    <m-list-box  >
+    <m-list-box>
       <div slot="text">{{$t('Timeout Settings')}}</div>
       <div slot="content">
         <label class="label-box">
@@ -99,24 +98,20 @@
         </label>
       </div>
     </m-list-box>
-
-    <div class="clearfix list" v-if = "timeoutSettings" >
-      <div class="text-box">
-        <span>{{$t('Connect Timeout')}}</span>
-      </div>
-      <div class="cont-box">
-        <span  class="label-box"  style="width: 193px;display: inline-block;" >
+    <m-list-box v-if="timeoutSettings">
+      <div slot="text">{{$t('Connect Timeout')}}</div>
+      <div slot="content">
+        <span  class="label-box" style="width: 193px;display: inline-block;">
           <el-input size="small" v-model='connectTimeout' maxlength="7"></el-input>
         </span>
         <span>{{$t('ms')}}</span>
         <span class="text-b">{{$t('Socket Timeout')}}</span>
-        <span  class="label-box" style="width: 193px;display: inline-block;" >
+        <span  class="label-box" style="width: 193px;display: inline-block;">
           <el-input size="small" v-model='socketTimeout' maxlength="7"></el-input>
         </span>
         <span>{{$t('ms')}}</span>
       </div>
-    </div>
-
+    </m-list-box>
     <m-list-box>
       <div slot="text">{{$t('Custom Parameters')}}</div>
       <div slot="content">

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="spark-model">
+  <div class="mr-model">
     <m-list-box>
       <div slot="text">{{$t('Program Type')}}</div>
       <div slot="content">

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

@@ -16,12 +16,9 @@
  */
 <template>
   <div class="pre_tasks-model">
-    <div class="clearfix list">
-      <div class="text-box">
-        <span>{{$t('Pre tasks')}}</span>
-      </div>
-      <div class="cont-box">
-        <div class="label-box">
+    <m-list-box>
+      <div slot="text">{{$t('Pre tasks')}}</div>
+      <div slot="content">
         <el-select
             ref="preTasksSelector"
             style="width: 100%;"
@@ -39,12 +36,13 @@
           </el-option>
         </el-select>
       </div>
-      </div>
-    </div>
+    </m-list-box>
   </div>
 </template>
 <script>
   import disabledState from '@/module/mixin/disabledState'
+  import mListBox from './_source/listBox'
+
   export default {
     name: 'pre_tasks',
     mixins: [disabledState],
@@ -104,6 +102,7 @@
         })
         return true
       }
-    }
+    },
+    components: { mListBox }
   }
 </script>

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <div class="shell-model">
+  <div class="python-model">
     <m-list-box>
       <div slot="text">{{$t('Script')}}</div>
       <div slot="content">
@@ -36,7 +36,6 @@
         </treeselect>
       </div>
     </m-list-box>
-
     <m-list-box>
       <div slot="text">{{$t('Custom Parameters')}}</div>
       <div slot="content">

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

@@ -34,7 +34,7 @@
         </div>
       </div>
     </m-list-box>
-    <template v-if="sqlType==0">
+    <template v-if="sqlType === 0">
       <m-list-box>
         <div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Title')}}</div>
         <div slot="content">
@@ -54,7 +54,7 @@
         </div>
       </m-list-box>
     </template>
-    <m-list-box v-show="type === 'HIVE'">
+    <m-list-box v-if="type === 'HIVE'">
       <div slot="text">{{$t('SQL Parameter')}}</div>
       <div slot="content">
         <el-input

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

@@ -15,8 +15,7 @@
 * limitations under the License.
 */
 <template>
-  <div class="sql-model">
-
+  <div class="sqoop-model">
     <m-list-box>
       <div slot="text">{{$t('Custom Job')}}</div>
       <div slot="content">
@@ -78,8 +77,6 @@
           </m-local-params>
         </div>
       </m-list-box>
-
-      <template>
       <m-list-box>
         <div slot="text" style="font-weight:bold">{{$t('Data Source')}}</div>
       </m-list-box>
@@ -102,9 +99,7 @@
           </el-select>
         </div>
       </m-list-box>
-
-        <template v-if="sourceType ==='MYSQL'">
-
+      <template v-if="sourceType === 'MYSQL'">
         <m-list-box>
           <div slot="text">{{$t('Datasource')}}</div>
           <div slot="content">
@@ -118,7 +113,6 @@
             </m-datasource>
           </div>
         </m-list-box>
-
         <m-list-box>
           <div slot="text">{{$t('ModelType')}}</div>
           <div slot="content">
@@ -128,9 +122,7 @@
             </el-radio-group>
           </div>
         </m-list-box>
-
-          <template v-if="sourceMysqlParams.srcQueryType=='0'">
-
+        <template v-if="sourceMysqlParams.srcQueryType === '0'">
           <m-list-box>
             <div slot="text">{{$t('Table')}}</div>
             <div slot="content">
@@ -143,7 +135,6 @@
               </el-input>
             </div>
           </m-list-box>
-
           <m-list-box>
             <div slot="text">{{$t('ColumnType')}}</div>
             <div slot="content">
@@ -153,8 +144,7 @@
               </el-radio-group>
             </div>
           </m-list-box>
-
-            <m-list-box v-if="sourceMysqlParams.srcColumnType=='1'">
+          <m-list-box v-if="sourceMysqlParams.srcColumnType === '1'">
             <div slot="text">{{$t('Column')}}</div>
             <div slot="content">
               <el-input
@@ -168,9 +158,7 @@
           </m-list-box>
         </template>
       </template>
-      </template>
-
-      <template v-if="sourceType=='HIVE'">
+      <template v-if="sourceType === 'HIVE'">
         <m-list-box>
           <div slot="text">{{$t('Database')}}</div>
           <div slot="content">
@@ -220,8 +208,7 @@
           </div>
         </m-list-box>
       </template>
-
-      <template v-if="sourceType=='HDFS'">
+      <template v-if="sourceType === 'HDFS'">
         <m-list-box>
           <div slot="text">{{$t('Export Dir')}}</div>
           <div slot="content">
@@ -235,8 +222,8 @@
           </div>
         </m-list-box>
       </template>
-
-    <m-list-box v-show="srcQueryType === '1' && sourceType ==='MYSQL'">
+      <template v-if="sourceType === 'MYSQL'">
+        <m-list-box v-if="srcQueryType === '1'">
           <div slot="text">{{$t('SQL Statement')}}</div>
           <div slot="content">
             <div class="from-mirror">
@@ -251,9 +238,7 @@
             </div>
           </div>
         </m-list-box>
-
-      <template>
-        <m-list-box v-show="sourceType === 'MYSQL'">
+        <m-list-box>
           <div slot="text">{{$t('Map Column Hive')}}</div>
           <div slot="content">
             <m-local-params
@@ -264,7 +249,7 @@
             </m-local-params>
           </div>
         </m-list-box>
-        <m-list-box v-show="sourceType === 'MYSQL'">
+        <m-list-box>
           <div slot="text">{{$t('Map Column Java')}}</div>
           <div slot="content">
             <m-local-params
@@ -276,12 +261,10 @@
           </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">
@@ -299,7 +282,7 @@
           </el-select>
         </div>
       </m-list-box>
-      <div v-show="targetType==='HIVE'">
+      <template v-if="targetType === 'HIVE'">
         <m-list-box>
           <div slot="text">{{$t('Database')}}</div>
           <div slot="content">
@@ -378,8 +361,8 @@
             </el-input>
           </div>
         </m-list-box>
-      </div>
-      <div v-show="targetType==='HDFS'">
+      </template>
+      <template v-if="targetType === 'HDFS'">
         <m-list-box>
           <div slot="text">{{$t('Target Dir')}}</div>
           <div slot="content">
@@ -444,8 +427,8 @@
             </el-input>
           </div>
         </m-list-box>
-      </div>
-      <div v-show="targetType==='MYSQL'">
+      </template>
+      <template v-if="targetType === 'MYSQL'">
         <m-list-box>
           <div slot="text">{{$t('Datasource')}}</div>
           <div slot="content">
@@ -534,8 +517,7 @@
             </el-radio-group>
           </div>
         </m-list-box>
-
-      </div>
+      </template>
       <m-list-box>
         <div slot="text">{{$t('Concurrency')}}</div>
         <div slot="content">

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

@@ -16,12 +16,9 @@
  */
 <template>
   <div class="sub_process-model">
-    <div class="clearfix list">
-      <div class="text-box">
-        <span>{{$t('Child Node')}}</span>
-      </div>
-      <div class="cont-box">
-        <div class="label-box">
+    <m-list-box>
+      <div slot="text">{{$t('Child Node')}}</div>
+      <div slot="content">
         <el-select
                 style="width: 100%;"
                 size="small"
@@ -37,14 +34,14 @@
           </el-option>
         </el-select>
       </div>
-      </div>
-    </div>
+    </m-list-box>
   </div>
 </template>
 <script>
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import disabledState from '@/module/mixin/disabledState'
+  import mListBox from './_source/listBox'
 
   export default {
     name: 'sub_process',
@@ -125,6 +122,7 @@
       }
     },
     mounted () {
-    }
+    },
+    components: { mListBox }
   }
 </script>

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

@@ -15,7 +15,7 @@
 * limitations under the License.
 */
 <template>
-  <div class="shell-model">
+  <div class="waterdrop-model">
     <!--deploy mode-->
     <m-list-box>
       <div slot="text">{{$t('Deploy Mode')}}</div>

dolphinscheduler-ui/src/sass/common/index.scss

@@ -365,6 +365,8 @@ body::-webkit-scrollbar-thumb {
 .el-dialog__body {
   padding: 10px;
 }
-
-
-
+.el-dialog__header {
+  .el-dialog__headerbtn {
+    right: 10px;
+  }
+}