【功能完善】IOT: 物模型数组数据类型组件完善

Author: puhui999

src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue

@@ -47,12 +47,21 @@
   <el-form-item label="时间格式" prop="date" v-if="formData.dataType === DataSpecsDataType.DATE">
     <el-input disabled class="w-255px!" placeholder="String类型的UTC时间戳（毫秒）" />
   </el-form-item>
+  <!-- 数组型配置-->
+  <ThingModelArrayTypeDataSpecs
+    v-model="formData.dataSpecs"
+    v-if="formData.dataType === DataSpecsDataType.ARRAY"
+  />
 </template>
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { DataSpecsDataType, dataTypeOptions } from './config'
-import { ThingModelEnumTypeDataSpecs, ThingModelNumberTypeDataSpecs } from './dataSpecs'
+import {
+  ThingModelArrayTypeDataSpecs,
+  ThingModelEnumTypeDataSpecs,
+  ThingModelNumberTypeDataSpecs
+} from './dataSpecs'
 
 /** 物模型数据 */
 defineOptions({ name: 'ThingModelDataSpecs' })
@@ -91,6 +100,9 @@ const handleChange = (dataType: any) => {
         })
       }
       break
+    case DataSpecsDataType.ARRAY:
+      formData.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
+      break
   }
 }
 </script>

src/views/iot/product/product/detail/ThingModel/config.ts

@@ -10,12 +10,6 @@ export interface DataSpecsNumberDataVO {
   unitName: string // 单位的名称
 }
 
-/** dataSpecs 文本型数据结构 */
-export interface DataSpecsTextDataVO {
-  dataType: 'TEXT'
-  length: number
-}
-
 /** dataSpecs 枚举型数据结构 */
 export interface DataSpecsEnumOrBoolDataVO {
   dataType: 'enum' | 'bool'

src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelArrayTypeDataSpecs.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-form-item label="元素类型" prop="childDataType">
+    <el-radio-group v-model="dataSpecs.childDataType">
+      <template v-for="item in dataTypeOptions" :key="item.value">
+        <el-radio
+          :value="item.value"
+          v-if="
+            !(
+              [DataSpecsDataType.ENUM, DataSpecsDataType.ARRAY, DataSpecsDataType.DATE] as any[]
+            ).includes(item.value)
+          "
+        >
+          {{ item.label }}
+        </el-radio>
+      </template>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="元素个数" prop="size">
+    <el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
+  </el-form-item>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { DataSpecsDataType, dataTypeOptions } from '../config'
+
+/** 数值型的 dataSpecs 配置组件 */
+defineOptions({ name: 'ThingModelArrayTypeDataSpecs' })
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
+</script>
+
+<style lang="scss" scoped></style>

src/views/iot/product/product/detail/ThingModel/dataSpecs/index.ts

@@ -1,4 +1,5 @@
 import ThingModelEnumTypeDataSpecs from './ThingModelEnumTypeDataSpecs.vue'
 import ThingModelNumberTypeDataSpecs from './ThingModelNumberTypeDataSpecs.vue'
+import ThingModelArrayTypeDataSpecs from './ThingModelArrayTypeDataSpecs.vue'
 
-export { ThingModelEnumTypeDataSpecs, ThingModelNumberTypeDataSpecs }
+export { ThingModelEnumTypeDataSpecs, ThingModelNumberTypeDataSpecs, ThingModelArrayTypeDataSpecs }