fix(useSubscription.ts): name can only contain numbers and letters

emqx · Sep 13, 2023 · 6c70a5d · 6c70a5d
1 parent c72b49c
commit 6c70a5d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/src/composables/config/useSubscription.ts b/src/composables/config/useSubscription.ts
@@ -159,7 +159,24 @@ export const useSubscriptionGroup = () => {
     const keys = Object.keys(value)
     const values = Object.values(value)
     const isAllEmpty = values.every((val) => !val?.length)
-
+    const re = /^[0-9a-zA-Z]*$/g
+    const nodeGroups = Object.entries(value)
+    nodeGroups.forEach(([key, groups]) => {
+      const groupLen = groups.length
+      if (groupLen) {
+        if (!re.test(key)) {
+          callback(new Error(t('config.subscribeSouthDriverDeviceIllegal')))
+        } else {
+          Object.values(groups).forEach((item) => {
+            // 数据更新
+            console.log(re.test(item))
+            if (!re.test(item)) {
+              callback(new Error(t('config.subscribeSouthDriverGroupIllegal')))
+            }
+          })
+        }
+      }
+    })
     if (!keys.length || isAllEmpty) {
       callback(new Error(t('config.subscribeSouthDriverDataRequired')))
     } else {

diff --git a/src/i18n/config.ts b/src/i18n/config.ts
@@ -634,4 +634,12 @@ export default {
     zh: '请输入数组',
     en: 'Please enter an array',
   },
+  subscribeSouthDriverDeviceIllegal: {
+    zh: '注册的设备，名称只能包含数字和字母',
+    en: 'Subscribed devices, names can only contain numbers and letters',
+  },
+  subscribeSouthDriverGroupIllegal: {
+    zh: '设备下的分组，名称只能包含数字和字母',
+    en: 'The group name under the device can only contain numbers and letters',
+  },
 }
diff --git a/src/views/config/components/SouthGroupsCheckbox.vue b/src/views/config/components/SouthGroupsCheckbox.vue
@@ -8,35 +8,37 @@
 
   <section class="southGroupCheckboxGroups" :class="{ 'empty-southGroupCheckboxGroups': !southNodeList.length }">
     <el-collapse v-if="southNodeList.length" v-model="activeNames" @change="handleCollapseStatus">
-      <el-collapse-item v-for="node in southNodeList" :key="node.name" :title="node.name" :name="node.name">
-        <template #title>
-          <i
-            class="icon-arrow"
-            :class="activeNames.includes(node.name) ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
-          />
-          <el-checkbox
-            v-model="node.checkedAll"
-            :indeterminate="isIndeterminateValues[node.name]"
-            class="node-name"
-            @change="handelCheckedAll($event, node.name)"
-          >
-            {{ node.name }}
-          </el-checkbox>
-        </template>
-
-        <main class="groups-wrapper">
-          <el-checkbox-group
-            v-if="isHasGroups(node.name)"
-            v-model="checkedValue[node.name]"
-            @change="handleCheckedGroups($event, node.name)"
-          >
-            <el-checkbox v-for="group in allSouthGroups[node.name]" :key="group" :label="group" class="group-item">
-              {{ group }}
+      <template v-for="node in southNodeList" :key="node.name">
+        <el-collapse-item v-if="isHasGroups(node.name)" :title="node.name" :name="node.name">
+          <template #title>
+            <i
+              class="icon-arrow"
+              :class="activeNames.includes(node.name) ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
+            />
+            <el-checkbox
+              v-model="node.checkedAll"
+              :indeterminate="isIndeterminateValues[node.name]"
+              class="node-name"
+              @change="handelCheckedAll($event, node.name)"
+            >
+              {{ node.name }}
             </el-checkbox>
-          </el-checkbox-group>
-          <span v-else class="empty-groups">{{ $t('common.emptyData') }}</span>
-        </main>
-      </el-collapse-item>
+          </template>
+
+          <main class="groups-wrapper">
+            <el-checkbox-group
+              v-if="isHasGroups(node.name)"
+              v-model="checkedValue[node.name]"
+              @change="handleCheckedGroups($event, node.name)"
+            >
+              <el-checkbox v-for="group in allSouthGroups[node.name]" :key="group" :label="group" class="group-item">
+                {{ group }}
+              </el-checkbox>
+            </el-checkbox-group>
+            <span v-else class="empty-groups">{{ $t('common.emptyData') }}</span>
+          </main>
+        </el-collapse-item>
+      </template>
     </el-collapse>
 
     <span v-else class="empty-groups">{{ $t('common.emptyData') }}</span>