当前位置：首页 » 《随便一记》 » 正文

笔记8：商品分类【Vue实战项目：电商管理系统（Element-UI）】_未来来

11 人参与  2022年03月17日 09:44  分类 : 《随便一记》  评论

点击全文阅读


文章目录

    • 1 样式
      • 1.1 设置路由
      • 1.2 完成表格区域展示
      • 1.3 实现分页功能
      • 1.4 实现添加分类功能
        • 1.4.1 完成弹窗绘制
        • 1.4.2 完成提交添加分类功能
        • 1.4.3 弹窗关闭时，重置数据
      • 1.5 实现删除功能
      • 1.6 实现修改分类名称功能

1 样式

在这里插入图片描述

1.1 设置路由

  • 创建商品分类页面../components/goods/Cate.vue，并添加一些基本的元素
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</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="postcss" scoped>
</style>
  • 设置路由
import Cate from '../components/goods/Cate.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/home', component: Home, redirect: '/welcome', children: [
        ...
        { path: '/categories', component: Cate },
      ]
    }
  ]
})

1.2 完成表格区域展示

  • 在页面创建的时候，通过接口获取商品分类数据；
<script>
export default {
  data() {
    return {
      // 商品分类数据列表接口查询条件
      querInfo: {
        type: [],
        pagenum: 1,
        pagesize: 5,
      },
      // 商品分类列表数据
      cateList: [],
      total: 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("商品分类数据列表失败！");
      }

      this.cateList = res.data.result;
      this.total = res.data.total;
      console.log(this.cateList);
    },
  },
};
</script>
  • 绘制表格区域

使用的是第三方组件：vue-table-with-tree-grid
查看官方样例

  • 安装后，在main.js中配置全局导入vue-table-with-tree-grid
// 导入vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid'

// 全局注册
Vue.component('tree-table', TreeTable)
  • 使用tree-table绘制表格
  <!-- 表格区域 -->
  <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
        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" scope="scope">
      <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
      <el-tag
        size="mini"
        type="success"
        v-else-if="scope.row.cat_level === 1"
        >二级</el-tag
      >
      <el-tag
        size="mini"
        type="warning"
        v-else-if="scope.row.cat_level === 2"
        >三级</el-tag
      >
    </template>
    <!-- 操作 -->
    <template slot="opt">
      <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
      <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
    </template>
  </tree-table>
  • 参数定义：

知识点：
vue-table-with-tree-grid的作用域插槽的形式

data() {
return {
    ...
  // 为table指定列的定义
  columns: [
    { label: "分类名称", prop: "cat_name" },
    {
      label: "是否有效",
      // 表示将当前列定义成模板列
      type: "template",
      // 表示当前这一列使用模板名称
      template: "isok",
    },
    {
      label: "排序",
      type: "template",
      template: "order",
    },
    {
      label: "操作",
      type: "template",
      template: "opt",
    },
  ],
};

1.3 实现分页功能

  • 绘制分页
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="querInfo.pagenum"
    :page-sizes="[3, 5, 7, 10]"
    :page-size="5"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  • 实现监听 pagesize 和 pagenum 改变的方法
// 监听pagesize改变
handleSizeChange(newSize) {
  this.querInfo.pagesize = newSize;
  this.getCateList();
},
// 监听pagenum改变
handleCurrentChange(newPageNum) {
  this.querInfo.pagenum = newPageNum;
  this.getCateList();
},

在这里插入图片描述

1.4 实现添加分类功能

在这里插入图片描述

1.4.1 完成弹窗绘制

  • 展开添加弹窗时，需要获取一、二级父级数据
// 添加分类弹窗中获取父级数据
async getParentCateList() {
  const { data: res } = await this.$http.get("categories", {
    params: { type: 2 },
  });
  if (res.meta.status !== 200) {
    return this.$message.error("父级数据列表失败！");
  }
  this.parentCateList = res.data;
},
  • 绘制
<!-- 添加分类对话框 -->
<el-dialog
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%"
  @close="addCateDialogClosed"
>
  <!-- 添加分类表单 -->
  <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-cascader
        expand-trigger="hover"
        v-model="selectKeys"
        :options="parentCateList"
        :props="cascaderProps"
        @change="parentCateChange"
        clearable
        change-on-select
      ></el-cascader>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate()">确 定</el-button>
  </span>
</el-dialog>

父级分类的选择器使用的是Cascader 级联选择器.

1.4.2 完成提交添加分类功能

  • 在选择父级分类时，需要做好响应参数的修改
// 添加分类选择项变化触发方法
parentCateChange() {
  console.log(this.selectKeys);
  // 如果selectKeys的长度大于0，则证明选中了父级分类
  if (this.selectKeys.length > 0) {
    // 父id
    this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1];
    // 当前分类的等级赋值
    this.addCateForm.cat_level = this.selectKeys.length;
    return;
  } else {
    // 长度为0时，添加的分类为一级分类
    // 父id
    this.addCateForm.cat_pid = 0;
    // 当前分类的等级赋值
    this.addCateForm.cat_level = 0;
  }
},
  • 提交添加请求
