vuetify tree diy

屏幕快照 2019-04-13 下午7.35.07.png

找不到合适的工作，弄完这个就去开出租车糊口了。

对于一个40多半路出家，学了7、8年的伪码农，接触vue一个月了，感觉进度很慢，把代码记下来备忘，有很多不足的地方等有时间再优化下。

基础差，花了大半天google了关于vuetify treevie的例子，在跟服务取数据添充时总是出错，youtube上看了毛子的例子，还是不会用，没办法回到vue，油管上看了一个排在前边的，花了不到20分钟，样式是看懂了，没有添加删除节点的代码，第二天花了一天时间才把这个组件弄完，包括跟后端交互。

treeview.vue

<template>
  <ul>
    <li v-ripple>
      <v-layout align-center justify-start row fill-height>
        <v-icon left>{{ icon }}</v-icon>
        <label @click="toggle">{{ node.name }}</label>
        <v-spacer></v-spacer>
        <v-btn v-show="!hasChildren&&!noRoot" @click="deleteClicked">删除</v-btn>
        <v-btn v-show="!noRoot" @click="editClicked">编辑</v-btn>
        <v-btn @click="appendClicked">添加下级</v-btn>
      </v-layout>
    </li>
    <ul v-if="open">
      <tree-view
        v-for="(child,index) in node.children"
        :key="index"
        :node="child"
        :depth="depth + 1"
        @onDeleteClick="(node)=>$emit('onDeleteClick',node)"
        @onEditClick="(node)=>$emit('onEditClick',node)"
        @onAppendClick="(node)=>$emit('onAppendClick',node)"
      ></tree-view>
    </ul>
  </ul>
</template>
<script>
export default {
  name: "tree-view",
  data() {
    return {
      open: true
    };
  },
  props: {
    node: Object,
    depth: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // 判断是否根结点，不显示 删除 编辑 按钮
    noRoot(){
      return this.node.name==='root'
    },
    // 是否有子结点 显示不同的图标
    hasChildren() {
      return this.node.children && this.node.children.length;
    },
    // 图标
    icon() {
      return this.hasChildren
        ? this.open
          ? "arrow_drop_down"
          : "arrow_right"
        : "note";
    }
  },
  methods: {
    // 三个操作结点的事件
    deleteClicked() {
      if (!this.hasChildren) {
        this.$emit("onDeleteClick", this.node);
      }
    },
    editClicked(){
        this.$emit("onEditClick", this.node);
    },
    appendClicked(){
        this.open = true
        this.$emit("onAppendClick", this.node);
    },
    // 打开关闭节点
    toggle() {
      if (this.hasChildren) {
        this.open = !this.open;
        return;
      }
    },
  }
};
</script>
<style>
ui,
li {
  list-style: none;
}
</style>

调用

<template>
  <div>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>

        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm12 md12>
                <v-text-field label="上级分类" v-model="editedItem.parent.name" disabled></v-text-field>
              </v-flex>
              <v-flex xs12 sm12 md12>
                <v-text-field v-model="editedItem.name" label="名称"></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
          <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <tree-view
      :node="tree"
      @onDeleteClick="nodeDeleteClick"
      @onAppendClick="nodeAppendClick"
      @onEditClick="nodeEditClick"
    ></tree-view>
  </div>
