树形节点增删改

zkqy-ui/src/api/treeTableList/commonTable.js

@@ -12,3 +12,36 @@ export function getTreeData(query) {
     //baseURL: process.env.VUE_APP_BASE_API1
   })
 }
+
+// 新增树形节点
+export function addTreeNode(data) {
+
+  return request({
+    url: '/dragTree/tree/node/add',
+    method: 'post',
+    data: data,
+    //baseURL: process.env.VUE_APP_BASE_API1
+  })
+}
+
+//  修改树形节点
+export function updateTreeNode(data) {
+
+  return request({
+    url: '/dragTree/tree/node/update',
+    method: 'post',
+    data: data,
+    //baseURL: process.env.VUE_APP_BASE_API1
+  })
+}
+
+// 删除树形节点
+export function deleteTreeNode(data) {
+
+  return request({
+    url: '/dragTree/tree/node/delete',
+    method: 'post',
+    data: data,
+    //baseURL: process.env.VUE_APP_BASE_API1
+  })
+}

zkqy-ui/src/views/tablelist/commonTable/listTreeInfo.vue

@@ -43,15 +43,32 @@
           <!-- show-checkbox 节点是否可以被选择 -->
           <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false">
             <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span style="margin-right: 10px;">{{ node.label }}</span>
+              <!-- <span style="margin-right: 10px;">{{ node.label }}</span> -->
+              <span style="margin-right: 10px;">
+                <template v-if="editingNodeId !== node.id">
+                  {{ node.label }}
+                </template>
+                <!--   -->
+                <el-input v-else v-model="data[defaultProps.label]" @blur="saveNodeLabel(node, data)"
+                  @keydown.enter.native="saveNodeLabel(node, data)"></el-input>
+              </span>
               <span>
-                <el-button icon="el-icon-edit"  type="text" @click.stop="() => editNodeLabel(node, data)"></el-button>
-                <el-button icon="el-icon-plus"  type="text" @click.stop="() => addNode(node, data)"></el-button>
-                <el-button icon="el-icon-delete"  type="text" @click.stop="() => deleteNode(node, data)"></el-button>
+                <el-button icon="el-icon-edit" type="text" @click.stop="() => editNodeLabel(node, data)"></el-button>
+                <el-button icon="el-icon-plus" type="text" @click.stop="() => openAddDialog(node, data)"></el-button>
+                <el-button icon="el-icon-delete" type="text" @click.stop="() => deleteNode(node, data)"></el-button>
               </span>
             </span>
           </el-tree>
+           <!-- 新增节点对话框 -->
+    <el-dialog title="请输入新节点名称" :visible.sync="dialogVisible" width="30%">
+      <el-input v-model="newNodeName" placeholder="请输入内容"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmAddNode()">确 定</el-button>
+      </span>
+    </el-dialog>
         </div>
+        
         <!-- 右侧 -->
         <div class='container-right'>
           <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" ref="tableRef"
@@ -193,7 +210,7 @@ import {
   getStatisticList,
 } from "@/api/tablelist/commonTable";
 import {
-  getTreeData
+  getTreeData, addTreeNode, updateTreeNode, deleteTreeNode
 } from "@/api/treeTableList/commonTable";
 import { listData } from "@/api/system/tenant/data";
 import { getToken } from "@/utils/auth";
