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

pull/626/head
puhui999 2024-12-23 18:06:42 +08:00
parent ce7dc927ae
commit 4569491012
6 changed files with 86 additions and 66 deletions

View File

@ -29,12 +29,7 @@
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>
@ -59,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"
>
@ -84,12 +75,7 @@
v-if="property.dataType === DataSpecsDataType.STRUCT"
v-model="property.dataSpecsList"
/>
<el-form-item
v-if="!isStructDataSpecs"
:rules="[{ required: true, message: '请选择读写类型', trigger: 'change' }]"
label="读写类型"
prop="property.accessMode"
>
<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>
@ -108,15 +94,14 @@
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { DataSpecsDataType, dataTypeOptions } from './config'
import { DataSpecsDataType, dataTypeOptions, validateBoolName } from './config'
import {
ThingModelArrayDataSpecs,
ThingModelEnumDataSpecs,
ThingModelNumberDataSpecs
ThingModelNumberDataSpecs,
ThingModelStructDataSpecs
} from './dataSpecs'
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
import { ThingModelProperty } from '@/api/iot/thingmodel'
import { isEmpty } from '@/utils/is'
/** IoT 物模型数据 */
defineOptions({ name: 'ThingModelDataSpecs' })
@ -157,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>

View File

@ -105,5 +105,47 @@ export const ThingModelFormRules = {
},
trigger: 'blur'
}
]
],
'property.dataSpecs.length': [
{ required: true, message: '请输入文本字节长度', trigger: 'blur' },
{
validator: (_: any, value: any, callback: any) => {
if (isEmpty(value)) {
callback(new Error('文本长度不能为空'))
return
}
if (isNaN(Number(value))) {
callback(new Error('文本长度必须是数字'))
return
}
callback()
},
trigger: 'blur'
}
],
'property.accessMode': [{ required: true, message: '请选择读写类型', trigger: 'change' }]
}
/** 校验布尔值名称 */
export 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()
}

View File

@ -1,6 +1,6 @@
<template>
<el-form-item label="元素类型" prop="property.dataSpecs.childDataType">
<el-radio-group v-model="dataSpecs.childDataType">
<el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
<template v-for="item in dataTypeOptions" :key="item.value">
<el-radio
v-if="
@ -18,11 +18,17 @@
<el-form-item label="元素个数" prop="property.dataSpecs.size">
<el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
</el-form-item>
<!-- Struct 型配置-->
<ThingModelStructDataSpecs
v-if="dataSpecs.childDataType === DataSpecsDataType.STRUCT"
v-model="dataSpecs.dataSpecsList"
/>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { DataSpecsDataType, dataTypeOptions } from '../config'
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
/** 数组型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelArrayDataSpecs' })
@ -30,6 +36,15 @@ defineOptions({ name: 'ThingModelArrayDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
/** 元素类型改变时间。当值为 struct 时,对 dataSpecs 中的 dataSpecsList 进行初始化 */
const handleChange = (val: string) => {
if (val !== DataSpecsDataType.STRUCT) {
return
}
dataSpecs.value.dataSpecsList = []
}
</script>
<style lang="scss" scoped></style>

View File

@ -2,7 +2,6 @@
<el-form-item
:rules="[{ required: true, validator: validateEnumList, trigger: 'change' }]"
label="枚举项"
prop="property.dataSpecsList"
>
<div class="flex flex-col">
<div class="flex items-center">

View File

@ -1,6 +1,9 @@
<template>
<!-- struct 数据展示 -->
<el-form-item label="JSON 对象">
<el-form-item
:rules="[{ required: true, validator: validateList, trigger: 'change' }]"
label="JSON 对象"
>
<div
v-for="(item, index) in dataSpecsList"
:key="index"
@ -44,8 +47,8 @@
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import ThingModelDataSpecs from '@/views/iot/thingmodel/ThingModelDataSpecs.vue'
import { DataSpecsDataType, ThingModelFormRules } from '@/views/iot/thingmodel/config'
import ThingModelDataSpecs from '../ThingModelDataSpecs.vue'
import { DataSpecsDataType, ThingModelFormRules } from '../config'
import { isEmpty } from '@/utils/is'
/** Struct 型的 dataSpecs 配置组件 */
@ -140,6 +143,15 @@ const resetForm = () => {
}
structFormRef.value?.resetFields()
}
/** 校验 struct 不能为空 */
const validateList = (_: any, __: any, callback: any) => {
if (isEmpty(dataSpecsList.value)) {
callback(new Error('struct 不能为空'))
return
}
callback()
}
</script>
<style lang="scss" scoped>

View File

@ -1,5 +1,11 @@
import ThingModelEnumDataSpecs from './ThingModelEnumDataSpecs.vue'
import ThingModelNumberDataSpecs from './ThingModelNumberDataSpecs.vue'
import ThingModelArrayDataSpecs from './ThingModelArrayDataSpecs.vue'
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
export { ThingModelEnumDataSpecs, ThingModelNumberDataSpecs, ThingModelArrayDataSpecs }
export {
ThingModelEnumDataSpecs,
ThingModelNumberDataSpecs,
ThingModelArrayDataSpecs,
ThingModelStructDataSpecs
}