提交

3 years ago · 93cafe115e
parent 018fd60f8e
commit 93cafe115e
6 changed files with 2587 additions and 0 deletions
--- a/src/components/myTree/src/model/node.js
+++ b/src/components/myTree/src/model/node.js
@ -0,0 +1,485 @@
 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;
      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);
      }
    }
  }
 }
--- a/src/components/myTree/src/model/tree-store.js
+++ b/src/components/myTree/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);
    }
  }
 };
--- a/src/components/myTree/src/model/util.js
+++ b/src/components/myTree/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;
 };
--- a/src/components/myTree/src/tree-node.vue
+++ b/src/components/myTree/src/tree-node.vue
@ -0,0 +1,279 @@
 <template>
  <div
    class="el-tree-node"
    @click.stop="handleClick"
    @contextmenu="($event) => this.handleContextMenu($event)"
    v-show="node.visible"
    :class="{
      'is-expanded': expanded,
      'is-current': node.isCurrent,
      'is-hidden': !node.visible,
      'is-focusable': !node.disabled,
      'is-checked': !node.disabled && node.checked
    }"
    role="treeitem"
    tabindex="-1"
    :aria-expanded="expanded"
    :aria-disabled="node.disabled"
    :aria-checked="node.checked"
    :draggable="tree.draggable"
    @dragstart.stop="handleDragStart"
    @dragover.stop="handleDragOver"
    @dragend.stop="handleDragEnd"
    @drop.stop="handleDrop"
    ref="node"
  >
    <div class="el-tree-node__content"
      :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
      <span
        @click.stop="handleExpandIconClick"
        :class="[
          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
          'el-tree-node__expand-icon',
          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
        ]"
      >
      </span>
      <el-checkbox
        v-if="showCheckbox && node.data.showCheckbox"
        v-model="node.checked"
        :indeterminate="node.indeterminate"
        :disabled="!!node.disabled"
        @click.native.stop
        @change="handleCheckChange"
      >
      </el-checkbox>
      <span
        v-if="node.loading"
        class="el-tree-node__loading-icon el-icon-loading">
      </span>
      <node-content :node="node"></node-content>
    </div>
    <el-collapse-transition>
      <div
        class="el-tree-node__children"
        v-if="!renderAfterExpand || childNodeRendered"
        v-show="expanded"
        role="group"
        :aria-expanded="expanded"
      >
        <el-tree-node
          :render-content="renderContent"
          v-for="child in node.childNodes"
          :render-after-expand="renderAfterExpand"
          :show-checkbox="showCheckbox"
          :key="getNodeKey(child)"
          :node="child"
          @node-expand="handleChildNodeExpand">
        </el-tree-node>
      </div>
    </el-collapse-transition>
  </div>
 </template>
 <script type="text/jsx">
  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
  import ElCheckbox from 'element-ui/packages/checkbox';
  import emitter from 'element-ui/src/mixins/emitter';
  import { getNodeKey } from './model/util';
  export default {
    name: 'ElTreeNode',
    componentName: 'ElTreeNode',
    mixins: [emitter],
    props: {
      node: {
        default() {
          return {};
        }
      },
      props: {},
      renderContent: Function,
      renderAfterExpand: {
        type: Boolean,
        default: true
      },
      showCheckbox: {
        type: Boolean,
        default: false
      }
    },
    components: {
      ElCollapseTransition,
      ElCheckbox,
      NodeContent: {
        props: {
          node: {
            required: true
          }
        },
        render(h) {
          const parent = this.$parent;
          const tree = parent.tree;
          const node = this.node;
          const { data, store } = node;
          return (
            parent.renderContent
              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
              : tree.$scopedSlots.default
                ? tree.$scopedSlots.default({ node, data })
                : <span class="el-tree-node__label">{ node.label }</span>
          );
        }
      }
    },
    data() {
      return {
        tree: null,
        expanded: false,
        childNodeRendered: false,
        oldChecked: null,
        oldIndeterminate: null
      };
    },
    watch: {
      'node.indeterminate'(val) {
        this.handleSelectChange(this.node.checked, val);
      },
      'node.checked'(val) {
        this.handleSelectChange(val, this.node.indeterminate);
      },
      'node.expanded'(val) {
        this.$nextTick(() => this.expanded = val);
        if (val) {
          this.childNodeRendered = true;
        }
      }
    },
    methods: {
      getNodeKey(node) {
        return getNodeKey(this.tree.nodeKey, node.data);
      },
      handleSelectChange(checked, indeterminate) {
        if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
          this.tree.$emit('check-change', this.node.data, checked, indeterminate);
        }
        this.oldChecked = checked;
        this.indeterminate = indeterminate;
      },
      handleClick() {
        const store = this.tree.store;
        store.setCurrentNode(this.node);
        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
        this.tree.currentNode = this;
        if (this.tree.expandOnClickNode) {
          this.handleExpandIconClick();
        }
        if (this.tree.checkOnClickNode && !this.node.disabled) {
          this.handleCheckChange(null, {
            target: { checked: !this.node.checked }
          });
        }
        this.tree.$emit('node-click', 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);
      },
      handleExpandIconClick() {
        if (this.node.isLeaf) return;
        if (this.expanded) {
          this.tree.$emit('node-collapse', this.node.data, this.node, this);
          this.node.collapse();
        } else {
          this.node.expand();
          this.$emit('node-expand', this.node.data, this.node, this);
        }
      },
      handleCheckChange(value, ev) {
        this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
        this.$nextTick(() => {
          const store = this.tree.store;
          this.tree.$emit('check', this.node.data, {
            checkedNodes: store.getCheckedNodes(),
            checkedKeys: store.getCheckedKeys(),
            halfCheckedNodes: store.getHalfCheckedNodes(),
            halfCheckedKeys: store.getHalfCheckedKeys(),
          });
        });
      },
      handleChildNodeExpand(nodeData, node, instance) {
        this.broadcast('ElTreeNode', 'tree-node-expand', node);
        this.tree.$emit('node-expand', nodeData, node, instance);
      },
      handleDragStart(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-start', event, this);
      },
      handleDragOver(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-over', event, this);
        event.preventDefault();
      },
      handleDrop(event) {
        event.preventDefault();
      },
      handleDragEnd(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-end', event, this);
      }
    },
    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.');
      }
      const props = tree.props || {};
      const childrenKey = props['children'] || 'children';
      this.$watch(`node.data.${childrenKey}`, () => {
        this.node.updateChildren();
      });
      if (this.node.expanded) {
        this.expanded = true;
        this.childNodeRendered = true;
      }
      if(this.tree.accordion) {
        this.$on('tree-node-expand', node => {
          if(this.node !== node) {
            this.node.collapse();
          }
        });
      }
    }
  };
 </script>
