【功能完善】IOT: 产品物模型-属性

puhui999 · puhui999 · commit e36e48586e78 · 2024-12-16T17:47:02.000+08:00
diff --git a/src/api/iot/thinkmodelfunction/index.ts b/src/api/iot/thinkmodelfunction/index.ts
@@ -10,6 +10,7 @@ export interface ThingModelData {
   description?: string // 功能描述
   productId?: number // 产品编号
   productKey?: string // 产品标识
+  dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
   type: ProductFunctionTypeEnum // 功能类型
   property: ThingModelProperty // 属性
   event?: ThingModelEvent // 事件
@@ -53,34 +54,35 @@ export enum ProductFunctionAccessModeEnum {
 // IoT 产品物模型 API
 export const ThinkModelFunctionApi = {
   // 查询产品物模型分页
-  getThinkModelFunctionPage: async (params: any) => {
-    return await request.get({ url: `/iot/think-model-function/page`, params })
+  getProductThingModelPage: async (params: any) => {
+    return await request.get({ url: `/iot/product-thing-model/page`, params })
   },
+
   // 获得产品物模型
-  getThinkModelFunctionListByProductId: async (params: any) => {
+  getProductThingModelListByProductId: async (params: any) => {
     return await request.get({
-      url: `/iot/think-model-function/list-by-product-id`,
+      url: `/iot/product-thing-model/list-by-product-id`,
       params
     })
   },
 
   // 查询产品物模型详情
-  getThinkModelFunction: async (id: number) => {
-    return await request.get({ url: `/iot/think-model-function/get?id=` + id })
+  getProductThingModel: async (id: number) => {
+    return await request.get({ url: `/iot/product-thing-model/get?id=` + id })
   },
 
   // 新增产品物模型
-  createThinkModelFunction: async (data: ThingModelData) => {
-    return await request.post({ url: `/iot/think-model-function/create`, data })
+  createProductThingModel: async (data: ThingModelData) => {
+    return await request.post({ url: `/iot/product-thing-model/create`, data })
   },
 
   // 修改产品物模型
-  updateThinkModelFunction: async (data: ThingModelData) => {
-    return await request.put({ url: `/iot/think-model-function/update`, data })
+  updateProductThingModel: async (data: ThingModelData) => {
+    return await request.put({ url: `/iot/product-thing-model/update`, data })
   },
 
   // 删除产品物模型
-  deleteThinkModelFunction: async (id: number) => {
-    return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
+  deleteProductThingModel: async (id: number) => {
+    return await request.delete({ url: `/iot/product-thing-model/delete?id=` + id })
   }
 }
diff --git a/src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue b/src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
@@ -24,34 +24,35 @@
     v-model="property.dataSpecsList"
   />
   <!-- 布尔型配置 -->
-  <el-form-item label="布尔值" prop="bool" v-if="property.dataType === DataSpecsDataType.BOOL">
+  <el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值" prop="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>
         <el-input
           v-model="item.name"
-          class="w-255px!"
           :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
+          class="w-255px!"
         />
       </div>
     </template>
   </el-form-item>
   <!-- 文本型配置 -->
-  <el-form-item label="数据长度" prop="text" v-if="property.dataType === DataSpecsDataType.TEXT">
-    <el-input v-model="property.length" class="w-255px!" placeholder="请输入文本字节长度">
+  <el-form-item v-if="property.dataType === DataSpecsDataType.TEXT" label="数据长度" prop="text">
+    <el-input v-model="property.dataSpecs.length" class="w-255px!" placeholder="请输入文本字节长度">
       <template #append>字节</template>
     </el-input>
   </el-form-item>
   <!-- 时间型配置 -->
-  <el-form-item label="时间格式" prop="date" v-if="property.dataType === DataSpecsDataType.DATE">
-    <el-input disabled class="w-255px!" placeholder="String类型的UTC时间戳（毫秒）" />
+  <el-form-item v-if="property.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
+    <el-input class="w-255px!" disabled placeholder="String类型的UTC时间戳（毫秒）" />
   </el-form-item>
   <!-- 数组型配置-->
   <ThingModelArrayTypeDataSpecs
-    v-model="property.dataSpecs"
     v-if="property.dataType === DataSpecsDataType.ARRAY"
+    v-model="property.dataSpecs"
   />
+  <!-- TODO puhui999: Struct 属性待完善 -->
   <el-form-item label="读写类型" prop="accessMode">
     <el-radio-group v-model="property.accessMode">
       <el-radio label="rw">读写</el-radio>
@@ -84,16 +85,8 @@ const handleChange = (dataType: any) => {
   property.value.dataSpecsList = []
   property.value.dataSpecs = {}
 
+  property.value.dataSpecs.dataType = dataType
   switch (dataType) {
-    case DataSpecsDataType.INT:
-      property.value.dataSpecs.dataType = DataSpecsDataType.INT
-      break
-    case DataSpecsDataType.DOUBLE:
-      property.value.dataSpecs.dataType = DataSpecsDataType.DOUBLE
-      break
-    case DataSpecsDataType.FLOAT:
-      property.value.dataSpecs.dataType = DataSpecsDataType.FLOAT
-      break
     case DataSpecsDataType.ENUM:
       property.value.dataSpecsList.push({
         dataType: DataSpecsDataType.ENUM,
@@ -110,9 +103,6 @@ const handleChange = (dataType: any) => {
         })
       }
       break
-    case DataSpecsDataType.ARRAY:
-      property.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
-      break
   }
 }
 </script>
diff --git a/src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue b/src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
@@ -22,8 +22,8 @@
       </el-form-item>
       <!-- 属性配置 -->
       <ThingModelDataSpecs
-        v-model="formData.property"
         v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
+        v-model="formData.property"
       />
     </el-form>
 
@@ -39,11 +39,12 @@ import { ProductVO } from '@/api/iot/product/product'
 import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
 import {
   ProductFunctionTypeEnum,
-  ThinkModelFunctionApi,
-  ThingModelData
+  ThingModelData,
+  ThinkModelFunctionApi
 } from '@/api/iot/thinkmodelfunction'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
 import { DataSpecsDataType } from './config'
+import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'IoTProductThingModelForm' })
 
@@ -58,12 +59,15 @@ const formLoading = ref(false)
 const formType = ref('')
 const formData = ref<ThingModelData>({
   type: ProductFunctionTypeEnum.PROPERTY,
+  dataType: DataSpecsDataType.INT,
   property: {
     dataType: DataSpecsDataType.INT,
-    dataSpecsList: [],
-    dataSpecs: {}
+    dataSpecs: {
+      dataType: DataSpecsDataType.INT
+    }
   }
 })
+// TODO puhui999: 表单校验待完善
 const formRules = reactive({
   name: [
     { required: true, message: '功能名称不能为空', trigger: 'blur' },
@@ -114,7 +118,7 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await ThinkModelFunctionApi.getThinkModelFunction(id)
+      formData.value = await ThinkModelFunctionApi.getProductThingModel(id)
     } finally {
       formLoading.value = false
     }
@@ -128,14 +132,19 @@ const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
   try {
-    const data = formData.value as unknown as ThingModelData
+    const data = cloneDeep(formData.value) as ThingModelData
+    // 信息补全
     data.productId = product!.value.id
     data.productKey = product!.value.productKey
+    data.description = data.property.description
+    data.dataType = data.property.dataType
+    data.property.identifier = data.identifier
+    data.property.name = data.name
     if (formType.value === 'create') {
-      await ThinkModelFunctionApi.createThinkModelFunction(data)
+      await ThinkModelFunctionApi.createProductThingModel(data)
       message.success(t('common.createSuccess'))
     } else {
-      await ThinkModelFunctionApi.updateThinkModelFunction(data)
+      await ThinkModelFunctionApi.updateProductThingModel(data)
       message.success(t('common.updateSuccess'))
     }
   } finally {
@@ -149,10 +158,12 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     type: ProductFunctionTypeEnum.PROPERTY,
+    dataType: DataSpecsDataType.INT,
     property: {
       dataType: DataSpecsDataType.INT,
-      dataSpecsList: [],
-      dataSpecs: {}
+      dataSpecs: {
+        dataType: DataSpecsDataType.INT
+      }
     }
   }
   formRef.value?.resetFields()
diff --git a/src/views/iot/product/product/detail/ThingModel/config.ts b/src/views/iot/product/product/detail/ThingModel/config.ts
@@ -43,3 +43,8 @@ export const dataTypeOptions = [
   { value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
   { value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
 ]
+
+/** 获得物体模型数据类型配置项名称 */
+export const getDataTypeOptionsLabel = (value: string) => {
+  return dataTypeOptions.find((option) => option.value === value)?.label
+}
diff --git a/src/views/iot/product/product/detail/ThingModel/index.vue b/src/views/iot/product/product/detail/ThingModel/index.vue
@@ -32,7 +32,12 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <el-button plain type="primary" @click="openForm('create')">
+        <el-button
+          v-hasPermi="[`iot:product-thing-model:create`]"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
           <Icon class="mr-5px" icon="ep:plus" />
           添加功能
         </el-button>
@@ -49,20 +54,29 @@
         </el-table-column>
         <el-table-column align="center" label="功能名称" prop="name" />
         <el-table-column align="center" label="标识符" prop="identifier" />
-        <el-table-column align="center" label="数据类型" prop="identifier" />
-        <el-table-column align="center" label="数据定义" prop="identifier" />
+        <el-table-column align="center" label="数据类型" prop="identifier">
+          <template #default="{ row }">
+            {{ dataTypeOptionsLabel(row.property.dataType) ?? '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="数据定义" prop="identifier">
+          <template #default="{ row }">
+            <!-- TODO puhui999: 数据定义展示待完善 -->
+            {{ row.property.dataSpecs ?? row.property.dataSpecsList }}
+          </template>
+        </el-table-column>
         <el-table-column align="center" label="操作">
           <template #default="scope">
             <el-button
-              v-hasPermi="[`iot:think-model-function:update`]"
+              v-hasPermi="[`iot:product-thing-model:update`]"
               link
               type="primary"
               @click="openForm('update', scope.row.id)"
             >
               编辑
             </el-button>
             <el-button
-              v-hasPermi="['iot:think-model-function:delete']"
+              v-hasPermi="['iot:product-thing-model:delete']"
               link
               type="danger"
               @click="handleDelete(scope.row.id)"
@@ -85,19 +99,20 @@
   <ThingModelForm ref="formRef" @success="getList" />
 </template>
 <script lang="ts" setup>
-import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
+import { ThingModelData, ThinkModelFunctionApi } from '@/api/iot/thinkmodelfunction'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import ThingModelForm from './ThingModelForm.vue'
 import { ProductVO } from '@/api/iot/product/product'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
+import { getDataTypeOptionsLabel } from '@/views/iot/product/product/detail/ThingModel/config'
 
 defineOptions({ name: 'IoTProductThingModel' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
-const list = ref<ThinkModelFunctionVO[]>([]) // 列表的数据
+const list = ref<ThingModelData[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
@@ -108,12 +123,14 @@ const queryParams = reactive({
 
 const queryFormRef = ref() // 搜索的表单
 const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
+const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
     queryParams.productId = product?.value?.id || -1
-    const data = await ThinkModelFunctionApi.getThinkModelFunctionPage(queryParams)
+    const data = await ThinkModelFunctionApi.getProductThingModelPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -145,7 +162,7 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await ThinkModelFunctionApi.deleteThinkModelFunction(id)
+    await ThinkModelFunctionApi.deleteProductThingModel(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
diff --git a/src/views/iot/product/product/detail/index.vue b/src/views/iot/product/product/detail/index.vue
@@ -8,7 +8,7 @@
       <el-tab-pane label="Topic 类列表" name="topic">
         <ProductTopic v-if="activeTab === 'topic'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="功能定义" lazy name="function">
+      <el-tab-pane label="功能定义" lazy name="thingModel">
         <IoTProductThingModel ref="thingModelRef" />
       </el-tab-pane>
       <el-tab-pane label="消息解析" name="message" />
diff --git a/src/views/iot/product/product/index.vue b/src/views/iot/product/product/index.vue

Original file line number	Diff line number	Diff line change
`@@ -43,3 +43,8 @@ export const dataTypeOptions = [`
`43`	`43`	`{ value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },`
`44`	`44`	`{ value: DataSpecsDataType.ARRAY, label: 'array (数组)' }`
`45`	`45`	`]`
	`46`	`+`
	`47`	`+/** 获得物体模型数据类型配置项名称 */`
	`48`	`+export const getDataTypeOptionsLabel = (value: string) => {`
	`49`	`+ return dataTypeOptions.find((option) => option.value === value)?.label`
	`50`	`+}`