【代码优化】IOT: 产品物模型独立包
This commit is contained in:
puhui999
@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<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"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 数值型配置 -->
|
||||
<ThingModelNumberTypeDataSpecs
|
||||
v-if="
|
||||
[DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
|
||||
property.dataType || ''
|
||||
)
|
||||
"
|
||||
v-model="property.dataSpecs"
|
||||
/>
|
||||
<!-- 枚举型配置 -->
|
||||
<ThingModelEnumTypeDataSpecs
|
||||
v-if="property.dataType === DataSpecsDataType.ENUM"
|
||||
v-model="property.dataSpecsList"
|
||||
/>
|
||||
<!-- 布尔型配置 -->
|
||||
<el-form-item
|
||||
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-form-item
|
||||
:prop="`property.dataSpecsList[${index}].name`"
|
||||
:rules="[
|
||||
{ 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"
|
||||
: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>
|
||||
</el-form-item>
|
||||
<!-- 时间型配置 -->
|
||||
<el-form-item v-if="property.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
|
||||
<el-input class="w-255px!" disabled placeholder="String类型的UTC时间戳（毫秒）" />
|
||||
</el-form-item>
|
||||
<!-- 数组型配置-->
|
||||
<ThingModelArrayTypeDataSpecs
|
||||
v-if="property.dataType === DataSpecsDataType.ARRAY"
|
||||
v-model="property.dataSpecs"
|
||||
/>
|
||||
<!-- TODO puhui999: Struct 属性待完善 -->
|
||||
<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"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
placeholder="请输入属性描述"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { DataSpecsDataType, dataTypeOptions } from './config'
|
||||
import {
|
||||
ThingModelArrayTypeDataSpecs,
|
||||
ThingModelEnumTypeDataSpecs,
|
||||
ThingModelNumberTypeDataSpecs
|
||||
} from './dataSpecs'
|
||||
import { ThingModelProperty } from '@/api/iot/thinkmodelfunction'
|
||||
import { isEmpty } from '@/utils/is'
|
||||
|
||||
/** 物模型数据 */
|
||||
defineOptions({ name: 'ThingModelDataSpecs' })
|
||||
const props = defineProps<{ modelValue: any }>()
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
|
||||
|
||||
/** 属性值的数据类型切换时初始化相关数据 */
|
||||
const handleChange = (dataType: any) => {
|
||||
property.value.dataSpecsList = []
|
||||
property.value.dataSpecs = {}
|
||||
|
||||
property.value.dataSpecs.dataType = dataType
|
||||
switch (dataType) {
|
||||
case DataSpecsDataType.ENUM:
|
||||
property.value.dataSpecsList.push({
|
||||
dataType: DataSpecsDataType.ENUM,
|
||||
name: '', // 枚举项的名称
|
||||
value: undefined // 枚举值
|
||||
})
|
||||
break
|
||||
case DataSpecsDataType.BOOL:
|
||||
for (let i = 0; i < 2; i++) {
|
||||
property.value.dataSpecsList.push({
|
||||
dataType: DataSpecsDataType.BOOL,
|
||||
name: '', // 布尔值的名称
|
||||
value: i // 布尔值
|
||||
})
|
||||
}
|
||||
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>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,168 +0,0 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<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-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="功能名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入功能名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符" prop="identifier">
|
||||
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
|
||||
</el-form-item>
|
||||
<!-- 属性配置 -->
|
||||
<ThingModelDataSpecs
|
||||
v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
|
||||
v-model="formData.property"
|
||||
/>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ProductVO } from '@/api/iot/product/product'
|
||||
import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
|
||||
import {
|
||||
ProductFunctionTypeEnum,
|
||||
ThingModelData,
|
||||
ThinkModelFunctionApi
|
||||
} from '@/api/iot/thinkmodelfunction'
|
||||
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
|
||||
import { DataSpecsDataType } from './config'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
defineOptions({ name: 'IoTProductThingModelForm' })
|
||||
|
||||
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const formLoading = ref(false)
|
||||
const formType = ref('')
|
||||
const formData = ref<ThingModelData>({
|
||||
type: ProductFunctionTypeEnum.PROPERTY,
|
||||
dataType: DataSpecsDataType.INT,
|
||||
property: {
|
||||
dataType: DataSpecsDataType.INT,
|
||||
dataSpecs: {
|
||||
dataType: DataSpecsDataType.INT
|
||||
}
|
||||
}
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '功能名称不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[\u4e00-\u9fa5a-zA-Z0-9][\u4e00-\u9fa5a-zA-Z0-9\-_/\.]{0,29}$/,
|
||||
message:
|
||||
'支持中文、大小写字母、日文、数字、短划线、下划线、斜杠和小数点，必须以中文、英文或数字开头，不超过 30 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [{ required: true, message: '功能类型不能为空', trigger: 'blur' }],
|
||||
identifier: [
|
||||
{ required: true, message: '标识符不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[a-zA-Z0-9_]{1,50}$/,
|
||||
message: '支持大小写字母、数字和下划线，不超过 50 个字符',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (_: any, value: string, callback: any) => {
|
||||
const reservedKeywords = ['set', 'get', 'post', 'property', 'event', 'time', 'value']
|
||||
if (reservedKeywords.includes(value)) {
|
||||
callback(
|
||||
new Error(
|
||||
'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义'
|
||||
)
|
||||
)
|
||||
} else if (/^\d+$/.test(value)) {
|
||||
callback(new Error('标识符不能是纯数字'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
const formRef = ref()
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await ThinkModelFunctionApi.getProductThingModel(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open, close: () => (dialogVisible.value = false) })
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success'])
|
||||
const submitForm = async () => {
|
||||
await formRef.value.validate()
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = cloneDeep(formData.value) as ThingModelData
|
||||
// 信息补全
|
||||
data.productId = product!.value.id
|
||||
data.productKey = product!.value.productKey
|
||||
data.description = data.property.description
|
||||
data.dataType = data.property.dataType
|
||||
data.property.identifier = data.identifier
|
||||
data.property.name = data.name
|
||||
if (formType.value === 'create') {
|
||||
await ThinkModelFunctionApi.createProductThingModel(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ThinkModelFunctionApi.updateProductThingModel(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
} finally {
|
||||
dialogVisible.value = false // 确保关闭弹框
|
||||
emit('success')
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
type: ProductFunctionTypeEnum.PROPERTY,
|
||||
dataType: DataSpecsDataType.INT,
|
||||
property: {
|
||||
dataType: DataSpecsDataType.INT,
|
||||
dataSpecs: {
|
||||
dataType: DataSpecsDataType.INT
|
||||
}
|
||||
}
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
@ -1,50 +0,0 @@
|
||||
/** dataSpecs 数值型数据结构 */
|
||||
export interface DataSpecsNumberDataVO {
|
||||
dataType: 'int' | 'float' | 'double' // 数据类型，取值为 INT、FLOAT 或 DOUBLE
|
||||
max: string // 最大值，必须与 dataType 设置一致，且为 STRING 类型
|
||||
min: string // 最小值，必须与 dataType 设置一致，且为 STRING 类型
|
||||
step: string // 步长，必须与 dataType 设置一致，且为 STRING 类型
|
||||
precise?: string // 精度，当 dataType 为 FLOAT 或 DOUBLE 时可选
|
||||
defaultValue?: string // 默认值，可选
|
||||
unit: string // 单位的符号
|
||||
unitName: string // 单位的名称
|
||||
}
|
||||
|
||||
/** dataSpecs 枚举型数据结构 */
|
||||
export interface DataSpecsEnumOrBoolDataVO {
|
||||
dataType: 'enum' | 'bool'
|
||||
defaultValue?: string // 默认值，可选
|
||||
name: string // 枚举项的名称
|
||||
value: number | undefined // 枚举值
|
||||
}
|
||||
|
||||
/** 属性值的数据类型 */
|
||||
export const DataSpecsDataType = {
|
||||
INT: 'int',
|
||||
FLOAT: 'float',
|
||||
DOUBLE: 'double',
|
||||
ENUM: 'enum',
|
||||
BOOL: 'bool',
|
||||
TEXT: 'text',
|
||||
DATE: 'date',
|
||||
STRUCT: 'struct',
|
||||
ARRAY: 'array'
|
||||
} as const
|
||||
|
||||
/** 物体模型数据类型配置项 */
|
||||
export const dataTypeOptions = [
|
||||
{ value: DataSpecsDataType.INT, label: 'int32 (整数型)' },
|
||||
{ value: DataSpecsDataType.FLOAT, label: 'float (单精度浮点型)' },
|
||||
{ value: DataSpecsDataType.DOUBLE, label: 'double (双精度浮点型)' },
|
||||
{ value: DataSpecsDataType.ENUM, label: 'enum(枚举型)' },
|
||||
{ value: DataSpecsDataType.BOOL, label: 'bool (布尔型)' },
|
||||
{ value: DataSpecsDataType.TEXT, label: 'text (文本型)' },
|
||||
{ value: DataSpecsDataType.DATE, label: 'date (时间型)' },
|
||||
{ value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
|
||||
{ value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
|
||||
]
|
||||
|
||||
/** 获得物体模型数据类型配置项名称 */
|
||||
export const getDataTypeOptionsLabel = (value: string) => {
|
||||
return dataTypeOptions.find((option) => option.value === value)?.label
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<el-form-item
|
||||
:rules="[{ required: true, message: '元素类型不能为空' }]"
|
||||
label="元素类型"
|
||||
prop="property.dataSpecs.childDataType"
|
||||
>
|
||||
<el-radio-group v-model="dataSpecs.childDataType">
|
||||
<template v-for="item in dataTypeOptions" :key="item.value">
|
||||
<el-radio
|
||||
v-if="
|
||||
!(
|
||||
[DataSpecsDataType.ENUM, DataSpecsDataType.ARRAY, DataSpecsDataType.DATE] as any[]
|
||||
).includes(item.value)
|
||||
"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{ required: true, message: '元素个数不能为空' },
|
||||
{ validator: validateSize, trigger: 'blur' }
|
||||
]"
|
||||
label="元素个数"
|
||||
prop="property.dataSpecs.size"
|
||||
>
|
||||
<el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { DataSpecsDataType, dataTypeOptions } from '../config'
|
||||
import { isEmpty } from '@/utils/is'
|
||||
|
||||
/** 数组型的 dataSpecs 配置组件 */
|
||||
defineOptions({ name: 'ThingModelArrayTypeDataSpecs' })
|
||||
const props = defineProps<{ modelValue: any }>()
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
|
||||
|
||||
/** 校验元素个数 */
|
||||
const validateSize = (_: 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>
|
||||
@ -1,166 +0,0 @@
|
||||
<template>
|
||||
<el-form-item
|
||||
:rules="[{ required: true, validator: validateEnumList, trigger: 'change' }]"
|
||||
label="枚举项"
|
||||
prop="property.dataSpecsList"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center">
|
||||
<span class="flex-1"> 参数值 </span>
|
||||
<span class="flex-1"> 参数描述 </span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in dataSpecsList"
|
||||
:key="index"
|
||||
class="flex items-center justify-between mb-5px"
|
||||
>
|
||||
<el-form-item
|
||||
:prop="`property.dataSpecsList[${index}].value`"
|
||||
:rules="[
|
||||
{ required: true, message: '枚举值不能为空' },
|
||||
{ validator: validateEnumValue, trigger: 'blur' }
|
||||
]"
|
||||
class="flex-1 mb-0"
|
||||
>
|
||||
<el-input v-model="item.value" placeholder="请输入枚举值,如'0'" />
|
||||
</el-form-item>
|
||||
<span class="mx-2">~</span>
|
||||
<el-form-item
|
||||
:prop="`property.dataSpecsList[${index}].name`"
|
||||
:rules="[
|
||||
{ required: true, message: '枚举描述不能为空' },
|
||||
{ validator: validateEnumName, trigger: 'blur' }
|
||||
]"
|
||||
class="flex-1 mb-0"
|
||||
>
|
||||
<el-input v-model="item.name" placeholder="对该枚举项的描述" />
|
||||
</el-form-item>
|
||||
<el-button class="ml-10px" link type="primary" @click="deleteEnum(index)">删除</el-button>
|
||||
</div>
|
||||
<el-button link type="primary" @click="addEnum">+添加枚举项</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import {
|
||||
DataSpecsDataType,
|
||||
DataSpecsEnumOrBoolDataVO
|
||||
} from '@/views/iot/product/product/detail/ThingModel/config'
|
||||
import { isEmpty } from '@/utils/is'
|
||||
|
||||
/** 枚举型的 dataSpecs 配置组件 */
|
||||
defineOptions({ name: 'ThingModelEnumTypeDataSpecs' })
|
||||
const props = defineProps<{ modelValue: any }>()
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<DataSpecsEnumOrBoolDataVO[]>
|
||||
const message = useMessage()
|
||||
|
||||
/** 添加枚举项 */
|
||||
const addEnum = () => {
|
||||
dataSpecsList.value.push({
|
||||
dataType: DataSpecsDataType.ENUM,
|
||||
name: '', // 枚举项的名称
|
||||
value: undefined // 枚举值
|
||||
})
|
||||
}
|
||||
|
||||
/** 删除枚举项 */
|
||||
const deleteEnum = (index: number) => {
|
||||
if (dataSpecsList.value.length === 1) {
|
||||
message.warning('至少需要一个枚举项')
|
||||
return
|
||||
}
|
||||
dataSpecsList.value.splice(index, 1)
|
||||
}
|
||||
|
||||
/** 校验枚举值 */
|
||||
const validateEnumValue = (_: any, value: any, callback: any) => {
|
||||
if (isEmpty(value)) {
|
||||
callback(new Error('枚举值不能为空'))
|
||||
return
|
||||
}
|
||||
if (isNaN(Number(value))) {
|
||||
callback(new Error('枚举值必须是数字'))
|
||||
return
|
||||
}
|
||||
// 检查枚举值是否重复
|
||||
const values = dataSpecsList.value.map((item) => item.value)
|
||||
if (values.filter((v) => v === value).length > 1) {
|
||||
callback(new Error('枚举值不能重复'))
|
||||
return
|
||||
}
|
||||
callback()
|
||||
}
|
||||
|
||||
/** 校验枚举描述 */
|
||||
const validateEnumName = (_: 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 validateEnumList = (_: any, __: any, callback: any) => {
|
||||
if (isEmpty(dataSpecsList.value)) {
|
||||
callback(new Error('请至少添加一个枚举项'))
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否存在空值
|
||||
const hasEmptyValue = dataSpecsList.value.some(
|
||||
(item) => isEmpty(item.value) || isEmpty(item.name)
|
||||
)
|
||||
if (hasEmptyValue) {
|
||||
callback(new Error('存在未填写的枚举值或描述'))
|
||||
return
|
||||
}
|
||||
|
||||
// 检查枚举值是否都是数字
|
||||
const hasInvalidNumber = dataSpecsList.value.some((item) => isNaN(Number(item.value)))
|
||||
if (hasInvalidNumber) {
|
||||
callback(new Error('存在非数字的枚举值'))
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否有重复的枚举值
|
||||
const values = dataSpecsList.value.map((item) => item.value)
|
||||
const uniqueValues = new Set(values)
|
||||
if (values.length !== uniqueValues.size) {
|
||||
callback(new Error('存在重复的枚举值'))
|
||||
return
|
||||
}
|
||||
|
||||
callback()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<el-form-item label="取值范围">
|
||||
<div class="flex items-center justify-between">
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{ required: true, message: '最小值不能为空' },
|
||||
{ validator: validateMin, trigger: 'blur' }
|
||||
]"
|
||||
class="mb-0"
|
||||
prop="property.dataSpecs.min"
|
||||
>
|
||||
<el-input v-model="dataSpecs.min" placeholder="请输入最小值" />
|
||||
</el-form-item>
|
||||
<span class="mx-2">~</span>
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{ required: true, message: '最大值不能为空' },
|
||||
{ validator: validateMax, trigger: 'blur' }
|
||||
]"
|
||||
class="mb-0"
|
||||
prop="property.dataSpecs.max"
|
||||
>
|
||||
<el-input v-model="dataSpecs.max" placeholder="请输入最大值" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{ required: true, message: '步长不能为空' },
|
||||
{ validator: validateStep, trigger: 'blur' }
|
||||
]"
|
||||
label="步长"
|
||||
prop="property.dataSpecs.step"
|
||||
>
|
||||
<el-input v-model="dataSpecs.step" placeholder="请输入步长" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:rules="[{ required: true, message: '请选择单位' }]"
|
||||
label="单位"
|
||||
prop="property.dataSpecs.unit"
|
||||
>
|
||||
<el-select
|
||||
:model-value="dataSpecs.unit ? dataSpecs.unitName + '-' + dataSpecs.unit : ''"
|
||||
filterable
|
||||
placeholder="请选择单位"
|
||||
style="width: 240px"
|
||||
@change="unitChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in UnifyUnitSpecsDTO"
|
||||
:key="index"
|
||||
:label="item.Name + '-' + item.Symbol"
|
||||
:value="item.Name + '-' + item.Symbol"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { UnifyUnitSpecsDTO } from '@/views/iot/utils/constants'
|
||||
import { DataSpecsNumberDataVO } from '../config'
|
||||
|
||||
/** 数值型的 dataSpecs 配置组件 */
|
||||
defineOptions({ name: 'ThingModelNumberTypeDataSpecs' })
|
||||
const props = defineProps<{ modelValue: any }>()
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<DataSpecsNumberDataVO>
|
||||
|
||||
/** 单位发生变化时触发 */
|
||||
const unitChange = (UnitSpecs: string) => {
|
||||
const [unitName, unit] = UnitSpecs.split('-')
|
||||
dataSpecs.value.unitName = unitName
|
||||
dataSpecs.value.unit = unit
|
||||
}
|
||||
|
||||
// 校验最小值
|
||||
const validateMin = (_: any, __: any, callback: any) => {
|
||||
const min = Number(dataSpecs.value.min)
|
||||
const max = Number(dataSpecs.value.max)
|
||||
|
||||
if (isNaN(min)) {
|
||||
callback(new Error('请输入有效的数值'))
|
||||
return
|
||||
}
|
||||
|
||||
if (max !== undefined && !isNaN(max) && min >= max) {
|
||||
callback(new Error('最小值必须小于最大值'))
|
||||
return
|
||||
}
|
||||
|
||||
callback()
|
||||
}
|
||||
|
||||
// 校验最大值
|
||||
const validateMax = (_: any, __: any, callback: any) => {
|
||||
const min = Number(dataSpecs.value.min)
|
||||
const max = Number(dataSpecs.value.max)
|
||||
|
||||
if (isNaN(max)) {
|
||||
callback(new Error('请输入有效的数值'))
|
||||
return
|
||||
}
|
||||
|
||||
if (min !== undefined && !isNaN(min) && max <= min) {
|
||||
callback(new Error('最大值必须大于最小值'))
|
||||
return
|
||||
}
|
||||
|
||||
callback()
|
||||
}
|
||||
|
||||
// 校验步长
|
||||
const validateStep = (_: any, __: any, callback: any) => {
|
||||
const step = Number(dataSpecs.value.step)
|
||||
const min = Number(dataSpecs.value.min)
|
||||
const max = Number(dataSpecs.value.max)
|
||||
|
||||
if (isNaN(step)) {
|
||||
callback(new Error('请输入有效的数值'))
|
||||
return
|
||||
}
|
||||
|
||||
if (step <= 0) {
|
||||
callback(new Error('步长必须大于0'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!isNaN(min) && !isNaN(max) && step > max - min) {
|
||||
callback(new Error('步长不能大于最大值和最小值的差值'))
|
||||
return
|
||||
}
|
||||
|
||||
callback()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +0,0 @@
|
||||
import ThingModelEnumTypeDataSpecs from './ThingModelEnumTypeDataSpecs.vue'
|
||||
import ThingModelNumberTypeDataSpecs from './ThingModelNumberTypeDataSpecs.vue'
|
||||
import ThingModelArrayTypeDataSpecs from './ThingModelArrayTypeDataSpecs.vue'
|
||||
|
||||
export { ThingModelEnumTypeDataSpecs, ThingModelNumberTypeDataSpecs, ThingModelArrayTypeDataSpecs }
|
||||
@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="功能类型" prop="name">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请选择功能类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="[`iot:product-thing-model:create`]"
|
||||
plain
|
||||
type="primary"
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon class="mr-5px" icon="ep:plus" />
|
||||
添加功能
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
<ContentWrap>
|
||||
<el-tabs>
|
||||
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
|
||||
<el-table-column align="center" label="功能类型" prop="type">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="功能名称" prop="name" />
|
||||
<el-table-column align="center" label="标识符" prop="identifier" />
|
||||
<el-table-column align="center" label="数据类型" prop="identifier">
|
||||
<template #default="{ row }">
|
||||
{{ dataTypeOptionsLabel(row.property.dataType) ?? '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数据定义" prop="identifier">
|
||||
<template #default="{ row }">
|
||||
<!-- TODO puhui999: 数据定义展示待完善 -->
|
||||
{{ row.property.dataSpecs ?? row.property.dataSpecsList }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="[`iot:product-thing-model:update`]"
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['iot:product-thing-model:delete']"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-tabs>
|
||||
</ContentWrap>
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ThingModelForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ThingModelData, ThinkModelFunctionApi } from '@/api/iot/thinkmodelfunction'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import ThingModelForm from './ThingModelForm.vue'
|
||||
import { ProductVO } from '@/api/iot/product/product'
|
||||
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
|
||||
import { getDataTypeOptionsLabel } from '@/views/iot/product/product/detail/ThingModel/config'
|
||||
|
||||
defineOptions({ name: 'IoTProductThingModel' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<ThingModelData[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
type: undefined,
|
||||
productId: -1
|
||||
})
|
||||
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
|
||||
const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
queryParams.productId = product?.value?.id || -1
|
||||
const data = await ThinkModelFunctionApi.getProductThingModelPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
queryParams.type = undefined
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await ThinkModelFunctionApi.deleteProductThingModel(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
@ -8,8 +8,8 @@
|
||||
<el-tab-pane label="Topic 类列表" name="topic">
|
||||
<ProductTopic v-if="activeTab === 'topic'" :product="product" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="功能定义" lazy name="thingModel">
|
||||
<IoTProductThingModel ref="thingModelRef" />
|
||||
<el-tab-pane label="功能定义" lazy name="thinkModel">
|
||||
<IoTProductThinkModel ref="thinkModelRef" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="消息解析" name="message" />
|
||||
<el-tab-pane label="服务端订阅" name="subscription" />
|
||||
@ -22,7 +22,7 @@ import { DeviceApi } from '@/api/iot/device'
|
||||
import ProductDetailsHeader from './ProductDetailsHeader.vue'
|
||||
import ProductDetailsInfo from './ProductDetailsInfo.vue'
|
||||
import ProductTopic from './ProductTopic.vue'
|
||||
import IoTProductThingModel from './ThingModel/index.vue'
|
||||
import IoTProductThinkModel from '@/views/iot/thinkmodel/index.vue'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
|
||||
|
||||
@ -309,7 +309,7 @@ const openObjectModel = (item: ProductVO) => {
|
||||
push({
|
||||
name: 'IoTProductDetail',
|
||||
params: { id: item.id },
|
||||
query: { tab: 'thingModel' }
|
||||
query: { tab: 'thinkModel' }
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user