// 添加分类确定按钮
addCate() {
  this.$refs.addCateFormRef.validate(async (valid) => {
    if (!valid) return;
    // post 添加分类操作
    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;
  });
},

1.4.3 弹窗关闭时，重置数据

  • 重置表单数据
// 监听添加分类dialg的关闭事件，重置表单数据
addCateDialogClosed() {
  this.$refs.addCateFormRef.resetFields();
  this.selectKeys = [];
  this.addCateForm.cat_level = 0;
  this.addCateForm.cat_pid = 0;
},

1.5 实现删除功能

  • 实现删除方法
// 通过id删除分类
async removeCateById(id) {
  const confirmResult = await this.$confirm(
    "此操作将永久删除该分类, 是否继续?",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).catch((err) => {
    return err;
  });

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

    this.$message.success("删除分类成功！");
    this.getCateList();
  }
},

1.6 实现修改分类名称功能

在这里插入图片描述

  • 绘制分类弹窗
<!-- 编辑分类对话框 -->
<el-dialog
  title="修改分类名称"
  :visible.sync="editCateDialogVisible"
  width="50%"
  @close="editCateDialogClosed()"
>
  <!-- 编辑分类表单 -->
  <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="editCate()">确 定</el-button>
  </span>
</el-dialog>
  • 打开编辑弹窗时，默认填充当前的分类名称
// 通过id获取分类信息
async showCateEditDialog(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;

  // 获取级联选择器的数据
  this.getParentCateList();
  // 级联选择器的数据填充
  let cat_level = this.editCateForm.cat_level;
  console.log(cat_level);
},
  • 实现修改名称方法
// 提交编辑弹窗的内容
editCate() {
  this.$refs.editCateFormRef.validate(async (valid) => {
    if (!valid) return;
    // put 编辑分类操作
    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;
  });
},

点击全文阅读


本文链接：http://zhangshiyu.com/post/36286.html

分类  添加  数据  
<< 上一篇 下一篇 >>

  • 评论（0）
  • 赞助本站

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

  • 穿成骑兵队长后，我重铸大唐英魂免费阅读全文，主角王成王臣小说完整版最新章节
  • 《爱你不止亿点点，总裁高调宠妻日常》by无墨空空小说完结版在线阅读
  • 《让位》快手热推张兰邱健免费阅读
  • 《满院宅斗强者，本妾室好想逃》小说在线试读，《满院宅斗强者，本妾室好想逃》最新章节目录
  • 满院宅斗强者，本妾室好想逃小说，满院宅斗强者，本妾室好想逃免费阅读
  • 求许婉若谢羡予小说免费资源
  • 顾屿青梅陈菲菲菲菲屿哥小说结婚两年，老公和青梅有了孩子在线阅读
  • 结婚两年，老公和青梅有了孩子小说的最新章节在哪里更新？免费追踪阅读
  • 求沐风夏璐小说免费资源
  • 已完结小说《重生后不再阻止嫂子孕期选美》在线章节阅读
  • PHP微信小程序停车位预约管理系统设计与实现计算机毕业设计源代码作品和开题报告
  • 新版 Navicat Premium 17 安装教程 （亲测可用）

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1