Vue + ElementUI的电商管理系统实例11 商品分类

不问归期 提交于 2020-01-17 12:32:01

1、创建商品分类分支goods_cate并push到远程

查看分支:

git branch

创建分支:

git checkout -b goods_cate

推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u)

git push -u origin goods_cate

2、通过路由加载商品分类组件

新建goods文件夹和Cate.vue文件:

<template>
<div>
  <h3>商品分类组件</h3>
</div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>

</style>

添加路由:

import Cate from '../components/goods/Cate.vue'

const routes = [
  { path: '/', redirect: '/login' }, // 重定向
  { path: '/login', component: Login },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome', // 重定向
    children: [ // 子路由
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users }, // 用户列表
      { path: '/rights', component: Rights }, // 权限列表
      { path: '/roles', component: Roles }, // 角色列表
      { path: '/categories', component: Cate } // 商品分类
    ]
  }
]

点击左侧菜单的商品分类的效果如图:

3、绘制商品分类组件的基本布局

还是面包屑和card视图:

<template>
<div>
  <!--面包屑导航区域-->
    <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-col>
          <el-button type="primary">添加分类</el-button>
        </el-col>
      </el-row>
      <!--分类列表区域-->
      <!--分页区域-->
    </el-card>
</div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>

</style>

4、调用api接口获取商品分类列表数据

商品分类数据列表,请求路径:categories,请求方法:get,

请求参数
type    [1,2,3]    值:1,2,3 分别表示显示一层二层三层分类列表  【可选参数】如果不传递,则默认获取所有级别的分类
pagenum   当前页码值  【可选参数】如果不传递,则默认获取所有分类
pagesize    每页显示多少条数据  【可选参数】如果不传递,则默认获取所有分类

<script>
export default {
  data() {
    return {
      // 查询条件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      cateList: [], // 商品分类列表数据
      total: 0 // 总数据条数
    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    // 获取商品分类数据
    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
      // 带参数请求,返回的数据多一层result,还有总数total,当前页pagenum,当然页条数pagesize
      this.total = res.data.total
    }
  }
}
</script>

注意:这里请求接口时记得带参数,否则会返回一个总数据的data,而没有total、pagenum,pagesize参数。

5、使用vue-table-with-tree-grid树形表格组件

element没有相应的组件,要通过第三方插件来实现

打开vue ui面板,找到依赖项,点击安装依赖,在弹出的对话框中,搜索:vue-table-with-tree-grid,进行安装。

然后查看文档,有两种用法:

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.use(ZkTable)

// 或者

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.component(ZkTable.name, ZkTable)

打开入口文件main.js,导入插件:

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

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

参考官方文档给的示例代码,重新回到Cate.vue文件,使用插件:

<!--分类列表区域-->
<tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false"
       show-index index-text="#" border :show-row-hover="false"></tree-table>
data  表格各行的数据
columns  表格各列的配置(具体见下文:Columns Configs)
selection-type  是否为多选类型表格
expand-type  是否为展开行类型表格(为 True 时,需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)
show-index  是否显示数据索引
index-text  数据索引名称
border  是否显示纵向边框
show-row-hover  鼠标悬停时,是否高亮当前行

定义columns:

// 为table表格各列的配置定义
columns: [
      {
          label: '分类名称', // 列标题名称
          prop: 'cat_name' // 对应列内容的属性名
      },
      {
          label: '是否有效'
      },
      {
          label: '排序'
      },
      {
          label: '操作'
      }
]

此时效果图:

 

6、使用自定义模板渲染表格数据

先自定义是否有效模板: 

// 为table表格各列的配置定义
columns: [
      {
          label: '分类名称', // 列标题名称
          prop: 'cat_name' // 对应列内容的属性名
      },
      {
          label: '是否有效',
          type: 'template', // 表示:把当前列定义为模板列
          template: 'isok' // 表示当前这列使用的模板名称
      },
      {
          label: '排序'
      },
      {
          label: '操作'
      }
]

添加到表格:

