fix: SSH 设置显示问题

core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue

@@ -157,6 +157,50 @@ const authMethodList = [
     label: 'Kerberos'
   }
 ]
+
+const validateSshHost = (_: any, value: any, callback: any) => {
+  if ((value === null || value === '') && form.value.configuration.useSSH) {
+    callback(new Error('SSH主机不能为空'))
+  }
+  return callback()
+}
+
+const validateSshPort = (_: any, value: any, callback: any) => {
+  if ((value === null || value === '') && form.value.configuration.useSSH) {
+    callback(new Error('SSH端口不能为空'))
+  }
+  return callback()
+}
+
+const validateSshUserName = (_: any, value: any, callback: any) => {
+  if ((value === null || value === '') && form.value.configuration.useSSH) {
+    callback(new Error('SSH用户名不能为空'))
+  }
+  return callback()
+}
+
+const validateSshPassword = (_: any, value: any, callback: any) => {
+  if (
+    (value === null || value === '') &&
+    form.value.configuration.useSSH &&
+    form.value.configuration.sshType === 'password'
+  ) {
+    callback(new Error('SSH密码不能为空'))
+  }
+  return callback()
+}
+
+const validateSshkey = (_: any, value: any, callback: any) => {
+  if (
+    (value === null || value === '' || value === undefined) &&
+    form.value.configuration.useSSH &&
+    form.value.configuration.sshType === 'sshkey'
+  ) {
+    callback(new Error('SSH key不能为空'))
+  }
+  return callback()
+}
+
 const setRules = () => {
   const configRules = {
     'configuration.jdbcUrl': [
@@ -242,7 +286,12 @@ const setRules = () => {
         message: t('common.inputText') + t('datasource.query_timeout'),
         trigger: 'blur'
       }
-    ]
+    ],
+    'configuration.sshHost': [{ validator: validateSshHost, trigger: 'blur' }],
+    'configuration.sshPort': [{ validator: validateSshPort, trigger: 'blur' }],
+    'configuration.sshUserName': [{ validator: validateSshUserName, trigger: 'blur' }],
+    'configuration.sshPassword': [{ validator: validateSshPassword, trigger: 'blur' }],
+    'configuration.sshKey': [{ validator: validateSshkey, trigger: 'blur' }]
   }
   if (['oracle', 'sqlServer', 'pg', 'redshift', 'db2'].includes(form.value.type)) {
     configRules['configuration.schema'] = [
@@ -1016,17 +1065,19 @@ defineExpose({
               autocomplete="off"
             />
           </el-form-item>
-          <span
+          <el-form-item>
-            v-if="!['es', 'api'].includes(form.type)"
+            <span
-            class="de-expand"
+              v-if="!['es', 'api'].includes(form.type) && form.configuration.urlType !== 'jdbcUrl'"
-            @click="showSSH = !showSSH"
+              class="de-expand"
-            >SSH 设置
+              @click="showSSH = !showSSH"
-            <el-icon>
+              >SSH 设置
-              <Icon :name="showSSH ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
+              <el-icon>
-            </el-icon>
+                <Icon :name="showSSH ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
-          </span>
+              </el-icon>
+            </span>
+          </el-form-item>
           <template v-if="showSSH">
-            <el-form-item prop="configuration.sshHost">
+            <el-form-item>
               <el-checkbox v-model="form.configuration.useSSH">启用SSH</el-checkbox>
             </el-form-item>
             <el-form-item label="主机" prop="configuration.sshHost">
@@ -1048,7 +1099,7 @@ defineExpose({
                 controls-position="right"
               />
             </el-form-item>
-            <el-form-item :label="t('datasource.user_name')">
+            <el-form-item :label="t('datasource.user_name')" prop="configuration.sshUserName">
               <el-input
                 :placeholder="t('common.inputText') + t('datasource.user_name')"
                 v-model="form.configuration.sshUserName"
@@ -1056,7 +1107,7 @@ defineExpose({
                 :maxlength="255"
               />
             </el-form-item>
-            <el-form-item label="连接方式" prop="type">
+            <el-form-item label="连接方式">
               <el-radio-group v-model="form.configuration.sshType">
                 <el-radio label="password">密码</el-radio>
                 <el-radio label="sshkey">ssh key</el-radio>
@@ -1065,6 +1116,7 @@ defineExpose({
             <el-form-item
               :label="t('datasource.password')"
               v-if="form.configuration.sshType === 'password'"
+              prop="configuration.sshPassword"
             >
               <CustomPassword
                 :placeholder="t('common.inputText') + t('datasource.password')"
@@ -1097,15 +1149,18 @@ defineExpose({
               />
             </el-form-item>
           </template>
-          <span
+          <el-form-item>
-            v-if="!['es', 'api'].includes(form.type)"
+            <span
-            class="de-expand"
+              v-if="!['es', 'api'].includes(form.type)"
-            @click="showPriority = !showPriority"
+              class="de-expand"
-            >{{ t('datasource.priority') }}
+              @click="showPriority = !showPriority"
-            <el-icon>
+              >{{ t('datasource.priority') }}
-              <Icon :name="showPriority ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
+              <el-icon>
-            </el-icon>
+                <Icon :name="showPriority ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
-          </span>
+              </el-icon>
+            </span>
+          </el-form-item>
+
           <template v-if="showPriority">
             <el-row :gutter="24" class="mb16">
               <el-col :span="12">

core/core-frontend/src/views/visualized/data/datasource/index.vue

@@ -110,6 +110,7 @@ const dsName = ref('')
 const userDrawer = ref(false)
 const rawDatasourceList = ref([])
 const showPriority = ref(true)
+const showSSH = ref(true)
 const datasourceEditor = ref()
 const activeTab = ref('')
 const menuList = [
@@ -1338,6 +1339,35 @@ const getMenuList = (val: boolean) => {
                     </el-col>
                   </el-row>
                 </template>
+                <span
+                  v-if="
+                    !['es', 'api'].includes(nodeInfo.type.toLowerCase()) &&
+                    nodeInfo.configuration.urlType !== 'jdbcUrl'
+                  "
+                  class="de-expand"
+                  @click="showSSH = !showSSH"
+                  >SSH 设置
+                  <el-icon>
+                    <Icon :name="showSSH ? 'icon_down_outlined' : 'icon_down_outlined-1'"></Icon>
+                  </el-icon>
+                </span>
+                <template v-if="showSSH">
+                  <el-row :gutter="24" v-if="nodeInfo.configuration.useSSH">
+                    <el-col :span="12">
+                      <BaseInfoItem label="主机">{{ nodeInfo.configuration.sshHost }}</BaseInfoItem>
+                    </el-col>
+                    <el-col :span="12">
+                      <BaseInfoItem label="端口">{{ nodeInfo.configuration.sshPort }}</BaseInfoItem>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="24" v-if="nodeInfo.configuration.useSSH">
+                    <el-col :span="12">
+                      <BaseInfoItem label="用户名">{{
+                        nodeInfo.configuration.sshUserName
+                      }}</BaseInfoItem>
+                    </el-col>
+                  </el-row>
+                </template>
               </template>
             </template>
           </BaseInfoContent>