Skip to content

Commit d1d3f95

Browse files
coderlwcoderlw
committed
分类功能已完成
1 parent 141c0c5 commit d1d3f95

File tree

5 files changed

+237
-2
lines changed

5 files changed

+237
-2
lines changed

‎package-lock.json

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"less": "^4.1.1",
1515
"less-loader": "^10.0.1",
1616
"vue": "^2.6.11",
17-
"vue-router": "^3.0.7"
17+
"vue-router": "^3.0.7",
18+
"vue-table-with-tree-grid": "^0.2.4"
1819
},
1920
"devDependencies": {
2021
"@vue/cli-plugin-babel": "~4.5.0",

‎src/components/goods/Cate.vue

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<template>
2+
<div>
3+
<!-- 面包屑区域 -->
4+
<el-breadcrumb separator-class="el-icon-arrow-right">
5+
<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
6+
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
7+
<el-breadcrumb-item>商品列表</el-breadcrumb-item>
8+
</el-breadcrumb>
9+
<!-- 卡片区域 -->
10+
<el-card>
11+
<el-row>
12+
<el-col>
13+
<el-button type="primary" @click="openAddCateDialog">添加分类</el-button>
14+
</el-col>
15+
</el-row>
16+
<tree-table :data="cateData" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border stripe class="tree-table">
17+
<template slot="isOk" slot-scope="scope">
18+
<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:blue"></i>
19+
<i class="el-icon-error" v-else style="color:red"></i>
20+
</template>
21+
<template slot="sort" slot-scope="scope">
22+
<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
23+
<el-tag type="success" v-else-if="scope.row.cat_level === 1" size="mini">二级</el-tag>
24+
<el-tag type="warning" v-else size="mini">三级</el-tag>
25+
</template>
26+
<template slot="to" slot-scope="scope">
27+
<el-button type='primary' icon="el-icon-edit" size="mini" @click="editDialog(scope.row.cat_id)">编辑</el-button>
28+
<el-button type='danger' icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">删除</el-button>
29+
</template>
30+
</tree-table>
31+
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[2, 5, 10, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
32+
</el-pagination>
33+
<!-- 添加分类对话框 -->
34+
<el-dialog title="添加分类" :visible.sync="addCateVisible" width="50%" @close="resetForm">
35+
<span>
36+
<el-form :model="addForm" :rules="addRules" ref="addRef">
37+
<el-form-item label="分类名称:" prop="cat_name" label-width="100px">
38+
<el-input v-model="addForm.cat_name"></el-input>
39+
</el-form-item>
40+
<el-form-item label="父级分类:" label-width="100px">
41+
<el-cascader v-model="selectKeys" expandTrigger='hover' :options="parentCateList" :props="cascaderProp" @change="handleSelect" clearable change-on-select></el-cascader>
42+
</el-form-item>
43+
</el-form>
44+
</span>
45+
<div slot="footer" class="dialog-footer">
46+
<el-button @click="addCateVisible = false">取 消</el-button>
47+
<el-button type="primary" @click="addCateSub">确 定</el-button>
48+
</div>
49+
</el-dialog>
50+
<!-- 编辑对话框 -->
51+
<el-dialog title="编辑分类" :visible.sync="editDialogVisible" width="50%" @close="resetEditForm">
52+
<el-form :model="editForm" ref="editRef">
53+
<el-form-item label="分类名称" label-width="100px">
54+
<el-input v-model="editForm.cat_name"></el-input>
55+
</el-form-item>
56+
</el-form>
57+
<div slot="footer" class="dialog-footer">
58+
<el-button @click="editDialogVisible = false">取 消</el-button>
59+
<el-button type="primary" @click="editCateSub">确 定</el-button>
60+
</div>
61+
</el-dialog>
62+
</el-card>
63+
</div>
64+
</template>
65+
66+
<script>
67+
export default {
68+
name: '',
69+
data() {
70+
return {
71+
queryInfo: {
72+
type: 3,
73+
pagenum: 1,
74+
pagesize: 5
75+
},
76+
cateData: [],
77+
total: 0,
78+
columns: [
79+
{
80+
label: '分类名称',
81+
prop: 'cat_name'
82+
},
83+
{
84+
label: '是否有效',
85+
type: 'template',
86+
template: 'isOk'
87+
},
88+
{
89+
label: '排序',
90+
type: 'template',
91+
template: 'sort'
92+
},
93+
{
94+
label: '操作',
95+
type: 'template',
96+
template: 'to'
97+
}
98+
],
99+
addCateVisible: false,
100+
addForm: {
101+
cat_name: '',
102+
cat_pid: 0,
103+
cat_level: 0
104+
},
105+
addRules: {
106+
cat_name: [
107+
{ required: true, message: '请输入要添加的分类名称', trigger: 'blur' }
108+
]
109+
},
110+
parentCateList: [],
111+
selectKeys: [],
112+
cascaderProp: {
113+
value: 'cat_id',
114+
label: 'cat_name',
115+
children: 'children'
116+
},
117+
editForm: {
118+
cat_id: 0,
119+
cat_name: ''
120+
},
121+
editDialogVisible: false,
122+
}
123+
},
124+
methods: {
125+
async getGoodsList() {
126+
const { data: res } = await this.$axios.get('categories', { params: this.queryInfo });
127+
if (res.meta.status !== 200) return this.$message.error('获取分类数据失败');
128+
this.cateData = res.data.result;
129+
this.total = res.data.total;
130+
},
131+
handleSizeChange(newSize) {
132+
this.queryInfo.pagesize = newSize;
133+
this.getGoodsList();
134+
},
135+
handleCurrentChange(newPage) {
136+
this.queryInfo.pagenum = newPage;
137+
this.getGoodsList();
138+
},
139+
async openAddCateDialog() {
140+
const { data: res } = await this.$axios.get('categories', { params: { type: 2 } });
141+
if (res.meta.status !== 200) return this.$message.error('获取分类数据失败');
142+
this.parentCateList = res.data;
143+
this.addCateVisible = true;
144+
},
145+
handleSelect() {
146+
if (this.selectKeys.length > 0) {
147+
this.addForm.cat_pid = this.selectKeys[this.selectKeys.length - 1];
148+
this.addForm.cat_level = this.selectKeys.length;
149+
} else {
150+
this.addForm.cat_pid = 0;
151+
this.addForm.cat_level = 0;
152+
}
153+
},
154+
resetForm() {
155+
this.$refs.addRef.resetFields();
156+
this.selectKeys = [];
157+
this.addForm.cat_pid = 0;
158+
this.addForm.cat_level = 0;
159+
},
160+
// 添加分类
161+
addCateSub() {
162+
this.$refs.addRef.validate(async valid => {
163+
if (!valid) return;
164+
const { data: res } = await this.$axios.post('categories', this.addForm);
165+
if (res.meta.status !== 201) return this.$message.error('创建分类失败');
166+
this.getGoodsList();
167+
this.$message.success('创建分类成功');
168+
this.addCateVisible = false;
169+
})
170+
},
171+
// 查询编辑数据
172+
async editDialog(id) {
173+
const { data: res } = await this.$axios.get('categories/' + id);
174+
if (res.meta.status !== 200) return this.$message.error('查询分类失败');
175+
this.editForm = res.data;
176+
this.editDialogVisible = true;
177+
},
178+
resetEditForm() {
179+
this.$refs.editRef.resetFields();
180+
},
181+
// 编辑分类名称
182+
async editCateSub() {
183+
const { data: res } = await this.$axios.put('categories/' + this.editForm.cat_id, this.editForm);
184+
if (res.meta.status !== 200) return this.$message.error('编辑分类失败');
185+
this.getGoodsList();
186+
this.$message.success('编辑分类成功');
187+
this.editDialogVisible = false;
188+
},
189+
// 删除分类
190+
async removeCate(id) {
191+
const resConfirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
192+
confirmButtonText: '确定',
193+
cancelButtonText: '取消',
194+
type: 'warning'
195+
}).catch(err => err);
196+
if (resConfirm !== 'confirm') return this.$message.error('已取消删除');
197+
const { data: res } = await this.$axios.delete('categories/' + id);
198+
console.log(res);
199+
// if (res.meta.status !== 200) return this.$message.error('删除失败');
200+
this.getGoodsList();
201+
this.$message.success('删除成功');
202+
}
203+
},
204+
created() {
205+
this.getGoodsList();
206+
}
207+
};
208+
</script>
209+
210+
<style scoped>
211+
.tree-table {
212+
margin: 15px 0;
213+
}
214+
.el-cascader {
215+
width: 100%;
216+
}
217+
</style>

