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

187b5b03 · puhui999 · 488800b3 · 187b5b03 · 187b5b03 · 187b5b03
Commit 187b5b03 authored Dec 15, 2024 by puhui999
4 changed files
--- a/src/api/iot/thinkmodelfunction/index.ts
+++ b/src/api/iot/thinkmodelfunction/index.ts
 import request from '@/config/axios'
-// IoT 产品物模型 VO
+/**
-export interface ThinkModelFunctionVO {
+ * IoT 产品物模型
-  id: number // 物模型功能编号
+ */
-  identifier: string // 功能标识
+export interface ThingModelData {
-  name: string // 功能名称
+  id?: number // 物模型功能编号
-  description: string // 功能描述
+  identifier?: string // 功能标识
-  productId: number // 产品编号
+  name?: string // 功能名称
-  productKey: string // 产品标识
+  description?: string // 功能描述
-  type: number // 功能类型
+  productId?: number // 产品编号
-  property: string // 属性
+  productKey?: string // 产品标识
-  event: string // 事件
+  type: ProductFunctionTypeEnum // 功能类型
-  service: string // 服务
+  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 })
  }
 }
--- a/src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
+++ b/src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
 <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-if="property.dataType === DataSpecsDataType.ENUM"
-    v-model="formData.dataSpecsList"
+    v-model="property.dataSpecsList"
  />
  <!-- 布尔型配置 -->
-  <el-form-item label="布尔值" prop="bool" v-if="formData.dataType === DataSpecsDataType.BOOL">
+  <el-form-item label="布尔值" prop="bool" v-if="property.dataType === DataSpecsDataType.BOOL">
-    <template v-for="item in formData.dataSpecsList" :key="item.value">
+    <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-form-item label="数据长度" prop="text" v-if="property.dataType === DataSpecsDataType.TEXT">
-    <el-input v-model="formData.length" class="w-255px!" placeholder="请输入文本字节长度">
+    <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-model="property.dataSpecs"
-    v-if="formData.dataType === DataSpecsDataType.ARRAY"
+    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,30 +71,31 @@ 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 = []
+  property.value.dataSpecsList = []
-  formData.value.dataSpecs = {}
+  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 // 枚举值
@@ -93,7 +103,7 @@ const handleChange = (dataType: any) => {
      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 // 布尔值
@@ -101,7 +111,7 @@ const handleChange = (dataType: any) => {
      }
      break
    case DataSpecsDataType.ARRAY:
-      formData.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
+      property.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
      break
  }
 }

--- a/src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
+++ b/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">
+      <ThingModelDataSpecs
-        <el-radio-group v-model="formData.accessMode">
+        v-model="formData.property"
-          <el-radio label="rw">读写</el-radio>
+        v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
-          <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>
    </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({
+const formData = ref<ThingModelData>({
-  id: undefined,
-  productId: undefined,
-  productKey: undefined,
-  identifier: undefined,
-  name: undefined,
-  description: undefined,
  type: ProductFunctionTypeEnum.PROPERTY,
-  dataType: DataSpecsDataType.INT,
+  property: {
-  dataSpecsList: [],
+    dataType: DataSpecsDataType.INT,
-  dataSpecs: {},
+    dataSpecsList: [],
-  accessMode: undefined
+    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,
+    property: {
-    dataSpecsList: [],
+      dataType: DataSpecsDataType.INT,
-    dataSpecs: {},
+      dataSpecsList: [],
-    accessMode: undefined
+      dataSpecs: {}
+    }
  }
  formRef.value?.resetFields()
 }

--- a/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelArrayTypeDataSpecs.vue
+++ b/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'])