From 179916494ba7b51a2efb86d5b81bfecffbc4f562 Mon Sep 17 00:00:00 2001
From: zhangjunwen <zhangjunwen@inspur.com>
Date: Tue, 29 Oct 2024 10:21:33 +0800
Subject: [PATCH] =?UTF-8?q?OkrTree=E6=B7=BB=E5=8A=A0=E5=AD=90=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E5=9B=9E=E5=A4=8D=E5=92=8C=E5=86=85=E5=AE=B9=E4=BC=A0?=
 =?UTF-8?q?=E9=80=92=E7=BB=99=E8=B0=83=E7=94=A8=E7=BB=84=E4=BB=B6=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VueOkrTree/vue-okr-tree/OkrTree.vue       |   2 +
 .../VueOkrTree/vue-okr-tree/OkrTreeNode.vue   | 117 +++++++++++++++++-
 .../inspectionPlan/inspectionPlanTree.vue     |  56 ++++++++-
 3 files changed, 169 insertions(+), 6 deletions(-)

diff --git a/imt-ui/src/components/VueOkrTree/vue-okr-tree/OkrTree.vue b/imt-ui/src/components/VueOkrTree/vue-okr-tree/OkrTree.vue
index 669ed23..80d2ead 100644
--- a/imt-ui/src/components/VueOkrTree/vue-okr-tree/OkrTree.vue
+++ b/imt-ui/src/components/VueOkrTree/vue-okr-tree/OkrTree.vue
@@ -37,6 +37,7 @@ import TreeStore from "./model/tree-store.js";
 import { getNodeKey } from "./model/util";
 export default {
   name: "OkrTree",
+  inject: ["eventBus"],
   components: {
     OkrTreeNode,
   },
@@ -160,6 +161,7 @@ export default {
       animateName: this.animateName,
     });
     this.root = this.store.root;
