# Tree 树

<template>
  <w-tree
    :data="data"
    :props="defaultProps"
    highlight-current
    @node-click="handleNodeClick">
  </w-tree>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
        label: '安徽省',
        children: [{
          label: '安徽医科大学附属医院',
          children: [{
            label: '心内科'
          }]
        }]
      }, {
        label: '上海市',
        children: [{
          label: '上海第六人民医院',
          children: [{
            label: '口腔科'
          }]
        }, {
          label: '上海龙华医院',
          children: [{
            label: '外科'
          }]
        }]
      }, {
        label: '湖南省',
        children: [{
          label: '湖南省人民医院',
          children: [{
            label: '发热科'
          }]
        }, {
          label: '湖南省儿童医院',
          children: [{
            label: '小儿内科'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}
</script>

<template>
  <w-tree
    :props="defaultProps"
    :load="loadNode"
    lazy
    show-checkbox
    @check-change="handleCheckChange">
  </w-tree>
</template>
<script>
export default {
  data () {
    return {
      defaultProps: {
        label: 'name',
        children: 'zones'
      },
      count: 1
  },
  }
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '区域一(region1)' }, { name: '区域二(region2)' }]);
      }
      if (node.level > 3) return resolve([]);

      var hasChild;
      if (node.data.name === '区域一(region1)') {
        hasChild = true;
      } else if (node.data.name === '区域二(region2)') {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }

      setTimeout(() => {
        var data;
        if (hasChild) {
          data = [{
            name:`地区(${this.count++})`
          }, {
            name: `地区(${this.count++})`
          }];
        } else {
          data = [];
        }

        resolve(data);
      }, 500);
    }
  }
}
</script>

<template>
  <w-tree
    :props="props1"
    :load="loadNode1"
    lazy
    show-checkbox>
  </w-tree>
</template>
<script>
export default {
  data () {
    return {
        props1: {
          children: 'children',
          label: 'label'
        }
      },
    },
    methods: {
      loadNode1(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500);
      }
    }
}
</script>

<template>
  <w-tree
    :data="data2"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5]"
    :props="defaultProps">
  </w-tree>