</template>
<script>
import TreeView from "../../components/TreeView";
import instance from "../../axios";
export default {
  data() {
    return {
      tree: {}, 
      dialog: false,
      editfield: false,
      formTitle: "添加分类",
      targetItem: {},
      editedItem: {
        id: 0,
        name: "",
        p_id: 0,
        children: [],
        parent: { name: "" }
      },
      defaultItem: {
        id: 0,
        name: "",
        p_id: 0,
        children: [],
        parent: { name: "" }
      }
    };
  },
  created() {
    this.getmessagetype();
  },
  methods: {
    // 删除操作
    nodeDeleteClick(node) {
      if (confirm("确认要删除此条记录吗？")) {
        instance({
          method: "delete",
          url: "/api/v1/admin/messagetype/" + node.id
        }).then(response => {
          if (response.data.code > 0) {
            this.changetree(node, this.tree, null, "delete");
          } else {
            alert(response.data.msg);
          }
        });
      }
    },
    // 打开编辑对话框
    nodeEditClick(node) {
      this.editfield = true;
      this.targetItem = node;
      this.editedItem = { id: node.id, name: node.name, p_id: node.p_id };
      this.editedItem.parent = this.getparent(node, this.tree);
      this.dialog = true;
    },
    // 打开添加对话框
    nodeAppendClick(node) {
      this.editfield = false;
      this.targetItem = node;
      this.editedItem.parent = node;
      this.dialog = true;
    },
    // 后端取得树结构数据
    getmessagetype() {
      instance({
        method: "get",
        url: "/api/v1/admin/messagetype"
      }).then(response => {
        if (response.data.code > 0) {
          this.tree = response.data.data;
        } else {
          alert(response.data.msg);
        }
      });
    },
    // 关闭对话框
    close() {
      Object.assign(this.editedItem, this.defaultItem);
      this.dialog = false;
    },
    // 保存
    save() {
      if (!this.editfield) {
        // 添加
        let data = {
          name: this.editedItem.name,
          pid: this.editedItem.parent.id
        };
        instance({
          method: "post",
          url: "/api/v1/admin/messagetype",
          data
        }).then(response => {
          if (response.data.code == 200) {
            this.changetree(
              this.targetItem,
              this.tree,
              {
                id: response.data.data.id,
                name: response.data.data.name,
                p_id: response.data.data.p_id
              },
              "append"
            );
          } else {
            alert(response.data.msg);
          }
        });
      } else {
        // 编辑
        let data = {
          id: this.editedItem.id,
          name: this.editedItem.name,
          pid: this.editedItem.parent.id
        };
        instance({
          method: "put",
          url: "/api/v1/admin/messagetype",
          data
        }).then(response => {
          if (response.data.code == 200) {
            this.targetItem.name = response.data.data.name;
          } else {
            alert(response.data.msg);
          }
        });
      }

      this.close();
    },
    // 从树结构中查找结定结点的父结点
    getparent(node, tree) {
      if (tree.children) {
        for (let i = 0; i < tree.children.length; i++) {
          if (tree.children[i].id == node.id) {
            return tree;
          }
        }
        for (let i = 0; i < tree.children.length; i++) {
          let p = this.getparent(node, tree.children[i]);
          if (p != null) {
            return p;
          }
        }
      }
      return null;
    },
    // 添加 或 删除 结点
    changetree(node, tree, newnode, methed) {
      // 判断根结点匹配
      if (node.id == tree.id) {
        if (methed == "append") {
          if (!tree.children) {
            this.$set(tree, "children", []);
          }
          tree.children.push({
            id: newnode.id,
            name: newnode.name,
            p_id: node.id
          });
          return true;
        }
      }
      // 判断子节点匹配
      if (tree.children && tree.children.length) {
        let found = false;
        for (let i = 0; i < tree.children.length; i++) {
          if (node.id !== tree.children[i].id) {
            continue;
          }
          found = true;
          if (methed == "append") {
            if (!tree.children[i].children) {
              this.$set(tree.children[i], "children", []);
            }
            tree.children[i].children.push({
              id: newnode.id,
              name: newnode.name,
              p_id: node.id
            });
            return found;
          } else if (methed == "delete") {
            tree.children.splice(i, 1);
            return found;
          } else {
            return found;
          }
        }
        if (!found) {
          // 递归匹配
          for (let i = 0; i < tree.children.length; i++) {
            if (!tree.children[i].children) {
              continue;
            }
            found = this.changetree(node, tree.children[i], newnode, methed);
            if (found) {
              return found;
            }
          }
        }
        return found;
      }
    }
  },
  components: {
    TreeView
  }
};
</script>

修改组件回传的节点可以直接修改节点。