Skip to content

Commit 4569491

Browse files
author
puhui999
committed
【代码完善】IOT: ThingModel StructDataSpecs 组件
1 parent ce7dc92 commit 4569491

File tree

6 files changed

+86
-66
lines changed

6 files changed

+86
-66
lines changed

‎src/views/iot/thingmodel/ThingModelDataSpecs.vue

Lines changed: 5 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,7 @@
2929
v-model="property.dataSpecsList"
3030
/>
3131
<!-- 布尔型配置 -->
32-
<el-form-item
33-
v-if="property.dataType === DataSpecsDataType.BOOL"
34-
:rules="[{ required: true, message: '请输入布尔值名称', trigger: 'blur' }]"
35-
label="布尔值"
36-
prop="property.dataSpecsList"
37-
>
32+
<el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值">
3833
<template v-for="(item, index) in property.dataSpecsList" :key="item.value">
3934
<div class="flex items-center justify-start w-1/1 mb-5px">
4035
<span>{{ item.value }}</span>
@@ -59,10 +54,6 @@
5954
<!-- 文本型配置 -->
6055
<el-form-item
6156
v-if="property.dataType === DataSpecsDataType.TEXT"
62-
:rules="[
63-
{ required: true, message: '请输入文本字节长度', trigger: 'blur' },
64-
{ validator: validateTextLength, trigger: 'blur' }
65-
]"
6657
label="数据长度"
6758
prop="property.dataSpecs.length"
6859
>
@@ -84,12 +75,7 @@
8475
v-if="property.dataType === DataSpecsDataType.STRUCT"
8576
v-model="property.dataSpecsList"
8677
/>
87-
<el-form-item
88-
v-if="!isStructDataSpecs"
89-
:rules="[{ required: true, message: '请选择读写类型', trigger: 'change' }]"
90-
label="读写类型"
91-
prop="property.accessMode"
92-
>
78+
<el-form-item v-if="!isStructDataSpecs" label="读写类型" prop="property.accessMode">
9379
<el-radio-group v-model="property.accessMode">
9480
<el-radio label="rw">读写</el-radio>
9581
<el-radio label="r">只读</el-radio>
@@ -108,15 +94,14 @@
10894

10995
<script lang="ts" setup>
11096
import { useVModel } from '@vueuse/core'
111-
import { DataSpecsDataType, dataTypeOptions } from './config'
97+
import { DataSpecsDataType, dataTypeOptions, validateBoolName } from './config'
11298
import {
11399
ThingModelArrayDataSpecs,
114100
ThingModelEnumDataSpecs,
115-
ThingModelNumberDataSpecs
101+
ThingModelNumberDataSpecs,
102+
ThingModelStructDataSpecs
116103
} from './dataSpecs'
117-
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
118104
import { ThingModelProperty } from '@/api/iot/thingmodel'
119-
import { isEmpty } from '@/utils/is'
120105
121106
/** IoT 物模型数据 */
122107
defineOptions({ name: 'ThingModelDataSpecs' })
@@ -157,45 +142,6 @@ const handleChange = (dataType: any) => {
157142
break
158143
}
159144
}
160-
161-
// TODO @puhui999：一些校验的规则，是不是写到 utils 里。
162-
/** 校验布尔值名称 */
163-
const validateBoolName = (_: any, value: string, callback: any) => {
164-
if (isEmpty(value)) {
165-
callback(new Error('布尔值名称不能为空'))
166-
return
167-
}
168-
// 检查开头字符
169-
if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
170-
callback(new Error('布尔值名称必须以中文、英文字母或数字开头'))
171-
return
172-
}
173-
// 检查整体格式
174-
if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
175-
callback(new Error('布尔值名称只能包含中文、英文字母、数字、下划线和短划线'))
176-
return
177-
}
178-
// 检查长度（一个中文算一个字符）
179-
if (value.length > 20) {
180-
callback(new Error('布尔值名称长度不能超过20个字符'))
181-
return
182-
}
183-
184-
callback()
185-
}
186-
187-
/** 校验文本长度 */
188-
const validateTextLength = (_: any, value: any, callback: any) => {
189-
if (isEmpty(value)) {
190-
callback(new Error('文本长度不能为空'))
191-
return
192-
}
193-
if (isNaN(Number(value))) {
194-
callback(new Error('文本长度必须是数字'))
195-
return
196-
}
197-
callback()
198-
}
199145
</script>
200146

201147
<style lang="scss" scoped>

