Compare commits
No commits in common. "4a0a4ffe470a61fcbdd70ec3e99957b98ab9a9fe" and "e005d1c06dcf35b979382da3eb6b9182896ca1c5" have entirely different histories.
4a0a4ffe47
...
e005d1c06d
@ -70,7 +70,6 @@
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.5.8",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-okr-tree": "^1.0.17",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "3.4.9",
|
||||
"vue-video-player": "^5.0.2",
|
||||
@ -96,7 +95,7 @@
|
||||
"eslint-plugin-prettier": "^3.1.0",
|
||||
"eslint-plugin-vue": "9.0.0",
|
||||
"fs-extra": "^8.1.0",
|
||||
"html-webpack-plugin": "^4.5.2",
|
||||
"html-webpack-plugin": "^5.6.0",
|
||||
"lint-staged": "12.5.0",
|
||||
"runjs": "4.4.2",
|
||||
"sass": "1.32.13",
|
||||
|
||||
@ -1 +0,0 @@
|
||||
export { default as VueOkrTree } from "./vue-okr-tree/OkrTree.vue";
|
||||
@ -1,742 +0,0 @@
|
||||
<template>
|
||||
<div class="org-chart-container">
|
||||
<div
|
||||
ref="orgChartRoot"
|
||||
class="org-chart-node-children"
|
||||
:class="{
|
||||
vertical: direction === 'vertical',
|
||||
horizontal: direction === 'horizontal',
|
||||
'show-collapsable': showCollapsable,
|
||||
'one-branch': data.length === 1,
|
||||
}"
|
||||
>
|
||||
<OkrTreeNode
|
||||
v-for="child in root.childNodes"
|
||||
:node="child"
|
||||
:root="root"
|
||||
orkstyle
|
||||
:show-collapsable="showCollapsable"
|
||||
:label-width="labelWidth"
|
||||
:label-height="labelHeight"
|
||||
:renderContent="renderContent"
|
||||
:nodeBtnContent="nodeBtnContent"
|
||||
:selected-key="selectedKey"
|
||||
:default-expand-all="defaultExpandAll"
|
||||
:node-key="nodeKey"
|
||||
:show-node-num="showNodeNum"
|
||||
:key="getNodeKey(child)"
|
||||
:props="props"
|
||||
></OkrTreeNode>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import OkrTreeNode from "./OkrTreeNode.vue";
|
||||
import TreeStore from "./model/tree-store.js";
|
||||
import { getNodeKey } from "./model/util";
|
||||
export default {
|
||||
name: "OkrTree",
|
||||
components: {
|
||||
OkrTreeNode,
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
okrEventBus: this.okrEventBus,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
// 源数据
|
||||
required: true,
|
||||
},
|
||||
leftData: {
|
||||
// 源数据
|
||||
type: Array,
|
||||
},
|
||||
// 方向
|
||||
direction: {
|
||||
type: String,
|
||||
default: "vertical",
|
||||
},
|
||||
// 子节点是否可折叠
|
||||
showCollapsable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 飞书 OKR 模式
|
||||
onlyBothTree: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
orkstyle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 树节点的内容区的渲染 Function
|
||||
renderContent: Function,
|
||||
// 展开节点的内容渲染 Function
|
||||
nodeBtnContent: Function,
|
||||
// 显示节点数
|
||||
showNodeNum: Boolean,
|
||||
// 树节点区域的宽度
|
||||
labelWidth: [String, Number],
|
||||
// 树节点区域的高度
|
||||
labelHeight: [String, Number],
|
||||
// 树节点的样式
|
||||
labelClassName: [Function, String],
|
||||
// 当前选中节点样式
|
||||
currentLableClassName: [Function, String],
|
||||
// 用来控制选择节点的字段名
|
||||
selectedKey: String,
|
||||
// 是否默认展开所有节点
|
||||
defaultExpandAll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 当前选中的节点
|
||||
currentNodeKey: [String, Number],
|
||||
// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
|
||||
nodeKey: String,
|
||||
defaultExpandedKeys: {
|
||||
type: Array,
|
||||
},
|
||||
filterNodeMethod: Function,
|
||||
props: {
|
||||
default() {
|
||||
return {
|
||||
leftChildren: "leftChildren",
|
||||
children: "children",
|
||||
label: "label",
|
||||
disabled: "disabled",
|
||||
};
|
||||
},
|
||||
},
|
||||
// 动画
|
||||
animate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
animateName: {
|
||||
type: String,
|
||||
default: "okr-zoom-in-center",
|
||||
},
|
||||
animateDuration: {
|
||||
type: Number,
|
||||
default: 200,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
ondeClass() {
|
||||
return {
|
||||
findNode: null,
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
okrEventBus: new Vue(),
|
||||
store: null,
|
||||
root: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isTree = true;
|
||||
this.store = new TreeStore({
|
||||
key: this.nodeKey,
|
||||
data: this.data,
|
||||
leftData: this.leftData,
|
||||
props: this.props,
|
||||
defaultExpandedKeys: this.defaultExpandedKeys,
|
||||
showCollapsable: this.showCollapsable,
|
||||
currentNodeKey: this.currentNodeKey,
|
||||
defaultExpandAll: this.defaultExpandAll,
|
||||
filterNodeMethod: this.filterNodeMethod,
|
||||
labelClassName: this.labelClassName,
|
||||
currentLableClassName: this.currentLableClassName,
|
||||
onlyBothTree: this.onlyBothTree,
|
||||
direction: this.direction,
|
||||
animate: this.animate,
|
||||
animateName: this.animateName,
|
||||
});
|
||||
this.root = this.store.root;
|
||||
},
|
||||
watch: {
|
||||
data(newVal) {
|
||||
this.store.setData(newVal);
|
||||
},
|
||||
leftData(newVal) {
|
||||
this.store.setLeftData(newVal);
|
||||
},
|
||||
defaultExpandedKeys(newVal) {
|
||||
this.store.defaultExpandedKeys = newVal;
|
||||
this.store.setDefaultExpandedKeys(newVal);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
filter(value) {
|
||||
if (!this.filterNodeMethod)
|
||||
throw new Error("[Tree] filterNodeMethod is required when filter");
|
||||
this.store.filter(value);
|
||||
if (this.onlyBothTree) {
|
||||
this.store.filter(value, "leftChildNodes");
|
||||
}
|
||||
},
|
||||
getNodeKey(node) {
|
||||
return getNodeKey(this.nodeKey, node.data);
|
||||
},
|
||||
// 通过 node 设置某个节点的当前选中状态
|
||||
setCurrentNode(node) {
|
||||
if (!this.nodeKey)
|
||||
throw new Error("[Tree] nodeKey is required in setCurrentNode");
|
||||
this.store.setUserCurrentNode(node);
|
||||
},
|
||||
// 根据 data 或者 key 拿到 Tree 组件中的 node
|
||||
getNode(data) {
|
||||
return this.store.getNode(data);
|
||||
},
|
||||
// 通过 key 设置某个节点的当前选中状态
|
||||
setCurrentKey(key) {
|
||||
if (!this.nodeKey)
|
||||
throw new Error("[Tree] nodeKey is required in setCurrentKey");
|
||||
this.store.setCurrentNodeKey(key);
|
||||
},
|
||||
remove(data) {
|
||||
this.store.remove(data);
|
||||
},
|
||||
// 获取当前被选中节点的 data
|
||||
getCurrentNode() {
|
||||
const currentNode = this.store.getCurrentNode();
|
||||
return currentNode ? currentNode.data : null;
|
||||
},
|
||||
getCurrentKey() {
|
||||
if (!this.nodeKey)
|
||||
throw new Error("[Tree] nodeKey is required in getCurrentKey");
|
||||
const currentNode = this.getCurrentNode();
|
||||
return currentNode ? currentNode[this.nodeKey] : null;
|
||||
},
|
||||
append(data, parentNode) {
|
||||
this.store.append(data, parentNode);
|
||||
},
|
||||
insertBefore(data, refNode) {
|
||||
this.store.insertBefore(data, refNode);
|
||||
},
|
||||
insertAfter(data, refNode) {
|
||||
this.store.insertAfter(data, refNode);
|
||||
},
|
||||
updateKeyChildren(key, data) {
|
||||
if (!this.nodeKey)
|
||||
throw new Error("[Tree] nodeKey is required in updateKeyChild");
|
||||
this.store.updateChildren(key, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./model/transition.css";
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.org-chart-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-children {
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
/* transition: all 0.5s; */
|
||||
}
|
||||
.vertical .org-chart-node {
|
||||
float: left;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
padding: 20px 5px 0 5px;
|
||||
/* transition: all 0.5s; */
|
||||
}
|
||||
/*使用 ::before 和 ::after 绘制连接器*/
|
||||
.vertical .org-chart-node::before,
|
||||
.vertical .org-chart-node::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
width: 50%;
|
||||
border-top: 1px solid #ccc;
|
||||
height: 20px;
|
||||
}
|
||||
.vertical .org-chart-node::after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
/*我们需要从没有任何兄弟元素的元素中删除左右连接器*/
|
||||
.vertical.one-branch > .org-chart-node::after,
|
||||
.vertical.one-branch > .org-chart-node::before {
|
||||
display: none;
|
||||
}
|
||||
/*从单个子节点的顶部移除空格*/
|
||||
.vertical.one-branch > .org-chart-node {
|
||||
padding-top: 0;
|
||||
}
|
||||
/*从第一个子节点移除左连接器，从最后一个子节点移除右连接器*/
|
||||
.vertical .org-chart-node:first-child::before,
|
||||
.vertical .org-chart-node:last-child::after {
|
||||
border: 0 none;
|
||||
}
|
||||
/*将垂直连接器添加回最后的节点*/
|
||||
.vertical .org-chart-node:last-child::before {
|
||||
border-right: 1px solid #ccc;
|
||||
border-radius: 0 5px 0 0;
|
||||
}
|
||||
.vertical .org-chart-node:only-child:before {
|
||||
border-radius: 0 0px 0 0;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.vertical .org-chart-node:first-child::after {
|
||||
border-radius: 5px 0 0 0;
|
||||
}
|
||||
.vertical .org-chart-node.is-leaf {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.vertical .org-chart-node.is-leaf::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 20px;
|
||||
}
|
||||
.vertical .org-chart-node.is-leaf .org-chart-node-label::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*从父节点添加向下的连接器了*/
|
||||
.vertical .org-chart-node-children::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
border-left: 1px solid #ccc;
|
||||
width: 0;
|
||||
height: 20px;
|
||||
}
|
||||
.org-chart-node-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.org-chart-node-label .org-chart-node-label-inner {
|
||||
// box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
font-size: 16px;
|
||||
word-break: break-all;
|
||||
background-image: url("./imgs/rectangle.png");
|
||||
background-size: 100% 100%;
|
||||
border: none !important;
|
||||
// border: 1px solid black;
|
||||
// border-radius: 8px;
|
||||
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
|
||||
background-position: center;
|
||||
&.red {
|
||||
background-image: url("./imgs/rectangle-red.png");
|
||||
}
|
||||
&.diamondType {
|
||||
background-image: url("./imgs/diamond.png");
|
||||
background-size: 100% 100%;
|
||||
border: none !important;
|
||||
background-position: center;
|
||||
padding: 12px 24px;
|
||||
&.red {
|
||||
background-image: url("./imgs/diamond-red.png");
|
||||
}
|
||||
}
|
||||
&.trigle {
|
||||
background-image: url("./imgs/trigle.png");
|
||||
background-size: 100% 100%;
|
||||
border: none !important;
|
||||
background-position: center;
|
||||
padding: 14px 30px 2px 30px;
|
||||
&.red {
|
||||
background-image: url("./imgs/trigle-red.png");
|
||||
}
|
||||
}
|
||||
&.circle {
|
||||
background-image: url("./imgs/circle.png");
|
||||
background-size: 100% 100%;
|
||||
border: none !important;
|
||||
background-position: center;
|
||||
&.red {
|
||||
background-image: url("./imgs/circle-red.png");
|
||||
}
|
||||
}
|
||||
&.trigleReverse {
|
||||
background-image: url("./imgs/trigle.png");
|
||||
background-size: 100% 100%;
|
||||
border: none !important;
|
||||
background-position: center;
|
||||
padding: 14px 30px 2px 30px;
|
||||
transform: rotate(180deg);
|
||||
&.red {
|
||||
background-image: url("./imgs/trigle-red.png");
|
||||
}
|
||||
.label-innner {
|
||||
display: inline-block;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.vertical .org-chart-node-label .org-chart-node-label-inner:hover {
|
||||
// box-shadow: 0 1px 14px rgba(31, 35, 41, 0.12);
|
||||
cursor: pointer;
|
||||
}
|
||||
.vertical .org-chart-node-label .org-chart-node-btn {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 10;
|
||||
margin-left: -11px;
|
||||
margin-top: 9px;
|
||||
// background-color: #fff;
|
||||
// border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
/* transition: all 0.35s ease; */
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .org-chart-node-btn:hover {
|
||||
transform: scale(1.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
.vertical .org-chart-node-label .org-chart-node-btn::before,
|
||||
.vertical .org-chart-node-label .org-chart-node-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.vertical .org-chart-node-label .org-chart-node-btn::before {
|
||||
top: 50%;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
height: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.vertical .org-chart-node-label .org-chart-node-btn::after {
|
||||
top: 4px;
|
||||
left: 50%;
|
||||
bottom: 4px;
|
||||
width: 0;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
.vertical .org-chart-node-label .expanded.org-chart-node-btn::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node.collapsed .org-chart-node-label {
|
||||
position: relative;
|
||||
}
|
||||
.vertical .org-chart-node.collapsed .org-chart-node-label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-children,
|
||||
.horizontal .org-chart-node-left-children {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
/* transition: all 0.5s; */
|
||||
}
|
||||
.horizontal .org-chart-node-left-children {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.horizontal .org-chart-node:not(.is-left-child-node) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0px 5px 0 20px;
|
||||
/* transition: all 0.5s; */
|
||||
}
|
||||
.horizontal .is-left-child-node {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.horizontal .is-left-child-node {
|
||||
padding: 0px 20px 0 5px;
|
||||
}
|
||||
|
||||
/*使用 ::before 和 ::after 绘制连接器*/
|
||||
.horizontal .org-chart-node:not(.is-left-child-node):before,
|
||||
.horizontal .org-chart-node:not(.is-left-child-node)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 50%;
|
||||
}
|
||||
.horizontal .is-left-child-node:before,
|
||||
.horizontal .is-left-child-node::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-right: 1px solid #ccc;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 50%;
|
||||
}
|
||||
.horizontal .org-chart-node:not(.is-left-child-node):after {
|
||||
top: 50%;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.horizontal .is-left-child-node:after {
|
||||
top: 50%;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/*我们需要从没有任何兄弟元素的元素中删除左右连接器*/
|
||||
.horizontal.one-branch > .org-chart-node::after,
|
||||
.horizontal.one-branch > .org-chart-node::before {
|
||||
display: none;
|
||||
}
|
||||
/*从单个子节点的顶部移除空格*/
|
||||
.horizontal.one-branch > .org-chart-node {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/*从第一个子节点移除左连接器，从最后一个子节点移除右连接器*/
|
||||
.horizontal .org-chart-node:first-child::before,
|
||||
.horizontal .org-chart-node:last-child::after {
|
||||
border: 0 none;
|
||||
}
|
||||
/*将垂直连接器添加回最后的节点*/
|
||||
.horizontal
|
||||
.org-chart-node:not(.is-left-child-node):not(
|
||||
.is-not-child
|
||||
):last-child::before {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-radius: 0 0px 0 5px;
|
||||
}
|
||||
.horizontal .is-left-child-node:last-child::before {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-radius: 0 0px 5px 0px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node:only-child::before {
|
||||
border-radius: 0 0px 0 0px !important;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node:not(.is-left-child-node):first-child::after {
|
||||
border-radius: 5px 0px 0 0;
|
||||
}
|
||||
.horizontal .is-left-child-node:first-child::after {
|
||||
border-radius: 0 5px 0px 0px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node.is-leaf {
|
||||
position: relative;
|
||||
// padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.horizontal .org-chart-node.is-leaf::before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.horizontal .org-chart-node.is-leaf .org-chart-node-label::after,
|
||||
.horizontal .is-left-child-node.is-leaf .org-chart-node-label::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node:last-child::after {
|
||||
/* border-bottom: 1px solid green; */
|
||||
border-radius: 0 0px 5px 0px;
|
||||
}
|
||||
.horizontal .is-left-child-node:only-child::after {
|
||||
border-radius: 0 0px 0 0px;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node.is-leaf {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.horizontal .is-left-child-node.is-leaf::before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.horizontal .is-left-child-node .org-chart-node-label::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*从父节点添加向下的连接器了*/
|
||||
.horizontal .org-chart-node-children::before,
|
||||
.horizontal .org-chart-node-left-children::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
border-top: 1px solid #ccc;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
}
|
||||
.horizontal .org-chart-node-children::before {
|
||||
width: 20px;
|
||||
}
|
||||
.horizontal .org-chart-node-left-children::before {
|
||||
left: calc(100% - 11px);
|
||||
}
|
||||
.horizontal > .only-both-tree-node > .org-chart-node-left-children::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-label-inner {
|
||||
// box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-label-inner:hover {
|
||||
box-shadow: 0 1px 14px rgba(31, 35, 41, 0.12);
|
||||
cursor: pointer;
|
||||
}
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 10;
|
||||
margin-top: -11px;
|
||||
margin-left: 9px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
/* transition: all 0.35s ease; */
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn:hover,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn::before,
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn::after,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn::before,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn::before,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn::before {
|
||||
top: 50%;
|
||||
left: 4px;
|
||||
right: 3px;
|
||||
border-top: 1px solid #ccc;
|
||||
height: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn::after,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn::after {
|
||||
top: 4px;
|
||||
left: 50%;
|
||||
bottom: 4px;
|
||||
width: 0;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
.horizontal .org-chart-node-label .expanded.org-chart-node-btn::after,
|
||||
.horizontal .org-chart-node-label .expanded.org-chart-node-left-btn::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 10;
|
||||
margin-top: -11px;
|
||||
margin-right: 9px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
/* transition: all 0.35s ease; */
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node.collapsed .org-chart-node-label,
|
||||
.horizontal .is-left-child-node.collapsed .org-chart-node-label {
|
||||
position: relative;
|
||||
}
|
||||
.horizontal .org-chart-node.collapsed .org-chart-node-label::after,
|
||||
.horizontal .is-left-child-node.collapsed .org-chart-node-label::before {
|
||||
content: "";
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: 50%;
|
||||
width: 10px;
|
||||
}
|
||||
.horizontal .org-chart-node .is-root-label.is-not-right-child::after,
|
||||
.horizontal .org-chart-node .is-root-label.is-not-left-child::before {
|
||||
display: none !important;
|
||||
}
|
||||
/* .horizontal .org-chart-node.collapsed .is-root-label.is-right-child::after,
|
||||
.horizontal .org-chart-node.collapsed .is-root-label.is-left-child::before {
|
||||
display: block;
|
||||
} */
|
||||
|
||||
.horizontal .is-left-child-node.collapsed .org-chart-node-label::before {
|
||||
left: -10px;
|
||||
}
|
||||
.horizontal .only-both-tree-node > .org-chart-node-label::before {
|
||||
content: "";
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
height: 50%;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.org-chart-node-children .org-chart-node-btn-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #909090;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@ -1,473 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="org-chart-node"
|
||||
@contextmenu="($event) => this.handleContextMenu($event)"
|
||||
v-if="node.visible"
|
||||
:class="{
|
||||
collapsed: !node.leftExpanded || !node.expanded,
|
||||
'is-leaf': isLeaf,
|
||||
'is-current': node.isCurrent,
|
||||
'is-left-child-node': isLeftChildNode,
|
||||
'is-not-child':
|
||||
node.level === 1 &&
|
||||
node.childNodes.length <= 0 &&
|
||||
leftChildNodes.length <= 0,
|
||||
'only-both-tree-node': node.level === 1 && tree.store.onlyBothTree,
|
||||
}"
|
||||
>
|
||||
<transition
|
||||
:duration="animateDuration"
|
||||
:name="animateName"
|
||||
>
|
||||
<div
|
||||
class="org-chart-node-left-children"
|
||||
:style="{
|
||||
visibility: node.leftExpanded ? '' : 'hidden',
|
||||
height: node.leftExpanded ? '' : '0',
|
||||
}"
|
||||
v-if="showLeftChildNode"
|
||||
>
|
||||
<OkrTreeNode
|
||||
v-for="child in leftChildNodes"
|
||||
:show-collapsable="showCollapsable"
|
||||
:node="child"
|
||||
:label-width="labelWidth"
|
||||
:label-height="labelHeight"
|
||||
:renderContent="renderContent"
|
||||
:nodeBtnContent="nodeBtnContent"
|
||||
:selected-key="selectedKey"
|
||||
:node-key="nodeKey"
|
||||
:key="getNodeKey(child)"
|
||||
:props="props"
|
||||
:show-node-num="showNodeNum"
|
||||
is-left-child-node
|
||||
></OkrTreeNode>
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="org-chart-node-label"
|
||||
:class="{
|
||||
'is-root-label': node.level === 1,
|
||||
'is-not-right-child': node.level === 1 && node.childNodes.length <= 0,
|
||||
'is-not-left-child': node.level === 1 && leftChildNodes.length <= 0,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="showNodeLeftBtn && leftChildNodes.length > 0"
|
||||
class="org-chart-node-left-btn"
|
||||
:class="{ expanded: node.leftExpanded }"
|
||||
@click="handleBtnClick('left')"
|
||||
>
|
||||
<template v-if="showNodeNum">
|
||||
<span
|
||||
v-if="!node.leftExpanded"
|
||||
class="org-chart-node-btn-text"
|
||||
>
|
||||
{{
|
||||
node.level === 1 && leftChildNodes.length > 0
|
||||
? leftChildNodes.length
|
||||
: node.childNodes.length
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<node-btn-content
|
||||
v-else
|
||||
:node="node"
|
||||
>
|
||||
<slot> </slot>
|
||||
</node-btn-content>
|
||||
</div>
|
||||
<div
|
||||
class="org-chart-node-label-inner"
|
||||
@click="handleNodeClick"
|
||||
:class="computeLabelClass"
|
||||
:style="computeLabelStyle"
|
||||
>
|
||||
<span
|
||||
class="label-innner"
|
||||
:style="computeInnerStyle"
|
||||
>
|
||||
<node-content :node="node">
|
||||
<slot>
|
||||
{{ node.label }}
|
||||
</slot>
|
||||
</node-content></span>
|
||||
</div>
|
||||
<div
|
||||
v-if="showNodeBtn && !isLeftChildNode"
|
||||
class="org-chart-node-btn"
|
||||
:class="{ expanded: node.expanded }"
|
||||
@click="handleBtnClick('right')"
|
||||
>
|
||||
<template v-if="showNodeNum">
|
||||
<span
|
||||
v-if="!node.expanded"
|
||||
class="org-chart-node-btn-text"
|
||||
>
|
||||
{{ node.childNodes.length }}
|
||||
</span>
|
||||
</template>
|
||||
<node-btn-content
|
||||
v-else
|
||||
:node="node"
|
||||
>
|
||||
<slot>
|
||||
<!-- <div class="org-chart-node-btn-text">10</div> -->
|
||||
</slot>
|
||||
</node-btn-content>
|
||||
</div>
|
||||
</div>
|
||||
<transition
|
||||
:duration="animateDuration"
|
||||
:name="animateName"
|
||||
>
|
||||
<div
|
||||
class="org-chart-node-children"
|
||||
:style="{
|
||||
visibility: node.expanded ? '' : 'hidden',
|
||||
height: node.expanded ? '' : '0',
|
||||
}"
|
||||
v-if="!isLeftChildNode && node.childNodes && node.childNodes.length > 0"
|
||||
>
|
||||
<OkrTreeNode
|
||||
v-for="child in node.childNodes"
|
||||
:show-collapsable="showCollapsable"
|
||||
:node="child"
|
||||
:label-width="labelWidth"
|
||||
:label-height="labelHeight"
|
||||
:renderContent="renderContent"
|
||||
:nodeBtnContent="nodeBtnContent"
|
||||
:selected-key="selectedKey"
|
||||
:node-key="nodeKey"
|
||||
:key="getNodeKey(child)"
|
||||
:show-node-num="showNodeNum"
|
||||
:props="props"
|
||||
></OkrTreeNode>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getNodeKey } from "./model/util";
|
||||
import _ from "lodash";
|
||||
export default {
|
||||
name: "OkrTreeNode",
|
||||
inject: ["okrEventBus"],
|
||||
props: {
|
||||
props: {},
|
||||
node: {
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
root: {
|
||||
default() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
// 子节点是否可折叠
|
||||
showCollapsable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 判断是否是左子树的节点，样式需要改
|
||||
isLeftChildNode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 树节点的内容区的渲染 Function
|
||||
renderContent: Function,
|
||||
// 展开节点的内容渲染 Function
|
||||
nodeBtnContent: Function,
|
||||
// 显示节点数
|
||||
showNodeNum: Boolean,
|
||||
// 树节点区域的宽度
|
||||
labelWidth: [String, Number],
|
||||
// 树节点区域的高度
|
||||
labelHeight: [String, Number],
|
||||
// 用来控制选择节点的字段名
|
||||
selectedKey: String,
|
||||
// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
|
||||
nodeKey: String,
|
||||
},
|
||||
components: {
|
||||
NodeContent: {
|
||||
props: {
|
||||
node: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
const parent = this.$parent;
|
||||
if (parent._props.renderContent) {
|
||||
return parent._props.renderContent(h, this.node);
|
||||
} else {
|
||||
return this.$scopedSlots.default(this.node);
|
||||
}
|
||||
},
|
||||
},
|
||||
// 渲染展开节点的样式
|
||||
NodeBtnContent: {
|
||||
props: {
|
||||
node: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
const parent = this.$parent;
|
||||
if (parent._props.nodeBtnContent) {
|
||||
return parent._props.nodeBtnContent(h, this.node);
|
||||
} else {
|
||||
if (this.$scopedSlots.default) {
|
||||
return this.$scopedSlots.default(this.node);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isLeaf() {
|
||||
if (this.node.level === 1) {
|
||||
if (
|
||||
this.leftChildNodes.length == 0 &&
|
||||
this.node.childNodes.length == 0
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return this.node.isLeaf;
|
||||
}
|
||||
},
|
||||
leftChildNodes() {
|
||||
if (this.tree.store.onlyBothTree) {
|
||||
if (this.isLeftChildNode) {
|
||||
return this.node.childNodes;
|
||||
} else {
|
||||
return this.node.leftChildNodes;
|
||||
}
|
||||
}
|
||||
return [];
|
||||
},
|
||||
animateName() {
|
||||
if (this.tree.store.animate) {
|
||||
return this.tree.store.animateName;
|
||||
}
|
||||
return "";
|
||||
},
|
||||
animateDuration() {
|
||||
if (this.tree.store.animate) {
|
||||
return this.tree.store.animateDuration;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
// 是否显示展开按钮
|
||||
showNodeBtn() {
|
||||
if (this.isLeftChildNode) {
|
||||
return (
|
||||
(this.tree.store.direction === "horizontal" &&
|
||||
this.showCollapsable &&
|
||||
this.leftChildNodes.length > 0) ||
|
||||
this.level === 1
|
||||
);
|
||||
}
|
||||
return (
|
||||
this.showCollapsable &&
|
||||
this.node.childNodes &&
|
||||
this.node.childNodes.length > 0
|
||||
);
|
||||
},
|
||||
showNodeLeftBtn() {
|
||||
return (
|
||||
this.tree.store.direction === "horizontal" &&
|
||||
this.showCollapsable &&
|
||||
this.leftChildNodes.length > 0
|
||||
);
|
||||
},
|
||||
computeInnerStyle() {
|
||||
let color = _.get(this.node, ["data", "nodeFontColor"]);
|
||||
let borderShape = _.get(this.node, ["data", "nodeShapeType"]);
|
||||
let obj = { color };
|
||||
if (borderShape === "diamond") {
|
||||
// obj = Object.assign(obj, {
|
||||
// display: "inline-block",
|
||||
// transform: "skewX(-30deg)",
|
||||
// });
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
// 节点的宽度
|
||||
computeLabelStyle() {
|
||||
// console.log("this.node", this.node);
|
||||
let { labelWidth = "auto", labelHeight = "auto" } = this;
|
||||
if (typeof labelWidth === "number") {
|
||||
labelWidth = `${labelWidth}px`;
|
||||
}
|
||||
if (typeof labelHeight === "number") {
|
||||
labelHeight = `${labelHeight}px`;
|
||||
}
|
||||
// let borderColor = _.get(this.node, ["data", "nodeBorderColor"]);
|
||||
let borderShape = _.get(this.node, ["data", "nodeShapeType"]);
|
||||
let obj = {
|
||||
width: labelWidth,
|
||||
height: labelHeight,
|
||||
// border: `1px solid ${borderColor}`,
|
||||
};
|
||||
// if (borderShape === "circle") {
|
||||
// obj = Object.assign(obj, { borderRadius: "50%" });
|
||||
// }
|
||||
// if (borderShape === "diamond") {
|
||||
// // obj = Object.assign(obj, {
|
||||
// // transform: "skewX(30deg)",
|
||||
// // });
|
||||
// obj = Object.assign(obj, {
|
||||
// backgroundImage: require("@/assets/images/okrTree/diamond.png"),
|
||||
// });
|
||||
// }
|
||||
if (borderShape === "trigle-correct") {
|
||||
}
|
||||
if (borderShape === "trigle-reverse") {
|
||||
}
|
||||
|
||||
return obj;
|
||||
},
|
||||
computeLabelClass() {
|
||||
let clsArr = [];
|
||||
let borderShape = _.get(this.node, ["data", "nodeShapeType"]);
|
||||
let borderColor = _.get(this.node, ["data", "nodeBorderColor"]);
|
||||
if (borderColor === "red") {
|
||||
clsArr.push("red");
|
||||
}
|
||||
if (borderShape === "diamond") {
|
||||
clsArr.push("diamondType");
|
||||
}
|
||||
if (borderShape === "trigle") {
|
||||
clsArr.push("trigle");
|
||||
}
|
||||
if (borderShape === "trigleReverse") {
|
||||
clsArr.push("trigleReverse");
|
||||
}
|
||||
if (borderShape === "circle") {
|
||||
clsArr.push("circle");
|
||||
}
|
||||
const store = this.tree.store;
|
||||
if (store.labelClassName) {
|
||||
if (typeof store.labelClassName === "function") {
|
||||
clsArr.push(store.labelClassName(this.node));
|
||||
} else {
|
||||
clsArr.push(store.labelClassName);
|
||||
}
|
||||
}
|
||||
if (store.currentLableClassName && this.node.isCurrent) {
|
||||
if (typeof store.currentLableClassName === "function") {
|
||||
clsArr.push(store.currentLableClassName(this.node));
|
||||
} else {
|
||||
clsArr.push(store.currentLableClassName);
|
||||
}
|
||||
}
|
||||
if (this.node.isCurrent) {
|
||||
clsArr.push("is-current");
|
||||
}
|
||||
return clsArr;
|
||||
},
|
||||
computNodeStyle() {
|
||||
return {
|
||||
display: this.node.expanded ? "" : "none",
|
||||
};
|
||||
},
|
||||
computLeftNodeStyle() {
|
||||
return {
|
||||
display: this.node.leftExpanded ? "" : "none",
|
||||
};
|
||||
},
|
||||
// 是否显示左子数
|
||||
showLeftChildNode() {
|
||||
return (
|
||||
this.tree.onlyBothTree &&
|
||||
this.tree.store.direction === "horizontal" &&
|
||||
this.leftChildNodes &&
|
||||
this.leftChildNodes.length > 0
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"node.expanded"(val) {
|
||||
// this.$nextTick(() => this.expanded = val);
|
||||
},
|
||||
"node.leftExpanded"(val) {
|
||||
// this.$nextTick(() => this.expanded = val);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// node 的展开状态
|
||||
expanded: false,
|
||||
tree: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const parent = this.$parent;
|
||||
if (parent.isTree) {
|
||||
this.tree = parent;
|
||||
} else {
|
||||
this.tree = parent.tree;
|
||||
}
|
||||
|
||||
const tree = this.tree;
|
||||
if (!tree) {
|
||||
console.warn("Can not find node's tree.");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNodeKey(node) {
|
||||
return getNodeKey(this.nodeKey, node.data);
|
||||
},
|
||||
handleNodeClick() {
|
||||
const store = this.tree.store;
|
||||
store.setCurrentNode(this.node);
|
||||
this.tree.$emit("node-click", this.node.data, this.node, this);
|
||||
},
|
||||
handleBtnClick(isLeft) {
|
||||
isLeft = isLeft === "left";
|
||||
const store = this.tree.store;
|
||||
// 表示是OKR飞书模式
|
||||
if (store.onlyBothTree) {
|
||||
if (isLeft) {
|
||||
if (this.node.leftExpanded) {
|
||||
this.node.leftExpanded = false;
|
||||
this.tree.$emit("node-collapse", this.node.data, this.node, this);
|
||||
} else {
|
||||
this.node.leftExpanded = true;
|
||||
this.tree.$emit("node-expand", this.node.data, this.node, this);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.node.expanded) {
|
||||
this.node.collapse();
|
||||
this.tree.$emit("node-collapse", this.node.data, this.node, this);
|
||||
} else {
|
||||
this.node.expand();
|
||||
this.tree.$emit("node-expand", this.node.data, this.node, this);
|
||||
}
|
||||
},
|
||||
handleContextMenu(event) {
|
||||
if (
|
||||
this.tree._events["node-contextmenu"] &&
|
||||
this.tree._events["node-contextmenu"].length > 0
|
||||
) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
this.tree.$emit(
|
||||
"node-contextmenu",
|
||||
event,
|
||||
this.node.data,
|
||||
this.node,
|
||||
this
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 611 B |
Binary file not shown.
|
Before Width: | Height: | Size: 609 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
@ -1,14 +0,0 @@
|
||||
export default function(target) {
|
||||
for (let i = 1, j = arguments.length; i < j; i++) {
|
||||
let source = arguments[i] || {};
|
||||
for (let prop in source) {
|
||||
if (source.hasOwnProperty(prop)) {
|
||||
let value = source[prop];
|
||||
if (value !== undefined) {
|
||||
target[prop] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return target;
|
||||
}
|
||||
@ -1,254 +0,0 @@
|
||||
import { markNodeData, NODE_KEY } from './util';
|
||||
import objectAssign from './merge';
|
||||
|
||||
const getPropertyFromData = function (node, prop) {
|
||||
const props = node.store.props;
|
||||
const data = node.data || {};
|
||||
const config = props[prop];
|
||||
|
||||
if (typeof config === 'function') {
|
||||
return config(data, node);
|
||||
} else if (typeof config === 'string') {
|
||||
return data[config];
|
||||
} else if (typeof config === 'undefined') {
|
||||
const dataProp = data[prop];
|
||||
return dataProp === undefined ? '' : dataProp;
|
||||
}
|
||||
};
|
||||
|
||||
let nodeIdSeed = 0;
|
||||
|
||||
export default class Node {
|
||||
constructor(options, isLeftChild = false) {
|
||||
this.isLeftChild = isLeftChild;
|
||||
this.id = nodeIdSeed++;
|
||||
this.data = null;
|
||||
this.expanded = false;
|
||||
this.leftExpanded = false;
|
||||
this.isCurrent = false;
|
||||
this.visible = true;
|
||||
this.parent = null;
|
||||
for (let name in options) {
|
||||
if (options.hasOwnProperty(name)) {
|
||||
this[name] = options[name];
|
||||
}
|
||||
}
|
||||
this.level = 0;
|
||||
this.childNodes = [];
|
||||
this.leftChildNodes = [];
|
||||
|
||||
if (this.parent) {
|
||||
this.level = this.parent.level + 1;
|
||||
}
|
||||
|
||||
const store = this.store;
|
||||
if (!store) {
|
||||
throw new Error('[Node]store is required!');
|
||||
}
|
||||
store.registerNode(this);
|
||||
if (this.data) {
|
||||
this.setData(this.data, isLeftChild);
|
||||
if (store.defaultExpandAll || !store.showCollapsable) {
|
||||
this.expanded = true;
|
||||
this.leftExpanded = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!Array.isArray(this.data)) {
|
||||
markNodeData(this, this.data);
|
||||
}
|
||||
if (!this.data) return;
|
||||
const defaultExpandedKeys = store.defaultExpandedKeys;
|
||||
const key = store.key;
|
||||
if (
|
||||
key &&
|
||||
defaultExpandedKeys &&
|
||||
defaultExpandedKeys.indexOf(this.key) !== -1
|
||||
) {
|
||||
this.expand(null, true);
|
||||
}
|
||||
|
||||
if (
|
||||
key &&
|
||||
store.currentNodeKey !== undefined &&
|
||||
this.key === store.currentNodeKey
|
||||
) {
|
||||
store.currentNode = this;
|
||||
store.currentNode.isCurrent = true;
|
||||
}
|
||||
|
||||
this.updateLeafState();
|
||||
}
|
||||
|
||||
setData(data, isLeftChild) {
|
||||
if (!Array.isArray(data)) {
|
||||
markNodeData(this, data);
|
||||
}
|
||||
const store = this.store;
|
||||
this.data = data;
|
||||
this.childNodes = [];
|
||||
let children;
|
||||
if (this.level === 0 && this.data instanceof Array) {
|
||||
children = this.data;
|
||||
} else {
|
||||
children = getPropertyFromData(this, 'children') || [];
|
||||
}
|
||||
for (let i = 0, j = children.length; i < j; i++) {
|
||||
this.insertChild({ data: children[i] }, null, null, isLeftChild);
|
||||
}
|
||||
}
|
||||
get key() {
|
||||
const nodeKey = this.store.key;
|
||||
if (this.data) return this.data[nodeKey];
|
||||
return null;
|
||||
}
|
||||
get label() {
|
||||
return getPropertyFromData(this, 'label');
|
||||
}
|
||||
// 是否是 OKR 飞书模式
|
||||
hasLeftChild() {
|
||||
const store = this.store;
|
||||
return store.onlyBothTree && store.direction === 'horizontal';
|
||||
}
|
||||
insertChild(child, index, batch, isLeftChild) {
|
||||
if (!child) throw new Error('insertChild error: child is required.');
|
||||
if (!(child instanceof Node)) {
|
||||
if (!batch) {
|
||||
const children = this.getChildren(true);
|
||||
if (children.indexOf(child.data) === -1) {
|
||||
if (index === undefined || index === null || index < 0) {
|
||||
children.push(child.data);
|
||||
} else {
|
||||
children.splice(index, 0, child.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
objectAssign(child, {
|
||||
parent: this,
|
||||
store: this.store,
|
||||
});
|
||||
child = new Node(child, isLeftChild);
|
||||
}
|
||||
child.level = this.level + 1;
|
||||
if (index === undefined || index === null || index < 0) {
|
||||
this.childNodes.push(child);
|
||||
} else {
|
||||
this.childNodes.splice(index, 0, child);
|
||||
}
|
||||
this.updateLeafState();
|
||||
}
|
||||
getChildren(forceInit = false) {
|
||||
// this is data
|
||||
if (this.level === 0) return this.data;
|
||||
const data = this.data;
|
||||
if (!data) return null;
|
||||
|
||||
const props = this.store.props;
|
||||
let children = 'children';
|
||||
if (props) {
|
||||
children = props.children || 'children';
|
||||
}
|
||||
|
||||
if (data[children] === undefined) {
|
||||
data[children] = null;
|
||||
}
|
||||
|
||||
if (forceInit && !data[children]) {
|
||||
data[children] = [];
|
||||
}
|
||||
|
||||
return data[children];
|
||||
}
|
||||
updateLeafState() {
|
||||
if (
|
||||
this.store.lazy === true &&
|
||||
this.loaded !== true &&
|
||||
typeof this.isLeafByUser !== 'undefined'
|
||||
) {
|
||||
this.isLeaf = this.isLeafByUser;
|
||||
return;
|
||||
}
|
||||
const childNodes = this.childNodes;
|
||||
if (
|
||||
!this.store.lazy ||
|
||||
(this.store.lazy === true && this.loaded === true)
|
||||
) {
|
||||
this.isLeaf = !childNodes || childNodes.length === 0;
|
||||
return;
|
||||
}
|
||||
this.isLeaf = false;
|
||||
}
|
||||
updateLeftLeafState() {
|
||||
if (
|
||||
this.store.lazy === true &&
|
||||
this.loaded !== true &&
|
||||
typeof this.isLeafByUser !== 'undefined'
|
||||
) {
|
||||
this.isLeaf = this.isLeafByUser;
|
||||
return;
|
||||
}
|
||||
const childNodes = this.leftChildNodes;
|
||||
if (
|
||||
!this.store.lazy ||
|
||||
(this.store.lazy === true && this.loaded === true)
|
||||
) {
|
||||
this.isLeaf = !childNodes || childNodes.length === 0;
|
||||
return;
|
||||
}
|
||||
this.isLeaf = false;
|
||||
}
|
||||
// 节点的收起
|
||||
collapse() {
|
||||
this.expanded = false;
|
||||
}
|
||||
// 节点的展开
|
||||
expand(callback, expandParent) {
|
||||
const done = () => {
|
||||
if (expandParent) {
|
||||
let parent = this.parent;
|
||||
while (parent.level > 0) {
|
||||
parent.isLeftChild
|
||||
? (parent.leftExpanded = true)
|
||||
: (parent.expanded = true);
|
||||
parent = parent.parent;
|
||||
}
|
||||
}
|
||||
this.isLeftChild ? (this.leftExpanded = true) : (this.expanded = true);
|
||||
if (callback) callback();
|
||||
};
|
||||
done();
|
||||
}
|
||||
|
||||
removeChild(child) {
|
||||
const children = this.getChildren() || [];
|
||||
const dataIndex = children.indexOf(child.data);
|
||||
if (dataIndex > -1) {
|
||||
children.splice(dataIndex, 1);
|
||||
}
|
||||
|
||||
const index = this.childNodes.indexOf(child);
|
||||
|
||||
if (index > -1) {
|
||||
this.store && this.store.deregisterNode(child);
|
||||
child.parent = null;
|
||||
this.childNodes.splice(index, 1);
|
||||
}
|
||||
|
||||
this.updateLeafState();
|
||||
}
|
||||
insertBefore(child, ref) {
|
||||
let index;
|
||||
if (ref) {
|
||||
index = this.childNodes.indexOf(ref);
|
||||
}
|
||||
this.insertChild(child, index);
|
||||
}
|
||||
insertAfter(child, ref) {
|
||||
let index;
|
||||
if (ref) {
|
||||
index = this.childNodes.indexOf(ref);
|
||||
if (index !== -1) index += 1;
|
||||
}
|
||||
this.insertChild(child, index);
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
.okr-fade-in-enter,.okr-fade-in-leave-active,.okr-fade-in-linear-enter,.okr-fade-in-linear-leave,.okr-fade-in-linear-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.okr-fade-in-linear-enter-active,.okr-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.okr-fade-in-enter-active,.okr-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.okr-zoom-in-center-enter-active,.okr-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.okr-zoom-in-center-enter,.okr-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.okr-zoom-in-top-enter-active,.okr-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.okr-zoom-in-top-enter,.okr-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.okr-zoom-in-bottom-enter-active,.okr-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.okr-zoom-in-bottom-enter,.okr-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.okr-zoom-in-left-enter-active,.okr-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.okr-zoom-in-left-enter,.okr-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.okr-list-enter-active,.okr-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.okr-list-enter,.okr-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.okr-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}
|
||||
@ -1,180 +0,0 @@
|
||||
import Node from "./node";
|
||||
import { getNodeKey } from "./util";
|
||||
export default class TreeStore {
|
||||
constructor(options) {
|
||||
this.currentNode = null;
|
||||
this.currentNodeKey = null;
|
||||
|
||||
for (let option in options) {
|
||||
if (options.hasOwnProperty(option)) {
|
||||
this[option] = options[option];
|
||||
}
|
||||
}
|
||||
this.nodesMap = {};
|
||||
this.root = new Node(
|
||||
{
|
||||
data: this.data,
|
||||
store: this,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
this.setLeftData(this.leftData);
|
||||
}
|
||||
filter(value, childName = "childNodes") {
|
||||
this.filterRight(value, childName);
|
||||
}
|
||||
// 过滤默认节点
|
||||
filterRight(value, childName) {
|
||||
const filterNodeMethod = this.filterNodeMethod;
|
||||
const traverse = function(node, childName) {
|
||||
let childNodes;
|
||||
if (node.root) {
|
||||
childNodes = node.root.childNodes[0][childName];
|
||||
} else {
|
||||
childNodes = node.childNodes;
|
||||
}
|
||||
childNodes.forEach((child) => {
|
||||
child.visible = filterNodeMethod.call(child, value, child.data, child);
|
||||
traverse(child, childName);
|
||||
});
|
||||
|
||||
if (!node.visible && childNodes.length) {
|
||||
let allHidden = true;
|
||||
allHidden = !childNodes.some((child) => child.visible);
|
||||
|
||||
if (node.root) {
|
||||
node.root.visible = allHidden === false;
|
||||
} else {
|
||||
node.visible = allHidden === false;
|
||||
}
|
||||
}
|
||||
if (!value) return;
|
||||
|
||||
if (node.visible) node.expand();
|
||||
};
|
||||
|
||||
traverse(this, childName);
|
||||
}
|
||||
|
||||
registerNode(node) {
|
||||
const key = this.key;
|
||||
if (!key || !node || !node.data) return;
|
||||
|
||||
const nodeKey = node.key;
|
||||
if (nodeKey !== undefined) this.nodesMap[node.key] = node;
|
||||
}
|
||||
deregisterNode(node) {
|
||||
const key = this.key;
|
||||
if (!key || !node || !node.data) return;
|
||||
node.childNodes.forEach((child) => {
|
||||
this.deregisterNode(child);
|
||||
});
|
||||
delete this.nodesMap[node.key];
|
||||
}
|
||||
setData(newVal) {
|
||||
const instanceChanged = newVal !== this.root.data;
|
||||
if (instanceChanged) {
|
||||
this.root.setData(newVal);
|
||||
} else {
|
||||
this.root.updateChildren();
|
||||
}
|
||||
this.setLeftData(this.leftData)
|
||||
}
|
||||
setLeftData(leftData) {
|
||||
if (this.root.store.onlyBothTree) {
|
||||
if (!leftData)
|
||||
throw new Error("[Tree] leftData is required in onlyBothTree");
|
||||
if (this.leftData) {
|
||||
this.isLeftChilds = new Node(
|
||||
{
|
||||
data: leftData,
|
||||
store: this,
|
||||
},
|
||||
true
|
||||
);
|
||||
if (this.isLeftChilds) {
|
||||
this.root.childNodes[0].leftChildNodes = this.isLeftChilds.childNodes[0].childNodes;
|
||||
this.root.childNodes[0].leftExpanded = this.isLeftChilds.childNodes[0].leftExpanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
updateChildren(key, data) {
|
||||
const node = this.nodesMap[key];
|
||||
if (!node) return;
|
||||
const childNodes = node.childNodes;
|
||||
for (let i = childNodes.length - 1; i >= 0; i--) {
|
||||
const child = childNodes[i];
|
||||
this.remove(child.data);
|
||||
}
|
||||
for (let i = 0, j = data.length; i < j; i++) {
|
||||
const child = data[i];
|
||||
this.append(child, node.data);
|
||||
}
|
||||
}
|
||||
getNode(data) {
|
||||
if (data instanceof Node) return data;
|
||||
const key = typeof data !== "object" ? data : getNodeKey(this.key, data);
|
||||
return this.nodesMap[key] || null;
|
||||
}
|
||||
setDefaultExpandedKeys(keys) {
|
||||
keys = keys || [];
|
||||
this.defaultExpandedKeys = keys;
|
||||
keys.forEach((key) => {
|
||||
const node = this.getNode(key);
|
||||
if (node) node.expand(null, true);
|
||||
});
|
||||
}
|
||||
setCurrentNode(currentNode) {
|
||||
const prevCurrentNode = this.currentNode;
|
||||
if (prevCurrentNode) {
|
||||
prevCurrentNode.isCurrent = false;
|
||||
}
|
||||
this.currentNode = currentNode;
|
||||
this.currentNode.isCurrent = true;
|
||||
}
|
||||
setUserCurrentNode(node) {
|
||||
const key = node.key;
|
||||
const currNode = this.nodesMap[key];
|
||||
this.setCurrentNode(currNode);
|
||||
}
|
||||
setCurrentNodeKey(key) {
|
||||
if (key === null || key === undefined) {
|
||||
this.currentNode && (this.currentNode.isCurrent = false);
|
||||
this.currentNode = null;
|
||||
return;
|
||||
}
|
||||
const node = this.getNode(key);
|
||||
if (node) {
|
||||
this.setCurrentNode(node);
|
||||
}
|
||||
}
|
||||
getCurrentNode() {
|
||||
return this.currentNode;
|
||||
}
|
||||
remove(data) {
|
||||
const node = this.getNode(data);
|
||||
if (node && node.parent) {
|
||||
if (node === this.currentNode) {
|
||||
this.currentNode = null;
|
||||
}
|
||||
node.parent.removeChild(node);
|
||||
}
|
||||
}
|
||||
append(data, parentData) {
|
||||
const parentNode = parentData ? this.getNode(parentData) : this.root;
|
||||
|
||||
if (parentNode) {
|
||||
parentNode.insertChild({ data });
|
||||
}
|
||||
}
|
||||
insertBefore(data, refData) {
|
||||
const refNode = this.getNode(refData);
|
||||
refNode.parent.insertBefore({ data }, refNode);
|
||||
}
|
||||
insertAfter(data, refData) {
|
||||
const refNode = this.getNode(refData);
|
||||
refNode.parent.insertAfter({ data }, refNode);
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
export const NODE_KEY = "$treeNodeId";
|
||||
|
||||
export const markNodeData = function(node, data) {
|
||||
if (!data || data[NODE_KEY]) return;
|
||||
Object.defineProperty(data, NODE_KEY, {
|
||||
value: node.id,
|
||||
enumerable: false,
|
||||
configurable: false,
|
||||
writable: false
|
||||
});
|
||||
};
|
||||
|
||||
export const getNodeKey = function(key, data) {
|
||||
if (!key) return data[NODE_KEY];
|
||||
return data[key];
|
||||
};
|
||||
|
||||
export const findNearestComponent = (element, componentName) => {
|
||||
let target = element;
|
||||
while (target && target.tagName !== "BODY") {
|
||||
if (target.__vue__ && target.__vue__.$options.name === componentName) {
|
||||
return target.__vue__;
|
||||
}
|
||||
target = target.parentNode;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
@ -279,13 +279,12 @@ export default {
|
||||
try {
|
||||
const res = await GatewayInfoApi.getGatewayInfo(id);
|
||||
this.formData = res.data;
|
||||
this.dialogTitle = "修改机床网关信息";
|
||||
this.title = "修改机床网关信息";
|
||||
} finally {
|
||||
this.formLoading = false;
|
||||
}
|
||||
} else {
|
||||
this.dialogTitle = "新增机床网关信息";
|
||||
}
|
||||
this.title = "新增机床网关信息";
|
||||
},
|
||||
/** 提交按钮 */
|
||||
async submitForm() {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="55%"
|
||||
width="45%"
|
||||
v-dialogDrag
|
||||
append-to-body
|
||||
>
|
||||
@ -13,11 +13,12 @@
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
v-loading="formLoading"
|
||||
label-width="110px"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="点检方案父节点"
|
||||
v-if="this.formData.parentInspectionId != 0"
|
||||
label="父节点点检方案"
|
||||
prop="parentInspectionId"
|
||||
>
|
||||
<!-- <el-input
|
||||
@ -155,10 +156,7 @@ export default {
|
||||
"inspectionPlanId",
|
||||
"parentInspectionId"
|
||||
);
|
||||
this.inspectionOptions.push({
|
||||
inspectionPlanId: 0,
|
||||
inspectionName: "无",
|
||||
});
|
||||
console.log("inspectionOptions:", this.inspectionOptions);
|
||||
});
|
||||
},
|
||||
/** 转换菜单数据结构 */
|
||||
@ -188,13 +186,12 @@ export default {
|
||||
} finally {
|
||||
this.formLoading = false;
|
||||
}
|
||||
} else {
|
||||
this.dialogTitle = "新增点检方案";
|
||||
this.$nextTick(() => {
|
||||
this.formData.status = CommonStatusEnum.ENABLE;
|
||||
this.formData.parentInspectionId = this.pid;
|
||||
});
|
||||
}
|
||||
this.dialogTitle = "新增点检方案";
|
||||
this.$nextTick(() => {
|
||||
this.formData.status = CommonStatusEnum.ENABLE;
|
||||
this.formData.parentInspectionId = this.pid;
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
async submitForm() {
|
||||
|
||||
@ -94,6 +94,7 @@
|
||||
>
|
||||
<el-table-column
|
||||
label="基础点检名"
|
||||
align="center"
|
||||
prop="inspectionName"
|
||||
/>
|
||||
<el-table-column
|
||||
@ -169,7 +170,6 @@
|
||||
import * as InspectionPlanApi from "@/api/system/inspection/plan";
|
||||
import InspectionPlanForm from "./InspectionPlanForm.vue";
|
||||
import { getDictDatas, DICT_TYPE } from "@/utils/dict";
|
||||
|
||||
export default {
|
||||
name: "InspectionPlan",
|
||||
components: {
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
// 点检方案列表
|
||||
list: [],
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: false,
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
// 选中行
|
||||
|
||||
@ -1,214 +0,0 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-checkbox-group
|
||||
v-model="selectedTreeList"
|
||||
@change="selectedTreeChange"
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="(tree,index) in treeData"
|
||||
:key="tree.inspectionPlanId"
|
||||
:label="tree.inspectionPlanId"
|
||||
style="display:flex;align-items:center"
|
||||
>
|
||||
<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"
|
||||
></vue-okr-tree>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { VueOkrTree } from "@/components/VueOkrTree/index.js";
|
||||
import * as InspectionPlanApi from "@/api/system/inspection/plan";
|
||||
import alipayChannelFormVue from "../../pay/app/components/alipayChannelForm.vue";
|
||||
export default {
|
||||
name: "InspectionPlanForm",
|
||||
components: {
|
||||
VueOkrTree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
id: 0,
|
||||
label: "XXX科技有限公司",
|
||||
value: "a",
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
label: "产品研发部",
|
||||
value: "b",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "研发-前端",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "研发-后端",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: "UI设计",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
label: "产品经理",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "销售部",
|
||||
children: [
|
||||
{
|
||||
id: 7,
|
||||
label: "销售一部",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label: "销售二部",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "财务部",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: "HR人事",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
expandAll: false,
|
||||
horizontal: true,
|
||||
collapsable: true,
|
||||
loading: false,
|
||||
props: {
|
||||
label: "inspectionName",
|
||||
},
|
||||
selectedTreeList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.toggleExpand(this.data, true);
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
nodeClick(obj, node) {
|
||||
console.log("点击obj:", obj);
|
||||
console.log("点击node:", node);
|
||||
},
|
||||
renderCurrentClass(node) {
|
||||
return "label-bg-blue";
|
||||
},
|
||||
selectedTreeChange() {
|
||||
console.log("选择：", this.selectedTreeList);
|
||||
},
|
||||
objToList(obj) {
|
||||
return [obj];
|
||||
},
|
||||
/** 查询列表 */
|
||||
async getList() {
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await InspectionPlanApi.getInspectionPlanList();
|
||||
this.treeData = this.handleTree(
|
||||
res.data,
|
||||
"inspectionPlanId",
|
||||
"parentInspectionId"
|
||||
);
|
||||
console.log("treeData:", this.treeData);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
renderLabelClass(node) {
|
||||
return node.label.length < 16 ? "companyItem" : "companyHItem";
|
||||
},
|
||||
toggleExpand(data, val) {
|
||||
if (Array.isArray(data)) {
|
||||
data.forEach((item) => {
|
||||
this.$set(item, "expand", val);
|
||||
if (item.children) {
|
||||
this.toggleExpand(item.children, val);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$set(data, "expand", val);
|
||||
if (data.children) {
|
||||
this.toggleExpand(data.children, val);
|
||||
}
|
||||
}
|
||||
},
|
||||
onExpand: function (e, data) {
|
||||
if ("expand" in data) {
|
||||
data.expand = !data.expand;
|
||||
|
||||
if (!data.expand && data.children) {
|
||||
console.log("kkkkkkkkkkk");
|
||||
this.collapse(data.children);
|
||||
}
|
||||
} else {
|
||||
this.$set(data, "expand", true);
|
||||
}
|
||||
},
|
||||
collapse: function (list) {
|
||||
var _this = this;
|
||||
console.log(list, "kkkkkkk");
|
||||
list.forEach(function (child) {
|
||||
console.log(child, "kkkkkkkkkk");
|
||||
if (child.expand) {
|
||||
child.expand = false;
|
||||
}
|
||||
|
||||
child.children && _this.collapse(child.children);
|
||||
});
|
||||
},
|
||||
handleNodeClick(e, data) {
|
||||
console.log(data);
|
||||
},
|
||||
// renderContent: function (h, data) {
|
||||
// console.log(data, "kkkkk");
|
||||
// return h("div", [h("span", data.label), h("br"), h("span", "已完成")]);
|
||||
// },
|
||||
// renderContent(h, { node, data, store }) {
|
||||
// console.log("data:", data.$treeNodeId);
|
||||
// return h(
|
||||
// "span",
|
||||
// {
|
||||
// style: {
|
||||
// margin: "0 10px",
|
||||
// color: data.$treeNodeId % 2 === 0 ? "#f00" : "#000", // 使用颜色区分节点
|
||||
// fontSize: "16px",
|
||||
// fontFamily: "Arial, sans-serif",
|
||||
// },
|
||||
// },
|
||||
// data.inspectionName
|
||||
// );
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.label-bg-blue {
|
||||
background: #1989fa;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user