@@ -221,6 +238,10 @@ export default {
   },
   data() {
     return {
+      editingNodeId: null,
+      dialogVisible: false,
+      newNodeName: '',
+      currentNode: null, // 当前操作的节点
       treeData: [],
       defaultProps: {
         children: 'children',
@@ -405,15 +426,126 @@ export default {
     // this.initFormGroupDialog();
   },
   methods: {
-      editNodeLabel(node, data) {
-        console.log('editNodeLabel--->',node, data)
-      },
-      addNode(node, data) {
-        console.log('addNode--->', node, data)
-      },
-      deleteNode(node, data) {
-        console.log('deleteNode--->',node, data)
-      },
+    editNodeLabel(node, data) {
+      this.editingNodeId = node.id;
+      // if(this.templateData && data){
+      //   let data ={
+      //     // 表名称(固定)
+      //     tableName:this.templateData?.treeTableName,
+      //     // 主键名(固定)
+      //     primaryName:this.templateData?.treeTablePrimaryKey,
+      //     // 主键值
+      //     // primaryValue:data.id,
+      //     // 字段名 (固定)
+      //     columnName:this.templateData?.treeShowLabel,
+      //     // 字段值
+      //     // columnValue:data,
+      //     // 父键的名(固定)
+      //     parentName:this.templateData?.treeTableDgl,
+      //   }
+      //   console.log('editdata',data)
+      // }
+      this.$nextTick(() => {
+        const input = document.querySelector(`input[aria-label="${node.id}"]`);
+        if (input) input.focus();
+      });
+    },
+    saveNodeLabel(node, data, t) {
+      this.editingNodeId = null;
+      let columnValue = data[this.defaultProps.label]
+      if (this.templateData && node?.data && columnValue) {
+        let data = {
+          // 表名称(固定)
+          tableName: this.templateData?.treeTableName,
+          // 主键名(固定)
+          primaryName: this.templateData?.treeTablePrimaryKey,
+          // 主键值
+          primaryValue: node?.data.id,
+          // 字段名 (固定)
+          columnName: this.templateData?.treeShowLabel,
+          // 字段值
+          columnValue: columnValue,
+          // 父键的名(固定)
+          parentName: this.templateData?.treeTableDgl,
+        }
+        console.log('editdata', data)
+        
+        updateTreeNode(data).then(res => {
+            console.log('editdataRes', res)
+            // 成功的话要补上重新调用树形的接口
+          })
+        
+      }
+
+      // 在此处调用你的保存接口
+    },
+    openAddDialog(node, data) {
+      this.currentNode = data; // 记录当前操作的节点
+      this.dialogVisible = true; // 显示对话框
+    },
+    confirmAddNode() {
+      if (!this.newNodeName.trim()) {
+        this.$message.error('节点名称不能为空');
+        return;
+      }
+      let newNode = {
+        id: new Date().getTime(), // 使用时间戳作为ID
+        name: this.newNodeName, // 用户输入的新节点名称
+        children: []
+      };
+      if (!this.currentNode.children) {
+        this.$set(this.currentNode, 'children', []);
+      }
+      // this.currentNode.children.push(newNode);
+      this.dialogVisible = false; // 关闭对话框
+      this.newNodeName = ''; // 清空输入框
+      console.log('Added node:', newNode,this.currentNode);
+      if(this.currentNode && this.templateData && newNode){
+        let data = {
+          // 表名称(固定)
+          tableName: this.templateData?.treeTableName,
+          // 主键名(固定)
+          primaryName: this.templateData?.treeTablePrimaryKey,
+          // 主键值
+          primaryValue: this.currentNode.id,
+          // 字段名 (固定)
+          columnName: this.templateData?.treeShowLabel,
+          // 字段值
+          columnValue: newNode?.name,
+          // 父键的名(固定)
+          parentName: this.templateData?.treeTableDgl,
+        }
+        console.log('add', data)
+        addTreeNode(data).then(res => {
+            console.log('addTreeNodeRes', res)
+            // 成功的话要补上重新调用树形的接口
+          })
+      }
+    },
+    deleteNode(node, data) {
+      console.log('deleteNode--->', node, data)
+       if(data && this.templateData){
+        let data1 = {
+          // 表名称(固定)
+          tableName: this.templateData?.treeTableName,
+          // 主键名(固定)
+          primaryName: this.templateData?.treeTablePrimaryKey,
+          // 主键值
+          primaryValue: data.id,
+          // 字段名 (固定)
+          columnName: this.templateData?.treeShowLabel,
+          // 字段值
+          columnValue: data?.label,
+          // 父键的名(固定)
+          parentName: this.templateData?.treeTableDgl,
+        }
+        console.log('add', data1)
+        deleteTreeNode(data1).then(res => {
+            console.log('deleteTreeNode', res)
+            // 成功的话要补上重新调用树形的接口
+          })
+       }
+    },
     getLeftTreeData(treeTableKey) {
       getTreeData(treeTableKey).then(res => {
         if (res.code === 200 && res.data && res.data.template) {
@@ -2060,4 +2192,17 @@ export default {
 ::v-deep .el-table__empty-block {
   width: 100% !important;
 }
+
+.custom-tree-node ::v-deep .el-input--medium .el-input__inner {
+  height: 20px;
+  line-height: 20px;
+  width: 60px;
+}
+
+.custom-tree-node ::v-deep .el-input--medium {
+  font-size: 14px;
+  height: 20px;
+  line-height: 20px;
+  width: 60px;
+}
 </style>