<!--分类列表区域-->
<tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false"
       show-index index-text="#" border :show-row-hover="false">
      <template slot="isok" scope="scope">
          <i v-if="!scope.row.cat_deleted" class="el-icon-success"></i>
          <i v-else class="el-icon-error"></i>
      </template>
</tree-table>

<style lang="less" scoped>
.el-icon-success{color: lightgreen;}
.el-icon-error{color:red;}
</style>

此时效果图:

7、 渲染排序和操作对应的UI

columns:

// 为table表格各列的配置定义
columns: [
      {
          label: '分类名称', // 列标题名称
          prop: 'cat_name' // 对应列内容的属性名
      },
      {
          label: '是否有效',
          type: 'template', // 表示:把当前列定义为模板列
          template: 'isok' // 表示当前这列使用的模板名称
      },
      {
          label: '排序',
          type: 'template', // 表示:把当前列定义为模板列
          template: 'order' // 表示当前这列使用的模板名称
      },
      {
          label: '操作',
          type: 'template', // 表示:把当前列定义为模板列
          template: 'operate' // 表示当前这列使用的模板名称
      }
]

排序和操作列代码:

<!--排序的作用域插槽-->
<template slot="order" scope="scope">
        <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
        <el-tag v-else-if="scope.row.cat_level == 1" type="success">二级</el-tag>
        <el-tag v-else type="warning">三级</el-tag>
</template>

<!--操作的作用域插槽-->
<template slot="operate" scope="scope">
        <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
</template>

此时效果图:

8、实现分页功能

添加分页代码:

<!--分页区域-->
<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>

添加handleSizeChange和handleCurrentChange:

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

给添加分类按钮和表格之间添加间距:

<!--分类列表区域-->
<tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false" :expand-type="false"
       show-index index-text="#" border :show-row-hover="false">

<style lang="less" scoped>
.el-icon-success{color: lightgreen;}
.el-icon-error{color:red;}
.treeTable{margin-top:15px;}
</style>

此时效果图:

9、添加分类的对话框和表单

添加分类按钮添加点击事件:

<!--添加分类按钮区域-->
<el-row>
      <el-col>
          <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
      </el-col>
</el-row>

<script>
export default {
  。。。
  methods: {
    // 点击按钮 弹出添加分类对话框
    showAddCateDialog() {
      this.addCateDialogVisible = true
    }
  }
}
</script>

添加对话框代码:

<!--添加分类的对话框-->
<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" >
      <!--添加分类表单区域-->
      <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="90px">
        <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 {
      addCateDialogVisible: false, // 控制添加分类对话框是否显示
      // 添加分类的表单数据对象
      addCateForm: {
        cat_name: '', // 将要添加的分类名称
        cat_pid: 0, // 父分类的ID
        cat_level: 0 // 要添加分类的等级,默认要添加的是一级分类
      },
      // 添加分类表单的验证规则对象
      addCateFormRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

此时效果图:

10、获取父级分类的数据列表

商品分类数据列表接口,参数type:2 表示只获取前两级的分类数据。因为最多有三级分类,所以父级分类最多两级。

添加代码获取父级分类数据:

parentCateList: [] // 父级分类列表数据

// 点击按钮 弹出添加分类对话框
showAddCateDialog() {
      // 获取父级分类的数据列表
      this.getParentCateList()
      this.addCateDialogVisible = true
},
// 获取父级分类的数据列表
async getParentCateList() {
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类数据失败')
      }
      this.parentCateList = res.data
}

11、通过级联选择器渲染数据

Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

先导入到element.js里,这里就不写了。

value / v-model  选中项绑定值,数组
options  可选项数据源,键名可通过 Props 属性配置
props  配置选项,具体见下表
clearable  是否支持清空选项

expandTrigger  次级菜单的展开方式
checkStrictly  是否严格的遵守父子节点不互相关联
value  指定选项的值为选项对象的某个属性值
label  指定选项标签为选项对象的某个属性值
children  指定选项的子选项为选项对象的某个属性值

添加代码:

<el-form-item label="父级分类">
        <!--级联选择器-->
        <!-- options用来指定数据源  props用来指定配置对象-->
        <el-cascader
            v-model="selectedKeys"
            :options="parentCateList"
            :props="cascaderProps"
            @change="parentCateChanged" clearable></el-cascader>
