From 6561f31e2d4280e83916405ca26c8c32ecf18eca Mon Sep 17 00:00:00 2001 From: liuye Date: Tue, 23 Aug 2022 08:58:46 +0800 Subject: [PATCH 1/5] css --- .../AppAnnounceStatistics/AppAnnounceStatistics.vue | 8 ++++++++ .../AppAnnounceStatistics/AppAnnounceStatistics.vue | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/wxwork/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue b/packages/wxwork/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue index ab0b97bb..604814d4 100644 --- a/packages/wxwork/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue +++ b/packages/wxwork/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue @@ -610,6 +610,14 @@ .dept-name{ display: inline-block; width: 200px; + height: 22px; + overflow:hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: bottom; + } + .el-icon-arrow-down{ + vertical-align: middle; } } .active{ diff --git a/project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue b/project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue index 5f1d722c..5da4f42e 100644 --- a/project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue +++ b/project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue @@ -617,6 +617,14 @@ .dept-name{ display: inline-block; width: 200px; + height: 22px; + overflow:hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: bottom; + } + .el-icon-arrow-down{ + vertical-align: middle; } } .active{ From df498efd2f3820a891e6b73a5251d6eac75e76dc Mon Sep 17 00:00:00 2001 From: aixianling Date: Tue, 23 Aug 2022 10:37:38 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E9=87=8D=E6=96=B0=E6=9E=84=E5=BB=BA?= =?UTF-8?q?=E4=B8=80=E9=81=8Dokr-tree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project/dvui/AiOkrTree/AiOkrTree.vue | 732 ++++++++++++++++++++ project/dvui/AiOkrTree/OkrTreeNode.vue | 386 +++++++++++ project/dvui/AiOkrTree/model/merge.js | 14 + project/dvui/AiOkrTree/model/node.js | 254 +++++++ project/dvui/AiOkrTree/model/transition.css | 1 + project/dvui/AiOkrTree/model/tree-store.js | 176 +++++ project/dvui/AiOkrTree/model/util.js | 27 + project/dvui/components/AiDvPartyOrg.vue | 2 +- project/dvui/components/AiOkrTree.vue | 40 -- 9 files changed, 1591 insertions(+), 41 deletions(-) create mode 100644 project/dvui/AiOkrTree/AiOkrTree.vue create mode 100644 project/dvui/AiOkrTree/OkrTreeNode.vue create mode 100644 project/dvui/AiOkrTree/model/merge.js create mode 100644 project/dvui/AiOkrTree/model/node.js create mode 100644 project/dvui/AiOkrTree/model/transition.css create mode 100644 project/dvui/AiOkrTree/model/tree-store.js create mode 100644 project/dvui/AiOkrTree/model/util.js delete mode 100644 project/dvui/components/AiOkrTree.vue diff --git a/project/dvui/AiOkrTree/AiOkrTree.vue b/project/dvui/AiOkrTree/AiOkrTree.vue new file mode 100644 index 00000000..8bb46f08 --- /dev/null +++ b/project/dvui/AiOkrTree/AiOkrTree.vue @@ -0,0 +1,732 @@ + + + + diff --git a/project/dvui/AiOkrTree/OkrTreeNode.vue b/project/dvui/AiOkrTree/OkrTreeNode.vue new file mode 100644 index 00000000..0099cdc1 --- /dev/null +++ b/project/dvui/AiOkrTree/OkrTreeNode.vue @@ -0,0 +1,386 @@ + + diff --git a/project/dvui/AiOkrTree/model/merge.js b/project/dvui/AiOkrTree/model/merge.js new file mode 100644 index 00000000..66ebbfd8 --- /dev/null +++ b/project/dvui/AiOkrTree/model/merge.js @@ -0,0 +1,14 @@ +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; +} diff --git a/project/dvui/AiOkrTree/model/node.js b/project/dvui/AiOkrTree/model/node.js new file mode 100644 index 00000000..2c6c3a02 --- /dev/null +++ b/project/dvui/AiOkrTree/model/node.js @@ -0,0 +1,254 @@ +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); + } +} diff --git a/project/dvui/AiOkrTree/model/transition.css b/project/dvui/AiOkrTree/model/transition.css new file mode 100644 index 00000000..27697190 --- /dev/null +++ b/project/dvui/AiOkrTree/model/transition.css @@ -0,0 +1 @@ +.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)} \ No newline at end of file diff --git a/project/dvui/AiOkrTree/model/tree-store.js b/project/dvui/AiOkrTree/model/tree-store.js new file mode 100644 index 00000000..35008fe4 --- /dev/null +++ b/project/dvui/AiOkrTree/model/tree-store.js @@ -0,0 +1,176 @@ +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 + ); + + if (this.root.store.onlyBothTree) { + if (!this.leftData) + throw new Error("[Tree] leftData is required in onlyBothTree"); + if (this.leftData) { + this.isLeftChilds = new Node( + { + data: this.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; + } + } + } + } + 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(); + } + } + 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); + } +} diff --git a/project/dvui/AiOkrTree/model/util.js b/project/dvui/AiOkrTree/model/util.js new file mode 100644 index 00000000..e53acac7 --- /dev/null +++ b/project/dvui/AiOkrTree/model/util.js @@ -0,0 +1,27 @@ +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; +}; diff --git a/project/dvui/components/AiDvPartyOrg.vue b/project/dvui/components/AiDvPartyOrg.vue index 94b7f530..a2494f02 100644 --- a/project/dvui/components/AiDvPartyOrg.vue +++ b/project/dvui/components/AiDvPartyOrg.vue @@ -8,7 +8,7 @@ - - From a0d348748cb224f2e01b23ebf2c9faf53df930c5 Mon Sep 17 00:00:00 2001 From: aixianling Date: Tue, 23 Aug 2022 10:41:16 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E9=87=8D=E6=96=B0=E6=9E=84=E5=BB=BA?= =?UTF-8?q?=E4=B8=80=E9=81=8Dokr-tree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project/dvui/{ => components}/AiOkrTree/AiOkrTree.vue | 2 +- project/dvui/{ => components}/AiOkrTree/OkrTreeNode.vue | 0 project/dvui/{ => components}/AiOkrTree/model/merge.js | 0 project/dvui/{ => components}/AiOkrTree/model/node.js | 0 project/dvui/{ => components}/AiOkrTree/model/transition.css | 0 project/dvui/{ => components}/AiOkrTree/model/tree-store.js | 0 project/dvui/{ => components}/AiOkrTree/model/util.js | 0 .../xiushan/apps/finance/AppGuaranteeProduct/productList.vue | 2 +- 8 files changed, 2 insertions(+), 2 deletions(-) rename project/dvui/{ => components}/AiOkrTree/AiOkrTree.vue (99%) rename project/dvui/{ => components}/AiOkrTree/OkrTreeNode.vue (100%) rename project/dvui/{ => components}/AiOkrTree/model/merge.js (100%) rename project/dvui/{ => components}/AiOkrTree/model/node.js (100%) rename project/dvui/{ => components}/AiOkrTree/model/transition.css (100%) rename project/dvui/{ => components}/AiOkrTree/model/tree-store.js (100%) rename project/dvui/{ => components}/AiOkrTree/model/util.js (100%) diff --git a/project/dvui/AiOkrTree/AiOkrTree.vue b/project/dvui/components/AiOkrTree/AiOkrTree.vue similarity index 99% rename from project/dvui/AiOkrTree/AiOkrTree.vue rename to project/dvui/components/AiOkrTree/AiOkrTree.vue index 8bb46f08..df330118 100644 --- a/project/dvui/AiOkrTree/AiOkrTree.vue +++ b/project/dvui/components/AiOkrTree/AiOkrTree.vue @@ -231,7 +231,7 @@ export default { diff --git a/project/dv/apps/components/vue-okr-tree/OkrTree.vue b/project/dv/apps/components/vue-okr-tree/OkrTree.vue deleted file mode 100644 index 2e73ae76..00000000 --- a/project/dv/apps/components/vue-okr-tree/OkrTree.vue +++ /dev/null @@ -1,682 +0,0 @@ - - - - diff --git a/project/dv/apps/components/vue-okr-tree/OkrTreeNode.vue b/project/dv/apps/components/vue-okr-tree/OkrTreeNode.vue deleted file mode 100644 index 0099cdc1..00000000 --- a/project/dv/apps/components/vue-okr-tree/OkrTreeNode.vue +++ /dev/null @@ -1,386 +0,0 @@ - - diff --git a/project/dv/apps/components/vue-okr-tree/model/merge.js b/project/dv/apps/components/vue-okr-tree/model/merge.js deleted file mode 100644 index 66ebbfd8..00000000 --- a/project/dv/apps/components/vue-okr-tree/model/merge.js +++ /dev/null @@ -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; -} diff --git a/project/dv/apps/components/vue-okr-tree/model/node.js b/project/dv/apps/components/vue-okr-tree/model/node.js deleted file mode 100644 index 2c6c3a02..00000000 --- a/project/dv/apps/components/vue-okr-tree/model/node.js +++ /dev/null @@ -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); - } -} diff --git a/project/dv/apps/components/vue-okr-tree/model/transition.css b/project/dv/apps/components/vue-okr-tree/model/transition.css deleted file mode 100644 index 27697190..00000000 --- a/project/dv/apps/components/vue-okr-tree/model/transition.css +++ /dev/null @@ -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)} \ No newline at end of file diff --git a/project/dv/apps/components/vue-okr-tree/model/tree-store.js b/project/dv/apps/components/vue-okr-tree/model/tree-store.js deleted file mode 100644 index 35008fe4..00000000 --- a/project/dv/apps/components/vue-okr-tree/model/tree-store.js +++ /dev/null @@ -1,176 +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 - ); - - if (this.root.store.onlyBothTree) { - if (!this.leftData) - throw new Error("[Tree] leftData is required in onlyBothTree"); - if (this.leftData) { - this.isLeftChilds = new Node( - { - data: this.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; - } - } - } - } - 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(); - } - } - 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); - } -} diff --git a/project/dv/apps/components/vue-okr-tree/model/util.js b/project/dv/apps/components/vue-okr-tree/model/util.js deleted file mode 100644 index e53acac7..00000000 --- a/project/dv/apps/components/vue-okr-tree/model/util.js +++ /dev/null @@ -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; -};