FIxed(*): triggering validate form when swithing lang, and so on.

src/composables/config/useDriver.ts

@@ -14,9 +14,11 @@ import { statusIconClassMap, statusTextMap, connectionStatusTextMap } from '@/ut
 export const useDriverStatus = (props: { data: DriverItemInList }) => {
   const { t } = useI18n()
 
-  const statusIcon = computed(() => statusIconClassMap[props.data.running])
-  const statusText = computed(() => t(`${statusTextMap[props.data.running]}`) || '-')
-  const connectionStatusText = computed(() => t(`${connectionStatusTextMap[props.data.link]}`))
+  const statusIcon = computed(() => (props.data?.running ? statusIconClassMap[props.data.running] : ''))
+  const statusText = computed(() => (props.data?.running ? t(`${statusTextMap[props.data.running]}`) || '-' : ''))
+  const connectionStatusText = computed(() =>
+    Number(props.data?.link) >= 0 ? t(`${connectionStatusTextMap[props.data.link]}`) : '',
+  )
 
   return {
     statusIconClassMap,

src/views/config/components/DriverDialog.vue

@@ -47,7 +47,7 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, defineEmits, defineProps, watch } from 'vue'
+import { computed, defineEmits, defineProps, watch, nextTick } from 'vue'
 import { ElDialog } from 'element-plus'
 import useDriverDialog from '@/composables/config/useDriverDialog'
 import type { DriverDirection } from '@/types/enums'
@@ -97,6 +97,9 @@ const showDialog = computed({
 })
 
 watch(showDialog, (val) => {
+  nextTick(() => {
+    formCom.value.form.clearValidate()
+  })
   if (!val) {
     initForm()
   }

src/views/config/components/GroupDialog.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, defineProps, defineEmits } from 'vue'
+import { ref, computed, defineProps, defineEmits, nextTick, watch } from 'vue'
 import type { PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { ElDialog } from 'element-plus'
@@ -122,14 +122,20 @@ const initForm = () => {
 const showDialog = computed({
   get: () => props.dialogVisible,
   set: (val: boolean) => {
-    if (!val) {
-      resetFields()
-      initForm()
-    }
     emit('update:dialogVisible', val)
   },
 })
 
+watch(showDialog, async (val) => {
+  nextTick(() => {
+    formRef.value.form.clearValidate()
+  })
+  if (!val) {
+    resetFields()
+    initForm()
+  }
+})
+
 const submit = async () => {
   await formRef.value.validate()
   emit('submitted')

src/views/config/northDriver/Index.vue

@@ -228,7 +228,7 @@ const getNodeValue = (node: DriverItemInList) => {
 
 const rowClassName = (data: { row: DriverItemInList; rowIndex: number }) => {
   const { row: node } = data
-  return isMonitorNode(node.name) ? 'row-disabled' : ''
+  return isMonitorNode(node.name) ? 'row-disabled' : 'table-row-click'
 }
 
 const handleClickOperator = async (command: string, row: DriverItemInList) => {

src/views/config/southDriver/components/GroupDialog.vue

@@ -8,7 +8,7 @@
   >
     <emqx-form ref="formCom" :model="groupForm" :rules="groupFormRules">
       <emqx-form-item prop="group" :label="$t('config.groupName')" required>
-        <emqx-input v-model.trim="groupForm.group" :disabled="group" />
+        <emqx-input v-model.trim="groupForm.group" :disabled="!!group" />
       </emqx-form-item>
       <emqx-form-item prop="interval" :label="$t('config.interval')" required>
         <emqx-input v-model.number="groupForm.interval" :disabled="group && !isEdit">
@@ -38,7 +38,7 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, defineProps, defineEmits, watch } from 'vue'
+import { computed, defineProps, defineEmits, watch, nextTick } from 'vue'
 import { ElDialog } from 'element-plus'
 import useAddGroup from '@/composables/config/useAddGroup'
 import type { GroupForm } from '@/types/config'
@@ -78,6 +78,9 @@ const confirmBtnText = computed(() => {
 })
 
 watch(showDialog, async (val) => {
+  nextTick(() => {
+    formCom.value.form.clearValidate()
+  })
   if (!val) {
     resetFields()
     initForm()

src/views/config/template/components/TemplateDialog.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps, defineEmits, watch } from 'vue'
+import { computed, defineProps, defineEmits, watch, nextTick } from 'vue'
 import type { PropType } from 'vue'
 import { ElDialog } from 'element-plus'
 import useTemplateDialog from '@/composables/config/useTemplateDialog'
@@ -66,6 +66,9 @@ const showDialog = computed({
 })
 
 watch(showDialog, (val) => {
+  nextTick(() => {
+    formRef.value.form.clearValidate()
+  })
   if (!val) {
     initForm()
     emit('cancel')