</el-form-item>

<script>
export default {
  data() {
    return {
      parentCateList: [], // 父级分类列表数据
      // 指定级联选择器的配置对象
      cascaderProps: {
        expandTrigger: 'hover', // 次级菜单的展开方式 click / hover
        checkStrictly: true, // 允许选择任意一级的选项
        value: 'cat_id', // 指定选中值的属性
        label: 'cat_name', // 指定选中标签的名称
        children: 'children' // 指定父子嵌套的属性
      },
      // 选中的父级分类的ID数组
      selectedKeys: []
    }
  },
  methods: {
    // 选择项发生变化时触发这个函数
    parentCateChanged() {
      console.log(this.selectedKeys)
    } 
  }
}
</script>

<style lang="less" scoped>
.el-cascader{width: 100%;}
</style>

还要记得在全局样式global.css里添加:

.el-cascader-panel{height:200px;}

否则选项框会超长。

注意:是否允许选择任意一级的选项(例如只选第一级),以前版本的element是添加change-on-select,新版本是在props里添加checkStrictly: 'true'。

此时效果图:

新版bug问题

  1. 点击圆圈后理想是自动收起下拉,但是他这个也没有
  2. 而且只能点击圆圈才能选中,点击文字 label 没有效果

去百度找了一些资料,终于解决了这两个问题:

<el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps"
            @change="parentCateChanged" clearable ref="cascaderRef"
            @expand-change="cascaderClick" @visible-change="cascaderClick"></el-cascader>

cascadderClick函数:

// 解决bug:点击圆圈后是自动收起下拉;点击文字label同样实现效果
cascaderClick() {
      let that = this
      setTimeout(function() {
        document.querySelectorAll('.el-cascader-node__label').forEach(el => {
          el.onclick = function() {
            this.previousElementSibling.click()
            that.$refs.cascaderRef.dropDownVisible = false
          }
        })
        document
          .querySelectorAll('.el-cascader-panel .el-radio')
          .forEach(el => {
            el.onclick = function() {
              that.$refs.cascaderRef.dropDownVisible = false
            }
          })
      }, 100)
}

OK,现在可以完美实现效果。

12、根据父分类的变化处理表单中的数据

// 添加分类的表单数据对象
addCateForm: {
        cat_name: '', // 将要添加的分类名称
        cat_pid: 0, // 父分类的ID
        cat_level: 0 // 要添加分类的等级,默认要添加的是一级分类
},

根据刚才建立的表单数据对象分析:如果在表单中只添加分类名称 ,那么父分类id是0,当前要添加分类的等级是0,默认添加的是一级分类;如果选中了一级分类,那么父分类id就是选中的分类id值,当前要添加分类的等级是1,添加的是二级分类;如果选中了一级和二级分类,那么父分类id就是选中的数组中二级分类id的值,当前要添加的分类的等级是2,添加的是三级分类。说的有点绕,具体看代码吧。。

// 选择项发生变化时触发这个函数
parentCateChanged() {
      console.log(this.selectedKeys)
      // 如果 selectedKeys 数据中的 length 大于0,则证明选中了父级分类
      // 反之,就说明没有选中任何父级分类
      if (this.selectedKeys.length > 0) {
        // 选择最后一项当作父分类ID赋值
        this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        // 为当前要添加的分类的等级赋值
        this.addCateForm.cat_level = this.selectedKeys.length
        return
      } else {
        // 父分类ID赋值
        this.addCateForm.cat_pid = 0
        // 为当前要添加的分类的等级赋值
        this.addCateForm.cat_level = 0
      }
      console.log(this.addCateForm)
}

此时三种情况的打印结果分别为:

13、在对话框添加close事件,重置表单数据

给对话框添加colse关闭事件:

<!--添加分类的对话框-->
<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
addCateDialogClosed事件函数:
// 监听 添加分类对话框的关闭事件
addCateDialogClosed() {
      // 表单内容重置为空
      this.$refs.addCateFormRef.resetFields() // 通过ref引用调用resetFields方法
      // 选中的父级分类的ID数组 重置为空
      this.selectedKeys = []
      // 父分类id 和 当前分类等级 重置为空
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
}

