【代码完善】IOT: ThingModel StructDataSpecs 组件

src/views/iot/thingmodel/ThingModelDataSpecs.vue

@@ -29,12 +29,7 @@
     v-model="property.dataSpecsList"
   />
   <!-- 布尔型配置 -->
-  <el-form-item
-    v-if="property.dataType === DataSpecsDataType.BOOL"
-    :rules="[{ required: true, message: '请输入布尔值名称', trigger: 'blur' }]"
-    label="布尔值"
-    prop="property.dataSpecsList"
-  >
+  <el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值">
     <template v-for="(item, index) in property.dataSpecsList" :key="item.value">
       <div class="flex items-center justify-start w-1/1 mb-5px">
         <span>{{ item.value }}</span>
@@ -59,10 +54,6 @@
   <!-- 文本型配置 -->
   <el-form-item
     v-if="property.dataType === DataSpecsDataType.TEXT"
-    :rules="[
-      { required: true, message: '请输入文本字节长度', trigger: 'blur' },
-      { validator: validateTextLength, trigger: 'blur' }
-    ]"
     label="数据长度"
     prop="property.dataSpecs.length"
   >
@@ -84,12 +75,7 @@
     v-if="property.dataType === DataSpecsDataType.STRUCT"
     v-model="property.dataSpecsList"
   />
-  <el-form-item
-    v-if="!isStructDataSpecs"
-    :rules="[{ required: true, message: '请选择读写类型', trigger: 'change' }]"
-    label="读写类型"
-    prop="property.accessMode"
-  >
+  <el-form-item v-if="!isStructDataSpecs" label="读写类型" prop="property.accessMode">
     <el-radio-group v-model="property.accessMode">
       <el-radio label="rw">读写</el-radio>
       <el-radio label="r">只读</el-radio>
@@ -108,15 +94,14 @@
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import { DataSpecsDataType, dataTypeOptions } from './config'
+import { DataSpecsDataType, dataTypeOptions, validateBoolName } from './config'
 import {
   ThingModelArrayDataSpecs,
   ThingModelEnumDataSpecs,
-  ThingModelNumberDataSpecs
+  ThingModelNumberDataSpecs,
+  ThingModelStructDataSpecs
 } from './dataSpecs'
-import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
 import { ThingModelProperty } from '@/api/iot/thingmodel'
-import { isEmpty } from '@/utils/is'
 
 /** IoT 物模型数据 */
 defineOptions({ name: 'ThingModelDataSpecs' })
@@ -157,45 +142,6 @@ const handleChange = (dataType: any) => {
       break
   }
 }
-
-// TODO @puhui999：一些校验的规则，是不是写到 utils 里。
-/** 校验布尔值名称 */
-const validateBoolName = (_: any, value: string, callback: any) => {
-  if (isEmpty(value)) {
-    callback(new Error('布尔值名称不能为空'))
-    return
-  }
-  // 检查开头字符
-  if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
-    callback(new Error('布尔值名称必须以中文、英文字母或数字开头'))
-    return
-  }
-  // 检查整体格式
-  if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
-    callback(new Error('布尔值名称只能包含中文、英文字母、数字、下划线和短划线'))
-    return
-  }
-  // 检查长度（一个中文算一个字符）
-  if (value.length > 20) {
-    callback(new Error('布尔值名称长度不能超过20个字符'))
-    return
-  }
-
-  callback()
-}
-
-/** 校验文本长度 */
-const validateTextLength = (_: any, value: any, callback: any) => {
-  if (isEmpty(value)) {
-    callback(new Error('文本长度不能为空'))
-    return
-  }
-  if (isNaN(Number(value))) {
-    callback(new Error('文本长度必须是数字'))
-    return
-  }
-  callback()
-}
 </script>
 
 <style lang="scss" scoped>

src/views/iot/thingmodel/config.ts

@@ -105,5 +105,47 @@ export const ThingModelFormRules = {
       },
       trigger: 'blur'
     }