--- a/src/components/myTree/src/tree.vue
+++ b/src/components/myTree/src/tree.vue
@ -0,0 +1,496 @@
 <template>
  <div
    class="el-tree"
    :class="{
      'el-tree--highlight-current': highlightCurrent,
      'is-dragging': !!dragState.draggingNode,
      'is-drop-not-allow': !dragState.allowDrop,
      'is-drop-inner': dragState.dropType === 'inner'
    }"
    role="tree"
  >
    <el-tree-node
      v-for="child in root.childNodes"
      :node="child"
      :props="props"
      :render-after-expand="renderAfterExpand"
      :show-checkbox="showCheckbox"
      :key="getNodeKey(child)"
      :render-content="renderContent"
      @node-expand="handleNodeExpand">
    </el-tree-node>
    <div class="el-tree__empty-block" v-if="isEmpty">
      <span class="el-tree__empty-text">{{ emptyText }}</span>
    </div>
    <div
      v-show="dragState.showDropIndicator"
      class="el-tree__drop-indicator"
      ref="dropIndicator">
    </div>
  </div>
 </template>
 <script>
  import TreeStore from './model/tree-store';
  import { getNodeKey, findNearestComponent } from './model/util';
  import ElTreeNode from './tree-node.vue';
  import {t} from 'element-ui/src/locale';
  import emitter from 'element-ui/src/mixins/emitter';
  import { addClass, removeClass } from 'element-ui/src/utils/dom';
  export default {
    name: 'ElTree',
    mixins: [emitter],
    components: {
      ElTreeNode
    },
    data() {
      return {
        store: null,
        root: null,
        currentNode: null,
        treeItems: null,
        checkboxItems: [],
        dragState: {
          showDropIndicator: false,
          draggingNode: null,
          dropNode: null,
          allowDrop: true
        }
      };
    },
    props: {
      data: {
        type: Array
      },
      emptyText: {
        type: String,
        default() {
          return t('el.tree.emptyText');
        }
      },
      renderAfterExpand: {
        type: Boolean,
        default: true
      },
      nodeKey: String,
      checkStrictly: Boolean,
      defaultExpandAll: Boolean,
      expandOnClickNode: {
        type: Boolean,
        default: true
      },
      checkOnClickNode: Boolean,
      checkDescendants: {
        type: Boolean,
        default: false
      },
      autoExpandParent: {
        type: Boolean,
        default: true
      },
      defaultCheckedKeys: Array,
      defaultExpandedKeys: Array,
      currentNodeKey: [String, Number],
      renderContent: Function,
      showCheckbox: {
        type: Boolean,
        default: false
      },
      draggable: {
        type: Boolean,
        default: false
      },
      allowDrag: Function,
      allowDrop: Function,
      props: {
        default() {
          return {
            children: 'children',
            label: 'label',
            disabled: 'disabled'
          };
        }
      },
      lazy: {
        type: Boolean,
        default: false
      },
      highlightCurrent: Boolean,
      load: Function,
      filterNodeMethod: Function,
      accordion: Boolean,
      indent: {
        type: Number,
        default: 18
      },
      iconClass: String
    },
    computed: {
      children: {
        set(value) {
          this.data = value;
        },
        get() {
          return this.data;
        }
      },
      treeItemArray() {
        return Array.prototype.slice.call(this.treeItems);
      },
      isEmpty() {
        const { childNodes } = this.root;
        return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);
      }
    },
    watch: {
      defaultCheckedKeys(newVal) {
        this.store.setDefaultCheckedKey(newVal);
      },
      defaultExpandedKeys(newVal) {
        this.store.defaultExpandedKeys = newVal;
        this.store.setDefaultExpandedKeys(newVal);
      },
      data(newVal) {
        this.store.setData(newVal);
      },
      checkboxItems(val) {
        Array.prototype.forEach.call(val, (checkbox) => {
          checkbox.setAttribute('tabindex', -1);
        });
      },
      checkStrictly(newVal) {
        this.store.checkStrictly = newVal;
      }
    },
    methods: {
      filter(value) {
        if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
        this.store.filter(value);
      },
      getNodeKey(node) {
        return getNodeKey(this.nodeKey, node.data);
      },
      getNodePath(data) {
        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath');
        const node = this.store.getNode(data);
        if (!node) return [];
        const path = [node.data];
        let parent = node.parent;
        while (parent && parent !== this.root) {
          path.push(parent.data);
          parent = parent.parent;
        }
        return path.reverse();
      },
      getCheckedNodes(leafOnly, includeHalfChecked) {
        return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
      },
      getCheckedKeys(leafOnly) {
        return this.store.getCheckedKeys(leafOnly);
      },
      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;
      },
      setCheckedNodes(nodes, leafOnly) {
        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
        this.store.setCheckedNodes(nodes, leafOnly);
      },
      setCheckedKeys(keys, leafOnly) {
        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
        this.store.setCheckedKeys(keys, leafOnly);
      },
      setChecked(data, checked, deep) {
        this.store.setChecked(data, checked, deep);
      },
      getHalfCheckedNodes() {
        return this.store.getHalfCheckedNodes();
      },
      getHalfCheckedKeys() {
        return this.store.getHalfCheckedKeys();
      },
      setCurrentNode(node) {
        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
        this.store.setUserCurrentNode(node);
      },
      setCurrentKey(key) {
        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
        this.store.setCurrentNodeKey(key);
      },
      getNode(data) {
        return this.store.getNode(data);
      },
      remove(data) {
        this.store.remove(data);
      },
      append(data, parentNode) {
        this.store.append(data, parentNode);
      },
      insertBefore(data, refNode) {
        this.store.insertBefore(data, refNode);
      },
      insertAfter(data, refNode) {
        this.store.insertAfter(data, refNode);
      },
      handleNodeExpand(nodeData, node, instance) {
        this.broadcast('ElTreeNode', 'tree-node-expand', node);
        this.$emit('node-expand', nodeData, node, instance);
      },
      updateKeyChildren(key, data) {
        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
        this.store.updateChildren(key, data);
      },
      initTabIndex() {
        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
        this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
        const checkedItem = this.$el.querySelectorAll('.is-checked[role=treeitem]');
        if (checkedItem.length) {
          checkedItem[0].setAttribute('tabindex', 0);
          return;
        }
        this.treeItems[0] && this.treeItems[0].setAttribute('tabindex', 0);
      },
      handleKeydown(ev) {
        const currentItem = ev.target;
        if (currentItem.className.indexOf('el-tree-node') === -1) return;
        const keyCode = ev.keyCode;
        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
        const currentIndex = this.treeItemArray.indexOf(currentItem);
        let nextIndex;
        if ([38, 40].indexOf(keyCode) > -1) { // up、down
          ev.preventDefault();
          if (keyCode === 38) { // up
            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
          } else {
            nextIndex = (currentIndex < this.treeItemArray.length - 1) ? currentIndex + 1 : 0;
          }
          this.treeItemArray[nextIndex].focus(); // 选中
        }
        if ([37, 39].indexOf(keyCode) > -1) { // left、right 展开
          ev.preventDefault();
          currentItem.click(); // 选中
        }
        const hasInput = currentItem.querySelector('[type="checkbox"]');
        if ([13, 32].indexOf(keyCode) > -1 && hasInput) { // space enter选中checkbox
          ev.preventDefault();
          hasInput.click();
        }
      }
    },
    created() {
      this.isTree = true;
      this.store = new TreeStore({
        key: this.nodeKey,
        data: this.data,
        lazy: this.lazy,
        props: this.props,
        load: this.load,
        currentNodeKey: this.currentNodeKey,
        checkStrictly: this.checkStrictly,
        checkDescendants: this.checkDescendants,
        defaultCheckedKeys: this.defaultCheckedKeys,
        defaultExpandedKeys: this.defaultExpandedKeys,
        autoExpandParent: this.autoExpandParent,
        defaultExpandAll: this.defaultExpandAll,
        filterNodeMethod: this.filterNodeMethod
      });
      this.root = this.store.root;
      let dragState = this.dragState;
      this.$on('tree-node-drag-start', (event, treeNode) => {
        if (typeof this.allowDrag === 'function' && !this.allowDrag(treeNode.node)) {
          event.preventDefault();
          return false;
        }
        event.dataTransfer.effectAllowed = 'move';
        // wrap in try catch to address IE's error when first param is 'text/plain'
        try {
          // setData is required for draggable to work in FireFox
          // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox
          event.dataTransfer.setData('text/plain', '');
        } catch (e) {}
        dragState.draggingNode = treeNode;
        this.$emit('node-drag-start', treeNode.node, event);
      });
      this.$on('tree-node-drag-over', (event, treeNode) => {
        const dropNode = findNearestComponent(event.target, 'ElTreeNode');
        const oldDropNode = dragState.dropNode;
        if (oldDropNode && oldDropNode !== dropNode) {
          removeClass(oldDropNode.$el, 'is-drop-inner');
        }
        const draggingNode = dragState.draggingNode;
        if (!draggingNode || !dropNode) return;
        let dropPrev = true;
        let dropInner = true;
        let dropNext = true;
        let userAllowDropInner = true;
        if (typeof this.allowDrop === 'function') {
          dropPrev = this.allowDrop(draggingNode.node, dropNode.node, 'prev');
          userAllowDropInner = dropInner = this.allowDrop(draggingNode.node, dropNode.node, 'inner');
          dropNext = this.allowDrop(draggingNode.node, dropNode.node, 'next');
        }
        event.dataTransfer.dropEffect = dropInner ? 'move' : 'none';
        if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
          if (oldDropNode) {
            this.$emit('node-drag-leave', draggingNode.node, oldDropNode.node, event);
          }
          this.$emit('node-drag-enter', draggingNode.node, dropNode.node, event);
        }
        if (dropPrev || dropInner || dropNext) {
          dragState.dropNode = dropNode;
        }
        if (dropNode.node.nextSibling === draggingNode.node) {
          dropNext = false;
        }
        if (dropNode.node.previousSibling === draggingNode.node) {
          dropPrev = false;
        }
        if (dropNode.node.contains(draggingNode.node, false)) {
          dropInner = false;
        }
        if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
          dropPrev = false;
          dropInner = false;
          dropNext = false;
        }
        const targetPosition = dropNode.$el.getBoundingClientRect();
        const treePosition = this.$el.getBoundingClientRect();
        let dropType;
        const prevPercent = dropPrev ? (dropInner ? 0.25 : (dropNext ? 0.45 : 1)) : -1;
        const nextPercent = dropNext ? (dropInner ? 0.75 : (dropPrev ? 0.55 : 0)) : 1;
        let indicatorTop = -9999;
        const distance = event.clientY - targetPosition.top;
        if (distance < targetPosition.height * prevPercent) {
          dropType = 'before';
        } else if (distance > targetPosition.height * nextPercent) {
          dropType = 'after';
        } else if (dropInner) {
          dropType = 'inner';
        } else {
          dropType = 'none';
        }
        const iconPosition = dropNode.$el.querySelector('.el-tree-node__expand-icon').getBoundingClientRect();
        const dropIndicator = this.$refs.dropIndicator;
        if (dropType === 'before') {
          indicatorTop = iconPosition.top - treePosition.top;
        } else if (dropType === 'after') {
          indicatorTop = iconPosition.bottom - treePosition.top;
        }
        dropIndicator.style.top = indicatorTop + 'px';
        dropIndicator.style.left = (iconPosition.right - treePosition.left) + 'px';
        if (dropType === 'inner') {
          addClass(dropNode.$el, 'is-drop-inner');
        } else {
          removeClass(dropNode.$el, 'is-drop-inner');
        }
        dragState.showDropIndicator = dropType === 'before' || dropType === 'after';
        dragState.allowDrop = dragState.showDropIndicator || userAllowDropInner;
        dragState.dropType = dropType;
        this.$emit('node-drag-over', draggingNode.node, dropNode.node, event);
      });
      this.$on('tree-node-drag-end', (event) => {
        const { draggingNode, dropType, dropNode } = dragState;
        event.preventDefault();
        event.dataTransfer.dropEffect = 'move';
        if (draggingNode && dropNode) {
          const draggingNodeCopy = { data: draggingNode.node.data };
          if (dropType !== 'none') {
            draggingNode.node.remove();
          }
          if (dropType === 'before') {
            dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
          } else if (dropType === 'after') {
            dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
          } else if (dropType === 'inner') {
            dropNode.node.insertChild(draggingNodeCopy);
          }
          if (dropType !== 'none') {
            this.store.registerNode(draggingNodeCopy);
          }
          removeClass(dropNode.$el, 'is-drop-inner');
          this.$emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event);
          if (dropType !== 'none') {
            this.$emit('node-drop', draggingNode.node, dropNode.node, dropType, event);
          }
        }
        if (draggingNode && !dropNode) {
          this.$emit('node-drag-end', draggingNode.node, null, dropType, event);
        }
        dragState.showDropIndicator = false;
        dragState.draggingNode = null;
        dragState.dropNode = null;
        dragState.allowDrop = true;
      });
    },
    mounted() {
      this.initTabIndex();
      this.$el.addEventListener('keydown', this.handleKeydown);
    },
    updated() {
      this.treeItems = this.$el.querySelectorAll('[role=treeitem]');
      this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
    }
  };
 </script>
