From b34d2fc3db297aa6b0b6a0da66e115503f371482 Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Fri, 29 Oct 2021 15:57:14 +0800 Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/org-tree/index.js | 8 + src/components/org-tree/src/model/node.js | 486 +++++++++++++++++ .../org-tree/src/model/tree-store.js | 340 ++++++++++++ src/components/org-tree/src/model/util.js | 27 + src/components/org-tree/src/tree-node.vue | 279 ++++++++++ src/components/org-tree/src/tree.vue | 496 ++++++++++++++++++ src/components/student-tree/src/tree-node.vue | 2 +- src/pages/achievement/list/index.vue | 2 +- src/pages/assessment/add/index.vue | 12 +- src/pages/assessment/list/index.vue | 2 +- src/pages/course/contentSettings/index.vue | 2 +- src/pages/student/list/index.vue | 20 +- src/pages/system/list/role.vue | 4 +- src/setting.js | 1 + 14 files changed, 1667 insertions(+), 14 deletions(-) create mode 100644 src/components/org-tree/index.js create mode 100644 src/components/org-tree/src/model/node.js create mode 100644 src/components/org-tree/src/model/tree-store.js create mode 100644 src/components/org-tree/src/model/util.js create mode 100644 src/components/org-tree/src/tree-node.vue create mode 100644 src/components/org-tree/src/tree.vue diff --git a/src/components/org-tree/index.js b/src/components/org-tree/index.js new file mode 100644 index 0000000..e52d6a5 --- /dev/null +++ b/src/components/org-tree/index.js @@ -0,0 +1,8 @@ +import Tree from './src/tree.vue'; + +/* istanbul ignore next */ +Tree.install = function(Vue) { + Vue.component(Tree.name, Tree); +}; + +export default Tree; diff --git a/src/components/org-tree/src/model/node.js b/src/components/org-tree/src/model/node.js new file mode 100644 index 0000000..63413a1 --- /dev/null +++ b/src/components/org-tree/src/model/node.js @@ -0,0 +1,486 @@ +import objectAssign from 'element-ui/src/utils/merge'; +import { markNodeData, NODE_KEY } from './util'; +import { arrayFindIndex } from 'element-ui/src/utils/util'; + +export const getChildState = node => { + let all = true; + let none = true; + let allWithoutDisable = true; + for (let i = 0, j = node.length; i < j; i++) { + const n = node[i]; + if (n.checked !== true || n.indeterminate) { + all = false; + if (!n.disabled) { + allWithoutDisable = false; + } + } + if (n.checked !== false || n.indeterminate) { + none = false; + } + } + + return { all, none, allWithoutDisable, half: !all && !none }; +}; + +const reInitChecked = function(node) { + if (node.childNodes.length === 0) return; + + const {all, none, half} = getChildState(node.childNodes); + if (all) { + node.checked = true; + node.indeterminate = false; + } else if (half) { + node.checked = false; + node.indeterminate = true; + } else if (none) { + node.checked = false; + node.indeterminate = false; + } + + const parent = node.parent; + if (!parent || parent.level === 0) return; + + if (!node.store.checkStrictly) { + reInitChecked(parent); + } +}; + +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) { + this.id = nodeIdSeed++; + this.text = null; + this.checked = false; + this.indeterminate = false; + this.data = null; + this.expanded = false; + this.parent = null; + this.visible = true; + this.isCurrent = false; + + for (let name in options) { + if (options.hasOwnProperty(name)) { + this[name] = options[name]; + } + } + + // internal + this.level = 0; + this.loaded = false; + this.childNodes = []; + this.loading = false; + + 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); + + const props = store.props; + if (props && typeof props.isLeaf !== 'undefined') { + const isLeaf = getPropertyFromData(this, 'isLeaf'); + if (typeof isLeaf === 'boolean') { + this.isLeafByUser = isLeaf; + } + } + + if (store.lazy !== true && this.data) { + this.setData(this.data); + + if (store.defaultExpandAll) { + this.expanded = true; + } + } else if (this.level > 0 && store.lazy && store.defaultExpandAll) { + this.expand(); + } + 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, store.autoExpandParent); + } + + if (key && store.currentNodeKey !== undefined && this.key === store.currentNodeKey) { + store.currentNode = this; + store.currentNode.isCurrent = true; + } + + if (store.lazy) { + store._initDefaultCheckedNode(this); + } + + this.updateLeafState(); + } + + setData(data) { + if (!Array.isArray(data)) { + markNodeData(this, data); + } + + 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] }); + } + } + + get label() { + return getPropertyFromData(this, 'label'); + } + + get key() { + const nodeKey = this.store.key; + if (this.data) return this.data[nodeKey]; + return null; + } + + get disabled() { + return getPropertyFromData(this, 'disabled'); + } + + get nextSibling() { + const parent = this.parent; + if (parent) { + const index = parent.childNodes.indexOf(this); + if (index > -1) { + return parent.childNodes[index + 1]; + } + } + return null; + } + + get previousSibling() { + const parent = this.parent; + if (parent) { + const index = parent.childNodes.indexOf(this); + if (index > -1) { + return index > 0 ? parent.childNodes[index - 1] : null; + } + } + return null; + } + + contains(target, deep = true) { + const walk = function(parent) { + const children = parent.childNodes || []; + let result = false; + for (let i = 0, j = children.length; i < j; i++) { + const child = children[i]; + if (child === target || (deep && walk(child))) { + result = true; + break; + } + } + return result; + }; + + return walk(this); + } + + remove() { + const parent = this.parent; + if (parent) { + parent.removeChild(this); + } + } + + insertChild(child, index, batch) { + 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 (typeof index === 'undefined' || index < 0) { + children.push(child.data); + } else { + children.splice(index, 0, child.data); + } + } + } + objectAssign(child, { + parent: this, + store: this.store + }); + child = new Node(child); + } + + child.level = this.level + 1; + + if (typeof index === 'undefined' || index < 0) { + this.childNodes.push(child); + } else { + this.childNodes.splice(index, 0, child); + } + + 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); + } + + 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(); + } + + removeChildByData(data) { + let targetNode = null; + + for (let i = 0; i < this.childNodes.length; i++) { + if (this.childNodes[i].data === data) { + targetNode = this.childNodes[i]; + break; + } + } + + if (targetNode) { + this.removeChild(targetNode); + } + } + + expand(callback, expandParent) { + const done = () => { + if (expandParent) { + let parent = this.parent; + while (parent.level > 0) { + parent.expanded = true; + parent = parent.parent; + } + } + this.expanded = true; + if (callback) callback(); + }; + + if (this.shouldLoadData()) { + this.loadData((data) => { + if (data instanceof Array) { + if (this.checked) { + this.setChecked(true, true); + } else if (!this.store.checkStrictly) { + reInitChecked(this); + } + done(); + } + }); + } else { + done(); + } + } + + doCreateChildren(array, defaultProps = {}) { + array.forEach((item) => { + this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true); + }); + } + + collapse() { + this.expanded = false; + } + + shouldLoadData() { + return this.store.lazy === true && this.store.load && !this.loaded; + } + + 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; + this.isLeaf = this.isLeafByUser; + return; + } + this.isLeaf = false; + } + + setChecked(value, deep, recursion, passValue) { + this.indeterminate = value === 'half'; + this.checked = value === true; + + if (this.store.checkStrictly) return; + + if (!(this.shouldLoadData() && !this.store.checkDescendants)) { + let { all, allWithoutDisable } = getChildState(this.childNodes); + + if (!this.isLeaf && (!all && allWithoutDisable)) { + this.checked = false; + value = false; + } + + const handleDescendants = () => { + if (deep) { + const childNodes = this.childNodes; + for (let i = 0, j = childNodes.length; i < j; i++) { + const child = childNodes[i]; + passValue = passValue || value !== false; + const isCheck = child.disabled ? child.checked : passValue; + child.setChecked(isCheck, deep, true, passValue); + } + const { half, all } = getChildState(childNodes); + if (!all) { + this.checked = all; + this.indeterminate = half; + } + } + }; + + if (this.shouldLoadData()) { + // Only work on lazy load data. + this.loadData(() => { + handleDescendants(); + reInitChecked(this); + }, { + checked: value !== false + }); + return; + } else { + handleDescendants(); + } + } + + const parent = this.parent; + if (!parent || parent.level === 0) return; + + if (!recursion) { + reInitChecked(parent); + } + } + + 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]; + } + + updateChildren() { + const newData = this.getChildren() || []; + const oldData = this.childNodes.map((node) => node.data); + + const newDataMap = {}; + const newNodes = []; + + newData.forEach((item, index) => { + const key = item[NODE_KEY]; + const isNodeExists = !!key && arrayFindIndex(oldData, data => data[NODE_KEY] === key) >= 0; + if (isNodeExists) { + newDataMap[key] = { index, data: item }; + } else { + newNodes.push({ index, data: item }); + } + }); + + if (!this.store.lazy) { + oldData.forEach((item) => { + if (!newDataMap[item[NODE_KEY]]) this.removeChildByData(item); + }); + } + + newNodes.forEach(({ index, data }) => { + this.insertChild({ data }, index); + }); + + this.updateLeafState(); + } + + loadData(callback, defaultProps = {}) { + if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) { + this.loading = true; + + const resolve = (children) => { + this.loaded = true; + this.loading = false; + this.childNodes = []; + + this.doCreateChildren(children, defaultProps); + + this.updateLeafState(); + if (callback) { + callback.call(this, children); + } + }; + + this.store.load(this, resolve); + } else { + if (callback) { + callback.call(this); + } + } + } +} diff --git a/src/components/org-tree/src/model/tree-store.js b/src/components/org-tree/src/model/tree-store.js new file mode 100644 index 0000000..d0bcd3e --- /dev/null +++ b/src/components/org-tree/src/model/tree-store.js @@ -0,0 +1,340 @@ +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 + }); + + if (this.lazy && this.load) { + const loadFn = this.load; + loadFn(this.root, (data) => { + this.root.doCreateChildren(data); + this._initDefaultCheckedNodes(); + }); + } else { + this._initDefaultCheckedNodes(); + } + } + + filter(value) { + const filterNodeMethod = this.filterNodeMethod; + const lazy = this.lazy; + const traverse = function(node) { + const childNodes = node.root ? node.root.childNodes : node.childNodes; + + childNodes.forEach((child) => { + child.visible = filterNodeMethod.call(child, value, child.data, child); + + traverse(child); + }); + + 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.isLeaf && !lazy) node.expand(); + }; + + traverse(this); + } + + setData(newVal) { + const instanceChanged = newVal !== this.root.data; + if (instanceChanged) { + this.root.setData(newVal); + this._initDefaultCheckedNodes(); + } else { + this.root.updateChildren(); + } + } + + getNode(data) { + if (data instanceof Node) return data; + const key = typeof data !== 'object' ? data : getNodeKey(this.key, data); + return this.nodesMap[key] || null; + } + + 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); + } + + 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 }); + } + } + + _initDefaultCheckedNodes() { + const defaultCheckedKeys = this.defaultCheckedKeys || []; + const nodesMap = this.nodesMap; + + defaultCheckedKeys.forEach((checkedKey) => { + const node = nodesMap[checkedKey]; + + if (node) { + node.setChecked(true, !this.checkStrictly); + } + }); + } + + _initDefaultCheckedNode(node) { + const defaultCheckedKeys = this.defaultCheckedKeys || []; + + if (defaultCheckedKeys.indexOf(node.key) !== -1) { + node.setChecked(true, !this.checkStrictly); + } + } + + setDefaultCheckedKey(newVal) { + if (newVal !== this.defaultCheckedKeys) { + this.defaultCheckedKeys = newVal; + this._initDefaultCheckedNodes(); + } + } + + 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]; + } + + getCheckedNodes(leafOnly = false, includeHalfChecked = false) { + const checkedNodes = []; + const traverse = function(node) { + const childNodes = node.root ? node.root.childNodes : node.childNodes; + + childNodes.forEach((child) => { + if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) { + checkedNodes.push(child.data); + } + + traverse(child); + }); + }; + + traverse(this); + + return checkedNodes; + } + + getCheckedKeys(leafOnly = false) { + return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]); + } + + getHalfCheckedNodes() { + const nodes = []; + const traverse = function(node) { + const childNodes = node.root ? node.root.childNodes : node.childNodes; + + childNodes.forEach((child) => { + if (child.indeterminate) { + nodes.push(child.data); + } + + traverse(child); + }); + }; + + traverse(this); + + return nodes; + } + + getHalfCheckedKeys() { + return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]); + } + + _getAllNodes() { + const allNodes = []; + const nodesMap = this.nodesMap; + for (let nodeKey in nodesMap) { + if (nodesMap.hasOwnProperty(nodeKey)) { + allNodes.push(nodesMap[nodeKey]); + } + } + + return allNodes; + } + + 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); + } + } + + _setCheckedKeys(key, leafOnly = false, checkedKeys) { + const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level); + const cache = Object.create(null); + const keys = Object.keys(checkedKeys); + allNodes.forEach(node => node.setChecked(false, false)); + for (let i = 0, j = allNodes.length; i < j; i++) { + const node = allNodes[i]; + const nodeKey = node.data[key].toString(); + let checked = keys.indexOf(nodeKey) > -1; + if (!checked) { + if (node.checked && !cache[nodeKey]) { + node.setChecked(false, false); + } + continue; + } + + let parent = node.parent; + while (parent && parent.level > 0) { + cache[parent.data[key]] = true; + parent = parent.parent; + } + + if (node.isLeaf || this.checkStrictly) { + node.setChecked(true, false); + continue; + } + node.setChecked(true, true); + + if (leafOnly) { + node.setChecked(false, false); + const traverse = function(node) { + const childNodes = node.childNodes; + childNodes.forEach((child) => { + if (!child.isLeaf) { + child.setChecked(false, false); + } + traverse(child); + }); + }; + traverse(node); + } + } + } + + setCheckedNodes(array, leafOnly = false) { + const key = this.key; + const checkedKeys = {}; + array.forEach((item) => { + checkedKeys[(item || {})[key]] = true; + }); + + this._setCheckedKeys(key, leafOnly, checkedKeys); + } + + setCheckedKeys(keys, leafOnly = false) { + this.defaultCheckedKeys = keys; + const key = this.key; + const checkedKeys = {}; + keys.forEach((key) => { + checkedKeys[key] = true; + }); + + this._setCheckedKeys(key, leafOnly, checkedKeys); + } + + setDefaultExpandedKeys(keys) { + keys = keys || []; + this.defaultExpandedKeys = keys; + + keys.forEach((key) => { + const node = this.getNode(key); + if (node) node.expand(null, this.autoExpandParent); + }); + } + + setChecked(data, checked, deep) { + const node = this.getNode(data); + + if (node) { + node.setChecked(!!checked, deep); + } + } + + getCurrentNode() { + return this.currentNode; + } + + setCurrentNode(currentNode) { + const prevCurrentNode = this.currentNode; + if (prevCurrentNode) { + prevCurrentNode.isCurrent = false; + } + this.currentNode = currentNode; + this.currentNode.isCurrent = true; + } + + setUserCurrentNode(node) { + const key = node[this.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); + } + } +}; diff --git a/src/components/org-tree/src/model/util.js b/src/components/org-tree/src/model/util.js new file mode 100644 index 0000000..dcc891b --- /dev/null +++ b/src/components/org-tree/src/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/src/components/org-tree/src/tree-node.vue b/src/components/org-tree/src/tree-node.vue new file mode 100644 index 0000000..4b816b2 --- /dev/null +++ b/src/components/org-tree/src/tree-node.vue @@ -0,0 +1,279 @@ + + + diff --git a/src/components/org-tree/src/tree.vue b/src/components/org-tree/src/tree.vue new file mode 100644 index 0000000..5b1c1b4 --- /dev/null +++ b/src/components/org-tree/src/tree.vue @@ -0,0 +1,496 @@ + + + diff --git a/src/components/student-tree/src/tree-node.vue b/src/components/student-tree/src/tree-node.vue index 4b816b2..3c922db 100644 --- a/src/components/student-tree/src/tree-node.vue +++ b/src/components/student-tree/src/tree-node.vue @@ -35,7 +35,7 @@ > + { if (res.data && res.data.length) { this.curriculumList = res.data; - this.curriculumId = this.curriculumList[0].cid; this.getData(); } }).catch(err => { diff --git a/src/pages/assessment/add/index.vue b/src/pages/assessment/add/index.vue index 459d6cc..c2f478b 100644 --- a/src/pages/assessment/add/index.vue +++ b/src/pages/assessment/add/index.vue @@ -155,7 +155,7 @@
- - +
@@ -193,8 +193,9 @@