14、完成添加分类的操作

调用api的添加分类接口,请求路径:categories,请求方法:post,
请求参数
cat_pid  分类父 ID  不能为空,如果要添加1级分类,则父分类Id应该设置为 `0`
cat_name  分类名称  不能为空
cat_level  分类层级  不能为空,`0`表示一级分类;`1`表示二级分类;`2`表示三级分类

继续完善addCate函数:请求参数前面已经定义过了addCateForm

// 点击按钮,添加新的分类
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) {
          this.$message.error('添加商品分类失败!')
        }
        this.$message.success('添加商品分类成功!')
        this.getCateList()
        this.addCateDialogVisible = false
    })
}

此时效果图:

15、实现编辑分类功能操作

先给编辑按钮添加点击事件:

<el-button size="mini" type="primary" icon="el-icon-edit"
           @click="editCateDialog(scope.row.cat_id)">编辑</el-button>

添加编辑对话框代码:

打开对话框是请求根据 id 查询分类的接口,请求路径:categories/:id,请求方法:get

然后把查询到的数据赋值给编辑分类的表单数据

<!--编辑商品分类的对话框-->
<el-dialog
      title="编辑分类信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!--内容主体区域-->
      <el-form :model="editForm" :rules="addCateFormRules" ref="editFormRef" label-width="90px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <!--底部按钮区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCateInfo">确 定</el-button>
      </span>
</el-dialog>

<script>
export default {
  data() {
     return {
        editDialogVisible: false, // 控制编辑分类的对话框是否显示
        // 编辑分类信息的表单数据
        editForm: {
          cat_name: ''
        }
     }
  },
  methods: {
     // 监听 编辑分类对话框
    async editCateDialog(id) {
      // 发起根据 id 查询分类的网络请求
      const { data: res } = await this.$http.get('categories/' + id)
      if (res.meta.status !== 200) {
        this.$message.error('查询分类信息失败')
      }
      this.editForm = res.data
      this.editDialogVisible = true
    },
    // 监听 编辑分类信息对话框的关闭事件
    editDialogClosed() {
      // 表单内容重置为空
      this.$refs.editFormRef.resetFields() // 通过ref引用调用resetFields方法
    }
  }
}
</script>

添加确定按钮绑定点击事件,完成用户信息的修改:

先预校验,然后调用api的编辑提交分类接口,请求路径:categories/:id,请求方法:put,请求参数:cat_name  分类名称 不能为空

// 点击按钮 修改角色信息
editRoleInfo() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        // 可以发起修改用户信息的网络请求
        const { data: res } = await this.$http.put('categories/' + this.editForm.cat_id,
          { cat_name: this.editForm.cat_name })
        if (res.meta.status !== 200) {
          return this.$message.error('编辑商品分类失败!')
        }
        this.$message.success('编辑商品分类成功!')
        this.getCateList()
        this.editDialogVisible = false
      })
}

ok,测试已经可以编辑分类名称:

16、实现删除分类功能操作

 给删除按钮添加点击事件:根据id

<el-button size="mini" type="danger" icon="el-icon-delete"
           @click="delCateDialog(scope.row.cat_id)">删除</el-button>

根据分类id,调用api的删除分类接口,请求路径:categories/:id,请求方法:delete

// 监听 删除分类对话框
async delCateDialog(id) {
      console.log(id)
      // 弹框 询问用户是否删除
      const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 如果用户确认删除,则返回值为字符串 confirm
      // 如果用户取消删除,则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      // console.log('确认删除')
      const { data: res } = await this.$http.delete('categories/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('删除分类失败!')
      }
      this.$message.success('删除分类成功!')
      this.getCateList()
}

完成效果图:

17、将goods_cate提交到远程仓库

先查看分支:

git branch

查看当前文件状态:

git status

然后提交到暂存区:

git add .

把当前提交到goods_cate分支:

git commit -m "完成了商品分类功能的开发"

推送到云端goods_cate分支:

git push

把goods_cate分支合并到master:

git checkout master
git merge goods_cate
git push

ok,完成!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!