+    this.okrEventBus.$on("inputCompleted", this.handleInputCompleted);
   },
   watch: {
     data(newVal) {
diff --git a/imt-ui/src/components/VueOkrTree/vue-okr-tree/OkrTreeNode.vue b/imt-ui/src/components/VueOkrTree/vue-okr-tree/OkrTreeNode.vue
index 6170687..aaf0c60 100644
--- a/imt-ui/src/components/VueOkrTree/vue-okr-tree/OkrTreeNode.vue
+++ b/imt-ui/src/components/VueOkrTree/vue-okr-tree/OkrTreeNode.vue
@@ -145,14 +145,42 @@
         ></OkrTreeNode>
       </div>
     </transition>
+    <!-- 新增的输入框和显示区域 -->
+    <div
+      v-if="isInputVisible"
+      class="input-container"
+    >
+      <el-input
+        type="text"
+        v-model="inputValue"
+        @keyup.native.enter="handleInputEnter"
+        @blur="handleBlur"
+        maxlength="30"
+        show-word-limit
+        placeholder="输入点检结果..."
+      />
+    </div>
+    <div
+      v-if="inputDisplayText"
+      class="input-display"
+    >
+      {{ inputDisplayText }}
+    </div>
+    <el-button
+      v-if="inputDisplayText"
+      class="input-button"
+      type="text"
+      @click="editInput()"
+    >编辑</el-button>
   </div>
 </template>
 <script>
 import { getNodeKey } from "./model/util";
 import _ from "lodash";
+
 export default {
   name: "OkrTreeNode",
-  inject: ["okrEventBus"],
+  inject: ["okrEventBus", "eventBus"],
   props: {
     props: {},
     node: {
@@ -404,6 +432,11 @@ export default {
       // node 的展开状态
       expanded: false,
       tree: null,
+      // 新增的数据
+      isInputVisible: false,
+      inputValue: "",
+      inputDisplayText: "",
+      isEnter: false,
     };
   },
   created() {
@@ -420,13 +453,64 @@ export default {
     }
   },
   methods: {
+    editInput() {
+      this.inputValue = this.inputDisplayText;
+      this.inputDisplayText = false;
+      this.isInputVisible = true;
+    },
+    // 新增的方法
+    showInput() {
+      this.isInputVisible = true;
+      this.$nextTick(() => {
+        this.$el.querySelector("input").focus();
+      });
+    },
+    handleBlur() {
+      if (!this.isEnter) {
+        this.inputDisplayText = this.inputValue;
+        this.eventBus.$emit("inputCompleted", {
+          node: this.node,
+          inputValue: this.inputValue,
+        });
+        this.inputValue = "";
+        this.isInputVisible = false;
+      }
+      this.isEnter = false;
+    },
+    handleInputEnter() {
+      this.isEnter = true;
+      this.inputDisplayText = this.inputValue;
+      this.eventBus.$emit("inputCompleted", {
+        node: this.node,
+        inputValue: this.inputValue,
+      });
+      this.inputValue = "";
+      this.isInputVisible = false;
+      // 这里可以添加逻辑将输入信息发送到父组件或其他处理逻辑
+    },
+    handleInputBlur() {
+      if (!this.inputValue) {
+        this.isInputVisible = false;
+      }
+    },
+    // 触发显示输入框的方法，可以在handleNodeClick或其他合适的地方调用
+    toggleInput() {
+      if (this.isInputVisible) {
+        this.handleInputBlur();
+      } else {
+        this.showInput();
+      }
+    },
     getNodeKey(node) {
       return getNodeKey(this.nodeKey, node.data);
     },
-    handleNodeClick() {
+    handleNodeClick(node) {
       const store = this.tree.store;
       store.setCurrentNode(this.node);
       this.tree.$emit("node-click", this.node.data, this.node, this);
+      if (this.node.isLeaf && this.node.childNodes) {
+        this.toggleInput();
+      } // 触发显示输入框
     },
     handleBtnClick(isLeft) {
       isLeft = isLeft === "left";
@@ -471,3 +555,32 @@ export default {
   },
 };
 </script>
+<style scoped>
+/* 新增的样式 */
+.input-container {
+  /* margin-top: 10px; */
+  margin-left: 10px;
+}
+
+.input-container input {
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%; /* 或者你需要的宽度 */
+  box-sizing: border-box;
+}
+
+.input-display {
+  margin-left: 10px;
+  color: #666;
+  font-size: 16px;
+  width: 150px; /* 设置div的宽度 */
+  white-space: nowrap; /* 确保文本在一行内显示 */
+  overflow: hidden; /* 隐藏超出div宽度的文本 */
+  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
+}
+.input-button {
+  text-align: center;
+  align-items: center;
+}
+</style>
diff --git a/imt-ui/src/views/system/inspectionPlan/inspectionPlanTree.vue b/imt-ui/src/views/system/inspectionPlan/inspectionPlanTree.vue
index f0be81f..74cf64f 100644
--- a/imt-ui/src/views/system/inspectionPlan/inspectionPlanTree.vue
+++ b/imt-ui/src/views/system/inspectionPlan/inspectionPlanTree.vue
@@ -24,13 +24,40 @@
             default-expand-all
             :current-lable-class-name="renderCurrentClass"
             @node-click="nodeClick"
-          ></vue-okr-tree>
+            @comment-submitted="handleCommentSubmitted"
+          >
+          </vue-okr-tree>
         </div>
       </el-checkbox>
     </el-checkbox-group>
+    <div
+      v-for="(tree,index) in treeData"
+      :key="tree.inspectionPlanId"
+      :label="tree.inspectionPlanId"
+    >
+      <div
+        class="component-wrapper"
+        style="margin:0 3%;"
+      >
+        <vue-okr-tree
+          class="custom-tree"
+          :data="objToList(tree)"
+          node-key="nodeId"
+          direction="horizontal"
+          :props="props"
+          show-collapsable
+          default-expand-all
+          :current-lable-class-name="renderCurrentClass"
+          @node-click="nodeClick"
+          @comment-submitted="handleCommentSubmitted"
+        >
+        </vue-okr-tree>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import Vue from "vue";
 import { VueOkrTree } from "@/components/VueOkrTree/index.js";
 import * as InspectionPlanApi from "@/api/system/inspection/plan";
 import alipayChannelFormVue from "../../pay/app/components/alipayChannelForm.vue";
@@ -41,6 +68,7 @@ export default {
   },
   data() {
     return {
+      eventBus: new Vue(),
       treeData: [
         {
           id: 0,
@@ -104,16 +132,36 @@ export default {
         label: "inspectionName",
       },
       selectedTreeList: [],
+      textarea: "",
+    };
+  },
+  provide() {
+    return {
+      eventBus: this.eventBus,
     };
   },
   mounted() {
     // this.toggleExpand(this.data, true);
     this.getList();
   },
+  created() {
+    this.eventBus.$on("inputCompleted", this.handleGlobalInputCompleted);
+  },
+  beforeDestroy() {
+    this.eventBus.$off("inputCompleted");
+  },
   methods: {
-    nodeClick(obj, node) {
-      console.log("点击obj:", obj);
-      console.log("点击node:", node);
+    handleGlobalInputCompleted({ node, inputValue }) {
+      // 在这里处理全局的输入值
+      console.log("全局节点信息:", node);
+      console.log("全局输入值:", inputValue);
+      // 你可以将节点信息和输入值进行进一步处理，比如保存到数据库或发送到服务器
+    },
+    nodeClick(node) {
+      // console.log("Node clicked:", node);
+    },
+    handleCommentSubmitted(node, content) {
+      console.log("Comment submitted for node:", node, "Content:", content);
     },
     renderCurrentClass(node) {
       return "label-bg-blue";