Vue实战之 7. 商品管理---商品分类

1. 商品分类概述

商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观地看到。

2. 商品分类列表

• 实现基本布局
• 实现分类列表数据加载

 // 获取商品分类数据
    async getCateList () {
      const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        return this.$message('获取商品分类失败!')
      }

      console.log(res.data)
      // 把数据列表赋值给cateList
      this.cateList = res.data.result
      // 为总数据条数赋值
      this.total = res.data.total
    }

3. 树形表格

1. 第三方树形表格的基本使用

import TreeTable from 'vue-table-with-tree-grid'

Vue.component('tree-table', TreeTable)

2. 实现分类树形列表

4. 分页功能

1. 实现分页组件效果

 <!-- 分页区域 -->
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[3,5,10,15]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

2. 分页组件数据处理

// 监听 pagesize 改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getCateList()
    },
    // 监听 pagenum的改变
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getCateList()
    }

5. 添加分类

1. 实现分类树形列表

 <!-- 添加分类的对话框 -->
    <el-dialog
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%">
  <!-- 添加分类的表单 -->
  <el-form :model="addCateForm" :rules="addCateFormRules"
  ref="addCateFormRef" label-width="100px">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>
  <el-form-item label="父级分类">
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

2. 实现分类级联菜单效果

实现级联菜单效果：

<el-cascader clearable change-on-select
    expand-trigger="hover"
    :options="parentCateList"
    :props="cascaderProps"
    v-model="selectedKeys"
    @change="parentCateChange"></el-cascader>

级联菜单数据加载与填充：

 // 获取父级分类的数据列表
    async getParentList () {
      const { data: res } = await this.$http.get('categories', {
        params: {
          type: 2
        }
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类数据失败!')
      }
      // console.log(res.data)
      this.parentCateList = res.data
    }

3. 控制父级分类的选择

父级分类选择时，获取对应的分类id。

// 选择项发生变化触发的函数
    parentCateChange () {
      // 数组长度大于0，证明选中了父级分类
      // 反之就说明，没有选中任何父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的id
        this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = this.selectedKeys.length
      } else {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
    }

4. 完成分类添加

// 点击按钮，添加新的分类
    async addCate () {
      // console.log(this.addCateForm)
      this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('categories', this.addCateForm)
        if (res.meta.status !== 201) {
          return this.$message.error('添加分类失败!')
        }
        this.$message.success('添加分类成功!')
        this.getCateList()
        this.addCateDialogVisible = false
      })

6. 编辑分类信息

 // 展示编辑分类的对话框
    async showEditDialog (id) {
      const { data: res } = await this.$http.get('categories/' + id)
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('查询分类信息失败!')
      }
      // console.log(res.data)
      this.editCateForm = res.data
      this.EditDialogVisible = true
    },
    // 监听修改用户对话框的关闭事件
    editDialogClosed () {
      this.$refs.editCateFormRef.resetFields()
    },
    // 修改角色信息并且提交
    async editCate () {
      this.$refs.editCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('categories/' + this.editCateForm.cat_pid,
          { cat_name: this.editCateForm.cat_name })
        if (res.meta.status !== 200) {
          return this.$message.error('更新分类信息失败!')
        }

        // 关闭对话框
        this.EditDialogVisible = false
        // 刷新数据列表
        this.getCateList()
        // 提示修改成功
        this.$message.success('更新分类信息成功!')
      })
    }

7. 删除分类

 // 根据id 删除分类对应的信息
    async removeCateById (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }

      // 发起删除用户操作的请求
      const { data: res } = await this.$http.delete('categories/' + id)

      if (res.meta.status !== 200) {
        return this.$message.error('删除分类失败!')
      }
      this.$message.success('删除分类成功!')
      // 重新渲染数据
      this.getCateList()
    }