商品服务-API-三级分类在管理页面下实现修改及拖拽功能

1.0 简单修改功能实现

在每个分类后面加上修改按钮,绑定一个事件,并将当前修改节点数据展现到点击按钮后的页面上:

<el-button type="text" size="mini" @click="edit(data)">Edit</el-button>
<el-form :model="category">
        <el-form-item label="分类名称:" :label-width="formLabelWidth">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标:" :label-width="formLabelWidth">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位:" :label-width="formLabelWidth">
          <el-input v-model="category.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="submitData()">确 定</el-button>
      </span>
 
export default {
   
  data() {
   
    return {
   
      maxLevel: 0,
      title: "",
      dialogVisible: false,
      dialogType: "", //edit,add
      category: {
   
        catId: null,
        name: "",
        productUnit: "",
        icon: "",
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
      },
      menus: [],
      expandkey: [],
    };
  },
  methods: {
   
	edit(data) {
     //首先将要修改的节点最新信息展现在dialog页面上
      console.log("要修改的数据", data);
      this.dialogType = "edit";
      this.dialogVisible = true;  //和增加共用一个dialog页面
      this.title = "修改分类";  //dialog 与''添加分类''区分
      //发送请求  获取当前节点最新数据,为了展现在dialog页面上
      this.$http({
   
        url: this.$http.adornUrl(`/product/category/info/${
   data.catId}`),
        method: "get",
      }).then(({
    data }) => {
   
        //请求成功
        this.category.name = data.data.name;
        this.category.catId = data.data.catId;
        this.category.icon = data.data.icon;
        this.category.productUnit = data.data.productUnit;
        this.category.parentCid = data.data.parentCid;
      });
    },
// 确定 将修改或添加的数据提交后台,判断不同的提交方法
	submitData() {
   
	      if (this.dialogType == "add") {
   
	        this.addCategory();
	      }
	      if (this.dialogType == "edit") {
   
	        this.editCategory();
	      }
	    },
    // 修改三级分类方法
    editCategory() {
   
      var {
    catId, name, icon, productUnit } = this.category;
      var data = {
    catId, name, icon, productUnit };
      this.$http({
   
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData(data, false),
      }).then(({
    data }) => {
   
        this.$message({
   
          type: "success",
          message: "菜单修改成功",
        });
        //关闭对话框
        this