电商后台管理项目d02
Posted 李耀书
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了电商后台管理项目d02相关的知识，希望对你有一定的参考价值。
商品管理
在做商品管理之前，首先我们要进行分析，三个组件页面的顺序，
商品管理模块的顺序就是，先对商品进行添加分类后才有参数，所以三个模块的顺序是
1、商品分类。
2、分类参数。
3、商品列表。
1、商品分类
第一步：
首先创建对应路由
注意：依旧是子级路由
{
path: '/categories',
name: "categories",
component: () => import( /* webpackChunkName:"commodity" */ './components/commodity/categories.vue'),
meta: {
bread: ['用户管理', '用户列表']
}
},
第二步：
设置对应的API
import Serve from '../../util/index'
export default {
// 数据列表
list(page) {
return Serve.get("categories", page);
},
// 删除
remove(id) {
return Serve.delete(`categories/${id}`);
},
// 编辑
editID(id) {
return Serve.get(`categories/${id}`);
},
editPut(id, list) {
return Serve.put(`categories/${id}`, list);
},
// 添加分类
add(Form) {
return Serve.post(`categories`, Form);
}
}
第三部：
页面逻辑
注意：
下载第三方插件vue-table-with-tree-grid分类表格，来展示数据
在main.js中导入
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
关于这个第三方插件的简单介绍：
<!--
分类表格:data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框):exndpa-type(是否展开数据)
show-index(是否设置索引列) index-text(设置索引列头)border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮)
-->
<template>
<div class="categories">
<!-- 导入面包屑导航 -->
<Bread />
<!-- 卡片视图区域 -->
<el-card>
<!-- 添加区域 -->
<el-row>
<el-col>
<el-button type="primary" @click="add">添加分类</el-button></el-col>
</el-row>
<!-- 表格区域 -->
<tree-table
:data="list"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text="#"
border
show-row-hover >
<!-- 是否有效 -->
<template slot="isok" slot-scope="scope">
<i
class="el-icon-success"
v-if="scope.row.cat_deleted == false"
style="color: #39ce39"></i>
</template>
<!-- 排序 -->
<template slot="sorting" slot-scope="scope">
<el-tag
type="primary"
size="mini"
effect="dark"
v-if="scope.row.cat_level == 0"> 一级 </el-tag>
<el-tag type="success" size="mini" effect="dark" v-else-if="scope.row.cat_level == 1" >二级</el-tag>
<el-tag type="warning" size="mini" effect="dark" v-else>三级 </el-tag>
</template>
<!-- 操作区域 -->
<template slot="opera" slot-scope="scope">
<el-button
class="el-icon-edit"
size="mini"
type="primary"
@click="edit(scope.row)"
>编辑</el-button
>
<el-button
class="el-icon-delete"
size="mini"
type="danger"
@click="del(scope.row)">删除</el-button>
</template>
</tree-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 3, 6, 9]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total" >
</el-pagination>
</el-card>
<!-- 添加商品分类对话框 -->
<el-dialog
title="添加商品分类"
:visible.sync="addDialogVisible"
width="40%"
@close="adddialog">
<el-form :model="addForm" :rules="addRules" ref="addRef">
<el-form-item label="分类名称" label-width="80px" prop="cat_name">
<el-input v-model="addForm.cat_name"></el-input>
</el-form-item>
<el-form-item label="父级分类" prop="cat_pid" label-width="80px">
<el-cascader
v-model="value"
:options="list"
:props="addProp"
@change="handleChange"
expandTrigger="hover"
clearable
change-on-select ></el-cascader>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCate">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑商品分类对话框 -->
<el-dialog title="提示" :visible.sync="editdialogVisible" width="40%">
<el-form :model="editList" :rules="addRules" ref="editRef">
<el-form-item label="分类名称" label-width="80px" prop="cat_name">
<el-input v-model="editList.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="editAdd">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
<script>
// 导入面包屑导航
import Bread from "@/bread/bread";
import CateApi from "@/api/commodity/categories";
export default {
data() {
return {
value: "", //用来绑定级联选择器中的分类的id值
addProp: {
value: "cat_id",
label: "cat_name",
children: "children",
},
columns: [
{ label: "商品名称", prop: "cat_name" },
{ label: "是否有效", type: "template", template: "isok" },
{ label: "排序", type: "template", template: "sorting" },
{ label: "操作", type: "template", template: "opera" },
],
// 添加商品分类校验
addRules: {
cat_name: {
required: true,
message: "分类名称不能为空",
trigger: "blur",
},
},
// 添加商品表单数据
addForm: {
cat_name: "",
cat_level: 0, //层级
cat_pid: 0, //父类的id
},
addDialogVisible: false, //添加数据对话框初始状态
list: [], //所有数据信息
// 分页数据
queryInfo: {
pagenum: 1,
pagesize: 3,
},
total: 0,
editList: {},
editdialogVisible: false, //编辑商品对话框初始状态
};
},
created() {
this.getList();
},
methods: {
// 添加商品分类
add() {
this.addDialogVisible = true;
},
/*
在级联选择器的中,当选中节点变化时触发 选中节点的值发生变化
当选择其中的值的长度大于0的时候,说明用户进行了选择，
那么就根据下标将最后一项的赋给定义的添加数据中的响应属性
如果用户没有进行选择，就对this.addFrom中的属性赋值为0,表示没有选中项，从而层级没有发生变化
*/
/*
value表示被选中上传的id
*/
handleChange(value) {
/*
cat_pid：父类的id
cat_level：所有的层级
*/
if (this.value.length > 0) {
this.addForm.cat_pid = this.value[this.value.length - 1];
this.addForm.cat_level = this.value.length;
} else {
this.addForm.cat_pid = 0;
this.addForm.cat_level = 0;
}
},
// 关闭添加对话框时，清空内容
adddialog() {
this.$refs.addRef.resetFields();
this.value = [];
this.addForm.cat_pid = 0;
this.addForm.cat_level = 0;
},
// 在添加分类对话框中点击添加按钮
addCate() {
this.$refs.addRef.validate(async (valid) => {
if (!valid) return;
const { data: res } = await CateApi.add(this.addForm);
if (res.meta.status !== 201) {
this.$message.error(res.meta.msg);
}
this.addForm.cat_id = 0;
this.addForm.cat_name = 0;
this.addForm.cat_level = 0;
this.getList();
});
this.addDialogVisible = false;
},
// 点击编辑按钮
async edit(item) {
const { data: res } = await CateApi.editID(item.cat_id);
if (res.meta.status !== 200) {
this.$message.error(res.meta.msg);
}
this.editList = res.data;
this.editdialogVisible = true;
},
// 点击编辑对话框确认按钮
editAdd() {
this.$refs.editRef.validate(async (valid) => {
if (!valid) return;
const { data: res } = await CateApi.editPut(
this.editList.cat_id,
this.editList
);
if (res.meta.status !== 200) {
this.$message.error(res.meta.msg);
}
this.editdialogVisible = false;
this.getList();
});
},
// 点击删除按钮
async del(item) {
const confirText = await this.$confirm(
"此操作将永久删除该文件, 是否继续?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).catch((err) => err);
if (confirText !== "confirm") {
return;
}
const { data: res } = await CateApi.remove(item.cat_id);
if (res.meta.status !== 200) {
this.$message.error(res.meta.msg);
}
this.$message.success("删除分类成功！");
this.getList();
},
// 获取所有数据
async getList() {
const { data: res } = await CateApi.list({ params: this.queryInfo });
if (res.meta.status !== 200) {
this.$message.error(res.meta.msg);
}
this.list = res.data.result;
this.total = res.data.total;
},
// 分页操作
handleSizeChange(val) {
this.queryInfo.pagesize = val;
console.log(this.queryInfo.pagesize);
this.getList();
},
handleCurrentChange(val) {
this.queyrInfo.pagenum = val;
this.getList();
},
},
components: {
Bread,
},
};
</script>
具体逻辑上述代码中都有注释…就不再赘述…
2、分类参数：
同样：建立路由，
{
path: '/params',
name: "params",
component: () => import( /* webpackChunkName: "commodity" */ './components/commodity/params.vue'),
meta: {
bread: ['商品分类', '分类参数']
}
},
以上是关于电商后台管理项目d02的主要内容，如果未能解决你的问题，请参考以下文章