vue电商后台管理系统—实现商品分类以及分类管理功能

商品管理菜单下的商品分类子菜单

商品分类

1. 新建goods_cate子分支

新建分支并推送到码云

2. 创建子级路由

在component文件夹中新建一个goods文件夹存放商品管理相关组件，新建Cate.vue子组件；在router/index.js中导入子组件并定义子路由规则，注意，路径是浏览器地址栏中的路径名，这里是/categories

3. 绘制商品分类组件的基本页面结构

• BreadCrumb面包屑导航区域
• Card卡片视图区域
  1. 一行中的第一列放置 “添加分类”按钮
  2. 商品分类 table 表格区域，为了形成树形结构的表格，所以使用了 tree-table
     • …
  3. 底部 Pagination 分页区域

4. 请求分类数据

  data() {
   
    return {
   
      // 5.1 商品分类的数据列表
      cateList: [],
      // 5.2
      queryInfo: {
   
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      total: 0
    }
  },
  created() {
   
    // 5.3
    this.getCateList()
  },
  methods: {
   
    // 5.4 获取商品分类数据
    async getCateList() {
   
      // 发送请求
      const {
    data: res } = await this.$http.get('categories', {
   
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
   
        return this.$message.error('获取商品分类数据列表失败')
      }
      console.log(res.data)
      // 把成功获取到的数据保存到数组中
      this.cateList = res.data.result
      // 为总数据条数赋值
      this.total = res.data.total
    }
  }

5. 自定义数据列

官方文档链接：
https://github.com/MisterTaki/vue-table-with-tree-grid/blob/master/example/Example.vue

https://github.com/MisterTaki/vue-table-with-tree-grid

a. 下载依赖 ，在入口文件导入这个插件并全局注册，组件名统一为 tree-table

npm i vue-table-with-tree-grid

API—Table Attributes：

属性	说明	类型	参数	默认值
data	表格各行的数据	Array	-	[]
empty-text	表格数据为空时显示的文字	String	-	‘暂无数据’
columns	表格各列的配置（具体见下文：Columns Configs）	Array	-	[]
selection-type	是否为多选类型表格	Boolean	-	false
expand-type	是否为展开行类型表格（为 True 时，需要添加名称为 ‘$expand’ 的作用域插槽, 它可以获取到 row, rowIndex)	Boolean	-	false
show-index	是否显示数据索引	Boolean	-	false
index-text	数据索引名称	String	-	‘序号’

<tree-table
  :data="cateList"
  :columns="columns"
  :selection-type="false"
  :expand-type="false"
  show-index="true"
  index-text="#"
  border
></tree-table>

columns: [
  {
   
    label: '分类名称',
    prop: 'cat_name',
  }]

b. 通过自定义模板列的形式将后三列数据渲染出来

1. 是否有效cat_deleted：false

   如果值为false，渲染成绿色的✔，如果值为true，则渲染成红色的✘，需要用到作用域插槽

   思路：首先在data中定义一个列“是否有效”，然后在表格的内容节点中使用作用域插槽定义一个模板，添加slot，v-slot 属性，使用指令 v-if 如果scope值为false就显示success图标，否则，error图标

   <script>
   export default {
     name:'Cate',
     data() {
       return {
         columns: [
     			...
    				// 4.1.2 是否有效
     			{
       			label: '是否有效',
       			prop: 'cat_deleted',
       			// 将当前列定义成模板列
       			type: 'template',
       			// 表示当前这一列使用的模板名称
       			template: 'isok'
           }
         ],
       }
     }
   }
   </script>
   

2. 排序 cat_level

   同样是要使用 v-if 进行按需渲染，cat_level值为0：一级；值为1：二级；值为2：三级

3. 操作

   在自定义模板中添加两个按钮，分别是编辑和删除，后续再完成这两者的功能

6. 完成分页功能

// 5. 底部 Pagination 分页区域 -->
<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>

1. 监听 pagesize 的改变，获取到最新的 newSize 并赋值给当前页面数据条数 queryInfo.pagesize
2. 监听 pagenum 的改变，获取到最新的 页码值 newPage 并赋值给当前页码值 queryInfo.pagenum
3. 给 total 总数进行数据绑定

// 5.5 监听 pagesize 的改变，获取到最新的 newSize
handleSizeChange(newSize) {
   
  // console.log(newSize)
  this.queryInfo.pagesize = newSize
  this.getCateList()
},
  // 5.6 监听 pagenum 的改变，获取到最新的 页码值 newPage
  handleCurrentChange(newPage) {
   
    // console.log(newPage)
    this.queryInfo.pagenum = newPage
    this.getCateList()
  }

7. 完成添加分类

1. addCateDialogVisible 控制添加分类对话框的显示与隐藏，首先在data 中将其设置为false
2. 给添加分类按钮绑定一个点击事件 showAddDialog，在methods中新增这个事件处理函数
3. 接下来需要完善对话框内部的表单，父级分类的级联选择框暂时不绘制，添加form表单，表单项“分类名称”中的prop属性需要查看API接口文档1.6.2.添加分类
4. 获取前两级的父级分类数据列表，查看API接口文档1.6.1. 商品分类数据列表，在methods中定义一个函数 getParentCateList 来获取父级分类的数据列表

• 请求路径：categories
• 请求方法：get
• 请求参数：type，pagenum，pagesize

5. 点击添加分类按钮弹出对话框前调用函数 getParentCateList，在data中定义一个空数组 parentCateList 用以保存父级分类数据的列表

// 3.1 添加分类的功能对话框 -->
<el-dialog
	title="添加分类"
	:visible.sync="addCateDialogVisible"
	width="50%"
>
  // 3.4.添加分类的表单区域 -->
  <el-form
		:model="addCateForm"
		:rules="addCateFormRules"
		ref="addCateFormRef"
		label-width="80px"
	>
 		<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>

<script>
export default {
   
  data() {
   
    return{
   
      ...
      // 3.5 添加分类的表单数据对象
      addCateForm: {
   
        // 将要添加的分类的名称
        cat_name: '',
        // 父级分类的 id
        cat_pid: 0,
        // 分类的等级，默认要添加的是一级分类
        cat_level: 0
      },
      // 3.6 添加分类的表单验证规则
      addCateFormRules: {
   
        cat_name: [{
    required: true, message: '请输入分类名称', trigger: blur }]
      },
      // 3.8 保存父级分类数据的列表
      parentCateList: []
    }
  },
  methods:{
   
    // 3.3 点击按钮展示添加分类的对话框
    showAddCateDialog() {
   
      // 3.7.2 先获取父级分类的数据列表
      this.getParentCateList()
      // 再展示对话框
      this.addCateDialogVisible = true
    },
    // 3.7 定义一个函数 getParentCateList 来获取父级分类的数据列表
    async getParentCateList() {
   
      // 3.7.1 发送请求
      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
      // this.getParentCateList()
    }
  }
}
</script>

6. 添加级联菜单显示父级分类，先导入Cascader组件，并注册，然后添加使用级联菜单组件：

这里遇到一个问题：

原版本是将 expandTrigger="hover" 和 :props="cascaderProps" 分开写的，但是官方文档更新之后，写法变为了 :props="{ expandTrigger: 'hover' }" ，导致我不知道 cascaderProps 应该放在什么位置进行配置

// 原版本
<el-cascader>
  v-model="selectedKeys"
  :options="parentCateList"
  expandTrigger="hover"
  :props="cascaderProps"
  @change="parentCateChange"
</el-cascader>

// data函数中
// 3.10 指定级联选择器的配置对象 cascaderProps
cascaderProps: