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

Author: puhui999

src/api/iot/thinkmodelfunction/index.ts

@@ -1,17 +1,40 @@
 import request from '@/config/axios'
 
-// IoT 产品物模型 VO
-export interface ThinkModelFunctionVO {
-  id: number // 物模型功能编号
-  identifier: string // 功能标识
-  name: string // 功能名称
-  description: string // 功能描述
-  productId: number // 产品编号
-  productKey: string // 产品标识
-  type: number // 功能类型
-  property: string // 属性
-  event: string // 事件
-  service: string // 服务
+/**
+ * IoT 产品物模型
+ */
+export interface ThingModelData {
+  id?: number // 物模型功能编号
+  identifier?: string // 功能标识
+  name?: string // 功能名称
+  description?: string // 功能描述
+  productId?: number // 产品编号
+  productKey?: string // 产品标识
+  type: ProductFunctionTypeEnum // 功能类型
+  property: ThingModelProperty // 属性
+  event?: ThingModelEvent // 事件
+  service?: ThingModelService // 服务
+}
+
+/**
+ * ThingModelProperty 类型
+ */
+export interface ThingModelProperty {
+  [key: string]: any
+}
+
+/**
+ * ThingModelEvent 类型
+ */
+export interface ThingModelEvent {
+  [key: string]: any
+}
+
+/**
+ * ThingModelService 类型
+ */
+export interface ThingModelService {
+  [key: string]: any
 }
 
 // IOT 产品功能（物模型）类型枚举类
@@ -47,22 +70,17 @@ export const ThinkModelFunctionApi = {
   },
 
   // 新增产品物模型
-  createThinkModelFunction: async (data: ThinkModelFunctionVO) => {
+  createThinkModelFunction: async (data: ThingModelData) => {
     return await request.post({ url: `/iot/think-model-function/create`, data })
   },
 
   // 修改产品物模型
-  updateThinkModelFunction: async (data: ThinkModelFunctionVO) => {
+  updateThinkModelFunction: async (data: ThingModelData) => {
     return await request.put({ url: `/iot/think-model-function/update`, data })
   },
 
   // 删除产品物模型
   deleteThinkModelFunction: async (id: number) => {
     return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
-  },
-
-  // 导出产品物模型 Excel
-  exportThinkModelFunction: async (params) => {
-    return await request.download({ url: `/iot/think-model-function/export-excel`, params })
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <el-form-item label="数据类型" prop="dataType">
-    <el-select v-model="formData.dataType" placeholder="请选择数据类型" @change="handleChange">
+    <el-select v-model="property.dataType" placeholder="请选择数据类型" @change="handleChange">
       <el-option
         v-for="option in dataTypeOptions"
         :key="option.value"
@@ -13,19 +13,19 @@
   <ThingModelNumberTypeDataSpecs
     v-if="
       [DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
-        formData.dataType || ''
+        property.dataType || ''
       )
     "
-    v-model="formData.dataSpecs"
+    v-model="property.dataSpecs"
   />
   <!-- 枚举型配置 -->
   <ThingModelEnumTypeDataSpecs
-    v-if="formData.dataType === DataSpecsDataType.ENUM"
-    v-model="formData.dataSpecsList"
+    v-if="property.dataType === DataSpecsDataType.ENUM"
+    v-model="property.dataSpecsList"
   />
   <!-- 布尔型配置 -->
-  <el-form-item label="布尔值" prop="bool" v-if="formData.dataType === DataSpecsDataType.BOOL">
-    <template v-for="item in formData.dataSpecsList" :key="item.value">
+  <el-form-item label="布尔值" prop="bool" v-if="property.dataType === DataSpecsDataType.BOOL">
+    <template v-for="item in property.dataSpecsList" :key="item.value">
       <div class="flex items-center justify-start w-1/1 mb-5px">
         <span>{{ item.value }}</span>
         <span class="mx-2">-</span>
@@ -38,20 +38,29 @@
     </template>
   </el-form-item>
   <!-- 文本型配置 -->
-  <el-form-item label="数据长度" prop="text" v-if="formData.dataType === DataSpecsDataType.TEXT">
-    <el-input v-model="formData.length" class="w-255px!" placeholder="请输入文本字节长度">
+  <el-form-item label="数据长度" prop="text" v-if="property.dataType === DataSpecsDataType.TEXT">
+    <el-input v-model="property.length" class="w-255px!" placeholder="请输入文本字节长度">
       <template #append>字节</template>
     </el-input>
   </el-form-item>
   <!-- 时间型配置 -->
-  <el-form-item label="时间格式" prop="date" v-if="formData.dataType === DataSpecsDataType.DATE">
+  <el-form-item label="时间格式" prop="date" v-if="property.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"
+    v-model="property.dataSpecs"
+    v-if="property.dataType === DataSpecsDataType.ARRAY"
   />
+  <el-form-item label="读写类型" prop="accessMode">
+    <el-radio-group v-model="property.accessMode">
+      <el-radio label="rw">读写</el-radio>
+      <el-radio label="r">只读</el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="属性描述" prop="description">
+    <el-input v-model="property.description" placeholder="请输入属性描述" type="textarea" />
+  </el-form-item>
 </template>
 
 <script lang="ts" setup>
@@ -62,46 +71,47 @@ import {
   ThingModelEnumTypeDataSpecs,
   ThingModelNumberTypeDataSpecs
 } from './dataSpecs'
+import { ThingModelProperty } from '@/api/iot/thinkmodelfunction'
 
 /** 物模型数据 */
 defineOptions({ name: 'ThingModelDataSpecs' })
 const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
-const formData = useVModel(props, 'modelValue', emits) as Ref<any>
+const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
 
 /** 属性值的数据类型切换时初始化相关数据 */
 const handleChange = (dataType: any) => {
-  formData.value.dataSpecsList = []
-  formData.value.dataSpecs = {}
+  property.value.dataSpecsList = []
+  property.value.dataSpecs = {}
 
   switch (dataType) {
     case DataSpecsDataType.INT:
-      formData.value.dataSpecs.dataType = DataSpecsDataType.INT
+      property.value.dataSpecs.dataType = DataSpecsDataType.INT
       break
     case DataSpecsDataType.DOUBLE:
-      formData.value.dataSpecs.dataType = DataSpecsDataType.DOUBLE
+      property.value.dataSpecs.dataType = DataSpecsDataType.DOUBLE
       break
     case DataSpecsDataType.FLOAT:
-      formData.value.dataSpecs.dataType = DataSpecsDataType.FLOAT
+      property.value.dataSpecs.dataType = DataSpecsDataType.FLOAT
       break
     case DataSpecsDataType.ENUM:
-      formData.value.dataSpecsList.push({
+      property.value.dataSpecsList.push({
         dataType: DataSpecsDataType.ENUM,
         name: '', // 枚举项的名称
         value: undefined // 枚举值
       })
       break
     case DataSpecsDataType.BOOL:
       for (let i = 0; i < 2; i++) {
-        formData.value.dataSpecsList.push({
+        property.value.dataSpecsList.push({
           dataType: DataSpecsDataType.BOOL,
           name: '', // 布尔值的名称
           value: i // 布尔值
         })
       }
       break
     case DataSpecsDataType.ARRAY:
-      formData.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
+      property.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
       break
   }
 }

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

@@ -20,16 +20,11 @@
       <el-form-item label="标识符" prop="identifier">
         <el-input v-model="formData.identifier" placeholder="请输入标识符" />
       </el-form-item>
-      <ThingModelDataSpecs v-model="formData" />
-      <el-form-item label="读写类型" prop="accessMode">
-        <el-radio-group v-model="formData.accessMode">
-          <el-radio label="rw">读写</el-radio>
-          <el-radio label="r">只读</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="属性描述" prop="property.description">
-        <el-input v-model="formData.description" placeholder="请输入属性描述" type="textarea" />
-      </el-form-item>
+      <!-- 属性配置 -->
+      <ThingModelDataSpecs
+        v-model="formData.property"
+        v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
+      />
     </el-form>
 
     <template #footer>
@@ -45,7 +40,7 @@ import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
 import {
   ProductFunctionTypeEnum,
   ThinkModelFunctionApi,
-  ThinkModelFunctionVO
+  ThingModelData
 } from '@/api/iot/thinkmodelfunction'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
 import { DataSpecsDataType } from './config'
@@ -61,18 +56,13 @@ const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref('')
-const formData = ref({
-  id: undefined,
-  productId: undefined,
-  productKey: undefined,
-  identifier: undefined,
-  name: undefined,
-  description: undefined,
+const formData = ref<ThingModelData>({
   type: ProductFunctionTypeEnum.PROPERTY,
-  dataType: DataSpecsDataType.INT,
-  dataSpecsList: [],
-  dataSpecs: {},
-  accessMode: undefined
+  property: {
+    dataType: DataSpecsDataType.INT,
+    dataSpecsList: [],
+    dataSpecs: {}
+  }
 })
 const formRules = reactive({
   name: [
@@ -138,7 +128,7 @@ const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
   try {
-    const data = formData.value as unknown as ThinkModelFunctionVO
+    const data = formData.value as unknown as ThingModelData
     data.productId = product!.value.id
     data.productKey = product!.value.productKey
     if (formType.value === 'create') {
@@ -158,17 +148,12 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: undefined,
-    productId: undefined,
-    productKey: undefined,
-    identifier: undefined,
-    name: undefined,
-    description: undefined,
     type: ProductFunctionTypeEnum.PROPERTY,
-    dataType: DataSpecsDataType.INT,
-    dataSpecsList: [],
-    dataSpecs: {},
-    accessMode: undefined
+    property: {
+      dataType: DataSpecsDataType.INT,
+      dataSpecsList: [],
+      dataSpecs: {}
+    }
   }
   formRef.value?.resetFields()
 }

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

@@ -24,7 +24,7 @@
 import { useVModel } from '@vueuse/core'
 import { DataSpecsDataType, dataTypeOptions } from '../config'
 
-/** 数值型的 dataSpecs 配置组件 */
+/** 数组型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelArrayTypeDataSpecs' })
 const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])