Kaynağa Gözat

【功能优化】IOT:枚举和复制到剪贴板方法优化

安浩浩 10 ay önce
ebeveyn
işleme
18eabfb042

+ 6 - 0
src/api/iot/product/index.ts

@@ -18,6 +18,12 @@ export interface ProductVO {
   createTime: Date // 创建时间
 }
 
+// IOT 数据校验级别枚举类
+export enum ValidateTypeEnum {
+  WEAK = 0, // 弱校验
+  NONE = 1 // 免校验
+}
+
 // IoT 产品 API
 export const ProductApi = {
   // 查询产品分页

+ 13 - 0
src/api/iot/thinkmodelfunction/index.ts

@@ -14,6 +14,19 @@ export interface ThinkModelFunctionVO {
   service: string // 服务
 }
 
+// IOT 产品功能(物模型)类型枚举类
+export enum ProductFunctionTypeEnum {
+  PROPERTY = 1, // 属性
+  SERVICE = 2, // 服务
+  EVENT = 3 // 事件
+}
+
+// IOT 产品功能(物模型)访问模式枚举类
+export enum ProductFunctionAccessModeEnum {
+  READ_WRITE = 'rw', // 读写
+  READ_ONLY = 'r' // 只读
+}
+
 // IoT 产品物模型 API
 export const ThinkModelFunctionApi = {
   // 查询产品物模型分页

+ 7 - 9
src/views/iot/device/detail/DeviceDetailsHeader.vue

@@ -53,16 +53,14 @@ const openForm = (type: string, id?: number) => {
 const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
 const emit = defineEmits(['refresh'])
 
-/**
- * 将文本复制到剪贴板
- *
- * @param text 需要复制的文本
- */
-const copyToClipboard = (text: string) => {
-  // TODO @haohao:可以考虑用 await 异步转同步哈
-  navigator.clipboard.writeText(text).then(() => {
+/** 复制到剪贴板方法 */
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
     message.success('复制成功')
-  })
+  } catch (error) {
+    message.error('复制失败')
+  }
 }
 
 /**

+ 6 - 3
src/views/iot/device/detail/DeviceDetailsInfo.vue

@@ -100,10 +100,13 @@ const mqttParams = ref({
 }) // 定义 MQTT 参数对象
 
 /** 复制到剪贴板方法 */
-const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text).then(() => {
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
     message.success('复制成功')
-  })
+  } catch (error) {
+    message.error('复制失败')
+  }
 }
 
 /** 打开 MQTT 参数弹框的方法 */

+ 11 - 5
src/views/iot/product/ProductForm.vue

@@ -100,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-import { ProductApi, ProductVO } from '@/api/iot/product'
+import { ValidateTypeEnum, ProductApi, ProductVO } from '@/api/iot/product'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
 defineOptions({ name: 'IoTProductForm' })
@@ -119,7 +119,7 @@ const formData = ref({
   protocolId: undefined,
   categoryId: undefined,
   description: undefined,
-  validateType: undefined,
+  validateType: ValidateTypeEnum.WEAK,
   status: undefined,
   deviceType: undefined,
   netType: undefined,
@@ -132,13 +132,19 @@ const formRules = reactive({
   netType: [
     {
       // TODO @haohao:0、1、/2 最好前端也枚举下;另外,这里的 required 可以直接设置为 true。然后表单那些 v-if。只要不存在,它自动就不校验了哈
-      required: formData.deviceType === 0 || formData.deviceType === 2,
+      // required: formData.deviceType === 0 || formData.deviceType === 2,
+      required: true,
       message: '联网方式不能为空',
       trigger: 'change'
     }
   ],
   protocolType: [
-    { required: formData.deviceType === 1, message: '接入网关协议不能为空', trigger: 'change' }
+    {
+      // required: formData.deviceType === 1,
+      required: true,
+      message: '接入网关协议不能为空',
+      trigger: 'change'
+    }
   ],
   dataFormat: [{ required: true, message: '数据格式不能为空', trigger: 'change' }],
   validateType: [{ required: true, message: '数据校验级别不能为空', trigger: 'change' }]
@@ -192,7 +198,7 @@ const resetForm = () => {
     protocolId: undefined,
     categoryId: undefined,
     description: undefined,
-    validateType: undefined,
+    validateType: ValidateTypeEnum.WEAK,
     status: undefined,
     deviceType: undefined,
     netType: undefined,

+ 7 - 4
src/views/iot/product/detail/ProductDetailsHeader.vue

@@ -61,11 +61,14 @@ const message = useMessage()
 
 const { product } = defineProps<{ product: ProductVO }>() // 定义 Props
 
-/** 处理复制 */
-const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text).then(() => {
+/** 复制到剪贴板方法 */
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
     message.success('复制成功')
-  })
+  } catch (error) {
+    message.error('复制失败')
+  }
 }
 
 /** 路由跳转到设备管理 */

+ 13 - 8
src/views/iot/product/detail/ThinkModelFunctionForm.vue

@@ -9,9 +9,9 @@
     >
       <el-form-item label="功能类型" prop="type">
         <el-radio-group v-model="formData.type">
-          <el-radio-button value="1"> 属性 </el-radio-button>
-          <el-radio-button value="2"> 服务 </el-radio-button>
-          <el-radio-button value="3"> 事件 </el-radio-button>
+          <el-radio-button :value="1"> 属性 </el-radio-button>
+          <el-radio-button :value="2"> 服务 </el-radio-button>
+          <el-radio-button :value="3"> 事件 </el-radio-button>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="功能名称" prop="name">
@@ -76,7 +76,12 @@
 
 <script setup lang="ts">
 import { ProductVO } from '@/api/iot/product'
-import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
+import {
+  ProductFunctionAccessModeEnum,
+  ProductFunctionTypeEnum,
+  ThinkModelFunctionApi,
+  ThinkModelFunctionVO
+} from '@/api/iot/thinkmodelfunction'
 
 const props = defineProps<{ product: ProductVO }>()
 
@@ -96,11 +101,11 @@ const formData = ref({
   identifier: undefined,
   name: undefined,
   description: undefined,
-  type: '1',
+  type: ProductFunctionTypeEnum.PROPERTY,
   property: {
     identifier: undefined,
     name: undefined,
-    accessMode: 'rw',
+    accessMode: ProductFunctionAccessModeEnum.READ_WRITE,
     required: true,
     dataType: {
       type: undefined,
@@ -206,11 +211,11 @@ const resetForm = () => {
     identifier: undefined,
     name: undefined,
     description: undefined,
-    type: '1', // todo @HAOHAO:看看枚举下
+    type: ProductFunctionTypeEnum.PROPERTY,
     property: {
       identifier: undefined,
       name: undefined,
-      accessMode: 'rw',
+      accessMode: ProductFunctionAccessModeEnum.READ_WRITE,
       required: true,
       dataType: {
         type: undefined,