[Vue]实战---电商项目(分类管理模块)【六】

分类管理

商品分类概述

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

 

商品分类列表

基本布局与数据获取

• 基本布局

  • 面包屑导航区域

  <!-- 面包屑导航区域 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
  

  • 卡片视图区域

  <!--  卡片视图区域 -->
  <el-card>
      <el-row>
          <el-button type="primary">添加分类</el-button>
      </el-row>
  </el-card>
  

• 数据获取

  • 获取商品分类数据

  export default {
      data() {
          return {
              // 查询条件
              querInfo: {
                  type: 3,
                  pagenum: 1,
                  pagesize: 5
              },
              // 商品分类的数据列表，默认为空
              catelist: [],
              totle: 0,
          }
      },
      created() {
          this.getCateList()
      },
      methods: {
          // 获取商品分类数据
          async getCateList() {
              const {data: res} = await this.$http.get('categories', {
                  params: this.querInfo
              })
  
              if (res.meta.status !== 200) {
                  return this.$message.error('获取商品分类失败！')
              }
  
              console.log(res.data)
              // 把数据列表，赋值给 catelist
              this.catelist = res.data.result
              // 为总数据条数赋值
              this.total = res.data.total
          },
      }
  }
  

 

树形表格

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

• 安装运行依赖vue-table-with-tree-grid
• 导入main.js

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

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

 

实现分类树形列表

• 实现效果

<tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index
            index-text="#" border :show-row-hover="false">
    <!-- 是否有效 -->
    <template slot="isok" slot-scope="scope">
        <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen;"></i>
        <i class="el-icon-error" v-else style="color: red;"></i>
    </template>
    <!-- 排序 -->
    <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
        <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
        <el-tag type="warning" size="mini" v-else>三级</el-tag>
    </template>
    <!-- 操作 -->
    <template slot="opt" slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
    </template>
</tree-table>

• 处理数据

columns: [
    {
        label: '分类名称',
        prop: 'cat_name'
    },
    {
        label: '是否有效',
        // 表示将当前列定义为模板列
        type: 'template',
        // 表示当前这一列使用模板名称
        template: 'isok'
    },
    {
        label: '排序',
        // 表示，将当前列定义为模板列
        type: 'template',
        // 表示当前这一列使用模板名称
        template: 'order'
    },
    {
        label: '操作',
        // 表示，将当前列定义为模板列
        type: 'template',
        // 表示当前这一列使用模板名称
        template: 'opt'
    }
],

 

分页功能

• 实现效果

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

• 处理数据

methods: {
    // 监听 pagesize 改变
    handleSizeChange(newSize) {
        this.querInfo.pagesize = newSize
        this.getCateList()
    },
    // 监听pagenum的改变
    handleCurrentChange(newPage) {
        this.querInfo.pagenum = newPage
        this.getCateList()
    }
}

 

添加分类

实现分类树形列表

• 实现添加分类对话框布局
• 控制对话框显示和隐藏

<el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%" @close="resetForm">
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
        <el-form-item label="分类名称：" prop="cat_name">
            <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类：">
            <!-- 分类菜单 -->
        </el-form-item>
    </el-form>
</el-dialog>

 

实现分类级联菜单效果

• 实现级联菜单效果
• 级联菜单数据加载与填充

<el-cascader 
             expand-trigger="hover" 
             :options="parentCateList" 
             :props="cascaderConfig" 
             v-model="selectedCateList" 
             @change="handleChange" 
             change-on-select 
             clearable>
</el-cascader>

// 先获取所有父级分类的数据列表
const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
if (res.meta.status !== 200) return this.$message.error('获取父级分类失败！')
// 把父级分类数据，挂载到data中
this.parentCateList = res.data

 

控制父级分类的选择

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

handleChange() {
    if (this.selectedCateList.length === 0) {
        // 证明没有选中任何父级分类
        this.addForm.cat_pid = 0
        this.addForm.cat_level = 0
    } else {
        // 选中父级分类
        this.addForm.cat_pid = this.selectedCateList[this.selectedCateList.length - 1]
        // 设置分类等级
        this.addForm.cat_level = this.selectedCateList.length
    }
}

 

完成分类添加

将分类名称、分类等级和父分类 id 提交到后台，完成分类添加

const { data: res } = await this.$http.post('categories', this.addForm)
if (res.meta.status !== 201) {
    return this.$message.error('添加分类失败！')
}
this.$message.success('添加分类成功！')

 

实现商品分类的编辑和删除功能

首先要在编辑和删除绑定事件

<template slot="opt" slot-scope="scope">
 <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope.row.cat_id)">编辑
 </el-button>
 <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">删除
 </el-button>
</template>

编辑操作

• 编辑分类对话框布局

<!-- 编辑分类的对话框 -->
<el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%">
    <el-form
             :model="editCateForm"
             :rules="editCateFormRules"
             ref="editCateFormRef"
             label-width="100px"
             >
        <el-form-item label="分类名称：" prop="cat_name">
            <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="eidtCate">确 定</el-button>
    </span>
</el-dialog>

• 控制编辑对话框关闭

// 编辑对话框 控制
editCateDialogVisible: false,

• 验证编辑分类表单

// 编辑分类表单验证
editCateFormRules: {
    cat_name: [
        {required: true, message: '请输入分类名称', trigger: 'blur'}
    ]
},

• 绑定编辑表单的对象

// 编辑表单 绑定对象
editCateForm: ''

• 显示编辑的对话框

// 显示编辑对话框
async showEditCateDialog(id) {
    const {data: res} = await this.$http.get('categories/' + id)
    if (res.meta.status !== 200) return this.$message.error('获取分类失败！')
    this.editCateForm = res.data
    this.editCateDialogVisible = true
},

• 编辑分类名

// 编辑分类名
eidtCate() {
    this.$refs.editCateFormRef.validate(async valid => {
        if (!valid) return
        const {data: res} = await this.$http.put('categories/' + this.editCateForm.cat_id, {cat_name: this.editCateForm.cat_name})
        if (res.meta.status !== 200) return this.$message.error('更新分类名失败！')
        this.$message.success('更新分类名成功！')
        this.getCateList()
        this.editCateDialogVisible = false
    })
},

 

删除操作

• 删除分类(利用id)

// 删除分类
async removeCate (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()
}