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

src/router/modules/remaining.ts

@@ -637,7 +637,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
           hidden: true,
           activeMenu: '/iot/device'
         },
-        component: () => import('@/views/iot/device/detail/index.vue')
+        component: () => import('@/views/iot/device/device/detail/index.vue')
       }
     ]
   }

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

 /** dataSpecs 数值型数据结构 */
 export interface DataSpecsNumberDataVO {
-  dataType: 'INT' | 'FLOAT' | 'DOUBLE' // 数据类型，取值为 INT、FLOAT 或 DOUBLE
+  dataType: 'int' | 'float' | 'double' // 数据类型，取值为 INT、FLOAT 或 DOUBLE
   max: string // 最大值，必须与 dataType 设置一致，且为 STRING 类型
   min: string // 最小值，必须与 dataType 设置一致，且为 STRING 类型
   step: string // 步长，必须与 dataType 设置一致，且为 STRING 类型
@@ -18,7 +18,7 @@ export interface DataSpecsTextDataVO {
 
 /** dataSpecs 枚举型数据结构 */
 export interface DataSpecsEnumDataVO {
-  dataType: 'ENUM' | 'BOOL'
+  dataType: 'enum' | 'bool'
   defaultValue?: string // 默认值，可选
   name: string // 枚举项的名称
   value: number | undefined // 枚举值
@@ -35,4 +35,4 @@ export const DataSpecsDataType = {
   DATE: 'date',
   STRUCT: 'struct',
   ARRAY: 'array'
-}
+} as const

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

 <template>
-  <el-form-item label="枚举项" prop="enumItem">
+  <el-form-item label="枚举项" prop="enum">
     <div class="flex flex-col">
-      <div class="flex items-center justify-between">
-        <span> 参数值 </span>
-        <span> 参数描述 </span>
+      <div class="flex items-center">
+        <span class="flex-1"> 参数值 </span>
+        <span class="flex-1"> 参数描述 </span>
       </div>
       <div
         v-for="(item, index) in dataSpecsList"
@@ -13,6 +13,7 @@
         <el-input v-model="item.value" placeholder="请输入枚举值,如'0'" />
         <span class="mx-2">~</span>
         <el-input v-model="item.name" placeholder="对该枚举项的描述" />
+        <el-button link type="primary" class="ml-10px" @click="deleteEnum(index)">删除</el-button>
       </div>
       <el-button link type="primary" @click="addEnum">+添加枚举项</el-button>
     </div>
@@ -21,21 +22,35 @@
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import { DataSpecsEnumDataVO } from '@/views/iot/product/product/detail/ThingModel/config'
+import {
+  DataSpecsDataType,
+  DataSpecsEnumDataVO
+} from '@/views/iot/product/product/detail/ThingModel/config'
 
 /** 枚举型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelEnumTypeDataSpecs' })
 const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
 const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<DataSpecsEnumDataVO[]>
+const message = useMessage()
 
+/** 添加枚举项 */
 const addEnum = () => {
   dataSpecsList.value.push({
-    dataType: 'ENUM',
+    dataType: DataSpecsDataType.ENUM,
     name: '', // 枚举项的名称
     value: undefined // 枚举值
   })
 }
+
+/** 删除枚举项 */
+const deleteEnum = (index: number) => {
+  if (dataSpecsList.value.length === 1) {
+    message.warning('至少需要一个枚举项')
+    return
+  }
+  dataSpecsList.value.splice(index, 1)
+}
 </script>
 
 <style lang="scss" scoped></style>