</template>
<script>
export default {
  data () {
    return {
      data2: [{
          id: 1,
          label: '安徽省',
          children: [{
            id: 4,
            label: '合肥市',
            children: [{
              id: 9,
              label: '省立医院'
            }, {
              id: 10,
              label: '安医大第一附属医院'
            }]
          }]
        }, {
          id: 2,
          label: '上海市',
          children: [{
            id: 5,
            label: '第六人民医院'
          }, {
            id: 6,
            label: '上海大华医院'
          }]
        }, {
          id: 3,
          label: '重庆市',
          children: [{
            id: 7,
            label: '重庆市三峡中心医院'
          }, {
            id: 8,
            label: '重庆市儿童医院'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
    },
  }
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}
</script>

<template>
  <w-tree
    :data="data3"
    show-checkbox
    ref="tree"
    node-key="id"
    :default-expanded-keys="[1,7]"
    :default-checked-keys="[2]"
  >
  </w-tree>
</template>
<script>
export default {
  data () {
    return {
        data3: [
          {
            id: 1,
            label: "CT",
            selectable: false, // 选项不可选
            children: [
              {
                id: 2,
                label: "平扫CT"
              },
              {
                id: 3,
                label: "增强CT扫描",
                selectable: false
              }
            ]
          },
          {
            id: 4,
            label: "MRI",
            selectable: false,
            children: [
              {
                id: 5,
                label: "中枢神经系统"
              },
              {
                id: 6,
                label: "膀胱",
                selectable: false
              }
            ]
          },
          {
            id: 7,
            label: "B超",
            selectable: false,
            children: [
              {
                id: 8,
                label: "肝、胆囊、胆管"
              },
              {
                id: 9,
                label: "胃、肠",
                disabled: true // 选项被禁用
              },
              {
                id: 10,
                label: "眼睛"
              }
            ]
          }
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
    },
  }
}
</script>

<template>
  <div class="custom-tree-container">
    <div class="block">
      <p>使用 render-content</p>
      <w-tree
        :data="data4" show-checkbox
        node-key="id" default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent">
      </w-tree>
    </div>
    <div class="block">
      <p>使用 scoped slot</p>
      <w-tree
        :data="data5" show-checkbox
        node-key="id" default-expand-all
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <w-button
              type="text" size="mini"
              @click="() => append(data)">
              Append
            </w-button>
            <w-button
              type="text" size="mini"
              @click="() => remove(node, data)">
              Delete
            </w-button>
          </span>
        </span>
      </w-tree>
    </div>
  </div>
</template>
<script>
export default {
  data () {
  const data = [
        {
        label: '特别关注',
        children: [{
          label: '今日挂号管理',
          children: [{
            label: '专家挂号'
          }]
        }]
      }, {
        label: '工作中心',
        children: [{
          label: '今日就诊',
          children: [{
            label: '就诊人数统计'
          }]
        }, {
          label: '已就诊',
          children: [{
            label: '复诊人数管理'
          }]
        }]
      }, {
        label: '个人设置',
        children: [{
          label: '基础设置',
          children: [{
            label: '用户密码'
          }]
        }, {
          label: '业务设置',
          children: [{
            label: '排班管理'
          }]
        }]
      }];

    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data4: JSON.parse(JSON.stringify(data)),
      data5: JSON.parse(JSON.stringify(data))
  },
  }
  methods: {
    append(data) {
      const newChild = { label: 'testtest', children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.label === data.label);
      children.splice(index, 1);
    },

    renderContent(h, { node, data, store }) {
        const isFile = !node.childNodes.length
        const iconName = isFile ? 'w-icon-user' : node.expanded ? 'w-icon-pdf-solid'  : 'w-icon-pdf'
        return (
          <span class="custom-tree-node1
                  <span>
                      <i class={['w-tree__icon', iconName]}></i>
                      <span>{node.label}</span>
                  </span>
                  <span class="button">
                      <w-button size="mini" type="text" on-click={ () => this.append(data) }>Append</w-button>
                      <w-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</w-button>
                  </span>
          </span>
        );
      }
  }
}
</script>

<template>
  <div class="tree-search">
    <w-input
      placeholder="请输入内容"
      v-model="filterText"
      suffix-icon="w-icon-search"
      @input="handleInputChange"
    >
    </w-input>

    <w-tree
      class="filter-tree"
      :data="data2"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree2"
    >
    </w-tree>
  </div>
</template>
<script>
export default {
  data () {
    return {
      filterText: '',
      data2: [
        {
          id: 1,
          label: '特别关心',
          children: [
            {
              id: 4,
              label: '挂号管理',
              children: [
                {
                  id: 9,
                  label: '专家挂号'
                },
                {
                  id: 10,
                  label: '普通挂号'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '工作中心',
          children: [
            {
              id: 5,
              label: '今日就诊'
            },
            {
              id: 6,
              label: '已就诊'
            }
          ]
        },
        {
          id: 3,
          label: '个人中心',
          children: [
            {
              id: 7,
              label: '排班管理'
            },
            {
              id: 8,
              label: '密码设置'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1
    },
    handleInputChange(val) {
      this.$refs.tree2.filter(val);
    }
  }
}
</script>
<style lang="scss" scoped>
.tree-search {
  width: 500px;
  .w-input {
    margin-bottom: 15px;
  }
}
</style>

<template>
  <w-tree
    :data="data"
    :props="defaultProps"
    accordion
    @node-click="handleNodeClick">
  </w-tree>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
        label: '产品管理',
        children: [{
          label: '日活管理',
          children: [{
            label: '异常报告'
          }]
        }]
      }, {
        label: '活动策划',
        children: [{
          label: '营销活动策划方案',
          children: [{
            label: '实体医院走访'
          }]
        }, {
          label: '线上展销计划',
          children: [{
            label: '基础药房对接'
          }]
        }]
      }, {
        label: '系统配置',
        children: [{
          label: '基础设置',
          children: [{
            label: '人员管理'
          }]
        }, {
          label: '业务管理',
          children: [{
            label: '底层业务设置'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
  },
  }
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}
</script>

<template>
  <w-tree
    :data="data6"
    node-key="id"
    default-expand-all
    draggable
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    @node-drag-start="handleDragStart"
    @node-drag-enter="handleDragEnter"
    @node-drag-leave="handleDragLeave"
    @node-drag-over="handleDragOver"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"
  >
  </w-tree>
</template>
<script>
export default {
  data () {
    return {
      data6: [
        {
          id: 1,
          label: "目录一(level-1)",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "目录二(level-1)",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "目录三(level-1)",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2",
              children: [
                {
                  id: 11,
                  label: "三级 3-2-1"
                },
                {
                  id: 12,
                  label: "三级 3-2-2"
                },
                {
                  id: 13,
                  label: "三级 3-2-3"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    },
    methods: {
      handleDragStart(node, ev) {
        console.log("drag start", node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log("tree drag enter: ", dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log("tree drag leave: ", dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log("tree drag over: ", dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log("tree drag end: ", dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log("tree drop: ", dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === "二级 3-1") {
          return type !== "inner";
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
      }
    }
  }
</script>