-  ]
+  ],
+  'property.dataSpecs.length': [
+    { required: true, message: '请输入文本字节长度', trigger: 'blur' },
+    {
+      validator: (_: any, value: any, callback: any) => {
+        if (isEmpty(value)) {
+          callback(new Error('文本长度不能为空'))
+          return
+        }
+        if (isNaN(Number(value))) {
+          callback(new Error('文本长度必须是数字'))
+          return
+        }
+        callback()
+      },
+      trigger: 'blur'
+    }
+  ],
+  'property.accessMode': [{ required: true, message: '请选择读写类型', trigger: 'change' }]
+}
+/** 校验布尔值名称 */
+export const validateBoolName = (_: any, value: string, callback: any) => {
+  if (isEmpty(value)) {
+    callback(new Error('布尔值名称不能为空'))
+    return
+  }
+  // 检查开头字符
+  if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
+    callback(new Error('布尔值名称必须以中文、英文字母或数字开头'))
+    return
+  }
+  // 检查整体格式
+  if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
+    callback(new Error('布尔值名称只能包含中文、英文字母、数字、下划线和短划线'))
+    return
+  }
+  // 检查长度（一个中文算一个字符）
+  if (value.length > 20) {
+    callback(new Error('布尔值名称长度不能超过20个字符'))
+    return
+  }
+
+  callback()
 }

src/views/iot/thingmodel/dataSpecs/ThingModelArrayDataSpecs.vue

 <template>
   <el-form-item label="元素类型" prop="property.dataSpecs.childDataType">
-    <el-radio-group v-model="dataSpecs.childDataType">
+    <el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
       <template v-for="item in dataTypeOptions" :key="item.value">
         <el-radio
           v-if="
@@ -18,11 +18,17 @@
   <el-form-item label="元素个数" prop="property.dataSpecs.size">
     <el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
   </el-form-item>
+  <!-- Struct 型配置-->
+  <ThingModelStructDataSpecs
+    v-if="dataSpecs.childDataType === DataSpecsDataType.STRUCT"
+    v-model="dataSpecs.dataSpecsList"
+  />
 </template>
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { DataSpecsDataType, dataTypeOptions } from '../config'
+import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
 
 /** 数组型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelArrayDataSpecs' })
@@ -30,6 +36,15 @@ defineOptions({ name: 'ThingModelArrayDataSpecs' })
 const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
 const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
+
+/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
+const handleChange = (val: string) => {
+  if (val !== DataSpecsDataType.STRUCT) {
+    return
+  }
+
+  dataSpecs.value.dataSpecsList = []
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/iot/thingmodel/dataSpecs/ThingModelEnumDataSpecs.vue

@@ -2,7 +2,6 @@
   <el-form-item
     :rules="[{ required: true, validator: validateEnumList, trigger: 'change' }]"
     label="枚举项"
-    prop="property.dataSpecsList"
   >
     <div class="flex flex-col">
       <div class="flex items-center">

src/views/iot/thingmodel/ThingModelStructDataSpecs.vue → src/views/iot/thingmodel/dataSpecs/ThingModelStructDataSpecs.vue

 <template>
   <!-- struct 数据展示 -->
-  <el-form-item label="JSON 对象">
+  <el-form-item
+    :rules="[{ required: true, validator: validateList, trigger: 'change' }]"
+    label="JSON 对象"
+  >
     <div
       v-for="(item, index) in dataSpecsList"
       :key="index"
@@ -44,8 +47,8 @@
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import ThingModelDataSpecs from '@/views/iot/thingmodel/ThingModelDataSpecs.vue'
-import { DataSpecsDataType, ThingModelFormRules } from '@/views/iot/thingmodel/config'
+import ThingModelDataSpecs from '../ThingModelDataSpecs.vue'
+import { DataSpecsDataType, ThingModelFormRules } from '../config'
 import { isEmpty } from '@/utils/is'
 
 /** Struct 型的 dataSpecs 配置组件 */
@@ -140,6 +143,15 @@ const resetForm = () => {
   }
   structFormRef.value?.resetFields()
 }
+
+/** 校验 struct 不能为空 */
+const validateList = (_: any, __: any, callback: any) => {
+  if (isEmpty(dataSpecsList.value)) {
+    callback(new Error('struct 不能为空'))
+    return
+  }
+  callback()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/iot/thingmodel/dataSpecs/index.ts

 import ThingModelEnumDataSpecs from './ThingModelEnumDataSpecs.vue'
 import ThingModelNumberDataSpecs from './ThingModelNumberDataSpecs.vue'
 import ThingModelArrayDataSpecs from './ThingModelArrayDataSpecs.vue'
+import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
 
-export { ThingModelEnumDataSpecs, ThingModelNumberDataSpecs, ThingModelArrayDataSpecs }
+export {
+  ThingModelEnumDataSpecs,
+  ThingModelNumberDataSpecs,
+  ThingModelArrayDataSpecs,
+  ThingModelStructDataSpecs
+}