分布式项目-三级分类管理（3）

【快速回顾】：

更新时，需要在弹出的窗口完成数据的回写 ， 更新 / 删除 后，各级目录仍然保持打开的状态。
类别之间的关系改变使用拖拽属性draggable 来完成。在拖拽过程中还出现的一个问题是，多级的子树移到了一个节点上，造成树的高度发生变化，原先只定义了树的高度是三级 ， 所以我们要控制可拖拽的状态，使用allow-drag属性来完成当前节点能否拖拽 ， allow-drop是判断目标节点能否放进去；

【新增类别信息】：

【弹窗模块】：

    <!-- 添加彈出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="categoryForm">
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="图标" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="计量单位" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialog()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

     addDialog(){
        //添加三级分类的类别信息
        this.$http({
            url: this.$http.adornUrl("/product/category/save"),
            method: "post",
            data: this.$http.adornData( this.categoryForm , false ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "数据添加成功",
                type: "success",
              });
              //首先把这个窗口给关闭~
              this.dialogVisible = false;

              this.getCategory();
              //设置默认展开的父节点信息
              this.expandKeys = [this.categoryForm.catId];
            } else {
              this.$message.error(data.msg);
            }
          });
    }

【拖拽层级】：

找到要拖拽的节点下面的最深的层级数。用H加上要去往的节点的层级数 ， 整体小于3即可。

【相关代码】：

 <template>
  <div>
    <el-tree
      :data="data"
      :props="defaultProps"
      :expand-on-click-node="false"
      show-checkbox
      node-key="catId"
      :default-expanded-keys="expandKeys"
      :draggable ="true"
      :allow-drop="allowDrop"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="data.catLevel <= 2"
            type="text"
            size="mini"
            @click="() => append(data)"
          >
            添加
          </el-button>

          <el-button type="text" size="mini" @click="() => edit(data)">
            更新
          </el-button>

          <el-button
            v-if="data.childrens.length == 0"
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >
            删除
          </el-button>
        </span>
      </span>
    </el-tree>

    <!-- 添加彈出框 -->
    <el-dialog
      :title="dialogType?'新增':'更新'"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="categoryForm">
        <el-form-item label="类别名称" >
          <el-input v-model="categoryForm.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="图标" >
          <el-input v-model="categoryForm.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="计量单位" >
          <el-input
            v-model="categoryForm.productUnit"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      maxLevel:0,
      dialogType:false,   //窗口的类型 ， true添加  false更新
      dialogVisible: false,
      categoryForm: { name:null,icon:null,productUnit:null,showStatus:1,sort:0,catId:null,catLevel:1 },
      data: [],
      defaultProps: {
        children: "childrens",
        label: "name",
      },
      expandKeys: [],
    };
  },
  methods: {
    allowDrop( draggingNode , dropNode , type ){    //type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
      //判断拖拽的节点是否可以在该位置放置

      //draggingNode要拖拽的节点；
      //dropNode 目标节点

      //(1): 获取当前被拖拽的节点的最大的level
      this.countNodeLevel( draggingNode );
      let deep = Math.abs(this.maxLevel - draggingNode.level) + 1 ;
      if( type == 'inner' ){
        return (deep+dropNode.level) <= 3;
      }

      return (deep+dropNode.parent.level) <= 3;
    }
    ,
    countNodeLevel( node ){  //使用递归求出一个节点下面的子树高度。
      //找到所有子节点，最大的level
      if( node.childNodes!=null && node.childNodes.length > 0 ){
        for( let i = 0; i<node.childNodes.length ;i++ ){
          if(node.childNodes[i].level > this.maxLevel){
             this.maxLevel = node.childNodes[i].level
          }
          this.countNodeLevel(node.childNodes[i]);
        }
      }
    }
    ,
    submitForm(){
      //判断当前的操作是更新还是删除：
      if( this.dialogType ){
         //添加操作
         this.addDialog();
      }else{
         //更新操作
         this.editDialog();
      }
    }
    ,
    edit(data) {
      //更新类别信息的方法。

      this.dialogType=false;

      //获取最新的数据回写
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: "post",
        data: this.$http.adornData(this.categoryForm, false),
      }).then(({ data }) => {
        console.log("获取的数据" , data)

        //表单数据回写。
        this.categoryForm.name = data.category.name;
        this.categoryForm.productUnit = data.category.productUnit;
        this.categoryForm.icon = data.category.icon;
        this.categoryForm.catLevel = data.category.catLevel;
        this.categoryForm.parentCid = data.category.parentCid;

        //填充更新数据的 ID
        this.categoryForm.catId = data.category.catId;
        //常规的信息也需要更新（比如一些数据的层级）
        this.categoryForm.showStatus=1;
        this.categoryForm.sort=0;


        this.dialogVisible = true; //打开更新的窗口。
      });
    },
    append(data) {
      this.dialogType=true;

      this.dialogVisible = true; //打开弹出窗口

      // console.log("append方法", data);

      this.categoryForm.parentCid = data.catId; //添加的类别对应的父菜单。
      this.categoryForm.catLevel = data.catLevel + 1; //设置添加类别的层级
      this.categoryForm.showStatus = 1; //菜单的显示状态 1显示 0 被删除
      this.categoryForm.sort = 0; //排序 默认给0

      //重置更新的数据
      this.categoryForm.catId = null;
      this.categoryForm.name = "";
      this.categoryForm.icon = "";
      this.categoryForm.productUnit = "";

    },

    addDialog() {
      //添加三级分类的类别信息
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.categoryForm, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "数据添加成功",
            type: "success",
          });
          //首先把这个窗口给关闭~
          this.dialogVisible = false;

          this.getCategory();
          //设置默认展开的父节点信息
          this.expandKeys = [this.categoryForm.parentCid];
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    editDialog(){
      //更新三级分类的类别信息
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData(this.categoryForm, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "数据更新成功",
            type: "success",
          });
          //首先把这个窗口给关闭~
          this.dialogVisible = false;

          this.getCategory();
          //设置默认展开的父节点信息
          this.expandKeys = [this.categoryForm.parentCid];
        } else {
          this.$message.error(data.msg);
        }
      });
    }
    ,
    remove(node, data) {
      this.$confirm(`是否确认删除【${data.name}】记录?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //传递的数据
          let ids = [data.catId];

          //把删除的请求提交到后台服务。
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.getCategory();
              //设置默认展开的父节点信息
              this.expandKeys = [node.parent.data.catId];
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      // console.log("remove方法", data, node);
    },

    getCategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/listTree"),
        method: "get",
      }).then(({ data }) => {
        console.log("成功获取的类别数据 ： ", data.data);
        this.data = data.data;
      });
    },
  },
  created() {
    this.getCategory();
  },
};
</script>

<style>
</style>