第179天学习打卡（项目 谷粒商城21 删除 批量删除小结 品牌管理 效果优化与快速显示开关）

删除 批量删除 小结

category.vue

 ​
 <template>
   <div>
     <el-switch
       v-model="draggable"
       active-text="开启拖拽"
       inactive-text="关闭拖拽"
     >
     </el-switch>
     <el-button v-if="draggable" @click="batchSave">批量保存</el-button>
     <el-button type="danger" @click="batchDelete">批量删除</el-button>
     <el-tree
       :data="menus"
       :props="defaultProps"
       :expand-on-click-node="false"
       show-checkbox
       node-key="catId"
       :default-expanded-keys="expandedKey"
       :draggable="draggable"
       :allow-drop="allowDrop"
       @node-drop="handleDrop"
       ref="menuTree"
     >
       <span class="custom-tree-node" slot-scope="{ node, data }">
         <span>{{ node.label }}</span>
         <span>
           <el-button
             v-if="node.level <= 2"
             type="text"
             size="mini"
             @click="() => append(data)"
           >
             Append
           </el-button>
 ​
           <el-button type="text" size="mini" @click="edit(data)">
             edit
           </el-button>
 ​
           <el-button
             v-if="node.childNodes.length == 0"
             type="text"
             size="mini"
             @click="() => remove(node, data)"
           >
             Delete
           </el-button>
         </span>
       </span>
     </el-tree>
     <el-dialog
       :title="title"
       :visible.sync="dialogVisible"
       width="30%"
       :close-on-click-modal="false"
     >
       <el-form :model="category">
         <el-form-item label="分类名称">
           <el-input v-model="category.name" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="图标">
           <el-input v-model="category.icon" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="计量单位">
           <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>
     </el-dialog>
   </div>
 </template>
 ​
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
 ​
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
   props: {},
   data() {
     return {
       pCid: [],
       draggable: false,
       updateNodes: [],
       maxLevel: 0,
       title: "",
       dialogType: "", // edit add
       category: {
         name: "",
         parentCid: 0,
         catLevel: 0,
         showStatus: 1,
         sort: 0,
         productUnit: "",
         icon: "",
         catId: null,
       },
       dialogVisible: false,
       menus: [],
       expandedKey: [],
       defaultProps: {
         children: "children",
         label: "name",
       },
     };
   },
 ​
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
   watch: {},
   //方法集合
   methods: {
     append(data) {
       console.log("append", data);
       this.dialogType = "add";
       this.title = "添加分类";
       this.dialogVisible = true;
       this.category.parentCid = data.catId;
       this.category.catLevel = data.catLevel * 1 + 1;
       this.category.catId = null;
       this.category.name = "";
       this.category.icon = "";
       this.category.productUnit = "";
       this.category.sort = 0;
       this.category.showStatus = 1;
     },
     batchDelete() {
       let catIds = [];
       let checkedNodes = this.$refs.menuTree.getCheckedNodes();
       console.log("被选中的元素", checkedNodes); 
      for (let i = 0; i < checkedNodes.length; i++) { 
        catIds.push(checkedNodes[i].catId); 
      } 
      this.$confirm(`是否批量删除【${catIds}】菜单?`, "提示", { 
        confirmButtonText: "确定", 
        cancelButtonText: "取消", 
        type: "warning", 
      }).then(()=>{ 
        this.$http({ 
        url: this.$http. adornUrl('/product/category/delete'), 
        method: 'post', 
        data: this.$http.adornData(catIds, false) 
        }).then(({ data })=>{ 
          this.$message({ 
          message: "菜单批量删除成功", 
          type: "success", 
        }); 
        this.getMenus(); 
         }); 
​ 
      }).catch(()=>{ 
​ 
      }); 
    }, 
    batchSave() { 
      this.$http({ 
        url: this.$http.adornUrl("/product/category/update/sort"), 
        method: "post", 
        data: this.$http.adornData(this.updateNodes, false), 
      }).then(({ data }) => { 
        this.$message({ 
          message: "菜单顺序等修改成功", 
          type: "success", 
        }); 
        //刷新菜单 
        //刷新出新的菜单 
        this.getMenus(); 
        //设置需要默认展开的菜单 
        this.expandedKey = this.pCid; 
        this.updateNodes = []; 
        this.maxLevel = 0; 
        // this.pCid = 0; 
      }); 
    }, 
    handleDrop(draggingNode, dropNode, dropType, ev) { 
      console.log("handleDrop: ", draggingNode, dropNode, dropType); 
      //1.当前节点最新的父节点id 
      let pCid = 0; 
      let siblings = null; 
      if (dropType == "before" || dropType == "after") { 
        pCid = 
          dropNode.parent.data.catId == undefined 
            ? 0 
            : dropNode.parent.data.catId; 
        siblings = dropNode.parent.childNodes; 
      } else { 
        pCid = dropNode.data.catId; 
        siblings = dropNode.childNodes; 
      } 
      this.pCid.push(pCid); 
​ 
      //2.当前拖拽节点的最新顺序 
      for (let i = 0; i < siblings.length; i++) { 
        if (siblings[i].data.catId == draggingNode.data.catId) { 
          //如果遍历的是当前正在拖拽的节点 
          let catLevel = draggingNode.level; 
          if (siblings[i].level != draggingNode.level) { 
            //当前节点的层级发生变化 
            catLevel = siblings[i].level; 
​ 
            //修改他子节点的层级 
            this.updateChildNodeLevel(siblings[i]); 
          } 
          this.updateNodes.push({ 
            catId: siblings[i].data.catId, 
            sort: i, 
            parentCid: pCid, 
            catLevel: catLevel, 
          }); 
        } else { 
          this.updateNodes.push({ catId: siblings[i].data.catId, sort: i }); 
        } 
      } 
​ 
      //3.当前拖拽节点的最新层级 
      console.log("updateNodes", this.updateNodes); 
    }, 
    updateChildNodeLevel(node) { 
      if (node.childNodes.length > 0) { 
        for (let i = 0; i < node.childNodes.length; i++) { 
          var cNode = node.childNodes[i].data; 
          this.updateNodes.push({ 
            catId: cNode.catId, 
            catLevel: node.childNodes[i].level, 
          }); 
          this.updateChildNodeLevel(node.childNodes[i]); 
        } 
      } 
    }, 
    allowDrop(draggingNode, dropNode, type) { 
      //1.被拖动的当前节点以及所在的父节点总层数不能大于3 
​ 
      //1) 被拖动的当前节点总层数 
      console.log("allowDrop:", draggingNode, dropNode, type); 
      this.countNodeLevel(draggingNode); 
      //当前正在拖动的节点+父节点所在的深度不大于3即可 
​ 
      let deep = Math.abs(this.maxLevel - draggingNode.level) + 1; 
      console.log("深度", deep); 
      // this.maxLevel 
      if (type == "inner") { 
        // console.log(`this.maxLevel:${this.maxLevel}; draggingNode.data.catLevel: ${draggingNode.data.catLevel};  dropNode.level: ${ dropNode.level}`); 
        return deep + dropNode.level <= 3; 
      } else { 
        return deep + dropNode.parent.level <= 3; 
      } 
    }, 
    countNodeLevel(node) { 
      //找出所有子节点，求出最大深度 
      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]); 
        } 
      } 
    }, 
    edit(data) { 
      console.log("要修改的数据", data); 
      this.dialogType = "edit"; 
      this.title = "修改分类"; 
      this.dialogVisible = true; 
​ 
      //发送请求获取当前节点最新的数据 
      this.$http({ 
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`), 
        method: "get", 
      }).then(({ data }) => { 
        //请求成功 
        console.log("要回显的数据", 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; 
        this.category.catLevel = data.data.catLevel; 
        this.category.sort = data.data.sort; 
        this.category.showStatus = data.data.showStatus; 
      }); 
    }, 
    submitData() { 
      if (this.dialogType == "add") { 
        this.addCategory(); 
      } 
      if (this.dialogType == "edit") { 
        this.editCategory(); 
      } 
    }, 
    //修改三级分类数据 
    editCategory() { 
      var { catId, name, icon, productUnit } = this.category; 
      this.$http({ 
        url: this.$http.adornUrl("/product/category/update"), 
        method: "post", 
        data: this.$http.adornData({ catId, name, icon, productUnit }, false), 
      }).then(({ data }) => { 
        this.$message({ 
          message: "菜单修改成功", 
          type: "success", 
        }); 
        //关闭对话框 
        this.dialogVisible = false; 
        //刷新出新的菜单 
        this.getMenus(); 
        //设置需要默认展开的菜单 
        this.expandedKey = [this.category.parentCid]; 
      }); 
    }, 
    //添加三级分类的方法 
    addCategory() { 
      console.log("提交的三级分类数据", this.category); 
      this.$http({ 
        url: this.$http.adornUrl("/product/category/save"), 
        method: "post", 
        data: this.$http.adornData(this.category, false), 
      }).then(({ data }) => { 
        this.$message({ 
          message: "菜单保存成功", 
          type: "success", 
        }); 
        //关闭对话框 
        this.dialogVisible = false; 
        //刷新出新的菜单 
        this.getMenus(); 
        //设置需要默认展开的菜单 
        this.expandedKey = [this.category.parentCid]; 
      }); 
    }, 
​ 
    remove(node, data) { 
      var ids = [data.catId]; 
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", { 
        confirmButtonText: "确定", 
        cancelButtonText: "取消", 
        type: "warning", 
      }) 
        .then(() => { 
          this.$http({ 
            url: this.$http.adornUrl("/product/category/delete"), 
            method: "post", 
            data: this.$http.adornData(ids, false), 
          }).then(({ data }) => { 
            this.$message({ 
              message: "菜单删除成功", 
              type: "success", 
            }); 
            //刷新出新的菜单 
            this.getMenus(); 
            //设置需要默认展开的菜单 
            this.expandedKey = [node.parent.data.catId]; 
          }); 
        }) 
        .catch(() => {}); 
​ 
      console.log("remove", node, data); 
    }, 
    getMenus() { 
      this.$http({ 
        url: this.$http.adornUrl("/product/category/list/tree"), 
        method: "get", 
      }).then(({ data }) => { 
        console.log("成功获取到菜单数据...", data.data); 
        this.menus = data.data; 
      }); 
    }, 
  }, 
​ 
  //生命周期 - 创建完成（可以访问当前this实例） 
  created() { 
    this.getMenus(); 
  }, 
  //生命周期 - 挂载完成（可以访问DOM元素） 
  mounted() {}, 
  beforeCreate() {}, //生命周期 - 创建之前 
  beforeMount() {}, //生命周期 - 挂载之前 
  beforeUpdate() {}, //生命周期 - 更新之前 
  updated() {}, //生命周期 - 更新之后 
  beforeDestroy() {}, //生命周期 - 销毁之前 
  destroyed() {}, //生命周期 - 销毁完成 
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发 
}; 
</script> 
<style  scoped> 
</style>

 

品牌管理

 

需要把前端项目进行重新启动

效果优化与快速显示开关

 

注意：注释掉之后要重新启动项目

 

 

brand-add-or-update.vue

 <template>
   <el-dialog
     :title="!dataForm.brandId ? '新增' : '修改'"
     :close-on-click-modal="false"
     :visible.sync="visible"
   >
     <el-form
       :model="dataForm"
       :rules="dataRule"
       ref="dataForm"
       @keyup.enter.native="dataFormSubmit()"
       label-width="140px"
     >
       <el-form-item label="品牌名" prop="name">
         <el-input v-model="dataForm.name" placeholder="品牌名"></el-input>
       </el-form-item>
       <el-form-item label="品牌logo地址" prop="logo">
         <el-input v-model="dataForm.logo" placeholder="品牌logo地址"></el-input>
       </el-form-item>
       <el-form-item label="介绍" prop="descript">
         <el-input v-model="dataForm.descript" placeholder="介绍"></el-input>
       </el-form-item>
       <el-form-item label="显示状态" prop="showStatus">
         <el-switch
           v-model="dataForm.showStatus"
           active-color="#13ce66"
           inactive-color="#ff4949"
         >
         </el-switch>
       </el-form-item>
       <el-form-item label="检索首字母" prop="firstLetter">
         <el-input
           v-model="dataForm.firstLetter"
           placeholder="检索首字母"
         ></el-input>
       </el-form-item>
       <el-form-item label="排序" prop="sort">
         <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
     </span>
   </el-dialog>
 </template>
 ​
 <script>
 export default {
   data() {
     return {
       visible: false,
       dataForm: {
         brandId: 0,
         name: "",
         logo: "",
         descript: "",
         showStatus: "",
         firstLetter: "",
         sort: "",
       },
       dataRule: {
         name: [{ required: true, message: "品牌名不能为空", trigger: "blur" }],
         logo: [
           { required: true, message: "品牌logo地址不能为空", trigger: "blur" },
         ],
         descript: [
           { required: true, message: "介绍不能为空", trigger: "blur" },
         ],
         showStatus: [
           {
             required: true,
             message: "显示状态[0-不显示；1-显示]不能为空",
             trigger: "blur",
           },
         ],
         firstLetter: [
           { required: true, message: "检索首字母不能为空", trigger: "blur" },
         ],
         sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
       },
     };
   },
   methods: {
     init(id) {
       this.dataForm.brandId = id || 0;
       this.visible = true;
       this.$nextTick(() => {
         this.$refs["dataForm"].resetFields();
         if (this.dataForm.brandId) {
           this.$http({
             url: this.$http.adornUrl(
               `/product/brand/info/${this.dataForm.brandId}`
             ),
             method: "get",
             params: this.$http.adornParams(),
           }).then(({ data }) => {
             if (data && data.code === 0) {
               this.dataForm.name = data.brand.name;
               this.dataForm.logo = data.brand.logo;
               this.dataForm.descript = data.brand.descript;
               this.dataForm.showStatus = data.brand.showStatus;
               this.dataForm.firstLetter = data.brand.firstLetter;
               this.dataForm.sort = data.brand.sort;
             }
           });
         }
       });
     },
     // 表单提交
     dataFormSubmit() {
       this.$refs["dataForm"].validate((valid) => {
         if (valid) {
           this.$http({
             url: this.$http.adornUrl(
               `/product/brand/${!this.dataForm.brandId ? "save" : "update"}`
             ),
             method: "post",
             data: this.$http.adornData({
               brandId: this.dataForm.brandId || undefined,
               name: this.dataForm.name,
               logo: this.dataForm.logo,
               descript: this.dataForm.descript, 
              showStatus: this.dataForm.showStatus, 
              firstLetter: this.dataForm.firstLetter, 
              sort: this.dataForm.sort, 
            }), 
          }).then(({ data }) => { 
            if (data && data.code === 0) { 
              this.$message({ 
                message: "操作成功", 
                type: "success", 
                duration: 1500, 
                onClose: () => { 
                  this.visible = false; 
                  this.$emit("refreshDataList"); 
                }, 
              }); 
            } else { 
              this.$message.error(data.msg); 
            } 
          }); 
        } 
      }); 
    }, 
  }, 
}; 
</script> 
​

 

 

 

 

 

 

brand.vue

 <template>
   <div class="mod-config">
     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
       <el-form-item>
         <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
       </el-form-item>
       <el-form-item>
         <el-button @click="getDataList()">查询</el-button>
         <el-button v-if="isAuth('product:brand:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
         <el-button v-if="isAuth('product:brand:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
       </el-form-item>
     </el-form>
     <el-table
       :data="dataList"
       border
       v-loading="dataListLoading"
       @selection-change="selectionChangeHandle"
       style="width: 100%;">
       <el-table-column
         type="selection"  
         header-align="center"
         align="center"
         width="50">
       </el-table-column>
       <el-table-column
         prop="brandId"
         header-align="center"
         align="center"
         label="品牌id">
       </el-table-column>
       <el-table-column
         prop="name"
         header-align="center"
         align="center"
         label="品牌名">
       </el-table-column>
       <el-table-column
         prop="logo"
         header-align="center"
         align="center"
         label="品牌logo地址">
       </el-table-column>
       <el-table-column
         prop="descript"
         header-align="center"
         align="center"
         label="介绍">
       </el-table-column>
       <el-table-column
         prop="showStatus"
         header-align="center"
         align="center"
         label="显示状态">
         <template slot-scope="scope">
         <el-switch
   v-model="scope.row.showStatus"
   active-color="#13ce66"
   inactive-color="#ff4949"
   :active-value = "1"
   :inactive-value = "0"
    @change="updateBrandStatus(scope.row)">
 </el-switch>
       </template>
       </el-table-column>
       <el-table-column
         prop="firstLetter"
         header-align="center"
         align="center"
         label="检索首字母">
       </el-table-column>
       <el-table-column
         prop="sort"
         header-align="center"
         align="center"
         label="排序">
       </el-table-column>
       <el-table-column
         fixed="right"
         header-align="center"
         align="center"
         width="150"
         label="操作">
         <template slot-scope="scope">
           <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.brandId)">修改</el-button>
           <el-button type="text" size="small" @click="deleteHandle(scope.row.brandId)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
       @size-change="sizeChangeHandle"
       @current-change="currentChangeHandle"
       :current-page="pageIndex"
       :page-sizes="[10, 20, 50, 100]"
       :page-size="pageSize"
       :total="totalPage"
       layout="total, sizes, prev, pager, next, jumper">
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
   </div>
 </template>
 ​
 <script>
   import AddOrUpdate from './brand-add-or-update'
   export default {
     data () {
       return {
         dataForm: {
           key: ''
         },
         dataList: [],
         pageIndex: 1,
         pageSize: 10,
         totalPage: 0,
         dataListLoading: false,
         dataListSelections: [],
         addOrUpdateVisible: false
       }
     },
     components: {
       AddOrUpdate
     },
     activated () {
       this.getDataList()
     },
     methods: {
       // 获取数据列表
       getDataList () {
         this.dataListLoading = true
         this.$http({
           url: this.$http.adornUrl('/product/brand/list'),
           method: 'get',
           params: this.$http.adornParams({
             'page': this.pageIndex,
             'limit': this.pageSize,
             'key': this.dataForm.key 
          }) 
        }).then(({data}) => { 
          if (data && data.code === 0) { 
            this.dataList = data.page.list 
            this.totalPage = data.page.totalCount 
          } else { 
            this.dataList = [] 
            this.totalPage = 0 
          } 
          this.dataListLoading = false 
        }) 
      }, 
      updateBrandStatus(data){ 
        console.log("最新信息", data) 
        let {brandId,showStatus} = data; 
        //发送请求修改状态 
        this.$http({ 
        url: this.$http. adornUrl('/product/brand/update'), 
        method: 'post', 
        data: this.$http.adornData({brandId, showStatus}, false) 
        }).then(({ data })=>{ 
          this.$message({ 
            type: "success", 
            message: "状态更新成功" 
          }) 
         }); 
      }, 
      // 每页数 
      sizeChangeHandle (val) { 
        this.pageSize = val 
        this.pageIndex = 1 
        this.getDataList() 
      }, 
      // 当前页 
      currentChangeHandle (val) { 
        this.pageIndex = val 
        this.getDataList() 
      }, 
      // 多选 
      selectionChangeHandle (val) { 
        this.dataListSelections = val 
      }, 
      // 新增 / 修改 
      addOrUpdateHandle (id) { 
        this.addOrUpdateVisible = true 
        this.$nextTick(() => { 
          this.$refs.addOrUpdate.init(id) 
        }) 
      }, 
      // 删除 
      deleteHandle (id) { 
        var ids = id ? [id] : this.dataListSelections.map(item => { 
          return item.brandId 
        }) 
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { 
          confirmButtonText: '确定', 
          cancelButtonText: '取消', 
          type: 'warning' 
        }).then(() => { 
          this.$http({ 
            url: this.$http.adornUrl('/product/brand/delete'), 
            method: 'post', 
            data: this.$http.adornData(ids, false) 
          }).then(({data}) => { 
            if (data && data.code === 0) { 
              this.$message({ 
                message: '操作成功', 
                type: 'success', 
                duration: 1500, 
                onClose: () => { 
                  this.getDataList() 
                } 
              }) 
            } else { 
              this.$message.error(data.msg) 
            } 
          }) 
        }) 
      } 
    } 
  } 
</script> 
​

 

B站学习网址：全网最强电商教程《谷粒商城》对标阿里P6/P7，40-60万年薪哔哩哔哩bilibili