--- a/src/views/Transaction.vue.copy20211021
+++ b/src/views/Transaction.vue.copy20211021
@ -0,0 +1,960 @@
 <template>
  <!-- 交易类 -->
  <div class="content">
    <div class="header">
      <div>
        <i class="back el-icon-arrow-left" @click="Back()" style="cursor:pointer">
          <span>Back</span>
        </i>
        <span class="title">判分点设置</span>
      </div>
      <div>
        <el-button v-if="!isView" type="primary" size="mini" @click="saveAll">保存</el-button>
      </div>
    </div>
    <div>
      <div class="form-con">
        <div class="title">
          <div class="black"></div>
          <div>基本信息</div>
        </div>
        <div class="item">
          <div class="label">判分点名称</div>
          <el-input
              v-model.trim="formData.lcJudgmentPoint.name"
              :readonly="isView"
              @blur="handleBlur"
              placeholder="请输入内容"
              clearable
              style="width: 400px"
          ></el-input>
        </div>
        <div class="item">
          <div class="label">实验要求</div>
          <quill
              v-model="formData.lcJudgmentPoint.experimentalRequirements"
              :readonly="isView"
              :border="true"
              :minHeight="150"
              :height="150"
              style="width: 100%"
          />
        </div>
      </div>
      <div class="rule-con">
        <div class="title-con">
          <div class="title">
            <div class="black"></div>
            <div>判分规则</div>
          </div>
          <div>
            <el-button v-if="!isView" :disabled="isAddRule" type="primary" size="mini" @click="addRule">新增</el-button>
          </div>
        </div>
        <el-card shadow="hover">
          <el-table
              :data="tableData"
              :stripe="true"
              :cell-style="rowClass"
              header-align="center"
              :header-cell-style="headClass"
          >
            <el-table-column prop="indexNo" label="序号" width="80"></el-table-column>
            <el-table-column label="流程判分正确答案">
              <template slot-scope="scope" v-if="scope.row.isSubject">
                <p class="p">操作一致性规则：用户完成的功能操作与下方设置的操作点一致</p>
                <div class="tree-con">
                  <div class="block1">
                    <my-tree
                        class="action"
                        :ref="'tree-'+scope.$index"
                        :data="treeData"
                        :props="defaultProps"
                        default-expand-all
                        node-key="id"
                        show-checkbox
                        @check-change="(data, checked, indeterminate) => {
                          handleCheckChange(data, checked, indeterminate, scope.row, scope.$index);
                        }"
                    ></my-tree>
                  </div>
                  <div v-show="scope.row.isDisabled" class="mask"></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label=" " width="150">
              <template slot-scope="scope">
                <el-button
                    circle
                    type="primary"
                    v-if="scope.row.isSubject"
                    :disabled="isView || scope.row.isDisabled"
                    @click="changeResult(scope.row)"
                    style="position: absolute; right: 55px"
                >
                  {{ scope.row.resultOperation === 0 ? "且" : "或" }}
                </el-button>
                <el-button v-else type="primary" circle @click="changeRule(scope.row, scope.$index)">
                  {{ scope.row.ruleOperation === 0 ? "且" : "或" }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="交易结果正确答案">
              <template slot-scope="scope" v-if="scope.row.isSubject">
                <p class="p">交易结果一致性规则：用户交易结果需要与下面设置的交易结果指标要求一致</p>
                <div class="block">
                  <!-- type: 题目类型(1选择 2判断 3填空 4问答 5指标结果) -->
                  <template v-if="scope.row.type == 1">
                    <div class="box">
                      <div class="line">
                        <div>{{ scope.row.name }}</div>
                      </div>
                      <div class="line">
                        <span class="label mini">正确答案</span>
                        <div class="action">
                          <!--multiple:多选-->
                          <el-select
                              v-model="scope.row.value1"
                              :disabled="isView || scope.row.isDisabled"
                              size="mini"
                              style="width: 100%"
                          >
                            <el-option
                                v-for="(item, index) in scope.row.items"
                                :key="index"
                                :label="item.options"
                                :value="item.itemId"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="scope.row.type == 2">
                    <div class="box">
                      <div class="line">
                        <div>{{ scope.row.name }}</div>
                      </div>
                      <div class="line">
                        <span class="label mini">正确答案</span>
                        <div class="action">
                          <el-select
                              v-model="scope.row.value1"
                              :disabled="isView || scope.row.isDisabled"
                              size="mini"
                              style="width: 100%"
                          >
                            <el-option
                                v-for="(item, index) in scope.row.items"
                                :key="index"
                                :label="item.options"
                                :value="item.itemId"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="scope.row.type == 3">
                    <div class="box">
                      <div class="line" style="min-height: 100%;">
                        <span class="label">
                          <!--<el-checkbox v-model="scope.row.fieldOfReq" :disabled="isView || scope.row.isDisabled">字段要求</el-checkbox>-->
                          字段要求
                        </span>
                        <div class="action">
                          <el-input
                              class="mini-textarea"
                              type="textarea"
                              rows="6"
                              size="mini"
                              v-model.trim="scope.row.value1"
                              :disabled="isView || scope.row.isDisabled"
                              placeholder="字段之间以逗号隔开"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="scope.row.type == 4">
                    <div class="box">
                      <div class="line">
                        <span class="label">
                          <!--<el-checkbox v-model="scope.row.numOfWords" :disabled="isView || scope.row.isDisabled">字数要求</el-checkbox>-->
                          字数要求
                        </span>
                        <div class="action a-line">
                          <el-select
                              v-model="scope.row.value1"
                              :disabled="isView || scope.row.isDisabled"
                              size="mini"
                          >
                            <el-option label=">" value=">"></el-option>
                            <el-option label="<" value="<"></el-option>
                            <el-option label="=" value="="></el-option>
                            <el-option label=">=" value=">="></el-option>
                            <el-option label="<=" value="<="></el-option>
                            <el-option label="无限制" value="无限制"></el-option>
                          </el-select>
                          <el-input
                              class="number-input"
                              v-model.trim="scope.row.value2"
                              :disabled="isView || scope.row.isDisabled"
                              onkeyup="value=this.value.replace(/\D+/g,'')"
                              oninput="value=value.replace(/[^0-9.]/g,'')"
                              type="number"
                              min="1"
                              size="mini"
                              style="margin-left: 5px;"
                          ></el-input>
                        </div>
                      </div>
                      <div class="line">
                      <span class="label">
                        <!--<el-checkbox v-model="scope.row.fieldOfReq" :disabled="isView || scope.row.isDisabled">字段要求</el-checkbox>-->
                        字段要求
                      </span>
                        <div class="action">
                          <el-input
                              class="mini-textarea"
                              type="textarea"
                              rows="5"
                              size="mini"
                              v-model.trim="scope.row.value3"
                              :disabled="isView || scope.row.isDisabled"
                              placeholder="字段之间以逗号隔开"
                          ></el-input>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="scope.row.type == 5">
                    <div class="box">
                      <div class="line">
                        <!--
                        <span class="label">选择指标</span>
                        <div class="action">
                          <el-select
                              v-model="scope.row.value1"
                              :disabled="isView || scope.row.isDisabled"
                              size="mini"
                          >
                            <el-option
                                v-for="(item, index) in scope.row.items"
                                :key="index"
                                :label="item.options"
                                :value="item.itemId"
                            ></el-option>
                          </el-select>
                          </div>
                          -->
                        <div>{{ scope.row.name }}</div>
                      </div>
                      <div class="line">
                        <span class="label">交易指标区间</span>
                        <div class="action">
                          <div class="inputs">
                            <el-select
                                v-model="scope.row.value2"
                                :disabled="isView || scope.row.isDisabled"
                                size="mini"
                            >
                              <el-option label="(" value="("></el-option>
                              <el-option label="[" value="["></el-option>
                            </el-select>
                            <el-input
                                class="number-input"
                                v-model.trim="scope.row.value3"
                                :disabled="isView || scope.row.isDisabled"
                                type="number"
                                size="mini"
                            ></el-input>
                            <el-input
                                class="number-input"
                                v-model.trim="scope.row.value4"
                                :disabled="isView || scope.row.isDisabled"
                                type="number"
                                size="mini"
                            ></el-input>
                            <el-select
                                :disabled="isView || scope.row.isDisabled"
                                v-model="scope.row.value5"
                                size="mini"
                            >
                              <el-option label=")" value=")"></el-option>
                              <el-option label="]" value="]"></el-option>
                            </el-select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300" v-if="!isView">
              <template slot-scope="scope" v-if="scope.row.isSubject">
                <el-button v-show="scope.row.isDisabled" size="mini" type="text" @click="handleEdit(scope.row)">编辑
                </el-button>
                <el-button v-show="!scope.row.isDisabled" size="mini" type="text"
                           @click="handleSave(scope.row, scope.$index)">保存
                </el-button>
                <el-button v-show="!scope.row.isDisabled" size="mini" type="text"
                           @click="handleCancel(scope.row, scope.$index)">取消
                </el-button>
                <el-button v-show="scope.row.isDisabled" size="mini" type="text"
                           @click="handleDelete(scope.row, scope.$index)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
 </template>
 <script>
 import quill from "@/components/quill";
 import MyTree from "@/components/myTree/src/tree";
 import {deepCopy} from "@/utils/deepCopy";
 export default {
  components: {quill, MyTree},
  data() {
    return {
      lcId: "", // 流程类判分点id
      isAdd: Boolean(this.$route.query.isAdd), // 添加
      isEdit: Boolean(this.$route.query.isEdit), // 编辑
      isView: Boolean(this.$route.query.isView), // 查看
      isNameRepeat: false, // 名称是否重复
      treeData: [], // 树结构数据
      defaultProps: {
        children: "children",
        label: "name"
      }, // 树结构配置项
      currentNodeData: {}, // 当前选中的节点
      formData: {
        lcJudgmentPoint: {
          name: "",
          experimentalRequirements: "",
          isDel: 0,
          isOpen: 0,
          projectId: "",
          systemId: ""
        },
        lcJudgmentRuleList: []
      }, // 表单参数
      tableData: [], // 规则表格数据
      tableDataCopy: [], // 规则表格数据备份
      isAddRule: false // 是否禁用新增规则按钮
    };
  },
  mounted() {
    this.$route.query.token && this.$store.commit("setParam", {
      token: atob(decodeURI(this.$route.query.token))
    });
    this.getTreeData();
    if (this.$route.query.lcId) {
      this.lcId = this.$route.query.lcId;
      this.getInfoData(this.$route.query.lcId);
    }
    if (this.$route.query.systemId) {
      this.formData.lcJudgmentPoint.systemId = this.$route.query.systemId;
    }
  },
  methods: {
    getInfoData(lcId) { // 获取判分点详细信息
      this.$get(`${this.api.queryJudgmentPointDetails}?lcId=${lcId}`).then(res => {
        if (res.status === 200) {
          let {judgmentPoint, judgmentRuleList} = res;
          this.formData = {
            lcJudgmentPoint: judgmentPoint,
            lcJudgmentRuleList: judgmentRuleList
          };
          // 重新封装数据
          let length = judgmentRuleList.length;
          let tempArr = [];
          judgmentRuleList.forEach((item, index) => {
            let obj = {
              ...item,
              isSubject: true,
              isDisabled: true,  // 已禁用
              isSave: true // 已保存
            };
            //题目类型(1选择 2判断 3填空 4问答 5指标结果)
            if (item.type == 1 || item.type == 2) {
              obj.subjectId = Number(item.emptyOne);
              obj.value1 = Number(item.emptyTwo);
            } else if (item.type == 3) {
              obj.subjectId = Number(item.emptyOne);
              obj.value1 = item.emptyTwo;
            } else if (item.type == 4) {
              // 需要提目id
              if (item.emptyOne === "无限制") {
                obj.value1 = item.emptyOne;
                obj.value2 = "";
              } else {
                obj.value1 = item.emptyOne.substring(0, item.emptyOne.indexOf(","));
                obj.value2 = item.emptyOne.substring(item.emptyOne.indexOf(",") + 1, item.emptyOne.length);
              }
              obj.value3 = item.emptyTwo;
            } else if (item.type == 5) {
              obj.subjectId = Number(item.emptyOne);
              obj.value2 = item.emptyTwo[0];
              obj.value3 = item.emptyTwo.substring(1, item.emptyTwo.indexOf("~"));
              obj.value4 = item.emptyTwo.substring(item.emptyTwo.indexOf("~") + 1, item.emptyTwo.length - 1);
              obj.value5 = item.emptyTwo[item.emptyTwo.length - 1];
            }
            tempArr.push(obj);
            if (length > 1 && index !== (length - 1)) {
              tempArr.push({ruleOperation: item.ruleOperation});
            }
            this.tableData = tempArr;
          });
          this.tableData.forEach(async (item, index) => {
            // 勾选树节点
            if (item.operationIds) {
              this.$nextTick(() => {
                this.$refs[`tree-${index}`].setCheckedKeys([item.operationIds]);
              });
            }
            // 根据题目id,获取题目信息
            if (item.isSubject && item.type && item.type != 4 && item.emptyOne) {
              await this.getSubjectData(item.emptyOne, index);
            }
          });
        } else {
          this.$message.warning(res.message);
        }
      }).catch(err => {
        console.log(err);
      });
    },
    getSubjectData(subjectId, index) { // 获取题目信息
      this.$get(`${this.api.getSubjectInfo}?subject_id=${subjectId}`).then(res => {
        if (res.status === 200) {
          let item = {
            ...this.tableData[index],
            ...res.subject,
            items: res.items
          };
          this.$set(this.tableData, index, item);
          // console.log(JSON.stringify(this.tableData))
        }
      }).catch(err => {
        console.log(err);
      });
    },
    handleCheckChange(data, checked, indeterminate, row, index) { // 处理勾选
      if (checked && data.isNode === 1) {
        this.tableData[index].operationIds = data.id; // 操作id串
        row.value1 = "";
        row.value2 = "";
        row.value3 = "";
        row.value4 = "";
        row.value5 = "";
        if (data.subjectId) { // 是否有题目id
          this.currentNodeData = data;
          this.$refs[`tree-${index}`].setCheckedNodes([data]);
          this.getSubjectData(data.subjectId, index);
        } else {
          row.type = "";
          this.currentNodeData = {};
          this.$refs[`tree-${index}`].setCheckedNodes([data]);
        }
      }
    },
    getTreeData() { // 获取树结构数据
      this.$get(this.api.getLcRecord).then(res => {
        if (res.status === 200 && res.list) {
          if (res.list.length) {
            this.treeData = this.toTreeId(res.list, res.list[0].parentId);
          }
        } else {
          this.$message.warning(res.message);
        }
      }).catch(err => {
        console.log(err);
      });
    },
    toTreeId(data, parentId) { // id重新串连成（父+子+孙）,已便达到树节点需要的key唯一性,且后面提交数据，需要传这个id串到后台
      let result = [];
      data.forEach(item => {
        if (item.isNode === 0) {
          item.disabled = true;
          item.showCheckbox = false;
        } else {
          item.showCheckbox = true;
        }
        if (item.children && item.children.length) {
          item.id = `${parentId},${item.id}`;
          item.children = this.toTreeId(item.children, item.id);
        } else {
          item.id = `${parentId},${item.id}`;
        }
        result.push(item);
      });
      return result;
    },
    Back() { // 返回
      this.$router.back();
    },
    handleBlur() { // 新增/编辑判分点名称判重
      if (this.formData.lcJudgmentPoint.name) {
        let params = {
          lcId: this.lcId,
          name: this.formData.lcJudgmentPoint.name
        };
        this.$post(this.api.queryNameIsExist, params).then(res => {
          if (res.status === 200) {
            this.isNameRepeat = false;
          } else {
            this.isNameRepeat = true;
          }
        }).catch(err => {
          console.log(err);
        });
      }
    },
    saveAll() { // 保存判分点
      if (!this.formData.lcJudgmentPoint.name) {
        this.$message.warning(`判分点名称不能为空`);
        return;
      }
      if (this.isNameRepeat) {
        this.$message.warning(`当前判分点名称已存在`);
        return;
      }
      if (!this.formData.lcJudgmentPoint.experimentalRequirements) {
        this.$message.warning(`实验要求不能为空`);
        return;
      }
      if (!this.tableData.length) {
        this.$message.warning(`请添加判分规则`);
        return;
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].isSubject && !this.tableData[i].operationIds) {
            this.$message.warning(`第${i + 1}项请选择操作点`);
            return;
          } else if (this.tableData[i].isSubject && !this.tableData[i].isSave) {
            this.$message.warning(`第${i + 1}项，未保存`);
            return;
          }
        }
      }
      let tempArr = [];
      this.tableData.forEach(i => {
        if (i.isSubject) {
          let obj = {
            emptyOne: "",
            emptyTwo: "",
            id: i.id ? i.id : "",
            lcId: i.lcId,
            type: i.type ? i.type : "",
            operationIds: i.operationIds,
            resultOperation: i.resultOperation,
            ruleOperation: i.ruleOperation
          };
          //题目类型(1选择 2判断 3填空 4问答 5指标结果)
          if (i.type == 1 || i.type == 2) {
            obj.emptyOne = i.subjectId ? i.subjectId.toString() : "";
            obj.emptyTwo = i.value1 ? i.value1.toString() : "";
          } else if (i.type == 3) {
            obj.emptyOne = i.subjectId ? i.subjectId.toString() : "";
            obj.emptyTwo = i.value1;
          } else if (i.type == 4) {
            if (i.value1 === "无限制") {
              obj.emptyOne = i.value1;  // 问答题,传的不是题目id
            } else if (i.value1 && i.value2) {
              obj.emptyOne = `${i.value1},${i.value2}`;  // 问答题,传的不是题目id
            }
            obj.emptyTwo = i.value3;
          } else if (i.type == 5) {
            // obj.emptyOne = i.value1; // 选择指标不传
            obj.emptyOne = i.subjectId ? i.subjectId.toString() : "";
            obj.emptyTwo = `${i.value2}${i.value3}~${i.value4}${i.value5}`;
          }
          tempArr.push(obj);
        }
      });
      this.formData.lcJudgmentRuleList = tempArr;
      if (this.isAdd) { // 新增判分点
        this.$post(this.api.addJudgmentPoint, this.formData).then(res => {
          if (res.status === 200) {
            this.$message.success("新增判分点成功");
            this.Back();
          } else {
            this.$message.warning(res.message);
          }
        }).catch(err => {
          console.log(err);
        });
      } else if (this.isEdit) { // 编辑判分点
        this.$post(this.api.updateJudgmentPoint, this.formData).then(res => {
          if (res.status === 200) {
            this.$message.success("更新判分点成功");
            this.Back();
          } else {
            this.$message.warning(res.message);
          }
        }).catch(err => {
          console.log(err);
        });
      }
    },
    addRule() { // 新增规则
      this.isAddRule = true;
      this.tableData.length && this.tableData.push({ruleOperation: 0, indexNo: ""});
      this.tableData.push({
        indexNo: this.tableData.length ? parseInt(this.tableData.length/2)+1 : 1,
        isSubject: true,
        isDisabled: false, // 不禁用
        isSave: false, // 未保存
        lcId: this.lcId,
        resultOperation: 0,
        ruleOperation: 0,
        operationIds: "",
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: ""
      });
    },
    changeResult(row) { // （左右）结果运算符(0：且 1：或 默认0)
      row.resultOperation = row.resultOperation === 0 ? 1 : 0;
    },
    changeRule(row, index) { // （上下）规则运算符(0：且 1：或 默认0)
      row.ruleOperation = row.ruleOperation === 0 ? 1 : 0;
      this.tableData[index - 1].ruleOperation = row.ruleOperation;
    },
    handleEdit(row) { // 处理编辑规则
      this.tableDataCopy = deepCopy(this.tableData); // 深拷贝
      row.isDisabled = false;
      row.isSave = false;
    },
    handleSave(row, index) { // 处理保存规则
      let keys = this.$refs[`tree-${index}`].getCheckedKeys();
      if (!keys.length || !row.operationIds) {
        this.$message.warning(`请选择操作点`);
        return;
      } else {
        //题目类型(1选择 2判断 3填空 4问答 5指标结果)
        if (row.type == 1 || row.type == 2) {
          if (!row.value1) {
            this.$message.warning(`请选择正确答案`);
            return;
          }
        } else if (row.type == 3) {
          if (!row.value1) {
            this.$message.warning(`请输入字段要求`);
            return;
          }
        } else if (row.type == 4) {
          if (!row.value1) {
            this.$message.warning(`请选择字数要求`);
            return;
          } else if (row.value1 !== "无限制" && !row.value2) {
            this.$message.warning(`请输入字数要求`);
            return;
          } else if (!row.value3) {
            this.$message.warning(`请输入字段要求`);
            return;
          }
        } else if (row.type == 5) {
          if (!row.value2 || !row.value5) {
            this.$message.warning(`请选择交易指标区间`);
            return;
          } else if (!row.value3 || !row.value4) {
            this.$message.warning(`请输入交易指标区间`);
          } else if (row.value3 > row.value4) {
            this.$message.warning(`第一个指标必须小于第二个指标`);
            return;
          }
        }
      }
      row.isSave = true;
      row.isDisabled = true;
      this.isAddRule = false;
    },
    handleCancel(row, index) { // 处理取消编辑规则
      if (row.isSave) {
        this.$set(this.tableData, index, this.tableDataCopy[index]);
        if (!this.tableData[index].operationIds) {
          this.$refs[`tree-${index}`].setCheckedKeys([]);
        } else {
          this.$refs[`tree-${index}`].setCheckedKeys([this.tableData[index].operationIds]);
        }
      } else {
        this.tableData.splice(index, 1);
        index ? this.tableData.splice(index - 1, 1) : this.tableData.splice(0, 1);
        this.isAddRule = false;
      }
    },
    handleDelete(row, index) { // 处理删除规则
      this.$confirm("此操作将永久删除该规则, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.tableData.splice(index, 1);
        index ? this.tableData.splice(index - 1, 1) : this.tableData.splice(0, 1);
        this.isAddRule = false;
      }).catch(() => {
      });
    },
    // 表头样式设置
    headClass() {
      return "text-align: center;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    }
  }
 };
 </script>
 <style lang="scss" scoped>
 .content {
  position: relative;
  top: 10px;
  padding: 0 10px;
  background-color: #ffffff;
  .header {
    border-bottom: 1px dashed #ccc;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    .back {
      line-height: 3;
      padding-left: 10px;
      span {
        font-size: 14px;
        font-weight: 600;
        padding-left: 5px;
      }
    }
    .title {
      font-weight: bold;
      margin-left: 20px;
    }
  }
  // 表单容器
  .form-con {
    padding-bottom: 24px;
    border-bottom: 1px dashed #ccc;
    .title {
      padding: 10px 0;
      border-bottom: 1px dashed #ccc;
      display: flex;
      .black {
        width: 8px;
        height: 18px;
        background-color: #333;
        margin-right: 10px;
      }
    }
    .item {
      display: flex;
      margin-top: 24px;
      .label {
        width: 200px;
        text-align: right;
        padding-right: 20px;
        line-height: 35px;
      }
    }
  }
  // 规则容器
  .rule-con {
    padding-bottom: 60px;
    .title-con {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        display: flex;
        .black {
          width: 8px;
          height: 18px;
          background-color: #333;
          margin-right: 10px;
        }
      }
    }
  }
 }
 // 滚动条的宽度
 /deep/ ::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
 }
 // 滚动条的滑块
 /deep/ ::-webkit-scrollbar-thumb {
  background-color: #9278ff;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px #dddddd;
 }
 /deep/ ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #dddddd;
  border-radius: 0;
  background: #dddddd;
 }
 .tree-con {
  height: 230px;
  position: relative;
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    cursor: not-allowed;
    z-index: 99999;
  }
 }
