物模型页面调整

This commit is contained in:
高云鹏 2024-07-05 14:41:44 +08:00
parent 4ebb3d9d34
commit 0ebec11ab7
3 changed files with 81 additions and 33 deletions

View File

@ -3,13 +3,25 @@
<el-dialog v-model="modelDialogVisible" :title="modelDialogTitle" :width="400" @close="cancelModelForm">
<el-form ref="modelFormRef" :model="modelForm" :rules="modelFormRules" label-width="110">
<el-form-item prop="iotModelName" :label="ModelFieldsEnums['iotModelName']">
<el-input :disabled="modelDialogState === ModelDialogTitleStateType['detail']" v-model="modelForm.iotModelName"></el-input>
<el-input
:disabled="modelDialogState === ModelDialogTitleStateType['detail']"
v-model="modelForm.iotModelName"
:placeholder="'请输入' + ModelFieldsEnums['iotModelName']"
></el-input>
</el-form-item>
<el-form-item prop="iotModelCode" :label="ModelFieldsEnums['iotModelCode']">
<el-input :disabled="modelDialogState === ModelDialogTitleStateType['detail']" v-model="modelForm.iotModelCode"></el-input>
<el-input
:disabled="modelDialogState === ModelDialogTitleStateType['detail']"
v-model="modelForm.iotModelCode"
:placeholder="'请输入' + ModelFieldsEnums['iotModelCode']"
></el-input>
</el-form-item>
<el-form-item prop="objectType" :label="ModelFieldsEnums['objectType']">
<el-input :disabled="modelDialogState === ModelDialogTitleStateType['detail']" v-model="modelForm.objectType"></el-input>
<el-input
:disabled="modelDialogState === ModelDialogTitleStateType['detail']"
v-model="modelForm.objectType"
:placeholder="'请输入' + ModelFieldsEnums['objectType']"
></el-input>
</el-form-item>
</el-form>
<template #footer v-if="modelDialogState !== ModelDialogTitleStateType['detail']">
@ -28,17 +40,18 @@
class="searchModelInput"
></el-input>
</el-header>
<el-main class="asideMain">
<el-tree-v2
<el-main class="treeMain">
<el-tree
ref="modelTreeRef"
node-key="id"
:data="treeData"
:props="DeviceModelPropReplace"
class="modelTree"
class="treePart"
@node-contextmenu="modelContextMenu"
@node-click="modelNodeClick"
highlight-current
>
</el-tree-v2>
</el-tree>
</el-main>
</el-aside>
<el-container class="mainContainer">
@ -64,7 +77,7 @@
<el-main class="mainMain">
<el-tabs v-model="ModelTabs" @tab-change="changeTabs" class="tabsPart">
<el-tab-pane :label="modelTabsType['attribute']" name="attribute">
<el-table :data="attributeTableData" class="tablePart">
<el-table :data="attributeTableData" class="tablePart" highlight-current-row>
<el-table-column
prop="attributeName"
:label="ModelAttributeFieldsEnums['attributeName']"
@ -152,22 +165,22 @@
</template>
</ContextMenu>
<el-dialog v-model="attributeVisible" :title="attributeFormTitle" @close="closeAttributeForm" :width="600">
<el-form ref="attributeFormRef" :model="attributeForm" label-width="100">
<el-form ref="attributeFormRef" :model="attributeForm" label-width="100" :rules="attributeAndServiceRules">
<el-form-item :label="ModelAttributeFieldsEnums['attributeName']" prop="attributeName">
<el-input v-model="attributeForm.attributeName"></el-input>
<el-input v-model="attributeForm.attributeName" :placeholder="'请输入' + ModelAttributeFieldsEnums['attributeName']"></el-input>
</el-form-item>
<el-form-item :label="ModelAttributeFieldsEnums['attributeCode']" prop="attributeCode">
<el-input v-model="attributeForm.attributeCode"></el-input>
<el-input v-model="attributeForm.attributeCode" :placeholder="'请输入' + ModelAttributeFieldsEnums['attributeCode']"></el-input>
</el-form-item>
<el-form-item :label="ModelAttributeFieldsEnums['attributeTypeName']" prop="attributeType">
<el-select v-model="attributeForm.attributeType">
<el-select v-model="attributeForm.attributeType" :placeholder="'请选择' + ModelAttributeFieldsEnums['attributeTypeName']">
<el-option label="模拟量" :value="138"></el-option>
<el-option label="累积量" :value="139"></el-option>
<el-option label="离散量" :value="140"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="ModelAttributeFieldsEnums['porder']" prop="porder">
<el-input v-model="attributeForm.porder"></el-input>
<el-input v-model="attributeForm.porder" :placeholder="'请输入' + ModelAttributeFieldsEnums['porder']"></el-input>
</el-form-item>
</el-form>
<template #footer>
@ -176,21 +189,21 @@
</template>
</el-dialog>
<el-dialog v-model="serviceVisible" :title="serviceFormTitle" @close="closeServiceForm" :width="600">
<el-form ref="serviceFormRef" :model="serviceForm" label-width="100">
<el-form ref="serviceFormRef" :model="serviceForm" label-width="100" :rules="attributeAndServiceRules">
<el-form-item :label="ModelServiceFieldsEnums['serviceName']" prop="serviceName">
<el-input v-model="serviceForm.serviceName"></el-input>
<el-input v-model="serviceForm.serviceName" :placeholder="'请输入' + ModelServiceFieldsEnums['serviceName']"></el-input>
</el-form-item>
<el-form-item :label="ModelServiceFieldsEnums['serviceCode']" prop="serviceCode">
<el-input v-model="serviceForm.serviceCode"></el-input>
<el-input v-model="serviceForm.serviceCode" :placeholder="'请输入' + ModelServiceFieldsEnums['serviceCode']"></el-input>
</el-form-item>
<el-form-item :label="ModelServiceFieldsEnums['serviceTypeName']" prop="attributeType">
<el-select v-model="serviceForm.serviceType">
<el-form-item :label="ModelServiceFieldsEnums['serviceTypeName']" prop="serviceType">
<el-select v-model="serviceForm.serviceType" :placeholder="'请选择' + ModelServiceFieldsEnums['serviceTypeName']">
<el-option label="遥调" :value="146"></el-option>
<el-option label="遥控" :value="147"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="ModelServiceFieldsEnums['porder']" prop="porder">
<el-input v-model="serviceForm.porder"></el-input>
<el-input v-model="serviceForm.porder" :placeholder="'请输入' + ModelServiceFieldsEnums['porder']"></el-input>
</el-form-item>
</el-form>
<template #footer>
@ -208,7 +221,7 @@ import {
ElAside,
ElHeader,
ElMain,
ElTreeV2,
ElTree,
ElInput,
ElMessage,
ElRadioGroup,
@ -221,7 +234,7 @@ import {
FormInstance,
UploadRequestOptions,
TreeNode,
TreeInstance
TreeInstance,
} from 'element-plus'
import { Reading, DocumentAdd, DocumentChecked, DocumentDelete, Search, Plus, Download, Upload } from '@element-plus/icons-vue'
import {
@ -394,7 +407,7 @@ const modelNodeClick = (target: TreeNode) => {
const openModel = (type: ModelDialogTitleStateKeyType, data?: AddModelType & UpdateModelType) => {
modelDialogState.value = ModelDialogTitleStateType[type]
if (type !== 'add') {
modelForm.value = data!
modelForm.value = JSON.parse(JSON.stringify(data!))
}
// modelOperateVisible.value = false
modelDialogVisible.value = true
@ -418,8 +431,6 @@ const modelAttributeAndServiceInputValue = ref('')
const searchModelAttribute = () => {
if (modelAttributeSearchRadio.value === 'Name') {
if (ModelTabs.value === 'attribute') {
console.log('test')
getAttributeList(modelAttributeSearchRadio.value, modelAttributeAndServiceInputValue.value)
} else if (ModelTabs.value === 'service') {
getServiceList(modelAttributeSearchRadio.value, modelAttributeAndServiceInputValue.value)
@ -673,6 +684,40 @@ const submitServiceForm = () => {
}
})
}
const codeReg = /^[a-zA-Z][a-zA-Z0-9_]*$/
const attributeAndServiceRules = {
attributeCode: [
{ required: true, message: '请输入属性编码', trigger: 'blur' },
{
validator: (rule: any, value: any, callback: any) => {
if (!codeReg.test(value)) {
callback(new Error('必须为字母开头,不能包含特殊字符'))
} else {
callback()
}
},
trigger: 'blur',
},
],
attributeName: [{ required: true, message: '请输入属性名称', trigger: 'blur' }],
attributeType: [{ required: true, message: '请选择属性类型', trigger: 'change' }],
serviceCode: [
{ required: true, message: '请输方法编码', trigger: 'blur' },
{
validator: (rule: any, value: any, callback: any) => {
if (!codeReg.test(value)) {
callback(new Error('必须为字母开头,不能包含特殊字符'))
} else {
callback()
}
},
trigger: 'blur',
},
],
serviceName: [{ required: true, message: '请输入方法名称', trigger: 'blur' }],
serviceType: [{ required: true, message: '请选择方法类型', trigger: 'change' }],
porder: [{ required: true, message: '请输入序号', trigger: 'blur' }],
}
const addModelAttributeAndService = () => {
if (ModelTabs.value === 'attribute') {
@ -762,10 +807,10 @@ $paginationHeight: 32px;
height: 40px;
}
}
.asideMain {
.treeMain {
height: calc(100% - $headerHeight);
overflow-y: auto;
.modelTree {
.treePart {
height: 100%;
background-color: $defaultBackgroundColor;
}

View File

@ -61,7 +61,7 @@ export enum ModelAttributeFieldsEnums {
'attributeName' = '属性名称',
'attributeType' = '属性类型value',
'attributeTypeName' = '属性类型',
'porder' = '测点序号',
'porder' = '序号',
'revision' = '乐观锁',
'createdBy' = '创建人',
'createdTime' = '创建时间',
@ -72,11 +72,11 @@ export enum ModelAttributeFieldsEnums {
export enum ModelServiceFieldsEnums {
'id' = 'id',
'iotModelId' = '所属物模型ID',
'serviceCode' = '属性编码',
'serviceName' = '属性名称',
'serviceType' = '属性类型value',
'serviceTypeName' = '属性类型',
'porder' = '测点序号',
'serviceCode' = '方法编码',
'serviceName' = '方法名称',
'serviceType' = '方法类型value',
'serviceTypeName' = '方法类型',
'porder' = '序号',
'revision' = '乐观锁',
'createdBy' = '创建人',
'createdTime' = '创建时间',

View File

@ -114,7 +114,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { onMounted, ref, computed,nextTick } from 'vue'
import {
ElContainer,
ElAside,
@ -495,6 +495,9 @@ const initData = () => {
.then((res) => {
console.log(res)
treeData.value = [...res]
nextTick(() => {
treeRef.value?.setCurrentKey(res[0]?.id!, false)
})
return
})
.then(() => {