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

删除 批量删除 小结

image-20210706204003618

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 
           ?
          : 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>

 

image-20210706205058408

品牌管理

image-20210706205812122

image-20210706213423109

image-20210706213321771

image-20210706213211279

 

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

image-20210706213616769

image-20210706214303392

image-20210706214328381

image-20210706214851365

效果优化与快速显示开关

 

image-20210706215247936

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

image-20210706215442361

image-20210706215458115

 

image-20210706220441950

image-20210706220501575

 

image-20210706220621944

image-20210706220604506

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

 

image-20210706220825566

image-20210706221611911

image-20210706221636947

image-20210706221542007

 

 

image-20210706222416421

 

image-20210706222431609

 

image-20210706223209751

 

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 =
        } 
         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 =
       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

 

image-20210706223718635

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

 

posted @ 2021-07-06 22:40  豆豆tj  阅读(87)  评论(0)    收藏  举报