‎src/main.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import './assets/fonts/iconfont.css'
1515
import axios from 'axios'
1616
// 引入弹框
1717
import { MessageBox } from 'element-ui';
18+
// 引入tree-grid
19+
import treeTable from 'vue-table-with-tree-grid';
1820
// 配置请求的根路径
1921
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
2022
axios.interceptors.request.use(config => {
@@ -25,6 +27,7 @@ axios.interceptors.request.use(config => {
2527
Vue.prototype.$axios = axios;
2628
Vue.prototype.$message = message;
2729
Vue.prototype.$comfirm = MessageBox;
30+
Vue.component('tree-table', treeTable);
2831

2932
Vue.use(less)
3033
Vue.use(ElementUI)

‎src/router/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Welcome from '@/components/home/Welcome.vue'
66
import Users from '@/components/users/Users.vue'
77
import Rights from '@/components/rights/Rights.vue'
88
import Roles from '@/components/rights/Roles.vue'
9+
import Cate from '@/components/goods/Cate.vue'
910

1011
Vue.use(Router)
1112

@@ -37,7 +38,12 @@ const router = new Router({
3738
{
3839
path: '/roles',
3940
component: Roles
40-
}]
41+
},
42+
{
43+
path: '/categories',
44+
component: Cate
45+
}
46+
]
4147
}]
4248
})
4349

0 commit comments

Comments
 (0)