通讯链路：节点链路基础功能实现

ui/dasadmin/src/views/backend/node/index.vue

@@ -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-form-item prop="nodeName" :label="nodeKeyEnum['nodeName']">
-                    <el-input v-model="nodeForm.nodeName" :disabled="nodeFormDisabled" placeholder="请输入节点名称"></el-input>
+                    <el-input v-model="nodeForm.nodeName" :disabled="nodeFormDisabled" :placeholder="'请输入' + nodeKeyEnum['nodeName']"></el-input>
                 </el-form-item>
-                <el-form-item prop="nodeIp" label="节点IP">
+                <el-form-item prop="nodeIp" :label="nodeKeyEnum['nodeIp']">
-                    <el-input v-model="nodeForm.nodeIp" :disabled="nodeFormDisabled" placeholder="请输入节点IP"></el-input>
+                    <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-input v-model="searchLinkInput" class="defaultSearchInput tableSearchInput" placeholder="请输入链路名称"></el-input>
-                    <el-button :icon="Search" type="primary">查询</el-button>
+                    <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 { ref, nextTick, reactive } from 'vue'
-import { nodeType, linkType } from '/@/views/backend/node/type'
+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) => {
+const searchLinkInput = ref('')
-    getLinkListReq({ nodeId })
+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;

ui/dasadmin/src/views/backend/node/type.ts

@@ -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'>
-
-