【功能新增】IOT: 产品物模型，30%

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

@@ -33,10 +33,19 @@ const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
 const formData = useVModel(props, 'modelValue', emits) as Ref<any>
 
-/** 属性值的数据类型切换时 */
-const handleChange = () => {
+/** 属性值的数据类型切换时初始化相关数据 */
+const handleChange = (dataType: any) => {
   formData.value.dataSpecsList = []
   formData.value.dataSpecs = {}
+
+  switch (dataType) {
+    case DataSpecsDataType.ENUM:
+      formData.value.dataSpecsList.push({
+        dataType: 'ENUM',
+        name: '', // 枚举项的名称
+        value: undefined // 枚举值
+      })
+  }
 }
 // dataType为INT的dataSpecs示例：
 //

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

@@ -48,6 +48,7 @@ import {
   ThinkModelFunctionVO
 } from '@/api/iot/thinkmodelfunction'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
+import { DataSpecsDataType } from './config'
 
 defineOptions({ name: 'IoTProductThingModelForm' })
 
@@ -68,9 +69,9 @@ const formData = ref({
   name: undefined,
   description: undefined,
   type: ProductFunctionTypeEnum.PROPERTY,
-  dataType: undefined,
+  dataType: DataSpecsDataType.INT,
   dataSpecsList: [],
-  dataSpecs: undefined,
+  dataSpecs: {},
   accessMode: undefined
 })
 const formRules = reactive({
@@ -164,9 +165,9 @@ const resetForm = () => {
     name: undefined,
     description: undefined,
     type: ProductFunctionTypeEnum.PROPERTY,
-    dataType: undefined,
+    dataType: DataSpecsDataType.INT,
     dataSpecsList: [],
-    dataSpecs: undefined,
+    dataSpecs: {},
     accessMode: undefined
   }
   formRef.value?.resetFields()

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

@@ -21,7 +21,7 @@ export interface DataSpecsEnumDataVO {
   dataType: 'ENUM' | 'BOOL'
   defaultValue?: string // 默认值，可选
   name: string // 枚举项的名称
-  value: number // 枚举值
+  value: number | undefined // 枚举值
 }
 
 /** 属性值的数据类型 */

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

@@ -30,8 +30,8 @@ const dataTypeOptions = [
   { value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
   { value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
 ]
-const handleChange = () => {
-  emits('change')
+const handleChange = (value: any) => {
+  emits('change', value)
 }
 </script>
 

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

@@ -1,26 +1,41 @@
 <template>
   <el-form-item label="枚举项" prop="enumItem">
-    <div class="flex items-center justify-between">
-      <span> 参数值 </span>
-      <span> 参数描述 </span>
+    <div class="flex flex-col">
+      <div class="flex items-center justify-between">
+        <span> 参数值 </span>
+        <span> 参数描述 </span>
+      </div>
+      <div
+        v-for="(item, index) in dataSpecsList"
+        :key="index"
+        class="flex items-center justify-between mb-5px"
+      >
+        <el-input v-model="item.value" placeholder="请输入枚举值,如'0'" />
+        <span class="mx-2">~</span>
+        <el-input v-model="item.name" placeholder="对该枚举项的描述" />
+      </div>
+      <el-button link type="primary" @click="addEnum">+添加枚举项</el-button>
     </div>
-    <div v-for="(item, index) in formData" :key="index" class="flex items-center justify-between">
-      <el-input v-model="item.value" placeholder="请输入参数值" />
-      <span class="mx-2">~</span>
-      <el-input v-model="item.name" placeholder="请输入参数描述" />
-    </div>
-    <el-button link type="primary">+添加枚举项</el-button>
   </el-form-item>
 </template>
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
+import { DataSpecsEnumDataVO } from '@/views/iot/product/product/detail/ThingModel/config'
 
 /** 枚举型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelEnumTypeDataSpecs' })
 const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
-const formData = useVModel(props, 'modelValue', emits)
+const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<DataSpecsEnumDataVO[]>
+
+const addEnum = () => {
+  dataSpecsList.value.push({
+    dataType: 'ENUM',
+    name: '', // 枚举项的名称
+    value: undefined // 枚举值
+  })
+}
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -1,17 +1,17 @@
 <template>
   <el-form-item label="取值范围" prop="max">
     <div class="flex items-center justify-between">
-      <el-input v-model="formData.min" placeholder="请输入最小值" />
+      <el-input v-model="dataSpecs.min" placeholder="请输入最小值" />
       <span class="mx-2">~</span>
-      <el-input v-model="formData.max" placeholder="请输入最大值" />
+      <el-input v-model="dataSpecs.max" placeholder="请输入最大值" />
     </div>
   </el-form-item>
   <el-form-item label="步长" prop="step">
-    <el-input v-model="formData.step" placeholder="请输入步长" />
+    <el-input v-model="dataSpecs.step" placeholder="请输入步长" />
   </el-form-item>
   <el-form-item label="单位" prop="unit">
     <el-select
-      :model-value="formData.unit ? formData.unitName + '-' + formData.unit : ''"
+      :model-value="dataSpecs.unit ? dataSpecs.unitName + '-' + dataSpecs.unit : ''"
       filterable
       placeholder="请选择单位"
       style="width: 240px"
@@ -36,13 +36,13 @@ import { DataSpecsNumberDataVO } from '../config'
 defineOptions({ name: 'ThingModelNumberTypeDataSpecs' })
 const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
-const formData = useVModel(props, 'modelValue', emits) as Ref<DataSpecsNumberDataVO>
+const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<DataSpecsNumberDataVO>
 
 /** 单位发生变化时触发 */
 const unitChange = (UnitSpecs: string) => {
   const [unitName, unit] = UnitSpecs.split('-')
-  formData.value.unitName = unitName
-  formData.value.unit = unit
+  dataSpecs.value.unitName = unitName
+  dataSpecs.value.unit = unit
 }
 </script>