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";
|
import { getNodeKey } from "./model/util";
|
||||||
export default {
|
export default {
|
||||||
name: "OkrTree",
|
name: "OkrTree",
|
||||||
|
inject: ["eventBus"],
|
||||||
components: {
|
components: {
|
||||||
OkrTreeNode,
|
OkrTreeNode,
|
||||||
},
|
},
|
||||||
@ -160,6 +161,7 @@ export default {
|
|||||||
animateName: this.animateName,
|
animateName: this.animateName,
|
||||||
});
|
});
|
||||||
this.root = this.store.root;
|
this.root = this.store.root;
|
||||||
|
this.okrEventBus.$on("inputCompleted", this.handleInputCompleted);
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
data(newVal) {
|
data(newVal) {
|
||||||
|
@ -145,14 +145,42 @@
|
|||||||
></OkrTreeNode>
|
></OkrTreeNode>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getNodeKey } from "./model/util";
|
import { getNodeKey } from "./model/util";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "OkrTreeNode",
|
name: "OkrTreeNode",
|
||||||
inject: ["okrEventBus"],
|
inject: ["okrEventBus", "eventBus"],
|
||||||
props: {
|
props: {
|
||||||
props: {},
|
props: {},
|
||||||
node: {
|
node: {
|
||||||
@ -404,6 +432,11 @@ export default {
|
|||||||
// node 的展开状态
|
// node 的展开状态
|
||||||
expanded: false,
|
expanded: false,
|
||||||
tree: null,
|
tree: null,
|
||||||
|
// 新增的数据
|
||||||
|
isInputVisible: false,
|
||||||
|
inputValue: "",
|
||||||
|
inputDisplayText: "",
|
||||||
|
isEnter: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -420,13 +453,64 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
getNodeKey(node) {
|
||||||
return getNodeKey(this.nodeKey, node.data);
|
return getNodeKey(this.nodeKey, node.data);
|
||||||
},
|
},
|
||||||
handleNodeClick() {
|
handleNodeClick(node) {
|
||||||
const store = this.tree.store;
|
const store = this.tree.store;
|
||||||
store.setCurrentNode(this.node);
|
store.setCurrentNode(this.node);
|
||||||
this.tree.$emit("node-click", this.node.data, this.node, this);
|
this.tree.$emit("node-click", this.node.data, this.node, this);
|
||||||
|
if (this.node.isLeaf && this.node.childNodes) {
|
||||||
|
this.toggleInput();
|
||||||
|
} // 触发显示输入框
|
||||||
},
|
},
|
||||||
handleBtnClick(isLeft) {
|
handleBtnClick(isLeft) {
|
||||||
isLeft = isLeft === "left";
|
isLeft = isLeft === "left";
|
||||||
@ -471,3 +555,32 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</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
|
default-expand-all
|
||||||
:current-lable-class-name="renderCurrentClass"
|
:current-lable-class-name="renderCurrentClass"
|
||||||
@node-click="nodeClick"
|
@node-click="nodeClick"
|
||||||
>
|
></vue-okr-tree>
|
||||||
</vue-okr-tree>
|
|
||||||
</div>
|
</div>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import Vue from "vue";
|
||||||
import { VueOkrTree } from "@/components/VueOkrTree/index.js";
|
import { VueOkrTree } from "@/components/VueOkrTree/index.js";
|
||||||
import * as InspectionPlanApi from "@/api/system/inspection/plan";
|
import * as InspectionPlanApi from "@/api/system/inspection/plan";
|
||||||
import alipayChannelFormVue from "../../pay/app/components/alipayChannelForm.vue";
|
import alipayChannelFormVue from "../../pay/app/components/alipayChannelForm.vue";
|
||||||
@ -42,6 +66,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
eventBus: new Vue(),
|
||||||
treeData: [
|
treeData: [
|
||||||
{
|
{
|
||||||
id: 0,
|
id: 0,
|
||||||
@ -105,16 +130,36 @@ export default {
|
|||||||
label: "inspectionName",
|
label: "inspectionName",
|
||||||
},
|
},
|
||||||
selectedTreeList: [],
|
selectedTreeList: [],
|
||||||
|
textarea: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
eventBus: this.eventBus,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// this.toggleExpand(this.data, true);
|
// this.toggleExpand(this.data, true);
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.eventBus.$on("inputCompleted", this.handleGlobalInputCompleted);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.eventBus.$off("inputCompleted");
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
nodeClick(obj, node) {
|
handleGlobalInputCompleted({ node, inputValue }) {
|
||||||
console.log("点击obj:", obj);
|
// 在这里处理全局的输入值
|
||||||
console.log("点击node:", node);
|
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) {
|
renderCurrentClass(node) {
|
||||||
return "label-bg-blue";
|
return "label-bg-blue";
|
||||||
|
Loading…
Reference in New Issue
Block a user