@mixin block {
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
 }
 .block1 {
  @include block;
  height: 230px;
  background-color: #fff;
  overflow: auto;
 }
 .block {
  @include block;
  min-height: 100px;
  background-color: #fff;
  overflow: auto;
  .box {
    padding: 0 24px;
  }
  .line {
    display: flex;
    align-items: center;
    margin: 12px 0;
    .label {
      //width: 100px;
      margin-right: 10px;
      text-align: right;
      font-size: 12px;
      &.mini {
        width: auto;
      }
    }
    .action {
      flex: 1;
      text-align: left;
      /deep/ .el-input {
        width: 100%;
      }
      &.steps {
        @include block;
        display: inline-flex;
        flex-direction: column;
        height: 150px;
        font-size: 12px;
        overflow: auto;
        .radio-wrap {
          display: flex;
          flex-direction: column;
          .child {
            display: flex;
            flex-direction: column;
            margin-left: 15px;
          }
          /deep/ .el-radio {
            margin: 3px 0;
          }
        }
      }
      .inputs {
        display: flex;
        align-items: center;
        /deep/ .el-input {
          width: 100px;
          margin: 0 5px;
          &:first-child {
            margin-left: 0;
          }
        }
      }
      &.a-line {
        display: inline-flex;
      }
      .mini-textarea,
      /deep/ .mini-textarea .el-textarea__inner {
        width: 100%;
      }
      .number-input {
        /deep/ .el-input__inner {
          padding-right: 0;
        }
      }
    }
  }
 }
 </style>