通讯链路：节点链路基础功能实现
This commit is contained in:
高云鹏
parent
55009164d0
commit
a5390de06a
@ -2,20 +2,20 @@
|
||||
<div class="node">
|
||||
<el-dialog v-model="nodeVisible" :title="nodeTitle" width="600">
|
||||
<el-form :model="nodeForm" ref="nodeFormRef" :label-width="100" :rules="nodeFormRules">
|
||||
<el-form-item prop="nodeName" label="节点名称">
|
||||
<el-input v-model="nodeForm.nodeName" :disabled="nodeFormDisabled" placeholder="请输入节点名称"></el-input>
|
||||
<el-form-item prop="nodeName" :label="nodeKeyEnum['nodeName']">
|
||||
<el-input v-model="nodeForm.nodeName" :disabled="nodeFormDisabled" :placeholder="'请输入' + nodeKeyEnum['nodeName']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="nodeIp" label="节点IP">
|
||||
<el-input v-model="nodeForm.nodeIp" :disabled="nodeFormDisabled" placeholder="请输入节点IP"></el-input>
|
||||
<el-form-item prop="nodeIp" :label="nodeKeyEnum['nodeIp']">
|
||||
<el-input v-model="nodeForm.nodeIp" :disabled="nodeFormDisabled" :placeholder="'请输入' + nodeKeyEnum['nodeIp']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="orgId" label="所属机构">
|
||||
<el-form-item prop="orgId" :label="nodeKeyEnum['orgId']">
|
||||
<el-tree-select
|
||||
v-model="nodeForm.orgId"
|
||||
:disabled="nodeFormDisabled"
|
||||
lazy
|
||||
:load="loadSelectOrgTreeData"
|
||||
check-strictly
|
||||
placeholder="请选择所属机构"
|
||||
:placeholder="'请选择' + nodeKeyEnum['orgId']"
|
||||
></el-tree-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -24,9 +24,35 @@
|
||||
<el-button @click="closeNodeForm">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="linkVisible" :title="linkTitle" width="600">
|
||||
<el-form :model="linkForm" ref="linkFormRef" :label-width="100" :rules="linkFormRules">
|
||||
<el-form-item prop="linkName" :label="linkKeyEnum['linkName']">
|
||||
<el-input v-model="linkForm.linkName" :placeholder="'请输入' + linkKeyEnum['linkName']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="protocol" :label="linkKeyEnum['protocol']">
|
||||
<el-input v-model="linkForm.protocol" :placeholder="'请输入' + linkKeyEnum['protocol']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="params" :label="linkKeyEnum['params']">
|
||||
<el-input v-model="linkForm.params" :placeholder="'请输入' + linkKeyEnum['params']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="nodeId" :label="linkKeyEnum['nodeName']">
|
||||
<!-- <el-input v-model="linkForm.nodeId" :placeholder="'请输入' + linkKeyEnum['nodeName']"></el-input> -->
|
||||
<el-tree-select
|
||||
:data="treeData"
|
||||
v-model="linkForm.nodeId"
|
||||
:placeholder="'请选择' + linkKeyEnum['nodeName']"
|
||||
:props="{ label: 'nodeName', value: 'id' }"
|
||||
></el-tree-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="submitLinkForm">提交</el-button>
|
||||
<el-button @click="closeLinkForm">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<Container :has-aside="true">
|
||||
<template #asideHeader>
|
||||
<el-input v-model="searchTreeInput" class="defaultSearchInput"></el-input>
|
||||
<el-input v-model="searchTreeInput" class="defaultSearchInput" @input="debounceSearchNode" placeholder="请输入节点名称"></el-input>
|
||||
</template>
|
||||
<template #asideMain>
|
||||
<el-tree
|
||||
@ -41,11 +67,11 @@
|
||||
</template>
|
||||
<template #mainHeader>
|
||||
<div class="mainHeaderCenter">
|
||||
<el-input class="defaultSearchInput tableSearchInput"></el-input>
|
||||
<el-button :icon="Search" type="primary">查询</el-button>
|
||||
<el-input v-model="searchLinkInput" class="defaultSearchInput tableSearchInput" placeholder="请输入链路名称"></el-input>
|
||||
<el-button :icon="Search" type="primary" @click="searchLink">查询</el-button>
|
||||
</div>
|
||||
<div class="mainHeaderRight">
|
||||
<el-button :icon="Plus" type="primary">新增</el-button>
|
||||
<el-button :icon="Plus" type="primary" @click="addLinkList">新增</el-button>
|
||||
<el-upload :show-file-list="false" :limit="1">
|
||||
<template #trigger>
|
||||
<el-button :icon="Upload">导入</el-button>
|
||||
@ -55,7 +81,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #mainMain>
|
||||
<el-table :data="linkTableData">
|
||||
<el-table :data="linkTableData" class="tablePart">
|
||||
<el-table-column prop="linkName" label="链路名称" align="center"></el-table-column>
|
||||
<el-table-column prop="protocol" label="协议类型" align="center"></el-table-column>
|
||||
<el-table-column prop="params" label="参数" align="center"></el-table-column>
|
||||
@ -63,9 +89,9 @@
|
||||
<el-table-column fixed="right" label="操作" min-width="80" align="center">
|
||||
<template #default="scope">
|
||||
<div class="tableOperate">
|
||||
<a>编辑</a>
|
||||
<a @click="editLinkList(scope.row)">编辑</a>
|
||||
<a>|</a>
|
||||
<el-popconfirm title="确定删除么？">
|
||||
<el-popconfirm title="确定删除么？" @confirm="delLinkList(scope.row)">
|
||||
<template #reference>
|
||||
<a>删除</a>
|
||||
</template>
|
||||
@ -74,6 +100,17 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="mainFooter">
|
||||
<el-pagination
|
||||
v-model:current-page="paginationOptions.current"
|
||||
v-model:page-size="paginationOptions.pageSize"
|
||||
:total="paginationOptions.total"
|
||||
:page-sizes="paginationOptions.pageSizes"
|
||||
background
|
||||
:pager-count="7"
|
||||
layout="prev, pager, next, jumper,sizes,total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
</Container>
|
||||
<ContextMenu v-model:visible="nodeContextMenuVisible" :pos="nodeContextMenuPos">
|
||||
@ -87,7 +124,7 @@
|
||||
<el-button @click.stop>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm @confirm="submitNode">
|
||||
<el-popconfirm @confirm="submitNodeConfig">
|
||||
<template #reference>
|
||||
<el-button @click.stop>配置下发</el-button>
|
||||
</template>
|
||||
@ -99,11 +136,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElInput, ElButton, ElTree, ElTable, ElMessage } from 'element-plus'
|
||||
import { ElInput, ElButton, ElTree, ElTable, ElMessage, ElTreeSelect } from 'element-plus'
|
||||
import type { FormInstance, TreeInstance } from 'element-plus'
|
||||
import { Search, Plus, Upload, Download } from '@element-plus/icons-vue'
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { nodeType, linkType } from '/@/views/backend/node/type'
|
||||
import { ref, nextTick, reactive } from 'vue'
|
||||
import { nodeType, nodeKeyEnum, linkType, linkKeyEnum } from '/@/views/backend/node/type'
|
||||
import ContextMenu from '/@/views/backend/auth/model/contextMenu.vue'
|
||||
import Container from '/@/components/container/index.vue'
|
||||
import {
|
||||
@ -120,11 +157,13 @@ import {
|
||||
submitNodeConfigReq,
|
||||
} from '/@/api/backend/node/request'
|
||||
import { getInstitutionalTreeListReq } from '/@/api/backend/org/request'
|
||||
import { debounce } from 'lodash-es'
|
||||
const searchTreeInput = ref('')
|
||||
|
||||
const replaceTreeProps = { label: 'nodeName' }
|
||||
const nodeTreeRef = ref<TreeInstance>()
|
||||
const treeData = ref<nodeType[]>([])
|
||||
let originTreeData: nodeType[] = []
|
||||
|
||||
const nodeVisible = ref(false)
|
||||
const nodeTitle = ref('新增节点')
|
||||
@ -188,7 +227,9 @@ const loadSelectOrgTreeData = (node: any, resolve: any) => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
getTreeData(node.data.id)
|
||||
console.log(node)
|
||||
|
||||
getTreeData(node.data.value)
|
||||
.then((res) => {
|
||||
if (!res.length) {
|
||||
node.data.isLeaf = true
|
||||
@ -208,7 +249,10 @@ const nodeContextMenuPos = ref({
|
||||
|
||||
const contextMenuTreeData = ref<nodeType>()
|
||||
const clickTreeData = ref<nodeType>()
|
||||
const nodeClick = (node: any, nodeData: nodeType) => {}
|
||||
const nodeClick = (nodeData: nodeType) => {
|
||||
clickTreeData.value = nodeData
|
||||
getLinkData(nodeData.id!)
|
||||
}
|
||||
const nodeContextMenu = (event: any, nodeData: nodeType) => {
|
||||
nodeContextMenuPos.value.x = event.pageX
|
||||
nodeContextMenuPos.value.y = event.pageY
|
||||
@ -248,7 +292,7 @@ const delNode = () => {
|
||||
ElMessage.error(err?.response?.data?.msg ?? '删除失败')
|
||||
})
|
||||
}
|
||||
const submitNode = () => {}
|
||||
const submitNodeConfig = () => {}
|
||||
|
||||
const submitNodeForm = () => {
|
||||
nodeFormRef.value?.validate((valid: boolean) => {
|
||||
@ -286,8 +330,8 @@ const submitNodeForm = () => {
|
||||
})
|
||||
}
|
||||
const closeNodeForm = () => {
|
||||
nodeFormRef.value?.resetFields()
|
||||
nodeForm.value = JSON.parse(JSON.stringify(originNodeData))
|
||||
nodeFormRef.value?.resetFields()
|
||||
nodeVisible.value = false
|
||||
}
|
||||
|
||||
@ -296,6 +340,7 @@ const getNodeList = () => {
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
treeData.value = res.data!
|
||||
originTreeData = res.data!
|
||||
clickTreeData.value = res.data![0]
|
||||
nextTick(() => {
|
||||
nodeTreeRef.value?.setCurrentKey(res.data![0].id)
|
||||
@ -309,13 +354,121 @@ const getNodeList = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const searchNode = (val: string) => {
|
||||
if (val === '') {
|
||||
treeData.value = originTreeData
|
||||
return
|
||||
}
|
||||
const reg = new RegExp(val, 'i')
|
||||
treeData.value = originTreeData.filter((item) => reg.test(item.nodeName))
|
||||
}
|
||||
const debounceSearchNode = debounce(searchNode, 500)
|
||||
|
||||
const linkVisible = ref(false)
|
||||
const linkTitle = ref('新增链路')
|
||||
const originLinkData: linkType = {
|
||||
id: undefined,
|
||||
linkName: '',
|
||||
protocol: '',
|
||||
params: '',
|
||||
nodeName: '',
|
||||
nodeId: '',
|
||||
revision: 1,
|
||||
}
|
||||
const linkFormRef = ref<FormInstance>()
|
||||
const linkForm = ref<linkType>(JSON.parse(JSON.stringify(originLinkData)))
|
||||
const linkFormRules = {
|
||||
linkName: [{ required: true, message: '请输入' + linkKeyEnum['linkName'], trigger: 'blur' }],
|
||||
protocol: [{ required: true, message: '请输入' + linkKeyEnum['protocol'], trigger: 'blur' }],
|
||||
params: [{ required: true, message: '请输入' + linkKeyEnum['params'], trigger: 'blur' }],
|
||||
nodeId: [{ required: true, message: '请输入' + linkKeyEnum['nodeName'], trigger: 'blur' }],
|
||||
}
|
||||
const linkTableData = ref<linkType[]>([])
|
||||
|
||||
const getLinkData = (nodeId: string) => {
|
||||
getLinkListReq({ nodeId })
|
||||
const searchLinkInput = ref('')
|
||||
const searchLink = () => {
|
||||
getLinkData(clickTreeData.value!.id!, searchLinkInput.value)
|
||||
}
|
||||
|
||||
const addLinkList = () => {
|
||||
linkForm.value = JSON.parse(JSON.stringify(originLinkData))
|
||||
linkTitle.value = '新增链路'
|
||||
linkForm.value.nodeId = clickTreeData.value?.id!
|
||||
linkVisible.value = true
|
||||
}
|
||||
const editLinkList = (row: linkType) => {
|
||||
linkForm.value = JSON.parse(JSON.stringify(row))
|
||||
linkTitle.value = '编辑链路'
|
||||
linkVisible.value = true
|
||||
}
|
||||
const closeLinkForm = () => {
|
||||
linkForm.value = JSON.parse(JSON.stringify(originLinkData))
|
||||
linkFormRef.value?.resetFields()
|
||||
linkVisible.value = false
|
||||
}
|
||||
const delLinkList = (row: linkType) => {
|
||||
delLinkListReq({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
ElMessage.success('删除成功')
|
||||
getLinkData(clickTreeData.value!.id!)
|
||||
} else {
|
||||
ElMessage.error(res.msg ?? '删除失败')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err?.response?.data?.msg ?? '删除失败')
|
||||
})
|
||||
}
|
||||
const submitLinkForm = () => {
|
||||
linkFormRef.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
if (linkTitle.value === '新增链路') {
|
||||
addLinkListReq(linkForm.value)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
ElMessage.success('新增成功')
|
||||
linkVisible.value = false
|
||||
getLinkData(clickTreeData.value!.id!)
|
||||
} else {
|
||||
ElMessage.error(res.msg ?? '新增失败')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err?.response?.data?.msg ?? '新增失败')
|
||||
})
|
||||
} else if (linkTitle.value === '编辑链路') {
|
||||
updateLinkListReq(linkForm.value)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
ElMessage.success('编辑成功')
|
||||
linkVisible.value = false
|
||||
getLinkData(clickTreeData.value!.id!)
|
||||
} else {
|
||||
ElMessage.error(res.msg ?? '编辑失败')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err?.response?.data?.msg ?? '编辑失败')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const paginationOptions = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
pageSizes: [10, 20, 30],
|
||||
})
|
||||
|
||||
const getLinkData = (nodeId: string, linkName?: string) => {
|
||||
getLinkListReq({ nodeId, linkName, pageNum: paginationOptions.current, pageSize: paginationOptions.pageSize })
|
||||
.then((res) => {
|
||||
if (res.rows) {
|
||||
linkTableData.value = res.rows
|
||||
paginationOptions.total = res.total
|
||||
} else {
|
||||
ElMessage.error(res.msg ?? '查询失败')
|
||||
}
|
||||
@ -329,7 +482,9 @@ getNodeList().then(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
$paginationHeight: 32px;
|
||||
|
||||
.node {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -355,6 +510,9 @@ getNodeList().then(() => {
|
||||
align-items: center;
|
||||
width: 290px;
|
||||
}
|
||||
.tablePart {
|
||||
height: calc(100% - $paginationHeight);
|
||||
}
|
||||
.tableOperate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -368,6 +526,12 @@ getNodeList().then(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.mainFooter {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modelOperate {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -36,7 +36,7 @@ export type updateNodeType = Pick<nodeType, 'id' | 'nodeName' | 'nodeIp' | 'orgI
|
||||
|
||||
export type delNodeType = Pick<nodeType, 'id'>
|
||||
|
||||
export enum linkEnum {
|
||||
export enum linkKeyEnum {
|
||||
id = '链路ID',
|
||||
linkName = '链路名称',
|
||||
protocol = '协议类型',
|
||||
@ -55,12 +55,14 @@ export type linkType = {
|
||||
nodeId: string
|
||||
revision: number
|
||||
}
|
||||
export type getLinkType = Pick<linkType, 'nodeId'>
|
||||
export type getLinkType = Pick<linkType, 'nodeId'> & {
|
||||
linkName?: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
export type addLinkType = Pick<linkType, 'linkName' | 'protocol' | 'params' | 'nodeId'>
|
||||
|
||||
export type updateLinkType = Pick<linkType, 'id' | 'linkName' | 'protocol' | 'params' | 'nodeName' | 'nodeId' | 'revision'>
|
||||
|
||||
export type delLinkType = Pick<linkType, 'id'>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user