Compare commits
4 Commits
4583ef4574
...
e8511f865a
Author | SHA1 | Date | |
---|---|---|---|
e8511f865a | |||
797a95bda5 | |||
50913478f3 | |||
179916494b |
@ -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) {
|
||||
|
@ -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>
|
||||
|
@ -24,14 +24,38 @@
|
||||
default-expand-all
|
||||
:current-lable-class-name="renderCurrentClass"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
</vue-okr-tree>
|
||||
></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";
|
||||
@ -42,6 +66,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eventBus: new Vue(),
|
||||
treeData: [
|
||||
{
|
||||
id: 0,
|
||||
@ -105,16 +130,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";
|
||||
|
Loading…
Reference in New Issue
Block a user