修改台账树

This commit is contained in:
guanj
2026-06-17 09:23:35 +08:00
parent d9dfd804c5
commit 2330b50147
25 changed files with 853 additions and 476 deletions

View File

@@ -5,27 +5,15 @@
<TableHeader>
<template v-slot:select>
<el-form-item label="前置等级">
<el-select
v-model="tableStore.table.params.nodeGrade"
clearable
placeholder="请选择前置等级"
>
<el-option
v-for="item in fontdveoption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
<el-select v-model="tableStore.table.params.nodeGrade" clearable placeholder="请选择前置等级">
<el-option v-for="item in fontdveoption" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择状态">
<el-option
v-for="item in statusoption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
<el-option v-for="item in statusoption" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
</template>
@@ -33,28 +21,18 @@
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增</el-button>
</template>
</TableHeader>
<Table
ref="tableRef"
:row-config="{ isCurrent: true, isHover: true }"
@current-change="currentChangeEvent"
></Table>
<Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }"
@current-change="currentChangeEvent"></Table>
</div>
<div class="pd10" style="width: 300px" v-loading="loading">
<el-input maxlength="32" show-word-limit v-model="filterText" placeholder="请输入内容" clearable @input="change">
<el-input maxlength="32" show-word-limit v-model="filterText" placeholder="请输入内容" clearable
@input="change">
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<el-tree
:style="height"
style="overflow-y: auto"
:data="dataSource"
node-key="id"
ref="treeRef"
default-expand-all
:props="defaultProps"
:filter-node-method="filterNode"
>
<el-tree :style="height" style="overflow-y: auto" class="mt10 elTree" :data="dataSource" node-key="id"
ref="treeRef" default-expand-all :props="defaultProps" :filter-node-method="filterNode">
<template #default="{ node, data }">
<div class="custom-tree-node">
<span>
@@ -62,34 +40,21 @@
{{ node.label }}
</span>
<span v-else>{{ data.name }}</span>
<span
v-if="data.processState != null"
class="iconSpan"
:style="{ background: data.processState == 0 ? '#ff0000' : '#00b07d' }"
></span>
<span v-if="data.processState != null" class="iconSpan"
:style="{ background: data.processState == 0 ? '#ff0000' : '#00b07d' }"></span>
</span>
<div>
<template v-if="data.id">
<el-tooltip content="编辑" placement="left">
<el-button
style="margin-left: 4px"
icon="el-icon-Edit"
type="primary"
@click="edit(data)"
link
></el-button>
<el-button style="margin-left: 4px" icon="el-icon-Edit" type="primary"
@click="edit(data)" link></el-button>
</el-tooltip>
</template>
<template v-else>
<el-popconfirm title="确定重启吗?" placement="left" @confirm="restart(data)">
<template #reference>
<el-button
style="margin-left: 4px"
icon="el-icon-Refresh"
type="warning"
link
@click.stop
/>
<el-button style="margin-left: 4px" icon="el-icon-Refresh" type="warning"
link @click.stop />
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
@@ -104,52 +69,30 @@
</div>
</div>
<el-dialog
draggable
:title="dialogTitle"
v-model="dialogFormVisible"
:close-on-click-modal="false"
width="500px"
:before-close="resetForm"
>
<el-dialog draggable :title="dialogTitle" v-model="dialogFormVisible" :close-on-click-modal="false"
width="500px" :before-close="resetForm">
<el-form :model="formData" label-width="120px" :rules="rules" ref="ruleFormRef" class="form-one">
<el-form-item label="名称:" prop="name">
<el-input maxlength="32" show-word-limit
v-model="formData.name"
placeholder="请输入名称"
@input="handleInput"
></el-input>
<el-form-item label="前置机名称:" prop="name">
<el-input maxlength="32" show-word-limit v-model="formData.name" placeholder="请输入前置机名称"
@input="handleInput"></el-input>
</el-form-item>
<el-form-item label="IP:" prop="ip" class="top">
<el-input maxlength="32" show-word-limit v-model="formData.ip" placeholder="请输入Ip"></el-input>
<el-input maxlength="32" show-word-limit v-model="formData.ip" placeholder="请输入Ip"></el-input>
</el-form-item>
<el-form-item label="等级:" prop="nodeGrade" class="top">
<el-select v-model="formData.nodeGrade" placeholder="请选择等级" style="width: 100%">
<el-option
v-for="item in fontdveoption"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
<el-option v-for="item in fontdveoption" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="最大终端数:" prop="nodeDevNum" class="top">
<el-input show-word-limit
v-model="formData.nodeDevNum"
onkeyup="value = value.replace(/[^0-9]/g,'')"
maxlength="5"
placeholder="请输入最大终端数"
></el-input>
<el-input show-word-limit v-model="formData.nodeDevNum"
onkeyup="value = value.replace(/[^0-9]/g,'')" maxlength="5" placeholder="请输入最大终端数"></el-input>
</el-form-item>
<el-form-item label="最大进程数:" prop="maxProcessNum" class="top">
<el-input show-word-limit
v-model="formData.maxProcessNum"
onkeyup="value = value.replace(/[^0-9]/g,'')"
maxlength="5"
placeholder="请根据监测点规模填写合适进程数1个进程最大可承载200个监测点"
></el-input>
<el-input show-word-limit v-model="formData.maxProcessNum"
onkeyup="value = value.replace(/[^0-9]/g,'')" maxlength="5"
placeholder="请根据监测点规模填写合适进程数1个进程最大可承载200个监测点"></el-input>
<!-- <el-select v-model="formData.maxProcessNum" placeholder="请选择等级" style="width: 100%">
<el-option
v-for="item in NumList"
@@ -160,15 +103,12 @@
</el-select> -->
</el-form-item>
<el-form-item label="排序:" prop="sort" class="top">
<el-input maxlength="32" show-word-limit v-model="formData.sort" placeholder="请输入排序"></el-input>
<!-- <el-input maxlength="32" show-word-limit v-model="formData.sort" placeholder="请输入排序"></el-input> -->
<el-input-number style="width: 100%" :min="0" v-model.number="formData.sort" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="描述:" prop="remark" class="top">
<el-input maxlength="300" show-word-limit
v-model="formData.remark"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入描述"
></el-input>
<el-input maxlength="300" show-word-limit v-model="formData.remark"
:autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入描述"></el-input>
</el-form-item>
</el-form>
<template #footer>
@@ -178,38 +118,21 @@
</el-dialog>
<!-- 绑定进程号 -->
<el-dialog draggable title="绑定进程号" v-model="popUps" :close-on-click-modal="false" width="400px" >
<el-form :model="bindProcessForm" ref="bindProcessFormRef" label-width="80px" :rules="rules2" class="form-one">
<el-dialog draggable title="绑定进程号" v-model="popUps" :close-on-click-modal="false" width="400px">
<el-form :model="bindProcessForm" ref="bindProcessFormRef" label-width="80px" :rules="rules2"
class="form-one">
<el-form-item label="前置机" prop="nodeId">
<el-select
v-model="bindProcessForm.nodeId"
placeholder="请选择前置机"
style="width: 100%"
clearable
@change="handleNodeChange"
>
<el-option
v-for="item in tableStore.table.data"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
<el-select v-model="bindProcessForm.nodeId" placeholder="请选择前置机" style="width: 100%" clearable
@change="handleNodeChange">
<el-option v-for="item in tableStore.table.data" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="进程号" prop="processNo">
<el-select
v-model="bindProcessForm.processNo"
placeholder="请选择进程号"
style="width: 100%"
clearable
>
<el-option
v-for="item in processOptions"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
<el-select v-model="bindProcessForm.processNo" placeholder="请选择进程号" style="width: 100%" clearable>
<el-option v-for="item in processOptions" :key="item.name" :label="item.name"
:value="item.name"></el-option>
</el-select>
</el-form-item>
</el-form>
@@ -251,7 +174,7 @@ const statusoption: any = ref([
{ id: 0, name: '未启用' },
{ id: 1, name: '启用' }
])
const height = mainHeight(70)
const height = mainHeight(80)
const loading = ref(false)
const popUps = ref(false)
const tableRef = ref()
@@ -280,7 +203,7 @@ const formData: any = ref({
maxProcessNum: ''
})
const rules = reactive({
name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
name: [{ required: true, message: '前置机名称不可为空', trigger: 'blur' }],
ip: [{ required: true, message: 'ip不可为空', trigger: 'blur' }],
nodeGrade: [{ required: true, message: '等级不可为空', trigger: 'blur' }],
nodeDevNum: [{ required: true, message: '最大终端数不可为空', trigger: 'blur' }],
@@ -309,8 +232,21 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ title: '名称', field: 'name', minWidth: '110' },
{ title: '前置机名称', field: 'name', minWidth: '110' },
{ title: 'IP', field: 'ip', minWidth: '110' },
{
title: '最大监测点数量',
field: 'nodeDevNum',
minWidth: '80',
},
{
title: '最大进程数',
field: 'maxProcessNum',
minWidth: '80',
},
{ title: '描述', field: 'remark', minWidth: '200', },
{
title: '等级',
field: 'nodeGrade',
@@ -327,21 +263,6 @@ const tableStore = new TableStore({
2: '备用'
}
},
{
title: '最大监测点数量',
field: 'nodeDevNum',
minWidth: '80',
},
{
title: '最大进程数',
field: 'maxProcessNum',
minWidth: '80',
},
{
title: '排序',
field: 'sort',
minWidth: '80'
},
{
title: '状态',
field: 'state',
@@ -356,7 +277,11 @@ const tableStore = new TableStore({
1: '启用'
}
},
{ title: '描述', field: 'remark', minWidth: '200', },
{
title: '排序',
field: 'sort',
minWidth: '80'
},
{
title: '操作',
fixed: 'right',
@@ -640,9 +565,11 @@ onMounted(() => {
height: 140px;
}
}
.default {
display: flex;
}
.custom-tree-node {
flex: 1;
display: flex;
@@ -652,6 +579,7 @@ onMounted(() => {
padding-right: 8px;
width: 300px;
}
.iconSpan {
display: inline-block;
width: 8px;
@@ -660,4 +588,8 @@ onMounted(() => {
border-radius: 50%;
margin-bottom: 2px;
}
.elTree {
border: 1px solid var(--el-border-color);
}
</style>