[Feature] Improve user experience in datasource page (#1471)

To improve user experience in datasource page, add default port for each type database.

1. When create or edit datasource, there is a default vaule for port. If user changes type, the default value changes.
2. Use local variables in browser memory, to cache user previous input port for each type. For example :
	     time-a:  MySQL default  port is 3306 , user change 3306 to 4000.
         time-b:  User change type from MySQL to ClickHouse , the port change  from 4000 to 8123.
         time-c:  User change type from ClickHouse back to MySQL，the port change from 8123 to 4000，use previous input cache to fillback.

3. In edit datasource page, when the page first loads, use the query value fillback instead of default value.

dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue

@@ -183,7 +183,8 @@
         testLoading: false,
         showPrincipal: true,
         showdDatabase: false,
-        isShowPrincipal:true
+        isShowPrincipal:true,
+        prePortMapper:{}
       }
     },
     props: {
@@ -221,7 +222,7 @@
           host: this.host,
           port: this.port,
           database: this.database,
-          principal:this.principal,
+          principal: this.principal,
           userName: this.userName,
           password: this.password,
           other: this.other
@@ -317,13 +318,19 @@
       /**
        * Get modified data
        */
-      _getEditDatasource () {
-        this.store.dispatch('datasource/getEditDatasource', { id: this.item.id }).then(res => {
+      _getEditDatasource() {
+        this.store.dispatch('datasource/getEditDatasource', {id: this.item.id}).then(res => {
           this.type = res.type
           this.name = res.name
           this.note = res.note
           this.host = res.host
-          this.port = res.port
+
+          //When in Editpage, Prevent default value overwrite backfill value
+          let that = this;
+          setTimeout(() => {
+            this.port = res.port
+          },0)
+
           this.principal = res.principal
           this.database = res.database
           this.userName = res.userName
@@ -332,7 +339,60 @@
         }).catch(e => {
           this.$message.error(e.msg || '')
         })
-      }
+      },
+      /**
+       * Set default port for each type.
+       */
+      _setDefaultValues(value) {
+
+        //Default type is MYSQL
+        let type = this.type || 'MYSQL'
+
+        let defaultPort = this._getDefaultPort(type)
+
+        //Backfill the previous input from memcache
+        let mapperPort = this.prePortMapper[type]
+
+        this.port = mapperPort || defaultPort
+
+      },
+
+      /**
+       * Get default port by type
+       */
+      _getDefaultPort(type) {
+        var defaultPort = ''
+        switch (type) {
+          case 'MYSQL':
+            defaultPort = '3306'
+            break
+          case 'POSTGRESQL':
+            defaultPort = '5432'
+            break
+          case 'HIVE':
+            defaultPort = '10000'
+            break
+          case 'SPARK':
+            defaultPort = '10015'
+            break
+          case 'CLICKHOUSE':
+            defaultPort = '8123'
+            break
+          case 'ORACLE':
+            defaultPort = '1521'
+            break
+          case 'SQLSERVER':
+            defaultPort = '1433'
+            break
+          case 'DB2':
+            defaultPort = '50000'
+            break
+          default:
+            break
+
+        }
+        return defaultPort
+      },
     },
     created () {
       // Backfill
@@ -340,6 +400,8 @@
         this._getEditDatasource()
       }
 
+      this._setDefaultValues()
+
     },
     watch: {
       type(value){
@@ -348,6 +410,10 @@
         } else {
           this.showdDatabase = false;
         }
+
+        //Set default port for each type datasource
+        this._setDefaultValues(value)
+
         return new Promise((resolve, reject) => {
           this.store.dispatch('datasource/getKerberosStartupState').then(res => {
             this.isShowPrincipal=res
@@ -361,6 +427,13 @@
             reject(e)
           })
         })
+      },
+      /**
+       * Cache the previous input port for each type datasource
+       * @param value
+       */
+      port(value){
+        this.prePortMapper[this.type] = value
       }
     },