Merge branch 'master' of ssh://192.168.20.39:29418/LFWEB

王旭

2022-10-12 410facfa35a29a14f2dc5a5d74629a8291148aff

 src/components/catalogueTree.vue

@@ -1,10 +1,5 @@
<template>
  <div class="wrap">
    <div class="bread">
      <el-breadcrumb separator="el-icon-arrow-right">
        <el-breadcrumb-item>{{ breadLabel }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="treeBox">
      <el-tree
        ref="tree"
@@ -15,12 +10,11 @@
        :default-expanded-keys="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
        :draggable="draggable"
        @node-drag-start="handleDragStart"
        @node-click="handleNodeClick"
        @node-drop="handleDrop"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="btnBox" v-show="showEdit">
          <span class="btnBox">
            <el-button type="text" size="mini" @click="() => append(data)">
              <i class="el-icon-circle-plus"></i>
            </el-button>
@@ -34,10 +28,8 @@
          </span>
        </span>
      </el-tree>
      <!-- <div style="margin-left:130px;">
        <el-button @click="sendChange">保存</el-button>
      </div> -->
    </div>
    <button @click="sendChange">保存</button>
  </div>
</template>

@@ -45,25 +37,20 @@
import {
  queryDirTree,
  queryMaxId,
  updateDirTree,
  deleteDirTree,
  updateDirTrees,
  // deleteDirTree,
} from "../api/api";
export default {
  name: "catalogueTree",
  props: ["showBtn"],
  data() {
    return {
      draggable: false,
      draggable: true,
      id: null,
      showEdit: false,
      showBread: false,
      oriData: [], //原始树数据
      dirData: [], //el树数据
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      breadList: [], //面包屑数组
      breadLabel: "", //面包屑文字
      filterText: "",
      defaultProps: {
        children: "children",
        label: "name",
@@ -75,17 +62,16 @@
    // 请求目录树
    getDirTree() {
      //获取目录树最大ID，新建节点使用
      queryMaxId().then((res) => {
        this.id = res.data;
      });
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      // 获取目录树数据
      queryDirTree().then((res) => {
        // console.log(res);
        if (res.status == 200) {
          this.oriData = res.data;
          this.newData = res.data;
          this.dirData = this.treeData(res.data);
          // console.log(this.treeData(this.dirData));
        if (res.code == 200) {
          this.oriData = res.result;
          this.newData = res.result;
          this.dirData = this.treeData(res.result);
        } else {
          console.log("接口报错");
        }
@@ -99,7 +85,7 @@
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
        // 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
        // 由此循环多次后，就能形成相应的树形数据结构
        return father.pid == -1; // 返回一级菜单
        return father.pid == 0; // 返回一级菜单
      });
    },
    append(data) {
@@ -113,7 +99,7 @@
            name: value,
            pid: data.id,
            // children: [],
            oid: data.children ? data.children.length + 1 : 1,
            orderNum: data.children ? data.children.length + 1 : 1,
          };
          this.id = newChild.id; //修改新的最大I
          console.log(newChild);
@@ -123,7 +109,7 @@
          }
          data.children.push(newChild);
          this.newData.push(newChild);
          this.sendChange();
          // this.sendChange();
        })
        .catch(() => {
          this.$message({
@@ -147,7 +133,7 @@
          for (var i in res) {
            std.push(res[i].id);
          }
          deleteDirTree(std);
          // deleteDirTree(std);
          this.getDirTree();
          this.$message({
            type: "success",
@@ -185,73 +171,39 @@
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleNodeClick(data) {
      // console.log(data);
      this.$store.commit("changeNode", data);
      this.breadList = [];
      this.getTreeNode(this.$refs.tree.getNode(data.id));
    },
    getTreeNode(node) {
      if (node && node.label) {
        this.breadList.unshift(node.label);
        this.getTreeNode(node.parent); //递归
        this.breadLabel = this.breadList.join(">");
        this.$store.commit("changeCata", this.breadLabel);
      }
    },
    handleDragStart(node, ev) {
      this.old_dirDat = JSON.parse(JSON.stringify(this.dirData)); //将备份的dir重新赋值
    },

    handleDrop(draggingNode, dropNode, dropType, ev) {
      // console.log("被拖拽节点", draggingNode);
      // console.log("进入的节点", dropNode);
      // console.log("放置位置", dropType);
      // console.log("事件", ev);
      // if (dropType !== "inner") {
      //   // 1.修改父节点pid
      //   draggingNode.data.pid = dropNode.data.pid;
      //   dropNode.parent.childNodes.forEach((item, index) => {
      //     // 2.修改自身顺序oid
      //     item.data.oid = index + 1;
      //   });
      // }
      // // console.log(draggingNode.data.id);
      // let res = this.oriData.filter((item) => item.id == draggingNode.data.id);
      // console.log(res);
      this.$confirm("此操作将保存目录更改, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let paramData = [];
          //父节点
          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          // 父节点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != "inner" ? data : data.children;
          let pid = "";
          //变更节点
          nodeData.forEach((item, i) => {
            if (dropType != "inner") {
              if (draggingNode.data.pid === dropNode.data.pid) {
                pid = item.pid;
                item.pid = item.pid;
              } else {
                pid = dropNode.data.pid;
                item.pid = dropNode.data.pid;
              }
            } else {
              pid = data.id;
              item.pid = data.id;
            }
            let collection = {
              id: item.id,
              name: item.name,
              pid,
              oid: i + 1,
            };
            paramData.push(collection);
            item.orderNum = i + 1;
          });
          // console.log(paramData);
          // console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          this.oriData.forEach((e) => {
            paramData.forEach((item) => {
            nodeData.forEach((item) => {
              if (item.id === e.id) {
                e = item;
              }
@@ -259,11 +211,6 @@
            arr.push(e);
          });
          this.newData = arr;
          this.sendChange();
          this.$message({
            type: "success",
            message: "更改成功!",
          });
        })
        .catch(() => {
          this.$message({
@@ -273,9 +220,8 @@
          this.dirData = this.old_dirDat; //将备份的dir重新赋值
        });
    },

    sendChange() {
      updateDirTree(this.newData).then((res) => {
      updateDirTrees(this.newData).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message({
@@ -294,15 +240,8 @@
      immediate: true,
      handler(val) {
        if (val) {
          this.showEdit = val;
          this.draggable = val;
        }
      },
    },
    showBread: {
      immediate: true,
      handler(val) {
        if (val) this.showBread = val;
      },
    },
  },