‎src/views/iot/thingmodel/config.ts

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,5 +105,47 @@ export const ThingModelFormRules = {
105105
},
106106
trigger: 'blur'
107107
}
108-
]
108+
],
109+
'property.dataSpecs.length': [
110+
{ required: true, message: '请输入文本字节长度', trigger: 'blur' },
111+
{
112+
validator: (_: any, value: any, callback: any) => {
113+
if (isEmpty(value)) {
114+
callback(new Error('文本长度不能为空'))
115+
return
116+
}
117+
if (isNaN(Number(value))) {
118+
callback(new Error('文本长度必须是数字'))
119+
return
120+
}
121+
callback()
122+
},
123+
trigger: 'blur'
124+
}
125+
],
126+
'property.accessMode': [{ required: true, message: '请选择读写类型', trigger: 'change' }]
127+
}
128+
/** 校验布尔值名称 */
129+
export const validateBoolName = (_: any, value: string, callback: any) => {
130+
if (isEmpty(value)) {
131+
callback(new Error('布尔值名称不能为空'))
132+
return
133+
}
134+
// 检查开头字符
135+
if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
136+
callback(new Error('布尔值名称必须以中文、英文字母或数字开头'))
137+
return
138+
}
139+
// 检查整体格式
140+
if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
141+
callback(new Error('布尔值名称只能包含中文、英文字母、数字、下划线和短划线'))
142+
return
143+
}
144+
// 检查长度（一个中文算一个字符）
145+
if (value.length > 20) {
146+
callback(new Error('布尔值名称长度不能超过20个字符'))
147+
return
148+
}
149+
150+
callback()
109151
}

‎src/views/iot/thingmodel/dataSpecs/ThingModelArrayDataSpecs.vue

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<el-form-item label="元素类型" prop="property.dataSpecs.childDataType">
3-
<el-radio-group v-model="dataSpecs.childDataType">
3+
<el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
44
<template v-for="item in dataTypeOptions" :key="item.value">
55
<el-radio
66
v-if="
@@ -18,18 +18,33 @@
1818
<el-form-item label="元素个数" prop="property.dataSpecs.size">
1919
<el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
2020
</el-form-item>
21+
<!-- Struct 型配置-->
22+
<ThingModelStructDataSpecs
23+
v-if="dataSpecs.childDataType === DataSpecsDataType.STRUCT"
24+
v-model="dataSpecs.dataSpecsList"
25+
/>
2126
</template>
2227

2328
<script lang="ts" setup>
2429
import { useVModel } from '@vueuse/core'
2530
import { DataSpecsDataType, dataTypeOptions } from '../config'
31+
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
2632
2733
/** 数组型的 dataSpecs 配置组件 */
2834
defineOptions({ name: 'ThingModelArrayDataSpecs' })
2935
3036
const props = defineProps<{ modelValue: any }>()
3137
const emits = defineEmits(['update:modelValue'])
3238
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
39+
40+
/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
41+
const handleChange = (val: string) => {
42+
if (val !== DataSpecsDataType.STRUCT) {
43+
return
44+
}
45+
46+
dataSpecs.value.dataSpecsList = []
47+
}
3348
</script>
3449

3550
<style lang="scss" scoped></style>

‎src/views/iot/thingmodel/dataSpecs/ThingModelEnumDataSpecs.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<el-form-item
33
:rules="[{ required: true, validator: validateEnumList, trigger: 'change' }]"
44
label="枚举项"
5-
prop="property.dataSpecsList"
65
>
76
<div class="flex flex-col">
87
<div class="flex items-center">

‎src/views/iot/thingmodel/ThingModelStructDataSpecs.vue renamed to ‎src/views/iot/thingmodel/dataSpecs/ThingModelStructDataSpecs.vue

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
22
<!-- struct 数据展示 -->
3-
<el-form-item label="JSON 对象">
3+
<el-form-item
4+
:rules="[{ required: true, validator: validateList, trigger: 'change' }]"
5+
label="JSON 对象"
6+
>
47
<div
58
v-for="(item, index) in dataSpecsList"
69
:key="index"
@@ -44,8 +47,8 @@
4447

4548
<script lang="ts" setup>
4649
import { useVModel } from '@vueuse/core'
47-
import ThingModelDataSpecs from '@/views/iot/thingmodel/ThingModelDataSpecs.vue'
48-
import { DataSpecsDataType, ThingModelFormRules } from '@/views/iot/thingmodel/config'
50+
import ThingModelDataSpecs from '../ThingModelDataSpecs.vue'
51+
import { DataSpecsDataType, ThingModelFormRules } from '../config'
4952
import { isEmpty } from '@/utils/is'
5053
5154
/** Struct 型的 dataSpecs 配置组件 */
@@ -140,6 +143,15 @@ const resetForm = () => {
140143
}
141144
structFormRef.value?.resetFields()
142145
}
146+
147+
/** 校验 struct 不能为空 */
148+
const validateList = (_: any, __: any, callback: any) => {
149+
if (isEmpty(dataSpecsList.value)) {
150+
callback(new Error('struct 不能为空'))
151+
return
152+
}
153+
callback()
154+
}
143155
</script>
144156

145157
<style lang="scss" scoped>

‎src/views/iot/thingmodel/dataSpecs/index.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import ThingModelEnumDataSpecs from './ThingModelEnumDataSpecs.vue'
22
import ThingModelNumberDataSpecs from './ThingModelNumberDataSpecs.vue'
33
import ThingModelArrayDataSpecs from './ThingModelArrayDataSpecs.vue'
4+
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
45

5-
export { ThingModelEnumDataSpecs, ThingModelNumberDataSpecs, ThingModelArrayDataSpecs }
6+
export {
7+
ThingModelEnumDataSpecs,
8+
ThingModelNumberDataSpecs,
9+
ThingModelArrayDataSpecs,
10+
ThingModelStructDataSpecs
11+
}

0 commit comments

Comments
 (0)