7-22作业: 第一部分左边的树状图crud实现

src/api/treeAndTable.js

@@ -0,0 +1,49 @@
+import request from '@/utils/axios'
+
+let base = '/treeAndTable/'
+
+let url = {
+    'Dept': base + 'dept/',
+}
+
+// 获取dept数据
+export function getDeptData(parent) {
+    return request({
+        url: url.Dept,
+        method: 'get',
+        params: parent
+    })
+}
+
+// 删除接口
+export function deleteDeptData(id) {
+    return request({
+        url: url.Dept,
+        method: 'delete',
+        params: id
+    })
+}
+
+/**
+ * 更新接口
+ * 参数要有id和name
+ */
+export function putDeptData(data) {
+    return request({
+        url: url.Dept,
+        method: 'put',
+        data
+    })
+}
+
+/**
+ * 新增接口
+ * 参数要有一个id和name
+ */
+export function postDeptData(data) {
+    return request({
+        url: url.Dept,
+        method: 'post',
+        data
+    })
+}

src/router/index.js

@@ -24,6 +24,11 @@ export const constantRoutes = [
         name: 'treeWork',
         title: 'Tree树形控件',
         component: () => import('@/views/treeDemo/tree')
+    }, {
+        path: '/treeandtable',
+        name: 'treeAndTable',
+        title: '7-22作业',
+        component: () => import('@/views/treeAndTable/tree_and_table')
     }
 ]
 

src/views/treeAndTable/components/tree.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <el-tree
+      :data="data"
+      lazy
+      node-key="id"
+      :load="loadNode"
+      :props="props"
+      :expand-on-click-node="false"
+      ref="treeRef"
+    >
+      <span slot-scope="{ node, data }">
+        <span>{{ data.name }}</span>
+        <span>
+          <el-button type="text" size="mini" @click.stop.prevent="append(node,data)">新增</el-button>
+          <el-button type="text" size="mini" @click.stop.prevent="replace(node, data)">修改</el-button>
+          <el-button type="text" size="mini" @click.stop.prevent="remove(node, data)">删除</el-button>
+        </span>
+      </span>
+    </el-tree>
+    <el-dialog :title="dialog.title" :visible="dialog.visible" @close="handleCancel">
+      <el-form :model="dialog" label-width="120px" ref="form">
+        <el-form-item label="名字" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" prop="name">
+          <el-input v-model="dialog.name" />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmitHandle">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getDeptData,
+  postDeptData,
+  putDeptData,
+  deleteDeptData,
+} from "@/api/treeAndTable";
+export default {
+  name: "tree_and_table_left_tree",
+  data() {
+    return {
+      props: {
+        children: "childList",
+        // eslint-disable-next-line no-unused-vars
+        isLeaf: (data, node) => this.isChi(data),
+      },
+      data: [],
+      dialog: {
+        title: "",
+        visible: false,
+        name: "",
+        id: -1,
+        parentId: -1,
+      },
+      parentNode: {},
+    };
+  },
+  methods: {
+    // 处理后端传来的参数  是否有孩子节点和前端的是否为叶子节点判断相反
+    isChi: function (data) {
+      return data.has_leaf;
+    },
+    // 新增按钮
+    append: function (node, data) {
+      this.parentNode = node;
+      this.dialog.title = "新增";
+      this.dialog.visible = true;
+      this.id = -1;
+      this.dialog.parentId = data.id;
+    },
+    // 修改按钮
+    replace: function (node, data) {
+      this.parentNode = node;
+      this.dialog.title = "编辑";
+      this.dialog.name = data.name;
+      this.dialog.id = data.id;
+      this.dialog.visible = true;
+    },
+    // 删除按钮
+    remove: function (node, data) {
+      deleteDeptData({
+        id: data.id,
+        // eslint-disable-next-line no-unused-vars
+      }).then((res) => {
+        this.$message({
+          message: "删除成功",
+          type: "warning",
+        });
+      });
+    },
+    // 加载子树数据的方法
+    loadNode: function (node, resolve) {
+      getDeptData({
+        parent: node.data.id,
+      }).then((res) => {
+        const treeData = res.data;
+        if (node.level === 0) {
+          return resolve(treeData);
+        } else {
+          node.data.childList = treeData;
+          return resolve(treeData);
+        }
+      });
+    },
+    // 弹窗的取消按钮
+    handleCancel: function () {
+      this.dialog.name = "";
+      this.dialog.visible = false;
+    },
+    // 弹窗的确定按钮
+    dataFormSubmitHandle: function () {
+      if (this.dialog.id == -1) {
+        postDeptData({
+          id: this.dialog.parentId,
+          name: this.dialog.name,
+        }).then((res) => {
+          this.$message({
+            message: "新增成功",
+            type: "success",
+          });
+          res.data.has_leaf = true;
+          // 新增时要修改父类属性，它不再是末节点
+          this.$nextTick(() => {
+            this.parentNode.isLeaf = false;
+          });
+          // 实时渲染
+          this.$refs.treeRef.append(res.data, this.parentNode);
+        });
+        this.dialog.name = "";
+        this.dialog.visible = false;
+      } else {
+        putDeptData({
+          id: this.dialog.id,
+          name: this.dialog.name,
+        }).then((res) => {
+          console.log(res);
+          this.$message({
+            message: "更新成功",
+            type: "success",
+          });
+        });
+        this.dialog.name = "";
+        this.dialog.visible = false;
+      }
+    },
+  },
+};
+</script>

src/views/treeAndTable/tree_and_table.vue

@@ -1,6 +1,8 @@
 <template>
   <el-container style="height:900px;border: 5px solid #eee">
-    <el-aside width="20%"></el-aside>
+    <el-aside width="25%">
+      <tree style="height:300px"></tree>
+    </el-aside>
     <el-container>
       <el-main>
         <el-tabs value="people" type="border-card">
@@ -13,9 +15,13 @@
 </template>
 
 <script>
+import tree from "@/views/treeAndTable/components/tree";
+
 export default {
   name: "tree_table",
-  components: {},
+  components: {
+    tree,
+  },
   data() {
     return {};
   },