【功能完善】IOT: 产品物模型-dataSpecs 校验规则完善

c8ab57f7 · puhui999 · 6b9aaf3c · c8ab57f7 · c8ab57f7
Commit c8ab57f7 authored Dec 17, 2024 by puhui999
Hide whitespace changes
Inline Side-by-side

Showing with 98 additions and 17 deletions

src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
+96 -12

src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
+2 -5

No files found.
--- 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-form-item
+    :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
+    label="数据类型"
+    prop="property.dataType"
+  >
    <el-select v-model="property.dataType" placeholder="请选择数据类型" @change="handleChange">
      <el-option
        v-for="option in dataTypeOptions"
@@ -24,21 +28,43 @@
    v-model="property.dataSpecsList"
  />
  <!-- 布尔型配置 -->
-  <el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值" prop="bool">
+  <el-form-item
-    <template v-for="item in property.dataSpecsList" :key="item.value">
+    v-if="property.dataType === DataSpecsDataType.BOOL"
+    :rules="[{ required: true, message: '请输入布尔值名称', trigger: 'blur' }]"
+    label="布尔值"
+    prop="property.dataSpecsList"
+  >
+    <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>
        <span class="mx-2">-</span>
-        <el-input
+        <el-form-item
-          v-model="item.name"
+          :prop="`property.dataSpecsList[${index}].name`"
-          :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
+          :rules="[
-          class="w-255px!"
+            { required: true, message: '枚举描述不能为空' },
-        />
+            { validator: validateBoolName, trigger: 'blur' }
+          ]"
+          class="flex-1 mb-0"
+        >
+          <el-input
+            v-model="item.name"
+            :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
+            class="w-255px!"
+          />
+        </el-form-item>
      </div>
    </template>
  </el-form-item>
  <!-- 文本型配置 -->
-  <el-form-item v-if="property.dataType === DataSpecsDataType.TEXT" label="数据长度" prop="text">
+  <el-form-item
+    v-if="property.dataType === DataSpecsDataType.TEXT"
+    :rules="[
+      { required: true, message: '请输入文本字节长度', trigger: 'blur' },
+      { validator: validateTextLength, trigger: 'blur' }
+    ]"
+    label="数据长度"
+    prop="property.dataSpecs.length"
+  >
    <el-input v-model="property.dataSpecs.length" class="w-255px!" placeholder="请输入文本字节长度">
      <template #append>字节</template>
    </el-input>
@@ -53,14 +79,24 @@
    v-model="property.dataSpecs"
  />
  <!-- TODO puhui999: Struct 属性待完善 -->
-  <el-form-item label="读写类型" prop="accessMode">
+  <el-form-item
+    :rules="[{ required: true, message: '请选择读写类型', trigger: 'change' }]"
+    label="读写类型"
+    prop="property.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-input
+      v-model="property.description"
+      :maxlength="200"
+      :rows="3"
+      placeholder="请输入属性描述"
+      type="textarea"
+    />
  </el-form-item>
 </template>
@@ -73,6 +109,7 @@ import {
  ThingModelNumberTypeDataSpecs
 } from './dataSpecs'
 import { ThingModelProperty } from '@/api/iot/thinkmodelfunction'
+import { isEmpty } from '@/utils/is'
 /** 物模型数据 */
 defineOptions({ name: 'ThingModelDataSpecs' })
@@ -105,6 +142,53 @@ const handleChange = (dataType: any) => {
      break
  }
 }
+/** 校验布尔值名称 */
+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></style>
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
--- a/src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
+++ b/src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
@@ -67,7 +67,6 @@ const formData = ref<ThingModelData>({
    }
  }
 })
-// TODO puhui999: 表单校验待完善
 const formRules = reactive({
  name: [
    { required: true, message: '功能名称不能为空', trigger: 'blur' },
@@ -87,7 +86,7 @@ const formRules = reactive({
      trigger: 'blur'
    },
    {
-      validator: (rule, value, callback) => {
+      validator: (_: any, value: string, callback: any) => {
        const reservedKeywords = ['set', 'get', 'post', 'property', 'event', 'time', 'value']
        if (reservedKeywords.includes(value)) {
          callback(
@@ -103,9 +102,7 @@ const formRules = reactive({
      },
      trigger: 'blur'
    }
-  ],
+  ]
-  'property.dataType.type': [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
-  'property.accessMode': [{ required: true, message: '读写类型不能为空', trigger: 'blur' }]
 })
 const formRef = ref()