修改台账树
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user