客户端

树形节点的增删改准备
还没联调接口的

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

@@ -40,13 +40,22 @@
       <div class='container-body'>
         <!-- 左侧树形 -->
         <div class='container-left'>
-          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+          <!-- 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>
+                <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>
+              </span>
+            </span>
+          </el-tree>
         </div>
         <!-- 右侧 -->
         <div class='container-right'>
-          <el-table v-loading="loading" :data="tableList"
-            @selection-change="handleSelectionChange" ref="tableRef" :cell-style="cellStyle" :reserve-selection="true"
-            :row-key="getRowKey">
+          <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" ref="tableRef"
+            :cell-style="cellStyle" :reserve-selection="true" :row-key="getRowKey">
             <el-table-column type="selection" width="55" reserve-selection align="center">
             </el-table-column>
             <el-table-column v-for="item in columns" :key="item.key" :label="item.value" align="center"
@@ -396,6 +405,15 @@ 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)
+      },
     getLeftTreeData(treeTableKey) {
       getTreeData(treeTableKey).then(res => {
         if (res.code === 200 && res.data && res.data.template) {
@@ -415,14 +433,6 @@ export default {
     handleNodeClick(data) {
       // this.querymap.warehouse_name = '一号仓库'
       this.treeNode = data,
-        // console.log('data', data);
-        // console.log('templateData', this.templateData);
-        // console.log('treeTableCondition', this.templateData.treeTableCondition);
-        // let columnValue = this.templateData?.treeTableCondition == 'name' ? data.name : data.label
-        // let treeQueryMap = this.templateData?.treeTableJoinTableCondition
-        // // console.log('treeQueryMap',treeQueryMap)
-        // let x = {}
-        // x[treeQueryMap] = columnValue
         this.queryParams = {
           pageNum: 1, // 第几页
           pageSize: 10, // 每页大小
@@ -2036,7 +2046,7 @@ export default {
 }
 
 .container-left {
-  width: 20%
+  margin-right: 20px;
 }
 
 .container-right {