!626 【代码完善】IOT: ThingModel StructDataSpecs 组件

Merge pull request !626 from puhui999/feature/iot

Author: YunaiV

src/api/iot/thinkmodel/index.ts renamed to src/api/iot/thingmodel/index.ts

@@ -3,7 +3,7 @@ import request from '@/config/axios'
 /**
  * IoT 产品物模型
  */
-export interface ThinkModelData {
+export interface ThingModelData {
   id?: number // 物模型功能编号
   identifier?: string // 功能标识
   name?: string // 功能名称
@@ -12,29 +12,29 @@ export interface ThinkModelData {
   productKey?: string // 产品标识
   dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
   type: ProductFunctionTypeEnum // 功能类型
-  property: ThinkModelProperty // 属性
-  event?: ThinkModelEvent // 事件
-  service?: ThinkModelService // 服务
+  property: ThingModelProperty // 属性
+  event?: ThingModelEvent // 事件
+  service?: ThingModelService // 服务
 }
 
 /**
- * ThinkModelProperty 类型
+ * ThingModelProperty 类型
  */
-export interface ThinkModelProperty {
+export interface ThingModelProperty {
   [key: string]: any
 }
 
 /**
- * ThinkModelEvent 类型
+ * ThingModelEvent 类型
  */
-export interface ThinkModelEvent {
+export interface ThingModelEvent {
   [key: string]: any
 }
 
 /**
- * ThinkModelService 类型
+ * ThingModelService 类型
  */
-export interface ThinkModelService {
+export interface ThingModelService {
   [key: string]: any
 }
 
@@ -52,38 +52,37 @@ export enum ProductFunctionAccessModeEnum {
 }
 
 // IoT 产品物模型 API
-export const ThinkModelApi = {
+export const ThingModelApi = {
   // 查询产品物模型分页
-  // TODO @puhui999：product 前缀，是不是去掉哈。
-  getThinkModelPage: async (params: any) => {
-    return await request.get({ url: `/iot/product-think-model/page`, params })
+  getThingModelPage: async (params: any) => {
+    return await request.get({ url: `/iot/product-thing-model/page`, params })
   },
 
   // 获得产品物模型
-  getThinkModelListByProductId: async (params: any) => {
+  getThingModelListByProductId: async (params: any) => {
     return await request.get({
-      url: `/iot/product-think-model/list-by-product-id`,
+      url: `/iot/product-thing-model/list-by-product-id`,
       params
     })
   },
 
   // 查询产品物模型详情
-  getThinkModel: async (id: number) => {
-    return await request.get({ url: `/iot/product-think-model/get?id=` + id })
+  getThingModel: async (id: number) => {
+    return await request.get({ url: `/iot/product-thing-model/get?id=` + id })
   },
 
   // 新增产品物模型
-  createThinkModel: async (data: ThinkModelData) => {
-    return await request.post({ url: `/iot/product-think-model/create`, data })
+  createThingModel: async (data: ThingModelData) => {
+    return await request.post({ url: `/iot/product-thing-model/create`, data })
   },
 
   // 修改产品物模型
-  updateThinkModel: async (data: ThinkModelData) => {
-    return await request.put({ url: `/iot/product-think-model/update`, data })
+  updateThingModel: async (data: ThingModelData) => {
+    return await request.put({ url: `/iot/product-thing-model/update`, data })
   },
 
   // 删除产品物模型
-  deleteThinkModel: async (id: number) => {
-    return await request.delete({ url: `/iot/product-think-model/delete?id=` + id })
+  deleteThingModel: async (id: number) => {
+    return await request.delete({ url: `/iot/product-thing-model/delete?id=` + id })
   }
 }

src/utils/dict.ts

@@ -236,7 +236,7 @@ export enum DICT_TYPE {
   IOT_DATA_FORMAT = 'iot_data_format', // IOT 数据格式
   IOT_PROTOCOL_TYPE = 'iot_protocol_type', // IOT 接入网关协议
   IOT_DEVICE_STATUS = 'iot_device_status', // IOT 设备状态
-  IOT_PRODUCT_THINK_MODEL_TYPE = 'iot_product_think_model_type', // IOT 产品功能类型
+  IOT_PRODUCT_THING_MODEL_TYPE = 'iot_product_thing_model_type', // IOT 产品功能类型
   IOT_DATA_TYPE = 'iot_data_type', // IOT 数据类型
   IOT_UNIT_TYPE = 'iot_unit_type', // IOT 单位类型
   IOT_RW_TYPE = 'iot_rw_type', // IOT 读写类型

src/views/iot/product/product/detail/index.vue

@@ -8,8 +8,8 @@
       <el-tab-pane label="Topic 类列表" name="topic">
         <ProductTopic v-if="activeTab === 'topic'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="功能定义" lazy name="thinkModel">
-        <IoTProductThinkModel ref="thinkModelRef" />
+      <el-tab-pane label="功能定义" lazy name="thingModel">
+        <IoTProductThingModel ref="thingModelRef" />
       </el-tab-pane>
       <el-tab-pane label="消息解析" name="message" />
       <el-tab-pane label="服务端订阅" name="subscription" />
@@ -22,7 +22,7 @@ import { DeviceApi } from '@/api/iot/device/device'
 import ProductDetailsHeader from './ProductDetailsHeader.vue'
 import ProductDetailsInfo from './ProductDetailsInfo.vue'
 import ProductTopic from './ProductTopic.vue'
-import IoTProductThinkModel from '@/views/iot/thinkmodel/index.vue'
+import IoTProductThingModel from '@/views/iot/thingmodel/index.vue'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useRouter } from 'vue-router'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'

src/views/iot/product/product/index.vue

@@ -97,7 +97,9 @@
                 </div>
                 <div class="mb-2.5 last:mb-0">
                   <span class="text-[#717c8e] mr-2.5">产品标识</span>
-                  <span class="text-[#0b1d30] whitespace-normal break-all">{{ item.productKey }}</span>
+                  <span class="text-[#0b1d30] whitespace-normal break-all">
+                    {{ item.productKey }}
+                  </span>
                 </div>
               </div>
               <div class="w-[100px] h-[100px]">
@@ -309,7 +311,7 @@ const openObjectModel = (item: ProductVO) => {
   push({
     name: 'IoTProductDetail',
     params: { id: item.id },
-    query: { tab: 'thinkModel' }
+    query: { tab: 'thingModel' }
   })
 }
 

src/views/iot/thinkmodel/ThinkModelDataSpecs.vue renamed to src/views/iot/thingmodel/ThingModelDataSpecs.vue

@@ -5,16 +5,17 @@
     prop="property.dataType"
   >
     <el-select v-model="property.dataType" placeholder="请选择数据类型" @change="handleChange">
+      <!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套2层（父和子） -->
       <el-option
-        v-for="option in dataTypeOptions"
+        v-for="option in getDataTypeOptions"
         :key="option.value"
         :label="option.label"
         :value="option.value"
       />
     </el-select>
   </el-form-item>
   <!-- 数值型配置 -->
-  <ThinkModelNumberTypeDataSpecs
+  <ThingModelNumberDataSpecs
     v-if="
       [DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
         property.dataType || ''
@@ -23,17 +24,12 @@
     v-model="property.dataSpecs"
   />
   <!-- 枚举型配置 -->
-  <ThinkModelEnumTypeDataSpecs
+  <ThingModelEnumDataSpecs
     v-if="property.dataType === DataSpecsDataType.ENUM"
     v-model="property.dataSpecsList"
   />
   <!-- 布尔型配置 -->
-  <el-form-item
-    v-if="property.dataType === DataSpecsDataType.BOOL"
-    :rules="[{ required: true, message: '请输入布尔值名称', trigger: 'blur' }]"
-    label="布尔值"
-    prop="property.dataSpecsList"
-  >
+  <el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值">
     <template v-for="(item, index) in property.dataSpecsList" :key="item.value">
       <div class="flex items-center justify-start w-1/1 mb-5px">
         <span>{{ item.value }}</span>
@@ -58,10 +54,6 @@
   <!-- 文本型配置 -->
   <el-form-item
     v-if="property.dataType === DataSpecsDataType.TEXT"
-    :rules="[
-      { required: true, message: '请输入文本字节长度', trigger: 'blur' },
-      { validator: validateTextLength, trigger: 'blur' }
-    ]"
     label="数据长度"
     prop="property.dataSpecs.length"
   >
@@ -74,16 +66,16 @@
     <el-input class="w-255px!" disabled placeholder="String类型的UTC时间戳（毫秒）" />
   </el-form-item>
   <!-- 数组型配置-->
-  <ThinkModelArrayTypeDataSpecs
+  <ThingModelArrayDataSpecs
     v-if="property.dataType === DataSpecsDataType.ARRAY"
     v-model="property.dataSpecs"
   />
-  <!-- TODO puhui999: Struct 属性待完善 -->
-  <el-form-item
-    :rules="[{ required: true, message: '请选择读写类型', trigger: 'change' }]"
-    label="读写类型"
-    prop="property.accessMode"
-  >
+  <!-- Struct 型配置-->
+  <ThingModelStructDataSpecs
+    v-if="property.dataType === DataSpecsDataType.STRUCT"
+    v-model="property.dataSpecsList"
+  />
+  <el-form-item v-if="!isStructDataSpecs" label="读写类型" prop="property.accessMode">
     <el-radio-group v-model="property.accessMode">
       <el-radio label="rw">读写</el-radio>
       <el-radio label="r">只读</el-radio>
@@ -102,22 +94,29 @@
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import { DataSpecsDataType, dataTypeOptions } from './config'
+import { DataSpecsDataType, dataTypeOptions, validateBoolName } from './config'
 import {
-  ThinkModelArrayTypeDataSpecs,
-  ThinkModelEnumTypeDataSpecs,
-  ThinkModelNumberTypeDataSpecs
+  ThingModelArrayDataSpecs,
+  ThingModelEnumDataSpecs,
+  ThingModelNumberDataSpecs,
+  ThingModelStructDataSpecs
 } from './dataSpecs'
-import { ThinkModelProperty } from '@/api/iot/thinkmodel'
-import { isEmpty } from '@/utils/is'
+import { ThingModelProperty } from '@/api/iot/thingmodel'
 
 /** IoT 物模型数据 */
-defineOptions({ name: 'ThinkModelDataSpecs' })
+defineOptions({ name: 'ThingModelDataSpecs' })
 
-const props = defineProps<{ modelValue: any }>()
+const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
 const emits = defineEmits(['update:modelValue'])
-const property = useVModel(props, 'modelValue', emits) as Ref<ThinkModelProperty>
-
+const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
+const getDataTypeOptions = computed(() => {
+  return !props.isStructDataSpecs
+    ? dataTypeOptions
+    : dataTypeOptions.filter(
+        (item) =>
+          !([DataSpecsDataType.STRUCT, DataSpecsDataType.ARRAY] as any[]).includes(item.value)
+      )
+}) // 获得数据类型列表
 /** 属性值的数据类型切换时初始化相关数据 */
 const handleChange = (dataType: any) => {
   property.value.dataSpecsList = []
@@ -143,45 +142,6 @@ const handleChange = (dataType: any) => {
       break
   }
 }
-
-// TODO @puhui999：一些校验的规则，是不是写到 utils 里。
-/** 校验布尔值名称 */
-const validateBoolName = (_: any, value: string, callback: any) => {
-  if (isEmpty(value)) {
-    callback(new Error('布尔值名称不能为空'))
-    return
-  }
-  // 检查开头字符
-  if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
-    callback(new Error('布尔值名称必须以中文、英文字母或数字开头'))
-    return
-  }
-  // 检查整体格式
-  if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
-    callback(new Error('布尔值名称只能包含中文、英文字母、数字、下划线和短划线'))
-    return
-  }
-  // 检查长度（一个中文算一个字符）
-  if (value.length > 20) {
-    callback(new Error('布尔值名称长度不能超过20个字符'))
-    return
-  }
-
-  callback()
-}
-
-/** 校验文本长度 */
-const validateTextLength = (_: any, value: any, callback: any) => {
-  if (isEmpty(value)) {
-    callback(new Error('文本长度不能为空'))
-    return
-  }
-  if (isNaN(Number(value))) {
-    callback(new Error('文本长度必须是数字'))
-    return
-  }
-  callback()
-}
 </script>
 
 <style lang="scss" scoped>